feat: 优化首页布局和样式，提升用户界面体验
This commit is contained in:
parent
3f3486de07
commit
7d91c52204
|
|
@ -1,35 +1,37 @@
|
|||
<template>
|
||||
<div class="all" :class="{ 'scale-down': isScaleDown }">
|
||||
<img src="../../../assets/homenew/web_bg.png" class="web_bg scale-1" />
|
||||
<div class="container">
|
||||
<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="content_nol">
|
||||
<Title title="企业舆情" />
|
||||
|
||||
<div class="yuqing">
|
||||
<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 class="yuqing">
|
||||
<div class="yuqing_left">
|
||||
<text class="yqleft_title">舆情服务</text>
|
||||
<text class="yqleft_content">中证智能财保舆情服务为企业提供负面舆情信息、竞对舆情、行业板块舆情信息。</text>
|
||||
<text class="yqleft_button" @click="goYuqing">点击进入</text>
|
||||
</div>
|
||||
<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 class="yuqing_right">
|
||||
<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 class="content_nol"
|
||||
<!-- <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="{
|
||||
|
|
@ -40,144 +42,145 @@
|
|||
}" style="margin-top: 20px" />
|
||||
</div> -->
|
||||
|
||||
<div class="content_nol">
|
||||
<Title title="信息披露" />
|
||||
<div class="content_nol">
|
||||
<Title title="信息披露" />
|
||||
|
||||
<div class="menus">
|
||||
<div style="display: flex; align-items: center; margin-top: 20px">
|
||||
<div v-for="(item, index) in menuStepList">
|
||||
<TopWithArrow :title="item.title" :index="index" :size="menuStepList.length" />
|
||||
<div class="menus">
|
||||
<div style="display: flex; align-items: center; margin-top: 20px">
|
||||
<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" :key="index">
|
||||
<MenuItem :title="item.title" :name="item.name" :index="index" :supported="item.supported" :item="item" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 10px; margin-top: 15px">
|
||||
<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>
|
||||
|
||||
<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 class="content_nol">
|
||||
<Title title="ESG评测" />
|
||||
<div class="right">
|
||||
<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
|
||||
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'
|
||||
Session.get('roleName') == 'subCenter' ||
|
||||
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" />
|
||||
|
||||
<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>
|
||||
<moudle title="海外资讯" @jumpUrl="jumpHaiwaiUrl" v-if="Session.get('userData').accountType != 1" paddingBottom="0px">
|
||||
<RankList
|
||||
:newsList="newsList"
|
||||
:needExp="false"
|
||||
style="margin-top: 15px"
|
||||
:titleSize="'13px'"
|
||||
:timeSize="'12px'"
|
||||
:tagWidth="'8px'"
|
||||
:tagSize="'10px'"
|
||||
:tagScale="0.8"
|
||||
></RankList>
|
||||
</moudle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<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 class="r_msg">
|
||||
<Title title="消息通知" />
|
||||
|
||||
<div
|
||||
v-if="
|
||||
Session.get('roleName') == 'common' ||
|
||||
Session.get('roleName') == 'subCommon' ||
|
||||
Session.get('roleName') == 'Director' ||
|
||||
Session.get('roleName') == 'subCenter' ||
|
||||
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)"
|
||||
>
|
||||
<moudle title="海外资讯" @jumpUrl="jumpHaiwaiUrl" v-if="Session.get('userData').accountType != 1" paddingBottom="0px">
|
||||
<RankList
|
||||
:newsList="newsList"
|
||||
:needExp="false"
|
||||
style="margin-top: 15px"
|
||||
:titleSize="'13px'"
|
||||
:timeSize="'12px'"
|
||||
:tagWidth="'8px'"
|
||||
:tagSize="'10px'"
|
||||
:tagScale="0.8"
|
||||
></RankList>
|
||||
</moudle>
|
||||
</div>
|
||||
<div v-if="msgList && msgList.length > 0" style="display: flex; flex-direction: column; justify-content: space-between">
|
||||
<div class="r_msg_item">
|
||||
<MsgView
|
||||
:item="item"
|
||||
v-for="(item, index) in msgList"
|
||||
:index="index"
|
||||
: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>
|
||||
|
||||
<div class="r_msg">
|
||||
<Title title="消息通知" />
|
||||
|
||||
<div v-if="msgList && msgList.length > 0" style="display: flex; flex-direction: column; justify-content: space-between">
|
||||
<div class="r_msg_item">
|
||||
<MsgView
|
||||
:item="item"
|
||||
v-for="(item, index) in msgList"
|
||||
:index="index"
|
||||
: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" />
|
||||
<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 v-else class="empty">
|
||||
<img src="../../../assets/homenew/nonews_icon.png" class="icon_empty" />
|
||||
<text class="empty_text">暂无消息通知</text>
|
||||
</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" />
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue