feat:完善样式
This commit is contained in:
BIN
src/assets/images/title-3-select.png
Normal file
BIN
src/assets/images/title-3-select.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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])
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user