Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
9dac694e by 杨威
Options

首页布局修改

1 parent 0e9a5c1d
Inline Side-by-side
Showing 6 changed files with 172 additions and 102 deletions
1 .content_box { 1 .content_box {
2 padding: 18px 18px 26px 18px; 2 padding: 18px;
3 box-sizing: border-box; 3 box-sizing: border-box;
4 } 4 }
5 .el-table .success-row { 5 .el-table .success-row {
......
...@@ -106,4 +106,7 @@ export default { ...@@ -106,4 +106,7 @@ export default {
106 display: none; 106 display: none;
107 } 107 }
108 } 108 }
109 .el-tabs__nav .is-active{
110 background-color: #F1F4FC;
111 }
109 </style> 112 </style>
......
...@@ -13,72 +13,9 @@ ...@@ -13,72 +13,9 @@
13 <div class="treeModule"> 13 <div class="treeModule">
14 <LineTree :pd="pd"></LineTree> 14 <LineTree :pd="pd"></LineTree>
15 </div> 15 </div>
16 <el-menu
17 :default-active="defaultActive"
18 :unique-opened="true"
19 class="el-menu-vertical-demo"
20 @open="handleOpen"
21 @close="handleClose"
22 :collapse="isActive"
23 background-color="#121958"
24 text-color="#fff"
25 active-text-color="#21FAFD"
26 :collapse-transition="false"
27 :router="true"
28 >
29 <template v-for="item in menuList">
30 <el-submenu
31 :index="item.code"
32 :key="item.code"
33 v-if="item.children && item.children.length > 0"
34 >
35 <template slot="title">
36 <i :class="item.icon" style="margin-right:10px;"></i>
37 <span slot="title">{{ item.name }}</span>
38 </template>
39 <template v-for="seconditem in item.children">
40 <el-menu-item
41 :index="seconditem.code"
42 :key="seconditem.code"
43 v-if="!seconditem.children"
44 :route="{ path: seconditem.path }"
45 >
46 {{ seconditem.name }}
47 </el-menu-item>
48 </template>
49 <template v-for="seconditem in item.children">
50 <el-submenu
51 :index="seconditem.code"
52 :key="seconditem.code"
53 v-if="seconditem.children"
54 >
55 <span slot="title" style="padding-left:15px;">{{
56 seconditem.name
57 }}</span>
58 <el-menu-item
59 v-for="threeitem in seconditem.children"
60 :index="threeitem.code"
61 :key="threeitem.code"
62 :route="{ path: threeitem.path }"
63 >{{ threeitem.name }}</el-menu-item
64 >
65 </el-submenu>
66 </template>
67 </el-submenu>
68 <el-menu-item
69 :index="item.code"
70 :key="item.code"
71 v-else
72 :route="{ path: item.path }"
73 >
74 <i :class="item.icon" style="margin-right:10px;"></i>
75 <span slot="title">{{ item.name }}</span>
76 </el-menu-item>
77 </template>
78 </el-menu>
79 </el-aside> 16 </el-aside>
80 <el-container> 17 <el-container>
81 <el-header height="120px"> 18 <el-header height="100px">
82 <div class="header-top"> 19 <div class="header-top">
83 <div class="top-items" @click="toggleClick"> 20 <div class="top-items" @click="toggleClick">
84 <i class="fa fa-outdent hamburger" v-show="!isActive"></i> 21 <i class="fa fa-outdent hamburger" v-show="!isActive"></i>
...@@ -157,61 +94,62 @@ export default { ...@@ -157,61 +94,62 @@ export default {
157 }, 94 },
158 pd: [ 95 pd: [
159 { 96 {
160 label: "第一层(1)", 97 label: "行政区(1)",
161 children: [], 98 children: [],
162 }, 99 },
163 { 100 {
164 label: "第一层(2)", 101 label: "行政区(2)",
165 children: [ 102 children: [
166 { 103 {
167 label: "第二层(1)", 104 label: "地籍区1",
168 children: [], 105 children: [],
169 }, 106 },
170 { 107 {
171 label: "第二层(2)", 108 label: "地籍区2",
172 children: [ 109 children: [
173 { 110 {
174 label: "第三层(1)", 111 label: "国有",
175 children: [ 112 children: [
176 { 113 {
177 label: "第四层", 114 label: "宗地代码1933",
178 children: [ 115 children: [
179 { 116 {
180 label: "第五层", 117 label: "自然幢号1256",
181 children: [{ label: "第六层", }],
182 },
183 ],
184 }, 118 },
185 ], 119 ],
186 }, 120 },
187 { 121 {
188 label: "第三层(2)", 122 label: "宗地代码2100",
189 }, 123 children: [
190 { 124 {
191 label: "第三层(3)", 125 label: "自然幢号1543",
192 }, 126 },
193 ], 127 ],
194 }, 128 },
129 ],
130 }
131 ],
132 },
195 { 133 {
196 label: "第二层(3)", 134 label: "地籍区3",
197 children: [], 135 children: [],
198 }, 136 },
199 { 137 {
200 label: "第二层(4)", 138 label: "地籍区4",
201 children: [], 139 children: [],
202 }, 140 },
203 ], 141 ],
204 }, 142 },
205 { 143 {
206 label: "第一层(3)", 144 label: "行政区(3)",
207 children: [], 145 children: [],
208 }, 146 },
209 { 147 {
210 label: "第一层(4)", 148 label: "行政区(4)",
211 children: [], 149 children: [],
212 }, 150 },
213 { 151 {
214 label: "第一层(5)", 152 label: "行政区(5)",
215 children: [], 153 children: [],
216 }, 154 },
217 ], 155 ],
...@@ -402,7 +340,7 @@ export default { ...@@ -402,7 +340,7 @@ export default {
402 } 340 }
403 .treeModule { 341 .treeModule {
404 box-sizing: border-box; 342 box-sizing: border-box;
405 padding: 20px 10px; 343 padding: 20px 20px;
406 } 344 }
407 .logo-box-show { 345 .logo-box-show {
408 width: 64px; 346 width: 64px;
...@@ -420,7 +358,7 @@ export default { ...@@ -420,7 +358,7 @@ export default {
420 } 358 }
421 359
422 .el-main { 360 .el-main {
423 background-color: #ffffff; 361 background-color: #F1F4FC;
424 color: #333; 362 color: #333;
425 // text-align: center; 363 // text-align: center;
426 // line-height: 160px; 364 // line-height: 160px;
......
1 <template> 1 <template>
2 <div class="main">
2 <div class="panel content_box"> 3 <div class="panel content_box">
3 <el-card class="panel_left"> 4 <el-card class="panel_left">
4 <div slot="header" class="clearfix"> 5 <div slot="header" class="clearfix">
5 <span>工作箱</span> 6 <span>工作箱</span>
6 </div> 7 </div>
7 <div> 8 <div class="enter_box">
8 工作箱内容 9 <div
10 class="box"
11 v-for="(item, index) in workList"
12 :key="index"
13 @click="handleSelect"
14 >
15 <img :src="item.img" alt="" />
16 <span>{{ item.name }}</span>
17 </div>
9 </div> 18 </div>
10 </el-card> 19 </el-card>
11 <el-card class="panel_right"> 20 <el-card class="panel_right">
...@@ -13,10 +22,47 @@ ...@@ -13,10 +22,47 @@
13 <span>快捷入口</span> 22 <span>快捷入口</span>
14 </div> 23 </div>
15 <div class="enter_box"> 24 <div class="enter_box">
16 <div class="box" v-for="(item, index) in list" :key="index" @click="handleSelect">{{ item }}</div> 25 <div
26 class="box"
27 v-for="(item, index) in list"
28 :key="index"
29 @click="handleSelect"
30 >
31 <img :src="item.img" alt="" />
32 <span>{{ item.name }}</span>
33 </div>
17 </div> 34 </div>
18 </el-card> 35 </el-card>
19 36 </div>
37 <div class="notice">
38 <el-card>
39 <div slot="header" class="clearfix">
40 <span>通知公告</span>
41 </div>
42 <el-table
43 :data="tableData"
44 style="width: 100%"
45 :row-class-name="tableRowClassName"
46 >
47 <el-table-column
48 type="index"
49 width="200"
50 align="center"
51 label="顺序号"
52 >
53 </el-table-column>
54 <el-table-column prop="title" align="left" label="标题">
55 </el-table-column>
56 <el-table-column
57 prop="date"
58 width="500"
59 align="center"
60 label="发布时间"
61 >
62 </el-table-column>
63 </el-table>
64 </el-card>
65 </div>
20 </div> 66 </div>
21 </template> 67 </template>
22 68
...@@ -24,34 +70,117 @@ ...@@ -24,34 +70,117 @@
24 export default { 70 export default {
25 data() { 71 data() {
26 return { 72 return {
27 list: ["创建文章", "创建公告", "预约统计"], 73 workList: [
74 { name: "待办箱", img: require("../../assets/images/temp1.png") },
75 { name: "退件箱", img: require("../../assets/images/temp2.png") },
76 ],
77 list: [
78 { name: "宗地分割", img: require("../../assets/images/temp1.png") },
79 {
80 name: "导入楼盘表模板",
81 img: require("../../assets/images/temp2.png"),
82 },
83 { name: "新办房屋", img: require("../../assets/images/temp1.png") },
84 { name: "重新落宗", img: require("../../assets/images/temp2.png") },
85 ],
86 tableData: [
87 {
88 date: "2016-05-02 08:23",
89 title: "国家能源局关于2019年风电、光伏发电项目建设有关事项的通知",
90 },
91 {
92 date: "2016-05-04 08:23",
93 title: "珠江委部署珠江水利改革发展“十四五”规划思路报告编制工作",
94 },
95 {
96 date: "2016-05-01 08:23",
97 title:
98 "全国海洋生态环境保护工作会议召开生态环境部公布国家地表水考核断面水质排名",
99 },
100 {
101 date: "2016-05-03 08:23",
102 title: "自然资源部四单位党组织开展联学联建活动",
103 },
104 {
105 date: "2016-05-03 08:23",
106 title: "全国海洋伏季休渔暨渤海综合治理专项执法行动启动",
107 },
108 {
109 date: "2016-05-03 08:23",
110 title: "生态环境部召开各流域海域生态环境监督管理局座谈会",
111 },
112 {
113 date: "2016-05-03 08:23",
114 title:
115 "生态环境部审议并原则通过《地级及以上城市国家地表水考核断面水环境质量排名方案》",
116 },
117 ],
28 }; 118 };
29 }, 119 },
30 methods: { 120 methods: {
31 handleSelect() {}, 121 handleSelect() {},
122 tableRowClassName({ row, rowIndex }) {
123 if (rowIndex % 2 !== 0) {
124 return "even-row";
125 } else {
126 return "";
32 } 127 }
128 },
129 },
33 }; 130 };
34 </script> 131 </script>
35 <style rel="stylesheet/less" lang="less"> 132 <style rel="stylesheet/less" lang="less">
36 .panel { 133 .main {
134 display: flex;
135 flex-direction: column;
136 height: 100%;
137 .panel {
37 @flex(); 138 @flex();
38 width:100%; 139 width: 100%;
39 .panel_left { 140 .panel_left {
40 width: 30%; 141 width: 45%;
41 margin-right: @30px; 142 margin-right: @30px;
143 flex: 1;
42 } 144 }
43 .panel_right { 145 .panel_right {
44 width: 50%; 146 flex: 1;
45 .enter_box{ 147 }
148 .enter_box {
46 @flex(); 149 @flex();
47 div{ 150 div {
48 width: 100px; 151 flex: 1;
49 height: 100px; 152 img {
50 @flex-center(); 153 width: 68px;
51 background-color: @tablebg; 154 height: 68px;
52 margin-left:@30px; 155 display: block;
53 cursor: pointer; 156 margin: 0 auto;
157 }
158 span {
159 display: block;
160 text-align: center;
161 margin-top: 10px;
162 }
163 }
164 }
165 .el-card__body {
166 padding: 40px;
167 }
168 }
169 .notice {
170 flex: 1;
171 padding: 0 18px 26px 18px;
172 box-sizing: border-box;
173 .el-table .even-row {
174 background: #f7f9fb;
175 }
176 .el-table th {
177 background-color: #f3f5fa;
178 }
179 .el-card__body {
180 padding: 0;
54 } 181 }
182 th.is-left {
183 text-align: center;
55 } 184 }
56 } 185 }
57 } 186 }
......