update:世界电影2

landjj321

2021-03-25 942aa3bbbcb0b8ecb629ff8203f78fcde01b444e

update:世界电影2

 src/assets/film/film31.png

 src/assets/film/film33.png

 src/assets/film/film34.png

 src/assets/film/film36.png

 src/assets/film/film37.png

 src/assets/film/film38.png

 src/views/film/film_china.vue

@@ -225,8 +225,7 @@
      <div class="programa wrapper">

        <div class="programa-nav">

          <div class="programa-nav-title">经典影视</div>
          <div class="programa-nav-title">科幻</div>
          <div class="programa-nav-item">
            <span>猜你喜欢</span>
            <span>推荐排行</span>
@@ -238,49 +237,152 @@

        </div>

        <div class="programa-content">
          <div class="programa-film">
            <img src="../../assets/film/film.png" alt="">
            <p class="film-name">阿甘正传</p>
            <p class="film-des">豆瓣高分电影</p>
        <div class="programa-content4">
          <div class="programa-film-group">
            <div class="programa-film">
              <img src="../../assets/film/film31.png" alt="">
              <p class="film-name">阿甘正传</p>
              <p class="film-des">豆瓣高分电影</p>
            </div>
            <div class="programa-film">
              <img src="../../assets/film/film33.png" alt="">
              <p class="film-name">阿甘正传</p>
              <p class="film-des">豆瓣高分电影</p>
            </div>
            <div class="programa-film">
              <img src="../../assets/film/film33.png" alt="">
              <p class="film-name">阿甘正传</p>
              <p class="film-des">豆瓣高分电影</p>
            </div>
            <div class="programa-film">
              <img src="../../assets/film/film34.png" alt="">
              <p class="film-name">阿甘正传</p>
              <p class="film-des">豆瓣高分电影</p>
            </div>
            <div class="programa-film">
              <img src="../../assets/film/film36.png" alt="">
              <p class="film-name">阿甘正传</p>
              <p class="film-des">豆瓣高分电影</p>
            </div>
            <div class="programa-film">
              <img src="../../assets/film/film36.png" alt="">
              <p class="film-name">阿甘正传</p>
              <p class="film-des">豆瓣高分电影</p>
            </div>
            <div class="programa-film">
              <img src="../../assets/film/film37.png" alt="">
              <p class="film-name">阿甘正传</p>
              <p class="film-des">豆瓣高分电影</p>
            </div>
            <div class="programa-film">
              <img src="../../assets/film/film38.png" alt="">
              <p class="film-name">阿甘正传</p>
              <p class="film-des">豆瓣高分电影</p>
            </div>
          </div>
          <div class="programa-film-rank">
            <div class="programa-rank-header">
              <div class="tab1">热播放</div>
              <div class="tab2">飙升榜</div>
              <div class="tab3">更多></div>
            </div>
            <div class="programa-film-rank-list">
              <div class="rank-list-item">
                <img class="sort" src="../../assets/film/first.png" alt="">
                <div class="info">
                  <p>欢乐喜剧人</p>
                  <p>01-18期</p>
                </div>
                <img class="stars" src="../../assets/film/star.png" alt="">
              </div>
              <div class="rank-list-item">
                <img class="sort" src="../../assets/film/second.png" alt="">
                <div class="info">
                  <p>欢乐喜剧人</p>
                  <p>01-18期</p>
                </div>
                <img class="stars" src="../../assets/film/star.png" alt="">
              </div>
              <div class="rank-list-item">
                <img class="sort" src="../../assets/film/third.png" alt="">
                <div class="info">
                  <p>欢乐喜剧人</p>
                  <p>01-18期</p>
                </div>
                <img class="stars" src="../../assets/film/star.png" alt="">
              </div>
              <div class="rank-list-item">
                <img class="sort" src="../../assets/film/fourth.png" alt="">
                <div class="info">
                  <p>欢乐喜剧人</p>
                  <p>01-18期</p>
                </div>
                <img class="stars" src="../../assets/film/star.png" alt="">
              </div>
              <div class="rank-list-item">
                <img class="sort" src="../../assets/film/fifth.png" alt="">
                <div class="info">
                  <p>欢乐喜剧人</p>
                  <p>01-18期</p>
                </div>
                <img class="stars" src="../../assets/film/star.png" alt="">
              </div>
              <div class="rank-list-item">
                <img class="sort" src="../../assets/film/fifth.png" alt="">
                <div class="info">
                  <p>欢乐喜剧人</p>
                  <p>01-18期</p>
                </div>
                <img class="stars" src="../../assets/film/star.png" alt="">
              </div>
              <div class="rank-list-item">
                <img class="sort" src="../../assets/film/fifth.png" alt="">
                <div class="info">
                  <p>欢乐喜剧人</p>
                  <p>01-18期</p>
                </div>
                <img class="stars" src="../../assets/film/star.png" alt="">
              </div>
              <div class="rank-list-item">
                <img class="sort" src="../../assets/film/fifth.png" alt="">
                <div class="info">
                  <p>欢乐喜剧人</p>
                  <p>01-18期</p>
                </div>
                <img class="stars" src="../../assets/film/star.png" alt="">
              </div>
              <div class="rank-list-item">
                <img class="sort" src="../../assets/film/fifth.png" alt="">
                <div class="info">
                  <p>欢乐喜剧人</p>
                  <p>01-18期</p>
                </div>
                <img class="stars" src="../../assets/film/star.png" alt="">
              </div>
              <div class="rank-list-item">
                <img class="sort" src="../../assets/film/fifth.png" alt="">
                <div class="info">
                  <p>欢乐喜剧人</p>
                  <p>01-18期</p>
                </div>
                <img class="stars" src="../../assets/film/star.png" alt="">
              </div>
            </div>

          <div class="programa-film">
            <img src="../../assets/film/film.png" alt="">
            <p class="film-name">阿甘正传</p>
            <p class="film-des">豆瓣高分电影</p>
          </div>

          <div class="programa-film">
            <img src="../../assets/film/film.png" alt="">
            <p class="film-name">阿甘正传</p>
            <p class="film-des">豆瓣高分电影</p>
          </div>

          <div class="programa-film">
            <img src="../../assets/film/film.png" alt="">
            <p class="film-name">阿甘正传</p>
            <p class="film-des">豆瓣高分电影</p>
          </div>

          <div class="programa-film">
            <img src="../../assets/film/film.png" alt="">
            <p class="film-name">阿甘正传</p>
            <p class="film-des">豆瓣高分电影</p>
          </div>

          <div class="programa-film">
            <img src="../../assets/film/film.png" alt="">
            <p class="film-name">阿甘正传</p>
            <p class="film-des">豆瓣高分电影</p>
          </div>


        </div>




      </div>


    </div>

    <div class="footer">
      版权 @ 解放军文化艺术中心
    </div>


  </div>
