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

feat: 调整多个页面的样式和布局，优化用户界面体验

This commit is contained in:
傅光孟 2026-04-11 09:57:50 +08:00
parent 23304eccab
commit 38d425cfab
6 changed files with 110 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/pages/caixun/components/CaixunList.vue
View File

@ -44,7 +44,7 @@ onMounted(() => {
<style scoped lang="scss"> <style scoped lang="scss">
.list { .list {
width: 100%; width: 100%;
// height: 100%; height: 100%;
padding-right: 30px; padding-right: 30px;
} }

124
src/views/pages/caixun/index.vue
View File

@ -2,14 +2,14 @@
<div class="all" v-show="hadRole"> <div class="all" v-show="hadRole">
<!-- :class="{ 'scale-down': isScaleDown }" --> <!-- :class="{ 'scale-down': isScaleDown }" -->
<!-- height: isCommon ? '80vh' : '90vh' --> <!-- height: isCommon ? '80vh' : '90vh' -->
<div class="content" :style="{ top: isCommon ? '20vh' : '16vh' }"> <div class="content">
<div class="mb30" :class="{ 'scale-down': isScaleDown }"> <div>
<el-breadcrumb separator="/" class="font16"> <el-breadcrumb separator="/" class="font16">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>智能财讯</el-breadcrumb-item> <el-breadcrumb-item>智能财讯</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="top" v-if="isCommon" :class="{ 'scale-down': isScaleDown }"> <div class="top" v-if="isCommon">
<div class="top_left"> <div class="top_left">
<el-image :src="logo" mode="widthFix" class="logo" /> <el-image :src="logo" mode="widthFix" class="logo" />
<div class="sub_info"> <div class="sub_info">
@ -40,7 +40,7 @@
</div> </div>
<!-- maxHeight: isCommon ? '70vh' : '90vh' --> <!-- maxHeight: isCommon ? '70vh' : '90vh' -->
<div class="page_content" :class="{ 'scale-down': isScaleDown }" :style="{ marginTop: isScaleDown ? '0px' : '0px' }"> <div class="page_content">
<div class="left"> <div class="left">
<div class="r_list_big_title" v-if="!isCommon"> <div class="r_list_big_title" v-if="!isCommon">
<text class="list_big_title">智能财讯</text> <text class="list_big_title">智能财讯</text>
@ -51,7 +51,7 @@
<el-input <el-input
v-if="!isCommon" v-if="!isCommon"
:style="{ marginTop: isCommon ? '0px' : '40px' }" :style="{ margin: '40px 0 20px 0' }"
:prefix-icon="Search" :prefix-icon="Search"
placeholder="请输入公司证券代码或公司简称搜索" placeholder="请输入公司证券代码或公司简称搜索"
class="input" class="input"
@ -62,22 +62,14 @@
@keyup.enter="sreachLeft" @keyup.enter="sreachLeft"
/> />
<div v-loading="loadingLeft" style="margin-top: 30px"> <div v-loading="loadingLeft" class="r_list-box">
<div class="r_list"> <div class="r_list">
<CaixunList <CaixunList v-if="caixunList.length > 0" :data="caixunList" @openQrDialog="openQrDialog"> </CaixunList>
v-if="caixunList.length > 0"
:data="caixunList"
:style="{ marginTop: isCommon ? '0px' : '0px' }"
@openQrDialog="openQrDialog"
>
</CaixunList>
<div v-else class="r_empty"> <div v-else class="r_empty">
<el-image :src="emptyImg" class="empty"></el-image> <el-image :src="emptyImg" class="empty"></el-image>
<text class="empty_text">无搜索结果</text> <text class="empty_text">无搜索结果</text>
</div> </div>
</div> </div>
</div>
<div class="pagination" v-if="caixunList.length > 0"> <div class="pagination" v-if="caixunList.length > 0">
<el-pagination <el-pagination
style="width: 100%" style="width: 100%"
@ -94,6 +86,7 @@
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
</div>
<div class="right"> <div class="right">
<div class="r_list_big_title"> <div class="r_list_big_title">
@ -111,7 +104,7 @@
<el-input <el-input
v-if="!isCommon" v-if="!isCommon"
:style="{ marginTop: isCommon ? '0px' : '40px' }" :style="{ marginTop: '40px' }"
:prefix-icon="Search" :prefix-icon="Search"
placeholder="请输入公司证券代码或公司简称搜索" placeholder="请输入公司证券代码或公司简称搜索"
class="input" class="input"
@ -121,10 +114,10 @@
@keyup.enter="sreachRight" @keyup.enter="sreachRight"
/> />
<div v-loading="loadingRight"> <div v-loading="loadingRight" class="right_list_box">
<div <div
v-if="rightList.length > 0" v-if="rightList.length > 0"
style="gap: 10px; margin-top: 20px; display: flex; flex-direction: column; height: 53vh; overflow-y: auto; padding-right: 10px" style="flex: 1 1 0;gap: 10px; margin-top: 20px; display: flex; flex-direction: column; height: 100%; overflow-y: auto; padding-right: 10px"
> >
<div v-for="(item, index) in rightList" :key="index" class="right_item"> <div v-for="(item, index) in rightList" :key="index" class="right_item">
<div style="display: flex"> <div style="display: flex">
@ -142,7 +135,6 @@
<el-image :src="emptyImg" class="empty"></el-image> <el-image :src="emptyImg" class="empty"></el-image>
<text class="empty_text">请联系中证报经营老师生成企业的可视化财讯</text> <text class="empty_text">请联系中证报经营老师生成企业的可视化财讯</text>
</div> </div>
</div>
<div class="pagination" style="height: 40px"> <div class="pagination" style="height: 40px">
<el-pagination <el-pagination
@ -164,6 +156,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<el-dialog v-model="dialogVisible" title="微信扫一扫分享" width="230"> <el-dialog v-model="dialogVisible" title="微信扫一扫分享" width="230">
<div class="dialog"> <div class="dialog">
@ -180,8 +173,6 @@
import { ref, onMounted, nextTick, computed, onUnmounted, reactive } from 'vue'; import { ref, onMounted, nextTick, computed, onUnmounted, reactive } from 'vue';
import { Session } from '/@/utils/storage'; import { Session } from '/@/utils/storage';
import { NextLoading } from '/@/utils/loading'; import { NextLoading } from '/@/utils/loading';
import topBg from '../../../assets/caixun/home_bg_qiye.png';
import topBgJg from '../../../assets/caixun/home_bg_jianguan.png';
import logo from '../../../assets/caixun/company_logo.png'; import logo from '../../../assets/caixun/company_logo.png';
import { Search } from '@element-plus/icons-vue'; import { Search } from '@element-plus/icons-vue';
import CaixunList from './components/CaixunList.vue'; import CaixunList from './components/CaixunList.vue';
@ -210,7 +201,7 @@ const handleResize = () => {
isScaleDown.value = window.innerWidth < SCALE_THRESHOLD; isScaleDown.value = window.innerWidth < SCALE_THRESHOLD;
}; };
const isCommon = ref(Session.get('roleName') == 'common' || Session.get('roleName') == 'subCommon'); const isCommon = ref(Session.get('roleName') == 'common' && Session.get('roleName') == 'subCommon');
const tabIndex = ref(0); const tabIndex = ref(0);
const info = ref({ const info = ref({
company_name: Session.get('userData')?.companySimpleName, company_name: Session.get('userData')?.companySimpleName,
@ -401,7 +392,7 @@ onMounted(() => {
getLeftList(); getLeftList();
getRightList(); getRightList();
getRightTotal(); // getRightTotal();
if ( if (
(Session.get('roleName') == 'common' || Session.get('roleName') == 'subCommon') && (Session.get('roleName') == 'common' || Session.get('roleName') == 'subCommon') &&
(!Session.get('userData').smartInfoSwitch || (Session.get('userData').smartInfoSwitch && Session.get('userData').smartInfoSwitch == 0)) (!Session.get('userData').smartInfoSwitch || (Session.get('userData').smartInfoSwitch && Session.get('userData').smartInfoSwitch == 0))
@ -417,53 +408,40 @@ onUnmounted(() => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$maxWidth: 2000px;
/* 缩小状态 */
.scale-down {
/* 缩放内容 */
transform: scale(var(--scale-ratio, 0.9));
/* 计算缩放后的偏移量，使内容居中 */
transform-origin: top center;
/* 调整容器宽度，避免边缘被截断 */
width: calc(1 / var(--scale-ratio, 0.9) * 100%);
margin: 0 auto;
}
.all { .all {
width: 100vw; width: 100%;
height: 100vh; min-width: 950px;
height: calc(100vh - 60px);
min-height: 600px;
overflow: hidden; overflow: hidden;
background: url('/@/assets/images/bk_charts1.png') #f5f7fd no-repeat center 0; background: url('/@/assets/images/bk_charts1.png') #f5f7fd no-repeat center 0;
background-size: 100% auto; background-size: 100% auto;
// padding-bottom: 24px; // padding-bottom: 24px;
// padding: 20px 32px 32px; padding: 24px 32px;
} box-sizing: border-box;
.topbg {
width: 100%;
height: auto;
} }
.content { .content {
display: flex; display: flex;
box-sizing: border-box;
flex-direction: column; flex-direction: column;
position: fixed; height: 100%;
left: 50%; overflow: auto;
transform: translate(-50%, 0);
} }
.top { .top {
width: 80vw; // width: 80vw;
min-width: 1200px; width: 100%;
max-width: $maxWidth; // height: 117px;
height: 117px;
background: linear-gradient(180deg, #e7effa 0%, #fafbfb 100%); background: linear-gradient(180deg, #e7effa 0%, #fafbfb 100%);
box-shadow: 0px 2px 12px 0px rgba(186, 193, 205, 0.5), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5); box-shadow: 0px 2px 12px 0px rgba(186, 193, 205, 0.5), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 20px 0;
box-sizing: border-box;
margin-top: 20px;
.top_left { .top_left {
display: flex; display: flex;
@ -472,11 +450,10 @@ $maxWidth: 2000px;
} }
.logo { .logo {
width: 118px; width: 90px;
height: 118px; height: 90px;
background: #e46713; background: #e46713;
margin-left: 30px; margin-left: 30px;
margin-top: -20px;
} }
.sub_info { .sub_info {
@ -558,19 +535,23 @@ $maxWidth: 2000px;
} }
.page_content { .page_content {
width: 80vw; width: 100%;
max-width: $maxWidth; height: 100%;
min-width: 1200px; flex: 1 1 0;
display: flex; display: flex;
gap: 15px; gap: 15px;
margin-top: 15px; margin-top: 20px;
overflow: hidden;
.left { .left {
width: 70%; width: 70%;
height: 100%;
border-radius: 10px; border-radius: 10px;
padding: 30px 30px; padding: 30px 30px;
padding-bottom: 0;
background-color: white; background-color: white;
box-sizing: border-box;
display: flex;
flex-direction: column;
} }
.input { .input {
@ -587,11 +568,16 @@ $maxWidth: 2000px;
font-style: normal; font-style: normal;
} }
.r_list-box {
flex: 1 1 0;
height: 100%;
display: flex;
flex-direction: column;
}
.r_list { .r_list {
// height: 57vh; flex: 1 1 0;
// overflow: auto; overflow-y: auto;
max-height: 55vh;
overflow-y: scroll;
} }
.pagination { .pagination {
@ -606,9 +592,18 @@ $maxWidth: 2000px;
.right { .right {
width: 30%; width: 30%;
height: 100%;
background-color: white; background-color: white;
border-radius: 10px; border-radius: 10px;
flex: 1; display: flex;
flex-direction: column;
.right_list_box {
flex: 1 1 0;
height: 100%;
display: flex;
flex-direction: column;
}
} }
.r_line { .r_line {
@ -629,6 +624,7 @@ $maxWidth: 2000px;
.r_list_big_title { .r_list_big_title {
height: 50px; height: 50px;
flex: 0 0 50px;
} }
.list_big_title { .list_big_title {

2
src/views/pages/electronicContract/document.vue
View File

@ -349,7 +349,7 @@ onMounted(async () => {
width: 100%; width: 100%;
min-height: calc(100vh - 56px); min-height: calc(100vh - 56px);
margin: 0 auto; margin: 0 auto;
padding: 30px 11%; padding: 24px 32px;
background: url('/@/assets/images/bk_charts1.png') #f5f7fd no-repeat center 0; background: url('/@/assets/images/bk_charts1.png') #f5f7fd no-repeat center 0;
background-size: 100% auto; background-size: 100% auto;
} }

3
src/views/pages/index/admin/index.vue
View File

@ -828,7 +828,8 @@ async function reSendFile(row) {
margin: 0 auto; margin: 0 auto;
// background: url('/@/assets/images/bk_charts.png') no-repeat center 0; // background: url('/@/assets/images/bk_charts.png') no-repeat center 0;
// padding-bottom: 24px; // padding-bottom: 24px;
padding: 24px; padding: 24px 32px;
box-sizing: border-box;
.main-title { .main-title {
font-family: 'Alip-SemiBold'; font-family: 'Alip-SemiBold';

6
src/views/pages/index/common/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="container"> <div class="container">
<div class="w1400"> <div class="">
<div class="mt20"> <div class="">
<el-breadcrumb separator="/" class="font16"> <el-breadcrumb separator="/" class="font16">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>智能检校</el-breadcrumb-item> <el-breadcrumb-item>智能检校</el-breadcrumb-item>
@ -710,6 +710,7 @@ onUnmounted(() => {
margin: 0 auto; margin: 0 auto;
background: url('/@/assets/images/bk_charts1.png') #f5f7fd no-repeat center 0; background: url('/@/assets/images/bk_charts1.png') #f5f7fd no-repeat center 0;
background-size: 100% auto; background-size: 100% auto;
padding: 24px 32px;
} }
:deep(.el-form-item--large .el-form-item__label) { :deep(.el-form-item--large .el-form-item__label) {
@ -722,7 +723,6 @@ onUnmounted(() => {
box-shadow: 0 12px 32px -2px rgba(206, 208, 211, 0.8); box-shadow: 0 12px 32px -2px rgba(206, 208, 211, 0.8);
border-radius: 0 4px 4px 4px; border-radius: 0 4px 4px 4px;
padding: 0 24px 24px; padding: 0 24px 24px;
margin: 24px 0;
} }
.btn_content { .btn_content {

23
src/views/pages/yuqingFLS/index.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="container" ref="boxRef"> <div class="container">
<div class="mb20" style="padding: 0 20px"> <div class="mb20">
<el-breadcrumb separator="/" class="font16"> <el-breadcrumb separator="/" class="font16">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>企业舆情</el-breadcrumb-item> <el-breadcrumb-item>企业舆情</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="all" v-loading="loading"> <div ref="boxRef" class="all" v-loading="loading">
<div class="bk"> <div class="bk">
<div class="r_input"> <div class="r_input">
<el-dropdown trigger="click" @command="handleCommand" style="margin-left: 15px"> <el-dropdown trigger="click" @command="handleCommand" style="margin-left: 15px">
@ -254,8 +254,10 @@ const style = reactive({
}); });
const styleWidth = computed(() => { const styleWidth = computed(() => {
if (boxRef.value?.clientWidth >= 1280) { console.log('output >>>>> boxRef.value?.clientWidth >= 1440',boxRef.value?.clientWidth);
const width = (boxRef.value?.clientWidth - 40 - 3 * style.margin) / 4;
if (boxRef.value?.clientWidth >= 1080) {
const width = (boxRef.value?.clientWidth - 3 * style.margin) / 4;
style.width = width; style.width = width;
} }
@ -263,8 +265,8 @@ const styleWidth = computed(() => {
}); });
const styleHeight = computed(() => { const styleHeight = computed(() => {
if (boxRef.value?.clientWidth >= 1280) { if (boxRef.value?.clientWidth >= 1080) {
const width = (boxRef.value?.clientWidth - 40 - 3 * style.margin) / 4; const width = (boxRef.value?.clientWidth - 3 * style.margin) / 4;
style.height = (width / 285) * 162; style.height = (width / 285) * 162;
} }
@ -291,12 +293,13 @@ onMounted(() => {
background: url('/@/assets/images/bk_charts1.png') #f5f7fd no-repeat center 0; background: url('/@/assets/images/bk_charts1.png') #f5f7fd no-repeat center 0;
background-size: 100% auto; background-size: 100% auto;
// padding-bottom: 24px; // padding-bottom: 24px;
padding: 20px 0 32px; padding: 20px 32px 32px;
min-height: calc(100vh - 56px); min-height: calc(100vh - 56px);
box-sizing: border-box;
} }
.all { .all {
width: 100vw; // width: 100vw;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -414,7 +417,7 @@ input::placeholder {
gap: 20px; gap: 20px;
// max-width: calc(285px * 4 + 20px * 3); // max-width: calc(285px * 4 + 20px * 3);
// width: calc(285px * 4 + 20px * 3); // width: calc(285px * 4 + 20px * 3);
padding: 30px 20px; padding: 30px 0;
} }
.list_item { .list_item {