feat: 移动端官网

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "sample-website",
+  "name": "mobile-website",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -9,17 +9,23 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "less": "^4.2.2",
+    "less-loader": "^12.2.0",
     "scrollreveal": "^4.0.9",
+    "vant": "^4.9.17",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
     "autoprefixer": "^10.4.20",
+    "babel-plugin-import": "^1.13.8",
     "daisyui": "^4.12.23",
     "postcss": "^8.5.2",
     "postcss-pxtorem": "^6.1.0",
     "tailwindcss": "^3.4.17",
+    "unplugin-auto-import": "^19.1.1",
+    "unplugin-vue-components": "^28.4.1",
     "vite": "^6.0.5"
   }
 }

src/components/Footer.vue

@@ -3,68 +3,94 @@
     <footer class="max-w-screen-xl mx-auto w-full footer text-white">
       <nav>
         <h6 class="footer-title">关于三优</h6>
+        <div class="flex gap-[16px]">
           <a class="link link-hover">公司介绍</a>
           <a class="link link-hover">发展历程</a>
           <a class="link link-hover">平台概览</a>
           <a class="link link-hover">核心团队</a>
+        </div>
       </nav>
       <nav>
         <h6 class="footer-title">新闻中心</h6>
+        <div class="flex gap-[16px]">
           <a class="link link-hover">三优新闻</a>
           <a class="link link-hover">媒体报道</a>
           <a class="link link-hover">视频中心</a>
+        </div>
       </nav>
       <nav>
         <h6 class="footer-title">加入我们</h6>
+        <div class="flex gap-[12px] flex-wrap">
           <a class="link link-hover">人才理念</a>
           <a class="link link-hover">培训体系</a>
           <a class="link link-hover">晋升发展</a>
           <a class="link link-hover">薪酬福利</a>
           <a class="link link-hover">招聘岗位</a>
+        </div>
       </nav>
-      <nav>
+      <nav class="relative w-full">
         <h6 class="footer-title">联系我们</h6>
         <div class="flex items-center gap-[8px]">
           <img class="w-[16px]" src="../assets/general/phone.png" alt="" />
-          <span>400-821-0776</span>
+          <span class="grey-color">400-821-0776</span>
         </div>
         <div class="flex items-center gap-[8px]">
           <img class="w-[16px]" src="../assets/general/email.png" alt="" />
-          <span>service@sanyoubio.com</span>
+          <span class="grey-color">service@sanyoubio.com</span>
         </div>
         <div class="flex items-center gap-[8px]">
           <img class="w-[16px]" src="../assets/general/public.png" alt="" />
-          <span>www.sanyoubio.com.cn</span>
+          <span class="grey-color">www.sanyoubio.com.cn</span>
         </div>
 
         <div class="flex items-center gap-[8px]">
           <img class="w-[16px]" src="../assets/general/location.png" alt="" />
-          <span>上海闵行区竹园路559号T3幢</span>
+          <span class="grey-color">上海闵行区竹园路559号T3幢</span>
         </div>
-      </nav>
+        <nav class="absolute top-[4px] right-0 flex flex-col items-center justify-center">
-      <nav>
           <h6 class="footer-title">微信公众号</h6>
-        <img class="w-[133px]" src="../assets/image 78.png" alt="" />
+          <img class="w-[90px] mt-[10px]" src="../assets/image 78.png" alt="" />
         </nav>
+      </nav>
+      
     </footer>
     <!-- <div class="w-full line-split"></div> -->
     <div class="w-full mt-[22px]">
       <img class="w-full" src="../assets/Vector 21.png" alt="" />
     </div>
-    <div class="text-center text-bottom mt-[22px]">Copyright @ 2015-2024 三优生物医药（上海）有限公司 All Rights Reserved</div>
+    <div class="text-center text-bottom mt-[22px]">Copyright @ 2015-2024 三优生物医药（上海）有限公司</div>
-    <div class="w-full text-center text-bottom flex items-center justify-center">
+    <div class="w-full text-center text-bottom flex flex-col items-center justify-center">
-      <span> 沪ICP备15044189号-3  </span>
+      沪ICP备15044189号-3 
+      <div class="flex items-center gap-[8px]">
         <img class="w-[18px]" src="../assets/logo_public_security.png" alt="" />
       <span> 沪公网安备31011202013866号</span>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup></script>
 
