feat(home): 首页UI更新
- 重新设计了首页布局和样式,增加了更多视觉元素 - 添加了标题、轮播图、服务提示语等新模块 - 优化了响应式布局,提升了移动端体验 - 使用了更多的Vant组件,提高了开发效率
This commit is contained in:
huangze
31
src/main.js
31
src/main.js
@@ -16,7 +16,7 @@ import 'vant/lib/index.css'
|
|||||||
import 'viewerjs/dist/viewer.css'
|
import 'viewerjs/dist/viewer.css'
|
||||||
import 'quill/dist/quill.snow.css'
|
import 'quill/dist/quill.snow.css'
|
||||||
import Bus from '@utils/bus'
|
import Bus from '@utils/bus'
|
||||||
import { Toast, Form,Loading,Lazyload,Notify, Image, NavBar, Icon,Card,Field,Button } from 'vant'
|
import { Toast, Form, Loading, Lazyload, Notify, Image, NavBar, Icon, Card, Field, Button } from 'vant'
|
||||||
import generatedFormat from '@/assets/js/generatedFormat/index'
|
import generatedFormat from '@/assets/js/generatedFormat/index'
|
||||||
import generatedApi from '@/api/generatedApi/index'
|
import generatedApi from '@/api/generatedApi/index'
|
||||||
import generatedComponents from './generatedComponents'
|
import generatedComponents from './generatedComponents'
|
||||||
@@ -25,20 +25,21 @@ for (let item in generatedComponents) {
|
|||||||
Vue.component(item, generatedComponents[item])
|
Vue.component(item, generatedComponents[item])
|
||||||
}
|
}
|
||||||
|
|
||||||
Vue.use(Image);
|
Vue.use(Image)
|
||||||
Vue.use(Toast)
|
.use(Toast)
|
||||||
Vue.use(Form)
|
.use(Form)
|
||||||
Vue.use(Loading)
|
.use(Loading)
|
||||||
Vue.use(Lazyload)
|
.use(Lazyload)
|
||||||
Vue.use(Notify)
|
.use(Notify)
|
||||||
Vue.use(Lazyload, {
|
.use(Lazyload, {
|
||||||
lazyComponent: true,
|
lazyComponent: true
|
||||||
});
|
})
|
||||||
Vue.use(Icon)
|
.use(Icon)
|
||||||
Vue.use(NavBar)
|
.use(NavBar)
|
||||||
Vue.use(Card)
|
.use(Card)
|
||||||
Vue.use(Field)
|
.use(Field)
|
||||||
Vue.use(Button)
|
.use(Button)
|
||||||
|
|
||||||
//router or bridge jump
|
//router or bridge jump
|
||||||
Vue.prototype.$bus = new Bus()
|
Vue.prototype.$bus = new Bus()
|
||||||
Vue.prototype.$generatedFormat = generatedFormat
|
Vue.prototype.$generatedFormat = generatedFormat
|
||||||
|
|||||||
@@ -36,7 +36,7 @@ export default [
|
|||||||
path: '/home',
|
path: '/home',
|
||||||
component: () => import('@/views/home/home.vue'),
|
component: () => import('@/views/home/home.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '主页'
|
title: '首页'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1,30 +1,279 @@
|
|||||||
<script lang="ts">
|
<script>
|
||||||
|
import { Image as VanImage, Icon } from 'vant';
|
||||||
|
import { title as _title } from './hooks/home';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "home",
|
name: "home",
|
||||||
|
components: {
|
||||||
|
VanImage,
|
||||||
|
VanIcon: Icon
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
title: _title,
|
||||||
|
titleSrc: "http://ncc.ebiz-digits.com:39527/gsc/IHRHN5/7b/04/63/7b0463aa135f4a1f922b5171bcec1d14/images/主页/u26.png",
|
||||||
|
bannerSrc: "http://ncc.ebiz-digits.com:39527/gsc/IHRHN5/7b/04/63/7b0463aa135f4a1f922b5171bcec1d14/images/主页/u44.svg",
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="home">
|
<section class="container-wrap">
|
||||||
<div>123</div>
|
<div class="home-container">
|
||||||
<div>456</div>
|
<!-- 标题提示语部分 -->
|
||||||
</div>
|
<section class="title">
|
||||||
|
<img width="78px" :src="titleSrc" />
|
||||||
|
<h2> <span>您好</span> {{ title }}</h2>
|
||||||
|
</section>
|
||||||
|
<!-- 轮播图部分 -->
|
||||||
|
<section class="swiper">
|
||||||
|
<van-image width="100%" :src="bannerSrc" />
|
||||||
|
</section>
|
||||||
|
<!-- 服务提示语部分 -->
|
||||||
|
<section class="tips">
|
||||||
|
<van-icon name="info-o" />
|
||||||
|
<span>服务项目及使用说明，具体以供应商实际提供为准。</span>
|
||||||
|
</section>
|
||||||
|
<!-- 生态系统部分 -->
|
||||||
|
<section class="ecosystem">
|
||||||
|
<h3>生态服务</h3>
|
||||||
|
<div class="service-grid">
|
||||||
|
<div class="service-item" style="grid-column: 1 / 16;">
|
||||||
|
<div>
|
||||||
|
<h4>健康管理</h4>
|
||||||
|
<p>点击下方查看更多服务</p>
|
||||||
|
</div>
|
||||||
|
<button class="go-btn">去看看</button>
|
||||||
|
</div>
|
||||||
|
<div style="grid-column: 16 / 24;">
|
||||||
|
<div class="line-bg" style="margin-bottom: 10px;">
|
||||||
|
<span>养老服务</span>
|
||||||
|
<button class="go-btn-v">去看看</button>
|
||||||
|
</div>
|
||||||
|
<div class="line-bg">
|
||||||
|
<span>财富管理</span>
|
||||||
|
<button class="go-btn-v">去看看</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="service-item" style="grid-column: 1 / 12;">
|
||||||
|
<div>
|
||||||
|
<h4>健康管理</h4>
|
||||||
|
<p>点击下方查看更多服务</p>
|
||||||
|
</div>
|
||||||
|
<button class="go-btn">去看看</button>
|
||||||
|
</div>
|
||||||
|
<div class="service-item" style="grid-column: 12 / 24;">
|
||||||
|
<div>
|
||||||
|
<h4>健康管理</h4>
|
||||||
|
<p>点击下方查看更多服务</p>
|
||||||
|
</div>
|
||||||
|
<button class="go-btn">去看看</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="css" scoped>
|
<style lang="scss" scoped>
|
||||||
.home {
|
$title-height: 120px;
|
||||||
display: grid;
|
$primary-color: #c9202d;
|
||||||
grid-template-columns: 30vw 1fr;
|
$card-bg-color: #FFFFFF;
|
||||||
height: calc(100vh - 50px);
|
$border-radius: 12px;
|
||||||
width: 100vw;
|
$ecosystem-bg-color: linear-gradient(#fbeef0 10px, #FFF 50px);
|
||||||
}
|
|
||||||
|
|
||||||
.home div:nth-child(even) {
|
.container-wrap {
|
||||||
background-color: #fff;
|
position: relative;
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
min-height: 100vh;
|
||||||
|
|
||||||
}
|
padding-bottom: 20px;
|
||||||
|
|
||||||
.home div:nth-child(odd) {
|
.home-container {
|
||||||
/* background-color: orig; */
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
height: $title-height;
|
||||||
|
background-color: $primary-color;
|
||||||
|
color: white;
|
||||||
|
padding: 15px 20px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "“";
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "”";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper {
|
||||||
|
padding: 0;
|
||||||
|
margin-top: -70px;
|
||||||
|
position: relative;
|
||||||
|
// z-index: 10;
|
||||||
|
|
||||||
|
.banner-card {
|
||||||
|
background-color: $card-bg-color;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #8BC34A;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-content {
|
||||||
|
h3 {
|
||||||
|
color: #8BC34A;
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.en-text {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #999;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips {
|
||||||
|
margin: 15px 10px;
|
||||||
|
padding: 12px 15px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-left: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #795548;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ecosystem {
|
||||||
|
margin: 10px 10px;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
padding: 15px 15px;
|
||||||
|
background: $ecosystem-bg-color;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 15px 0;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(24, 1fr);
|
||||||
|
gap: 15px;
|
||||||
|
|
||||||
|
.line-bg {
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 8px;
|
||||||
|
// height: 38%;
|
||||||
|
background: $ecosystem-bg-color;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.go-btn-v {
|
||||||
|
width: 60px;
|
||||||
|
align-self: flex-end;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #E53935;
|
||||||
|
border: 1px solid #E53935;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 3px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-item {
|
||||||
|
background: $ecosystem-bg-color;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
min-height: 120px;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.go-btn {
|
||||||
|
align-self: center;
|
||||||
|
width: 60px;
|
||||||
|
background-color: #E53935;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 3px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
3
src/views/home/hooks/home.js
Normal file
3
src/views/home/hooks/home.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
export const title = ref('您好，欢迎使用幸福人寿生态系统！')
|
||||||
Reference in New Issue
Block a user