hz/ebiz-sunful-eco-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(home): 优化首页地图组件和布局

Browse Source 
- 新增多个地图组件，丰富页面内容
-优化导航栏样式，使用 header标签
- 设置页面标题为"幸福人寿"
- 调整首页布局，增加 main 标签
- 优化地图组件样式和动画效果
This commit is contained in:
陈昱达
2025-07-04 11:50:14 +08:00
parent 3c66c34e9e
commit 501228b877
14 changed files with 431 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@@ -10,6 +10,7 @@
<meta name="ccbpi" content="ebiz" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<link rel="stylesheet" href="css/pdfh5.css" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
@@ -20,5 +21,4 @@
</body>
</html>
<script>
</script>
<script></script>

0
src/assets/images/home/走路挥手@2x.png → src/assets/images/home/lu.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 471 KiB

After

Width:  |  Height:  |  Size: 471 KiB

BIN
src/assets/images/home/map-1-t1-ban.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/images/home/map-1-t1-road.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
src/assets/images/home/map-2-t1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

0
src/assets/images/home/臻享健康@2x.png → src/assets/images/home/map-3-t1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 430 KiB

After

Width:  |  Height:  |  Size: 430 KiB

0
src/assets/images/home/成长护航@2x.png → src/assets/images/home/map-5-t1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 425 KiB

After

Width:  |  Height:  |  Size: 425 KiB

0
src/assets/images/home/平板@2x.png → src/assets/images/home/map-6-t1-ban.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 685 KiB

After

Width:  |  Height:  |  Size: 685 KiB

BIN
src/assets/images/home/乐活人生@2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 587 KiB

4
src/generatedComponents/navbar.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="flex align-items-c justify-content-b p13 bg-white">
<header 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>
</header>
</template>
<style scoped lang="scss">
.logo {

13
src/router/app/index.js
View File

@@ -14,19 +14,22 @@ export default [
path: '/404',
component: notFound,
meta: {
title: '404'
}
title: '404',
},
},
{
path: '*',
redirect: '/404'
redirect: '/404',
},
{
path: '/',
redirect: '/home'
redirect: '/home',
},
{
path: '/home',
component: home,
}
meta: {
title: '幸福人寿',
},
},
]

21
src/views/app/Home.vue
View File

