会员中心修改密码、评论、登录日志和收藏电影4个页面的内容。
一、修改密码页面：
1 {% extends "home/home.html" %}
2
3 {% block css %}
4 <style>
5 .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
6 padding-right: 3px;
7 padding-left: 3px;
8 }
9 </style>
10 {% endblock %}
11
12 {% block content %}
13 {% include "home/menu.html" %}
14 <div class="col-md-9">
15 <div class="panel panel-warning">
16 <div class="panel-heading">
17 <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 会员中心</h3>
18 </div>
19 <div class="panel-body">
20 <form role="form">
21 <fieldset>
22 <div class="form-group">
23 <label for="input_oldpwd"><span class="glyphicon glyphicon-lock"></span> 旧密码</label>
24 <input id="input_oldpwd" class="form-control" placeholder="旧密码" name="oldpwd" type="password"
25 autofocus>
26 </div>
27 <div class="col-md-12" id="error_oldpwd"></div>
28 <div class="form-group">
29 <label for="input_newpwd"><span class="glyphicon glyphicon-lock"></span> 新密码</label>
30 <input id="input_newpwd" class="form-control" placeholder="新密码" name="newpwd" type="password"
31 autofocus>
32 </div>
33 <div class="col-md-12" id="error_newpwd"></div>
34 <a href="login.html" class="btn btn-success"><span class="glyphicon glyphicon-edit"></span> 修改密码</a>
35 </fieldset>
36 </form>
37 </div>
38 </div>
39 </div>
40 {% endblock %}
41
42 {% block js %}
43 <script>
44 $(document).ready(function () {
45 $("#m-2").addClass("active");
46 });
47 </script>
48
修改密码页面效果图：
二、评论页面：
1 {% extends "home/home.html" %}
2
3 {% block css %}
4 <style>
5 .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
6 padding-right: 3px;
7 padding-left: 3px;
8 }
9 </style>
10 {% endblock %}
11
12 {% block content %}
13 {% include "home/menu.html" %}
14 <div class="col-md-9">
15 <div class="panel panel-warning">
16 <div class="panel-heading">
17 <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 评论记录</h3>
18 </div>
19 <div class="panel-body">
20 <ul class="commentList">
21 <li class="item cl">
22 <a href="user.html">
23 <i class="avatar size-L radius">
24 <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
25 </i>
26 </a>
27 <div class="comment-main">
28 <header class="comment-header">
29 <div class="comment-meta">
30 <a class="comment-author" href="user.html">xiaoli</a>
31 评论于
32 <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51
33 </time>
34 </div>
35 </header>
36 <div class="comment-body">
37 <p>这电影真好看！</p>
38 </div>
39 </div>
40 </li>
41 <li class="item cl">
42 <a href="user.html">
43 <i class="avatar size-L radius">
44 <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
45 </i>
46 </a>
47 <div class="comment-main">
48 <header class="comment-header">
49 <div class="comment-meta">
50 <a class="comment-author" href="user.html">xiaoli</a>
51 评论于
52 <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51
53 </time>
54 </div>
55 </header>
56 <div class="comment-body">
57 <p>这电影真好看！</p>
58 </div>
59 </div>
60 </li>
61 <li class="item cl">
62 <a href="user.html">
63 <i class="avatar size-L radius">
64 <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
65 </i>
66 </a>
67 <div class="comment-main">
68 <header class="comment-header">
69 <div class="comment-meta">
70 <a class="comment-author" href="user.html">xiaoli</a>
71 评论于
72 <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51
73 </time>
74 </div>
75 </header>
76 <div class="comment-body">
77 <p>这电影真好看！</p>
78 </div>
79 </div>
80 </li>
81 <li class="item cl">
82 <a href="user.html">
83 <i class="avatar size-L radius">
84 <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
85 </i>
86 </a>
87 <div class="comment-main">
88 <header class="comment-header">
89 <div class="comment-meta">
90 <a class="comment-author" href="user.html">xiaoli</a>
91 评论于
92 <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51
93 </time>
94 </div>
95 </header>
96 <div class="comment-body">
97 <p>这电影真好看！</p>
98 </div>
99 </div>
100 </li>
101 <li class="item cl">
102 <a href="user.html">
103 <i class="avatar size-L radius">
104 <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
105 </i>
106 </a>
107 <div class="comment-main">
108 <header class="comment-header">
109 <div class="comment-meta">
110 <a class="comment-author" href="user.html">xiaoli</a>
111 评论于
112 <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51
113 </time>
114 </div>
115 </header>
116 <div class="comment-body">
117 <p>这电影真好看！</p>
118 </div>
119 </div>
120 </li>
121 </ul>
122 <div class="col-md-12 text-center">
123 <nav aria-label="Page navigation">
124 <ul class="pagination">
125 <li>
126 <a href="#" aria-label="First">
127 <span aria-hidden="true">首页</span>
128 </a>
129 </li>
130 <li>
131 <a href="#" aria-label="Previous">
132 <span aria-hidden="true">上一页</span>
133 </a>
134 </li>
135 <li><a href="#">1 / 10</a></li>
136 <li>
137 <a href="#" aria-label="Next">
138 <span aria-hidden="true">下一页</span>
139 </a>
140 </li>
141 <li>
142 <a href="#" aria-label="Last">
143 <span aria-hidden="true">尾页</span>
144 </a>
145 </li>
146 </ul>
147 </nav>
148 </div>
149 </div>
150 </div>
151 </div>
152 {% endblock %}
153
154 {% block js %}
155 <script>
156 $(document).ready(function () {
157 $("#m-3").addClass("active");
158 });
159 </script>
160
评论页面效果图：
三、登录日志页面：
1 {% extends "home/home.html" %}
2
3 {% block css %}
4 <style>
5 .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
6 padding-right: 3px;
7 padding-left: 3px;
8 }
9 </style>
10 {% endblock %}
11
12 {% block content %}
13 {% include "home/menu.html" %}
14 <div class="col-md-9">
15 <div class="panel panel-warning">
16 <div class="panel-heading">
17 <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 登录日志</h3>
18 </div>
19 <div class="panel-body">
20 <table class="table table-bordered">
21 <tr>
22 <td style="width:10%">编号</td>
23 <td style="width:30%">登录时间</td>
24 <td style="width:30%">登录IP</td>
25 <td style="width:30%">登录地址</td>
26 </tr>
27 <tr>
28 <td>1</td>
29 <td>2017-01-01 12:00:00</td>
30 <td>192.168.4.1</td>
31 <td>云南昆明</td>
32 </tr>
33 <tr>
34 <td>1</td>
35 <td>2017-01-01 12:00:00</td>
36 <td>192.168.4.1</td>
37 <td>云南昆明</td>
38 </tr>
39 <tr>
40 <td>1</td>
41 <td>2017-01-01 12:00:00</td>
42 <td>192.168.4.1</td>
43 <td>云南昆明</td>
44 </tr>
45 <tr>
46 <td>1</td>
47 <td>2017-01-01 12:00:00</td>
48 <td>192.168.4.1</td>
49 <td>云南昆明</td>
50 </tr>
51 <tr>
52 <td>1</td>
53 <td>2017-01-01 12:00:00</td>
54 <td>192.168.4.1</td>
55 <td>云南昆明</td>
56 </tr>
57
58 </table>
59 </div>
60 </div>
61 </div>
62 {% endblock %}
63
64 {% block js %}
65 <script>
66 $(document).ready(function () {
67 $("#m-4").addClass("active");
68 });
69 </script>
70
登录日志页面效果图：
四、收藏电影页面：
1 {% extends "home/home.html" %}
2
3 {% block css %}
4 <style>
5 .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
6 padding-right: 3px;
7 padding-left: 3px;
8 }
9 </style>
10 {% endblock %}
11
12 {% block content %}
13 {% include "home/menu.html" %}
14 <div class="col-md-9">
15 <div class="panel panel-warning">
16 <div class="panel-heading">
17 <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 收藏电影</h3>
18 </div>
19 <div class="panel-body">
20 <div class="col-md-12">
21 <div class="media">
22 <div class="media-left">
23 <a href="play.html">
24 <img class="media-object" src="holder.js/131x83" alt="环太平洋">
25 </a>
26 </div>
27 <div class="media-body">
28 <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span
29 class="glyphicon glyphicon-play"></span>播放影片</a></h4>
30 该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
31 </div>
32 </div>
33 <div class="media">
34 <div class="media-left">
35 <a href="play.html">
36 <img class="media-object" src="holder.js/131x83" alt="环太平洋">
37 </a>
38 </div>
39 <div class="media-body">
40 <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span
41 class="glyphicon glyphicon-play"></span>播放影片</a></h4>
42 该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
43 </div>
44 </div>
45 <div class="media">
46 <div class="media-left">
47 <a href="play.html">
48 <img class="media-object" src="holder.js/131x83" alt="环太平洋">
49 </a>
50 </div>
51 <div class="media-body">
52 <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span
53 class="glyphicon glyphicon-play"></span>播放影片</a></h4>
54 该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
55 </div>
56 </div>
57 <div class="media">
58 <div class="media-left">
59 <a href="play.html">
60 <img class="media-object" src="holder.js/131x83" alt="环太平洋">
61 </a>
62 </div>
63 <div class="media-body">
64 <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span
65 class="glyphicon glyphicon-play"></span>播放影片</a></h4>
66 该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
67 </div>
68 </div>
69 <div class="media">
70 <div class="media-left">
71 <a href="play.html">
72 <img class="media-object" src="holder.js/131x83" alt="环太平洋">
73 </a>
74 </div>
75 <div class="media-body">
76 <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span
77 class="glyphicon glyphicon-play"></span>播放影片</a></h4>
78 该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
79 </div>
80 </div>
81 </div>
82 <div class="col-md-12 text-center" style="margin-top:6px;">
83 <nav aria-label="Page navigation">
84 <ul class="pagination">
85 <li>
86 <a href="#" aria-label="First">
87 <span aria-hidden="true">首页</span>
88 </a>
89 </li>
90 <li>
91 <a href="#" aria-label="Previous">
92 <span aria-hidden="true">上一页</span>
93 </a>
94 </li>
95 <li><a href="#">1 / 10</a></li>
96 <li>
97 <a href="#" aria-label="Next">
98 <span aria-hidden="true">下一页</span>
99 </a>
100 </li>
101 <li>
102 <a href="#" aria-label="Last">
103 <span aria-hidden="true">尾页</span>
104 </a>
105 </li>
106 </ul>
107 </nav>
108 </div>
109 </div>
110 </div>
111 </div>
112 {% endblock %}
113
114 {% block js %}
115 <script>
116 $(document).ready(function () {
117 $("#m-5").addClass("active");
118 });
119 </script>
120
收藏电影页面效果图：
【结束】
