世界电影

landjj321

2021-03-24 7a40618acb00bf5864ae0314e13aeb84e07e80ec

世界电影

 src/assets/film/banner1.png

 src/assets/film/film_logo.png

 src/assets/film/logo.png

 src/router/index.js

@@ -22,16 +22,21 @@
    meta: { title: '网站建设中...' }
  },
  {
      path: '/music_cn',
      component: () => import('@/views/music/music_china'),
      meta: { title: '中国音乐...'}
    path: '/music_cn',
    component: () => import('@/views/music/music_china'),
    meta: { title: '中国音乐...' }
  },
  {
        path: '/music_world',
        component: () => import('@/views/music/music_word'),
        meta: { title: '世界音乐...'}
    path: '/music_world',
    component: () => import('@/views/music/music_word'),
    meta: { title: '世界音乐...' }
  },
  
  {
    path: '/film_cn',
    component: () => import('@/views/film/film_china'),
    meta: { title: '中国影视' }
  },

  {
    path: '/',
    component: () => import('@/views/home/index'),
@@ -49,7 +54,7 @@
const router = createRouter()

// watch router change
router.beforeEach(async(to, from, next) => {
router.beforeEach(async (to, from, next) => {
  // set page title
  document.title = getPageTitle(to.meta.title)
  next()

 src/styles/variables.scss

@@ -7,3 +7,16 @@
$fontBold: SourceHanSansCN-Bold;
$fontHeavy: SourceHanSansCN-Heavy;
$fontMedium: SourceHanSansCN-Medium;


.wrapper{
  width:$appWidth;
  margin-left: auto;
  margin-right: auto;
}

.flex{
  display: flex;
  justify-content: space-between;
  align-items:center;
}

 src/views/film/film_china.vue

New file
@@ -0,0 +1,189 @@
<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>

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

</style>

 src/views/home/components/HomeHeader.vue

@@ -7,7 +7,7 @@
        <router-link class="navbar__item" to="/building">强军思想</router-link>
        <router-link class="navbar__item" to="/building">军委机关</router-link>
        <router-link class="navbar__item" to="/building">中心概览</router-link>
        <router-link class="navbar__item" to="/building">影视部</router-link>
        <router-link class="navbar__item" to="/film_cn">影视部</router-link>
        <router-link class="navbar__item" to="/building">文艺部</router-link>
        <router-link class="navbar__item" to="/building">军乐团</router-link>
        <router-link class="navbar__item" to="/building">文艺咨询</router-link>
@@ -28,16 +28,16 @@
      screenHeight: document.documentElement.clientHeight - 8 + 'px'
    }
  },
  methods: {
    getScreenHeight() {
      this.screenHeight = document.documentElement.clientHeight - 8 + 'px'
    }
  },
  created() {
    window.onresize = () => {
      this.getScreenHeight()
    };
  },
  methods: {
    getScreenHeight() {
      this.screenHeight = document.documentElement.clientHeight - 8 + 'px'
    }
  },
  destoryed() {
    window.onresize = null
  }