Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
37a9b3f0 by 杨威
Options

历史回溯修改

1 parent 42ae4331
Inline Side-by-side
Showing 1 changed file with 239 additions and 156 deletions
1 <template > 1 <template>
2 <div class="main"> 2 <div class="main">
3 <div id="mountNode" ref="containerWidth"> 3 <div id="mountNode" ref="containerWidth">
4 <div v-show="showhide" style="margin: 20px 0 0 20px;color:red;">暂无变更业务，没有历史回溯数据</div> 4 <div v-show="showhide" style="margin: 20px 0 0 20px;color:red;">
5 5 暂无变更业务，没有历史回溯数据
6 </div>
6 </div> 7 </div>
7 <div id="mountNodeRight"> 8 <div id="mountNodeRight">
8 <div><span class="tip-title">基础信息</span></div> 9 <el-tabs v-model="activeName" @tab-click="handleClick" >
9 <el-divider></el-divider> 10 <el-tab-pane label="基础信息" name="jcxx">
10 <div style="line-height: 40px"> 11 <div style="line-height: 40px">
11 <el-row> 12 <el-row>
12 <el-col :span="6"><div class="grid-left">项目名称</div></el-col> 13 <el-col :span="6"><div class="grid-left">项目名称</div></el-col>
13 <el-col :span="18"><div class="grid-right">{{result.xmmc}}</div></el-col> 14 <el-col :span="18"
15 ><div class="grid-right">{{ result.xmmc }}</div></el-col
16 >
14 </el-row> 17 </el-row>
15 <el-row> 18 <el-row>
16 <el-col :span="6"><div class="grid-left">宗地代码</div></el-col> 19 <el-col :span="6"><div class="grid-left">宗地代码</div></el-col>
17 <el-col :span="18"><div class="grid-right">{{result.zddm}}</div></el-col> 20 <el-col :span="18"
21 ><div class="grid-right">{{ result.zddm }}</div></el-col
22 >
18 </el-row> 23 </el-row>
19 <el-row> 24 <el-row>
20 <el-col :span="6"><div class="grid-left">不动产单元号</div></el-col> 25 <el-col :span="6"><div class="grid-left">不动产单元号</div></el-col>
21 <el-col :span="18"><div class="grid-right">{{result.bdcdyh}}</div></el-col> 26 <el-col :span="18"
27 ><div class="grid-right">{{ result.bdcdyh }}</div></el-col
28 >
22 </el-row> 29 </el-row>
23 <el-row> 30 <el-row>
24 <el-col :span="6"><div class="grid-left">不动产权证号</div></el-col> 31 <el-col :span="6"><div class="grid-left">不动产权证号</div></el-col>
25 <el-col :span="18"><div class="grid-right">{{result.bdcdyh}}</div></el-col> 32 <el-col :span="18"
33 ><div class="grid-right">{{ result.bdcdyh }}</div></el-col
34 >
26 </el-row> 35 </el-row>
27 <el-row> 36 <el-row>
28 <el-col :span="6"><div class="grid-left">自然幢号</div></el-col> 37 <el-col :span="6"><div class="grid-left">自然幢号</div></el-col>
29 <el-col :span="18"><div class="grid-right">{{result.zrzh}}</div></el-col> 38 <el-col :span="18"
39 ><div class="grid-right">{{ result.zrzh }}</div></el-col
40 >
30 </el-row> 41 </el-row>
31 <el-row> 42 <el-row>
32 <el-col :span="6"><div class="grid-left">权利人</div></el-col> 43 <el-col :span="6"><div class="grid-left">权利人</div></el-col>
33 <el-col :span="18"><div class="grid-right">{{result.qlr}}</div></el-col> 44 <el-col :span="18"
45 ><div class="grid-right">{{ result.qlr }}</div></el-col
46 >
34 </el-row> 47 </el-row>
35 <el-row> 48 <el-row>
36 <el-col :span="6"><div class="grid-left">权利性质</div></el-col> 49 <el-col :span="6"><div class="grid-left">权利性质</div></el-col>
37 <el-col :span="18"><div class="grid-right">{{result.qlxz}}</div></el-col> 50 <el-col :span="18"
51 ><div class="grid-right">{{ result.qlxz }}</div></el-col
52 >
38 </el-row> 53 </el-row>
39 54
40 <el-row> 55 <el-row>
41 <el-col :span="6"><div class="grid-left">土地用途</div></el-col> 56 <el-col :span="6"><div class="grid-left">土地用途</div></el-col>
42 <el-col :span="18"><div class="grid-right">{{result.fwyt}}</div></el-col> 57 <el-col :span="18"
58 ><div class="grid-right">{{ result.fwyt }}</div></el-col
59 >
43 </el-row> 60 </el-row>
44 <el-row> 61 <el-row>
45 <el-col :span="6"><div class="grid-left">坐落</div></el-col> 62 <el-col :span="6"><div class="grid-left">坐落</div></el-col>
46 <el-col :span="18"><div class="grid-right">{{result.zl}}</div></el-col> 63 <el-col :span="18"
64 ><div class="grid-right">{{ result.zl }}</div></el-col
65 >
47 </el-row> 66 </el-row>
48 <el-row> 67 <el-row>
49 <el-col :span="6"><div class="grid-left">宗地面积</div></el-col> 68 <el-col :span="6"><div class="grid-left">宗地面积</div></el-col>
50 <el-col :span="18"><div class="grid-right">{{result.zdmj}}</div></el-col> 69 <el-col :span="18"
70 ><div class="grid-right">{{ result.zdmj }}</div></el-col
71 >
51 </el-row> 72 </el-row>
52 <el-row> 73 <el-row>
53 <el-col :span="6"><div class="grid-left">宗地四至-北至</div></el-col> 74 <el-col :span="6"><div class="grid-left">宗地四至-北至</div></el-col>
54 <el-col :span="18"><div class="grid-right">{{result.zdszb}}</div></el-col> 75 <el-col :span="18"
76 ><div class="grid-right">{{ result.zdszb }}</div></el-col
77 >
55 </el-row> 78 </el-row>
56 <el-row> 79 <el-row>
57 <el-col :span="6"><div class="grid-left">宗地四至-东至</div></el-col> 80 <el-col :span="6"><div class="grid-left">宗地四至-东至</div></el-col>
58 <el-col :span="18"><div class="grid-right">{{result.zdszd}}</div></el-col> 81 <el-col :span="18"
82 ><div class="grid-right">{{ result.zdszd }}</div></el-col
83 >
59 </el-row> 84 </el-row>
60 <el-row> 85 <el-row>
61 <el-col :span="6"><div class="grid-left">宗地四至-南至</div></el-col> 86 <el-col :span="6"><div class="grid-left">宗地四至-南至</div></el-col>
62 <el-col :span="18"><div class="grid-right">{{result.zdszn}}</div></el-col> 87 <el-col :span="18"
88 ><div class="grid-right">{{ result.zdszn }}</div></el-col
89 >
63 </el-row> 90 </el-row>
64 <el-row> 91 <el-row>
65 <el-col :span="6"><div class="grid-left">宗地四至-西至</div></el-col> 92 <el-col :span="6"><div class="grid-left">宗地四至-西至</div></el-col>
66 <el-col :span="18"><div class="grid-right">{{result.zdszx}}</div></el-col> 93 <el-col :span="18"
94 ><div class="grid-right">{{ result.zdszx }}</div></el-col
95 >
67 </el-row> 96 </el-row>
68 </div> 97 </div>
98 </el-tab-pane>
99 <el-tab-pane label="登记簿" name="djb" >
100 暂无数据
101 </el-tab-pane>
102 </el-tabs>
69 </div> 103 </div>
70 </div> 104 </div>
71 </template> 105 </template>
72 106
73 <script> 107 <script>
74 108 import G6 from "@antv/g6";
75 import G6 from '@antv/g6'; 109 import insertCss from "insert-css";
76 import insertCss from 'insert-css'; 110 import { getLshs } from "@api/fwsxbg";
77 import { getLshs } from "@api/fwsxbg"; 111 import { getQjZdjbxxDetailByIdBylshs } from "@api/zd";
78 import { getQjZdjbxxDetailByIdBylshs } from "@api/zd"; 112 import { getZrzDetailByBsmBylshs } from "@api/zrz";
79 import { getZrzDetailByBsmBylshs } from "@api/zrz"; 113 import { getDzDetailByBsm } from "@api/dz";
80 import { getDzDetailByBsm } from "@api/dz";
81 114
82 export default { 115 export default {
83 name:"", 116 name: "",
84 components:{}, 117 components: {},
85 props:{ 118 props: {
86 bsm: { 119 bsm: {
87 type: String, 120 type: String,
88 default: "", 121 default: "",
...@@ -92,7 +125,7 @@ export default { ...@@ -92,7 +125,7 @@ export default {
92 default: "", 125 default: "",
93 }, 126 },
94 }, 127 },
95 data(){ 128 data() {
96 insertCss(` 129 insertCss(`
97 .g6-tooltip { 130 .g6-tooltip {
98 border-radius: 6px; 131 border-radius: 6px;
...@@ -104,113 +137,119 @@ export default { ...@@ -104,113 +137,119 @@ export default {
104 } 137 }
105 `); 138 `);
106 return { 139 return {
107 showhide:false, 140 showhide: false,
108 data : {}, 141 data: {},
109 activeName: 'first', 142 activeName: "jcxx",
110 result:{}, 143 result: {},
111 }
112 },
113 created(){
114 144
145 };
115 }, 146 },
116 mounted(){ 147 created() {},
148 mounted() {
117 this.getLshsData(); 149 this.getLshsData();
118
119 }, 150 },
120 methods: { 151 methods: {
121 initG6() { 152 initG6() {
122 const self=this; 153 const self = this;
123 const data = this.data; 154 const data = this.data;
124 const eWidth = this.$refs.containerWidth.clientWidth; 155 const eWidth = this.$refs.containerWidth.clientWidth;
125 const eHeight = this.$refs.containerWidth.clientHeight; 156 const eHeight = this.$refs.containerWidth.clientHeight;
126 const mountNodeRight1=document.getElementById('mountNodeRight'); 157 const mountNodeRight1 = document.getElementById("mountNodeRight");
127 mountNodeRight1.style.height=eHeight-20+'px'; 158 mountNodeRight1.style.height = eHeight - 20 + "px";
128 159
129 G6.registerNode( 160 G6.registerNode(
130 'sql', 161 "sql",
131 { 162 {
132 drawShape(cfg, group) { 163 drawShape(cfg, group) {
133 var dClor='#ffffff'; 164 var dClor = "#ffffff";
134 if(cfg.id==self.bsm){ 165 if (cfg.id == self.bsm) {
135 dClor='#C6E5FF'; 166 dClor = "#C6E5FF";
136 } 167 }
137 168
138 const rect = group.addShape('rect', { 169 const rect = group.addShape("rect", {
139 attrs: { 170 attrs: {
140 x: -100, 171 x: -100,
141 y: -25, 172 y: -25,
142 width: 200, 173 width: 200,
143 height: 50, 174 height: 50,
144 radius: 10, 175 radius: 10,
145 stroke: '#5B8FF9', 176 stroke: "#5B8FF9",
146 fill: dClor, 177 fill: dClor,
147 lineWidth: 1, 178 lineWidth: 1,
148 }, 179 },
149 name: 'rect-shape', 180 name: "rect-shape",
150 }); 181 });
151 if (cfg.name) { 182 if (cfg.name) {
152 group.addShape('text', { 183 group.addShape("text", {
153 attrs: { 184 attrs: {
154 text: cfg.name, 185 text: cfg.name,
155 x: 0, 186 x: 0,
156 y: 0, 187 y: 0,
157 fill: '#00287E', 188 fill: "#00287E",
158 fontSize: 14, 189 fontSize: 14,
159 textAlign: 'center', 190 textAlign: "center",
160 textBaseline: 'middle', 191 textBaseline: "middle",
161 fontWeight: 'bold', 192 fontWeight: "bold",
162 }, 193 },
163 name: 'text-shape', 194 name: "text-shape",
164 }); 195 });
165 } 196 }
166 return rect; 197 return rect;
167 }, 198 },
168 }, 199 },
169 'single-node', 200 "single-node"
170 ); 201 );
171 G6.registerEdge( 202 G6.registerEdge(
172 'polyline1', 203 "polyline1",
173 { 204 {
174 afterDraw(cfg, group) { 205 afterDraw(cfg, group) {
175 console.log(cfg.data+":cfg") 206 console.log(cfg.data + ":cfg");
176 console.log(group.toString()+"group") 207 console.log(group.toString() + "group");
177 }, 208 },
178 }, 209 },
179 'polyline', 210 "polyline"
180 ); 211 );
181 212
182
183 //鼠标移动 弹出界面 213 //鼠标移动 弹出界面
184 const tooltip = new G6.Tooltip({ 214 const tooltip = new G6.Tooltip({
185 offsetX: 10, 215 offsetX: 10,
186 offsetY: 10, 216 offsetY: 10,
187 itemTypes: ['node', 'edge'], 217 itemTypes: ["node", "edge"],
188 getContent: (e) => { 218 getContent: (e) => {
189 debugger; 219 const outDiv = document.createElement("div");
190 const outDiv = document.createElement('div'); 220 outDiv.style.width = "fit-content";
191 outDiv.style.width = 'fit-content'; 221 outDiv.className = "tips";
192 outDiv.innerHTML = ` 222 outDiv.innerHTML = `
223 <p class="tit">基本信息</p>
193 <ul> 224 <ul>
194 <li> ${e.item.getModel().conf[0].label}:${e.item.getModel().conf[0].value}</li> 225 <li> <span>${e.item.getModel().conf[0].label}：</span><span>${
195 <li> ${e.item.getModel().conf[1].label}:${e.item.getModel().conf[1].value}</li> 226 e.item.getModel().conf[0].value
196 <li> ${e.item.getModel().conf[2].label}:${e.item.getModel().conf[2].value}</li> 227 }</span></li>
197 <li> ${e.item.getModel().conf[3].label}:${e.item.getModel().conf[3].value}</li> 228 <li> <span>${e.item.getModel().conf[1].label}：</span><span>${
198 <li> ${e.item.getModel().conf[4].label}:${e.item.getModel().conf[4].value}</li> 229 e.item.getModel().conf[1].value
199 </ul>` 230 }</span></li>
200 ; 231 <li> <span>${e.item.getModel().conf[2].label}：</span><span>${
232 e.item.getModel().conf[2].value
233 }</span></li>
234 <li> <span>${e.item.getModel().conf[3].label}：</span><span>${
235 e.item.getModel().conf[3].value
236 }</span></li>
237 <li> <span>${e.item.getModel().conf[4].label}：</span><span>${
238 e.item.getModel().conf[4].value
239 }</span></li>
240 </ul>`;
201 return outDiv; 241 return outDiv;
202 }, 242 },
203 }); 243 });
204 244
205 245 const container = document.getElementById("mountNode");
206 const container = document.getElementById('mountNode');
207 // console.log(container) 246 // console.log(container)
208 const graph = new G6.Graph({ 247 const graph = new G6.Graph({
209 container: 'mountNode', 248 container: "mountNode",
210 width:eWidth, 249 width: eWidth,
211 height:eHeight, 250 height: eHeight,
212 layout: { 251 layout: {
213 type: 'dagre', 252 type: "dagre",
214 nodesepFunc: (d) => { 253 nodesepFunc: (d) => {
215 return 100; 254 return 100;
216 }, 255 },
...@@ -218,10 +257,10 @@ export default { ...@@ -218,10 +257,10 @@ export default {
218 controlPoints: true, 257 controlPoints: true,
219 }, 258 },
220 defaultNode: { 259 defaultNode: {
221 type: 'sql', 260 type: "sql",
222 }, 261 },
223 defaultEdge: { 262 defaultEdge: {
224 type: 'polyline1', 263 type: "polyline1",
225 style: { 264 style: {
226 endArrow: true, 265 endArrow: true,
227 radius: 10, 266 radius: 10,
...@@ -229,174 +268,218 @@ export default { ...@@ -229,174 +268,218 @@ export default {
229 // fontSize:14, 268 // fontSize:14,
230 // endArrow: true, 269 // endArrow: true,
231 lineWidth: 2, //箭头宽度 270 lineWidth: 2, //箭头宽度
232 stroke: 'rgba(78,142,230,0.45)', 271 stroke: "rgba(78,142,230,0.45)",
233 }, 272 },
234 }, 273 },
235 nodeStateStyles: { 274 nodeStateStyles: {
236 selected: {//选中之后样式 275 selected: {
237 stroke: '#d9d9d9', 276 //选中之后样式
238 fill: '#5394ef', 277 stroke: "#d9d9d9",
278 fill: "#5394ef",
239 }, 279 },
240 }, 280 },
241 281
242 plugins: [tooltip], 282 plugins: [tooltip],
243 modes: { 283 modes: {
244 default: [ 284 default: ["drag-node", "drag-canvas", "zoom-canvas", "click-select"],
245 'drag-node',
246 'drag-canvas',
247 'zoom-canvas',
248 'click-select',
249 ],
250 }, 285 },
251 286
252 fitView: true, 287 fitView: true,
288 fitViewPadding: 200,
253 }); 289 });
254 290
255 graph.data(data); 291 graph.data(data);
256 graph.render(); 292 graph.render();
257 293
258 graph.on('node:click', e => { 294 graph.on("node:click", (e) => {
259 switch (this.type) { 295 switch (this.type) {
260 case "zrz": 296 case "zrz":
261 getZrzDetailByBsmBylshs(e.item._cfg.id).then((res)=>{ 297 getZrzDetailByBsmBylshs(e.item._cfg.id).then((res) => {
262 if(res.code === 200){ 298 if (res.code === 200) {
263 self.result = res.result; 299 self.result = res.result;
264 } 300 }
265 }) 301 });
266 break; 302 break;
267 case "zd": 303 case "zd":
268 getQjZdjbxxDetailByIdBylshs(e.item._cfg.id).then((res)=>{ 304 getQjZdjbxxDetailByIdBylshs(e.item._cfg.id).then((res) => {
269 if(res.code === 200){ 305 if (res.code === 200) {
270 self.result = res.result; 306 self.result = res.result;
271 } 307 }
272 }) 308 });
273 break; 309 break;
274 case "dz": 310 case "dz":
275 getDzDetailByBsm(e.item._cfg.id).then((res)=>{ 311 getDzDetailByBsm(e.item._cfg.id).then((res) => {
276 if(res.code === 200){ 312 if (res.code === 200) {
277 self.result = res.result; 313 self.result = res.result;
278 } 314 }
279 }) 315 });
280 break; 316 break;
281 default: 317 default:
282 break; 318 break;
283 } 319 }
284
285
286 }); 320 });
287 321
288 graph.on('node:mouseenter', e => { 322 graph.on("node:mouseenter", (e) => {
289 graph.setItemState(e.item, 'active', true) 323 graph.setItemState(e.item, "active", true);
290 }); 324 });
291 graph.on('node:mouseleave', e => { 325 graph.on("node:mouseleave", (e) => {
292 graph.setItemState(e.item, 'active', false) 326 graph.setItemState(e.item, "active", false);
293 }); 327 });
294 graph.on('edge:mouseenter', e => { 328 graph.on("edge:mouseenter", (e) => {
295 graph.setItemState(e.item, 'active', true) 329 graph.setItemState(e.item, "active", true);
296 }); 330 });
297 graph.on('edge:mouseleave', e => { 331 graph.on("edge:mouseleave", (e) => {
298 graph.setItemState(e.item, 'active', false) 332 graph.setItemState(e.item, "active", false);
299 }); 333 });
300 334
301 if (typeof window !== 'undefined') 335 if (typeof window !== "undefined")
302 window.onresize = () => { 336 window.onresize = () => {
303 if (!graph || graph.get('destroyed')) return; 337 if (!graph || graph.get("destroyed")) return;
304 if (!container || !container.scrollWidth || !container.scrollHeight) return; 338 if (!container || !container.scrollWidth || !container.scrollHeight)
339 return;
305 graph.changeSize(container.scrollWidth, container.scrollHeight); 340 graph.changeSize(container.scrollWidth, container.scrollHeight);
306 }; 341 };
307
308 }, 342 },
309 343
310 getLshsData(){ 344 getLshsData() {
311 let _this = this; 345 let _this = this;
312 const data = { 346 const data = {
313 "bsm": this.bsm, 347 bsm: this.bsm,
314 "type": this.type 348 type: this.type,
315 }; 349 };
316 getLshs(data).then((res)=>{ 350 getLshs(data).then((res) => {
317 if(res.code===200){ 351 if (res.code === 200) {
318 _this.data=res.result; 352 _this.data = res.result;
319 //_this.data.nodes.length;// 判断个数 353 //_this.data.nodes.length;// 判断个数
320 if(_this.data.nodes.length==0){ 354 if (_this.data.nodes.length == 0) {
321 //暂无变更业务，没有历史回溯数据。 355 //暂无变更业务，没有历史回溯数据。
322 this.showhide=true; 356 this.showhide = true;
323 357 } else {
324 }else{ 358 _this.data.nodes.forEach(node => {
359 node.conf.forEach(i => {
360 i.value = i.value == null || i.value == "" ? '暂无数据':i.value
361 })
362 });
325 this.initG6(); 363 this.initG6();
326 } 364 }
327 } 365 }
328 }); 366 });
329 switch (this.type) { 367 switch (this.type) {
330 case "zrz": 368 case "zrz":
331 getZrzDetailByBsmBylshs(this.bsm).then((res)=>{ 369 getZrzDetailByBsmBylshs(this.bsm).then((res) => {
332 if(res.code === 200){ 370 if (res.code === 200) {
333 this.result = res.result; 371 this.result = res.result;
334 } 372 }
335 }) 373 });
336 break; 374 break;
337 case "zd": 375 case "zd":
338 getQjZdjbxxDetailByIdBylshs(this.bsm).then((res)=>{ 376 getQjZdjbxxDetailByIdBylshs(this.bsm).then((res) => {
339 if(res.code === 200){ 377 if (res.code === 200) {
340 this.result = res.result; 378 this.result = res.result;
341 } 379 }
342 }) 380 });
343 break; 381 break;
344 case "dz": 382 case "dz":
345 getDzDetailByBsm(this.bsm).then((res)=>{ 383 getDzDetailByBsm(this.bsm).then((res) => {
346 if(res.code === 200){ 384 if (res.code === 200) {
347 this.result = res.result; 385 this.result = res.result;
348 } 386 }
349 }) 387 });
350 break; 388 break;
351 default: 389 default:
352 break; 390 break;
353 } 391 }
354 } 392 },
355 }, 393 },
356 computed: {}, 394 computed: {},
357 watch: {}, 395 watch: {},
358 } 396 };
359 </script> 397 </script>
360 <style scoped lang="less"> 398 <style scoped lang="less">
361 399 #mountNode {
362 #mountNode{ 400 width: 60%;
363 width: 50%; 401 height: calc(100% - 10px);
364 height: calc(100% - 140px); 402 border: 1px solid #e6e6e6;
365 border: 1px solid #E6E6E6;
366 background: white; 403 background: white;
367 404 position: relative;
368 position:absolute;
369 float: left; 405 float: left;
370 /*border: 1px solid red;*/ 406 /*border: 1px solid red;*/
371 } 407 }
372 408
373 #mountNodeRight{ 409 #mountNodeRight {
374 width: 36%; 410 width: calc(40% - 20px);
375 float: right; 411 float: right;
376 height: calc(100% - 22px); 412 height: calc(100% - 8px)!important;
377 border: 1px solid #E6E6E6; 413 border: 1px solid #e6e6e6;
378 background: white; 414 background: white;
415 box-sizing: border-box;
379 padding: 20px 20px 0 20px; 416 padding: 20px 20px 0 20px;
380 } 417 }
381 418
382 .slot{ 419 .slot {
383 margin-left: 50px; 420 margin-left: 50px;
384 margin-top: 20px; 421 margin-top: 20px;
385 width: 300px; 422 width: 300px;
386 } 423 }
387 424
388 .tip-title{ 425 .tip-title {
389 font-weight: 700; 426 font-weight: 700;
390 } 427 }
391 428
392 .grid-left{ 429 .grid-left {
393 text-align: right; 430 text-align: right;
394 padding-right: 5%; 431 padding-right: 5%;
395 } 432 }
396 433
397 .grid-right{ 434 .grid-right {
398 text-align: left; 435 text-align: left;
399 padding-left: 5%; 436 padding-left: 5%;
437 }
438 .el-tabs {
439 /deep/.el-tabs__header{
440 position: unset!important;
400 } 441 }
401 442 /deep/.el-tabs__content{
443 box-sizing: border-box;
444 padding-top: 10px!important;
445 background-color:#fff!important;
446 }
447 }
448 /deep/.g6-component-tooltip {
449 padding: 0;
450 font-size: 16px;
451 .tips {
452 border-radius: 5px;
453 border: 1px solid #EAEAEA;
454 box-shadow: 4px 4px 24px 0px rgba(0, 0, 0, 0.12);
455 .tit {
456 height: 40px;
457 line-height: 40px;
458 color: #9B9B9B;
459 background-color: #fafafa;
460 box-sizing: border-box;
461 padding: 0 20px;
462 border-bottom: 1px solid #E6E6E6;
463 }
464 ul{
465 box-sizing: border-box;
466 padding: 10px 20px 20px 20px;
467 li{
468 span{
469 display: inline-block;
470 height: 30px;
471 line-height: 30px;
472 }
473 span:first-child{
474 width: 120px;
475 text-align: right;
476 color: #4A4A4A;
477 }
478 span:last-child{
479 color: #6D7278;
480 }
481 }
482 }
483 }
484 }
402 </style> 485 </style>
......