zhensolid
/
Python-100-Days


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
							<!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;
        }
        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 }}老师</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.good_count }})</a>
                <a href="/bad/{{ x.no }}" class="button">差评({{ x.bad_count }})</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')
                $.getJSON(url, function(json) {
                   if (json.code == 200) {
                       a.text(json.result);
                   }
                });
            });
        });
    </script>
</body>
</html>