odjbin/mosr-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix : 优化首页样式

Browse Source
This commit is contained in:
odjbin
2024-09-19 00:26:05 +08:00
parent e527deabd5
commit b3fe207469
2 changed files with 118 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/styles/index.scss
View File

@@ -475,8 +475,8 @@ html, body, #app, .el-container, .el-aside, .el-main {
height: 1.7em; height: 1.7em;
} }
.home-time{ .home-time{
width: 1.5em; width: 1.4em;
height: 1.5em; height: 1.4em;
margin-right: 5px; margin-right: 5px;
} }
.middle-icon { .middle-icon {

194
src/views/home/index.vue
View File

@@ -43,11 +43,13 @@
<el-empty image-size="135" description="暂无已办数据~"/> <el-empty image-size="135" description="暂无已办数据~"/>
</div> </div>
<div v-for="item in todoList" class="todo-border"> <div v-for="item in todoList" class="todo-border">
<div class="status" <!-- <div class="status-style"-->
:style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}"> <!-- :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">-->
{{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }} <!-- {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}-->
<!-- </div>-->
<div class="status-style">
{{item.targetState}}
</div> </div>
<div class="process-type">流程类型：{{ item.targetState }}</div>
<div class="black-text">发起人：{{ item.initiatorName }}</div> <div class="black-text">发起人：{{ item.initiatorName }}</div>
<div class="black-text">当前节点：{{ item.taskName }}</div> <div class="black-text">当前节点：{{ item.taskName }}</div>
<div class="gray-time"> <div class="gray-time">
@@ -57,6 +59,7 @@
<span>提交时间：</span> <span>提交时间：</span>
</div> </div>
<div class="time"> {{ item.submitTime }}</div> <div class="time"> {{ item.submitTime }}</div>
<div class="time">时间要求 {{ item.totalTime }}天</div>
</div> </div>
<div class="view">查看</div> <div class="view">查看</div>
</div> </div>
@@ -75,11 +78,13 @@
<el-empty image-size="135" description="暂无已办数据~"/> <el-empty image-size="135" description="暂无已办数据~"/>
</div> </div>
<div v-for="item in doneList" class="todo-border"> <div v-for="item in doneList" class="todo-border">
<div class="status" <!-- <div class="status-style"-->
:style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}"> <!-- :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">-->
{{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }} <!-- {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}-->
<!-- </div>-->
<div class="status-style">
{{item.targetState}}
</div> </div>
<div class="process-type">流程类型：{{ item.targetState }}</div>
<div class="black-text">发起人：{{ item.initiatorName }}</div> <div class="black-text">发起人：{{ item.initiatorName }}</div>
<div class="black-text">当前节点：{{ item.taskName }}</div> <div class="black-text">当前节点：{{ item.taskName }}</div>
<div class="gray-time"> <div class="gray-time">
@@ -197,8 +202,12 @@
<el-tab-pane label="规章制度" name="first"> <el-tab-pane label="规章制度" name="first">
<div class="notice-block rules-block"> <div class="notice-block rules-block">
<div v-for="(item,index) in rulesList" class="notice"> <div v-for="(item,index) in rulesList" class="notice">
<div> <!-- <div>-->
<span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }} <!-- <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}-->
<!-- </div>-->
<div :style="{'color': item.isRead ? '#1F63E6' : 'rgba(0,0,0,0.5)'}">
<span>{{ item.title }}</span>
<span class="dot" v-if="item.isRead"></span>
</div> </div>
<div>2018-05-06</div> <div>2018-05-06</div>
</div> </div>
@@ -210,8 +219,11 @@
<el-empty image-size="135" description="暂无帮助文档~"/> <el-empty image-size="135" description="暂无帮助文档~"/>
</div> </div>
<div v-for="(item,index) in helpDocList" class="notice"> <div v-for="(item,index) in helpDocList" class="notice">
<!-- <div>-->
<!-- <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}-->
<!-- </div>-->
<div> <div>
<span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }} {{ item.title }}
</div> </div>
<div>2018-05-06</div> <div>2018-05-06</div>
</div> </div>
@@ -220,10 +232,11 @@
<el-tab-pane label="常见问题" name="third"> <el-tab-pane label="常见问题" name="third">
<div class="notice-block rules-block"> <div class="notice-block rules-block">
<div v-for="(item,index) in problemList" class="notice"> <div v-for="(item,index) in problemList" class="notice">
<!-- <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>-->
<div> <div>
<span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }} {{ item.title }}
</div> </div>
<!-- <span class="dot" v-if="item.isRead"></span>-->
<div>2018-05-06</div> <div>2018-05-06</div>
</div> </div>
</div> </div>
@@ -306,6 +319,7 @@ const todoList = ref([
initiatorName: '胡晓', initiatorName: '胡晓',
taskName: '审批人', taskName: '审批人',
submitTime: '2024-08-07 19:00:01', submitTime: '2024-08-07 19:00:01',
totalTime: '10',
}, },
{ {
status: 1, status: 1,
@@ -313,6 +327,7 @@ const todoList = ref([
initiatorName: '胡晓', initiatorName: '胡晓',
taskName: '审批人', taskName: '审批人',
submitTime: '2024-08-07 19:00:01', submitTime: '2024-08-07 19:00:01',
totalTime: '10',
}, },
{ {
status: 2, status: 2,
@@ -320,6 +335,7 @@ const todoList = ref([
initiatorName: '胡晓', initiatorName: '胡晓',
taskName: '审批人', taskName: '审批人',
submitTime: '2024-08-07 19:00:01', submitTime: '2024-08-07 19:00:01',
totalTime: '10',
}, },
{ {
status: 0, status: 0,
@@ -327,6 +343,7 @@ const todoList = ref([
initiatorName: '胡晓', initiatorName: '胡晓',
taskName: '审批人', taskName: '审批人',
submitTime: '2024-08-07 19:00:01', submitTime: '2024-08-07 19:00:01',
totalTime: '10',
}, },
{ {
status: 1, status: 1,
@@ -334,6 +351,7 @@ const todoList = ref([
initiatorName: '胡晓', initiatorName: '胡晓',
taskName: '审批人', taskName: '审批人',
submitTime: '2024-08-07 19:00:01', submitTime: '2024-08-07 19:00:01',
totalTime: '10',
}, },
{ {
status: 2, status: 2,
@@ -341,6 +359,7 @@ const todoList = ref([
initiatorName: '胡晓', initiatorName: '胡晓',
taskName: '审批人', taskName: '审批人',
submitTime: '2024-08-07 19:00:01', submitTime: '2024-08-07 19:00:01',
totalTime: '10',
}, },
]) ])
const noticeList = ref([ const noticeList = ref([
@@ -391,7 +410,7 @@ const rulesList = ref([
}, },
{ {
title: '系统升级通知，期间部分服务将暂停', title: '系统升级通知，期间部分服务将暂停',
isRead: false isRead: true
}, },
{ {
title: '系统升级通知，期间部分服务将暂停', title: '系统升级通知，期间部分服务将暂停',
@@ -626,22 +645,22 @@ const fundPieOption = ref({
icon: 'circle', icon: 'circle',
textStyle: { textStyle: {
color: 'rgba(0,0,0,0.6)', color: 'rgba(0,0,0,0.6)',
fontSize: '14px' fontSize: '12px'
},
formatter: function (name) {
let data = fundPieOption.value.series[0].data
let total = 0
let tarValue
for (let i = 0; i < data.length; i++) {
total += data[i].value
if (data[i].name == name) {
tarValue = data[i].value
}
}
let v = tarValue
let p = ((tarValue / total) * 100).toFixed(2)
return `${name} ${v} ${p}%`
}, },
// formatter: function (name) {
// let data = fundPieOption.value.series[0].data
// let total = 0
// let tarValue
// for (let i = 0; i < data.length; i++) {
// total += data[i].value
// if (data[i].name == name) {
// tarValue = data[i].value
// }
// }
// let v = tarValue
// let p = ((tarValue / total) * 100).toFixed(2)
// return `${name} ${v} ${p}%`
// },
}, },
graphic: { //图形中间图片 graphic: { //图形中间图片
elements: [{ elements: [{
@@ -659,12 +678,16 @@ const fundPieOption = ref({
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: [75, 100], radius: [65, 90],
center: ['50%', '50%'], center: ['50%', '50%'],
top: '10%', top: '10%',
left:'8', left:'8',
label: { label: {
show: false, show: true,
formatter: '{b}\n{d}%'
// formatter: params => {
// console.log(params)
// },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
@@ -690,8 +713,8 @@ const fundPieOption = ref({
} }
}, },
data: [ data: [
{value: 75, name: '专项资金',}, {value: 75, name: '专项资金',label:{color:'#6201FF'}},
{value: 20, name: '非专项资金', selected: true}, {value: 20, name: '非专项资金',label:{color:'#1AA4AD'}, selected: true},
], ],
}, },
{ {
@@ -701,7 +724,7 @@ const fundPieOption = ref({
left:'8', left:'8',
clockWise: false, clockWise: false,
hoverAnimation: false, hoverAnimation: false,
radius: ['80%', '80%'],//边框大小 radius: ['70%', '70%'],//边框大小
center: ['50%', '50%'],//边框位置 center: ['50%', '50%'],//边框位置
tooltip: { tooltip: {
show: false show: false
@@ -733,7 +756,7 @@ const moneyPieOption = ref({
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: [0, 100], radius: [0, 90],
center: ['50%', '50%'], center: ['50%', '50%'],
label: { label: {
normal: { normal: {
@@ -938,7 +961,7 @@ const handleView = (row) => {
.total-money { .total-money {
height: 25px; height: 25px;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 15px;
color: #000000; color: #000000;
line-height: 18px; line-height: 18px;
} }
@@ -950,13 +973,13 @@ const handleView = (row) => {
> div:last-child { > div:last-child {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 15px;
color: #000000; color: #000000;
letter-spacing: 1px; letter-spacing: 1px;
} }
.company-name { .company-name {
font-size: 14px; font-size: 12px;
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);
letter-spacing: 1px; letter-spacing: 1px;
margin-left: 10px; margin-left: 10px;
@@ -1005,14 +1028,13 @@ const handleView = (row) => {
:deep(.el-tabs__nav-wrap:after) { :deep(.el-tabs__nav-wrap:after) {
background-color: #D9D9D9 !important; background-color: #D9D9D9 !important;
height: 1px !important; height: 2px !important;
} }
:deep(.el-tabs__active-bar) { :deep(.el-tabs__active-bar) {
height: 1px !important; height: 2px !important;
//background-color: #1476E3 !important; background-color: #1476E3 !important;
} }
:deep(.el-tabs__new-tab ) { :deep(.el-tabs__new-tab ) {
width: auto !important; width: auto !important;
border: none !important; border: none !important;
@@ -1042,14 +1064,15 @@ const handleView = (row) => {
flex: 1; flex: 1;
font-size: 16px; font-size: 16px;
width: 120px; width: 120px;
font-weight: 600; //font-weight: 600;
height: 51px; height: 51px;
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
} }
.el-tabs__item.is-active { .el-tabs__item.is-active {
color: #1476E3; color: #1F63E6;
} }
//#1476E3
} }
} }
@@ -1156,14 +1179,15 @@ const handleView = (row) => {
.gray-time { .gray-time {
display: flex; display: flex;
flex-direction: column;
align-items: flex-end; align-items: flex-end;
font-weight: 400; font-weight: 400;
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
letter-spacing: 1px; letter-spacing: 1px;
font-size: 14px; font-size: 12px;
.view { .view {
float: right; //float: right;
color: #1F63E6; color: #1F63E6;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
@@ -1184,6 +1208,9 @@ const handleView = (row) => {
.time { .time {
margin-left: 23px; margin-left: 23px;
&:last-child{
white-space: nowrap;
}
} }
} }
@@ -1191,6 +1218,7 @@ const handleView = (row) => {
white-space: nowrap; white-space: nowrap;
color: #000000; color: #000000;
margin-bottom: 7px; margin-bottom: 7px;
font-size: 12px;
} }
.process-type { .process-type {
@@ -1201,15 +1229,18 @@ const handleView = (row) => {
letter-spacing: 1px; letter-spacing: 1px;
} }
.status { .status-style {
width: 52px; padding: 0 8px;
display: inline-block;
height: 23px; height: 23px;
border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px;
font-size: 13px; font-size: 12px;
color: #FFFFFF; color: #FFFFFF;
line-height: 23px; line-height: 23px;
letter-spacing: 1px; letter-spacing: 1px;
text-align: center; text-align: center;
background-color: #2a99ff;
margin-bottom: 14px;
} }
} }
} }
@@ -1252,17 +1283,17 @@ const handleView = (row) => {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
color: #fff; color: #fff;
font-size: 16px; font-size: 13px;
> span:first-child { > span:first-child {
white-space: nowrap; white-space: nowrap;
font-size: 26px; font-size: 36px;
font-weight: bold; font-weight: bold;
margin-bottom: 10px; margin-bottom: 10px;
> span { > span {
margin-left: 10px; margin-left: 10px;
font-size: 16px; font-size: 13px;
} }
} }
@@ -1291,37 +1322,44 @@ const handleView = (row) => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 42px !important; height: 47px !important;
line-height: 42px !important; line-height: 47px !important;
color: rgba(0, 0, 0, 0.5) !important; color: rgba(0, 0, 0, 0.5) !important;
.dot { >div:first-child {
display: inline-block; position: relative;
width: 6px;
height: 6px;
border-radius: 25px;
background: #DD3B3B;
margin-left: -6px;
margin-bottom: 5px;
margin-right: 4px;
}
div:first-child {
width: 80% !important;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
> span:first-child { &:hover {
margin-right: 10px;
color: #1476E3; color: #1476E3;
font-weight: bold; background: #F6FBFE;
font-size: 16px;
margin-left: 0 !important;
} }
> span:first-child {
//width: 80% !important;
margin-right: 4px;
}
.dot {
position: absolute;
right: 0;
top: 14px;
display: inline-block;
width: 6px;
height: 6px;
border-radius: 25px;
background: #DD3B3B;
//margin-left: -6px;
//margin-bottom: 5px;
//margin-right: 4px;
}
} }
div:last-child { div:last-child {
margin-left: 20px;
font-weight: 400; font-weight: 400;
letter-spacing: 1px; letter-spacing: 1px;
color: rgba(0, 0, 0, 0.5) color: rgba(0, 0, 0, 0.5)
@@ -1332,7 +1370,7 @@ const handleView = (row) => {
.notice-block { .notice-block {
height: 452px; height: 452px;
overflow-y: auto; overflow-y: auto;
margin-top: 10px; //margin-top: 10px;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 6px; width: 6px;
@@ -1353,10 +1391,10 @@ const handleView = (row) => {
.notice { .notice {
min-width: 300px; min-width: 300px;
height: 65px; height: 75px;
line-height: 65px; line-height: 75px;
padding: 0 15px; padding: 0 15px;
font-size: 15px; font-size: 12px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -1394,7 +1432,7 @@ const handleView = (row) => {
.fund-pie { .fund-pie {
width: 100%; width: 100%;
height: 25px; height: 25px;
font-size: 14px; font-size: 12px;
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
text-align: center; text-align: center;
//margin-top: 15px; //margin-top: 15px;
@@ -1423,7 +1461,7 @@ const handleView = (row) => {
> span { > span {
white-space: nowrap; white-space: nowrap;
color: #000000; color: #000000;
font-weight: 600; //font-weight: 600;
} }
} }