From e9bc8175ed1272b1210b2d6fdc16600df4e378db Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期四, 17 四月 2025 12:16:42 +0800
Subject: [PATCH] 修改头部与首页样式
---
src/components/AppHeader.vue | 293 +++++++++++++++++++++++++++++++++--------
src/views/Home.vue | 116 ++++++++++++----
2 files changed, 318 insertions(+), 91 deletions(-)
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 31c27db..599f4e3 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -14,45 +14,52 @@
<nav class="flex ml-8 flex-1 navbar-div-style">
<el-menu mode="horizontal" :ellipsis="false" class="border-none menu-div-sytle" router :default-active="activeRoute">
<el-menu-item index="/home" class="!px-4">棣栭〉</el-menu-item>
+ <span class="w-[20px] h-full gap-style">|</span>
<el-menu-item index="/certified-products" class="!px-4">鑳芥晥浜у搧</el-menu-item>
+ <span class="w-[20px] h-full gap-style">|</span>
<el-menu-item index="/eec-label-search" class="!px-4">璇佷功鏌ヨ</el-menu-item>
+ <span class="w-[20px] h-full gap-style">|</span>
<el-menu-item index="/news-detail/99" class="!px-4">鏀跨瓥鏂囦欢</el-menu-item>
+ <span class="w-[20px] h-full gap-style">|</span>
<el-menu-item index="/select-selpara" class="!px-4" @click="linkClick">娉甸�夊瀷</el-menu-item>
+ <span class="w-[20px] h-full gap-style">|</span>
<el-menu-item index="/gb19762-2025" class="!px-4">璁＄畻宸ュ叿</el-menu-item>
+ <span class="w-[20px] h-full gap-style">|</span>
+ <el-menu-item index="" class="!px-4">鑱旂郴鎴戜滑</el-menu-item>
</el-menu>
- <!-- Search and User Actions -->
- <div class="flex items-center space-x-8 ml-[65px] pb-[15px] ">
- <!-- Add shopping cart icon here -->
- <div class="flex items-center gap-4" @click="goToCart">
- <el-badge :value="cartCount" :max="99" class="cart-badge">
- <el-button class="flex items-center" link>
- <el-icon class="text-lg" color="#fff" style="font-size: 20px"><ShoppingCart /></el-icon>
- </el-button>
- </el-badge>
- </div>
-
- <div class="flex items-center text-gray-600 text-sm text-nowrap">
- <template v-if="!userInfo.Token">
- <!-- <a href="#" class="hover:text-blue-500">娉ㄥ唽</a>
- <span class="mx-2">路</span> -->
- <a @click="toLogin" class="hover:text-blue-500 text-white text-[20px]">鐧诲綍</a>
- </template>
- <template v-else>
- <span class="text-blue-500 mr-2 text-[20px] text-white">{{ userInfo.RealName }}</span>
- <a href="#" class="hover:text-blue-500 text-[20px]" @click.prevent="handleLogout">閫�鍑�</a>
- </template>
- </div>
- </div>
</nav>
</div>
<!-- 椤堕儴浜у搧鎼滅储妗� -->
- <div class="header-tool-div" v-show="false">
+ <div class="header-tool-div">
<div class="search-input-div">
- <input />
+ <input placeholder="鍏ㄩ儴鍟嗗搧|璇疯緭鍏ュ叕鍙稿悕绉�/鍨嬪彿/浜у搧鍚嶇О" />
<button>鎼滅储</button>
</div>
- <div></div>
- <div></div>
+ <!-- 鐪佷唤閫夋嫨 -->
+ <div>
+ <el-cascader v-model="AreaValue" :options="options" @change="handleChange" />
+ </div>
+ <div class="flex gap-[22px]">
+ <button class="flex items-center gap-[10px]">
+ <div class="flex items-center gap-4" @click="goToCart">
+ <el-badge :value="cartCount" :max="99" class="cart-badge">
+ <el-icon class="text-lg" color="#000" style="font-size: 20px"><ShoppingCart /></el-icon>
+ </el-badge>
+ </div>
+ 鎴戠殑璐墿杞�
+ </button>
+ <button>鎵归噺涓嬭浇</button>
+ <button>鎴戠殑璁㈠崟</button>
+ <div class="flex items-center">
+ <template v-if="!userInfo.Token">
+ <button @click="toLogin">鐧诲綍</button>
+ </template>
+ <template v-else>
+ <span class="text-blue-500 mr-2 text-[20px] text-[#000]">{{ userInfo.RealName }}</span>
+ <a href="#" class="hover:text-blue-500 text-[20px]" @click.prevent="handleLogout">閫�鍑�</a>
+ </template>
+ </div>
+ </div>
</div>
</div>
</header>
@@ -73,12 +80,117 @@
const route = useRoute();
const router = useRouter();
const searchQuery = ref('');
-const handleSearch = () => {
- if (!searchQuery.value) {
- searchQuery.value = '鏌ヨ瘉涔�';
- }
- router.push(`/eec-label-search`);
+
+const AreaValue = ref(null);
+const props = {
+ expandTrigger: 'hover' as const,
};
+
+const handleChange = (value) => {
+ console.log(value);
+};
+
+const options = [
+ {
+ value: 'shanghai',
+ label: '涓婃捣甯�',
+ children: [
+ {
+ value: 'minhang',
+ label: '闂佃鍖�',
+ children: [
+ {
+ value: 'consistency',
+ label: 'Consistency',
+ },
+ {
+ value: 'feedback',
+ label: 'Feedback',
+ },
+ {
+ value: 'efficiency',
+ label: 'Efficiency',
+ },
+ {
+ value: 'controllability',
+ label: 'Controllability',
+ },
+ ],
+ },
+ {
+ value: 'pudongxinqu',
+ label: '娴︿笢鏂板尯',
+ children: [
+ {
+ value: 'side nav',
+ label: 'Side Navigation',
+ },
+ {
+ value: 'top nav',
+ label: 'Top Navigation',
+ },
+ ],
+ },
+ {
+ value: 'huanpuqu',
+ label: '榛勬郸鍖�',
+ children: [
+ {
+ value: 'side nav',
+ label: 'Side Navigation',
+ },
+ {
+ value: 'top nav',
+ label: 'Top Navigation',
+ },
+ ],
+ },
+ {
+ value: 'hongkouqu',
+ label: '铏瑰彛鍖�',
+ children: [
+ {
+ value: 'side nav',
+ label: 'Side Navigation',
+ },
+ {
+ value: 'top nav',
+ label: 'Top Navigation',
+ },
+ ],
+ },
+ {
+ value: 'fengxian',
+ label: '濂夎搐鍖�',
+ children: [
+ {
+ value: 'side nav',
+ label: 'Side Navigation',
+ },
+ {
+ value: 'top nav',
+ label: 'Top Navigation',
+ },
+ ],
+ },
+ {
+ value: 'jingan',
+ label: '闈欏畨鍖�',
+ children: [
+ {
+ value: 'side nav',
+ label: 'Side Navigation',
+ },
+ {
+ value: 'top nav',
+ label: 'Top Navigation',
+ },
+ ],
+ },
+ ],
+ },
+];
+
const activeRoute = computed(() => route.path);
// 鑾峰彇鐢ㄦ埛淇℃伅
@@ -136,28 +248,29 @@
<style lang="scss" scoped>
:deep(.el-menu--horizontal .el-menu-item) {
- height: 16px;
- line-height: 16px;
+ height: 69px;
+ line-height: 69px;
font-size: 20px;
+ width: 130px;
}
-:deep(.el-menu--horizontal > .el-menu-item.is-active){
- color: #76B432 !important;
+:deep(.el-menu--horizontal > .el-menu-item.is-active) {
+ color: #76b432 !important;
border-bottom: none !important;
}
-:deep(.el-menu--horizontal > .el-menu-item){
+:deep(.el-menu--horizontal > .el-menu-item) {
color: #fff !important;
border-bottom: none;
}
:deep(.el-menu--horizontal) {
border-bottom: none;
}
-:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):hover){
+:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):hover) {
background: transparent !important;
- color: #76B432 !important;
+ color: #76b432 !important;
}
-:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):focus){
+:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):focus) {
background: transparent !important;
- color: #76B432 !important;
+ color: #76b432 !important;
}
.header-layout-div {
padding-left: 231px;
@@ -170,27 +283,78 @@
height: 68px;
}
.header-tool-div {
- padding-left: 258px;
+ display: flex;
+ gap: 20px;
+ align-items: center;
+ padding-left: 240px;
width: 100%;
height: 64px;
- background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
+ background: rgb(242, 242, 242);
border: 1px solid rgba(158, 158, 158, 0.4);
box-sizing: border-box;
.search-input-div {
- input {
- width: 482px;
- height: 39px;
- background: #ffffff;
- box-shadow: 0px 2px 3px 0px #ffffff, 0px 2px 3px 0px rgba(0, 0, 0, 0.4);
- border-radius: 6px;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+
+ :deep(.el-input__wrapper) {
+ width: 237px;
+ height: 39px;
+ background: transparent;
+ box-shadow: inset -1px -1px 3px 0px #ffffff, inset 0px 2px 3px 0px rgba(0, 0, 0, 0.4) !important;
+ border-radius: 6px;
+ border: none;
+ padding: 0 15px;
+ font-size: 16px;
+ outline: none;
+ box-sizing: border-box;
+ }
+ :deep(.el-input__inner) {
+ height: 39px;
+ background: transparent;
+ font-size: 16px;
+ outline: none;
+ box-sizing: border-box;
+ // &:focus {
+ // box-shadow:inset -1px -1px 3px 0px #ffffff,inset 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
+ // }
+ }
+
+ input {
+ width: 482px;
+ height: 39px;
+ background: #d3d3d3;
+ box-shadow: inset -1px -1px 3px 0px #ffffff, inset 0px 2px 3px 0px rgba(0, 0, 0, 0.4);
+ border-radius: 6px;
+ border: none;
+ padding: 0 15px;
+ font-size: 16px;
+ outline: none;
+ box-sizing: border-box;
+ &:focus {
+ box-shadow: inset -1px -1px 3px 0px #ffffff, inset 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
}
- button {
- width: 68px;
- height: 42px;
- background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8));
- box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
- border: 1px solid;
- border-image: linear-gradient(180deg, #c2c2c2, #989898) 1 1;
+ }
+ button {
+ min-width: 68px;
+ height: 39px;
+ background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%);
+ box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
+ border: 1px solid #c2c2c2;
+ border-radius: 6px;
+ color: #333333;
+ font-size: 16px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+
+ &:hover {
+ background: linear-gradient(180deg, #f5f5f5 0%, #d5d5d5 100%);
+ }
+
+ &:active {
+ background: linear-gradient(180deg, #e0e0e0 0%, #cccccc 100%);
+ box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}
}
}
@@ -199,7 +363,7 @@
background: url('@/assets/images/navbar_background.png') no-repeat;
background-size: 100% 100%;
- .menu-div-sytle{
+ .menu-div-sytle {
background: transparent;
height: 100%;
justify-content: center;
@@ -210,10 +374,19 @@
}
}
-.cart-badge :deep(.el-badge__content) {
- animation: cartBadgeAnimation 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+.cart-badge{
+ display: flex;
+ :deep(.el-badge__content) {
+ // animation: cartBadgeAnimation 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ }
}
-
+.gap-style {
+ font-size: 20px;
+ color: #ffffff;
+ font-family: 寰蒋闆呴粦;
+ font-weight: 500;
+ line-height: 69px;
+}
@keyframes cartBadgeAnimation {
0% {
transform: scale(0);
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 2f4456f..b8c7ce0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -159,14 +159,14 @@
<!-- 鎴戦渶瑕佽缃畇wiper鐨勯粯璁ゆ樉绀虹殑slide -->
<swiper
:direction="'vertical'"
- :init="true"
- :initialSlide="0"
- :slides-per-view="state.catalogSwiperIndex"
@swiper="onSwiper"
@slideChange="onSlideChange"
+ :slidesPerView="state.catalogSwiperIndex"
+ :centeredSlides="true"
:autoplay="{
delay: 10000,
- disableOnInteraction: true,
+ disableOnInteraction: false,
+ pauseOnMouseEnter: true,
}"
:effect="'fade'"
:modules="SwiperModule"
@@ -174,11 +174,11 @@
>
<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">
+ <div class="catalog-continer-item p-4" 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;">
+ <div class="mt-4 text-center font-medium" style="font-size: 18px">
{{ child.Model }}
</div>
</div>
@@ -188,20 +188,25 @@
</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 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 cursor-pointer"
- src="@/assets/home/notice1.png"
- @click="routeClick('/news-detail/8')"
- alt="鏂伴椈鏀跨瓥"
- />
+ </div> -->
+ <div class="flex gap-6">
+ <div class="w-[373px] flex flex-col gap-4">
+ <div class="w-full" style="border: 1px solid #ccc;">
+ <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="bg-page p-4 flex-auto">
<div
class="font-bold text-large over-ellipsis mb-2 hover:text-primary cursor-pointer"
@@ -468,12 +473,15 @@
import CustomerService from '@/components/CustomerService.vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
-import { Autoplay,EffectFade } from 'swiper/modules';
+import { Autoplay, EffectFade, Virtual } from 'swiper/modules';
import 'swiper/css';
-import 'swiper/css/effect-fade'
+import 'swiper/css/effect-fade';
+import 'swiper/css/pagination';
-const SwiperModule = [Autoplay,EffectFade];
+const SwiperModule = [Autoplay, EffectFade, Virtual];
const router = useRouter();
+
+const catalogSwiperRef = ref<HTMLElement | null>(null);
const newsList = ref([
{
@@ -555,7 +563,7 @@
{ name: '鐢垫満', tag: 7 },
],
curSelectCatalog: 1,
- catalogSwiperIndex:1,
+ catalogSwiperIndex: 0,
catalogItemList: [],
m_PageLoading: false,
});
@@ -725,7 +733,7 @@
{ name: '鍏朵粬绫�', value: 53, percentage: '1.30%' },
];
-const pieChart2Ref = ref<HTMLElement | null>(null);
+const pieChart2Ref = ref<null>(null);
const barChart2Ref = ref<HTMLElement | null>(null);
const EecProductMapChartRef = ref<HTMLElement | null>(null);
@@ -762,7 +770,7 @@
router.push(`/news-detail/${item.id}`);
};
// 鍒濆鍖栫被鍨嬪垪琛ㄦ暟鎹�
-const initCatalogList = () => {
+const initCatalogList = (cb: any = null) => {
state.m_PageLoading = true;
const catalogTag = state.curSelectCatalog;
axios({
@@ -806,6 +814,10 @@
arr.push(result.slice(i, i + 15));
}
state.catalogItemList = arr;
+
+ if (cb) {
+ cb();
+ }
})
.catch((err) => {
state.m_PageLoading = false;
@@ -1214,14 +1226,28 @@
// 鐩戝惉浜у搧绫诲瀷閫夋嫨
const changeCatalog = (type: number) => {
state.curSelectCatalog = type;
- state.catalogSwiperIndex = 1
- initCatalogList();
+ 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 onSwiper = (swiper:any)=>{
-}
-const onSlideChange = ()=>{
+// 浜у搧绫诲瀷鐐瑰嚮
+const handleCatalogClick = (item: any) => {
+ console.log(item, '鎴戣鐐瑰嚮浜�');
+};
-}
+const onSwiper = (swiper: any) => {
+ console.log(swiper);
+ catalogSwiperRef.value = swiper;
+};
+const onSlideChange = () => {};
const toFeedBack = () => {
router.push('/feedback');
};
@@ -1340,8 +1366,8 @@
align-items: center;
cursor: pointer;
color: #003a8f;
- font-size: 24px;
- line-height: 26px;
+ font-size: 20px;
+ font-weight: 700;
&:hover {
color: #71b02b;
}
@@ -1364,12 +1390,40 @@
height: 100%; /* 鏀逛负100%浠ラ�傚簲grid甯冨眬 */
border-radius: 20px;
box-sizing: border-box;
+ cursor: pointer;
+ &:hover {
+ img {
+ transform: scale(1.25);
+ transition: all 1s ease;
+ }
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+ }
}
.catalog-tag-active {
color: #71b02b !important;
}
-:deep(.catalog-swiper .swiper-slide){
-
+.news-title{
+ font-size: 20px;
+ color: #000000;
+ font-weight: 700;
+ font-family: 寰蒋闆呴粦;
+}
+: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;
+}
</style>
--
Gitblit v1.9.3