fengchuanyu 1 周之前
父节点
当前提交
2ddda587ce
共有 1 个文件被更改,包括 143 次插入2 次删除
  1. 143 2
      7-移动端/练习4_猫眼电影.html

+ 143 - 2
7-移动端/练习4_猫眼电影.html

@@ -12,7 +12,9 @@
             margin: 0;
             padding: 0;
         }
-
+        html{
+            background-color: #eee;
+        }
         li {
             list-style: none;
         }
@@ -171,6 +173,10 @@
         /* 底部导航区域 结束 */
         .scroll-content{
             padding-top: 2rem;
+            padding-bottom: 1rem;
+            /* height: 600px; */
+            /* overflow: scroll; */
+
         }
         /* 最受好评电影区域 开始 */
         .scroll-content .movie-item img{
@@ -179,6 +185,7 @@
         }
         .scroll-content .like-movie{
             padding: 12px 15px;
+            background-color: #fff;
         }
         .scroll-content .like-movie .title{
             font-size: 14px;
@@ -214,6 +221,53 @@
             overflow: scroll;
         }
         /* 最受好评电影区域 结束 */
+        /* 全部电影区域 开始 */
+        .movie-list{
+            margin-top: 10px;
+            background-color: #fff;
+            padding: .24rem 0;
+        }
+        .movie-list .list-item{
+            display: flex;
+            padding-left: .3rem;
+            margin-top: 10px;
+        }
+        .movie-list .list-item img{
+            width: 1.3rem;
+        }
+        .movie-list .movie-info{
+            line-height: .45rem;
+        }
+        .movie-list .movie-info h2{
+            font-size: .34rem;
+            color: #333;
+            font-weight: 700;
+        }
+        .movie-list .list-item p{
+            font-size: .26rem;
+            color: #666;
+        }
+        .movie-list .list-item .btn{
+            background-color: #f03d37;
+            color: #fff;
+            font-size: .26rem;
+            font-weight: 500;
+            width: 1rem;
+            height: 0.6rem;
+            border-radius: .27rem;
+            text-align: center;
+            line-height: .6rem;
+            align-self: center;
+            margin-left: 1rem;
+        }
+        .movie-list .movie-right{
+            display: flex;
+            margin-left: 10px;
+            border-bottom: 1px solid #ddd;
+            flex-grow: 1;
+        }
+
+        /* 全部电影区域 结束 */
     </style>
 </head>
 
@@ -385,7 +439,94 @@
                     </div>
                 </div>
             </div>
-            <div class="movie-list"></div>
+            <div class="movie-list">
+                <!-- 每一个电影 -->
+                <div class="list-item">
+                    <div class="movie-left">
+                        <img src="./img/dy.jpg" alt="">
+                    </div>
+                    <div class="movie-right">
+                        <div class="movie-info">
+                            <h2>浪浪山小妖怪</h2>
+                            <p>观众评分 <span>9.7</span> </p>
+                            <p>主演:陈子平,路扬,董汶亮</p>
+                            <p>今天267家影院放映2344场</p>
+                        </div>
+                        <div class="btn">购票</div>
+                    </div>
+                </div>
+
+                <div class="list-item">
+                    <div class="movie-left">
+                        <img src="./img/dy.jpg" alt="">
+                    </div>
+                    <div class="movie-right">
+                        <div class="movie-info">
+                            <h2>浪浪山小妖怪</h2>
+                            <p>观众评分 <span>9.7</span> </p>
+                            <p>主演:陈子平,路扬,董汶亮</p>
+                            <p>今天267家影院放映2344场</p>
+                        </div>
+                        <div class="btn">购票</div>
+                    </div>
+                </div>
+                <div class="list-item">
+                    <div class="movie-left">
+                        <img src="./img/dy.jpg" alt="">
+                    </div>
+                    <div class="movie-right">
+                        <div class="movie-info">
+                            <h2>浪浪山小妖怪</h2>
+                            <p>观众评分 <span>9.7</span> </p>
+                            <p>主演:陈子平,路扬,董汶亮</p>
+                            <p>今天267家影院放映2344场</p>
+                        </div>
+                        <div class="btn">购票</div>
+                    </div>
+                </div>
+                <div class="list-item">
+                    <div class="movie-left">
+                        <img src="./img/dy.jpg" alt="">
+                    </div>
+                    <div class="movie-right">
+                        <div class="movie-info">
+                            <h2>浪浪山小妖怪</h2>
+                            <p>观众评分 <span>9.7</span> </p>
+                            <p>主演:陈子平,路扬,董汶亮</p>
+                            <p>今天267家影院放映2344场</p>
+                        </div>
+                        <div class="btn">购票</div>
+                    </div>
+                </div>
+                <div class="list-item">
+                    <div class="movie-left">
+                        <img src="./img/dy.jpg" alt="">
+                    </div>
+                    <div class="movie-right">
+                        <div class="movie-info">
+                            <h2>浪浪山小妖怪</h2>
+                            <p>观众评分 <span>9.7</span> </p>
+                            <p>主演:陈子平,路扬,董汶亮</p>
+                            <p>今天267家影院放映2344场</p>
+                        </div>
+                        <div class="btn">购票</div>
+                    </div>
+                </div>
+                <div class="list-item">
+                    <div class="movie-left">
+                        <img src="./img/dy.jpg" alt="">
+                    </div>
+                    <div class="movie-right">
+                        <div class="movie-info">
+                            <h2>浪浪山小妖怪</h2>
+                            <p>观众评分 <span>9.7</span> </p>
+                            <p>主演:陈子平,路扬,董汶亮</p>
+                            <p>今天267家影院放映2344场</p>
+                        </div>
+                        <div class="btn">购票</div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
     <script src="./js/rem.js"></script>