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">
|
||||
// @ts-ignore
|
||||
import Header from "@/components/Header.vue"
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
<!-- <div>sadas</div> -->
|
||||
<div class="main-box">
|
||||
<Header></Header>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -9,4 +18,11 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main-box {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #000C14;
|
||||
overflow: hidden;
|
||||
}
|
||||
</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>
|
||||
<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 class="headers">
|
||||
<div class="logo">
|
||||
</div>
|
||||
<div class="tab">
|
||||
<img v-if="show[0]" @click="showFn(0, '/')" class="tab-li" :src="u('SY')" alt="">
|
||||
<img v-else class="tab-li" @click="showFn(0, '/')" :src="u('SYXZ')" alt="">
|
||||
|
||||
<img v-if="show[1]" @click="showFn(1, '/commodity')" class="tab-li" src="/static/index/SP.png" alt="">
|
||||
<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>
|
||||
</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 lang="ts" setup>
|
||||
import { ref, reactive } from "vue"
|
||||
import { useRouter } from 'vue-router'
|
||||
const u = (name) => {
|
||||
return `/static/index/${name}.png`
|
||||
}
|
||||
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>
|
||||
<style scoped lang='scss'>
|
||||
/*订单总量滚动数字设置*/
|
||||
.box-item {
|
||||
position: relative;
|
||||
height: 80px;
|
||||
<style lang="scss" scoped>
|
||||
.headers {
|
||||
display: flex;
|
||||
color: #B0C7D1;
|
||||
height: 6vh;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-image: url('/static/index/TIT.png');
|
||||
background-color: #000C14;
|
||||
|
||||
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; */
|
||||
}
|
||||
background-size: cover;
|
||||
|
||||
/* 默认逗号设置 */
|
||||
.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;
|
||||
.logo {
|
||||
width: 20vw;
|
||||
// margin-right: 30px;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/*滚动数字设置*/
|
||||
.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;
|
||||
.tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 120px;
|
||||
width: 50vw;
|
||||
|
||||
&>span {
|
||||
.tab-li {
|
||||
width: 13%;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
margin-right: 30px;
|
||||
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;
|
||||
.address {
|
||||
left: 1vw;
|
||||
top: 18px;
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
transition: transform 1s ease-in-out;
|
||||
letter-spacing: 10px;
|
||||
width: 8vw;
|
||||
height: 18vh;
|
||||
background-color: #001E32;
|
||||
color: #C7DBE3;
|
||||
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 {
|
||||
margin-right: 0;
|
||||
.v-enter-active,
|
||||
.v-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
</style>
|
||||
|
||||
.v-enter-from,
|
||||
.v-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,7 +5,18 @@ const routes= [
|
|||
path: '/',
|
||||
name: 'index',
|
||||
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({
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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="l">
|
||||
<div class="user" id="user"></div>
|
||||
<div class="storeNum">
|
||||
|
|
@ -45,10 +16,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="c" id="">
|
||||
|
||||
|
||||
<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="">
|
||||
|
|
@ -68,11 +36,15 @@
|
|||
<img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<div class="view-content">
|
||||
<div>昨日数据：3333</div>
|
||||
<div style="display: flex;align-items: center;">当前浏览量： <Header></Header> 人正在浏览
|
||||
<div style="display: flex;align-items: center;">当前浏览量：
|
||||
<Remake /> 人正在浏览
|
||||
</div>
|
||||
<div>周环比：32%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -82,10 +54,8 @@
|
|||
</div> -->
|
||||
<div class="user">
|
||||
<div class="btns">
|
||||
|
||||
<span class="btn">店铺销量排行</span>
|
||||
<span class="btn">店铺销量排行</span>
|
||||
|
||||
</div>
|
||||
<dv-scroll-board :config="config3" style="width:95%;height:20vh" />
|
||||
</div>
|
||||
|
|
@ -136,10 +106,13 @@
|
|||
import { onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import option from "./option"
|
||||
import Header from "@/components/header.vue"
|
||||
import Remake from "@/components/Remake.vue"
|
||||
import { ref, reactive } from "vue"
|
||||
|
||||
|
||||
const i = 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231123//20231123190555159fa2259.jpg'
|
||||
|
||||
|
||||
const configs = reactive(
|
||||
{
|
||||
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) => {
|
||||
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 {
|
||||
// margin-top: 30px;
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ let angle = 0;//角度，用来做简单的动画效果的
|
|||
]
|
||||
|
||||
const optins={
|
||||
|
||||
/******首页***********/
|
||||
// 用户图表
|
||||
userChartOption : {
|
||||
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