update:中国电影

landjj321

2021-03-25 62c56fc8fee82b73f8fffd91f828ccea21d29e60

 src/views/film/film_china.vue

@@ -24,7 +24,7 @@
          <span class="banner-nav-router"> > </span>
          <span class="banner-nav-router">文艺世界</span>
          <span class="banner-nav-router"> > </span>
          <span class="banner-nav-router">影视</span>
          <span class="banner-nav-router">中国影视</span>
        </div>

        <img src="../../assets/film/film_logo.png" class="film_logo">
@@ -40,12 +40,13 @@


        <div class="banner-category">
          <div class="banner-category-dot">美国</div>
          <div class="banner-category-dot">俄罗斯</div>
          <div class="banner-category-dot">欧洲</div>
          <div class="banner-category-dot">日本</div>
          <div class="banner-category-dot">韩国</div>
          <div class="banner-category-dot">其他</div>
          <div class="banner-category-dot">喜剧</div>
          <div class="banner-category-dot">爱情</div>
          <div class="banner-category-dot">动作</div>
          <div class="banner-category-dot">战争</div>
          <div class="banner-category-dot">悬疑</div>
          <div class="banner-category-dot">青春</div>
          <div class="banner-category-dot">动画</div>
        </div>

      </div>
@@ -54,7 +55,7 @@

        <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>
@@ -68,37 +69,37 @@

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

          <div class="programa-film">
            <img src="../../assets/film/film2.png" alt="">
            <img src="../../assets/film/film_cn_2.png" alt="">
            <p class="film-name">灰列犬号</p>
            <p class="film-des">豆瓣高分电影</p>
          </div>

          <div class="programa-film">
            <img src="../../assets/film/film3.png" alt="">
            <img src="../../assets/film/film_cn_3.png" alt="">
            <p class="film-name">黑鹰堕落</p>
            <p class="film-des">豆瓣高分电影</p>
          </div>

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

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

          <div class="programa-film">
            <img src="../../assets/film/film.png" alt="">
            <img src="../../assets/film/film_cn_6.png" alt="">
            <p class="film-name">阿甘正传</p>
            <p class="film-des">豆瓣高分电影</p>
          </div>
@@ -108,10 +109,9 @@
      </div>

      <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>
@@ -122,41 +122,40 @@
          </div>

        </div>

        <div class="programa-content2">
          <div class="programa-film2">
            <img src="../../assets/film/film.png" alt="">
            <img src="../../assets/film/film_cn_21.png" alt="">
            <p class="film-name">阿甘正传</p>
            <p class="film-des">豆瓣高分电影</p>
          </div>
          <div class="programa-film-group">
            <div class="programa-film">
              <img src="../../assets/film/film.png" alt="">
              <img src="../../assets/film/film_cn_22.png" alt="">
              <p class="film-name">阿甘正传</p>
              <p class="film-des">豆瓣高分电影</p>
            </div>
            <div class="programa-film">
              <img src="../../assets/film/film.png" alt="">
              <img src="../../assets/film/film_cn_23.png" alt="">
              <p class="film-name">阿甘正传</p>
              <p class="film-des">豆瓣高分电影</p>
            </div>
            <div class="programa-film">
              <img src="../../assets/film/film.png" alt="">
              <img src="../../assets/film/film_cn_24.png" alt="">
              <p class="film-name">阿甘正传</p>
              <p class="film-des">豆瓣高分电影</p>
            </div>
            <div class="programa-film">
              <img src="../../assets/film/film.png" alt="">
              <img src="../../assets/film/film_cn_25.png" alt="">
              <p class="film-name">阿甘正传</p>
              <p class="film-des">豆瓣高分电影</p>
            </div>
            <div class="programa-film">
              <img src="../../assets/film/film.png" alt="">
              <img src="../../assets/film/film_cn_26.png" alt="">
              <p class="film-name">阿甘正传</p>
              <p class="film-des">豆瓣高分电影</p>
            </div>
            <div class="programa-film">
              <img src="../../assets/film/film.png" alt="">
              <img src="../../assets/film/film_cn_27.png" alt="">
              <p class="film-name">阿甘正传</p>
              <p class="film-des">豆瓣高分电影</p>
            </div>
@@ -216,16 +215,12 @@

          </div>
        </div>




      </div>

      <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,6 +233,9 @@
        </div>

        <div class="programa-content4">



          <div class="programa-film-group">
            <div class="programa-film">
              <img src="../../assets/film/film31.png" alt="">
@@ -259,25 +257,17 @@
              <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 class="programa-film-main">
            <img src="../../assets/film/film_cn_3_main.png" alt="">
            <div class="des">
              <h1>送你一朵小红花</h1>
              <p>标签： 家庭  喜剧  普通话</p>
              <p>主演： 易洋千玺/刘浩存/朱媛媛</p>
              <p>两个抗癌家庭，两组生活轨迹。影片讲述了一个温情的现</p>
              <p>实故事，思考和直面每一个普通人都会面临的终极问题……</p>
            </div>
          </div>
          <div class="programa-film-rank">
@@ -492,7 +482,7 @@

        .banner-category{
          position: absolute;
          bottom: 20px;
          bottom: 30px;
          left: 0;
          right: 0;
          width: 800px;
@@ -642,6 +632,7 @@

            }
            .programa-film-rank-list{

              .rank-list-item{
                display: flex;
                flex-direction: row;
@@ -679,13 +670,39 @@
          width: 1200px;
          margin-top: 20px;

          .programa-film-main{
            margin-right: 20px;
            width: 480px;
            display: flex;
            flex-direction: column;
            img{
              width: 480px;
            }
            .des{
              background: rgba(0,0,0,0.3);
              padding: 20px;
              h1{
                color: #fff;
                font-size: 20px;
                margin: 0;
                margin-bottom: 20px;
              }
              p{
                font-size: 14px;
                color: #ccc;
                margin: 10px 0;
              }
            }


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

              img {