495 lines
11 KiB
Vue
495 lines
11 KiB
Vue
<template>
|
||
<div class="all">
|
||
<div class="container">
|
||
<!-- 顶部 start -->
|
||
<div class="r_logo">
|
||
<div class="top_left">
|
||
<div class="top_logo">
|
||
<img :src="logo_hol" class="logo" />
|
||
<div class="line"></div>
|
||
<text>中证智能财保</text>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="h100 flex">
|
||
<div class="top_menu">
|
||
<div class="item">
|
||
<text>产品</text>
|
||
<div class="bottom_line"></div>
|
||
</div>
|
||
<div class="item" @click="goExample">
|
||
<text>产品文档</text>
|
||
<!-- <div class="bottom_line"></div> -->
|
||
</div>
|
||
</div>
|
||
<div class="top_right" @click="goLogin">
|
||
<text>登录</text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 顶部 end -->
|
||
<!-- -->
|
||
<div class="r_banner">
|
||
<el-carousel height="450px">
|
||
<el-carousel-item v-for="item in bannerList" interval="5000" :key="item" class="banner">
|
||
<div class="r_esg_content">
|
||
<img :src="item.img" fill="cover" class="bk_esg" />
|
||
|
||
<div class="esg_content">
|
||
<text class="esg_title">{{ item.title }}</text>
|
||
<text class="esg_sub_title">{{ item.subTitle }}</text>
|
||
<el-button class="esg_btn" @click="goLogin">立即体检</el-button>
|
||
</div>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
|
||
<div :style="{ width: '100vw', height: '15px', backgroundColor: tabIndex == 0 ? 'white' : '#F7F8FA' }"></div>
|
||
<div class="tab" :style="{ backgroundColor: tabIndex == 0 ? '#fff' : '#F7F8FA' }">
|
||
<!-- <div class="tab_item" @click="tabIndex = 0">
|
||
<div style="height: 100%; display: flex; align-items: center">
|
||
<img v-if="tabIndex == 0" src="../../../assets/logout/box_time_press.png" />
|
||
<img v-else src="../../../assets/logout/box_time_normal.png" />
|
||
<text :class="{ active: tabIndex == 0 }">定期报告</text>
|
||
</div>
|
||
<div class="tab_bottom_line" v-if="tabIndex == 0"></div>
|
||
</div> -->
|
||
<div class="tab_item" @click="tabIndex = 1">
|
||
<div style="height: 100%; display: flex; align-items: center">
|
||
<img v-if="tabIndex == 1" src="../../../assets/logout/news_normal_press.png" />
|
||
<img v-else src="../../../assets/logout/news_normal.png" />
|
||
<text :class="{ active: tabIndex == 1 }">舆情看板</text>
|
||
</div>
|
||
<div class="tab_bottom_line" v-if="tabIndex == 1"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="r_list" :class="{ 'scale-down': isScaleDown }" :style="{ backgroundColor: tabIndex == 0 ? '#fff' : '#F7F8FA' }">
|
||
<!-- <Dingqibaogao v-if="tabIndex == 0" :data="dingqiList" :total="total"
|
||
@getData="getLogoutReportPageFn"> </Dingqibaogao> -->
|
||
<Yuqingkanban v-if="tabIndex == 1" :data="yuqingkanban" :total="total" @getData="getLogoutYqPageFn"> </Yuqingkanban>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts" name="dashboard">
|
||
import { ref, onMounted, watch, onUnmounted } from 'vue';
|
||
import { Session } from '/@/utils/storage';
|
||
import { NextLoading } from '/@/utils/loading';
|
||
import { useRouter, useRoute } from 'vue-router';
|
||
import { storeToRefs } from 'pinia';
|
||
import { useRoutesList } from '/@/stores/routesList';
|
||
import { getLogoutYqPage, getLogoutReportPage } from '/@/api/api';
|
||
import { ElMessage } from 'element-plus';
|
||
import logo_hol from '/@/assets/logo_hol.png';
|
||
import banner_1 from '/@/assets/logout/banner_1.png';
|
||
import banner_2 from '/@/assets/logout/banner_2.png';
|
||
import banner_3 from '/@/assets/logout/banner_3.png';
|
||
import banner_4 from '/@/assets/logout/banner_4.png';
|
||
import Dingqibaogao from './component/dingqibaogao.vue';
|
||
import Yuqingkanban from './component/yuqingkanban.vue';
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
|
||
// 定义需要缩小的分辨率阈值，例如小于1024px时缩小
|
||
const SCALE_THRESHOLD = 1480;
|
||
// 缩小比例，例如缩小到原来的0.8倍
|
||
const SCALE_RATIO = 0.8;
|
||
|
||
// 判断是否需要缩小
|
||
const isScaleDown = ref(window.innerWidth < SCALE_THRESHOLD);
|
||
|
||
const inWidth = ref(window.innerWidth);
|
||
// 处理窗口大小变化
|
||
const handleResize = () => {
|
||
isScaleDown.value = window.innerWidth < SCALE_THRESHOLD;
|
||
};
|
||
|
||
function getData() {}
|
||
|
||
const bannerList = ref([
|
||
{
|
||
img: banner_1,
|
||
title: 'ESG服务',
|
||
subTitle:
|
||
'问卷对标国内外行业披露框架（ISSB、GRI）及各交易所ESG指引，融合多家主流ESG评级体系。可通过问卷一键生成“ESG报告”与“诊断报告”。一站式对接金融机构和服务生态，帮助企业获得可持续挂钩贷款等创新金融产品服务。',
|
||
},
|
||
{
|
||
img: banner_2,
|
||
title: '企业舆情',
|
||
subTitle: '为企业提供负面舆情信息、竞对及行业板块舆情信息。',
|
||
},
|
||
{
|
||
img: banner_3,
|
||
title: '信披服务',
|
||
subTitle: '为董办提供信披查询、信披文件生成、检校、远程签署及定期报告披露后的宣发服务。',
|
||
},
|
||
{
|
||
img: banner_4,
|
||
title: '定期报告宣发',
|
||
subTitle: '通过可视化方式，宣传解读企业定期报告。',
|
||
},
|
||
]);
|
||
|
||
const tabIndex = ref(1);
|
||
|
||
watch(
|
||
() => tabIndex.value,
|
||
(val) => {
|
||
if (val == 0) {
|
||
getLogoutReportPageFn(null);
|
||
} else {
|
||
getLogoutYqPageFn(null);
|
||
}
|
||
}
|
||
);
|
||
|
||
const dingqiList = ref([]);
|
||
|
||
const yuqingkanban = ref([]);
|
||
|
||
function goLogin() {
|
||
router.push('/loginReal');
|
||
}
|
||
|
||
function goExample() {
|
||
router.push('/example');
|
||
}
|
||
const total = ref(0);
|
||
|
||
async function getLogoutReportPageFn(form) {
|
||
if (!form) {
|
||
form = {
|
||
type: 0,
|
||
page: 1,
|
||
size: 10,
|
||
reportType: 1,
|
||
year: 2025,
|
||
};
|
||
}
|
||
console.log('🚀 ~ getLogoutReportPageFn ~ form:', form);
|
||
let { code, data } = await getLogoutReportPage({
|
||
...form,
|
||
});
|
||
if (code == 200) {
|
||
dingqiList.value = data.list;
|
||
total.value = data.total;
|
||
}
|
||
}
|
||
|
||
async function getLogoutYqPageFn(form) {
|
||
if (!form) {
|
||
form = {
|
||
keyword: '',
|
||
type: 0,
|
||
page: 1,
|
||
size: 10,
|
||
pageType: 0,
|
||
};
|
||
}
|
||
let { code, data } = await getLogoutYqPage({
|
||
...form,
|
||
});
|
||
if (code == 200) {
|
||
yuqingkanban.value = data.list;
|
||
total.value = data.total;
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
NextLoading.done();
|
||
window.addEventListener('resize', handleResize);
|
||
|
||
if (tabIndex.value == 0) {
|
||
getLogoutReportPageFn(null);
|
||
} else {
|
||
getLogoutYqPageFn(null);
|
||
}
|
||
|
||
// for (let i = 0; i < 8; i++) {
|
||
// dingqiList.value.push({
|
||
// secCode: "30***8",
|
||
// year: "2024",
|
||
// remark: "主要财务指标表内上年ROE为11.60%，上年年报为11.59%，本期并未对上期财务数据做出调整。"
|
||
// })
|
||
|
||
// }
|
||
// total.value = 48;
|
||
|
||
// for (let i = 0; i < 8; i++) {
|
||
// yuqingkanban.value.push({
|
||
// day: "06.23",
|
||
// year: "2024",
|
||
// time: "12:00:56",
|
||
// website: "中国证券报",
|
||
// title: "与更昂贵的液化天然气相比，伊朗的紧张局势使动力煤成为赢家",
|
||
// digest: "中国新兴企业深度求索开发的低成本生成式AI问世，动摇了美国对AI的主导权，引发了全球股市的关注。此外，美国辉瑞宣布与中国三生制药签署痘症治疗药开发和生产的独家授权协议，也标志着生物医药行业的发展。"
|
||
// })
|
||
// }
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
window.removeEventListener('resize', handleResize);
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/* 缩小状态 */
|
||
.scale-down {
|
||
/* 缩放内容 */
|
||
transform: scale(var(--scale-ratio, 0.8));
|
||
/* 计算缩放后的偏移量，使内容居中 */
|
||
transform-origin: top center;
|
||
/* 调整容器宽度，避免边缘被截断 */
|
||
width: calc(1 / var(--scale-ratio, 0.8) * 100%);
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.container {
|
||
// background: url('/@/assets/images/bk_charts.png') no-repeat center top;
|
||
background-size: cover;
|
||
width: 100%;
|
||
height: 100vh;
|
||
overflow: auto !important;
|
||
}
|
||
|
||
.r_logo {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
height: 56px;
|
||
padding: 0 0 0 20px;
|
||
border-bottom: 1px solid var(--next-border-color-light);
|
||
justify-content: space-between;
|
||
|
||
.logo {
|
||
width: 140px;
|
||
height: 32px;
|
||
}
|
||
|
||
.line {
|
||
width: 1px;
|
||
height: 15px;
|
||
background-color: #ccc;
|
||
margin-left: 12px;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
text {
|
||
color: #000000;
|
||
font-family: 'Noto Sans CJK SC';
|
||
font-size: 18px;
|
||
font-style: normal;
|
||
font-weight: bold;
|
||
line-height: 26px;
|
||
letter-spacing: 0.56px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.top_left {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100%;
|
||
}
|
||
|
||
.top_logo {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.top_right {
|
||
display: flex;
|
||
text-align: center;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
width: 86px;
|
||
height: 100%;
|
||
background: #0779ff;
|
||
cursor: pointer;
|
||
|
||
text {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #ffffff;
|
||
line-height: 20px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.top_menu {
|
||
height: 100%;
|
||
margin-right: 50px;
|
||
display: flex;
|
||
gap: 50px;
|
||
|
||
.item {
|
||
height: 100%;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.bottom_line {
|
||
width: 100%;
|
||
height: 4px;
|
||
background-color: #007aff;
|
||
position: absolute;
|
||
bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.r_banner {
|
||
.bk_esg {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.banner {
|
||
display: flex;
|
||
text-align: center;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #e9f4fc;
|
||
}
|
||
|
||
:deep(.el-carousel__indicators--horizontal) {
|
||
left: 15%;
|
||
top: 76%;
|
||
bottom: 0%;
|
||
transform: unset;
|
||
}
|
||
|
||
:deep(.el-carousel__button) {
|
||
background-color: white;
|
||
width: 42px;
|
||
height: 4px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
:deep(.is-active .el-carousel__button) {
|
||
background-color: #0779ff;
|
||
}
|
||
|
||
.r_esg_content {
|
||
position: relative;
|
||
|
||
// width: 1440px;
|
||
// height: 354px;
|
||
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.esg_content {
|
||
position: absolute;
|
||
top: 20%;
|
||
left: 15vw;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.esg_title {
|
||
font-family: AlibabaPuHuiTiM;
|
||
font-size: 38px;
|
||
font-weight: bold;
|
||
color: #222222;
|
||
line-height: 44px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-align: start;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.esg_sub_title {
|
||
width: 584px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #4b5b76;
|
||
display: flex;
|
||
text-align: start;
|
||
justify-content: flex-start;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.esg_btn {
|
||
width: 117px;
|
||
height: 44px;
|
||
background: #0779ff;
|
||
color: white;
|
||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #ffffff;
|
||
line-height: 22px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-top: 50px;
|
||
}
|
||
}
|
||
|
||
.tab {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 30px;
|
||
width: 100vw;
|
||
height: 50px;
|
||
justify-content: center;
|
||
|
||
.tab_item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
width: 120px;
|
||
height: 100%;
|
||
cursor: pointer;
|
||
|
||
img {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
text {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
line-height: 20px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
color: #000;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.active {
|
||
color: #0779ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab_bottom_line {
|
||
width: 100%;
|
||
height: 4px;
|
||
border-radius: 10px;
|
||
background: #0779ff;
|
||
}
|
||
|
||
.r_list {
|
||
width: 100vw;
|
||
display: flex;
|
||
text-align: center;
|
||
justify-content: center;
|
||
padding: 30px;
|
||
}
|
||
</style>
|