feat(app): 新增首页地图动画组件并调整页面布局

- 添加 navbar 组件和 map 组件到首页
- 调整首页样式，增加 logo 和背景图片- 添加气球动画元素
- 调整 App.vue 样式，设置最小高度为 100vh
- 更新 .env

.env

@@ -4,3 +4,4 @@ NODE_ENV = 'dev' // 如果是生产环境，请记得切换为production
 # flag
 VUE_APP_FLAG='dev'
 VUE_APP_ADMIN='http://192.168.1.1:7006/'
+VUE_APP_IMAGE='http://192.168.1.1:7006/'

src/App.vue

@@ -38,6 +38,7 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
   font-size: 14px;
+  min-height: 100vh;
 }
 .slide-left-leave-active,
 .slide-left-enter-active,

src/generatedComponents/navbar.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="flex align-items-c justify-content-b p13 bg-white">
+    <img src="../assets/images/home/logo.png" alt="" class="logo" />
+    <div class="flex align-items-c">
+      <img src="../assets/images/home/search.png" alt="" class="navbar-icon" />
+      <img src="../assets/images/home/more.png" alt="" class="navbar-icon" />
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.logo {
+  width: 106px;
+  height: 34px;
+}
+.ph13 {
+  padding-left: 13px;
+  padding-right: 13px;
+}
+.p13 {
+  padding: 13px;
+}
+
+.navbar-icon {
+  width: 18px;
+  height: 18px;
+}
+.navbar-icon + .navbar-icon {
+  margin-left: 25px;
+}
+</style>

src/views/app/FunctionList.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="function-van-cellst-container">
-    <van-cell-group class="fs14 p20">
-      <van-cell class="fs18 mb10">基础功能清单：</van-cell>
-      <van-cell>
-        1、api、router、store等模块划分
-      </van-cell>
-      <van-cell>
-        2、mock方案：rap2，登录、我的信息接口mock
-      </van-cell>
-      <van-cell>
-        3、权限控制、路由拦截器、http拦截器
-      </van-cell>
-      <van-cell>
-        4、表单验证
-      </van-cell>
-      <van-cell>
-        5、常用sass
-      </van-cell>
-      <van-cell>
-        6、路由页面切换动画
-      </van-cell>
-      <van-cell>
-        7、多环境打包配置
-      </van-cell>
-      <van-cell>
-        8、esvan-cellnt + prettier
-      </van-cell>
-      <van-cell>9、移动端适配方案，vw</van-cell>
-      <van-cell>10、主题定制</van-cell>
-      <van-cell>
-        11、过滤器注册、移动端300ms延时、调试工具eruda
-      </van-cell>
-    </van-cell-group>
-    <van-tabbar v-model="active">
-      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
-      <van-tabbar-item icon="setting-o" @click="$toast('暂未开发……')">我的</van-tabbar-item>
-    </van-tabbar>
-  </div>
-</template>
-
-<script>
-import { Tabbar, TabbarItem,Cell,CellGroup } from 'vant'
-export default {
-  name: 'functionvan-cellst',
-  components: {
-    [Tabbar.name]: Tabbar,
-    [TabbarItem.name]: TabbarItem,
-    [Cell.name]: Cell,
-    [CellGroup.name]: CellGroup
-  },
-  data() {
-    return {
-      active: 0
-    }
-  }
-}
-</script>
-<style lang="scss" scoped></style>

src/views/app/Home.vue

@@ -4,37 +4,63 @@ http://www.ebiz-interactive.com/
 -->
 
 <template>
-  <div class="container">
-
-    <functionList></functionList>
+  <div class="container home-xfrs">
+    <navbar></navbar>
+    <div class="home-container">
+      <div class="home-logo">
+        <img src="../../assets/images/home/homeLogo.png" alt="" />
+      </div>
+      <!--地图动画 楼-->
+      <div class="animate-map">
+        <MapComp></MapComp>
+      </div>
+      <!--    气球-->
+      <div class="animate-boll"></div>
+    </div>
   </div>
 </template>
 
 <script>
-import functionList from '@/views/app/FunctionList.vue'
+import Navbar from '@/generatedComponents/navbar.vue'
+import MapComp from '@/views/app/homeComponents/map.vue'
+
 export default {
   components: {
-    functionList
+    MapComp,
+    Navbar,
   },
   props: {},
   data() {
     return {
       formData: {},
-      mtab37656ActiveTab: 'tab1',
-      mtab49216ActiveTab: 'tab1'
     }
   },
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {},
-  methods: {
-    // H5提交函数
-    submitForm() {}
-  }
 }
 </script>
 
-<style lang="scss"></style>
+<style lang="scss" scoped>
+.home-xfrs {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  .home-container {
+    background: url('../../assets/images/home/homeBack.png') no-repeat 100% 100% / cover;
+    flex: 1;
+    & .home-logo {
+      padding-top: 48px;
+      padding-left: 30px;
+      img {
+        width: 205px;
+        height: 67px;
+      }
+    }
+    & .animate-map {
+      position: relative;
+    }
 
-<style lang="scss" scoped></style>
+    & .animate-boll {
+      position: absolute;
+    }
+  }
+}
+</style>

src/views/app/homeComponents/map.vue

