diff --git a/src/main/java/com/budwk/app/zhgh/democratic/teachercongress/delegate/controller/TeacherCongressDelegateCardController.java b/src/main/java/com/budwk/app/zhgh/democratic/teachercongress/delegate/controller/TeacherCongressDelegateCardController.java index fbb3228f..958dd877 100644 --- a/src/main/java/com/budwk/app/zhgh/democratic/teachercongress/delegate/controller/TeacherCongressDelegateCardController.java +++ b/src/main/java/com/budwk/app/zhgh/democratic/teachercongress/delegate/controller/TeacherCongressDelegateCardController.java @@ -62,10 +62,9 @@ public class TeacherCongressDelegateCardController { private SysRoleService sysRoleService; @At("/h5") - @Ok("void") + @Ok("beetl:/platform/zhghh5/democratic/teachercongress/delegate/card/index.html") @SaCheckLogin - public void h5Index(HttpServletResponse response) throws IOException, WriterException { - showCard(response); + public void h5Index() { } @At diff --git a/src/main/resources/static/assets/mobile/img/democratic/teachercongress/delegate-card-holder.png b/src/main/resources/static/assets/mobile/img/democratic/teachercongress/delegate-card-holder.png new file mode 100644 index 00000000..7044be3a Binary files /dev/null and b/src/main/resources/static/assets/mobile/img/democratic/teachercongress/delegate-card-holder.png differ diff --git a/src/main/resources/views/platform/zhghh5/democratic/teachercongress/delegate/card/index.html b/src/main/resources/views/platform/zhghh5/democratic/teachercongress/delegate/card/index.html index a34b3f55..a2a9a1c4 100644 --- a/src/main/resources/views/platform/zhghh5/democratic/teachercongress/delegate/card/index.html +++ b/src/main/resources/views/platform/zhghh5/democratic/teachercongress/delegate/card/index.html @@ -2,54 +2,240 @@ layout("/layouts/platform_h5.html"){ #-->
- -
- 教代会代表证 +
+

请出示您的代表证

+
+
+ 代表证 +
+ + 代表证加载中... +
+
+ + {{ tipMsg || '暂无代表证' }} +
+
+ 代表证卡套 +
+ 保存到相册
{{ tipMsg }}
-
+
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 2625af21..36301992 100644 --- a/src/main/resources/views/platform/zhghh5/sys/home/apps.js +++ b/src/main/resources/views/platform/zhghh5/sys/home/apps.js @@ -569,10 +569,6 @@ const apps = { // 导航到菜单 navigateToMenu(menu) { - if (this.isTeacherCongressCardMenu(menu)) { - this.showTeacherCongressCard() - return - } // 关闭弹框 // this.showMenuPopup = false if (menu.href) { @@ -585,32 +581,6 @@ const apps = { } else { this.$toast('该功能暂不可用') } - }, - - isTeacherCongressCardMenu(menu) { - const href = (menu && menu.href) || "" - return href.indexOf("/platform/teacherCongress/delegate/card/") === 0 - }, - - showTeacherCongressCard() { - this.$axios.post("/platform/teacherCongress/delegate/card/isDb").then((resp) => { - if (resp.code !== 0) { - vant.Dialog.alert({ - title: "温馨提示", - message: resp.msg || "暂无教代会代表证" - }) - return - } - this.showMenuPopup = false - vant.ImagePreview([ - "/platform/teacherCongress/delegate/card/showCard?t=" + Date.now() - ]) - }).catch(() => { - vant.Dialog.alert({ - title: "温馨提示", - message: "代表证加载失败" - }) - }) } }, // 初始加载消除长按收藏 diff --git a/src/main/resources/views/platform/zhghh5/sys/home/msg.js b/src/main/resources/views/platform/zhghh5/sys/home/msg.js index 02b7d4ab..0ea428ef 100644 --- a/src/main/resources/views/platform/zhghh5/sys/home/msg.js +++ b/src/main/resources/views/platform/zhghh5/sys/home/msg.js @@ -1,139 +1,137 @@ -const msg= { +const msg = { template: /*language=HTML*/ `
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + +
+
+ + + +
+
+ + + + + + + +
+ +
- - - -
-
-
- - {{getMessageTypeName(message.type)}} - - - - 未读 - -
-
{{formatTime(message.sendTime || message.createdAt)}}
-
-
{{getContentPreview(message.content)}}
-
- -
+ +
+
+
+
+ +
+
+
+ + + +
+

{{ message.title || '消息通知' }}

+
+ {{ getMessageTypeName(message.type) }} + + + {{ formatTime(message.sendTime || message.createdAt || message.readTime) }} + +
+
+
+ + {{ message.isRead ? '已读' : '未读' }} + +
+

{{ getContentPreview(message.content) }}

+
+ + 查看详情 + + +
+
+
暂无消息
 - - - + + - - +
-

{{currentMessage.title}}

+

{{ detailMessage.title || '消息详情' }}

- - {{getMessageTypeName(currentMessage?.globalMessage?.type)}} + + {{ getMessageTypeName(detailMessage.type) }} - {{formatTime((currentMessage.globalMessage && currentMessage.globalMessage.sendTime) || currentMessage.createdAt)}} + {{ formatTime(detailMessage.sendTime || currentMessage.createdAt || currentMessage.readTime) }}
-
+
`, - data(){ - return{ - activeTab: '-1', + data() { + return { + activeTab: "-1", + heroVisible: true, + tabRevealProgress: 0, + scrollContainer: null, loading: false, + skeletonLoading: true, refreshing: false, finished: false, messages: [], @@ -142,40 +140,61 @@ const msg= { unread: 0, read: 0 }, - filters: { - type: '' - }, pageForm: { pageNumber: 1, pageSize: 10, totalCount: 0, - isRead: -1 + isRead: -1, + type: null, + searchKeyword: "" }, detailVisible: false, currentMessage: {}, showTypePicker: false, typeColumns: [ - { text: '全部类型', value: '' }, - { text: '系统公告', value: '1' }, - { text: '消息通知', value: '2' } + { text: "全部类型", value: null }, + { text: "系统公告", value: 1 }, + { text: "消息通知", value: 2 } ] } }, + computed: { + detailMessage() { + return this.currentMessage.globalMessage || {} + } + }, methods: { - // 加载统计数据 - async loadStats() { - try { - const resp = await this.$axios.get('/platform/v4/msg/stats') - if (resp.code === 0) { - this.stats = resp.data - } - } catch (error) { - console.error('加载统计数据失败:', error) - } + // Hero 接近顶部导航栏时按剩余高度渐显分类标签。 + initHeroObserver() { + this.scrollContainer = this.$el.closest(".page-wrapper") || document.scrollingElement + this.scrollContainer.addEventListener("scroll", this.updateHeroVisibility, {passive: true}) + this.updateHeroVisibility() }, - // 加载消息列表 + updateHeroVisibility() { + const hero = this.$refs.messageHero + const containerTop = this.scrollContainer ? this.scrollContainer.getBoundingClientRect().top : 0 + if (!hero) return + const heroBottom = hero.getBoundingClientRect().bottom + const revealProgress = (containerTop + 90 - heroBottom) / 44 + this.tabRevealProgress = Math.max(0, Math.min(1, revealProgress)) + this.heroVisible = this.tabRevealProgress < 1 + }, + + async loadStats() { + try { + const resp = await this.$axios.get("/platform/v4/msg/stats") + if (resp.code === 0) { + this.stats = resp.data + this.$emit("unread-count-change", Number(this.stats.unread) || 0) + } + } catch (error) { + console.error("加载统计数据失败:", error) + } + }, async loadMessages(isRefresh = false) { + const showSkeleton = isRefresh || !this.messages.length + if (showSkeleton) this.skeletonLoading = true if (isRefresh) { this.pageForm.pageNumber = 1 this.messages = [] @@ -184,41 +203,29 @@ const msg= { this.loading = true try { - const resp = await this.$axios.post('/platform/v4/msg/pageData', this.pageForm) + const resp = await this.$axios.post("/platform/v4/msg/pageData", this.pageForm) if (resp.code === 0) { const newMessages = resp.data.list || [] - if (isRefresh) { - this.messages = newMessages - } else { - this.messages = [...this.messages, ...newMessages] - } - + this.messages = isRefresh ? newMessages : this.messages.concat(newMessages) this.pageForm.totalCount = resp.data.totalCount - - // 判断是否还有更多数据 - if (this.messages.length >= this.pageForm.totalCount) { - this.finished = true - } + this.finished = this.messages.length >= this.pageForm.totalCount } else { this.$toast(resp.msg) } } catch (error) { - this.$toast('加载消息失败') + this.$toast("加载消息失败") } finally { this.loading = false this.refreshing = false + if (showSkeleton) this.skeletonLoading = false } }, - - // 查看消息详情 async viewMessage(message) { try { - const resp = await this.$axios.post(`/platform/v4/msg/detail/` + message.id) + const resp = await this.$axios.post("/platform/v4/msg/detail/" + message.id) if (resp.code === 0) { this.currentMessage = resp.data this.detailVisible = true - - // 如果是未读消息，标记为已读 if (!message.isRead) { await this.markAsRead(message.id) message.isRead = true @@ -226,65 +233,70 @@ const msg= { } } } catch (error) { - this.$toast('加载消息详情失败') + this.$toast("加载消息详情失败") } }, - - // 标记单条消息为已读 async markAsRead(messageId) { try { - await this.$axios.post(`/platform/v4/msg/read/` + messageId) + await this.$axios.post("/platform/v4/msg/read/" + messageId) } catch (error) { - console.error('标记已读失败:', error) + console.error("标记已读失败:", error) } }, - - // 全部标记为已读 async markAllAsRead() { this.$dialog.confirm({ - title: '提示', - message: '确定要将所有未读消息标记为已读吗？' + title: "提示", + message: "确定要将所有未读消息标记为已读吗？" }).then(async () => { this.loading = true try { - const resp = await this.$axios.post('/platform/v4/msg/read/all') + const resp = await this.$axios.post("/platform/v4/msg/read/all") if (resp.code === 0) { - this.$toast.success('操作成功') + this.$toast.success("操作成功") this.loadMessages(true) this.loadStats() } else { this.$toast(resp.msg) } } catch (error) { - this.$toast('操作失败') + this.$toast("操作失败") } finally { this.loading = false } - }).catch(() => { - // 用户取消 - }) + }).catch(() => {}) }, - - // 切换标签页 handleTabChange(name) { this.pageForm.isRead = parseInt(name) this.loadMessages(true) + this.keepTabsVisible() + }, + // 切换分类后停留在 Hero 刚好收起的位置，避免列表清空时页面回到顶部。 + keepTabsVisible() { + this.heroVisible = false + this.tabRevealProgress = 1 + this.$nextTick(() => { + window.requestAnimationFrame(() => { + const hero = this.$refs.messageHero + const container = this.scrollContainer + if (!hero || !container) return + const containerTop = container.getBoundingClientRect().top + const targetTop = container.scrollTop + hero.getBoundingClientRect().bottom - containerTop - 45 + container.scrollTop = Math.max(0, targetTop) + }) + }) }, - - // 点击统计卡片切换标签 switchTab(tabValue) { this.activeTab = tabValue.toString() this.pageForm.isRead = tabValue this.loadMessages(true) }, - - // 下拉刷新 + doSearch() { + this.loadMessages(true) + }, onRefresh() { this.loadMessages(true) this.loadStats() }, - - // 上拉加载更多 onLoad() { if (this.finished) { return @@ -292,320 +304,494 @@ const msg= { this.pageForm.pageNumber++ this.loadMessages() }, - - // 消息类型选择确认 onTypeConfirm(value) { - this.filters.type = value.value + this.pageForm.type = value.value this.showTypePicker = false this.loadMessages(true) }, - - // 获取消息类型名称 getMessageTypeName(type) { - return type === 1 ? '系统公告' : '消息通知' + return type === 1 ? "系统公告" : "消息通知" + }, + getMessageIconClass(type) { + return type === 1 ? "message-card-icon--notice" : "message-card-icon--system" }, - - // 获取内容预览 getContentPreview(content) { - if (!content) return '' - // 移除HTML标签 - const text = content.replace(/<[^>]*>/g, '') - return text.length > 60 ? text.substring(0, 30) + '...' : text + if (!content) { + return "暂无消息内容" + } + const text = content.replace(/<[^>]*>/g, "").trim() + return text.length > 52 ? text.substring(0, 52) + "..." : text }, - - // 格式化时间 formatTime(timestamp) { - if (!timestamp) return '' - return this.$moment(timestamp).format('MM-DD HH:mm') + if (!timestamp) { + return "时间未知" + } + return this.$moment(timestamp).format("MM-DD HH:mm") } }, - created() { this.loadStats() this.loadMessages(true) }, - + mounted() { + this.$nextTick(() => this.initHeroObserver()) + }, + beforeDestroy() { + if (this.scrollContainer) this.scrollContainer.removeEventListener("scroll", this.updateHeroVisibility) + }, style: /*language=CSS*/ ` .message-center { - background-color: #f5f7fa; min-height: 100vh; - padding-bottom: 20px; + padding-bottom: 72px; + box-sizing: border-box; + background: #f3f7fd; } + /deep/ .message-nav, + /deep/ .message-nav .van-nav-bar { + background-color: #0879f9 !important; + } + /deep/ .message-nav .van-nav-bar::after { + border-bottom: 0; + } - /* 自定义消息列表项样式 */ - /deep/ .custom-message-item { - background-color: #fff; - padding: 10px; - margin-bottom: 8px; - cursor: pointer; - transition: all 0.2s ease; + /deep/ .message-nav .van-nav-bar__title { + color: #fff; + font-size: 16px; + font-weight: 500; + } + + .message-hero { position: relative; - border-bottom: 1px solid #f0f0f0; - border-radius: 8px; + height: 112px; + background-color: #0879f9; } - /deep/ .custom-message-item:hover { - background-color: #f8f9fa; - } - - /deep/ .custom-message-item:active { - background-color: #f0f0f0; - } - - /deep/ .message-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 12px; - } - - /deep/ .message-time { - font-size: 12px; - color: #969799; - flex-shrink: 0; - margin-left: 12px; - } - - /deep/ .message-content { - font-size: 14px; - color: #646566; - line-height: 1.6; - margin-bottom: 8px; - padding-right: 20px; - } - - /deep/ .message-arrow { + .message-statistics { position: absolute; - right: 16px; - top: 50%; - transform: translateY(-50%); - color: #c8c9cc; + top: 8px; + right: 12px; + left: 12px; + display: flex; + height: 92px; + padding: 12px 6px 10px; + overflow: hidden; + box-sizing: border-box; + border-radius: 12px; + background: #fff; + box-shadow: 0 8px 22px rgba(28, 77, 137, 0.2); + } + + .message-statistic-item { + display: flex; + min-width: 0; + flex: 1; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 0; + border: 0; + outline: 0; + background: transparent; + } + + .message-statistic-item:active { + opacity: 0.7; + } + + .message-statistic-icon { + display: flex; + width: 28px; + height: 28px; + align-items: center; + justify-content: center; + border-radius: 50%; + color: #fff; + font-size: 17px; + } + + .message-statistic-icon--all { + background: #428bf4; + } + + .message-statistic-icon--unread { + background: #ffad3d; + } + + .message-statistic-icon--read { + background: #4cc994; + } + + .message-statistic-item strong { + margin-top: 4px; + color: #26364d; + font-size: 16px; + font-weight: 600; + line-height: 20px; + } + + .message-statistic-item > span:last-child { + color: #8d97a7; font-size: 12px; + line-height: 16px; } - /* 筛选区域样式 */ - /deep/ .filter-section { - padding: 12px 16px; - background-color: #fff; + /deep/ .message-tabs .van-tabs__wrap { + height: 52px; } - /deep/ .message-title-wrapper { + /deep/ .message-tabs .van-tabs__nav { + background: #fff; + } + + /deep/ .message-tabs .van-tab { + position: relative; + color: #7f8998; + font-size: 14px; + transition: color 0.2s, font-size 0.2s; + } + + /deep/ .message-tabs .van-tab:not(:last-child)::after { + position: absolute; + top: 13px; + right: 0; + bottom: 13px; + width: 1px; + background: #edf1f6; + content: ""; + transform: skewX(-18deg); + } + + /deep/ .message-tabs .van-tab--active { + color: #1989fa; + font-size: 16px; + font-weight: 600; + } + + /deep/ .message-tabs .van-tabs__line { + bottom: 7px; + width: 24px; + height: 4px; + border-radius: 4px; + background-color: #1989fa; + } + + /deep/ .message-tabs--hero-replacement { + position: fixed; + top: 46px; + right: 0; + left: 0; + z-index: 100; + transition: opacity 0.12s linear; + } + + /deep/ .van-sticky--fixed { + background: #f3f7fd; + } + + .message-search-section { + display: flex; + padding: 10px 12px; + align-items: center; + background: #f3f7fd; + } + + .message-search-section .van-search { + min-width: 0; + flex: 1; + padding: 0; + overflow: hidden; + border-radius: 12px; + background: #fff; + box-shadow: 0 4px 14px rgba(55, 85, 126, 0.07); + } + + /deep/ .message-search-section .van-search__content { + height: 42px; + padding-left: 13px; + align-items: center; + border-radius: 12px; + background: #fff; + } + + /deep/ .message-search-section .van-field__control { + font-size: 14px; + } + + .message-filter-button { + display: flex; + width: 34px; + height: 34px; + flex: 0 0 34px; + align-items: center; + justify-content: center; + margin-left: 6px; + padding: 0; + border: 0; + border-radius: 8px; + outline: 0; + background: #fff; + color: #2582ef; + font-size: 15px; + } + + .message-filter-button--active { + background: #eaf3ff; + } + + /deep/ .message-list { + min-height: calc(100vh - 140px); + padding: 8px 12px 0; + } + + /deep/ .message-skeleton-list { + min-height: calc(100vh - 140px); + padding: 8px 12px 0; + box-sizing: border-box; + } + + /deep/ .message-skeleton-card { + min-height: 176px; + margin-bottom: 12px; + padding: 20px 16px; + box-sizing: border-box; + border-radius: 12px; + background: #fff; + box-shadow: 0 7px 20px rgba(55, 85, 126, 0.06); + } + + /deep/ .message-skeleton-card .van-skeleton { + padding: 0; + } + + /deep/ .message-card { + margin-bottom: 12px; + padding: 16px; + border: 1px solid rgba(71, 111, 164, 0.05); + border-radius: 12px; + background: #fff; + box-shadow: 0 7px 20px rgba(55, 85, 126, 0.08); + } + + /deep/ .message-card:active { + background: #f9fbfd; + } + + /deep/ .message-card-header { + display: flex; + min-width: 0; + align-items: flex-start; + justify-content: space-between; + } + + /deep/ .message-card-title-wrap { + display: flex; + min-width: 0; + flex: 1; + align-items: flex-start; + } + + /deep/ .message-card-heading { + min-width: 0; + flex: 1; + } + + /deep/ .message-card-icon { + display: flex; + width: 38px; + height: 38px; + flex: 0 0 38px; + align-items: center; + justify-content: center; + margin-right: 10px; + border-radius: 10px; + font-size: 21px; + } + + /deep/ .message-card-icon--system { + color: #438df5; + background: #edf5ff; + } + + /deep/ .message-card-icon--notice { + color: #f3a032; + background: #fff5e8; + } + + /deep/ .message-card-title-wrap h3 { + overflow: hidden; + margin: 0; + color: #26364d; + font-size: 15px; + font-weight: 600; + line-height: 22px; + text-overflow: ellipsis; + white-space: nowrap; + } + + /deep/ .message-read-state { + flex: 0 0 auto; + margin-left: 8px; + padding: 3px 8px; + border-radius: 11px; + background: #fff5e8; + color: #f0a03a; + font-size: 12px; + line-height: 16px; + } + + /deep/ .message-read-state--read { + background: #f0f3f7; + color: #8b96a6; + } + + /deep/ .message-card-meta { + margin-top: 5px; display: flex; align-items: center; flex-wrap: wrap; - flex: 1; + gap: 6px 10px; } - /deep/ .message-title { - flex: 1; - /*font-weight: 500;*/ - color: #323233; + /deep/ .message-card-type { + padding: 2px 7px; + border-radius: 4px; + color: #397de0; + background: #edf5ff; + font-size: 11px; + line-height: 16px; + } + + /deep/ .message-card-time { + display: inline-flex; + align-items: center; + color: #8d97a7; + font-size: 12px; + line-height: 18px; + white-space: nowrap; + } + + /deep/ .message-card-time .van-icon { + margin-right: 4px; + color: #9eabba; + font-size: 13px; + } + + /deep/ .message-card-content { + overflow: hidden; + margin: 14px 0 0; + color: #637083; + font-size: 13px; + line-height: 20px; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } + + /deep/ .message-card-footer { + display: flex; + align-items: center; + justify-content: flex-end; + margin-top: 12px; + padding-top: 12px; + border-top: 1px solid #edf1f6; + } + + /deep/ .message-card-action { + min-width: 92px; + height: 32px; + padding: 0 14px; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + border-radius: 16px; + color: #2783ef; + background: #edf5ff; + font-size: 13px; + line-height: 32px; + } + + /deep/ .message-card-action .van-icon { + margin-left: 2px; + font-size: 12px; + } + + /deep/ .message-empty { + padding: 36px 0; + color: #9aa3b1; + font-size: 14px; + text-align: center; + } + + /deep/ .van-pull-refresh__track { + background: #f3f7fd; + } + + /deep/ .van-list__finished-text { + padding: 12px 0 16px; + color: #a1a9b5; + font-size: 13px; + } + + /deep/ .van-popup--bottom { + border-radius: 16px 16px 0 0; } - /* 消息详情弹窗样式 */ /deep/ .message-detail { - padding: 20px; height: 100%; + padding: 22px 18px; overflow-y: auto; - background-color: #fff; + box-sizing: border-box; + background: #fff; } /deep/ .detail-header { - text-align: center; - margin-bottom: 20px; - padding-bottom: 16px; - border-bottom: 1px solid #eee; + margin-bottom: 18px; + padding: 0 28px 15px 0; + border-bottom: 1px solid #edf1f6; } /deep/ .detail-header h3 { + margin: 0 0 9px; + color: #26364d; font-size: 18px; - font-weight: 500; - margin: 0 0 8px 0; - color: #323233; + font-weight: 600; + line-height: 26px; } /deep/ .detail-meta { display: flex; align-items: center; - justify-content: center; gap: 8px; - font-size: 14px; - color: #666; - } - - /deep/ .detail-time { - color: #969799; + color: #8d97a7; + font-size: 12px; } /deep/ .detail-content { - line-height: 1.8; + color: #323b4a; font-size: 15px; - color: #323233; + line-height: 1.8; white-space: pre-line; + word-break: break-word; } /deep/ .detail-content img { max-width: 100%; height: auto; - border-radius: 4px; margin: 8px 0; - } - - /deep/ .detail-content p { - margin: 12px 0; + border-radius: 6px; } /deep/ .detail-content ol { - list-style-type: decimal; - padding-left: 22px; margin: 6px 0; + padding-left: 22px; + list-style-type: decimal; } /deep/ .detail-content li { display: list-item; } - - /* 标签页样式优化 */ - /deep/ .van-tabs__nav { - background-color: #fff; - } - - /deep/ .van-tab { - font-size: 14px; - } - - /deep/ .van-tab--active { - color: var(--color-primary, #1989fa); - font-weight: 500; - } - - /deep/ .van-tabs__line { - background-color: var(--color-primary, #1989fa); - } - - /* 列表样式优化 */ - /deep/ .van-cell__title { - font-size: 15px; - } - - /deep/ .van-cell__label { - font-size: 13px; - color: #969799; - margin-top: 4px; - } - - /deep/ .van-cell__value { - font-size: 12px; - color: #969799; - } - - /* 标签样式 */ - /deep/ .van-tag--mini { - font-size: 10px; - padding: 2px 6px; - border-radius: 4px; - } - - /* 弹窗样式 */ - /deep/ .van-popup--bottom { - border-radius: 16px 16px 0 0; - } - - /* 下拉刷新和上拉加载样式 */ - /deep/ .van-pull-refresh__track { - background-color: #f5f7fa; - } - - /deep/ .van-list__finished-text { - color: #969799; - font-size: 12px; - padding: 16px 0; - } - - /* 空状态样式 */ - /deep/ .van-empty { - padding: 40px 0; - } - - /deep/ .van-empty__description { - color: #969799; - font-size: 14px; - } - - /* 简约动画效果 */ - - /* 基础过渡效果 */ - /deep/ .oa-message-item, - /deep/ .oa-stat-item, - /deep/ .oa-refresh-btn, - /deep/ .oa-search-input { - transition: all 0.2s ease; - } - - /* 页面进入动画 */ - /deep/ .page-enter { - animation: fadeIn 0.3s ease; - } - - @keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } - } - - /* 简化的响应式动画 */ - @media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } - } - - /* 响应式设计 */ - @media (max-width: 480px) { - /deep/ .oa-header { - padding: 10px 12px; - } - - /deep/ .oa-header-title { - font-size: 15px; - } - - /deep/ .oa-stats-panel, - /deep/ .oa-toolbar, - /deep/ .oa-message-list { - margin: 6px 12px; - } - - /deep/ .oa-stat-item { - padding: 12px 8px; - } - - /deep/ .oa-stat-number { - font-size: 16px; - } - - /deep/ .oa-stat-label { - font-size: 11px; - } - - /deep/ .oa-message-item { - padding: 12px; - } - - /deep/ .oa-message-title { - font-size: 14px; - } - - /deep/ .oa-message-content { - font-size: 12px; - } - } ` } 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 ec7c3f44..86216658 100644 --- a/src/main/resources/views/platform/zhghh5/sys/home/todo.js +++ b/src/main/resources/views/platform/zhghh5/sys/home/todo.js @@ -1,7 +1,7 @@ const todo = { template: /*language=HTML*/ `
- +
@@ -314,7 +314,7 @@ const todo = { min-height: 100vh; padding-bottom: 72px; box-sizing: border-box; - background: #f5f7fb; + background: #f3f7fd; } /deep/ .task-nav .van-nav-bar { @@ -337,23 +337,23 @@ const todo = { .task-hero { position: relative; - height: 92px; + height: 112px; background-color: #0879f9; } .task-statistics { position: absolute; - top: 0; + top: 8px; right: 12px; left: 12px; display: flex; - height: 78px; - padding: 10px 6px 8px; - box-sizing: border-box; - border-radius: 10px; - background: #fff; - box-shadow: 0 6px 18px rgba(45, 91, 145, 0.14); + height: 92px; + padding: 12px 6px 10px; overflow: hidden; + box-sizing: border-box; + border-radius: 12px; + background: #fff; + box-shadow: 0 8px 22px rgba(28, 77, 137, 0.2); } .statistic-item { @@ -375,13 +375,13 @@ const todo = { .statistic-icon { display: flex; - width: 24px; - height: 24px; + width: 28px; + height: 28px; align-items: center; justify-content: center; border-radius: 50%; color: #fff; - font-size: 15px; + font-size: 17px; } .statistic-icon-todo { @@ -397,17 +397,17 @@ const todo = { } .statistic-count { - margin-top: 3px; + margin-top: 4px; color: #26364d; - font-size: 14px; + font-size: 16px; font-weight: 600; - line-height: 18px; + line-height: 20px; } .statistic-label { color: #8d97a7; font-size: 12px; - line-height: 15px; + line-height: 16px; } /* 标签页样式优化 */ @@ -438,7 +438,7 @@ const todo = { } /deep/ .task-tabs .van-tab--active { - color: var(--color-primary, #1989fa); + color: #1989fa; font-size: 16px; font-weight: 600; } @@ -448,7 +448,7 @@ const todo = { width: 24px; height: 4px; border-radius: 4px; - background-color: var(--color-primary, #1989fa); + background-color: #1989fa; } /deep/ .task-tabs--hero-replacement { @@ -468,19 +468,23 @@ const todo = { display: flex; padding: 10px 12px; align-items: center; - background: #f5f7fb; + background: #f3f7fd; } .search-form .van-search{ width: 100%; padding: 0; - border-radius: 18px; + border-radius: 12px; overflow: hidden; background: #fff; + box-shadow: 0 4px 14px rgba(55, 85, 126, 0.07); } /deep/ .search-form .van-search__content { - border-radius: 18px; + height: 42px; + padding-left: 13px; + align-items: center; + border-radius: 12px; background: #fff; } @@ -489,7 +493,7 @@ const todo = { } /deep/ .van-sticky--fixed { - background: #f5f7fb; + background: #f3f7fd; } .search-input { @@ -561,24 +565,30 @@ const todo = { .task-skeleton-card { margin-bottom: 10px; - padding: 18px 4px; - border-radius: 10px; + min-height: 196px; + padding: 20px 16px; + box-sizing: border-box; + border-radius: 12px; background: #fff; - box-shadow: 0 2px 10px rgba(31, 68, 113, .07); + box-shadow: 0 7px 20px rgba(55, 85, 126, 0.06); + } + + .task-skeleton-card .van-skeleton { + padding: 0; } /deep/ .table-list-container { - min-height: calc(100vh - 140px); - margin-top: 8px !important; + min-height: 0; + margin-top: 10px !important; padding: 0 12px !important; } /deep/ .table-list-container .table-list-item { - margin-bottom: 10px !important; - padding: 12px !important; - border: 0 !important; - border-radius: 9px !important; - box-shadow: 0 2px 10px rgba(31, 68, 113, 0.07) !important; + margin-bottom: 12px !important; + padding: 16px !important; + border: 1px solid rgba(71, 111, 164, 0.05) !important; + border-radius: 12px !important; + box-shadow: 0 7px 20px rgba(55, 85, 126, 0.08) !important; } /deep/ .todo-item-header { @@ -586,7 +596,7 @@ const todo = { min-width: 0; align-items: center; justify-content: space-between; - margin-bottom: 8px; + margin-bottom: 12px; } /deep/ .todo-item-title { @@ -598,22 +608,22 @@ const todo = { /deep/ .todo-title-icon { display: flex; - flex: 0 0 24px; - width: 24px; - height: 24px; - margin-right: 8px; + flex: 0 0 38px; + width: 38px; + height: 38px; + margin-right: 10px; align-items: center; justify-content: center; - border-radius: 6px; + border-radius: 10px; color: #438df5; - font-size: 15px; + font-size: 21px; background: #edf5ff; } /deep/ .todo-title-text { overflow: hidden; color: #26364d; - font-size: 14px; + font-size: 15px; font-weight: 600; line-height: 22px; text-overflow: ellipsis; @@ -632,7 +642,19 @@ const todo = { } /deep/ .table-column { - padding: 3px 0 !important; + display: grid !important; + width: 100% !important; + padding: 4px 0 !important; + align-items: center; + grid-template-columns: 72px minmax(0, 1fr); + column-gap: 8px; + } + + /deep/ .table-list-container .table-list-item .table-list-columns { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + row-gap: 2px; } /deep/ .table-column .label, @@ -642,16 +664,36 @@ const todo = { line-height: 19px !important; } + /deep/ .table-column .label { + width: 72px; + max-width: none; + color: #98a3b3 !important; + } + + /deep/ .table-column .value { + overflow: hidden; + color: #56657a !important; + text-overflow: ellipsis; + white-space: nowrap; + } + /deep/ .table-list-container .table-list-item .item-actions { - margin-top: 8px !important; - padding-top: 7px !important; + margin-top: 12px !important; + padding-top: 12px !important; border-top-color: #edf1f6 !important; } /deep/ .table-list-container .table-list-item .action-btn { - padding: 0 !important; + min-width: 92px; + height: 32px; + padding: 0 14px !important; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + border-radius: 16px; color: #2783ef !important; - background: transparent !important; + background: #edf5ff !important; font-size: 13px !important; }