feat: 基础架设

src/components/layout/layout.vue

@@ -7,7 +7,7 @@
         :key="i.name"
         :class="`menu ${active === i.name ? 'activeMenu' : ''}`"
         :name="i.name"
-        icon="home-o"
+        :icon="i.icon"
         ><RouterLink :to="i.link">{{ i.label }}</RouterLink></TabbarItem
       >
     </Tabbar>
@@ -20,27 +20,35 @@ import { getMenu } from '@/utils'
 import { ref, watchEffect } from 'vue'
 import type { Menu } from '@/types'
 import { RouterView } from 'vue-router'
+import My from '@/assets/svg/my.svg'
+import Order from '@/assets/svg/order.svg'
+import Marking from '@/assets/svg/marking.svg'
+import Home from '@/assets/svg/home.svg'
 
 const menus = [
   {
     name: 'workbench',
     link: '/workbench',
-    label: '工作台'
+    label: '工作台',
+    icon: 'wap-home'
   },
   {
     name: 'activitys',
     link: '/activitys',
-    label: '活动'
+    label: '活动',
+    icon: 'fire'
   },
   {
     name: 'orders',
     link: '/orders',
-    label: '订单'
+    label: '订单',
+    icon: 'balance-list'
   },
   {
     name: 'my',
     link: '/my',
-    label: '我的'
+    label: '我的',
+    icon: 'contact'
   }
 ]
 
@@ -53,21 +61,17 @@ watchEffect(() => {
 
 <style scoped lang="scss">
 .body {
-  padding-bottom: 300wx;
+  padding-bottom: 50px;
   height: 100vh;
   overflow: hidden auto;
-  /* -ms-overflow-style: none; 
-  scrollbar-width: none; */
-  /* &::-webkit-scrollbar {
-  display: none;
-} */
 }
 .menu {
   a {
     color: #111;
   }
 }
 .menu.activeMenu {
+  @apply text-primary;
   a {
     @apply text-primary;
   }

src/pages/workbench/index.module.scss

@@ -1,39 +1,39 @@
 .wrapper {
-  font-size: 75wx;
-  height: 100%;
+  font-size: 12px;
   background: linear-gradient($mainColor 30%, white 30%);
   color: $fontColor;
-  padding: 200wx 150wx;
+  padding: 40px 20px;
   background-attachment: fixed;
 
   .header {
     width: 100%;
-    min-height: 2200wx;
+    min-height: 400px;
     background: #fff;
-    border-radius: 50wx;
-    padding: 160wx;
-    font-size: 60wx;
+    border-radius: 10px;
+    padding: 16px;
+    font-size: 12px;
 
     .title {
-      font-size: 100wx;
+      font-size: 20px;
+      padding-top: 10px;
       font-weight: bold;
       text-align: center;
     }
 
-    .hdBtn{
-        width: 600wx;
-        height: 160wx;
-        background-color: $mainColor;
-        color: #fff;
-        border-radius: 30wx;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
+    .hdBtn {
+      // width: 60px;
+      height: 32px;
+      background-color: $mainColor;
+      color: #fff;
+      border-radius: 4px;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
     }
 
     :global {
       .van-swipe {
-        height: 1200wx;
+        height: 220px;
         img {
           width: 100%;
         }
@@ -42,4 +42,22 @@
 
     @apply shadow-lg;
   }
+  .package{
+    height: 120px;
+    border-radius: 10px;
+    margin-top: 20px;
+    background: #fff;
+    display: flex;
+    padding: 10px;
+    @apply shadow-md;
+
+    .projectInfo{
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+    img{
+      border-radius: 4px;
+    }
+  }
 }

src/pages/workbench/index.tsx

@@ -9,6 +9,7 @@ const Workbench = defineComponent({
       'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
       'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'
     ]
+    const packages = Array.from({ length: 20 })
     return () => {
       return (
         <div class={styles.wrapper}>
@@ -21,7 +22,7 @@ const Workbench = defineComponent({
               ))}
             </Swipe>
             <div class={`text-primary ${styles.title}`}>转角养身馆</div>
-            <div class="py-[40wx]">
+            <div class="py-[10px]">
               尊敬的贵宾朋友们，开车出去时，请在前台扫停车二维码。二维码停车三小时免费。本店营业时间10:00到23:00
             </div>
             <div class="flex justify-between">
@@ -39,6 +40,19 @@ const Workbench = defineComponent({
               </Button>
             </div>
           </div>
+          {packages?.map((item, index) => (
+            <div key={index} class={styles.package}>
+              <img
+                class="h-[100%] mr-[10px]"
+                src="https://img1.baidu.com/it/u=3049171015,3419083782&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710522000&t=d01e40034cbd2d48adbaf049e68a583c"
+              />
+              <div class={styles.projectInfo}>
+                <div class="text-primary text-[14px]">中式推拿-{index + 1}</div>
+                <div class="text-[12px]">通经活血</div>
+                <div class=" text-red-500">¥ 110元/60分钟</div>
+              </div>
+            </div>
+          ))}
         </div>
       )
     }

src/style.css

@@ -15,33 +15,21 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* @media screen and (width <=420px) {
+@media screen and (width <=420px) {
   html {
-    font-size: calc(100vw / 23.4375);
+    font-size: calc(100vw / 9.375) !important;
   }
 }
 
 @media screen and (width >=420px) {
   html {
-    font-size: calc(18px + 4 * (100vw - 420px) / 580);
+    font-size: calc(100vw / 9.375) !important;
   }
 }
 
 @media screen and (width >=1000px) {
   html {
-    font-size: calc(22px + 5 * (100vw - 1000px) / 1000);
-  }
-}
-
-@media screen and (aspect-ratio <=1920 / 969) {
-  html.pc-app {
-    font-size: calc(100vw / 60);
-  }
-} */
-
-@media screen and (height <=545px) {
-  html.pc-app {
-    font-size: 18px;
+    font-size: calc(100vw / 9.375) !important;
   }
 }
 

vite.config.ts

@@ -50,11 +50,10 @@ export default defineConfig(
         postcss: {
           plugins: [
             postCssPxToRem({
-              rootValue: 75,
+              rootValue: 37.5,
               propList: ['*'],
               selectorBlackList: ['./to', 'html'], // to开头的不进行转换,
-              exclude: '/node_modules',
-              unit: 'wx',
+              unit: 'px',
             }),
             tailwindCss()
           ]