页面调账
|
@ -0,0 +1,62 @@
|
||||||
|
<template>
|
||||||
|
<Transition>
|
||||||
|
<div class="address" v-if="props.choseArea">
|
||||||
|
<div class="address-li" @click="choseTownFn(1)" v-for="( item, index ) in 10 ">泸县</div>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { defineProps, defineEmits } from "vue"
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
const router = useRouter()
|
||||||
|
const emit = defineEmits(['offAreaList'])
|
||||||
|
const props = defineProps({
|
||||||
|
choseArea: Boolean,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 选额镇
|
||||||
|
const choseTownFn = (id) => {
|
||||||
|
props.choseArea = false
|
||||||
|
emit('offAreaList')
|
||||||
|
router.replace('/townDetail?id=' + id)
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.address {
|
||||||
|
left: 1vw;
|
||||||
|
top: 18px;
|
||||||
|
position: absolute;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -37,35 +37,29 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="rigth-li" @click="choseTown = true"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
|
<div class="rigth-li" @click="choseArea = true"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
|
||||||
:src="u('DW')" alt=""> 泸县
|
:src="u('DW')" alt=""> 泸县
|
||||||
</div>
|
</div>
|
||||||
<Transition>
|
<areaList :choseArea="choseArea" @offAreaList="offAreaList"></areaList>
|
||||||
<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">
|
<div class="right-line">
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rigth-li">15:39:25</div>
|
<div class="rigth-li" id="time">15:33:26</div>
|
||||||
<div class="right-line"> <span></span>
|
<div class="right-line"> <span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rigth-li">2023.01.20</div>
|
<div class="rigth-li" id="days">2023-11-28</div>
|
||||||
<div class="right-line">
|
<div class="right-line">
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rigth-li" @click="route.push('/')"><img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
|
<div class="rigth-li" @click="out"><img style="width: 1VW;height:1VW;margin-right: 0.5vw;" :src="u('GJ')"
|
||||||
:src="u('GJ')" alt=""></div>
|
alt=""></div>
|
||||||
<div class="right-line">
|
<div class="right-line">
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
|
@ -74,8 +68,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script setup>
|
||||||
import { ref, reactive } from "vue"
|
import { ref, reactive, onMounted } from "vue"
|
||||||
|
import areaList from "./areaList.vue";
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
const u = (name) => {
|
const u = (name) => {
|
||||||
return `/static/index/${name}.png`
|
return `/static/index/${name}.png`
|
||||||
|
@ -89,22 +84,58 @@ const showFn = (index, src) => {
|
||||||
show[i] = true
|
show[i] = true
|
||||||
})
|
})
|
||||||
show[index] = !show[index]
|
show[index] = !show[index]
|
||||||
route.push(src)
|
route.replace(src)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 选额镇
|
// 选额镇
|
||||||
const choseTown = ref(false)
|
const choseArea = ref(false)
|
||||||
|
// 关闭
|
||||||
|
const offAreaList = () => {
|
||||||
|
choseArea.value = false
|
||||||
|
}
|
||||||
|
|
||||||
const choseTownFn = (id) => {
|
const out = () => {
|
||||||
choseTown.value = false
|
//@ts-ignore
|
||||||
route.push('/townDetail?id=' + id)
|
window.open("about:blank", "_top").close()
|
||||||
console.log(route)
|
|
||||||
|
//@ts-ignore
|
||||||
|
// window.open('file:///C:\WINDOWS\system32\Shutdown.exe-r', 'File')
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const updateTime = () => {
|
||||||
|
var date = new Date();
|
||||||
|
var hours = date.getHours();
|
||||||
|
var minutes = date.getMinutes();
|
||||||
|
var seconds = date.getSeconds();
|
||||||
|
|
||||||
|
|
||||||
|
var years = date.getFullYear()
|
||||||
|
var month = date.getMonth()
|
||||||
|
var days = date.getDate()
|
||||||
|
// alert(days)
|
||||||
|
|
||||||
|
// 添加前导零
|
||||||
|
hours = (hours < 10 ? "0" : "") + hours;
|
||||||
|
minutes = (minutes < 10 ? "0" : "") + minutes;
|
||||||
|
seconds = (seconds < 10 ? "0" : "") + seconds;
|
||||||
|
|
||||||
|
var currentTime = hours + ":" + minutes + ":" + seconds;
|
||||||
|
var currentDays = years + '-' + (month >= 10 ? month + 1 : "0" + (month + 1)) + "-" + days
|
||||||
|
// alert(days)
|
||||||
|
|
||||||
|
// 将时间显示在指定的DOM元素中
|
||||||
|
document.getElementById("time").innerHTML = currentTime;
|
||||||
|
document.getElementById("days").innerHTML = currentDays;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
setInterval(updateTime, 1000)
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.headers {
|
.headers {
|
||||||
|
|
|
@ -1,48 +1,48 @@
|
||||||
import { createRouter, createWebHistory } from 'vue-router'
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
|
||||||
const routes= [
|
const routes = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'index',
|
name: 'index',
|
||||||
component:()=>import('@/view/index.vue'),
|
component: () => import('@/view/index.vue'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/townDetail',
|
path: '/townDetail',
|
||||||
name: 'townDetail',
|
name: 'townDetail',
|
||||||
component:()=>import('@/view/townDetail.vue'),
|
component: () => import('@/view/townDetail.vue'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/commodity',
|
path: '/commodity',
|
||||||
name: 'commodity',
|
name: 'commodity',
|
||||||
component:()=>import('@/view/commodity.vue'),
|
component: () => import('@/view/commodity.vue'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/Businesses',
|
path: '/Businesses',
|
||||||
name: 'commBusinessesodity',
|
name: 'commBusinessesodity',
|
||||||
component:()=>import('@/view/Businesses.vue'),
|
component: () => import('@/view/Businesses.vue'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/storeLogin',
|
path: '/storeLogin',
|
||||||
name: 'storeLogin',
|
name: 'storeLogin',
|
||||||
component:()=>import('@/view/storeLogin.vue'),
|
component: () => import('@/view/storeLogin.vue'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/order',
|
path: '/order',
|
||||||
name: 'order',
|
name: 'order',
|
||||||
component:()=>import('@/view/order.vue'),
|
component: () => import('@/view/order.vue'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/finance',
|
path: '/finance',
|
||||||
name: 'finance',
|
name: 'finance',
|
||||||
component:()=>import('@/view/finance.vue'),
|
component: () => import('@/view/finance.vue'),
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(),
|
history: createWebHistory(),
|
||||||
routes
|
routes
|
||||||
})
|
})
|
||||||
|
|
||||||
export default router
|
export default router
|
|
@ -34,16 +34,11 @@ const hdClick = (e) => {
|
||||||
// console.log(e)
|
// console.log(e)
|
||||||
if (e.columnIndex == 10) {
|
if (e.columnIndex == 10) {
|
||||||
// alert(45)
|
// alert(45)
|
||||||
route.push('/storeLogin')
|
route.replace('/storeLogin')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
// const hdClick = (b) => {
|
|
||||||
// ShwostoreType.value = b
|
|
||||||
// alert(565)
|
|
||||||
// }
|
|
||||||
|
|
||||||
const a = (aaa) => {
|
const a = (aaa) => {
|
||||||
for (let i = 0; i < 100; i++) {
|
for (let i = 0; i < 100; i++) {
|
||||||
if (i % 2 == 0) {
|
if (i % 2 == 0) {
|
||||||
|
|
|
@ -20,31 +20,97 @@
|
||||||
</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="">
|
||||||
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
|
<div class="bg">
|
||||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
|
||||||
<div class="bubble"></div>
|
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||||
<div class="bubble1"></div>
|
<div class="bubble"></div>
|
||||||
<div class="bubble2"></div>
|
<div class="bubble1"></div>
|
||||||
|
<div class="bubble2"></div>
|
||||||
|
</div>
|
||||||
|
<div class="product-content">
|
||||||
|
<div style="margin-top: 14vh;position: relative;">商 品 总 数</div>
|
||||||
|
<div style="font-size: 10px;">NUMBER OF COMMODITIES</div>
|
||||||
|
<div style="position: relative; text-align: center;margin-top: 3vh;">今日</div>
|
||||||
|
<div style="margin-top: 2vh;position: relative;"> <span
|
||||||
|
style="color: #9DD2E0;font-size: 16px;">1234</span> 件</div>
|
||||||
|
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
||||||
|
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||||
|
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
||||||
|
|
||||||
|
昨日数据: 0.0
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||||
|
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
||||||
|
|
||||||
|
周环比: 10%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="product" style="display: flex;justify-content: space-around;position: relative;">
|
<div class="product" style="">
|
||||||
<img src="/static/index/SPBGZ.png" style="width: 90%;height: 100%;" alt="">
|
<div class="bg">
|
||||||
<img src="/static/index/SDTB.png" class="product-icon" alt="">
|
<img src="/static/index/SPBGZ.png" style="width: 90%;height: 100%;" alt="">
|
||||||
<div class="bubble"></div>
|
<img src="/static/index/SDTB.png" class="product-icon" alt="">
|
||||||
<div class="bubble1"></div>
|
<div class="bubble"></div>
|
||||||
<div class="bubble2"></div>
|
<div class="bubble1"></div>
|
||||||
|
<div class="bubble2"></div>
|
||||||
|
</div>
|
||||||
|
<div class="product-content">
|
||||||
|
<div style="margin-top: 14vh;position: relative;">新 商 品 总 数</div>
|
||||||
|
<div style="font-size: 10px;">NUMBER OF NEW SHOPS</div>
|
||||||
|
<div style="position: relative; text-align: center;margin-top: 3vh;">今日</div>
|
||||||
|
<div style="margin-top: 2vh;position: relative;"> <span
|
||||||
|
style="color: #9DD2E0;font-size: 16px;">1234</span> 件</div>
|
||||||
|
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
||||||
|
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||||
|
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
||||||
|
|
||||||
|
昨日数据: 0.0
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||||
|
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
||||||
|
|
||||||
|
周环比: 10%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="product" style="display: flex;justify-content: space-around;position: relative;">
|
<div class="product" style="">
|
||||||
<img src="/static/index/SPBGR.png" style="width: 90%;height: 100%;" alt="">
|
<div class="bg">
|
||||||
<img src="/static/index/SDTB.png" class="product-icon" alt="">
|
<img src="/static/index/SPBGR.png" style="width: 90%;height: 100%;" alt="">
|
||||||
<div class="bubble"></div>
|
<img src="/static/index/SDTB.png" class="product-icon" alt="">
|
||||||
<div class="bubble1"></div>
|
<div class="bubble"></div>
|
||||||
<div class="bubble2"></div>
|
<div class="bubble1"></div>
|
||||||
|
<div class="bubble2"></div>
|
||||||
|
</div>
|
||||||
|
<div class="product-content">
|
||||||
|
<div style="margin-top: 14vh;position: relative;">累 计 店 铺 总 数</div>
|
||||||
|
<div style="font-size: 10px;">ACCUMULATED NUMBERS OF SHOPS</div>
|
||||||
|
<div style="position: relative; text-align: center;margin-top: 3vh;">今日</div>
|
||||||
|
<div style="margin-top: 2vh;position: relative;"> <span
|
||||||
|
style="color: #9DD2E0;font-size: 16px;">1234</span> 件</div>
|
||||||
|
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
||||||
|
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||||
|
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
||||||
|
|
||||||
|
昨日数据: 0.0
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||||
|
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
||||||
|
|
||||||
|
周环比: 10%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="Views">
|
<div class="Views">
|
||||||
<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">
|
||||||
|
@ -58,6 +124,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="r">
|
<div class="r">
|
||||||
<img src="/static/index/PTSP.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
<img src="/static/index/PTSP.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
||||||
|
|
||||||
|
@ -364,7 +432,22 @@ onMounted(() => {
|
||||||
.product {
|
.product {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 32%;
|
width: 32%;
|
||||||
// background-color: #fff;
|
position: relative;
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-content {
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12PX;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-icon {
|
.product-icon {
|
||||||
|
|
|
@ -384,7 +384,12 @@ const optins = {
|
||||||
},
|
},
|
||||||
// color: transparent;
|
// color: transparent;
|
||||||
|
|
||||||
legend: {},
|
legend: {
|
||||||
|
textStyle: {
|
||||||
|
color: "white"
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '3%',
|
left: '3%',
|
||||||
right: '4%',
|
right: '4%',
|
||||||
|
@ -462,7 +467,10 @@ const optins = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['访客人数', '下单人数', '支付人数',]
|
data: ['访客人数', '下单人数', '支付人数',],
|
||||||
|
textStyle: {
|
||||||
|
color: "white"
|
||||||
|
}
|
||||||
// data: ['访客人数','下单人数','支付人数']
|
// data: ['访客人数','下单人数','支付人数']
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,32 +1,80 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="top">
|
<div class="top">
|
||||||
|
|
||||||
<div class="top-li">
|
<div class="top-li">
|
||||||
<img src="/static/storeLogin/SPSL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
|
||||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
<div class="top-bg">
|
||||||
|
<img src="/static/storeLogin/top1.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||||
|
<img src="/static/storeLogin/icon1.png" class="product-icon" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="top-content">
|
||||||
|
<div style="margin-top: 24vh;color: #B1E4F0;">1234</div>
|
||||||
|
<div style="margin-top: 4vh;font-size: 10px;display: flex;">
|
||||||
|
<div style="margin-left: 5.5vw;color: #B7CED5; ">昨日数据:0.0</div>
|
||||||
|
<div style="margin-left: 2.5vw;color: #B7CED5; ">周环比:0.0</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="top-li">
|
<div class="top-li">
|
||||||
<img src="/static/storeLogin/SPSL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
<div class="top-bg">
|
||||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
<img src="/static/storeLogin/top2.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||||
|
<img src="/static/storeLogin/icon2.png" class="product-icon" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="top-content">
|
||||||
|
<div style="margin-top: 24vh;color: #B1E4F0;">1234</div>
|
||||||
|
<div style="margin-top: 4vh;font-size: 10px;display: flex;">
|
||||||
|
<div style="margin-left: 5.5vw;color: #B7CED5; ">昨日数据:0.0</div>
|
||||||
|
<div style="margin-left: 2.5vw;color: #B7CED5; ">周环比:0.0</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="top-li">
|
<div class="top-li">
|
||||||
<img src="/static/storeLogin/SPSL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
<div class="top-bg">
|
||||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
<img src="/static/storeLogin/top3.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||||
|
<img src="/static/storeLogin/icon2.png" class="product-icon" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="top-content">
|
||||||
|
<div style="margin-top: 24vh;color: #B1E4F0;">1234</div>
|
||||||
|
<div style="margin-top: 4vh;font-size: 10px;display: flex;">
|
||||||
|
<div style="margin-left: 5.5vw;color: #B7CED5; ">昨日数据:0.0</div>
|
||||||
|
<div style="margin-left: 2.5vw;color: #B7CED5; ">周环比:0.0</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="top-li">
|
<div class="top-li">
|
||||||
<img src="/static/storeLogin/SPSL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
<div class="top-bg">
|
||||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
<img src="/static/storeLogin/top4.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||||
|
<img src="/static/storeLogin/icon3.png" class="product-icon" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="top-content">
|
||||||
|
<div style="margin-top: 24vh;color: #B1E4F0;">1234</div>
|
||||||
|
<div style="margin-top: 4vh;font-size: 10px;display: flex;">
|
||||||
|
<div style="margin-left: 5.5vw;color: #B7CED5; ">昨日数据:0.0</div>
|
||||||
|
<div style="margin-left: 2.5vw;color: #B7CED5; ">周环比:0.0</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="top-li">
|
<div class="top-li">
|
||||||
<img src="/static/storeLogin/SPSL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
<div class="top-bg">
|
||||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
|
||||||
|
|
||||||
|
<img src="/static/storeLogin/top5.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||||
|
<img src="/static/storeLogin/icon4.png" class="product-icon" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="top-content">
|
||||||
|
<div style="margin-top: 24vh;color: #B1E4F0;">1234</div>
|
||||||
|
<div style="margin-top: 4vh;font-size: 10px;display: flex;">
|
||||||
|
<div style="margin-left: 5.5vw;color: #B7CED5; ">昨日数据:0.0</div>
|
||||||
|
<div style="margin-left: 2.5vw;color: #B7CED5; ">周环比:0.0</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="bottom">
|
<div class="bottom">
|
||||||
|
|
||||||
<div class="ranking">
|
<div class="ranking">
|
||||||
|
@ -146,38 +194,53 @@ onMounted(() => {
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@keyframes jump {
|
@keyframes jump {
|
||||||
0% {
|
0% {
|
||||||
transform: translateY(0);
|
top: 6vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
transform: translateY(-10px);
|
top: 5vh;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: translateY(0);
|
top: 6vh;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.top {
|
.top {
|
||||||
height: 42vh;
|
margin-top: 1vh;
|
||||||
|
height: 37vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
// color: red;
|
||||||
|
|
||||||
.top-li {
|
.top-li {
|
||||||
width: 19%;
|
width: 20%;
|
||||||
height: 40vh;
|
height: 37vh;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
.top-bg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-content {
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.product-icon {
|
.product-icon {
|
||||||
width: 2vw;
|
width: 1.9vw;
|
||||||
height: 2vw;
|
height: 1.9vw;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
animation: jump 1s infinite;
|
animation: jump 1s infinite;
|
||||||
top: 6vh;
|
top: 6vh;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -186,6 +249,7 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom {
|
.bottom {
|
||||||
|
margin-top: 3vh;
|
||||||
height: 52vh;
|
height: 52vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
|
@ -5,24 +5,96 @@
|
||||||
<img class="img-cls" src="/static/town/YHSJ.png" alt="">
|
<img class="img-cls" src="/static/town/YHSJ.png" alt="">
|
||||||
<div class="user center" id="user"></div>
|
<div class="user center" id="user"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c">
|
<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="">
|
||||||
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
|
<div class="bg">
|
||||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
|
||||||
|
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||||
|
<div class="bubble"></div>
|
||||||
|
<div class="bubble1"></div>
|
||||||
|
<div class="bubble2"></div>
|
||||||
|
</div>
|
||||||
|
<div class="product-content">
|
||||||
|
<div style="margin-top: 14vh;position: relative;">商 品 总 数</div>
|
||||||
|
<div style="font-size: 10px;">NUMBER OF COMMODITIES</div>
|
||||||
|
<div style="position: relative; text-align: center;margin-top: 3.5vh;">今日</div>
|
||||||
|
<div style="margin-top: 2vh;position: relative;"> <span
|
||||||
|
style="color: #9DD2E0;font-size: 16px;">1234</span> 件</div>
|
||||||
|
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
||||||
|
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||||
|
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
||||||
|
|
||||||
|
昨日数据: 0.0
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||||
|
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
||||||
|
|
||||||
|
周环比: 10%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="product" style="display: flex;justify-content: space-around;">
|
<div class="product" style="">
|
||||||
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
|
<div class="bg">
|
||||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
<img src="/static/index/SPBGZ.png" style="width: 90%;height: 100%;" alt="">
|
||||||
|
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||||
|
<div class="bubble"></div>
|
||||||
|
<div class="bubble1"></div>
|
||||||
|
<div class="bubble2"></div>
|
||||||
|
</div>
|
||||||
|
<div class="product-content">
|
||||||
|
<div style="margin-top: 14vh;position: relative;">新 商 品 总 数</div>
|
||||||
|
<div style="font-size: 10px;">NUMBER OF NEW SHOPS</div>
|
||||||
|
<div style="position: relative; text-align: center;margin-top: 3.5vh;">今日</div>
|
||||||
|
<div style="margin-top: 2vh;position: relative;"> <span
|
||||||
|
style="color: #9DD2E0;font-size: 16px;">1234</span> 件</div>
|
||||||
|
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
||||||
|
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||||
|
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
||||||
|
|
||||||
|
昨日数据: 0.0
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||||
|
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
||||||
|
|
||||||
|
周环比: 10%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="product" style="display: flex;justify-content: space-around;">
|
<div class="product" style="">
|
||||||
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
|
<div class="bg">
|
||||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
<img src="/static/index/SPBGR.png" style="width: 90%;height: 100%;" alt="">
|
||||||
|
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||||
|
<div class="bubble"></div>
|
||||||
|
<div class="bubble1"></div>
|
||||||
|
<div class="bubble2"></div>
|
||||||
|
</div>
|
||||||
|
<div class="product-content">
|
||||||
|
<div style="margin-top: 14vh;position: relative;">累 计 店 铺 总 数</div>
|
||||||
|
<div style="font-size: 10px;">ACCUMULATED NUMBERS OF SHOPS</div>
|
||||||
|
<div style="position: relative; text-align: center;margin-top: 3.5vh;">今日</div>
|
||||||
|
<div style="margin-top: 2vh;position: relative;"> <span
|
||||||
|
style="color: #9DD2E0;font-size: 16px;">1234</span> 件</div>
|
||||||
|
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
||||||
|
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||||
|
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
||||||
|
|
||||||
|
昨日数据: 0.0
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||||
|
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
||||||
|
|
||||||
|
周环比: 10%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="Views">
|
<div class="Views">
|
||||||
<img src="/static/index/SSLLL.png" class="c-b-img" 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;">当前浏览量:
|
<div style="display: flex;align-items: center;">当前浏览量:
|
||||||
|
@ -31,9 +103,8 @@
|
||||||
<div>周环比:32%</div>
|
<div>周环比:32%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="r">
|
<div class="r">
|
||||||
|
|
||||||
<img class="img-cls" src="/static/town/DDSJ.png" alt="">
|
<img class="img-cls" src="/static/town/DDSJ.png" alt="">
|
||||||
|
@ -49,9 +120,8 @@
|
||||||
</div>
|
</div>
|
||||||
日订单数据
|
日订单数据
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%;height:50%;" id="orderData"></div>
|
<div style="width: 100%;height:50%; transform: translateY(5vh);" id="orderData"></div>
|
||||||
<div style="width: 100%;height: 50%;" id="orderData2"></div>
|
<div style="width: 100%;height: 50%;" id="orderData2"></div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -216,10 +286,11 @@ onMounted(() => {
|
||||||
.top {
|
.top {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding-top: 1vh;
|
padding-top: 1vh;
|
||||||
|
justify-content: space-between;
|
||||||
// color: transparent;
|
// color: transparent;
|
||||||
|
|
||||||
.l {
|
.l {
|
||||||
flex: 1;
|
width: 25vw;
|
||||||
height: 46vh;
|
height: 46vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -235,13 +306,15 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.c {
|
.c {
|
||||||
flex: 2;
|
box-sizing: border-box;
|
||||||
height: 46vh;
|
width: 48vw;
|
||||||
position: relative;
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
.product-list {
|
.product-list {
|
||||||
height: 75%;
|
height: 70%;
|
||||||
// background-color: red;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -249,7 +322,22 @@ onMounted(() => {
|
||||||
.product {
|
.product {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 32%;
|
width: 32%;
|
||||||
// background-color: #fff;
|
position: relative;
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-content {
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12PX;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-icon {
|
.product-icon {
|
||||||
|
@ -262,46 +350,31 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.Views {
|
.Views {
|
||||||
|
margin-top: 2%;
|
||||||
height: 25%;
|
height: 25%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0 15px;
|
position: relative;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 12px;
|
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 {
|
.view-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
height: 100%;
|
|
||||||
// color: ;
|
|
||||||
// display: flex;
|
|
||||||
// height: 100%;
|
|
||||||
// width: 100%;
|
|
||||||
// align-items: center;
|
|
||||||
// justify-content: space-between;
|
|
||||||
// padding: 0 20px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.r {
|
.r {
|
||||||
flex: 1;
|
width: 25vw;
|
||||||
height: 46vh;
|
height: 46vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
// background-color: RED;
|
||||||
|
|
||||||
.order-data {
|
.order-data {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -314,7 +387,7 @@ onMounted(() => {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: white;
|
color: white;
|
||||||
// background-color: #fff;
|
// background-color: #fff;
|
||||||
top: 5vh;
|
top: 6vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -440,4 +513,151 @@ onMounted(() => {
|
||||||
background: linear-gradient(to right, #455CCC, #51C2E0);
|
background: linear-gradient(to right, #455CCC, #51C2E0);
|
||||||
transition: width 0.5s ease-in-out;
|
transition: width 0.5s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bubble {
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
background-color: white;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
top: 7vh;
|
||||||
|
animation-name: bubbleAnimation;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble1 {
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
background-color: white;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
top: 7vh;
|
||||||
|
left: 6.5vw;
|
||||||
|
animation-name: bubbleAnimation;
|
||||||
|
animation-duration: 1.5s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble2 {
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
background-color: white;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
top: 7vh;
|
||||||
|
left: 8.5vw;
|
||||||
|
animation-name: bubbleAnimation;
|
||||||
|
animation-duration: 1.25s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes bubbleAnimation {
|
||||||
|
0% {
|
||||||
|
top: 7vh;
|
||||||
|
// opacity: 0;
|
||||||
|
transform: scale(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
top: 6.5vh;
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(0.55);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
top: 6vh;
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(0.5);
|
||||||
|
|
||||||
|
// left: 5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
transform: scale(1);
|
||||||
|
top: 5vh;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
|
||||||
|
top: 4vh;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bubbleAnimation1 {
|
||||||
|
0% {
|
||||||
|
top: 7vh;
|
||||||
|
// opacity: 0;
|
||||||
|
transform: scale(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
top: 6.5vh;
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(0.55);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
top: 6vh;
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(0.5);
|
||||||
|
|
||||||
|
// left: 5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
transform: scale(1);
|
||||||
|
top: 5vh;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
|
||||||
|
top: 4vh;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bubbleAnimation2 {
|
||||||
|
0% {
|
||||||
|
top: 7vh;
|
||||||
|
// opacity: 0;
|
||||||
|
transform: scale(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
top: 6.5vh;
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(0.55);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
top: 6vh;
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(0.5);
|
||||||
|
|
||||||
|
// left: 5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
transform: scale(1);
|
||||||
|
top: 5vh;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
|
||||||
|
top: 4vh;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
Before Width: | Height: | Size: 166 KiB After Width: | Height: | Size: 156 KiB |
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 156 KiB |
Before Width: | Height: | Size: 167 KiB After Width: | Height: | Size: 156 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 955 B |
After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 2.5 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 201 KiB |
After Width: | Height: | Size: 202 KiB |
After Width: | Height: | Size: 202 KiB |
After Width: | Height: | Size: 202 KiB |
After Width: | Height: | Size: 202 KiB |