修改数据与页面逻辑

tanghaolin

10 天以前 04a2d3e3c701a03981c4b66162ff9515f9d7dd12

 src/views/Home.vue

@@ -2,7 +2,7 @@
   <div class="w-full h-full relative">
      <!-- 轮播图部分 -->
      <div class="banner-carousel relative w-screen h-[602px]">
         <el-carousel height="602px" :interval="3000" indicator-position="none" arrow="never">
         <el-carousel height="602px" :interval="3000" indicator-position="" pause-on-hover>
            <el-carousel-item>
               <div class="carousel-item">
                  <img src="@/assets/carousel/home/1.png" class="carousel-image" />
@@ -30,14 +30,13 @@
         <div class="bg-white py-8" v-if="false">
            <div class="mx-auto px-32">
               <div class="grid grid-cols-4 divide-x-w-default">
                  <a @click="toSubsidy" class="block" style="border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3">
                  <a @click="toSubsidy" class="block"
                     style="border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3">
                     <div class="flex items-center gap-1 justify-center">
                        <div class="w-16 h-16">
                           <svg viewBox="0 0 24 24" class="w-full h-full">
                              <path
                                 fill="currentColor"
                                 d="M14,17H7V15H14V17M17,13H7V11H17V13M17,9H7V7H17V9M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,19H5V5H19V19Z"
                              />
                              <path fill="currentColor"
                                 d="M14,17H7V15H14V17M17,13H7V11H17V13M17,9H7V7H17V9M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,19H5V5H19V19Z" />
                           </svg>
                        </div>
                        <div>
@@ -50,10 +49,8 @@
                     <div class="flex items-center gap-1 justify-center">
                        <div class="w-16 h-16">
                           <svg viewBox="0 0 24 24" class="w-full h-full">
                              <path
                                 fill="currentColor"
                                 d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z"
                              />
                              <path fill="currentColor"
                                 d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z" />
                           </svg>
                        </div>
                        <div>
@@ -66,10 +63,8 @@
                     <div class="flex items-center gap-1 justify-center">
                        <div class="w-16 h-16">
                           <svg viewBox="0 0 24 24" class="w-full h-full">
                              <path
                                 fill="currentColor"
                                 d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
                              />
                              <path fill="currentColor"
                                 d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
                           </svg>
                        </div>
                        <div>
@@ -95,48 +90,38 @@
         <!-- 主内容区域 -->
         <div class="bg-white flex flex-col gap-8 relative" style="width: calc(100% - 434px)">
            <!-- 产品区域 -->
            <div class="bg-[#F0F3EF] w-full">
            <div class="bg-[#F0F3EF] w-full relative">
               <div class="catalog-list bg-[#fff] grid grid-cols-5 gap-4 justify-center items-center">
                  <div
                     :class="state.curSelectCatalog === item.tag ? 'catalog-tag-active' : ''"
                     class="catalog-item"
                     v-for="item in state.catalog"
                     :key="item.tag"
                     @click="changeCatalog(item.tag)"
                  >
                  <div :class="state.curSelectCatalog === item.tag ? 'catalog-tag-active' : ''"
                     class="catalog-item" v-for="item in state.catalog" :key="item.tag"
                     @click="changeCatalog(item.tag)">
                     {{ item.name }}
                  </div>
               </div>
               <!-- 我需要设置swiper的默认显示的slide -->
               <swiper
                  :direction="'vertical'"
                  @swiper="onSwiper"
                  @slideChange="onSlideChange"
                  :slidesPerView="state.catalogSwiperIndex"
                  :centeredSlides="true"
                  :autoplay="{
               <swiper :direction="'vertical'" @swiper="onSwiper" @slideChange="onSlideChange"
                  :slidesPerView="state.catalogSwiperIndex" :centeredSlides="true" :autoplay="{
                     delay: 1000000,
                     disableOnInteraction: false,
                     pauseOnMouseEnter: true,
                  }"
                  :effect="'fade'"
                  :modules="SwiperModule"
                  class="catalog-swiper w-full h-[1175px]"
               >
                  }" :effect="'fade'" :modules="SwiperModule" class="catalog-swiper w-full h-[765px]">
                  <swiper-slide class="w-full h-full" v-for="(item, index) in state.catalogItemList" :key="index">
                     <div class="catalog-continer overflow-hidden">
                        <div class="catalog-continer-item p-4 relative" v-for="child in item" :key="child.Id" @click="handleCatalogClick(child)">
                        <div class="catalog-continer-item p-4 relative" v-for="child in item" :key="child.Id"
                           @click="handleSeriesClick(child)">
                           <div class="w-full h-[250px]">
                              <img class="w-full h-full object-contain" :src="child.PhysicalPicturePath" alt="" />
                              <img class="w-full h-full object-contain" :src="child.PhysicalPicturePath"
                                 alt="" />
                           </div>
                           <div class="mt-4 text-center font-medium" style="font-size: 18px">
                              {{ child.ModelType }}
                              {{ child.Model }}
                           </div>

                           <div class="text-center font-medium text-[14px] bg-[#fff] text-[#003a8f] absolute top-[10px] right-[-13px]" style="font-weight: bold">
                           <div class="text-center font-medium text-[14px] bg-[#fff] text-[#003a8f] absolute top-[10px] right-[-13px]"
                              style="font-weight: bold">
                              <!-- {{ getCompanyNameByType(child.Type) }} -->
                              <div class="etiquet-price">
                                 <p>{{ getCompanyNameByType(child.Type) }}</p>
                                 <p>{{ child.CompanyName }}</p>
                                 <div></div>
                              </div>
                           </div>
