zzb
/
csi-financial-front
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/pages/homeNew/index.vue
View File

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