Merge branch 'dev' of company:project-shenyangk11/sy_k11_H_base_daoshi_vue_ts into dev

src/assets/scss/mixin.scss

@@ -32,3 +32,16 @@
   font-family: 'font_bold';
   font-weight: 700;
 }
+
+@mixin fl($j: flex-start, $a: center) {
+  display: flex;
+  justify-content: $j;
+  align-items: $a;
+}
+
+@mixin ab($t: 0, $l: 0, $z: 1) {
+  position: absolute;
+  top: $t;
+  left: $l;
+  z-index: $z;
+}

src/components/Menu/Menu.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="menu-container">
+    <div v-for="(item, index) in list" :key="item.title" class="menu-item" @click="changeMenu(item, index)">
+      <div class="top">
+        <img :src="current === index ? item.iconS : item.icon" alt="" />
+        <div v-if="current === index" class="ac"></div>
+      </div>
+      <div class="text">{{ switchLanguage(item, 'title') }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+type MenuItem = {
+  title: string
+  titleEn: string
+  icon: string
+  iconS: string
+  path: string
+}
+const list: MenuItem[] = [
+  {
+    title: '主页',
+    titleEn: 'Home',
+    icon: require('@/assets/images/menu/home.png'),
+    iconS: require('@/assets/images/menu/homes.png'),
+    path: '/'
+  },
+  {
+    title: '店铺导航',
+    titleEn: 'Brand',
+    icon: require('@/assets/images/menu/brand.png'),
+    iconS: require('@/assets/images/menu/brands.png'),
+    path: '/brand'
+  },
+  {
+    title: '优惠与活动',
+    titleEn: 'Activity',
+    icon: require('@/assets/images/menu/activity.png'),
+    iconS: require('@/assets/images/menu/activitys.png'),
+    path: '/activity'
+  },
+  {
+    title: '会员专享',
+    titleEn: 'Member',
+    icon: require('@/assets/images/menu/member.png'),
+    iconS: require('@/assets/images/menu/members.png'),
+    path: '/member'
+  },
+  {
+    title: '服务',
+    titleEn: 'Service',
+    icon: require('@/assets/images/menu/service.png'),
+    iconS: require('@/assets/images/menu/services.png'),
+    path: '/service'
+  },
+  {
+    title: '停车与缴费',
+    titleEn: 'Parking',
+    icon: require('@/assets/images/menu/parking.png'),
+    iconS: require('@/assets/images/menu/parkings.png'),
+    path: '/parking'
+  },
+  {
+    title: '文化学院',
+    titleEn: 'School',
+    icon: require('@/assets/images/menu/school.png'),
+    iconS: require('@/assets/images/menu/schools.png'),
+    path: '/school'
+  },
+  {
+    title: '艺术',
+    titleEn: 'Art',
+    icon: require('@/assets/images/menu/art.png'),
+    iconS: require('@/assets/images/menu/arts.png'),
+    path: '/art'
+  }
+]
+const router = useRouter()
+const current = ref(0)
+
+function changeMenu(item: MenuItem, index: number) {
+  current.value = index
+  router.push(item.path)
+}
+</script>
+
+<style lang="scss" scoped>
+.menu-container {
+  @include fl(space-between);
+
+  position: fixed;
+  bottom: 0;
+  left: 291px;
+  width: 1330px;
+  height: 88px;
+  padding: 12px 112px 6px 101px;
+  background: url('@/assets/images/menu/bg.png');
+  .menu-item {
+    @include fl(center);
+
+    position: relative;
+    min-width: 48px;
+    height: 70px;
+    flex-direction: column;
+    .top {
+      position: relative;
+      width: 48px;
+      height: 48px;
+      img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        width: 48px;
+        height: 48px;
+      }
+      .ac {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        width: 48px;
+        height: 48px;
+        background: #a6976f;
+        border-radius: 50%;
+        filter: drop-shadow(0 4px 6px #b6a56b);
+      }
+    }
+    .text {
+      font-size: 14px;
+      font-family: 'font_regular';
+      color: #84754e;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+  }
+}
+</style>

src/components/PublicComponent/PublicComponent.vue

@@ -1,5 +1,6 @@
 <template>
   <Header />
+  <Menu />
   <!-- 地图容器 -->
   <Map v-show="$route.meta.showMap" @handle-go="handleGO" @handle-detail="handleDetail" />
 
@@ -21,6 +22,7 @@ import { useHandleScreen } from '@/composables/useHandleScreen'
 import { useInitMap } from '@/composables/useInitMap'
 import Map from '@/components/Map/Map.vue'
 import Header from '../Header/Header.vue'
+import Menu from '../Menu/Menu.vue'
 const Logout = defineAsyncComponent(() => import('@/base/Logout/Logout.vue'))
 const AutoBackNotification = defineAsyncComponent(() => import('@/base/AutoBackNotification/AutoBackNotification.vue'))
 

src/i18n/lang/en.json

@@ -6,5 +6,6 @@
   "pause": "Pause",
   "play": "Play",
   "speedUp": "Speed up",
-  "stopSpeedUp": "Stop acceleration"
+  "stopSpeedUp": "Stop acceleration",
+  "search_home": "Search"
 }

src/i18n/lang/tw.json

@@ -6,5 +6,6 @@
   "pause": "暫停",
   "play": "播放",
   "speedUp": "加速",
-  "stopSpeedUp": "停止加速"
+  "stopSpeedUp": "停止加速",
+  "search_home": "搜索"
 }

src/i18n/lang/zh.json

@@ -6,5 +6,6 @@
   "pause": "暂停",
   "play": "播放",
   "speedUp": "加速",
-  "stopSpeedUp": "停止加速"
+  "stopSpeedUp": "停止加速",
+  "search_home": "搜索"
 }

