sad
This commit is contained in:
parent
41b0e33e7c
commit
9875f9b667
18
src/App.vue
18
src/App.vue
|
|
@ -1,7 +1,16 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
// @ts-ignore
|
||||||
|
import Header from "@/components/Header.vue"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<router-view></router-view>
|
<!-- <div>sadas</div> -->
|
||||||
|
<div class="main-box">
|
||||||
|
<Header></Header>
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
@ -9,4 +18,11 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.main-box {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #000C14;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -0,0 +1,141 @@
|
||||||
|
<template>
|
||||||
|
<div class="chartNum" style="margin: 0 20px;">
|
||||||
|
<div class="box-item">
|
||||||
|
<li :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }" v-for="(item, index) in orderNum"
|
||||||
|
:key="index">
|
||||||
|
<span v-if="!isNaN(item)">
|
||||||
|
<i ref="numberItem">0123456789</i>
|
||||||
|
</span>
|
||||||
|
<span class="comma" v-else>{{ item }}</span>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
orderNum: ['0', '0', '0', '0', '0', '0', '0', '0'], // 默认订单总数
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.toOrderNum(656656) // 这里输入数字即可调用
|
||||||
|
}, 500);
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 设置文字滚动
|
||||||
|
setNumberTransform() {
|
||||||
|
const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
|
||||||
|
const numberArr = this.orderNum.filter(item => !isNaN(item))
|
||||||
|
// 结合CSS 对数字字符进行滚动,显示订单数量
|
||||||
|
for (let index = 0; index < numberItems.length; index++) {
|
||||||
|
const elem = numberItems[index]
|
||||||
|
elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 处理总订单数字
|
||||||
|
toOrderNum(num) {
|
||||||
|
num = num.toString()
|
||||||
|
// 把订单数变成字符串
|
||||||
|
if (num.length < 8) {
|
||||||
|
num = '0' + num // 如未满八位数，添加"0"补位
|
||||||
|
this.toOrderNum(num) // 递归添加"0"补位
|
||||||
|
} else if (num.length === 8) {
|
||||||
|
// 订单数中加入逗号
|
||||||
|
// num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8)
|
||||||
|
this.orderNum = num.split('') // 将其便变成数据，渲染至滚动数组
|
||||||
|
} else {
|
||||||
|
// 订单总量数字超过八位显示异常
|
||||||
|
this.$message.warning('总量数字过大')
|
||||||
|
}
|
||||||
|
this.setNumberTransform()
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang='scss'>
|
||||||
|
/*订单总量滚动数字设置*/
|
||||||
|
.box-item {
|
||||||
|
position: relative;
|
||||||
|
height: 80px;
|
||||||
|
|
||||||
|
font-size: 54px;
|
||||||
|
line-height: 41px;
|
||||||
|
text-align: center;
|
||||||
|
list-style: none;
|
||||||
|
color: white;
|
||||||
|
writing-mode: vertical-lr;
|
||||||
|
text-orientation: upright;
|
||||||
|
/*文字禁止编辑*/
|
||||||
|
-moz-user-select: none;
|
||||||
|
/*火狐*/
|
||||||
|
-webkit-user-select: none;
|
||||||
|
/*webkit浏览器*/
|
||||||
|
-ms-user-select: none;
|
||||||
|
/*IE10*/
|
||||||
|
-khtml-user-select: none;
|
||||||
|
/*早期浏览器*/
|
||||||
|
user-select: none;
|
||||||
|
/* overflow: hidden; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 默认逗号设置 */
|
||||||
|
.mark-item {
|
||||||
|
width: 10px;
|
||||||
|
height: 100px;
|
||||||
|
margin-right: 5px;
|
||||||
|
line-height: 10px;
|
||||||
|
font-size: 48px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&>span {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
text-orientation: upright;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*滚动数字设置*/
|
||||||
|
.number-item {
|
||||||
|
width: 41px;
|
||||||
|
height: 75px;
|
||||||
|
/* 背景图片 */
|
||||||
|
background: url('/static/index/SZBG.png') no-repeat center center;
|
||||||
|
// background: #ccc;
|
||||||
|
list-style: none;
|
||||||
|
margin-right: 5px;
|
||||||
|
// background:rgba(250,250,250,1);
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&>span {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
text-orientation: upright;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&>i {
|
||||||
|
font-style: normal;
|
||||||
|
position: absolute;
|
||||||
|
top: 11px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
transition: transform 1s ease-in-out;
|
||||||
|
letter-spacing: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.number-item:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -1,140 +1,195 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="chartNum" style="margin: 0 20px;">
|
<div class="headers">
|
||||||
<div class="box-item">
|
<div class="logo">
|
||||||
<li :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }" v-for="(item, index) in orderNum"
|
</div>
|
||||||
:key="index">
|
<div class="tab">
|
||||||
<span v-if="!isNaN(item)">
|
<img v-if="show[0]" @click="showFn(0, '/')" class="tab-li" :src="u('SY')" alt="">
|
||||||
<i ref="numberItem">0123456789</i>
|
<img v-else class="tab-li" @click="showFn(0, '/')" :src="u('SYXZ')" alt="">
|
||||||
</span>
|
|
||||||
<span class="comma" v-else>{{ item }}</span>
|
<img v-if="show[1]" @click="showFn(1, '/commodity')" class="tab-li" src="/static/index/SP.png" alt="">
|
||||||
</li>
|
<img v-else="show[1]" @click="showFn(1, '/commodity')" class="tab-li" src="/static/index/SPXZ.png" alt="">
|
||||||
|
|
||||||
|
<img v-if="show[2]" @click="showFn(2)" class="tab-li" src="/static/index/SH.png" alt="">
|
||||||
|
<img v-else class="tab-li" @click="showFn(2)" src="/static/index/SHXZ.png" alt="">
|
||||||
|
|
||||||
|
<img class="tab-li" @click="showFn(3)" v-if="show[3]" src="/static/index/DD.png" alt="">
|
||||||
|
<img class="tab-li" @click="showFn(3)" v-else src="/static/index/DDxz.png" alt="">
|
||||||
|
|
||||||
|
|
||||||
|
<img class="tab-li" @click="showFn(4)" v-if="show[4]" src="/static/index/CW.png" alt="">
|
||||||
|
<img class="tab-li" @click="showFn(4)" v-else src="/static/index/CWXZ.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="rigth-li" @click="choseTown = true">泸县</div>
|
||||||
|
<Transition>
|
||||||
|
<div class="address" v-if="choseTown">
|
||||||
|
<div class="address-li" @click="choseTownFn(1)"
|
||||||
|
v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]">泸县</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
<div class="right-line">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rigth-li">15:39:25</div>
|
||||||
|
<div class="right-line"> <span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rigth-li">2023.01.20</div>
|
||||||
|
<div class="right-line">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rigth-li" @click="route.push('/')">关机</div>
|
||||||
|
<div class="right-line">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script lang="ts" setup>
|
||||||
export default {
|
import { ref, reactive } from "vue"
|
||||||
data() {
|
import { useRouter } from 'vue-router'
|
||||||
return {
|
const u = (name) => {
|
||||||
orderNum: ['0', '0', '0', '0', '0', '0', '0', '0'], // 默认订单总数
|
return `/static/index/${name}.png`
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.toOrderNum(656656) // 这里输入数字即可调用
|
|
||||||
}, 500);
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 设置文字滚动
|
|
||||||
setNumberTransform() {
|
|
||||||
const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
|
|
||||||
const numberArr = this.orderNum.filter(item => !isNaN(item))
|
|
||||||
// 结合CSS 对数字字符进行滚动,显示订单数量
|
|
||||||
for (let index = 0; index < numberItems.length; index++) {
|
|
||||||
const elem = numberItems[index]
|
|
||||||
elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 处理总订单数字
|
|
||||||
toOrderNum(num) {
|
|
||||||
num = num.toString()
|
|
||||||
// 把订单数变成字符串
|
|
||||||
if (num.length < 8) {
|
|
||||||
num = '0' + num // 如未满八位数，添加"0"补位
|
|
||||||
this.toOrderNum(num) // 递归添加"0"补位
|
|
||||||
} else if (num.length === 8) {
|
|
||||||
// 订单数中加入逗号
|
|
||||||
// num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8)
|
|
||||||
this.orderNum = num.split('') // 将其便变成数据，渲染至滚动数组
|
|
||||||
} else {
|
|
||||||
// 订单总量数字超过八位显示异常
|
|
||||||
this.$message.warning('总量数字过大')
|
|
||||||
}
|
|
||||||
this.setNumberTransform()
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
const route = useRouter()
|
||||||
|
// 标题
|
||||||
|
const show = reactive([false, true, true, true, true])
|
||||||
|
|
||||||
|
const showFn = (index, src) => {
|
||||||
|
show.forEach((item, i) => {
|
||||||
|
show[i] = true
|
||||||
|
})
|
||||||
|
show[index] = !show[index]
|
||||||
|
route.push(src)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选额镇
|
||||||
|
const choseTown = ref(false)
|
||||||
|
|
||||||
|
const choseTownFn = (id) => {
|
||||||
|
choseTown.value = false
|
||||||
|
route.push('/townDetail?id=' + id)
|
||||||
|
console.log(route)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang='scss'>
|
<style lang="scss" scoped>
|
||||||
/*订单总量滚动数字设置*/
|
.headers {
|
||||||
.box-item {
|
display: flex;
|
||||||
position: relative;
|
color: #B0C7D1;
|
||||||
height: 80px;
|
height: 6vh;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-image: url('/static/index/TIT.png');
|
||||||
|
background-color: #000C14;
|
||||||
|
|
||||||
font-size: 54px;
|
background-size: cover;
|
||||||
line-height: 41px;
|
|
||||||
text-align: center;
|
|
||||||
list-style: none;
|
|
||||||
color: white;
|
|
||||||
writing-mode: vertical-lr;
|
|
||||||
text-orientation: upright;
|
|
||||||
/*文字禁止编辑*/
|
|
||||||
-moz-user-select: none;
|
|
||||||
/*火狐*/
|
|
||||||
-webkit-user-select: none;
|
|
||||||
/*webkit浏览器*/
|
|
||||||
-ms-user-select: none;
|
|
||||||
/*IE10*/
|
|
||||||
-khtml-user-select: none;
|
|
||||||
/*早期浏览器*/
|
|
||||||
user-select: none;
|
|
||||||
/* overflow: hidden; */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 默认逗号设置 */
|
.logo {
|
||||||
.mark-item {
|
width: 20vw;
|
||||||
width: 10px;
|
// margin-right: 30px;
|
||||||
height: 100px;
|
height: 40px;
|
||||||
margin-right: 5px;
|
align-items: center;
|
||||||
line-height: 10px;
|
|
||||||
font-size: 48px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&>span {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
bottom: 0;
|
|
||||||
writing-mode: vertical-rl;
|
|
||||||
text-orientation: upright;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/*滚动数字设置*/
|
.tab {
|
||||||
.number-item {
|
display: flex;
|
||||||
width: 41px;
|
align-items: center;
|
||||||
height: 75px;
|
margin-left: 120px;
|
||||||
/* 背景图片 */
|
width: 50vw;
|
||||||
background: url('/static/index/SZBG.png') no-repeat center center;
|
|
||||||
// background: #ccc;
|
|
||||||
list-style: none;
|
|
||||||
margin-right: 5px;
|
|
||||||
// background:rgba(250,250,250,1);
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
&>span {
|
.tab-li {
|
||||||
|
width: 13%;
|
||||||
|
margin-right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
font-size: 15px;
|
||||||
|
margin-right: 30px;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
|
||||||
margin-right: 10px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
writing-mode: vertical-rl;
|
|
||||||
text-orientation: upright;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&>i {
|
.address {
|
||||||
font-style: normal;
|
left: 1vw;
|
||||||
|
top: 18px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 11px;
|
width: 8vw;
|
||||||
left: 50%;
|
height: 18vh;
|
||||||
transform: translate(-50%, 0);
|
background-color: #001E32;
|
||||||
transition: transform 1s ease-in-out;
|
color: #C7DBE3;
|
||||||
letter-spacing: 10px;
|
z-index: 9999;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
.address-li {
|
||||||
|
padding: 2px 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
border-bottom: 0.1px solid #0E293C;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.address::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
background-color: #153041;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address::-webkit-scrollbar-track {
|
||||||
|
background-color: #153041;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #4AB9D0;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rigth-li {
|
||||||
|
height: 15px;
|
||||||
|
line-height: 15px;
|
||||||
|
padding: 0 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-line {
|
||||||
|
width: 1px;
|
||||||
|
height: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 1px;
|
||||||
|
height: 7px;
|
||||||
|
background-color: #4BB9D0;
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.number-item:last-child {
|
.v-enter-active,
|
||||||
margin-right: 0;
|
.v-leave-active {
|
||||||
|
transition: opacity 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-enter-from,
|
||||||
|
.v-leave-to {
|
||||||
|
opacity: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,18 @@ const routes= [
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'index',
|
name: 'index',
|
||||||
component:()=>import('@/view/index.vue'),
|
component:()=>import('@/view/index.vue'),
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
path: '/townDetail',
|
||||||
|
name: 'townDetail',
|
||||||
|
component:()=>import('@/view/townDetail.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/commodity',
|
||||||
|
name: 'commodity',
|
||||||
|
component:()=>import('@/view/commodity.vue'),
|
||||||
|
},
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,143 @@
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="img-cls">
|
||||||
|
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||||
|
<div class="content">
|
||||||
|
<div class="btns">
|
||||||
|
<div class="btn">商品分类</div>
|
||||||
|
<div class="btn">商品管理</div>
|
||||||
|
</div>
|
||||||
|
<div class="table">
|
||||||
|
<dv-scroll-board :config="configs" @click='test' style="width:95vw;height:100%" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
// 102B3
|
||||||
|
import { ref, reactive, onMounted } from "vue"
|
||||||
|
onMounted(() => {
|
||||||
|
for (let i = 0; i < 100; i++) {
|
||||||
|
if (i % 2 == 0) {
|
||||||
|
configs.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>`,
|
||||||
|
]
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
configs.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>`,
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const test = (e) => {
|
||||||
|
if (e.columnIndex == 1) {
|
||||||
|
console.log(e)
|
||||||
|
|
||||||
|
}
|
||||||
|
// alert(e)
|
||||||
|
}
|
||||||
|
const configs = reactive({
|
||||||
|
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
||||||
|
oddRowBGC: '',
|
||||||
|
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);'>是否显示</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: [
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box {
|
||||||
|
margin-top: 3vh;
|
||||||
|
width: 100vw;
|
||||||
|
height: 90vh;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.img-cls {
|
||||||
|
|
||||||
|
width: 99%;
|
||||||
|
height: 90vh;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
// background-color: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.btns {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
color: white;
|
||||||
|
border: 1px solid #BF6D5D;
|
||||||
|
padding: 3px 10px;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
height: 78vh;
|
||||||
|
margin-top: 2vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ceil) {
|
||||||
|
padding: 0 !important;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.header-item) {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.row {}
|
||||||
|
</style>
|
||||||
|
|
@ -1,35 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="headers">
|
|
||||||
<div class="logo">
|
|
||||||
</div>
|
|
||||||
<div class="tab">
|
|
||||||
<img v-if="show[0]" @click="show[0] = false" class="tab-li" :src="u('SYXZ')" alt="">
|
|
||||||
<img v-else class="tab-li" @click="show[0] = true" :src="u('SY')" alt="">
|
|
||||||
|
|
||||||
<img v-if="show[1]" @click="show[1] = false" class="tab-li" src="/static/index/SP.png" alt="">
|
|
||||||
<img v-else="show[1]" @click="show[1] = true" class="tab-li" src="/static/index/SPXZ.png" alt="">
|
|
||||||
|
|
||||||
<img v-if="show[2]" @click="show[2] = false" class="tab-li" src="/static/index/SH.png" alt="">
|
|
||||||
<img v-else class="tab-li" @click="show[2] = true" src="/static/index/SHXZ.png" alt="">
|
|
||||||
|
|
||||||
<img class="tab-li" @click="show[3] = false" v-if="show[3]" src="/static/index/DD.png" alt="">
|
|
||||||
<img class="tab-li" @click="show[3] = true" v-else src="/static/index/DDxz.png" alt="">
|
|
||||||
|
|
||||||
|
|
||||||
<img class="tab-li" @click="show[4] = false" v-if="show[4]" src="/static/index/CW.png" alt="">
|
|
||||||
<img class="tab-li" @click="show[4] = true" v-else src="/static/index/CWXZ.png" alt="">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="right">
|
|
||||||
<div class="rigth-li">泸县</div>
|
|
||||||
<div class="rigth-li">15:39:25</div>
|
|
||||||
<div class="rigth-li">2023.01.20</div>
|
|
||||||
<div class="rigth-li">关机</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="body">
|
<div class="body">
|
||||||
|
|
||||||
<div class="l">
|
<div class="l">
|
||||||
<div class="user" id="user"></div>
|
<div class="user" id="user"></div>
|
||||||
<div class="storeNum">
|
<div class="storeNum">
|
||||||
|
|
@ -45,10 +16,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="c" id="">
|
<div class="c" id="">
|
||||||
|
|
||||||
|
|
||||||
<div class="product-list">
|
<div class="product-list">
|
||||||
<div class="product" style="display: flex;justify-content: space-around;">
|
<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/SPBG.png" style="width: 90%;height: 100%;" alt="">
|
||||||
|
|
@ -68,11 +36,15 @@
|
||||||
<img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
<img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||||
<div class="view-content">
|
<div class="view-content">
|
||||||
<div>昨日数据：3333</div>
|
<div>昨日数据：3333</div>
|
||||||
<div style="display: flex;align-items: center;">当前浏览量： <Header></Header> 人正在浏览
|
<div style="display: flex;align-items: center;">当前浏览量：
|
||||||
|
<Remake /> 人正在浏览
|
||||||
</div>
|
</div>
|
||||||
<div>周环比：32%</div>
|
<div>周环比：32%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -82,10 +54,8 @@
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="user">
|
<div class="user">
|
||||||
<div class="btns">
|
<div class="btns">
|
||||||
|
|
||||||
<span class="btn">店铺销量排行</span>
|
<span class="btn">店铺销量排行</span>
|
||||||
<span class="btn">店铺销量排行</span>
|
<span class="btn">店铺销量排行</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<dv-scroll-board :config="config3" style="width:95%;height:20vh" />
|
<dv-scroll-board :config="config3" style="width:95%;height:20vh" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -136,10 +106,13 @@
|
||||||
import { onMounted } from 'vue';
|
import { onMounted } from 'vue';
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import option from "./option"
|
import option from "./option"
|
||||||
import Header from "@/components/header.vue"
|
import Remake from "@/components/Remake.vue"
|
||||||
import { ref, reactive } from "vue"
|
import { ref, reactive } from "vue"
|
||||||
|
|
||||||
|
|
||||||
const i = 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231123//20231123190555159fa2259.jpg'
|
const i = 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231123//20231123190555159fa2259.jpg'
|
||||||
|
|
||||||
|
|
||||||
const configs = reactive(
|
const configs = reactive(
|
||||||
{
|
{
|
||||||
header: ['所属地区', '日订单数', '日订单金额', '月订单数', '月订单金额'],
|
header: ['所属地区', '日订单数', '日订单金额', '月订单数', '月订单金额'],
|
||||||
|
|
@ -239,12 +212,6 @@ const config3 = reactive({
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
const show = reactive([true, true, true, true, true])
|
|
||||||
|
|
||||||
const u = (name) => {
|
|
||||||
return `/static/index/${name}.png`
|
|
||||||
}
|
|
||||||
|
|
||||||
// 图表
|
// 图表
|
||||||
const initCharts = (tag, option) => {
|
const initCharts = (tag, option) => {
|
||||||
var chartDom = document.getElementById(tag);
|
var chartDom = document.getElementById(tag);
|
||||||
|
|
@ -281,66 +248,7 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.box {
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
background-color: #000C14;
|
|
||||||
|
|
||||||
.headers {
|
|
||||||
display: flex;
|
|
||||||
color: #B0C7D1;
|
|
||||||
height: 6vh;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
background-image: url('/static/index/TIT.png');
|
|
||||||
|
|
||||||
background-size: cover;
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
width: 20vw;
|
|
||||||
margin-right: 30px;
|
|
||||||
height: 40px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-left: 120px;
|
|
||||||
// background-color: #fff;
|
|
||||||
|
|
||||||
.tab-li {
|
|
||||||
width: 13%;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// .tab-li {
|
|
||||||
// width: 120px;
|
|
||||||
// background-color: #002641;
|
|
||||||
// text-align: center;
|
|
||||||
// height: 25px;
|
|
||||||
// line-height: 25px;
|
|
||||||
// margin: 0 10px;
|
|
||||||
// color: white;
|
|
||||||
// text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 10px white; //设置发光效果
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
display: flex;
|
|
||||||
font-size: 15px;
|
|
||||||
margin-right: 30px;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.rigth-li {
|
|
||||||
margin-right: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.body {
|
.body {
|
||||||
// margin-top: 30px;
|
|
||||||
height: 50vh;
|
height: 50vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,8 @@ let angle = 0;//角度，用来做简单的动画效果的
|
||||||
]
|
]
|
||||||
|
|
||||||
const optins={
|
const optins={
|
||||||
|
|
||||||
|
/******首页***********/
|
||||||
// 用户图表
|
// 用户图表
|
||||||
userChartOption : {
|
userChartOption : {
|
||||||
color:[
|
color:[
|
||||||
|
|
@ -352,7 +354,225 @@ const optins={
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/*******townDetail**********/
|
||||||
|
// 订单金额
|
||||||
|
orderAmount:{
|
||||||
|
color:[
|
||||||
|
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||||
|
{ offset: 1, color: '#57D3ED' },
|
||||||
|
{ offset: 0, color: 'transparent' },
|
||||||
|
])
|
||||||
|
, new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||||
|
{ offset: 1, color: '#4156C2' },
|
||||||
|
{ offset: 0, color: 'transparent' },
|
||||||
|
])
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// color: transparent;
|
||||||
|
|
||||||
|
legend: {},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['0-4时', '4-8时', '8-12时', '12-16时', '16-20时','20-0时']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
splitLine:{
|
||||||
|
show:true,
|
||||||
|
lineStyle:{
|
||||||
|
type:'dashed',//背景色为虚线,
|
||||||
|
color:'#256980'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '昨日订单额',
|
||||||
|
type: 'bar',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 332, 301, 334, 390, 330, 322,222],
|
||||||
|
// itemStyle: {
|
||||||
|
// borderWidth: 1,
|
||||||
|
// borderColor: "#384FB4",
|
||||||
|
// },
|
||||||
|
|
||||||
|
backgroundStyle: {
|
||||||
|
color: ['red']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '今日订单额',
|
||||||
|
type: 'bar',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210,366],
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
// 成交用户数据
|
||||||
|
transactionUsersTown : {
|
||||||
|
color: ['#015989', '#583936', '#416979'],
|
||||||
|
title: {
|
||||||
|
text: ''
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['访客人数', '下单人数', '支付人数', ]
|
||||||
|
// data: ['访客人数','下单人数','支付人数']
|
||||||
|
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
splitLine:{
|
||||||
|
show:true,
|
||||||
|
lineStyle:{
|
||||||
|
type:'dashed',//背景色为虚线,
|
||||||
|
color:'#256980'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '访客人数',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#18394A'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#2885A4'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [140, 232, 101, 264, 90, 340, 250]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '下单人数',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#2752A6'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#005886'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 282, 111, 234, 220, 340, 310]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '支付人数',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#005685'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#355969'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 132, 201, 334, 190, 130, 220]
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,430 @@
|
||||||
|
<template>
|
||||||
|
<div class="top box">
|
||||||
|
|
||||||
|
<div class="l">
|
||||||
|
<img class="img-cls" src="/static/town/YHSJ.png" alt="">
|
||||||
|
<div class="user center" id="user"></div>
|
||||||
|
</div>
|
||||||
|
<div class="c">
|
||||||
|
<div class="product-list">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Views">
|
||||||
|
<img src="/static/index/SSLLL.png" class="c-b-img" alt="">
|
||||||
|
<div class="view-content">
|
||||||
|
<div>昨日数据：3333</div>
|
||||||
|
<div style="display: flex;align-items: center;">当前浏览量：
|
||||||
|
<Remake /> 人正在浏览
|
||||||
|
</div>
|
||||||
|
<div>周环比：32%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="r">
|
||||||
|
|
||||||
|
<img class="img-cls" src="/static/town/DDSJ.png" alt="">
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="bottom box">
|
||||||
|
<div class="l">
|
||||||
|
<div class="user center" id="orderAmount"></div>
|
||||||
|
<img class="img-cls" src="/static/town/DRDDJE.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="c">
|
||||||
|
<img class="img-cls" src="/static/town/CJYH.png" alt="">
|
||||||
|
<div id="transactionUsers" class="transactionUsers"></div>
|
||||||
|
</div>
|
||||||
|
<div class="r">
|
||||||
|
|
||||||
|
<img class="img-cls" src="/static/town/PHBSJ.png" alt="">
|
||||||
|
<div class="user">
|
||||||
|
<div class="btns">
|
||||||
|
<span class="btn">店铺销量排行</span>
|
||||||
|
<span class="btn">店铺销量排行</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<dv-scroll-board :config="config3" class="list" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import option from "./option"
|
||||||
|
import { ref, reactive } from "vue"
|
||||||
|
import Remake from "@/components/Remake.vue"
|
||||||
|
const config3 = reactive({
|
||||||
|
oddRowBGC: "#001C2E",
|
||||||
|
evenRowBGC: "#001C2E",
|
||||||
|
columnWidth: [
|
||||||
|
40, 60, 70, 200, 60
|
||||||
|
],
|
||||||
|
data: [
|
||||||
|
[
|
||||||
|
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM1.png');width: 30px;height: 30px;background-size: cover;" >1</div> `,
|
||||||
|
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||||
|
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||||
|
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||||
|
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||||
|
|
||||||
|
],
|
||||||
|
[
|
||||||
|
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM2.png');width: 30px;height: 30px;background-size: cover;" >2</div> `,
|
||||||
|
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||||
|
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||||
|
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||||
|
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||||
|
|
||||||
|
],
|
||||||
|
[
|
||||||
|
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM3.png');width: 30px;height: 30px;background-size: cover;" >3</div> `,
|
||||||
|
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||||
|
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||||
|
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||||
|
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||||
|
|
||||||
|
],
|
||||||
|
[
|
||||||
|
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;" >4</div> `,
|
||||||
|
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||||
|
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||||
|
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||||
|
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||||
|
|
||||||
|
],
|
||||||
|
[
|
||||||
|
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;" >5</div> `,
|
||||||
|
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||||
|
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||||
|
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||||
|
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||||
|
|
||||||
|
],
|
||||||
|
[
|
||||||
|
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;" >6</div> `,
|
||||||
|
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||||
|
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||||
|
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||||
|
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||||
|
|
||||||
|
], [
|
||||||
|
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;" >7</div> `,
|
||||||
|
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||||
|
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||||
|
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||||
|
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||||
|
|
||||||
|
], [
|
||||||
|
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;" >8</div> `,
|
||||||
|
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||||
|
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||||
|
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||||
|
`<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>`,
|
||||||
|
|
||||||
|
// ],
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
)
|
||||||
|
|
||||||
|
// 图表
|
||||||
|
const initCharts = (tag, option) => {
|
||||||
|
var chartDom = document.getElementById(tag);
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
myChart.setOption(option);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initCharts('user', option.userChartOption)
|
||||||
|
initCharts('orderAmount', option.orderAmount)
|
||||||
|
initCharts('transactionUsers', option.transactionUsersTown)
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@keyframes jump {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
width: 100vw;
|
||||||
|
height: 47vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
padding-top: 1vh;
|
||||||
|
// color: transparent;
|
||||||
|
|
||||||
|
.l {
|
||||||
|
flex: 1;
|
||||||
|
height: 46vh;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.user {
|
||||||
|
position: absolute;
|
||||||
|
width: 98%;
|
||||||
|
height: 35vh;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.c {
|
||||||
|
flex: 2;
|
||||||
|
height: 46vh;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.product-list {
|
||||||
|
height: 75%;
|
||||||
|
// background-color: red;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.product {
|
||||||
|
height: 100%;
|
||||||
|
width: 32%;
|
||||||
|
// background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-icon {
|
||||||
|
width: 2vw;
|
||||||
|
height: 2vw;
|
||||||
|
position: absolute;
|
||||||
|
animation: jump 1s infinite;
|
||||||
|
top: 2vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Views {
|
||||||
|
height: 25%;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 15px;
|
||||||
|
color: white;
|
||||||
|
font-size: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.c-b-img {
|
||||||
|
position: absolute;
|
||||||
|
width: 99%;
|
||||||
|
top: 0;
|
||||||
|
height: 99%;
|
||||||
|
left: 0;
|
||||||
|
// background-color: #fff;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
height: 100%;
|
||||||
|
// color: ;
|
||||||
|
// display: flex;
|
||||||
|
// height: 100%;
|
||||||
|
// width: 100%;
|
||||||
|
// align-items: center;
|
||||||
|
// justify-content: space-between;
|
||||||
|
// padding: 0 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.r {
|
||||||
|
flex: 1;
|
||||||
|
height: 46vh;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
// background-color: green;
|
||||||
|
display: flex;
|
||||||
|
padding-top: 1vh;
|
||||||
|
|
||||||
|
.l {
|
||||||
|
flex: 1;
|
||||||
|
height: 46vh;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.user {
|
||||||
|
margin-top: 4.5vh;
|
||||||
|
position: absolute;
|
||||||
|
width: 98%;
|
||||||
|
height: 35vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.c {
|
||||||
|
flex: 2;
|
||||||
|
height: 46vh;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.transactionUsers {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 40vh;
|
||||||
|
top: 5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.r {
|
||||||
|
flex: 1;
|
||||||
|
height: 46vh;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.user {
|
||||||
|
box-sizing: border-box;
|
||||||
|
// padding-top: 5vh;
|
||||||
|
width: 100%;
|
||||||
|
// height: 46vh;
|
||||||
|
margin-top: 7vh;
|
||||||
|
height: 38vh;
|
||||||
|
|
||||||
|
.btns {
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-bottom: 2vh;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
margin-right: 1vw;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 3px 10px;
|
||||||
|
border: 1px solid #2A538D;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
|
||||||
|
// background-color: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 1vw 50px 1vw;
|
||||||
|
height: 34vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-cls {
|
||||||
|
width: 98%;
|
||||||
|
height: 45vh;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
transform: translateY(12px);
|
||||||
|
width: 100%;
|
||||||
|
height: 10px;
|
||||||
|
background-color: #122E3F;
|
||||||
|
// border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
width: 70%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(to right, #455CCC, #51C2E0);
|
||||||
|
transition: width 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Loading…
Reference in New Issue