Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
fccf0955 by 杨威
Options

首页样式修改，交互效果完善

1 parent 34915f6f
Inline Side-by-side
Showing 1 changed file with 132 additions and 33 deletions
...@@ -12,7 +12,9 @@ ...@@ -12,7 +12,9 @@
12 :key="index" 12 :key="index"
13 @click="handleSelect" 13 @click="handleSelect"
14 > 14 >
15 <img :src="item.img" alt="" /> 15 <el-badge :value="item.count" :max="99" class="item">
16 <img :src="item.img" alt="" />
17 </el-badge>
16 <span>{{ item.name }}</span> 18 <span>{{ item.name }}</span>
17 </div> 19 </div>
18 </div> 20 </div>
...@@ -20,6 +22,8 @@ ...@@ -20,6 +22,8 @@
20 <el-card class="panel_right"> 22 <el-card class="panel_right">
21 <div slot="header" class="clearfix"> 23 <div slot="header" class="clearfix">
22 <span>快捷入口</span> 24 <span>快捷入口</span>
25 <span class="edit" @click="isEdit = true" v-show="!isEdit">编辑</span>
26 <span class="edit" @click="isEdit = false" v-show="isEdit">完成</span>
23 </div> 27 </div>
24 <div class="enter_box"> 28 <div class="enter_box">
25 <div 29 <div
...@@ -28,44 +32,50 @@ ...@@ -28,44 +32,50 @@
28 :key="index" 32 :key="index"
29 @click="handleSelect" 33 @click="handleSelect"
30 > 34 >
31 <img :src="item.img" alt="" /> 35 <div class="psr">
36 <img :src="item.img" alt="" />
37 <i class="fa fa-times-circle fa-2x" v-show="isEdit && index!=list.length-1" @click="edit(index)" aria-hidden="true"></i>
38 </div>
32 <span>{{ item.name }}</span> 39 <span>{{ item.name }}</span>
33 </div> 40 </div>
34 </div> 41 </div>
35 </el-card> 42 </el-card>
36 </div> 43 </div>
37 <div class="notice" ref="notice"> 44 <div class="notice" ref="notice">
38 <el-card> 45 <el-card class="news">
39 <div slot="header" class="clearfix"> 46 <div slot="header" class="clearfix">
40 <span>通知公告</span> 47 <span>通知公告</span>
48 <span class="edit">查看全部 <i class="fa fa-angle-right " aria-hidden="true"></i></span>
41 </div> 49 </div>
42 <el-table 50 <el-table
43 :data="tableData" 51 :data="tableData"
44 :height="tableHeight" 52 :height="tableHeight"
45 :row-class-name="tableRowClassName" 53 :row-class-name="tableRowClassName"
46 > 54 >
47 <el-table-column 55 <el-table-column prop="title" width="500" align="center" label="标题">
48 type="index"
49 width="300"
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>
56 <el-table-column 57 <el-table-column
57 prop="date" 58 prop="date"
58 width="500"
59 align="center" 59 align="center"
60 label="发布时间" 60 label="发布时间"
61 > 61 >
62 </el-table-column> 62 </el-table-column>
63 </el-table> 63 </el-table>
64 </el-card> 64 </el-card>
65 </div> 65 <el-card class="download">
66 <div class="pagination"> 66 <div slot="header" class="clearfix">
67 <el-pagination background layout="prev, pager, next,total" :total="total"> 67 <span>相关下载</span>
68 </el-pagination> 68 <span class="edit">查看全部 <i class="fa fa-angle-right " aria-hidden="true"></i></span>
69 </div>
70 <el-table
71 :data="tableData"
72 :height="tableHeight"
73 :row-class-name="tableRowClassName"
74 >
75 <el-table-column prop="title" align="center" label="内容名称">
76 </el-table-column>
77 </el-table>
78 </el-card>
69 </div> 79 </div>
70 </div> 80 </div>
71 </template> 81 </template>
...@@ -75,8 +85,8 @@ export default { ...@@ -75,8 +85,8 @@ export default {
75 data() { 85 data() {
76 return { 86 return {
77 workList: [ 87 workList: [
78 { name: "待办箱", img: require("../../assets/images/dbx.png") }, 88 { name: "待办箱", img: require("../../assets/images/dbx.png"),count:10 },
79 { name: "退件箱", img: require("../../assets/images/tjx.png") }, 89 { name: "退件箱", img: require("../../assets/images/tjx.png"),count:3 },
80 ], 90 ],
81 list: [ 91 list: [
82 { name: "宗地分割", img: require("../../assets/images/zdfg.png") }, 92 { name: "宗地分割", img: require("../../assets/images/zdfg.png") },
...@@ -86,21 +96,26 @@ export default { ...@@ -86,21 +96,26 @@ export default {
86 }, 96 },
87 { name: "新办房屋", img: require("../../assets/images/xbfw.png") }, 97 { name: "新办房屋", img: require("../../assets/images/xbfw.png") },
88 { name: "重新落宗", img: require("../../assets/images/cxlz.png") }, 98 { name: "重新落宗", img: require("../../assets/images/cxlz.png") },
99 { name: "添加", img: require("../../assets/images/cxlz.png") },
89 ], 100 ],
90 tableData: [ 101 tableData: [],
91 102 tableHeight: 0,
92 ], 103 total: 0,
93 tableHeight: "", 104 isEdit:false
94 total:0
95 }; 105 };
96 }, 106 },
97 mounted() { 107 mounted() {
98 this.$nextTick(()=>{ 108 this.$nextTick(() => {
99 this.tableHeight = this.$refs.notice.offsetHeight - 53; 109 this.tableHeight = this.$refs.notice.offsetHeight - 53;
100 }) 110 });
101 }, 111 },
102 methods: { 112 methods: {
103 handleSelect() {}, 113 handleSelect() {
114 //非编辑状态才可以点击
115 if (!isEdit) {
116
117 }
118 },
104 tableRowClassName({ row, rowIndex }) { 119 tableRowClassName({ row, rowIndex }) {
105 if (rowIndex % 2 !== 0) { 120 if (rowIndex % 2 !== 0) {
106 return "even-row"; 121 return "even-row";
...@@ -108,31 +123,76 @@ export default { ...@@ -108,31 +123,76 @@ export default {
108 return ""; 123 return "";
109 } 124 }
110 }, 125 },
126 //快捷入口管理
127 edit(index){
128 this.$confirm('此操作删除该快捷入口, 是否继续?', '提示', {
129 confirmButtonText: '确定',
130 cancelButtonText: '取消',
131 type: 'warning'
132 }).then(() => {
133 this.list.splice(index,1);
134 //调用删除接口 TO DO
135 this.$message({
136 type: 'success',
137 message: '删除成功!'
138 });
139 }).catch(() => {
140
141 });
142 }
111 }, 143 },
112 }; 144 };
113 </script> 145 </script>
114 <style rel="stylesheet/less" lang="less"> 146 <style rel="stylesheet/less" scoped lang="less">
115 .main { 147 .main {
116 display: flex; 148 display: flex;
117 flex-direction: column; 149 flex-direction: column;
118 overflow: hidden; 150 overflow: hidden;
119 height: 100%; 151 height: 100%;
152 .clearfix {
153 span {
154 color: #6d7278;
155 float: left;
156 }
157 .edit {
158 color: #9b9b9b;
159 float: right;
160 cursor: pointer;
161 .fa-angle-right{
162 font-size: 26px;
163 line-height: 7px;
164 position: relative;
165 top: 2px;
166 }
167 }
168 }
120 .panel { 169 .panel {
121 @flex(); 170 @flex();
122 width: 100%; 171 width: 100%;
123 .panel_left { 172 .panel_left {
124 width: 45%; 173 width: 35%;
125 margin-right: @30px; 174 margin-right: 20px;
126 flex: 1; 175 flex: 1;
127 } 176 }
128 .panel_right { 177 .panel_right {
129 flex: 1; 178 width: 65%;
130 } 179 }
131 .enter_box { 180 .enter_box {
132 @flex(); 181 @flex();
133 div { 182 div {
134 cursor: pointer; 183 cursor: pointer;
135 flex: 1; 184 flex: 1;
185 .el-badge{
186 width: 68px;
187 height: 68px;
188 display: block;
189 margin: 0 auto;
190 /deep/.el-badge__content{
191 top: 10px;
192 right: 14px;
193 background-color: #fa6400;
194 }
195 }
136 img { 196 img {
137 width: 68px; 197 width: 68px;
138 height: 68px; 198 height: 68px;
...@@ -140,10 +200,32 @@ export default { ...@@ -140,10 +200,32 @@ export default {
140 margin: 0 auto; 200 margin: 0 auto;
141 } 201 }
142 span { 202 span {
203 color: #6d7278;
143 display: block; 204 display: block;
144 text-align: center; 205 text-align: center;
145 margin-top: 10px; 206 margin-top: 10px;
146 } 207 }
208 .fa-times-circle {
209 color: #fa6400;
210 font-size: 24px;
211 position: absolute;
212 top: -4px;
213 right: -10px;
214 background: #fff;
215 border-radius: 10px;
216 box-sizing: border-box;
217 padding: 1px;
218 }
219 }
220 .psr {
221 width: 68px;
222 height: 68px;
223 display: block;
224 margin: 0 auto;
225 img {
226 width: 68px;
227 height: 68px;
228 }
147 } 229 }
148 } 230 }
149 .el-card__body { 231 .el-card__body {
...@@ -151,16 +233,33 @@ export default { ...@@ -151,16 +233,33 @@ export default {
151 } 233 }
152 } 234 }
153 .notice { 235 .notice {
154 flex: auto;
155 padding: 0; 236 padding: 0;
156 box-sizing: border-box; 237 height: calc(100% - 225px);
157 238 @flex();
239 .news {
240 float: left;
241 float: left;
242 margin-right: 20px;
243 flex: 1;
244 /deep/ .el-card__body{
245 padding: 0;
246 }
247 }
248 .download {
249 width: 50%;
250 /deep/ .el-card__body{
251 padding: 0;
252 }
253 }
158 .el-card__body { 254 .el-card__body {
159 padding: 0; 255 padding: 0;
160 } 256 }
161 th.is-left { 257 th.is-left {
162 text-align: center; 258 text-align: center;
163 } 259 }
260 tr{
261 background-color: #FBFBFB;
262 }
164 } 263 }
165 .pagination { 264 .pagination {
166 padding: 18px; 265 padding: 18px;
......