Browse Source

首页样式微调

feature
mk 2 years ago
parent
commit
35003eaed3
  1. 33
      src/assets/scss/modules/index.scss
  2. 44
      src/views/modules/home/index.vue

33
src/assets/scss/modules/index.scss

@ -46,7 +46,7 @@
position: relative;
// position: fixed;
padding-left: 14px;
height: 30px;
height: 16px;
margin-right: 10px;
font-size: 15px;
z-index: 1;
@ -109,13 +109,12 @@
}
.header {
padding: 4px 0;
font-size: 15px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
line-height: 17px;
margin-top: 10px;
margin-top: 16px;
margin-left: 10px;
>img {
@ -128,7 +127,7 @@
.newqsa {
border-left: 4px solid #2683DB;
height: 70%;
height: 100%;
// width: 4px;
margin-left: -10px;
padding-left: 8px;
@ -155,28 +154,26 @@
.m-search {
box-sizing: border-box;
padding: 40px 80px;
padding: 0px 16px;
margin-bottom: 10px;
height: 200px;
height: 220px;
display: flex;
flex-direction: column;
// background-image: url("../../images/index/chaxun-bg.png");
background-size: cover;
position: relative;
.wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.mewq {
// background-color: #333;
margin-top: 24px;
width: inherit;
margin-left: -69px;
height: 64px;
margin-top: 85px;
box-sizing: border-box;
margin-right: -68px;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
@ -249,13 +246,12 @@
margin-top: 15px;
display: flex;
align-items: center;
margin-left: 10px;
.search-input {
position: relative;
left: 0;
right: 0;
width: 98%;
width: 100%;
height: 48px;
background: #ffffff;
border-radius: 4px;
@ -353,7 +349,7 @@
overflow: hidden;
.flex_box {
height: calc(100% - 30px);
height: 100%;
width: 100%;
overflow: hidden;
display: flex;
@ -562,8 +558,9 @@
}
.m-tb {
height: 260px;
height: 238px;
display: flex;
flex-direction: column;
.cnt {
box-sizing: border-box;
margin-top: 20px;
@ -674,4 +671,6 @@
.update-settings {
margin-right: 25px;
display: flex;
align-items: center;
}

44
src/views/modules/home/index.vue

@ -22,7 +22,7 @@
<img src="@/assets/img/shequ/close.png" />
</div>
</div>
<div class="btn" @click="handleClickSearchBtn">一下</div>
<div class="btn" @click="handleClickSearchBtn"></div>
</div>
</div>
</div>
@ -82,16 +82,11 @@
</div>
</div>
</div>
<div class="m-pan m-box">
<!-- <div class="header">
<img src="@/assets/images/index/title-icon-sqzl.png" />
<span>组织总览</span>
</div> -->
<div class="flex_box">
<div class="m-pan">
<div class="m-box flex_box m-pan">
<div class="header">
<div class="newqsa"><span>居民分类信息不完整数量统计</span></div>
<!-- <img src="@/assets/images/index/title-icon-zntb.png" /> -->
</div>
<div class="cnt">
<!-- 树状图 -->
@ -102,15 +97,13 @@
</div>
<div class="m-box m-tb">
<div class="wrap">
<div class="header">
<div class="newqsa"><span>不满意事项(月度)趋势分析</span></div>
<!-- <img src="@/assets/images/index/title-icon-zntb.png" /> -->
</div>
</div>
<!-- <div class="more">更多></div> -->
<div class="cnt">
<div id="my_chart" style="width: 100%; height: 230px; position: relative; top: -30px"></div>
<div id="my_chart" style="width: 100%; height: 170px;"></div>
</div>
</div>
@ -151,11 +144,11 @@
</div>
<div class="m-box m-tx" style="position: relative;">
<div class="noe-text"> <span style="margin-top: 10px;">居民信息更新情况</span> <span class="update-settings"
style="margin-top: 10px;" v-show="showAll" @click="jumpToJuMin()"><img referrerpolicy="no-referrer"
src="https://lanhu.oss-cn-beijing.aliyuncs.com/pskhmf0717eflwg54wn73s6spnsg6u48r0f69e94b-2bc8-4156-8330-902087b72e0b" />更新设置</span>
<div class="header" style="display: flex;align-items: center;justify-content: space-between;"> <div class="newqsa"><span >居民信息更新情况</span></div> <div class="update-settings" @click="jumpToJuMin()" v-show="showAll"><img referrerpolicy="no-referrer"
src="https://lanhu.oss-cn-beijing.aliyuncs.com/pskhmf0717eflwg54wn73s6spnsg6u48r0f69e94b-2bc8-4156-8330-902087b72e0b" />更新设置</div>
</div>
<el-table :data="tableList" style="width: 100%;margin-top:26px;overflow-y: scroll;" :height="maxTableHeight"
<div style="width: 100%;margin-top:26px;overflow-y: scroll; height:calc(100% - 79px);padding-bottom:15px; box-sizing: border-box" >
<el-table :data="tableList"
border :cell-style="columnbackgroundStyle" class="m-table-item">
<el-table-column label="居民类别" align="center" width="105">
<template slot-scope="scope">
@ -190,6 +183,7 @@
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
@ -358,7 +352,7 @@ export default {
},
legend: {
data: data.series.map((item) => item.name),
bottom: "-5",
bottom: 0,
icon: "rect",
itemWidth: 20,
itemHeight: 5,
@ -367,7 +361,8 @@ export default {
grid: {
left: "3%",
right: "4%",
bottom: "15%",
bottom: "13%",
top:'5',
containLabel: true,
},
toolbox: {
@ -728,13 +723,17 @@ export default {
legend: {
x: 'center',
bottom: '8%',
data: ['分类信息完整数', '分类信息不完整数']
data: ['分类信息完整数', '分类信息不完整数'],
icon: "rect",
itemWidth: 20,
itemHeight: 5,
itemGap: 20,
},
grid: { //
top: '5%',
top: '3%',
left: '3%',
right: '4%',
bottom: '20%',
bottom: '10%',
containLabel: true
},
yAxis: [{
@ -800,3 +799,8 @@ export default {
</script>
<style lang="scss" src="@/assets/scss/modules/index.scss" scoped></style>
<style lang="scss" scoped>
.z-on{
margin-left: 0 !important;
}
</style>

Loading…
Cancel
Save