feat: 🚀 头部开发

postcss.config.js

@@ -3,7 +3,7 @@ module.exports = {
     autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
     'postcss-px-to-viewport-8-plugin': {
       unitToConvert: 'px', // 要转化的单位
-      viewportWidth: 1080, // UI设计稿的宽度
+      viewportWidth: 1920, // UI设计稿的宽度
       unitPrecision: 6, // 转换后的精度，即小数点位数
       propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
       viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
@@ -14,8 +14,8 @@ module.exports = {
       replace: true, // 是否转换后直接更换属性值
       exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
       landscape: false, // 是否处理横屏情况
-      landscapeUnit: 'vw', // 横屏时使用的单位
-      landscapeWidth: 1920 // 横屏时使用的视口宽度
+      landscapeUnit: 'vw' // 横屏时使用的单位
+      // landscapeWidth: 1080 // 横屏时使用的视口宽度
     }
   }
 }

public/static/offline/JSON/getBackTime.json

@@ -1 +1 @@
-{"code":200,"msg":"操作成功","data":[60,5]}
+{"code":200,"msg":"操作成功","data":[60,60]}

src/App.vue

@@ -10,7 +10,11 @@ import PublicComponent from '@/components/PublicComponent/PublicComponent.vue'
 html,
 body,
 #app {
-  width: 1080px;
-  height: 1920px;
+  width: 1920px;
+  height: 1080px;
+}
+#app {
+  background: url('./assets/images/body_bg.jpg') no-repeat center center;
+  background-size: 1920px 1080px;
 }
 </style>

src/assets/scss/base.scss

@@ -6,7 +6,7 @@ html {
   user-select: none;
   -webkit-tap-highlight-color: transparent;
   touch-action: none;
-  font-family: 'font_light';
+  font-family: 'font_regular';
 }
 
 .zoom-enter-active {
@@ -30,3 +30,24 @@ html {
   transition: transform 0.3s !important;
   transition-timing-function: cubic-bezier(0.75, 0, 0.24, 1);
 }
+
+.weight-bolder {
+  font-weight: 700;
+}
+
+.font-bolder {
+  font-family: 'font_bold'
+}
+.flex {
+  display: flex;
+}
+
+.align-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+
+
+

src/components/Header/Header.vue

@@ -0,0 +1,121 @@
+<template>
+  <header class="header-container">
+    <img src="../../assets/images/header/header_bg_blur.png" class="header-blur common-size" alt="" />
+    <img src="../../assets/images/header/header_bg.png" class="header-bg common-size" alt="" />
+    <div class="header-right">
+      <div class="flex">
+        <p class="current">{{ currentTime }}</p>
+        <div class="year">
+          <div class="date">{{ formatDay(date) }}</div>
+          <div class="week">{{ whichWeek }}</div>
+        </div>
+      </div>
+      <div class="language-items">
+        <div class="language-item" :class="{ active: language === 'zh' }" @click="changeLang('zh')">中</div>
+        <div class="language-item" :class="{ active: language === 'en' }" @click="changeLang('en')">EN</div>
+        <div class="language-item" :class="{ active: language === 'tw' }" @click="changeLang('tw')">繁</div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useRootStore } from '@/store/root'
+import { useTime } from '@/composables/useTime'
+import { useDay } from '@/composables/useDay'
+import { formatDay } from '@/utils/utils'
+
+const store = useRootStore()
+const { language } = storeToRefs(store)
+
+const { currentTime } = useTime()
+const { date, whichWeek } = useDay()
+
+function changeLang(lang: Language) {
+  if (lang === language.value) {
+    return
+  }
+  store.SET_LANGUAGE(lang)
+}
+</script>
+
+<style lang="scss" scoped>
+.header-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 150px;
+  .common-size {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1920px;
+    height: 150px;
+  }
+  .header-blur {
+    top: 30px;
+    z-index: 1;
+    filter: blur(20px);
+  }
+  .header-bg {
+    z-index: 2;
+  }
+
+  .header-right {
+    position: absolute;
+    top: 25px;
+    right: 48px;
+    z-index: 3;
+    display: inline-flex;
+    align-items: flex-end;
+    flex-direction: column;
+    .flex {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 8px;
+    }
+    .current {
+      margin-right: 16px;
+      font-size: 48px;
+      font-family: 'font_bold';
+      color: rgb(0 0 0 / 90%);
+      font-weight: 700;
+      line-height: 56px;
+    }
+    .year {
+      padding-top: 10px;
+      font-size: 14px;
+      font-family: 'font_bold';
+      color: rgb(0 0 0 / 60%);
+      font-weight: 700;
+    }
+    .date {
+      line-height: 22px;
+      padding-bottom: 2px;
+    }
+
+    .language-items {
+      display: inline-flex;
+      justify-content: flex-end;
+      align-items: center;
+      height: 36px;
+      background: #fff;
+      border-radius: 37px;
+    }
+    .language-item {
+      width: 52px;
+      height: 36px;
+      text-align: center;
+      color: rgb(0 0 0 / 60%);
+      border-radius: 42px;
+      line-height: 36px;
+      &.active {
+        color: #fff;
+        background: linear-gradient(180deg, #c4b280 0%, #a89866 100%);
+      }
+    }
+  }
+}
+</style>

