This commit is contained in:
BianLzhaoMin
parent
df29accb3a
commit
63ea240e1a
|
|
@ -1,419 +1,306 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="home">
|
<div class="home">
|
||||||
<section class="home-hero">
|
<div class="home-container">
|
||||||
<div class="home-hero-main">
|
<!-- 背景网格 -->
|
||||||
<p class="home-tag">短信发送系统 · 首页</p>
|
<div class="grid-background"></div>
|
||||||
|
|
||||||
|
<!-- 主要内容 -->
|
||||||
|
<div class="home-content">
|
||||||
|
<div class="home-tag-wrapper">
|
||||||
|
<el-icon class="tag-icon"><Message /></el-icon>
|
||||||
|
<span class="home-tag">短信发送系统 · 首页</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h1 class="home-title">
|
<h1 class="home-title">
|
||||||
欢迎进入<br />
|
<span class="title-line">欢迎进入</span>
|
||||||
短信发送管理系统
|
<span class="title-line highlight">短信发送管理系统</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p class="home-subtitle">
|
|
||||||
高效、便捷的短信发送管理平台，支持单次发送和循环发送，轻松管理短信任务和接收人员。
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<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">{{ todayStats.sendCount || '—' }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="panel-item">
|
|
||||||
<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">{{ todayStats.pendingCount || '—' }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="panel-footer">数据接入后将在此区域展示核心指标。</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="home-grid">
|
<!-- 装饰性图标 -->
|
||||||
<el-card shadow="hover" class="home-card" @click="navigateTo('/sms/onceSend')">
|
<div class="decorative-icons">
|
||||||
<div class="card-icon">
|
<div
|
||||||
<el-icon :size="32" color="#1677ff">
|
class="icon-item"
|
||||||
<Message />
|
v-for="(icon, index) in icons"
|
||||||
</el-icon>
|
:key="index"
|
||||||
</div>
|
:style="{ animationDelay: `${index * 0.2}s` }"
|
||||||
<h3>单次发送</h3>
|
>
|
||||||
<p>
|
<el-icon :size="24"><component :is="icon" /></el-icon>
|
||||||
快速发送单条短信，支持选择接收人员和自定义短信内容，适用于临时通知和紧急消息。
|
|
||||||
</p>
|
|
||||||
</el-card>
|
|
||||||
<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"
|
|
||||||
@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-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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="Index">
|
<script setup name="Index">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { Message, Refresh, User, UserFilled, Clock, Document, View } from '@element-plus/icons-vue'
|
import { Message, Bell, Document, Setting, DataAnalysis, Connection } from '@element-plus/icons-vue'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
// 今日统计数据（后续可从接口获取）
|
// 装饰性图标列表
|
||||||
const todayStats = ref({
|
const icons = ref([Message, Bell, Document, Setting, DataAnalysis, Connection])
|
||||||
sendCount: null,
|
|
||||||
successCount: null,
|
|
||||||
pendingCount: null,
|
|
||||||
})
|
|
||||||
|
|
||||||
// 导航到指定路由
|
|
||||||
const navigateTo = (path) => {
|
|
||||||
router.push(path)
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.home {
|
.home {
|
||||||
gap: 40px;
|
// height: 100vh;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 100%;
|
align-items: center;
|
||||||
flex-direction: column;
|
justify-content: center;
|
||||||
padding: 40px 48px 48px;
|
background: linear-gradient(135deg, #f0f7ff 0%, #e6f4ff 50%, #d6e4ff 100%);
|
||||||
background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 50%, #e6f4ff 100%);
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-hero {
|
// 网格背景
|
||||||
gap: 32px;
|
.grid-background {
|
||||||
display: grid;
|
position: absolute;
|
||||||
align-items: stretch;
|
top: 0;
|
||||||
grid-template-columns: minmax(0, 2fr) minmax(320px, 1.4fr);
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-image: linear-gradient(rgba(22, 119, 255, 0.08) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(22, 119, 255, 0.08) 1px, transparent 1px);
|
||||||
|
background-size: 50px 50px;
|
||||||
|
animation: gridMove 20s linear infinite;
|
||||||
|
opacity: 0.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-hero-main {
|
@keyframes gridMove {
|
||||||
|
0% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(50px, 50px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-container {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-content {
|
||||||
|
text-align: center;
|
||||||
|
animation: fadeInUp 0.8s ease-out;
|
||||||
|
width: 100%;
|
||||||
|
max-height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
max-width: 680px;
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-tag-wrapper {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 20px;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 13px;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
color: #1677ff;
|
||||||
|
background: rgba(22, 119, 255, 0.1);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(22, 119, 255, 0.2);
|
||||||
|
margin-bottom: 30px;
|
||||||
|
animation: pulse 2s ease-in-out infinite;
|
||||||
|
box-shadow: 0 2px 8px rgba(22, 119, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
box-shadow: 0 2px 8px rgba(22, 119, 255, 0.15);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
box-shadow: 0 4px 12px rgba(22, 119, 255, 0.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-icon {
|
||||||
|
font-size: 16px;
|
||||||
|
animation: rotate 3s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-tag {
|
.home-tag {
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 6px 14px;
|
|
||||||
border-radius: 999px;
|
|
||||||
font-size: 13px;
|
|
||||||
letter-spacing: 0.1em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: #1677ff;
|
|
||||||
background: rgba(22, 119, 255, 0.1);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
width: fit-content;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-title {
|
.home-title {
|
||||||
font-size: 42px;
|
font-size: 48px;
|
||||||
line-height: 1.3;
|
line-height: 1.4;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #1f2937;
|
margin: 0;
|
||||||
margin: 0 0 20px;
|
margin-bottom: 40px;
|
||||||
background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-line {
|
||||||
|
display: block;
|
||||||
|
color: #303133;
|
||||||
|
animation: slideInLeft 0.8s ease-out;
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
animation-delay: 0.2s;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideInLeft {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-30px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
background: linear-gradient(135deg, #1677ff 0%, #4096ff 50%, #69b1ff 100%);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
|
position: relative;
|
||||||
|
animation: shimmer 3s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-subtitle {
|
@keyframes shimmer {
|
||||||
margin: 0;
|
0%,
|
||||||
font-size: 16px;
|
100% {
|
||||||
line-height: 1.8;
|
filter: brightness(1);
|
||||||
color: #4b5563;
|
}
|
||||||
}
|
50% {
|
||||||
|
filter: brightness(1.3);
|
||||||
.home-hero-panel {
|
|
||||||
border-radius: 20px;
|
|
||||||
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: 20px 24px 12px;
|
.decorative-icons {
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
opacity: 0.95;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-body {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
padding: 16px 24px 12px;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-item {
|
|
||||||
padding: 16px 14px;
|
|
||||||
border-radius: 12px;
|
|
||||||
background: rgba(255, 255, 255, 0.15);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
justify-content: center;
|
||||||
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.9;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-value {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-footer {
|
|
||||||
padding: 16px 24px 20px;
|
|
||||||
font-size: 13px;
|
|
||||||
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(280px, 1fr));
|
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-card {
|
.icon-item {
|
||||||
border-radius: 18px;
|
width: 56px;
|
||||||
overflow: hidden;
|
height: 56px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
border: 1px solid rgba(22, 119, 255, 0.15);
|
||||||
|
color: #1677ff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
border: 1px solid transparent;
|
animation: float 3s ease-in-out infinite;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
box-shadow: 0 2px 8px rgba(22, 119, 255, 0.1);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: translateY(-6px);
|
background: rgba(22, 119, 255, 0.1);
|
||||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
|
border-color: rgba(22, 119, 255, 0.3);
|
||||||
border-color: #e6f4ff;
|
transform: translateY(-5px) scale(1.1);
|
||||||
|
box-shadow: 0 6px 16px rgba(22, 119, 255, 0.2);
|
||||||
|
color: #0958d9;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-card :deep(.el-card__body) {
|
@keyframes float {
|
||||||
padding: 24px;
|
0%,
|
||||||
}
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
.card-icon {
|
}
|
||||||
margin-bottom: 16px;
|
50% {
|
||||||
display: inline-flex;
|
transform: translateY(-10px);
|
||||||
padding: 12px;
|
|
||||||
border-radius: 12px;
|
|
||||||
background: linear-gradient(135deg, #e6f4ff 0%, #f0f7ff 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-card h3 {
|
|
||||||
margin: 0 0 12px;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #111827;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-card p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.7;
|
|
||||||
color: #4b5563;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: 32px 32px 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-hero {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-hero-panel {
|
|
||||||
order: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-title {
|
|
||||||
font-size: 36px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 响应式设计
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.home {
|
.home-container {
|
||||||
padding: 24px 20px 32px;
|
padding: 15px;
|
||||||
gap: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-hero {
|
|
||||||
gap: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-title {
|
.home-title {
|
||||||
font-size: 28px;
|
font-size: 32px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-grid {
|
.home-tag-wrapper {
|
||||||
grid-template-columns: 1fr;
|
font-size: 12px;
|
||||||
gap: 20px;
|
padding: 6px 16px;
|
||||||
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.features-grid {
|
.decorative-icons {
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
margin-top: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-body {
|
.icon-item {
|
||||||
grid-template-columns: 1fr;
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.home-title {
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-tag-wrapper {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decorative-icons {
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-item {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,419 @@
|
||||||
|
<template>
|
||||||
|
<div class="home">
|
||||||
|
<section class="home-hero">
|
||||||
|
<div class="home-hero-main">
|
||||||
|
<p class="home-tag">短信发送系统 · 首页</p>
|
||||||
|
<h1 class="home-title">
|
||||||
|
欢迎进入<br />
|
||||||
|
短信发送管理系统
|
||||||
|
</h1>
|
||||||
|
<!-- <p class="home-subtitle">
|
||||||
|
高效、便捷的短信发送管理平台，支持单次发送和循环发送，轻松管理短信任务和接收人员。
|
||||||
|
</p> -->
|
||||||
|
</div>
|
||||||
|
<!-- <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">{{ todayStats.sendCount || '—' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="panel-item">
|
||||||
|
<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">{{ todayStats.pendingCount || '—' }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel-footer">数据接入后将在此区域展示核心指标。</div>
|
||||||
|
</div> -->
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- <section class="home-grid">
|
||||||
|
<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" @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"
|
||||||
|
@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-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">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { Message, Refresh, User, UserFilled, Clock, Document, View } from '@element-plus/icons-vue'
|
||||||
|
|
||||||
|
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: 40px;
|
||||||
|
display: flex;
|
||||||
|
min-height: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
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(320px, 1.4fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-hero-main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
max-width: 680px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-tag {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 6px 14px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 13px;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #1677ff;
|
||||||
|
background: rgba(22, 119, 255, 0.1);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
width: fit-content;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-title {
|
||||||
|
font-size: 42px;
|
||||||
|
line-height: 1.3;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1f2937;
|
||||||
|
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: 16px;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: #4b5563;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-hero-panel {
|
||||||
|
border-radius: 20px;
|
||||||
|
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: 20px 24px 12px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
opacity: 0.95;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-body {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
padding: 16px 24px 12px;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-item {
|
||||||
|
padding: 16px 14px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
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.9;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-value {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-footer {
|
||||||
|
padding: 16px 24px 20px;
|
||||||
|
font-size: 13px;
|
||||||
|
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(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: 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 12px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-card p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: #4b5563;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 32px 32px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-hero {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-hero-panel {
|
||||||
|
order: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-title {
|
||||||
|
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>
|
||||||
Loading…
Reference in New Issue