30
This commit is contained in:
duanliang
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="box-1">
|
||||
<div class="header">
|
||||
<div class="header__left">
|
||||
<div class="header__left" @click="handlePiaoPop">
|
||||
<img src="@/assets/images/ticket.png" />
|
||||
<div
|
||||
class="header__left-item"
|
||||
@@ -100,8 +100,27 @@
|
||||
<img class="more" src="@/assets/images/more-col.png" alt="查看更多" @click="handleMore" />
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog :title="'未来预定票数'" center v-model="dialogTableVisible">
|
||||
<div class="bom-box">
|
||||
<div class="table">
|
||||
<div class="header-title">{{gridTitle}}</div>
|
||||
<div class="header">
|
||||
<div>订票时间</div>
|
||||
<div>订票数量</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item" v-for="(item, index) in gridData" :key="index">
|
||||
<div>{{ item.time }}</div>
|
||||
<div>{{ item.value }}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<video-dialog v-model="videoShow" :src="src" :cameraIndexCode="cameraIndexCode" />
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -113,7 +132,7 @@
|
||||
import { useScenicStore } from '@/stores/scenic'
|
||||
|
||||
import { useMap } from '@/hooks/map'
|
||||
import {getPreviewUrlApi} from "@/api/home.js";
|
||||
import {getPreviewUrlApi,getSpotTicketDate} from "@/api/home.js";
|
||||
import pubSub from 'pubsub-js'
|
||||
const router = useRouter()
|
||||
const scenicStore = useScenicStore()
|
||||
@@ -125,7 +144,6 @@ import pubSub from 'pubsub-js'
|
||||
default: () => ''
|
||||
}
|
||||
})
|
||||
|
||||
let scenicChange = null
|
||||
const handleMore = () => {
|
||||
router.push('/workOrder')
|
||||
@@ -152,9 +170,20 @@ import pubSub from 'pubsub-js'
|
||||
videoShow.value = true
|
||||
}
|
||||
});
|
||||
|
||||
let dialogTableVisible = ref(false)
|
||||
let gridData = ref([])
|
||||
let gridTitle = ref('')
|
||||
const handlePiaoPop = async()=>{
|
||||
dialogTableVisible.value = true
|
||||
let res = await getSpotTicketDate({scenicSpotId:props.scenicSpotId})
|
||||
gridData.value = res.data
|
||||
console.log(res,'res')
|
||||
}
|
||||
onMounted(() => {
|
||||
scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
|
||||
|
||||
gridTitle.value = data.name
|
||||
|
||||
hrefItem.value = data
|
||||
// initMap('scenic-map', data.lng, data.lat, 15)
|
||||
// map.value.setDisplayOptions({
|
||||
@@ -394,3 +423,175 @@ import pubSub from 'pubsub-js'
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-dialog__headerbtn .el-dialog__close){
|
||||
color:#fff;
|
||||
font-size:40px;
|
||||
position:relative;
|
||||
top:15px;
|
||||
right:15px;
|
||||
}
|
||||
:deep(.el-dialog__header.show-close){
|
||||
padding-right:0;
|
||||
}
|
||||
:deep(.el-dialog) {
|
||||
background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
|
||||
background-size: 100% 100%;
|
||||
width:vw(1500);
|
||||
}
|
||||
:deep(.el-dialog__title) {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sp-ico {
|
||||
width: vw(40);
|
||||
}
|
||||
.item-name {
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
.sp-img {
|
||||
width: vw(100);
|
||||
}
|
||||
.correspondence {
|
||||
margin: vw(8);
|
||||
width: vw(300);
|
||||
height: vh(1070);
|
||||
background-image: url('@/assets/images/bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.bom-box2{
|
||||
// margin-top:vh(10);
|
||||
min-width:vw(900);
|
||||
height:vh(800);
|
||||
|
||||
}
|
||||
.header-title{
|
||||
font-size:vw(32);
|
||||
color:#fff;
|
||||
text-align:center;
|
||||
font-weight:bold;
|
||||
margin-bottom:vh(20);
|
||||
|
||||
}
|
||||
.bom-box {
|
||||
.table2{
|
||||
width:100%;
|
||||
height:vh(740);
|
||||
}
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-top: vh(5);
|
||||
.header {
|
||||
height: vh(28);
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
color: #fff;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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; /* 使用省略号表示文本溢出 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
span {
|
||||
margin-left: vw(30);
|
||||
font-weight: 800;
|
||||
font-size: vw(15);
|
||||
line-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-box {
|
||||
width: 100%;
|
||||
height: vh(500);
|
||||
.icon-box {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
line-height: vh(16);
|
||||
flex-wrap: wrap;
|
||||
.item {
|
||||
cursor: pointer;
|
||||
width: 50%;
|
||||
margin-top: vh(40);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
& > img {
|
||||
width: vw(54);
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
width: vw(260);
|
||||
height: vh(26);
|
||||
text-align: center;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user