diff --git a/src/main/java/com/budwk/app/zhgh/learning/controller/LearningCourseDisplayController.java b/src/main/java/com/budwk/app/zhgh/learning/controller/LearningCourseDisplayController.java index cfb668bc..78c80258 100644 --- a/src/main/java/com/budwk/app/zhgh/learning/controller/LearningCourseDisplayController.java +++ b/src/main/java/com/budwk/app/zhgh/learning/controller/LearningCourseDisplayController.java @@ -84,7 +84,7 @@ public class LearningCourseDisplayController { /** * 查询课程展示列表。 * pageForm 传分页页码和每页条数；keyword、courseTypeId、recommendFlag 分别用于关键词、分类和推荐标识筛选； - * sortType 支持 default（综合排序）和 view_count（观看次数倒序）。返回值为 Pagination，list 中包含课程基础字段、课节数、总时长和观看次数。 + * sortType 支持 default（综合排序）和 view_count（观看次数倒序）。返回值为 Pagination，list 中包含课程基础字段、课节数、总时长、观看次数和当前用户学习进度。 */ public Result pageData(PageForm pageForm, String keyword, String courseTypeId, String recommendFlag, String sortType) { Cnd cnd = Cnd.where("c.status", "=", "published"); @@ -112,6 +112,9 @@ public class LearningCourseDisplayController { SELECT c.id, c.courseName, c.courseIntro, c.startTime, c.endTime, c.openType, c.cover, c.recommendFlags, c.courseTypeId, c.lecturerName, c.sortNum, COALESCE(c.viewCount, 0) AS viewCount, t.typeName AS courseTypeName, + COALESCE((SELECT ROUND(AVG(IFNULL(sr.progressPercent, 0))) + FROM learning_study_record sr + WHERE sr.courseId = c.id AND sr.userId = @userId), 0) AS progressPercent, (SELECT COUNT(1) FROM learning_outline_resource r WHERE r.courseId = c.id AND r.status = 'enabled') AS resourceCount, COALESCE((SELECT SUM(r.durationSeconds) FROM learning_outline_resource r @@ -122,6 +125,7 @@ public class LearningCourseDisplayController { ORDER BY $orderBy """); listSql.setCondition(cnd); + listSql.params().set("userId", SecurityUtil.getUserId()); // 排序字段由固定选项映射，禁止将前端参数直接拼接进SQL。 listSql.setVar("orderBy", "view_count".equals(sortType) ? "COALESCE(c.viewCount, 0) DESC, c.sortNum ASC, c.createdAt DESC" diff --git a/src/main/java/com/budwk/app/zhgh/spread/h5controller/H5SpreadDisplayController.java b/src/main/java/com/budwk/app/zhgh/spread/h5controller/H5SpreadDisplayController.java new file mode 100644 index 00000000..7ad9990e --- /dev/null +++ b/src/main/java/com/budwk/app/zhgh/spread/h5controller/H5SpreadDisplayController.java @@ -0,0 +1,98 @@ +package com.budwk.app.zhgh.spread.h5controller; + +import cn.dev33.satoken.annotation.SaCheckLogin; +import com.budwk.app.base.param.PageForm; +import com.budwk.app.base.result.Result; +import com.budwk.app.zhgh.spread.service.SpreadCategoryService; +import com.budwk.app.zhgh.spread.service.SpreadContentService; +import io.swagger.annotations.ApiOperation; +import org.nutz.ioc.loader.annotation.Inject; +import org.nutz.ioc.loader.annotation.IocBean; +import org.nutz.mvc.annotation.At; +import org.nutz.mvc.annotation.Ok; + +/** + * 风采墙 H5 展示控制器，提供栏目、列表和内容详情预览。 + */ +@IocBean +@Ok("json:full") +@At("/platform/h5/spread") +public class H5SpreadDisplayController { + + @Inject + private SpreadCategoryService categoryService; + + @Inject + private SpreadContentService contentService; + + /** + * 打开风采墙 H5 预览页面。 + */ + @At("") + @Ok("beetl:/platform/zhghh5/spread/display/index.html") + @SaCheckLogin + public void index() { + } + + /** + * 查询 H5 端可见栏目树。 + * + * @return 按层级组织的可见栏目 + */ + @At + @SaCheckLogin + @ApiOperation("H5可见栏目树") + public Result categoryTree() { + return Result.success(categoryService.categoryTree(true)); + } + + /** + * 查询指定栏目及其子栏目的已发布内容。 + * + * @param pageForm 分页参数 + * @param categoryId 栏目 ID + * @param title 标题模糊查询条件 + * @return 已发布内容分页数据 + */ + @At + @SaCheckLogin + @ApiOperation("H5已发布内容分页") + public Result pageData(PageForm pageForm, String categoryId, String title) { + return Result.success(contentService.pagePublished(pageForm, categoryId, title)); + } + + /** + * 查询 H5 内容详情。 + * + * @param id 内容 ID + * @return 内容详情 + */ + @At + @SaCheckLogin + @ApiOperation("H5内容详情") + public Result detailData(String id) { + try { + return Result.success(contentService.getContent(id)); + } catch (RuntimeException e) { + return Result.error(e.getMessage()); + } + } + + /** + * 登记 H5 内容浏览量。 + * + * @param id 内容 ID + * @return 操作结果 + */ + @At + @SaCheckLogin + @ApiOperation("H5增加浏览量") + public Result addView(String id) { + try { + contentService.addViewCount(id); + return Result.success(); + } catch (RuntimeException e) { + return Result.error(e.getMessage()); + } + } +} diff --git a/src/main/java/com/budwk/app/zhgh/spread/service/SpreadContentService.java b/src/main/java/com/budwk/app/zhgh/spread/service/SpreadContentService.java index 120eb588..e61d1e80 100644 --- a/src/main/java/com/budwk/app/zhgh/spread/service/SpreadContentService.java +++ b/src/main/java/com/budwk/app/zhgh/spread/service/SpreadContentService.java @@ -16,6 +16,16 @@ public interface SpreadContentService extends BaseService { Pagination pagePublished(PageForm pageForm, String categoryId); + /** + * 分页查询指定栏目中标题匹配的已发布内容。 + * + * @param pageForm 分页参数 + * @param categoryId 栏目 ID，查询时包含该栏目的直接子栏目 + * @param title 标题模糊查询条件 + * @return 已发布内容分页数据 + */ + Pagination pagePublished(PageForm pageForm, String categoryId, String title); + SpreadContent getContent(String id); void saveContent(SpreadContent content); diff --git a/src/main/java/com/budwk/app/zhgh/spread/service/impl/SpreadContentServiceImpl.java b/src/main/java/com/budwk/app/zhgh/spread/service/impl/SpreadContentServiceImpl.java index 9871199d..e71339ef 100644 --- a/src/main/java/com/budwk/app/zhgh/spread/service/impl/SpreadContentServiceImpl.java +++ b/src/main/java/com/budwk/app/zhgh/spread/service/impl/SpreadContentServiceImpl.java @@ -62,8 +62,22 @@ public class SpreadContentServiceImpl extends BaseServiceImpl imp @Override public Pagination pagePublished(PageForm pageForm, String categoryId) { + return pagePublished(pageForm, categoryId, null); + } + + /** + * 分页查询指定栏目中标题匹配的已发布内容。 + * + * @param pageForm 分页参数 + * @param categoryId 栏目 ID，查询时包含该栏目的直接子栏目 + * @param title 标题模糊查询条件 + * @return 已发布内容分页数据 + */ + @Override + public Pagination pagePublished(PageForm pageForm, String categoryId, String title) { SpreadContentQuery query = new SpreadContentQuery(); query.setCategoryId(categoryId); + query.setTitle(title); query.setIsPublished(1); Cnd cnd = buildCondition(query); Sql countSql = Sqls.create("SELECT COUNT(1) FROM spread_content c $condition"); diff --git a/src/main/resources/static/assets/mobile/img/home/v4/hero-campus.png b/src/main/resources/static/assets/mobile/img/home/v4/hero-campus.png index 7504dca5..d93173b4 100644 Binary files a/src/main/resources/static/assets/mobile/img/home/v4/hero-campus.png and b/src/main/resources/static/assets/mobile/img/home/v4/hero-campus.png differ diff --git a/src/main/resources/static/assets/platform/css/h5.css b/src/main/resources/static/assets/platform/css/h5.css index f129def1..811dcd66 100644 --- a/src/main/resources/static/assets/platform/css/h5.css +++ b/src/main/resources/static/assets/platform/css/h5.css @@ -124,11 +124,44 @@ body { } .custom-list-loading { - background-color: unset; + min-width: 72px; + padding: 10px 12px 9px; + border-radius: 12px; + color: #7890a8; + background-color: rgba(255, 255, 255, 0.94); + box-shadow: 0 5px 18px rgba(52, 91, 128, 0.12); } .custom-list-loading .van-icon { - font-size: 108px; + width: 48px; + height: 48px; + font-size: 48px; + transform-origin: center; + animation: smart-union-loading-breathe 1.15s ease-in-out infinite; +} + +.custom-list-loading .van-icon__image { + width: 100%; + height: 100%; + object-fit: contain; +} + +@keyframes smart-union-loading-breathe { + 0%, 100% { + opacity: 0.58; + transform: scale(0.92); + } + 50% { + opacity: 1; + transform: scale(1.03); + } +} + +.custom-list-loading .van-toast__text { + margin-top: 5px; + color: #7890a8; + font-size: 12px; + line-height: 16px; } .list-card { diff --git a/src/main/resources/views/layouts/platform_h5.html b/src/main/resources/views/layouts/platform_h5.html index 50966147..af7718d0 100644 --- a/src/main/resources/views/layouts/platform_h5.html +++ b/src/main/resources/views/layouts/platform_h5.html @@ -149,9 +149,10 @@ }) } - function createListLoading(icon = "https://preview.qiantucdn.com/58pic/35/39/61/62K58PICb88i68HEwVnm5_PIC2018.gif!qt480") { + function createListLoading(icon = "/assets/mobile/img/common/smart-union-loading.png") { return vant.Toast.loading({ icon: icon, + message: "加载中...", forbidClick: true, loadingType: "spinner", duration: 0, diff --git a/src/main/resources/views/platform/zhghh5/spread/display/index.html b/src/main/resources/views/platform/zhghh5/spread/display/index.html new file mode 100644 index 00000000..9673d147 --- /dev/null +++ b/src/main/resources/views/platform/zhghh5/spread/display/index.html @@ -0,0 +1,297 @@ + + + +
+ + + + +
+

{{detail.title}}

+
+ {{formatDate(detail.publishedAt || detail.createdAt)}}　{{detail.categoryName}}　 + {{detail.viewCount || 0}} +
+ +
{{detail.summary}}
+ + +
+ +
{{slide.title}}
+
+ + +
+
+
+ + + diff --git a/src/main/resources/views/platform/zhghh5/staffmanage/member/common/mobileMemberInfo.js b/src/main/resources/views/platform/zhghh5/staffmanage/member/common/mobileMemberInfo.js index 04b0e611..b799f659 100644 --- a/src/main/resources/views/platform/zhghh5/staffmanage/member/common/mobileMemberInfo.js +++ b/src/main/resources/views/platform/zhghh5/staffmanage/member/common/mobileMemberInfo.js @@ -1,6 +1,29 @@ const MOBILE_MEMBER_INFO = { template: /*language=HTML*/ ` -
+
+
+

基本信息

+
姓名{{ viewData.username || '-' }}
+
性别{{ viewData.sex || '-' }}
+
民族{{ viewData.nation || '-' }}
+
出生日期{{ formatBirthday(viewData.birthday) }}
+
政治面貌{{ viewData.political || '-' }}
+
+ +
+

组织信息

+
工作单位{{ viewData.unitName || '-' }}
+
所属工会{{ viewData.unionName || '-' }}
+
人员类型{{ viewData.personType || '-' }}
+
+ +
+

联系方式

+
联系电话{{ maskMobile(viewData.mobile) }}
+
电子邮箱{{ viewData.email || '-' }}
+
+
+
{{ viewData.loginname }} {{ viewData.username }} @@ -61,7 +84,8 @@
`, props: { - userId: { type: String, required: true } + userId: { type: String, required: true }, + profileMode: { type: Boolean, default: false } }, data() { return { @@ -77,6 +101,18 @@ } }, methods: { + formatBirthday(birthday) { + if (!birthday) { + return "-" + } + return this.$moment(birthday).format("YYYY-MM-DD") + }, + maskMobile(mobile) { + if (!mobile) { + return "-" + } + return mobile.replace(/^(\d{3})\d+(\d{4})$/, "$1****$2") + }, findUserInfoByUserId() { if (!this.userId) { return diff --git a/src/main/resources/views/platform/zhghh5/sys/home/apps.js b/src/main/resources/views/platform/zhghh5/sys/home/apps.js index c2dbf74d..50d0791f 100644 --- a/src/main/resources/views/platform/zhghh5/sys/home/apps.js +++ b/src/main/resources/views/platform/zhghh5/sys/home/apps.js @@ -6,13 +6,19 @@ const apps = { +
+
+
工会服务，一站直达
+
常用应用与业务办理便捷入口
+
+
+
@@ -22,24 +28,20 @@ const apps = { :class="['nav-item', { active: activeTab === index }]" @click="onClickNav(index)" > -
- - - -
{{ category.name }}
-
+
+ {{ allCategories[activeTab] ? allCategories[activeTab].name : '全部应用' }} +
加载中...
-
+ @touchend="onTouchEnd" + @touchmove="onTouchMove">
- +
-
{{ app.name }}
+
+
{{ app.name }}
+
{{ app.aliasName || app.note }}
+
+ +
{{ section.name }}
-
+
-
{{ menu.name }}
+
+
{{ menu.name }}
+
{{ menu.aliasName || menu.note }}
+
+
@@ -85,7 +96,7 @@ const apps = {
- +
{{ currentApp.name }}
@@ -98,12 +109,17 @@ const apps = { class="grid-item" @click="navigateToMenu(menu)" > - +
+ +
-
{{ menu.name }}
-
{{ menu.aliasName }}
+
+
{{ menu.name }}
+
{{ menu.aliasName || menu.note }}
+
+
@@ -432,6 +448,65 @@ const apps = { flex-direction: column; height: calc(100vh - 50px); overflow: hidden; + background: #f5f7fa; + } + + .apps-container .van-search { + padding: 8px 12px; + background: #fff; + } + + .apps-container .van-search__content { + border-radius: 18px; + background: #f3f5f8; + } + + .apps-guide-banner { + position: relative; + flex: 0 0 132px; + margin: 0 12px 10px; + border-radius: 9px; + overflow: hidden; + background: #168cff url('/assets/mobile/img/home/v4/apps-guide-banner.png') right top / cover no-repeat; + } + + .apps-guide-copy { + position: relative; + z-index: 1; + width: 58%; + height: 100%; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 0 0 16px; + color: #fff; + } + + .apps-guide-title { + font-size: 20px; + line-height: 1.35; + font-weight: 700; + } + + .apps-guide-desc { + margin-top: 7px; + font-size: 12px; + line-height: 1.4; + opacity: 0.94; + } + + .tree-content-title { + position: relative; + display: flex; + align-items: center; + min-height: 38px; + box-sizing: border-box; + padding-left: 16px; + border-bottom: 1px solid #eef1f5; + color: #1677ff; + font-size: 13px; + font-weight: 600; } /* 自定义树形选择组件样式 */ @@ -439,7 +514,6 @@ const apps = { display: flex; min-height: 0; flex: 1; - height: calc(100vh - 150px); background: #fff; } @@ -458,12 +532,12 @@ const apps = { .nav-item { position: relative; - padding: 12px 8px; + min-height: 54px; + padding: 8px 10px; + box-sizing: border-box; cursor: pointer; transition: all 0.2s ease; - border-bottom: 1px solid #ebedf0; display: flex; - flex-direction: column; align-items: center; justify-content: center; } @@ -487,30 +561,17 @@ const apps = { background: #1989fa; } - .nav-icon { - font-size: 18px; - margin-bottom: 6px; - color: inherit; - } - .nav-text { - font-size: 12px; - font-weight: 500; + font-size: 13px; + font-weight: 400; text-align: center; - line-height: 1.2; - word-break: break-all; + line-height: 1.35; + color: #64748b; } - .nav-indicator { - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); - width: 0; - height: 0; - border-left: 6px solid #1989fa; - border-top: 6px solid transparent; - border-bottom: 6px solid transparent; + .nav-item.active .nav-text { + color: #1677ff; + font-weight: 600; } .tree-content { @@ -530,57 +591,43 @@ const apps = { } .module-sections { - padding: 12px 12px 18px; + padding: 0 12px 18px; background: #fff; } .module-section { - padding: 0 0 18px; + padding: 0; } .module-section + .module-section { - border-top: 1px solid #f1f3f6; - padding-top: 14px; + padding-top: 8px; } .module-title { position: relative; - padding-left: 10px; - margin-bottom: 10px; + padding: 12px 0 8px; color: #202733; - font-size: 15px; - font-weight: 700; + font-size: 13px; + font-weight: 600; line-height: 1.4; } .module-title::before { - content: ''; - position: absolute; - left: 0; - top: 4px; - width: 3px; - height: 14px; - border-radius: 2px; - background: #1989fa; + display: none; } .module-grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 10px 8px; - } - - .module-grid-single { - grid-template-columns: repeat(3, minmax(0, 1fr)); + display: block; } .module-feature { min-width: 0; display: flex; - flex-direction: column; align-items: center; - padding: 8px 2px; - border-radius: 8px; + min-height: 68px; + padding: 9px 2px; + box-sizing: border-box; + border-bottom: 1px solid #edf1f5; background: #fff; } @@ -589,67 +636,74 @@ const apps = { } .module-feature-img { + flex: 0 0 42px; width: 42px; height: 42px; object-fit: contain; - margin-bottom: 6px; + margin-right: 10px; } .module-feature-icon { + flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; - margin-bottom: 6px; - color: #ffffff; - background: linear-gradient(135deg, #2f8af5 0%, #49c3dc 100%); + margin-right: 10px; + color: #168cff; + background: #eef6ff; + } + + .module-feature-info { + flex: 1; + min-width: 0; } .module-feature-name { width: 100%; - color: #323233; - font-size: 13px; - line-height: 1.25; - text-align: center; + color: #172033; + font-size: 14px; + line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + .module-feature-desc { + margin-top: 3px; + color: #8a94a6; + font-size: 11px; + line-height: 1.35; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .module-feature-arrow, + .app-grid-arrow { + flex: 0 0 auto; + margin-left: 8px; + color: #9eb0c8; + font-size: 14px; + } + .app-grid { - display: grid; - /* 改为自适应列数：每格最小 80px，自动换行 */ - grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); - - justify-items: center; /* 子项内容居中（图标和文字） */ - justify-content: start; /* 整体网格靠左对齐，避免居中 */ - - gap: 12px; - padding: 12px; + display: block; + padding: 0 12px 18px; background: #fff; overflow-x: hidden; } - .app-grid-single { - display: flex; - justify-content: start; - padding: 16px 0; - } - - .app-grid-single .app-grid-item { - max-width: 80px; - margin: 0 12px; - } - .app-grid-item { position: relative; display: flex; - flex-direction: column; align-items: center; - padding: 12px 4px; - border-radius: 8px; + min-height: 68px; + padding: 9px 2px; + box-sizing: border-box; + border-bottom: 1px solid #edf1f5; background: #fff; width: 100%; max-width: 100%; @@ -665,27 +719,49 @@ const apps = { display: flex; align-items: center; justify-content: center; - margin-bottom: 6px; + margin-right: 10px; overflow: hidden; /*border: 2px solid transparent;*/ transition: all 0.2s ease; } + .app-grid-icon img { + width: 45px; + height: 45px; + object-fit: contain; + } + + .app-grid-info { + flex: 1; + min-width: 0; + } + .app-grid-name { width: 100%; font-size: 14px; - color: #323233; - text-align: center; + line-height: 1.4; + color: #172033; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - .app-grid-item.is-favorite .app-grid-icon, - .app-grid-icon.is-favorite { - border-color: #ff9800; - box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2); + .app-grid-desc { + margin-top: 3px; + color: #8a94a6; + font-size: 11px; + line-height: 1.35; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .app-grid-favorite { + flex: 0 0 auto; + margin-left: 8px; + color: #ffb020; + font-size: 18px; } @@ -722,15 +798,17 @@ const apps = { /deep/ .menu-grid { flex: 1; overflow-y: auto; - display: grid; - grid-template-columns: repeat(3, 1fr); + display: block; + padding: 0 16px 12px; } /deep/ .grid-item { display: flex; - flex-direction: column; align-items: center; - padding: 20px 12px; + min-height: 70px; + padding: 10px 0; + box-sizing: border-box; + border-bottom: 1px solid #edf1f5; background: #fff; cursor: pointer; transition: all 0.2s ease; @@ -738,7 +816,6 @@ const apps = { } /deep/ .grid-item:active { - transform: scale(0.95); background: #f2f3f5; } @@ -750,28 +827,40 @@ const apps = { display: flex; align-items: center; justify-content: center; - margin-bottom: 12px; + margin-right: 12px; color: #fff; } + /deep/ .grid-img-wrap { + flex: 0 0 56px; + width: 56px; + height: 56px; + padding: 4px; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + margin-right: 8px; + overflow: visible; + } + /deep/ .grid-img { width: 48px; height: 48px; - border-radius: 12px; - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 12px; - color: #fff; + display: block; + object-fit: contain; + } + + /deep/ .grid-info { + flex: 1; + min-width: 0; } /deep/ .grid-name { font-size: 14px; - font-weight: 500; - color: #323233; - text-align: center; - margin-bottom: 4px; - line-height: 1.2; + font-weight: 600; + color: #172033; + line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -780,10 +869,20 @@ const apps = { } /deep/ .grid-desc { + margin-top: 3px; font-size: 12px; color: #969799; - text-align: center; - line-height: 1.2; + line-height: 1.35; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + /deep/ .grid-arrow { + flex: 0 0 auto; + margin-left: 8px; + color: #9eb0c8; + font-size: 14px; } /deep/ .menu-name { diff --git a/src/main/resources/views/platform/zhghh5/sys/home/home.js b/src/main/resources/views/platform/zhghh5/sys/home/home.js index 87b66a4c..ca283d3e 100644 --- a/src/main/resources/views/platform/zhghh5/sys/home/home.js +++ b/src/main/resources/views/platform/zhghh5/sys/home/home.js @@ -1,8 +1,16 @@ const home = { template: /*language=HTML*/ `
-
+
+ + + 智慧工会 +
+
+
-
-
- - 我的课堂 +
+
+
我的课堂
+
+ 全部课程 + +
-
{{ currentClassroomCourseName }}
-
- 个人学习 - +
+
+
+ +
{{ course.courseTypeName || '课程' }}
+ + {{ getCourseRecommendName(course.recommendFlags) }} + +
+
+
{{ course.courseName || '未命名课程' }}
+
+ {{ course.courseTypeName }} + 讲师：{{ course.lecturerName }} +
+
+ {{ course.viewCount || 0 }}次观看 + 我的进度 {{ course.progressPercent || 0 }}% +
+
+ +
+
+
+
暂无课程
+
+ +
+
+
工会动态
+
+ 全部动态 + +
+
+
+
{{ category.name }}
+
+
+
{{ category.name }}
+
+
+
+ +
+
{{ item.title }}
+
+ {{ item.summary || item.subTitle }} +
+
+ {{ formatSpreadDate(item.publishedAt || item.createdAt) }} + + + {{ item.viewCount || 0 }} + +
+
+
+
+
暂无动态
@@ -121,18 +205,16 @@ 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, + classroomRecommendOptions: [], + showHomeSummary: false, + homeScrollContainer: null, + spreadCategories: [], + spreadParentId: "", + spreadCategoryId: "", + spreadDynamics: [], + spreadLoading: false, + spreadLoadSeq: 0, showLatestActivity: false, featuredEntries: [ { @@ -197,9 +279,9 @@ const home = { currentBanner() { return this.bannerList[this.activeBannerIndex] || this.bannerList[0] || {} }, - currentClassroomCourseName() { - const course = this.classroomCourses[this.classroomCourseIndex] - return course && course.courseName ? course.courseName : "二十大精神" + spreadChildren() { + const parent = this.spreadCategories.find(item => item.id === this.spreadParentId) + return parent && parent.children ? parent.children : [] } }, methods: { @@ -353,8 +435,6 @@ const home = { const cached = this.readHomeCache("classroom") if (cached && cached.length) { this.classroomCourses = cached - this.classroomCourseIndex = 0 - this.startClassroomCourseTimer() } this.$axios.post("/platform/learning/course/display/pageData", { pageNumber: 1, @@ -363,34 +443,140 @@ const home = { if (res.code === 0) { const data = res.data || {} this.classroomCourses = data.list || [] - this.classroomCourseIndex = 0 this.writeHomeCache("classroom", this.classroomCourses, this.homeCacheTtl.classroom) - this.startClassroomCourseTimer() } }).catch(() => { if (!cached) { this.classroomCourses = [] - this.classroomCourseIndex = 0 } }) }, - startClassroomCourseTimer() { - if (this.classroomCourseTimer) { - clearInterval(this.classroomCourseTimer) - this.classroomCourseTimer = null + listClassroomRecommendOptions() { + this.$axios.post("/platform/learning/course/display/recommendOptions").then((res) => { + if (res.code === 0) { + this.classroomRecommendOptions = res.data || [] + } + }).catch(() => { + this.classroomRecommendOptions = [] + }) + }, + getCourseCover(cover) { + if (!cover) return "" + if (Array.isArray(cover)) { + const first = cover[0] + return first && (first.url || first.data || (first.response && first.response.data)) || "" } - if (this.classroomCourses.length <= 1) { + if (typeof cover !== "string") return "" + const text = cover.trim() + if (!text) return "" + if (!text.startsWith("[")) return text + try { + const files = JSON.parse(text) + const first = files[0] + return first && (first.url || first.data || (first.response && first.response.data)) || "" + } catch (e) { + return "" + } + }, + getCourseRecommendName(flags) { + const code = flags ? flags.split(",").filter(Boolean)[0] : "" + if (!code) return "" + const option = this.classroomRecommendOptions.find(item => item.code === code) + return option ? option.name : code + }, + listSpreadCategories() { + this.$axios.post("/platform/h5/spread/categoryTree").then((res) => { + if (res.code !== 0) { + return + } + this.spreadCategories = res.data || [] + const firstParent = this.spreadCategories[0] + if (!firstParent) { + this.spreadDynamics = [] + return + } + this.spreadParentId = firstParent.id + const children = firstParent.children || [] + this.spreadCategoryId = children.length ? children[0].id : firstParent.id + this.listSpreadHomeContent(this.spreadCategoryId) + }).catch(() => { + this.spreadCategories = [] + this.spreadDynamics = [] + }) + }, + listSpreadHomeContent(categoryId) { + const loadSeq = ++this.spreadLoadSeq + this.spreadLoading = true + this.$axios.post("/platform/h5/spread/pageData", { + categoryId: categoryId, + pageNumber: 1, + pageSize: 5 + }).then((res) => { + if (loadSeq === this.spreadLoadSeq && res.code === 0) { + const data = res.data || {} + this.spreadDynamics = data.list || [] + } + }).catch(() => { + if (loadSeq === this.spreadLoadSeq) { + this.spreadDynamics = [] + } + }).finally(() => { + if (loadSeq === this.spreadLoadSeq) { + this.spreadLoading = false + } + }) + }, + changeSpreadParent(category) { + if (this.spreadParentId === category.id) { return } - this.classroomCourseTimer = setInterval(() => { - this.classroomCourseIndex = (this.classroomCourseIndex + 1) % this.classroomCourses.length - }, 3000) + this.spreadParentId = category.id + const children = category.children || [] + this.spreadCategoryId = children.length ? children[0].id : category.id + this.listSpreadHomeContent(this.spreadCategoryId) + }, + changeSpreadCategory(category) { + if (this.spreadCategoryId === category.id) { + return + } + this.spreadCategoryId = category.id + this.listSpreadHomeContent(category.id) + }, + getSpreadCover(value) { + if (!value) { + return "" + } + let files = value + if (typeof value === "string" && value.trim().startsWith("[")) { + try { + files = JSON.parse(value) + } catch (e) { + files = [] + } + } + if (!Array.isArray(files)) { + files = String(files).split(",") + } + const first = files[0] + if (typeof first === "string") { + return first.trim() + } + return first && (first.src || first.url || first.data || (first.response && first.response.data)) || "" + }, + formatSpreadDate(value) { + return value ? this.$moment(Number(value)).format("YYYY-MM-DD") : "" + }, + enterSpreadDetail(item) { + this.$pjaxReplace("/platform/h5/spread?id=" + encodeURIComponent(item.id)) + }, + enterSpreadList() { + this.$pjaxReplace("/platform/h5/spread") }, menuClick(item) { this.$pjaxReplace(item.href) }, getQuickEntryIcon(item) { - return this.quickEntryIcons[item.name] || item.picIcon || "" + return item.picIcon || "" }, featureClick(item) { if (item.href) { @@ -400,6 +586,16 @@ const home = { enterClassroom() { this.$pjaxReplace("/platform/learning/course/h5") }, + enterCourse(course) { + if (course && course.id) { + this.$pjaxReplace("/platform/learning/course/h5/study?id=" + encodeURIComponent(course.id)) + } + }, + handleHomeScroll() { + if (!this.homeScrollContainer) return + const heroHeight = this.$refs.homeHero ? this.$refs.homeHero.offsetHeight : 200 + this.showHomeSummary = this.homeScrollContainer.scrollTop >= Math.max(heroHeight - 48, 0) + }, bannerChange(index) { this.activeBannerIndex = index }, @@ -416,43 +612,129 @@ const home = { this.listHomeBrand() this.listRecommendApp() this.listClassroomCourses() + this.listClassroomRecommendOptions() + this.listSpreadCategories() if (this.showLatestActivity) { this.listActivity() } }, + mounted() { + this.homeScrollContainer = document.querySelector("body > .main-page .page-wrapper") + if (this.homeScrollContainer) { + this.homeScrollContainer.addEventListener("scroll", this.handleHomeScroll, {passive: true}) + this.handleHomeScroll() + } + }, beforeDestroy() { - if (this.classroomCourseTimer) { - clearInterval(this.classroomCourseTimer) - this.classroomCourseTimer = null + if (this.homeScrollContainer) { + this.homeScrollContainer.removeEventListener("scroll", this.handleHomeScroll) } }, style: /*language=CSS*/ ` + .home-page { + padding-bottom: 65px; + box-sizing: border-box; + } + + .home-summary-bar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 30; + height: 48px; + padding: 0 16px; + display: flex; + align-items: center; + opacity: 0; + color: #202124; + background-color: rgba(255, 255, 255, .96); + border-bottom: 1px solid rgba(224, 230, 238, .9); + box-shadow: 0 3px 12px rgba(31, 72, 122, .08); + box-sizing: border-box; + transform: translateY(-100%); + transition: opacity .2s ease, transform .2s ease; + pointer-events: none; + } + + .home-summary-bar--visible { + opacity: 1; + transform: translateY(0); + pointer-events: auto; + } + + .home-summary-bar__logo { + width: 118px; + height: 28px; + display: block; + object-fit: contain; + object-position: left center; + } + + .home-summary-bar__divider { + width: 1px; + height: 18px; + margin: 0 10px; + background-color: #dce3ec; + } + + .home-summary-bar__title { + color: #202124; + font-size: 16px; + line-height: 22px; + font-weight: 600; + white-space: nowrap; + } + .home-hero { position: relative; height: 200px; overflow: hidden; color: #fff; - background-color: #0878f7; + background: #0878f4; + } + + .home-hero__color-layer { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 100%; + z-index: 1; + pointer-events: none; + background: linear-gradient(111deg, + #0561e9 0%, + #0873f0 45%, + rgba(9, 132, 244, .96) 51%, + rgba(10, 150, 247, .72) 58%, + rgba(10, 158, 247, .4) 65%, + rgba(10, 158, 247, .14) 71%, + rgba(10, 158, 247, 0) 75%); + -webkit-clip-path: polygon(0 0, 90% 0, 70% 100%, 0 100%); + clip-path: polygon(0 0, 90% 0, 70% 100%, 0 100%); } .home-hero__bg { position: absolute; - inset: 0; + top: 0; + right: 0; + bottom: 0; width: 100%; height: 100%; object-fit: cover; - object-position: center; + object-position: 90% center; display: block; } .home-hero__content { position: relative; - z-index: 1; + z-index: 2; + width: 60%; display: flex; flex-direction: column; justify-content: center; height: 100%; - padding: 15px 20px 12px; + padding: 15px 0 12px 20px; box-sizing: border-box; } @@ -464,7 +746,9 @@ const home = { margin-bottom: 12px; } - .home-hero__brand-logo { +.home-hero__brand-logo { + transform: scale(1.15); + transform-origin: left center; display: block; width: 160px; height: 36px; @@ -712,20 +996,192 @@ const home = { color: #087af4; } - .classroom-panel { - height: 48px; - margin: 15px 12px 7px; - padding: 0 12px; - display: flex; - align-items: center; - justify-content: space-between; - border-radius: 8px; + .classroom-section { + margin: 10px 12px 7px; + padding: 13px 0 12px; + overflow: hidden; + border-radius: 10px; background-color: #fff; box-sizing: border-box; } - .classroom-panel:active { - transform: scale(.99); + .classroom-section__head { + padding: 0 12px 10px; + display: flex; + align-items: center; + justify-content: space-between; + } + + .classroom-section__title { + color: #202124; + font-size: 15px; + line-height: 21px; + font-weight: 600; + } + + .classroom-section__more { + display: flex; + align-items: center; + color: #969799; + font-size: 12px; + line-height: 18px; + } + + .classroom-section__more .van-icon { + margin-left: 4px; + font-size: 13px; + } + + .classroom-course-scroll { + padding: 0 12px 4px; + display: flex; + gap: 10px; + overflow-x: auto; + overflow-y: hidden; + scrollbar-width: none; + -webkit-overflow-scrolling: touch; + } + + .classroom-course-scroll::-webkit-scrollbar { + display: none; + } + + .classroom-course-card { + width: 238px; + flex: 0 0 238px; + overflow: hidden; + border: 1px solid #edf1f6; + border-radius: 8px; + background-color: #fff; + box-shadow: 0 3px 10px rgba(34, 76, 122, .07); + } + + .classroom-course-card:active { + transform: scale(.985); + } + + .classroom-course-cover { + position: relative; + height: 104px; + overflow: hidden; + background-color: #eaf2fb; + } + + .classroom-course-cover img { + width: 100%; + height: 100%; + display: block; + object-fit: cover; + } + + .classroom-course-cover__empty { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + color: #6b87a8; + font-size: 13px; + background: linear-gradient(135deg, #e8f2ff, #f3f8ff); + } + + .classroom-course-recommend { + position: absolute; + top: 8px; + left: 8px; + max-width: 90px; + padding: 2px 7px; + overflow: hidden; + color: #fff; + font-size: 10px; + line-height: 16px; + text-overflow: ellipsis; + white-space: nowrap; + border-radius: 999px; + background-color: rgba(255, 116, 52, .92); + } + + .classroom-course-content { + padding: 9px 10px 10px; + } + + .classroom-course-name { + overflow: hidden; + color: #202124; + font-size: 14px; + line-height: 20px; + font-weight: 600; + text-overflow: ellipsis; + white-space: nowrap; + } + + .classroom-course-tags { + height: 22px; + margin-top: 5px; + display: flex; + align-items: center; + gap: 6px; + overflow: hidden; + } + + .classroom-course-tag { + max-width: 82px; + padding: 1px 6px; + overflow: hidden; + color: #287ff0; + font-size: 10px; + line-height: 16px; + text-overflow: ellipsis; + white-space: nowrap; + border-radius: 3px; + background-color: #edf6ff; + } + + .classroom-course-lecturer { + min-width: 0; + overflow: hidden; + color: #7d8797; + font-size: 10px; + line-height: 16px; + text-overflow: ellipsis; + white-space: nowrap; + } + + .classroom-course-stats { + margin-top: 7px; + display: flex; + align-items: center; + justify-content: space-between; + color: #969daa; + font-size: 10px; + line-height: 15px; + } + + .classroom-course-stats .van-icon { + margin-right: 3px; + vertical-align: -1px; + } + + .classroom-course-progress { + height: 3px; + margin-top: 6px; + overflow: hidden; + border-radius: 3px; + background-color: #edf1f6; + } + + .classroom-course-progress span { + height: 100%; + display: block; + border-radius: inherit; + background-color: #287ff0; + } + + .classroom-empty { + padding: 18px 0 12px; + color: #9aa2af; + font-size: 12px; + line-height: 18px; + text-align: center; } .entry-panel__heading { @@ -746,55 +1202,13 @@ const home = { 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 8px; - color: #087af4; - font-size: 12px; - line-height: 17px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - text-align: center; - } - - .classroom-panel__action { - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: flex-end; - color: #969799; - font-size: 12px; - line-height: 17px; - white-space: nowrap; - } - - .classroom-panel__action .van-icon { - flex-shrink: 0; - margin-left: 4px; - font-size: 14px; - } - .policy-panel { height: 48px; - margin: 0 12px 65px; + margin: 0 12px 7px; padding: 0 12px; display: flex; align-items: center; @@ -825,6 +1239,205 @@ const home = { font-size: 14px; } + .union-news-panel { + margin: 15px 12px 7px; + padding: 13px 12px 8px; + border-radius: 10px; + background-color: #fff; + box-sizing: border-box; + } + + .union-news-panel__head { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 10px; + } + + .union-news-panel__title { + color: #202124; + font-size: 15px; + line-height: 21px; + font-weight: 600; + } + + .union-news-panel__more { + display: flex; + align-items: center; + color: #969799; + font-size: 12px; + line-height: 18px; + } + + .union-news-panel__more .van-icon { + margin-left: 4px; + font-size: 13px; + } + + .union-news-tabs { + height: 38px; + padding: 0; + display: flex; + overflow-x: auto; + overflow-y: hidden; + gap: 0; + border-bottom: 1px solid #edf1f6; + border-radius: 0; + background-color: transparent; + box-sizing: border-box; + scrollbar-width: none; + -webkit-overflow-scrolling: touch; + } + + .union-news-tabs::-webkit-scrollbar { + display: none; + } + + .union-news-tabs--secondary { + height: 32px; + margin-top: 8px; + padding: 0; + gap: 6px; + border-bottom: 0; + border-radius: 0; + background-color: transparent; + } + + .union-news-tab { + position: relative; + min-width: 96px; + padding: 0 8px; + flex: 1 0 calc((100% - 6px) / 3); + display: flex; + align-items: center; + justify-content: center; + color: #7d8797; + font-size: 12px; + line-height: 18px; + white-space: nowrap; + border-radius: 7px; + box-sizing: border-box; + } + + .union-news-tab--secondary { + min-width: 88px; + height: 28px; + padding: 0 12px; + flex: 1 0 calc((100% - 12px) / 3); + color: #969daa; + font-size: 11px; + border: 1px solid #e7ecf3; + border-radius: 999px; + background-color: #fafbfd; + } + + .union-news-tab--active { + color: #087af4; + font-weight: 600; + } + + .union-news-tabs--primary .union-news-tab--active { + color: #087af4; + background-color: transparent; + background-image: linear-gradient(#087af4, #087af4); + background-repeat: no-repeat; + background-position: center bottom; + background-size: 24px 2px; + box-shadow: none; + } + + .union-news-tabs--primary .union-news-tab--active::after { + content: none; + } + + .union-news-tabs--secondary .union-news-tab--active { + color: #087af4; + border-color: #b9d8ff; + background-color: #edf6ff; + } + + .union-news-list { + margin-top: 7px; + } + + .union-news-item { + min-height: 58px; + padding: 8px 0; + display: flex; + align-items: center; + box-sizing: border-box; + } + + .union-news-item + .union-news-item { + border-top: 1px solid #f2f4f7; + } + + .union-news-item:active { + background-color: #f7faff; + } + + .union-news-item__cover { + width: 80px; + height: 48px; + margin-right: 10px; + flex-shrink: 0; + border-radius: 4px; + object-fit: cover; + } + + .union-news-item__content { + min-width: 0; + flex: 1; + } + + .union-news-item__title { + overflow: hidden; + color: #202124; + font-size: 13px; + line-height: 19px; + font-weight: 600; + text-overflow: ellipsis; + white-space: nowrap; + } + + .union-news-item__summary { + margin-top: 2px; + overflow: hidden; + color: #7d8797; + font-size: 10px; + line-height: 15px; + text-overflow: ellipsis; + white-space: nowrap; + } + + .union-news-item__meta { + margin-top: 3px; + display: flex; + align-items: center; + justify-content: space-between; + color: #9aa2af; + font-size: 10px; + line-height: 14px; + } + + .union-news-item__views { + display: inline-flex; + align-items: center; + } + + .union-news-item__views .van-icon { + margin-right: 3px; + font-size: 11px; + } + + .union-news-empty { + padding: 18px 0 14px; + color: #9aa2af; + font-size: 12px; + line-height: 18px; + text-align: center; + } + .act-list { background-color: #fff; margin: 10px; 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 d068476c..2abe7bf2 100644 --- a/src/main/resources/views/platform/zhghh5/sys/home/index.html +++ b/src/main/resources/views/platform/zhghh5/sys/home/index.html @@ -15,7 +15,7 @@ layout("/layouts/platform_h5.html"){ - +
@@ -60,6 +60,10 @@ layout("/layouts/platform_h5.html"){ homeTabbarChange(val) { this.$store.commit("setActiveTarBar", val) }, + switchHomeTab(val) { + this.homeTabbarActive = val + this.$store.commit("setActiveTarBar", val) + }, moduleClick(val) { this.homeTabbarActive = "apps" this.$store.commit("setActiveTarBar", "apps") diff --git a/src/main/resources/views/platform/zhghh5/sys/home/mine.js b/src/main/resources/views/platform/zhghh5/sys/home/mine.js index ae50b4ce..ef739bfe 100644 --- a/src/main/resources/views/platform/zhghh5/sys/home/mine.js +++ b/src/main/resources/views/platform/zhghh5/sys/home/mine.js @@ -1,102 +1,148 @@ const mine = { template: /*language=HTML*/ `
- - -
-
-
-
- - - -
-
- {{ $store.state.user.userState }} -
-
+ +
+
+
+ + + +
- -
-
-

{{ $store.state.user.username }}

-
- - {{ $store.state.user.sex }} -
-
-
- 工号： - {{ $store.state.user.loginname }} -
+
+ {{ user.username || '-' }} + 工号：{{ user.loginname || '-' }} + 性别：{{ user.sex || '-' }}
-
- -
- - 在职状态 - {{ $store.state.user.userState }} +
+
+ 在职状态 + {{ user.userState || '-' }}
-
- - 所属单位 - {{ $store.state.user.unit.name }} +
+ 所属单位 + {{ unitName }}
-
- - 所属工会 - {{ $store.state.user.union.name }} +
+ 所属工会 + {{ unionName }}
-
+
-
- - - - - 个人信息 - - +
+
+
+

我的业务

+ +
+
+ + + + +
+
- - - - 我的签名 - - +
+
+

我的工具

+
+
+ + + + + + + + +
+
- - - - - - - -
- -
- 退出登录 -
+
+ 退出登录 +
+
`, computed: { + user() { + return this.$store.state.user || {} + }, + unitName() { + return (this.user.unit && this.user.unit.name) || "-" + }, + unionName() { + return (this.user.union && this.user.union.name) || "-" + }, + employmentStatusClass() { + const status = this.user.userState || "" + if (/离职|不在职|停职|辞退/.test(status)) { + return "mine-employment-status--inactive" + } + if (/退休|离休/.test(status)) { + return "mine-employment-status--retired" + } + if (/在职/.test(status)) { + return "mine-employment-status--active" + } + return "mine-employment-status--default" + }, avatar() { - const sex = this.$store.state.user.sex + const sex = this.user.sex if (sex === "男" || !sex) { return "/assets/platform/img/home/avatar_boy.png" - } else { - return "/assets/platform/img/home/avatar_girl.png" } + return "/assets/platform/img/home/avatar_girl.png" } }, methods: { + switchTab(tab) { + this.$store.commit("setActiveTarBar", tab) + this.$emit("switch-tab", tab) + }, logout() { this.$dialog .confirm({ @@ -112,261 +158,258 @@ const mine = { style() { return /*language=CSS*/ ` .home-mine { - background: #f7f8fa; + min-height: 100vh; + padding-bottom: 76px; + box-sizing: border-box; + background: #f3f6fa; + color: #15243a; } - .profile-card { - margin: 10px; - padding: 20px; - background: white; - border-radius: 12px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); - animation: slideIn 0.3s ease-out; - } - - .profile-header { - display: flex; - gap: 16px; - align-items: flex-start; - margin-bottom: 20px; - animation: slideIn 0.3s ease-out; - } - - .avatar-section { - flex-shrink: 0; - width: 80px; - } - - .avatar-wrapper { + .mine-hero { position: relative; - width: 80px; - height: 80px; + height: 154px; + box-sizing: border-box; + padding: 0 26px; + background: linear-gradient(90deg, #0878f9 0%, #35aff6 100%); } - .avatar { - border: 2px solid #f5f5f5; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); - transition: transform 0.3s; + /deep/ .mine-nav, + /deep/ .mine-nav .van-nav-bar { + background: linear-gradient(90deg, #0878f9 0%, #35aff6 100%) !important; } - .status-badge { + /deep/ .mine-nav .van-nav-bar__title { + color: #fff; + } + + .mine-user-summary { + display: flex; + align-items: center; + padding-top: 36px; + } + + .mine-avatar-wrap { + position: relative; + flex: 0 0 58px; + width: 58px; + height: 58px; + margin-right: 12px; + } + + .mine-avatar { + overflow: hidden; + box-sizing: border-box; + border: 2px solid rgba(255, 255, 255, 0.96); + background: #fff; + } + + .mine-online-dot { position: absolute; - bottom: -2px; - right: -2px; - background: rgba(255, 255, 255, 0.9); - color: #34c759; - padding: 2px 8px; - border-radius: 10px; - font-size: 12px; - display: flex; - align-items: center; - gap: 4px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - z-index: 1; - animation: fadeInScale 0.3s ease-out 0.2s backwards; - } - - .status-dot { - width: 6px; - height: 6px; - background: #34c759; + right: -1px; + bottom: 2px; + width: 11px; + height: 11px; + border: 2px solid #fff; border-radius: 50%; + background: #3dd0a0; } - .basic-info { - flex: 1; - padding-top: 4px; + .mine-user-text { display: flex; + min-width: 0; flex-direction: column; - gap: 8px; + color: #fff; + line-height: 1.45; } - .name-row { - display: flex; - align-items: center; - gap: 12px; - animation: slideLeft 0.3s ease-out; - } - - .username { - margin: 0; + .mine-user-text strong { + overflow: hidden; + max-width: 240px; + margin-bottom: 1px; font-size: 20px; - font-weight: 500; - color: #333; + font-weight: 600; + text-overflow: ellipsis; + white-space: nowrap; } - .gender-tag { + .mine-user-text span { + font-size: 14px; + opacity: 0.96; + } + + .mine-status-card { + position: absolute; + z-index: 2; + right: 12px; + bottom: -102px; + left: 12px; + display: grid; + min-height: 112px; + grid-template-columns: repeat(3, minmax(0, 1fr)); + align-items: center; + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.82); + border-radius: 12px; + background: #fff; + box-shadow: 0 12px 30px rgba(35, 82, 130, 0.13); + } + + .mine-status-item { + position: relative; + display: flex; + min-width: 0; + flex-direction: column; + align-items: center; + padding: 0 8px; + text-align: center; + } + + .mine-status-item + .mine-status-item::before { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 1px; + background: #e3ebf5; + content: ""; + } + + .mine-status-item strong { + overflow: hidden; + width: 100%; + margin-top: 18px; + color: #18263a; + font-size: 16px; + font-weight: 600; + line-height: 24px; + text-overflow: ellipsis; + white-space: nowrap; + } + + .mine-status-item span { + color: #75849b; + font-size: 13px; + } + + .mine-status-item .mine-employment-status--active { + color: #28b985; + } + + .mine-status-item .mine-employment-status--retired { + color: #f2a33a; + } + + .mine-status-item .mine-employment-status--inactive { + color: #e46a6a; + } + + .mine-status-item .mine-employment-status--default { + color: #718198; + } + + .mine-content { + padding: 124px 12px 22px; + } + + .mine-panel { + margin-bottom: 13px; + padding: 14px 10px 13px; + border: 1px solid rgba(255, 255, 255, 0.82); + border-radius: 12px; + background: #fff; + box-shadow: 0 12px 30px rgba(35, 82, 130, 0.13); + } + + .mine-panel-heading { + display: flex; + height: 28px; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #e3ebf5; + } + + .mine-panel-heading h2 { + margin: 0; + color: #18263a; + font-size: 17px; + font-weight: 600; + } + + .mine-panel-link { display: inline-flex; align-items: center; - gap: 4px; - background: #f5f5f5; - padding: 2px 10px; - border-radius: 20px; + padding: 0; + border: 0; + outline: 0; + background: transparent; + color: #75849b; font-size: 13px; - color: #666; } - .employee-id { - color: #666; - font-size: 15px; - animation: slideLeft 0.3s ease-out 0.1s backwards; + .mine-panel-link .van-icon { + margin-left: 5px; + color: #a8b6c8; } - .id-value { - color: #333; - font-weight: 500; - font-size: 16px; + .mine-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); } - .info-list { - margin-top: 20px; - padding-top: 20px; - border-top: 1px solid #f5f5f5; + .mine-business-grid { + padding-top: 19px; + } + + .mine-tools-grid { + padding-top: 18px; + row-gap: 22px; + } + + .mine-grid-item { display: flex; + min-width: 0; flex-direction: column; - gap: 0; - } - - .info-item { - display: flex; align-items: center; - gap: 8px; - font-size: 14px; - animation: slideLeft 0.3s ease-out; - transition: background-color 0.3s; - padding: 8px; - border-radius: 8px; + padding: 0 2px; + border: 0; + outline: 0; + background: transparent; + color: #173d68; } - .info-item:active { - background-color: #f5f5f5; + .mine-grid-item:active { + opacity: 0.65; } - .item-label { - color: #999; - width: 70px; + .mine-grid-item .van-icon { + height: 26px; + font-size: 25px; + line-height: 26px; } - .info-value { - color: #333; - flex: 1; + .mine-grid-item span { + overflow: hidden; + width: 100%; + margin-top: 9px; + color: #1c2b41; + font-size: 13px; + line-height: 18px; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; } - .info-item .van-icon { - font-size: 16px; - color: #666; - width: 20px; + .mine-logout-wrap { + padding-top: 4px; } - .action-cards { - margin: 10px; - animation: slideUp 0.3s ease-out; - } - - .action-cell { - padding: 16px !important; - } - - .cell-title { - display: flex; - align-items: center; - gap: 8px; - font-size: 15px; - color: #333; - } - - .cell-icon { - font-size: 18px; - color: #666; - } - - .logout-wrapper { - padding: 16px; - margin-top: 20px; - animation: fadeIn 0.3s ease-out; - } - - .logout-btn { + .mine-logout-btn { height: 44px; - font-size: 16px; - transition: opacity 0.3s; - } - - .logout-btn:active { - opacity: 0.8; - } - - /* 动画定义 */ - @keyframes slideIn { - from { - opacity: 0; - transform: translateY(-20px); - } - to { - opacity: 1; - transform: translateY(0); - } - } - - @keyframes slideLeft { - from { - opacity: 0; - transform: translateX(20px); - } - to { - opacity: 1; - transform: translateX(0); - } - } - - @keyframes slideUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } - } - - @keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } - } - - @keyframes fadeInScale { - from { - opacity: 0; - transform: scale(0.8); - } - to { - opacity: 1; - transform: scale(1); - } - } - - /* 为每个列表项添加延迟动画 */ - .info-item:nth-child(1) { - animation-delay: 0.1s; - } - - .info-item:nth-child(2) { - animation-delay: 0.2s; - } - - .info-item:nth-child(3) { - animation-delay: 0.3s; - } - - .info-item:nth-child(4) { - animation-delay: 0.4s; + border-color: #bdcbe0 !important; + background: rgba(255, 255, 255, 0.82) !important; + color: #718198 !important; + font-size: 15px; } ` } } - diff --git a/src/main/resources/views/platform/zhghh5/sys/home/todo.js b/src/main/resources/views/platform/zhghh5/sys/home/todo.js index 1b07a8f1..f420d9e2 100644 --- a/src/main/resources/views/platform/zhghh5/sys/home/todo.js +++ b/src/main/resources/views/platform/zhghh5/sys/home/todo.js @@ -1,10 +1,37 @@ const todo = { template: /*language=HTML*/ `
- + + + +
+
+
+
+ +
+
{{ todoCount }}
+
待办事项
+
+
+
+ +
+
{{ doneCount }}
+
已办事项
+
+
+
+ +
+
{{ startedCount }}
+
我发起的
+
+
+
- + @@ -44,6 +71,15 @@ const todo = { ref="tableListRef" @ready="doSearch" title="variable.instanceName"> +