也买你系应该
|
@ -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>
|
||||
<div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;">
|
||||
<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,59 +32,116 @@
|
|||
// 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 (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;' >排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>`,
|
||||
`<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>`,
|
||||
`<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;'>排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>`,
|
||||
`<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>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
]
|
||||
if (aaa == configs2) {
|
||||
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;' >排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>`,
|
||||
`<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>`,
|
||||
`<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;'>排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>`,
|
||||
`<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>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
]
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
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,12 +122,77 @@
|
|||
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 congigData = reactive(
|
||||
[
|
||||
{
|
||||
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>`,
|
||||
`<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>`,
|
||||
`<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>`,
|
||||
`<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>`,
|
||||
`<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')
|
||||
|
@ -39,47 +201,15 @@ const hdClick = (e) => {
|
|||
|
||||
}
|
||||
|
||||
const a = (aaa) => {
|
||||
|
||||
|
||||
const a = (aaa, data) => {
|
||||
for (let i = 0; i < 100; 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;' >排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>`,
|
||||
`<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>`,
|
||||
`<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>`,
|
||||
]
|
||||
)
|
||||
aaa.data.push(data.d)
|
||||
} 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;'>排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>`,
|
||||
`<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>`,
|
||||
`<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>`,
|
||||
]
|
||||
|
||||
|
||||
)
|
||||
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>
|
1192
src/view/option.js
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
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;
|
||||
}
|
After Width: | Height: | Size: 448 B |
After Width: | Height: | Size: 446 B |
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 |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 35 KiB |