feat:UI优化首页初版

src/main/resources/views/platform/zhghh5/sys/home/home.js

@@ -1,46 +1,37 @@
 const home = {
     template: /*language=HTML*/ `
-        <div>
+        <div class="home-page">
             <div class="home-hero">
-                <img class="home-hero__bg" :src="currentBanner.src" alt="">
+                <img class="home-hero__bg" src="/assets/mobile/img/home/v4/hero-campus.png" alt="">
-                <div class="home-hero__mask"></div>
+                <div class="home-hero__content">
-                <div class="home-hero__logo">
+                    <div class="home-hero__topbar">
-                    <img v-if="appLogo" class="home-hero__logo-img" :src="appLogo" alt="">
+                        <img class="home-hero__brand-logo"
-                    <div v-else class="home-hero__logo-mark"></div>
+                             src="/assets/mobile/img/home/v4/中国地质大学-logo.png"
-                    <div class="home-hero__logo-title" :class="{ 'is-placeholder': !appName }">
+                             alt="中国地质大学">
-                        <span v-if="appName">{{ appName }}</span>
-                        <template v-else>
-                            <i></i>
-                            <i></i>
-                        </template>
                     </div>
+                    <div class="home-hero__title">智慧工会</div>
+                    <div class="home-hero__subtitle">情系职工 · 真诚服务</div>
                 </div>
-                <van-swipe
-                    :autoplay="4000"
-                    :height="193"
-                    class="home__swipe"
-                    indicator-color="#e13b4c"
-                    @change="bannerChange">
-                    <van-swipe-item v-for="banner in bannerList" :key="banner.src">
-                        <div class="home__swipe-card">
-                            <img :src="banner.src" alt="">
-                        </div>
-                    </van-swipe-item>
-                </van-swipe>
             </div>
 
             <!--蹇嵎鍏ュ彛-->
             <div class="quick-grid">
-                <div class="section-title">推荐服务</div>
+                <div class="section-head">
+                    <div class="section-title">推荐服务</div>
+                    <div class="section-more" @click="$emit('module-click')">
+                        <span>更多</span>
+                        <van-icon name="arrow"></van-icon>
+                    </div>
+                </div>
                 <div class="quick-scroll">
                     <div class="quick-scroll-grid">
                         <div class="quick-entry-item"
                              v-for="item in quickEntries"
                              @click="menuClick(item)"
-                             :key="item.id">
+                            :key="item.id">
                             <div class="quick-entry-icon">
-                                <img v-if="item.picIcon" :src="item.picIcon" alt="">
+                                <img v-if="getQuickEntryIcon(item)" :src="getQuickEntryIcon(item)" alt="">
-                                <van-icon v-else name="apps-o" size="28"></van-icon>
+                                <van-icon v-else name="apps-o" size="36"></van-icon>
                             </div>
                             <div class="quick-entry-name">{{ item.name }}</div>
                         </div>
@@ -52,20 +43,27 @@ const home = {
             <div class="feature-panel">
                 <div
                     class="feature-card"
-                    :class="[item.className, { 'feature-card--large': item.large }]"
+                    :class="item.className"
+                    :style="{ backgroundImage: 'url(' + item.asset + ')' }"
                     v-for="item in featuredEntries"
                     :key="item.name"
                     @click="featureClick(item)">
                     <div class="feature-card__text">
                         <div class="feature-card__title">{{ item.name }}</div>
                         <div class="feature-card__desc">{{ item.desc }}</div>
+                        <div class="feature-card__action">
+                            <span>{{ item.action }}</span>
+                            <van-icon name="arrow"></van-icon>
+                        </div>
                     </div>
-                    <van-icon class="feature-card__icon" :name="item.icon"></van-icon>
                 </div>
             </div>
 
             <div class="classroom-panel" @click="enterClassroom">
-                <div class="classroom-panel__title">我的课堂</div>
+                <div class="entry-panel__heading">
+                    <span class="entry-panel__icon entry-panel__icon--classroom"><van-icon name="notes-o"></van-icon></span>
+                    <span class="classroom-panel__title">我的课堂</span>
+                </div>
                 <div class="classroom-panel__course">{{ currentClassroomCourseName }}</div>
                 <div class="classroom-panel__action">
                     <span>个人学习</span>
@@ -74,7 +72,10 @@ const home = {
             </div>
 
             <div class="policy-panel">
-                <div class="policy-panel__title">政策文件</div>
+                <div class="entry-panel__heading">
+                    <span class="entry-panel__icon entry-panel__icon--policy"><van-icon name="description"></van-icon></span>
+                    <span class="policy-panel__title">政策文件</span>
+                </div>
                 <div class="policy-panel__action">
                     <span>更多</span>
                     <van-icon name="arrow"></van-icon>
@@ -120,6 +121,15 @@ const home = {
         return {
             activityOptions: [],
             quickEntries: [],
+            quickEntryIcons: {
+                "撰写提案": "/assets/mobile/img/home/v4/recommend/撰写提案.png",
+                "会员入会": "/assets/mobile/img/home/v4/recommend/会员入会.png",
+                "帮扶申请": "/assets/mobile/img/home/v4/recommend/帮扶申请.png",
+                "疗休养报名": "/assets/mobile/img/home/v4/recommend/疗休养报名.png",
+                "社团入会": "/assets/mobile/img/home/v4/recommend/社团入会.png",
+                "慰问申请": "/assets/mobile/img/home/v4/recommend/慰问申请.png",
+                "问卷调查": "/assets/mobile/img/home/v4/recommend/问卷调查.png"
+            },
             classroomCourses: [],
             classroomCourseIndex: 0,
             classroomCourseTimer: null,
@@ -127,30 +137,33 @@ const home = {
             featuredEntries: [
                 {
                     name: "精彩活动",
-                    desc: "更多精彩活动",
+                    desc: "更多精彩活动等你参与",
-                    icon: "fire-o",
+                    action: "立即参与",
+                    asset: "/assets/mobile/img/home/v4/feature-activity.png",
                     className: "feature-card--activity",
-                    large: true,
                     href: "/platform/h5/featuredActivity"
                 },
                 {
                     name: "节日福利",
-                    desc: "领取节日福利",
+                    desc: "专属福利 放送温暖",
-                    icon: "gift-o",
+                    action: "查看福利",
+                    asset: "/assets/mobile/img/home/v4/feature-benefit.png",
                     className: "feature-card--benefit",
                     href: "/platform/h5/festivalBenefit"
                 },
                 {
                     name: "劳模先进",
-                    desc: "先进风采展示",
+                    desc: "致敬榜样力量",
-                    icon: "medal-o",
+                    action: "了解更多",
+                    asset: "/assets/mobile/img/home/v4/feature-model.png",
                     className: "feature-card--model",
                     href: "/platform/honor/manage/h5"
                 },
                 {
                     name: "普惠信息",
                     desc: "普惠服务信息",
-                    icon: "bullhorn-o",
+                    action: "查看信息",
+                    asset: "/assets/mobile/img/home/v4/feature-inclusive.png",
                     className: "feature-card--inclusive",
                     href: ""
                 }
@@ -186,7 +199,7 @@ const home = {
         },
         currentClassroomCourseName() {
             const course = this.classroomCourses[this.classroomCourseIndex]
-            return course && course.courseName ? course.courseName : ""
+            return course && course.courseName ? course.courseName : "二十大精神"
         }
     },
     methods: {
@@ -376,6 +389,9 @@ const home = {
         menuClick(item) {
             this.$pjaxReplace(item.href)
         },
+        getQuickEntryIcon(item) {
+            return this.quickEntryIcons[item.name] || item.picIcon || ""
+        },
         featureClick(item) {
             if (item.href) {
                 this.$pjaxReplace(item.href)
@@ -397,7 +413,6 @@ const home = {
         }
     },
     created() {
-        this.listHomeBanner()
         this.listHomeBrand()
         this.listRecommendApp()
         this.listClassroomCourses()
@@ -414,163 +429,114 @@ const home = {
     style: /*language=CSS*/ `
         .home-hero {
             position: relative;
-            min-height: 281px;
+            height: 200px;
             overflow: hidden;
-            padding: 26px 16px 0;
+            color: #fff;
-            background-color: #fff;
+            background-color: #0878f7;
-            box-sizing: border-box;
-        }
-
-        .home-hero::after {
-            content: "";
-            position: absolute;
-            left: 50%;
-            top: 187px;
-            z-index: 1;
-            width: 180%;
-            height: 96px;
-            transform: translateX(-50%);
-            background-color: #fff;
-            border-radius: 50% 50% 0 0 / 100% 100% 0 0;
         }
 
         .home-hero__bg {
             position: absolute;
-            left: -24px;
+            inset: 0;
-            top: -24px;
-            width: calc(100% + 48px);
-            height: 239px;
-            object-fit: cover;
-            filter: blur(20px);
-            transform: scale(1.12);
-            opacity: .88;
-            transition: opacity .25s ease;
-        }
-
-        .home-hero__mask {
-            position: absolute;
-            left: 0;
-            top: 0;
-            right: 0;
-            height: 239px;
-            background: rgba(0, 0, 0, .06);
-        }
-
-        .home-hero__logo {
-            position: relative;
-            z-index: 2;
-            display: flex;
-            align-items: center;
-            height: 36px;
-            margin-bottom: 12px;
-            min-width: 0;
-        }
-
-        .home-hero__logo-mark {
-            width: 34px;
-            height: 34px;
-            border: 1px solid rgba(255, 255, 255, .72);
-            border-radius: 50%;
-            box-sizing: border-box;
-            background: rgba(255, 255, 255, .2);
-            backdrop-filter: blur(2px);
-            flex-shrink: 0;
-        }
-
-        .home-hero__logo-img {
-            display: block;
-            max-width: 210px;
-            max-height: 36px;
-            object-fit: contain;
-            flex-shrink: 0;
-        }
-
-        .home-hero__logo-title {
-            min-width: 0;
-            margin-left: 10px;
-            color: #fff;
-            font-size: 17px;
-            font-weight: 600;
-            line-height: 22px;
-            text-shadow: 0 1px 8px rgba(0, 0, 0, .24);
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .home-hero__logo-title.is-placeholder {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            gap: 8px;
-            width: 154px;
-            margin-left: 10px;
-        }
-
-        .home-hero__logo-title i {
-            display: block;
-            height: 10px;
-            border-radius: 999px;
-            background: rgba(255, 255, 255, .72);
-        }
-
-        .home-hero__logo-title i + i {
-            width: 66%;
-            height: 7px;
-            opacity: .75;
-        }
-
-        .home__swipe {
-            position: relative;
-            z-index: 2;
-            overflow: visible;
-            border-radius: 12px;
-        }
-
-        .home__swipe-card {
-            height: 100%;
-            overflow: hidden;
-            border-radius: 12px;
-            background-color: rgba(255, 255, 255, .26);
-            box-shadow: 0 10px 28px rgba(0, 0, 0, .1);
-        }
-
-        .home__swipe-card img {
             width: 100%;
             height: 100%;
             object-fit: cover;
+            object-position: center;
             display: block;
-            border-radius: inherit;
         }
 
-        .home__swipe /deep/ .van-swipe__track,
+        .home-hero__content {
-        .home__swipe /deep/ .van-swipe-item {
+            position: relative;
-            border-radius: 12px;
+            z-index: 1;
-            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            height: 100%;
+            padding: 15px 20px 12px;
+            box-sizing: border-box;
         }
 
-        .home__swipe /deep/ .van-swipe__indicators {
+        .home-hero__topbar {
-            bottom: -14px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 36px;
+            margin-bottom: 12px;
         }
 
-        .home__swipe /deep/ .van-swipe__indicator {
+        .home-hero__brand-logo {
-            width: 7px;
+            display: block;
-            height: 7px;
+            width: 160px;
-            background-color: rgba(225, 59, 76, .28);
+            height: 36px;
-            opacity: 1;
+            object-fit: contain;
+            object-position: left center;
+            filter: brightness(0) invert(1);
         }
 
-        .home__swipe /deep/ .van-swipe__indicator--active {
+        .home-hero__title {
-            background-color: #e13b4c;
+            font-size: 27px;
+            line-height: 32px;
+            font-weight: 700;
+            letter-spacing: 1px;
+        }
+
+        .home-hero__subtitle {
+            margin-top: 3px;
+            font-size: 13px;
+            line-height: 18px;
+            letter-spacing: .5px;
+        }
+
+        .home-hero__slogan {
+            display: inline-flex;
+            align-items: center;
+            height: 20px;
+            margin-top: 7px;
+            padding: 0 8px;
+            border: 1px solid rgba(255, 255, 255, .58);
+            border-radius: 999px;
+            font-size: 10px;
+            line-height: 20px;
+            box-sizing: border-box;
         }
 
         .quick-grid {
             background-color: #fff;
-            margin: 10px 10px 10px;
+            margin: -10px 12px 13px;
-            border-radius: 10px;
+            border: 1px solid rgba(255, 255, 255, .82);
-            padding: 10px;
+            border-radius: 12px;
+            padding: 14px 10px 13px;
             position: relative;
             z-index: 2;
+            box-shadow: 0 12px 30px rgba(35, 82, 130, .13);
+        }
+
+        .section-head {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 1px 4px;
+        }
+
+        .section-head .section-title {
+            padding: 0;
+            color: #202124;
+            font-size: 15px;
+            line-height: 21px;
+            font-weight: 600;
+        }
+
+        .section-more {
+            display: flex;
+            align-items: center;
+            color: #969799;
+            font-size: 13px;
+            line-height: 18px;
+        }
+
+        .section-more .van-icon {
+            margin-left: 4px;
+            font-size: 13px;
         }
 
         .quick-scroll {
@@ -589,14 +555,14 @@ const home = {
         .quick-scroll-grid {
             display: grid;
             grid-auto-flow: column;
-            grid-template-rows: repeat(2, 82px);
+            grid-template-rows: repeat(2, 86px);
             grid-auto-columns: 25%;
             min-width: 100%;
         }
 
         .quick-entry-item {
             min-width: 0;
-            height: 82px;
+            height: 86px;
             display: flex;
             flex-direction: column;
             align-items: center;
@@ -611,8 +577,8 @@ const home = {
         }
 
         .quick-entry-icon {
-            width: 40px;
+            width: 46px;
-            height: 40px;
+            height: 46px;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -622,8 +588,8 @@ const home = {
         }
 
         .quick-entry-icon img {
-            width: 40px;
+            width: 46px;
-            height: 40px;
+            height: 46px;
             object-fit: contain;
         }
 
@@ -634,145 +600,127 @@ const home = {
             width: 90%;
             text-align: center;
             color: #323233;
-            font-size: 13px;
+            font-size: 12px;
-            line-height: 18px;
+            line-height: 16px;
         }
 
         .feature-panel {
-            margin: 10px;
+            margin: 0 12px 7px;
             display: grid;
-            grid-template-columns: repeat(4, minmax(0, 1fr));
+            grid-template-columns: repeat(2, minmax(0, 1fr));
-            grid-auto-rows: 82px;
+            grid-auto-rows: 95px;
-            gap: 10px;
+            gap: 10px 8px;
         }
 
         .feature-card {
             position: relative;
             overflow: hidden;
-            border-radius: 10px;
+            border-radius: 8px;
-            padding: 14px 12px;
+            padding: 13px 11px;
             box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-start;
             min-width: 0;
-            box-shadow: 0 6px 18px rgba(42, 65, 92, .08);
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
         }
 
         .feature-card:active {
             transform: scale(.985);
         }
 
-        .feature-card--large {
-            grid-column: span 2;
-            grid-row: span 2;
-        }
-
         .feature-card__text {
             position: relative;
             z-index: 1;
-            min-width: 0;
+            width: 57%;
         }
 
         .feature-card__title {
-            font-size: 17px;
+            font-size: 15px;
-            line-height: 22px;
+            line-height: 20px;
             font-weight: 700;
-            margin-bottom: 5px;
+            margin-bottom: 2px;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
         }
 
         .feature-card__desc {
-            color: rgba(55, 65, 81, .64);
+            color: #737b8c;
-            font-size: 12px;
+            font-size: 10px;
-            line-height: 17px;
+            line-height: 14px;
-            display: -webkit-box;
+            white-space: nowrap;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            overflow: hidden;
         }
 
-        .feature-card__icon {
+        .feature-card__action {
-            position: absolute;
+            display: inline-flex;
-            right: 14px;
-            bottom: 12px;
-            font-size: 36px;
-            opacity: .78;
-        }
-
-        .feature-card--large .feature-card__icon {
-            right: 18px;
-            bottom: 18px;
-            font-size: 56px;
-        }
-
-        .feature-card--benefit,
-        .feature-card--model {
             align-items: center;
-            justify-content: center;
+            height: 21px;
-            padding: 10px 8px;
+            margin-top: 14px;
-            text-align: center;
+            padding: 0 7px;
+            border-radius: 999px;
+            font-size: 10px;
+            line-height: 21px;
+            font-weight: 500;
+            background: rgba(255, 255, 255, .46);
         }
 
-        .feature-card--benefit .feature-card__desc,
+        .feature-card__action .van-icon {
-        .feature-card--model .feature-card__desc {
+            margin-left: 4px;
-            display: none;
+            font-size: 10px;
         }
 
-        .feature-card--benefit .feature-card__title,
+        .feature-card--activity,
-        .feature-card--model .feature-card__title {
+        .feature-card--model {
-            font-size: 15px;
+            color: #087af4;
-            line-height: 20px;
-            margin-bottom: 0;
-            overflow: visible;
-            text-overflow: clip;
         }
 
-        .feature-card--benefit .feature-card__icon,
+        .feature-card--activity .feature-card__action,
-        .feature-card--model .feature-card__icon {
+        .feature-card--model .feature-card__action {
-            position: static;
+            background: rgba(211, 232, 255, .72);
-            display: block;
-            margin: 8px auto 0;
-            font-size: 32px;
-        }
-
-        .feature-card--inclusive .feature-card__icon {
-            font-size: 44px;
-        }
-
-        .feature-card--activity {
-            background: linear-gradient(145deg, #fff2e5 0%, #ffe2c8 100%);
-            color: #ff7a25;
         }
 
         .feature-card--benefit {
-            background: linear-gradient(145deg, #fff1f4 0%, #ffd5dc 100%);
+            color: #f54d59;
-            color: #f35f74;
         }
 
-        .feature-card--model {
+        .feature-card--benefit .feature-card__action {
-            background: linear-gradient(145deg, #eef5ff 0%, #d9e8ff 100%);
+            background: rgba(255, 232, 235, .78);
-            color: #5b83d7;
         }
 
         .feature-card--inclusive {
-            grid-column: span 2;
+            color: #6f4fee;
-            background: linear-gradient(145deg, #f2eeff 0%, #ded4ff 100%);
+        }
-            color: #8063dc;
+
+        .feature-card--inclusive .feature-card__action {
+            background: rgba(237, 230, 255, .8);
+        }
+
+        .feature-card--activity .feature-card__desc,
+        .feature-card--model .feature-card__desc {
+            color: #737b8c;
+        }
+
+        .feature-card--benefit .feature-card__desc {
+            color: #9e6570;
+        }
+
+        .feature-card--inclusive .feature-card__desc {
+            color: #716887;
+        }
+
+        .feature-card--activity {
+            color: #087af4;
         }
 
         .classroom-panel {
-            height: 66px;
+            height: 48px;
-            margin: 10px;
+            margin: 15px 12px 7px;
-            padding: 0 16px;
+            padding: 0 12px;
             display: flex;
             align-items: center;
             justify-content: space-between;
-            border-radius: 10px;
+            border-radius: 8px;
             background-color: #fff;
-            box-shadow: 0 8px 22px rgba(42, 65, 92, .07);
             box-sizing: border-box;
         }
 
@@ -780,32 +728,47 @@ const home = {
             transform: scale(.99);
         }
 
-        .classroom-panel__title {
+        .entry-panel__heading {
-            position: relative;
+            display: flex;
+            align-items: center;
             flex-shrink: 0;
-            color: #202124;
-            font-size: 15px;
-            line-height: 21px;
         }
 
-        .classroom-panel__title::after {
+        .entry-panel__icon {
-            content: "";
-            position: absolute;
-            left: 0;
-            bottom: -5px;
             width: 22px;
-            height: 2px;
+            height: 22px;
-            border-radius: 999px;
+            margin-right: 9px;
-            background-color: #e13b4c;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 5px;
+            color: #fff;
+            font-size: 15px;
+        }
+
+        .entry-panel__icon--classroom {
+            background: linear-gradient(145deg, #0c70f5, #278fff);
+        }
+
+        .entry-panel__icon--policy {
+            background: linear-gradient(145deg, #ff424d, #ff6c73);
+        }
+
+        .classroom-panel__title {
+            flex-shrink: 0;
+            color: #202124;
+            font-size: 14px;
+            line-height: 20px;
+            font-weight: 600;
         }
 
         .classroom-panel__course {
             min-width: 0;
             flex: 1;
-            margin: 0 12px;
+            margin: 0 8px;
-            color: #1989fa;
+            color: #087af4;
-            font-size: 13px;
+            font-size: 12px;
-            line-height: 18px;
+            line-height: 17px;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -818,8 +781,8 @@ const home = {
             align-items: center;
             justify-content: flex-end;
             color: #969799;
-            font-size: 13px;
+            font-size: 12px;
-            line-height: 18px;
+            line-height: 17px;
             white-space: nowrap;
         }
 
@@ -830,42 +793,30 @@ const home = {
         }
 
         .policy-panel {
-            height: 66px;
+            height: 48px;
-            margin: 10px;
+            margin: 0 12px 65px;
-            padding: 0 16px;
+            padding: 0 12px;
             display: flex;
             align-items: center;
             justify-content: space-between;
-            border-radius: 10px;
+            border-radius: 8px;
             background-color: #fff;
-            box-shadow: 0 8px 22px rgba(42, 65, 92, .07);
             box-sizing: border-box;
         }
 
         .policy-panel__title {
-            position: relative;
             color: #202124;
-            font-size: 15px;
+            font-size: 14px;
-            line-height: 21px;
+            line-height: 20px;
-        }
+            font-weight: 600;
-
-        .policy-panel__title::after {
-            content: "";
-            position: absolute;
-            left: 0;
-            bottom: -5px;
-            width: 22px;
-            height: 2px;
-            border-radius: 999px;
-            background-color: #e13b4c;
         }
 
         .policy-panel__action {
             display: flex;
             align-items: center;
             color: #969799;
-            font-size: 13px;
+            font-size: 12px;
-            line-height: 18px;
+            line-height: 17px;
             white-space: nowrap;
         }
 

src/main/resources/views/platform/zhghh5/sys/home/index.html

@@ -61,8 +61,8 @@ layout("/layouts/platform_h5.html"){
                 this.$store.commit("setActiveTarBar", val)
             },
             moduleClick(val) {
-                console.log(val)
+                this.homeTabbarActive = "apps"
-                this.homeTabbarActive = "work"
+                this.$store.commit("setActiveTarBar", "apps")
             }
         },
         created() {