'admin-21.02.17:更新最新依赖、新增首页'
This commit is contained in:
lyt-Top
parent
74e8926177
commit
067089e0b2
@ -7,7 +7,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"clipboard": "^2.0.6",
|
||||
"element-plus": "^1.0.2-beta.31",
|
||||
"element-plus": "^1.0.2-beta.32",
|
||||
"mitt": "^2.1.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"screenfull": "^5.1.0",
|
||||
@ -18,15 +18,15 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/clipboard": "^2.0.1",
|
||||
"@types/node": "^14.14.22",
|
||||
"@types/node": "^14.14.27",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/sortablejs": "^1.10.6",
|
||||
"@vitejs/plugin-vue": "^1.1.2",
|
||||
"@vitejs/plugin-vue": "^1.1.4",
|
||||
"@vue/compiler-sfc": "^3.0.5",
|
||||
"dotenv": "^8.2.0",
|
||||
"sass": "^1.32.5",
|
||||
"sass-loader": "^10.1.1",
|
||||
"typescript": "^4.1.3",
|
||||
"vite": "^2.0.0-beta.50"
|
||||
"sass": "^1.32.7",
|
||||
"sass-loader": "^11.0.1",
|
||||
"typescript": "^4.1.5",
|
||||
"vite": "^2.0.0-beta.69"
|
||||
}
|
||||
}
|
||||
@ -24,6 +24,26 @@ body,
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
// 滚动条的宽度
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
// 滚动条的设置
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(144, 147, 153, 0.3);
|
||||
background-clip: padding-box;
|
||||
min-height: 28px;
|
||||
border-radius: 5px;
|
||||
transition: 0.3s background-color;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(144, 147, 153, 0.5);
|
||||
}
|
||||
|
||||
/* 主布局样式
|
||||
------------------------------- */
|
||||
.layout-container {
|
||||
@ -139,6 +159,19 @@ body,
|
||||
.flex-margin {
|
||||
margin: auto;
|
||||
}
|
||||
.flex-warp {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
margin: 0 -5px;
|
||||
.flex-warp-item {
|
||||
padding: 5px;
|
||||
.flex-warp-item-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 宽高 100%
|
||||
------------------------------- */
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于576px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $xs) {
|
||||
}
|
||||
|
||||
/* 页面宽度小于768px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $sm) {
|
||||
.el-form {
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.el-input,
|
||||
.el-textarea {
|
||||
width: 100%;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
10
vue-admin-wonderful-next/src/theme/media/home.scss
Normal file
10
vue-admin-wonderful-next/src/theme/media/home.scss
Normal file
@ -0,0 +1,10 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于768px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $sm) {
|
||||
.home-warning-media,
|
||||
.home-dynamic-media {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
@import './login.scss';
|
||||
@import './error.scss';
|
||||
@import './layout.scss';
|
||||
@import './form.scss';
|
||||
@import './personal.scss';
|
||||
@import './tagsView.scss';
|
||||
@import './home.scss';
|
||||
|
||||
11
vue-admin-wonderful-next/src/theme/media/tagsView.scss
Normal file
11
vue-admin-wonderful-next/src/theme/media/tagsView.scss
Normal file
@ -0,0 +1,11 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于768px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $sm) {
|
||||
.tags-view-form {
|
||||
.tags-view-form-col {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
// 字体图标 url
|
||||
const cssCdnUrlList: Array<string> = ["//at.alicdn.com/t/font_2298093_anmim41evr5.css"]
|
||||
const cssCdnUrlList: Array<string> = ['//at.alicdn.com/t/font_2298093_ri4yz1f9b7o.css']
|
||||
// 第三方 js url
|
||||
const jsCdnUrlList: Array<string> = []
|
||||
const jsCdnUrlList: Array<string> = ['https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js']
|
||||
|
||||
// 动态设置字体图标
|
||||
export function setCssCdn() {
|
||||
|
||||
@ -1,19 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card shadow="hover" header="tagsView 非当前页演示">
|
||||
<el-form :model="formInline" size="small" label-width="60px" style="margin-bottom:1px;">
|
||||
<el-form-item label="功能：">
|
||||
<el-select v-model="formInline.selectId" placeholder="请选择">
|
||||
<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="路径：">
|
||||
<el-input v-model="formInline.path" placeholder="路径如：/fun/tagsView" style="max-width:203px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onImplementClick" icon="el-icon-thumb">点击执行</el-button>
|
||||
</el-form-item>
|
||||
<el-form :model="formInline" size="small" label-width="40px" class="tags-view-form">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="4" class="tags-view-form-col">
|
||||
<el-form-item label="功能">
|
||||
<el-select v-model="formInline.selectId" placeholder="请选择" class="w100">
|
||||
<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="4" class="tags-view-form-col">
|
||||
<el-form-item label="路径">
|
||||
<el-input v-model="formInline.path" placeholder="路径如：/fun/tagsView"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="4">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onImplementClick" icon="el-icon-thumb">点击执行</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card shadow="hover" header="tagsView 当前页演示" class="mt15">
|
||||
@ -124,20 +132,4 @@ export default {
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.flex-warp {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
margin: 0 -5px;
|
||||
.flex-warp-item {
|
||||
padding: 5px;
|
||||
.flex-warp-item-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@ -1,101 +1,392 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-input v-model="val"></el-input>
|
||||
home
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home</p>
|
||||
<p>home123123</p>
|
||||
<div class="home-container">
|
||||
<el-row :gutter="15">
|
||||
<el-col :sm="6" class="mb15">
|
||||
<div class="home-card-item home-card-first">
|
||||
<div class="flex-margin flex">
|
||||
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg">
|
||||
<div class="home-card-first-right ml15">
|
||||
<div class="flex-margin">
|
||||
<div class="home-card-first-right-title">早上好，admin！</div>
|
||||
<div class="home-card-first-right-msg mt5">超级管理</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :sm="6" class="mb15" v-for="(v,k) in topCardItemList" :key="k">
|
||||
<div class="home-card-item home-card-item-box" :style="{background:v.color}">
|
||||
<div class="home-card-item-flex">
|
||||
<div class="home-card-item-title pb3">{{v.title}}</div>
|
||||
<div class="home-card-item-title-num pb6">{{v.titleNum}}</div>
|
||||
<div class="home-card-item-tip pb3">{{v.tip}}</div>
|
||||
<div class="home-card-item-tip-num">{{v.tipNum}}</div>
|
||||
</div>
|
||||
<i :class="v.icon" :style="{'color': v.iconColor}"></i>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="15">
|
||||
<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="mb15">
|
||||
<el-card shadow="hover" header="实验室使用情况">
|
||||
<div id="homeLaboratory" style="height:200px;"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8">
|
||||
<el-card shadow="hover" header="环境监测">
|
||||
<div class="home-monitor">
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item" v-for="(v,k) in environmentList" :key="k">
|
||||
<div class="flex-warp-item-box">
|
||||
<i :class="v.icon" :style="{color:v.iconColor}"></i>
|
||||
<span class="pl5">{{v.label}}</span>
|
||||
<div class="mt10">{{v.value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="15">
|
||||
<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="home-warning-media">
|
||||
<el-card shadow="hover" header="预警信息">
|
||||
<el-table :data="tableData.data" style="width: 100%;" height="200" stripe>
|
||||
<el-table-column prop="date" label="时间"></el-table-column>
|
||||
<el-table-column prop="name" label="实验室名称"></el-table-column>
|
||||
<el-table-column prop="address" label="报警内容"></el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8" class="home-dynamic-media">
|
||||
<el-card shadow="hover" header="动态信息">
|
||||
<div class="home-dynamic">
|
||||
<el-scrollbar>
|
||||
<div class="home-dynamic-item" v-for="(v,k) in activitiesList" :key="k">
|
||||
<div class="home-dynamic-item-left">
|
||||
<div class="home-dynamic-item-left-time1 mb5">{{v.time1}}</div>
|
||||
<div class="home-dynamic-item-left-time2">{{v.time2}}</div>
|
||||
</div>
|
||||
<div class="home-dynamic-item-line">
|
||||
<i class="iconfont icon-fangkuang"></i>
|
||||
</div>
|
||||
<div class="home-dynamic-item-right">
|
||||
<div class="home-dynamic-item-right-title mb5">
|
||||
<i class="el-icon-s-comment"></i>
|
||||
<span>{{v.title}}</span>
|
||||
</div>
|
||||
<div class="home-dynamic-item-right-label">{{v.label}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mt15">
|
||||
<el-card shadow="hover" header="履约超时预警">
|
||||
<div id="homeOvertime" style="height:200px;"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive } from "vue";
|
||||
import { toRefs, reactive, onMounted } from "vue";
|
||||
import { topCardItemList, environmentList, activitiesList } from "./mock.ts";
|
||||
export default {
|
||||
name: "home",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
val: "",
|
||||
topCardItemList,
|
||||
environmentList,
|
||||
activitiesList,
|
||||
tableData: {
|
||||
data: [
|
||||
{
|
||||
date: "2016-05-02",
|
||||
name: "1号实验室",
|
||||
address: "烟感2.1%OBS/M",
|
||||
},
|
||||
{
|
||||
date: "2016-05-04",
|
||||
name: "2号实验室",
|
||||
address: "温度30℃",
|
||||
},
|
||||
{
|
||||
date: "2016-05-01",
|
||||
name: "3号实验室",
|
||||
address: "湿度57%RH",
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
// 实验室使用情况
|
||||
const initHomeLaboratory = () => {
|
||||
const myChart = echarts.init(document.getElementById("homeLaboratory"));
|
||||
const option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
right: 20,
|
||||
bottom: 30,
|
||||
left: 30,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: ["预购队列", "最新成交价"],
|
||||
right: 13,
|
||||
},
|
||||
xAxis: {
|
||||
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "价格",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "预购队列",
|
||||
type: "bar",
|
||||
data: [5, 20, 36, 10, 10, 20],
|
||||
},
|
||||
{
|
||||
name: "最新成交价",
|
||||
type: "line",
|
||||
data: [15, 20, 16, 20, 30, 8],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
// 履约超时预警
|
||||
const initHomeOvertime = () => {
|
||||
const myChart = echarts.init(document.getElementById("homeOvertime"));
|
||||
const option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
right: 20,
|
||||
bottom: 30,
|
||||
left: 30,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: ["订单数量", "超时数量", "在线数量", "预警数量"],
|
||||
right: 13,
|
||||
},
|
||||
xAxis: {
|
||||
data: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "数量",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "订单数量",
|
||||
type: "bar",
|
||||
data: [5, 20, 36, 10, 10, 20, 11, 13, 10, 9, 17, 19],
|
||||
},
|
||||
{
|
||||
name: "超时数量",
|
||||
type: "bar",
|
||||
data: [15, 12, 26, 15, 11, 16, 31, 13, 5, 16, 13, 15],
|
||||
},
|
||||
{
|
||||
name: "在线数量",
|
||||
type: "line",
|
||||
data: [15, 20, 16, 20, 30, 8, 16, 19, 12, 18, 19, 14],
|
||||
},
|
||||
{
|
||||
name: "预警数量",
|
||||
type: "line",
|
||||
data: [10, 10, 13, 12, 15, 18, 19, 10, 12, 15, 11, 17],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
// 页面加载前
|
||||
onMounted(() => {
|
||||
initHomeLaboratory();
|
||||
initHomeOvertime();
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.home-container {
|
||||
overflow-x: hidden;
|
||||
.home-card-item {
|
||||
width: 100%;
|
||||
height: 103px;
|
||||
background: gray;
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
.home-card-item-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
i {
|
||||
right: 0px !important;
|
||||
bottom: 0px !important;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
font-size: 70px;
|
||||
transform: rotate(-30deg);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
.home-card-item-flex {
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
.home-card-item-title,
|
||||
.home-card-item-tip {
|
||||
font-size: 13px;
|
||||
}
|
||||
.home-card-item-title-num {
|
||||
font-size: 18px;
|
||||
}
|
||||
.home-card-item-tip-num {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.home-card-first {
|
||||
background: white;
|
||||
border: 1px solid #ebeef5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 100%;
|
||||
border: 2px solid var(--color-primary-light-5);
|
||||
}
|
||||
.home-card-first-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.home-card-first-right-msg {
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
.home-monitor {
|
||||
height: 200px;
|
||||
.flex-warp-item {
|
||||
width: 50%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
.flex-warp-item-box {
|
||||
margin: auto;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.home-dynamic {
|
||||
height: 200px;
|
||||
.home-dynamic-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
&:first-of-type {
|
||||
.home-dynamic-item-line {
|
||||
i {
|
||||
color: orange !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.home-dynamic-item-left {
|
||||
text-align: right;
|
||||
.home-dynamic-item-left-time1 {
|
||||
}
|
||||
.home-dynamic-item-left-time2 {
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
.home-dynamic-item-line {
|
||||
height: 60px;
|
||||
border-right: 2px dashed #dfdfdf;
|
||||
margin: 0 20px;
|
||||
position: relative;
|
||||
i {
|
||||
color: var(--color-primary);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: -6px;
|
||||
transform: rotate(46deg);
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
.home-dynamic-item-right {
|
||||
flex: 1;
|
||||
.home-dynamic-item-right-title {
|
||||
i {
|
||||
margin-right: 5px;
|
||||
border: 1px solid #dfdfdf;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 100%;
|
||||
padding: 3px 2px 2px;
|
||||
text-align: center;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
.home-dynamic-item-right-label {
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
80
vue-admin-wonderful-next/src/views/home/mock.ts
Normal file
80
vue-admin-wonderful-next/src/views/home/mock.ts
Normal file
@ -0,0 +1,80 @@
|
||||
// 最顶部 card
|
||||
export const topCardItemList = [
|
||||
{
|
||||
title: '今日访问人数',
|
||||
titleNum: '123',
|
||||
tip: '在场人数',
|
||||
tipNum: '911',
|
||||
color: '#F95959',
|
||||
iconColor: '#F86C6B',
|
||||
icon: 'iconfont icon-jinridaiban'
|
||||
},
|
||||
{
|
||||
title: '实验室总数',
|
||||
titleNum: '123',
|
||||
tip: '使用中',
|
||||
tipNum: '611',
|
||||
color: '#8595F4',
|
||||
iconColor: '#92A1F4',
|
||||
icon: 'iconfont icon-AIshiyanshi'
|
||||
},
|
||||
{
|
||||
title: '申请人数（月）',
|
||||
titleNum: '123',
|
||||
tip: '通过人数',
|
||||
tipNum: '911',
|
||||
color: '#FEBB50',
|
||||
iconColor: '#FDC566',
|
||||
icon: 'iconfont icon-shenqingkaiban'
|
||||
}
|
||||
]
|
||||
|
||||
// 环境监测
|
||||
export const environmentList = [
|
||||
{
|
||||
icon: 'iconfont icon-yangan',
|
||||
label: '烟感',
|
||||
value: '2.1%OBS/M',
|
||||
iconColor: '#F72B3F'
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-wendu',
|
||||
label: '温度',
|
||||
value: '30℃',
|
||||
iconColor: '#91BFF8'
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-shidu',
|
||||
label: '湿度',
|
||||
value: '57%RH',
|
||||
iconColor: '#88D565'
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-zaosheng',
|
||||
label: '噪声',
|
||||
value: '57DB',
|
||||
iconColor: '#FBD4A0'
|
||||
}
|
||||
]
|
||||
|
||||
// 动态信息
|
||||
export const activitiesList = [
|
||||
{
|
||||
time1: '今天',
|
||||
time2: '12:20:30',
|
||||
title: '任务',
|
||||
label: 'lyt发送了邮件'
|
||||
},
|
||||
{
|
||||
time1: '02-17',
|
||||
time2: '12:20:30',
|
||||
title: '页面',
|
||||
label: '完成对首页的开发'
|
||||
},
|
||||
{
|
||||
time1: '02-14',
|
||||
time2: '12:20:30',
|
||||
title: '页面',
|
||||
label: '新增个人中心'
|
||||
}
|
||||
]
|
||||
@ -7,12 +7,14 @@ const { VITE_PORT, VITE_PUBLIC_PATH, VITE_OPEN } = loadEnv()
|
||||
const viteConfig: UserConfig = {
|
||||
plugins: [vue()],
|
||||
root: process.cwd(),
|
||||
alias: [
|
||||
{
|
||||
find: /^\/@\//,
|
||||
replacement: '/src/'
|
||||
}
|
||||
],
|
||||
resolve: {
|
||||
alias: [
|
||||
{
|
||||
find: /^\/@\//,
|
||||
replacement: '/src/'
|
||||
}
|
||||
]
|
||||
},
|
||||
base: process.env.NODE_ENV === "production" ? VITE_PUBLIC_PATH : './',
|
||||
optimizeDeps: {
|
||||
include: ['element-plus/lib/locale/lang/zh-cn']
|
||||
|
||||
Loading…
Reference in New Issue
Block a user