feat：完善页面样式和功能
This commit is contained in:
zjc
BIN
src/assets/images/back.png
Normal file
BIN
src/assets/images/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 752 B |
@@ -3,56 +3,37 @@
|
||||
<div class="top-box">
|
||||
<div class="title">融合通信</div>
|
||||
<div class="icon-box flex">
|
||||
<div class="item"><img src="/src/assets/images/r-icon-1.png" alt="" /> 白帝城 </div>
|
||||
<div class="item"><img src="/src/assets/images/r-icon-2.png" alt="" />三峡之颠</div>
|
||||
<div class="item"><img src="/src/assets/images/r-icon-3.png" alt="" />龙桥河</div>
|
||||
<div class="item"><img src="/src/assets/images/r-icon-4.png" alt="" />消防队</div>
|
||||
<div class="item"><img src="/src/assets/images/r-icon-5.png" alt="" />文旅城</div>
|
||||
<div class="item"><img src="/src/assets/images/r-icon-6.png" alt="" />交通城</div>
|
||||
<div class="item"><img src="/src/assets/images/r-icon-1.png" />白帝城</div>
|
||||
<div class="item"><img src="/src/assets/images/r-icon-2.png" />三峡之颠</div>
|
||||
<div class="item"><img src="/src/assets/images/r-icon-3.png" />龙桥河</div>
|
||||
<div class="item"><img src="/src/assets/images/r-icon-4.png" />消防队</div>
|
||||
<div class="item"><img src="/src/assets/images/r-icon-5.png" />文旅城</div>
|
||||
<div class="item"><img src="/src/assets/images/r-icon-6.png" />交通城</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bom-box">
|
||||
<div class="title">
|
||||
<span>最近联系</span>
|
||||
<Title2 title="最近联系" />
|
||||
<div class="table">
|
||||
<div class="header">
|
||||
<div>人员姓名</div>
|
||||
<div>部门</div>
|
||||
<div>职位</div>
|
||||
<div>时间</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item" v-for="(item, index) in 10" :key="index">
|
||||
<div>January</div>
|
||||
<div>消防队</div>
|
||||
<div>消防员</div>
|
||||
<div>消防员</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table">
|
||||
<tr class="tr-th">
|
||||
<th>人员姓名</th>
|
||||
<th>部门</th>
|
||||
<th>职位</th>
|
||||
<th>时间</th>
|
||||
</tr>
|
||||
<tr class="tr-td">
|
||||
<td>January</td>
|
||||
<td>$100</td>
|
||||
<td>January</td>
|
||||
<td>$100</td>
|
||||
</tr>
|
||||
<tr class="tr-td">
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
</tr>
|
||||
<tr class="tr-td">
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
</tr>
|
||||
<tr class="tr-td">
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
const props = defineProps({
|
||||
width: {
|
||||
type: Number,
|
||||
@@ -67,57 +48,73 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-4-content {
|
||||
width: vw(300);
|
||||
height: vh(1060);
|
||||
background-image: url('/src/assets/images/rt-bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
margin-top: vh(10);
|
||||
margin-left: vw(10);
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
width: vw(300);
|
||||
height: vh(1060);
|
||||
background-image: url('@/assets/images/bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
.bom-box {
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-top: vh(5);
|
||||
.tr-th {
|
||||
background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
// border: 1px solid;
|
||||
border-image: linear-gradient(180deg, rgba(0, 150, 255, 0), rgba(0, 150, 255, 1)) 1 1;
|
||||
.header {
|
||||
height: vh(28);
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
color: #0096ff;
|
||||
line-height: vh(14);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
||||
th {
|
||||
padding: vw(5);
|
||||
display: flex;
|
||||
background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
|
||||
& > div {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.tr-td {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #f1f7ff;
|
||||
line-height: vh(16);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
||||
td {
|
||||
padding: vh(5) vw(10);
|
||||
.list {
|
||||
overflow-y: auto;
|
||||
height: vh(490);
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(4); /* 滚动条的宽度 */
|
||||
}
|
||||
/* 滚动条轨道 */
|
||||
&::-webkit-scrollbar-track {
|
||||
background: 'transparent'; /* 轨道的背景色 */
|
||||
}
|
||||
/* 滚动条滑块 */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
||||
border-radius: 5px; /* 滑块的圆角 */
|
||||
}
|
||||
.item {
|
||||
height: vh(50);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #f1f7ff;
|
||||
display: flex;
|
||||
&:nth-child(2n + 1) {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 150, 255, 0) 0%,
|
||||
rgba(0, 150, 255, 0.22) 100%
|
||||
);
|
||||
}
|
||||
& > div {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap; /* 保证文本在一行内显示 */
|
||||
overflow: hidden; /* 隐藏溢出的内容 */
|
||||
text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
|
||||
}
|
||||
}
|
||||
}
|
||||
.tr-td:nth-child(odd) {
|
||||
background: linear-gradient(90deg, rgba(0, 150, 255, 0) 0%, rgba(0, 150, 255, 0.22) 100%);
|
||||
}
|
||||
}
|
||||
.title {
|
||||
background-image: url('/src/assets/images/nav-l-t-bg.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
span {
|
||||
margin-left: vw(30);
|
||||
font-weight: 800;
|
||||
@@ -143,11 +140,9 @@
|
||||
color: #ffffff;
|
||||
line-height: vh(16);
|
||||
flex-wrap: wrap;
|
||||
// margin-left: vw(20);
|
||||
.item {
|
||||
width:33.33%;
|
||||
width: 33.33%;
|
||||
margin-top: vh(40);
|
||||
// margin-right: vh(20);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -157,22 +152,21 @@
|
||||
}
|
||||
& > img {
|
||||
width: vw(54);
|
||||
height: vh(60);
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-weight: 800;
|
||||
font-size: vw(16);
|
||||
line-height: vh(26);
|
||||
width: vw(260);
|
||||
height: vh(26);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
line-height: vh(26);
|
||||
margin-left: vw(32.5);
|
||||
font-size: vw(16);
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
background-image: url('@/assets/images/title-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<div v-if="isBack" class="back" @click="handleBack">返回</div>
|
||||
<ul class="nav-left">
|
||||
<li
|
||||
class="nav-left-item"
|
||||
@@ -27,6 +26,17 @@
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="weather">
|
||||
<span>25˚C-晴</span>
|
||||
<span class="line">|</span>
|
||||
<span>风速：A2-4级</span>
|
||||
<span class="line">|</span>
|
||||
<span>空气质量：A2-优</span>
|
||||
<span class="ml-20">{{ currentDate }}</span>
|
||||
</div>
|
||||
<div v-if="isBack" class="back" @click="handleBack">
|
||||
<img class="icon" src="@/assets/images/back.png" alt="" /> 返回
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -63,6 +73,7 @@
|
||||
})
|
||||
const emit = defineEmits(['change'])
|
||||
const router = useRouter()
|
||||
let currentDate = ref('')
|
||||
|
||||
const name = computed(() => {
|
||||
if (!props.isSkip && props.navLeft.length > 0) {
|
||||
@@ -71,6 +82,22 @@
|
||||
return props.title
|
||||
})
|
||||
|
||||
const fillZero = (value) => {
|
||||
return value < 10 ? `0${value}` : value
|
||||
}
|
||||
const getCurrentDate = () => {
|
||||
var time = new Date()
|
||||
var year = time.getFullYear()
|
||||
var month = time.getMonth() + 1
|
||||
var day = time.getDate()
|
||||
var second = time.getSeconds()
|
||||
var hour = time.getHours()
|
||||
var minute = time.getMinutes()
|
||||
var second = time.getSeconds()
|
||||
currentDate.value = `${year}-${fillZero(month)}-${fillZero(day)} ${hour}:${fillZero(
|
||||
minute
|
||||
)}:${fillZero(second)}`
|
||||
}
|
||||
const handleBack = () => {
|
||||
router.go(-1)
|
||||
}
|
||||
@@ -81,18 +108,35 @@
|
||||
emit('on-change', index)
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
getCurrentDate()
|
||||
setInterval(() => {
|
||||
getCurrentDate()
|
||||
}, 1000)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header {
|
||||
position: absolute;
|
||||
left: vw(326);
|
||||
.weather {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: vh(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(18);
|
||||
color: #ffffff;
|
||||
.line {
|
||||
margin: 0 vw(10);
|
||||
}
|
||||
}
|
||||
.back {
|
||||
position: absolute;
|
||||
right: vw(20);
|
||||
top: vh(40);
|
||||
width: vw(120);
|
||||
height: vh(30);
|
||||
right: 0;
|
||||
top: vh(50);
|
||||
width: vw(130);
|
||||
height: vh(36);
|
||||
font-weight: 600;
|
||||
font-size: vw(20);
|
||||
color: #ffffff;
|
||||
@@ -103,6 +147,11 @@
|
||||
border-radius: vw(60);
|
||||
border: 1px solid rgba(0, 114, 220, 0.3);
|
||||
background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
|
||||
.icon {
|
||||
margin-right: vw(10);
|
||||
width: vw(24);
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
width: vw(3133);
|
||||
|
||||
121
src/components/ScrollNumber/index.vue
Normal file
121
src/components/ScrollNumber/index.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="number-digital">
|
||||
<div class="box-item">
|
||||
<li
|
||||
:class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
|
||||
v-for="(item, index) in orderNum"
|
||||
:key="index"
|
||||
>
|
||||
<span v-if="!isNaN(item)">
|
||||
<i :id="`${prefix}numberItem${index}`">0123456789</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
count: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const orderNum = ref([])
|
||||
|
||||
const toOrderNum = (num) => {
|
||||
num = num.toString()
|
||||
orderNum.value = num.split('') // 将其便变成数据，渲染至滚动数组
|
||||
nextTick(() => {
|
||||
setNumberTransform()
|
||||
})
|
||||
}
|
||||
watch(
|
||||
() => props.count,
|
||||
(newVal) => {
|
||||
toOrderNum(newVal)
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
function setNumberTransform() {
|
||||
for (let index = 0; index < orderNum.value.length; index++) {
|
||||
const ele = document.getElementById(`${props.prefix}numberItem${index}`)
|
||||
if (ele) {
|
||||
ele.style.transform = `translate(-50%, -${orderNum.value[index] * 10}%)`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.number-digital {
|
||||
.box-item {
|
||||
position: relative;
|
||||
height: vh(40);
|
||||
list-style: none;
|
||||
color: #2d7cff;
|
||||
writing-mode: vertical-lr;
|
||||
text-orientation: upright;
|
||||
/*文字禁止编辑*/
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/*滚动数字设置*/
|
||||
.number-item {
|
||||
width: vw(40);
|
||||
height: vh(40);
|
||||
margin-right: vw(4);
|
||||
border-radius: vw(4);
|
||||
color: #ffffff;
|
||||
font-size: vw(28);
|
||||
font-weight: bold;
|
||||
background: linear-gradient(180deg, #00b7ff 0%, #0033ff 100%);
|
||||
|
||||
& > span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: vw(14);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
overflow: hidden;
|
||||
|
||||
& > i {
|
||||
position: absolute;
|
||||
top: vh(10);
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
transition: transform 1s ease-in-out;
|
||||
letter-spacing: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.number-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.num-dot {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
height: 53px;
|
||||
font-size: 47px;
|
||||
font-family: MiSans, MiSans-Demibold;
|
||||
font-weight: normal;
|
||||
text-align: CENTER;
|
||||
color: #ffffff;
|
||||
line-height: 47px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -4,11 +4,9 @@ import App from './App.vue'
|
||||
import router from './router'
|
||||
import '@/styles/reset.css'
|
||||
import '@/styles/common.scss'
|
||||
// import vue3videoPlay from 'vue3-video-play' // 引入组件
|
||||
// import 'vue3-video-play/dist/style.css' // 引入css
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
// app.use(vue3videoPlay)
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import NotFound from '@/views/404/index.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
@@ -10,38 +12,47 @@ const router = createRouter({
|
||||
{
|
||||
path: '/monitor',
|
||||
name: 'monitor',
|
||||
component: () => import('../views/monitor/index.vue')
|
||||
component: () => import('@/views/monitor/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/sceneTesting',
|
||||
name: 'sceneTesting',
|
||||
component: () => import('../views/testing/index.vue')
|
||||
component: () => import('@/views/testing/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/roadTesting',
|
||||
name: 'roadTesting',
|
||||
component: () => import('../views/testing/road.vue')
|
||||
component: () => import('@/views/testing/road.vue')
|
||||
},
|
||||
{
|
||||
path: '/scenic',
|
||||
name: 'scenic',
|
||||
component: () => import('@/views/scenic/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/traffic',
|
||||
name: 'traffic',
|
||||
component: () => import('@/views/traffic/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/traffic',
|
||||
name: 'traffic',
|
||||
component: () => import('@/views/traffic/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/sentiment',
|
||||
name: 'sentiment',
|
||||
component: () => import('@/views/sentiment/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/workOrder',
|
||||
name: 'workOrder',
|
||||
component: () => import('@/views/workOrder/index.vue')
|
||||
}
|
||||
{
|
||||
path: '/workOrder',
|
||||
name: 'workOrder',
|
||||
component: () => import('@/views/workOrder/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/404',
|
||||
name: 'NotFound',
|
||||
component: NotFound
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
redirect: '/404'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
@@ -43,18 +43,24 @@
|
||||
.mt-10 {
|
||||
margin-top: vh(10) !important;
|
||||
}
|
||||
.ml-10 {
|
||||
margin-left: vw(10) !important;
|
||||
}
|
||||
.mr-10 {
|
||||
margin-right: vh(10) !important;
|
||||
margin-right: vw(10) !important;
|
||||
}
|
||||
.mt-20 {
|
||||
margin-top: vh(20) !important;
|
||||
}
|
||||
.ml-20 {
|
||||
margin-left: vh(20) !important;
|
||||
margin-left: vw(20) !important;
|
||||
}
|
||||
.pt-20 {
|
||||
padding-top: vh(20) !important;
|
||||
}
|
||||
.pb-20 {
|
||||
padding-bottom: vh(20) !important;
|
||||
}
|
||||
.pr-20 {
|
||||
padding-right: vh(20) !important;
|
||||
}
|
||||
|
||||
14
src/views/404/index.vue
Normal file
14
src/views/404/index.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="not-found"> 页面走丢啦~ </div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.not-found {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-top: vh(40);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="box-2">
|
||||
<Title1 title="景区信息">
|
||||
<template #right>
|
||||
<span class="more" />
|
||||
<img class="more" src="@/assets/images/more.png" />
|
||||
</template>
|
||||
</Title1>
|
||||
<div class="flex pt-20">
|
||||
@@ -118,7 +118,7 @@
|
||||
<div class="ticket-box">
|
||||
<Title2 title="景区购票数" />
|
||||
<div class="ticket-wrap">
|
||||
<img src="@/assets/images/ticket.png" alt="" />
|
||||
<img src="@/assets/images/ticket.png" />
|
||||
<div> <span class="label">当日购票量：</span><countup endVal="768578" /> </div>
|
||||
<div> <span class="label">未来3天购票量：</span><countup endVal="768578" /> </div>
|
||||
<div> <span class="label">3天后购票量：</span><countup endVal="768578" /> </div>
|
||||
@@ -216,9 +216,7 @@
|
||||
right: vw(20);
|
||||
cursor: pointer;
|
||||
width: vw(60);
|
||||
height: vh(24);
|
||||
background-image: url('@/assets/images/more.png');
|
||||
background-size: 100% 100%;
|
||||
height: auto;
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
@@ -339,7 +337,7 @@
|
||||
}
|
||||
.icon {
|
||||
width: vw(26);
|
||||
height: vh(28);
|
||||
height: auto;
|
||||
margin-right: vw(4);
|
||||
}
|
||||
.text {
|
||||
@@ -389,12 +387,13 @@
|
||||
}
|
||||
}
|
||||
.ticket-wrap {
|
||||
margin-top: vh(8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
& > img {
|
||||
width: vw(74);
|
||||
height: vh(74);
|
||||
height: auto;
|
||||
}
|
||||
& > div {
|
||||
flex: 1;
|
||||
|
||||
@@ -5,15 +5,15 @@
|
||||
<div class="left">
|
||||
<div class="item">
|
||||
<div class="label">今年总游客数</div>
|
||||
<countup v-for="item in count" :endVal="item" />
|
||||
<ScrollNumber :count="count" prefix="1" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">全县景区总游客人数</div>
|
||||
<countup v-for="item in count" :endVal="item" />
|
||||
<ScrollNumber :count="count" prefix="2" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">总在园人数</div>
|
||||
<countup v-for="item in count" :endVal="item" />
|
||||
<ScrollNumber :count="count" prefix="3" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
@@ -120,9 +120,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ScrollNumber from '@/components/ScrollNumber/index.vue'
|
||||
import countup from 'vue-countup-v3'
|
||||
import Map from '@/components/Map/index.vue'
|
||||
|
||||
let count = ref('6945959')
|
||||
</script>
|
||||
|
||||
@@ -288,4 +287,3 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="box-4">
|
||||
<Title1 title="交通信息" />
|
||||
<div class="flex justify-evenly pt-10">
|
||||
<div class="flex justify-evenly pt-10 pb-20">
|
||||
<div v-for="item in list" class="cell">
|
||||
<img class="icon" :src="item.icon" alt="" width="64" height="64" />
|
||||
<div>
|
||||
@@ -324,7 +324,7 @@
|
||||
align-items: center;
|
||||
.icon {
|
||||
width: vw(64);
|
||||
height: vh(60);
|
||||
height: auto;
|
||||
}
|
||||
.countup-wrap {
|
||||
color: #02f9fa;
|
||||
@@ -357,7 +357,7 @@
|
||||
gap: vw(20);
|
||||
.icon {
|
||||
width: vw(45);
|
||||
height: vh(48);
|
||||
height: auto;
|
||||
}
|
||||
& > div {
|
||||
flex: 1;
|
||||
@@ -403,16 +403,17 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.car {
|
||||
@extend .icon;
|
||||
background-image: url('@/assets/images/icon-6.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.ship {
|
||||
@extend .icon;
|
||||
background-image: url('@/assets/images/icon-7.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.label {
|
||||
font-weight: 400;
|
||||
|
||||
@@ -66,15 +66,15 @@
|
||||
fontSize: fitChartSize(12)
|
||||
},
|
||||
verticalAlign: 'bottom',
|
||||
padding: [0, 0, 6, 0],
|
||||
padding: [0, 0, fitChartSize(6), 0],
|
||||
inside: true,
|
||||
formatter: function (value) {
|
||||
return `余{value|${value}}`
|
||||
return `{label|余} {value|${value}}`
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
label: {
|
||||
align: 'center',
|
||||
color: '#D3E5FF',
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(14),
|
||||
fontFamily: 'Source Han Sans CN'
|
||||
},
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
import box2 from './components/box-2.vue'
|
||||
import box3 from './components/box-3.vue'
|
||||
import box4 from './components/box-4.vue'
|
||||
let numm = ref(1231241)
|
||||
const navLeft = [
|
||||
{ name: '安全', path: '/monitor' },
|
||||
{ name: '景区', path: '/scenic' },
|
||||
@@ -22,5 +23,8 @@
|
||||
{ name: '舆情', path: '/sentiment' },
|
||||
{ name: '酒店' }
|
||||
]
|
||||
const handleChange = () => {
|
||||
numm.value++
|
||||
}
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
|
||||
@@ -269,8 +269,7 @@
|
||||
}
|
||||
}
|
||||
.container {
|
||||
flex: 1;
|
||||
margin: vh(120) vw(10) 0 vw(10);
|
||||
margin: vh(120) 0 0 vw(10);
|
||||
.count-box {
|
||||
padding: 0 vw(10);
|
||||
height: vh(70);
|
||||
@@ -289,12 +288,12 @@
|
||||
}
|
||||
.box {
|
||||
@extend .bg;
|
||||
width: vw(575);
|
||||
width: vw(570);
|
||||
height: vh(475);
|
||||
}
|
||||
.box-1 {
|
||||
@extend .bg;
|
||||
width: vw(770);
|
||||
width: vw(750);
|
||||
height: vh(475);
|
||||
}
|
||||
.box-2 {
|
||||
@@ -309,12 +308,12 @@
|
||||
}
|
||||
.box-4 {
|
||||
@extend .bg;
|
||||
width: vw(850);
|
||||
width: vw(840);
|
||||
height: vh(465);
|
||||
}
|
||||
.box-5 {
|
||||
@extend .bg;
|
||||
width: vw(670);
|
||||
width: vw(650);
|
||||
height: vh(465);
|
||||
}
|
||||
.car-box {
|
||||
|
||||
@@ -182,6 +182,6 @@
|
||||
<style scoped lang="scss">
|
||||
.top {
|
||||
width: 100%;
|
||||
height: vh(300);
|
||||
height: vh(360);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -102,8 +102,7 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
flex: 1;
|
||||
margin: vh(120) vw(10) 0 vw(10);
|
||||
margin-top: vh(120);
|
||||
.bg {
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
}
|
||||
@@ -112,7 +111,7 @@
|
||||
margin-top: vh(35);
|
||||
}
|
||||
.box-1 {
|
||||
width: vw(770);
|
||||
width: vw(780);
|
||||
height: vh(470);
|
||||
@extend .bg;
|
||||
}
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
<template>
|
||||
<main class="wrapper">
|
||||
<CoreVideo />
|
||||
<box1/>
|
||||
<box2/>
|
||||
<box3/>
|
||||
<Header title="工单消息" is-skip />
|
||||
<Correspondence />
|
||||
</main>
|
||||
<Header title="工单消息" is-skip is-back />
|
||||
<CoreVideo />
|
||||
<box1 />
|
||||
<box2 />
|
||||
<box3 />
|
||||
<Correspondence />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -16,12 +14,4 @@
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: #0a254b;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user