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

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

@ -1,35 +1,37 @@
<template> <template>
<div class="all" :class="{ 'scale-down': isScaleDown }"> <div class="container">
<img src="../../../assets/homenew/web_bg.png" class="web_bg scale-1" /> <div class="all" :class="{ 'scale-down': isScaleDown }">
<!-- <img src="../../../assets/homenew/web_bg.png" class="web_bg scale-1" /> -->
<div class="left">
<div class="content_nol">
<Title title="企业舆情" />
<div class="left"> <div class="yuqing">
<div class="content_nol"> <div class="yuqing_left">
<Title title="企业舆情" /> <text class="yqleft_title">舆情服务</text>
<text class="yqleft_content">中证智能财保舆情服务为企业提供负面舆情信息、竞对舆情、行业板块舆情信息。</text>
<div class="yuqing"> <text class="yqleft_button" @click="goYuqing">点击进入</text>
<div class="yuqing_left">
<text class="yqleft_title">舆情服务</text>
<text class="yqleft_content">中证智能财保舆情服务为企业提供负面舆情信息、竞对舆情、行业板块舆情信息。</text>
<text class="yqleft_button" @click="goYuqing">点击进入</text>
</div>
<div class="yuqing_right">
<div v-if="yqList && yqList.length > 0" 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> </div>
<div v-else class="empty" style="margin-top: 40px">
<img src="../../../assets/homenew/nonews_icon.png" class="icon_empty" /> <div class="yuqing_right">
<text class="empty_text">暂无最新信息</text> <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>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- <div class="content_nol" <!-- <div class="content_nol"
v-if="Session.get('roleName') == 'operate' || Session.get('roleName') == 'subCenter' || Session.get('roleName') == 'Director'"> v-if="Session.get('roleName') == 'operate' || Session.get('roleName') == 'subCenter' || Session.get('roleName') == 'Director'">
<Title title="经营支持" /> <Title title="经营支持" />
<MenuItem title="业务看板" name="kanban" :item="{ <MenuItem title="业务看板" name="kanban" :item="{
@ -40,144 +42,145 @@
}" style="margin-top: 20px" /> }" style="margin-top: 20px" />
</div> --> </div> -->
<div class="content_nol"> <div class="content_nol">
<Title title="信息披露" /> <Title title="信息披露" />
<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 style="display: flex; gap: 10px; margin-top: 15px">
<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> </div>
</div> </div>
<div style="display: flex; gap: 10px; margin-top: 15px"> </div>
<div v-for="(item, index) in menuItem" class="menu_items">
<MenuItem :title="item.title" :name="item.name" :index="index" :supported="item.supported" :item="item" /> <div class="content_nol">
<Title title="ESG评测" />
<div
class="r_esg"
v-if="
Session.get('roleName') == 'common' ||
Session.get('roleName') == 'subCommon' ||
Session.get('roleName') == 'subCenter' ||
Session.get('roleName') == 'operate' ||
Session.get('roleName') == 'Director' ||
Session.get('roleName') == 'Bank' ||
Session.get('roleName') == 'SubBank'
"
>
<img src="../../../assets/homenew/ESGbanner_pic.png" class="esg_bg" />
<div class="esg_content">
<div>
<text class="esg_title blue">ESG自评测</text>
<text class="esg_title">重磅推出</text>
</div>
<text class="esg_sub_title">
中证智能财保ESG数字服务作为一个创新的数字化工具，采用与国际接轨的算法逻辑，为企业提供360°ESG综合服务。企业通过平台的
ESG“自评”“自检”和“自诊断”的功能模块，可以了解自身ESG综合表现情况，获得较为全面的诊断报告。
</text>
<div class="esg_button" @click="goEsg">点击进入</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="content_nol"> <div class="right">
<Title title="ESG评测" /> <div
class="content_nol"
v-if="Session.get('roleName') == 'operate' || Session.get('roleName') == 'subCenter' || Session.get('roleName') == 'Director'"
>
<Title title="经营支持" />
<MenuItem
title="业务看板"
name="kanban"
:item="{
title: '业务看板',
name: 'kanban',
supported: true,
routePath:
Session.get('roleName') == 'Director' || Session.get('roleName') == 'subCenter' || Session.get('roleName') == 'operate'
? '/dashboardNew'
: '/dashboard',
}"
isBig
style="margin-top: 36px"
/>
</div>
<div <div
class="r_esg"
v-if=" v-if="
Session.get('roleName') == 'common' || Session.get('roleName') == 'common' ||
Session.get('roleName') == 'subCommon' || Session.get('roleName') == 'subCommon' ||
Session.get('roleName') == 'subCenter' ||
Session.get('roleName') == 'operate' ||
Session.get('roleName') == 'Director' || Session.get('roleName') == 'Director' ||
Session.get('roleName') == 'Bank' || Session.get('roleName') == 'subCenter' ||
Session.get('roleName') == 'SubBank' Session.get('roleName') == 'operate'
" "
style="max-width: 300px; margin-top: 20px; margin-bottom: 20px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1)"
> >
<img src="../../../assets/homenew/ESGbanner_pic.png" class="esg_bg" /> <moudle title="海外资讯" @jumpUrl="jumpHaiwaiUrl" v-if="Session.get('userData').accountType != 1" paddingBottom="0px">
<RankList
<div class="esg_content"> :newsList="newsList"
<div> :needExp="false"
<text class="esg_title blue">ESG自评测</text> style="margin-top: 15px"
<text class="esg_title">重磅推出</text> :titleSize="'13px'"
</div> :timeSize="'12px'"
<text class="esg_sub_title"> :tagWidth="'8px'"
中证智能财保ESG数字服务作为一个创新的数字化工具，采用与国际接轨的算法逻辑，为企业提供360°ESG综合服务。企业通过平台的 :tagSize="'10px'"
ESG“自评”“自检”和“自诊断”的功能模块，可以了解自身ESG综合表现情况，获得较为全面的诊断报告。 :tagScale="0.8"
</text> ></RankList>
<div class="esg_button" @click="goEsg">点击进入</div> </moudle>
</div>
</div> </div>
</div>
</div>
<div class="right"> <div class="r_msg">
<div <Title title="消息通知" />
class="content_nol"
v-if="Session.get('roleName') == 'operate' || Session.get('roleName') == 'subCenter' || Session.get('roleName') == 'Director'"
>
<Title title="经营支持" />
<MenuItem
title="业务看板"
name="kanban"
:item="{
title: '业务看板',
name: 'kanban',
supported: true,
routePath:
Session.get('roleName') == 'Director' || Session.get('roleName') == 'subCenter' || Session.get('roleName') == 'operate'
? '/dashboardNew'
: '/dashboard',
}"
isBig
style="margin-top: 36px"
/>
</div>
<div <div v-if="msgList && msgList.length > 0" style="display: flex; flex-direction: column; justify-content: space-between">
v-if=" <div class="r_msg_item">
Session.get('roleName') == 'common' || <MsgView
Session.get('roleName') == 'subCommon' || :item="item"
Session.get('roleName') == 'Director' || v-for="(item, index) in msgList"
Session.get('roleName') == 'subCenter' || :index="index"
Session.get('roleName') == 'operate' :key="index"
" @delMsg="delMsg"
style="max-width: 300px; margin-top: 20px; margin-bottom: 20px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1)" :class="[index == 0 && msgAnimPlay ? 'anim' : '']"
> >
<moudle title="海外资讯" @jumpUrl="jumpHaiwaiUrl" v-if="Session.get('userData').accountType != 1" paddingBottom="0px"> </MsgView>
<RankList </div>
:newsList="newsList" <div class="msg_bottom">
:needExp="false" <text class="msg_clear" @click="msgClearAll">一键清除</text>
style="margin-top: 15px" <div class="r_page">
:titleSize="'13px'" <img v-if="msgDataRequst.page == 1" src="../../../assets/homenew/arrow_square_left_disable.png" class="page_icon" />
:timeSize="'12px'" <img v-else src="../../../assets/homenew/arrow_square_left_normal.png" @click="doPage(0)" class="page_icon" />
:tagWidth="'8px'" <text>{{ msgDataRequst.page }}/{{ msgDataRequst.maxPage }}</text>
:tagSize="'10px'"
:tagScale="0.8"
></RankList>
</moudle>
</div>
<div class="r_msg"> <img
<Title title="消息通知" /> v-if="msgDataRequst.maxPage == msgDataRequst.page"
src="../../../assets/homenew/arrow_square_left_disable.png"
<div v-if="msgList && msgList.length > 0" style="display: flex; flex-direction: column; justify-content: space-between"> style="transform: rotate(180deg)"
<div class="r_msg_item"> @click="doPage(1)"
<MsgView class="page_icon"
:item="item" />
v-for="(item, index) in msgList" <img v-else src="../../../assets/homenew/arrow_square_right_normal.png" @click="doPage(1)" class="page_icon" />
:index="index" </div>
:key="index"
@delMsg="delMsg"
:class="[index == 0 && msgAnimPlay ? 'anim' : '']"
>
</MsgView>
</div>
<div class="msg_bottom">
<text class="msg_clear" @click="msgClearAll">一键清除</text>
<div class="r_page">
<img v-if="msgDataRequst.page == 1" src="../../../assets/homenew/arrow_square_left_disable.png" class="page_icon" />
<img v-else src="../../../assets/homenew/arrow_square_left_normal.png" @click="doPage(0)" class="page_icon" />
<text>{{ msgDataRequst.page }}/{{ msgDataRequst.maxPage }}</text>
<img
v-if="msgDataRequst.maxPage == msgDataRequst.page"
src="../../../assets/homenew/arrow_square_left_disable.png"
style="transform: rotate(180deg)"
@click="doPage(1)"
class="page_icon"
/>
<img v-else src="../../../assets/homenew/arrow_square_right_normal.png" @click="doPage(1)" class="page_icon" />
</div> </div>
</div> </div>
<div v-else class="empty">
<img src="../../../assets/homenew/nonews_icon.png" class="icon_empty" />
<text class="empty_text">暂无消息通知</text>
</div>
</div> </div>
<div v-else class="empty">
<img src="../../../assets/homenew/nonews_icon.png" class="icon_empty" />
<text class="empty_text">暂无消息通知</text>
</div>
</div>
<!-- <div> <!-- <div>
<img src="../../../assets/homenew/advertisement_pic_2.png" class="right_ad" /> <img src="../../../assets/homenew/advertisement_pic_2.png" class="right_ad" />
</div> --> </div> -->
</div>
</div> </div>
</div> </div>
</template> </template>
@ -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 {