</template>
@@ -570,12 +672,118 @@
            }
          }
        }
        .programa-content4{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          width: 1200px;
          margin-top: 20px;

          .programa-film-group {
            width: 900px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            .programa-film {
              width: 220px;
              font-size: 12px;

              img {
                width: 190px;
              }

              .film-name {
                color: #fff;
                margin: 5px 8px;
              }

              .film-des {
                margin: 5px 8px;
                color: rgba(255, 255, 255, 0.5);
              }
            }
          }
          .programa-film-rank{
            width: 300px;
            position: relative;
            top: -50px;
            .programa-rank-header{
              display: flex;
              flex-direction: row;
              color: #fff;
              align-items: center;
              .tab1{
                width: 80px;
                height: 22px;
                background: rgba(255,255,255,0.3);
                line-height: 22px;
                text-align: center;
                border-radius: 10px;
                color: #58E62C;
                font-weight: 600;

              }
              .tab2{
                width: 80px;
                height: 22px;
                line-height: 22px;
                border-radius: 10px;
                text-align: center;
                font-size: 14px;
              }
              .tab3{
                margin-left: 40px;
                font-size: 12px;
                color: rgba(255,255,255,0.3);
              }

            }
            .programa-film-rank-list{
              .rank-list-item{
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-top: 10px;
                padding-bottom: 10px;
                border-bottom: 1px solid rgba(255,255,255,0.3);
                .sort{
                  margin-left: 10px;
                  width: 30px;
                }
                .info{
                  margin-left: 40px;
                  p{
                    color: rgba(2552,255,255,0.3);
                    font-size: 12px;
                    margin-top: 2px;
                    margin-bottom: 2px;
                  }
                }
                .stars{
                  width: 50px;
                  margin-left: 30px;

                }

              }
            }
          }
        }


      }

    }

    .footer{
      height: 74px;
      background: #313131;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #808080;
    }

  }

</style>