src/components/PublicComponent/PublicComponent.vue

@@ -1,7 +1,7 @@
 <template>
-  <div></div>
+  <Header />
   <!-- 地图容器 -->
-  <Map @handle-go="handleGO" @handle-detail="handleDetail" />
+  <Map v-show="$route.meta.showMap" @handle-go="handleGO" @handle-detail="handleDetail" />
 
   <!-- 退出弹框 -->
   <Logout v-model="logout" />
@@ -20,7 +20,7 @@ import { useRouter, useRoute } from 'vue-router'
 import { useHandleScreen } from '@/composables/useHandleScreen'
 import { useInitMap } from '@/composables/useInitMap'
 import Map from '@/components/Map/Map.vue'
-
+import Header from '../Header/Header.vue'
 const Logout = defineAsyncComponent(() => import('@/base/Logout/Logout.vue'))
 const AutoBackNotification = defineAsyncComponent(() => import('@/base/AutoBackNotification/AutoBackNotification.vue'))
 

src/composables/useInitConfigAndMallInfo.ts

@@ -22,7 +22,7 @@ export const useInitConfigAndMallInfo = async () => {
     ])
 
     const { shopList, buildingList } = _shopAndBuilding.data
-    store.SET_CURRENT_FLOOR(_DeviceInfo.data)
+    store.SET_DEVICE(_DeviceInfo.data)
     store.SET_SHOP_LIST(shopList)
     store.SET_BUILDING_LIST(buildingList)
     store.SET_BRAND_INFO(_brandInfo.data)

src/composables/useInitMap.ts

@@ -14,22 +14,22 @@ export const useInitMap = async function () {
     }))
 
     //初始化地图
-    window.MainMap_QM.init(
-      () => {
-        store.SET_MAP_STATUS(true)
-        window.Map_QM.addEventListener('shop', onClickShop, false)
-        window.Map_QM.renderer.domElement.addEventListener('webglcontextlost', onContextLost)
-      },
-      {
-        build: device.value?.buildingOrder ?? 0,
-        floor: device.value.floorOrder,
-        navPoint: device.value.location,
-        angle: device.value.angle,
-        iconUrl: delPrefixOfFacilityList,
-        mapData: data,
-        shopData: shopList.value.slice()
-      }
-    )
+    // window.MainMap_QM.init(
+    //   () => {
+    //     store.SET_MAP_STATUS(true)
+    //     window.Map_QM.addEventListener('shop', onClickShop, false)
+    //     window.Map_QM.renderer.domElement.addEventListener('webglcontextlost', onContextLost)
+    //   },
+    //   {
+    //     build: device.value?.buildingOrder ?? 0,
+    //     floor: device.value.floorOrder,
+    //     navPoint: device.value.location,
+    //     angle: device.value.angle,
+    //     iconUrl: delPrefixOfFacilityList,
+    //     mapData: data,
+    //     shopData: shopList.value.slice()
+    //   }
+    // )
   } catch (error) {
     Message({ text: '获取地图数据失败', type: 'success' })
   }

src/http/api/base/index.ts

@@ -8,7 +8,7 @@ export const getConfig = () => request<Config>({ url: '/static/offline/JSON/conf
 export const getWeather = () => request<Weather>({ url: `/JSON/GetWeather.json` })
 
 //获取设施列表
-export const getFacilitiesList = () => request<Facility[]>({ url: `/JSON/GetFacilitiesList.json` })
+export const getFacilitiesList = () => request<Facility[]>({ url: `/JSON/getFacilityList.json` })
 
 //地图模型数据
 export const getMapData = () => request({ url: `/JSON/getMap.json` })

src/router/routes.ts

@@ -1,14 +1,27 @@
 import type { RouteRecordRaw } from 'vue-router'
 
 export const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    component: () => import(/* webpackChunkName: "index" */ '@/views/Index/Index.vue'),
+    meta: {
+      showMap: false
+    }
+  },
   {
     path: '/guide',
-    component: () => import(/* webpackChunkName: "guide" */ '@/views/Guide/Guide.vue')
+    component: () => import(/* webpackChunkName: "guide" */ '@/views/Guide/Guide.vue'),
+    meta: {
+      showMap: false
+    }
   },
   {
     path: '/nav',
     name: 'Nav',
-    component: () => import(/* webpackChunkName: "nav" */ '@/views/Nav/Nav.vue')
+    component: () => import(/* webpackChunkName: "nav" */ '@/views/Nav/Nav.vue'),
+    meta: {
+      showMap: true
+    }
   },
   {
     path: '/parking',

src/views/Index/Index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>

tsconfig.json

@@ -6,6 +6,7 @@
     "jsx": "preserve",
     "moduleResolution": "node",
     "skipLibCheck": true,
+    "suppressImplicitAnyIndexErrors": true,
     "esModuleInterop": true,
     "allowJs": true,
     "resolveJsonModule": true,
@@ -14,20 +15,11 @@
     "useDefineForClassFields": true,
     "sourceMap": true,
     "baseUrl": "./",
-    "types": [
-      "webpack-env"
-    ],
+    "types": ["webpack-env"],
     "paths": {
-      "@/*": [
-        "src/*"
-      ]
+      "@/*": ["src/*"]
     },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   },
   "include": [
     "src/**/*.ts",