feat:完善样式

This commit is contained in:
zjc
2025-03-05 19:59:23 +08:00
parent 21cb9b04ca
commit 5619c9ddfb
5 changed files with 73 additions and 30 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

View File

@@ -4,12 +4,12 @@
<li
class="nav-left-item"
:style="{
backgroundImage: `url(${current === index && !isSkip ? title2Select : title2})`
backgroundImage: `url(${current === item.id && !isSkip ? title2Select : title2})`
}"
v-for="(item, index) in navLeft"
:key="index"
:title="item.name"
@click="handleNav(item, index)"
@click="handleNav(item)"
>
{{ item.name }}
</li>
@@ -18,7 +18,7 @@
['/scenic', '/hotel'].includes(router.currentRoute.value.path) && otherLeftNav.length > 0
"
trigger="click"
@command="handleCommand"
@command="handleCommand($event, 'hotel')"
>
<li
class="nav-left-item"
@@ -44,13 +44,40 @@
<ul class="nav-right">
<li
class="nav-right-item"
:style="{
backgroundImage: `url(${current === item.id && !isSkip ? title3Select : title3})`
}"
v-for="(item, index) in navRight"
:key="index"
:title="item.name"
@click="handleNav(item, index)"
@click="handleNav(item)"
>
{{ item.name }}
</li>
<el-dropdown
v-if="
['/scenic', '/hotel'].includes(router.currentRoute.value.path) && otherRightNav.length > 0
"
trigger="click"
@command="handleCommand($event, 'venue')"
>
<li
class="nav-right-item"
:style="{
backgroundImage: `url(${title3})`
}"
>
{{ otherRightLabel }}
<img class="icon" src="@/assets/images/arrow-down-1.png" />
</li>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="(item, index) in otherRightNav" :key="index" :command="item">
<span class="label"> {{ item.name }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</ul>
<div class="weather">
<span>{{ weatherData?.temperature }}-{{ weatherData?.skycon }}</span>
@@ -70,7 +97,9 @@
import { useRouter } from 'vue-router'
import title2 from '@/assets/images/title-2.png'
import title3 from '@/assets/images/title-3.png'
import title2Select from '@/assets/images/title-2-select.png'
import title3Select from '@/assets/images/title-3-select.png'
import { getWeatherApi } from '@/api/home'
import { getSpotListApi } from '@/api/sentiment'
@@ -87,9 +116,11 @@
let navRight = ref([])
let isSkip = ref(true)
let isBack = ref(false)
let current = ref(0)
let current = ref(1)
let otherLeftLabel = ref('')
let otherRightLabel = ref('')
let otherLeftNav = ref([])
let otherRightNav = ref([])
let spotList = ref([])
// 补零
@@ -115,9 +146,15 @@
const handleBack = () => {
router.push('/home')
}
const handleCommand = (item) => {
const handleCommand = (item, type) => {
current.value = ''
if (type === 'hotel') {
otherRightLabel.value = '其他场馆'
otherLeftLabel.value = item.name
} else {
otherLeftLabel.value = '其他酒店'
otherRightLabel.value = item.name
}
switch (router.currentRoute.value.path) {
case '/scenic':
pubSub.publish('scenicChange', item)
@@ -131,19 +168,21 @@
}
}
// 点击导航
const handleNav = (item, index) => {
const handleNav = (item) => {
if (isSkip.value) {
router.push(item.path)
} else {
if (current.value === index) return
if (current.value === item.id) return
otherLeftLabel.value = '其他酒店'
current.value = index
title.value = item.name
otherRightLabel.value = '其他场馆'
current.value = item.id
switch (router.currentRoute.value.path) {
case '/scenic':
title.value = item.name
pubSub.publish('scenicChange', item)
break
case '/monitor':
title.value = item.name
pubSub.publish('monitorChange', item)
break
case '/hotel':
@@ -167,6 +206,8 @@
const setNav = async () => {
navLeft.value = []
navRight.value = []
otherLeftNav.value = []
otherRightNav.value = []
switch (router.currentRoute.value.path) {
case '/home':
title.value = '奉节县旅游指挥调度中心'
@@ -273,13 +314,17 @@
case '/hotel':
title.value = '酒店场馆'
otherLeftLabel.value = '其他酒店'
otherRightLabel.value = '其他场馆'
isSkip.value = false
current.vlaue = ''
isBack.value = true
let hotelRes = await getHotelListApi({ hotelStadiumType: 1 })
navLeft.value = hotelRes.data.slice(0, 3)
pubSub.publish('hotelChange', hotelRes.data[0])
otherLeftNav.value = hotelRes.data.slice(3, hotelRes.data.length - 1)
let venueRes = await getHotelListApi({ hotelStadiumType: 2 })
navRight.value = venueRes.data.slice(0, 3)
otherRightNav.value = venueRes.data.slice(3, venueRes.data.length - 1)
pubSub.publish('hotelChange', hotelRes.data[0])
break
}
}
@@ -411,6 +456,10 @@
color: rgba(208, 236, 255, 0.9);
background-image: url('@/assets/images/title-3.png');
background-size: 100% 100%;
.icon {
width: vw(18);
height: vw(18);
}
}
}
}

View File

@@ -88,7 +88,6 @@
<script setup>
import countup from 'vue-countup-v3'
import map from '@/assets/images/map-img-1.jpg'
import pubSub from 'pubsub-js'
import { cloneDeep } from 'lodash'
@@ -97,15 +96,14 @@
let info = ref(null)
onMounted(() => {
hotelChange = PubSub.subscribe('hotelChange', (msg, data) => {
hotelChange = pubSub.subscribe('hotelChange', (msg, data) => {
let newData = cloneDeep(data)
newData.banner = newData.banner ? newData.banner.split(',') : []
info.value = newData
console.log(info.value, 'info.value')
})
})
onUnmounted(() => {
if (hotelChange) PubSub.unsubscribe(hotelChange)
if (hotelChange) pubSub.unsubscribe(hotelChange)
})
</script>

View File

@@ -147,7 +147,6 @@
if (map.value && modelValue.value) {
// 109.645729,31.041203
if (carOverlays.value.length > 0) {
console.log(11111)
// 更新车辆marker位置
let flag = false
for (let i = 0; i < carOverlays.value.length; i++) {
@@ -159,7 +158,7 @@
lat: props.carList[j].lat
})
flag = true
break
continue
}
}
}
@@ -175,11 +174,14 @@
lng: props.carList[i].lng,
lat: props.carList[i].lat
})
currentMarker.value.setPosition({
lng: props.carList[i].lng,
lat: props.carList[i].lat
})
break
}
}
} else {
console.log(2222)
props.carList.map((item, i) => {
if (item.lng && item.lat) {
addMarker(carIcon, [item.lng, item.lat], [36, 50])

View File

@@ -12,7 +12,7 @@
</li>
</ul>
<div id="traffic-map" :class="[routers.length == 0 ? 'traffic-map-big' : 'traffic-map']" />
<div id="traffic-map" class="traffic-map-big" :class="{ 'traffic-map': routers.length > 0 }" />
<div v-if="routers.length > 0" class="list">
<div class="item" v-for="(item, index) in routers" :key="index" @click="handleRouter(item)">
@@ -183,16 +183,7 @@
background-size: 100% 100%;
}
}
.traffic-map {
position: relative;
z-index: 9;
width: vw(1500);
height: vh(955);
margin-left: vw(8);
box-sizing: border-box;
background-image: url('/src/assets/images/map-bg-2.png');
background-size: 100% 100%;
}
.traffic-map-big {
position: relative;
z-index: 9;
@@ -203,6 +194,9 @@
background-image: url('/src/assets/images/map-bg-2.png');
background-size: 100% 100%;
}
.traffic-map {
width: vw(1500) !important;
}
.video-list {
width: vw(320);
height: vh(120);