金色初步完工

src/views/Home.vue

@@ -35,8 +35,9 @@
       </div>
     </div>
     <div class="right">
-      <div class="cut">
-        <img src="../assets/imgBule/start.png" alt="" />
+      <div class="cut" @click="mypaly = !mypaly">
+        <img src="../assets/imgBule/end.png" alt="" v-if="mypaly" />
+        <img src="../assets/imgBule/start.png" alt="" v-else />
       </div>
       <div class="myqizi">
         <div
@@ -70,6 +71,8 @@ export default {
   data () {
     // 这里存放数据
     return {
+      // 控制播放和暂停
+      mypaly: false,
       // 选择主题
       arrows: false,
       // 控制全屏
@@ -168,9 +171,9 @@ export default {
       height: 28px;
       border: 1px solid #70d9ff;
       border-radius: 8px;
-      padding-left:3px ;
+      padding-left: 3px;
     }
-    li:hover{
+    li:hover {
       color: #70d9ff;
     }
   }
@@ -240,10 +243,10 @@ export default {
         }
       }
     }
-          .box:nth-of-type(2){
-              background: url("../assets/imgBule/boxBg2.png") no-repeat center;
-              background-size: 100% 100%;
-      }
+    .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;

src/views/HomeTow.vue

@@ -23,20 +23,21 @@
         :key="item.title"
       >
         <div class="biaoti">
-          <img :src="require('@/assets/imgBule/' + item.img)" alt="" />
+          <img :src="require('@/assets/imgGold/' + 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="" />
+            <img src="../assets/imgGold/kongbai.png" alt="" />
             <span>暂无内容</span>
           </div>
         </div>
       </div>
     </div>
     <div class="right">
-      <div class="cut">
-        <img src="../assets/imgBule/start.png" alt="" />
+      <div class="cut" @click="mypaly=!mypaly">
+        <img src="../assets/imgGold/end.png" alt="" v-if="mypaly"/>
+        <img src="../assets/imgGold/start.png" alt="" v-else/>
       </div>
       <div class="myqizi">
         <div
@@ -47,18 +48,18 @@
           @click="select(index)"
         >
           <img
-            src="../assets/imgBule/piece2.png"
+            src="../assets/imgGold/piece2.png"
             alt=""
             v-if="seInd === index"
           />
-          <img src="../assets/imgBule/piece1.png" alt="" v-else />
+          <img src="../assets/imgGold/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 />
+      <img src="../assets/imgGold/quanping2.png" alt="" v-if="isSta" />
+      <img src="../assets/imgGold/quanping.png" alt="" v-else />
     </div>
   </div>
 </template>
@@ -70,6 +71,8 @@ export default {
   data () {
     // 这里存放数据
     return {
+      // 控制播放和暂停
+      mypaly: false,
       // 选择主题
       arrows: false,
       // 控制全屏
@@ -139,7 +142,7 @@ export default {
     position: absolute;
     right: 55px;
     top: 30px;
-    border: 1px solid #70d9ff;
+    border: 1px solid #FFE18E;
     width: 70px;
     height: 28px;
     border-radius: 8px;
@@ -148,14 +151,14 @@ export default {
       height: 0;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
-      border-top: 8px solid #39c4f6;
+      border-top: 8px solid #FFE18E;
     }
     .arrows2 {
       width: 0;
       height: 0;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
-      border-bottom: 8px solid #39c4f6;
+      border-bottom: 8px solid #FFE18E;
     }
   }
   .theme2 {
@@ -166,16 +169,16 @@ export default {
       display: flex;
       align-items: center;
       height: 28px;
-      border: 1px solid #70d9ff;
+      border: 1px solid #FFE18E;
       border-radius: 8px;
       padding-left:3px ;
     }
     li:hover{
-      color: #70d9ff;
+      color: #FFE18E;
     }
   }
   height: 100%;
-  background: url("../assets/imgBule/bg.png") no-repeat #082f5a !important;
+  background: url("../assets/imgGold/bg.png") no-repeat #322007 !important;
   background-size: calc(100% - 30px) calc(100% - 30px) !important;
   background-position: 50% 50% !important;
   overflow: hidden;
@@ -205,10 +208,10 @@ export default {
     margin: -10px 0 0 40px;
     .box {
       margin-top: 20px;
-      color: #fff;
+      color: #563B19 ;
       width: 464px;
       height: 280px;
-      background: url("../assets/imgBule/boxBg.png") no-repeat center;
+      background: url("../assets/imgGold/boxBg.png") no-repeat center;
       background-size: 100% 100%;
       .biaoti {
         height: 27px;
@@ -241,7 +244,7 @@ export default {
       }
     }
           .box:nth-of-type(2){
-              background: url("../assets/imgBule/boxBg2.png") no-repeat center;
+              background: url("../assets/imgGold/boxBg2.png") no-repeat center;
               background-size: 100% 100%;
       }
 
@@ -291,7 +294,7 @@ export default {
       margin-top: 0;
     }
     .active {
-      color: #70d9ff;
+      color: #FFE18E;
     }
   }
   .quanping {