zhangchao/cz-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 在线客服和详细中心整改

Browse Source
This commit is contained in:
Ironsp
2026-10-13 16:08:55 +08:00
parent 367380e44c
commit a067fd8357
10 changed files with 381 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/views/message/detail.vue
View File

@@ -1,7 +1,7 @@
<!-- 页面：消息详情（MessageDetail） -->
<script setup lang="ts">
import { computed, onMounted, watch } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { PageHead } from '@/components'
import { useMessageStore } from '@/stores/modules/message'
@@ -42,7 +42,7 @@ onMounted(load)
slogan="查看站内消息完整内容与附件资料"
/>
<div class="message-detail__wrap">
<div class="container message-detail__wrap">
<nav class="message-detail__breadcrumb">
<RouterLink to="/message" class="message-detail__breadcrumb-link">
消息中心
@@ -53,12 +53,15 @@ onMounted(load)
<template v-if="item">
<article class="message-detail__card">
<h1 class="message-detail__title">
{{ item.title }}
</h1>
<p class="message-detail__time">
发布时间：{{ item.publishTime }}
</p>
<header class="message-detail__head">
<h1 class="message-detail__title">
{{ item.title }}
</h1>
<p class="message-detail__time">
发布时间：{{ item.publishTime }}
</p>
</header>
<div class="message-detail__content">
{{ item.content }}
</div>
@@ -80,32 +83,33 @@ onMounted(load)
</span>
</div>
<div class="message-detail__file-actions">
<el-button
<button
type="button"
class="message-detail__file-btn"
link
@click="onPreview"
>
预览
</el-button>
<el-button
</button>
<button
type="button"
class="message-detail__file-btn"
link
@click="onDownload"
>
下载
</el-button>
</button>
</div>
</li>
</ul>
</section>
<div class="message-detail__actions">
<el-button
<button
type="button"
class="message-detail__back"
@click="onBack"
>
返回
</el-button>
</button>
</div>
</article>
</template>
@@ -127,165 +131,176 @@ onMounted(load)
background: @bg-color;
&__wrap {
width: 100%;
max-width: @container-width;
margin: 0 auto;
padding: @spacing-lg @page-gutter 0;
padding-top: @spacing-lg;
padding-right: @home-gutter;
padding-left: @home-gutter;
box-sizing: border-box;
@media (max-width: 1600px) {
padding-right: @spacing-lg;
padding-left: @spacing-lg;
}
}
&__breadcrumb {
.flex(row, flex-start, center);
gap: 4px;
min-height: 40px;
gap: @spacing-xs;
margin-bottom: @spacing-base;
font-size: @font-size-sm;
line-height: 1.5;
color: @project-muted;
color: @text-color-secondary;
}
&__breadcrumb-link {
color: @project-muted;
color: @text-color-secondary;
&:hover {
color: @primary-strong;
}
}
&__breadcrumb-sep {
color: @project-muted;
}
&__breadcrumb-current {
color: @message-tabs-text;
color: @heading-color;
font-weight: 500;
}
&__card {
padding: @spacing-xl;
border: 1px solid @border-color;
border-radius: @radius-base;
background: @white;
box-sizing: border-box;
}
&__head {
padding-bottom: @spacing-base;
border-bottom: 1px solid @border-color;
}
&__title {
margin: 0;
font-size: @font-size-xl;
font-weight: 600;
line-height: 1.4;
color: @finance-ink;
text-align: left;
color: @heading-color;
}
&__time {
margin-top: 14px;
font-size: 12px;
line-height: 18px;
color: @project-muted;
text-align: center;
margin: @spacing-sm 0 0;
font-size: @font-size-sm;
line-height: 1.4;
color: @text-color-secondary;
}
&__content {
margin-top: 16px;
background: transparent;
color: @message-tabs-text;
font-size: 13px;
line-height: 2.8;
text-align: center;
margin-top: @spacing-lg;
color: @text-color;
font-size: @font-size-base;
line-height: 1.8;
text-align: left;
white-space: pre-wrap;
word-break: break-word;
}
&__attachments {
margin-top: 24px;
margin-top: @spacing-xl;
}
&-title {
margin-bottom: 10px;
font-size: 12px;
font-weight: 400;
color: @project-muted;
}
&__attachments-title {
margin: 0 0 @spacing-base;
font-size: @font-size-sm;
font-weight: 600;
color: @heading-color;
}
&__file-list {
.flex(column, flex-start, stretch);
gap: 10px;
gap: @spacing-sm;
margin: 0;
padding: 0;
}
&__file {
.flex(row, space-between, center);
gap: @spacing-base;
width: 254px;
max-width: 100%;
padding: 15px 12px 15px 19px;
border-radius: @radius-sm;
background: @finance-row-bg;
width: 100%;
max-width: 520px;
padding: @spacing-base;
border: 1px solid @border-color;
border-radius: @radius-base;
background: @bg-color-light;
list-style: none;
box-sizing: border-box;
}
&__file-info {
.flex(column, flex-start, flex-start);
gap: 4px;
gap: @spacing-xs;
min-width: 0;
}
&__file-name {
font-size: 12px;
font-weight: 700;
color: @finance-ink;
font-size: @font-size-sm;
font-weight: 600;
color: @heading-color;
.ellipsis();
}
&__file-meta {
font-size: 11px;
color: @project-muted;
font-size: @font-size-xs;
color: @text-color-secondary;
.ellipsis();
}
&__file-actions {
.flex(column, center, center);
gap: 2px;
.flex(row, flex-end, center);
gap: @spacing-sm;
flex-shrink: 0;
}
&__file-btn {
padding: 0;
font-size: 12px;
font-weight: 400;
color: @message-tabs-text;
height: 28px;
padding: 0 @spacing-sm;
border: none;
border-radius: @radius-round;
background: transparent;
color: @primary-strong;
font-size: @font-size-sm;
cursor: pointer;
&:hover {
color: @primary-strong;
background: fade(@primary-strong, 8%);
}
}
&__actions {
.flex(row, flex-end);
margin-top: 40px;
margin-top: @spacing-xl;
}
&__back {
width: 94px;
height: 34px;
padding: 0;
border-color: @primary-strong;
border-radius: @radius-sm;
min-width: 88px;
height: 36px;
padding: 0 @spacing-lg;
border: none;
border-radius: @radius-round;
background: @primary-strong;
color: @white;
font-size: 13px;
font-size: @font-size-sm;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
&:hover {
border-color: @primary-strong;
background: @primary-strong;
color: @white;
background: @primary-hover;
}
}
&__empty {
padding: 80px 0;
padding: @spacing-xxl 0;
text-align: center;
font-size: 13px;
color: @project-muted;
font-size: @font-size-sm;
color: @text-color-secondary;
}
}
</style>