top tab

src/components/CaseCard.vue

@@ -98,26 +98,29 @@ const getImg = id => {
         display: flex;
         flex-direction: column;
         align-items: center;
-        padding: 30px 0;
+        padding: 20px 0;
         .icon {
           width: auto;
           height: 20px;
           margin-bottom: 11px;
         }
         .title {
-          font-size: 8px;
+          font-size: 16px;
+          transform: scale(0.5);
+          line-height: 8px;
           font-family: Alibaba PuHuiTi;
           font-weight: 400;
           color: #262626;
-          margin-bottom: 9px;
+          margin-bottom: 4px;
         }
         .btn {
           border: 1px solid #262626;
-          padding: 3px 6px;
+          padding: 8px 16px;
           display: flex;
           align-items: center;
           justify-content: center;
-          font-size: 6px;
+          font-size: 12px;
+          transform: scale(0.5);
           font-family: Alibaba PuHuiTi;
           font-weight: 300;
           color: #262626;

src/components/CaseShow.vue

@@ -26,6 +26,7 @@ const getData = () => {
 
 <style lang="scss" scoped>
 .case_show_container {
-  margin-top: 330px;
+  margin-top: 360px;
+  padding-bottom: 7px;
 }
 </style>

src/components/Summarize.vue

@@ -84,12 +84,12 @@ const props = defineProps({
     }
     .desc {
       transform: scale(0.5);
-      width: 200%;
+      width: 170%;
       font-size: 21px;
       font-family: Source Han Sans CN;
       font-weight: 300;
       color: #959595;
-      line-height: 26px;
+      line-height: 30px;
       text-align: center;
     }
     .mb {

src/components/Swiper.vue

@@ -3,7 +3,6 @@
     <swiper
       :slidesPerView="1"
       :spaceBetween="0"
-      :loop="true"
       :pagination="{
         clickable: true,
       }"
@@ -11,6 +10,7 @@
       :modules="modules"
       class="mySwiper"
       @swiper="onSwiper"
+      @slideChange="onSlideChange"
     >
       <swiper-slide><img :src="B1" class="banner" alt="" /></swiper-slide>
       <swiper-slide><img :src="B2" class="banner" alt="" /></swiper-slide>
@@ -21,7 +21,7 @@
     <div class="summar_wrap">
       <Summarize :page="page" />
     </div>
-    <div class="top_wrap"><Top /></div>
+    <div class="top_wrap"><Top :isFirstSwiper="isFirstSwiper" /></div>
   </div>
 </template>
 
@@ -39,9 +39,19 @@ import { Pagination, Navigation } from 'swiper'
 const modules = [Pagination, Navigation]
 import { ref } from 'vue'
 const sw = ref(null)
+const isFirstSwiper = ref(true)
 const onSwiper = swiper => {
   sw.value = swiper
 }
+const onSlideChange = swiper => {
+  const { isBeginning } = swiper
+  console.log(isBeginning)
+  if (isBeginning) {
+    isFirstSwiper.value = true
+  } else {
+    isFirstSwiper.value = false
+  }
+}
 const preSwiper = () => {
   sw.value?.slidePrev(500, false)
 }

src/components/Top.vue

@@ -1,9 +1,13 @@
 <template>
-  <div :class="istop ? 'top_container' : 'top_container container_bg'">
-    <img class="logo" :src="istop ? Logo : Logo1" alt="" />
+  <div
+    :class="
+      istop && isFirstSwiper ? 'top_container' : 'top_container container_bg'
+    "
+  >
+    <img class="logo" :src="istop && isFirstSwiper ? Logo : Logo1" alt="" />
     <img
       class="fold_icon"
-      :src="istop ? Icon : Icon1"
+      :src="istop && isFirstSwiper ? Icon : Icon1"
       alt=""
       v-if="!drawer"
       @click="openDrawer"
@@ -39,6 +43,11 @@ import { useRouter, useRoute } from 'vue-router'
 const route = useRoute()
 const router = useRouter()
 const drawer = ref(false)
+const props = defineProps({
+  isFirstSwiper: {
+    type: Boolean,
+  },
+})
 
 const openDrawer = () => {
   drawer.value = true
@@ -157,7 +166,7 @@ const scrollToTop = () => {
   }
 }
 .container_bg {
-  background: #fff;
+  background: rgba(255, 255, 255, 0.9);
   transition-property: all;
   transition-duration: 0.7s;
   animation-fill-mode: forwards;

src/mock/index.js

@@ -79,52 +79,52 @@ export const hardList = [
   {
     id: 1,
     title: '国网照明巡检摄像头',
-    pic: Y1,
+    picUrl: Y1,
   },
   {
     id: 2,
     title: '娱乐打禅休闲一体化座舱',
-    pic: Y2,
+    picUrl: Y2,
   },
   {
     id: 3,
     title: '暖手宝',
-    pic: Y3,
+    picUrl: Y3,
   },
   {
     id: 4,
     title: '微型光度计',
-    pic: Y4,
+    picUrl: Y4,
   },
   {
     id: 5,
     title: '动车底部巡检',
-    pic: Y5,
+    picUrl: Y5,
   },
   {
     id: 6,
     title: '全自动AI缠绕打包机器人',
-    pic: Y6,
+    picUrl: Y6,
   },
   {
     id: 7,
     title: '智慧医美视频拍照系统',
-    pic: Y7,
+    picUrl: Y7,
   },
   {
     id: 8,
     title: '智能多通道全自动免疫荧光分析仪',
-    pic: Y8,
+    picUrl: Y8,
   },
   {
     id: 9,
     title: '室内空调调节机',
-    pic: Y9,
+    picUrl: Y9,
   },
   {
     id: 10,
     title: '水处理设备',
-    pic: Y10,
+    picUrl: Y10,
   },
 ]
 

src/pages/index.vue

@@ -35,11 +35,13 @@ import { ref } from 'vue'
 const isDrag = ref(false)
 
 const handlePress = e => {
+  e.preventDefault()
   // 背景虚化
   isDrag.value = true
 }
 const handleRelease = e => {
   // 背景实体化
+  e.preventDefault()
   isDrag.value = false
 }
 </script>