@@ -0,0 +1,157 @@
+<template>
+  <div id="map-container" class="container map-container flex">
+    <!--   睿智财富 -->
+    <div class="map-1 map">
+      <div class="relative">
+        <img src="../../../assets/images/home/map-1-t1.png" alt="" class="map-1-t1" />
+        <img src="" alt="" class="map-1-t1-ban" />
+        <img src="" alt="" class="map-1-t1-road" />
+        <div class="cursor">
+          <div class="cursor-title">睿智财富</div>
+          <div class="cursor-pointer"></div>
+        </div>
+      </div>
+    </div>
+    <!--    <div class="map-2 map">-->
+    <!--      <div class="relative">-->
+    <!--        <img src="" alt="" class="map-1-t1" />-->
+    <!--        <img src="" alt="" class="map-1-t1-ban" />-->
+    <!--        <img src="" alt="" class="map-1-t1-road" />-->
+    <!--        <div class="cursor">-->
+    <!--          <div class="cursor-title">乐活人生</div>-->
+    <!--          <div class="cursor-pointer"></div>-->
+    <!--        </div>-->
+    <!--      </div>-->
+    <!--    </div>-->
+    <!--    <div class="map-3 map">-->
+    <!--      <div class="relative">-->
+    <!--        <img src="" alt="" class="map-1-t1" />-->
+    <!--        <img src="" alt="" class="map-1-t1-ban" />-->
+    <!--        <img src="" alt="" class="map-1-t1-road" />-->
+    <!--        <div class="cursor">-->
+    <!--          <div class="cursor-title">养老生活</div>-->
+    <!--          <div class="cursor-pointer"></div>-->
+    <!--        </div>-->
+    <!--      </div>-->
+    <!--    </div>-->
+    <!--    <div class="map-4 map">-->
+    <!--      <div class="relative">-->
+    <!--        <img src="" alt="" class="map-1-t1" />-->
+    <!--        <img src="" alt="" class="map-1-t1-ban" />-->
+    <!--        <img src="" alt="" class="map-1-t1-road" />-->
+    <!--        <div class="cursor">-->
+    <!--          <div class="cursor-title">臻享健康</div>-->
+    <!--          <div class="cursor-pointer"></div>-->
+    <!--        </div>-->
+    <!--      </div>-->
+    <!--    </div>-->
+    <!--    <div class="map-5 map">-->
+    <!--      <div class="relative">-->
+    <!--        <img src="" alt="" class="map-1-t1" />-->
+    <!--        <img src="" alt="" class="map-1-t1-ban" />-->
+    <!--        <img src="" alt="" class="map-1-t1-road" />-->
+    <!--        <div class="cursor">-->
+    <!--          <div class="cursor-title">成长护航</div>-->
+    <!--          <div class="cursor-pointer"></div>-->
+    <!--        </div>-->
+    <!--      </div>-->
+    <!--    </div>-->
+    <div class="map-6"></div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'map',
+  data() {
+    return {}
+  },
+  methods: {},
+  mounted() {
+    const cursors = document.querySelectorAll('.cursor')
+
+    cursors.forEach((cursor) => {
+      cursor.addEventListener('click', () => {
+        // 移除所有 .map 的 active 类
+        document.querySelectorAll('.cursor').forEach((map) => {
+          map.classList.remove('active')
+        })
+
+        // 给当前点击的 .cursor 所在的 .map 添加 active 类
+        const currentMap = cursor.closest('.cursor')
+        if (currentMap) {
+          currentMap.classList.add('active')
+        }
+      })
+    })
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.relative {
+  position: relative;
+}
+
+.cursor {
+  position: absolute;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  //width: 150px;
+  & .cursor-pointer {
+    background: url('../../../assets/images/home/pointer.png') no-repeat 100% 100% / contain;
+    width: 36px;
+    height: 46px;
+    margin-top: 10px;
+  }
+  & .cursor-title {
+    color: red;
+    font-size: 19px;
+    font-weight: 800;
+    padding: 5px 10px;
+    background: #fff;
+    border: 2px solid red;
+    border-radius: 8px;
+  }
+
+  &.active {
+    & .cursor-title {
+      color: white;
+      font-size: 20px;
+      font-weight: 700;
+      background: red;
+      //外发光
+      box-shadow: 0 0 4px 5px #fff;
+    }
+    & .cursor-pointer {
+      background: url('../../../assets/images/home/pointer2.png') no-repeat 100% 100% / contain;
+      //width: 71px;
+      //height: 46px;
+    }
+  }
+}
+
+#map-container * {
+  transition: all 0.3s ease-in-out;
+}
+#map-container {
+  position: relative;
+  & .map {
+    position: absolute;
+    &.map-1 {
+      width: 142px;
+      height: 120px;
+      & .relative {
+        & .map-1-t1 {
+          width: 142px;
+          height: 120px;
+          //  旋转
+          //transform: rotate(-10deg);
+        }
+      }
+    }
+  }
+}
+</style>
+<script setup></script>

vue.config.js

@@ -5,7 +5,7 @@ function resolve(dir) {
   return path.join(__dirname, dir)
 }
 module.exports = {
-  publicPath: '/saleH5',
+  publicPath: '/h5',
   lintOnSave: false, //是否开启代码检查
   outputDir: 'dist', //打包输出目录
   productionSourceMap: false,