zhensolid
/
Python-100-Days


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
							<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>讲师信息</title>
    <style>
        .container {
            width: 960px;
            margin: 0 auto;
        }
        .basic {
            width: 60%;
            float: left;
        }
        .potrait {
            width: 40%;
            float: left;
            text-align: right;
        }
        hr {
            clear: both;
        }
        .button {
            display: inline-block;
            width: 80px;
            height: 30px;
            background-color: red;
            color: white;
            font: 16px/30px Arial;
            text-decoration: none;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 页面的显示逻辑 -->
    {% for x in teachers_list %}
        <div class="container">
            <div class="basic">
                <h1>{{ x.name }}老师 - {{ x.subject.name }}</h1>
                <p><strong>讲师简介</strong></p>
                <p>{{ x.intro }}</p>
                <p><strong>教学理念</strong></p>
                <p>{{ x.motto }}</p>
                <a href="/good/{{ x.no }}" class="button">好评({{ x.gcount }})</a>
                <a href="/bad/{{ x.no }}" class="button">差评({{ x.bcount }})</a>
            </div>
            <div class="potrait">
                {% if x.photo %}
                <img src="{% static x.photo %}">
                {% endif %}
            </div>
            <hr>
        </div>
    {% endfor %}
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script>
       $(function() {
           $('.basic .button').on('click', function(evt) {
               evt.preventDefault();
               var $a = $(evt.target);
               var url = $a.attr('href');
               $.ajax({
                   'url': url,
                   'type': 'get',
                   'data': {},
                   'dataType': 'json',
                   'success': function(json) {
                       if (json.code == 200) {
                           $a.text(json.result);
                       } else if (json.code == 403) {
                           alert(json.result);
                       }
                   },
                   'error': function() {}
               });
           });
       });
    </script>
</body>
</html>