|
|
@@ -3,37 +3,69 @@
|
|
|
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
|
|
|
:leave-active-class="proxy?.animate.searchAnimate.leave">
|
|
|
<div v-show="showSearch" class="mb-[10px]">
|
|
|
- <el-card shadow="hover" :style="{ height: '70px' }">
|
|
|
- <el-row :gutter="20" align="middle">
|
|
|
- <!-- 节目总数 -->
|
|
|
- <el-col :span="6" style="display: flex; justify-content: center; align-items: center">
|
|
|
- <el-statistic :value="totalNum">
|
|
|
+ <el-card shadow="hover" class="statistic-card">
|
|
|
+ <el-row :gutter="20" justify="space-between">
|
|
|
+ <!-- 总发布数 -->
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-statistic :value="totalNum" class="statistic-item">
|
|
|
<template #title>
|
|
|
- <div style="display: inline-flex; align-items: center">总发布数</div>
|
|
|
+ <div class="statistic-title">
|
|
|
+ <el-icon><Collection /></el-icon>
|
|
|
+ <span>总发布数</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #prefix>
|
|
|
+ <div class="statistic-icon total-icon">
|
|
|
+ <el-icon><Promotion /></el-icon>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-statistic>
|
|
|
</el-col>
|
|
|
- <!-- 轮播总数 -->
|
|
|
- <el-col :span="6" style="display: flex; justify-content: center; align-items: center">
|
|
|
- <el-statistic :value="lbNum">
|
|
|
+ <!-- 轮播组发布 -->
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-statistic :value="lbNum" class="statistic-item">
|
|
|
<template #title>
|
|
|
- <div style="display: inline-flex; align-items: center">轮播组发布</div>
|
|
|
+ <div class="statistic-title">
|
|
|
+ <el-icon><RefreshRight /></el-icon>
|
|
|
+ <span>轮播组发布</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #prefix>
|
|
|
+ <div class="statistic-icon carousel-icon">
|
|
|
+ <el-icon><Refresh /></el-icon>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-statistic>
|
|
|
</el-col>
|
|
|
- <!-- 节目总数 -->
|
|
|
- <el-col :span="6" style="display: flex; justify-content: center; align-items: center">
|
|
|
- <el-statistic :value="jmNum">
|
|
|
+ <!-- 分屏组发布 -->
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-statistic :value="jmNum" class="statistic-item">
|
|
|
<template #title>
|
|
|
- <div style="display: inline-flex; align-items: center">分屏组发布</div>
|
|
|
+ <div class="statistic-title">
|
|
|
+ <el-icon><Grid /></el-icon>
|
|
|
+ <span>分屏组发布</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #prefix>
|
|
|
+ <div class="statistic-icon split-icon">
|
|
|
+ <el-icon><Menu /></el-icon>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-statistic>
|
|
|
</el-col>
|
|
|
- <!-- 素材总数 -->
|
|
|
- <el-col :span="6" style="display: flex; justify-content: center; align-items: center">
|
|
|
- <el-statistic :value="scNum">
|
|
|
+ <!-- 素材发布 -->
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-statistic :value="scNum" class="statistic-item">
|
|
|
<template #title>
|
|
|
- <div style="display: inline-flex; align-items: center">素材发布</div>
|
|
|
+ <div class="statistic-title">
|
|
|
+ <el-icon><Files /></el-icon>
|
|
|
+ <span>素材发布</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #prefix>
|
|
|
+ <div class="statistic-icon material-icon">
|
|
|
+ <el-icon><Document /></el-icon>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-statistic>
|
|
|
</el-col>
|
|
|
@@ -585,7 +617,7 @@ const handleQuery = () => {
|
|
|
const handleDevice = async (row?: ItemPushVO) => {
|
|
|
removeItemTag.value = false;
|
|
|
const pushId = row.id;
|
|
|
- deviceDialog.title = '发布详情';
|
|
|
+ deviceDialog.title = '下发详情';
|
|
|
deviceDialog.visible = true;
|
|
|
dialogQueryParams.value.pushId = pushId;
|
|
|
// dialogQueryParams.value.pageSize = 1000;
|
|
|
@@ -600,7 +632,7 @@ const handleRemoveItem = async (row?: ItemPushVO) => {
|
|
|
removeButtonTag.value = true;
|
|
|
removeIds.value = [];
|
|
|
const pushId = row.id;
|
|
|
- deviceDialog.title = '内容下架';
|
|
|
+ deviceDialog.title = '下架';
|
|
|
deviceDialog.visible = true;
|
|
|
dialogQueryParams.value.pushId = pushId;
|
|
|
removePushId.value = pushId;
|
|
|
@@ -805,4 +837,100 @@ onMounted(() => {
|
|
|
.dialog-footer {
|
|
|
text-align: right;
|
|
|
}
|
|
|
+.statistic-card {
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ padding: 15px 0;
|
|
|
+ height: 120px;
|
|
|
+}
|
|
|
+
|
|
|
+.statistic-item {
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.statistic-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.statistic-icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 0 auto 10px;
|
|
|
+ color: white;
|
|
|
+ font-size: 18px;
|
|
|
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
|
|
|
+}
|
|
|
+
|
|
|
+.total-icon {
|
|
|
+ background: linear-gradient(135deg, #409eff, #2282ff);
|
|
|
+}
|
|
|
+
|
|
|
+.carousel-icon {
|
|
|
+ background: linear-gradient(135deg, #e6a23c, #d48c1f);
|
|
|
+}
|
|
|
+
|
|
|
+.split-icon {
|
|
|
+ background: linear-gradient(135deg, #67c23a, #48ab1f);
|
|
|
+}
|
|
|
+
|
|
|
+.material-icon {
|
|
|
+ background: linear-gradient(135deg, #909399, #73767a);
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.statistic-item .el-statistic__content) {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+
|
|
|
+/* 响应式设计 */
|
|
|
+@media (max-width: 1200px) {
|
|
|
+ :deep(.el-col) {
|
|
|
+ flex: 0 0 50%;
|
|
|
+ max-width: 50%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-row) {
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .statistic-card {
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 768px) {
|
|
|
+ :deep(.el-col) {
|
|
|
+ flex: 0 0 100%;
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .statistic-title {
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .statistic-icon {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.statistic-item .el-statistic__content) {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|