This commit is contained in:
parent
38b81da321
commit
6e8853f757
|
|
@ -5,6 +5,11 @@
|
|||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue</title>
|
||||
<style>
|
||||
html{
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.body {
|
||||
background-image: url("/src/assets/img/bg.png");
|
||||
background-size: 100% 100%;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 521 B |
Binary file not shown.
|
After Width: | Height: | Size: 812 B |
Binary file not shown.
|
After Width: | Height: | Size: 619 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 611 B |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,101 @@
|
|||
<script setup>
|
||||
import { defineProps, defineEmits, ref } from "vue"
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const emit = defineEmits(['offAreaList'])
|
||||
const props = defineProps({
|
||||
choseArea: Boolean,
|
||||
})
|
||||
|
||||
const list = ref([
|
||||
{
|
||||
name: '泸县'
|
||||
},
|
||||
{
|
||||
name: '江阳'
|
||||
},
|
||||
{
|
||||
name: '龙马潭'
|
||||
},
|
||||
{
|
||||
name: '通滩'
|
||||
},
|
||||
{
|
||||
name: '纳溪'
|
||||
},
|
||||
{
|
||||
name: '合面'
|
||||
},
|
||||
{
|
||||
name: '叙永'
|
||||
},
|
||||
])
|
||||
|
||||
// 选镇
|
||||
const choseTownFn = (item) => {
|
||||
emit('offAreaList', item);
|
||||
props.choseArea = false;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<div class="address" v-if="props.choseArea">
|
||||
<div
|
||||
class="address-li"
|
||||
@click="choseTownFn(item)"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.address {
|
||||
left: 1vw;
|
||||
top: 18px;
|
||||
position: absolute;
|
||||
width: 10vw;
|
||||
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;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,16 +1,50 @@
|
|||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
import areaList from "./areaList.vue";
|
||||
|
||||
const info = reactive({
|
||||
address: '泸县'
|
||||
})
|
||||
|
||||
// 选择镇
|
||||
const choseArea = ref(null)
|
||||
const open = () => {
|
||||
choseArea.value = !choseArea.value;
|
||||
}
|
||||
// 关闭
|
||||
const offAreaList = (e) => {
|
||||
info.address = e.name;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="header">
|
||||
<div class="left">
|
||||
<img class="logo item" src="/src/assets/head_img/logo.png" />
|
||||
<div class="item">2023.11.17</div>
|
||||
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
|
||||
<div class="item">11:30:20</div>
|
||||
</div>
|
||||
<div class="head-title">吟龙物流信息监控溯源可视化大屏</div>
|
||||
<div class="right">
|
||||
<div class="item">泸县</div>
|
||||
<div class="item">多云</div>
|
||||
<div class="item" @click="open" style="position: relative">
|
||||
<img src="/src/assets/head_img/location.png" alt="" />
|
||||
{{ info.address }}
|
||||
<areaList
|
||||
:choseArea="choseArea"
|
||||
@offAreaList="offAreaList"
|
||||
style="position: absolute; top: 100%; left: 0"
|
||||
></areaList>
|
||||
</div>
|
||||
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
|
||||
<div class="item">
|
||||
<img src="/src/assets/head_img/weather.png" alt="" />
|
||||
多云
|
||||
</div>
|
||||
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
|
||||
<div class="item">
|
||||
<img src="/src/assets/head_img/close.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<img class="img" src="/src/assets/img/shiler.png" alt="" />
|
||||
</div>
|
||||
|
|
@ -35,6 +69,10 @@
|
|||
height: 100%;
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
.icon {
|
||||
width: 0.8rem;
|
||||
height: 2rem;
|
||||
}
|
||||
.head-title {
|
||||
/* font-weight: bold; */
|
||||
font-family: "ifonts", sans-serif;
|
||||
|
|
@ -45,9 +83,15 @@
|
|||
.left {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
.logo {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
.item {
|
||||
margin-left: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
|
|
@ -56,6 +100,15 @@
|
|||
justify-content: right;
|
||||
.item {
|
||||
margin-right: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,332 @@
|
|||
<script setup>
|
||||
import { reactive, ref } from "vue"
|
||||
import { onMounted, reactive, ref } from "vue"
|
||||
import border from "@/components/border.vue";
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const list = reactive({
|
||||
header: ['ID', '收件人', '收件人电话', '商品信息', '收货地址'],
|
||||
data: [
|
||||
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||
],
|
||||
// index: true,
|
||||
headerBGC: 'rgba(0, 168, 255, 0.56)',
|
||||
oddRowBGC: 'rgba(91, 219, 246, 0.20)',
|
||||
evenRowBGC: 'rgba(0, 168, 255, 0.16)',
|
||||
// columnWidth: [50],
|
||||
align: ['center'],
|
||||
rowNum: 7
|
||||
})
|
||||
|
||||
const orderList = reactive([
|
||||
{
|
||||
name: '今日订单',
|
||||
value: '988'
|
||||
},
|
||||
{
|
||||
name: '已取货订单',
|
||||
value: '1523'
|
||||
},
|
||||
{
|
||||
name: '未配送订单',
|
||||
value: '55'
|
||||
},
|
||||
{
|
||||
name: '已完成订单',
|
||||
value: '3'
|
||||
},
|
||||
])
|
||||
|
||||
const cOrderValue = (e) => {
|
||||
let str = e;
|
||||
if (str > 9999) str = 9999 + '';
|
||||
else str = str + '';
|
||||
str = str.split('');
|
||||
if (str.length < 4) {
|
||||
let t = 4 - str.length;
|
||||
for (let i = 0; i < t; i++) {
|
||||
str.unshift('0');
|
||||
}
|
||||
}
|
||||
str.splice(-3, 0, ',');
|
||||
return str;
|
||||
}
|
||||
|
||||
|
||||
const echartsRef = ref(null)
|
||||
|
||||
const initEcahrts = () => {
|
||||
|
||||
let xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
|
||||
yData1 = [400, 410, 350, 320, 280, 340, 360, 400, 420, 410],
|
||||
yData2 = [350, 320, 260, 240, 220, 280, 300, 360, 340, 340],
|
||||
yData3 = [200, 260, 200, 190, 180, 220, 260, 300, 280, 300],
|
||||
yData4 = [120, 300, 230, 240, 190, 290, 103, 456, 230, 270],
|
||||
borderData = [],
|
||||
legend = ["已取货订单", "未配送订单", "已完成订单", "小时订单数"],
|
||||
colorArr = [{
|
||||
start: "rgba(0, 168, 255,",
|
||||
end: "rgba(0, 168, 255, 1)"
|
||||
},
|
||||
{
|
||||
start: "rgba(91, 219, 246,",
|
||||
end: "rgba(91, 219, 246, 1)"
|
||||
},
|
||||
{
|
||||
start: "rgba(75, 95, 219,",
|
||||
end: "rgba(75, 95, 219, 1)"
|
||||
},
|
||||
{
|
||||
color: "rgba(91, 219, 246, 1)"
|
||||
}
|
||||
];
|
||||
let normalColor = "#DEEBFF";
|
||||
// let fontSize = 20;
|
||||
let seriesData = [];
|
||||
let borderHeight = 4;
|
||||
xData.forEach(element => {
|
||||
borderData.push(borderHeight);
|
||||
});
|
||||
[yData1, yData2, yData3, yData4].forEach((item, index) => {
|
||||
let obj1 = {};
|
||||
if (index < 3) {
|
||||
obj1 = {
|
||||
name: legend[index],
|
||||
type: "bar",
|
||||
stack: legend[index],
|
||||
data: item,
|
||||
barWidth: "15%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: colorArr[index].start + "0.3)"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: colorArr[index].start + "0.4)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArr[index].end
|
||||
}
|
||||
],
|
||||
globalCoord: false
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
seriesData.push(obj1);
|
||||
} else {
|
||||
let obj3 = {
|
||||
name: legend[index],
|
||||
type: "line",
|
||||
yAxisIndex: 1,
|
||||
smooth: false,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(255,255,255, 0.8)'
|
||||
},
|
||||
symbol: "circle",
|
||||
symbolSize: 16,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: colorArr[index].color,
|
||||
borderColor: "#fff",
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
data: item,
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
seriesData.push(obj3);
|
||||
}
|
||||
});
|
||||
console.log(seriesData);
|
||||
const option = {
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
grid: {
|
||||
left: "3%",
|
||||
top: "12%",
|
||||
right: "12%",
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
// icon: "rect",
|
||||
orient: 'vertical', // 将图例竖直布局
|
||||
|
||||
itemWidth: 16,
|
||||
itemHeight: 10,
|
||||
right: "right",
|
||||
bottom: "center",
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
data: legend
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
borderColor: "rgba(18, 57, 60, .8)",
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
shadowStyle: {
|
||||
color: 'rgba(0, 11, 34, .4)',
|
||||
}
|
||||
},
|
||||
formatter: function (params) {
|
||||
let str = "";
|
||||
for (let i = 0; i < params.length; i++) {
|
||||
if (params[i].seriesName !== "") {
|
||||
str +=
|
||||
params[i].name +
|
||||
':' +
|
||||
params[i].seriesName +
|
||||
'-' +
|
||||
params[i].value +
|
||||
"<br/>";
|
||||
}
|
||||
}
|
||||
return str;
|
||||
}
|
||||
},
|
||||
xAxis: [{
|
||||
type: "category",
|
||||
data: xData,
|
||||
name: '小时(工作时间)',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
align: 'center',
|
||||
textStyle: {
|
||||
color: normalColor,
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#1C82C5'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: "value",
|
||||
// name: "亿千瓦时",
|
||||
// nameTextStyle: {
|
||||
// color: normalColor,
|
||||
// fontSize: 12
|
||||
// },
|
||||
// "min": 0,
|
||||
// "max": 50,
|
||||
axisLabel: {
|
||||
formatter: "{value}",
|
||||
textStyle: {
|
||||
color: normalColor,
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#1C82C5'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "solid",
|
||||
color: 'rgba(28, 130, 197, .3)'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
// name: "%",
|
||||
// nameTextStyle: {
|
||||
// color: normalColor,
|
||||
// fontSize: 12
|
||||
// },
|
||||
// min: -100,
|
||||
// max: 100,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
formatter: "{value}",
|
||||
textStyle: {
|
||||
color: normalColor,
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#1C82C5'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(255,255,255,0.2)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: seriesData
|
||||
};
|
||||
|
||||
// 基于DOM元素初始化echarts实例
|
||||
const chart = echarts.init(echartsRef.value);
|
||||
|
||||
// 使用配置项显示图表
|
||||
chart.setOption(option);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initEcahrts()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -11,19 +337,30 @@ import border from "@/components/border.vue";
|
|||
<div class="body-box">
|
||||
<div class="left">
|
||||
<div class="top">
|
||||
<div class="view" v-for="(item, index) in 4" :key="index">
|
||||
<div class="view" v-for="(item, index) in orderList" :key="index">
|
||||
<div class="num">
|
||||
<div>6</div>
|
||||
<div>,</div>
|
||||
<div>5</div>
|
||||
<div>8</div>
|
||||
<div>1</div>
|
||||
<div v-for="(t, i) in cOrderValue(item.value)" :key="i">
|
||||
{{ t }}
|
||||
</div>
|
||||
</div>
|
||||
<div>今日订单</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom echarts" ref="echartsRef"></div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="top">
|
||||
<div class="t-right">
|
||||
<img src="/src/assets/img/item.png" />
|
||||
<div>今日订单</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div>查看更多</div>
|
||||
<div>{{ "〉" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<dv-scroll-board :config="list" style="width: 100%; height: 90%" />
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</border>
|
||||
|
|
@ -56,9 +393,12 @@ import border from "@/components/border.vue";
|
|||
.body-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
.left {
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
|
@ -87,9 +427,44 @@ import border from "@/components/border.vue";
|
|||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: 70%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 38%;
|
||||
height: 95%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.top {
|
||||
height: 10%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.t-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
div {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .dv-scroll-board .rows .row-item {
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,9 +30,8 @@ import AMap from "./AMap.vue";
|
|||
pointer-events: none;
|
||||
}
|
||||
.map {
|
||||
height: 98%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@ onMounted(() => {
|
|||
<div class="box">
|
||||
<div class="title">配送详情</div>
|
||||
<div class="head-box b-box">商品信息</div>
|
||||
<div class="order">
|
||||
<div class="order_h">
|
||||
<div class="top">
|
||||
<div>
|
||||
订单编号
|
||||
|
|
@ -278,23 +278,63 @@ onMounted(() => {
|
|||
text-align: left;
|
||||
padding: 0.5rem 0;
|
||||
padding-left: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.order {
|
||||
width: 100%;
|
||||
background-image: url(../../../assets/delivery_img/box2.png);
|
||||
background-size: 100% 100%;
|
||||
height: 10%;
|
||||
.bottom {
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
.img {
|
||||
height: 4rem;
|
||||
width: 3.5rem;
|
||||
}
|
||||
.name {
|
||||
height: 60%;
|
||||
flex: 1;
|
||||
padding: 0.2rem 1.2rem;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.name2 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
div {
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.order_h {
|
||||
width: 100%;
|
||||
background-image: url(../../../assets/delivery_img/box3.png);
|
||||
background-size: 100% 100%;
|
||||
height: 15%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.top {
|
||||
width: calc(100% - 40px);
|
||||
padding: 20px;
|
||||
padding-bottom: 10px;
|
||||
width: 90%;
|
||||
box-sizing: border-box !important;
|
||||
padding-top: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.line {
|
||||
display: flex;
|
||||
width: calc(100% - 40px);
|
||||
padding: 0 20px;
|
||||
width: 90%;
|
||||
align-items: center;
|
||||
.c {
|
||||
width: 0.2rem;
|
||||
|
|
@ -309,15 +349,18 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
.bottom {
|
||||
width: calc(100% - 60px);
|
||||
padding: 20px 30px 30px 30px;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box !important;
|
||||
padding-bottom: 1rem;
|
||||
.img {
|
||||
height: 4rem;
|
||||
width: 3.5rem;
|
||||
}
|
||||
.name {
|
||||
height: 80%;
|
||||
flex: 1;
|
||||
padding: 0.2rem 1.2rem;
|
||||
text-align: left;
|
||||
|
|
@ -338,8 +381,8 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
.map {
|
||||
height: 12rem;
|
||||
width: 90%;
|
||||
height: 16%;
|
||||
width: 96%;
|
||||
margin: 0.5rem 0;
|
||||
border: 1px solid rgba(91, 219, 246, 1);
|
||||
position: relative;
|
||||
|
|
@ -356,15 +399,18 @@ onMounted(() => {
|
|||
.delivery {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
.left {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
.left-item {
|
||||
height: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1.2rem 0;
|
||||
padding-left: 1.2rem;
|
||||
background-image: url(../../../assets/delivery_img/box1.png);
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 10%;
|
||||
.img {
|
||||
height: 4rem;
|
||||
width: 3.5rem;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,202 @@
|
|||
<template>
|
||||
<div class="box-a">
|
||||
<div class="star">
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
<div class="starline"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.box-a {
|
||||
transform-style: preserve-3d;
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
transform: rotateX(70deg) rotateY(-20deg);
|
||||
}
|
||||
.star {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 80vh;
|
||||
height: 80vh;
|
||||
transform-style: preserve-3d;
|
||||
/*border: 1px solid #fff;*/
|
||||
animation: starrotate 10s linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.starline {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #3870b4;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.starline:nth-child(1) {
|
||||
transform: rotateY(10deg);
|
||||
}
|
||||
.starline:nth-child(2) {
|
||||
transform: rotateY(20deg);
|
||||
}
|
||||
.starline:nth-child(3) {
|
||||
transform: rotateY(30deg);
|
||||
}
|
||||
.starline:nth-child(4) {
|
||||
transform: rotateY(40deg);
|
||||
}
|
||||
.starline:nth-child(5) {
|
||||
transform: rotateY(500deg);
|
||||
}
|
||||
.starline:nth-child(6) {
|
||||
transform: rotateY(60deg);
|
||||
}
|
||||
.starline:nth-child(7) {
|
||||
transform: rotateY(70deg);
|
||||
}
|
||||
.starline:nth-child(8) {
|
||||
transform: rotateY(80deg);
|
||||
}
|
||||
.starline:nth-child(9) {
|
||||
transform: rotateY(90deg);
|
||||
}
|
||||
.starline:nth-child(10) {
|
||||
transform: rotateY(100deg);
|
||||
}
|
||||
.starline:nth-child(11) {
|
||||
transform: rotateY(110deg);
|
||||
}
|
||||
.starline:nth-child(12) {
|
||||
transform: rotateY(120deg);
|
||||
}
|
||||
.starline:nth-child(13) {
|
||||
transform: rotateY(130deg);
|
||||
}
|
||||
.starline:nth-child(14) {
|
||||
transform: rotateY(140deg);
|
||||
}
|
||||
.starline:nth-child(15) {
|
||||
transform: rotateY(150deg);
|
||||
}
|
||||
.starline:nth-child(16) {
|
||||
transform: rotateY(160deg);
|
||||
}
|
||||
.starline:nth-child(17) {
|
||||
transform: rotateY(170deg);
|
||||
}
|
||||
.starline:nth-child(18) {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.starline:nth-child(19) {
|
||||
transform: rotateX(10deg);
|
||||
}
|
||||
.starline:nth-child(20) {
|
||||
transform: rotateX(20deg);
|
||||
}
|
||||
.starline:nth-child(21) {
|
||||
transform: rotateX(30deg);
|
||||
}
|
||||
.starline:nth-child(22) {
|
||||
transform: rotateX(40deg);
|
||||
}
|
||||
.starline:nth-child(23) {
|
||||
transform: rotateX(50deg);
|
||||
}
|
||||
.starline:nth-child(24) {
|
||||
transform: rotateX(60deg);
|
||||
}
|
||||
.starline:nth-child(25) {
|
||||
transform: rotateX(70deg);
|
||||
}
|
||||
.starline:nth-child(26) {
|
||||
transform: rotateX(80deg);
|
||||
}
|
||||
.starline:nth-child(27) {
|
||||
transform: rotateX(90deg);
|
||||
}
|
||||
.starline:nth-child(28) {
|
||||
transform: rotateX(100deg);
|
||||
}
|
||||
.starline:nth-child(29) {
|
||||
transform: rotateX(110deg);
|
||||
}
|
||||
.starline:nth-child(30) {
|
||||
transform: rotateX(120deg);
|
||||
}
|
||||
.starline:nth-child(31) {
|
||||
transform: rotateX(130deg);
|
||||
}
|
||||
.starline:nth-child(32) {
|
||||
transform: rotateX(140deg);
|
||||
}
|
||||
.starline:nth-child(33) {
|
||||
transform: rotateX(150deg);
|
||||
}
|
||||
.starline:nth-child(34) {
|
||||
transform: rotateX(160deg);
|
||||
}
|
||||
.starline:nth-child(35) {
|
||||
transform: rotateX(170deg);
|
||||
}
|
||||
.starline:nth-child(36) {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
.starline:nth-child(36) {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
@keyframes starrotate {
|
||||
from {
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,15 @@
|
|||
<script setup>
|
||||
import ball from "./ball.vue";
|
||||
import centerMap from "./centerMap.vue";
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="ball"></div>
|
||||
<div class="ball">
|
||||
<ball class="ball1"></ball>
|
||||
</div>
|
||||
<centerMap class="c-map"></centerMap>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -15,11 +20,18 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.ball {
|
||||
width: 40rem;
|
||||
height: 40rem;
|
||||
background-image: url(../../../assets/img/ball.png);
|
||||
background-size: 100% 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.c-map {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,156 @@
|
|||
<script setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import * as echarts from 'echarts';
|
||||
import luxian from "@/assets/json/luxian.json";
|
||||
import hejiang from "@/assets/json/hejiang.json";
|
||||
import xuyong from "@/assets/json/xuyong.json";
|
||||
|
||||
const mapType = reactive({
|
||||
name: '',
|
||||
json: ''
|
||||
})
|
||||
|
||||
const changeType = (name) => {
|
||||
mapType.name = name;
|
||||
if (name == 'luxian') mapType.json = luxian;
|
||||
if (name == 'hejiang') mapType.json = hejiang;
|
||||
if (name == 'xuyong') mapType.json = xuyong;
|
||||
}
|
||||
changeType('luxian');
|
||||
|
||||
const dataValue = [
|
||||
{ name: '北京', value: [105.38, 29.15] },
|
||||
{ name: '上海', value: [105.32, 29.15] },
|
||||
]
|
||||
|
||||
const echartsRef = ref(null);
|
||||
const initMap = () => {
|
||||
// 基于DOM元素初始化echarts实例
|
||||
const chart = echarts.init(echartsRef.value);
|
||||
echarts.registerMap(mapType.name, mapType.json);
|
||||
let option = {
|
||||
animation: false,
|
||||
//geo方式地理坐标系组件。
|
||||
geo: {
|
||||
map: mapType.name,
|
||||
zoom: 1.0,
|
||||
label: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
fontSize: 25,
|
||||
// 高亮状态下的多边形和标签样式。
|
||||
|
||||
},
|
||||
// 选中状态下的多边形和标签样式
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: '#546686', //地图背景色
|
||||
borderColor: '#fff', //省市边界线00fcff 516a89
|
||||
borderWidth: 1,
|
||||
},
|
||||
label: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
// aspectScale:0.75, //长宽比
|
||||
// roam: true, //是否允许缩放
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#546686', //地图背景色
|
||||
borderColor: '#fff', //省市边界线00fcff 516a89
|
||||
borderWidth: 1,
|
||||
areaColor: "#3f5171",
|
||||
shadowColor: "#5bdbf6",
|
||||
shadowOffsetX: 4,
|
||||
shadowOffsetY: 8,
|
||||
// shadowBlur: 2
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "map",
|
||||
map: mapType.name,
|
||||
emphasis: {
|
||||
disabled: true
|
||||
},
|
||||
select: {
|
||||
disabled: true
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: "#3f5171",
|
||||
borderColor: "#fff",
|
||||
borderWidth: 1,
|
||||
shadowColor: "#5bdbf6",
|
||||
shadowOffsetX: 5,
|
||||
shadowOffsetY: 10,
|
||||
shadowBlur: 30
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "scatter",
|
||||
coordinateSystem: "geo",
|
||||
data: dataValue,
|
||||
// symbolSize: function(val) {
|
||||
// return val[2] / 10;
|
||||
// },
|
||||
symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6eb37202311281655342626.png",
|
||||
symbolSize: [40, 30],
|
||||
hoverSymbolSize: [120, 90],
|
||||
tooltip: {
|
||||
formatter (value) {
|
||||
console.log(value);
|
||||
return "";
|
||||
},
|
||||
show: true
|
||||
},
|
||||
encode: {
|
||||
value: 2
|
||||
},
|
||||
label: {
|
||||
formatter: "{b}",
|
||||
position: "right",
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#0efacc"
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
// 使用配置项显示图表
|
||||
chart.setOption(option);
|
||||
}
|
||||
onMounted(() => {
|
||||
initMap();
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="map">
|
||||
<div class="echarts" ref="echartsRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* background-color: rgba($color: #fff, $alpha: 0.3); */
|
||||
.echarts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<script setup>
|
||||
import { reactive, ref } from "vue"
|
||||
import border from "../../../components/border.vue"
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
const list = reactive({
|
||||
header: ['ID', '收件人', '收件人电话', '商品信息', '收货地址'],
|
||||
data: [
|
||||
|
|
@ -31,11 +32,18 @@ const cell1 = reactive({
|
|||
borderRadius: 3,
|
||||
colors: ['#66FFFF', '#FEDB65']
|
||||
})
|
||||
|
||||
const route = useRouter()
|
||||
|
||||
const navToDelivery = () => {
|
||||
route.push('/delivery')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<border>
|
||||
<div class="box">
|
||||
<div class="box" @click="navToDelivery">
|
||||
<div class="title">今日订单数</div>
|
||||
<div class="my-day-num">
|
||||
<div class="my-num-item">0</div>
|
||||
|
|
@ -46,14 +54,12 @@ const cell1 = reactive({
|
|||
<div class="my-num-item">1</div>
|
||||
</div>
|
||||
<div class="order-list">
|
||||
<div class="head">
|
||||
<div class="item">
|
||||
<div class="c-circle">
|
||||
<div class="c"></div>
|
||||
</div>
|
||||
<div>订单列表</div>
|
||||
<div class="top">
|
||||
<div class="t-right">
|
||||
<img src="/src/assets/img/item.png" />
|
||||
<div>今日订单</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="flex">
|
||||
<div>查看更多</div>
|
||||
<div>{{ "〉" }}</div>
|
||||
</div>
|
||||
|
|
@ -99,7 +105,7 @@ const cell1 = reactive({
|
|||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
height: 92%;
|
||||
height: calc(100% - 40px);
|
||||
width: 100%;
|
||||
padding: 20px 20px;
|
||||
font-size: 0.8rem;
|
||||
|
|
@ -125,6 +131,7 @@ const cell1 = reactive({
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
margin-top: 10px;
|
||||
.my-num-item {
|
||||
margin-right: 10px;
|
||||
|
|
@ -143,32 +150,26 @@ const cell1 = reactive({
|
|||
height: 55%;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
.head {
|
||||
/* width: 100%; */
|
||||
.top {
|
||||
height: 10%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.item {
|
||||
.t-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
& > div {
|
||||
margin: 5px;
|
||||
img {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.c-circle {
|
||||
border: 2px solid #5bdbf6;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba($color: #5bdbf6, $alpha: 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.c {
|
||||
background-color: #5bdbf6;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
div {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,27 +60,20 @@ onUnmounted(() => {
|
|||
<border>
|
||||
<div class="box">
|
||||
<div class="title">订单排行榜</div>
|
||||
<div class="list">
|
||||
<!-- <dv-scroll-board :config="list" style="width: 100%; height: 300px" /> -->
|
||||
<div class="scroll-container" ref="scrollContainerRef">
|
||||
<div
|
||||
v-for="(item, index) in items"
|
||||
:key="item.id"
|
||||
class="b-list-item"
|
||||
>
|
||||
<div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="name">{{ item.text }}</div>
|
||||
<div class="line">
|
||||
<div
|
||||
class="line-body"
|
||||
:style="{ width: '80%' }"
|
||||
:class="{ 'line-body2': index >= 3 }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="count">6000</div>
|
||||
<div class="scroll-container" ref="scrollContainerRef">
|
||||
<div v-for="(item, index) in items" :key="item.id" class="b-list-item">
|
||||
<div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="name">{{ item.text }}</div>
|
||||
<div class="line">
|
||||
<div
|
||||
class="line-body"
|
||||
:style="{ width: '80%' }"
|
||||
:class="{ 'line-body2': index >= 3 }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="count">6000</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -89,13 +82,14 @@ onUnmounted(() => {
|
|||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
width: calc(100% - 40px);
|
||||
padding: 0 20px;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
background-image: url(../../../assets/img/title.png);
|
||||
|
|
@ -107,16 +101,9 @@ onUnmounted(() => {
|
|||
font-family: "ifonts";
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.list {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
.list-span1 {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
.scroll-container {
|
||||
height: 300px;
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
/* 隐藏滚动条 */
|
||||
scrollbar-width: none;
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ onUnmounted(() => {
|
|||
<template>
|
||||
<border>
|
||||
<div class="box">
|
||||
<div class="title">订单排行榜</div>
|
||||
<div class="title">配送商品排行榜</div>
|
||||
<div class="list">
|
||||
<!-- <dv-scroll-board :config="list" style="width: 100%; height: 300px" /> -->
|
||||
<div class="scroll-container" ref="scrollContainerRef">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import centerItme1 from "./components/centerItem1.vue";
|
|||
import centerItme2 from "./components/centerItem2.vue";
|
||||
import rightItem1 from "./components/rightItem1.vue";
|
||||
import rightItem2 from "./components/rightItem2.vue";
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -14,7 +13,7 @@ import rightItem2 from "./components/rightItem2.vue";
|
|||
<div class="center">
|
||||
<div class="item">
|
||||
<leftItme1 style="height: 58%"></leftItme1>
|
||||
<leftItme2 style="height: 38%"></leftItme2>
|
||||
<leftItme2 style="height: 40%"></leftItme2>
|
||||
</div>
|
||||
<div class="item item_c">
|
||||
<centerItme1 style="height: 66%"></centerItme1>
|
||||
|
|
@ -37,7 +36,7 @@ import rightItem2 from "./components/rightItem2.vue";
|
|||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
justify-content: space-evenly;
|
||||
align-content: center;
|
||||
/* border: 1px solid red; */
|
||||
& > .div {
|
||||
|
|
|
|||
Loading…
Reference in New Issue