wangqing
5 years ago
10 changed files with 443 additions and 785 deletions
@ -1,118 +0,0 @@ |
|||||
<template> |
|
||||
<el-card class="box-card-component" style="margin-left:8px;"> |
|
||||
<div slot="header" class="box-card-header"> |
|
||||
<img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png"> |
|
||||
</div> |
|
||||
<div style="position:relative;"> |
|
||||
<pan-thumb :image="avatar" class="panThumb" /> |
|
||||
<mallki class-name="mallki-text" text="vue-element-admin" /> |
|
||||
<div style="padding-top:35px;" class="progress-item"> |
|
||||
<span>Vue</span> |
|
||||
<el-progress :percentage="70" /> |
|
||||
</div> |
|
||||
<div class="progress-item"> |
|
||||
<span>JavaScript</span> |
|
||||
<el-progress :percentage="18" /> |
|
||||
</div> |
|
||||
<div class="progress-item"> |
|
||||
<span>CSS</span> |
|
||||
<el-progress :percentage="12" /> |
|
||||
</div> |
|
||||
<div class="progress-item"> |
|
||||
<span>ESLint</span> |
|
||||
<el-progress :percentage="100" status="success" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-card> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { mapGetters } from 'vuex' |
|
||||
import PanThumb from '@/components/PanThumb' |
|
||||
import Mallki from '@/components/TextHoverEffect/Mallki' |
|
||||
|
|
||||
export default { |
|
||||
components: { PanThumb, Mallki }, |
|
||||
|
|
||||
filters: { |
|
||||
statusFilter(status) { |
|
||||
const statusMap = { |
|
||||
success: 'success', |
|
||||
pending: 'danger' |
|
||||
} |
|
||||
return statusMap[status] |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
statisticsData: { |
|
||||
article_count: 1024, |
|
||||
pageviews_count: 1024 |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
...mapGetters([ |
|
||||
'name', |
|
||||
'avatar', |
|
||||
'roles' |
|
||||
]) |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" > |
|
||||
.box-card-component{ |
|
||||
.el-card__header { |
|
||||
padding: 0px!important; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<style lang="scss" scoped> |
|
||||
.box-card-component { |
|
||||
.box-card-header { |
|
||||
position: relative; |
|
||||
height: 220px; |
|
||||
img { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
transition: all 0.2s linear; |
|
||||
&:hover { |
|
||||
transform: scale(1.1, 1.1); |
|
||||
filter: contrast(130%); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.mallki-text { |
|
||||
position: absolute; |
|
||||
top: 0px; |
|
||||
right: 0px; |
|
||||
font-size: 20px; |
|
||||
font-weight: bold; |
|
||||
} |
|
||||
.panThumb { |
|
||||
z-index: 100; |
|
||||
height: 70px!important; |
|
||||
width: 70px!important; |
|
||||
position: absolute!important; |
|
||||
top: -45px; |
|
||||
left: 0px; |
|
||||
border: 5px solid #ffffff; |
|
||||
background-color: #fff; |
|
||||
margin: auto; |
|
||||
box-shadow: none!important; |
|
||||
::v-deep .pan-info { |
|
||||
box-shadow: none!important; |
|
||||
} |
|
||||
} |
|
||||
.progress-item { |
|
||||
margin-bottom: 10px; |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
@media only screen and (max-width: 1510px){ |
|
||||
.mallki-text{ |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,181 +0,0 @@ |
|||||
<template> |
|
||||
<el-row :gutter="40" class="panel-group"> |
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
|
||||
<div class="card-panel" @click="handleSetLineChartData('newVisitis')"> |
|
||||
<div class="card-panel-icon-wrapper icon-people"> |
|
||||
<svg-icon icon-class="peoples" class-name="card-panel-icon" /> |
|
||||
</div> |
|
||||
<div class="card-panel-description"> |
|
||||
<div class="card-panel-text"> |
|
||||
New Visits |
|
||||
</div> |
|
||||
<count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
|
||||
<div class="card-panel" @click="handleSetLineChartData('messages')"> |
|
||||
<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"> |
|
||||
Messages |
|
||||
</div> |
|
||||
<count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
|
||||
<div class="card-panel" @click="handleSetLineChartData('purchases')"> |
|
||||
<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"> |
|
||||
Purchases |
|
||||
</div> |
|
||||
<count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
|
||||
<div class="card-panel" @click="handleSetLineChartData('shoppings')"> |
|
||||
<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"> |
|
||||
Shoppings |
|
||||
</div> |
|
||||
<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import CountTo from 'CountTo' |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
CountTo |
|
||||
}, |
|
||||
methods: { |
|
||||
handleSetLineChartData(type) { |
|
||||
this.$emit('handleSetLineChartData', type) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.panel-group { |
|
||||
margin-top: 18px; |
|
||||
|
|
||||
.card-panel-col { |
|
||||
margin-bottom: 32px; |
|
||||
} |
|
||||
|
|
||||
.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, .05); |
|
||||
border-color: rgba(0, 0, 0, .05); |
|
||||
|
|
||||
&:hover { |
|
||||
.card-panel-icon-wrapper { |
|
||||
color: #fff; |
|
||||
} |
|
||||
|
|
||||
.icon-people { |
|
||||
background: #40c9c6; |
|
||||
} |
|
||||
|
|
||||
.icon-message { |
|
||||
background: #36a3f7; |
|
||||
} |
|
||||
|
|
||||
.icon-money { |
|
||||
background: #f4516c; |
|
||||
} |
|
||||
|
|
||||
.icon-shopping { |
|
||||
background: #34bfa3 |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.icon-people { |
|
||||
color: #40c9c6; |
|
||||
} |
|
||||
|
|
||||
.icon-message { |
|
||||
color: #36a3f7; |
|
||||
} |
|
||||
|
|
||||
.icon-money { |
|
||||
color: #f4516c; |
|
||||
} |
|
||||
|
|
||||
.icon-shopping { |
|
||||
color: #34bfa3 |
|
||||
} |
|
||||
|
|
||||
.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 { |
|
||||
float: left; |
|
||||
font-size: 48px; |
|
||||
} |
|
||||
|
|
||||
.card-panel-description { |
|
||||
float: right; |
|
||||
font-weight: bold; |
|
||||
margin: 26px; |
|
||||
margin-left: 0px; |
|
||||
|
|
||||
.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; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media (max-width:550px) { |
|
||||
.card-panel-description { |
|
||||
display: none; |
|
||||
} |
|
||||
|
|
||||
.card-panel-icon-wrapper { |
|
||||
float: none !important; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
margin: 0 !important; |
|
||||
|
|
||||
.svg-icon { |
|
||||
display: block; |
|
||||
margin: 14px auto !important; |
|
||||
float: none !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,55 +0,0 @@ |
|||||
<template> |
|
||||
<el-table :data="list" style="width: 100%;padding-top: 15px;"> |
|
||||
<el-table-column label="Order_No" min-width="200"> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ scope.row.order_no | orderNoFilter }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="Price" width="195" align="center"> |
|
||||
<template slot-scope="scope"> |
|
||||
¥{{ scope.row.price | toThousandFilter }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="Status" width="100" align="center"> |
|
||||
<template slot-scope="{row}"> |
|
||||
<el-tag :type="row.status | statusFilter"> |
|
||||
{{ row.status }} |
|
||||
</el-tag> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { transactionList } from '@/api/remote-search' |
|
||||
|
|
||||
export default { |
|
||||
filters: { |
|
||||
statusFilter(status) { |
|
||||
const statusMap = { |
|
||||
success: 'success', |
|
||||
pending: 'danger' |
|
||||
} |
|
||||
return statusMap[status] |
|
||||
}, |
|
||||
orderNoFilter(str) { |
|
||||
return str.substring(0, 30) |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
list: null |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.fetchData() |
|
||||
}, |
|
||||
methods: { |
|
||||
fetchData() { |
|
||||
transactionList().then(response => { |
|
||||
this.list = response.data.items.slice(0, 8) |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue