diff --git a/package-lock.json b/package-lock.json
index aca6126..e3ceff8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
"@jiaminghi/data-view": "^2.10.0",
"echarts": "^5.4.3",
"mitt": "^3.0.1",
+ "pinia": "^2.1.7",
"vue": "^3.3.8",
"vue-router": "^4.2.5"
},
@@ -981,6 +982,50 @@
"node": ">=8.6"
}
},
+ "node_modules/pinia": {
+ "version": "2.1.7",
+ "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.1.7.tgz",
+ "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+ "dependencies": {
+ "@vue/devtools-api": "^6.5.0",
+ "vue-demi": ">=0.14.5"
+ },
+ "peerDependencies": {
+ "@vue/composition-api": "^1.4.0",
+ "typescript": ">=4.4.4",
+ "vue": "^2.6.14 || ^3.3.0"
+ },
+ "peerDependenciesMeta": {
+ "@vue/composition-api": {
+ "optional": true
+ },
+ "typescript": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/pinia/node_modules/vue-demi": {
+ "version": "0.14.6",
+ "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
+ "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+ "hasInstallScript": true,
+ "bin": {
+ "vue-demi-fix": "bin/vue-demi-fix.js",
+ "vue-demi-switch": "bin/vue-demi-switch.js"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "peerDependencies": {
+ "@vue/composition-api": "^1.0.0-rc.1",
+ "vue": "^3.0.0-0 || ^2.6.0"
+ },
+ "peerDependenciesMeta": {
+ "@vue/composition-api": {
+ "optional": true
+ }
+ }
+ },
"node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
diff --git a/package.json b/package.json
index 628071d..0e572f3 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"@jiaminghi/data-view": "^2.10.0",
"echarts": "^5.4.3",
"mitt": "^3.0.1",
+ "pinia": "^2.1.7",
"vue": "^3.3.8",
"vue-router": "^4.2.5"
},
diff --git a/src/assets/delivery_img/icon6.png b/src/assets/delivery_img/icon6.png
new file mode 100644
index 0000000..fc5a13b
Binary files /dev/null and b/src/assets/delivery_img/icon6.png differ
diff --git a/src/assets/delivery_img/icon7.png b/src/assets/delivery_img/icon7.png
new file mode 100644
index 0000000..1f4ed7d
Binary files /dev/null and b/src/assets/delivery_img/icon7.png differ
diff --git a/src/assets/delivery_img/icon8.png b/src/assets/delivery_img/icon8.png
new file mode 100644
index 0000000..60c1b30
Binary files /dev/null and b/src/assets/delivery_img/icon8.png differ
diff --git a/src/components/areaList.vue b/src/components/areaList.vue
index 9d94e3b..97ec0fb 100644
--- a/src/components/areaList.vue
+++ b/src/components/areaList.vue
@@ -1,9 +1,10 @@
<script setup>
-import { defineProps, defineEmits, ref, nextTick, } from "vue"
+import { defineProps, defineEmits, ref, nextTick, onMounted, } from "vue"
import { useRouter } from 'vue-router'
const router = useRouter()
const emit = defineEmits(['offAreaList']);
const choseArea = ref(false);
+import { useAppStore } from "@/store/app.js";
const list = ref([
{
@@ -36,9 +37,12 @@ const list = ref([
},
])
+const appStore = useAppStore();
+
// 选镇
const choseTownFn = (item) => {
emit('offAreaList', item);
+ appStore.setMapInfo(item.pinyin);
}
const open = () => {
@@ -57,6 +61,14 @@ defineExpose({
open, close, show
})
+onMounted(() => {
+ list.value.forEach(item => {
+ if (item.pinyin == appStore.map_info) {
+ choseTownFn(item)
+ }
+ })
+})
+
</script>
<template>
diff --git a/src/components/border.vue b/src/components/border.vue
index 1f7154e..56706e0 100644
--- a/src/components/border.vue
+++ b/src/components/border.vue
@@ -4,9 +4,9 @@
<template>
<div class="border-box">
<div class="border-top"></div>
- <div class="center">
+ <div class="border-center">
<div class="border-left"></div>
- <div class="box"><slot></slot></div>
+ <div class="border-slot"><slot></slot></div>
<div class="border-left"></div>
</div>
<div class="border-bottom"></div>
@@ -43,7 +43,7 @@
#5bdbf6 calc(100% - 12px)
);
}
- .center {
+ .border-center {
flex: 1;
display: flex;
justify-content: space-between;
@@ -58,7 +58,7 @@
);
}
}
- .box {
+ .border-slot {
flex: 1;
}
}
diff --git a/src/components/headView.vue b/src/components/headView.vue
index 17b3229..03f5dc5 100644
--- a/src/components/headView.vue
+++ b/src/components/headView.vue
@@ -35,8 +35,30 @@ const navToDelivery = () => {
else router.back();
}
+let nowTime = ref([]);
+
+const updateClock = () => {
+ let now = new Date();
+ let hours = now.getHours();
+ let minutes = now.getMinutes();
+ let seconds = now.getSeconds();
+ let y = now.getFullYear();
+ let m = now.getMonth() + 1;
+ let d = now.getDate();
+
+ nowTime.value[0] = y + '.' + m.toString().padStart(2, '0') + '.' + d.toString().padStart(2, '0');
+
+ nowTime.value[1] = hours.toString().padStart(2, '0') + ':' +
+ minutes.toString().padStart(2, '0') + ':' +
+ seconds.toString().padStart(2, '0');
+}
+
onMounted(() => {
+
mitt.emit('map_info', info);
+
+ // 每秒钟更新一次时间
+ setInterval(updateClock, 1000);
})
</script>
@@ -48,9 +70,9 @@ onMounted(() => {
src="/src/assets/head_img/logo.png"
@click="navToDelivery"
/>
- <div class="item">2023.11.17</div>
+ <div class="item">{{ nowTime[0] }}</div>
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
- <div class="item">11:30:20</div>
+ <div class="item">{{ nowTime[1] }}</div>
</div>
<div class="head-title">吟龙物流信息监控溯源可视化大屏</div>
<div class="right">
diff --git a/src/main.js b/src/main.js
index 79a17e2..61ecf54 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,8 +4,12 @@ import App from './App.vue'
import dataV from '@jiaminghi/data-view'
import './assets/font/fonts.css';
import router from "./router";
+import { createPinia } from 'pinia'
+
+const pinia = createPinia();
const app = createApp(App)
app.use(dataV)
+app.use(pinia)
app.use(router)
app.mount('#app')
diff --git a/src/store/app.js b/src/store/app.js
new file mode 100644
index 0000000..42435dd
--- /dev/null
+++ b/src/store/app.js
@@ -0,0 +1,16 @@
+import { defineStore } from "pinia"
+import { ref } from "vue"
+
+export const useAppStore = defineStore('app', () => {
+ const map_info = ref(localStorage.getItem('map_info') || 'luxian');
+
+ const setMapInfo = (e) => {
+ map_info.value = e;
+ localStorage.setItem('map_info', e);
+ }
+
+ return {
+ map_info,
+ setMapInfo
+ }
+})
\ No newline at end of file
diff --git a/src/view/delivery/components/bottom.vue b/src/view/delivery/components/bottom.vue
index 5ddb3f6..91f2c97 100644
--- a/src/view/delivery/components/bottom.vue
+++ b/src/view/delivery/components/bottom.vue
@@ -4,28 +4,55 @@ import border from "@/components/border.vue";
import * as echarts from 'echarts';
import mitt from "@/utils/mitt"
+const initData = (aaa) => {
+ for (let i = 0; i < 20; i++) {
+ if (i % 2 == 0) {
+ aaa.data.push(
+ [
+ `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+ `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)' >排sd序</div>`,
+ `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+ `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+ `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+ ]
+ )
+ } else {
+ aaa.data.push(
+ [
+ `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
+ `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)' >排sd序</div>`,
+ `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
+ `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
+ `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
+ ]
+ )
+ }
+
+ }
+}
+
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>'],
+ header: [
+ `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>ID</div>`,
+ `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人</div>`,
+ `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人电话</div>`,
+ `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>商品名称</div>`,
+ `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人地址</div>`,
],
+ data: [],
// index: true,
- headerBGC: 'rgba(0, 168, 255, 0.56)',
- oddRowBGC: 'rgba(91, 219, 246, 0.20)',
- evenRowBGC: 'rgba(0, 168, 255, 0.16)',
+ // headerBGC: 'rgba(0, 168, 255, 0.76)',
+ // oddRowBGC: 'rgba(91, 219, 246, 0.20)',
+ // evenRowBGC: 'rgba(0, 168, 255, 0.16)',
+ oddRowBGC: '',
+ evenRowBGC: "",
// columnWidth: [50],
align: ['center'],
rowNum: 7
})
+initData(list);
+
const orderList = reactive([
{
name: '今日订单',
@@ -373,7 +400,7 @@ onMounted(() => {
<style scoped lang="scss">
.box {
- height: 92%;
+ height: 100%;
width: 100%;
padding: 20px 20px;
font-size: 0.8rem;
@@ -381,9 +408,7 @@ onMounted(() => {
flex-direction: column;
justify-content: space-between;
align-items: center;
- & > div {
- width: calc(100% - 40px);
- }
+ box-sizing: border-box;
.title {
width: 100%;
background-image: url(../../../assets/img/title3.png);
@@ -467,8 +492,14 @@ onMounted(() => {
}
}
}
- ::v-deep .dv-scroll-board .rows .row-item {
- margin-bottom: 0.6rem;
+
+ :deep(.ceil) {
+ padding: 0 !important;
+ margin-bottom: 5px;
+ }
+
+ :deep(.header-item) {
+ padding: 0 !important;
}
}
}
diff --git a/src/view/delivery/components/left.vue b/src/view/delivery/components/left.vue
index f797fb5..712cc6a 100644
--- a/src/view/delivery/components/left.vue
+++ b/src/view/delivery/components/left.vue
@@ -168,7 +168,7 @@ onMounted(() => {
</div>
</div>
<div>
- <img class="img" src="/src/assets/delivery_img/icon1.png" />
+ <img class="img" src="/src/assets/delivery_img/icon2.png" />
</div>
</div>
</div>
@@ -176,52 +176,52 @@ onMounted(() => {
<div class="order">
<div class="bottom">
<div>
- <img class="img" src="/src/assets/delivery_img/icon1.png" />
+ <img class="img" src="/src/assets/delivery_img/icon4.png" />
</div>
<div class="name">
<div class="name1 b-box">
- <div>商户名称</div>
+ <div>收件人</div>
</div>
<div class="name2">
- <div>天天超市</div>
+ <div>王**</div>
</div>
</div>
<div class="name">
<div class="name1 b-box">
- <div>商品名称</div>
+ <div>收件人电话</div>
</div>
<div class="name2">
- <div>山花纯牛奶100ml</div>
+ <div>159****3366</div>
</div>
</div>
<div>
- <img class="img" src="/src/assets/delivery_img/icon1.png" />
+ <img class="img" src="/src/assets/delivery_img/icon8.png" />
</div>
</div>
</div>
<div class="order">
<div class="bottom">
<div>
- <img class="img" src="/src/assets/delivery_img/icon1.png" />
+ <img class="img" src="/src/assets/delivery_img/icon6.png" />
</div>
<div class="name">
<div class="name1 b-box">
- <div>商户名称</div>
+ <div>收件地址</div>
</div>
<div class="name2">
- <div>天天超市山花纯牛奶</div>
+ <div>泸县草芥幸福小区一号楼10-22</div>
</div>
</div>
<div class="name">
<div class="name1 b-box">
- <div>商品名称</div>
+ <div>当前状态</div>
</div>
<div class="name2">
- <div>山花纯牛奶100ml</div>
+ <div>订单已完成</div>
</div>
</div>
<div>
- <img class="img" src="/src/assets/delivery_img/icon1.png" />
+ <img class="img" src="/src/assets/delivery_img/icon5.png" />
</div>
</div>
</div>
@@ -233,11 +233,11 @@ onMounted(() => {
<div class="delivery">
<div class="left">
<div class="left-item">
- <img class="img" src="/src/assets/delivery_img/icon2.png" />
+ <img class="img" src="/src/assets/delivery_img/icon7.png" />
<div>配送人员<span>里斯</span></div>
</div>
<div class="left-item">
- <img class="img" src="/src/assets/delivery_img/icon2.png" />
+ <img class="img" src="/src/assets/delivery_img/icon3.png" />
<div>配送车辆<span>川E G856Z</span></div>
</div>
</div>
@@ -249,7 +249,7 @@ onMounted(() => {
<style scoped lang="scss">
.box {
- height: 97%;
+ height: 100%;
width: 100%;
padding: 20px 20px;
font-size: 0.8rem;
@@ -257,9 +257,7 @@ onMounted(() => {
flex-direction: column;
justify-content: space-between;
align-items: center;
- & > div {
- width: calc(100% - 40px);
- }
+ box-sizing: border-box;
.title {
width: 100%;
background-image: url(../../../assets/img/title.png);
diff --git a/src/view/delivery/components/right.vue b/src/view/delivery/components/right.vue
index 136f29a..4fe2daa 100644
--- a/src/view/delivery/components/right.vue
+++ b/src/view/delivery/components/right.vue
@@ -19,6 +19,12 @@ const items = reactive([
{ id: 3, text: '莲花池 8' },
{ id: 3, text: '莲花池 8' },
{ id: 3, text: '莲花池 8' },
+ { id: 3, text: '莲花池 8' },
+ { id: 3, text: '莲花池 8' },
+ { id: 3, text: '莲花池 8' },
+ { id: 3, text: '莲花池 8' },
+ { id: 3, text: '莲花池 8' },
+ { id: 3, text: '莲花池 8' },
])
const scrollContainerRef = ref(null);
let timer = null;
@@ -50,8 +56,14 @@ onUnmounted(() => {
<border>
<div class="box">
<div class="title">订单排行榜</div>
- <div class="list">
- <!-- <dv-scroll-board :config="list" style="width: 100%; height: 300px" /> -->
+ <div
+ style="
+ height: calc(100% - 60px);
+ width: 100%;
+ overflow: hidden;
+ position: relative;
+ "
+ >
<div class="scroll-container" ref="scrollContainerRef">
<div
v-for="(item, index) in items"
@@ -85,7 +97,9 @@ onUnmounted(() => {
flex-direction: column;
justify-content: space-between;
align-items: center;
- width: calc(100% - 40px);
+ height: 100%;
+ width: 100%;
+ box-sizing: border-box;
overflow: hidden;
.title {
width: 100%;
@@ -98,16 +112,12 @@ onUnmounted(() => {
font-family: "ifonts";
font-size: 1.2rem;
}
- .list {
- margin-top: 20px;
- width: 100%;
- height: 80%;
- .list-span1 {
- background-color: red;
- }
- }
.scroll-container {
- height: 34rem;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
overflow-y: auto;
/* 隐藏滚动条 */
scrollbar-width: none;
diff --git a/src/view/index/components/centerMap.vue b/src/view/index/components/centerMap.vue
index 0c4a074..f73b589 100644
--- a/src/view/index/components/centerMap.vue
+++ b/src/view/index/components/centerMap.vue
@@ -1,5 +1,5 @@
<script setup>
-import { onMounted, reactive, ref, inject } from "vue";
+import { onMounted, reactive, ref, inject, nextTick } from "vue";
import * as echarts from 'echarts';
import mitt from "@/utils/mitt";
import luxian from "@/assets/json/luxian.json";
@@ -9,13 +9,16 @@ import gulin from "@/assets/json/gulin.json";
import jiangyang from "@/assets/json/jiangyang.json";
import longma from "@/assets/json/longma.json";
import naxi from "@/assets/json/naxi.json";
+import { useAppStore } from "@/store/app.js";
+
+
+const appStore = useAppStore();
const mapType = reactive({
name: '',
json: ''
})
-
const changeType = (name = 'luxian') => {
mapType.name = name;
if (name == 'luxian') mapType.json = luxian;
@@ -26,7 +29,6 @@ const changeType = (name = 'luxian') => {
if (name == 'longma') mapType.json = longma;
if (name == 'naxi') mapType.json = naxi;
}
-changeType()
let dataValue = [
{
@@ -86,6 +88,7 @@ const initDateValue = () => {
const echartsRef = ref(null);
let chart = null;
+
const initMap = () => {
// 基于DOM元素初始化echarts实例
if (chart == null) {
@@ -251,12 +254,20 @@ const initMap = () => {
// 使用配置项显示图表
chart.setOption(option);
}
-mitt.on('map_info', e => {
- console.log(e);
- changeType(e.pinyin);
- initDateValue()
+
+onMounted(() => {
+ changeType(appStore.map_info);
+ initDateValue();
initMap();
+ nextTick(() => {
+ mitt.on('map_info', e => {
+ changeType(e.pinyin);
+ initDateValue();
+ initMap();
+ })
+ })
})
+
</script>
<template>
diff --git a/src/view/index/components/leftItme1.vue b/src/view/index/components/leftItme1.vue
index 9fe8b5a..42d9ee1 100644
--- a/src/view/index/components/leftItme1.vue
+++ b/src/view/index/components/leftItme1.vue
@@ -94,7 +94,7 @@ onMounted(() => {
<div>{{ "〉" }}</div>
</div>
</div>
- <dv-scroll-board :config="list" style="width: 100%; height: 18rem" />
+ <dv-scroll-board :config="list" style="width: 100%; height: 90%" />
</div>
<div class="cylinder">
@@ -135,17 +135,15 @@ onMounted(() => {
<style scoped lang="scss">
.box {
- height: calc(100% - 40px);
+ height: 100%;
width: 100%;
+ box-sizing: border-box;
padding: 20px 20px;
font-size: 0.8rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
- & > div {
- width: calc(100% - 40px);
- }
.title {
width: 100%;
background-image: url(../../../assets/img/title.png);
@@ -217,7 +215,6 @@ onMounted(() => {
width: 100%;
display: flex;
justify-content: space-between;
- margin-top: 20px;
height: 20%;
.cy {
width: 30%;
diff --git a/src/view/index/components/leftItme2.vue b/src/view/index/components/leftItme2.vue
index bac2387..8c770d6 100644
--- a/src/view/index/components/leftItme2.vue
+++ b/src/view/index/components/leftItme2.vue
@@ -29,6 +29,11 @@ const items = reactive([
{ id: 3, text: '莲花池 6' },
{ id: 3, text: '莲花池 7' },
{ id: 3, text: '莲花池 8' },
+ { id: 3, text: '莲花池 8' },
+ { id: 3, text: '莲花池 8' },
+ { id: 3, text: '莲花池 8' },
+ { id: 3, text: '莲花池 8' },
+ { id: 3, text: '莲花池 8' },
])
const scrollContainerRef = ref(null);
let timer = null;
@@ -60,20 +65,33 @@ onUnmounted(() => {
<border>
<div class="box">
<div class="title">订单排行榜</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
+ style="
+ height: calc(100% - 60px);
+ width: 100%;
+ overflow: hidden;
+ position: relative;
+ "
+ >
+ <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 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>
@@ -83,12 +101,14 @@ onUnmounted(() => {
<style scoped lang="scss">
.box {
height: 100%;
+ width: 100%;
font-size: 0.8rem;
display: flex;
flex-direction: column;
- justify-content: space-around;
+ justify-content: space-between;
align-items: center;
- padding: 0 20px;
+ padding: 20px;
+ box-sizing: border-box;
.title {
width: 100%;
@@ -102,8 +122,11 @@ onUnmounted(() => {
font-size: 1.2rem;
}
.scroll-container {
- height: 80%;
- width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
overflow-y: auto;
/* 隐藏滚动条 */
scrollbar-width: none;
diff --git a/src/view/index/components/rightItem1.vue b/src/view/index/components/rightItem1.vue
index 9a501b8..ec75b91 100644
--- a/src/view/index/components/rightItem1.vue
+++ b/src/view/index/components/rightItem1.vue
@@ -55,7 +55,9 @@ import border from "../../../components/border.vue"
flex-direction: column;
justify-content: space-between;
align-items: center;
- width: calc(100% - 40px);
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
overflow: hidden;
.title {
width: 100%;
@@ -70,6 +72,7 @@ import border from "../../../components/border.vue"
margin-bottom: 1rem;
}
.car-box {
+ flex: 1;
width: 100%;
display: flex;
.car {
@@ -90,11 +93,11 @@ import border from "../../../components/border.vue"
}
.list {
flex: 2;
- margin-top: 10px;
+ height: 100%;
.head {
+ height: 33%;
display: flex;
align-items: center;
- padding-bottom: 0.5rem;
padding-left: 0.5rem;
.img {
height: 1rem;
@@ -103,13 +106,14 @@ import border from "../../../components/border.vue"
}
}
.car-list {
+ height: 66%;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
.car-item {
+ height: 50%;
width: 50%;
- height: 3rem;
background-image: url(../../../assets/img/car-item.png);
background-size: 100% 100%;
display: flex;
@@ -119,13 +123,14 @@ import border from "../../../components/border.vue"
}
}
.car-list2 {
+ height: 100%;
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-evenly;
.car-item {
+ height: 33%;
width: 33.33%;
- height: 3rem;
background-image: url(../../../assets/img/car-item.png);
background-size: 100% 100%;
display: flex;
diff --git a/src/view/index/components/rightItem2.vue b/src/view/index/components/rightItem2.vue
index 31ebede..7ca0754 100644
--- a/src/view/index/components/rightItem2.vue
+++ b/src/view/index/components/rightItem2.vue
@@ -19,6 +19,9 @@ const items = reactive([
{ id: 3, text: '莲花池 8' },
{ id: 3, text: '莲花池 8' },
{ id: 3, text: '莲花池 8' },
+ { id: 3, text: '莲花池 8' },
+ { id: 3, text: '莲花池 8' },
+ { id: 3, text: '莲花池 8' },
])
const scrollContainerRef = ref(null);
let timer = null;
@@ -50,8 +53,14 @@ onUnmounted(() => {
<border>
<div class="box">
<div class="title">配送商品排行榜</div>
- <div class="list">
- <!-- <dv-scroll-board :config="list" style="width: 100%; height: 300px" /> -->
+ <div
+ style="
+ height: calc(100% - 60px);
+ width: 100%;
+ overflow: hidden;
+ position: relative;
+ "
+ >
<div class="scroll-container" ref="scrollContainerRef">
<div
v-for="(item, index) in items"
@@ -79,14 +88,16 @@ onUnmounted(() => {
<style scoped lang="scss">
.box {
- padding: 20px;
+ height: 100%;
+ width: 100%;
font-size: 0.8rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
- width: calc(100% - 40px);
- overflow: hidden;
+ padding: 20px;
+ box-sizing: border-box !important;
+
.title {
width: 100%;
background-image: url(../../../assets/img/title.png);
@@ -98,16 +109,12 @@ onUnmounted(() => {
font-family: "ifonts";
font-size: 1.2rem;
}
- .list {
- margin-top: 20px;
- width: 100%;
- height: 80%;
- .list-span1 {
- background-color: red;
- }
- }
.scroll-container {
- height: 36rem;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
overflow-y: auto;
/* 隐藏滚动条 */
scrollbar-width: none;