Skip to content

任超 / js.CadastralSystem

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

新建流程修改

1 parent 438df8cd
Inline Side-by-side
Showing 2 changed files with 254 additions and 174 deletions
...@@ -32,10 +32,23 @@ ...@@ -32,10 +32,23 @@
32 <span>{{ item.name }}</span> 32 <span>{{ item.name }}</span>
33 </div> 33 </div>
34 <div class="top-items"> 34 <div class="top-items">
35 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true"> 35 <el-menu
36 :default-active="activeIndex"
37 class="el-menu-demo"
38 mode="horizontal"
39 @select="handleSelect"
40 :router="true"
41 >
36 <el-submenu index="2"> 42 <el-submenu index="2">
37 <template slot="title">临时网页开发路由跳转</template> 43 <template slot="title"
38 <el-menu-item v-for="(item,index) in tempTab" :index="item.path" :key="'tempTab'+index">{{item.name}}</el-menu-item> 44 >临时网页开发路由跳转</template
45 >
46 <el-menu-item
47 v-for="(item, index) in tempTab"
48 :index="item.path"
49 :key="'tempTab' + index"
50 >{{ item.name }}</el-menu-item
51 >
39 </el-submenu> 52 </el-submenu>
40 </el-menu> 53 </el-menu>
41 </div> 54 </div>
...@@ -43,6 +56,13 @@ ...@@ -43,6 +56,13 @@
43 <div class="header-bottom"> 56 <div class="header-bottom">
44 <Navigation ref="navigation"></Navigation> 57 <Navigation ref="navigation"></Navigation>
45 </div> 58 </div>
59 <el-dialog
60 title="新建"
61 :visible.sync="dialogVisible"
62 width="40%"
63 >
64 <Create @closeDialog="closeDialog"></Create>
65 </el-dialog>
46 </el-header> 66 </el-header>
47 <el-main> 67 <el-main>
48 <router-view /> 68 <router-view />
...@@ -55,16 +75,18 @@ ...@@ -55,16 +75,18 @@
55 import util from "@/libs/util.js"; 75 import util from "@/libs/util.js";
56 import screenfull from "screenfull"; 76 import screenfull from "screenfull";
57 import Navigation from "../components/IvyElement/navigation"; 77 import Navigation from "../components/IvyElement/navigation";
78 import Create from "./panel/create/index";
58 import LineTree from "../components/lineTree/lineTree"; 79 import LineTree from "../components/lineTree/lineTree";
59 import { setTimeout } from "timers"; 80 import { setTimeout } from "timers";
60 export default { 81 export default {
61 components: { 82 components: {
62 Navigation, 83 Navigation,
63 LineTree, 84 LineTree,
85 Create,
64 }, 86 },
65 data() { 87 data() {
66 return { 88 return {
67 activeIndex:'1', 89 activeIndex: "1",
68 navigationList: [], 90 navigationList: [],
69 isActive: false, 91 isActive: false,
70 textLogo: false, 92 textLogo: false,
...@@ -72,43 +94,43 @@ export default { ...@@ -72,43 +94,43 @@ export default {
72 defaultActive: "", 94 defaultActive: "",
73 headTop: [ 95 headTop: [
74 { 96 {
75 path:"/create", 97 path: "/create",
76 select: false, 98 select: false,
77 }, 99 },
78 { 100 {
79 path:"/add", 101 path: "/add",
80 select: false, 102 select: false,
81 }, 103 },
82 { 104 {
83 path:"/modify", 105 path: "/modify",
84 select: false, 106 select: false,
85 }, 107 },
86 { 108 {
87 path:"/change", 109 path: "/change",
88 select: false, 110 select: false,
89 }, 111 },
90 { 112 {
91 path:"/search", 113 path: "/search",
92 select: false, 114 select: false,
93 } 115 },
94 ], 116 ],
95 tempTab:[ 117 tempTab: [
96 { 118 {
97 path:'/zrz', 119 path: "/zrz",
98 name:'自然幢' 120 name: "自然幢",
99 }, 121 },
100 { 122 {
101 path:'/dz', 123 path: "/dz",
102 name:'多幢' 124 name: "多幢",
103 }, 125 },
104 { 126 {
105 path:'/h', 127 path: "/h",
106 name:'户' 128 name: "户",
107 }, 129 },
108 { 130 {
109 path:'/zd', 131 path: "/zd",
110 name:'宗地' 132 name: "宗地",
111 } 133 },
112 ], 134 ],
113 // 上导航选中id 135 // 上导航选中id
114 indId: undefined, 136 indId: undefined,
...@@ -144,14 +166,14 @@ export default { ...@@ -144,14 +166,14 @@ export default {
144 children: [ 166 children: [
145 { 167 {
146 label: "宗地代码1933", 168 label: "宗地代码1933",
147 isZD:true 169 isZD: true,
148 }, 170 },
149 { 171 {
150 label: "自然幢2100", 172 label: "自然幢2100",
151 isZD:false 173 isZD: false,
152 }, 174 },
153 ], 175 ],
154 } 176 },
155 ], 177 ],
156 }, 178 },
157 { 179 {
...@@ -177,6 +199,7 @@ export default { ...@@ -177,6 +199,7 @@ export default {
177 children: [], 199 children: [],
178 }, 200 },
179 ], 201 ],
202 dialogVisible: false,
180 }; 203 };
181 }, 204 },
182 computed: { 205 computed: {
...@@ -264,6 +287,11 @@ export default { ...@@ -264,6 +287,11 @@ export default {
264 } 287 }
265 }, 288 },
266 selectTopItems(ind) { 289 selectTopItems(ind) {
290 if (ind == 0) {
291 //点击新建，弹框
292 this.dialogVisible = true;
293 } else {
294 this.dialogVisible = false;
267 this.indId = ind; 295 this.indId = ind;
268 // this.menuSelect(this.navigationList, ind); 296 // this.menuSelect(this.navigationList, ind);
269 // this.$store.dispatch("setTabs/init_tabs"); 297 // this.$store.dispatch("setTabs/init_tabs");
...@@ -271,6 +299,7 @@ export default { ...@@ -271,6 +299,7 @@ export default {
271 this.$router.push(this.headTop[ind].path); 299 this.$router.push(this.headTop[ind].path);
272 this.navSelect(ind); 300 this.navSelect(ind);
273 // util.cookies.set("indId", ind); 301 // util.cookies.set("indId", ind);
302 }
274 }, 303 },
275 // 上导航选中id 304 // 上导航选中id
276 navSelect(id) { 305 navSelect(id) {
...@@ -290,11 +319,15 @@ export default { ...@@ -290,11 +319,15 @@ export default {
290 screenfull.toggle(); 319 screenfull.toggle();
291 }, 320 },
292 //树控件点击事件 321 //树控件点击事件
293 itemClick(data){ 322 itemClick(data) {
294 console.log(data); 323 console.log(data);
295 }, 324 },
296 handleSelect(key, keyPath) { 325 handleSelect(key, keyPath) {
297 console.log(key, keyPath); 326 console.log(key, keyPath);
327 },
328 //关闭新建子组件弹框
329 closeDialog(){
330 this.dialogVisible = false;
298 } 331 }
299 }, 332 },
300 }; 333 };
...@@ -399,7 +432,7 @@ export default { ...@@ -399,7 +432,7 @@ export default {
399 } 432 }
400 433
401 .el-main { 434 .el-main {
402 background-color: #F1F4FC; 435 background-color: #f1f4fc;
403 color: #333; 436 color: #333;
404 // text-align: center; 437 // text-align: center;
405 // line-height: 160px; 438 // line-height: 160px;
......
1 <template> 1 <template>
2 <div> 2 <el-tabs
3 <el-tabs :tab-position="tabPosition" v-model="activeName" id="tabs" type="card" class="eltabs" @tab-click="handleClick"> 3 :tab-position="tabPosition"
4 <el-tab-pane class="eltabspane" label="宗地" name="zd" > 4 v-model="activeName"
5 5 id="tabs"
6 type="card"
7 class="eltabs"
8 @tab-click="handleClick"
9 >
10 <el-tab-pane class="eltabspane" label="宗地" name="zd">
6 <el-form :inline="true" class="demo-form-inline"> 11 <el-form :inline="true" class="demo-form-inline">
7 <el-form-item label="行政区"> 12 <el-form-item label="行政区">
8 <el-select v-model="xzqValue" value-key="xzqbsm" placeholder="行政区" @change="changeXzq(xzqValue)" style="width:130px;"> 13 <el-select
9 <el-option v-for="item in xzq" 14 v-model="xzqValue"
15 value-key="xzqbsm"
16 placeholder="行政区"
17 @change="changeXzq(xzqValue)"
18 style="width:130px;"
19 >
20 <el-option
21 v-for="item in xzq"
10 :key="item.xzqbsm" 22 :key="item.xzqbsm"
11 :label="item.xzqmc" 23 :label="item.xzqmc"
12 :value="item.xzqbsm"> 24 :value="item.xzqbsm"
25 >
13 </el-option> 26 </el-option>
14 </el-select> 27 </el-select>
15 </el-form-item> 28 </el-form-item>
16 <el-form-item label="地籍区"> 29 <el-form-item label="地籍区">
17 <el-select v-model="djqValue" placeholder="地籍区" @change="changeDjq(djqValue)" style="width:130px;"> 30 <el-select
18 <el-option v-for="item in djq" 31 v-model="djqValue"
32 placeholder="地籍区"
33 @change="changeDjq(djqValue)"
34 style="width:130px;"
35 >
36 <el-option
37 v-for="item in djq"
19 :key="item.bsm" 38 :key="item.bsm"
20 :label="item.mc" 39 :label="item.mc"
21 :value="item.bsm"> 40 :value="item.bsm"
41 >
22 </el-option> 42 </el-option>
23 </el-select> 43 </el-select>
24 </el-form-item> 44 </el-form-item>
25 <el-form-item label="地籍子区"> 45 <el-form-item label="地籍子区">
26 <el-select v-model="djzqValue" placeholder="地籍子区" style="width:130px;"> 46 <el-select
27 <el-option v-for="item in djzq" 47 v-model="djzqValue"
48 placeholder="地籍子区"
49 style="width:130px;"
50 >
51 <el-option
52 v-for="item in djzq"
28 :key="item.bsm" 53 :key="item.bsm"
29 :label="item.mc" 54 :label="item.mc"
30 :value="item.bsm"> 55 :value="item.bsm"
56 >
31 </el-option> 57 </el-option>
32 </el-select> 58 </el-select>
33 </el-form-item> 59 </el-form-item>
34 60
35 61 <el-form-item label="项目名称">
36 62 <el-input
37 <el-form-item label="项目名称" > 63 v-model="zdProjectName"
38 <el-input v-model="zdProjectName" placeholder="项目名称" style="width:400px;"></el-input> 64 placeholder="项目名称"
65 style="width:400px;"
66 ></el-input>
39 </el-form-item> 67 </el-form-item>
40 <el-form-item label="所有权类型"> 68 <el-form-item label="所有权类型">
41 <el-select v-model="syqlx.value" placeholder="所有权类型" @change="changeSyqlx(syqlx.value)" style="width:400px;"> 69 <el-select
42 <el-option v-for="item in syqlx" 70 v-model="syqlx.value"
71 placeholder="所有权类型"
72 @change="changeSyqlx(syqlx.value)"
73 style="width:400px;"
74 >
75 <el-option
76 v-for="item in syqlx"
43 :key="item.value" 77 :key="item.value"
44 :label="item.label" 78 :label="item.label"
45 :value="item.value"> 79 :value="item.value"
80 >
46 </el-option> 81 </el-option>
47 </el-select> 82 </el-select>
48 </el-form-item> 83 </el-form-item>
49 <el-form-item label="特征码"> 84 <el-form-item label="特征码">
50 <el-select v-model="tzmCode" placeholder="地籍子区" style="width:200px;"> 85 <el-select
51 <el-option v-for="item in zdtzm" 86 v-model="tzmCode"
87 placeholder="地籍子区"
88 style="width:200px;"
89 >
90 <el-option
91 v-for="item in zdtzm"
52 :key="item.bsm" 92 :key="item.bsm"
53 :label="item.mc" 93 :label="item.mc"
54 :value="item.bsm"> 94 :value="item.bsm"
95 >
55 </el-option> 96 </el-option>
56 </el-select> 97 </el-select>
57 </el-form-item> 98 </el-form-item>
58 <div> 99 <div>
59 <el-form-item style="margin-left:300px;"> 100 <el-form-item style="margin-left:300px;">
60 <el-button type="primary" >导入图形</el-button> 101 <el-button type="primary">导入图形</el-button>
61 </el-form-item> 102 </el-form-item>
62 <el-form-item> 103 <el-form-item>
63 <el-button type="primary" @click="newZd">创建</el-button> 104 <el-button type="primary" @click="newZd">创建</el-button>
64 </el-form-item> 105 </el-form-item>
65 <el-form-item> 106 <el-form-item>
66 <el-button type="primary">取消</el-button> 107 <el-button type="primary" @click="close">取消</el-button>
67 </el-form-item> 108 </el-form-item>
68 </div> 109 </div>
69
70 </el-form> 110 </el-form>
71
72
73 </el-tab-pane> 111 </el-tab-pane>
74 <el-tab-pane class="eltabspane" label="宗海" name="zh">宗海</el-tab-pane> 112 <el-tab-pane class="eltabspane" label="宗海" name="zh">宗海</el-tab-pane>
75 <el-tab-pane class="eltabspane" label="自然幢" name="zrz"> 113 <el-tab-pane class="eltabspane" label="自然幢" name="zrz">
76 <el-form :inline="true" class="zrzProject"> 114 <el-form :inline="true" class="zrzProject">
77 <el-form-item label="项目名称"> 115 <el-form-item label="项目名称">
78 <el-input v-model="zrzProjectName" placeholder="项目名称" style="width:400px;"></el-input> 116 <el-input
117 v-model="zrzProjectName"
118 placeholder="项目名称"
119 style="width:400px;"
120 ></el-input>
79 </el-form-item> 121 </el-form-item>
80 122
81 <div> 123 <div>
82 <el-form-item style="margin-left:300px;"> 124 <el-form-item style="margin-left:300px;">
83 <el-button type="primary" >导入图形</el-button> 125 <el-button type="primary">导入图形</el-button>
84 </el-form-item> 126 </el-form-item>
85 <el-form-item> 127 <el-form-item>
86 <el-button type="primary" @click="newZrz">创建</el-button> 128 <el-button type="primary" @click="newZrz">创建</el-button>
87 </el-form-item> 129 </el-form-item>
88 <el-form-item> 130 <el-form-item>
89 <el-button type="primary">取消</el-button> 131 <el-button type="primary" @click="close">取消</el-button>
90 </el-form-item> 132 </el-form-item>
91 </div> 133 </div>
92 </el-form> 134 </el-form>
93 </el-tab-pane> 135 </el-tab-pane>
94 <el-tab-pane class="eltabspane" label="多幢" name="dz">多幢</el-tab-pane> 136 <el-tab-pane class="eltabspane" label="多幢" name="dz">多幢</el-tab-pane>
95 <el-tab-pane class="eltabspane" label="林权" name="lq">林权</el-tab-pane> 137 <el-tab-pane class="eltabspane" label="林权" name="lq">林权</el-tab-pane>
96 <el-tab-pane class="eltabspane" label="构筑物" name="gzw">构筑物</el-tab-pane> 138 <el-tab-pane class="eltabspane" label="构筑物" name="gzw"
139 >构筑物</el-tab-pane
140 >
97 </el-tabs> 141 </el-tabs>
98 </div>
99
100 </template> 142 </template>
101 <script> 143 <script>
102 import{getAllList,getListByXzqbsm,getListByPbsm,getDdicByMC} from "../../../api/common" 144 import {
145 getAllList,
146 getListByXzqbsm,
147 getListByPbsm,
148 getDdicByMC,
149 } from "../../../api/common";
103 import { insertQjZdjbxx } from "../../../api/zd"; 150 import { insertQjZdjbxx } from "../../../api/zd";
104 import { insertZrzjbxx } from "../../../api/zrz"; 151 import { insertZrzjbxx } from "../../../api/zrz";
105 152
106 export default { 153 export default {
107 name:"", 154 name: "",
108 components:{}, 155 components: {},
109 props:{}, 156 props: {},
110 data(){ 157 data() {
111 return { 158 return {
112 tabPosition: 'left', 159 tabPosition: "left",
113 //默认第一个选项卡 160 //默认第一个选项卡
114 activeName: "zd", 161 activeName: "zd",
115 zdProjectName:'', 162 zdProjectName: "",
116 zrzProjectName:'', 163 zrzProjectName: "",
117 tzmCode:'', 164 tzmCode: "",
118 syqlxCode:'', 165 syqlxCode: "",
119 xzqValue:'', 166 xzqValue: "",
120 djqValue:'', 167 djqValue: "",
121 djzqValue:'', 168 djzqValue: "",
122 xzq:[], 169 xzq: [],
123 djq:[], 170 djq: [],
124 djzq:[], 171 djzq: [],
125 syqlx:[ 172 syqlx: [
126 { 173 {
127 label:"国家所有", 174 label: "国家所有",
128 value:"G" 175 value: "G",
129 },{ 176 },
130 label:"集体所有", 177 {
131 value:"J" 178 label: "集体所有",
132 },{ 179 value: "J",
133 label:"土地所有权未确定或有争议", 180 },
134 value:"Z" 181 {
182 label: "土地所有权未确定或有争议",
183 value: "Z",
135 }, 184 },
136 ], 185 ],
137 zdtzm:[] 186 zdtzm: [],
138 } 187 };
139 }, 188 },
140 created(){ 189 created() {
141 this.getXzqList(); 190 this.getXzqList();
142 this.getDdicByMC(); 191 this.getDdicByMC();
143 }, 192 },
144 mounted(){}, 193 mounted() {},
145 methods:{ 194 methods: {
146 handleClick(tab, event) { 195 handleClick(tab, event) {
147 console.log(tab, event); 196 console.log(tab, event);
148 console.log(tab.name); 197 console.log(tab.name);
149 }, 198 },
150 newZd(){ 199 newZd() {
151 var data = { 200 var data = {
152 xzqbsm:this.xzqValue, 201 xzqbsm: this.xzqValue,
153 djqbsm:this.djqValue, 202 djqbsm: this.djqValue,
154 djzqbsm:this.djzqValue, 203 djzqbsm: this.djzqValue,
155 syqlxbsm:this.syqlxCode, 204 syqlxbsm: this.syqlxCode,
156 xmmc:this.zdProjectName, 205 xmmc: this.zdProjectName,
157 zdtzmbsm:this.tzmCode 206 zdtzmbsm: this.tzmCode,
158 } 207 };
159 console.log(data); 208 console.log(data);
160 insertQjZdjbxx(data).then((res) => { 209 insertQjZdjbxx(data)
161 console.log(res.result) 210 .then((res) => {
162 if(res.code=="200"){ 211 console.log(res.result);
212 if (res.code == "200") {
163 this.$message({ 213 this.$message({
164 message: '创建成功！', 214 message: "创建成功！",
165 type: 'success' 215 type: "success",
166 }); 216 });
167 //todo 跳转到宗地基本信息内容表页面 (预留) 217 //todo 跳转到宗地基本信息内容表页面 (预留)
168 218 this.close()
169 }else{ 219 this.$router.push('/zd');
170 this.$message.error('创建失败！'); 220 } else {
221 this.$message.error("创建失败！");
171 } 222 }
172 }) 223 })
173 .catch((error) => { 224 .catch((error) => {});
174
175 });
176 }, 225 },
177 newZrz(){ 226 newZrz() {
178 //todo 在新增时，如果是点击顶部新建里面的自然幢则不传zdbsm 如果是点击右键里面的添加定着物则传zdbsm 227 //todo 在新增时，如果是点击顶部新建里面的自然幢则不传zdbsm 如果是点击右键里面的添加定着物则传zdbsm
179 var data = { 228 var data = {
180 userbsm:'', 229 userbsm: "",
181 xmmc:this.zrzProjectName, 230 xmmc: this.zrzProjectName,
182 zdbsm:'' 231 zdbsm: "",
183 } 232 };
184 console.log(data); 233 console.log(data);
185 insertZrzjbxx(data).then((res) => { 234 insertZrzjbxx(data)
186 console.log(res.result) 235 .then((res) => {
187 if(res.code=="200"){ 236 console.log(res.result);
237 if (res.code == "200") {
188 this.$message({ 238 this.$message({
189 message: '创建成功！', 239 message: "创建成功！",
190 type: 'success' 240 type: "success",
191 }); 241 });
192 //todo 跳转到自然幢基本信息内容表页面 (预留) 242 //todo 跳转到自然幢基本信息内容表页面 (预留)
193 243 this.close()
194 }else{ 244 this.$router.push('/zrz');
195 this.$message.error('创建失败！'); 245 } else {
246 this.$message.error("创建失败！");
196 } 247 }
197 }) 248 })
198 .catch((error) => { 249 .catch((error) => {});
199
200 });
201 }, 250 },
202 getXzqList(){ 251 getXzqList() {
203 getAllList().then((res) => { 252 getAllList()
204 console.log(res.result) 253 .then((res) => {
254 console.log(res.result);
205 this.xzq = res.result; 255 this.xzq = res.result;
206 }) 256 })
207 .catch((error) => { 257 .catch((error) => {});
208
209 });
210 }, 258 },
211 getDdicByMC(){ 259 getDdicByMC() {
212 getDdicByMC("宗地（宗海）特征码").then((res) => { 260 getDdicByMC("宗地（宗海）特征码")
213 console.log(res.result) 261 .then((res) => {
262 console.log(res.result);
214 this.zdtzm = res.result; 263 this.zdtzm = res.result;
215
216 }) 264 })
217 .catch((error) => { 265 .catch((error) => {});
218
219 });
220 }, 266 },
221 changeXzq(id){ 267 changeXzq(id) {
222 this.djq = []; 268 this.djq = [];
223 this.djzq = []; 269 this.djzq = [];
224 this.djqValue = ''; 270 this.djqValue = "";
225 this.djzqValue = ''; 271 this.djzqValue = "";
226 getListByXzqbsm(id).then((res) => { 272 getListByXzqbsm(id)
227 if(res.result==null){ 273 .then((res) => {
274 if (res.result == null) {
228 this.djq = null; 275 this.djq = null;
229 }else{ 276 } else {
230 this.djq = res.result; 277 this.djq = res.result;
231
232 } 278 }
233 }) 279 })
234 .catch((error) => { 280 .catch((error) => {});
235
236 });
237 }, 281 },
238 changeDjq(item){ 282 changeDjq(item) {
239 this.djzq = []; 283 this.djzq = [];
240 this.djzqValue = ''; 284 this.djzqValue = "";
241 if(item==null){ 285 if (item == null) {
242 console.log("llllllllllasdas") 286 console.log("llllllllllasdas");
243 }else { 287 } else {
244 console.log(item) 288 console.log(item);
245 getListByPbsm(item).then((res) => { 289 getListByPbsm(item)
246 console.log(res.result) 290 .then((res) => {
247 if (res.result== null) { 291 console.log(res.result);
292 if (res.result == null) {
248 this.djzq = null; 293 this.djzq = null;
249 } else { 294 } else {
250 this.djzq = res.result; 295 this.djzq = res.result;
251
252 } 296 }
253 }) 297 })
254 .catch((error) => { 298 .catch((error) => {});
255
256 });
257 } 299 }
258 }, 300 },
259 changeSyqlx(id){ 301 changeSyqlx(id) {
260 this.syqlxCode = id; 302 this.syqlxCode = id;
261 console.log(this.syqlxCode); 303 console.log(this.syqlxCode);
262 }, 304 },
305 close() {
306 this.$emit("closeDialog");
307 },
263 }, 308 },
264 computed: {}, 309 computed: {},
265 watch: {}, 310 watch: {},
266 } 311 };
267 </script> 312 </script>
268 <style > 313 <style>
269 .eltabs{ 314 .eltabs {
270 height: 600px;width:800px;margin:80px auto;border:1px solid #666 315 height: 366px;
316 width: 100%;
271 } 317 }
272 .eltabspane{ 318 .eltabspane {
273 height: 500px;width:660px;padding:20px; 319 height: 100%;
320 width: 100%;
321 padding: 20px;
274 } 322 }
275 323
276 #tabs .el-tabs__item { 324 #tabs .el-tabs__item {
277 font-size:18px!important; 325 font-size: 18px !important;
278 color:#333; 326 color: #333;
279 width:100px; 327 width: 100px;
280 height:60px; 328 height: 60px;
281 line-height: 80px; 329 line-height: 80px;
282 } 330 }
283 .zrzProject{ 331 .zrzProject {
284 margin-top:80px; 332 margin-top: 80px;
285 } 333 }
286
287 </style> 334 </style>
......