abda23b641
- 在 package.json 中添加 build:prd命令用于生产环境构建 - 新增 .env.prd 文件配置生产环境变量 - 在 vue.config.js 中添加 CompressionPlugin 插件配置，启用 gzip 压缩 - 优化 home.vue 中的空白 p 标签，使用 替代空内容
470 lines
12 KiB
Vue
470 lines
12 KiB
Vue
<script>
|
||
import { Image as VanImage, Icon, Dialog } from 'vant';
|
||
import Swiper from './components/swiper/swiper.vue';
|
||
import { getEcosystem } from '@/assets/js/utils/ecosystem'
|
||
import { fetchUserInfo } from '@/api/user/token'
|
||
import { getParamsFromUrl } from '@/assets/js/utils/get-url'
|
||
|
||
export default {
|
||
name: "home",
|
||
components: {
|
||
VanImage,
|
||
VanIcon: Icon,
|
||
SwiperBanner: Swiper
|
||
},
|
||
data() {
|
||
return {
|
||
bannerList: [
|
||
{
|
||
imgUrl: require("./img/swiper-image.svg")
|
||
},
|
||
{
|
||
imgUrl: require("./img/swiper-image.svg")
|
||
}
|
||
],
|
||
name: "",
|
||
sex: "",
|
||
type: "",
|
||
permission: {
|
||
goNext: true
|
||
},
|
||
titleSrc: require("@/assets/images/logo.png"),
|
||
bannerSrc: "http://ncc.ebiz-digits.com:39527/gsc/IHRHN5/7b/04/63/7b0463aa135f4a1f922b5171bcec1d14/images/主页/u44.svg",
|
||
}
|
||
},
|
||
computed: {
|
||
title() {
|
||
if (!Number(this.type)) return "欢迎使用幸福人寿生态系统！"
|
||
return `亲爱的${this.name}${Number(this.sex) === 1 ? '女士' :
|
||
Number(this.sex) === 0 ? '先生' : ''}`
|
||
}
|
||
},
|
||
methods: {
|
||
goEcosystem(ecosystem, swe) {
|
||
this.permission.goNext && this.$router.push({
|
||
name: 'service',
|
||
params: {
|
||
ecosystem: getEcosystem(ecosystem)
|
||
},
|
||
query: {
|
||
swe: swe
|
||
}
|
||
})
|
||
},
|
||
showErrorDialog(msg) {
|
||
Dialog({
|
||
message: msg,
|
||
}).then(() => {
|
||
this.$router.go(-1)
|
||
})
|
||
}
|
||
},
|
||
mounted() {
|
||
|
||
const params = getParamsFromUrl(globalThis.location.href)
|
||
const token = params.get('token')
|
||
const stoken = globalThis.sessionStorage.getItem('token')
|
||
if (token || stoken) {
|
||
globalThis.sessionStorage.setItem('token', token || stoken)
|
||
fetchUserInfo().then(res => {
|
||
const { content } = res.content
|
||
this.name = content.name
|
||
this.sex = Number(content.sex)
|
||
this.type = Number(content.type)
|
||
}).catch(() => {
|
||
this.showErrorDialog("您的登录已过期，请退出重试")
|
||
})
|
||
}
|
||
else this.showErrorDialog("页面访问有误，请重试")
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<section class="home-container">
|
||
<div class="nav">
|
||
<!-- <img src="../../assets/images/sunful/sunful-bg.svg" alt=""> -->
|
||
<!-- 标题提示语部分 -->
|
||
<section class="title">
|
||
<!-- <img width="78px" :src="titleSrc" /> -->
|
||
<h2> <span>您好~</span>{{ title }}</h2>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<div>
|
||
<!-- 服务提示语部分 -->
|
||
<!-- <section class="tips"> -->
|
||
<!-- 消息提醒图标 -->
|
||
<!-- <img :src="require('@/assets/images/sunful/msg.svg')" /> -->
|
||
<!-- <p>服务项目及费用仅供参考，具体以供应商实际提供为准。</p> -->
|
||
<!-- <button>点击了解</button> -->
|
||
<!-- </section> -->
|
||
|
||
<!-- 服务提示语部分 -->
|
||
<section class="tips">
|
||
<van-icon name="info-o" />
|
||
<div class="text">服务项目及费用仅供参考，具体以供应商实际提供为准。</div>
|
||
</section>
|
||
<!-- banner图 -->
|
||
<img src="@/assets/images/sunful/banner.webp" alt="">
|
||
|
||
<!-- 生态系统部分 -->
|
||
<section class="ecosystem">
|
||
<div>
|
||
<h3>
|
||
<img :src="require('@/assets/images/sunful/sunful-eco.svg')" alt="生态服务">
|
||
<div>生态服务</div>
|
||
</h3>
|
||
<div class="flex">
|
||
<div class="service-item health">
|
||
<h4>健康管理</h4>
|
||
<p> </p>
|
||
<button class="go-btn" @click="goEcosystem(1, true)">去看看</button>
|
||
</div>
|
||
|
||
<div class="flex flex-column">
|
||
<div class="service-item children">
|
||
<h4>子女教育</h4>
|
||
<p> </p>
|
||
<button class="go-btn-v" @click="goEcosystem(38)">去看看</button>
|
||
</div>
|
||
<div class="service-item wealth">
|
||
<h4>财务管理</h4>
|
||
<p> </p>
|
||
<button class="go-btn-v" @click="goEcosystem(48)">去看看</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex service-row">
|
||
<div class="service-item old">
|
||
<div>
|
||
<h4>养老服务</h4>
|
||
<p> </p>
|
||
</div>
|
||
<button class="go-btn" @click="goEcosystem(28)">去看看</button>
|
||
</div>
|
||
<div class="service-item life">
|
||
<div>
|
||
<h4>生活娱乐</h4>
|
||
<p> </p>
|
||
</div>
|
||
<button class="go-btn" @click="goEcosystem(55)">去看看</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
$inset-padding: 17px;
|
||
$bg-color: #f5f5f5;
|
||
|
||
|
||
.home-container {
|
||
position: relative;
|
||
|
||
.nav {
|
||
position: relative;
|
||
z-index: 1; // 最底层
|
||
background-image: url("../../assets/images/sunful/sunful-bg.webp");
|
||
background-size: 100%;
|
||
background-position: center top;
|
||
background-repeat: no-repeat;
|
||
|
||
padding: $inset-padding;
|
||
|
||
h2 {
|
||
margin: 52px 0 60px 7px;
|
||
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 17px;
|
||
color: #FFFFFF;
|
||
line-height: 24px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
background-color: $bg-color;
|
||
position: absolute;
|
||
top: 132px;
|
||
left: 0;
|
||
z-index: 3; // 最顶层
|
||
}
|
||
}
|
||
|
||
.content {
|
||
padding: 0 0 20px 0;
|
||
width: 100vw;
|
||
border-radius: 12px;
|
||
|
||
&>div {
|
||
position: relative;
|
||
top: -19px;
|
||
padding: 0 10px;
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
margin: 0 0 10px 0;
|
||
border-radius: 11px;
|
||
padding: 13px 11px 15px 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #fff;
|
||
|
||
&+img {
|
||
width: 100%;
|
||
}
|
||
|
||
&>img {
|
||
width: 51px;
|
||
height: 14px;
|
||
margin-right: 3px;
|
||
}
|
||
|
||
&>p {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 11px;
|
||
color: #6B6B6B;
|
||
line-height: 16px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
&>button {
|
||
outline: none;
|
||
border: none;
|
||
padding: 6px 9px;
|
||
height: 26px;
|
||
width: 58px;
|
||
border-radius: 6px;
|
||
|
||
background-image: url("../../assets/images/sunful/bt-bg.svg");
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
|
||
overflow-wrap: break-word;
|
||
color: rgba(142, 80, 33, 1);
|
||
font-size: 10px;
|
||
font-family: PingFangSC-Medium;
|
||
font-weight: 500;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 14px;
|
||
}
|
||
|
||
.text {
|
||
margin-left: 3%;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 11px;
|
||
color: #6B6B6B;
|
||
line-height: 16px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.ecosystem {
|
||
margin: 14px 0;
|
||
|
||
h3 {
|
||
display: flex;
|
||
gap: 5px;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
button {
|
||
background-color: #CA2736;
|
||
color: #fff;
|
||
border-radius: 13px;
|
||
border: none;
|
||
padding: 5px 8px;
|
||
margin-bottom: 19px;
|
||
|
||
font-family: PingFangSC;
|
||
font-size: 11px;
|
||
color: #FFFFFF;
|
||
line-height: 16px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
h4 {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
color: #000000;
|
||
line-height: 14px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
p {
|
||
margin-top: 10px;
|
||
margin-bottom: 19px;
|
||
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 11px;
|
||
color: #A1A1A1;
|
||
line-height: 10px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.service-grid {
|
||
display: grid;
|
||
align-items: stretch;
|
||
gap: 10px 5px;
|
||
grid-template-areas:
|
||
"a a a b b b b b"
|
||
"a a a c c c c c"
|
||
"d d d d e e e e";
|
||
|
||
.service-item {
|
||
&:nth-of-type(1) {
|
||
grid-area: a;
|
||
}
|
||
|
||
&:nth-of-type(2) {
|
||
grid-area: b;
|
||
}
|
||
|
||
&:nth-of-type(3) {
|
||
grid-area: c;
|
||
}
|
||
|
||
&:nth-of-type(4) {
|
||
grid-area: d;
|
||
}
|
||
|
||
&:nth-of-type(5) {
|
||
grid-area: e;
|
||
}
|
||
}
|
||
}
|
||
|
||
.health {
|
||
// border-radius: 15px;
|
||
// border-right: 2px solid #fce4e4;
|
||
// // border-bottom: 2px solid #fce4e4;
|
||
|
||
background-image: url("../../assets/images/sunful/book.svg");
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: left top;
|
||
|
||
padding: 86px 0 0 11px;
|
||
width: 37%;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.children,
|
||
.wealth {
|
||
background-image: url("../../assets/images/sunful/hat.webp");
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: left top;
|
||
|
||
display: flex;
|
||
flex-flow: column;
|
||
align-items: flex-start;
|
||
padding: 18px 0 0 77px;
|
||
|
||
h4 {
|
||
text-align: center;
|
||
}
|
||
|
||
p {
|
||
margin-top: 8px;
|
||
margin-bottom: 7px;
|
||
}
|
||
|
||
button {
|
||
color: #D8AF70;
|
||
background: transparent;
|
||
border: 1px solid #D8AF70;
|
||
padding: 1px 4px;
|
||
}
|
||
}
|
||
|
||
.wealth {
|
||
transform: translateY(-18px);
|
||
|
||
background-image: url("../../assets/images/sunful/treasure.webp");
|
||
|
||
p {}
|
||
|
||
button {}
|
||
}
|
||
|
||
.old,
|
||
.life {
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: left top;
|
||
|
||
padding: 21px 0 0 15px;
|
||
width: 53%;
|
||
|
||
p {
|
||
margin-bottom: 46px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
button {
|
||
margin-bottom: 30px;
|
||
}
|
||
}
|
||
|
||
.old {
|
||
background-image: url("../../assets/images/sunful/old.webp");
|
||
|
||
button {
|
||
background-color: #D8AF70;
|
||
}
|
||
}
|
||
|
||
.life {
|
||
background-image: url("../../assets/images/sunful/card.webp");
|
||
|
||
p {}
|
||
|
||
button {}
|
||
}
|
||
.flex {
|
||
&.flex-column {
|
||
flex-flow: column nowrap;
|
||
width: 65%;
|
||
gap: 4vw;
|
||
}
|
||
|
||
&.service-row {
|
||
gap: 10px;
|
||
margin-top: -20px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
</style>
|