160 lines
7.3 KiB
HTML
160 lines
7.3 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<script src="http://at.alicdn.com/t/font_2063971_cqi5zxu5jgs.js"></script>
|
|
<script src="http://at.alicdn.com/t/font_2064092_sfw4i61tj5s.js"></script>
|
|
<style>
|
|
.icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
.icon2{
|
|
width: 50px;
|
|
height: 35px;
|
|
}
|
|
|
|
.card-container {
|
|
display: flex;
|
|
height: 100%;
|
|
}
|
|
.el-card__body{
|
|
height: 100%;
|
|
}
|
|
|
|
.card-container > .el-card {
|
|
width: 25%;
|
|
margin: 10px;
|
|
}
|
|
|
|
.list-block{
|
|
/*display: inline-flex;*/
|
|
border-bottom: 1px dashed #EBEEF5;
|
|
}
|
|
|
|
.list-item {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
padding: 0 20px;
|
|
/*height: 50px;*/
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
.list-item>div{
|
|
height: 50px;
|
|
}
|
|
.item-right{
|
|
height: 50px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
.el-card__body{
|
|
padding: 20px 0;
|
|
}
|
|
.circle4 {
|
|
width: 30px;
|
|
height: 30px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
margin: 0 auto;
|
|
/*margin-top: 120px;*/
|
|
background-color:#fff;
|
|
border-radius: 50%;
|
|
border: 2px solid red;
|
|
}
|
|
|
|
.element6{
|
|
width: 35px;
|
|
height: 35px;
|
|
border-radius: 50%;
|
|
border: 2px solid #1296db;
|
|
background: -webkit-radial-gradient( circle closest-side,#1296db 80%,#fff 50%);
|
|
text-align: center;
|
|
line-height: 35px;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
<div id="app" v-cloak>
|
|
|
|
<div class="card-container">
|
|
<el-card shadow="hover" v-for="(e,key) in eqe">
|
|
<div slot="header">
|
|
{{lj[key]}}
|
|
</div>
|
|
<div class="list-block" v-if="e.list.length>0">
|
|
<div v-for="(o,i) in e.list" class="list-item">
|
|
<div style="display: inline-flex;align-items: center;justify-content: center;width: 50px">
|
|
<svg v-if="(i+1)===1" class="icon" aria-hidden="true">
|
|
<use xlink:href="#icon-gold"></use>
|
|
</svg>
|
|
<svg v-else-if="(i+1)===2" class="icon" aria-hidden="true">
|
|
<use xlink:href="#icon-silver"></use>
|
|
</svg>
|
|
<svg v-else-if="(i+1)===3" class="icon" aria-hidden="true">
|
|
<use xlink:href="#icon-tongpai"></use>
|
|
</svg>
|
|
<!-- <svg v-else class="icon2" aria-hidden="true">-->
|
|
<!-- <use xlink:href="#icon-icon-test1"></use>-->
|
|
<!-- </svg>-->
|
|
<div class="element6" v-else>
|
|
{{i+1}}
|
|
</div>
|
|
<!-- <span v-else class="icon" style="display: inline-flex;align-items: center">-->
|
|
<!-- <div class="circle4">-->
|
|
<!-- {{i+1}}-->
|
|
<!-- </div>-->
|
|
<!-- -->
|
|
<!-- </span>-->
|
|
</div>
|
|
<div class="item-right">
|
|
<span v-if="o._id">
|
|
{{o._id.username}}
|
|
</span>
|
|
<span>
|
|
<svg t="1599980226232" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1730" width="25" height="25"><path d="M803.84 506.88c5.12 20.48 0 35.84-5.12 56.32-10.24 20.48-20.48 30.72-35.84 40.96-15.36 10.24-30.72 15.36-51.2 15.36h-10.24c10.24 20.48 20.48 40.96 25.6 66.56l30.72 133.12c5.12 25.6 0 46.08-10.24 71.68-15.36 20.48-30.72 35.84-56.32 40.96-5.12 0-15.36 5.12-20.48 5.12-20.48 0-40.96-5.12-56.32-20.48-15.36-15.36-25.6-30.72-30.72-56.32l-30.72-133.12v-5.12l-20.48-20.48-15.36 40.96c-10.24 25.6-20.48 46.08-40.96 66.56l-87.04 92.16c-20.48 20.48-40.96 30.72-66.56 30.72s-46.08-10.24-66.56-30.72c-15.36-15.36-25.6-35.84-25.6-61.44s10.24-46.08 25.6-66.56l87.04-92.16 56.32-153.6v-5.12c-15.36 15.36-35.84 25.6-61.44 25.6-15.36 0-30.72-5.12-46.08-10.24l-35.84-35.84c-10.24-15.36-15.36-30.72-15.36-46.08 0-15.36 0-30.72 10.24-46.08l20.48-51.2c20.48-46.08 51.2-81.92 97.28-102.4H384c35.84-15.36 61.44-25.6 81.92-30.72-15.36-25.6-25.6-51.2-25.6-76.8 0-35.84 15.36-66.56 40.96-92.16C506.88 25.6 537.6 10.24 578.56 10.24c35.84 0 66.56 15.36 92.16 40.96s40.96 56.32 40.96 92.16c0 20.48-5.12 46.08-15.36 61.44-10.24 25.6-25.6 40.96-46.08 51.2 35.84 30.72 61.44 66.56 76.8 112.64l15.36 51.2 35.84 35.84c15.36 15.36 25.6 30.72 25.6 51.2z m-322.56 168.96l-56.32-56.32-30.72 81.92c0 5.12-5.12 15.36-10.24 20.48l-81.92 92.16c-5.12 5.12-10.24 15.36-10.24 25.6s5.12 20.48 10.24 25.6c5.12 10.24 15.36 10.24 25.6 10.24s20.48-5.12 25.6-10.24L435.2 773.12c15.36-15.36 20.48-30.72 30.72-46.08l15.36-51.2z m256-122.88c5.12-5.12 10.24-15.36 10.24-25.6s0-20.48-10.24-25.6l-40.96-46.08s0-5.12-5.12-5.12l-15.36-66.56c-10.24-30.72-30.72-61.44-56.32-81.92-25.6-20.48-56.32-30.72-87.04-30.72-20.48 0-40.96 5.12-61.44 10.24-10.24 5.12-30.72 10.24-61.44 25.6l-15.36 5.12c-30.72 15.36-56.32 35.84-71.68 71.68l-20.48 46.08c-5.12 15.36-5.12 30.72 5.12 40.96 10.24 10.24 20.48 15.36 30.72 15.36 15.36 0 20.48-5.12 30.72-20.48l15.36-51.2c5.12-15.36 20.48-25.6 30.72-30.72h5.12c30.72-15.36 51.2-25.6 61.44-25.6l-25.6 122.88c-5.12 30.72 0 61.44 20.48 87.04L588.8 680.96c10.24 10.24 15.36 20.48 20.48 30.72l25.6 133.12c0 5.12 5.12 15.36 10.24 20.48 5.12 5.12 15.36 10.24 20.48 10.24h5.12c10.24 0 15.36-10.24 20.48-15.36 5.12-10.24 5.12-20.48 5.12-30.72l-30.72-133.12c-5.12-25.6-20.48-51.2-35.84-71.68l-76.8-76.8 35.84-163.84c5.12 5.12 10.24 10.24 10.24 20.48l20.48 66.56c10.24 10.24 20.48 25.6 30.72 35.84l40.96 46.08c5.12 5.12 15.36 10.24 25.6 10.24 5.12 0 10.24-5.12 20.48-10.24z m-215.04-460.8c-15.36 15.36-20.48 30.72-20.48 51.2s5.12 35.84 20.48 51.2c15.36 15.36 30.72 20.48 51.2 20.48s35.84-5.12 51.2-20.48c15.36-15.36 20.48-30.72 20.48-51.2s-5.12-35.84-20.48-51.2c-15.36-15.36-30.72-20.48-51.2-20.48-15.36 0-35.84 5.12-51.2 20.48z" fill="#7dc5eb" p-id="1731"></path></svg>
|
|
</span>
|
|
<span>
|
|
{{o.distanceSum.toFixed(2)}}km
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-center" v-else>
|
|
暂无数据
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
let vue = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
eqe:{
|
|
day:{list:[]},
|
|
month:{list:[]},
|
|
week:{list:[]},
|
|
year:{list:[]}
|
|
},
|
|
data:{
|
|
daylist: [],
|
|
weeklist: [],
|
|
monthlist: [],
|
|
yearlist: []
|
|
},
|
|
lj:{day:'本日排行榜',week:'本周排行榜',month:'本月排行榜',year:'全年排行榜'}
|
|
}
|
|
},
|
|
async created() {
|
|
const {data:{resp_data}} = await $.get('/platform/jsz/cxtj/phbtj/data', {})
|
|
const {res} = JSON.parse(resp_data)
|
|
this.eqe = res
|
|
console.log(this.eqe)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|