|
@@ -0,0 +1,215 @@
|
|
|
+<template>
|
|
|
+ <div class="score-content">
|
|
|
+ <div class="score-header">
|
|
|
+ <div class="score-header-item" v-for="item in scoredata" :key="item.key">
|
|
|
+ <div class="score-header-title">{{item.title}}</div>
|
|
|
+ <div class="score-header-num">{{item.value}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-divider />
|
|
|
+ <div class="score-detail">
|
|
|
+ <el-tabs :tab-position="tabPosition" style="height: 255px" class="demo-tabs">
|
|
|
+ <el-tab-pane label="全部">
|
|
|
+ <div class="total-score">
|
|
|
+ <div class="score-total-item" v-for="(item,index) in scoredetail.total" :key="index">
|
|
|
+ <div class="total-item-img">
|
|
|
+ <svg class="scorelockicon" aria-hidden="true">
|
|
|
+ <use :xlink:href="item.type ==='add' ? '#icon-pre_icon_wodejifen':'#icon-yishiyong'"></use>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="score-total-type">
|
|
|
+ <div>类型:</div>
|
|
|
+ <div :class="[item.type ==='add' ? 'score-total-type-text':'score-total-type-deltext']">{{item.typename}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="score-total-value">
|
|
|
+ <svg class="scoreicons" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-xinyujifen"></use>
|
|
|
+ </svg>
|
|
|
+ <span :class="[item.type ==='add' ? 'score-total-type-text':'score-total-type-deltext']">{{item.value}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="score-total-time">
|
|
|
+ <span>{{item.time}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="使用">
|
|
|
+ <div class="total-score">
|
|
|
+ <div class="score-total-item" v-for="(item,index) in scoredetail.usedata" :key="index">
|
|
|
+ <div class="total-item-img">
|
|
|
+ <svg class="scorelockicon" aria-hidden="true">
|
|
|
+ <use :xlink:href="item.type ==='add' ? '#icon-pre_icon_wodejifen':'#icon-yishiyong'"></use>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="score-total-type">
|
|
|
+ <div>类型:</div>
|
|
|
+ <div :class="[item.type ==='add' ? 'score-total-type-text':'score-total-type-deltext']">{{item.typename}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="score-total-value">
|
|
|
+ <svg class="scoreicons" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-xinyujifen"></use>
|
|
|
+ </svg>
|
|
|
+ <span :class="[item.type ==='add' ? 'score-total-type-text':'score-total-type-deltext']">{{item.value}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="score-total-time">
|
|
|
+ <span>{{item.time}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="增加">
|
|
|
+ <div class="total-score">
|
|
|
+ <div class="score-total-item" v-for="(item,index) in scoredetail.adddata" :key="index">
|
|
|
+ <div class="total-item-img">
|
|
|
+ <svg class="scorelockicon" aria-hidden="true">
|
|
|
+ <use :xlink:href="item.type ==='add' ? '#icon-pre_icon_wodejifen':'#icon-yishiyong'"></use>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="score-total-type">
|
|
|
+ <div>类型:</div>
|
|
|
+ <div :class="[item.type ==='add' ? 'score-total-type-text':'score-total-type-deltext']">{{item.typename}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="score-total-value">
|
|
|
+ <svg class="scoreicons" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-xinyujifen"></use>
|
|
|
+ </svg>
|
|
|
+ <span :class="[item.type ==='add' ? 'score-total-type-text':'score-total-type-deltext']">{{item.value}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="score-total-time">
|
|
|
+ <span>{{item.time}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { ref, getCurrentInstance, watch, h, nextTick, onMounted } from 'vue'
|
|
|
+let tabPosition=ref('left')
|
|
|
+let scoredata = ref([
|
|
|
+ { title: '已使用', value: 23, key: 'used' },
|
|
|
+ { title: '当前', value: 58, key: 'now' },
|
|
|
+ {title:'总计',value:81,key:'total'},
|
|
|
+])
|
|
|
+let scoredetail = ref({
|
|
|
+ total: [
|
|
|
+ { type: 'add', typename: '活动奖励', value: '+2000', time: '2023/05/23 15:23' },
|
|
|
+ { type: 'use', typename: '兑换激活码', value: '-500', time: '2023/05/23 15:23' },
|
|
|
+ {type:'add',typename:'系统添加',value:'+2000',time:'2023/05/23 15:23'},
|
|
|
+ { type: 'add', typename: '活动奖励', value: '+2000', time: '2023/05/23 15:23' },
|
|
|
+ { type: 'add', typename: '活动奖励', value: '+2000', time: '2023/05/23 15:23' },
|
|
|
+ { type: 'add', typename: '活动奖励', value: '+2000', time: '2023/05/23 15:23' },
|
|
|
+ { type: 'add', typename: '活动奖励', value: '+2000', time: '2023/05/23 15:23' },
|
|
|
+ {type:'add',typename:'活动奖励',value:'+2000',time:'2023/05/23 15:23'},
|
|
|
+ ],
|
|
|
+ usedata: [
|
|
|
+ { type: 'use', typename: '兑换激活码', value: '-500', time: '2023/05/23 15:23' },
|
|
|
+ { type: 'use', typename: '兑换激活码', value: '-500', time: '2023/05/23 15:23' },
|
|
|
+ { type: 'use', typename: '兑换激活码', value: '-500', time: '2023/05/23 15:23' },
|
|
|
+ ],
|
|
|
+ adddata: [
|
|
|
+ { type: 'add', typename: '活动奖励', value: '+2000', time: '2023/05/23 15:23' },
|
|
|
+ {type:'add',typename:'系统添加',value:'+2000',time:'2023/05/23 15:23'},
|
|
|
+ { type: 'add', typename: '活动奖励', value: '+2000', time: '2023/05/23 15:23' },
|
|
|
+ {type:'add',typename:'系统添加',value:'+2000',time:'2023/05/23 15:23'},
|
|
|
+ { type: 'add', typename: '活动奖励', value: '+2000', time: '2023/05/23 15:23' },
|
|
|
+ {type:'add',typename:'系统添加',value:'+2000',time:'2023/05/23 15:23'},
|
|
|
+ ]
|
|
|
+})
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.score-content{
|
|
|
+ /* padding: 1%; */
|
|
|
+}
|
|
|
+.score-header{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.score-header-item{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 30%;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 5px;
|
|
|
+ line-height: 20px;
|
|
|
+}
|
|
|
+.score-header-title{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+.score-header-num{
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+.score-total-item{
|
|
|
+ display: flex;
|
|
|
+ line-height: 20px;
|
|
|
+ padding: 2px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ width:98%;
|
|
|
+ box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;
|
|
|
+ margin: 1% 1%;
|
|
|
+ padding: 3px 15px;
|
|
|
+}
|
|
|
+.score-total-item:hover{
|
|
|
+ box-shadow: rgba(0, 0, 0, 0.7) 0px 0px 5px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.total-item-img{
|
|
|
+ width:10%;
|
|
|
+}
|
|
|
+.scorelockicon{
|
|
|
+ width: 1.4em;
|
|
|
+ height: 1.4em;
|
|
|
+ vertical-align: 0em;
|
|
|
+ fill: currentColor;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 5px;
|
|
|
+ margin-left: 0px;
|
|
|
+}
|
|
|
+.scoreicons{
|
|
|
+ width: 1em;
|
|
|
+ height: 1em;
|
|
|
+ vertical-align: 0em;
|
|
|
+ fill: currentColor;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 5px;
|
|
|
+ margin-left: 0px;
|
|
|
+}
|
|
|
+.score-total-type{
|
|
|
+ width:25%;
|
|
|
+ font-size:12px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ color: #bcc0cc;
|
|
|
+}
|
|
|
+.score-total-type-text{
|
|
|
+ color:#0099ff;
|
|
|
+}
|
|
|
+.score-total-type-deltext{
|
|
|
+ color:#f89898;
|
|
|
+}
|
|
|
+.score-total-value{
|
|
|
+ width:30%;
|
|
|
+ font-size:14px;
|
|
|
+ color:#0099ff;
|
|
|
+}
|
|
|
+.score-total-time{
|
|
|
+ width:20%;
|
|
|
+ font-size:12px;
|
|
|
+ color: #bcc0cc;
|
|
|
+}
|
|
|
+.total-score{
|
|
|
+ display: flex;
|
|
|
+ height:255px;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-bottom: 5%;
|
|
|
+}
|
|
|
+</style>
|