From 39b0a3908b59fe5ac5e7b9b0b336d9cd482bdca4 Mon Sep 17 00:00:00 2001
From: huangze <huang.ze@ebiz-digits.com>
Date: Wed, 2 Jul 2025 11:35:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(home):=20=E9=A6=96=E9=A1=B5UI=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重新设计了首页布局和样式,增加了更多视觉元素
- 添加了标题、轮播图、服务提示语等新模块
- 优化了响应式布局,提升了移动端体验
- 使用了更多的Vant组件,提高了开发效率
---
 src/main.js                  |  31 ++--
 src/router/app/index.js      |   2 +-
 src/views/home/home.vue      | 285 ++++++++++++++++++++++++++++++++---
 src/views/home/hooks/home.js |   3 +
 4 files changed, 287 insertions(+), 34 deletions(-)
 create mode 100644 src/views/home/hooks/home.js

diff --git a/src/main.js b/src/main.js
index 624f0ab..21bbbcb 100644
--- a/src/main.js
+++ b/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
diff --git a/src/router/app/index.js b/src/router/app/index.js
index 5da8337..bcb6a26 100644
--- a/src/router/app/index.js
+++ b/src/router/app/index.js
@@ -36,7 +36,7 @@ export default [
         path: '/home',
         component: () => import('@/views/home/home.vue'),
         meta: {
-          title: '主页'
+          title: '首页'
         }
       },
       {
diff --git a/src/views/home/home.vue b/src/views/home/home.vue
index 50213c5..7110269 100644
--- a/src/views/home/home.vue
+++ b/src/views/home/home.vue
@@ -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>
\ No newline at end of file
+</style>
diff --git a/src/views/home/hooks/home.js b/src/views/home/hooks/home.js
new file mode 100644
index 0000000..ecfa65c
--- /dev/null
+++ b/src/views/home/hooks/home.js
@@ -0,0 +1,3 @@
+import { ref } from 'vue'
+
+export const title = ref('您好，欢迎使用幸福人寿生态系统！')
\ No newline at end of file