Skip to content

R
risk-monitor
提交 ba702a32 authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

fix:概览页优化及新闻媒体组件优化

上级 2cc1c9e6
隐藏空白字符变更
内嵌 并排
正在显示 包含 150 行增加 和 61 行删除
src/components/base/messageBubble/index.vue
浏览文件 @ ba702a32
......@@ -10,11 +10,10 @@
</div>
<!-- <div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div> -->
</div>
<div class="msg-bubble-main">
<div class="message-bubble" v-for="(item, index) in messageList" :key="index" @click="handleClickPerson(item)">
<div class="msg-bubble-main" ref="scrollContainer">
<div class="message-bubble" v-for="(item, index) in displayList" :key="index" @click="handleClickPerson(item)">
<div class="avatar-container">
<img :src="item[props.imageUrl] || avatarUser" :alt="item[props.name]" class="avatar" />
<div class="avatar-containerOne" v-if="isRepublicanParty">
<img src="./image2.png" alt="" class="avatar-imageOne" />
</div>
......@@ -35,27 +34,12 @@
</div>
</div>
</div>
<!-- <MessageBubble v-for="(item, index) in messageList" @click="handleClickPsserson(item)"
@info-click="handleMediaClick(item)" :key="index" :avatar="item.img ? item.img : DefaultIcon1" :name="item.name"
:time="item.time" :source="item.source" :content="item.content" /> -->
<!-- <div class="msg-bubble-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClickPerson(item)">
<img :src="item.img ? item.img : DefaultIcon1" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="name">{{ item.name }}</div>
<div class="time">{{ item.time }}</div>
</div>
<div class="content">{{ item.content }}</div>
</div>
</div> -->
</div>
</div>
</template>
<script setup>
import { computed } from "vue";
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
import avatarUser from "@/assets/images/avatar_user.png";
const emit = defineEmits(["click", "info-click"]);
......@@ -118,6 +102,66 @@ const handleInfoClick = item => {
const handleToMoreNews = item => {
emit("more-click", item);
};
const scrollContainer = ref(null)
let timer = null
const currentIndex = ref(0)
// const itemHeight = ref(80) // 每条消息的高度，需要根据实际调整
// 计算当前显示的消息列表（只显示固定数量的消息）
const displayList = computed(() => {
if(props.messageList.length < 4) {
return props.messageList
}
// 确保 messageList 存在且有数据
if (!props.messageList || !Array.isArray(props.messageList) || props.messageList.length === 0) {
return []
}
const list = []
const totalLength = props.messageList.length
for (let i = 0; i < 3; i++) {
// 计算当前索引，确保不会超出数组长度
const index = (currentIndex.value + i) % totalLength
const item = props.messageList[index]
// 确保 item 存在再添加到列表
if (item) {
list.push(item)
}
}
return list
})
// 开始滚动
const startScroll = () => {
if (timer) clearInterval(timer)
timer = setInterval(() => {
currentIndex.value = (currentIndex.value + 1) % props.messageList.length
}, 2000) // 每秒滚动一条
}
// 停止滚动
const stopScroll = () => {
if (timer) {
clearInterval(timer)
timer = null
}
}
onMounted(() => {
if (props.messageList.length > 3) {
startScroll()
}
})
onBeforeUnmount(() => {
stopScroll()
})
</script>
<style lang="scss" scoped>
......@@ -180,7 +224,7 @@ const handleToMoreNews = item => {
.msg-bubble-main {
height: 402px;
overflow-y: auto;
overflow: hidden;
box-sizing: border-box;
padding-bottom: 8px;
padding-left: 21px;
......@@ -190,6 +234,8 @@ const handleToMoreNews = item => {
display: flex;
max-width: 740px;
margin-bottom: 15px;
transition: transform 2s ease;
/* 可选：添加平滑动画 */
.avatar-container {
flex-shrink: 0;
......@@ -317,6 +363,18 @@ const handleToMoreNews = item => {
}
}
// .msg-bubble-main {
// height: 400px; /* 设置固定高度 */
// overflow: hidden;
// position: relative;
// }
// .message-bubble {
// transition: transform 0.3s ease; /* 可选：添加平滑动画 */
// height: 80px; /* 固定每条消息高度 */
// margin-bottom: 10px; /* 消息之间的间距 */
// }
/* 响应式设计 */
@media (max-width: 768px) {
.message-bubble {
......
src/components/base/moduleHeader/index.vue
浏览文件 @ ba702a32
......@@ -9,14 +9,9 @@
<SearchBar v-show="isShowSearchBar" />
<div class="title-box" v-show="!isShowSearchBar">
<!-- <div class="title-box" v-if="false"> -->
<div
class="title"
v-for="(item, index) in homeTitleList"
:key="index"
@mouseenter="handleShowMenu(index, true)"
@mouseleave="handleShowMenu(index, false)"
@click="handleClickTitle(item)"
>
<div class="title" v-for="(item, index) in homeTitleList" :key="index"
@mouseenter="handleShowMenu(index, true)" @mouseleave="handleShowMenu(index, false)"
@click="handleClickTitle(item)">
<div class="text" :class="{ textActive: homeActiveTitleIndex === index }">
{{ item.name }}
</div>
......@@ -36,7 +31,8 @@
<div class="name">{{ "管理员" }}</div>
</div>
</div>
<div class="menu-box" v-show="isShowMenu" @mouseenter="handleHoverMenu(true)" @mouseleave="handleHoverMenu(false)">
<div class="menu-box" v-show="isShowMenu" @mouseenter="handleHoverMenu(true)"
@mouseleave="handleHoverMenu(false)">
<div class="menu-content">
<div class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleToModule(item)">
<div class="icon">
......@@ -90,7 +86,7 @@ const handleGetPersonType = async () => {
personTypeList.value = [];
}
window.sessionStorage.setItem("personTypeList", JSON.stringify(personTypeList.value));
} catch (error) {}
} catch (error) { }
};
// 概览页标题列表
......@@ -230,6 +226,7 @@ onMounted(() => {
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: linear-gradient(180deg, rgba(246, 250, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
padding: 12px 0;
.nav-content {
width: 1600px;
margin: 0 auto;
......@@ -237,11 +234,14 @@ onMounted(() => {
justify-content: space-between;
position: relative;
align-items: flex-start;
.nav-left {
display: flex;
align-items: center;
&.flex-start {
align-items: flex-start;
.icon {
flex-shrink: 0;
width: 48px;
......@@ -251,16 +251,19 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: center;
img {
width: 29px;
height: 30px;
}
}
}
.icon {
width: 29px;
height: 30px;
margin-right: 17px;
img {
width: 100%;
height: 100%;
......@@ -274,6 +277,7 @@ onMounted(() => {
.title {
cursor: pointer;
position: relative;
&:hover {
.text {
color: var(--color-main-active);
......@@ -299,6 +303,7 @@ onMounted(() => {
width: 90%;
height: 20px;
margin-top: 9px;
&::after {
display: block;
content: "";
......@@ -365,23 +370,35 @@ onMounted(() => {
}
.menu-box {
// position: absolute;
// z-index: 999999999;
// width: 713px;
// height: 413px;
// top: 52px;
// left: 0;
// box-sizing: border-box;
// border-radius: 10px;
// backdrop-filter: blur(10px);
// -webkit-backdrop-filter: blur(10px);
// box-shadow: 0px 8px 32px 0px rgba(31, 38, 135, 0.15);
// background: rgba(255, 255, 255, 0.25);
// backdrop-filter: blur(10px);
// -webkit-backdrop-filter: blur(10px);
// border: 1px solid rgba(255, 255, 255, 0.3);
// background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
// box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
position: absolute;
z-index: 999999999;
z-index: 999999;
width: 713px;
height: 413px;
top: 52px;
left: 0;
left: -2px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 10px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0px 8px 32px 0px rgba(31, 38, 135, 0.15);
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
backdrop-filter: blur(30px);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.8);
.menu-content {
width: 562px;
......
src/views/ZMOverView/components/newRisk/index.vue
浏览文件 @ ba702a32
......@@ -69,8 +69,11 @@
<div
class="item-left"
:class="{
itemLeftStatus1: item.signalLevel === '特别重大',
itemLeftStatus2: item.signalLevel === '重大风险'
'item-status-1': item.signalLevel === '特别重大',
'item-status-2': item.signalLevel === '重大风险',
'item-status-3': item.signalLevel === '较大风险',
'item-status-4': item.signalLevel === '一般风险',
'item-status-5': item.signalLevel === '低风险'
}"
>
{{ item.signalLevel ? item.signalLevel : "一般风险" }}
......@@ -1225,14 +1228,29 @@ onUnmounted(() => {
// }
// }
.itemLeftStatus1 {
color: rgba(245, 34, 45, 1) !important;
background: rgba(255, 241, 240) !important;
.item-status-1 {
color: var(--color-red-100) !important;
background: var(--color-red-10) !important;
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
.item-status-2 {
color: var(--color-orange-100) !important;
background: var(--color-orange-10) !important;
}
.item-status-3 {
color: var(--color-yellow-100) !important;
background: var(--color-yellow-10) !important;
}
.item-status-4 {
color: var(--color-green-100) !important;
background: var(--color-green-10) !important;
}
.item-status-5 {
color: var(--color-primary-100) !important;
background: var(--color-primary-10) !important;
}
.item-left {
......@@ -1303,12 +1321,12 @@ onUnmounted(() => {
// background: var(--color-bg-hover);
// }
.itemLeftStatus1 {
.item-status-1 {
color: rgba(245, 34, 45, 1) !important;
background: rgba(255, 241, 240) !important;
}
.itemLeftStatus2 {
.item-status-2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
......
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ ba702a32
......@@ -73,7 +73,9 @@
</div>
<div class="header-right">
<div class="tag1">{{ item.searchsort }}</div>
<div class="tag2" v-for="(val, idx) in item.searchArea" :key="idx">{{ val }}</div>
<div class="area-tag-box">
<AreaTag v-for="(val, idx) in item.searchArea" :key="idx" :tagName="val" />
</div>
</div>
</div>
<div class="info-box">
......@@ -1803,16 +1805,10 @@ onMounted(async () => {
background: rgba(230, 244, 255, 1);
}
.tag2 {
.area-tag-box {
margin-left: 8px;
height: 24px;
line-height: 24px;
padding: 0 8px;
box-sizing: border-box;
color: rgba(19, 168, 168, 1);
border: 1px solid rgba(135, 232, 222, 1);
border-radius: 4px;
background: rgba(230, 255, 251, 1);
display: flex;
gap: 8px;
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论