This commit is contained in:
BianLzhaoMin
parent
5ca1288587
commit
1e4ef09b67
|
|
@ -50,7 +50,7 @@ export function getLoopSendDetailAPI(id) {
|
|||
// 循环发送短信 - 更新任务状态
|
||||
export function updateLoopSendStatusAPI(data) {
|
||||
return request({
|
||||
url: '/msgJob/updateLoopTaskStatus',
|
||||
url: '/msgJob/updateTaskStatus',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -2,123 +2,229 @@
|
|||
<div class="home">
|
||||
<section class="home-hero">
|
||||
<div class="home-hero-main">
|
||||
<p class="home-tag">计划管理平台 · 首页</p>
|
||||
<p class="home-tag">短信发送系统 · 首页</p>
|
||||
<h1 class="home-title">
|
||||
欢迎进入<br />
|
||||
运检站计划管理平台
|
||||
短信发送管理系统
|
||||
</h1>
|
||||
<p class="home-subtitle">
|
||||
这里将展示整体经营概况、计划执行情况等关键信息。当前为静态页，后续可根据产品设计替换为正式首页。
|
||||
高效、便捷的短信发送管理平台，支持单次发送和循环发送，轻松管理短信任务和接收人员。
|
||||
</p>
|
||||
</div>
|
||||
<!-- <div class="home-hero-panel">
|
||||
<div class="home-hero-panel">
|
||||
<div class="panel-header">今日概览</div>
|
||||
<div class="panel-body">
|
||||
<div class="panel-item">
|
||||
<span class="panel-label">计划任务</span>
|
||||
<span class="panel-value">—</span>
|
||||
<span class="panel-label">今日发送</span>
|
||||
<span class="panel-value">{{ todayStats.sendCount || '—' }}</span>
|
||||
</div>
|
||||
<div class="panel-item">
|
||||
<span class="panel-label">已完成</span>
|
||||
<span class="panel-value">—</span>
|
||||
<span class="panel-label">成功发送</span>
|
||||
<span class="panel-value">{{ todayStats.successCount || '—' }}</span>
|
||||
</div>
|
||||
<div class="panel-item">
|
||||
<span class="panel-label">预警事项</span>
|
||||
<span class="panel-value">—</span>
|
||||
<span class="panel-label">待发送任务</span>
|
||||
<span class="panel-value">{{ todayStats.pendingCount || '—' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">数据接入后将在此区域展示核心指标。</div>
|
||||
</div>-->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="home-grid">
|
||||
<el-card shadow="hover" class="home-card">
|
||||
<h3>基础管理</h3>
|
||||
<p>用于维护人员、岗位、站点等基础资料，为后续计划和统计提供统一数据源。</p>
|
||||
<el-card shadow="hover" class="home-card" @click="navigateTo('/sms/onceSend')">
|
||||
<div class="card-icon">
|
||||
<el-icon :size="32" color="#1677ff">
|
||||
<Message />
|
||||
</el-icon>
|
||||
</div>
|
||||
<h3>单次发送</h3>
|
||||
<p>
|
||||
快速发送单条短信，支持选择接收人员和自定义短信内容，适用于临时通知和紧急消息。
|
||||
</p>
|
||||
</el-card>
|
||||
<el-card shadow="hover" class="home-card">
|
||||
<h3>计划管理</h3>
|
||||
<p>支撑月度、日常计划的编制与执行过程管理，后续可在此接入进度看板等内容。</p>
|
||||
<el-card shadow="hover" class="home-card" @click="navigateTo('/sms/loopSend')">
|
||||
<div class="card-icon">
|
||||
<el-icon :size="32" color="#52c41a">
|
||||
<Refresh />
|
||||
</el-icon>
|
||||
</div>
|
||||
<h3>循环发送</h3>
|
||||
<p>
|
||||
基于 Cron 表达式的定时发送任务，支持按计划自动发送短信，适用于定期通知和提醒。
|
||||
</p>
|
||||
</el-card>
|
||||
<el-card shadow="hover" class="home-card">
|
||||
<h3>作业与月报</h3>
|
||||
<p>用于记录实际作业与月报数据，实现计划与执行结果的对比分析。</p>
|
||||
<el-card
|
||||
shadow="hover"
|
||||
class="home-card"
|
||||
@click="navigateTo('/basicManage/personManage')"
|
||||
>
|
||||
<div class="card-icon">
|
||||
<el-icon :size="32" color="#fa8c16">
|
||||
<User />
|
||||
</el-icon>
|
||||
</div>
|
||||
<h3>人员管理</h3>
|
||||
<p>
|
||||
管理系统中的接收人员信息，包括姓名、电话、所属部门等基础数据，为短信发送提供数据源。
|
||||
</p>
|
||||
</el-card>
|
||||
<el-card
|
||||
shadow="hover"
|
||||
class="home-card"
|
||||
@click="navigateTo('/basicManage/groupManage')"
|
||||
>
|
||||
<div class="card-icon">
|
||||
<el-icon :size="32" color="#eb2f96">
|
||||
<UserFilled />
|
||||
</el-icon>
|
||||
</div>
|
||||
<h3>分组管理</h3>
|
||||
<p>创建和管理人员分组，快速选择批量接收人员，提高短信发送效率。</p>
|
||||
</el-card>
|
||||
</section>
|
||||
|
||||
<section class="home-footer-note">
|
||||
<p>当前首页仅展示静态信息，后续根据实际需求替换为正式大屏或经营驾驶舱。</p>
|
||||
<section class="home-features">
|
||||
<h2 class="features-title">核心功能</h2>
|
||||
<div class="features-grid">
|
||||
<div class="feature-item">
|
||||
<el-icon :size="24" color="#1677ff">
|
||||
<Clock />
|
||||
</el-icon>
|
||||
<div class="feature-content">
|
||||
<h4>定时发送</h4>
|
||||
<p>支持 Cron 表达式配置，灵活设置发送时间</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<el-icon :size="24" color="#52c41a">
|
||||
<User />
|
||||
</el-icon>
|
||||
<div class="feature-content">
|
||||
<h4>批量选择</h4>
|
||||
<p>支持按人员或分组批量选择接收人</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<el-icon :size="24" color="#fa8c16">
|
||||
<Document />
|
||||
</el-icon>
|
||||
<div class="feature-content">
|
||||
<h4>任务管理</h4>
|
||||
<p>统一管理所有发送任务，支持启用/停用</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<el-icon :size="24" color="#eb2f96">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="feature-content">
|
||||
<h4>发送记录</h4>
|
||||
<p>查看详细的发送记录和状态信息</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Index"></script>
|
||||
<script setup name="Index">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Message, Refresh, User, UserFilled, Clock, Document, View } from '@element-plus/icons-vue'
|
||||
|
||||
<style scoped>
|
||||
const router = useRouter()
|
||||
|
||||
// 今日统计数据（后续可从接口获取）
|
||||
const todayStats = ref({
|
||||
sendCount: null,
|
||||
successCount: null,
|
||||
pendingCount: null,
|
||||
})
|
||||
|
||||
// 导航到指定路由
|
||||
const navigateTo = (path) => {
|
||||
router.push(path)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home {
|
||||
gap: 32px;
|
||||
gap: 40px;
|
||||
display: flex;
|
||||
min-height: 100%;
|
||||
flex-direction: column;
|
||||
padding: 32px 40px 48px;
|
||||
background: radial-gradient(circle at top left, #e6f4ff 0, #ffffff 50%, #f5f7fb 100%);
|
||||
padding: 40px 48px 48px;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 50%, #e6f4ff 100%);
|
||||
}
|
||||
|
||||
.home-hero {
|
||||
gap: 32px;
|
||||
display: grid;
|
||||
align-items: stretch;
|
||||
grid-template-columns: minmax(0, 2fr) minmax(280px, 1.4fr);
|
||||
grid-template-columns: minmax(0, 2fr) minmax(320px, 1.4fr);
|
||||
}
|
||||
|
||||
.home-hero-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
max-width: 640px;
|
||||
max-width: 680px;
|
||||
}
|
||||
|
||||
.home-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 12px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.12em;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: #1677ff;
|
||||
background: rgba(22, 119, 255, 0.08);
|
||||
margin-bottom: 16px;
|
||||
background: rgba(22, 119, 255, 0.1);
|
||||
margin-bottom: 20px;
|
||||
width: fit-content;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.home-title {
|
||||
font-size: 32px;
|
||||
font-size: 42px;
|
||||
line-height: 1.3;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0 0 16px;
|
||||
margin: 0 0 20px;
|
||||
background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.home-subtitle {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.home-hero-panel {
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(145deg, #1677ff 0%, #4096ff 45%, #bae0ff 100%);
|
||||
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25);
|
||||
background: linear-gradient(145deg, #1677ff 0%, #4096ff 45%, #69b1ff 100%);
|
||||
box-shadow: 0 20px 50px rgba(22, 119, 255, 0.3);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 24px 60px rgba(22, 119, 255, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: 16px 20px 8px;
|
||||
font-size: 15px;
|
||||
padding: 20px 24px 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
|
@ -126,55 +232,81 @@
|
|||
.panel-body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
padding: 12px 20px 8px;
|
||||
gap: 8px;
|
||||
padding: 16px 24px 12px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.panel-item {
|
||||
padding: 10px 12px;
|
||||
padding: 16px 14px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
backdrop-filter: blur(4px);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
backdrop-filter: blur(8px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
transition: background 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-label {
|
||||
font-size: 13px;
|
||||
opacity: 0.85;
|
||||
opacity: 0.9;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.panel-value {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.panel-footer {
|
||||
padding: 12px 20px 16px;
|
||||
padding: 16px 24px 20px;
|
||||
font-size: 13px;
|
||||
opacity: 0.9;
|
||||
opacity: 0.85;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.home-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.home-card {
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
|
||||
border-color: #e6f4ff;
|
||||
}
|
||||
}
|
||||
|
||||
.home-card :deep(.el-card__body) {
|
||||
padding: 20px 22px 22px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
margin-bottom: 16px;
|
||||
display: inline-flex;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #e6f4ff 0%, #f0f7ff 100%);
|
||||
}
|
||||
|
||||
.home-card h3 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 18px;
|
||||
margin: 0 0 12px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
|
@ -186,24 +318,61 @@
|
|||
color: #4b5563;
|
||||
}
|
||||
|
||||
.home-footer-note {
|
||||
.home-features {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.features-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: #1677ff;
|
||||
box-shadow: 0 4px 12px rgba(22, 119, 255, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.feature-content h4 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.feature-content p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.home {
|
||||
padding: 24px 24px 36px;
|
||||
}
|
||||
|
||||
.home-hero {
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.home {
|
||||
padding: 20px 16px 28px;
|
||||
padding: 32px 32px 40px;
|
||||
}
|
||||
|
||||
.home-hero {
|
||||
|
|
@ -215,7 +384,36 @@
|
|||
}
|
||||
|
||||
.home-title {
|
||||
font-size: 26px;
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.home {
|
||||
padding: 24px 20px 32px;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.home-hero {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.home-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.home-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,16 @@ export const buildFormColumns = () => [
|
|||
prop: 'taskName',
|
||||
placeholder: '请输入任务名称',
|
||||
},
|
||||
{
|
||||
type: 'date',
|
||||
prop: 'dateRange',
|
||||
dateType: 'daterange',
|
||||
placeholder: '请选择日期范围',
|
||||
paramsList: ['startTime', 'endTime'], // 将日期范围拆分为开始时间和结束时间
|
||||
},
|
||||
// {
|
||||
// type: 'date',
|
||||
// prop: 'dateRange',
|
||||
// dateType: 'daterange',
|
||||
// placeholder: '请选择日期范围',
|
||||
// paramsList: ['startTime', 'endTime'], // 将日期范围拆分为开始时间和结束时间
|
||||
// },
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'smsType',
|
||||
prop: 'msgType',
|
||||
placeholder: '请选择短信类型',
|
||||
options: [
|
||||
{ label: '通知', value: '1' },
|
||||
|
|
|
|||
|
|
@ -334,7 +334,10 @@ const onCloseCronDialog = (visible) => {
|
|||
|
||||
// 返回
|
||||
const onBack = () => {
|
||||
router.back()
|
||||
// router.back()
|
||||
proxy.$tab.closeOpenPage({
|
||||
path: '/sMsSendManage/loopSend',
|
||||
})
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
|
|
|
|||
|
|
@ -31,12 +31,14 @@
|
|||
</ComButton>
|
||||
</template>
|
||||
<template #taskStatus="{ row }">
|
||||
<!-- <el-switch
|
||||
v-model="row.taskStatus"
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
@change="onHandleStatusChange($event, row)"
|
||||
/> -->
|
||||
<el-switch
|
||||
active-value="0"
|
||||
inactive-value="1"
|
||||
:model-value="getTaskStatusValue(row)"
|
||||
:loading="getSwitchLoading(row.id)"
|
||||
:disabled="getSwitchLoading(row.id)"
|
||||
@change="(value) => debouncedStatusChange(value, row)"
|
||||
/>
|
||||
</template>
|
||||
</ComTable>
|
||||
</div>
|
||||
|
|
@ -45,6 +47,7 @@
|
|||
<script setup name="LoopSend">
|
||||
import { ref, computed, getCurrentInstance } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { debounce } from 'lodash-es'
|
||||
import {
|
||||
listLoopSendAPI,
|
||||
delLoopSendAPI,
|
||||
|
|
@ -60,6 +63,7 @@ const { proxy } = getCurrentInstance()
|
|||
const { tableColumns, buildFormColumns } = config
|
||||
const comTableRef = ref(null)
|
||||
const smsBalance = ref(null) // 短信余额，可以从接口获取
|
||||
const switchLoadingMap = new Map() // 记录每个 switch 的 loading 状态
|
||||
|
||||
// 根据配置构建搜索表单
|
||||
const formColumns = computed(() => buildFormColumns())
|
||||
|
|
@ -123,25 +127,72 @@ const onHandleAdd = () => {
|
|||
})
|
||||
}
|
||||
|
||||
// 任务状态修改
|
||||
const onHandleStatusChange = async (value, row) => {
|
||||
try {
|
||||
const result = await updateLoopSendStatusAPI({
|
||||
id: row.id,
|
||||
taskStatus: value,
|
||||
})
|
||||
if (result.code === 200) {
|
||||
proxy.$modal.msgSuccess(value === '1' ? '启用成功' : '停用成功')
|
||||
comTableRef.value?.refresh()
|
||||
} else {
|
||||
// 如果失败，恢复原状态
|
||||
row.taskStatus = value === '1' ? '0' : '1'
|
||||
}
|
||||
} catch (error) {
|
||||
// 如果失败，恢复原状态
|
||||
row.taskStatus = value === '1' ? '0' : '1'
|
||||
// 获取 taskStatus 的值，统一转换为字符串格式
|
||||
const getTaskStatusValue = (row) => {
|
||||
const value = row.taskStatus
|
||||
if (value === null || value === undefined) {
|
||||
return '1'
|
||||
}
|
||||
// 如果是数字，转换为字符串；如果已经是字符串，直接返回
|
||||
return String(value)
|
||||
}
|
||||
|
||||
// 获取 switch 的 loading 状态
|
||||
const getSwitchLoading = (rowId) => {
|
||||
return switchLoadingMap.get(rowId) || false
|
||||
}
|
||||
|
||||
// 设置 switch 的 loading 状态
|
||||
const setSwitchLoading = (rowId, loading) => {
|
||||
if (loading) {
|
||||
switchLoadingMap.set(rowId, true)
|
||||
} else {
|
||||
switchLoadingMap.delete(rowId)
|
||||
}
|
||||
}
|
||||
|
||||
// 任务状态修改（实际执行的方法）
|
||||
const onHandleStatusChange = (value, row) => {
|
||||
// 如果正在加载中，直接返回
|
||||
if (getSwitchLoading(row.id)) {
|
||||
return
|
||||
}
|
||||
|
||||
// 更新 row 数据，保持与 switch 组件的值同步
|
||||
row.taskStatus = value
|
||||
|
||||
// 设置 loading 状态
|
||||
setSwitchLoading(row.id, true)
|
||||
|
||||
// 组装参数
|
||||
const params = {
|
||||
id: row.id,
|
||||
taskStatus: value,
|
||||
jobId: row.jobId,
|
||||
}
|
||||
|
||||
updateLoopSendStatusAPI(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
proxy.$modal.msgSuccess(value === '0' ? '启用成功' : '停用成功')
|
||||
comTableRef.value?.refresh()
|
||||
} else {
|
||||
// 如果失败，恢复原状态
|
||||
row.taskStatus = value === '0' ? '1' : '0'
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 如果失败，恢复原状态
|
||||
row.taskStatus = value === '0' ? '1' : '0'
|
||||
})
|
||||
.finally(() => {
|
||||
// 清除 loading 状态
|
||||
setSwitchLoading(row.id, false)
|
||||
})
|
||||
}
|
||||
|
||||
// 使用防抖包装状态修改方法，延迟 300ms
|
||||
const debouncedStatusChange = debounce(onHandleStatusChange, 300)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue