页面调账
|
@ -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 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=""> 泸县
|
||||
</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>
|
||||
<areaList :choseArea="choseArea" @offAreaList="offAreaList"></areaList>
|
||||
<div class="right-line">
|
||||
<span></span>
|
||||
<span></span>
|
||||
|
||||
</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>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<div class="rigth-li">2023.01.20</div>
|
||||
<div class="rigth-li" id="days">2023-11-28</div>
|
||||
<div class="right-line">
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<div class="rigth-li" @click="route.push('/')"><img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
|
||||
:src="u('GJ')" alt=""></div>
|
||||
<div class="rigth-li" @click="out"><img style="width: 1VW;height:1VW;margin-right: 0.5vw;" :src="u('GJ')"
|
||||
alt=""></div>
|
||||
<div class="right-line">
|
||||
<span></span>
|
||||
<span></span>
|
||||
|
@ -74,8 +68,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from "vue"
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import areaList from "./areaList.vue";
|
||||
import { useRouter } from 'vue-router'
|
||||
const u = (name) => {
|
||||
return `/static/index/${name}.png`
|
||||
|
@ -89,22 +84,58 @@ const showFn = (index, src) => {
|
|||
show[i] = true
|
||||
})
|
||||
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) => {
|
||||
choseTown.value = false
|
||||
route.push('/townDetail?id=' + id)
|
||||
console.log(route)
|
||||
const out = () => {
|
||||
//@ts-ignore
|
||||
window.open("about:blank", "_top").close()
|
||||
|
||||
//@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>
|
||||
<style lang="scss" scoped>
|
||||
.headers {
|
||||
|
|
|
@ -1,40 +1,40 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
const routes= [
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'index',
|
||||
component:()=>import('@/view/index.vue'),
|
||||
component: () => import('@/view/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/townDetail',
|
||||
name: 'townDetail',
|
||||
component:()=>import('@/view/townDetail.vue'),
|
||||
component: () => import('@/view/townDetail.vue'),
|
||||
},
|
||||
{
|
||||
path: '/commodity',
|
||||
name: 'commodity',
|
||||
component:()=>import('@/view/commodity.vue'),
|
||||
component: () => import('@/view/commodity.vue'),
|
||||
},
|
||||
{
|
||||
path: '/Businesses',
|
||||
name: 'commBusinessesodity',
|
||||
component:()=>import('@/view/Businesses.vue'),
|
||||
component: () => import('@/view/Businesses.vue'),
|
||||
},
|
||||
{
|
||||
path: '/storeLogin',
|
||||
name: 'storeLogin',
|
||||
component:()=>import('@/view/storeLogin.vue'),
|
||||
component: () => import('@/view/storeLogin.vue'),
|
||||
},
|
||||
{
|
||||
path: '/order',
|
||||
name: 'order',
|
||||
component:()=>import('@/view/order.vue'),
|
||||
component: () => import('@/view/order.vue'),
|
||||
},
|
||||
{
|
||||
path: '/finance',
|
||||
name: 'finance',
|
||||
component:()=>import('@/view/finance.vue'),
|
||||
component: () => import('@/view/finance.vue'),
|
||||
},
|
||||
|
||||
|
||||
|
|
|
@ -34,16 +34,11 @@ const hdClick = (e) => {
|
|||
// console.log(e)
|
||||
if (e.columnIndex == 10) {
|
||||
// alert(45)
|
||||
route.push('/storeLogin')
|
||||
route.replace('/storeLogin')
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
// const hdClick = (b) => {
|
||||
// ShwostoreType.value = b
|
||||
// alert(565)
|
||||
// }
|
||||
|
||||
const a = (aaa) => {
|
||||
for (let i = 0; i < 100; i++) {
|
||||
if (i % 2 == 0) {
|
||||
|
|
|
@ -20,31 +20,97 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="c" id="">
|
||||
<div class="product-list">
|
||||
<div class="product" style="display: flex;justify-content: space-around;">
|
||||
<div class="product" style="">
|
||||
<div class="bg">
|
||||
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble1"></div>
|
||||
<div class="bubble2"></div>
|
||||
</div>
|
||||
<div class="product" style="display: flex;justify-content: space-around;position: relative;">
|
||||
<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 class="product" style="">
|
||||
<div class="bg">
|
||||
<img src="/static/index/SPBGZ.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SDTB.png" class="product-icon" alt="">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble1"></div>
|
||||
<div class="bubble2"></div>
|
||||
|
||||
</div>
|
||||
<div class="product" style="display: flex;justify-content: space-around;position: relative;">
|
||||
<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 class="product" style="">
|
||||
<div class="bg">
|
||||
<img src="/static/index/SPBGR.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SDTB.png" class="product-icon" alt="">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble1"></div>
|
||||
<div class="bubble2"></div>
|
||||
</div>
|
||||
<div 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 class="Views">
|
||||
<img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<div class="view-content">
|
||||
|
@ -58,6 +124,8 @@
|
|||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="r">
|
||||
<img src="/static/index/PTSP.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
||||
|
||||
|
@ -364,7 +432,22 @@ onMounted(() => {
|
|||
.product {
|
||||
height: 100%;
|
||||
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 {
|
||||
|
|
|
@ -384,7 +384,12 @@ const optins = {
|
|||
},
|
||||
// color: transparent;
|
||||
|
||||
legend: {},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: "white"
|
||||
}
|
||||
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
|
@ -462,7 +467,10 @@ const optins = {
|
|||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['访客人数', '下单人数', '支付人数',]
|
||||
data: ['访客人数', '下单人数', '支付人数',],
|
||||
textStyle: {
|
||||
color: "white"
|
||||
}
|
||||
// data: ['访客人数','下单人数','支付人数']
|
||||
|
||||
},
|
||||
|
|
|
@ -1,32 +1,80 @@
|
|||
<template>
|
||||
<div class="top">
|
||||
|
||||
<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 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/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 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/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 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/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 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/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 class="bottom">
|
||||
|
||||
<div class="ranking">
|
||||
|
@ -146,38 +194,53 @@ onMounted(() => {
|
|||
<style lang="scss" scoped>
|
||||
@keyframes jump {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
top: 6vh;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
top: 5vh;
|
||||
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
top: 6vh;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
height: 42vh;
|
||||
margin-top: 1vh;
|
||||
height: 37vh;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
// color: red;
|
||||
|
||||
.top-li {
|
||||
width: 19%;
|
||||
height: 40vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 20%;
|
||||
height: 37vh;
|
||||
position: relative;
|
||||
|
||||
.top-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.top-content {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.product-icon {
|
||||
width: 2vw;
|
||||
height: 2vw;
|
||||
width: 1.9vw;
|
||||
height: 1.9vw;
|
||||
position: absolute;
|
||||
animation: jump 1s infinite;
|
||||
top: 6vh;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -186,6 +249,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 3vh;
|
||||
height: 52vh;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
|
@ -5,24 +5,96 @@
|
|||
<img class="img-cls" src="/static/town/YHSJ.png" alt="">
|
||||
<div class="user center" id="user"></div>
|
||||
</div>
|
||||
<div class="c">
|
||||
<div class="c" id="">
|
||||
<div class="product-list">
|
||||
<div class="product" style="display: flex;justify-content: space-around;">
|
||||
<div class="product" style="">
|
||||
<div class="bg">
|
||||
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble1"></div>
|
||||
<div class="bubble2"></div>
|
||||
</div>
|
||||
<div class="product" style="display: flex;justify-content: space-around;">
|
||||
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||
<div class="product-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 class="product" style="display: flex;justify-content: space-around;">
|
||||
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
|
||||
<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 class="product" style="">
|
||||
<div class="bg">
|
||||
<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 class="product" style="">
|
||||
<div class="bg">
|
||||
<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 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>昨日数据:3333</div>
|
||||
<div style="display: flex;align-items: center;">当前浏览量:
|
||||
|
@ -31,9 +103,8 @@
|
|||
<div>周环比:32%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="r">
|
||||
|
||||
<img class="img-cls" src="/static/town/DDSJ.png" alt="">
|
||||
|
@ -49,9 +120,8 @@
|
|||
</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>
|
||||
|
@ -216,10 +286,11 @@ onMounted(() => {
|
|||
.top {
|
||||
display: flex;
|
||||
padding-top: 1vh;
|
||||
justify-content: space-between;
|
||||
// color: transparent;
|
||||
|
||||
.l {
|
||||
flex: 1;
|
||||
width: 25vw;
|
||||
height: 46vh;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
@ -235,13 +306,15 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.c {
|
||||
flex: 2;
|
||||
height: 46vh;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 48vw;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.product-list {
|
||||
height: 75%;
|
||||
// background-color: red;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
@ -249,7 +322,22 @@ onMounted(() => {
|
|||
.product {
|
||||
height: 100%;
|
||||
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 {
|
||||
|
@ -262,46 +350,31 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.Views {
|
||||
margin-top: 2%;
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
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;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
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;
|
||||
width: 25vw;
|
||||
height: 46vh;
|
||||
position: relative;
|
||||
// background-color: RED;
|
||||
|
||||
.order-data {
|
||||
width: 100%;
|
||||
|
@ -314,7 +387,7 @@ onMounted(() => {
|
|||
position: absolute;
|
||||
color: white;
|
||||
// background-color: #fff;
|
||||
top: 5vh;
|
||||
top: 6vh;
|
||||
width: 100%;
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
|
@ -440,4 +513,151 @@ onMounted(() => {
|
|||
background: linear-gradient(to right, #455CCC, #51C2E0);
|
||||
transition: width 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 7vh;
|
||||
animation-name: bubbleAnimation;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.bubble1 {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 7vh;
|
||||
left: 6.5vw;
|
||||
animation-name: bubbleAnimation;
|
||||
animation-duration: 1.5s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.bubble2 {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 7vh;
|
||||
left: 8.5vw;
|
||||
animation-name: bubbleAnimation;
|
||||
animation-duration: 1.25s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
|
||||
@keyframes bubbleAnimation {
|
||||
0% {
|
||||
top: 7vh;
|
||||
// opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 6.5vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.55);
|
||||
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 6vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.5);
|
||||
|
||||
// left: 5vw;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1);
|
||||
top: 5vh;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
top: 4vh;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubbleAnimation1 {
|
||||
0% {
|
||||
top: 7vh;
|
||||
// opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 6.5vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.55);
|
||||
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 6vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.5);
|
||||
|
||||
// left: 5vw;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1);
|
||||
top: 5vh;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
top: 4vh;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubbleAnimation2 {
|
||||
0% {
|
||||
top: 7vh;
|
||||
// opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 6.5vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.55);
|
||||
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 6vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.5);
|
||||
|
||||
// left: 5vw;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1);
|
||||
top: 5vh;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
top: 4vh;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
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 |