也买你系应该
This commit is contained in:
parent
e8edbd8f6a
commit
a41f7999a9
|
|
@ -14,6 +14,8 @@ import Header from "@/components/Header.vue"
|
|||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '/static/font/font.css';
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rigth-li" @click="choseTown = true">泸县</div>
|
||||
<div class="rigth-li" @click="choseTown = true"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
|
||||
:src="u('DW')" alt=""> 泸县
|
||||
</div>
|
||||
<Transition>
|
||||
<div class="address" v-if="choseTown">
|
||||
<div class="address-li" @click="choseTownFn(1)"
|
||||
|
|
@ -62,7 +64,8 @@
|
|||
<span></span>
|
||||
</div>
|
||||
|
||||
<div class="rigth-li" @click="route.push('/')">关机</div>
|
||||
<div class="rigth-li" @click="route.push('/')"><img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
|
||||
:src="u('GJ')" alt=""></div>
|
||||
<div class="right-line">
|
||||
<span></span>
|
||||
<span></span>
|
||||
|
|
@ -195,6 +198,8 @@ const choseTownFn = (id) => {
|
|||
line-height: 15px;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right-line {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,23 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="img-cls">
|
||||
|
||||
|
||||
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;z-index: -10000;" alt="">
|
||||
<div class="content">
|
||||
<div class="btns" style="position: absolute;">
|
||||
<div class="btn" @click="test">商品分类</div>
|
||||
<div class="btn" @click="hdClick(false)">商品管理</div>
|
||||
<div class="btn" @click="ShwostoreType = true">商品分类</div>
|
||||
<div class="btn" @click="ShwostoreType = false">商品管理
|
||||
<!-- <div style="width: 100%;height: 10px;background-color: #fff;position: absolute;"></div> -->
|
||||
</div>
|
||||
<div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;">
|
||||
</div>
|
||||
<div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
|
||||
v-if="!ShwostoreType">
|
||||
<div class="manageBtn">出售中商品</div>
|
||||
<div class="manageBtn">仓库中商品</div>
|
||||
<div class="manageBtn">待审核商品</div>
|
||||
<div class="manageBtn">审核未通过商品</div>
|
||||
</div>
|
||||
<div class="table" v-if="ShwostoreType">
|
||||
<dv-scroll-board :config="configs" style="width:95vw;height:100%" />
|
||||
<dv-scroll-board @click="tableClick" :config="configs" style="width:95vw;height:100%" />
|
||||
</div>
|
||||
<div class="table" v-else>
|
||||
<dv-scroll-board :config="configs2" style="width:95vw;height:100%" />
|
||||
|
|
@ -31,21 +32,40 @@
|
|||
// 102B3
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
|
||||
const ShwostoreType = ref(true)
|
||||
const test = (e) => {
|
||||
alert(4145)
|
||||
// if (e.columnIndex == 1) {
|
||||
// console.log(e)
|
||||
const tableClick = (e) => {
|
||||
|
||||
// console.log(i)
|
||||
|
||||
if (e.ceil) {
|
||||
if (e.columnIndex == 1) {
|
||||
|
||||
let tag = document.getElementById(`zmj${e.rowIndex}`)
|
||||
let tag2 = document.getElementById(`lj${e.rowIndex}`)
|
||||
tag.style.display = 'none'
|
||||
tag2.style.display = 'block'
|
||||
}
|
||||
else {
|
||||
let tag = document.getElementsByClassName(`zmj`)
|
||||
let tag2 = document.getElementsByClassName(`lj`)
|
||||
for (let i = 0; i < tag.length; i++) {
|
||||
tag[i].style.display = 'block'
|
||||
tag2[i].style.display = 'none'
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// }
|
||||
}
|
||||
|
||||
const ShwostoreType = ref(true)
|
||||
|
||||
const hdClick = (b) => {
|
||||
ShwostoreType.value = b
|
||||
alert(565)
|
||||
console.log(b)
|
||||
}
|
||||
|
||||
const a = (aaa) => {
|
||||
for (let i = 0; i < 100; i++) {
|
||||
if (aaa == configs2) {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
if (i % 2 == 0) {
|
||||
aaa.data.push(
|
||||
[
|
||||
|
|
@ -84,6 +104,44 @@ const a = (aaa) => {
|
|||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
else {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
if (i % 2 == 0) {
|
||||
aaa.data.push(
|
||||
[
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' > <div id='zmj${i}' class='zmj'> 排序${i}</div> <div id='lj${i}' class='lj' style="width: 16vw;height: 5vh;background-color: #fff;z-index: 99999;position: absolute;display:none"></div> </div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
|
||||
]
|
||||
)
|
||||
} else {
|
||||
aaa.data.push(
|
||||
[
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;' > <div id='zmj${i}' class='zmj'> 排序${i}</div> <div class='lj' id='lj${i}' style="width: 16vw;height: 5vh;background-color: #fff;z-index: 99999;position: absolute;display:none"></div> </div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
const configs = reactive({
|
||||
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
||||
|
|
@ -125,7 +183,7 @@ const configs2 = reactive({
|
|||
})
|
||||
onMounted(() => {
|
||||
a(configs2)
|
||||
console.log(5656)
|
||||
a(configs)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -165,13 +223,14 @@ onMounted(() => {
|
|||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 75vh;
|
||||
margin-top: 2vh;
|
||||
margin-top: 3.5vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -193,7 +252,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
|
||||
|
||||
.sjx {}
|
||||
|
||||
.row {}
|
||||
</style>
|
||||
|
|
@ -4,16 +4,113 @@
|
|||
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<div class="content">
|
||||
<div class="btns">
|
||||
<div class="btn" @click="test">提现记录</div>
|
||||
<div class="btn" @click="test">资金记录</div>
|
||||
<div class="btn" @click="test">账单管理</div>
|
||||
<div class="btn" @click="changeTable(0)">提现记录</div>
|
||||
<div class="btn" @click="changeTable(1)">资金记录</div>
|
||||
<div class="btn" @click="changeTable(2)">账单管理</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="table">
|
||||
<dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
|
||||
<div class="table" v-if="true">
|
||||
<dv-scroll-board :config="configs" v-if="headerIndex == 0" @click='hdClick'
|
||||
style="width:95vw;height:100%" />
|
||||
<dv-scroll-board :config="configs1" v-if="headerIndex == 1" style="width:95vw;height:100%" />
|
||||
<dv-scroll-board :config="configs2" v-if="headerIndex == 2" @click='hdClick3'
|
||||
style="width:95vw;height:100%" />
|
||||
</div>
|
||||
|
||||
<Transition>
|
||||
|
||||
<div class="pop" v-if="showPop">
|
||||
<img src="/static/finance/TC.png" alt=""
|
||||
style="width: 35vw;height: 40vh;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
|
||||
|
||||
<div class="pop-content">
|
||||
<div class="pop-content-head">
|
||||
<span class="gradient-text">日账单
|
||||
<span style="font-size: 10px;">2011.11-06</span>
|
||||
</span>
|
||||
<span class="off" @click="showPop = false"> 关闭</span>
|
||||
</div>
|
||||
|
||||
<div class="pop-li">
|
||||
订单收入总金额： <span style="margin: 0 .5vw;"><span class="price">16.6</span>元</span>
|
||||
<span>2笔</span>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;" class="pop-li">
|
||||
|
||||
<div>
|
||||
订单支付： <span style="margin: 0 .5vw;"><span class="price"
|
||||
style="color: white;">16.6</span>元</span>
|
||||
<span>2笔</span>
|
||||
</div>
|
||||
<div>
|
||||
返回优惠券补贴： <span style="margin: 0 .5vw;"><span class="price"
|
||||
style="color: white;">16.6</span>元</span>
|
||||
<span>2笔</span>
|
||||
</div>
|
||||
<div>
|
||||
返回会员优惠券补贴： <span><span class="price" style="color: white;">16.6</span>元</span>
|
||||
<span>2笔</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pop-li" style="margin-top: 3vh;">
|
||||
充值金额: <span style="margin: 0 2vw;"><span class="price">5000</span>元</span> <span>2笔</span>
|
||||
</div>
|
||||
<div class="pop-li" style="margin-top: 3vh;">
|
||||
支出总金额: <span style="margin: 0 2vw;"><span class="price">5000</span>元</span> <span>2笔</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div style="display: flex;justify-content: space-between;" class="pop-li">
|
||||
|
||||
<div>
|
||||
应付商户金额 <span style="margin: 0 .5vw;"><span class="price"
|
||||
style="color: white;">16.6</span>元</span>
|
||||
<span>2笔</span>
|
||||
</div>
|
||||
<div>
|
||||
佣金 <span style="margin: 0 .5vw;"><span class="price"
|
||||
style="color: white;">16.6</span>元</span>
|
||||
<span>2笔</span>
|
||||
</div>
|
||||
<div>
|
||||
返回手续费 <span style="margin: 0 1vw;"><span class="price"
|
||||
style="color: white;">16.6</span>元</span>
|
||||
<span>2笔</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="display: flex;justify-content: space-between;" class="pop-li">
|
||||
|
||||
<div>
|
||||
优惠券补贴 <span style="margin: 0 .5vw;"><span class="price"
|
||||
style="color: white;">16.6</span>元</span>
|
||||
<span>2笔</span>
|
||||
</div>
|
||||
<div>
|
||||
会员优惠券补贴 <span style="margin: 0 .5vw;"><span class="price"
|
||||
style="color: white;">16.6</span>元</span>
|
||||
<span>2笔</span>
|
||||
</div>
|
||||
<div style="opacity: 0;">
|
||||
返回手续费 <span style="margin: 0 1vw;"><span class="price"
|
||||
style="color: white;">16.6</span>元</span>
|
||||
<span>2笔</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pop-li" style="margin-top: 3vh;">
|
||||
平台手续费收入总金额: <span class="price">16.6 </span> 元
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Transition>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -25,26 +122,16 @@
|
|||
import { ref, reactive, onMounted } from "vue"
|
||||
import { useRouter } from 'vue-router'
|
||||
const route = useRouter()
|
||||
|
||||
const ShwostoreType = ref(false)
|
||||
const test = () => {
|
||||
console.log(6)
|
||||
const changeTable = (type) => {
|
||||
headerIndex.value = type
|
||||
addConfigHead()
|
||||
a(configList[headerIndex.value], congigData[headerIndex.value])
|
||||
}
|
||||
|
||||
const hdClick = (e) => {
|
||||
if (e.columnIndex == 10) {
|
||||
// route.push('/storeLogin')
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
const a = (aaa) => {
|
||||
for (let i = 0; i < 100; i++) {
|
||||
if (i % 2 == 0) {
|
||||
aaa.data.push(
|
||||
const congigData = reactive(
|
||||
[
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
{
|
||||
d: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
|
|
@ -55,13 +142,8 @@ const a = (aaa) => {
|
|||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
]
|
||||
)
|
||||
} else {
|
||||
aaa.data.push(
|
||||
[
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,],
|
||||
q: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
|
|
@ -72,14 +154,62 @@ const a = (aaa) => {
|
|||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,]
|
||||
},
|
||||
{
|
||||
d: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
],
|
||||
q: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
]
|
||||
},
|
||||
{
|
||||
d: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;color:#59D7F3;cursor: pointer;'>详情</div>`,
|
||||
],
|
||||
q: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#59D7F3;cursor: pointer;'>详情</div>`,
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
|
||||
)
|
||||
)
|
||||
const hdClick = (e) => {
|
||||
if (e.columnIndex == 10) {
|
||||
// route.push('/storeLogin')
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
const a = (aaa, data) => {
|
||||
for (let i = 0; i < 100; i++) {
|
||||
if (i % 2 == 0) {
|
||||
aaa.data.push(data.d)
|
||||
} else {
|
||||
aaa.data.push(data.q)
|
||||
}
|
||||
}
|
||||
}
|
||||
const configs = reactive({
|
||||
|
|
@ -88,24 +218,68 @@ const configs = reactive({
|
|||
evenRowBGC: "",
|
||||
rowNum: 20,
|
||||
header: [
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>序号</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>二维码</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>用户信息</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>用户UID</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>户名</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>提现金额</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>提现方式</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>银行名称</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>账号</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>审核状态</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>拒绝原因</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>添加时间</div>`,
|
||||
],
|
||||
data: [
|
||||
]
|
||||
})
|
||||
const configs1 = reactive({
|
||||
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
||||
oddRowBGC: '',
|
||||
evenRowBGC: "",
|
||||
rowNum: 20,
|
||||
header: [
|
||||
|
||||
],
|
||||
data: [
|
||||
]
|
||||
})
|
||||
const configs2 = reactive({
|
||||
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
||||
oddRowBGC: '',
|
||||
evenRowBGC: "",
|
||||
rowNum: 20,
|
||||
header: [
|
||||
|
||||
],
|
||||
data: [
|
||||
]
|
||||
})
|
||||
|
||||
const headerIndex = ref(0)
|
||||
const configList = reactive([configs, configs1, configs2])
|
||||
const headerList = [
|
||||
['序号', '二维码', '用户信息', '用户UID', '户名', '提现金额', '提现方式', '银行名称', '账号', '审核状态', '拒绝原因', '添加时间'],
|
||||
['会员ID', '昵称', '金额', '明细类型', '备注', '创建时间'],
|
||||
['序号', '日期', '账期内收入', '账期内支出', '平台入账金额', '操作'],
|
||||
|
||||
]
|
||||
const addConfigHead = () => {
|
||||
configList[headerIndex.value].header.splice(0, 9999)
|
||||
headerList[headerIndex.value].forEach(item => {
|
||||
configList[headerIndex.value].header.push(
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>${item}</div>`
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 详情弹窗
|
||||
const showPop = ref(false)
|
||||
const hdClick3 = (e) => {
|
||||
if (e.columnIndex == 5) {
|
||||
showPop.value = true
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
a(configs)
|
||||
a(configs, congigData[headerIndex.value])
|
||||
addConfigHead()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -127,6 +301,7 @@ onMounted(() => {
|
|||
transform: translate(-50%, -50%);
|
||||
// background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
// cursor: pointer;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
|
|
@ -138,6 +313,9 @@ onMounted(() => {
|
|||
|
||||
.btns {
|
||||
display: flex;
|
||||
z-index: 999999;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.btn {
|
||||
color: white;
|
||||
|
|
@ -172,8 +350,78 @@ onMounted(() => {
|
|||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.pop {
|
||||
position: absolute;
|
||||
z-index: 99999999999999;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 35vw;
|
||||
height: 40vh;
|
||||
|
||||
.pop-content {
|
||||
// background-color: #fff;
|
||||
width: 85%;
|
||||
height: 85%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 12px;
|
||||
|
||||
.pop-content-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2vh;
|
||||
|
||||
}
|
||||
|
||||
.off {
|
||||
padding: 0 1vw;
|
||||
border: 1px solid white;
|
||||
border-radius: 1vw;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.pop-li {
|
||||
margin-top: 1vh;
|
||||
color: white;
|
||||
border-bottom: 1px solid #43BEE2;
|
||||
padding-bottom: .5vh;
|
||||
|
||||
.row {}
|
||||
.price {
|
||||
color: #8F4C46;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
font-family: 'FZCYJ';
|
||||
|
||||
// background: linear-gradient(to bottom, #C6F2FB);
|
||||
color: #C6F2FB;
|
||||
font-size: 16px;
|
||||
// -webkit-background-clip: text;
|
||||
// -webkit-text-fill-color: transparent;
|
||||
// font-size: 48px;
|
||||
// font-weight: bold;
|
||||
}
|
||||
|
||||
.v-enter-active,
|
||||
.v-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.v-enter-from,
|
||||
.v-leave-to {
|
||||
opacity: 0;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -25,14 +25,24 @@
|
|||
<div class="product" style="display: flex;justify-content: space-around;">
|
||||
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble1"></div>
|
||||
<div class="bubble2"></div>
|
||||
</div>
|
||||
<div class="product" style="display: flex;justify-content: space-around;">
|
||||
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||
<div class="product" style="display: flex;justify-content: space-around;position: relative;">
|
||||
<img src="/static/index/SPBGZ.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SDTB.png" class="product-icon" alt="">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble1"></div>
|
||||
<div class="bubble2"></div>
|
||||
|
||||
</div>
|
||||
<div class="product" style="display: flex;justify-content: space-around;">
|
||||
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||
<div class="product" style="display: flex;justify-content: space-around;position: relative;">
|
||||
<img src="/static/index/SPBGR.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SDTB.png" class="product-icon" alt="">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble1"></div>
|
||||
<div class="bubble2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Views">
|
||||
|
|
@ -536,4 +546,151 @@ onMounted(() => {
|
|||
background: linear-gradient(to right, #455CCC, #51C2E0);
|
||||
transition: width 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 7vh;
|
||||
animation-name: bubbleAnimation;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.bubble1 {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 7vh;
|
||||
left: 6.5vw;
|
||||
animation-name: bubbleAnimation;
|
||||
animation-duration: 1.5s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.bubble2 {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 7vh;
|
||||
left: 8.5vw;
|
||||
animation-name: bubbleAnimation;
|
||||
animation-duration: 1.25s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
|
||||
@keyframes bubbleAnimation {
|
||||
0% {
|
||||
top: 7vh;
|
||||
// opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 6.5vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.55);
|
||||
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 6vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.5);
|
||||
|
||||
// left: 5vw;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1);
|
||||
top: 5vh;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
top: 4vh;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubbleAnimation1 {
|
||||
0% {
|
||||
top: 7vh;
|
||||
// opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 6.5vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.55);
|
||||
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 6vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.5);
|
||||
|
||||
// left: 5vw;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1);
|
||||
top: 5vh;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
top: 4vh;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubbleAnimation2 {
|
||||
0% {
|
||||
top: 7vh;
|
||||
// opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 6.5vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.55);
|
||||
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 6vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.5);
|
||||
|
||||
// left: 5vw;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1);
|
||||
top: 5vh;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
top: 4vh;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
import * as echarts from 'echarts';
|
||||
|
||||
let angle = 0;//角度，用来做简单的动画效果的
|
||||
let value = 78; //图上角度数据
|
||||
let result = [
|
||||
{ name: '制造业', value: 5713,itemStyle: {color: '#FF7734'}},
|
||||
{ name: '信息传输、软件和信息技术服务业', value: 3022 ,itemStyle: {color: '#FFC700'}},
|
||||
{ name: '科学研究和技术服务业', value: 2647 ,itemStyle: {color: '#34FFE7'}},
|
||||
let value = 78; //图上角度数据
|
||||
let result = [
|
||||
{ name: '制造业', value: 5713, itemStyle: { color: '#FF7734' } },
|
||||
{ name: '信息传输、软件和信息技术服务业', value: 3022, itemStyle: { color: '#FFC700' } },
|
||||
{ name: '科学研究和技术服务业', value: 2647, itemStyle: { color: '#34FFE7' } },
|
||||
{ name: '金融业', value: 2291 },
|
||||
{ name: '批发和零售业', value: 1946 },
|
||||
{ name: '交通运输、仓储和邮政业', value: 1812 },
|
||||
|
|
@ -15,12 +15,12 @@ let angle = 0;//角度，用来做简单的动画效果的
|
|||
{ name: '水利、环境和公共设施管理业', value: 1621 }
|
||||
]
|
||||
|
||||
const optins={
|
||||
const optins = {
|
||||
|
||||
/******首页***********/
|
||||
// 用户图表
|
||||
userChartOption : {
|
||||
color:[
|
||||
userChartOption: {
|
||||
color: [
|
||||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ offset: 1, color: 'transparent' },
|
||||
{ offset: 0, color: '#0081C3' },
|
||||
|
|
@ -28,20 +28,26 @@ const optins={
|
|||
, new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ offset: 1, color: 'transparent' },
|
||||
{ offset: 0, color: '#3E54BF' },
|
||||
]) , new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ offset: 1, color: 'transparent' },
|
||||
{ offset: 0, color: '#4DBFD9' },
|
||||
]) ,
|
||||
]),
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
},
|
||||
// color: transparent;
|
||||
|
||||
legend: {},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: "white"
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
|
|
@ -57,11 +63,11 @@ const optins={
|
|||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine:{
|
||||
show:true,
|
||||
lineStyle:{
|
||||
type:'dashed',//背景色为虚线,
|
||||
color:'#256980'
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',//背景色为虚线,
|
||||
color: '#256980'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -113,14 +119,14 @@ const optins={
|
|||
]
|
||||
},
|
||||
// 地方店铺数量统计
|
||||
storeNum:{
|
||||
backgroundColor:"#061740",
|
||||
storeNum: {
|
||||
backgroundColor: "#061740",
|
||||
title: {
|
||||
text: '{a|'+ 70 +'}{c|%}',
|
||||
text: '{a|' + 70 + '}{c|%}',
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
rich:{
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 10,
|
||||
color: '#ffffff',
|
||||
|
|
@ -140,15 +146,15 @@ const optins={
|
|||
name: "",
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
renderItem: function(params, api) {
|
||||
renderItem: function (params, api) {
|
||||
return {
|
||||
type: 'arc',
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: Math.min(api.getWidth(), api.getHeight()) / 2.3 * 0.65,
|
||||
startAngle: (0+-angle) * Math.PI / 180,
|
||||
endAngle: (360+-angle) * Math.PI / 180
|
||||
startAngle: (0 + -angle) * Math.PI / 180,
|
||||
endAngle: (360 + -angle) * Math.PI / 180
|
||||
},
|
||||
style: {
|
||||
stroke: "#0CD3DB",
|
||||
|
|
@ -199,7 +205,7 @@ const optins={
|
|||
}
|
||||
},
|
||||
{
|
||||
value: 100-70,
|
||||
value: 100 - 70,
|
||||
name: "",
|
||||
label: {
|
||||
normal: {
|
||||
|
|
@ -218,7 +224,7 @@ const optins={
|
|||
},
|
||||
// 成交用户统计信息表
|
||||
|
||||
transactionUsers : {
|
||||
transactionUsers: {
|
||||
color: ['#015989', '#583936', '#416979'],
|
||||
title: {
|
||||
text: ''
|
||||
|
|
@ -233,7 +239,10 @@ const optins={
|
|||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['访客人数', '下单人数', '支付人数', 'Line 4', 'Line 5']
|
||||
data: ['访客人数', '下单人数', '支付人数'],
|
||||
textStyle: {
|
||||
color: "white"
|
||||
}
|
||||
// data: ['访客人数','下单人数','支付人数']
|
||||
|
||||
},
|
||||
|
|
@ -258,11 +267,11 @@ const optins={
|
|||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine:{
|
||||
show:true,
|
||||
lineStyle:{
|
||||
type:'dashed',//背景色为虚线,
|
||||
color:'#256980'
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',//背景色为虚线,
|
||||
color: '#256980'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -356,8 +365,8 @@ const optins={
|
|||
|
||||
/*******townDetail**********/
|
||||
// 订单金额
|
||||
orderAmount:{
|
||||
color:[
|
||||
orderAmount: {
|
||||
color: [
|
||||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ offset: 1, color: '#57D3ED' },
|
||||
{ offset: 0, color: 'transparent' },
|
||||
|
|
@ -385,17 +394,17 @@ const optins={
|
|||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['0-4时', '4-8时', '8-12时', '12-16时', '16-20时','20-0时']
|
||||
data: ['0-4时', '4-8时', '8-12时', '12-16时', '16-20时', '20-0时']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine:{
|
||||
show:true,
|
||||
lineStyle:{
|
||||
type:'dashed',//背景色为虚线,
|
||||
color:'#256980'
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',//背景色为虚线,
|
||||
color: '#256980'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -409,7 +418,7 @@ const optins={
|
|||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 332, 301, 334, 390, 330, 322,222],
|
||||
data: [320, 332, 301, 334, 390, 330, 322, 222],
|
||||
// itemStyle: {
|
||||
// borderWidth: 1,
|
||||
// borderColor: "#384FB4",
|
||||
|
|
@ -425,7 +434,7 @@ const optins={
|
|||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210,366],
|
||||
data: [120, 132, 101, 134, 90, 230, 210, 366],
|
||||
|
||||
},
|
||||
|
||||
|
|
@ -438,7 +447,7 @@ const optins={
|
|||
|
||||
},
|
||||
// 成交用户数据
|
||||
transactionUsersTown : {
|
||||
transactionUsersTown: {
|
||||
color: ['#015989', '#583936', '#416979'],
|
||||
title: {
|
||||
text: ''
|
||||
|
|
@ -453,7 +462,7 @@ const optins={
|
|||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['访客人数', '下单人数', '支付人数', ]
|
||||
data: ['访客人数', '下单人数', '支付人数',]
|
||||
// data: ['访客人数','下单人数','支付人数']
|
||||
|
||||
},
|
||||
|
|
@ -478,11 +487,11 @@ const optins={
|
|||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine:{
|
||||
show:true,
|
||||
lineStyle:{
|
||||
type:'dashed',//背景色为虚线,
|
||||
color:'#256980'
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',//背景色为虚线,
|
||||
color: '#256980'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -573,6 +582,67 @@ const optins={
|
|||
|
||||
]
|
||||
},
|
||||
// 订单数据
|
||||
orderData: {
|
||||
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0.01],
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',//背景色为虚线,
|
||||
color: '#256980'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['当日订单数', '当月订单数'],
|
||||
|
||||
},
|
||||
series: [
|
||||
{
|
||||
barWidth: 15,
|
||||
barGap: '1000%',/*多个并排柱子设置柱子之间的间距*/
|
||||
barCategoryGap: '100%',/*多个并排柱子设置柱子之间的间距*/
|
||||
data: [120, 200],
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
var colorList = [new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 1, color: '#0298E5' },
|
||||
{ offset: 0, color: 'transparent' },
|
||||
]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 1, color: '#4358C8' },
|
||||
{ offset: 0, color: 'transparent' },
|
||||
])];
|
||||
return colorList[params.dataIndex]
|
||||
},
|
||||
borderColor: ['blue']
|
||||
|
||||
},
|
||||
borderWidth: 2,
|
||||
borderColor: "red",
|
||||
},
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
<div class="btn" @click="test">订单列表</div>
|
||||
<div class="btn" @click="test">退款单</div>
|
||||
<div class="btn" @click="test">核销订单</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="btn" @click="test">订单列表</div>
|
||||
|
|
@ -15,7 +17,7 @@
|
|||
</div>
|
||||
|
||||
<div class="table">
|
||||
<dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
|
||||
<dv-scroll-board :config="configs" @click='tableHdClick' style="width:95vw;height:100%" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -35,20 +37,100 @@ const test = () => {
|
|||
console.log(6)
|
||||
}
|
||||
|
||||
const hdClick = (e) => {
|
||||
if (e.columnIndex == 10) {
|
||||
// route.push('/storeLogin')
|
||||
const tableHdClick = (e) => {
|
||||
|
||||
|
||||
if (e.ceil) {
|
||||
if (e.columnIndex == 0) {
|
||||
// console.log(e.rowIndex)
|
||||
let tag = document.getElementById(`order${e.rowIndex}`)
|
||||
let tag2 = document.getElementById(`card${e.rowIndex}`)
|
||||
tag.style.display = 'none'
|
||||
tag2.style.display = 'block'
|
||||
console.log(tag.style.display)
|
||||
console.log(tag2.style.display)
|
||||
|
||||
} else {
|
||||
let tag = document.getElementsByClassName(`order`)
|
||||
let tag2 = document.getElementsByClassName(`card`)
|
||||
for (let i = 0; i < tag.length; i++) {
|
||||
tag[i].style.display = 'block'
|
||||
tag2[i].style.display = 'none'
|
||||
}
|
||||
|
||||
console.log(tag[0].style.display)
|
||||
console.log(tag2[0].style.display)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
const a = (aaa) => {
|
||||
for (let i = 0; i < 100; i++) {
|
||||
for (let i = 0; i < 50; i++) {
|
||||
if (i % 2 == 0) {
|
||||
aaa.data.push(
|
||||
[
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;cursor: pointer;'>
|
||||
<div class='order' id='order${i}' style='position:relative'>
|
||||
<div style=' width: 0;
|
||||
height: 0;
|
||||
border-left: 0.5vh solid transparent;
|
||||
border-right: 0.5vh solid transparent;
|
||||
border-top: 0.5vh solid #C25941;
|
||||
position: absolute;
|
||||
top:50%;
|
||||
left:0
|
||||
'>
|
||||
</div> 4554545</div>
|
||||
|
||||
<div class='card' id='card${i}'
|
||||
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding:0 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
|
||||
|
||||
<div
|
||||
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
|
||||
<span>总单号：</span>
|
||||
<span>35356565656565</span>
|
||||
</div>
|
||||
<div
|
||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||
<span>下单时间</span>
|
||||
<span>2023.11.214</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||
<span>商品总价</span>
|
||||
<span>2023.11.214</span>
|
||||
</div>
|
||||
<div
|
||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||
<span>订单类型</span>
|
||||
<span>2023.11.214</span>
|
||||
</div>
|
||||
<div
|
||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||
<span>用户备注</span>
|
||||
<span>2023.11.214</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||
<span>商家备注</span>
|
||||
<span>2023.11.214</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
|
|
@ -63,7 +145,63 @@ const a = (aaa) => {
|
|||
} else {
|
||||
aaa.data.push(
|
||||
[
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;cursor: pointer;'>
|
||||
<div class='order' id='order${i}' style='position:relative'>
|
||||
<div style=' width: 0;
|
||||
height: 0;
|
||||
border-left: 0.5vh solid transparent;
|
||||
border-right: 0.5vh solid transparent;
|
||||
border-top: 0.5vh solid #C25941;
|
||||
position: absolute;
|
||||
top:50%;
|
||||
left:0
|
||||
'>
|
||||
</div> 1111</div>
|
||||
|
||||
<div class='card' id='card${i}'
|
||||
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
|
||||
|
||||
<div
|
||||
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
|
||||
<span>总单号：</span>
|
||||
<span>35356565656565</span>
|
||||
</div>
|
||||
<div
|
||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||
<span>下单时间</span>
|
||||
<span>2023.11.214</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||
<span>商品总价</span>
|
||||
<span>2023.11.214</span>
|
||||
</div>
|
||||
<div
|
||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||
<span>订单类型</span>
|
||||
<span>2023.11.214</span>
|
||||
</div>
|
||||
<div
|
||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||
<span>用户备注</span>
|
||||
<span>2023.11.214</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||
<span>商家备注</span>
|
||||
<span>2023.11.214</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
|
|
@ -125,6 +263,7 @@ onMounted(() => {
|
|||
transform: translate(-50%, -50%);
|
||||
// background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
// cursor: pointer;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,24 @@
|
|||
<div class="r">
|
||||
|
||||
<img class="img-cls" src="/static/town/DDSJ.png" alt="">
|
||||
<div class="order-data">
|
||||
<div class="tit">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div class="gradient-circle">
|
||||
</div>
|
||||
日订单数据
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div class="gradient-circle">
|
||||
</div>
|
||||
日订单数据
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="width: 100%;height:50%;" id="orderData"></div>
|
||||
<div style="width: 100%;height: 50%;" id="orderData2"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -144,42 +161,6 @@ const config3 = reactive({
|
|||
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
|
||||
],
|
||||
// [` <div style=" text-align: center;background-image: url('/static/index/PM2.png');width: 30px;height: 30px;background-size: cover;"> 2</div> `,
|
||||
// `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
||||
// `<div>商品名称</div>`,
|
||||
// `<div class="progress-bar"> <div class="progress"></div> </div>`,
|
||||
// `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
|
||||
|
||||
// ],
|
||||
// [` <div style=" text-align: center;background-image: url('/static/index/PM3.png');width: 30px;height: 30px;background-size: cover;">3</div> `,
|
||||
// `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
||||
// `<div>商品名称</div>`,
|
||||
// `<div class="progress-bar"> <div class="progress"></div> </div>`,
|
||||
// `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
|
||||
// ],
|
||||
// [` <div style=" text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">4</div> `,
|
||||
// `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
||||
// `<div>商品名称</div>`,
|
||||
// `<div class="progress-bar"> <div class="progress"></div> </div>`,
|
||||
// `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
|
||||
// ],
|
||||
// [` <div style=" text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">5</div> `,
|
||||
// `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
||||
// `<div>商品名称</div>`,
|
||||
// `<div class="progress-bar"> <div class="progress"></div> </div>`,
|
||||
// `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
|
||||
// ],
|
||||
// [` <div style=" text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">6</div> `,
|
||||
// `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
||||
// `<div>商品名称</div>`,
|
||||
// `<div class="progress-bar"> <div class="progress"></div> </div>`,
|
||||
// `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
|
||||
// ],
|
||||
|
||||
]
|
||||
}
|
||||
|
|
@ -194,9 +175,16 @@ const initCharts = (tag, option) => {
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.getElementById("orderData").removeAttribute('_echarts_instance_');
|
||||
document.getElementById("orderData2").removeAttribute('_echarts_instance_');
|
||||
document.getElementById("user").removeAttribute('_echarts_instance_');
|
||||
document.getElementById("orderAmount").removeAttribute('_echarts_instance_');
|
||||
document.getElementById("transactionUsers").removeAttribute('_echarts_instance_');
|
||||
initCharts('user', option.userChartOption)
|
||||
initCharts('orderAmount', option.orderAmount)
|
||||
initCharts('transactionUsers', option.transactionUsersTown)
|
||||
initCharts('orderData', option.orderData)
|
||||
initCharts('orderData2', option.orderData)
|
||||
|
||||
})
|
||||
|
||||
|
|
@ -315,6 +303,32 @@ onMounted(() => {
|
|||
height: 46vh;
|
||||
position: relative;
|
||||
|
||||
.order-data {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-right: 1vw;
|
||||
position: relative;
|
||||
|
||||
.tit {
|
||||
position: absolute;
|
||||
color: white;
|
||||
// background-color: #fff;
|
||||
top: 5vh;
|
||||
width: 100%;
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.gradient-circle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: radial-gradient(at top left, transparent, #029BE9);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
|
|
@ -0,0 +1,6 @@
|
|||
@font-face {
|
||||
font-family: 'FZCYJ';
|
||||
src: url('ifonts.ttf');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 448 B |
Binary file not shown.
|
After Width: | Height: | Size: 446 B |
Binary file not shown.
|
After Width: | Height: | Size: 230 B |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 168 KiB |
|
Before Width: | Height: | Size: 167 KiB After Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 35 KiB |
Loading…
Reference in New Issue