初步完工第一个静态页面

src/App.vue

@@ -8,7 +8,6 @@
 #app {
   width: 100vw;
   height: 100vh;
-  background-color: #082f5a;
 }
 
 </style>

src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
+import HomeTow from '../views/HomeTow.vue'
 
 Vue.use(VueRouter)
 
@@ -9,7 +10,12 @@ const routes = [
     path: '/',
     name: 'Home',
     component: Home
+  }, {
+    path: '/home_tow',
+    name: 'HomeTow',
+    component: HomeTow
   }
+
 ]
 
 const router = new VueRouter({

src/views/Home.vue

@@ -1,45 +1,80 @@
 <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('/home_tow')">党建金</li>
+      <li>红军红</li>
+    </ul>
+
+    <!-- 背景盒子 -->
+    <div class="SDbj"></div>
+    <!--  -->
     <div class="title">校史变迁可视化大屏系统</div>
     <div class="letf">
-        <div class="box" v-for="item in leftData" :key="item.title">
-          <div class="biaoti">
-            <img :src="require('@/assets/imgBule/'+item.img)" alt="">
-            <span>{{item.title}}</span>
-          </div>
-          <div class="kongbai" v-if="item.conten.length===0">
-            <div class="zhongjian">
-            <img src="../assets/imgBule/kongbai.png" alt="">
+      <div
+        class="box"
+        :class="{ active: isSta }"
+        v-for="item in leftData"
+        :key="item.title"
+      >
+        <div class="biaoti">
+          <img :src="require('@/assets/imgBule/' + item.img)" alt="" />
+          <span>{{ item.title }}</span>
+        </div>
+        <div class="kongbai" v-if="item.conten.length === 0">
+          <div class="zhongjian">
+            <img src="../assets/imgBule/kongbai.png" alt="" />
             <span>暂无内容</span>
-            </div>
           </div>
         </div>
+      </div>
     </div>
     <div class="right">
       <div class="cut">
-        <img src="../assets/imgBule/start.png" alt="">
+        <img src="../assets/imgBule/start.png" alt="" />
       </div>
-      <div class="qizi" :class="{active:seInd===index}" v-for="(item,index) in 10" :key="index" @click="select(index)">
-        <img src="../assets/imgBule/piece1.png" alt="" v-if="1">
-        <img src="../assets/imgBule/piece2.png" alt="" v-else>
-        2021-09-29
+      <div class="myqizi">
+        <div
+          class="qizi"
+          :class="{ active: seInd === index }"
+          v-for="(item, index) in 10"
+          :key="index"
+          @click="select(index)"
+        >
+          <img
+            src="../assets/imgBule/piece2.png"
+            alt=""
+            v-if="seInd === index"
+          />
+          <img src="../assets/imgBule/piece1.png" alt="" v-else />
+          2021-09-29
+        </div>
       </div>
     </div>
-    <div class="quanping">
-
+    <div class="quanping" @click="quanping">
+      <img src="../assets/imgBule/quanping2.png" alt="" v-if="isSta" />
+      <img src="../assets/imgBule/quanping.png" alt="" v-else />
     </div>
   </div>
 </template>
 
 <script>
-
 export default {
   name: 'Home',
-  components: {
-  },
+  components: {},
   data () {
     // 这里存放数据
     return {
+      // 选择主题
+      arrows: false,
+      // 控制全屏
+      isSta: false,
+      // 控制棋子
       seInd: 0,
       leftData: [
         { title: '重要文物', img: 'box1ti.png', conten: [] },
@@ -50,112 +85,224 @@ export default {
   },
   // 方法集合
   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">
+<style lang="less" scoped>
 .home {
-    height: 100%;
-    background: url('../assets/imgBule/bg.png') no-repeat!important;
-    background-size: calc(100% - 30px) calc(100% - 30px)!important;
-    background-position: 50% 50%!important;
-    overflow: hidden;
-    position: relative;
-    .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;
+  .theme {
+    cursor: pointer;
     color: #fff;
-    width: 464px;
-    height: 280px;
-    background: url('../assets/imgBule/boxBg.png') no-repeat center;
-    background-size: 100% 100%;
-    .biaoti{
-      height: 27px;
+    font-size: 14px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    position: absolute;
+    right: 55px;
+    top: 30px;
+    border: 1px solid #70d9ff;
+    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 #39c4f6;
+    }
+    .arrows2 {
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-bottom: 8px solid #39c4f6;
+    }
+  }
+  .theme2 {
+    display: block;
+    top: 59px;
+    border: none;
+    li {
       display: flex;
       align-items: center;
-      &>img{
-        margin: 0 15px;
-        width: 16px;
-        height: 16px;
-      }
+      height: 28px;
+      border: 1px solid #70d9ff;
+      border-radius: 8px;
+      padding-left:3px ;
     }
-    .kongbai{
-      width: 100%;
+    li:hover{
+      color: #70d9ff;
+    }
+  }
+  height: 100%;
+  background: url("../assets/imgBule/bg.png") no-repeat #082f5a !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;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      .zhongjian{
-        width: 100px;
-        height: 100px;
-        text-align: center;
-        &img {
-          width: 100%;
+      background: url("../assets/imgBule/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;
         }
-        &>span {
-          color: #ccc;
-          font-size: 14px;
+      }
+      .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) {
-    height: 200px;
-    .biaoti{
-      height: 19px;
-    }
-    .kongbai{
+          .box:nth-of-type(2){
+              background: url("../assets/imgBule/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{
+  .right {
     position: absolute;
-    top: 85px;
+    top: 125px;
     right: 50px;
     height: 688px;
     width: 70px;
-    overflow: auto;
     // background-color: rosybrown;
     display: flex;
     flex-direction: column;
     align-items: center;
-    &>div {
+    & > div {
       cursor: pointer;
     }
     img {
       width: 60px;
     }
-    .cut{
+    .cut {
       width: 100%;
+      margin-bottom: 40px;
+    }
+    .myqizi {
+      height: 625px;
+      overflow: auto;
     }
-    .qizi{
+    .qizi {
       margin-top: 40px;
       width: 100%;
       color: #fff;
       font-size: 12px;
     }
-      .active{
-        color: #70D9FF;
-      }
-}
+    .qizi:nth-of-type(1) {
+      margin-top: 0;
+    }
+    .active {
+      color: #70d9ff;
+    }
+  }
+  .quanping {
+    cursor: pointer;
+    position: absolute;
+    bottom: 42px;
+    right: 50px;
+    & > img {
+      width: 20px;
+      height: 20px;
+    }
+  }
 }
-
 </style>

src/views/HomeTow.vue

@@ -0,0 +1,308 @@
+<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>红军红</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/imgBule/' + item.img)" alt="" />
+          <span>{{ item.title }}</span>
+        </div>
+        <div class="kongbai" v-if="item.conten.length === 0">
+          <div class="zhongjian">
+            <img src="../assets/imgBule/kongbai.png" alt="" />
+            <span>暂无内容</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="cut">
+        <img src="../assets/imgBule/start.png" alt="" />
+      </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/imgBule/piece2.png"
+            alt=""
+            v-if="seInd === index"
+          />
+          <img src="../assets/imgBule/piece1.png" alt="" v-else />
+          2021-09-29
+        </div>
+      </div>
+    </div>
+    <div class="quanping" @click="quanping">
+      <img src="../assets/imgBule/quanping2.png" alt="" v-if="isSta" />
+      <img src="../assets/imgBule/quanping.png" alt="" v-else />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Home',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      // 选择主题
+      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 #70d9ff;
+    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 #39c4f6;
+    }
+    .arrows2 {
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-bottom: 8px solid #39c4f6;
+    }
+  }
+  .theme2 {
+    display: block;
+    top: 59px;
+    border: none;
+    li {
+      display: flex;
+      align-items: center;
+      height: 28px;
+      border: 1px solid #70d9ff;
+      border-radius: 8px;
+      padding-left:3px ;
+    }
+    li:hover{
+      color: #70d9ff;
+    }
+  }
+  height: 100%;
+  background: url("../assets/imgBule/bg.png") no-repeat #082f5a !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/imgBule/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/imgBule/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: #70d9ff;
+    }
+  }
+  .quanping {
+    cursor: pointer;
+    position: absolute;
+    bottom: 42px;
+    right: 50px;
+    & > img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+</style>