elink-star
/
epmet-work-pc-chengyang
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页样式微调

feature
mk 2 years ago
parent
044c48e0ee
commit
35003eaed3
2 changed files with 40 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      src/assets/scss/modules/index.scss
  2. 44
      src/views/modules/home/index.vue

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

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

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

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

Write Preview
Loading…
Cancel
Save