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 433 additions and 350 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 id="mountNodeRight"> 7 </div>
8 <div><span class="tip-title">基础信息</span></div> 8 <div id="mountNodeRight">
9 <el-divider></el-divider> 9 <el-tabs v-model="activeName" @tab-click="handleClick" >
10 <div style="line-height: 40px"> 10 <el-tab-pane label="基础信息" name="jcxx">
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"
34 </el-row> 45 ><div class="grid-right">{{ result.qlr }}</div></el-col
46 >
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>
69 </div> 98 </el-tab-pane>
70 </div> 99 <el-tab-pane label="登记簿" name="djb" >
100 暂无数据
101 </el-tab-pane>
102 </el-tabs>
103 </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: "",
89 }, 122 },
90 type: { 123 type: {
91 type: String, 124 type: String,
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;
99 font-size: 12px; 132 font-size: 12px;
...@@ -103,300 +136,350 @@ export default { ...@@ -103,300 +136,350 @@ export default {
103 text-align: center; 136 text-align: center;
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 } 144
112 }, 145 };
113 created(){ 146 },
114 147 created() {},
115 }, 148 mounted() {
116 mounted(){ 149 this.getLshsData();
117 this.getLshsData(); 150 },
118 151 methods: {
119 }, 152 initG6() {
120 methods: { 153 const self = this;
121 initG6() { 154 const data = this.data;
122 const self=this; 155 const eWidth = this.$refs.containerWidth.clientWidth;
123 const data = this.data; 156 const eHeight = this.$refs.containerWidth.clientHeight;
124 const eWidth = this.$refs.containerWidth.clientWidth; 157 const mountNodeRight1 = document.getElementById("mountNodeRight");
125 const eHeight = this.$refs.containerWidth.clientHeight; 158 mountNodeRight1.style.height = eHeight - 20 + "px";
126 const mountNodeRight1=document.getElementById('mountNodeRight'); 159
127 mountNodeRight1.style.height=eHeight-20+'px'; 160 G6.registerNode(
128 161 "sql",
129 G6.registerNode( 162 {
130 'sql', 163 drawShape(cfg, group) {
131 { 164 var dClor = "#ffffff";
132 drawShape(cfg, group) { 165 if (cfg.id == self.bsm) {
133 var dClor='#ffffff'; 166 dClor = "#C6E5FF";
134 if(cfg.id==self.bsm){ 167 }
135 dClor='#C6E5FF'; 168
136 } 169 const rect = group.addShape("rect", {
137 170 attrs: {
138 const rect = group.addShape('rect', { 171 x: -100,
139 attrs: { 172 y: -25,
140 x: -100, 173 width: 200,
141 y: -25, 174 height: 50,
142 width: 200, 175 radius: 10,
143 height: 50, 176 stroke: "#5B8FF9",
144 radius: 10, 177 fill: dClor,
145 stroke: '#5B8FF9', 178 lineWidth: 1,
146 fill: dClor, 179 },
147 lineWidth: 1, 180 name: "rect-shape",
148 }, 181 });
149 name: 'rect-shape', 182 if (cfg.name) {
150 }); 183 group.addShape("text", {
151 if (cfg.name) { 184 attrs: {
152 group.addShape('text', { 185 text: cfg.name,
153 attrs: { 186 x: 0,
154 text: cfg.name, 187 y: 0,
155 x: 0, 188 fill: "#00287E",
156 y: 0, 189 fontSize: 14,
157 fill: '#00287E', 190 textAlign: "center",
158 fontSize: 14, 191 textBaseline: "middle",
159 textAlign: 'center', 192 fontWeight: "bold",
160 textBaseline: 'middle', 193 },
161 fontWeight: 'bold', 194 name: "text-shape",
162 }, 195 });
163 name: 'text-shape', 196 }
164 }); 197 return rect;
165 } 198 },
166 return rect; 199 },
167 }, 200 "single-node"
168 }, 201 );
169 'single-node', 202 G6.registerEdge(
170 ); 203 "polyline1",
171 G6.registerEdge( 204 {
172 'polyline1', 205 afterDraw(cfg, group) {
173 { 206 console.log(cfg.data + ":cfg");
174 afterDraw(cfg, group) { 207 console.log(group.toString() + "group");
175 console.log(cfg.data+":cfg") 208 },
176 console.log(group.toString()+"group") 209 },
177 }, 210 "polyline"
178 }, 211 );
179 'polyline', 212
180 ); 213 //鼠标移动 弹出界面
181 214 const tooltip = new G6.Tooltip({
182 215 offsetX: 10,
183 //鼠标移动 弹出界面 216 offsetY: 10,
184 const tooltip = new G6.Tooltip({ 217 itemTypes: ["node", "edge"],
185 offsetX: 10, 218 getContent: (e) => {
186 offsetY: 10, 219 const outDiv = document.createElement("div");
187 itemTypes: ['node', 'edge'], 220 outDiv.style.width = "fit-content";
188 getContent: (e) => { 221 outDiv.className = "tips";
189 debugger; 222 outDiv.innerHTML = `
190 const outDiv = document.createElement('div'); 223 <p class="tit">基本信息</p>
191 outDiv.style.width = 'fit-content';
192 outDiv.innerHTML = `
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>${
201 return outDiv; 232 e.item.getModel().conf[2].value
202 }, 233 }</span></li>
203 }); 234 <li> <span>${e.item.getModel().conf[3].label}：</span><span>${
204 235 e.item.getModel().conf[3].value
205 236 }</span></li>
206 const container = document.getElementById('mountNode'); 237 <li> <span>${e.item.getModel().conf[4].label}：</span><span>${
207 // console.log(container) 238 e.item.getModel().conf[4].value
208 const graph = new G6.Graph({ 239 }</span></li>
209 container: 'mountNode', 240 </ul>`;
210 width:eWidth, 241 return outDiv;
211 height:eHeight, 242 },
212 layout: { 243 });
213 type: 'dagre', 244
214 nodesepFunc: (d) => { 245 const container = document.getElementById("mountNode");
215 return 100; 246 // console.log(container)
216 }, 247 const graph = new G6.Graph({
217 ranksep: 30, 248 container: "mountNode",
218 controlPoints: true, 249 width: eWidth,
219 }, 250 height: eHeight,
220 defaultNode: { 251 layout: {
221 type: 'sql', 252 type: "dagre",
222 }, 253 nodesepFunc: (d) => {
223 defaultEdge: { 254 return 100;
224 type: 'polyline1', 255 },
225 style: { 256 ranksep: 30,
226 endArrow: true, 257 controlPoints: true,
227 radius: 10, 258 },
228 offset: 10, 259 defaultNode: {
229 // fontSize:14, 260 type: "sql",
230 // endArrow: true, 261 },
231 lineWidth: 2, //箭头宽度 262 defaultEdge: {
232 stroke: 'rgba(78,142,230,0.45)', 263 type: "polyline1",
233 }, 264 style: {
234 }, 265 endArrow: true,
235 nodeStateStyles: { 266 radius: 10,
236 selected: {//选中之后样式 267 offset: 10,
237 stroke: '#d9d9d9', 268 // fontSize:14,
238 fill: '#5394ef', 269 // endArrow: true,
239 }, 270 lineWidth: 2, //箭头宽度
240 }, 271 stroke: "rgba(78,142,230,0.45)",
241 272 },
242 plugins: [tooltip], 273 },
243 modes: { 274 nodeStateStyles: {
244 default: [ 275 selected: {
245 'drag-node', 276 //选中之后样式
246 'drag-canvas', 277 stroke: "#d9d9d9",
247 'zoom-canvas', 278 fill: "#5394ef",
248 'click-select', 279 },
249 ], 280 },
250 }, 281
251 282 plugins: [tooltip],
252 fitView: true, 283 modes: {
253 }); 284 default: ["drag-node", "drag-canvas", "zoom-canvas", "click-select"],
254 285 },
255 graph.data(data); 286
256 graph.render(); 287 fitView: true,
257 288 fitViewPadding: 200,
258 graph.on('node:click', e => { 289 });
259 switch (this.type) { 290
260 case "zrz": 291 graph.data(data);
261 getZrzDetailByBsmBylshs(e.item._cfg.id).then((res)=>{ 292 graph.render();
262 if(res.code === 200){ 293
263 self.result = res.result; 294 graph.on("node:click", (e) => {
264 } 295 switch (this.type) {
265 }) 296 case "zrz":
266 break; 297 getZrzDetailByBsmBylshs(e.item._cfg.id).then((res) => {
267 case "zd": 298 if (res.code === 200) {
268 getQjZdjbxxDetailByIdBylshs(e.item._cfg.id).then((res)=>{ 299 self.result = res.result;
269 if(res.code === 200){ 300 }
270 self.result = res.result; 301 });
271 } 302 break;
272 }) 303 case "zd":
273 break; 304 getQjZdjbxxDetailByIdBylshs(e.item._cfg.id).then((res) => {
274 case "dz": 305 if (res.code === 200) {
275 getDzDetailByBsm(e.item._cfg.id).then((res)=>{ 306 self.result = res.result;
276 if(res.code === 200){ 307 }
277 self.result = res.result; 308 });
278 } 309 break;
279 }) 310 case "dz":
280 break; 311 getDzDetailByBsm(e.item._cfg.id).then((res) => {
281 default: 312 if (res.code === 200) {
282 break; 313 self.result = res.result;
283 } 314 }
284 315 });
285 316 break;
286 }); 317 default:
287 318 break;
288 graph.on('node:mouseenter', e => { 319 }
289 graph.setItemState(e.item, 'active', true) 320 });
290 }); 321
291 graph.on('node:mouseleave', e => { 322 graph.on("node:mouseenter", (e) => {
292 graph.setItemState(e.item, 'active', false) 323 graph.setItemState(e.item, "active", true);
293 }); 324 });
294 graph.on('edge:mouseenter', e => { 325 graph.on("node:mouseleave", (e) => {
295 graph.setItemState(e.item, 'active', true) 326 graph.setItemState(e.item, "active", false);
296 }); 327 });
297 graph.on('edge:mouseleave', e => { 328 graph.on("edge:mouseenter", (e) => {
298 graph.setItemState(e.item, 'active', false) 329 graph.setItemState(e.item, "active", true);
299 }); 330 });
300 331 graph.on("edge:mouseleave", (e) => {
301 if (typeof window !== 'undefined') 332 graph.setItemState(e.item, "active", false);
302 window.onresize = () => { 333 });
303 if (!graph || graph.get('destroyed')) return; 334
304 if (!container || !container.scrollWidth || !container.scrollHeight) return; 335 if (typeof window !== "undefined")
305 graph.changeSize(container.scrollWidth, container.scrollHeight); 336 window.onresize = () => {
306 }; 337 if (!graph || graph.get("destroyed")) return;
307 338 if (!container || !container.scrollWidth || !container.scrollHeight)
308 }, 339 return;
309 340 graph.changeSize(container.scrollWidth, container.scrollHeight);
310 getLshsData(){ 341 };
311 let _this = this; 342 },
312 const data = { 343
313 "bsm": this.bsm, 344 getLshsData() {
314 "type": this.type 345 let _this = this;
315 }; 346 const data = {
316 getLshs(data).then((res)=>{ 347 bsm: this.bsm,
317 if(res.code===200){ 348 type: this.type,
318 _this.data=res.result; 349 };
319 //_this.data.nodes.length;// 判断个数 350 getLshs(data).then((res) => {
320 if(_this.data.nodes.length==0){ 351 if (res.code === 200) {
321 //暂无变更业务，没有历史回溯数据。 352 _this.data = res.result;
322 this.showhide=true; 353 //_this.data.nodes.length;// 判断个数
323 354 if (_this.data.nodes.length == 0) {
324 }else{ 355 //暂无变更业务，没有历史回溯数据。
325 this.initG6(); 356 this.showhide = true;
326 } 357 } else {
327 } 358 _this.data.nodes.forEach(node => {
328 }); 359 node.conf.forEach(i => {
329 switch (this.type) { 360 i.value = i.value == null || i.value == "" ? '暂无数据':i.value
330 case "zrz":
331 getZrzDetailByBsmBylshs(this.bsm).then((res)=>{
332 if(res.code === 200){
333 this.result = res.result;
334 }
335 }) 361 })
336 break; 362 });
337 case "zd": 363 this.initG6();
338 getQjZdjbxxDetailByIdBylshs(this.bsm).then((res)=>{ 364 }
339 if(res.code === 200){ 365 }
340 this.result = res.result; 366 });
341 } 367 switch (this.type) {
342 }) 368 case "zrz":
343 break; 369 getZrzDetailByBsmBylshs(this.bsm).then((res) => {
344 case "dz": 370 if (res.code === 200) {
345 getDzDetailByBsm(this.bsm).then((res)=>{ 371 this.result = res.result;
346 if(res.code === 200){ 372 }
347 this.result = res.result; 373 });
348 } 374 break;
349 }) 375 case "zd":
350 break; 376 getQjZdjbxxDetailByIdBylshs(this.bsm).then((res) => {
351 default: 377 if (res.code === 200) {
352 break; 378 this.result = res.result;
353 } 379 }
354 } 380 });
355 }, 381 break;
356 computed: {}, 382 case "dz":
357 watch: {}, 383 getDzDetailByBsm(this.bsm).then((res) => {
358 } 384 if (res.code === 200) {
385 this.result = res.result;
386 }
387 });
388 break;
389 default:
390 break;
391 }
392 },
393 },
394 computed: {},
395 watch: {},
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; 403 background: white;
366 background: white; 404 position: relative;
405 float: left;
406 /*border: 1px solid red;*/
407 }
367 408
368 position:absolute; 409 #mountNodeRight {
369 float: left; 410 width: calc(40% - 20px);
370 /*border: 1px solid red;*/ 411 float: right;
371 } 412 height: calc(100% - 8px)!important;
413 border: 1px solid #e6e6e6;
414 background: white;
415 box-sizing: border-box;
416 padding: 20px 20px 0 20px;
417 }
372 418
373 #mountNodeRight{ 419 .slot {
374 width: 36%; 420 margin-left: 50px;
375 float: right; 421 margin-top: 20px;
376 height: calc(100% - 22px); 422 width: 300px;
377 border: 1px solid #E6E6E6; 423 }
378 background: white;
379 padding: 20px 20px 0 20px;
380 }
381 424
382 .slot{ 425 .tip-title {
383 margin-left: 50px; 426 font-weight: 700;
384 margin-top: 20px; 427 }
385 width: 300px;
386 }
387 428
388 .tip-title{ 429 .grid-left {
389 font-weight: 700; 430 text-align: right;
390 } 431 padding-right: 5%;
432 }
391 433
392 .grid-left{ 434 .grid-right {
393 text-align: right; 435 text-align: left;
394 padding-right: 5%; 436 padding-left: 5%;
437 }
438 .el-tabs {
439 /deep/.el-tabs__header{
440 position: unset!important;
441 }
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;
395 } 463 }
396 464 ul{
397 .grid-right{ 465 box-sizing: border-box;
398 text-align: left; 466 padding: 10px 20px 20px 20px;
399 padding-left: 5%; 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 }
400 } 482 }
401
402 </style>
...\ No newline at end of file ...\ No newline at end of file
483 }
484 }
485 </style>
......