2023-11-22 18:30:06 +08:00
|
|
|
|
<template>
|
2023-11-25 18:35:23 +08:00
|
|
|
|
<div v-show="loading" style="position: relative;top: 50%;left: 50%;transform: translate(-50%,-50%);">
|
|
|
|
|
|
<dv-loading style="color: white;">Loading...</dv-loading>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="box" :style="{ opacity: loading ? 0 : 1 }">
|
2023-11-23 19:39:47 +08:00
|
|
|
|
<div class="body">
|
|
|
|
|
|
<div class="l">
|
2023-11-25 18:35:23 +08:00
|
|
|
|
<img src="/static/index/PTYHL.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
2023-11-23 19:39:47 +08:00
|
|
|
|
<div class="user" id="user"></div>
|
|
|
|
|
|
<div class="storeNum">
|
|
|
|
|
|
<div class="tit"></div>
|
|
|
|
|
|
<div class="townList">
|
|
|
|
|
|
<div class="storebox" v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1]">
|
|
|
|
|
|
<div class="store" :id="'store' + index"></div>
|
|
|
|
|
|
<div class="toenName">
|
|
|
|
|
|
<div>同谈镇</div>
|
|
|
|
|
|
<div>123个</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2023-11-28 15:26:40 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2023-11-23 19:39:47 +08:00
|
|
|
|
<div class="c" id="">
|
|
|
|
|
|
<div class="product-list">
|
2023-11-28 15:26:40 +08:00
|
|
|
|
<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-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>
|
2023-11-23 19:39:47 +08:00
|
|
|
|
</div>
|
2023-11-28 15:26:40 +08:00
|
|
|
|
<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-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>
|
2023-11-23 19:39:47 +08:00
|
|
|
|
</div>
|
2023-11-28 15:26:40 +08:00
|
|
|
|
<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>
|
2023-11-23 19:39:47 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2023-11-28 15:26:40 +08:00
|
|
|
|
|
2023-11-23 19:39:47 +08:00
|
|
|
|
<div class="Views">
|
|
|
|
|
|
<img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
|
|
|
|
|
<div class="view-content">
|
|
|
|
|
|
<div>昨日数据：3333</div>
|
2023-11-24 19:32:45 +08:00
|
|
|
|
<div style="display: flex;align-items: center;">当前浏览量：
|
|
|
|
|
|
<Remake /> 人正在浏览
|
2023-11-23 19:39:47 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div>周环比：32%</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
2023-11-28 15:26:40 +08:00
|
|
|
|
|
|
|
|
|
|
|
2023-11-23 19:39:47 +08:00
|
|
|
|
<div class="r">
|
2023-11-25 18:35:23 +08:00
|
|
|
|
<img src="/static/index/PTSP.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="user" style="width: 98%; ">
|
2023-11-23 19:39:47 +08:00
|
|
|
|
<div class="btns">
|
|
|
|
|
|
<span class="btn">店铺销量排行</span>
|
|
|
|
|
|
<span class="btn">店铺销量排行</span>
|
|
|
|
|
|
</div>
|
2023-11-25 18:35:23 +08:00
|
|
|
|
<dv-scroll-board :config="config3" style="height: 17vh;margin-left: 1%;" />
|
2023-11-23 19:39:47 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="storeNum">
|
|
|
|
|
|
<div class="tit">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="townList">
|
|
|
|
|
|
<div class="storebox" v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1]">
|
|
|
|
|
|
<div class="store" :id="'store' + (index + 8)"></div>
|
|
|
|
|
|
<div class="toenName">
|
|
|
|
|
|
<div>同谈镇</div>
|
|
|
|
|
|
<div>123个</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="foot">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="foot-l">
|
2023-11-25 18:35:23 +08:00
|
|
|
|
<img src="/static/index/DDSJ.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
|
|
|
|
|
|
2023-11-23 19:39:47 +08:00
|
|
|
|
<div style="height: 5vh;"></div>
|
|
|
|
|
|
<div>
|
2023-11-25 18:35:23 +08:00
|
|
|
|
<dv-scroll-board :config="configs" style="width:96%;height:40vh;margin-left: 2%;" />
|
2023-11-23 19:39:47 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="c">
|
2023-11-25 18:35:23 +08:00
|
|
|
|
|
|
|
|
|
|
<img src="/static/index/CJYHTJ.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
|
|
|
|
|
|
2023-11-23 19:39:47 +08:00
|
|
|
|
<div style="height:5vh;"></div>
|
|
|
|
|
|
<div class="towns">
|
|
|
|
|
|
<div class="town-li" v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]">泸县</div>
|
|
|
|
|
|
<div id="transactionUsers" style="width: 100%;height: 30vh;"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="r">
|
2023-11-25 18:35:23 +08:00
|
|
|
|
<img src="/static/index/DRDD.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
2023-11-23 19:39:47 +08:00
|
|
|
|
|
|
|
|
|
|
<div style="height: 5vh;"></div>
|
|
|
|
|
|
<div>
|
2023-11-25 18:35:23 +08:00
|
|
|
|
<dv-scroll-board :config="configs2" style="width:96%;height:40vh;margin-left: 2%;" />
|
2023-11-23 19:39:47 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2023-11-22 18:30:06 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
|
|
|
|
|
|
|
|
|
import { onMounted } from 'vue';
|
|
|
|
|
|
import * as echarts from 'echarts';
|
2023-11-23 19:39:47 +08:00
|
|
|
|
import option from "./option"
|
2023-11-24 19:32:45 +08:00
|
|
|
|
import Remake from "@/components/Remake.vue"
|
2023-11-23 19:39:47 +08:00
|
|
|
|
import { ref, reactive } from "vue"
|
2023-11-25 18:35:23 +08:00
|
|
|
|
const loading = ref(true)
|
2023-11-24 19:32:45 +08:00
|
|
|
|
|
2023-11-23 19:39:47 +08:00
|
|
|
|
const i = 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231123//20231123190555159fa2259.jpg'
|
2023-11-24 19:32:45 +08:00
|
|
|
|
|
|
|
|
|
|
|
2023-11-23 19:39:47 +08:00
|
|
|
|
const configs = reactive(
|
|
|
|
|
|
{
|
|
|
|
|
|
header: ['所属地区', '日订单数', '日订单金额', '月订单数', '月订单金额'],
|
|
|
|
|
|
headerBGC: '#223B7E',
|
2023-11-25 18:35:23 +08:00
|
|
|
|
rowNum: 10,
|
2023-11-23 19:39:47 +08:00
|
|
|
|
data: [
|
|
|
|
|
|
['行1列1', '行1列2', '行1列3', 'sad', 'asdsa'],
|
|
|
|
|
|
['行2列1', '行2列2', '行2列3', 'sad', 'asdsa'],
|
|
|
|
|
|
['行3列1', '行3列2', '行3列3', 'sad', 'asdsa'],
|
|
|
|
|
|
['行4列1', '行4列2', '行4列3', 'sad', 'asdsa'],
|
|
|
|
|
|
['行5列1', '行5列2', '行5列3', 'sad', 'asdsa'],
|
|
|
|
|
|
['行6列1', '行6列2', '行6列3', 'sad', 'asdsa'],
|
|
|
|
|
|
['行7列1', '行7列2', '行7列3', 'sad', 'asdsa'],
|
|
|
|
|
|
['行8列1', '行8列2', '行8列3', 'sad', 'asdsa'],
|
|
|
|
|
|
['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
|
2023-11-25 18:35:23 +08:00
|
|
|
|
['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
|
|
|
|
|
|
['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
|
|
|
|
|
|
['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
|
|
|
|
|
|
['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
|
|
|
|
|
|
['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
|
2023-11-23 19:39:47 +08:00
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
const configs2 = reactive(
|
|
|
|
|
|
{
|
|
|
|
|
|
header: ['所属片区', '当日订单金额', '昨日订单金额'],
|
|
|
|
|
|
headerBGC: '#223B7E',
|
|
|
|
|
|
align: ['center'],
|
2023-11-25 18:35:23 +08:00
|
|
|
|
rowNum: 10,
|
2023-11-23 19:39:47 +08:00
|
|
|
|
data: [
|
|
|
|
|
|
['行1列1', '行1列2', '行1列3'],
|
|
|
|
|
|
['行2列1', '行2列2', '行2列3'],
|
|
|
|
|
|
['行3列1', '行3列2', '行3列3'],
|
|
|
|
|
|
['行4列1', '行4列2', '行4列3'],
|
|
|
|
|
|
['行5列1', '行5列2', '行5列3'],
|
|
|
|
|
|
['行6列1', '行6列2', '行6列3'],
|
|
|
|
|
|
['行7列1', '行7列2', '行7列3'],
|
|
|
|
|
|
['行8列1', '行8列2', '行8列3'],
|
|
|
|
|
|
['行9列1', '行9列2', '行9列3'],
|
2023-11-25 18:35:23 +08:00
|
|
|
|
['行9列1', '行9列2', '行9列3'],
|
|
|
|
|
|
['行9列1', '行9列2', '行9列3'],
|
|
|
|
|
|
['行9列1', '行9列2', '行9列3'],
|
|
|
|
|
|
['行9列1', '行9列2', '行9列3'],
|
2023-11-23 19:39:47 +08:00
|
|
|
|
['行10列1', '行10列2', '行10列3']
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
const config3 = reactive({
|
|
|
|
|
|
oddRowBGC: "#001C2E",
|
|
|
|
|
|
evenRowBGC: "#001C2E",
|
|
|
|
|
|
columnWidth: [
|
2023-11-25 18:35:23 +08:00
|
|
|
|
3, 3, 4, 10, 4
|
2023-11-23 19:39:47 +08:00
|
|
|
|
],
|
|
|
|
|
|
data: [
|
|
|
|
|
|
[
|
|
|
|
|
|
`<div style=" text-align: center;background-image: url('/static/index/PM1.png');width: 30px;height: 30px;background-size: cover;">1</div> `,
|
|
|
|
|
|
`<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
|
|
|
|
|
`<div>商品名称</div>`,
|
|
|
|
|
|
`<div class="progress-bar"> <div class="progress"></div> </div>`,
|
|
|
|
|
|
`<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
|
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
[` <div style=" text-align: center;background-image: url('/static/index/PM2.png');width: 30px;height: 30px;background-size: cover;"> 2</div> `,
|
|
|
|
|
|
`<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
|
|
|
|
|
`<div>商品名称</div>`,
|
|
|
|
|
|
`<div class="progress-bar"> <div class="progress"></div> </div>`,
|
|
|
|
|
|
`<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
[` <div style=" text-align: center;background-image: url('/static/index/PM3.png');width: 30px;height: 30px;background-size: cover;">3</div> `,
|
|
|
|
|
|
`<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
|
|
|
|
|
`<div>商品名称</div>`,
|
|
|
|
|
|
`<div class="progress-bar"> <div class="progress"></div> </div>`,
|
|
|
|
|
|
`<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
|
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
[` <div style=" text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">4</div> `,
|
|
|
|
|
|
`<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
|
|
|
|
|
`<div>商品名称</div>`,
|
|
|
|
|
|
`<div class="progress-bar"> <div class="progress"></div> </div>`,
|
|
|
|
|
|
`<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
|
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
[` <div style=" text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">5</div> `,
|
|
|
|
|
|
`<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
|
|
|
|
|
`<div>商品名称</div>`,
|
|
|
|
|
|
`<div class="progress-bar"> <div class="progress"></div> </div>`,
|
|
|
|
|
|
`<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
|
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
[` <div style=" text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">6</div> `,
|
|
|
|
|
|
`<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
|
|
|
|
|
`<div>商品名称</div>`,
|
|
|
|
|
|
`<div class="progress-bar"> <div class="progress"></div> </div>`,
|
|
|
|
|
|
`<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
|
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 图表
|
|
|
|
|
|
const initCharts = (tag, option) => {
|
|
|
|
|
|
var chartDom = document.getElementById(tag);
|
|
|
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
|
|
myChart.setOption(option);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
2023-11-22 18:30:06 +08:00
|
|
|
|
onMounted(() => {
|
2023-11-23 19:39:47 +08:00
|
|
|
|
initCharts('user', option.userChartOption)
|
|
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < 16; i++) {
|
|
|
|
|
|
initCharts('store' + i, option.storeNum)
|
2023-11-22 18:30:06 +08:00
|
|
|
|
|
2023-11-23 19:39:47 +08:00
|
|
|
|
}
|
|
|
|
|
|
initCharts('transactionUsers', option.transactionUsers)
|
|
|
|
|
|
|
2023-11-25 18:35:23 +08:00
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
loading.value = false
|
|
|
|
|
|
}, 1000)
|
2023-11-23 19:39:47 +08:00
|
|
|
|
// initCharts('user', option.userChartOption)
|
2023-11-22 18:30:06 +08:00
|
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
2023-11-23 19:39:47 +08:00
|
|
|
|
@keyframes jump {
|
|
|
|
|
|
0% {
|
|
|
|
|
|
transform: translateY(0);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
50% {
|
|
|
|
|
|
transform: translateY(-10px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
100% {
|
|
|
|
|
|
transform: translateY(0);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.body {
|
2023-11-25 18:35:23 +08:00
|
|
|
|
height: 45vh;
|
2023-11-23 19:39:47 +08:00
|
|
|
|
display: flex;
|
2023-11-25 18:35:23 +08:00
|
|
|
|
margin-top: 1vh;
|
|
|
|
|
|
justify-content: space-between;
|
2023-11-23 19:39:47 +08:00
|
|
|
|
|
|
|
|
|
|
.l {
|
2023-11-25 18:35:23 +08:00
|
|
|
|
|
|
|
|
|
|
width: 25vw;
|
2023-11-23 19:39:47 +08:00
|
|
|
|
height: 100%;
|
2023-11-25 18:35:23 +08:00
|
|
|
|
position: relative;
|
2023-11-23 19:39:47 +08:00
|
|
|
|
|
|
|
|
|
|
.user {
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
padding-top: 5vh;
|
|
|
|
|
|
width: 100%;
|
2023-11-25 18:35:23 +08:00
|
|
|
|
height: 58%;
|
|
|
|
|
|
// background-color: #fff;
|
2023-11-23 19:39:47 +08:00
|
|
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.storeNum {
|
|
|
|
|
|
width: 100%;
|
2023-11-25 18:35:23 +08:00
|
|
|
|
height: 42%;
|
|
|
|
|
|
// background-color: red;
|
2023-11-23 19:39:47 +08:00
|
|
|
|
|
|
|
|
|
|
.tit {
|
|
|
|
|
|
height: 15%;
|
|
|
|
|
|
// background-color: red;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.townList {
|
|
|
|
|
|
height: 75%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.storebox {
|
|
|
|
|
|
width: 22%;
|
|
|
|
|
|
height: 40%;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
|
|
|
|
|
|
|
.store {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.toenName {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
background: linear-gradient(to right, rgba(0, 0, 0, 0), #216278);
|
|
|
|
|
|
border-radius: 0 15px 15px 0;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
padding: 7px 2px;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.c {
|
|
|
|
|
|
box-sizing: border-box;
|
2023-11-25 18:35:23 +08:00
|
|
|
|
width: 48vw;
|
2023-11-23 19:39:47 +08:00
|
|
|
|
height: 100%;
|
2023-11-25 18:35:23 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: space-between;
|
2023-11-23 19:39:47 +08:00
|
|
|
|
|
|
|
|
|
|
.product-list {
|
2023-11-25 18:35:23 +08:00
|
|
|
|
height: 70%;
|
2023-11-23 19:39:47 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
|
|
.product {
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
width: 32%;
|
2023-11-28 15:26:40 +08:00
|
|
|
|
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;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2023-11-23 19:39:47 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.product-icon {
|
|
|
|
|
|
width: 2vw;
|
|
|
|
|
|
height: 2vw;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
animation: jump 1s infinite;
|
|
|
|
|
|
top: 2vh;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.Views {
|
2023-11-25 18:35:23 +08:00
|
|
|
|
margin-top: 2%;
|
2023-11-23 19:39:47 +08:00
|
|
|
|
height: 25%;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
|
|
|
|
|
|
.view-content {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
align-items: center;
|
2023-11-25 18:35:23 +08:00
|
|
|
|
justify-content: space-around;
|
2023-11-23 19:39:47 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.r {
|
2023-11-25 18:35:23 +08:00
|
|
|
|
width: 25vw;
|
2023-11-23 19:39:47 +08:00
|
|
|
|
height: 100%;
|
2023-11-25 18:35:23 +08:00
|
|
|
|
position: relative;
|
2023-11-23 19:39:47 +08:00
|
|
|
|
|
|
|
|
|
|
.user {
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
padding-top: 5vh;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 57%;
|
|
|
|
|
|
|
|
|
|
|
|
.btns {
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
|
|
margin-right: 1vw;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
padding: 3px 10px;
|
|
|
|
|
|
border: 1px solid #2A538D;
|
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.storeNum {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 43%;
|
|
|
|
|
|
|
|
|
|
|
|
.tit {
|
|
|
|
|
|
height: 15%;
|
|
|
|
|
|
// background-color: red;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.townList {
|
|
|
|
|
|
height: 75%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
box-sizing: border-box;
|
2023-11-25 18:35:23 +08:00
|
|
|
|
// padding: 10px;
|
2023-11-23 19:39:47 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.storebox {
|
|
|
|
|
|
width: 22%;
|
|
|
|
|
|
height: 40%;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
|
|
|
|
|
|
|
.store {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.toenName {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
background: linear-gradient(to right, rgba(0, 0, 0, 0), #216278);
|
|
|
|
|
|
border-radius: 0 15px 15px 0;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
padding: 7px 2px;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.foot {
|
2023-11-25 18:35:23 +08:00
|
|
|
|
margin-top: 1vh;
|
|
|
|
|
|
height: 46vh;
|
2023-11-23 19:39:47 +08:00
|
|
|
|
display: flex;
|
2023-11-25 18:35:23 +08:00
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
2023-11-23 19:39:47 +08:00
|
|
|
|
|
|
|
|
|
|
.foot-l {
|
2023-11-25 18:35:23 +08:00
|
|
|
|
width: 25vw;
|
2023-11-23 19:39:47 +08:00
|
|
|
|
height: 100%;
|
2023-11-25 18:35:23 +08:00
|
|
|
|
position: relative;
|
2023-11-23 19:39:47 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.c {
|
2023-11-25 18:35:23 +08:00
|
|
|
|
width: 48vw;
|
|
|
|
|
|
position: relative;
|
2023-11-23 19:39:47 +08:00
|
|
|
|
height: 100%;
|
2023-11-25 18:35:23 +08:00
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
// background: url('');
|
|
|
|
|
|
|
2023-11-23 19:39:47 +08:00
|
|
|
|
|
|
|
|
|
|
.towns {
|
|
|
|
|
|
width: 50vw;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
padding: 1vh 1vw;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
|
|
|
|
.town-li {
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
color: #A0C7D5;
|
|
|
|
|
|
padding: 5px 10px;
|
|
|
|
|
|
border-radius: 7px 10px;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
border: 1px solid #3A91A5;
|
|
|
|
|
|
background-color: #072C3E;
|
|
|
|
|
|
// margin-left: 2vw;
|
|
|
|
|
|
justify-content: fl;
|
|
|
|
|
|
margin-left: 2vw;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.r {
|
2023-11-25 18:35:23 +08:00
|
|
|
|
width: 25vw;
|
2023-11-23 19:39:47 +08:00
|
|
|
|
height: 100%;
|
2023-11-25 18:35:23 +08:00
|
|
|
|
position: relative;
|
|
|
|
|
|
// background: url('');
|
2023-11-23 19:39:47 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.progress-bar {
|
|
|
|
|
|
transform: translateY(12px);
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 10px;
|
|
|
|
|
|
background-color: #122E3F;
|
|
|
|
|
|
// border-radius: 10px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.progress {
|
|
|
|
|
|
width: 70%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
background: linear-gradient(to right, #455CCC, #51C2E0);
|
|
|
|
|
|
transition: width 0.5s ease-in-out;
|
|
|
|
|
|
}
|
2023-11-27 18:34:57 +08:00
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2023-11-22 18:30:06 +08:00
|
|
|
|
</style>
|