src/views/Index/Index.vue

@@ -1,5 +1,9 @@
 <template>
-  <div></div>
+  <Top />
+  <Middle />
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import Middle from './Middle.vue'
+import Top from './Top.vue'
+</script>

src/views/Index/Middle.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="middle-container">
+    <div class="brand"></div>
+    <div class="activity"></div>
+    <div class="art"></div>
+    <div class="school"></div>
+    <div class="service"></div>
+    <div class="member"></div>
+    <div class="parking"></div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+.middle-container {
+  position: fixed;
+  top: 343px;
+  left: 295px;
+  width: 1330px;
+  height: 536px;
+  .brand {
+    @include ab(0, 0, 1);
+
+    width: 270px;
+    height: 536px;
+    background: url('@/assets/images/index/brand.png');
+  }
+  .activity {
+    @include ab(0, 280px, 1);
+
+    width: 520px;
+    height: 263px;
+    background: url('@/assets/images/index/activity.png');
+  }
+  .art {
+    @include ab(0, 810px, 1);
+
+    width: 220px;
+    height: 263px;
+    background: url('@/assets/images/index/art.png');
+  }
+  .school {
+    @include ab(0, 1040px, 1);
+
+    width: 290px;
+    height: 263px;
+    background: url('@/assets/images/index/school.png');
+  }
+  .service {
+    @include ab(273px, 280px, 1);
+
+    width: 255px;
+    height: 263px;
+    background: url('@/assets/images/index/ser.png');
+  }
+  .member {
+    @include ab(273px, 545px, 1);
+
+    width: 255px;
+    height: 263px;
+    background: url('@/assets/images/index/member.png');
+  }
+  .parking {
+    @include ab(273px, 810px, 1);
+
+    width: 520px;
+    height: 263px;
+    background: url('@/assets/images/index/park.png');
+  }
+}
+</style>

src/views/Index/Top.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="top-container">
+    <div class="top-item">
+      <div class="top">
+        <img src="@/assets/images/index/search.png" alt="" />
+      </div>
+      <div class="text">
+        {{ $t('search_home') }}
+      </div>
+    </div>
+    <div v-for="item in fac" :key="item.code" class="top-item">
+      <div class="top">
+        <img v-if="item.abbreviation === 'xsj'" src="@/assets/images/index/toilet.png" alt="" />
+        <img v-if="item.abbreviation === 'tcc'" src="@/assets/images/index/parking.png" alt="" />
+        <img v-if="item.abbreviation === 'fwt'" src="@/assets/images/index/service.png" alt="" />
+      </div>
+      <div class="text">
+        {{ switchLanguage(item, 'name') }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toRefs, computed } from 'vue'
+import { useRootStore } from '@/store/root'
+
+const store = useRootStore()
+const { facilityList } = toRefs(store)
+const fac = computed(() => {
+  return facilityList.value.filter(item => item.abbreviation === 'xsj' || item.abbreviation === 'tcc' || item.abbreviation === 'fwt')
+})
+</script>
+
+<style lang="scss" scoped>
+.top-container {
+  @include fl(space-between);
+
+  position: fixed;
+  top: 159px;
+  left: 572px;
+  .top-item {
+    @include fl(center);
+
+    width: 176px;
+    height: 112px;
+    margin-right: 24px;
+    flex-direction: column;
+    .top {
+      @include fl(center);
+
+      width: 176px;
+      height: 64px;
+      background: url('@/assets/images/index/bg.png');
+      img {
+        width: 48px;
+        height: 48px;
+      }
+    }
+    .text {
+      margin-top: 20px;
+      font-size: 16px;
+      font-family: 'font_regular';
+      color: rgb(0 0 0 / 60%);
+      font-style: normal;
+      font-weight: 400;
+      line-height: 24px;
+    }
+  }
+}
+</style>