初始化
This commit is contained in:
commit
38b81da321
|
|
@ -0,0 +1 @@
|
|||
BASE_URL = ''
|
||||
|
|
@ -0,0 +1 @@
|
|||
BASE_URL = ''
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
# Vue 3 + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"name": "trike-datav",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
"echarts": "^5.4.3",
|
||||
"vue": "^3.3.8",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.5.0",
|
||||
"sass": "^1.69.5",
|
||||
"vite": "^5.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,21 @@
|
|||
<script setup>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<dv-full-screen-container class="body">
|
||||
<router-view></router-view>
|
||||
</dv-full-screen-container>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.body {
|
||||
background-image: url("/src/assets/img/bg.png");
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
background-color: rgba($color: #000000, $alpha: 0.8);
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1010 B |
|
|
@ -0,0 +1,7 @@
|
|||
/* src/assets/fonts/dsfont.css */
|
||||
@font-face {
|
||||
font-family: 'ifonts';
|
||||
src: url(./ifonts.ttf);
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 780 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
|
|
@ -0,0 +1,65 @@
|
|||
<script setup>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="border-box">
|
||||
<div class="border-top"></div>
|
||||
<div class="center">
|
||||
<div class="border-left"></div>
|
||||
<div class="box"><slot></slot></div>
|
||||
<div class="border-left"></div>
|
||||
</div>
|
||||
<div class="border-bottom"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.border-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background-color: rgba(0, 156, 255, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.border-top {
|
||||
height: 2px;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
#5bdbf6 12px,
|
||||
transparent 48px,
|
||||
transparent calc(100% - 48px),
|
||||
#5bdbf6 calc(100% - 12px)
|
||||
);
|
||||
}
|
||||
.border-bottom {
|
||||
height: 2px;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
#5bdbf6 12px,
|
||||
transparent 120px,
|
||||
transparent calc(100% - 150px),
|
||||
#5bdbf6 calc(100% - 12px)
|
||||
);
|
||||
}
|
||||
.center {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.border-left {
|
||||
width: 2px;
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
#5bdbf6 12px,
|
||||
transparent 36px,
|
||||
transparent calc(100% - 150px),
|
||||
#5bdbf6 calc(100% - 12px)
|
||||
);
|
||||
}
|
||||
}
|
||||
.box {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<script setup>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="header">
|
||||
<div class="left">
|
||||
<div class="item">2023.11.17</div>
|
||||
<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>
|
||||
<img class="img" src="/src/assets/img/shiler.png" alt="" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-image: url("../assets/img/header.png");
|
||||
background-size: 100% 100%;
|
||||
background-color: rgba($color: #000000, $alpha: 0.8);
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.img {
|
||||
position: absolute;
|
||||
bottom: -10%;
|
||||
left: 50%;
|
||||
z-index: 9999999;
|
||||
width: 50vw;
|
||||
height: 100%;
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
.head-title {
|
||||
/* font-weight: bold; */
|
||||
font-family: "ifonts", sans-serif;
|
||||
font-size: 2rem;
|
||||
height: 100%;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
.left {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
flex: 1;
|
||||
.item {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: right;
|
||||
.item {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<template>
|
||||
<div class="scroll-list">
|
||||
<transition-group name="list-transition" tag="div">
|
||||
<div v-for="(item, index) in items" :key="index" class="list-item">
|
||||
{{ item }}
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
const items = reactive(['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'])
|
||||
const currentIndex = ref(0)// 当前显示的索引
|
||||
const scrollSpeed = ref(1000) // 滚动速度，单位为毫秒
|
||||
|
||||
const startAutoScroll = () => {
|
||||
setInterval(() => {
|
||||
currentIndex.value = (currentIndex.value + 1) % items.length; // 更新当前索引
|
||||
}, scrollSpeed.value);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
startAutoScroll()
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.list-transition-enter-active,
|
||||
.list-transition-leave-active {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.list-transition-enter,
|
||||
.list-transition-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
|
||||
.scroll-list {
|
||||
height: 100px; /* 设置滚动列表容器的高度 */
|
||||
overflow: hidden; /* 隐藏溢出部分 */
|
||||
}
|
||||
|
||||
.list-item {
|
||||
height: 40px; /* 每个列表项的高度 */
|
||||
line-height: 40px; /* 垂直居中文本 */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
import dataV from '@jiaminghi/data-view'
|
||||
import './assets/font/fonts.css';
|
||||
import router from "./router";
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(dataV)
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { createRouter, createWebHistory } from "vue-router"
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'index',
|
||||
component: () => import('../view/index/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/delivery',
|
||||
name: 'delivery',
|
||||
component: () => import('../view/delivery/index.vue')
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory('/'),
|
||||
routes
|
||||
})
|
||||
|
||||
export default router;
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<script setup>
|
||||
import { onMounted, onUnmounted } from "vue";
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
|
||||
let map = null;
|
||||
|
||||
onMounted(() => {
|
||||
AMapLoader.load({
|
||||
key: "f14dcaeb4df441ab84ed0a0768f04f95", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
})
|
||||
.then((AMap) => {
|
||||
map = new AMap.Map("container", {
|
||||
// 设置地图容器id
|
||||
viewMode: "2D", // 是否为3D地图模式
|
||||
zoom: 15, // 初始化地图级别
|
||||
center: [105.441866, 28.87098], // 初始化地图中心点位置
|
||||
mapStyle: "amap://styles/darkblue",
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
map?.destroy();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="container"></div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<script setup>
|
||||
import { onMounted, onUnmounted } from "vue";
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
|
||||
let map = null;
|
||||
|
||||
onMounted(() => {
|
||||
AMapLoader.load({
|
||||
key: "f14dcaeb4df441ab84ed0a0768f04f95", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
})
|
||||
.then((AMap) => {
|
||||
map = new AMap.Map("container_left", {
|
||||
// 设置地图容器id
|
||||
viewMode: "2D", // 是否为3D地图模式
|
||||
zoom: 15, // 初始化地图级别
|
||||
center: [105.441866, 28.87098], // 初始化地图中心点位置
|
||||
mapStyle: "amap://styles/darkblue",
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
map?.destroy();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="container_left"></div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#container_left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<script setup>
|
||||
import { reactive, ref } from "vue"
|
||||
import border from "@/components/border.vue";
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<border>
|
||||
<div class="box">
|
||||
<div class="title">配送详情</div>
|
||||
<div class="body-box">
|
||||
<div class="left">
|
||||
<div class="top">
|
||||
<div class="view" v-for="(item, index) in 4" :key="index">
|
||||
<div class="num">
|
||||
<div>6</div>
|
||||
<div>,</div>
|
||||
<div>5</div>
|
||||
<div>8</div>
|
||||
<div>1</div>
|
||||
</div>
|
||||
<div>今日订单</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</border>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
height: 92%;
|
||||
width: 100%;
|
||||
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/title3.png);
|
||||
background-size: 100% 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: "ifonts";
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.body-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.left {
|
||||
width: 60%;
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
height: 25%;
|
||||
margin-top: 1rem;
|
||||
.view {
|
||||
width: 21%;
|
||||
height: 100%;
|
||||
background-image: url(../../../assets/delivery_img/box4.png);
|
||||
background-size: 100% 100%;
|
||||
font-size: 1.2rem;
|
||||
font-family: "ifonts";
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
.num {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
div {
|
||||
width: 1.5rem;
|
||||
height: 1.8rem;
|
||||
background-image: url(../../../assets/delivery_img/icon_num.png);
|
||||
background-size: 100% 100%;
|
||||
margin: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 38%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<script setup>
|
||||
import { reactive, ref } from "vue"
|
||||
import border from "@/components/border.vue";
|
||||
|
||||
import AMap from "./AMap.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="map">
|
||||
<AMap></AMap>
|
||||
</div>
|
||||
<div class="border"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.border {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid rgba(91, 219, 246, 1);
|
||||
box-shadow: inset 1px 1px 40px rgba(91, 219, 246, 0.5);
|
||||
pointer-events: none;
|
||||
}
|
||||
.map {
|
||||
height: 98%;
|
||||
width: 100%;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,394 @@
|
|||
<script setup>
|
||||
import { onMounted, reactive, ref } from "vue"
|
||||
import border from "@/components/border.vue";
|
||||
import AMapLeft from "./AMapLeft.vue";
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
|
||||
var fontColor = "#000";
|
||||
var seriesName = "";
|
||||
let noramlSize = 16;
|
||||
var datas = {
|
||||
textValue: "100%",
|
||||
colors: ["#31829d", "#009cff", "#4b5fdb"],
|
||||
legendArr: ["待取货", "待配送", "已送达"],
|
||||
dataArr: [
|
||||
{ value: 335, name: "待取货" },
|
||||
{ value: 210, name: "待配送" },
|
||||
{ value: 410, name: "已送达" },
|
||||
],
|
||||
company: "个"
|
||||
};
|
||||
const option = {
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
color: datas.colors,
|
||||
grid: {
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
bottom: "0%",
|
||||
top: "0%"
|
||||
},
|
||||
graphic: {
|
||||
elements: [
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center', // 相对父元素居中
|
||||
bottom: '50%', // 相对父元素居中
|
||||
style: {
|
||||
fill: '#fff',
|
||||
text: datas.textValue,
|
||||
font: '18px Microsoft YaHei'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "#f6f6f6",
|
||||
textStyle: {
|
||||
color: "#000"
|
||||
},
|
||||
formatter: "{b}: {c}" + datas.company + " ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
icon: "rect",
|
||||
bottom: "5%",
|
||||
left: "center",
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
// itemGap: 50, //图例间隙
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: noramlSize
|
||||
},
|
||||
data: datas.legendArr
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: ["45%", "60%"],
|
||||
center: ["50%", "45%"],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 10,
|
||||
borderColor: "#092846"
|
||||
}
|
||||
},
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'bottom'
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#138af4"
|
||||
},
|
||||
length: 20,
|
||||
length2: 50,
|
||||
}
|
||||
},
|
||||
data: datas.dataArr
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: "40%",
|
||||
center: ["50%", "45%"],
|
||||
z: -2,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
},
|
||||
data: [100]
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
const echartsRef = ref(null)
|
||||
|
||||
const initEcahrts = () => {
|
||||
// 基于DOM元素初始化echarts实例
|
||||
const chart = echarts.init(echartsRef.value);
|
||||
|
||||
// 使用配置项显示图表
|
||||
chart.setOption(option);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initEcahrts()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<border>
|
||||
<div class="box">
|
||||
<div class="title">配送详情</div>
|
||||
<div class="head-box b-box">商品信息</div>
|
||||
<div class="order">
|
||||
<div class="top">
|
||||
<div>
|
||||
订单编号
|
||||
<span style="margin-left: 1rem"
|
||||
>bzj20230923163643650ea39ba256c</span
|
||||
>
|
||||
</div>
|
||||
<div>23-11-20</div>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="c"></div>
|
||||
<div class="l"></div>
|
||||
<div class="c"></div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div>
|
||||
<img class="img" src="/src/assets/delivery_img/icon1.png" />
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="name1 b-box">
|
||||
<div>商户名称</div>
|
||||
</div>
|
||||
<div class="name2">
|
||||
<div>天天超市</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="name1 b-box">
|
||||
<div>商品名称</div>
|
||||
</div>
|
||||
<div class="name2">
|
||||
<div>山花纯牛奶100ml</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img class="img" src="/src/assets/delivery_img/icon1.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="head-box b-box">收件人信息</div>
|
||||
<div class="order">
|
||||
<div class="bottom">
|
||||
<div>
|
||||
<img class="img" src="/src/assets/delivery_img/icon1.png" />
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="name1 b-box">
|
||||
<div>商户名称</div>
|
||||
</div>
|
||||
<div class="name2">
|
||||
<div>天天超市</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="name1 b-box">
|
||||
<div>商品名称</div>
|
||||
</div>
|
||||
<div class="name2">
|
||||
<div>山花纯牛奶100ml</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img class="img" src="/src/assets/delivery_img/icon1.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order">
|
||||
<div class="bottom">
|
||||
<div>
|
||||
<img class="img" src="/src/assets/delivery_img/icon1.png" />
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="name1 b-box">
|
||||
<div>商户名称</div>
|
||||
</div>
|
||||
<div class="name2">
|
||||
<div>天天超市山花纯牛奶</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="name1 b-box">
|
||||
<div>商品名称</div>
|
||||
</div>
|
||||
<div class="name2">
|
||||
<div>山花纯牛奶100ml</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img class="img" src="/src/assets/delivery_img/icon1.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map">
|
||||
<AMapLeft></AMapLeft>
|
||||
<div class="border"></div>
|
||||
</div>
|
||||
<div class="head-box b-box">物流信息</div>
|
||||
<div class="delivery">
|
||||
<div class="left">
|
||||
<div class="left-item">
|
||||
<img class="img" src="/src/assets/delivery_img/icon2.png" />
|
||||
<div>配送人员<span>里斯</span></div>
|
||||
</div>
|
||||
<div class="left-item">
|
||||
<img class="img" src="/src/assets/delivery_img/icon2.png" />
|
||||
<div>配送车辆<span>川E G856Z</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right echarts" ref="echartsRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</border>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
height: 97%;
|
||||
width: 100%;
|
||||
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);
|
||||
background-size: 100% 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: "ifonts";
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.head-box {
|
||||
font-size: 1.2rem;
|
||||
font-family: "ifonts";
|
||||
width: calc(100% - 1rem);
|
||||
text-align: left;
|
||||
padding: 0.5rem 0;
|
||||
padding-left: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.order {
|
||||
width: 100%;
|
||||
background-image: url(../../../assets/delivery_img/box3.png);
|
||||
background-size: 100% 100%;
|
||||
.top {
|
||||
width: calc(100% - 40px);
|
||||
padding: 20px;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.line {
|
||||
display: flex;
|
||||
width: calc(100% - 40px);
|
||||
padding: 0 20px;
|
||||
align-items: center;
|
||||
.c {
|
||||
width: 0.2rem;
|
||||
height: 0.2rem;
|
||||
background-color: #5bdbf6;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.l {
|
||||
flex: 1;
|
||||
height: 0.1rem;
|
||||
background-color: #5bdbf6;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
width: calc(100% - 60px);
|
||||
padding: 20px 30px 30px 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.img {
|
||||
height: 4rem;
|
||||
width: 3.5rem;
|
||||
}
|
||||
.name {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.map {
|
||||
height: 12rem;
|
||||
width: 90%;
|
||||
margin: 0.5rem 0;
|
||||
border: 1px solid rgba(91, 219, 246, 1);
|
||||
position: relative;
|
||||
.border {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: inset 1px 1px 40px rgba(91, 219, 246, 0.5);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.delivery {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.left {
|
||||
flex: 1;
|
||||
.left-item {
|
||||
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%;
|
||||
.img {
|
||||
height: 4rem;
|
||||
width: 3.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
span {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.b-box {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(59, 74, 104, 0) 0%,
|
||||
rgba(59, 74, 104, 0.27) 50%,
|
||||
rgba(0, 168, 255, 0.4) 94%,
|
||||
rgba(0, 156, 255, 0.8) 100%
|
||||
);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
<script setup>
|
||||
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
|
||||
import border from "../../../components/border.vue"
|
||||
const items = reactive([
|
||||
{ id: 1, text: '莲花池 1' },
|
||||
{ id: 2, text: '莲花池 2' },
|
||||
{ id: 3, text: '莲花池 3' },
|
||||
{ id: 3, text: '莲花池 4' },
|
||||
{ id: 3, text: '莲花池 5' },
|
||||
{ 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' },
|
||||
{ id: 3, text: '莲花池 8' },
|
||||
{ id: 3, text: '莲花池 8' },
|
||||
{ id: 3, text: '莲花池 8' },
|
||||
{ id: 3, text: '莲花池 8' },
|
||||
])
|
||||
const scrollContainerRef = ref(null);
|
||||
let timer = null;
|
||||
const autoScroll = () => {
|
||||
setTimeout(() => {
|
||||
timer = setInterval(() => {
|
||||
if (scrollContainerRef.value) {
|
||||
scrollContainerRef.value.scrollTop += 1;
|
||||
if (scrollContainerRef.value.scrollTop + scrollContainerRef.value.clientHeight >= scrollContainerRef.value.scrollHeight - 1) {
|
||||
scrollContainerRef.value.scrollTop = 0;
|
||||
clearInterval(timer);
|
||||
autoScroll();
|
||||
}
|
||||
}
|
||||
}, 50)
|
||||
}, 1000)
|
||||
}
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
autoScroll();
|
||||
})
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</border>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
padding: 20px;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
.title {
|
||||
width: 100%;
|
||||
background-image: url(../../../assets/img/title.png);
|
||||
background-size: 100% 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: "ifonts";
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.list {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
.list-span1 {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
.scroll-container {
|
||||
height: 34rem;
|
||||
overflow-y: auto;
|
||||
/* 隐藏滚动条 */
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.b-list-item {
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
.rank {
|
||||
width: 50px;
|
||||
height: 1.5em;
|
||||
}
|
||||
.rank1 {
|
||||
background-image: url(../../../assets/img/ranking1.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.rank2 {
|
||||
background-image: url(../../../assets/img/ranking2.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.name {
|
||||
flex: 5;
|
||||
}
|
||||
.line {
|
||||
width: 50%;
|
||||
height: 0.8rem;
|
||||
background-color: #0a385b;
|
||||
border-radius: 0.8rem;
|
||||
.line-body {
|
||||
height: 100%;
|
||||
border-radius: 0.8rem;
|
||||
width: 0%;
|
||||
background: linear-gradient(270deg, #00c0fe 0%, #0f87fa 100%);
|
||||
}
|
||||
.line-body2 {
|
||||
background: linear-gradient(270deg, #5bdbf6 0%, #5bdbf6 100%);
|
||||
}
|
||||
}
|
||||
.count {
|
||||
flex: 2;
|
||||
font-size: 1rem;
|
||||
font-family: "ifonts";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<script setup>
|
||||
import headView from "@/components/headView.vue";
|
||||
import border from "@/components/border.vue";
|
||||
import leftItem from "./components/left.vue";
|
||||
import centerItem from "./components/center.vue";
|
||||
import bottomItem from "./components/bottom.vue";
|
||||
import rightItem from "./components/right.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<headView></headView>
|
||||
<div class="center">
|
||||
<div class="item">
|
||||
<leftItem style="height: 98%"></leftItem>
|
||||
</div>
|
||||
<div class="item item_c">
|
||||
<div style="height: 61%; display: flex; justify-content: space-between">
|
||||
<centerItem style="width: 64%"></centerItem>
|
||||
<rightItem style="width: 35%"></rightItem>
|
||||
</div>
|
||||
<bottomItem style="height: 36%"></bottomItem>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.center {
|
||||
display: flex;
|
||||
height: calc(100% - 60px);
|
||||
justify-content: space-evenly;
|
||||
.item {
|
||||
width: 26%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-content: center;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.item_c {
|
||||
width: 72%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="ball"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.ball {
|
||||
width: 40rem;
|
||||
height: 40rem;
|
||||
background-image: url(../../../assets/img/ball.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,236 @@
|
|||
<script setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import * as echarts from 'echarts';
|
||||
import border from "../../../components/border.vue"
|
||||
const xData2 = reactive(["福集镇", "嘉明镇", "喻寺镇", "得胜镇", "牛滩镇", "兆雅镇",
|
||||
"太伏镇", "云龙镇", "石桥镇", "毗卢镇", "奇峰镇", "潮河镇", "云锦镇"]);
|
||||
const data1 = reactive([200, 100, 200, 200, 100, 120, 150, 164, 153, 140, 255, 284, 230]);
|
||||
const data_bottom = reactive([]);
|
||||
|
||||
const option = reactive({
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: 'rgba(91, 219, 246, 0.7)',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 60,
|
||||
bottom: 50
|
||||
},
|
||||
xAxis: {
|
||||
data: xData2,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
},
|
||||
margin: 20, //刻度标签与轴线之间的距离。
|
||||
},
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 156, 255, 0.10)' // 设置分隔线颜色
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
},
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{//三个最低下的圆片
|
||||
"name": "",
|
||||
"type": "pictorialBar",
|
||||
"symbolSize": [10, 4],
|
||||
"symbolOffset": [0, 2],
|
||||
"z": 12,
|
||||
itemStyle: {
|
||||
opacity: 1,
|
||||
color: function (params) {
|
||||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#0E60B2' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#5BDBF6'// 100% 处的颜色
|
||||
}], false)
|
||||
}
|
||||
},
|
||||
"data": data_bottom
|
||||
},
|
||||
|
||||
|
||||
//下半截柱状图
|
||||
{
|
||||
name: '2020',
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
barGap: '-100%',
|
||||
itemStyle: {//lenged文本
|
||||
opacity: .7,
|
||||
color: function (params) {
|
||||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#0E60B2' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#5BDBF6'// 100% 处的颜色
|
||||
}], false)
|
||||
}
|
||||
},
|
||||
|
||||
data: data1
|
||||
},
|
||||
|
||||
{ // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
barGap: '-100%',
|
||||
stack: '广告',
|
||||
itemStyle: {
|
||||
color: 'transparent'
|
||||
},
|
||||
data: data1
|
||||
},
|
||||
|
||||
{
|
||||
"name": "",
|
||||
"type": "pictorialBar",
|
||||
"symbolSize": [10, 4],
|
||||
"symbolOffset": [0, -2],
|
||||
"z": 12,
|
||||
itemStyle: {
|
||||
opacity: 1,
|
||||
color: function (params) {
|
||||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#0E60B2' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#5BDBF6'// 100% 处的颜色
|
||||
}], false)
|
||||
}
|
||||
},
|
||||
"symbolPosition": "end",
|
||||
"data": data1
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
})
|
||||
|
||||
const echartsRef = ref(null);
|
||||
const initMap = () => {
|
||||
|
||||
// 基于DOM元素初始化echarts实例
|
||||
const chart = echarts.init(echartsRef.value);
|
||||
|
||||
data1.forEach(item => {
|
||||
data_bottom.push(1)
|
||||
})
|
||||
|
||||
// 使用配置项显示图表
|
||||
chart.setOption(option);
|
||||
}
|
||||
onMounted(() => {
|
||||
initMap()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<border>
|
||||
<div class="box">
|
||||
<div class="title">订单总数</div>
|
||||
<div class="box-c">
|
||||
<div class="left">
|
||||
<div class="img">
|
||||
<div class="text">61258</div>
|
||||
</div>
|
||||
<div>订单总数</div>
|
||||
</div>
|
||||
<div class="map" ref="echartsRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</border>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
height: 88%;
|
||||
padding: 20px;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: calc(100% - 40px);
|
||||
.title {
|
||||
width: 100%;
|
||||
background-image: url(../../../assets/img/title2.png);
|
||||
background-size: 100% 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: "ifonts";
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.box-c {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: calc(100% - 80px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left {
|
||||
width: 11rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
.img {
|
||||
color: #5bdbf6;
|
||||
font-family: "ifonts";
|
||||
width: 10.2rem;
|
||||
height: 10.5rem;
|
||||
background-image: url(../../../assets/img/order_ball.png);
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
margin-top: 2rem;
|
||||
.text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding-bottom: 2rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.map {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,230 @@
|
|||
<script setup>
|
||||
import { reactive, ref } from "vue"
|
||||
import border from "../../../components/border.vue"
|
||||
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.76)',
|
||||
oddRowBGC: 'rgba(91, 219, 246, 0.20)',
|
||||
evenRowBGC: 'rgba(0, 168, 255, 0.16)',
|
||||
// columnWidth: [50],
|
||||
align: ['center'],
|
||||
rowNum: 7
|
||||
})
|
||||
const cell1 = reactive({
|
||||
value: 66,
|
||||
label: '66.66%',
|
||||
count: 66542,
|
||||
borderWidth: 1,
|
||||
borderGap: 1,
|
||||
borderRadius: 3,
|
||||
colors: ['#66FFFF', '#FEDB65']
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<border>
|
||||
<div class="box">
|
||||
<div class="title">今日订单数</div>
|
||||
<div class="my-day-num">
|
||||
<div class="my-num-item">0</div>
|
||||
<div class="my-num-item">0</div>
|
||||
<div class="my-num-item">5</div>
|
||||
<div class="my-num-item">2</div>
|
||||
<div class="my-num-item">4</div>
|
||||
<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>
|
||||
<div class="item">
|
||||
<div>查看更多</div>
|
||||
<div>{{ "〉" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<dv-scroll-board :config="list" style="width: 100%; height: 18rem" />
|
||||
</div>
|
||||
|
||||
<div class="cylinder">
|
||||
<div class="cy">
|
||||
<div class="text">
|
||||
<div class="top">
|
||||
已完成<span class="sapn">{{ cell1.label }}</span>
|
||||
</div>
|
||||
<div class="num">{{ cell1.count }}</div>
|
||||
</div>
|
||||
<dv-percent-pond :config="cell1" class="cell" />
|
||||
<div class="type">待取货订单数</div>
|
||||
</div>
|
||||
<div class="cy">
|
||||
<div class="text">
|
||||
<div>
|
||||
已完成<span class="sapn">{{ cell1.label }}</span>
|
||||
</div>
|
||||
<div class="num">{{ cell1.count }}</div>
|
||||
</div>
|
||||
<dv-percent-pond :config="cell1" class="cell" />
|
||||
<div class="type">未配送订单数</div>
|
||||
</div>
|
||||
<div class="cy">
|
||||
<div class="text">
|
||||
<div>
|
||||
已完成<span class="sapn">{{ cell1.label }}</span>
|
||||
</div>
|
||||
<div class="num">{{ cell1.count }}</div>
|
||||
</div>
|
||||
<dv-percent-pond :config="cell1" class="cell" />
|
||||
<div class="type">已完成订单数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</border>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
height: 92%;
|
||||
width: 100%;
|
||||
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);
|
||||
background-size: 100% 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: "ifonts";
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.my-day-num {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
.my-num-item {
|
||||
margin-right: 10px;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
background-image: url(../../../assets/img/day_num.png);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 2.2rem;
|
||||
font-family: "ifonts";
|
||||
}
|
||||
}
|
||||
.order-list {
|
||||
height: 55%;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
.head {
|
||||
/* width: 100%; */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
& > div {
|
||||
margin: 5px;
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .dv-scroll-board .rows .row-item {
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
}
|
||||
.cylinder {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
height: 20%;
|
||||
.cy {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
background-image: url(../../../assets/img/cylinder.png);
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
.text {
|
||||
height: 70%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.top {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.num {
|
||||
font-size: 1.5rem;
|
||||
font-family: "ifonts";
|
||||
}
|
||||
.sapn {
|
||||
color: #fee165;
|
||||
}
|
||||
}
|
||||
.type {
|
||||
height: 30%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.cell {
|
||||
transform: rotate(-90deg);
|
||||
width: 3rem;
|
||||
height: 1rem;
|
||||
position: absolute;
|
||||
right: -0.5rem;
|
||||
top: 2rem;
|
||||
}
|
||||
::v-deep .dv-percent-pond text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
<script setup>
|
||||
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
|
||||
import border from "../../../components/border.vue"
|
||||
const list = reactive({
|
||||
data: [
|
||||
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
||||
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
||||
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
||||
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
||||
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
||||
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
||||
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
||||
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
||||
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
||||
],
|
||||
// index: true,
|
||||
headerBGC: 'rgba(0, 168, 255, 0)',
|
||||
oddRowBGC: 'rgba(91, 219, 246, 0)',
|
||||
evenRowBGC: 'rgba(0, 168, 255, 0)',
|
||||
// columnWidth: [50],
|
||||
align: ['center']
|
||||
})
|
||||
const items = reactive([
|
||||
{ id: 1, text: '莲花池 1' },
|
||||
{ id: 2, text: '莲花池 2' },
|
||||
{ id: 3, text: '莲花池 3' },
|
||||
{ id: 3, text: '莲花池 4' },
|
||||
{ id: 3, text: '莲花池 5' },
|
||||
{ id: 3, text: '莲花池 6' },
|
||||
{ id: 3, text: '莲花池 7' },
|
||||
{ id: 3, text: '莲花池 8' },
|
||||
])
|
||||
const scrollContainerRef = ref(null);
|
||||
let timer = null;
|
||||
const autoScroll = () => {
|
||||
setTimeout(() => {
|
||||
timer = setInterval(() => {
|
||||
if (scrollContainerRef.value) {
|
||||
scrollContainerRef.value.scrollTop += 1;
|
||||
if (scrollContainerRef.value.scrollTop + scrollContainerRef.value.clientHeight >= scrollContainerRef.value.scrollHeight - 1) {
|
||||
scrollContainerRef.value.scrollTop = 0;
|
||||
clearInterval(timer);
|
||||
autoScroll();
|
||||
}
|
||||
}
|
||||
}, 50)
|
||||
}, 1000)
|
||||
}
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
autoScroll();
|
||||
})
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</border>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
padding: 20px;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: calc(100% - 40px);
|
||||
.title {
|
||||
width: 100%;
|
||||
background-image: url(../../../assets/img/title.png);
|
||||
background-size: 100% 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: "ifonts";
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.list {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
.list-span1 {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
.scroll-container {
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
/* 隐藏滚动条 */
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.b-list-item {
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
.rank {
|
||||
width: 50px;
|
||||
height: 1.5em;
|
||||
}
|
||||
.rank1 {
|
||||
background-image: url(../../../assets/img/ranking1.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.rank2 {
|
||||
background-image: url(../../../assets/img/ranking2.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.name {
|
||||
flex: 5;
|
||||
}
|
||||
.line {
|
||||
width: 50%;
|
||||
height: 0.8rem;
|
||||
background-color: #0a385b;
|
||||
border-radius: 0.8rem;
|
||||
.line-body {
|
||||
height: 100%;
|
||||
border-radius: 0.8rem;
|
||||
width: 0%;
|
||||
background: linear-gradient(270deg, #00c0fe 0%, #0f87fa 100%);
|
||||
}
|
||||
.line-body2 {
|
||||
background: linear-gradient(270deg, #5bdbf6 0%, #5bdbf6 100%);
|
||||
}
|
||||
}
|
||||
.count {
|
||||
flex: 2;
|
||||
font-size: 1rem;
|
||||
font-family: "ifonts";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
<script setup>
|
||||
import border from "../../../components/border.vue"
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<border>
|
||||
<div class="box">
|
||||
<div class="title">三轮车列表</div>
|
||||
<div class="car-box">
|
||||
<div class="car">
|
||||
<div class="count">13</div>
|
||||
<div class="name">三轮车总数</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="head">
|
||||
<img class="img" src="/src/assets/img/item.png" />
|
||||
<div>三轮车投放</div>
|
||||
</div>
|
||||
<div class="car-list">
|
||||
<div
|
||||
class="car-item"
|
||||
:class="{ 'car-item2': index > 1 }"
|
||||
v-for="(item, index) in 4"
|
||||
:key="index"
|
||||
>
|
||||
<img class="img" src="/src/assets/img/icon-car.png" />
|
||||
<div>川A E792P</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="car-box">
|
||||
<div class="car-list2">
|
||||
<div
|
||||
class="car-item"
|
||||
:class="{ 'car-item2': index > 2 && index < 5 }"
|
||||
v-for="(item, index) in 9"
|
||||
:key="index"
|
||||
>
|
||||
<img class="img" src="/src/assets/img/icon-car.png" />
|
||||
<div>川A E792P</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</border>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
padding: 20px;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
.title {
|
||||
width: 100%;
|
||||
background-image: url(../../../assets/img/title.png);
|
||||
background-size: 100% 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: "ifonts";
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.car-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.car {
|
||||
flex: 1;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 1rem;
|
||||
.count {
|
||||
flex: 1;
|
||||
background-image: url(../../../assets/img/car.png);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
flex: 2;
|
||||
margin-top: 10px;
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
.img {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
.car-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
.car-item {
|
||||
width: 50%;
|
||||
height: 3rem;
|
||||
background-image: url(../../../assets/img/car-item.png);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.car-list2 {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
.car-item {
|
||||
width: 33.33%;
|
||||
height: 3rem;
|
||||
background-image: url(../../../assets/img/car-item.png);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.car-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.img {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
}
|
||||
.car-item2 {
|
||||
background-image: url(../../../assets/img/car-item2.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
<script setup>
|
||||
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
|
||||
import border from "../../../components/border.vue"
|
||||
const items = reactive([
|
||||
{ id: 1, text: '莲花池 1' },
|
||||
{ id: 2, text: '莲花池 2' },
|
||||
{ id: 3, text: '莲花池 3' },
|
||||
{ id: 3, text: '莲花池 4' },
|
||||
{ id: 3, text: '莲花池 5' },
|
||||
{ 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' },
|
||||
{ id: 3, text: '莲花池 8' },
|
||||
{ id: 3, text: '莲花池 8' },
|
||||
{ id: 3, text: '莲花池 8' },
|
||||
{ id: 3, text: '莲花池 8' },
|
||||
])
|
||||
const scrollContainerRef = ref(null);
|
||||
let timer = null;
|
||||
const autoScroll = () => {
|
||||
setTimeout(() => {
|
||||
timer = setInterval(() => {
|
||||
if (scrollContainerRef.value) {
|
||||
scrollContainerRef.value.scrollTop += 1;
|
||||
if (scrollContainerRef.value.scrollTop + scrollContainerRef.value.clientHeight >= scrollContainerRef.value.scrollHeight - 1) {
|
||||
scrollContainerRef.value.scrollTop = 0;
|
||||
clearInterval(timer);
|
||||
autoScroll();
|
||||
}
|
||||
}
|
||||
}, 50)
|
||||
}, 1000)
|
||||
}
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
autoScroll();
|
||||
})
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</border>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
padding: 20px;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
.title {
|
||||
width: 100%;
|
||||
background-image: url(../../../assets/img/title.png);
|
||||
background-size: 100% 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: "ifonts";
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.list {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
.list-span1 {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
.scroll-container {
|
||||
height: 36rem;
|
||||
overflow-y: auto;
|
||||
/* 隐藏滚动条 */
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.b-list-item {
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
.rank {
|
||||
width: 50px;
|
||||
height: 1.5em;
|
||||
}
|
||||
.rank1 {
|
||||
background-image: url(../../../assets/img/ranking1.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.rank2 {
|
||||
background-image: url(../../../assets/img/ranking2.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.name {
|
||||
flex: 5;
|
||||
}
|
||||
.line {
|
||||
width: 50%;
|
||||
height: 0.8rem;
|
||||
background-color: #0a385b;
|
||||
border-radius: 0.8rem;
|
||||
.line-body {
|
||||
height: 100%;
|
||||
border-radius: 0.8rem;
|
||||
width: 0%;
|
||||
background: linear-gradient(270deg, #00c0fe 0%, #0f87fa 100%);
|
||||
}
|
||||
.line-body2 {
|
||||
background: linear-gradient(270deg, #5bdbf6 0%, #5bdbf6 100%);
|
||||
}
|
||||
}
|
||||
.count {
|
||||
flex: 2;
|
||||
font-size: 1rem;
|
||||
font-family: "ifonts";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<script setup>
|
||||
import headView from "@/components/headView.vue";
|
||||
import leftItme1 from "./components/leftItme1.vue";
|
||||
import leftItme2 from "./components/leftItme2.vue";
|
||||
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>
|
||||
<headView></headView>
|
||||
<div class="center">
|
||||
<div class="item">
|
||||
<leftItme1 style="height: 58%"></leftItme1>
|
||||
<leftItme2 style="height: 38%"></leftItme2>
|
||||
</div>
|
||||
<div class="item item_c">
|
||||
<centerItme1 style="height: 66%"></centerItme1>
|
||||
<centerItme2 style="height: 32%"></centerItme2>
|
||||
</div>
|
||||
<div class="item">
|
||||
<rightItem1 style="height: 35%"></rightItem1>
|
||||
<rightItem2 style="height: 63%"></rightItem2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.center {
|
||||
display: flex;
|
||||
height: calc(100% - 60px);
|
||||
justify-content: space-evenly;
|
||||
.item {
|
||||
width: 26%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-content: center;
|
||||
/* border: 1px solid red; */
|
||||
& > .div {
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
.item_c {
|
||||
width: 44%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import path from 'path';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
// ... 省略其他配置
|
||||
optimizeDeps: {
|
||||
// 开发时 解决这些commonjs包转成esm包
|
||||
include: [
|
||||
"@jiaminghi/c-render",
|
||||
"@jiaminghi/c-render/lib/plugin/util",
|
||||
"@jiaminghi/charts/lib/util/index",
|
||||
"@jiaminghi/charts/lib/util",
|
||||
"@jiaminghi/charts/lib/extend/index",
|
||||
"@jiaminghi/charts",
|
||||
"@jiaminghi/color",
|
||||
],
|
||||
},
|
||||
build: {
|
||||
// 打包时需要另外处理的commonjs规范的包
|
||||
commonjsOptions: {
|
||||
include: [
|
||||
/node_modules/, // 必须包含
|
||||
],
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src')
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue