123

src/components/Tabs/index.vue

@@ -6,7 +6,7 @@
       @click="updateActiveTab(item.id)"
       :class="isActive(item.id) ? 'active_color' : ''"
     >
-      {{ item.name }}
+      <span class="tab_name">{{ item.name }}</span>
       <p class="lines" v-if="isActive(item.id)"></p>
     </div>
   </div>
@@ -49,6 +49,12 @@ const updateActiveTab = id => {
   div {
     cursor: pointer;
     position: relative;
+    transition-property: all;
+    transition-duration: 0.4s;
+    animation-fill-mode: forwards;
+  }
+  div:hover {
+    transform: scale(1.2);
   }
   .lines {
     position: absolute;

src/views/Index/components/SoftHardwareSummary/index.vue

@@ -42,7 +42,42 @@
           合作过的<span class="blue_font">芯片原厂</span>
         </p>
         <div class="img_wrap">
-          <img :src="ContractImg" class="contracted" />
+          <div class="img_card_wrap_grid mb67">
+            <img :src="A1" alt="" class="img1" />
+          </div>
+          <div class="img_card_wrap_grid mb67 mdb">
+            <img :src="A2" alt="" class="img2" />
+          </div>
+          <div class="img_card_wrap_grid mb67">
+            <img :src="A3" alt="" class="img3" />
+          </div>
+          <div class="img_card_wrap_grid mb67 mdb">
+            <img :src="A4" alt="" class="img4" />
+          </div>
+          <div class="img_card_wrap_grid mb67">
+            <img :src="A5" alt="" class="img5" />
+          </div>
+          <div class="img_card_wrap_grid mb67 mlb">
+            <img :src="A6" alt="" class="img6" />
+          </div>
+          <div class="img_card_wrap_grid mt67">
+            <img :src="A7" alt="" class="img7" />
+          </div>
+          <div class="img_card_wrap_grid mt67 mdb">
+            <img :src="A8" alt="" class="img8" />
+          </div>
+          <div class="img_card_wrap_grid mt67">
+            <img :src="A9" alt="" class="img9" />
+          </div>
+          <div class="img_card_wrap_grid mt67 mdb">
+            <img :src="A10" alt="" class="img10" />
+          </div>
+          <div class="img_card_wrap_grid mt67">
+            <img :src="A11" alt="" class="img11" />
+          </div>
+          <div class="img_card_wrap_grid mt67 mlb">
+            <img :src="A12" alt="" class="img12" />
+          </div>
         </div>
       </div>
     </div>
@@ -50,7 +85,6 @@
 </template>
 
 <script setup>
-import Back from '@/assets/img/hardware/hardware.png'
 import Dps from '@/assets/img/hardware/dps.png'
 import Shuzi from '@/assets/img/hardware/shuzidianlu.png'
 import Dianlu from '@/assets/img/hardware/dianlu.png'
@@ -61,6 +95,18 @@ import Chuanganji from '@/assets/img/hardware/chuanganqi.png'
 import ContractImg from '@/assets/img/hardware/logotubiao.png'
 import { ref, onMounted } from 'vue'
 import { handleScreenAuto } from '@/common/utils'
+import A1 from '@/assets/img/hardware/1.png'
+import A2 from '@/assets/img/hardware/2.png'
+import A3 from '@/assets/img/hardware/3.png'
+import A4 from '@/assets/img/hardware/4.png'
+import A5 from '@/assets/img/hardware/5.png'
+import A6 from '@/assets/img/hardware/6.png'
+import A7 from '@/assets/img/hardware/7.png'
+import A8 from '@/assets/img/hardware/8.png'
+import A9 from '@/assets/img/hardware/9.png'
+import A10 from '@/assets/img/hardware/10.png'
+import A11 from '@/assets/img/hardware/11.png'
+import A12 from '@/assets/img/hardware/12.png'
 onMounted(() => {
   handleScreenAuto('#software_container')
   window.onresize = handleScreenAuto('#software_container')
@@ -210,20 +256,92 @@ const showEmpty = ref(true)
         }
       }
       .img_wrap {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        grid-template-rows: repeat(2, 1fr);
+        margin-top: 40px;
+        .img_card_wrap_grid {
           display: flex;
           align-items: center;
           justify-content: center;
+          padding: 20px 36px;
+          transition-property: all;
+          transition-duration: 0.7s;
+          animation-fill-mode: forwards;
+          img {
             transition-property: all;
             transition-duration: 0.7s;
             animation-fill-mode: forwards;
-        .contracted {
-          width: 1480px;
-          height: auto;
-          transform: translateX(-20px);
           }
+          .img1 {
+            width: 145px;
+            height: 51px;
+          }
+          .img2 {
+            width: 161px;
+            height: 54px;
+          }
+          .img3 {
+            width: 135px;
+            height: 89px;
+          }
+          .img4 {
+            width: 156px;
+            height: 68px;
+          }
+          .img5 {
+            width: 124px;
+            height: 62px;
+          }
+          .img6 {
+            width: 136px;
+            height: 49px;
+          }
+          .img7 {
+            width: 106px;
+            height: 56px;
+          }
+          .img8 {
+            width: 170px;
+            height: 56px;
+          }
+          .img9 {
+            width: 181px;
+            height: 44px;
+          }
+          .img10 {
+            width: 172px;
+            height: 55px;
+          }
+          .img11 {
+            width: 162px;
+            height: 26px;
+          }
+          .img12 {
+            width: 134px;
+            height: 29px;
+          }
+        }
+        .img_card_wrap_grid:hover {
+          background: rgba(0, 0, 0, 0.3);
+          img {
+            transform: scale(1.1);
+          }
+        }
+        .mb67 {
+          // padding-bottom: 30px;
+          border-bottom: dashed 1px RGBA(180, 188, 244, 1);
+        }
+        .mt67 {
+          // padding-top: 30px;
+        }
+        .mdb {
+          border-left: dashed 1px RGBA(180, 188, 244, 1);
+          border-right: dashed 1px RGBA(180, 188, 244, 1);
+        }
+        .mlb {
+          border-left: dashed 1px RGBA(180, 188, 244, 1);
         }
-      .img_wrap:hover {
-        transform: scale(1.06);
       }
     }
   }