tarck

src/components/CaseCard.vue

@@ -1,66 +1,137 @@
 <template>
   <div class="track_container">
-    <div
-      :class="item.bg ? 'card bg' : 'card'"
-      v-for="item in trackList"
-      :key="item.id"
-    >
-      <img class="icon" :src="item.pic" />
-      <p class="title">{{ item.title }}</p>
-      <div class="btn">点击查看更多</div>
+    <div class="card_wrap">
+      <div
+        :class="item.bg ? 'card bg' : 'card'"
+        v-for="item in trackList"
+        :key="item.id"
+      >
+        <div v-if="item.id != activeTab" class="stand">
+          <img class="icon" :src="item.pic" />
+          <p class="title">{{ item.title }}</p>
+          <div class="btn" @click="toClassifyPage(item.id)">点击查看更多</div>
+        </div>
+        <div v-else class="selected">
+          <img :src="getImg(item.id)" alt="" class="img" />
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
 import { trackList } from '@/mock'
+import A1 from '@/static/img/caseshow/healthcare.png'
+import A2 from '@/static/img/caseshow/hardware.png'
+import A3 from '@/static/img/caseshow/industry.png'
+import A4 from '@/static/img/caseshow/railway.png'
+import A5 from '@/static/img/caseshow/outdoors.png'
+import A6 from '@/static/img/caseshow/specialequip.png'
+import A7 from '@/static/img/caseshow/healthcare.png'
+import A8 from '@/static/img/caseshow/smarthome.png'
+import A9 from '@/static/img/caseshow/electronics.png'
+import router from '@/router'
 const props = defineProps({
   activeTab: {
     type: Number,
   },
 })
+const toClassifyPage = id => {
+  router.push({
+    path: '/case-show',
+    query: {
+      t: id,
+    },
+  })
+}
+const getImg = id => {
+  if (id == 1) {
+    return A1
+  }
+  if (id == 2) {
+    return A2
+  }
+  if (id == 3) {
+    return A3
+  }
+  if (id == 4) {
+    return A4
+  }
+  if (id == 5) {
+    return A5
+  }
+  if (id == 6) {
+    return A6
+  }
+  if (id == 7) {
+    return A7
+  }
+  if (id == 8) {
+    return A8
+  }
+  if (id == 9) {
+    return A9
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 .track_container {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-  box-sizing: border-box;
-  .card {
-    flex: 1;
-    background: #fff;
-    padding: 30px 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .icon {
-      width: auto;
-      height: 20px;
-      margin-bottom: 11px;
-    }
-    .title {
-      font-size: 8px;
-      font-family: Alibaba PuHuiTi;
-      font-weight: 400;
-      color: #262626;
-      margin-bottom: 9px;
+  .card_wrap {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    box-sizing: border-box;
+    .card {
+      flex: 1;
+      background: #fff;
+      .stand {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 30px 0;
+        .icon {
+          width: auto;
+          height: 20px;
+          margin-bottom: 11px;
+        }
+        .title {
+          font-size: 8px;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 400;
+          color: #262626;
+          margin-bottom: 9px;
+        }
+        .btn {
+          border: 1px solid #262626;
+          padding: 3px 6px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 6px;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 300;
+          color: #262626;
+          white-space: nowrap;
+        }
+      }
+      .selected {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        height: 100%;
+        .img {
+          width: 90px;
+          height: 90px;
+          box-shadow: 0px 2px 7px 0px rgba(8, 69, 71, 0.09);
+          border-radius: 11px;
+        }
+      }
     }
-    .btn {
-      border: 1px solid #262626;
-      padding: 3px 6px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 6px;
-      font-family: Alibaba PuHuiTi;
-      font-weight: 300;
-      color: #262626;
-      white-space: nowrap;
+    .bg {
+      background: #fafafa;
     }
   }
-  .bg {
-    background: #fafafa;
-  }
 }
 </style>

src/components/SubNavigation.vue

@@ -2,13 +2,42 @@
   <div class="sub_navigation_container">
     <img class="back_icon" :src="Left" @click="backPage" />
     <p class="title">{{ title }}</p>
-    <img class="menu" :src="Menu" />
+    <img class="menu" :src="Menu" v-if="!drawer" @click="openDrawer" />
+    <div class="menu" v-else></div>
+    <div class="modal_drawer" v-if="drawer">
+      <img :src="Close" class="close" alt="" @click="drawer = false" />
+      <div class="content">
+        <div class="icon_wrap">
+          <p class="icon"></p>
+        </div>
+        <div class="btn_wrap">
+          <div class="btn" @click="toPage('/company')">公司简介</div>
+          <div class="btn" @click="toPage('/case-show')">案例展示</div>
+          <div class="btn" @click="toPage('/contact')">联系我们</div>
+          <div class="btn" @click="toPage('/recruit')">招贤纳士</div>
+          <div class="btn" @click="toPage('/hardware-case')">软硬件研发</div>
+          <div class="btn" @click="toPage('/product')">产品研发</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import Menu from '@/static/img/banner/liebiao2.png'
 import Left from '@/static/img/banner/arrow.png'
+import { ref, onMounted } from 'vue'
+import Close from '@/static/img/banner/x.png'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const drawer = ref(false)
+
+const openDrawer = () => {
+  drawer.value = true
+}
+const toPage = path => {
+  router.push(path)
+}
 const props = defineProps({
   title: {
     type: String,
@@ -47,5 +76,62 @@ const backPage = () => {
     width: 18px;
     height: 12px;
   }
+  .modal_drawer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
+    background: rgba(0, 0, 0, 0.67);
+    .close {
+      position: absolute;
+      right: 20px;
+      width: 13px;
+      height: 13px;
+      top: 17px;
+    }
+    .content {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 348px;
+      background: #fff;
+      border-top-right-radius: 20px;
+      border-top-left-radius: 20px;
+      display: flex;
+      flex-direction: column;
+      .icon_wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 12px 0 0 0;
+        .icon {
+          width: 24px;
+          height: 2px;
+          border-radius: 1px;
+          background: #000;
+        }
+      }
+      .btn_wrap {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-evenly;
+        .btn {
+          font-size: 13px;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 400;
+          color: #000000;
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
 }
 </style>

src/components/Top.vue

@@ -5,6 +5,7 @@
       class="fold_icon"
       :src="istop ? Icon : Icon1"
       alt=""
+      v-if="!drawer"
       @click="openDrawer"
     />
     <div class="modal_drawer" v-if="drawer">

src/pages/CaseShow.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="case_show_container">
     <SubNavigation title="案例展示" />
-    <CaseCard />
+    <CaseCard :activeTab="classify" />
     <HeadLine
       title="医疗健康"
       line1="我们精通气动、液动、电动等各种传动机构"
@@ -17,6 +17,15 @@ import Card from 'cpns/Card'
 import SubNavigation from 'cpns/SubNavigation'
 import HeadLine from 'cpns/HeadLine'
 import { caseList } from '@/mock'
+import { useRoute } from 'vue-router'
+import { ref, onMounted } from 'vue'
+const route = useRoute()
+
+const classify = ref(0)
+
+onMounted(() => {
+  classify.value = route.query.t
+})
 </script>
 
 <style lang="scss" scoped>