lzh
2 years ago
18 changed files with 475 additions and 259 deletions
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 54 KiB |
@ -0,0 +1,205 @@ |
|||
<template> |
|||
<section class="data_section" ref="data_section"> |
|||
<a :href="github" target="_blank"> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="6"> |
|||
<div class="total-frame"> |
|||
<svg-icon icon-class="order" class="total-icon"> |
|||
</svg-icon> |
|||
<div class="total-title">今日下单</div> |
|||
<div class="total-value">123</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="total-frame"> |
|||
<svg-icon icon-class="total-today" class="total-icon"> |
|||
</svg-icon> |
|||
<div class="total-title">今日销售总额</div> |
|||
<div class="total-value">￥456</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="total-frame"> |
|||
<svg-icon icon-class="total-yesterday" class="total-icon"> |
|||
</svg-icon> |
|||
<div class="total-title">昨日销售总额</div> |
|||
<div class="total-value">￥111</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="total-frame"> |
|||
<svg-icon icon-class="total-week" class="total-icon"> |
|||
</svg-icon> |
|||
<div class="total-title">近7天销售总额</div> |
|||
<div class="total-value">￥222</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</a> |
|||
<el-row :gutter="10" class="row_list order_list"> |
|||
<el-col :span="7"> |
|||
<log-list></log-list> |
|||
</el-col> |
|||
<el-col :span="17"> |
|||
<bar-chart type="barChart"></bar-chart> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="10" class="row_list order_list"> |
|||
<el-col :span="7"> |
|||
<pie-chart type="ordertype"></pie-chart> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<line-chart></line-chart> |
|||
</el-col> |
|||
<el-col :span="7"> |
|||
<radar-chart></radar-chart> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="10" class="row_list"> |
|||
<el-col :span="11"> |
|||
<sales-table></sales-table> |
|||
</el-col> |
|||
<el-col :span="7"> |
|||
<comment-list></comment-list> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<card-list></card-list> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</section> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
import salesTable from "./components/salesTable"; // 销售数据表格 |
|||
import commentList from "./components/commentList"; // 用户评论列表 |
|||
import cardList from "./components/cardList"; // card列表 |
|||
import logList from "./components/logList"; // 日志列表 |
|||
import barChart from '@/components/echarts/barChart' // 用户投资类型 柱状图 |
|||
import pieChart from '@/components/echarts/pieChart' // 用户投资类型 饼状图 |
|||
import radarChart from '@/components/echarts/radarChart' // 用户投资类型 雷达图 |
|||
import lineChart from '@/components/echarts/lineChart' // 用户投资类型 折线图 |
|||
import { github } from "@/utils/env"; |
|||
|
|||
export default { |
|||
data(){ |
|||
return { |
|||
github:github |
|||
} |
|||
}, |
|||
components: { |
|||
salesTable, |
|||
commentList, |
|||
cardList, |
|||
logList, |
|||
barChart, |
|||
pieChart, |
|||
radarChart, |
|||
lineChart |
|||
}, |
|||
created(){ |
|||
}, |
|||
mounted(){ |
|||
}, |
|||
methods: { |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.total-frame { |
|||
border: 1px solid #DCDFE6; |
|||
padding: 20px; |
|||
height: 100px; |
|||
} |
|||
|
|||
.total-icon { |
|||
913656 |
|||
color: #409EFF; |
|||
width: 60px; |
|||
height: 60px; |
|||
} |
|||
|
|||
.total-title { |
|||
position: relative; |
|||
font-size: 16px; |
|||
color: #909399; |
|||
left: 70px; |
|||
top: -35px; |
|||
} |
|||
|
|||
.total-value { |
|||
position: relative; |
|||
font-size: 18px; |
|||
color: #606266; |
|||
left: 70px; |
|||
top: -25px; |
|||
} |
|||
.data_section{ |
|||
margin: 20px; |
|||
border-radius: 2px; |
|||
.row_list{ |
|||
margin-bottom: 20px; |
|||
.row_base{ |
|||
padding: 10px; |
|||
box-sizing: border-box; |
|||
background: #fff; |
|||
border-radius: 6px; |
|||
height: 120px; |
|||
} |
|||
} |
|||
.order_list{ |
|||
.orderArea{ |
|||
width: 100%; |
|||
height: 300px; |
|||
background: #fff !important; |
|||
border-radius: 6px; |
|||
box-sizing: border-box; |
|||
padding: 10px; |
|||
padding-top: 40px; |
|||
overflow: hidden; |
|||
} |
|||
.orderbarArea{ |
|||
height: 370px; |
|||
} |
|||
} |
|||
.data_list{ |
|||
text-align: center; |
|||
font-size: 14px; |
|||
border-radius: 6px; |
|||
padding: 10px; |
|||
color:#fff; |
|||
height: 80px; |
|||
.leftItem{ |
|||
align-items: start; |
|||
justify-content: space-between; |
|||
text-align: left; |
|||
} |
|||
.rightItem{ |
|||
width:62px; |
|||
|
|||
align-items: center; |
|||
justify-content: center; |
|||
.svg-icon{ |
|||
font-size: 30px; |
|||
} |
|||
} |
|||
.number{ |
|||
font-size: 22px; |
|||
font-weight: bold; |
|||
.perTitle{ |
|||
font-size: 13px; |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
} |
|||
.pay{ |
|||
.leftItem{ |
|||
justify-content: space-around; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
</style> |
|||
@ -1,205 +1,143 @@ |
|||
<template> |
|||
<section class="data_section" ref="data_section"> |
|||
<a :href="github" target="_blank"> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="6"> |
|||
<div class="total-frame"> |
|||
<svg-icon icon-class="order" class="total-icon"> |
|||
</svg-icon> |
|||
<div class="total-title">今日下单</div> |
|||
<div class="total-value">123</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="total-frame"> |
|||
<svg-icon icon-class="total-today" class="total-icon"> |
|||
</svg-icon> |
|||
<div class="total-title">今日销售总额</div> |
|||
<div class="total-value">￥456</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="total-frame"> |
|||
<svg-icon icon-class="total-yesterday" class="total-icon"> |
|||
</svg-icon> |
|||
<div class="total-title">昨日销售总额</div> |
|||
<div class="total-value">￥111</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="total-frame"> |
|||
<svg-icon icon-class="total-week" class="total-icon"> |
|||
</svg-icon> |
|||
<div class="total-title">近7天销售总额</div> |
|||
<div class="total-value">￥222</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</a> |
|||
<el-row :gutter="10" class="row_list order_list"> |
|||
<el-col :span="7"> |
|||
<log-list></log-list> |
|||
</el-col> |
|||
<el-col :span="17"> |
|||
<bar-chart type="barChart"></bar-chart> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="10" class="row_list order_list"> |
|||
<el-col :span="7"> |
|||
<pie-chart type="ordertype"></pie-chart> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<line-chart></line-chart> |
|||
</el-col> |
|||
<el-col :span="7"> |
|||
<radar-chart></radar-chart> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="10" class="row_list"> |
|||
<el-col :span="11"> |
|||
<sales-table></sales-table> |
|||
</el-col> |
|||
<el-col :span="7"> |
|||
<comment-list></comment-list> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<card-list></card-list> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</section> |
|||
<section class="data_section" ref="data_section"> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="6"> |
|||
<div class="total-frame"> |
|||
<svg-icon icon-class="order" class="total-icon"></svg-icon> |
|||
<div class="total-title">今日下单</div> |
|||
<div class="total-value">123</div> |
|||
</div> |
|||
<div class="total-frame"> |
|||
<svg-icon icon-class="total-today" class="total-icon"></svg-icon> |
|||
<div class="total-title">今日销售总额</div> |
|||
<div class="total-value">￥456</div> |
|||
</div> |
|||
<div class="total-frame"> |
|||
<svg-icon icon-class="total-yesterday" class="total-icon"></svg-icon> |
|||
<div class="total-title">昨日销售总额</div> |
|||
<div class="total-value">￥111</div> |
|||
</div> |
|||
<div class="total-frame"> |
|||
<svg-icon icon-class="total-week" class="total-icon"></svg-icon> |
|||
<div class="total-title">近7天销售总额</div> |
|||
<div class="total-value">￥222</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="18" class="row_list order_list"><bar-chart type="barChart"></bar-chart></el-col> |
|||
</el-row> |
|||
</section> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
import salesTable from "./components/salesTable"; // 销售数据表格 |
|||
import commentList from "./components/commentList"; // 用户评论列表 |
|||
import cardList from "./components/cardList"; // card列表 |
|||
import logList from "./components/logList"; // 日志列表 |
|||
import barChart from '@/components/echarts/barChart' // 用户投资类型 柱状图 |
|||
import pieChart from '@/components/echarts/pieChart' // 用户投资类型 饼状图 |
|||
import radarChart from '@/components/echarts/radarChart' // 用户投资类型 雷达图 |
|||
import lineChart from '@/components/echarts/lineChart' // 用户投资类型 折线图 |
|||
import { github } from "@/utils/env"; |
|||
import echarts from 'echarts' |
|||
import barChart from '@/components/echarts/barChart' // 用户投资类型 柱状图 |
|||
|
|||
export default { |
|||
data(){ |
|||
return { |
|||
github:github |
|||
} |
|||
}, |
|||
components: { |
|||
salesTable, |
|||
commentList, |
|||
cardList, |
|||
logList, |
|||
barChart, |
|||
pieChart, |
|||
radarChart, |
|||
lineChart |
|||
}, |
|||
created(){ |
|||
}, |
|||
mounted(){ |
|||
}, |
|||
methods: { |
|||
} |
|||
} |
|||
export default { |
|||
data() { |
|||
return { |
|||
name: '' |
|||
} |
|||
}, |
|||
components: { |
|||
barChart |
|||
}, |
|||
created() {}, |
|||
mounted() {}, |
|||
methods: {} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.total-frame { |
|||
border: 1px solid #DCDFE6; |
|||
padding: 20px; |
|||
height: 100px; |
|||
} |
|||
|
|||
.total-icon { |
|||
913656 |
|||
color: #409EFF; |
|||
width: 60px; |
|||
height: 60px; |
|||
} |
|||
|
|||
.total-title { |
|||
position: relative; |
|||
font-size: 16px; |
|||
color: #909399; |
|||
left: 70px; |
|||
top: -35px; |
|||
} |
|||
.total-frame { |
|||
border: 1px solid #dcdfe6; |
|||
padding: 20px; |
|||
height: 100px; |
|||
margin-bottom: 5px; |
|||
} |
|||
|
|||
.total-value { |
|||
position: relative; |
|||
font-size: 18px; |
|||
color: #606266; |
|||
left: 70px; |
|||
top: -25px; |
|||
} |
|||
.data_section{ |
|||
margin: 20px; |
|||
border-radius: 2px; |
|||
.row_list{ |
|||
margin-bottom: 20px; |
|||
.row_base{ |
|||
padding: 10px; |
|||
box-sizing: border-box; |
|||
background: #fff; |
|||
border-radius: 6px; |
|||
height: 120px; |
|||
} |
|||
} |
|||
.order_list{ |
|||
.orderArea{ |
|||
width: 100%; |
|||
height: 300px; |
|||
background: #fff !important; |
|||
border-radius: 6px; |
|||
box-sizing: border-box; |
|||
padding: 10px; |
|||
padding-top: 40px; |
|||
overflow: hidden; |
|||
} |
|||
.orderbarArea{ |
|||
height: 370px; |
|||
} |
|||
} |
|||
.data_list{ |
|||
text-align: center; |
|||
font-size: 14px; |
|||
border-radius: 6px; |
|||
padding: 10px; |
|||
color:#fff; |
|||
height: 80px; |
|||
.leftItem{ |
|||
align-items: start; |
|||
justify-content: space-between; |
|||
text-align: left; |
|||
} |
|||
.rightItem{ |
|||
width:62px; |
|||
.total-icon { |
|||
913656color: #409eff; |
|||
width: 60px; |
|||
height: 60px; |
|||
} |
|||
|
|||
align-items: center; |
|||
justify-content: center; |
|||
.svg-icon{ |
|||
font-size: 30px; |
|||
} |
|||
} |
|||
.number{ |
|||
font-size: 22px; |
|||
font-weight: bold; |
|||
.perTitle{ |
|||
font-size: 13px; |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
} |
|||
.pay{ |
|||
.leftItem{ |
|||
justify-content: space-around; |
|||
} |
|||
} |
|||
.total-title { |
|||
position: relative; |
|||
font-size: 16px; |
|||
color: #909399; |
|||
left: 70px; |
|||
top: -35px; |
|||
} |
|||
|
|||
} |
|||
.total-value { |
|||
position: relative; |
|||
font-size: 18px; |
|||
color: #606266; |
|||
left: 70px; |
|||
top: -25px; |
|||
} |
|||
.data_section { |
|||
margin: 20px; |
|||
border-radius: 2px; |
|||
.row_list { |
|||
margin-bottom: 20px; |
|||
.row_base { |
|||
padding: 10px; |
|||
box-sizing: border-box; |
|||
background: #fff; |
|||
border-radius: 6px; |
|||
height: 120px; |
|||
} |
|||
} |
|||
.order_list { |
|||
.orderArea { |
|||
width: 100%; |
|||
height: 300px; |
|||
background: #fff !important; |
|||
border-radius: 6px; |
|||
box-sizing: border-box; |
|||
padding: 10px; |
|||
padding-top: 40px; |
|||
overflow: hidden; |
|||
} |
|||
.orderbarArea { |
|||
height: 370px; |
|||
} |
|||
} |
|||
.data_list { |
|||
text-align: center; |
|||
font-size: 14px; |
|||
border-radius: 6px; |
|||
padding: 10px; |
|||
color: #fff; |
|||
height: 80px; |
|||
.leftItem { |
|||
align-items: start; |
|||
justify-content: space-between; |
|||
text-align: left; |
|||
} |
|||
.rightItem { |
|||
width: 62px; |
|||
|
|||
align-items: center; |
|||
justify-content: center; |
|||
.svg-icon { |
|||
font-size: 30px; |
|||
} |
|||
} |
|||
.number { |
|||
font-size: 22px; |
|||
font-weight: bold; |
|||
.perTitle { |
|||
font-size: 13px; |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
} |
|||
.pay { |
|||
.leftItem { |
|||
justify-content: space-around; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
|
After Width: | Height: | Size: 8.9 KiB |
Loading…
Reference in new issue