-<style scoped>
+<style lang="less" scoped>
 .footer-bg {
-  background: linear-gradient(91.27deg, #052846 -23.63%, #0d387e 97.65%);
+  padding: 20px;
+  background: linear-gradient(91.27deg, #0D90FF -23.63%, #0D387E 97.65%);
+  .footer {
+    row-gap: 15px;
+  }
+  .footer-title {
+    color: #FFFFFF;
+    font-size: 13px;
+    font-weight: 600;
+    margin-bottom: 0;
+    opacity: 1;
+  }
+  a {
+    color: rgba(255, 255, 255, 0.7);
+  }
+}
+.grey-color {
+  color: rgba(255, 255, 255, 0.7);
 }
 .line-split {
   height: 0.883442759513855px;
@@ -74,7 +100,7 @@
 }
 .text-bottom {
   font-weight: 400;
-  font-size: 16px;
+  font-size: 13px;
   line-height: 28px;
   color: rgba(255, 247, 247, 0.5);
 }

src/components/Header.vue

@@ -1,19 +1,72 @@
 <template>
-  <div class="navbar header-bg-color">
+  <div class="navbar flex justify-between items-center">
-    <div class="navbar-start"></div>
+    <div class="flex items-center gap-[10px]">
-    <div class="navbar-center flex gap-[80px]">
+      <van-image class="logo" :src="logoIcon" />
-      <a href="https://www.sanyoubio.com.cn" class="btn btn-ghost btn-hover"
+      <span>三优云试剂管家</span>
-        :style="{ color: activeTag === 'about' ? '#00E5FF' : 'white' }">关于三优</a>
-      <a class="btn btn-ghost btn-hover" :style="{ color: activeTag === 'home' ? '#00E5FF' : 'white' }" @click="goIndex">三优云试剂管家</a>
-      <a class="btn btn-ghost btn-hover" :style="{ color: activeTag === 'contact' ? '#00E5FF' : 'white' }" @click="goContact">联系我们</a>
     </div>
-    <div class="navbar-end"></div>
+    <van-icon name="wap-nav" @click="goMenu" class="menu-icon" :src="menuIcon" />
   </div>
+  <van-popup 
+    v-model:show="show"
+    class="menu-popup" 
+    position="left" 
+    duration="0.4"
+    :transition-appear="true" 
+    :style="{ width: '80%', height: '100%' }"
+    @close="handleClose" >
+    <div class="menu-container">
+      <div class="menu-header">
+        <van-image class="logo" :src="logoIcon" />
+        
+        <div class="menu-header-title">三优云试剂管家</div>
+      </div>
+      <div class="menu-list">
+        <div class="menu-item" @click="goAbout">
+          <div class="menu-item-icon">
+            <van-icon name="miniprogram-o" />
+          </div>
+          <div class="menu-item-title" :class="{ active: currentTag === 'about' }">关于三优</div>
+          <div v-if="currentTag === 'about'" class="menu-item-arrow">
+            <van-icon name="success" />
+          </div>
+        </div>
+        <div class="menu-item" :class="{ active: currentTag === 'home' }" @click="goIndex">
+          <div class="menu-item-icon">
+            <van-icon name="home-o" />
+          </div>
+          <div class="menu-item-title">首页</div>
+          <div v-if="currentTag === 'home'" class="menu-item-arrow">
+            <van-icon name="success" />
+          </div>
+        </div>
+        <div class="menu-item" :class="{ active: currentTag === 'contact' }" @click="goContact">
+          <div class="menu-item-icon">
+            <van-icon name="phone-o" />
+          </div>
+          <div class="menu-item-title">联系我们</div>
+          <div v-if="currentTag === 'contact'" class="menu-item-arrow">
+            <van-icon name="success" />
+          </div>
+        </div>
+      </div>
+      <div class="menu-footer">
+        <div class="w-full">
+          <img class="w-full" src="../assets/Vector 21.png" alt="" />
+        </div>
+        <div class="menu-footer-item">@ 三优生物医药（上海）有限公司</div>
+      </div>
+    </div>
+
+   
+    </van-popup>
 </template>
 
 <script setup>
-import { defineProps } from "vue";
+import { defineProps, ref } from "vue";
 import { useRouter } from 'vue-router';
+import logoIcon from '../assets/image 111.png';
+import menuIcon from '../assets/menu.png';
+
 // 接收父组件传递的 activeTag
 const props = defineProps({
   activeTag: {
@@ -22,39 +75,142 @@ const props = defineProps({
   },
 });
 
+const currentTag = ref(props.activeTag);
+
 const router = useRouter();
 
 const goIndex = () => {
+  currentTag.value = 'home';
   router.push('/');
 };
 
 const goContact = () => {
+  currentTag.value = 'contact';
   router.push('/contact');
 };
+
+const goAbout = () => {
+  currentTag.value = 'about';
+  window.location.href = 'https://www.sanyoubio.com.cn';
+};
+
+const show = ref(false);
+const isRotated = ref(false);
+
+const goMenu = () => {
+  // isRotated.value = !isRotated.value;
+  show.value = true;
+}
+
+const handleClose = () => {
+  isRotated.value = false;
+  show.value = false;
+}
 </script>
 
-<style scoped>
+<style lang="less" scoped>
-.header-bg-color {
+.menu-popup {
-  color: #fff;
+  width: 100%;
+  height: 100%;
+  background: #00203b;
+  color: #ffffff;
+  .menu-container {
+    width: 100%;
+    height: 100%;
+    padding: 50px 0;
+    .menu-header {
+      display: flex;
+      align-items: center;
+      justify-content: start;
+      padding: 10px 40px;
+      
+      .menu-header-title {
+        font-size: 20px;
+        font-weight: 600;
+        margin-left: 10px;
+      }
+    }
+  }
+  .menu-list {
+    margin-top: 50px;
+    .menu-item {
+      height: 64px;
+      line-height: 64px;
       font-size: 16px;
-  height: 77px;
+      margin-bottom: 20px;
-  z-index: 111;
+      padding-left: 40px;
-  position: fixed;
+      display: flex;
-  background-image: url('../assets/Rectangle 85.png');
+      align-items: center;
-  background-size: 100% 100%;
+      position: relative;
-  background-repeat: no-repeat;
+      &.active {
+        background: rgb(31, 60, 100);
+        .menu-item-icon {
+          font-weight: bold;
+          color: #000000;
+          background: #fff;
+        }
+      }
+      .menu-item-icon {
+        width: 37px;
+        height: 37px;
+        font-size: 20px;
+        background-color: rgb(45, 73, 110);
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20px;
+        }
+      .menu-item-arrow {
+        position: absolute;
+        right: 40px;
+        font-size: 20px;
+        top: 0;
+        bottom: 0;
+        right: 40px;
+        margin: auto;
+      }
+    }
+  }
+  .menu-footer {
+    position: absolute;
+    bottom: 10px;
     left: 0;
     right: 0;
-  top: 0;
+    width: 100%;  
+    height: 60px;
+    .menu-footer-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 44px;
+      line-height: 44px;
+      font-size: 12px;
+      // padding-left: 40px;
+    }
+  }
 }
+.navbar {
+  width: 100%;
+  height: 44px;
+  min-height: 44px;
+  background: #fff;
+  padding: 0 16px;
+  color: rgb(66, 110, 163);
+  font-size: 16px;
+  font-weight: 600;
 
-.btn-hover:hover {
-  color: #00e5ff !important;
 }
-
+.logo {
-.btn-hover {
+  width: 63px;
-  font-size: 18px !important;
+  height: 28px;
+}
+.menu-icon {
+  font-size: 24px;
+  color: #000;
+  transition: transform 0.3s ease;
+  &.rotate {
+    transform: rotate(90deg);
+  }
 }
-
-/* 你可以在这里添加一些自定义的样式 */
 </style>

src/main.js

@@ -2,11 +2,18 @@ import { createApp } from "vue";
 import "./style.css";
 import App from "./App.vue";
 import router from "./router";
+import { Lazyload, Image as VanImage, Tab, Tabs, Swipe, SwipeItem, Sticky, Popup, Icon } from 'vant';
+// import './utils/rem';
+
+// 2. 引入组件样式
+import 'vant/lib/index.css';
+
 
 function setRootFontSize() {
   const baseWidth = 1920; // 假设设计稿宽度为 1920px（可以根据实际设计稿调整）
   const clientWidth = document.documentElement.clientWidth || window.innerWidth;
-  const rootFontSize = (clientWidth / baseWidth) * 16; // 基准字体大小为 16px
+  // const rootFontSize = (clientWidth / baseWidth) * 16; // 基准字体大小为 16px
+  const rootFontSize = 16; // 基准字体大小为 16px
   document.documentElement.style.fontSize = rootFontSize + "px";
 }
 
@@ -16,4 +23,15 @@ setRootFontSize();
 // 当窗口大小变化时重新设置
 window.addEventListener("resize", setRootFontSize);
 
-createApp(App).use(router).mount("#app");
+const app = createApp(App);
+app.use(router);
+app.use(Lazyload);
+app.use(VanImage);
+app.use(Tab);
+app.use(Tabs);
+app.use(Swipe);
+app.use(SwipeItem);
+app.use(Sticky);
+app.use(Popup);
+app.use(Icon);
+app.mount("#app");

src/style.css

@@ -3,5 +3,5 @@
 @tailwind utilities;
 
 #app {
-  background-color: #00203b;
+  background-color: rgb(244, 249, 251);
 }

src/utils/rem.js

@@ -0,0 +1,13 @@
+// rem 适配
+const baseSize = 37.5
+
+function setRem() {
+  const scale = document.documentElement.clientWidth / 375
+  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
+}
+
+setRem()
+
+window.onresize = function() {
+  setRem()
+} 

src/views/Contact.vue

@@ -1,18 +1,21 @@
 <template>
   <div>
+    <van-sticky>
       <Header activeTag="contact" />
-    <div class="w-full ">
+    </van-sticky>
-      <img class="w-fll" src="../assets/banner00001.jpeg" alt="">
+    <div class="w-full relative">
-      <div class="absolute top-[250px] right-[400px]  text-white">
+      <img class="w-fll h-[150px]" src="../assets/banner00001.jpeg" alt="">
-        <h1 class="text-3xl font-bold mb-[10px]">让技术服务于人类健康</h1>
+      <div class="absolute top-[50px] right-[20px]">
-        <h1 class="text-xl ">三优云试剂管家致力于通过数字化技术提高药物研发与生产效率</h1>
+        <h1 class="text-xl font-bold mb-[10px] text-right text-white">让技术服务于人类健康</h1>
+        <h1 class="font-sm text-right text-white">三优云试剂管家致力于通过</h1>
+        <h1 class="font-sm text-right text-white">数字化技术提高药物研发与生产效率</h1>
       </div>
     </div>
-    <div class="w-full py-[100px]">
+    <div class="w-full bg-custom-blue py-[30px] px-[20px]">
-      <h1 class="text-5xl font-bold mb-[44px] text-center text-white">联系我们</h1>
+      <h1 class="text-xl font-bold mb-[24px] text-center text-color">联系我们</h1>
-      <div class="flex  gap-[50px] max-w-screen-xl mx-auto items-center">
+      <div class="flex max-w-screen-xl mx-auto items-center relative">
-        <img class="w-[500px]" src="../assets/location.png" alt="">
+        <img class="location-img" src="../assets/location.png" alt="">
-        <div class="flex-1 text-white">
+        <div class="flex-1 text-color">
           <div class="mb-[20px] text-spec-color">
             我们的愿景，是让技术真正服务于人类健康。我们的经营理念，是通过我们的数字化产品，切实解决科研工作者的业务问题，一切行为的导向，均指向各科研场景下问题的解决方案。
           </div>
@@ -49,6 +52,26 @@ import Contact from '../components/Contact.vue'
 </script>
 <style scoped>
 .text-spec-color {
-  color: #A7B5B8;
+  color: #333333;
+}
+.color-blue {
+  color: rgba(0, 229, 255, 1);
+}
+.text-color {
+  color: #000;
+}
+.bg-custom-blue {
+  background: linear-gradient(180deg, rgba(177, 228, 255, 0), rgba(171, 222, 250, 0.5) 0% 100%);
+
+}
+.font-sm {
+  font-size: 13px;
+}
+.location-img {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100px;
+  height: 100px;
 }
 </style>

vite.config.js

@@ -1,7 +1,15 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite';
+import { VantResolver } from 'unplugin-vue-components/resolvers';
+
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    Components({
+      resolvers: [VantResolver()],
+    }),
+  ],
 })