From 61e6956be147e1e84e7104f16dd47e9f87f20dfd Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Fri, 18 Apr 2025 10:57:32 +0800
Subject: [PATCH] feat: 控制台显示一些信息
---
src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue | 57 ++++++++++++++++++++++++++++++---------------------------
1 files changed, 30 insertions(+), 27 deletions(-)
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
index 16d7179..9d4161f 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
+++ b/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
@@ -1,6 +1,6 @@
<template>
<div class="event-overviewdetail-right" :class="{ isMore }">
- <CommonTitle title="事件概况" :style="{right: isMore?pxToRem(410):pxToRem(0)}" />
+ <CommonTitle title="事件概况" :style="{width: isMore?pxToRem(820):pxToRem(404)}" />
<div class="content">
<img class="leftArrow" :class="isMore?'rightArrow':''" :src="isMore ? rightArrowImg : leftArrowImg" @click="leftArrowFun" alt="" />
@@ -70,15 +70,15 @@
class="eventListItemImg"
:src="getSmallImg(item.photo_url)"
alt=""
- @click="getFindImgHistory(item.id)"
+ @click="getFindImgHistory(item)"
/>
<div class="eventListItemPosition" :title="item.address" @click="positioning(item)">
<img :src="positioningImg" alt="" title="点击定位" />
- <div class="address">{{ item.address }}</div>
+ <!-- <div class="address">{{ item.address }}</div> -->
</div>
<div class="eventListItemText">
<div class="eventListItemName">{{ item.event_name }}</div>
- <div class="eventListItemTime">{{ item.create_time }}</div>
+ <div class="eventListItemTime">{{ dayjs(item.create_time).format('MM/DD HH:mm') }}</div>
</div>
</div>
</div>
@@ -96,7 +96,7 @@
</div>
</div>
</div>
- <div class="image-list" v-if="isShowBigImg">
+ <div class="image-list" v-if="isShowBigImg" :style="{ right: isMore?pxToRem(840):pxToRem(460) }">
<div class="title">
<img @click="isShowBigImg=false" src="@/assets/images/home/useEventOperate/close.png" alt="">
</div>
@@ -195,10 +195,11 @@
})
}
const { flyTo } = cesiumOperation()
+const longitudeOffset = ref(0);
const positioning = row => {
const longitude = Number(row.longitude)
const latitude = Number(row.latitude)
- flyTo({ longitude, latitude }, 1, 1000)
+ flyTo({ longitude: longitude, latitude:latitude + 0.0002 }, 1, 1000);
}
// 事件状态+数量
@@ -271,13 +272,16 @@
const clickImgSrc = ref('');
const selectedImgIndex = ref(0);
// 点击图片放大 显示详细信息
-const getFindImgHistory = (id) => {
- findImgHistory(id).then((res) => {
+const getFindImgHistory = (item) => {
+ // 下半部分隐藏 右侧隐藏
+ isShowBigImg.value = true
+ store.commit('setHideBottomIcon', false)
+ findImgHistory(item.id).then((res) => {
if (res.data.code !== 0) return
imageList.value = res.data.data
clickImgSrc.value = res.data.data[0]?.url;
- isShowBigImg.value = true
})
+ positioning(item);
}
// 点击周期
const clickWeekTime = (item,index) => {
@@ -528,22 +532,23 @@
justify-content: center;
}
.image-list {
+ border: 1px solid red;
position: absolute;
- left: 40%;
- transform: translate(-40%);
- bottom: 218px;
- width: 524px;
- height: 382px;
+ z-index: 1;
+ right: 460px;
+ top: 122px;
+ width: 540px;
+ height: 420px;
background: #0F1929;
- box-shadow: inset 0px -50px 50px 0px rgba(27,148,255,0.13);
- border-radius: 0px 0px 0px 0px;
+ // box-shadow: inset 0px -50px 50px 0px rgba(27,148,255,0.13);
+ // border-radius: 0px 0px 0px 0px;
border: 2px solid;
border-image: linear-gradient(180deg, rgba(81, 168, 255, 0), rgba(48, 111, 202, 1), rgba(255, 255, 255, 1), rgba(27, 148, 255, 1)) 2 2;
.title {
- position: relative;
+ position: absolute;
text-align: right;
right: 12px;
- top: 12px;
+ // top: 12px;
img {
width: 10px;
height: 10px;
@@ -551,23 +556,21 @@
}
}
.content {
- width: 475px;
- height: 231px;
- box-shadow: 1px 3px 6px 0px rgba(81,168,255,0.58);
- border-radius: 20px 20px 20px 20px;
- border-image: linear-gradient(180deg, rgba(81, 168, 255, 1), rgba(189, 228, 255, 1)) 2 2;
- margin: 28px 28px;
img {
width: 100%;
- height: 230px;
+ height: 100%;
+ border-radius: 10px 10px 10px 10px;
}
}
.card {
- margin: 26px 26px;
+ background: linear-gradient( 180deg, rgba(13,30,70,0.72) 0%, #142E6B 100%);
+ padding: 0px 10px 0px 10px;
color: #BECBEA;
display: flex;
justify-content: space-between;
- position: relative;
+ position: absolute;
+ bottom: 0px;
+ width: 100%;
.time-top {
width: 50px;
height: 30px;
--
Gitblit v1.9.3