feat: 调整多个页面的样式和布局，优化用户界面体验
This commit is contained in:
parent
23304eccab
commit
38d425cfab
|
|
@ -44,7 +44,7 @@ onMounted(() => {
|
|||
<style scoped lang="scss">
|
||||
.list {
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
height: 100%;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@
|
|||
<div class="all" v-show="hadRole">
|
||||
<!-- :class="{ 'scale-down': isScaleDown }" -->
|
||||
<!-- height: isCommon ? '80vh' : '90vh' -->
|
||||
<div class="content" :style="{ top: isCommon ? '20vh' : '16vh' }">
|
||||
<div class="mb30" :class="{ 'scale-down': isScaleDown }">
|
||||
<div class="content">
|
||||
<div>
|
||||
<el-breadcrumb separator="/" class="font16">
|
||||
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>智能财讯</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="top" v-if="isCommon" :class="{ 'scale-down': isScaleDown }">
|
||||
<div class="top" v-if="isCommon">
|
||||
<div class="top_left">
|
||||
<el-image :src="logo" mode="widthFix" class="logo" />
|
||||
<div class="sub_info">
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
</div>
|
||||
|
||||
<!-- 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="r_list_big_title" v-if="!isCommon">
|
||||
<text class="list_big_title">智能财讯</text>
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
|
||||
<el-input
|
||||
v-if="!isCommon"
|
||||
:style="{ marginTop: isCommon ? '0px' : '40px' }"
|
||||
:style="{ margin: '40px 0 20px 0' }"
|
||||
:prefix-icon="Search"
|
||||
placeholder="请输入公司证券代码或公司简称搜索"
|
||||
class="input"
|
||||
|
|
@ -62,36 +62,29 @@
|
|||
@keyup.enter="sreachLeft"
|
||||
/>
|
||||
|
||||
<div v-loading="loadingLeft" style="margin-top: 30px">
|
||||
<div v-loading="loadingLeft" class="r_list-box">
|
||||
<div class="r_list">
|
||||
<CaixunList
|
||||
v-if="caixunList.length > 0"
|
||||
:data="caixunList"
|
||||
:style="{ marginTop: isCommon ? '0px' : '0px' }"
|
||||
@openQrDialog="openQrDialog"
|
||||
>
|
||||
</CaixunList>
|
||||
<CaixunList v-if="caixunList.length > 0" :data="caixunList" @openQrDialog="openQrDialog"> </CaixunList>
|
||||
<div v-else class="r_empty">
|
||||
<el-image :src="emptyImg" class="empty"></el-image>
|
||||
<text class="empty_text">无搜索结果</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pagination" v-if="caixunList.length > 0">
|
||||
<el-pagination
|
||||
style="width: 100%"
|
||||
background
|
||||
layout="slot, ->,prev, pager, next, jumper"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
v-model:page-size="leftForm.size"
|
||||
:total="leftForm.total"
|
||||
v-model:current-page="leftForm.page"
|
||||
@current-change="currentChangeLeft"
|
||||
@size-change="sizeChangeLeft"
|
||||
>
|
||||
<div style="font-size: 14px; color: rgba(0, 0, 0, 0.6)">共 {{ leftForm.total }} 项数据</div>
|
||||
</el-pagination>
|
||||
<div class="pagination" v-if="caixunList.length > 0">
|
||||
<el-pagination
|
||||
style="width: 100%"
|
||||
background
|
||||
layout="slot, ->,prev, pager, next, jumper"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
v-model:page-size="leftForm.size"
|
||||
:total="leftForm.total"
|
||||
v-model:current-page="leftForm.page"
|
||||
@current-change="currentChangeLeft"
|
||||
@size-change="sizeChangeLeft"
|
||||
>
|
||||
<div style="font-size: 14px; color: rgba(0, 0, 0, 0.6)">共 {{ leftForm.total }} 项数据</div>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -111,7 +104,7 @@
|
|||
|
||||
<el-input
|
||||
v-if="!isCommon"
|
||||
:style="{ marginTop: isCommon ? '0px' : '40px' }"
|
||||
:style="{ marginTop: '40px' }"
|
||||
:prefix-icon="Search"
|
||||
placeholder="请输入公司证券代码或公司简称搜索"
|
||||
class="input"
|
||||
|
|
@ -121,10 +114,10 @@
|
|||
@keyup.enter="sreachRight"
|
||||
/>
|
||||
|
||||
<div v-loading="loadingRight">
|
||||
<div v-loading="loadingRight" class="right_list_box">
|
||||
<div
|
||||
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 style="display: flex">
|
||||
|
|
@ -142,24 +135,24 @@
|
|||
<el-image :src="emptyImg" class="empty"></el-image>
|
||||
<text class="empty_text">请联系中证报经营老师生成企业的可视化财讯</text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pagination" style="height: 40px">
|
||||
<el-pagination
|
||||
v-if="rightForm.total > 10"
|
||||
style="width: 100%"
|
||||
background
|
||||
layout="slot, ->,prev, pager, next"
|
||||
small
|
||||
pager-count="3"
|
||||
v-model:page-size="rightForm.size"
|
||||
:total="rightForm.total"
|
||||
v-model:current-page="rightForm.page"
|
||||
@current-change="currentChangeRight"
|
||||
@size-change="sizeChangeRight"
|
||||
>
|
||||
<div style="font-size: 14px; color: rgba(0, 0, 0, 0.6)" v-if="rightForm.total < 10000">共 {{ rightForm.total }} 项数据</div>
|
||||
</el-pagination>
|
||||
<div class="pagination" style="height: 40px">
|
||||
<el-pagination
|
||||
v-if="rightForm.total > 10"
|
||||
style="width: 100%"
|
||||
background
|
||||
layout="slot, ->,prev, pager, next"
|
||||
small
|
||||
pager-count="3"
|
||||
v-model:page-size="rightForm.size"
|
||||
:total="rightForm.total"
|
||||
v-model:current-page="rightForm.page"
|
||||
@current-change="currentChangeRight"
|
||||
@size-change="sizeChangeRight"
|
||||
>
|
||||
<div style="font-size: 14px; color: rgba(0, 0, 0, 0.6)" v-if="rightForm.total < 10000">共 {{ rightForm.total }} 项数据</div>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -180,8 +173,6 @@
|
|||
import { ref, onMounted, nextTick, computed, onUnmounted, reactive } from 'vue';
|
||||
import { Session } from '/@/utils/storage';
|
||||
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 { Search } from '@element-plus/icons-vue';
|
||||
import CaixunList from './components/CaixunList.vue';
|
||||
|
|
@ -210,7 +201,7 @@ const handleResize = () => {
|
|||
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 info = ref({
|
||||
company_name: Session.get('userData')?.companySimpleName,
|
||||
|
|
@ -401,7 +392,7 @@ onMounted(() => {
|
|||
|
||||
getLeftList();
|
||||
getRightList();
|
||||
getRightTotal();
|
||||
// getRightTotal();
|
||||
if (
|
||||
(Session.get('roleName') == 'common' || Session.get('roleName') == 'subCommon') &&
|
||||
(!Session.get('userData').smartInfoSwitch || (Session.get('userData').smartInfoSwitch && Session.get('userData').smartInfoSwitch == 0))
|
||||
|
|
@ -417,53 +408,40 @@ onUnmounted(() => {
|
|||
</script>
|
||||
|
||||
<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 {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
min-width: 950px;
|
||||
height: calc(100vh - 60px);
|
||||
min-height: 600px;
|
||||
overflow: hidden;
|
||||
background: url('/@/assets/images/bk_charts1.png') #f5f7fd no-repeat center 0;
|
||||
background-size: 100% auto;
|
||||
// padding-bottom: 24px;
|
||||
// padding: 20px 32px 32px;
|
||||
}
|
||||
|
||||
.topbg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.top {
|
||||
width: 80vw;
|
||||
min-width: 1200px;
|
||||
max-width: $maxWidth;
|
||||
height: 117px;
|
||||
// width: 80vw;
|
||||
width: 100%;
|
||||
// height: 117px;
|
||||
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);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20px;
|
||||
|
||||
.top_left {
|
||||
display: flex;
|
||||
|
|
@ -472,11 +450,10 @@ $maxWidth: 2000px;
|
|||
}
|
||||
|
||||
.logo {
|
||||
width: 118px;
|
||||
height: 118px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background: #e46713;
|
||||
margin-left: 30px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.sub_info {
|
||||
|
|
@ -558,19 +535,23 @@ $maxWidth: 2000px;
|
|||
}
|
||||
|
||||
.page_content {
|
||||
width: 80vw;
|
||||
max-width: $maxWidth;
|
||||
min-width: 1200px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1 1 0;
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-top: 15px;
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
.left {
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
padding: 30px 30px;
|
||||
padding-bottom: 0;
|
||||
background-color: white;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.input {
|
||||
|
|
@ -587,11 +568,16 @@ $maxWidth: 2000px;
|
|||
font-style: normal;
|
||||
}
|
||||
|
||||
.r_list-box {
|
||||
flex: 1 1 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.r_list {
|
||||
// height: 57vh;
|
||||
// overflow: auto;
|
||||
max-height: 55vh;
|
||||
overflow-y: scroll;
|
||||
flex: 1 1 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
|
|
@ -606,9 +592,18 @@ $maxWidth: 2000px;
|
|||
|
||||
.right {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
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 {
|
||||
|
|
@ -629,6 +624,7 @@ $maxWidth: 2000px;
|
|||
|
||||
.r_list_big_title {
|
||||
height: 50px;
|
||||
flex: 0 0 50px;
|
||||
}
|
||||
|
||||
.list_big_title {
|
||||
|
|
|
|||
|
|
@ -349,7 +349,7 @@ onMounted(async () => {
|
|||
width: 100%;
|
||||
min-height: calc(100vh - 56px);
|
||||
margin: 0 auto;
|
||||
padding: 30px 11%;
|
||||
padding: 24px 32px;
|
||||
background: url('/@/assets/images/bk_charts1.png') #f5f7fd no-repeat center 0;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -828,7 +828,8 @@ async function reSendFile(row) {
|
|||
margin: 0 auto;
|
||||
// background: url('/@/assets/images/bk_charts.png') no-repeat center 0;
|
||||
// padding-bottom: 24px;
|
||||
padding: 24px;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.main-title {
|
||||
font-family: 'Alip-SemiBold';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="w1400">
|
||||
<div class="mt20">
|
||||
<div class="">
|
||||
<div class="">
|
||||
<el-breadcrumb separator="/" class="font16">
|
||||
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>智能检校</el-breadcrumb-item>
|
||||
|
|
@ -710,6 +710,7 @@ onUnmounted(() => {
|
|||
margin: 0 auto;
|
||||
background: url('/@/assets/images/bk_charts1.png') #f5f7fd no-repeat center 0;
|
||||
background-size: 100% auto;
|
||||
padding: 24px 32px;
|
||||
}
|
||||
|
||||
: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);
|
||||
border-radius: 0 4px 4px 4px;
|
||||
padding: 0 24px 24px;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.btn_content {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="container" ref="boxRef">
|
||||
<div class="mb20" style="padding: 0 20px">
|
||||
<div class="container">
|
||||
<div class="mb20">
|
||||
<el-breadcrumb separator="/" class="font16">
|
||||
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>企业舆情</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="all" v-loading="loading">
|
||||
<div ref="boxRef" class="all" v-loading="loading">
|
||||
<div class="bk">
|
||||
<div class="r_input">
|
||||
<el-dropdown trigger="click" @command="handleCommand" style="margin-left: 15px">
|
||||
|
|
@ -254,8 +254,10 @@ const style = reactive({
|
|||
});
|
||||
|
||||
const styleWidth = computed(() => {
|
||||
if (boxRef.value?.clientWidth >= 1280) {
|
||||
const width = (boxRef.value?.clientWidth - 40 - 3 * style.margin) / 4;
|
||||
console.log('output >>>>> boxRef.value?.clientWidth >= 1440',boxRef.value?.clientWidth);
|
||||
|
||||
if (boxRef.value?.clientWidth >= 1080) {
|
||||
const width = (boxRef.value?.clientWidth - 3 * style.margin) / 4;
|
||||
style.width = width;
|
||||
}
|
||||
|
||||
|
|
@ -263,8 +265,8 @@ const styleWidth = computed(() => {
|
|||
});
|
||||
|
||||
const styleHeight = computed(() => {
|
||||
if (boxRef.value?.clientWidth >= 1280) {
|
||||
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.height = (width / 285) * 162;
|
||||
}
|
||||
|
||||
|
|
@ -291,12 +293,13 @@ onMounted(() => {
|
|||
background: url('/@/assets/images/bk_charts1.png') #f5f7fd no-repeat center 0;
|
||||
background-size: 100% auto;
|
||||
// padding-bottom: 24px;
|
||||
padding: 20px 0 32px;
|
||||
padding: 20px 32px 32px;
|
||||
min-height: calc(100vh - 56px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.all {
|
||||
width: 100vw;
|
||||
// width: 100vw;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -414,7 +417,7 @@ input::placeholder {
|
|||
gap: 20px;
|
||||
// max-width: calc(285px * 4 + 20px * 3);
|
||||
// width: calc(285px * 4 + 20px * 3);
|
||||
padding: 30px 20px;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.list_item {
|
||||
|
|
|
|||
Loading…
Reference in New Issue