554 lines
18 KiB
Vue
554 lines
18 KiB
Vue
<template>
|
||
<PageWrapper>
|
||
<el-row :gutter="12" class="pt-0">
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
||
<el-card shadow="hover" class="custom-box-card card-1">
|
||
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
|
||
<template #default>
|
||
<el-row justify="space-between" align="middle">
|
||
<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="17">
|
||
<div>
|
||
<h3 class="my-2 text-3xl">Element Plus</h3>
|
||
<p class="mb-2">开箱即用的中台前端/设计解决方案</p>
|
||
<ul class="text-xs leading-6">
|
||
<li class="truncate"
|
||
><el-badge
|
||
is-dot
|
||
type="info"
|
||
class="mr-2"
|
||
/>内置常用模板，无需考虑交互排版，助你高效开发</li
|
||
>
|
||
<li class="truncate"
|
||
><el-badge is-dot type="info" class="mr-2" />样式美观大方，无缝对接 Element
|
||
Plus，随意组合页面，随心所欲</li
|
||
>
|
||
<li class="truncate"
|
||
><el-badge
|
||
is-dot
|
||
type="info"
|
||
class="mr-2"
|
||
/>丰富的布局模式，具有高可配性，满足您的各类布局需求</li
|
||
>
|
||
<li class="truncate"
|
||
><el-badge
|
||
is-dot
|
||
type="info"
|
||
class="mr-2"
|
||
/>优质的售后技术支持，完善的文档，让您事半功倍</li
|
||
>
|
||
</ul>
|
||
</div>
|
||
<div class="flex items-center mt-3">
|
||
<div class="text-xs">评价：</div>
|
||
<div
|
||
><el-rate
|
||
v-model="rateValue"
|
||
disabled
|
||
show-score
|
||
text-color="#ff9900"
|
||
score-template="{value}分"
|
||
size="large"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="text-xs">畅销：</div>
|
||
<div
|
||
><el-rate
|
||
v-model="rateValue"
|
||
disabled
|
||
show-score
|
||
text-color="#ff9900"
|
||
score-template="{value}分"
|
||
size="large"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="7">
|
||
<el-image :src="salesDashboard" fit="contain" />
|
||
</el-col>
|
||
</el-row>
|
||
</template>
|
||
</el-skeleton>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
||
<el-row :gutter="12">
|
||
<el-col :span="12">
|
||
<el-card shadow="hover" class="custom-box-card">
|
||
<el-skeleton :rows="2" :loading="loading" style="width: 100%">
|
||
<template #default>
|
||
<div class="flex justify-between mb-3">
|
||
<div>
|
||
<h3 class="text-base">访问量</h3>
|
||
<div class="pt-1">
|
||
<CountTo
|
||
:startVal="1"
|
||
v-if="!visits"
|
||
:endVal="14465"
|
||
class="text-2xl"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<el-icon :size="30" :color="`var(--el-color-primary)`">
|
||
<SignalFilled />
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
<div class="summary"
|
||
>增长幅度<el-tag class="ml-2" type="success">+7%</el-tag></div
|
||
>
|
||
</template>
|
||
</el-skeleton>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card shadow="hover" class="custom-box-card"
|
||
><el-skeleton :rows="2" :loading="loading" style="width: 100%">
|
||
<template #default>
|
||
<div class="flex justify-between mb-3">
|
||
<div>
|
||
<h3 class="text-base">销售额</h3>
|
||
<div class="pt-1">
|
||
<CountTo
|
||
prefix="￥"
|
||
:startVal="1"
|
||
v-if="!saleroom"
|
||
:endVal="32719"
|
||
class="text-2xl"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<el-icon :size="30" :color="`var(--el-color-warning)`">
|
||
<TrophyTwotone />
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
<div class="summary">下降幅度<el-tag class="ml-2" type="danger">-3%</el-tag></div>
|
||
</template>
|
||
</el-skeleton></el-card
|
||
>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card shadow="hover" class="custom-box-card"
|
||
><el-skeleton :rows="2" :loading="loading" style="width: 100%">
|
||
<template #default>
|
||
<div class="flex justify-between mb-3">
|
||
<div>
|
||
<h3 class="text-base">订单量</h3>
|
||
<div class="pt-1">
|
||
<CountTo
|
||
:startVal="1"
|
||
v-if="!orderLarge"
|
||
:endVal="46829"
|
||
class="text-2xl"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<el-icon :size="30" :color="`var(--el-color-success)`">
|
||
<AccountBookTwotone />
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
<div class="summary"
|
||
>下降幅度<el-tag class="ml-2" type="danger">-35%</el-tag></div
|
||
>
|
||
</template>
|
||
</el-skeleton></el-card
|
||
>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card shadow="hover" class="custom-box-card"
|
||
><el-skeleton :rows="2" :loading="loading" style="width: 100%">
|
||
<template #default>
|
||
<div class="flex justify-between mb-3">
|
||
<div>
|
||
<h3 class="text-base">成交额</h3>
|
||
<div class="pt-1">
|
||
<CountTo
|
||
prefix="￥"
|
||
:startVal="1"
|
||
v-if="!volume"
|
||
:endVal="41071"
|
||
class="text-2xl"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<el-icon :size="30" :color="`var(--el-color-danger)`">
|
||
<DollarCircleTwotone />
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
<div class="summary"
|
||
>增长幅度<el-tag class="ml-2" type="success">+23%</el-tag></div
|
||
>
|
||
</template>
|
||
</el-skeleton></el-card
|
||
>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="12">
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
|
||
<el-card shadow="hover" class="custom-box-card">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span class="text-base">会员增长趋势</span>
|
||
</div>
|
||
</template>
|
||
<el-skeleton :rows="6" :loading="loading" style="width: 100%">
|
||
<template #default>
|
||
<NewVisitAmount />
|
||
</template>
|
||
</el-skeleton>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
|
||
<el-card shadow="hover" class="custom-box-card card-4">
|
||
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
|
||
<!-- 自定义骨架屏 start -->
|
||
<template #template>
|
||
<el-skeleton-item
|
||
variant="image"
|
||
style="width: 60px; height: 60px; margin: 14px auto 0"
|
||
/>
|
||
<div style="padding-top: 20px">
|
||
<el-skeleton-item variant="h3" style="width: 60%; height: 28px; margin: 0 auto" />
|
||
</div>
|
||
<div style="padding-top: 20px">
|
||
<el-skeleton-item variant="p" style="width: 50%; height: 14px; margin: 0 auto" />
|
||
</div>
|
||
<div style="padding-top: 10px">
|
||
<el-skeleton-item variant="p" style="width: 40%; height: 14px; margin: 0 auto" />
|
||
</div>
|
||
<div style="padding-top: 10px">
|
||
<el-skeleton-item
|
||
variant="button"
|
||
style="width: 50%; height: 30px; margin: 0 auto"
|
||
/>
|
||
</div>
|
||
<div
|
||
style="
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20px;
|
||
"
|
||
>
|
||
<el-skeleton-item variant="text" style="width: 30%" />
|
||
<el-skeleton-item variant="text" style="width: 30%" />
|
||
<el-skeleton-item variant="text" style="width: 30%" />
|
||
</div>
|
||
</template>
|
||
<!-- 自定义骨架屏 end -->
|
||
<template #default>
|
||
<div class="pt-4 logo">
|
||
<img src="~@/assets/images/logo.png" alt="Admin Pro" class="img" />
|
||
</div>
|
||
<h3>NaiveAdmin</h3>
|
||
<p class="mt-4 word">开箱即用的中台前端<br />设计解决方案</p>
|
||
<div class="btn">
|
||
<el-button type="primary" size="large" round @click="goUrl"
|
||
>去官网看看</el-button
|
||
></div
|
||
>
|
||
<div class="mt-6">
|
||
<el-space wrap>
|
||
<el-tag effect="dark" :hit="true" color="#7816ff">多生态支持</el-tag>
|
||
<el-tag effect="dark" color="#00b42a">丰富功能</el-tag>
|
||
<el-tag effect="dark" color="#ff7d00" class="hidden-lg-only">实用组件</el-tag>
|
||
</el-space>
|
||
</div>
|
||
</template>
|
||
</el-skeleton>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="12">
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
|
||
<el-card shadow="hover" class="custom-box-card">
|
||
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
|
||
<template #default>
|
||
<el-table :data="tableData" style="width: 100%">
|
||
<el-table-column prop="date" label="姓名">
|
||
<template #default="scope">
|
||
<div class="flex items-center">
|
||
<el-avatar :size="40" :alt="scope.row.name" :src="scope.row.avatar" />
|
||
<p class="ml-4">{{ scope.row.name }}</p>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="isMember" label="是否会员" align="center">
|
||
<template #default="scope">
|
||
<el-tag :type="scope.row.isMember ? 'success' : 'danger'">{{
|
||
scope.row.isMember ? '是' : '否'
|
||
}}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="telephone" label="手机" align="center" />
|
||
<el-table-column prop="date" label="购买日期" align="center" />
|
||
|
||
<el-table-column label="操作" align="center">
|
||
<template #default="scope">
|
||
<el-link href="javascript:;" type="primary">编辑</el-link>
|
||
<el-divider direction="vertical" />
|
||
<el-popconfirm :title="`您确认要删除 ${scope.row.name} 吗？`">
|
||
<template #reference>
|
||
<el-link href="javascript:;" type="primary">删除</el-link>
|
||
</template>
|
||
</el-popconfirm>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
</el-skeleton>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
|
||
<el-card shadow="hover" class="custom-box-card card-6">
|
||
<template #header>
|
||
<div class="flex items-center justify-between card-header">
|
||
<span class="text-base">评论</span>
|
||
<el-link href="#" target="_blank" type="primary">更多</el-link>
|
||
</div>
|
||
</template>
|
||
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
|
||
<template #default>
|
||
<ul>
|
||
<li v-for="(item, index) of comment" :key="index" class="flex py-3 items-top">
|
||
<el-avatar :size="36" :src="item.avatar" />
|
||
<div class="flex-grow ml-3">
|
||
<div class="flex items-center justify-between">
|
||
<span>{{ item.name }}</span>
|
||
<span :style="`color: var(--el-text-color-secondary)`" class="text-xs">{{
|
||
item.datetime
|
||
}}</span>
|
||
</div>
|
||
<p>{{ item.content }}</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</template>
|
||
</el-skeleton>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</PageWrapper>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import 'element-plus/theme-chalk/display.css';
|
||
import NewVisitAmount from './components/NewVisitAmount.vue';
|
||
import { getConsoleInfo } from '@/api/dashboard/console';
|
||
import { CountTo } from '@/components/CountTo/index';
|
||
|
||
import salesDashboard from '@/assets/images/sales-dashboard.svg';
|
||
import schoolboy from '@/assets/images/schoolboy.png';
|
||
import {
|
||
SignalFilled,
|
||
TrophyTwotone,
|
||
DollarCircleTwotone,
|
||
AccountBookTwotone,
|
||
} from '@vicons/antd';
|
||
import type {
|
||
TypeConsole,
|
||
TypeOrderLarge,
|
||
TypeSaleroom,
|
||
TypeVisits,
|
||
} from '@/api/dashboard/console';
|
||
|
||
const loading = ref(true);
|
||
const rateValue = ref(5);
|
||
const visits = ref<TypeVisits>();
|
||
const saleroom = ref<TypeSaleroom>();
|
||
const orderLarge = ref<TypeOrderLarge>();
|
||
const volume = ref<TypeOrderLarge>();
|
||
|
||
onMounted(async () => {
|
||
// const res: TypeConsole = await getConsoleInfo();
|
||
// visits.value = res.visits;
|
||
// saleroom.value = res.saleroom;
|
||
// orderLarge.value = res.orderLarge;
|
||
// volume.value = res.volume;
|
||
loading.value = false;
|
||
});
|
||
|
||
function goUrl() {
|
||
window.open('https://www.naiveadmin.com', '_blank');
|
||
}
|
||
|
||
const comment = [
|
||
{
|
||
id: 1,
|
||
name: '武军',
|
||
avatar: schoolboy,
|
||
content: '这个系统太好用了',
|
||
datetime: '5分钟前',
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '顾平',
|
||
avatar: schoolboy,
|
||
content: 'UI界面有两下子',
|
||
datetime: '1小时前',
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '何军',
|
||
avatar: schoolboy,
|
||
content: '颜值有点高呀',
|
||
datetime: '1天前',
|
||
},
|
||
{
|
||
id: 4,
|
||
name: '朱一龙',
|
||
avatar: schoolboy,
|
||
content: '给作者点赞',
|
||
datetime: '2个月前',
|
||
},
|
||
{
|
||
id: 5,
|
||
name: '夏勇',
|
||
avatar: schoolboy,
|
||
content: '还是多提宝贵建议吧',
|
||
datetime: '3年前',
|
||
},
|
||
];
|
||
|
||
const tableData = [
|
||
{
|
||
id: 1,
|
||
name: '黎磊',
|
||
avatar: schoolboy,
|
||
isMember: true,
|
||
telephone: '1281391234',
|
||
date: '2021-12-14',
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '周强',
|
||
avatar: schoolboy,
|
||
isMember: true,
|
||
telephone: '1281391234',
|
||
date: '2021-12-14',
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '常静',
|
||
avatar: schoolboy,
|
||
isMember: true,
|
||
telephone: '1281391234',
|
||
date: '2021-12-14',
|
||
},
|
||
{
|
||
id: 4,
|
||
name: '尹丽',
|
||
avatar: schoolboy,
|
||
isMember: true,
|
||
telephone: '1281391234',
|
||
date: '2021-12-14',
|
||
},
|
||
{
|
||
id: 5,
|
||
name: '江秀英',
|
||
avatar: schoolboy,
|
||
isMember: false,
|
||
telephone: '1281391234',
|
||
date: '2021-12-14',
|
||
},
|
||
{
|
||
id: 6,
|
||
name: '杜杰',
|
||
avatar: schoolboy,
|
||
isMember: true,
|
||
telephone: '1281391234',
|
||
date: '2021-12-14',
|
||
},
|
||
];
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 右侧内容区域背景色
|
||
.admin-layout-content-main {
|
||
background: var(--el-bg-color);
|
||
}
|
||
// 处理栅格
|
||
.el-row {
|
||
padding-top: 6px;
|
||
margin: -6px;
|
||
.el-row {
|
||
padding-top: 0;
|
||
}
|
||
}
|
||
.el-col {
|
||
padding-top: 6px;
|
||
padding-bottom: 6px;
|
||
}
|
||
// 卡片定制
|
||
.custom-box-card {
|
||
border: none;
|
||
}
|
||
|
||
.el-rate--large {
|
||
height: 20px;
|
||
}
|
||
.el-rate .el-rate__decimal {
|
||
position: absolute;
|
||
}
|
||
|
||
@media (max-width: 1199px) {
|
||
.mb12 {
|
||
margin-bottom: 12px;
|
||
}
|
||
}
|
||
|
||
.card-1 {
|
||
min-height: 286px;
|
||
li {
|
||
sup {
|
||
top: auto;
|
||
}
|
||
}
|
||
}
|
||
.prefix {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.card-4 {
|
||
height: 351px;
|
||
text-align: center;
|
||
h3 {
|
||
margin: 10px 0;
|
||
font-size: 28px;
|
||
}
|
||
.logo {
|
||
width: 60px;
|
||
margin: 0 auto;
|
||
}
|
||
.price {
|
||
margin: 15px 0;
|
||
}
|
||
.word {
|
||
margin-bottom: 15px;
|
||
}
|
||
.el-tag--dark {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.card-6 {
|
||
.el-card__body {
|
||
padding: 15px 20px;
|
||
}
|
||
}
|
||
</style>
|