From 04a2d3e3c701a03981c4b66162ff9515f9d7dd12 Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期一, 21 四月 2025 22:32:21 +0800
Subject: [PATCH] 修改数据与页面逻辑
---
src/views/Home.vue | 1232 ++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 1,025 insertions(+), 207 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 8203b6f..ca94ef1 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,48 +1,42 @@
<template>
- <div class="h-full">
+ <div class="w-full h-full relative">
<!-- 杞挱鍥鹃儴鍒� -->
- <div class="banner-carousel relative right-[29.5%] w-screen">
- <el-carousel height="500px" :interval="5000" arrow="always">
+ <div class="banner-carousel relative w-screen h-[602px]">
+ <el-carousel height="602px" :interval="3000" indicator-position="" pause-on-hover>
<el-carousel-item>
<div class="carousel-item">
- <img src="@/assets/carousel/test/10.png" class="carousel-image" />
- <!-- <img src="https://www.app-i.cn/api/file?file_name=2d82602e-8797-46d7-9b5c-59d9f88bc6d9.png;杞欢涓�浣撳寲娴嬭瘯骞冲彴_鍓湰.png" class="carousel-image" /> -->
+ <img src="@/assets/carousel/home/1.png" class="carousel-image" />
</div>
</el-carousel-item>
<el-carousel-item>
<div class="carousel-item">
- <img src="@/assets/carousel/test/11.png" class="carousel-image" />
- <!-- <img src="https://www.app-i.cn/static/epidemicBanner.e4d9a821.jpg" alt=""> -->
+ <img src="@/assets/carousel/home/2.png" class="carousel-image" />
</div>
</el-carousel-item>
<el-carousel-item>
<div class="carousel-item">
- <img src="@/assets/carousel/test/14.png" class="carousel-image" />
- <!-- <img src="https://www.app-i.cn/api/file?file_name=072c9dda-3ffb-410d-be93-a88ec6c7e765.jpg;40鍛ㄥ勾1.jpg" alt=""> -->
+ <img src="@/assets/carousel/home/3.png" class="carousel-image" />
</div>
</el-carousel-item>
- <!-- <el-carousel-item>
- <img src="@/assets/carousel/1.png" class="w-full h-full object-cover" />
- </el-carousel-item> -->
+ <el-carousel-item>
+ <div class="carousel-item">
+ <img src="@/assets/carousel/home/4.png" class="carousel-image" />
+ </div>
+ </el-carousel-item>
</el-carousel>
</div>
- <div class="relative z-20 2 -mt-24">
+ <div class="relative z-20 2 w-full flex justify-center items-center">
<!-- 鍔熻兘鎸夐挳鍖哄煙 -->
- <div class="bg-white py-8">
+ <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">
- <router-link
- to="/subsidy-application"
- 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,19 +44,17 @@
<div class="text-sm text-info-light-3">Subsidy Application</div>
</div>
</div>
- </router-link>
+ </a>
<router-link to="/certified-products" class="block" style="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="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>
- <div class="text-lg font-medium">璁よ瘉浜у搧</div>
+ <div class="text-lg font-medium">鑳芥晥浜у搧</div>
<div class="text-sm text-info-light-3">Certified Products</div>
</div>
</div>
@@ -71,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>
@@ -83,170 +73,236 @@
</div>
</div>
</router-link>
- <router-link to="/" class="block" style="border-right: 1px solid #e3e3e3">
- <div class="flex items-center gap-1 justify-center" @click="linkClick(' http://www.xpump.net/web/#/CN/Index')">
+ <a class="block" style="border-right: 1px solid #e3e3e3" @click="linkClick">
+ <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,3L2,12H5V20H19V12H22L12,3M12,8.75A2.25,2.25 0 0,1 14.25,11A2.25,2.25 0 0,1 12,13.25A2.25,2.25 0 0,1 9.75,11A2.25,2.25 0 0,1 12,8.75M12,15C13.5,15 16.5,15.75 16.5,17.25V18H7.5V17.25C7.5,15.75 10.5,15 12,15Z"
- />
- </svg>
+ <img :src="YWLogo" class="h-full" />
</div>
<div>
<div class="text-lg font-medium">鏌ユ车缃�</div>
<div class="text-sm text-info-light-3">Pump Search</div>
</div>
</div>
- </router-link>
-
- <!-- <router-link to="/publish-demand" class="block">
- <div class="function-card bg-white rounded-lg shadow-md p-6 text-center">
- <div class="flex flex-col items-center">
- <div class="w-16 h-16 mb-4">
- <img src="@/assets/icons/publish-demand.svg" alt="鍙戦渶姹�" class="w-full h-full" />
- </div>
- <div>
- <div class="text-lg font-medium">鍙戦渶姹�</div>
- <div class="text-gray-400 text-sm">Publish Demand</div>
- </div>
- </div>
- </div>
- </router-link>
-
- <router-link to="/find-app" class="block">
- <div class="function-card bg-white rounded-lg shadow-md p-6 text-center">
- <div class="flex flex-col items-center">
- <div class="w-16 h-16 mb-4">
- <img src="@/assets/icons/find-app.svg" alt="鎵続PP" class="w-full h-full" />
- </div>
- <div>
- <div class="text-lg font-medium">鎵続PP</div>
- <div class="text-gray-400 text-sm">Find APP</div>
- </div>
- </div>
- </div>
- </router-link>
-
- <router-link to="/find-demand" class="block">
- <div class="function-card bg-white rounded-lg shadow-md p-6 text-center">
- <div class="flex flex-col items-center">
- <div class="w-16 h-16 mb-4">
- <img src="@/assets/icons/find-demand.svg" alt="鎵鹃渶姹�" class="w-full h-full" />
- </div>
- <div>
- <div class="text-lg font-medium">鎵鹃渶姹�</div>
- <div class="text-gray-400 text-sm">Find Demand</div>
- </div>
- </div>
- </div>
- </router-link> -->
+ </a>
</div>
</div>
</div>
- <div class="bg-white px-4 py-4 flex flex-col gap-8">
+ <!-- 涓诲唴瀹瑰尯鍩� -->
+ <div class="bg-white flex flex-col gap-8 relative" style="width: calc(100% - 434px)">
+ <!-- 浜у搧鍖哄煙 -->
+ <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)">
+ {{ item.name }}
+ </div>
+ </div>
+ <!-- 鎴戦渶瑕佽缃畇wiper鐨勯粯璁ゆ樉绀虹殑slide -->
+ <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-[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="handleSeriesClick(child)">
+ <div class="w-full h-[250px]">
+ <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.Model }}
+ </div>
+
+ <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>{{ child.CompanyName }}</p>
+ <div></div>
+ </div>
+ </div>
+ </div>
+ </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">
- <div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
- <div class="flex items-center space-x-2 ml-2 font-bold">
- <el-icon class="text-blue-500"><Document /></el-icon>
- <span class="text-medium font-bold"> <span class="text-primary">閫氱煡</span>鍏憡</span>
- </div>
- <el-button text>鏇村</el-button>
- </div>
- <div class="flex">
- <img
- class="w-[30%] flex-0"
- src="https://www.app-i.cn/api/file?file_name=f9afde4d-6993-43e6-9ea5-fa2359161b4d.png;2(1).png"
- alt="閫氱煡鍏憡"
- />
- <div class="bg-page p-4 flex-auto">
- <div class="font-bold text-medium over-ellipsis mb-2">
- 姝︽眽甯備汉姘戞斂搴滃叧浜庡嵃鍙戞姹夊競鍏充簬杩涗竴姝ヤ績杩涜蒋浠跺拰淇℃伅鎶�鏈湇鍔′笟楂樿川閲�
- </div>
- <div class="text-small text-regular">
- 鍚勫尯浜烘皯鏀垮簻锛屽競浜烘皯鏀垮簻鍚勯儴闂細
- 缁忕爺绌讹紝鐜板皢銆婃姹夊競鍏充簬杩涗竴姝ヤ績杩涜蒋浠跺拰淇℃伅鎶�鏈湇鍔′笟楂樿川閲忓彂灞曠殑鑻ュ共鏀跨瓥鎺柦銆嬪嵃鍙戠粰浣犱滑锛岃璁ょ湡缁勭粐瀹炴柦銆�
- </div>
- <div
- v-for="(item, index) in newsList"
- :key="index"
- class="flex text-regular justify-between items-center py-2"
- style="border-bottom: 1px solid #e3e3e3"
- >
- <div class="flex items-center hover:text-primary w-full" @click="handleNewsClick(item)">
- <!-- <div class="w-1.5 h-1.5 rounded-full bg-gray-400 mr-2"></div> -->
- <div class="w-full text-gray-700 hover:text-blue-500 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap">
- {{ item.title }}
- </div>
- </div>
- <!-- <div class="text-gray-400 text-sm">{{ item.date }}</div> -->
- </div>
- </div>
- </div>
- </div>
-
- <!-- 娲诲姩鍚堜綔鍖哄煙 -->
- <div class="w-full">
- <div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
- <div class="flex items-center space-x-2 ml-2 font-bold">
- <el-icon class="text-blue-500"><Operation /></el-icon>
- <span class="text-medium font-bold"> <span class="text-primary">璁よ瘉</span>鍘傚</span>
- </div>
- <el-button text>鏇村</el-button>
- </div>
- <div class="flex bg-[#f9f9f9]">
- <div class="flex-auto">
- <img src="@/assets/images/china-map.png" alt="娲诲姩鍚堜綔" class="w-full h-full" />
- </div>
- <div class="bg-[#393939] h-fit my-auto w-[200px] px-4 py-2 mx-10">
- <div class="flex flex-col justify-between items-center mb-4 gap-2">
- <div class="text-lg font-bold text-[#26c4f6]">鍏ㄥ浗鑳芥晥杞欢锝滆兘鏁圓PP鎬婚噺</div>
- <div class="px-10 bg-[#d7ecf1] py-1.5 rounded-lg text-large font-bold text-warning">
- 4083<span class="text-base text-info-light-3 ml-1">涓�</span>
- </div>
- </div>
- <div class="grid grid-cols-1 gap-4">
- <div v-for="(item, index) in cooperationData" :key="index" class="flex justify-between items-center">
- <span class="text-[#26c4f6]">{{ item.region }}</span>
- <div>
- <span class="text-white font-bold">{{ item.count }}</span>
- <span class="text-sm text-gray-500 ml-1 text-regular">涓�</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 宸ヤ笟杞欢鍒嗙被缁熻 -->
- <div class="w-full bg-[#f6f7f9]">
<!-- <div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
<div class="flex items-center space-x-2 ml-2 font-bold">
- <el-icon class="text-blue-500"><DataLine /></el-icon>
- <span class="text-medium font-medium">宸ヤ笟杞欢锝滃伐涓欰PP<span class="text-primary">浜у搧鍒嗙被</span></span>
+ <el-icon class="text-blue-500"><Document /></el-icon>
+ <span class="text-medium font-bold"> <span class="text-primary">鏂伴椈</span>鏀跨瓥</span>
</div>
+ <el-button text>鏇村</el-button>
</div> -->
- <div class="text-large flex items-center w-fit mx-auto mt-4 font-bold">鑳芥晥杞欢 | 鑳芥晥APP浜у搧鍒嗙被</div>
- <div class="flex">
- <div class="w-[45%] h-[400px]" ref="pieChartRef"></div>
- <div class="w-[55%] h-[400px]" ref="barChartRef"></div>
+ <div class="flex gap-6">
+ <!-- 宸︿晶鏂伴椈妯℃澘 -->
+ <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="鏂伴椈鏀跨瓥" />
+ </div>
+ <span class="news-title">
+ 銆婁笂娴峰競缁忔祹淇℃伅鍖栧鍏充簬寮�灞�2025骞村害涓婃捣甯傚伐涓氶�氫俊涓氱敤鑳借澶囨洿鏂颁笓椤规壎鎸佽祫閲戦」鐩敵鎶ュ伐浣滅殑閫氱煡銆�
+ </span>
+ </div>
+ <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-[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')">
+ 涓婃捣甯傜粡娴庝俊鎭寲濮斿叧浜庡紑灞�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">
+ 鏈夊叧鍗曚綅锛�
+ 涓鸿疮褰昏惤瀹炪�婁笂娴峰競鑺傝兘鍑忔帓锛堝簲瀵规皵鍊欏彉鍖栵級涓撻」璧勯噾绠＄悊鍔炴硶锛堟勃鍙戞敼瑙勮寖銆�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 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">
+ {{ item.title }}
+ </div>
+ </div>
+ <!-- <div class="text-gray-400 text-sm">{{ item.date }}</div> -->
+ </div>
+ </div>
+ </div>
+ </div>
</div>
+ </div>
+ <!-- 鑳芥晥浜у搧鍒嗙被 -->
+ <div class="eec-product-classify-div mb-[170px]">
+ <div class="w-full mt-4">
+ <div class="flex justify-between items-center">
+ <div class="flex items-center space-x-2 ml-2 font-bold">
+ <span class="text-medium font-bold"> 鑳芥晥浜у搧鍒嗙被</span>
+ </div>
+ </div>
+ <div class="flex h-[360px] bg-[#f9f9f9] eec-product-div" v-if="false">
+ <div class="flex-auto h-full">
+ <!-- <img src="@/assets/images/china-map.png" alt="鑳芥晥浜у搧" class="w-full h-full" /> -->
+ <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="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>
+ </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">
+ <span class="text-[#26c4f6]">{{ item.region }}</span>
+ <div>
+ <span class="text-white font-bold">{{ item.count }}</span>
+ <span class="text-sm ml-1" style="color: #aaa">涓�</span>
+ </div>
+ </div>
+ </swiper-slide>
+ </swiper>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 宸ヤ笟杞欢鍒嗙被缁熻 -->
+ <div class="w-full bg-[#f6f7f9]">
+ <!-- <div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
+ <div class="flex items-center space-x-2 ml-2 font-bold">
+ <el-icon class="text-blue-500"><DataLine /></el-icon>
+ <span class="text-medium font-medium">宸ヤ笟杞欢锝滃伐涓欰PP<span class="text-primary">浜у搧鍒嗙被</span></span>
+ </div>
+ </div> -->
+ <div class="text-large flex items-center w-fit mx-auto mt-4 font-bold">鑳芥晥浜у搧鍒嗙被</div>
+ <div class="flex">
+ <div class="w-[45%] h-[400px]" ref="pieChartRef"></div>
+ <div class="w-[55%] h-[400px]" ref="barChartRef"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 杩斿洖椤堕儴 -->
+ <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">
+ <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">
+ <img src="@/assets/home/Totop.jpg" alt="杩斿洖椤堕儴" class="" />
</div>
</div>
</div>
+
+ <!-- 瀹㈡湇瀵硅瘽妗� -->
+ <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" />
</div>
</template>
<script setup lang="ts">
-import { Document, Operation } from '@element-plus/icons-vue';
import * as echarts from 'echarts';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, nextTick, reactive } from 'vue';
import { useRouter } from 'vue-router';
+import YWLogo from '@/assets/logo/yw_logo.png';
+import axios from 'axios';
+import CustomerService from '@/components/CustomerService.vue';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { Autoplay, EffectFade, Virtual } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/effect-fade';
+import 'swiper/css/pagination';
+
+const SwiperModule = [Autoplay, EffectFade, Virtual];
const router = useRouter();
+const catalogSwiperRef = ref<HTMLElement | null>(null);
+
+const scrollPercent = ref(0);
+
+const showCustomerService = ref(false);
+
const newsList = ref([
+ {
+ id: '7',
+ title: '涓婃捣甯備汉姘戞斂搴滃叧浜庡嵃鍙戙�婁笂娴峰競鎺ㄥ姩澶ц妯¤澶囨洿鏂板拰娑堣垂鍝佷互鏃ф崲鏂拌鍔ㄨ鍒掞紙2024-2027骞达級銆嬬殑閫氱煡',
+ date: '2024-04-23',
+ link: 'test',
+ },
{
id: '1',
title: '涓婃捣甯傜粡娴庝俊鎭寲濮斿叧浜庡緛闆嗙敤鑳借澶囨洿鏂颁緵搴旈摼骞冲彴鐨勯�氱煡',
@@ -271,6 +327,18 @@
date: '2024-10-22',
link: 'https://gxj.quanzhou.gov.cn/zwgk/zfxxgk/fdzdgknr/gzdt/202410/t20241022_3093021.htm',
},
+ {
+ id: '5',
+ title: '鍏充簬銆婁笂娴峰競宸ヤ笟閫氫俊涓氱敤鑳借澶囨洿鏂颁笓椤规斂绛栧疄鏂界粏鍒欙紙寰佹眰鎰忚绋匡級銆嬪叕寮�寰佹眰鎰忚鐨勫叕鍛�',
+ date: '2024-12-18',
+ link: 'https://sheitc.sh.gov.cn/gg/20241218/517c960cef5d40f0bb04b1099c64d9eb.html',
+ },
+ // {
+ // id: '6',
+ // title: '瑙ｈ浜т笟鑳芥晥鎸囧崡锛屾帹鍔ㄨ澶囧鏍囧強鏇存柊',
+ // date: '2024-08-05',
+ // link: 'https://sheitc.sh.gov.cn/djjcdt/20240805/e8b8b4db2fb445f88b22b72f45132d68.html',
+ // },
// {
// title: '鍗板彂鎺ㄥ姩宸ヤ笟棰嗗煙璁惧鏇存柊宸ヤ綔瀹炴柦鏂规鐨勯�氱煡',
// date: '2024-10-22',
@@ -292,26 +360,173 @@
// date: '2024-03-07',
// },
]);
-
-const linkClick = (url) => {
- window.open(url, '_blank');
+const m_RequestDataObj = {
+ 1: { requestPath: 'static/EecProductData/Pump.json?v=' + new Date().getTime() },
+ 2: { requestPath: 'static/EecProductData/AirCompressor.json?v=' + new Date().getTime() },
+ 3: { requestPath: 'static/EecProductData/Fan.json?v=' + new Date().getTime() },
+ 4: { requestPath: 'static/EecProductData/WaterChiller.json?v=' + new Date().getTime() },
+ 7: { requestPath: 'static/EecProductData/ElectricMachinery.json?v=' + new Date().getTime() },
};
+const state = reactive({
+ catalog: [
+ { name: '娉�', tag: 1 },
+ { name: '瀹圭Н寮忕┖鍘嬫満', tag: 2 },
+ { name: '閫氶鏈�', tag: 3 },
+ { name: '鍐锋按鏈虹粍', tag: 4 },
+ { name: '鐢垫満', tag: 7 },
+ ],
+ curSelectCatalog: 1,
+ catalogSwiperIndex: 0,
+ catalogItemList: [],
+ m_CompanyList: [],
+ m_PageLoading: false,
+});
+
+const pieChartRef = ref<HTMLElement | null>(null);
+const barChartRef = ref<HTMLElement | null>(null);
+
const cooperationData = ref([
- { region: '涓婃捣鐪�', count: 389 },
- { region: '姹熻嫃鐪�', count: 281 },
- { region: '娴欐睙鐪�', count: 198 },
- { region: '婀栧崡鐪�', count: 125 },
- { region: '婀栧寳鐪�', count: 89 },
+ {
+ region: '鍖椾含',
+ count: 408,
+ },
+ {
+ region: '澶╂触',
+ count: 339,
+ },
+ {
+ region: '涓婃捣',
+ count: 489,
+ },
+ {
+ region: '閲嶅簡',
+ count: 23,
+ },
+ {
+ region: '娌冲寳',
+ count: 440,
+ },
+ {
+ region: '娌冲崡',
+ count: 432,
+ },
+ {
+ region: '浜戝崡',
+ count: 442,
+ },
+ {
+ region: '杈藉畞',
+ count: 8,
+ },
+ {
+ region: '榛戦緳姹�',
+ count: 363,
+ },
+ {
+ region: '婀栧崡',
+ count: 134,
+ },
+ {
+ region: '瀹夊窘',
+ count: 474,
+ },
+ {
+ region: '灞变笢',
+ count: 438,
+ },
+ {
+ region: '鏂扮枂',
+ count: 334,
+ },
+ {
+ region: '姹熻嫃',
+ count: 129,
+ },
+ {
+ region: '娴欐睙',
+ count: 433,
+ },
+ {
+ region: '姹熻タ',
+ count: 197,
+ },
+ {
+ region: '婀栧寳',
+ count: 315,
+ },
+ {
+ region: '骞胯タ',
+ count: 69,
+ },
+ {
+ region: '鐢樿們',
+ count: 630,
+ },
+ {
+ region: '灞辫タ',
+ count: 495,
+ },
+ {
+ region: '鍐呰挋鍙�',
+ count: 283,
+ },
+ {
+ region: '闄曡タ',
+ count: 156,
+ },
+ {
+ region: '鍚夋灄',
+ count: 485,
+ },
+ {
+ region: '绂忓缓',
+ count: 411,
+ },
+ {
+ region: '璐靛窞',
+ count: 496,
+ },
+ {
+ region: '骞夸笢',
+ count: 451,
+ },
+ {
+ region: '闈掓捣',
+ count: 387,
+ },
+ {
+ region: '瑗胯棌',
+ count: 356,
+ },
+ {
+ region: '鍥涘窛',
+ count: 414,
+ },
+ {
+ region: '瀹佸',
+ count: 470,
+ },
+ {
+ region: '娴峰崡',
+ count: 437,
+ },
+ {
+ region: '鍙版咕',
+ count: 165,
+ },
+ {
+ region: '棣欐腐',
+ count: 94,
+ },
+ {
+ region: '婢抽棬',
+ count: 437,
+ },
+ {
+ region: '鍗楁捣璇稿矝',
+ count: 0,
+ },
]);
-
-const handleNewsClick = (item: any) => {
- // if (item.link) {
- // window.open(item.link, '_blank');
- // } else {
- // router.push(`/news-detail/${item.id}`);
- // }
- router.push(`/news-detail/${item.id}`);
-};
// 鍥捐〃鏁版嵁
const chartData = [
@@ -324,15 +539,273 @@
{ name: '鐢垫満', value: 18865, percentage: '47.59%' },
];
+// 琛屽熀閫氫笓鏁版嵁
+const chartData2 = [
+ { name: '鍩虹鍏辨�х被', value: 1764, percentage: '43.20%' },
+ { name: '琛屼笟閫氱敤绫�', value: 1670, percentage: '40.90%' },
+ { name: '浼佷笟涓撶敤绫�', value: 596, percentage: '14.60%' },
+ { name: '鍏朵粬绫�', value: 53, percentage: '1.30%' },
+];
+
+const pieChart2Ref = ref<null>(null);
+const barChart2Ref = ref<HTMLElement | null>(null);
+
+const EecProductMapChartRef = ref<HTMLElement | null>(null);
+const m_allEecProductNumber = ref(0);
+
// 璁＄畻鎬婚噺
const totalCount = computed(() => {
return chartData.reduce((sum, item) => sum + item.value, 0);
});
-const pieChartRef = ref<HTMLElement | null>(null);
-const barChartRef = ref<HTMLElement | null>(null);
-
onMounted(() => {
+ nextTick(() => {
+ // initMapChart();
+ initPipeOneChart();
+ initPipeTwoChart();
+ initComanyData();
+ initCatalogList();
+
+ document.getElementById('app-page')?.addEventListener('scroll', handleScroll);
+ });
+});
+const handleScroll = () => {
+ const scrollTop = document.getElementById('app-page')?.scrollTop;
+ const scrollHeight = document.getElementById('app-page')?.scrollHeight - document.getElementById('app-page')?.clientHeight;
+ scrollPercent.value = (scrollTop / scrollHeight) * 100;
+
+ let scrollToTop = document.getElementById('scroll-to-top');
+ let footer = document.getElementById('app-footer');
+};
+const linkClick = () => {
+ router.push('/select-selpara');
+};
+
+const routeClick = (url: string) => {
+ router.push(url);
+};
+const handleNewsClick = (item: any) => {
+ // if (item.link) {
+ // window.open(item.link, '_blank');
+ // } else {
+ // router.push(`/news-detail/${item.id}`);
+ // }
+ router.push(`/news-detail/${item.id}`);
+};
+// 鍒濆鍖栧巶鍟嗗垪琛ㄦ暟鎹�
+const initComanyData = () => {
+ axios({
+ method: 'get',
+ url: 'static/EecProductData/CompanyData.json',
+ })
+ .then((res) => {
+ let result = res.data;
+ state.m_CompanyList = result.map((item: any) => {
+ return {
+ CompanyId: item.CompanyId,
+ CompanyAllName: item.CompanyAllName,
+ CompanyAbbName: item.CompanyAbbName,
+ Type: item.Type,
+ };
+ });
+ })
+ .catch((err) => { });
+};
+// 鍒濆鍖栫被鍨嬪垪琛ㄦ暟鎹�
+const initCatalogList = (cb: any = null) => {
+ state.m_PageLoading = true;
+ const catalogTag = state.curSelectCatalog;
+ axios({
+ method: 'get',
+ url: m_RequestDataObj[catalogTag].requestPath,
+ })
+ .then((res) => {
+
+ state.m_PageLoading = false;
+ let result = res.data;
+ const { SeriesList } = result
+ let arr = [];
+ // arr涓轰簩浣嶆暟缁勶紝姣忎釜瀛愭暟缁勫寘鍚�15鏉℃暟鎹�
+ 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,
+ PhysicalPicturePath: 'static/EecProductData/' + item.PhysicalPicturePath,
+ CertificatePath: `static/EecProductData/${item.CertificatePath}`,
+ Tip: `澶囨鏃堕棿锛�${item.RecordTime} \n 澶囨鍙凤細${item.RecordNumber}`,
+ };
+ });
+
+ for (let i = 0; i < pageSeriesList.length; i += 15) {
+ arr.push(pageSeriesList.slice(i, i + 15));
+ }
+ state.catalogItemList = arr;
+
+ if (cb) {
+ cb();
+ }
+ })
+ .catch((err) => {
+ state.m_PageLoading = false;
+ });
+};
+
+const initMapChart = () => {
+ let allEecProductNumber = 0;
+ let mapData = cooperationData.value.map((item) => {
+ allEecProductNumber += item.count;
+ return {
+ name: item.region,
+ value: item.count,
+ };
+ });
+ m_allEecProductNumber.value = allEecProductNumber;
+ axios({
+ url: 'static/Data/ChinaGeoJsonData.json',
+ method: 'get',
+ })
+ .then((res) => {
+ const GeoData = res.data;
+ if (EecProductMapChartRef.value) {
+ echarts.registerMap('china', GeoData);
+ const EecProductMapChart = echarts.init(EecProductMapChartRef.value);
+ EecProductMapChart.setOption({
+ tooltip: {
+ show: true,
+ formatter: function (params) {
+ if (params.data) return params.name + '锛�' + params.data['value'];
+ },
+ },
+ visualMap: {
+ min: 0,
+ max: 100000,
+ right: 26,
+ bottom: 40,
+ showLabel: true,
+ text: ['', ''],
+ pieces: [
+ {
+ gt: 5001,
+ label: '> 5000',
+ color: '#FF4500',
+ },
+ {
+ gte: 1001,
+ lte: 5000,
+ label: '1001 - 5000',
+ color: '#FF8300',
+ },
+ {
+ gte: 601,
+ lte: 1000,
+ label: '601 - 1000',
+ color: '#FFC100',
+ },
+ {
+ gte: 401,
+ lt: 600,
+ label: '401 - 600',
+ color: '#FFFF00',
+ },
+ {
+ gte: 201,
+ lt: 400,
+ label: '201 - 400',
+ color: '#D7EF53',
+ },
+ {
+ gte: 1,
+ lt: 200,
+ label: '1 - 200',
+ color: '#AFDEA7',
+ },
+ {
+ lt: 0,
+ label: '0',
+ color: '#87CEFA',
+ },
+ ],
+ show: true,
+ },
+ geo: {
+ map: 'china',
+ roam: true,
+ scaleLimit: {
+ min: 1,
+ max: 2,
+ },
+ zoom: 1.13,
+ top: 50,
+ label: {
+ show: true,
+ fontSize: '14',
+ color: 'rgba(0,0,0,0.7)',
+ formatter: (params) => {
+ return params.name + '鐪�';
+ },
+ },
+ itemStyle: {
+ borderColor: 'rgba(0, 0, 0, 0.2)',
+ },
+ emphasis: {
+ areaColor: '#f2d5ad',
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ borderWidth: 0,
+ itemStyle: {
+ color: '#f4f4f4', // 榧犳爣鎮仠鏃剁殑棰滆壊
+ },
+ },
+ },
+ series: [
+ {
+ name: '鑳芥晥浜у搧',
+ type: 'map',
+ map: 'china',
+ geoIndex: 0,
+ data: mapData,
+ emphasis: {
+ itemStyle: {
+ color: 'rgba(0,0,0,0.7)', // 榧犳爣鎮仠鏃剁殑棰滆壊
+ },
+ },
+ },
+ // {
+ // name: '鑳芥晥浜у搧',
+ // type: 'map',
+ // mapType: 'china',
+ // selectedMode: 'false',
+ // label: {
+ // normal: {
+ // show: true,
+ // },
+ // emphasis: {
+ // show: false,
+ // },
+ // },
+ // data: mapData,
+ // },
+ ],
+ });
+ // 鐩戝惉绐楀彛澶у皬鍙樺寲
+ window.addEventListener('resize', () => {
+ EecProductMapChart.resize();
+ });
+ }
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+};
+const initPipeOneChart = () => {
if (pieChartRef.value && barChartRef.value) {
// 鍒濆鍖栭ゼ鍥�
const pieChart = echarts.init(pieChartRef.value);
@@ -402,7 +875,7 @@
const barChart = echarts.init(barChartRef.value);
barChart.setOption({
title: {
- text: '鐮斿彂璁捐绫讳骇鍝佹暟閲忕粺璁�',
+ text: '鑳芥晥浜у搧鍒嗙被鏁伴噺缁熻',
left: 'center',
top: 10,
},
@@ -420,7 +893,7 @@
},
xAxis: {
type: 'category',
- data: ['姹熻嫃鐪�', '鍖椾含甯�', '涓婃捣甯�', '娴欐睙鐪�', '骞夸笢鐪�', '灞变笢鐪�'],
+ data: chartData.map((item) => item.name),
axisLabel: {
interval: 0,
rotate: 30,
@@ -432,7 +905,7 @@
},
series: [
{
- data: [260, 240, 35, 25, 20, 8],
+ data: chartData.map((item) => item.value),
type: 'bar',
barWidth: '40%',
itemStyle: {
@@ -461,21 +934,8 @@
barChart.resize();
});
}
-});
-
-// 琛屽熀閫氫笓鏁版嵁
-const chartData2 = [
- { name: '鍩虹鍏辨�х被', value: 1764, percentage: '43.20%' },
- { name: '琛屼笟閫氱敤绫�', value: 1670, percentage: '40.90%' },
- { name: '浼佷笟涓撶敤绫�', value: 596, percentage: '14.60%' },
- { name: '鍏朵粬绫�', value: 53, percentage: '1.30%' },
-];
-
-const pieChart2Ref = ref<HTMLElement | null>(null);
-const barChart2Ref = ref<HTMLElement | null>(null);
-
-onMounted(() => {
- // 鍒濆鍖栫浜屼釜楗煎浘
+};
+const initPipeTwoChart = () => {
if (pieChart2Ref.value && barChart2Ref.value) {
const pieChart2 = echarts.init(pieChart2Ref.value);
pieChart2.setOption({
@@ -595,6 +1055,72 @@
barChart2.resize();
});
}
+};
+
+// 鐩戝惉浜у搧绫诲瀷閫夋嫨
+const changeCatalog = (type: number) => {
+ state.curSelectCatalog = type;
+ state.catalogSwiperIndex = 0;
+ const cb = () => {
+ catalogSwiperRef.value?.slideTo(state.catalogSwiperIndex, 0);
+ // catalogSwiperRef.value?.autoplay = {
+ // delay: 3000,
+ // disableOnInteraction: false,
+ // pauseOnMouseEnter:true,
+ // };
+ catalogSwiperRef.value?.update();
+ };
+ 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 = () => {
+ const type = state.curSelectCatalog;
+ router.push({
+ path: '/certified-products',
+ query: {
+ type: type,
+ },
+ });
+};
+
+const onSwiper = (swiper: any) => {
+ catalogSwiperRef.value = swiper;
+};
+const onSlideChange = () => { };
+const toFeedBack = () => {
+ router.push('/feedback');
+};
+const toSubsidy = () => {
+ // 璺宠浆鍒拌缃戦〉
+ window.open('https://www.sheitc.sh.gov.cn/', '_blank');
+};
+const scrollToTop = () => {
+ nextTick(() => {
+ document.getElementById('app-page').scrollTo({
+ top: 0,
+ behavior: 'smooth',
+ });
+ });
+};
+const getCompanyNameByType = (type: number) => {
+ return state.m_CompanyList.find((item: any) => item.Type.includes(type))?.CompanyAbbName;
+};
+const getCompanyItemByType = (type: number) => {
+ return state.m_CompanyList.filter((item: any) => item.Type.includes(type));
+};
+onUnmounted(() => {
+ document.getElementById('app-page')?.removeEventListener('scroll', handleScroll);
});
</script>
@@ -612,8 +1138,9 @@
.carousel-image {
width: 100%;
- /* height: 100%; */
- object-fit: fill; /* 淇敼涓篺ill浠ュ畬鍏ㄥ～鍏呭鍣� */
+ height: 100%;
+ object-fit: fill;
+ /* 淇敼涓篺ill浠ュ畬鍏ㄥ～鍏呭鍣� */
}
.function-card {
@@ -623,6 +1150,39 @@
.function-card:hover {
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);
+ height: 100%;
+ display: flex;
+ overflow: hidden;
+ height: 255px;
+}
+
+#eec-product-map {
+ width: 100%;
+ height: 100%;
+}
+
+.mySwiper {
+ width: 100%;
+ height: 100%;
+}
+
+.card-hover-style {
+ /* display: flex;
+ justify-content: center;
+ align-items: center; */
+ /* transform: translateY(50%); */
+ background-color: #fff;
+ color: #000;
+ margin-right: unset;
}
:deep(.el-carousel__arrow) {
@@ -640,4 +1200,262 @@
color: #fff;
}
}
+
+.news-item {
+ cursor: pointer;
+ padding: 8px 0px;
+ font-size: 18px;
+ color: #5c5c5c;
+ font-family: 寰蒋闆呴粦;
+ font-weight: 500;
+}
+
+:deep(.customer-service-dialog .el-dialog__body) {
+ padding: 0;
+}
+
+:deep(.customer-service-dialog .el-dialog__header) {
+ display: block;
+}
+
+.catalog-list {
+ padding: 20px;
+ box-sizing: border-box;
+
+ .catalog-item {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ color: #003a8f;
+ font-size: 20px;
+ font-weight: 700;
+
+ &:hover {
+ color: #71b02b;
+ }
+ }
+}
+
+.catalog-continer {
+ /* 鎬婚珮搴� - 涓婁笅padding - 琛岄棿璺� */
+ height: 100%;
+ /* 70px鏄笂涓媝adding鎬诲拰锛�60px鏄袱琛岄棿璺濇�诲拰 */
+ padding: 35px;
+ /* 鍋囪padding涓�20px锛屼綘鍙互鏍规嵁闇�瑕佽皟鏁� */
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ grid-template-rows: repeat(3, 1fr);
+ gap: 30px;
+ overflow: hidden;
+ box-sizing: border-box;
+}
+
+.catalog-continer-item {
+ background-color: #fff;
+ 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);
+ }
+}
+
+.catalog-tag-active {
+ color: #71b02b !important;
+}
+
+.news-title {
+ font-size: 20px;
+ color: #000000;
+ font-weight: 700;
+ font-family: 寰蒋闆呴粦;
+}
+
+.left-news-temp-div {
+ border: 1px solid #ccc;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background-color: #003a8f;
+ }
+}
+
+.right-news-temp-div {
+ /* border-top: 4px solid #003a8f; */
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0px;
+ left: 0;
+ width: 20%;
+ height: 4px;
+ z-index: 1;
+ background-color: #71b02b;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0px;
+ left: 20%;
+ width: 80%;
+ height: 4px;
+ z-index: 1;
+ background-color: #003a8f;
+ }
+
+ .new-desc-text {
+ font-size: 16px;
+ color: #656565;
+ line-height: 29px;
+ font-family: 寰蒋闆呴粦;
+ font-weight: 300;
+ }
+}
+
+.news-list-dot {
+ width: 6px;
+ height: 6px;
+ background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
+}
+
+.eec-product-classify-div {
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0px;
+ left: 0;
+ width: 20%;
+ height: 4px;
+ z-index: 1;
+ background-color: #71b02b;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0px;
+ left: 20%;
+ width: 80%;
+ height: 4px;
+ z-index: 1;
+ background-color: #003a8f;
+ }
+}
+
+:deep(.catalog-swiper .swiper-slide) {
+ height: 100% !important;
+}
+
+:deep(.catalog-swiper .swiper-pagination-bullet) {
+ width: 20px;
+ height: 20px;
+ text-align: center;
+ line-height: 20px;
+ font-size: 12px;
+ color: #000;
+ opacity: 1;
+ background: rgba(0, 0, 0, 0.2);
+}
+
+:deep(.catalog-swiper .swiper-pagination-bullet-active) {
+ color: #fff;
+ background: #007aff;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(16px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes fadeOut {
+ from {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ to {
+ opacity: 0;
+ transform: translateY(16px);
+ }
+}
+
+.fade-enter-active {
+ animation: fadeIn 0.3s ease-out;
+}
+
+.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;
+}
+
+.etiquet-price p {
+ 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;
+}
+
+.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>
--
Gitblit v1.9.3