@@ -5,8 +5,8 @@ http://www.ebiz-interactive.com/
<template>
<div class="container home-xfrs">
<navbar></navbar>
<div class="home-container">
<navbar style="position: sticky; top: 0; z-index: 10"></navbar>
<main class="home-container">
<div class="home-logo" @click="openFlag = !openFlag">
<img src="../../assets/images/home/homeLogo.png" alt="" />
</div>
@@ -16,7 +16,7 @@ http://www.ebiz-interactive.com/
</div>
<!-- 气球-->
<div class="animate-boll"></div>
</div>
</main>
</div>
</template>
@@ -39,6 +39,9 @@ export default {
</script>
<style lang="scss" scoped>
.home-xfrs * {
transition: all 0.5s ease-in-out;
}
.home-xfrs {
display: flex;
flex-direction: column;
@@ -46,6 +49,7 @@ export default {
.home-container {
background: url('../../assets/images/home/homeBack.png') no-repeat 100% 100% / cover;
flex: 1;
//min-height: 796px;
& .home-logo {
padding-top: 48px;
padding-left: 30px;
@@ -56,8 +60,17 @@ export default {
}
& .animate-map {
position: relative;
& .map-box {
position: absolute;
top: 0;
}
}
& .animateMapMove {
position: relative;
& .map-box {
//top: 20px;
}
}
& .animate-boll {
position: absolute;
}

452
src/views/app/homeComponents/map.vue
View File

@@ -1,75 +1,129 @@
<template>
<div id="map-container" class="container map-container flex" :class="{ moveMap: openFlag }">
<!-- 睿智财富 -->
<div class="map-1 map">
<div class="map-1 map-comp">
<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" />
<img src="../../../assets/images/home/map-1-t1-ban.png" alt="" class="map-1-t1-ban map-ban" :class="{ showOpacity: openFlag }" />
<img src="../../../assets/images/home/map-1-t1-road.png" alt="" class="map-1-t1-road map-road" :class="{ showOpacity: openFlag }" />
<div class="cursor" :class="{ showOpacity: openFlag }">
<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 class="map-2 map-comp">
<div class="relative">
<img src="../../../assets/images/home/map-2-t1.png" alt="" class="map-2-t1" />
<img src="" alt="" class="map-2-t1-ban" />
<img src="" alt="" class="map-2-t1-road" />
<div class="cursor" :class="{ showOpacity: openFlag }">
<div class="cursor-title">乐活人生</div>
<div class="cursor-pointer"></div>
</div>
</div>
</div>
<div class="map-3 map-comp">
<div class="relative">
<img src="../../../assets/images/home/map-3-t1.png" alt="" class="map-3-t1" />
<img src="" alt="" class="map-3-t1-ban" />
<img src="" alt="" class="map-3-t1-road" />
<div class="cursor" :class="{ showOpacity: openFlag }">
<div class="cursor-title">养老生活</div>
<div class="cursor-pointer"></div>
</div>
</div>
</div>
<div class="map-4 map-comp">
<div class="relative">
<img src="" alt="" class="map-4-t1" />
<img src="" alt="" class="map-4-t1-ban" />
<img src="" alt="" class="map-4-t1-road" />
<div class="cursor" :class="{ showOpacity: openFlag }">
<div class="cursor-title">臻享健康</div>
<div class="cursor-pointer"></div>
</div>
</div>
</div>
<div class="map-5 map-comp">
<div class="relative">
<img src="../../../assets/images/home/map-5-t1.png" alt="" class="map-5-t1" />
<img src="" alt="" class="map-5-t1-ban" />
<img src="" alt="" class="map-5-t1-road" />
<div class="cursor" :class="{ showOpacity: openFlag }">
<div class="cursor-title">成长护航</div>
<div class="cursor-pointer"></div>
</div>
</div>
</div>
<div class="map-6 map-comp">
<div class="relative">
<img src="../../../assets/images/home/map-6-t1-ban.png" alt="" class="map-6-t1-ban" />
</div>
</div>
<div class="map-7 map-comp">
<div class="relative">
<img src="../../../assets/images/home/lu.png" alt="" class="map-7-t1" />
<!-- <img src="../../../assets/images/home/lu.png" alt="" class="map-7-t1-ban" />-->
</div>
</div>
<div class="ma-tab flex justify-content-c">
<div class="tab">
<van-tabs v-model="active" :ellipsis="false">
<van-tab title="标签 1" v-for="item in list">
<template #title>
<div class="tab-title">{{ item.title }}</div>
</template>
<div class="tab-content">{{ item.content }}</div>
</van-tab>
</van-tabs>
</div>
</div>
</div>
</template>
<script>
import { Tab, Tabs } from 'vant'
export default {
name: 'map',
name: 'map-comp',
props: {
openFlag: {
type: Boolean,
default: false,
},
},
components: {
[Tab.name]: Tab,
[Tabs.name]: Tabs,
},
data() {
return {}
return {
active: 0,
list: [
{
title: '生态服务',
content: '生态服务',
},
{
title: '关于幸福',
content: '关于幸福',
},
{
title: '荣誉资质',
content: '荣誉资质',
},
{
title: '发展历程',
content: '发展历程',
},
{
title: '联系我们',
content: '联系我们',
},
],
}
},
methods: {},
mounted() {
@@ -79,6 +133,7 @@ export default {
cursor.addEventListener('click', () => {
// 移除所有 .map 的 active 类
document.querySelectorAll('.cursor').forEach((map) => {
console.log(map)
map.classList.remove('active')
})
@@ -107,8 +162,9 @@ export default {
display: flex;
flex-direction: column;
align-items: center;
left: 0;
top: 0;
left: 30px;
top: -20px;
z-index: 3;
//width: 150px;
& .cursor-pointer {
background: url('../../../assets/images/home/pointer.png') no-repeat 100% 100% / contain;
@@ -118,9 +174,9 @@ export default {
}
& .cursor-title {
color: red;
font-size: 19px;
font-size: 16px;
font-weight: 800;
padding: 5px 10px;
padding: 3px 15px;
background: #fff;
border: 2px solid red;
border-radius: 8px;
@@ -129,37 +185,305 @@ export default {
&.active {
& .cursor-title {
color: white;
font-size: 20px;
font-weight: 700;
font-weight: 800;
background: red;
//外发光
box-shadow: 0 0 4px 5px #fff;
box-shadow: 0 0 4px 3px #fff;
}
& .cursor-pointer {
background: url('../../../assets/images/home/pointer2.png') no-repeat 100% 100% / contain;
//width: 71px;
//height: 46px;
//background: url('../../../assets/images/home/pointer2.png') no-repeat 100% 100% / contain;
}
}
}
#map-container * {
transition: all 0.3s ease-in-out;
transition: all 0.7s ease-in-out;
}
#map-container {
position: relative;
& .map {
height: calc(796px - 48px - 67px);
width: 100vw;
overflow-x: hidden;
& .map-comp {
position: absolute;
& .map-ban,
& .map-road {
opacity: 0;
}
&.map-1 {
width: 142px;
height: 120px;
right: 0;
top: 0;
& .relative {
& .map-1-t1 {
width: 142px;
height: 120px;
// 旋转
//transform: rotate(-10deg);
position: absolute;
z-index: 1;
}
& .map-1-t1-ban {
position: absolute;
top: -30px;
left: -30px;
z-index: 0;
}
& .map-1-t1-road {
position: absolute;
width: 121px;
height: 55px;
left: 0;
bottom: 0;
}
}
}
&.map-2 {
width: 249px;
height: 183px;
right: 0;
top: 49px;
& .relative {
& .map-2-t1 {
width: 249px;
height: 183px;
position: absolute;
z-index: 1;
}
& .map-2-t1-ban {
position: absolute;
top: -30px;
left: -30px;
z-index: 0;
}
& .map-2-t1-road {
position: absolute;
width: 121px;
height: 55px;
left: 0;
bottom: 0;
}
& .cursor {
left: 60px;
top: -10px;
}
}
}
&.map-3 {
width: 197px;
height: 110px;
left: 44px;
top: 88px;
& .relative {
& .map-3-t1 {
width: 197px;
height: 110px;
position: absolute;
z-index: 1;
// 旋转90
}
& .map-2-t1-ban {
position: absolute;
top: -30px;
left: -30px;
z-index: 0;
}
& .map-2-t1-road {
position: absolute;
width: 121px;
height: 55px;
left: 0;
bottom: 0;
}
& .cursor {
left: 60px;
top: -10px;
}
}
}
&.map-4 {
width: 194px;
height: 128px;
right: 51px;
top: 116px;
& .relative {
& .map-4-t1 {
width: 194px;
height: 128px;
position: absolute;
z-index: 1;
// 旋转90
transform: rotateX(50deg);
//transform: rotateY(20deg);
transform-origin: 0 0;
}
& .map-4-t1-ban {
position: absolute;
top: -30px;
left: -30px;
z-index: 0;
}
& .map-4-t1-road {
position: absolute;
width: 121px;
height: 55px;
left: 0;
bottom: 0;
}
& .cursor {
left: 60px;
top: -10px;
}
}
}
&.map-5 {
width: 212px;
height: 167px;
left: 0;
top: 116px;
& .relative {
& .map-5-t1 {
width: 212px;
height: 167px;
position: absolute;
z-index: 1;
}
& .map-5-t1-ban {
position: absolute;
top: -30px;
left: -30px;
z-index: 0;
}
& .map-5-t1-road {
position: absolute;
width: 121px;
height: 55px;
left: 0;
bottom: 0;
}
& .cursor {
left: 60px;
top: -10px;
}
}
}
&.map-6 {
width: 414px;
height: 308px;
top: 27px;
& .relative {
& .map-6-t1-ban {
width: 414px;
height: 308px;
}
}
}
&.map-7 {
width: 135px;
height: 211px;
z-index: 4;
top: 181px;
right: 10px;
& .relative {
& .map-7-t1 {
width: 135px;
height: 184px;
}
& .map-7-t1-ban {
width: 135px;
height: 184px;
}
}
}
}
& .ma-tab {
position: absolute;
top: 390px;
z-index: 5;
width: 100%;
& .tab {
width: 350px;
border-radius: 12px 12px 0 0;
font-size: 10px;
background: #fff;
overflow: hidden;
//& .
::v-deep .van-tabs--line {
.van-tabs__wrap {
overflow: unset;
}
.van-tabs__nav--complete {
padding-left: 0;
padding-right: 0;
}
}
::v-deep .van-tabs {
* {
transition: unset !important;
}
.van-tabs__content {
padding: 15px 10px;
}
.van-tabs__line {
width: 0;
height: 0;
}
.van-tab {
transition: unset !important;
background: #fff;
font-weight: 700;
font-size: 16px;
padding: 0 20px;
}
.van-tab--active {
transition: unset !important;
background: red;
color: #fff;
border-radius: 12px 12px 0 0;
position: relative;
&:after {
position: absolute;
content: '';
// 倒三角
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid red !important;
right: 0;
bottom: 2px;
z-index: 1;
// 剧中
transform: translate(50%, 100%);
left: 50%;
margin-left: -20px;
transition: all 0.3s;
}
}
}
}
}
&.moveMap {
& .map-comp {
&.map-1 {
top: 20px;
}
&.map-2 {
top: 100px;
}
&.map-3 {
top: 170px;
}
&.map-4 {
top: 273px;
}
&.map-5 {
top: 284px;
}
&.map-7 {
top: 324px;
}
}
}

23
vue.config.js
View File

@@ -10,7 +10,7 @@ module.exports = {
outputDir: 'dist', //打包输出目录
productionSourceMap: false,
devServer: {
https: false
https: false,
},
css: {
sourceMap: true, // 查看css属于哪个css文件
@@ -22,15 +22,20 @@ module.exports = {
viewportWidth: 375,
// 该项仅在使用 Circle 组件时需要
// 原因参见 https://github.com/youzan/vant/issues/1948
selectorBlackList: ['van-circle__layer']
})
]
}
}
selectorBlackList: ['van-circle__layer'],
}),
],
},
},
},
chainWebpack: (config) => {
// 移除 prefetch 插件
config.resolve.alias.set('@utils', resolve('./src/assets/js/utils'))
// 设置 HTML 标题
config.plugin('html').tap((args) => {
args[0].title = '幸福人寿'
return args
})
// config.plugins.delete('prefetch')
/* 配置svg图标自动加载 begin */
@@ -43,7 +48,7 @@ module.exports = {
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
symbolId: 'icon-[name]',
})
//设置路径别名
},
@@ -58,7 +63,7 @@ module.exports = {
//只给出 js 文件的性能提示
assetFilter: function (assetFilename) {
return assetFilename.endsWith('.js')
}
},
})
}
},
}