-
政策文件
+
+
+ 政策文件
+
更多
@@ -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: "更多精彩活动",
- icon: "fire-o",
+ desc: "更多精彩活动等你参与",
+ action: "立即参与",
+ asset: "/assets/mobile/img/home/v4/feature-activity.png",
className: "feature-card--activity",
- large: true,
href: "/platform/h5/featuredActivity"
},
{
name: "节日福利",
- desc: "领取节日福利",
- icon: "gift-o",
+ desc: "专属福利 放送温暖",
+ action: "查看福利",
+ asset: "/assets/mobile/img/home/v4/feature-benefit.png",
className: "feature-card--benefit",
href: "/platform/h5/festivalBenefit"
},
{
name: "劳模先进",
- desc: "先进风采展示",
- icon: "medal-o",
+ desc: "致敬榜样力量",
+ 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;
- background-color: #fff;
- 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;
+ color: #fff;
+ background-color: #0878f7;
}
.home-hero__bg {
position: absolute;
- left: -24px;
- 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 {
+ inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
+ object-position: center;
display: block;
- border-radius: inherit;
}
- .home__swipe /deep/ .van-swipe__track,
- .home__swipe /deep/ .van-swipe-item {
- border-radius: 12px;
- overflow: hidden;
+ .home-hero__content {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ height: 100%;
+ padding: 15px 20px 12px;
+ box-sizing: border-box;
}
- .home__swipe /deep/ .van-swipe__indicators {
- bottom: -14px;
+ .home-hero__topbar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 36px;
+ margin-bottom: 12px;
}
- .home__swipe /deep/ .van-swipe__indicator {
- width: 7px;
- height: 7px;
- background-color: rgba(225, 59, 76, .28);
- opacity: 1;
+ .home-hero__brand-logo {
+ display: block;
+ width: 160px;
+ height: 36px;
+ object-fit: contain;
+ object-position: left center;
+ filter: brightness(0) invert(1);
}
- .home__swipe /deep/ .van-swipe__indicator--active {
- background-color: #e13b4c;
+ .home-hero__title {
+ 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;
- border-radius: 10px;
- padding: 10px;
+ margin: -10px 12px 13px;
+ border: 1px solid rgba(255, 255, 255, .82);
+ 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;
- height: 40px;
+ width: 46px;
+ height: 46px;
display: flex;
align-items: center;
justify-content: center;
@@ -622,8 +588,8 @@ const home = {
}
.quick-entry-icon img {
- width: 40px;
- height: 40px;
+ width: 46px;
+ height: 46px;
object-fit: contain;
}
@@ -634,145 +600,127 @@ const home = {
width: 90%;
text-align: center;
color: #323233;
- font-size: 13px;
- line-height: 18px;
+ font-size: 12px;
+ line-height: 16px;
}
.feature-panel {
- margin: 10px;
+ margin: 0 12px 7px;
display: grid;
- grid-template-columns: repeat(4, minmax(0, 1fr));
- grid-auto-rows: 82px;
- gap: 10px;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ grid-auto-rows: 95px;
+ gap: 10px 8px;
}
.feature-card {
position: relative;
overflow: hidden;
- border-radius: 10px;
- padding: 14px 12px;
+ border-radius: 8px;
+ 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;
- line-height: 22px;
+ font-size: 15px;
+ 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);
- font-size: 12px;
- line-height: 17px;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
+ color: #737b8c;
+ font-size: 10px;
+ line-height: 14px;
+ white-space: nowrap;
}
- .feature-card__icon {
- position: absolute;
- 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 {
+ .feature-card__action {
+ display: inline-flex;
align-items: center;
- justify-content: center;
- padding: 10px 8px;
- text-align: center;
+ height: 21px;
+ margin-top: 14px;
+ 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--model .feature-card__desc {
- display: none;
+ .feature-card__action .van-icon {
+ margin-left: 4px;
+ font-size: 10px;
}
- .feature-card--benefit .feature-card__title,
- .feature-card--model .feature-card__title {
- font-size: 15px;
- line-height: 20px;
- margin-bottom: 0;
- overflow: visible;
- text-overflow: clip;
+ .feature-card--activity,
+ .feature-card--model {
+ color: #087af4;
}
- .feature-card--benefit .feature-card__icon,
- .feature-card--model .feature-card__icon {
- position: static;
- 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--activity .feature-card__action,
+ .feature-card--model .feature-card__action {
+ background: rgba(211, 232, 255, .72);
}
.feature-card--benefit {
- background: linear-gradient(145deg, #fff1f4 0%, #ffd5dc 100%);
- color: #f35f74;
+ color: #f54d59;
}
- .feature-card--model {
- background: linear-gradient(145deg, #eef5ff 0%, #d9e8ff 100%);
- color: #5b83d7;
+ .feature-card--benefit .feature-card__action {
+ background: rgba(255, 232, 235, .78);
}
.feature-card--inclusive {
- grid-column: span 2;
- background: linear-gradient(145deg, #f2eeff 0%, #ded4ff 100%);
- color: #8063dc;
+ color: #6f4fee;
+ }
+
+ .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;
- margin: 10px;
- padding: 0 16px;
+ height: 48px;
+ margin: 15px 12px 7px;
+ 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 {
- position: relative;
+ .entry-panel__heading {
+ display: flex;
+ align-items: center;
flex-shrink: 0;
- color: #202124;
- font-size: 15px;
- line-height: 21px;
}
- .classroom-panel__title::after {
- content: "";
- position: absolute;
- left: 0;
- bottom: -5px;
+ .entry-panel__icon {
width: 22px;
- height: 2px;
- border-radius: 999px;
- background-color: #e13b4c;
+ height: 22px;
+ margin-right: 9px;
+ 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;
- color: #1989fa;
- font-size: 13px;
- line-height: 18px;
+ margin: 0 8px;
+ color: #087af4;
+ font-size: 12px;
+ 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;
- line-height: 18px;
+ font-size: 12px;
+ line-height: 17px;
white-space: nowrap;
}
@@ -830,42 +793,30 @@ const home = {
}
.policy-panel {
- height: 66px;
- margin: 10px;
- padding: 0 16px;
+ height: 48px;
+ margin: 0 12px 65px;
+ 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;
- line-height: 21px;
- }
-
- .policy-panel__title::after {
- content: "";
- position: absolute;
- left: 0;
- bottom: -5px;
- width: 22px;
- height: 2px;
- border-radius: 999px;
- background-color: #e13b4c;
+ font-size: 14px;
+ line-height: 20px;
+ font-weight: 600;
}
.policy-panel__action {
display: flex;
align-items: center;
color: #969799;
- font-size: 13px;
- line-height: 18px;
+ font-size: 12px;
+ line-height: 17px;
white-space: nowrap;
}
diff --git a/src/main/resources/views/platform/zhghh5/sys/home/index.html b/src/main/resources/views/platform/zhghh5/sys/home/index.html
index 81df2c23..d068476c 100644
--- a/src/main/resources/views/platform/zhghh5/sys/home/index.html
+++ b/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 = "work"
+ this.homeTabbarActive = "apps"
+ this.$store.commit("setActiveTarBar", "apps")
}
},
created() {