feat: 优化首页布局和样式,提升用户界面体验

This commit is contained in:
傅光孟 2026-03-30 20:42:05 +08:00
parent 3f3486de07
commit 7d91c52204
1 changed files with 149 additions and 140 deletions

View File

@ -1,7 +1,7 @@
<template>
<div class="container">
<div class="all" :class="{ 'scale-down': isScaleDown }">
<img src="../../../assets/homenew/web_bg.png" class="web_bg scale-1" />
<!-- <img src="../../../assets/homenew/web_bg.png" class="web_bg scale-1" /> -->
<div class="left">
<div class="content_nol">
<Title title="企业舆情" />
@ -14,13 +14,15 @@
</div>
<div class="yuqing_right">
<div v-if="yqList && yqList.length > 0" class="yqright_item" v-for="(item, index) in yqList" :key="index">
<template v-if="yqList && yqList.length > 0">
<div class="yqright_item" v-for="(item, index) in yqList" :key="index">
<div @click="clickYuqing(item)" style="display: flex; align-items: center">
<img src="../../../assets/homenew/tag_blue.png" />
<text class="yqright_title">{{ item.subject }}</text>
</div>
<text class="yqright_time">{{ item.postTime }}</text>
</div>
</template>
<div v-else class="empty" style="margin-top: 40px">
<img src="../../../assets/homenew/nonews_icon.png" class="icon_empty" />
<text class="empty_text">暂无最新信息</text>
@ -45,12 +47,12 @@
<div class="menus">
<div style="display: flex; align-items: center; margin-top: 20px">
<div v-for="(item, index) in menuStepList">
<div v-for="(item, index) in menuStepList" :key="index">
<TopWithArrow :title="item.title" :index="index" :size="menuStepList.length" />
</div>
</div>
<div style="display: flex; gap: 10px; margin-top: 15px">
<div v-for="(item, index) in menuItem" class="menu_items">
<div v-for="(item, index) in menuItem" class="menu_items" :key="index">
<MenuItem :title="item.title" :name="item.name" :index="index" :supported="item.supported" :item="item" />
</div>
</div>
@ -180,6 +182,7 @@
</div> -->
</div>
</div>
</div>
</template>
<script setup lang="ts" name="dashboard">
@ -573,26 +576,32 @@ onUnmounted(() => {
/* 计算缩放后的偏移量,使内容居中 */
transform-origin: top center;
/* 调整容器宽度,避免边缘被截断 */
width: calc(1 / var(--scale-ratio, 0.8) * 100%);
// width: calc(1 / var(--scale-ratio, 0.8) * 100%);
margin: 0 auto;
}
.scale-1 {
/* 缩放内容 */
transform: scale(1.5);
transform: scale(1);
/* 计算缩放后的偏移量,使内容居中 */
/* 调整容器宽度,避免边缘被截断 */
margin: 0 auto;
width: 100vw;
}
.container {
width: 100%;
background: url('/@/assets/homenew/web_bg.png') #f9fbff no-repeat center 0;
background-size: 100% auto;
}
.all {
display: flex;
position: relative;
text-align: center;
justify-content: center;
padding-bottom: 20px;
// background: url('/@/assets/images/bk_charts1.png') #f9fbff no-repeat center 0;
// background: url('/@/assets/homenew/web_bg.png') #f9fbff no-repeat center 0;
// background-size: 100% auto;
.left {