zhanbo.xu

feat: 开发新增功能

...@@ -223,3 +223,23 @@ export function bathDeclareDate(data) { ...@@ -223,3 +223,23 @@ export function bathDeclareDate(data) {
223 data, 223 data,
224 }); 224 });
225 } 225 }
226 +
227 +// GET
228 +// ​/operatorPlace​/getCurrUserOperatorCode
229 +// 获取当前用户监管场所代码
230 +export function getCurrUserOperatorCode() {
231 + return request({
232 + url: "/bus-customer/operatorPlace/getCurrUserOperatorCode",
233 + method: "get",
234 + });
235 +}
236 +
237 +export function declareUpload(data) {
238 + return request({
239 + url: "/bus-customer/declareData/" + data.type,
240 + method: "post",
241 + data: {
242 + ...data,
243 + },
244 + });
245 +}
......
...@@ -5,7 +5,7 @@ import request from "@/utils/request"; ...@@ -5,7 +5,7 @@ import request from "@/utils/request";
5 // 新增监管场所 5 // 新增监管场所
6 export function addOperatorPlace(data) { 6 export function addOperatorPlace(data) {
7 return request({ 7 return request({
8 - url: "/bus-customer/operatorPlace/addOperatorPlace", 8 + url: "/bus-customer/operatorPlace/addOperatorPlace",
9 method: "post", 9 method: "post",
10 data: data, 10 data: data,
11 }); 11 });
...@@ -16,7 +16,7 @@ export function addOperatorPlace(data) { ...@@ -16,7 +16,7 @@ export function addOperatorPlace(data) {
16 // 查询监管场所列表 16 // 查询监管场所列表
17 export function getOperatorPlaceList(data) { 17 export function getOperatorPlaceList(data) {
18 return request({ 18 return request({
19 - url: "/bus-customer/operatorPlace/getOperatorPlaceList", 19 + url: "/bus-customer/operatorPlace/getOperatorPlaceList",
20 method: "post", 20 method: "post",
21 data: data, 21 data: data,
22 }); 22 });
...@@ -27,7 +27,7 @@ export function getOperatorPlaceList(data) { ...@@ -27,7 +27,7 @@ export function getOperatorPlaceList(data) {
27 // 修改监管场所 27 // 修改监管场所
28 export function updateOperatorPlace(data) { 28 export function updateOperatorPlace(data) {
29 return request({ 29 return request({
30 - url: "/bus-customer/operatorPlace/updateOperatorPlace", 30 + url: "/bus-customer/operatorPlace/updateOperatorPlace",
31 method: "post", 31 method: "post",
32 data: data, 32 data: data,
33 }); 33 });
......
1 +<template>
2 + <el-dialog
3 + class="entryDialog classCUploadDialog"
4 + title="运抵单申报"
5 + :visible.sync="outerVisible"
6 + :show-close="false"
7 + width="40%"
8 + :close-on-click-modal="false"
9 + :destroy-on-close="true"
10 + v-loading="loadings.dialogLoading"
11 + @close="close"
12 + >
13 + <div class="modelItem">
14 + <el-form
15 + class="fedexFormStyle"
16 + ref="formData"
17 + :model="formData"
18 + label-position="top"
19 + size="small"
20 + >
21 + <el-row :gutter="5">
22 + <el-col :span="8">
23 + <Formitem label="监管场所" prop="operatorCode" type="edit">
24 + <el-select
25 + type="text"
26 + id="inputInner-edit-operatorCode"
27 + v-model="formData.operatorCode"
28 + clearable
29 + filterable
30 + placeholder=""
31 + >
32 + <el-option
33 + v-for="item in operatorCode"
34 + :key="item"
35 + :label="item"
36 + :value="item"
37 + ></el-option>
38 + </el-select>
39 + </Formitem>
40 + </el-col>
41 +
42 + <el-col :span="8">
43 + <Formitem
44 + label="境内运输工具编码"
45 + prop="domesticTrafNo"
46 + type="edit"
47 + >
48 + <el-input
49 + type="text"
50 + class="inputShadow"
51 + id="inputInner-edit-domesticTrafNo"
52 + resize="none"
53 + v-model="formData.domesticTrafNo"
54 + clearable
55 + placeholder=""
56 + ></el-input>
57 + </Formitem>
58 + </el-col>
59 + </el-row>
60 + </el-form>
61 + </div>
62 + <div class="dialogOption entrySave">
63 + <el-button
64 + class="entrySaveButton"
65 + :disabled="loadings.submitLoading"
66 + @click="submit"
67 + >确 定</el-button
68 + >
69 + <el-button class="entrySaveButton" @click="close">关 闭</el-button>
70 + </div>
71 + </el-dialog>
72 +</template>
73 +
74 +<script>
75 +import {
76 + getCurrUserOperatorCode,
77 + declareUpload,
78 +} from "@/api/declareData-api.js";
79 +export default {
80 + props: {
81 + outerVisible: {
82 + type: Boolean,
83 + default: false,
84 + },
85 + selected: {
86 + type: Array,
87 + default: () => {
88 + return [];
89 + },
90 + },
91 + },
92 + watch: {
93 + outerVisible(val) {
94 + if (val) {
95 + this.loadings.dialogLoading = false;
96 + this.fetchOperatorCode();
97 + }
98 + },
99 + },
100 + data() {
101 + return {
102 + formData: {
103 + operatorCode: "",
104 + domesticTrafNo: "",
105 + },
106 +
107 + loadings: {
108 + dialogLoading: false,
109 + submitLoading: false,
110 + },
111 + loadingText: "",
112 + operatorCode: [],
113 + };
114 + },
115 + methods: {
116 + fetchOperatorCode() {
117 + getCurrUserOperatorCode().then((res) => {
118 + if (res.code === "200") {
119 + this.operatorCode = res.data;
120 + }
121 + });
122 + },
123 +
124 + //数据保存
125 + submit() {
126 + this.loadings.dialogLoading = true;
127 + let obj = {
128 + ...this.formData,
129 + declareIds: this.selected.map((item) => item.declareId),
130 + type: "arrivalIn",
131 + };
132 + this.$refs.formData.validate((valid) => {
133 + if (valid) {
134 + this.addapi(obj);
135 + } else {
136 + this.loadings.dialogLoading = false;
137 + }
138 + });
139 + },
140 + //新增
141 + addapi(val) {
142 + declareUpload(val)
143 + .then((res) => {
144 + if (res.code === "200") {
145 + this.msgSuccess(res.message);
146 + this.close();
147 + } else {
148 + this.alertWarningMsg(res.message);
149 + this.loadings.dialogLoading = false;
150 + }
151 + })
152 + .catch((err) => {
153 + console.log(err);
154 + this.loadings.dialogLoading = false;
155 + });
156 + },
157 +
158 + close() {
159 + this.formData = {
160 + operatorCode: "",
161 + domesticTrafNo: "",
162 + };
163 + this.loadings.dialogLoading = false;
164 + this.$emit("close");
165 + },
166 + },
167 +};
168 +</script>
169 +
170 +<style lang="scss" scoped>
171 +@import "@/assets/styles/variables.scss";
172 +</style>
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
...@@ -126,7 +126,8 @@ ...@@ -126,7 +126,8 @@
126 ref="entryTable" 126 ref="entryTable"
127 :data="tableData" 127 :data="tableData"
128 :headerData="headerData" 128 :headerData="headerData"
129 - :maxHeight="tableMaxheight" 129 + :height="tableMaxheight + 'px'"
130 + :maxHeight="tableMaxheight + 'px'"
130 :border="true" 131 :border="true"
131 :pagination="true" 132 :pagination="true"
132 :order="true" 133 :order="true"
...@@ -144,7 +145,12 @@ ...@@ -144,7 +145,12 @@
144 <template slot="optionColumn"> 145 <template slot="optionColumn">
145 <el-table-column align="left" label="操作" width="150"> 146 <el-table-column align="left" label="操作" width="150">
146 <template slot-scope="scope"> 147 <template slot-scope="scope">
147 - <el-button type="text" @click="downloadFile(scope.row)" :disabled="!scope.row.certificare">下载证书</el-button> 148 + <el-button
149 + type="text"
150 + @click="downloadFile(scope.row)"
151 + :disabled="!scope.row.certificare"
152 + >下载证书</el-button
153 + >
148 <!-- <el-button type="text" @click="downloadQingdaoFile(scope.row)" :disabled="!scope.row.certificare">下载青岛证书</el-button> --> 154 <!-- <el-button type="text" @click="downloadQingdaoFile(scope.row)" :disabled="!scope.row.certificare">下载青岛证书</el-button> -->
149 <el-button type="text" @click="update(scope.row)"> 修改 </el-button> 155 <el-button type="text" @click="update(scope.row)"> 修改 </el-button>
150 </template> 156 </template>
...@@ -163,7 +169,11 @@ ...@@ -163,7 +169,11 @@
163 </template> 169 </template>
164 170
165 <script> 171 <script>
166 -import { getCustomerList,downloadCertificate, downloadQingdaoCertificate } from "@/api/system/customer-ai.js"; 172 +import {
173 + getCustomerList,
174 + downloadCertificate,
175 + downloadQingdaoCertificate,
176 +} from "@/api/system/customer-ai.js";
167 import { getPortList } from "@/api/system/user.js"; 177 import { getPortList } from "@/api/system/user.js";
168 import DialogVue from "./dialog.vue"; 178 import DialogVue from "./dialog.vue";
169 export default { 179 export default {
...@@ -249,8 +259,8 @@ export default { ...@@ -249,8 +259,8 @@ export default {
249 align: "left", 259 align: "left",
250 }, 260 },
251 ], 261 ],
252 - dict:{ 262 + dict: {
253 - port:[] 263 + port: [],
254 }, 264 },
255 // dict: { 265 // dict: {
256 // orderRequester: [ 266 // orderRequester: [
...@@ -261,7 +271,7 @@ export default { ...@@ -261,7 +271,7 @@ export default {
261 loadings: { 271 loadings: {
262 searchLoading: false, 272 searchLoading: false,
263 }, 273 },
264 - tableMaxheight: null, 274 + tableMaxheight: 500,
265 outerVisible: false, 275 outerVisible: false,
266 dialogTitle: "", 276 dialogTitle: "",
267 editType: "", 277 editType: "",
...@@ -270,18 +280,25 @@ export default { ...@@ -270,18 +280,25 @@ export default {
270 created() { 280 created() {
271 this.searchPortDictData(); 281 this.searchPortDictData();
272 this.search(0); 282 this.search(0);
283 + this.calculateTableHeight();
273 }, 284 },
274 mounted() { 285 mounted() {
275 - this.tableMaxheight = window.innerHeight - 300; 286 + window.addEventListener("resize", this.calculateTableHeight);
287 + },
288 + beforeDestroy() {
289 + window.removeEventListener("resize", this.calculateTableHeight);
276 }, 290 },
277 methods: { 291 methods: {
292 + calculateTableHeight() {
293 + this.tableMaxheight = window.innerHeight - 300;
294 + },
278 //查询 295 //查询
279 search(val) { 296 search(val) {
280 this.loadings.searchLoading = true; 297 this.loadings.searchLoading = true;
281 if (val == 0) { 298 if (val == 0) {
282 this.page.pageIndex = 1; 299 this.page.pageIndex = 1;
283 } 300 }
284 - let obj = {...this.sreachFormData}; 301 + let obj = { ...this.sreachFormData };
285 obj.pageIndex = this.page.pageIndex; 302 obj.pageIndex = this.page.pageIndex;
286 obj.pageSize = this.page.pageSize; 303 obj.pageSize = this.page.pageSize;
287 obj.endCreationTime = ""; 304 obj.endCreationTime = "";
...@@ -325,21 +342,21 @@ export default { ...@@ -325,21 +342,21 @@ export default {
325 }, 342 },
326 //下载证书 343 //下载证书
327 downloadFile(val) { 344 downloadFile(val) {
328 - downloadCertificate(val.id,val.certificare).then((res)=>{ 345 + downloadCertificate(val.id, val.certificare)
329 - 346 + .then((res) => {})
330 - }).catch((err)=>{ 347 + .catch((err) => {
331 console.log(err); 348 console.log(err);
332 this.alertErrorMsg("证书下载失败,请联系管理员!"); 349 this.alertErrorMsg("证书下载失败,请联系管理员!");
333 - }) 350 + });
334 }, 351 },
335 //下载青岛证书 352 //下载青岛证书
336 downloadQingdaoFile(val) { 353 downloadQingdaoFile(val) {
337 - downloadQingdaoCertificate(val.id,val.certificare).then((res)=>{ 354 + downloadQingdaoCertificate(val.id, val.certificare)
338 - 355 + .then((res) => {})
339 - }).catch((err)=>{ 356 + .catch((err) => {
340 console.log(err); 357 console.log(err);
341 this.alertErrorMsg("证书下载失败,请联系管理员!"); 358 this.alertErrorMsg("证书下载失败,请联系管理员!");
342 - }) 359 + });
343 }, 360 },
344 addCustomer() { 361 addCustomer() {
345 this.dialogTitle = "新增客户"; 362 this.dialogTitle = "新增客户";
...@@ -347,11 +364,11 @@ export default { ...@@ -347,11 +364,11 @@ export default {
347 this.outerVisible = true; 364 this.outerVisible = true;
348 }, 365 },
349 update(val) { 366 update(val) {
350 - let data={ 367 + let data = {
351 ...val, 368 ...val,
352 - file:null, 369 + file: null,
353 - qingdaoFile:null 370 + qingdaoFile: null,
354 - } 371 + };
355 this.dialogTitle = "修改客户"; 372 this.dialogTitle = "修改客户";
356 this.editType = "update"; 373 this.editType = "update";
357 this.outerVisible = true; 374 this.outerVisible = true;
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 title="新增模拟回执管理" 4 title="新增模拟回执管理"
5 :visible.sync="outerVisible" 5 :visible.sync="outerVisible"
6 :show-close="false" 6 :show-close="false"
7 - width="40%" 7 + width="45%"
8 :close-on-click-modal="false" 8 :close-on-click-modal="false"
9 :destroy-on-close="true" 9 :destroy-on-close="true"
10 v-loading="loadings.dialogLoading" 10 v-loading="loadings.dialogLoading"
...@@ -287,7 +287,7 @@ export default { ...@@ -287,7 +287,7 @@ export default {
287 .order-select-warp-ol { 287 .order-select-warp-ol {
288 ::v-deep { 288 ::v-deep {
289 .el-select__input { 289 .el-select__input {
290 - width: 40px !important; 290 + width: 35px !important;
291 padding-top: 0 !important; 291 padding-top: 0 !important;
292 } 292 }
293 } 293 }
......
...@@ -182,7 +182,7 @@ ...@@ -182,7 +182,7 @@
182 </el-dropdown-menu> 182 </el-dropdown-menu>
183 </el-dropdown> 183 </el-dropdown>
184 <!-- 运抵单申报按钮 --> 184 <!-- 运抵单申报按钮 -->
185 - <el-button 185 + <!-- <el-button
186 size="small" 186 size="small"
187 type="primary" 187 type="primary"
188 class="dropdown-style-button" 188 class="dropdown-style-button"
...@@ -194,7 +194,7 @@ ...@@ -194,7 +194,7 @@
194 icon-class="fedexDeclareIcon" 194 icon-class="fedexDeclareIcon"
195 ></svg-icon> 195 ></svg-icon>
196 运抵单申报 196 运抵单申报
197 - </el-button> 197 + </el-button> -->
198 <!-- 离境单申报按钮 --> 198 <!-- 离境单申报按钮 -->
199 <el-button 199 <el-button
200 size="small" 200 size="small"
...@@ -202,7 +202,11 @@ ...@@ -202,7 +202,11 @@
202 class="dropdown-style-button" 202 class="dropdown-style-button"
203 :loading="loadings.departureLoading" 203 :loading="loadings.departureLoading"
204 @click=" 204 @click="
205 - declareData('departureLoading', '离境单申报', 'logisticsDeparture') 205 + declareDataTime(
206 + 'departureLoading',
207 + '离境单申报',
208 + 'logisticsDeparture'
209 + )
206 " 210 "
207 > 211 >
208 <svg-icon 212 <svg-icon
...@@ -243,9 +247,6 @@ ...@@ -243,9 +247,6 @@
243 <span style="font-weight: 700; color: #515a6e">订单编号:</span> 247 <span style="font-weight: 700; color: #515a6e">订单编号:</span>
244 {{ selectedLogRow.orderno }} 248 {{ selectedLogRow.orderno }}
245 </div> 249 </div>
246 - <!-- <div slot="buttonLabel">
247 - {{ selectedLogRow.allLogDataReceiptStatusPopoverType }}
248 - </div> -->
249 </TablePopover> 250 </TablePopover>
250 </section> 251 </section>
251 <Table 252 <Table
...@@ -436,6 +437,11 @@ ...@@ -436,6 +437,11 @@
436 :showDialog="batchModifyVisible" 437 :showDialog="batchModifyVisible"
437 @cancelBatchModify="cancelBatchModify" 438 @cancelBatchModify="cancelBatchModify"
438 /> 439 />
440 + <TimeDialog
441 + :timeVisible="timeVisible"
442 + :selected="selected"
443 + @close="dialogClose"
444 + />
439 </div> 445 </div>
440 </template> 446 </template>
441 447
...@@ -458,6 +464,7 @@ import RevokeDialog from "./revokeDialog.vue"; ...@@ -458,6 +464,7 @@ import RevokeDialog from "./revokeDialog.vue";
458 import TemplateDownloadDialog from "./templateDownloadDialog.vue"; 464 import TemplateDownloadDialog from "./templateDownloadDialog.vue";
459 import ExportDialog from "./exportDialog.vue"; 465 import ExportDialog from "./exportDialog.vue";
460 import BatchModify from "./batchModify.vue"; 466 import BatchModify from "./batchModify.vue";
467 +import TimeDialog from "./time-dialog.vue";
461 export default { 468 export default {
462 name: "ReportingData", 469 name: "ReportingData",
463 components: { 470 components: {
...@@ -466,6 +473,7 @@ export default { ...@@ -466,6 +473,7 @@ export default {
466 TemplateDownloadDialog, 473 TemplateDownloadDialog,
467 ExportDialog, 474 ExportDialog,
468 BatchModify, 475 BatchModify,
476 + TimeDialog,
469 }, 477 },
470 data() { 478 data() {
471 return { 479 return {
...@@ -641,6 +649,7 @@ export default { ...@@ -641,6 +649,7 @@ export default {
641 templateDownloadVisible: false, 649 templateDownloadVisible: false,
642 datasExportVisible: false, 650 datasExportVisible: false,
643 batchModifyVisible: false, 651 batchModifyVisible: false,
652 + timeVisible: false,
644 }; 653 };
645 }, 654 },
646 created() { 655 created() {
...@@ -669,6 +678,10 @@ export default { ...@@ -669,6 +678,10 @@ export default {
669 }); 678 });
670 }, 679 },
671 methods: { 680 methods: {
681 + dialogClose() {
682 + this.timeVisible = false;
683 + this.search(0);
684 + },
672 calculateTableHeight() { 685 calculateTableHeight() {
673 this.tableMaxheight = window.innerHeight - 300; 686 this.tableMaxheight = window.innerHeight - 300;
674 }, 687 },
...@@ -826,6 +839,14 @@ export default { ...@@ -826,6 +839,14 @@ export default {
826 this.datasExportVisible = false; 839 this.datasExportVisible = false;
827 this.loadings.exportDeclareLoading = false; 840 this.loadings.exportDeclareLoading = false;
828 }, 841 },
842 + // 离镜申报
843 + declareDataTime(loadingKey, dropdownName, dropdownCode) {
844 + if (this.selected.length === 0) {
845 + this.alertWarningMsg("请选择数据!");
846 + return;
847 + }
848 + this.timeVisible = true;
849 + },
829 850
830 /** 851 /**
831 * 通用申报方法 852 * 通用申报方法
......
1 +<template>
2 + <el-dialog
3 + class="entryDialog classCUploadDialog"
4 + title="离境单申报"
5 + :visible.sync="timeVisible"
6 + :show-close="false"
7 + width="40%"
8 + :close-on-click-modal="false"
9 + :destroy-on-close="true"
10 + v-loading="loadings.dialogLoading"
11 + @close="close"
12 + >
13 + <div class="modelItem">
14 + <el-form
15 + class="fedexFormStyle"
16 + ref="formData"
17 + :model="formData"
18 + label-position="top"
19 + size="small"
20 + >
21 + <el-row :gutter="5">
22 + <el-col :span="8">
23 + <Formitem label="离境时间" prop="leaveTime" type="edit">
24 + <!-- <el-select
25 + type="text"
26 + id="inputInner-edit-leaveTime"
27 + v-model="formData.leaveTimel-date-picker"
28 + clearable
29 + filterable
30 + placeholder=""
31 + >
32 + <el-option
33 + v-for="item in operatorCode"
34 + :key="item"
35 + :label="item"
36 + :value="item"
37 + ></el-option>
38 + </el-select> -->
39 + <el-date-picker
40 + class="inputInner--leaveTime"
41 + id="inputInner-edit-leaveTime"
42 + v-model="formData.leaveTime"
43 + format="yyyy-MM-dd HH:mm:ss"
44 + type="datetime"
45 + prefix-icon="none"
46 + value-format="yyyy-MM-dd HH:mm:ss"
47 + />
48 + </Formitem>
49 + </el-col>
50 + </el-row>
51 + </el-form>
52 + </div>
53 + <div class="dialogOption entrySave">
54 + <el-button
55 + class="entrySaveButton"
56 + :disabled="loadings.submitLoading"
57 + @click="submit"
58 + >确 定</el-button
59 + >
60 + <el-button class="entrySaveButton" @click="close">关 闭</el-button>
61 + </div>
62 + </el-dialog>
63 +</template>
64 +
65 +<script>
66 +import { declareUpload } from "@/api/declareData-api.js";
67 +export default {
68 + props: {
69 + timeVisible: {
70 + type: Boolean,
71 + default: false,
72 + },
73 + selected: {
74 + type: Array,
75 + default: () => {
76 + return [];
77 + },
78 + },
79 + },
80 +
81 + data() {
82 + return {
83 + formData: {
84 + leaveTime: "",
85 + },
86 +
87 + loadings: {
88 + dialogLoading: false,
89 + submitLoading: false,
90 + },
91 + loadingText: "",
92 + };
93 + },
94 + methods: {
95 + //数据保存
96 + submit() {
97 + let obj = {
98 + ...this.formData,
99 + declareIds: this.selected.map((item) => item.declareId),
100 + type: "logisticsDeparture",
101 + };
102 + this.$refs.formData.validate((valid) => {
103 + if (valid) {
104 + this.addapi(obj);
105 + }
106 + });
107 + },
108 + //新增
109 + addapi(val) {
110 + this.loadings.dialogLoading = true;
111 + declareUpload(val)
112 + .then((res) => {
113 + if (res.code === "200") {
114 + this.msgSuccess(res.message);
115 + this.close();
116 + } else {
117 + this.alertWarningMsg(res.message);
118 + this.loadings.dialogLoading = false;
119 + }
120 + })
121 + .catch((err) => {
122 + console.log(err);
123 + this.loadings.dialogLoading = false;
124 + });
125 + },
126 +
127 + close() {
128 + this.formData = {
129 + leaveTime: "",
130 + };
131 + this.loadings.dialogLoading = false;
132 + this.$emit("close");
133 + },
134 + },
135 +};
136 +</script>
137 +
138 +<style lang="scss" scoped>
139 +@import "@/assets/styles/variables.scss";
140 +</style>
...@@ -168,11 +168,11 @@ export default { ...@@ -168,11 +168,11 @@ export default {
168 // 新增菜单用,可以不麻烦后端--------- 168 // 新增菜单用,可以不麻烦后端---------
169 addMenuFn() { 169 addMenuFn() {
170 let params = { 170 let params = {
171 - icon: "receipt", 171 + icon: "",
172 - menuName: "模拟回执管理", 172 + menuName: "运抵单申报",
173 order: 1, 173 order: 1,
174 - parentMenuId: 0, 174 + parentMenuId: 96,
175 - physicalUrl: "/receipt", //-management 175 + physicalUrl: "/arrival-declare", //-management
176 url: "", 176 url: "",
177 }; 177 };
178 addMenu(params).then((res) => { 178 addMenu(params).then((res) => {
......
...@@ -299,13 +299,4 @@ export default { ...@@ -299,13 +299,4 @@ export default {
299 299
300 <style lang="scss" scoped> 300 <style lang="scss" scoped>
301 @import "@/assets/styles/variables.scss"; 301 @import "@/assets/styles/variables.scss";
302 -
303 -.menuTree {
304 - max-width: 350px;
305 - max-height: 300px;
306 - overflow: auto;
307 - margin: 0 auto;
308 - border: 1px solid #999;
309 - padding: 10px;
310 -}
311 </style> 302 </style>
......