更新主题

src/views/HomeThree.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="home">
+    <img class="myBigImg" src="../assets/imgRed/bg.png" alt="">
     <!-- 鼠标移到图片上显示大图 -->
     <div class="bigImg" v-show="bigImgShow"  v-if="bigImgUrl">
       <img
@@ -20,7 +21,9 @@
     </ul>
 
     <!-- 背景盒子 -->
-    <div class="SDbj"></div>
+    <div class="SDbj">
+      <iframe src="zzdemo/index.html" ref="ifr" frameborder="0"></iframe>
+    </div>
     <!--  -->
     <div class="title">校史变迁可视化大屏系统</div>
     <div class="letf">
@@ -174,7 +177,7 @@
 
 <script>
 export default {
-  name: 'Home',
+  name: 'HomeRed',
   components: {},
   data () {
     // 这里存放数据
@@ -212,13 +215,16 @@ export default {
   },
   watch: {
     // 控制被选中的棋子在页面最上面
-    seInd () {
+    seInd (val) {
       // 切换棋子的时候先把显示大图的src清空
       this.bigImgUrl = ''
       const gundong = document.querySelector('.myqizi')
       gundong.scrollTo({ top: this.seInd * 119 - 260, behavior: 'smooth' })
-      // if (this.seInd % 4 === 0) gundong.scrollTop = this.seInd * 115
-      if (this.seInd === 0) gundong.scrollTop = 0
+      // gundong.scrollTop = this.seInd * 119 - 280
+      if (this.seInd === 0) {
+        gundong.scrollTop = 0
+        this.$refs.ifr.contentWindow.clearMap()
+      }
       // 只有一张图片就居中显示
       this.oneImgWW = false
       this.oneImgRW = false
@@ -246,6 +252,15 @@ export default {
           this.renwuBtn1 = false
           this.renwuBtn2 = true
           if (this.renwuLehgth <= 2) this.renwuBtn1 = this.renwuBtn2 = false
+          // 调用3D方法
+          let temp = ''
+          temp = this.historyData[this.seInd].yeah
+          if (temp === '1931.02') temp = '1931.01'
+          if (temp === '1946.05') temp = '1938.01'
+          if (temp === '1978.02') temp = '1978.01'
+          if (temp === '2018.06' || temp === '2021.01') temp = '2017.07'
+          if (temp === '2000.12' || temp === '2005.01' || temp === '2007.01' || temp === '2009.01' || temp === '2010.01' || temp === '2012.01' || temp === '2013.01') temp = '1999.04'
+          this.$refs.ifr.contentWindow.onAtimeShow(temp, false)
         }, 4000)
       } else {
         clearInterval(this.myDing)
@@ -268,6 +283,14 @@ export default {
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {
+    this.$nextTick(() => {
+      // 所有dom加载完毕之后---要执行的代码
+      setTimeout(() => {
+        this.$refs.ifr.contentWindow.changeStyle(3)
+        this.$refs.ifr.contentWindow.onAtimeShow(this.historyData[0].yeah)
+      }, 1000)
+    })
+
     // 进页面看看是不是只有一张图，只有一张图居中显示
     if (this.wenwuLehgth === 1) this.oneImgWW = true
     if (this.renwuLehgth === 1) this.oneImgRW = true
@@ -338,6 +361,17 @@ export default {
     },
     // 点击棋子
     select (index) {
+      if (index !== this.seInd) {
+      // 调用3D方法
+        let temp = ''
+        temp = this.historyData[index].yeah
+        if (temp === '1931.02') temp = '1931.01'
+        if (temp === '1946.05') temp = '1938.01'
+        if (temp === '1978.02') temp = '1978.01'
+        if (temp === '2018.06' || temp === '2021.01') temp = '2017.07'
+        if (temp === '2000.12' || temp === '2005.01' || temp === '2007.01' || temp === '2009.01' || temp === '2010.01' || temp === '2012.01' || temp === '2013.01') temp = '1999.04'
+        this.$refs.ifr.contentWindow.onAtimeShow(temp, true)
+      }
       // 关闭自动播放
       this.mypaly = false
       this.seInd = index
@@ -398,6 +432,18 @@ export default {
 </script>
 <style lang="less" scoped>
 .home {
+  z-index: 999;
+  background: url('../assets/imgRed/bigBac.png') no-repeat center;
+  background-size: 100% 100%;
+  .myBigImg{
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    width: calc(100% - 30px);
+    height: calc(100% - 30px);
+  }
   .bigImg {
     text-align: center;
     max-width: 1200px;
@@ -430,7 +476,7 @@ export default {
     position: absolute;
     right: 55px;
     top: 30px;
-    border: 1px solid #FF5152;
+    border: 1px solid #e24041;
     width: 70px;
     height: 28px;
     border-radius: 8px;
@@ -439,14 +485,14 @@ export default {
       height: 0;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
-      border-top: 8px solid #FF5152;
+      border-top: 8px solid #e24041;
     }
     .arrows2 {
       width: 0;
       height: 0;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
-      border-bottom: 8px solid #FF5152;
+      border-bottom: 8px solid #e24041;
     }
   }
   .theme2 {
@@ -457,18 +503,19 @@ export default {
       display: flex;
       align-items: center;
       height: 28px;
-      border: 1px solid #FF5152;
+      border: 1px solid #e24041;
       border-radius: 8px;
       padding-left: 3px;
     }
     li:hover {
-      color: #FF5152;
+      color: #e24041;
     }
   }
+  width: 100%;
   height: 100%;
-  background: url("../assets/imgRed/bg.png") no-repeat #170304 !important;
-  background-size: calc(100% - 30px) calc(100% - 30px) !important;
-  background-position: 50% 50% !important;
+  // background: url("../assets/imgRed/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 {
@@ -477,6 +524,10 @@ export default {
     // background-color: #082f5a;
     position: absolute;
     z-index: -1;
+    >iframe{
+      width: 100%;
+      height: 100%;
+    }
   }
 
   .title {
@@ -665,7 +716,7 @@ export default {
     .myqizi {
       height: 600px;
       overflow: auto;
-            &::-webkit-scrollbar{
+      &::-webkit-scrollbar{
         width: 0px;
       }
     }
@@ -685,7 +736,7 @@ export default {
       margin-top: 0;
     }
     .active {
-      color: #FF5152;
+      color: #e24041;
     }
   }
   .quanping {

src/views/HomeTow.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="home">
+    <img class="myBigImg" src="../assets/imgGold/bg.png" alt="">
     <!-- 鼠标移到图片上显示大图 -->
     <div class="bigImg" v-show="bigImgShow"  v-if="bigImgUrl">
       <img
@@ -16,11 +17,13 @@
     </div>
     <ul class="theme theme2" v-show="arrows">
       <li @click="$router.push('/')">科技蓝</li>
-      <li @click="$router.push('/home_three')">红军红</li>
+      <li @click="$router.push('/home_Three')">红军红</li>
     </ul>
 
     <!-- 背景盒子 -->
-    <div class="SDbj"></div>
+    <div class="SDbj">
+      <iframe src="zzdemo/index.html" ref="ifr" frameborder="0"></iframe>
+    </div>
     <!--  -->
     <div class="title">校史变迁可视化大屏系统</div>
     <div class="letf">
@@ -174,7 +177,7 @@
 
 <script>
 export default {
-  name: 'Home',
+  name: 'HomeJin',
   components: {},
   data () {
     // 这里存放数据
@@ -212,13 +215,16 @@ export default {
   },
   watch: {
     // 控制被选中的棋子在页面最上面
-    seInd () {
+    seInd (val) {
       // 切换棋子的时候先把显示大图的src清空
       this.bigImgUrl = ''
       const gundong = document.querySelector('.myqizi')
       gundong.scrollTo({ top: this.seInd * 119 - 260, behavior: 'smooth' })
-      // if (this.seInd % 4 === 0) gundong.scrollTop = this.seInd * 115
-      if (this.seInd === 0) gundong.scrollTop = 0
+      // gundong.scrollTop = this.seInd * 119 - 280
+      if (this.seInd === 0) {
+        gundong.scrollTop = 0
+        this.$refs.ifr.contentWindow.clearMap()
+      }
       // 只有一张图片就居中显示
       this.oneImgWW = false
       this.oneImgRW = false
@@ -246,6 +252,15 @@ export default {
           this.renwuBtn1 = false
           this.renwuBtn2 = true
           if (this.renwuLehgth <= 2) this.renwuBtn1 = this.renwuBtn2 = false
+          // 调用3D方法
+          let temp = ''
+          temp = this.historyData[this.seInd].yeah
+          if (temp === '1931.02') temp = '1931.01'
+          if (temp === '1946.05') temp = '1938.01'
+          if (temp === '1978.02') temp = '1978.01'
+          if (temp === '2018.06' || temp === '2021.01') temp = '2017.07'
+          if (temp === '2000.12' || temp === '2005.01' || temp === '2007.01' || temp === '2009.01' || temp === '2010.01' || temp === '2012.01' || temp === '2013.01') temp = '1999.04'
+          this.$refs.ifr.contentWindow.onAtimeShow(temp, false)
         }, 4000)
       } else {
         clearInterval(this.myDing)
@@ -268,6 +283,14 @@ export default {
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {
+    this.$nextTick(() => {
+      // 所有dom加载完毕之后---要执行的代码
+      setTimeout(() => {
+        this.$refs.ifr.contentWindow.changeStyle(2)
+        this.$refs.ifr.contentWindow.onAtimeShow(this.historyData[0].yeah)
+      }, 1000)
+    })
+
     // 进页面看看是不是只有一张图，只有一张图居中显示
     if (this.wenwuLehgth === 1) this.oneImgWW = true
     if (this.renwuLehgth === 1) this.oneImgRW = true
@@ -338,6 +361,17 @@ export default {
     },
     // 点击棋子
     select (index) {
+      if (index !== this.seInd) {
+      // 调用3D方法
+        let temp = ''
+        temp = this.historyData[index].yeah
+        if (temp === '1931.02') temp = '1931.01'
+        if (temp === '1946.05') temp = '1938.01'
+        if (temp === '1978.02') temp = '1978.01'
+        if (temp === '2018.06' || temp === '2021.01') temp = '2017.07'
+        if (temp === '2000.12' || temp === '2005.01' || temp === '2007.01' || temp === '2009.01' || temp === '2010.01' || temp === '2012.01' || temp === '2013.01') temp = '1999.04'
+        this.$refs.ifr.contentWindow.onAtimeShow(temp, true)
+      }
       // 关闭自动播放
       this.mypaly = false
       this.seInd = index
@@ -398,6 +432,18 @@ export default {
 </script>
 <style lang="less" scoped>
 .home {
+  z-index: 999;
+  background: url('../assets/imgGold/bigBac.png') no-repeat center;
+  background-size: 100% 100%;
+  .myBigImg{
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    width: calc(100% - 30px);
+    height: calc(100% - 30px);
+  }
   .bigImg {
     text-align: center;
     max-width: 1200px;
@@ -430,7 +476,7 @@ export default {
     position: absolute;
     right: 55px;
     top: 30px;
-    border: 1px solid #FFE18E;
+    border: 1px solid #FFE18E ;
     width: 70px;
     height: 28px;
     border-radius: 8px;
@@ -439,14 +485,14 @@ export default {
       height: 0;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
-      border-top: 8px solid #FFE18E;
+      border-top: 8px solid #FFE18E ;
     }
     .arrows2 {
       width: 0;
       height: 0;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
-      border-bottom: 8px solid #FFE18E;
+      border-bottom: 8px solid #FFE18E ;
     }
   }
   .theme2 {
@@ -457,18 +503,19 @@ export default {
       display: flex;
       align-items: center;
       height: 28px;
-      border: 1px solid #FFE18E;
+      border: 1px solid #FFE18E ;
       border-radius: 8px;
       padding-left: 3px;
     }
     li:hover {
-      color: #FFE18E;
+      color: #FFE18E ;
     }
   }
+  width: 100%;
   height: 100%;
-  background: url("../assets/imgGold/bg.png") no-repeat #322007 !important;
-  background-size: calc(100% - 30px) calc(100% - 30px) !important;
-  background-position: 50% 50% !important;
+  // background: url("../assets/imgGold/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 {
@@ -477,6 +524,10 @@ export default {
     // background-color: #082f5a;
     position: absolute;
     z-index: -1;
+    >iframe{
+      width: 100%;
+      height: 100%;
+    }
   }
 
   .title {
@@ -666,7 +717,7 @@ export default {
     .myqizi {
       height: 600px;
       overflow: auto;
-            &::-webkit-scrollbar{
+      &::-webkit-scrollbar{
         width: 0px;
       }
     }