zmj
/
tradeScreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sad

This commit is contained in:
zmj 2023-11-24 19:32:45 +08:00
parent 41b0e33e7c
commit 9875f9b667
20 changed files with 1147 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/App.vue
View File

@ -1,7 +1,16 @@
<script setup lang="ts">
// @ts-ignore
import Header from "@/components/Header.vue"
</script>
<template>
<!-- <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>

141
src/components/Remake.vue Normal file
View File

@ -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>

295
src/components/header.vue
View File

@ -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 {
position: relative;
display: inline-block;
.tab-li {
width: 13%;
margin-right: 10px;
width: 100%;
height: 100%;
writing-mode: vertical-rl;
text-orientation: upright;
overflow: hidden;
cursor: pointer;
}
}
&>i {
font-style: normal;
.right {
display: flex;
font-size: 15px;
margin-right: 30px;
position: relative;
.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;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>

13
src/router/index.js
View File

@ -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({

143
src/view/commodity.vue Normal file
View File

@ -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>

110
src/view/index.vue
View File

@ -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;

220
src/view/option.js
View File

@ -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]
},
]
},

430
src/view/townDetail.vue Normal file
View File

@ -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>

BIN
static/town/CJYH.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
static/town/DDSJ.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
static/town/DRDDJE.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
static/town/PHBSJ.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
static/town/TABBG.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
static/town/TABBG_slices/mipmap-hdpi/TABBG.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
static/town/TABBG_slices/mipmap-mdpi/TABBG.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
static/town/TABBG_slices/mipmap-xhdpi/TABBG.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
static/town/TABBG_slices/mipmap-xxhdpi/TABBG.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
static/town/YGB.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
static/town/YHSJ.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
static/town/ZCGB.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB