提交

assets/css/root.scss

@@ -368,6 +368,7 @@
 
     @include responseTo("pc") {
         --size--133: -133px;
+        --size--105: -105px;
         --size--100: -100px;
         --size--75: -75px;
         --size--50: -50px;
@@ -695,6 +696,7 @@
         --size-740: 740px;
         --size-750: 750px;
         --size-757: 757px;
+        --size-767: 767px;
         --size-770: 770px;
         --size-774: 774px;
         --size-775: 775px;
@@ -746,6 +748,7 @@
     // 100 / 1920 * value
     @include responseTo("pc1") {
         --size--133: -6.9375vw;
+        --size--105: -5.4688vw;
         --size--100: -5.2083vw;
         --size--75: -3.9063vw;
         --size--50: -2.6042vw;
@@ -1073,6 +1076,7 @@
         --size-740: 38.5417vw;
         --size-750: 39.0625vw;
         --size-757: 39.3854vw;
+        --size-767: 6.7905vw;
         --size-770: 40vw;
         --size-774: 40.2604vw;
         --size-775: 40.3125vw;

components/Header/index.vue

@@ -649,6 +649,9 @@ getDictListData();
             --n-height: var(--size-26) !important;
             line-height: var(--size-26) !important;
           }
+          :deep(.n-input__input) {
+            width: var(--size-180) !important;
+          }
         }
         .search_r {
           width: var(--size-105);

pages/index.vue

@@ -60,25 +60,26 @@
     </div>
     <div class="marketBox">
       <div class="marketBox_title">Market Express</div>
-      <n-carousel :autoplay="true" :interval="3000">
-        <template v-for="item in carouselList" :key="item">
+      <n-carousel :autoplay="false" ref="swiperRef" :interval="3000">
+        <!-- carouselList -->
+        <template v-for="item in marketInfo1.list" :key="item">
           <n-carousel-item>
             <div class="img">
               <img class="carousel-img" :src="BaseUrl+'/carousel/'+item.name" />
               <div class="desc">
-                <div class="desc_title">The Global Electronically Commutated Motor (ECM) Market is Expected to Reach 18.18 US$ billion by 2030</div>
-                <div class="desc_btn">View details</div>
+                <div class="desc_title">{{item.title}}</div>
+                <a class="desc_btn" :href="'/reports/'+item.webTitle+'-'+item.id">View details</a>
               </div>
-              <view class="direction carousel_l">
-                <span class="iconfont icon-dkw_guanbi-"></span>
-              </view>
-              <view class="direction carousel_r">
-                <span class="iconfont icon-dkw_guanbi-"></span>
-              </view>
             </div>
           </n-carousel-item>
         </template>
       </n-carousel>
+      <view class="direction carousel_l" @click="swiperPrev()">
+        <span class="iconfont icon-dkw_guanbi-"></span>
+      </view>
+      <view class="direction carousel_r" @click="swiperNext()">
+        <span class="iconfont icon-dkw_guanbi-"></span>
+      </view>
     </div>
     <div class="popularBox">
       <div class="popularBox_l">
@@ -87,7 +88,9 @@
           <div class="popularBox_l_title_r">Know More <span class="iconfont icon-jiantou24"></span> </div>
         </div>
         <div class="popularBox_l_list">
-          <template v-for="(v,i) in reports" :key="i">
+          <!-- reports -->
+          <!-- marketInfo2.list -->
+          <template v-for="(v,i) in marketInfo2.list" :key="i">
             <div class="popularBox_l_list_item" v-if="i<2">
               <img :src="BaseUrl + '/report/' + v.fileName" alt="">
               <div class="popularBox_l_list_item_box">
@@ -295,7 +298,17 @@ function reportDetail () {
 function handleReport (value) {
   router.push({ name: "reports", params: { category: value } });
 }
-
+const swiperRef = ref();
+const swiperPrev = () => {
+  if (marketInfo1.value.list && marketInfo1.value.list.length > 4) {
+    swiperRef.value.prev()
+  }
+}
+const swiperNext = () => {
+  if (marketInfo1.value.list && marketInfo1.value.list.length > 4) {
+    swiperRef.value.next()
+  }
+}
 lang.value = userStore.getLang
 // 轮播图
 const data = await carouselListData();
@@ -317,7 +330,6 @@ let params1 = {
   pageSize: 5
 }
 const marketInfoRet1 = await marketInfoPageList(params1);
-console.log('aaaaaaaaaaa', marketInfoRet1)
 marketInfo1.value = marketInfoRet1;
 let params2 = {
   marketTypeList: "industry-information,policy-interpretation",
@@ -325,7 +337,6 @@ let params2 = {
   pageSize: 2
 }
 const marketInfoRet2 = await marketInfoPageList(params2);
-console.log('bbbbbbbbbbb', marketInfoRet2)
 marketInfo2.value = marketInfoRet2;
 useHead({
   title: t('defaultSettings.title'),
@@ -463,9 +474,39 @@ useHead({
   .marketBox {
     padding: var(--size-60) var(--size-145) var(--size-100);
     background: #ffffff;
+    position: relative;
+    .direction {
+      width: var(--size-73);
+      height: var(--size-73);
+      background: #ffffff;
+      border-radius: 50%;
+      position: absolute;
+      top: 40%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+    .carousel_l {
+      left: var(--size-105);
+      span {
+        display: block;
+        transform: rotateZ(-180deg);
+        font-size: 42px;
+        color: #1a1a1a;
+      }
+    }
+    .carousel_r {
+      right: var(--size-105);
+      span {
+        display: block;
+        font-size: 42px;
+        color: #1a1a1a;
+      }
+    }
     ::v-deep .n-carousel__slide,
     ::v-deep .n-carousel {
-      overflow: visible !important;
+      // overflow: visible !important;
     }
     .marketBox_title {
       font-size: var(--size-48);
@@ -508,35 +549,6 @@ useHead({
           margin: var(--size-30) 0;
         }
       }
-      .direction {
-        width: var(--size-73);
-        height: var(--size-73);
-        background: #ffffff;
-        border-radius: 50%;
-        position: absolute;
-        top: 40%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-      }
-      .carousel_l {
-        left: var(--size--36);
-        span {
-          display: block;
-          transform: rotateZ(-180deg);
-          font-size: 42px;
-          color: #1a1a1a;
-        }
-      }
-      .carousel_r {
-        right: var(--size--36);
-        span {
-          display: block;
-          font-size: 42px;
-          color: #1a1a1a;
-        }
-      }
     }
   }
   .popularBox {
@@ -549,7 +561,9 @@ useHead({
     padding: var(--size-80) var(--size-145) var(--size-80);
     display: flex;
     .popularBox_l {
+      width: var(--size-767);
       margin-right: var(--size-46);
+      flex-shrink: 0;
       .popularBox_l_title {
         display: flex;
         justify-content: space-between;

pages/report-industries/detail.vue

@@ -198,7 +198,7 @@ const tabsTitleList = ref<string[]>([
 ]);
 const exportToPdf = () => {
   const element = document.getElementById("content-to-export");
-  html2canvas(element)
+  html2canvas(element, { useCORS: true })
     .then((canvas) => {
       const imgData = canvas.toDataURL("image/png");
       const imgWidth = 210; // 设定宽度，可以根据需要调整