@@ -144,6 +129,9 @@
                     </div>
                  </swiper-slide>
               </swiper>
               <div class="text-center text-[18px] text-[#5c5c5c] more-series-btn" @click="handleCatalogClick">
                  更多>>
               </div>
            </div>
            <!-- 新闻公告区域 -->
            <div class="w-full mb-4">
@@ -158,12 +146,8 @@
                  <!-- 左侧新闻模板 -->
                  <div class="w-[373px] flex flex-col gap-4">
                     <div class="w-full relative left-news-temp-div">
                        <img
                           class="w-full flex-0 cursor-pointer"
                           src="@/assets/home/notice1.png"
                           @click="routeClick('/news-detail/8')"
                           alt="新闻政策"
                        />
                        <img class="w-full flex-0 cursor-pointer" src="@/assets/home/notice1.png"
                           @click="routeClick('/news-detail/8')" alt="新闻政策" />
                     </div>
                     <span class="news-title">
                        《上海市经济信息化委关于开展2025年度上海市工业通信业用能设备更新专项扶持资金项目申报工作的通知》
@@ -172,32 +156,29 @@
                  <div class="flex-auto right-news-temp-div">
                     <div class="w-full h-[45px] flex justify-between items-center">
                        <div class="w-[20%] font-bold text-[20px]">新闻政策</div>
                        <div class="w-[80%] text-right pr-[10%] text-[18px] text-[#5c5c5c]">更多>></div>
                        <div class="w-[80%] text-right pr-[30px] text-[18px] text-[#5c5c5c]">更多>></div>
                     </div>
                     <div class="w-full flex justify-between gap-8" style="height: calc(100% - 45px)">
                        <div class="w-[422px] flex-shrink-0">
                           <img src="@/assets/home/news_1.jpg" alt="新闻政策" class="w-full h-[187px]" />
                           <div
                              class="line-clamp-3 font-bold text-large mb-2 hover:text-primary cursor-pointer text-[20px] text-[#000]"
                              @click="routeClick('/news-detail/8')"
                           >
                           <div class="line-clamp-3 font-bold text-large mb-2 hover:text-primary cursor-pointer text-[20px] text-[#000]"
                              @click="routeClick('/news-detail/8')">
                              上海市经济信息化委关于开展2025年度上海市工业通信业用能设备更新专项扶持资金项目申报工作的通知
                           </div>
                           <div
                              class="text-regular text-[16px] text-[#656565] line-height-[29px] line-clamp-4 new-desc-text overflow-hidden"
                              style="text-indent: 2rem"
                           >
                           <div class="text-regular text-[16px] text-[#656565] line-height-[29px] line-clamp-4 new-desc-text overflow-hidden"
                              style="text-indent: 2rem">
                              有关单位：
                              为贯彻落实《上海市节能减排（应对气候变化）专项资金管理办法（沪发改规范〔2021〕5号）》和《上海市工业通信业用能设备更新专项扶持实施细则》（沪经信规范〔2025〕1号），进一步推进本市工业通信业用能设备更新工作，现组织开展2025年度上海市工业通信业用能设备更新专项扶持资金项目申报工作。
                           </div>
                        </div>
                        <div class="mt-4">
                           <div v-for="(item, index) in newsList" :key="index" class="flex text-regular justify-between items-center news-item">
                              <div class="flex items-center hover:text-primary w-full" @click="handleNewsClick(item)">
                           <div v-for="(item, index) in newsList" :key="index"
                              class="flex text-regular justify-between items-center news-item">
                              <div class="flex items-center hover:text-primary w-full"
                                 @click="handleNewsClick(item)">
                                 <div class="w-[6px] h-[6px] mr-2 news-list-dot"></div>
                                 <div
                                    class="w-full text-gray-700 hover:text-blue-500 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap"
                                 >
                                    class="w-full text-gray-700 hover:text-blue-500 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap">
                                    {{ item.title }}
                                 </div>
                              </div>
