修改头部与首页样式

tanghaolin

2025-04-17 e9bc8175ed1272b1210b2d6fdc16600df4e378db

 src/views/Home.vue

@@ -159,14 +159,14 @@
               <!-- 我需要设置swiper的默认显示的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">
               </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-[30%] flex-0 cursor-pointer"
                           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();
};
const onSwiper = (swiper:any)=>{
}
const onSlideChange = ()=>{
   initCatalogList(cb);
};
// 产品类型点击
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;
}
.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>