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 'quill/dist/quill.snow.css'
|
||||
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 generatedApi from '@/api/generatedApi/index'
|
||||
import generatedComponents from './generatedComponents'
|
||||
@@ -25,20 +25,21 @@ for (let item in generatedComponents) {
|
||||
Vue.component(item, generatedComponents[item])
|
||||
}
|
||||
|
||||
Vue.use(Image);
|
||||
Vue.use(Toast)
|
||||
Vue.use(Form)
|
||||
Vue.use(Loading)
|
||||
Vue.use(Lazyload)
|
||||
Vue.use(Notify)
|
||||
Vue.use(Lazyload, {
|
||||
lazyComponent: true,
|
||||
});
|
||||
Vue.use(Icon)
|
||||
Vue.use(NavBar)
|
||||
Vue.use(Card)
|
||||
Vue.use(Field)
|
||||
Vue.use(Button)
|
||||
Vue.use(Image)
|
||||
.use(Toast)
|
||||
.use(Form)
|
||||
.use(Loading)
|
||||
.use(Lazyload)
|
||||
.use(Notify)
|
||||
.use(Lazyload, {
|
||||
lazyComponent: true
|
||||
})
|
||||
.use(Icon)
|
||||
.use(NavBar)
|
||||
.use(Card)
|
||||
.use(Field)
|
||||
.use(Button)
|
||||
|
||||
//router or bridge jump
|
||||
Vue.prototype.$bus = new Bus()
|
||||
Vue.prototype.$generatedFormat = generatedFormat
|
||||
|
||||
@@ -36,7 +36,7 @@ export default [
|
||||
path: '/home',
|
||||
component: () => import('@/views/home/home.vue'),
|
||||
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 {
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div class="home">
|
||||
<div>123</div>
|
||||
<div>456</div>
|
||||
</div>
|
||||
<section class="container-wrap">
|
||||
<div class="home-container">
|
||||
<!-- 标题提示语部分 -->
|
||||
<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>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.home {
|
||||
display: grid;
|
||||
grid-template-columns: 30vw 1fr;
|
||||
height: calc(100vh - 50px);
|
||||
width: 100vw;
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
$title-height: 120px;
|
||||
$primary-color: #c9202d;
|
||||
$card-bg-color: #FFFFFF;
|
||||
$border-radius: 12px;
|
||||
$ecosystem-bg-color: linear-gradient(#fbeef0 10px, #FFF 50px);
|
||||
|
||||
.home div:nth-child(even) {
|
||||
background-color: #fff;
|
||||
.container-wrap {
|
||||
position: relative;
|
||||
background-color: #F5F5F5;
|
||||
min-height: 100vh;
|
||||
|
||||
}
|
||||
padding-bottom: 20px;
|
||||
|
||||
.home div:nth-child(odd) {
|
||||
/* background-color: orig; */
|
||||
.home-container {
|
||||
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