@@ -222,27 +203,25 @@
                        <div id="eec-product-map" ref="EecProductMapChartRef"></div>
                     </div>
                     <div class="h-fit my-auto px-4 py-4 mx-10 eec-product-num-div">
                        <div class="h-full bg-[#393939] px-4 py-4 flex-1" style="box-sizing: border-box; background-color: rgb(0 0 0 / 67%)">
                        <div class="h-full bg-[#393939] px-4 py-4 flex-1"
                           style="box-sizing: border-box; background-color: rgb(0 0 0 / 67%)">
                           <div class="flex flex-col justify-between items-center mb-4 gap-2">
                              <div class="text-lg font-bold text-[#26c4f6]">全国能效产品总量</div>
                              <div class="px-10 bg-[#d7ecf1] py-1.5 rounded-lg text-large font-bold text-warning">
                                 {{ m_allEecProductNumber }}<span class="text-base text-info-light-3 ml-1">个</span>
                              <div
                                 class="px-10 bg-[#d7ecf1] py-1.5 rounded-lg text-large font-bold text-warning">
                                 {{ m_allEecProductNumber }}<span
                                    class="text-base text-info-light-3 ml-1">个</span>
                              </div>
                           </div>
                           <div class="grid grid-cols-1 gap-4 h-[140px]">
                              <swiper
                                 :direction="'vertical'"
                                 :slidesPerView="5"
                                 :spaceBetween="10"
                                 :autoplay="{
                                    delay: 1500,
                                    disableOnInteraction: false,
                                 }"
                                 :modules="SwiperModule"
                                 class="mySwiper"
                              >
                                 <swiper-slide v-for="(item, index) in cooperationData" :key="index" style="width: 100%; height: 20px">
                                    <div style="height: 100%; width: 100%; display: flex; gap: 4px; justify-content: center">
                              <swiper :direction="'vertical'" :slidesPerView="5" :spaceBetween="10" :autoplay="{
                                 delay: 1500,
                                 disableOnInteraction: false,
                              }" :modules="SwiperModule" class="mySwiper">
                                 <swiper-slide v-for="(item, index) in cooperationData" :key="index"
                                    style="width: 100%; height: 20px">
                                    <div
                                       style="height: 100%; width: 100%; display: flex; gap: 4px; justify-content: center">
                                       <span class="text-[#26c4f6]">{{ item.region }}</span>
                                       <div>
                                          <span class="text-white font-bold">{{ item.count }}</span>
@@ -274,19 +253,14 @@
            </div>
         </div>
         <!-- 返回顶部 -->
         <div
            id="scroll-to-top"
         <div id="scroll-to-top"
            class="group absolute bottom-[100px] z-[30] right-[100px] transition-all duration-300 cursor-pointer"
            :class="{
               'opacity-0 translate-y-4 fade-leave-active': scrollPercent < 35,
               'opacity-100 translate-y-0 fade-enter-active': scrollPercent >= 35,
            }"
            v-show="scrollPercent >= 35"
            @click="scrollToTop"
         >
            }" v-show="scrollPercent >= 35" @click="scrollToTop">
            <div
               class="w-14 h-14 flex items-center justify-center flex-col cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200"
            >
               class="w-14 h-14 flex items-center justify-center flex-col cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200">
               <img src="@/assets/home/Totop.jpg" alt="返回顶部" class="" />
            </div>
         </div>
@@ -295,9 +269,7 @@
      <!-- 客服对话框 -->
      <customer-service
         class="fixed right-[150px] bottom-[17px] z-50 w-[440px] h-[calc(80vh-30px)] shadow-lg rounded-lg"
         v-show="showCustomerService"
         @close="showCustomerService = false"
      />
         v-show="showCustomerService" @close="showCustomerService = false" />
   </div>
</template>

