第一阶段（八）

2021.05.10 杨传伟

任务：完成星级评分版块

代码部分：

  1 <div id="main">
  2         <div class="cat"></div>
  3         <div class="content">
  4             <div class="mvname"><h2>{{ title }}</h2></div>
  5             <p class="picture"><img src="{{ img }}" height="200px" width="140px" /></p>
  6                         <p class="instroction">
  7                             导演: {{ director }} <br>
  8                             主演: {{ star }}<br>
  9                             类型：{{ type_movie }}<br>
 10                             制片国家/地区: {{ area }}<br>
 11                             语言: {{ language_movie }}<br>
 12                             上映日期: {{ date_time }}<br>
 13                             片长: {{ timelen }}<br>
 14                         </p>
 15             <div id="bean" d="{{score}}" style="display:none"></div>
 16             <div id="one" d="{{str_one}}" style="display:none"></div>
 17             <div id="two" d="{{str_two}}" style="display:none"></div>
 18             <div id="three" d="{{str_three}}" style="display:none"></div>
 19             <div class="score">
 20                 <p class="star">豆瓣评分：<font size="5" face="arial" color="black">{{ score }}</font></p>
 21                 <canvas width="250" height="20" id="D_myCanvas"></canvas>
 22             </div>
 23             <script>
 24                 var one = document.getElementById('one').getAttribute('d');
 25                 var two = document.getElementById('two').getAttribute('d');
 26                 var three = document.getElementById('three').getAttribute('d');
 27                 var bean=document.getElementById('bean').getAttribute('d');
 28                 {#alert(one+two+three)#}
 29                 one_s=[]
 30                 two_s=[]
 31                 three_s=[]
 32                 appendUlBody ="";
 33                 if(one!="")
 34                 {
 35                     one_s=restr_s(one);
 36                     appendUlBody =appendUlBody+ "<p class='star'>腾讯视频评分：<font size='5' face='arial' color='black'>"+ one_s[1]+
 37                     "</font></p>" + "<canvas width='250' height='20' id='T_myCanvas'></canvas>"
 38                 }
 39                 if( two!="")
 40                 {
 41                     two_s=restr_s(two);
 42                     appendUlBody = appendUlBody+ "<p class='star'>爱奇艺评分：<font size='5' face='arial' color='black'>"+ two_s[1]+
 43                     "</font></p>" + "<canvas width='250' height='20' id='A_myCanvas'></canvas>"
 44                 }
 45                 if(three!="")
 46                 {
 47                     three_s=restr_s(three);
 48                     appendUlBody = appendUlBody+ "<p class='star'>IMDB评分：<font size='5' face='arial' color='black'>"+ three_s[1]+
 49                     "</font></p>" + "<canvas width='250' height='20' id='I_myCanvas'></canvas>"
 50                 }
 51                 $(".score").append(appendUlBody);
 52                 function restr_s(str){
 53                     if(str!=''){
 54                         str_s=str.split(", ")
 55                         for(i=0;i<str_s.length;i++){
 56                             if(i!=0&&i!=str_s.length-1){
 57                                 str_s[i]=str_s[i].slice(1,str_s[i].length-1)
 58                             }else{
 59                                 if(i==str_s.length-1){
 60                                     str_s[i]=str_s[i].slice(1,str_s[i].length-2)
 61                                 }else{
 62                                     str_s[i]=str_s[i].slice(2,str_s[i].length-1)
 63                                 }
 64                             }
 65                         }
 66                     }
 67                     return str_s;
 68                 }
 69             </script>
 70             <div class="collect">
 71                 <button class="button">想看</button>
 72                 <button class="button">在看</button>
 73                 <button class="button">看过</button>
 74             </div>
 75             <div class="story">
 76                 <div class="p1"><br>电影剧情简介  · · · · · ·</div>
 77                 <p class="p_story">{{summary}}
 78                 </p>
 79             </div>
 80         </div>
 81         <div class="sidebar">
 82             <div class="origin">
 83                 <div class="p1"><br>在哪儿看这部电影  · · · · · ·</div>
 84                 <div class="p2">
 85                 </div>
 86                 <script>
 87                     appendUlBody ="";
 88                     if(one!="")
 89                     {
 90                         one_s=restr_s(one);
 91                         appendUlBody =appendUlBody+ '<div class="p4"> <a href="'+one_s[2]+'" style="text-decoration:none;">腾讯视频</a></div>'+
 92                             '<div class="p3_1">'+one_s[3]+'</div><br><br>';
 93                     }
 94                     if( two!="")
 95                     {
 96                         two_s=restr_s(two);
 97                         appendUlBody =appendUlBody+ '<div class="p4"> <a href="'+two_s[2]+'" style="text-decoration:none;">爱奇艺</a></div>'+
 98                             '<div class="p3_1">'+two_s[3]+'</div><br>';
 99                     }
100                     $(".p2").append(appendUlBody);
101                 </script>
102             </div>
103             <p class="ad_right"></p>
104         </div>
105     </div>

2021.05.10 李楠

任务：完成星级评分版块

2021.05.10 章英杰

今天任务：对电影首页页面进行优化

经我们小组成员讨论，决定对电影首页页面布局及功能进行如下优化：

①对分类模块进行留白（添加侧边距）

②添加搜索查询按钮

③对头部导航栏添加背景图

④增加下滑式分页功能

⑤星级评分

 

今天主要完成了任务一，在原代码的基础上主要添加了两个CSS模块：

 1 .classfiy_1 {
 2     display:inline-block;
 3     margin-top:15px;
 4     margin-left: 200px;
 5     margin-right: 50px;
 6 }
 7 .classfiy_2 {
 8     width: 1100px;
 9     height: 50px;
10     /*margin-left: 100px;*/
11     /**/
12     float: left;
13 }

 

截图：

任务看板

团队照片

 

posted @ 2021-05-10 19:56  靠谱杨  阅读(48)  评论(0)  编辑  收藏  举报