删减

src/components/Medical copy/Header/index.vue

@@ -0,0 +1,265 @@
+<template>
+  <div
+    :class="
+      isChange || active ? 'header_container active_header' : 'header_container'
+    "
+    id="header_container"
+  >
+    <img :src="Logo1" class="logo" alt="" @click="toPage('/')" />
+    <div class="right_oper_wrap">
+      <div class="btns">
+        <div class="btn" @click="toPage('/')">
+          <p class="text">首页</p>
+          <div class="line" v-if="route.path == '/'"></div>
+        </div>
+        <div class="btn service" @click="toPage('/medical-detail')">
+          <p class="text">设计案例</p>
+          <div class="line" v-if="route.path == '/medical-detail'"></div>
+        </div>
+        <div class="btn service">
+          <p class="text">不止于此</p>
+          <div class="select_modal">
+            <p class="b" @click="toHomePage('/softhard')">软硬件开发</p>
+            <p class="b" @click="toHomePage('/design')">工业设计</p>
+            <p class="b" @click="toHomePage('/')">整机开发</p>
+          </div>
+        </div>
+        <div class="btn" @click="toPage('/medicalabout')">
+          <p class="text">关于我们</p>
+          <div class="line" v-if="route.path == '/medicalabout'"></div>
+        </div>
+        <div
+          class="btn"
+          style="margin-right: 20px"
+          @click="toPage('/medicalrecruit')"
+        >
+          <p class="text">招聘</p>
+          <div class="line" v-if="route.path == '/medicalrecruit'"></div>
+        </div>
+      </div>
+      <div class="phone_wrap">
+        <img
+          :src="isChange || active ? Phone2 : Phone1"
+          class="phone_icon"
+          alt=""
+        />
+        <p class="phone_text">137-1789-2018</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Logo1 from '@/assets/design/header/logo.png'
+import Phone1 from '@/assets/design/header/phone.png'
+import Logo2 from '@/assets/design/header/logo1.png'
+import Phone2 from '@/assets/design/header/phone1.png'
+import { onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useCountStore } from '@/store'
+const countStore = useCountStore()
+
+const route = useRoute()
+const router = useRouter()
+
+const isChange = ref(false)
+
+const props = defineProps({
+  active: {
+    type: Boolean,
+  },
+})
+
+const toHomePage = (path, p) => {
+  if (p) {
+    window.location.href = window.location.origin + '?p=' + p
+  } else {
+    router.push({
+      path,
+    })
+  }
+}
+const toDetail = t => {
+  document.body.scrollTop = document.documentElement.scrollTop = 0
+  window.location.href = `${window.location.origin}/design-detail?t=${t}`
+}
+
+const toPage = page => {
+  if (page != route.path) {
+    document.body.scrollTop = document.documentElement.scrollTop = 0
+    const rootTag = document.getElementById('iflytop')
+    rootTag.style['overflow-y'] = 'scroll'
+    rootTag.style['overflow-x'] = 'hidden'
+    rootTag.style.height = 'auto'
+    router.push(page)
+  }
+}
+
+const isFirstShow = ref(true)
+
+onMounted(() => {
+  window.onscroll = () => {
+    const screenHeight = document.documentElement.clientHeight
+    const scrollTop =
+      window.scrollTop ||
+      document.documentElement.scrollTop ||
+      document.body.scrollTop
+    const headerContainer = document.getElementById('header_container')
+    const headerHeight = headerContainer.offsetHeight
+    // 当下方real_container与顶部header接触时激活
+    if (screenHeight - headerHeight <= scrollTop) {
+      isChange.value = true
+    } else {
+      isChange.value = false
+    }
+
+    // 这里需要对数字滚动进行判断
+    const fourCardTop = document
+      .getElementById('four_card_container')
+      ?.getBoundingClientRect()?.top
+    if (screenHeight - 80 >= fourCardTop) {
+      // 当数字滚动到达页面中时进行滚动，仅需要执行一次
+      if (isFirstShow.value) {
+        countStore.countAdd()
+        isFirstShow.value = false
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.header_container {
+  padding: 18px 50px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition-property: all;
+  z-index: 202;
+  transition-duration: 0.7s;
+  animation-fill-mode: forwards;
+  .logo {
+    width: 140px;
+    height: 32px;
+    cursor: pointer;
+  }
+  .right_oper_wrap {
+    display: flex;
+    align-items: center;
+    .btns {
+      display: flex;
+      align-items: center;
+      .btn {
+        cursor: pointer;
+        padding: 4px 0;
+        position: relative;
+        transition-property: all;
+        transition-duration: 0.3s;
+        animation-fill-mode: forwards;
+        .text {
+          width: 100px;
+          font-family: Source Han Sans CN;
+          font-size: 16px;
+          font-weight: normal;
+          line-height: normal;
+          padding: 4px 0;
+          letter-spacing: 0em;
+          font-feature-settings: 'kern' on;
+          color: #ffffff;
+          text-align: center;
+          &:hover {
+            font-weight: bold;
+          }
+        }
+        .select_modal {
+          position: absolute;
+          top: 36px;
+          left: 50%;
+          transform: translateX(-50%);
+          padding: 6px;
+          color: #000000;
+          white-space: nowrap;
+          border-radius: 8px;
+          background: #fff;
+          display: none;
+          box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
+          .b {
+            padding: 12px 16px;
+            border-radius: 6px;
+            width: 100px;
+            display: flex;
+            font-size: 14px;
+            align-items: center;
+            justify-content: flex-start;
+            margin-bottom: 8px;
+            &:last-child {
+              margin-bottom: 0;
+            }
+            &:hover {
+              background: $theme-color;
+              color: #fff;
+            }
+          }
+        }
+        .line {
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          transform: translate(-50%);
+          width: 16px;
+          height: 2px;
+          border-radius: 276px;
+          background: #2a4ee1;
+        }
+      }
+      .service {
+        &:hover {
+          .select_modal {
+            display: block;
+          }
+        }
+      }
+    }
+    .phone_wrap {
+      display: flex;
+      align-items: center;
+      .phone_icon {
+        width: 28px;
+        height: 28px;
+        margin-right: 12px;
+      }
+      .phone_text {
+        font-family: Poppins;
+        font-size: 16px;
+        font-weight: bold;
+        line-height: normal;
+        letter-spacing: 0.02em;
+        color: #ffffff;
+      }
+    }
+  }
+}
+.active_header {
+  background: #fff;
+
+  .right_oper_wrap {
+    .btns {
+      .btn {
+        .text {
+          color: #000000;
+        }
+      }
+    }
+    .phone_wrap {
+      .phone_text {
+        color: #000000;
+      }
+    }
+  }
+}
+</style>

src/components/Medical copy/HomeScreen/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="home_screen_container">
+    <img :src="Bg" class="swiper_img" alt="" />
+  </div>
+</template>
+
+<script setup>
+import Bg from '@/assets/img/medical/swiper/bg.png'
+</script>
+
+<style lang="scss" scoped>
+.home_screen_container {
+  padding-top: 74px;
+  box-sizing: border-box;
+  position: relative;
+  .swiper_img {
+    width: 100vw;
+    height: auto;
+    object-fit: cover;
+  }
+}
+</style>

src/components/Medical/Header/index.vue

@@ -5,12 +5,7 @@
     "
     id="header_container"
   >
-    <img
-      :src="isChange || active ? Logo2 : Logo1"
-      class="logo"
-      alt=""
-      @click="toPage('/')"
-    />
+    <img :src="Logo1" class="logo" alt="" @click="toPage('/')" />
     <div class="right_oper_wrap">
       <div class="btns">
         <div class="btn" @click="toPage('/')">

src/components/Medical/HomeScreen/index.vue

@@ -1,22 +1,20 @@
 <template>
   <div class="home_screen_container">
-    <img :src="Bg" class="swiper_img" alt="" />
+    <img :src="HomeBG" class="img" alt="" />
   </div>
 </template>
 
 <script setup>
-import Bg from '@/assets/img/medical/swiper/bg.png'
+import HomeBG from '@/assets/medical/1.png'
 </script>
 
 <style lang="scss" scoped>
 .home_screen_container {
-  padding-top: 74px;
-  box-sizing: border-box;
-  position: relative;
-  .swiper_img {
-    width: 100vw;
+  padding-top: 68px;
+  background: #0937b3;
+  .img {
+    width: 100%;
     height: auto;
-    object-fit: cover;
   }
 }
 </style>

src/router/index.js

@@ -8,11 +8,6 @@ const routes = [
     component: () => import('@/views/Medical'),
   },
   {
-    path: '/recruit',
-    name: 'recruit',
-    component: () => import('@/views/Recruit'),
-  },
-  {
     path: '/medical-detail',
     name: 'medical-detail',
     component: () => import('@/views/MedicalDetail'),

src/views/Medical copy/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="medical_container">
+    <Header :active="true" />
+    <HomeScreen />
+    <div class="content_container">
+      <HeaderLine
+        title="公司简介"
+        line1="梦工厂是一家医疗产品研发公司，成立于2010年，具有强大的研发实力和丰富的技术储备。公司秉持对医疗产品的热爱和敬畏之心，专注于研发高质量、可靠和美观的医疗产品"
+        line2="现有工程师50多人，办公面积2000多㎡，拥有三条SMT产线、三十余台机加工设备，服务客户300+"
+      />
+      <Company />
+      <HeaderLine title="优势服务领域" />
+      <MedicalService />
+      <HeaderLine title="医疗器械一站式研发量产服务" />
+      <OneStep />
+      <HeaderLine title="案例展示" />
+      <Case />
+      <HeaderLine title="能力储备" />
+      <Ability />
+    </div>
+    <Bottom />
+  </div>
+</template>
+
+<script setup>
+import Header from 'cpns/Medical/Header'
+import HomeScreen from 'cpns/Medical/HomeScreen'
+import HeaderLine from 'cpns/design/HeaderLine'
+import Company from 'cpns/Medical/Company'
+import MedicalService from 'cpns/Medical/MedicalService'
+import OneStep from 'cpns/Medical/OneStep'
+import Case from 'cpns/Medical/Case'
+import Ability from 'cpns/Medical/Ability'
+import Bottom from 'cpns/NewBottom.vue'
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  document.body.scrollTop = document.documentElement.scrollTop = 0
+})
+</script>
+
+<style lang="scss" scoped>
+.medical_container {
+  background: #fff;
+  .content_container {
+    padding: 0 100px;
+  }
+}
+</style>

src/views/Medical/index.vue

@@ -2,36 +2,12 @@
   <div class="medical_container">
     <Header :active="true" />
     <HomeScreen />
-    <div class="content_container">
-      <HeaderLine
-        title="公司简介"
-        line1="梦工厂是一家医疗产品研发公司，成立于2010年，具有强大的研发实力和丰富的技术储备。公司秉持对医疗产品的热爱和敬畏之心，专注于研发高质量、可靠和美观的医疗产品"
-        line2="现有工程师50多人，办公面积2000多㎡，拥有三条SMT产线、三十余台机加工设备，服务客户300+"
-      />
-      <Company />
-      <HeaderLine title="优势服务领域" />
-      <MedicalService />
-      <HeaderLine title="医疗器械一站式研发量产服务" />
-      <OneStep />
-      <HeaderLine title="案例展示" />
-      <Case />
-      <HeaderLine title="能力储备" />
-      <Ability />
-    </div>
-    <Bottom />
   </div>
 </template>
 
 <script setup>
 import Header from 'cpns/Medical/Header'
 import HomeScreen from 'cpns/Medical/HomeScreen'
-import HeaderLine from 'cpns/design/HeaderLine'
-import Company from 'cpns/Medical/Company'
-import MedicalService from 'cpns/Medical/MedicalService'
-import OneStep from 'cpns/Medical/OneStep'
-import Case from 'cpns/Medical/Case'
-import Ability from 'cpns/Medical/Ability'
-import Bottom from 'cpns/NewBottom.vue'
 import { onMounted } from 'vue'
 
 onMounted(() => {
@@ -42,8 +18,5 @@ onMounted(() => {
 <style lang="scss" scoped>
 .medical_container {
   background: #fff;
-  .content_container {
-    padding: 0 100px;
-  }
 }
 </style>

src/views/Recruit/SoftRecruit.vue

@@ -1,138 +0,0 @@
-<template>
-  <div class="recruit_container">
-    <Header :active="true" />
-    <div
-      class="card"
-      @click="showModal(item.id)"
-      v-for="item in postList"
-      :key="item.id"
-    >
-      <div class="title">{{ item.postName }}</div>
-      <div class="desc_box">
-        <p class="desc">
-          {{ item.postIntroduce }}
-        </p>
-        <div class="btn">
-          <p class="text">查看详情</p>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            fill="none"
-            version="1.1"
-            width="20"
-            height="4"
-            viewBox="0 0 20 4"
-          >
-            <g>
-              <path
-                d="M19.9922,3.41357C20.0475,3.71869,19.8013,3.998,19.4754,4L0.524717,4C0.234187,4.00028,-0.00116205,3.77604,0.00000432898,3.50006C0.00000432898,3.2236,0.238414,2.99963,0.524717,2.99963L18.3818,2.99963L16.1219,0.851393C15.9164,0.656325,15.9171,0.339718,16.1235,0.145482C16.3287,-0.0494938,16.6655,-0.0469936,16.8661,0.143982L19.8464,2.97713C19.9717,3.09611,20.0201,3.25959,19.9922,3.41357Z"
-                fill="#FFFFFF"
-                fill-opacity="1"
-              />
-            </g>
-          </svg>
-        </div>
-      </div>
-    </div>
-    <PostModal
-      :postInfo="postInfo"
-      v-if="modalVisible"
-      :hiddenDetailModal="hiddenDetailModal"
-    />
-  </div>
-  <Bottom />
-</template>
-
-<script setup>
-import Header from 'cpns/SoftHardware/Header'
-import { postList, postDetail } from '@/mock/post'
-import { ref } from 'vue'
-import PostModal from 'cpns/post/PostModal'
-import Bottom from 'cpns/NewBottomWhite.vue'
-
-const modalVisible = ref(false)
-const postInfo = ref({})
-
-const hiddenDetailModal = () => {
-  const rootTag = document.getElementById('iflytop')
-  rootTag.style['overflow-y'] = 'scroll'
-  rootTag.style['overflow-x'] = 'hidden'
-  rootTag.style.height = 'auto'
-  postInfo.value = {}
-  modalVisible.value = false
-}
-
-const showModal = id => {
-  const rootTag = document.getElementById('iflytop')
-  rootTag.style.overflow = 'hidden'
-  rootTag.style.height = '100%'
-  postInfo.value = postDetail[id]
-  modalVisible.value = true
-}
-</script>
-
-<style lang="scss" scoped>
-.recruit_container {
-  background: #f6f6f6;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 100px;
-  .card {
-    width: 80vw;
-    cursor: pointer;
-    margin-bottom: 40px;
-    background: #fff;
-    padding: 32px 42px 52px 32px;
-    border-radius: 10px;
-    .title {
-      font-family: Source Han Sans;
-      font-size: 36px;
-      font-weight: bold;
-      line-height: normal;
-      letter-spacing: 0.02em;
-      font-feature-settings: 'kern' on;
-      color: #000000;
-      padding-bottom: 32px;
-      border-bottom: 1px solid #d3d3d3;
-    }
-    .desc_box {
-      padding-top: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .desc {
-        font-family: Source Han Sans;
-        font-size: 18px;
-        font-weight: normal;
-        line-height: normal;
-        letter-spacing: 0.04em;
-        width: 70%;
-        font-feature-settings: 'kern' on;
-        color: #d3d3d3;
-      }
-      .btn {
-        padding: 10px 21px;
-        display: flex;
-        align-items: center;
-        border-radius: 383px;
-        background: linear-gradient(90deg, #16ddfa 0%, #305efc 100%);
-        .text {
-          margin-right: 11px;
-          font-family: Source Han Sans;
-          font-size: 16px;
-          font-weight: normal;
-          line-height: normal;
-          letter-spacing: 0.04em;
-          font-feature-settings: 'kern' on;
-          color: #ffffff;
-        }
-      }
-    }
-    &:hover {
-      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);
-    }
-  }
-}
-</style>

src/views/Recruit/index.vue

@@ -1,138 +0,0 @@
-<template>
-  <div class="recruit_container">
-    <Header :active="true" />
-    <div
-      class="card"
-      @click="showModal(item.id)"
-      v-for="item in postList"
-      :key="item.id"
-    >
-      <div class="title">{{ item.postName }}</div>
-      <div class="desc_box">
-        <p class="desc">
-          {{ item.postIntroduce }}
-        </p>
-        <div class="btn">
-          <p class="text">查看详情</p>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            fill="none"
-            version="1.1"
-            width="20"
-            height="4"
-            viewBox="0 0 20 4"
-          >
-            <g>
-              <path
-                d="M19.9922,3.41357C20.0475,3.71869,19.8013,3.998,19.4754,4L0.524717,4C0.234187,4.00028,-0.00116205,3.77604,0.00000432898,3.50006C0.00000432898,3.2236,0.238414,2.99963,0.524717,2.99963L18.3818,2.99963L16.1219,0.851393C15.9164,0.656325,15.9171,0.339718,16.1235,0.145482C16.3287,-0.0494938,16.6655,-0.0469936,16.8661,0.143982L19.8464,2.97713C19.9717,3.09611,20.0201,3.25959,19.9922,3.41357Z"
-                fill="#FFFFFF"
-                fill-opacity="1"
-              />
-            </g>
-          </svg>
-        </div>
-      </div>
-    </div>
-    <PostModal
-      :postInfo="postInfo"
-      v-if="modalVisible"
-      :hiddenDetailModal="hiddenDetailModal"
-    />
-  </div>
-  <Bottom />
-</template>
-
-<script setup>
-import Header from 'cpns/design/Header'
-import Bottom from 'cpns/NewBottomWhite.vue'
-import { postList, postDetail } from '@/mock/post'
-import { ref } from 'vue'
-import PostModal from 'cpns/post/PostModal'
-
-const modalVisible = ref(false)
-const postInfo = ref({})
-
-const hiddenDetailModal = () => {
-  const rootTag = document.getElementById('iflytop')
-  rootTag.style['overflow-y'] = 'scroll'
-  rootTag.style['overflow-x'] = 'hidden'
-  rootTag.style.height = 'auto'
-  postInfo.value = {}
-  modalVisible.value = false
-}
-
-const showModal = id => {
-  const rootTag = document.getElementById('iflytop')
-  rootTag.style.overflow = 'hidden'
-  rootTag.style.height = '100%'
-  postInfo.value = postDetail[id]
-  modalVisible.value = true
-}
-</script>
-
-<style lang="scss" scoped>
-.recruit_container {
-  background: #f6f6f6;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 100px;
-  .card {
-    width: 80vw;
-    cursor: pointer;
-    margin-bottom: 40px;
-    background: #fff;
-    padding: 32px 42px 52px 32px;
-    border-radius: 10px;
-    .title {
-      font-family: Source Han Sans;
-      font-size: 36px;
-      font-weight: bold;
-      line-height: normal;
-      letter-spacing: 0.02em;
-      font-feature-settings: 'kern' on;
-      color: #000000;
-      padding-bottom: 32px;
-      border-bottom: 1px solid #d3d3d3;
-    }
-    .desc_box {
-      padding-top: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .desc {
-        font-family: Source Han Sans;
-        font-size: 18px;
-        font-weight: normal;
-        line-height: normal;
-        letter-spacing: 0.04em;
-        width: 70%;
-        font-feature-settings: 'kern' on;
-        color: #d3d3d3;
-      }
-      .btn {
-        padding: 10px 21px;
-        display: flex;
-        align-items: center;
-        border-radius: 383px;
-        background: linear-gradient(90deg, #16ddfa 0%, #305efc 100%);
-        .text {
-          margin-right: 11px;
-          font-family: Source Han Sans;
-          font-size: 16px;
-          font-weight: normal;
-          line-height: normal;
-          letter-spacing: 0.04em;
-          font-feature-settings: 'kern' on;
-          color: #ffffff;
-        }
-      }
-    }
-    &:hover {
-      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);
-    }
-  }
-}
-</style>