@@ -406,7 +378,7 @@
   curSelectCatalog: 1,
   catalogSwiperIndex: 0,
   catalogItemList: [],
   m_CompanyList:[],
   m_CompanyList: [],
   m_PageLoading: false,
});

@@ -604,25 +576,6 @@

   let scrollToTop = document.getElementById('scroll-to-top');
   let footer = document.getElementById('app-footer');

   // if (footer) {
   //    const footerRect = footer.getBoundingClientRect();
   //    const viewportHeight = window.innerHeight;

   //    if (footerRect.top > viewportHeight) {
   //       // Footer is not in viewport
   //       if (scrollToTop) {
   //          scrollToTop.style.bottom = '100px';
   //       }
   //    } else {
   //       // Footer is in viewport
   //       if (scrollToTop) {
   //          const distanceFromFooter = 100; // 100px gap from footer
   //          const newBottom = viewportHeight - footerRect.top + distanceFromFooter;
   //          scrollToTop.style.bottom = `${newBottom}px`;
   //       }
   //    }
   // }
};
const linkClick = () => {
   router.push('/select-selpara');
@@ -656,7 +609,7 @@
            };
         });
      })
      .catch((err) => {});
      .catch((err) => { });
};
// 初始化类型列表数据
const initCatalogList = (cb: any = null) => {
@@ -667,40 +620,32 @@
      url: m_RequestDataObj[catalogTag].requestPath,
   })
      .then((res) => {

         state.m_PageLoading = false;
         let result = res.data;

         const { SeriesList } = result
         let arr = [];
         // arr为二位数组，每个子数组包含15条数据

         result = result.map((item: any, index: number) => {
            if (catalogTag === 2) {
               item.Price = item.Price * 10;
            }
            if (catalogTag === 4) {
               item.Price = item.Price * 5;
            }
            let incrementFactor = 0.1 * (index + 1); // 根据索引计算递增系数
            let newPrice = parseFloat(item.Price) + parseFloat((item.Price * incrementFactor).toFixed(1)); // 计算新的Price值

         const pageSeriesList = SeriesList.map((item: any, index: number) => {
            return {
               Id: item.Id,
               SeriesID: item.SeriesID,
               Type: item.Type,
               ModelType: item.ModelType,
               Model: item.Model,
               CatalogID: item.CatalogID,
               CompanyName: item.CompanyName,
               RecordNumber: item.RecordNumber,
               EnergyEfficiencyClass: item.EnergyEfficiencyClass,
               RecordTime: item.RecordTime,
               Price: newPrice,
               PhysicalPicturePath: 'static/EecProductData/' + item.PhysicalPicturePath,
               CertificatePath: `static/EecProductData/${item.CertificatePath}`,
               Tip: `备案时间：${item.RecordTime} \n 备案号：${item.RecordNumber}`,
            };
         });

         for (let i = 0; i < result.length; i += 15) {
            arr.push(result.slice(i, i + 15));
         for (let i = 0; i < pageSeriesList.length; i += 15) {
            arr.push(pageSeriesList.slice(i, i + 15));
         }
         state.catalogItemList = arr;

@@ -1127,14 +1072,23 @@
   };
   initCatalogList(cb);
};
const handleSeriesClick = (item: any) => {
   router.push({
      path: '/product-series',
      query: {
         sid: item.SeriesID,
         ft: 'home',
         cid: item.CatalogID,
         type: state.curSelectCatalog,
      },
   });
};
// 产品类型点击
const handleCatalogClick = (item: any) => {
   const type = item.Type;
   const companyID = getCompanyItemByType(type)[0].CompanyId;
const handleCatalogClick = () => {
   const type = state.curSelectCatalog;
   router.push({
      path: '/certified-products',
      query: {
         company: companyID,
         type: type,
      },
   });
@@ -1143,7 +1097,7 @@
const onSwiper = (swiper: any) => {
   catalogSwiperRef.value = swiper;
};
const onSlideChange = () => {};
const onSlideChange = () => { };
const toFeedBack = () => {
   router.push('/feedback');
};
@@ -1185,7 +1139,8 @@
.carousel-image {
   width: 100%;
   height: 100%;
   object-fit: fill; /* 修改为fill以完全填充容器 */
   object-fit: fill;
   /* 修改为fill以完全填充容器 */
}

.function-card {
@@ -1196,9 +1151,11 @@
   transform: translateY(-4px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.eec-product-div {
   background-image: url('@/assets/home/eec_product_bg.jpg');
}

.eec-product-num-div {
   min-width: 230px;
   border: 1px solid rgb(28, 151, 183);
@@ -1207,14 +1164,17 @@
   overflow: hidden;
   height: 255px;
}

#eec-product-map {
   width: 100%;
   height: 100%;
}

.mySwiper {
   width: 100%;
   height: 100%;
}

.card-hover-style {
   /* display: flex;
   justify-content: center;
@@ -1224,6 +1184,7 @@
   color: #000;
   margin-right: unset;
}

:deep(.el-carousel__arrow) {
   background-color: rgba(0, 0, 0, 0.5);
   border: none;
@@ -1260,6 +1221,7 @@
.catalog-list {
   padding: 20px;
   box-sizing: border-box;

   .catalog-item {
      display: flex;
      justify-content: center;
@@ -1268,15 +1230,19 @@
      color: #003a8f;
      font-size: 20px;
      font-weight: 700;

      &:hover {
         color: #71b02b;
      }
   }
}

.catalog-continer {
   /* 总高度 - 上下padding - 行间距 */
   height: 100%; /* 70px是上下padding总和，60px是两行间距总和 */
   padding: 35px; /* 假设padding为20px，你可以根据需要调整 */
   height: 100%;
   /* 70px是上下padding总和，60px是两行间距总和 */
   padding: 35px;
   /* 假设padding为20px，你可以根据需要调整 */
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: repeat(3, 1fr);
@@ -1287,15 +1253,18 @@

.catalog-continer-item {
   background-color: #fff;
   height: 100%; /* 改为100%以适应grid布局 */
   height: 100%;
   /* 改为100%以适应grid布局 */
   border-radius: 20px;
   box-sizing: border-box;
   cursor: pointer;

   &:hover {
      img {
         transform: scale(1.05);
         transition: all 1s ease;
      }

      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
   }
}
@@ -1313,6 +1282,7 @@

.left-news-temp-div {
   border: 1px solid #ccc;

   &::before {
      content: '';
      position: absolute;
@@ -1327,6 +1297,7 @@
.right-news-temp-div {
   /* border-top: 4px solid #003a8f; */
   position: relative;

   &::before {
      content: '';
      position: absolute;
@@ -1337,6 +1308,7 @@
      z-index: 1;
      background-color: #71b02b;
   }

   &::after {
      content: '';
      position: absolute;
@@ -1356,6 +1328,7 @@
      font-weight: 300;
   }
}

.news-list-dot {
   width: 6px;
   height: 6px;
@@ -1364,6 +1337,7 @@

.eec-product-classify-div {
   position: relative;

   &::before {
      content: '';
      position: absolute;
@@ -1374,6 +1348,7 @@
      z-index: 1;
      background-color: #71b02b;
   }

   &::after {
      content: '';
      position: absolute;
@@ -1411,6 +1386,7 @@
      opacity: 0;
      transform: translateY(16px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
@@ -1422,6 +1398,7 @@
      opacity: 1;
      transform: translateY(0);
   }

   to {
      opacity: 0;
      transform: translateY(16px);
@@ -1435,32 +1412,50 @@
.fade-leave-active {
   animation: fadeOut 0.3s ease-out;
}

.etiquet-price {
    background: #003a8f;
    margin-left: -0.65rem;
    padding: .2rem 1.2rem;
    border-radius: 5px 0 0 5px;
   background: #003a8f;
   margin-left: -0.65rem;
   padding: .2rem 1.2rem;
   border-radius: 5px 0 0 5px;
}

.etiquet-price p {
  height: 20px;
  margin: 0;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #fff;
   height: 20px;
   margin: 0;
   display: flex;
   font-size: 14px;
   font-weight: 600;
   line-height: 20px;
   color: #fff;
}

.etiquet-price div {
  position: absolute;
  bottom: -23px;
  right: 0px;
  width: 0;
  height: 0;
  border-top: 13px solid #003a8f;
  border-bottom: 10px solid transparent;
  border-right: 13px solid transparent;
  z-index: -6;
   position: absolute;
   bottom: -23px;
   right: 0px;
   width: 0;
   height: 0;
   border-top: 13px solid #003a8f;
   border-bottom: 10px solid transparent;
   border-right: 13px solid transparent;
   z-index: -6;
}

.more-series-btn {
   top: 66px;
   right: 30px;
   height: 35px;
   position: absolute;
   width: 100%;
   justify-content: flex-end;
   align-items: center;
   display: flex;
   cursor: pointer;
   z-index: 30;

   &:hover {
      color: var(--theme-color);
   }
}
</style>