feat: 修改首页

src/assets/css/reset.css

@@ -109,6 +109,10 @@ table {
   src: url(./庞门正道标题体.ttf);
 }
 @font-face {
+  font-family: YouSheBiaoTiHei;
+  src: url(./YouSheBiaoTiHei.ttf);
+}
+@font-face {
   font-family: JiangChengXieHei-900W;
   src: url(./江城斜黑体900W.ttf);
 }

src/views/index/index_copy.vue

@@ -775,7 +775,7 @@
             </el-carousel-item>
           </el-carousel> -->
         </div>
-        <div class="list-box" style="margin-top:20px">
+        <!-- <div class="list-box" style="margin-top:20px">
           <div class="title-box">
             <img src="@/assets/images/index/title-bg.png" alt="" />
             <img
@@ -801,6 +801,39 @@
               </li>
             </ul>
           </div>
+        </div> -->
+        <div class="list-box" style="margin-top:20px">
+          <div class="title-box">
+            <img src="@/assets/images/index/title-bg.png" alt="" />
+            <img
+              src="@/assets/images/index/icon-arrow.png"
+              style="width: 35px;height: 39px;position: absolute;left: 9px;"
+            />
+            <div class="text">
+              <p :class="[1 == 1 ? 'active' : '']">
+                <span class="title">主导产业</span>
+              </p>
+            </div>
+          </div>
+
+          <div class="image-container">
+            <div class="img-container">
+              <img src="@/assets/images/index/rotate-green.png" alt="" class="rotate-img" />
+              <img src="@/assets/images/index/main-paper.png" alt="" class="title-img" />
+              <div class="text-container">主导产业</div>
+            </div>
+            <div class="img-container">
+              <img src="@/assets/images/index/rotate-blue.png" alt="" class="rotate-img" />
+              <img src="@/assets/images/index/main-jiaotong.png" alt="" class="title-img" />
+
+              <div class="text-container2">战略性新兴产业</div>
+            </div>
+            <div class="img-container">
+              <img src="@/assets/images/index/rotate-green.png" alt="" class="rotate-img" />
+              <img src="@/assets/images/index/main-dianli.png" alt="" class="title-img" />
+              <div class="text-container">主导产业</div>
+            </div>
+          </div>
         </div>
 
         <div class="list-box" style="margin-top:20px">
@@ -1086,10 +1119,10 @@ export default {
         if (this.timer1) {
           clearInterval(this.timer1);
         }
-        if (this.$refs["myList1"]) {
-          this.$refs["myList1"].scrollTop = 0;
-        }
-        this.setScroll("myList1", "timer1", 100, 1);
+        // if (this.$refs["myList1"]) {
+        //   this.$refs["myList1"].scrollTop = 0;
+        // }
+        // this.setScroll("myList1", "timer1", 100, 1);
         this.setScroll("myList2", "timer2", 100, 1);
       });
     },
@@ -2702,6 +2735,24 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+@keyframes rotation1 {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+
+  to {
+    -webkit-transform: rotate(-360deg);
+  }
+}
+@-webkit-keyframes rotation1 {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+
+  to {
+    -webkit-transform: rotate(-360deg);
+  }
+}
 .index {
   width: 100%;
   height: 100%;
@@ -3532,6 +3583,67 @@ span.san-right {
   }
 }
 
+.image-container {
+  height: 210px;
+  background: url("~@/assets/images/index/img-box-bg.png") no-repeat;
+  overflow: hidden;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  .img-container {
+    opacity: 0.7;
+    position: relative;
+    top: -10px;
+    .title-img {
+      position: absolute;
+      left: -67px;
+      top: -76px;
+      width: 134px;
+      height: 134px;
+    }
+    .rotate-img {
+      position: absolute;
+      left: -80px;
+      top: -80px;
+      width: 160px;
+      height: 146px;
+      -webkit-transform: rotate(360deg);
+
+      transform: rotate(360deg);
+
+      animation: rotation1 4s linear infinite;
+
+      -moz-animation: rotation1 4s linear infinite;
+
+      -webkit-animation: rotation1 4s linear infinite;
+
+      -o-animation: rotation1 4s linear infinite;
+    }
+    .text-container,
+    .text-container2 {
+      position: absolute;
+      height: 26px;
+      width: 140px;
+      border-radius: 14px;
+      top: 70px;
+      left: -64px;
+      font-size: 14px;
+      font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+      font-weight: 400;
+      color: #ffffff;
+      background: #058171;
+      text-align: center;
+      line-height: 26px;
+    }
+    .text-container2 {
+      background: linear-gradient(90deg, rgba(40, 109, 247, 0.6) 0%, rgba(40, 109, 247, 0.6) 100%);
+    }
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
 .b-left {
 }
 .charts-box {