From e3ab5c403cce86811f9bdf8ae5f0d00f1f776b1f Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期五, 18 四月 2025 15:40:55 +0800
Subject: [PATCH] 添加联系我们界面
---
src/views/Home.vue | 661 +++++++++++++++++++++++++++++--------------------------
1 files changed, 349 insertions(+), 312 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index b8c7ce0..3f0d175 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -5,25 +5,24 @@
<el-carousel height="602px" :interval="3000" indicator-position="none" arrow="never">
<el-carousel-item>
<div class="carousel-item">
- <img src="@/assets/carousel/test/15.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/final/2.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/final/5.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 w-full flex justify-center items-center">
@@ -82,12 +81,6 @@
<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>
@@ -96,53 +89,11 @@
</div>
</div>
</a>
-
- <!-- <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> -->
</div>
</div>
</div>
<!-- 涓诲唴瀹瑰尯鍩� -->
- <div class="bg-white flex flex-col gap-8" style="width: calc(100% - 434px)">
+ <div class="bg-white flex flex-col gap-8 relative" style="width: calc(100% - 434px)">
<!-- 浜у搧鍖哄煙 -->
<div class="bg-[#F0F3EF] w-full">
<div class="catalog-list bg-[#fff] grid grid-cols-5 gap-4 justify-center items-center">
@@ -164,7 +115,7 @@
:slidesPerView="state.catalogSwiperIndex"
:centeredSlides="true"
:autoplay="{
- delay: 10000,
+ delay: 1000000,
disableOnInteraction: false,
pauseOnMouseEnter: true,
}"
@@ -174,12 +125,20 @@
>
<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" 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="handleCatalogClick(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>{{ getCompanyNameByType(child.Type) }}</p>
+ <div></div>
+ </div>
</div>
</div>
</div>
@@ -196,8 +155,9 @@
<el-button text>鏇村</el-button>
</div> -->
<div class="flex gap-6">
+ <!-- 宸︿晶鏂伴椈妯℃澘 -->
<div class="w-[373px] flex flex-col gap-4">
- <div class="w-full" style="border: 1px solid #ccc;">
+ <div class="w-full relative left-news-temp-div">
<img
class="w-full flex-0 cursor-pointer"
src="@/assets/home/notice1.png"
@@ -205,255 +165,133 @@
alt="鏂伴椈鏀跨瓥"
/>
</div>
- <span class="news-title"> 銆婁笂娴峰競缁忔祹淇℃伅鍖栧鍏充簬寮�灞�2025骞村害涓婃捣甯傚伐涓氶�氫俊涓氱敤鑳借澶囨洿鏂颁笓椤规壎鎸佽祫閲戦」鐩敵鎶ュ伐浣滅殑閫氱煡銆� </span>
+ <span class="news-title">
+ 銆婁笂娴峰競缁忔祹淇℃伅鍖栧鍏充簬寮�灞�2025骞村害涓婃捣甯傚伐涓氶�氫俊涓氱敤鑳借澶囨洿鏂颁笓椤规壎鎸佽祫閲戦」鐩敵鎶ュ伐浣滅殑閫氱煡銆�
+ </span>
</div>
- <div class="bg-page p-4 flex-auto">
- <div
- class="font-bold text-large over-ellipsis mb-2 hover:text-primary cursor-pointer"
- @click="routeClick('/news-detail/8')"
- >
- 涓婃捣甯傜粡娴庝俊鎭寲濮斿叧浜庡紑灞�2025骞村害涓婃捣甯傚伐涓氶�氫俊涓氱敤鑳借澶囨洿鏂颁笓椤规壎鎸佽祫閲戦」鐩敵鎶ュ伐浣滅殑閫氱煡
+ <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>
- <div class="text-small text-regular">
- 鏈夊叧鍗曚綅锛�
- 涓鸿疮褰昏惤瀹炪�婁笂娴峰競鑺傝兘鍑忔帓锛堝簲瀵规皵鍊欏彉鍖栵級涓撻」璧勯噾绠＄悊鍔炴硶锛堟勃鍙戞敼瑙勮寖銆�2021銆�5鍙凤級銆嬪拰銆婁笂娴峰競宸ヤ笟閫氫俊涓氱敤鑳借澶囨洿鏂颁笓椤规壎鎸佸疄鏂界粏鍒欍�嬶紙娌粡淇¤鑼冦��2025銆�1鍙凤級锛岃繘涓�姝ユ帹杩涙湰甯傚伐涓氶�氫俊涓氱敤鑳借澶囨洿鏂板伐浣滐紝鐜扮粍缁囧紑灞�2025骞村害涓婃捣甯傚伐涓氶�氫俊涓氱敤鑳借澶囨洿鏂颁笓椤规壎鎸佽祫閲戦」鐩敵鎶ュ伐浣溿��
+ <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 class="mt-4">
- <div
- v-for="(item, index) in newsList"
- :key="index"
- class="flex text-regular justify-between items-center py-2 news-item"
- >
- <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>
+ <!-- 鑳芥晥浜у搧鍒嗙被 -->
+ <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="text-gray-400 text-sm">{{ item.date }}</div> -->
- </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 @click="routeClick('/certified-products')">鏇村</el-button>
- </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 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 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 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 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
+ 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>
- <!-- 娴姩鍙充晶鏍� -->
- <div class="fixed right-[60px] bottom-[128px] z-50">
- <div class="flex flex-col">
- <!-- 璐墿杞� -->
- <div class="group relative" v-if="false">
- <div
- class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200"
- >
- <svg
- xmlns="http://www.w3.org/2000/svg"
- class="h-6 w-6 text-gray-600"
- fill="none"
- viewBox="0 0 24 24"
- stroke="currentColor"
- >
- <path
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="2"
- d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
- />
- </svg>
- </div>
- <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style">
- <div class="bg-gray-800 text-white text-sm py-1 px-3 rounded text-black" style="text-align: center">璐墿杞�</div>
- </div>
- </div>
-
- <!-- 鎴戠殑 -->
- <div class="group relative" v-if="false">
- <div
- class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200"
- >
- <svg
- xmlns="http://www.w3.org/2000/svg"
- class="h-6 w-6 text-gray-600"
- fill="none"
- viewBox="0 0 24 24"
- stroke="currentColor"
- >
- <path
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="2"
- d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
- />
- </svg>
- </div>
- <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style">
- <div class="bg-gray-800 text-white text-sm py-1 px-3 rounded text-black" style="text-align: center">鎴戠殑</div>
- </div>
- </div>
-
- <!-- 瀹㈡湇 -->
- <div class="group relative">
- <div
- class="py-1.5 text-primary bg-white opacity-95 rounded-lg shadow size-19 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200 flex-col"
- @click="showCustomerService = true"
- >
- <svg
- xmlns="http://www.w3.org/2000/svg"
- class="h-6 w-6 text-gray-600"
- fill="none"
- viewBox="0 0 24 24"
- stroke="currentColor"
- >
- <path
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="2"
- d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
- />
- </svg>
- <div class="bg-gray-800 text-sm py-1 px-3 rounded text-primary" style="text-align: center">AI瀹㈡湇</div>
- </div>
- <!-- <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style">
- <img :src="CallMe" width="150" height="150" />
- </div> -->
- </div>
-
- <!-- 鍙嶉 -->
- <!-- <div class="group relative" @click="toFeedBack">
- <div
- class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200 flex-col"
- >
- <svg
- xmlns="http://www.w3.org/2000/svg"
- class="h-6 w-6 text-gray-600"
- fill="none"
- viewBox="0 0 24 24"
- stroke="currentColor"
- >
- <path
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="2"
- d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
- />
- </svg>
- <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">鍙嶉</div>
- </div>
- </div>
- <div class="group relative">
- <div
- class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200 flex-col"
- >
- <svg
- t="1740060002788"
- class="icon h-6 w-6 text-gray-600"
- viewBox="0 0 1024 1024"
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- p-id="13742"
- width="128"
- height="128"
- >
- <path
- d="M767.818667 409.173333C867.338667 444.266667 938.666667 539.136 938.666667 650.666667c0 42.709333-10.496 83.978667-30.261334 120.842666-1.792 3.338667-4.992 8.928-9.696 16.96l14.613334 53.557334c6.506667 23.893333-15.402667 45.813333-39.296 39.296l-53.642667-14.634667-6.229333 3.669333A254.933333 254.933333 0 0 1 682.666667 906.666667c-77.994667 0-147.84-34.88-194.805334-89.888a352.608 352.608 0 0 1-56.64 4.554666c-63.338667 0-124.266667-16.853333-177.472-48.298666-1.834667-1.088-6.410667-3.733333-13.632-7.893334l-80.544 21.653334c-23.914667 6.432-45.76-15.573333-39.146666-39.434667l21.792-78.752a961.205333 961.205333 0 0 1-15.904-27.317333A336.384 336.384 0 0 1 85.333333 480c0-188.618667 154.965333-341.333333 345.888-341.333333 159.914667 0 297.984 108.010667 335.818667 259.296 0.949333 3.765333 1.173333 7.552 0.778667 11.2z m-68.106667-13.952C662.88 282.037333 555.178667 202.666667 431.221333 202.666667 275.434667 202.666667 149.333333 326.933333 149.333333 480c0 46.272 11.498667 90.837333 33.194667 130.698667 2.88 5.290667 10.176 17.706667 21.621333 36.746666a32 32 0 0 1 3.413334 25.013334l-10.517334 37.994666 39.232-10.549333a32 32 0 0 1 24.234667 3.146667c14.272 8.192 22.773333 13.098667 25.802667 14.890666A283.882667 283.882667 0 0 0 431.221333 757.333333c6.154667 0 12.288-0.192 18.389334-0.576A255.061333 255.061333 0 0 1 426.666667 650.666667c0-141.386667 114.613333-256 256-256 5.728 0 11.413333 0.192 17.045333 0.554666z m133.706667 397.056a32 32 0 0 1 3.338666-24.725333 996.672 996.672 0 0 0 15.242667-26.293333A190.997333 190.997333 0 0 0 874.666667 650.666667c0-106.037333-85.962667-192-192-192s-192 85.962667-192 192 85.962667 192 192 192a190.933333 190.933333 0 0 0 98.570666-27.2c2.208-1.322667 8.288-4.874667 18.517334-10.837334a32 32 0 0 1 24.522666-3.210666l12.565334 3.424-3.424-12.565334zM330.666667 426.666667a42.666667 42.666667 0 1 1 0-85.333334 42.666667 42.666667 0 0 1 0 85.333334z m192 0a42.666667 42.666667 0 1 1 0-85.333334 42.666667 42.666667 0 0 1 0 85.333334z m85.333333 202.666666a32 32 0 1 1 0-64 32 32 0 0 1 0 64z m149.333333 0a32 32 0 1 1 0-64 32 32 0 0 1 0 64z"
- fill="#000000"
- p-id="13743"
- ></path>
- </svg>
- <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">寰俊</div>
- </div>
- <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style">
- <img :src="CallMe" width="150" height="150" />
- </div>
- </div> -->
-
- <!-- 杩斿洖椤堕儴 -->
- <!-- <div class="group relative" @click="scrollToTop">
- <div
- class="bg-white 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"
- >
- <svg
- xmlns="http://www.w3.org/2000/svg"
- class="h-6 w-6 text-gray-600"
- fill="none"
- viewBox="0 0 24 24"
- stroke="currentColor"
- >
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
- </svg>
- <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">椤堕儴</div>
- </div>
- </div> -->
- </div>
- </div>
<!-- 瀹㈡湇瀵硅瘽妗� -->
<customer-service
class="fixed right-[150px] bottom-[17px] z-50 w-[440px] h-[calc(80vh-30px)] shadow-lg rounded-lg"
@@ -464,7 +302,6 @@
</template>
<script setup lang="ts">
-import { Document, Operation } from '@element-plus/icons-vue';
import * as echarts from 'echarts';
import { onMounted, ref, nextTick, reactive } from 'vue';
import { useRouter } from 'vue-router';
@@ -482,6 +319,10 @@
const router = useRouter();
const catalogSwiperRef = ref<HTMLElement | null>(null);
+
+const scrollPercent = ref(0);
+
+const showCustomerService = ref(false);
const newsList = ref([
{
@@ -565,6 +406,7 @@
curSelectCatalog: 1,
catalogSwiperIndex: 0,
catalogItemList: [],
+ m_CompanyList:[],
m_PageLoading: false,
});
@@ -749,11 +591,39 @@
// 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');
+
+ // 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');
};
@@ -768,6 +638,25 @@
// 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) => {
@@ -1240,11 +1129,18 @@
};
// 浜у搧绫诲瀷鐐瑰嚮
const handleCatalogClick = (item: any) => {
- console.log(item, '鎴戣鐐瑰嚮浜�');
+ const type = item.Type;
+ const companyID = getCompanyItemByType(type)[0].CompanyId;
+ router.push({
+ path: '/certified-products',
+ query: {
+ company: companyID,
+ type: type,
+ },
+ });
};
const onSwiper = (swiper: any) => {
- console.log(swiper);
catalogSwiperRef.value = swiper;
};
const onSlideChange = () => {};
@@ -1257,15 +1153,21 @@
};
const scrollToTop = () => {
nextTick(() => {
- // console.log('鎴戣鎵撳嵃浜�');
document.getElementById('app-page').scrollTo({
top: 0,
behavior: 'smooth',
});
});
};
-
-const showCustomerService = ref(false);
+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>
<style scoped>
@@ -1340,13 +1242,11 @@
.news-item {
cursor: pointer;
- border-bottom: 1px solid #e3e3e3;
- &:first-child {
- border-top: 1px solid #e3e3e3;
- }
- &:last-child {
- border-bottom: none;
- }
+ padding: 8px 0px;
+ font-size: 18px;
+ color: #5c5c5c;
+ font-family: 寰蒋闆呴粦;
+ font-weight: 500;
}
:deep(.customer-service-dialog .el-dialog__body) {
@@ -1393,24 +1293,103 @@
cursor: pointer;
&:hover {
img {
- transform: scale(1.25);
+ 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{
+
+.news-title {
font-size: 20px;
- color: #000000;
- font-weight: 700;
- font-family: 寰蒋闆呴粦;
+ 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;
@@ -1426,4 +1405,62 @@
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;
+}
</style>
--
Gitblit v1.9.3