update:中国电影

landjj321

2021-03-25 62c56fc8fee82b73f8fffd91f828ccea21d29e60

update:中国电影

 src/assets/film/banner1_cn.png

 src/assets/film/film_cn_1.png

 src/assets/film/film_cn_2.png

 src/assets/film/film_cn_21.png

 src/assets/film/film_cn_22.png

 src/assets/film/film_cn_23.png

 src/assets/film/film_cn_24.png

 src/assets/film/film_cn_25.png

 src/assets/film/film_cn_26.png

 src/assets/film/film_cn_27.png

 src/assets/film/film_cn_3.png

 src/assets/film/film_cn_3_main.png

 src/assets/film/film_cn_4.png

 src/assets/film/film_cn_5.png

 src/assets/film/film_cn_6.png

 src/assets/film/f里\m_cn_.png

 src/router/index.js

@@ -36,6 +36,11 @@
    component: () => import('@/views/film/film_china'),
    meta: { title: '中国影视' }
  },
  {
    path: '/film_world',
    component: () => import('@/views/film/film_world'),
    meta: { title: '世界影视' }
  },

  {
    path: '/',

 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 {

 src/views/film/film_world.vue

New file
@@ -0,0 +1,789 @@
<template>
  <div class="container">

    <div class="header">
      <div class="wrapper flex">
        <img src="../../assets/film/logo.png">
        <div class="nav">
          <span>首页</span>
          <input type="text" class="search">
          <span>登录</span>
          <span>注册</span>
        </div>
      </div>
    </div>

    <div class="line" />

    <div class="content">

      <div class="banner wrapper">
        <div class="banner-nav">
          <span class="banner-nav-title">当前位置:</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>
          <span class="banner-nav-router">影视</span>
        </div>

        <img src="../../assets/film/film_logo.png" class="film_logo">

        <div class="banner-pagination" >
          <p class="banner-pagination-dot">阿甘正传</p>
          <p class="banner-pagination-dot">阿甘正传</p>
          <p class="banner-pagination-dot">阿甘正传</p>
          <p class="banner-pagination-dot">阿甘正传</p>
          <p class="banner-pagination-dot on">敦刻尔克</p>
          <p class="banner-pagination-dot">阿甘正传</p>
        </div>


        <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>

      </div>

      <div class="programa wrapper">

        <div class="programa-nav">

            <div class="programa-nav-title">经典影视</div>
            <div class="programa-nav-item">
              <span>猜你喜欢</span>
              <span>推荐排行</span>
              <span>影视经典</span>
              <span>最新上映</span>
              <span>|</span>
              <span>更多>></span>
            </div>

        </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>

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

          <div class="programa-film">
            <img src="../../assets/film/film3.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 class="programa wrapper">

        <div class="programa-nav">

          <div class="programa-nav-title">漫威</div>
          <div class="programa-nav-item">
            <span>猜你喜欢</span>
            <span>推荐排行</span>
            <span>影视经典</span>
            <span>最新上映</span>
            <span>|</span>
            <span>更多>></span>
          </div>

        </div>

        <div class="programa-content2">
          <div class="programa-film2">
            <img src="../../assets/film/film.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="">
              <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 class="programa-film">
              <img src="../../assets/film/film.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>

          </div>
        </div>




      </div>

      <div class="programa wrapper">

        <div class="programa-nav">
          <div class="programa-nav-title">科幻</div>
          <div class="programa-nav-item">
            <span>猜你喜欢</span>
            <span>推荐排行</span>
            <span>影视经典</span>
            <span>最新上映</span>
            <span>|</span>
            <span>更多>></span>
          </div>

        </div>

        <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>
        </div>




      </div>

    </div>

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


  </div>
</template>
<script>

// 页头背景，导航等
import HomeHeader from '@/views/home/components/HomeHeader'
import HomeFooter from '@/views/home/components/HomeFooter'
// 文艺·原创
import SearchInput from '@/views/home/components/SearchInput'
export default {
  name: 'FilmChina',
  components: {
    HomeHeader,
    HomeFooter,
    SearchInput
  }
}
</script>

<style scoped lang="scss">
  @import "~@/styles/variables.scss";

  .container {
    background: #670607;
    .header{
      height: 90px;
      .wrapper{
        height: 90px;
        img{
          width: 336px;
          height: 55px;
        }

        .nav{
          color:#FFE0B8;
          font-weight: 600;
          font-size: 19px;
          .search{
            border:1px solid #ffe0b8;
            border-radius: 10px;
            background: rgba(0,0,0,0);
            width: 120px;
          }
          span{
            margin: 0 20px;
          }
        }
      }
    }
    .line{
      width:100%;
      height: 6px;
      background: linear-gradient(90deg, #CA2226 28.000000000000004%, #FFD791 100%);
      opacity: 0.4;
    }

    .content {
      width: 100%;
      margin: 0 auto;
      .banner{
        height: 570px;
        background: url("../../assets/film/banner1.png") no-repeat center center;
        background-size:100% 100%;
        overflow: hidden;
        position: relative;
        .banner-nav{
          color: rgba(255,255,255,0.45);
          margin-top: 20px;
          margin-left: 10px;
          font-weight: 600;
          .banner-nav-router{
            margin-left: 5px;
            margin-right: 5px;
          }
        }

        .film_logo{
          position: absolute;
          top: 160px;
          left: 10px;
          width: 120px;
        }

        .banner-pagination{
          position: absolute;
          right: 80px;
          top: 140px;
          color: #fff;
          font-size: 12px;
          display: flex;
          flex-direction: column;
          justify-content: right;

          .banner-pagination-dot{
              text-align: right;
              box-sizing: content-box;
              padding-right: 5px;
              padding-left: 5px;
          }
          .on{
            font-size: 20px;
            background: rgba(255,255,255,0.1);
          }

        }

        .banner-category{
          position: absolute;
          bottom: 20px;
          left: 0;
          right: 0;
          width: 800px;
          margin: 0 auto;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          .banner-category-dot{
            background: rgba(255,255,255,0.12);
            width: 100px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            border-radius: 16px;
          }
        }
      }

      .programa{
        margin-top: 50px;
        .programa-nav{
          width:800px;
          display: flex;
          flex-direction: row;
          align-items: center;
          color: #fff;
          padding-bottom: 5px;
          border-bottom: 2px solid rgba(255,255,255,0.3);
          .programa-nav-title{
            font-size: 24px;
            font-weight: 900;
          }

          .programa-nav-item{
            margin-left: 50px;

            span{
              margin-right: 40px;
              font-size: 12px;
              color: rgba(255,255,255,0.5);
            }
          }

        }
        .programa-content{
          margin-top: 10px;
          display: flex;
          justify-content: space-around;
          flex-direction: row;
          .programa-film{
            width: 200px;
            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-content2{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          width: 1200px;
          .programa-film2{
            width: 400px;
            font-size: 12px;
            img{
              width: 400px;
            }
            .film-name{
              color:#fff;
              margin:5px 12px;
            }
            .film-des{
              margin:5px 12px;
              color: rgba(255,255,255,0.5);
            }
          }
          .programa-film-group {
            width: 500px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            .programa-film {
              width: 150px;
              font-size: 12px;

              img {
                width: 150px;
              }

              .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;

                }

              }
            }
          }
        }
        .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>