hongxilin
7 months ago
8 changed files with 174 additions and 12 deletions
-
2vue/gold-system/README.md
-
7vue/gold-system/index.html
-
26vue/gold-system/package-lock.json
-
1vue/gold-system/package.json
-
2vue/gold-system/src/views/index.vue
-
12vue/gold-system/src/views/managerecharge/activity.vue
-
8vue/gold-system/src/views/recharge/adminRecharge.vue
-
124vue/gold-system/src/views/workspace/index.vue
@ -1,13 +1,131 @@ |
|||||
<script setup> |
<script setup> |
||||
|
import * as echarts from 'echarts'; |
||||
|
import { ref, onMounted, reactive, computed } from "vue"; |
||||
|
import { VscInfo } from 'vue-icons-plus/vsc' |
||||
|
//默认高亮标签页 |
||||
|
const activeName = ref('recharge') |
||||
|
// 默认高亮单选按钮 |
||||
|
const platform = ref('all') |
||||
|
|
||||
|
onMounted(function () { |
||||
|
// 基于准备好的dom，初始化echarts实例 |
||||
|
var myChart = echarts.init(document.getElementById('main')); |
||||
|
|
||||
|
// 指定图表的配置项和数据 |
||||
|
var option = { |
||||
|
title: { |
||||
|
text: 'ECharts 入门示例' |
||||
|
}, |
||||
|
tooltip: {}, |
||||
|
legend: { |
||||
|
data: ['销量'] |
||||
|
}, |
||||
|
xAxis: { |
||||
|
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] |
||||
|
}, |
||||
|
yAxis: {}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '销量', |
||||
|
type: 'bar', |
||||
|
data: [5, 20, 36, 10, 10, 20] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
// 使用刚指定的配置项和数据显示图表。 |
||||
|
myChart.setOption(option); |
||||
|
}) |
||||
|
|
||||
|
|
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<div> |
|
||||
<h1>Workspace</h1> |
|
||||
</div> |
|
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="6"> |
||||
|
<el-card> |
||||
|
<p>当前金币余量 |
||||
|
</p> |
||||
|
<p>数据待填充</p> |
||||
|
<p>较前一天（数据待填充）</p> |
||||
|
<template #footer>充值（） 免费（） 任务（）</template> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<el-card> |
||||
|
<p>全年累计金币数</p> |
||||
|
<p>数据待填充</p> |
||||
|
<p>折合新币累计金额（数据待填充）</p> |
||||
|
<template #footer>昨日新增（），其中充值（）</template> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<el-card> |
||||
|
<p>全年累计消费金币数</p> |
||||
|
<p>数据待填充</p> |
||||
|
<p>消费（）；退款（）</p> |
||||
|
<template #footer>昨日新增消耗（）；消费（）；退款（）</template> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<el-card> |
||||
|
<p>全年累计充值人数</p> |
||||
|
<p>数据待填充</p> |
||||
|
<p>周同比 （）% 日环比（）%</p> |
||||
|
<template #footer>昨日充值人数（），其中首充（）人</template> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col> |
||||
|
<el-card> |
||||
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> |
||||
|
<el-tab-pane label="金币充值" name="recharge"> |
||||
|
<div id="main" style="width: 600px;height:400px;"></div> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="金币消费" name="consume"> |
||||
|
<div>金币消费</div> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
|
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="16"> |
||||
|
<el-card> |
||||
|
<template #header> |
||||
|
<div class="card-header"> |
||||
|
<span>金币概览</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
<p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-card> |
||||
|
<template #header> |
||||
|
<div class="card-header" style="display: flex;"> |
||||
|
<span>金币消耗类别占比</span> |
||||
|
<el-radio-group v-model="platform" fill="#ffffff" text-color="#409eff" size="small" style="margin-left: auto;"> |
||||
|
<el-radio-button label="全部平台" value="all" /> |
||||
|
<el-radio-button label="HC" value="hc" /> |
||||
|
<el-radio-button label="Link" value="link" /> |
||||
|
</el-radio-group> |
||||
|
</div> |
||||
|
</template> |
||||
|
<div>表格</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
</template> |
</template> |
||||
|
|
||||
<style scoped> |
<style scoped> |
||||
|
.el-row{ |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.el-radio-button{ |
||||
|
border: 1px solid grey; |
||||
|
} |
||||
</style> |
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue