Compare commits
2 Commits
6af8fd7b09
...
53f23d4e69
| Author | SHA1 | Date | |
|---|---|---|---|
|
53f23d4e69 | ||
|
|
6ecc649a1c |
@@ -286,3 +286,20 @@
|
||||
@finance-chart-switch-active: #024fff;
|
||||
@finance-switch-active-bg: #e8f0ff;
|
||||
@finance-switch-idle-bg: #f2f4f7;
|
||||
|
||||
// 消息中心（设计稿 #22）
|
||||
@message-page-bg: #f4f6f8;
|
||||
@message-tabs-text: #4b5563;
|
||||
@message-tabs-badge: #f53f3f;
|
||||
@message-toolbar-btn-border: #e5e7eb;
|
||||
@message-pager-active-bg: #edf3fe;
|
||||
@message-item-icon: #3b82f6;
|
||||
|
||||
// 在线客服（设计稿 #42）
|
||||
@service-card-line: #f0f1f3;
|
||||
@service-scroll-bg: #fafbfc;
|
||||
@service-input-bg: #f7f8fa;
|
||||
@service-bar-bg: #f8f8f9;
|
||||
@service-header-name: #1f2937;
|
||||
@service-avatar-text: #8d99ae;
|
||||
@service-bubble-text: #1f2937;
|
||||
|
||||
@@ -29,9 +29,9 @@ const emojiMap: Record<MessageType, string> = {
|
||||
<div class="message-item__body">
|
||||
<div class="message-item__head">
|
||||
<span class="message-item__title">{{ message.title }}</span>
|
||||
<span class="message-item__time text-secondary">{{ message.publishTime }}</span>
|
||||
<span class="message-item__time">{{ message.publishTime }}</span>
|
||||
</div>
|
||||
<p class="message-item__summary text-secondary">
|
||||
<p class="message-item__summary">
|
||||
{{ message.summary }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -42,11 +42,13 @@ const emojiMap: Record<MessageType, string> = {
|
||||
<style lang="less" scoped>
|
||||
.message-item {
|
||||
position: relative;
|
||||
.flex(row, flex-start);
|
||||
gap: @spacing-base;
|
||||
padding: 14px 17px;
|
||||
.flex(row, flex-start, flex-start);
|
||||
gap: 16px;
|
||||
min-height: 86px;
|
||||
padding: 19px 29px;
|
||||
background: @white;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
@@ -56,60 +58,63 @@ const emojiMap: Record<MessageType, string> = {
|
||||
&__emoji {
|
||||
flex-shrink: 0;
|
||||
.flex(row, center);
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: @radius-round;
|
||||
background: @message-icon-bg;
|
||||
font-size: 15px;
|
||||
background: @message-item-icon;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&__body {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 5px;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
&__head {
|
||||
.flex(row, space-between);
|
||||
.flex(row, space-between, flex-start);
|
||||
gap: @spacing-base;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 11px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: @heading-color;
|
||||
line-height: 20px;
|
||||
color: @finance-ink;
|
||||
.ellipsis();
|
||||
}
|
||||
|
||||
&__time {
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
color: @text-color-disabled;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: @message-tabs-text;
|
||||
}
|
||||
|
||||
&__summary {
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: @message-tabs-text;
|
||||
.ellipsis();
|
||||
}
|
||||
|
||||
&__dot {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 42px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
top: 21px;
|
||||
left: 60px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid @white;
|
||||
border-radius: @radius-round;
|
||||
background: @danger-color;
|
||||
background: @message-tabs-badge;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
&.is-unread {
|
||||
.message-item__title {
|
||||
&.is-unread .message-item__title {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -31,19 +31,20 @@ const emit = defineEmits<{ view: [id: string] }>()
|
||||
.message-list {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 0;
|
||||
margin-top: 16px;
|
||||
padding: 0;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
overflow: hidden;
|
||||
|
||||
.message-item + .message-item {
|
||||
border-top: 1px solid @project-divider;
|
||||
border-top: 1px solid @finance-card-line;
|
||||
}
|
||||
|
||||
&__empty {
|
||||
padding: 40px 0;
|
||||
padding: 60px 0;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,16 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import type { MessageTabCounts } from '@/stores/modules/message'
|
||||
import type { MessageType } from '@/types/business/message'
|
||||
|
||||
interface Counts {
|
||||
all: number
|
||||
在线客服: number
|
||||
状态通知: number
|
||||
系统通知: number
|
||||
}
|
||||
|
||||
interface Props {
|
||||
active: MessageType | 'all'
|
||||
counts: Counts
|
||||
counts: MessageTabCounts
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
@@ -24,7 +18,7 @@ const tabs: Array<{ label: string; value: MessageType | 'all' }> = [
|
||||
{ label: '系统通知', value: '系统通知' },
|
||||
]
|
||||
|
||||
function countOf(value: MessageType | 'all', counts: Counts): number {
|
||||
function countOf(value: MessageType | 'all', counts: MessageTabCounts): number {
|
||||
return counts[value]
|
||||
}
|
||||
</script>
|
||||
@@ -47,23 +41,25 @@ function countOf(value: MessageType | 'all', counts: Counts): number {
|
||||
<style lang="less" scoped>
|
||||
.message-tabs {
|
||||
.flex(column, flex-start, stretch);
|
||||
padding: 18px 0;
|
||||
min-height: 338px;
|
||||
gap: 0;
|
||||
height: 438px;
|
||||
padding: 14px 0;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
&__tab {
|
||||
.flex(row, space-between);
|
||||
.flex(row, space-between, center);
|
||||
gap: @spacing-sm;
|
||||
height: 32px;
|
||||
padding: 0 18px 0 25px;
|
||||
height: 44px;
|
||||
padding: 0 25px;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: @text-color;
|
||||
font-size: 11px;
|
||||
color: @message-tabs-text;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
transition: all 0.2s;
|
||||
line-height: 18px;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: @primary-strong;
|
||||
@@ -77,21 +73,18 @@ function countOf(value: MessageType | 'all', counts: Counts): number {
|
||||
}
|
||||
|
||||
&__count {
|
||||
flex-shrink: 0;
|
||||
min-width: 15px;
|
||||
height: 15px;
|
||||
padding: 0 4px;
|
||||
border-radius: @radius-round;
|
||||
background: @danger-color;
|
||||
background: @message-tabs-badge;
|
||||
color: @white;
|
||||
font-size: 11px;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
line-height: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-active &__count {
|
||||
background: @danger-color;
|
||||
color: @white;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<!-- 页面：消息详情（MessageDetail） -->
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ElButton, ElMessage } from 'element-plus'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { AppButton } from '@/components'
|
||||
import { PageHead } from '@/components'
|
||||
import { useMessageStore } from '@/stores/modules/message'
|
||||
import { formatFileSize } from '@/utils/format'
|
||||
|
||||
@@ -36,12 +37,18 @@ onMounted(load)
|
||||
|
||||
<template>
|
||||
<div class="message-detail">
|
||||
<nav class="message-detail__breadcrumb text-secondary">
|
||||
<RouterLink to="/message" class="link">
|
||||
<PageHead
|
||||
title="消息详情"
|
||||
slogan="查看站内消息完整内容与附件资料"
|
||||
/>
|
||||
|
||||
<div class="message-detail__wrap">
|
||||
<nav class="message-detail__breadcrumb">
|
||||
<RouterLink to="/message" class="message-detail__breadcrumb-link">
|
||||
消息中心
|
||||
</RouterLink>
|
||||
<span> > </span>
|
||||
<span>{{ item ? `${item.type}详情` : '消息详情' }}</span>
|
||||
<span class="message-detail__breadcrumb-sep">></span>
|
||||
<span class="message-detail__breadcrumb-current">{{ item ? `${item.type}详情` : '消息详情' }}</span>
|
||||
</nav>
|
||||
|
||||
<template v-if="item">
|
||||
@@ -49,7 +56,7 @@ onMounted(load)
|
||||
<h1 class="message-detail__title">
|
||||
{{ item.title }}
|
||||
</h1>
|
||||
<p class="message-detail__time text-secondary">
|
||||
<p class="message-detail__time">
|
||||
发布时间：{{ item.publishTime }}
|
||||
</p>
|
||||
<div class="message-detail__content">
|
||||
@@ -68,149 +75,180 @@ onMounted(load)
|
||||
>
|
||||
<div class="message-detail__file-info">
|
||||
<span class="message-detail__file-name" :title="file.name">{{ file.name }}</span>
|
||||
<span class="message-detail__file-meta text-secondary">
|
||||
<span class="message-detail__file-meta">
|
||||
{{ formatFileSize(file.size) }} · 上传于{{ file.uploadTime }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="message-detail__file-actions">
|
||||
<button class="message-detail__file-btn" @click="onPreview">
|
||||
<el-button
|
||||
class="message-detail__file-btn"
|
||||
link
|
||||
@click="onPreview"
|
||||
>
|
||||
预览
|
||||
</button>
|
||||
<button class="message-detail__file-btn" @click="onDownload">
|
||||
</el-button>
|
||||
<el-button
|
||||
class="message-detail__file-btn"
|
||||
link
|
||||
@click="onDownload"
|
||||
>
|
||||
下载
|
||||
</button>
|
||||
</el-button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<div class="message-detail__actions">
|
||||
<AppButton type="primary" @click="onBack">
|
||||
<el-button
|
||||
class="message-detail__back"
|
||||
@click="onBack"
|
||||
>
|
||||
返回
|
||||
</AppButton>
|
||||
</el-button>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<p v-else class="message-detail__empty text-secondary">
|
||||
<p v-else class="message-detail__empty">
|
||||
消息不存在
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.message-detail {
|
||||
max-width: @container-width;
|
||||
margin: 0 auto;
|
||||
padding: @spacing-lg @spacing-base @spacing-xxl;
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 60px;
|
||||
background: @message-page-bg;
|
||||
|
||||
&__wrap {
|
||||
width: 100%;
|
||||
padding: 28px 70px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.flex(row, flex-start, center);
|
||||
gap: 4px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 11px;
|
||||
color: @text-color-disabled;
|
||||
|
||||
.link {
|
||||
color: @text-color-disabled;
|
||||
height: 49px;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
color: @project-muted;
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
color: @text-color;
|
||||
&__breadcrumb-link {
|
||||
color: @project-muted;
|
||||
|
||||
&:hover {
|
||||
color: @primary-strong;
|
||||
}
|
||||
}
|
||||
|
||||
&__breadcrumb-sep {
|
||||
color: @project-muted;
|
||||
}
|
||||
|
||||
&__breadcrumb-current {
|
||||
color: @message-tabs-text;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding: 32px 36px 34px;
|
||||
border-radius: @radius-lg;
|
||||
padding: 45px 47px 40px;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 15px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
line-height: 28px;
|
||||
color: @finance-ink;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__time {
|
||||
margin-top: 11px; // 14 × 0.77
|
||||
font-size: 11px;
|
||||
color: @text-color-disabled;
|
||||
margin-top: 14px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: @project-muted;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin-top: 24px;
|
||||
margin-top: 16px;
|
||||
background: transparent;
|
||||
color: @text-color;
|
||||
font-size: 11px;
|
||||
line-height: 1.9;
|
||||
color: @message-tabs-text;
|
||||
font-size: 13px;
|
||||
line-height: 2.8;
|
||||
text-align: center;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
&__attachments {
|
||||
margin-top: 20px;
|
||||
margin-top: 24px;
|
||||
|
||||
&-title {
|
||||
margin-bottom: 8px;
|
||||
font-size: 11px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: @text-color-disabled;
|
||||
color: @project-muted;
|
||||
}
|
||||
}
|
||||
|
||||
&__file-list {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: @spacing-sm;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
&__file {
|
||||
.flex(row, space-between);
|
||||
.flex(row, space-between, center);
|
||||
gap: @spacing-base;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
width: 254px;
|
||||
max-width: 100%;
|
||||
padding: 10px 14px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 15px 12px 15px 19px;
|
||||
border-radius: @radius-sm;
|
||||
background: @finance-row-bg;
|
||||
list-style: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__file-info {
|
||||
.flex(column, flex-start, flex-start);
|
||||
gap: 3px;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__file-name {
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
color: @finance-ink;
|
||||
.ellipsis();
|
||||
}
|
||||
|
||||
&__file-meta {
|
||||
font-size: 11px;
|
||||
color: @text-color-disabled;
|
||||
color: @project-muted;
|
||||
.ellipsis();
|
||||
}
|
||||
|
||||
&__file-actions {
|
||||
.flex(row, center);
|
||||
gap: @spacing-sm;
|
||||
.flex(column, center, center);
|
||||
gap: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__file-btn {
|
||||
font-size: 11px;
|
||||
color: @text-color-secondary;
|
||||
transition: color 0.2s;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: @message-tabs-text;
|
||||
|
||||
&:hover {
|
||||
color: @primary-strong;
|
||||
@@ -219,28 +257,32 @@ onMounted(load)
|
||||
|
||||
&__actions {
|
||||
.flex(row, flex-end);
|
||||
margin-top: 32px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.app-button {
|
||||
height: 24px; // 31 × 0.77
|
||||
padding: 0 16px;
|
||||
border-radius: 6px;
|
||||
&__back {
|
||||
width: 94px;
|
||||
height: 34px;
|
||||
padding: 0;
|
||||
border-color: @primary-strong;
|
||||
border-radius: @radius-sm;
|
||||
background: @primary-strong;
|
||||
color: @white;
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
border-color: @primary-strong;
|
||||
background: @primary-strong;
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__empty {
|
||||
padding: @spacing-xxl 0;
|
||||
padding: 80px 0;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
color: @project-muted;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<!-- 页面：消息中心（Message） -->
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { AppButton, FilterPanel, PaginationBar } from '@/components'
|
||||
import { ElButton, ElInput } from 'element-plus'
|
||||
import { PageHead, PaginationBar } from '@/components'
|
||||
import { useMessageStore } from '@/stores/modules/message'
|
||||
import type { MessageType } from '@/types/business/message'
|
||||
import MessageTabs from './cpns/MessageTabs.vue'
|
||||
@@ -13,16 +14,15 @@ const router = useRouter()
|
||||
const messageStore = useMessageStore()
|
||||
const { query, list, total, unreadCount, tabCounts } = storeToRefs(messageStore)
|
||||
|
||||
const keyword = computed({
|
||||
get: () => query.value.keyword,
|
||||
set: (value: string) => messageStore.setQuery({ ...query.value, keyword: value }),
|
||||
})
|
||||
const keyword = ref(query.value.keyword)
|
||||
|
||||
function onSearch(): void {
|
||||
messageStore.setQuery({ ...query.value, keyword: keyword.value })
|
||||
void messageStore.search()
|
||||
}
|
||||
|
||||
function onReset(): void {
|
||||
keyword.value = ''
|
||||
void messageStore.resetQuery()
|
||||
}
|
||||
|
||||
@@ -50,18 +50,16 @@ onMounted(() => {
|
||||
messageStore.fetchTabCounts(),
|
||||
])
|
||||
})
|
||||
|
||||
const UNREAD_LABEL = computed(() => (unreadCount.value > 0 ? `全部已读 (${unreadCount.value})` : '全部已读'))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="message">
|
||||
<header class="message__head">
|
||||
<h1 class="message__title">
|
||||
消息中心
|
||||
</h1>
|
||||
</header>
|
||||
<p class="message__subtitle text-secondary">
|
||||
统一接收项目进度、售后工单、账单待办等站内消息，重要业务动态实时提醒
|
||||
</p>
|
||||
<PageHead
|
||||
title="消息中心"
|
||||
slogan="统一接收项目进度、售后工单、账单待办等站内消息，重要业务动态实时提醒"
|
||||
/>
|
||||
|
||||
<div class="message__body">
|
||||
<MessageTabs
|
||||
@@ -73,21 +71,34 @@ onMounted(() => {
|
||||
|
||||
<div class="message__main">
|
||||
<div class="message__toolbar">
|
||||
<FilterPanel
|
||||
class="message__filter"
|
||||
v-model:keyword="keyword"
|
||||
keyword-placeholder="搜索消息标题、内容"
|
||||
@search="onSearch"
|
||||
@reset="onReset"
|
||||
<el-input
|
||||
v-model="keyword"
|
||||
class="message__search"
|
||||
placeholder="搜索消息标题、内容"
|
||||
clearable
|
||||
@keyup.enter="onSearch"
|
||||
/>
|
||||
<AppButton
|
||||
class="message__mark-read"
|
||||
type="default"
|
||||
|
||||
<el-button
|
||||
class="message__btn"
|
||||
@click="onReset"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
class="message__btn message__btn--primary"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
class="message__btn message__btn--read"
|
||||
:disabled="unreadCount === 0"
|
||||
@click="onMarkAllRead"
|
||||
>
|
||||
全部已读
|
||||
</AppButton>
|
||||
{{ UNREAD_LABEL }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<MessageList :messages="list" @view="onView" />
|
||||
@@ -107,143 +118,124 @@ onMounted(() => {
|
||||
<style lang="less" scoped>
|
||||
.message {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: @spacing-base;
|
||||
max-width: @container-width;
|
||||
margin: 0 auto;
|
||||
padding: @spacing-xl @spacing-base @spacing-xxl;
|
||||
|
||||
&__head {
|
||||
.flex(row, flex-start);
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
}
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 14px;
|
||||
background: @message-page-bg;
|
||||
|
||||
&__body {
|
||||
.flex(row, flex-start);
|
||||
gap: 26px;
|
||||
align-items: flex-start;
|
||||
.flex(row, flex-start, flex-start);
|
||||
gap: 22px;
|
||||
width: 100%;
|
||||
padding: 119px 25px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
flex-shrink: 0;
|
||||
width: 156px;
|
||||
width: 198px;
|
||||
}
|
||||
|
||||
&__main {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 15px;
|
||||
gap: 0;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
.flex(row, flex-start);
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
padding: 10px 17px;
|
||||
.flex(row, flex-start, center);
|
||||
gap: 0;
|
||||
height: 69px;
|
||||
padding: 0 21px 0 25px;
|
||||
border: 1px solid @message-toolbar-btn-border;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
& .message__filter {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
&__search {
|
||||
flex: 0 1 460px;
|
||||
height: 37px;
|
||||
|
||||
& .message__mark-read {
|
||||
flex-shrink: 0;
|
||||
height: 26px; // 34 × 0.77
|
||||
:deep(.el-input__wrapper) {
|
||||
height: 37px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: 6px;
|
||||
background: @white;
|
||||
color: @text-color;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: @primary-color;
|
||||
background: @white;
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
& .message__pagination {
|
||||
justify-content: flex-end;
|
||||
align-self: stretch;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.message__filter {
|
||||
:deep(.filter-panel__bar) {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
:deep(.filter-panel__body) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
:deep(.filter-panel__input) {
|
||||
order: 0;
|
||||
flex: 0 1 349px;
|
||||
max-width: 349px;
|
||||
height: 29px; // 38 × 0.77
|
||||
margin-right: 2px;
|
||||
padding: 0 10px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
border-radius: @radius-base;
|
||||
background: @finance-field-bg;
|
||||
color: @text-color;
|
||||
font-size: 11px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
color: @finance-ink;
|
||||
font-size: 13px;
|
||||
|
||||
&::placeholder {
|
||||
color: @contract-placeholder;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.filter-panel__btn) {
|
||||
order: 1;
|
||||
min-width: 46px;
|
||||
height: 29px;
|
||||
padding: 0 12px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: @contract-reset-bg;
|
||||
color: @text-color;
|
||||
font-size: 11px;
|
||||
&__btn {
|
||||
height: 28px;
|
||||
margin-left: 14px;
|
||||
padding: 0 15px;
|
||||
border-radius: @radius-sm;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover {
|
||||
border-color: @primary-strong;
|
||||
color: @primary-strong;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
border-color: @primary-strong;
|
||||
background: @primary-strong;
|
||||
color: @white;
|
||||
|
||||
&:hover {
|
||||
border-color: @primary-strong;
|
||||
background: @primary-strong;
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
&--read {
|
||||
margin-left: auto;
|
||||
border-color: @message-toolbar-btn-border;
|
||||
background: @white;
|
||||
color: @finance-entry-text;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: @primary-strong;
|
||||
background: @white;
|
||||
color: @primary-strong;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__pagination {
|
||||
justify-content: flex-end;
|
||||
align-self: stretch;
|
||||
margin-top: 16px;
|
||||
padding: 0;
|
||||
|
||||
:deep(.pagination__btn) {
|
||||
min-width: 23px;
|
||||
height: 26px;
|
||||
border-color: @message-toolbar-btn-border;
|
||||
border-radius: @radius-sm;
|
||||
background: @white;
|
||||
color: @finance-entry-text;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:deep(.pagination__btn.is-active) {
|
||||
border-color: @message-pager-active-bg;
|
||||
background: @message-pager-active-bg;
|
||||
color: @primary-strong;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background: @contract-reset-bg;
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.filter-panel__btn--primary) {
|
||||
order: 2;
|
||||
background: @primary-strong;
|
||||
color: @white;
|
||||
|
||||
&:hover {
|
||||
background: @primary-strong;
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,73 +12,64 @@ interface Props {
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{ download: [] }>()
|
||||
function extOf(name: string): string {
|
||||
const idx = name.lastIndexOf('.')
|
||||
return idx > -1 ? name.slice(idx + 1).toUpperCase() : 'FILE'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chat-file-card">
|
||||
<span class="chat-file-card__icon">📄</span>
|
||||
<span class="chat-file-card__icon">{{ extOf(file.name) }}</span>
|
||||
<div class="chat-file-card__info">
|
||||
<span class="chat-file-card__name" :title="file.name">{{ file.name }}</span>
|
||||
<span class="chat-file-card__size text-secondary">{{ formatFileSize(file.size) }}</span>
|
||||
<span class="chat-file-card__size">{{ formatFileSize(file.size) }}</span>
|
||||
</div>
|
||||
<button class="chat-file-card__download" @click="emit('download')">
|
||||
下载
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chat-file-card {
|
||||
.flex(row, center);
|
||||
gap: 8px;
|
||||
min-width: 181px;
|
||||
max-width: 320px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid @project-divider;
|
||||
border-radius: 6px;
|
||||
gap: 12px;
|
||||
min-width: 300px;
|
||||
max-width: 420px;
|
||||
padding: 14px 16px;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
|
||||
&__icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
.flex(row, center);
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
border-radius: @radius-sm;
|
||||
background: @service-scroll-bg;
|
||||
color: @primary-strong;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&__info {
|
||||
.flex(column, flex-start, flex-start);
|
||||
gap: 4px;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
line-height: 16px;
|
||||
color: @service-bubble-text;
|
||||
.ellipsis();
|
||||
}
|
||||
|
||||
&__size {
|
||||
font-size: 11px;
|
||||
color: @text-color-disabled;
|
||||
}
|
||||
|
||||
&__download {
|
||||
flex-shrink: 0;
|
||||
height: 22px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: 4px;
|
||||
background: @white;
|
||||
color: @text-color-secondary;
|
||||
font-size: 11px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: @primary-strong;
|
||||
color: @primary-strong;
|
||||
}
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: @project-muted;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { nextTick, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { AppButton } from '@/components'
|
||||
import { ElButton, ElMessage } from 'element-plus'
|
||||
|
||||
const MAX_FILE_SIZE = 1024 * 1024 * 1024
|
||||
|
||||
const content = ref('')
|
||||
const fileInputRef = ref<HTMLInputElement | null>(null)
|
||||
|
||||
const emit = defineEmits<{
|
||||
send: [content: string]
|
||||
@@ -28,10 +26,6 @@ function onKeydown(event: KeyboardEvent): void {
|
||||
}
|
||||
}
|
||||
|
||||
function openFilePicker(): void {
|
||||
fileInputRef.value?.click()
|
||||
}
|
||||
|
||||
function onFileChange(event: Event): void {
|
||||
const target = event.target
|
||||
if (!(target instanceof HTMLInputElement)) return
|
||||
@@ -56,28 +50,21 @@ function onFileChange(event: Event): void {
|
||||
@keydown="onKeydown"
|
||||
/>
|
||||
<div class="chat-input__bar">
|
||||
<span class="chat-input__hint text-secondary">
|
||||
<span class="chat-input__hint">
|
||||
按 Enter 发送 | 支持拖拽上传文件
|
||||
</span>
|
||||
<div class="chat-input__actions">
|
||||
<button
|
||||
type="button"
|
||||
class="chat-input__attach"
|
||||
aria-label="上传附件"
|
||||
title="上传附件"
|
||||
@click="openFilePicker"
|
||||
>
|
||||
📎
|
||||
</button>
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
type="file"
|
||||
class="chat-input__file"
|
||||
@change="onFileChange"
|
||||
>
|
||||
<AppButton type="primary" @click="doSend">
|
||||
<el-button
|
||||
class="chat-input__send"
|
||||
@click="doSend"
|
||||
>
|
||||
发送
|
||||
</AppButton>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -86,20 +73,21 @@ function onFileChange(event: Event): void {
|
||||
<style lang="less" scoped>
|
||||
.chat-input {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 16px;
|
||||
padding: 12px 16px 24px;
|
||||
border-top: 1px solid @project-divider;
|
||||
gap: 0;
|
||||
padding: 16px 22px 20px;
|
||||
border-top: 1px solid @service-card-line;
|
||||
background: @white;
|
||||
box-sizing: border-box;
|
||||
|
||||
&__textarea {
|
||||
width: 100%;
|
||||
height: 57px;
|
||||
padding: 11px 10px;
|
||||
height: 72px;
|
||||
padding: 12px 14px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: @finance-row-bg;
|
||||
color: @heading-color;
|
||||
font-size: 11px;
|
||||
border-radius: @radius-sm;
|
||||
background: @service-input-bg;
|
||||
color: @service-bubble-text;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
resize: none;
|
||||
outline: none;
|
||||
@@ -108,24 +96,27 @@ function onFileChange(event: Event): void {
|
||||
|
||||
&:focus {
|
||||
border: none;
|
||||
background: @finance-row-bg;
|
||||
background: @service-input-bg;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: @heading-color;
|
||||
color: @project-muted;
|
||||
}
|
||||
}
|
||||
|
||||
&__bar {
|
||||
.flex(row, space-between);
|
||||
.flex(row, space-between, center);
|
||||
gap: @spacing-base;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
padding-top: 14px;
|
||||
background: @service-bar-bg;
|
||||
}
|
||||
|
||||
&__hint {
|
||||
font-size: 11px;
|
||||
color: @text-color-disabled;
|
||||
line-height: 16px;
|
||||
color: @project-muted;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
@@ -134,35 +125,26 @@ function onFileChange(event: Event): void {
|
||||
}
|
||||
|
||||
&__attach {
|
||||
.flex(row, center);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
border-radius: @radius-sm;
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: @bg-color-light;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__file {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-button {
|
||||
height: 24px; // 31 × 0.77
|
||||
padding: 0 14px;
|
||||
border-radius: 6px;
|
||||
&__send {
|
||||
width: 76px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
border-color: @primary-strong;
|
||||
border-radius: @radius-sm;
|
||||
background: @primary-strong;
|
||||
color: @white;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
border-color: @primary-strong;
|
||||
background: @primary-strong;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
@@ -8,8 +8,6 @@ interface Props {
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), { unread: false })
|
||||
|
||||
const emit = defineEmits<{ download: [] }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -25,11 +23,10 @@ const emit = defineEmits<{ download: [] }>()
|
||||
<ChatFileCard
|
||||
v-if="message.file"
|
||||
:file="message.file"
|
||||
@download="emit('download')"
|
||||
/>
|
||||
<template v-else>{{ message.content }}</template>
|
||||
</div>
|
||||
<span class="chat-message-item__time text-secondary">{{ message.time }}</span>
|
||||
<span class="chat-message-item__time">{{ message.time }}</span>
|
||||
</div>
|
||||
|
||||
<span v-if="message.role === 'user'" class="chat-message-item__avatar chat-message-item__avatar--user">王</span>
|
||||
@@ -39,17 +36,17 @@ const emit = defineEmits<{ download: [] }>()
|
||||
<style lang="less" scoped>
|
||||
.chat-message-item {
|
||||
.flex(row, flex-start, flex-start);
|
||||
gap: 9px;
|
||||
gap: 16px;
|
||||
|
||||
&__avatar {
|
||||
flex-shrink: 0;
|
||||
.flex(row, center);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: @radius-round;
|
||||
background: @primary-strong;
|
||||
color: @white;
|
||||
font-size: 12px; // 16 → 12
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
|
||||
&--user {
|
||||
@@ -60,19 +57,18 @@ const emit = defineEmits<{ download: [] }>()
|
||||
|
||||
&__main {
|
||||
.flex(column, flex-start, flex-start);
|
||||
gap: 4px;
|
||||
max-width: 320px;
|
||||
gap: 6px;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
&__bubble {
|
||||
position: relative;
|
||||
padding: 9px 12px;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
color: @heading-color;
|
||||
font-size: 11px;
|
||||
line-height: 1.75;
|
||||
color: @service-bubble-text;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -80,25 +76,25 @@ const emit = defineEmits<{ download: [] }>()
|
||||
&__bubble:has(.chat-file-card) {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&__time {
|
||||
font-size: 11px;
|
||||
color: @text-color-disabled;
|
||||
line-height: 16px;
|
||||
color: @project-muted;
|
||||
}
|
||||
|
||||
&__unread {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: 6px;
|
||||
margin-top: 8px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: @text-color-disabled;
|
||||
font-size: 11px;
|
||||
color: @project-muted;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
&--user {
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { nextTick, ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { ChatMessage } from '@/types/business/service'
|
||||
import ChatMessageItem from './ChatMessageItem.vue'
|
||||
import ChatInput from './ChatInput.vue'
|
||||
@@ -29,10 +28,6 @@ async function scrollToBottom(): Promise<void> {
|
||||
if (el) el.scrollTop = el.scrollHeight
|
||||
}
|
||||
|
||||
function onDownload(): void {
|
||||
ElMessage.info('下载待接口接入')
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.messages.length,
|
||||
() => void scrollToBottom(),
|
||||
@@ -48,13 +43,12 @@ watch(
|
||||
|
||||
<div ref="scrollRef" class="chat-window__scroll">
|
||||
<template v-for="(item, index) in messages" :key="item.id">
|
||||
<div v-if="index === 0" class="chat-window__divider text-secondary">
|
||||
<div v-if="index === 0" class="chat-window__divider">
|
||||
—— 历史消息 ——
|
||||
</div>
|
||||
<ChatMessageItem
|
||||
:message="item"
|
||||
:unread="isUnread(index)"
|
||||
@download="onDownload"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
@@ -66,51 +60,54 @@ watch(
|
||||
<style lang="less" scoped>
|
||||
.chat-window {
|
||||
.flex(column, flex-start, stretch);
|
||||
border-radius: @radius-lg;
|
||||
border: 1px solid @service-card-line;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
&__header {
|
||||
.flex(row, flex-start);
|
||||
gap: 11px;
|
||||
height: 46px;
|
||||
padding: 0 16px; // 21 × 0.77
|
||||
border-bottom: 1px solid @project-divider;
|
||||
.flex(row, flex-start, center);
|
||||
gap: 16px;
|
||||
height: 66px;
|
||||
padding: 0 22px;
|
||||
border-bottom: 1px solid @service-card-line;
|
||||
background: @white;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__header-avatar {
|
||||
flex-shrink: 0;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
border-radius: @radius-round;
|
||||
background: @primary-strong;
|
||||
}
|
||||
|
||||
&__header-name {
|
||||
align-self: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
color: @service-header-name;
|
||||
}
|
||||
|
||||
&__scroll {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 56px;
|
||||
max-height: 60vh;
|
||||
min-height: 347px;
|
||||
padding: 22px 16px;
|
||||
background: @bg-color-light;
|
||||
gap: 32px;
|
||||
height: 450px;
|
||||
padding: 24px 22px;
|
||||
background: @service-scroll-bg;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
.scrollbar();
|
||||
}
|
||||
|
||||
&__divider {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: -42px;
|
||||
font-size: 11px;
|
||||
color: @text-color-disabled;
|
||||
margin-bottom: -18px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: @project-muted;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { PageHead } from '@/components'
|
||||
import { useServiceStore } from '@/stores/modules/service'
|
||||
import ChatWindow from './cpns/ChatWindow.vue'
|
||||
|
||||
@@ -23,49 +24,33 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div class="service">
|
||||
<header class="service__head">
|
||||
<h1 class="service__title">
|
||||
在线客服
|
||||
</h1>
|
||||
<p class="service__subtitle text-secondary">
|
||||
在线客服为您提供需求咨询、项目进度查询、业务答疑，快速协助解决平台操作与项目相关问题。
|
||||
</p>
|
||||
</header>
|
||||
<PageHead
|
||||
title="在线客服"
|
||||
slogan="在线客服为您提供需求咨询、项目进度查询、业务答疑，快速协助解决平台操作与项目相关问题"
|
||||
/>
|
||||
|
||||
<div class="service__wrap">
|
||||
<ChatWindow
|
||||
:messages="messages"
|
||||
@send="onSend"
|
||||
@send-file="onSendFile"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.service {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: @spacing-base;
|
||||
max-width: @container-width;
|
||||
min-height: calc(100vh - @header-height);
|
||||
margin: 0 auto;
|
||||
padding: 25px @spacing-base @spacing-xxl;
|
||||
background: @white;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 60px;
|
||||
background: @message-page-bg;
|
||||
|
||||
&__head {
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: 700;
|
||||
color: @home-ink;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
margin-top: 12px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: @contract-muted;
|
||||
&__wrap {
|
||||
width: 100%;
|
||||
padding: 0 70px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user