初步完工3种静态

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
 import HomeTow from '../views/HomeTow.vue'
+import HomeThree from '../views/HomeThree.vue'
 
 Vue.use(VueRouter)
 
@@ -10,10 +11,16 @@ const routes = [
     path: '/',
     name: 'Home',
     component: Home
-  }, {
+  },
+  {
     path: '/home_tow',
     name: 'HomeTow',
     component: HomeTow
+  },
+  {
+    path: '/home_three',
+    name: 'HomeThree',
+    component: HomeThree
   }
 
 ]

src/views/Home.vue

@@ -8,7 +8,7 @@
     </div>
     <ul class="theme theme2" v-show="arrows">
       <li @click="$router.push('/home_tow')">党建金</li>
-      <li>红军红</li>
+      <li @click="$router.push('/home_three')">红军红</li>
     </ul>
 
     <!-- 背景盒子 -->

src/views/HomeThree.vue

@@ -0,0 +1,311 @@
+<template>
+  <div class="home">
+    <!-- 下拉选择主题颜色 -->
+    <div class="theme" @click="theme">
+      红军红
+      <div class="arrows2" v-if="arrows"></div>
+      <div class="arrows1" v-else></div>
+    </div>
+    <ul class="theme theme2" v-show="arrows">
+      <li @click="$router.push('/')">科技蓝</li>
+      <li @click="$router.push('/home_tow')">党建金</li>
+    </ul>
+
+    <!-- 背景盒子 -->
+    <div class="SDbj"></div>
+    <!--  -->
+    <div class="title">校史变迁可视化大屏系统</div>
+    <div class="letf">
+      <div
+        class="box"
+        :class="{ active: isSta }"
+        v-for="item in leftData"
+        :key="item.title"
+      >
+        <div class="biaoti">
+          <img :src="require('@/assets/imgRed/' + item.img)" alt="" />
+          <span>{{ item.title }}</span>
+        </div>
+        <div class="kongbai" v-if="item.conten.length === 0">
+          <div class="zhongjian">
+            <img src="../assets/imgRed/kongbai.png" alt="" />
+            <span>暂无内容</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="cut" @click="mypaly=!mypaly">
+        <img src="../assets/imgRed/end.png" alt="" v-if="mypaly"/>
+        <img src="../assets/imgRed/start.png" alt="" v-else/>
+      </div>
+      <div class="myqizi">
+        <div
+          class="qizi"
+          :class="{ active: seInd === index }"
+          v-for="(item, index) in 10"
+          :key="index"
+          @click="select(index)"
+        >
+          <img
+            src="../assets/imgRed/piece2.png"
+            alt=""
+            v-if="seInd === index"
+          />
+          <img src="../assets/imgRed/piece1.png" alt="" v-else />
+          2021-09-29
+        </div>
+      </div>
+    </div>
+    <div class="quanping" @click="quanping">
+      <img src="../assets/imgRed/quanping2.png" alt="" v-if="isSta" />
+      <img src="../assets/imgRed/quanping.png" alt="" v-else />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Home',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      // 控制播放和暂停
+      mypaly: false,
+      // 选择主题
+      arrows: false,
+      // 控制全屏
+      isSta: false,
+      // 控制棋子
+      seInd: 0,
+      leftData: [
+        { title: '重要文物', img: 'box1ti.png', conten: [] },
+        { title: '重要历史事件', img: 'box2ti.png', conten: [] },
+        { title: '重要人物', img: 'box3ti.png', conten: [] }
+      ]
+    }
+  },
+  // 方法集合
+  methods: {
+    // 选择主题
+    theme () {
+      this.arrows = !this.arrows
+    },
+    select (index) {
+      this.seInd = index
+    },
+    // 全屏
+    quanping () {
+      // let element = document.documentElement;//设置后就是我们平时的整个页面全屏效果
+      const element = document.querySelector('.home') // 设置后就是   id==con_lf_top_div 的容器全屏
+      if (this.fullscreen) {
+        // 退出全屏
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen()
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen()
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen()
+        }
+      } else {
+        // 点击进入全屏
+        if (element.requestFullscreen) {
+          element.requestFullscreen()
+        } else if (element.webkitRequestFullScreen) {
+          element.webkitRequestFullScreen()
+        } else if (element.mozRequestFullScreen) {
+          element.mozRequestFullScreen()
+        } else if (element.msRequestFullscreen) {
+          // IE11
+          element.msRequestFullscreen()
+        }
+      }
+      this.fullscreen = !this.fullscreen
+
+      this.isSta = !this.isSta
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.home {
+  .theme {
+    cursor: pointer;
+    color: #fff;
+    font-size: 14px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    position: absolute;
+    right: 55px;
+    top: 30px;
+    border: 1px solid #FF5152 ;
+    width: 70px;
+    height: 28px;
+    border-radius: 8px;
+    .arrows1 {
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 8px solid #FF5152 ;
+    }
+    .arrows2 {
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-bottom: 8px solid #FF5152 ;
+    }
+  }
+  .theme2 {
+    display: block;
+    top: 59px;
+    border: none;
+    li {
+      display: flex;
+      align-items: center;
+      height: 28px;
+      border: 1px solid #FF5152 ;
+      border-radius: 8px;
+      padding-left:3px ;
+    }
+    li:hover{
+      color: #FF5152 ;
+    }
+  }
+  height: 100%;
+  background: url("../assets/imgRed/bg.png") no-repeat #322007 !important;
+  background-size: calc(100% - 30px) calc(100% - 30px) !important;
+  background-position: 50% 50% !important;
+  overflow: hidden;
+  position: relative;
+  .SDbj {
+    width: 100%;
+    height: 100%;
+    // background-color: #082f5a;
+    position: absolute;
+    z-index: -1;
+  }
+
+  .title {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 32px;
+    color: #fff;
+    font-weight: bolder;
+    margin-top: 18px;
+    cursor: text;
+  }
+  .letf {
+    width: 464px;
+    height: 780px;
+    margin: -10px 0 0 40px;
+    .box {
+      margin-top: 20px;
+      color: #fff ;
+      width: 464px;
+      height: 280px;
+      background: url("../assets/imgRed/boxBg.png") no-repeat center;
+      background-size: 100% 100%;
+      .biaoti {
+        height: 27px;
+        display: flex;
+        align-items: center;
+        & > img {
+          margin: 0 15px;
+          width: 16px;
+          height: 16px;
+        }
+      }
+      .kongbai {
+        width: 100%;
+        height: 90%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .zhongjian {
+          width: 100px;
+          height: 100px;
+          text-align: center;
+          &img {
+            width: 100%;
+          }
+          & > span {
+            color: #ccc;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+          .box:nth-of-type(2){
+              background: url("../assets/imgRed/boxBg2.png") no-repeat center;
+              background-size: 100% 100%;
+      }
+
+    .box:nth-of-type(2) {
+      height: 200px;
+
+      .kongbai {
+        height: 200px;
+      }
+    }
+    .active:nth-of-type(1),
+    .active:nth-of-type(3) {
+      height: 340px !important;
+    }
+  }
+  .right {
+    position: absolute;
+    top: 125px;
+    right: 50px;
+    height: 688px;
+    width: 70px;
+    // background-color: rosybrown;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    & > div {
+      cursor: pointer;
+    }
+    img {
+      width: 60px;
+    }
+    .cut {
+      width: 100%;
+      margin-bottom: 40px;
+    }
+    .myqizi {
+      height: 625px;
+      overflow: auto;
+    }
+    .qizi {
+      margin-top: 40px;
+      width: 100%;
+      color: #fff;
+      font-size: 12px;
+    }
+    .qizi:nth-of-type(1) {
+      margin-top: 0;
+    }
+    .active {
+      color: #FF5152;
+    }
+  }
+  .quanping {
+    cursor: pointer;
+    position: absolute;
+    bottom: 42px;
+    right: 50px;
+    & > img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+</style>

src/views/HomeTow.vue

@@ -8,7 +8,7 @@
     </div>
     <ul class="theme theme2" v-show="arrows">
       <li @click="$router.push('/')">科技蓝</li>
-      <li>红军红</li>
+      <li @click="$router.push('/home_three')">红军红</li>
     </ul>
 
     <!-- 背景盒子 -->