weipengfei
/
mer-tradescreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

页面调账

This commit is contained in:
zmj 2023-11-28 15:26:40 +08:00
parent a41f7999a9
commit 1ad27a55eb
22 changed files with 592 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/areaList.vue Normal file
View File

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

71
src/components/header.vue
View File

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

7
src/view/Businesses.vue
View File

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

93
src/view/index.vue
View File

@ -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="">
<div class="bg">
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt=""> <img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
<img src="/static/index/SPTB.png" class="product-icon" alt=""> <img src="/static/index/SPTB.png" class="product-icon" alt="">
<div class="bubble"></div> <div class="bubble"></div>
<div class="bubble1"></div> <div class="bubble1"></div>
<div class="bubble2"></div> <div class="bubble2"></div>
</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="">
&nbsp;
昨日数据： 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="">
&nbsp;
周环比: 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/SPBGZ.png" style="width: 90%;height: 100%;" alt="">
<img src="/static/index/SDTB.png" class="product-icon" alt=""> <img src="/static/index/SDTB.png" class="product-icon" alt="">
<div class="bubble"></div> <div class="bubble"></div>
<div class="bubble1"></div> <div class="bubble1"></div>
<div class="bubble2"></div> <div class="bubble2"></div>
</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="">
&nbsp;
昨日数据： 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="">
&nbsp;
周环比: 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/SPBGR.png" style="width: 90%;height: 100%;" alt="">
<img src="/static/index/SDTB.png" class="product-icon" alt=""> <img src="/static/index/SDTB.png" class="product-icon" alt="">
<div class="bubble"></div> <div class="bubble"></div>
<div class="bubble1"></div> <div class="bubble1"></div>
<div class="bubble2"></div> <div class="bubble2"></div>
</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="">
&nbsp;
昨日数据： 0.0
</div> </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="">
&nbsp;
周环比: 10%
</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 {

12
src/view/option.js
View File

@ -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: ['访客人数','下单人数','支付人数']
}, },

110
src/view/storeLogin.vue
View File

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

304
src/view/townDetail.vue
View File

@ -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="">
<div class="bg">
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt=""> <img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
<img src="/static/index/SPTB.png" class="product-icon" 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>
<div class="product" style="display: flex;justify-content: space-around;"> <div class="product-content">
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt=""> <div style="margin-top: 14vh;position: relative;">商 品 总 数</div>
<img src="/static/index/SPTB.png" class="product-icon" alt=""> <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="">
&nbsp;
昨日数据： 0.0
</div> </div>
<div class="product" style="display: flex;justify-content: space-around;"> <div style="font-size: 9px;position: relative;display: flex;align-items: center;">
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt=""> <img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
&nbsp;
周环比: 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=""> <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="">
&nbsp;
昨日数据： 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="">
&nbsp;
周环比: 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="">
&nbsp;
昨日数据： 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="">
&nbsp;
周环比: 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>

BIN
static/index/SPBG.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 166 KiB

After

Width:  |  Height:  |  Size: 156 KiB

BIN
static/index/SPBGR.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 168 KiB

After

Width:  |  Height:  |  Size: 156 KiB

BIN
static/index/SPBGZ.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 167 KiB

After

Width:  |  Height:  |  Size: 156 KiB

BIN
static/index/ZHB.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/index/ZRSJ.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 955 B

BIN
static/storeLogin/icon1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
static/storeLogin/icon2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
static/storeLogin/icon3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/storeLogin/icon4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/storeLogin/top1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 201 KiB

BIN
static/storeLogin/top2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB

BIN
static/storeLogin/top3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB

BIN
static/storeLogin/top4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB

BIN
static/storeLogin/top5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB