tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 全局代码格式化

Browse Source 
Former-commit-id: bb50c8419b8fcdeb48c93fce9f399d901e8f5a52
This commit is contained in:
郝先瑞
2022-05-04 15:02:33 +08:00
parent e563bc340c
commit 11f02c0254
136 changed files with 11147 additions and 9780 deletions
Download Patch File Download Diff File Expand all files Collapse all files

423
src/views/dashboard/index.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="dashboard-container">
<github-corner class="github-corner" />
<div class="dashboard-container">
<github-corner class="github-corner" />
<!-- 数据 -->
<el-row :gutter="40" class="card-panel__col">
<!-- <el-col :xs="24" :lg="6" class="card-panel__col">
<!-- 数据 -->
<el-row :gutter="40" class="card-panel__col">
<!-- <el-col :xs="24" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper" style="margin-top: -10px">
<el-image style="width:200px; height: 100px"
@@ -22,249 +22,264 @@
</div>
</el-col>-->
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="uv" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">访问数</div>
<div class="card-panel-num">1000</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="uv" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">访问数</div>
<div class="card-panel-num">1000</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">消息数</div>
<div class="card-panel-num">1000</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">消息数</div>
<div class="card-panel-num">1000</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="money" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">收入金额</div>
<div class="card-panel-num">1000</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">订单数</div>
<div class="card-panel-num">1000</div>
</div>
</div>
</el-col>
</el-row>
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="money" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">收入金额</div>
<div class="card-panel-num">1000</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">订单数</div>
<div class="card-panel-num">1000</div>
</div>
</div>
</el-col>
</el-row>
<!-- 项目 + 团队成员介绍 -->
<el-row :gutter="40">
<!-- 项目介绍 -->
<el-col :md="12" :lg="12" class="card-panel__col">
<Project />
</el-col>
<!-- 项目 + 团队成员介绍 -->
<el-row :gutter="40">
<!-- 项目介绍 -->
<el-col :md="12" :lg="12" class="card-panel__col">
<Project />
</el-col>
<!-- 团队介绍 -->
<el-col :md="12" :lg="12" class="card-panel__col">
<Team />
</el-col>
</el-row>
<!-- 团队介绍 -->
<el-col :md="12" :lg="12" class="card-panel__col">
<Team />
</el-col>
</el-row>
<!-- Echarts 图表 -->
<el-row :gutter="40" style="margin-top: 20px">
<el-col :sm="24" :lg="8" class="card-panel__col">
<BarChart id="barChart" height="400px" width="100%" class="chart-container" />
</el-col>
<!-- Echarts 图表 -->
<el-row :gutter="40" style="margin-top: 20px">
<el-col :sm="24" :lg="8" class="card-panel__col">
<BarChart
id="barChart"
height="400px"
width="100%"
class="chart-container"
/>
</el-col>
<el-col :xs="24" :sm="12" :lg="8" class="card-panel__col">
<PieChart id="pieChart" height="400px" width="100%" class="chart-container" />
<!--订单漏斗图-->
<!--<FunnelChart id="funnelChart" height="400px" width="100%" class="chart-container"/>-->
</el-col>
<el-col :xs="24" :sm="12" :lg="8" class="card-panel__col">
<PieChart
id="pieChart"
height="400px"
width="100%"
class="chart-container"
/>
<!--订单漏斗图-->
<!--<FunnelChart id="funnelChart" height="400px" width="100%" class="chart-container"/>-->
</el-col>
<el-col :xs="24" :sm="12" :lg="8" class="card-panel__col">
<RadarChart id="radarChart" height="400px" width="100%" class="chart-container" />
</el-col>
</el-row>
</div>
<el-col :xs="24" :sm="12" :lg="8" class="card-panel__col">
<RadarChart
id="radarChart"
height="400px"
width="100%"
class="chart-container"
/>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
// 组件引用
import GithubCorner from "@/components/GithubCorner/index.vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import BarChart from "./components/Chart/BarChart.vue";
import PieChart from "./components/Chart/PieChart.vue";
import RadarChart from "./components/Chart/RadarChart.vue";
import GithubCorner from '@/components/GithubCorner/index.vue';
import SvgIcon from '@/components/SvgIcon/index.vue';
import BarChart from './components/Chart/BarChart.vue';
import PieChart from './components/Chart/PieChart.vue';
import RadarChart from './components/Chart/RadarChart.vue';
import Project from "./components/Project/index.vue";
import Team from "./components/Team/index.vue";
import Project from './components/Project/index.vue';
import Team from './components/Team/index.vue';
</script>
<style lang="scss" scoped>
.dashboard-container {
padding: 24px;
background-color: rgb(240, 242, 245);
position: relative;
padding: 24px;
background-color: rgb(240, 242, 245);
position: relative;
.github-corner {
position: absolute;
top: 0px;
border: 0;
right: 0;
z-index: 99;
}
.github-corner {
position: absolute;
top: 0px;
border: 0;
right: 0;
z-index: 99;
}
.box-center {
margin: 0 auto;
display: table;
}
.box-center {
margin: 0 auto;
display: table;
}
.user-profile {
.user-name {}
.user-profile {
.user-name {
}
.box-center {
padding-top: 10px;
}
.box-center {
padding-top: 10px;
}
.user-role {
padding-top: 10px;
font-weight: 400;
font-size: 14px;
}
.user-role {
padding-top: 10px;
font-weight: 400;
font-size: 14px;
}
.box-social {
padding-top: 30px;
.box-social {
padding-top: 30px;
.el-table {
border-top: 1px solid #dfe6ec;
}
}
.el-table {
border-top: 1px solid #dfe6ec;
}
}
.user-follow {
padding-top: 20px;
}
}
.user-follow {
padding-top: 20px;
}
}
.card-panel__col {
margin-bottom: 12px;
}
.card-panel__col {
margin-bottom: 12px;
}
.card-panel {
height: 108px;
cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.05);
.card-panel {
height: 108px;
cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.05);
&:hover {
.card-panel-icon-wrapper {
color: #fff;
}
&:hover {
.card-panel-icon-wrapper {
color: #fff;
}
.icon-user {
background: #e77541;
}
.icon-user {
background: #e77541;
}
.icon-people {
background: #40c9c6;
}
.icon-people {
background: #40c9c6;
}
.icon-message {
background: #36a3f7;
}
.icon-message {
background: #36a3f7;
}
.icon-money {
background: #f4516c;
}
.icon-money {
background: #f4516c;
}
.icon-shopping {
background: #34bfa3;
}
}
.icon-shopping {
background: #34bfa3;
}
}
.icon-people {
color: #40c9c6;
.icon-people {
color: #40c9c6;
.svg-icon {
width: 4em !important;
height: 4em !important;
}
}
.svg-icon {
width: 4em !important;
height: 4em !important;
}
}
.icon-message {
color: #36a3f7;
.icon-message {
color: #36a3f7;
.svg-icon {
width: 4em !important;
height: 4em !important;
}
}
.svg-icon {
width: 4em !important;
height: 4em !important;
}
}
.icon-money {
color: #f4516c;
.icon-money {
color: #f4516c;
.svg-icon {
width: 4em !important;
height: 4em !important;
}
}
.svg-icon {
width: 4em !important;
height: 4em !important;
}
}
.icon-shopping {
color: #34bfa3;
.icon-shopping {
color: #34bfa3;
.svg-icon {
width: 4em !important;
height: 4em !important;
}
}
.svg-icon {
width: 4em !important;
height: 4em !important;
}
}
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px 20px 0;
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px 20px 0;
.card-panel-text {
line-height: 18px;
color: rgba(0, 0, 0, 0.45);
font-size: 16px;
margin-bottom: 12px;
}
.card-panel-text {
line-height: 18px;
color: rgba(0, 0, 0, 0.45);
font-size: 16px;
margin-bottom: 12px;
}
.card-panel-num {
font-size: 20px;
}
}
}
.card-panel-num {
font-size: 20px;
}
}
}
.chart-container {
background: #ffffff;
}
.chart-container {
background: #ffffff;
}
}
</style>