傅行帆 6 anni fa
parent
commit
c60e8428a7

+ 69
- 0
CODE/smart-community/property-api/src/main/java/com/community/huiju/controller/TpShopTypeController.java Vedi File

@@ -13,12 +13,15 @@ import io.swagger.annotations.ApiImplicitParams;
13 13
 import io.swagger.annotations.ApiOperation;
14 14
 import org.springframework.beans.factory.annotation.Autowired;
15 15
 import org.springframework.cloud.context.config.annotation.RefreshScope;
16
+import org.springframework.web.bind.annotation.PathVariable;
17
+import org.springframework.web.bind.annotation.RequestBody;
16 18
 import org.springframework.web.bind.annotation.RequestMapping;
17 19
 import org.springframework.web.bind.annotation.RequestMethod;
18 20
 import org.springframework.web.bind.annotation.RequestParam;
19 21
 import org.springframework.web.bind.annotation.RestController;
20 22
 
21 23
 import javax.servlet.http.HttpSession;
24
+import java.time.LocalDateTime;
22 25
 
23 26
 /**
24 27
  * <p>
@@ -51,4 +54,70 @@ public class TpShopTypeController extends BaseController {
51 54
 		responseBean = shopTypeService.getTypesList(userElement.getCommunityId(),pageNum,pageSize);
52 55
 		return responseBean;
53 56
 	}
57
+	
58
+	@ApiOperation(value = "添加商铺类型", notes = "添加商铺类型")
59
+	@ApiImplicitParams({
60
+			@ApiImplicitParam(paramType = "body", dataType = "TpShopType", name = "shopType", value = "商铺类型"),
61
+			@ApiImplicitParam(paramType = "header", dataTypeClass = String.class, name = "X-Auth-Token", value = "Token")
62
+	})
63
+	@RequestMapping(value = "/shop/add/type",method = RequestMethod.POST)
64
+	public ResponseBean saveShopType(@RequestBody TpShopType shopType, HttpSession session){
65
+		ResponseBean responseBean = new ResponseBean();
66
+		UserElement userElement = getUserElement(session);
67
+		shopType.setCommunityId(userElement.getCommunityId());
68
+		shopType.setSource("self");
69
+		shopType.setCreateUser(userElement.getId());
70
+		shopType.setCreateDate(LocalDateTime.now());
71
+		boolean state  = shopTypeService.save(shopType);
72
+		if (state){
73
+			responseBean.addSuccess("添加成功");
74
+		}else{
75
+			responseBean.addError("添加失败");
76
+		}
77
+		return responseBean;
78
+	}
79
+	
80
+	@ApiOperation(value = "获取商铺类型", notes = "获取商铺类型")
81
+	@ApiImplicitParams({
82
+			@ApiImplicitParam(paramType = "path", dataType = "Integer", name = "id", value = "商铺类型Id"),
83
+			@ApiImplicitParam(paramType = "header", dataTypeClass = String.class, name = "X-Auth-Token", value = "Token")
84
+	})
85
+	@RequestMapping(value = "/shop/get/type/{id}",method = RequestMethod.GET)
86
+	public ResponseBean getShopType(@PathVariable Integer id, HttpSession session){
87
+		ResponseBean responseBean = new ResponseBean();
88
+		UserElement userElement = getUserElement(session);
89
+		TpShopType tpShopType = shopTypeService.getById(id);
90
+		responseBean.addSuccess(tpShopType);
91
+		return responseBean;
92
+	}
93
+	
94
+	@ApiOperation(value = "更新商铺类型", notes = "更新商铺类型")
95
+	@ApiImplicitParams({
96
+			@ApiImplicitParam(paramType = "body", dataType = "TpShopType", name = "shopType", value = "商铺类型"),
97
+			@ApiImplicitParam(paramType = "header", dataTypeClass = String.class, name = "X-Auth-Token", value = "Token")
98
+	})
99
+	@RequestMapping(value = "/shop/update/type",method = RequestMethod.POST)
100
+	public ResponseBean updateShopType(@RequestBody TpShopType shopType, HttpSession session){
101
+		ResponseBean responseBean = new ResponseBean();
102
+		UserElement userElement = getUserElement(session);
103
+		boolean state  = shopTypeService.updateById(shopType);
104
+		if (state){
105
+			responseBean.addSuccess("更新成功");
106
+		}else{
107
+			responseBean.addError("更新失败");
108
+		}
109
+		return responseBean;
110
+	}
111
+	
112
+	@ApiOperation(value = "删除商铺类型", notes = "删除商铺类型")
113
+	@ApiImplicitParams({
114
+			@ApiImplicitParam(paramType = "body", dataType = "String", name = "jsonString", value = "商铺id集合"),
115
+			@ApiImplicitParam(paramType = "header", dataTypeClass = String.class, name = "X-Auth-Token", value = "Token")
116
+	})
117
+	@RequestMapping(value = "/shop/delete/type",method = RequestMethod.DELETE)
118
+	public ResponseBean deleteShopType(@RequestBody String jsonString, HttpSession session){
119
+		ResponseBean responseBean = new ResponseBean();
120
+		responseBean = shopTypeService.deleteShopType(jsonString);
121
+		return responseBean;
122
+	}
54 123
 }

+ 6
- 1
CODE/smart-community/property-api/src/main/java/com/community/huiju/model/TpShopSetting.java Vedi File

@@ -1,5 +1,7 @@
1 1
 package com.community.huiju.model;
2 2
 
3
+import com.baomidou.mybatisplus.annotation.IdType;
4
+import com.baomidou.mybatisplus.annotation.TableId;
3 5
 import lombok.Data;
4 6
 import lombok.EqualsAndHashCode;
5 7
 import lombok.experimental.Accessors;
@@ -21,7 +23,10 @@ import java.time.LocalDateTime;
21 23
 public class TpShopSetting implements Serializable {
22 24
 
23 25
     private static final long serialVersionUID = 1L;
24
-
26
+    
27
+    @TableId(value = "id", type = IdType.AUTO)
28
+    private Integer id;
29
+    
25 30
     /**
26 31
      * 小区ID
27 32
      */

+ 6
- 1
CODE/smart-community/property-api/src/main/java/com/community/huiju/model/TpShopType.java Vedi File

@@ -1,5 +1,7 @@
1 1
 package com.community.huiju.model;
2 2
 
3
+import com.baomidou.mybatisplus.annotation.IdType;
4
+import com.baomidou.mybatisplus.annotation.TableId;
3 5
 import lombok.Data;
4 6
 import lombok.EqualsAndHashCode;
5 7
 import lombok.experimental.Accessors;
@@ -21,7 +23,10 @@ import java.time.LocalDateTime;
21 23
 public class TpShopType implements Serializable {
22 24
 
23 25
     private static final long serialVersionUID = 1L;
24
-
26
+    
27
+    @TableId(value = "id", type = IdType.AUTO)
28
+    private Integer id;
29
+    
25 30
     /**
26 31
      * 小区ID
27 32
      */

+ 7
- 0
CODE/smart-community/property-api/src/main/java/com/community/huiju/service/ITpShopTypeService.java Vedi File

@@ -22,4 +22,11 @@ public interface ITpShopTypeService extends IService<TpShopType> {
22 22
 	 * @return
23 23
 	 */
24 24
 	ResponseBean getTypesList(Integer communityId, Integer pageNum, Integer pageSize);
25
+	
26
+	/**
27
+	 * 删除商铺类型
28
+	 * @param jsonString
29
+	 * @return
30
+	 */
31
+	ResponseBean deleteShopType(String jsonString);
25 32
 }

+ 31
- 2
CODE/smart-community/property-api/src/main/java/com/community/huiju/service/impl/TpShopTypeServiceImpl.java Vedi File

@@ -1,5 +1,7 @@
1 1
 package com.community.huiju.service.impl;
2 2
 
3
+import com.alibaba.fastjson.JSONArray;
4
+import com.alibaba.fastjson.JSONObject;
3 5
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
4 6
 import com.baomidou.mybatisplus.core.metadata.IPage;
5 7
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
@@ -49,6 +51,8 @@ public class TpShopTypeServiceImpl extends ServiceImpl<TpShopTypeMapper, TpShopT
49 51
 		//获取列表数据
50 52
 		QueryWrapper<TpShopType> queryWrapper = new QueryWrapper<>();
51 53
 		queryWrapper.eq("community_id",communityId);
54
+		queryWrapper.orderByAsc("sort");
55
+		queryWrapper.orderByAsc("create_date");
52 56
 		IPage<TpShopType> myPage = shopTypeMapper.selectPage(page,queryWrapper);
53 57
 		//获取商铺是否app显示
54 58
 		QueryWrapper<TpShopSetting> settingQueryWrapper = new QueryWrapper<>();
@@ -56,11 +60,36 @@ public class TpShopTypeServiceImpl extends ServiceImpl<TpShopTypeMapper, TpShopT
56 60
 		TpShopSetting shopSetting = shopSettingMapper.selectOne(settingQueryWrapper);
57 61
 		Map<String,Object> map = new HashMap<>();
58 62
 		map.put("dataList",myPage.getRecords());
59
-		map.put("pageNum",myPage.getCurrent());
60
-		map.put("pageSize",myPage.getPages());
61 63
 		map.put("total",myPage.getTotal());
62 64
 		map.put("shopSettingValue",null == shopSetting ? false : true);
63 65
 		responseBean.addSuccess(map);
64 66
 		return responseBean;
65 67
 	}
68
+	
69
+	/**
70
+	 * 删除商铺类型
71
+	 *
72
+	 * @param jsonString
73
+	 * @return
74
+	 */
75
+	@Override
76
+	public ResponseBean deleteShopType(String jsonString) {
77
+		ResponseBean responseBean = new ResponseBean();
78
+		StringBuffer message = new StringBuffer();
79
+		message.append("删除成功。");
80
+		JSONObject jsonObject = JSONObject.parseObject(jsonString);
81
+		JSONArray ids = jsonObject.getJSONArray("idArray");
82
+		for (Object id : ids){
83
+			//根据ID查询这个数据是否是系统创建,系统创建的不能删除,非系统创建的能删除
84
+			TpShopType shopType = shopTypeMapper.selectById(id.toString());
85
+			if (shopType.getSource().equals("sys")){
86
+				//系统创建不可删除
87
+				message.append(shopType.getTypeName() + "为系统创建,不可删除。");
88
+			}else{
89
+				shopTypeMapper.deleteById(id.toString());
90
+			}
91
+		}
92
+		responseBean.addSuccess(message.toString());
93
+		return responseBean;
94
+	}
66 95
 }

+ 34
- 0
VUECODE/smart-property-manage/src/api/shopType.js Vedi File

@@ -17,3 +17,37 @@ export function changeShopSetting(shopSettingValue) {
17 17
     }
18 18
   })
19 19
 }
20
+
21
+export function addShopType(listQuery) {
22
+  return request({
23
+    url: '/shop/add/type',
24
+    method: 'post',
25
+    data: listQuery
26
+  })
27
+}
28
+
29
+export function getShopType(id) {
30
+  return request({
31
+    url: '/shop/get/type/' + id,
32
+    method: 'get'
33
+  })
34
+}
35
+
36
+export function updateShopType(listQuery) {
37
+  return request({
38
+    url: '/shop/update/type',
39
+    method: 'post',
40
+    data: listQuery
41
+  })
42
+}
43
+
44
+export function deleteShopType(ids) {
45
+  return request({
46
+    url: '/shop/delete/type',
47
+    method: 'delete',
48
+    data: {
49
+      idArray: ids
50
+    }
51
+  })
52
+}
53
+

+ 14
- 0
VUECODE/smart-property-manage/src/router/index.js Vedi File

@@ -375,6 +375,20 @@ export const constantRouterMap = [
375 375
         name: 'shop-setting',
376 376
         meta: { title: '商铺配置', icon: 'table' }
377 377
       },
378
+      {
379
+        path: '/shop/setting/add',
380
+        component: () => import('@/views/shop/shopSettingAdd'),
381
+        name: 'shopSetting-add',
382
+        hidden: true,
383
+        meta: { title: '添加商铺类型', icon: 'table' }
384
+      },
385
+      {
386
+        path: '/shop/setting/edit',
387
+        component: () => import('@/views/shop/shopSettingEdit'),
388
+        name: 'shopSetting-edit',
389
+        hidden: true,
390
+        meta: { title: '修改商铺类型', icon: 'table' }
391
+      },
378 392
       {
379 393
         path: '/shop/index',
380 394
         component: () => import('@/views/shop/shopIndex'),

+ 37
- 1
VUECODE/smart-property-manage/src/store/modules/shopType.js Vedi File

@@ -1,4 +1,4 @@
1
-import { fetchShopTypeList, changeShopSetting } from '@/api/shopType'
1
+import { fetchShopTypeList, changeShopSetting, addShopType, getShopType, updateShopType, deleteShopType } from '@/api/shopType'
2 2
 
3 3
 const transaction = {
4 4
   namespaced: true,
@@ -29,6 +29,42 @@ const transaction = {
29 29
           reject(error)
30 30
         })
31 31
       })
32
+    },
33
+    AddShopType({ commit }, listQuery) {
34
+      return new Promise((resolve, reject) => {
35
+        addShopType(listQuery).then(response => {
36
+          resolve(response)
37
+        }).catch(error => {
38
+          reject(error)
39
+        })
40
+      })
41
+    },
42
+    GetShopType({ commit }, id) {
43
+      return new Promise((resolve, reject) => {
44
+        getShopType(id).then(response => {
45
+          resolve(response)
46
+        }).catch(error => {
47
+          reject(error)
48
+        })
49
+      })
50
+    },
51
+    UpdateShopType({ commit }, listQuery) {
52
+      return new Promise((resolve, reject) => {
53
+        updateShopType(listQuery).then(response => {
54
+          resolve(response)
55
+        }).catch(error => {
56
+          reject(error)
57
+        })
58
+      })
59
+    },
60
+    DeleteShopType({ commit }, ids) {
61
+      return new Promise((resolve, reject) => {
62
+        deleteShopType(ids).then(response => {
63
+          resolve(response)
64
+        }).catch(error => {
65
+          reject(error)
66
+        })
67
+      })
32 68
     }
33 69
   }
34 70
 }

+ 11
- 45
VUECODE/smart-property-manage/src/views/shop/shopSetting.vue Vedi File

@@ -15,7 +15,7 @@
15 15
     <div class="button">
16 16
       <el-button type="primary" @click="add">添加</el-button>
17 17
       <el-button type="warning" @click="edit">修改</el-button>
18
-      <el-button type="danger" @click="deleteAnnouncement">删除</el-button>
18
+      <el-button type="danger" @click="deleteShopType">删除</el-button>
19 19
     </div>
20 20
     <el-table
21 21
       v-loading="listLoading"
@@ -32,9 +32,6 @@
32 32
       <el-table-column prop="typeName" label="商铺类型" align="center"/>
33 33
       <el-table-column prop="sort" label="权重" align="center"/>
34 34
       <el-table-column prop="createDate" label="发布时间" align="center"><template slot-scope="scope">{{ formatDate(scope.row.createDate) }}</template></el-table-column>
35
-      <el-table-column prop="createUserName" label="发布人" align="center"/>
36
-      <el-table-column prop="updateDate" label="修改时间" align="center" ><template slot-scope="scope">{{ formatDate(scope.row.updateDate) }}</template></el-table-column>
37
-      <el-table-column prop="updateDateName" label="修改人" align="center"/>
38 35
     </el-table>
39 36
     <div class="block">
40 37
       <el-pagination
@@ -93,8 +90,6 @@ export default {
93 90
       this.listLoading = true
94 91
       this.FetchShopTypeList(this.listQuery).then((resData) => {
95 92
         this.shopTypeList = resData.dataList
96
-        this.listQuery.pageNum = resData.pageNum
97
-        this.listQuery.pageSize = resData.pageSize
98 93
         this.total = resData.total
99 94
         this.shopSettingValue = resData.shopSettingValue
100 95
         this.listLoading = false
@@ -130,7 +125,7 @@ export default {
130 125
     },
131 126
     // 添加公告
132 127
     add() {
133
-      this.$router.push({ name: 'announcement-add' })
128
+      this.$router.push({ name: 'shopSetting-add' })
134 129
     },
135 130
     edit(){// 编辑公告
136 131
       const ids = this.deleteIds
@@ -144,52 +139,23 @@ export default {
144 139
       }
145 140
        let ide= this.deleteIds[0]
146 141
        this.listQuery.id = ide
147
-      this.$store.dispatch('AnnouncementById', this.listQuery).then((res) => {
148
-        const resData = res.data
149
-        const announcement = resData.tpAnnouncement
150
-        const imgList = resData.studentList
151
-        this.listQuery = announcement
152
-        this.listQuery.announcementTitle = ''
153
-        console.log("1",this.listQuery.status)
154
-        if(this.listQuery.status == 0){
155
-          this.$message.error('已作废不可以修改')
156
-          return
157
-        } 
158
-       this.$router.push({ name: 'announcement-edit', query: { id: ide }})
159
-      }) 
160
-      },
161
-    deleteAnnouncement(){
162
-       let ide= this.deleteIds[0]
163
-       this.listQuery.id = ide 
164
-      this.$store.dispatch('AnnouncementById', this.listQuery).then((res) => {
165
-        const resData = res.data
166
-        const announcement = resData.tpAnnouncement
167
-        const imgList = resData.studentList
168
-        this.listQuery.status= announcement.status
169
-        console.log("1",this.listQuery.status)
170
-        if(this.listQuery.status == 0){
171
-          this.$message.error('已作废不可以作废')
172
-          return
173
-        }
174
-        this.deleteId()     
175
-      })    
142
+       this.$router.push({ name: 'shopSetting-edit', query: { id: ide }})
176 143
     },
177
-
178
-    deleteId(){
179
-       const ids = this.deleteIds
144
+    deleteShopType(){
145
+      const ids = this.deleteIds
180 146
       this.listLoading = true
181
-      console.log(ids)
182
-      this.$store.dispatch('DeleteAnnouncement', ids).then((res) => {
147
+      this.$store.dispatch('shopType/DeleteShopType', ids).then((res) => {
183 148
         this.listLoading = false
184
-        this.listQuery.announcementTitle = ''
149
+        this.$message({
150
+          message: res.message,
151
+          type: 'success'
152
+        })
185 153
         this.dataQuery()
186 154
       }).catch(() => {
187 155
         this.listLoading = false
188
-        console.log('error DeleteAnnouncement')
156
+        console.log('error DeleteShopType')
189 157
       })
190 158
     },
191
-
192
-
193 159
     clickTitle(id) {
194 160
       this.$router.push({ name: 'contentParticulars-details', query: { id: id }})
195 161
     },

+ 91
- 0
VUECODE/smart-property-manage/src/views/shop/shopSettingAdd.vue Vedi File

@@ -0,0 +1,91 @@
1
+<template>
2
+  <div class="root">
3
+    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px" class="add-ruleForm">
4
+      <el-form-item label="商铺类型" prop="typeName">
5
+        <el-input v-model="listQuery.typeName" style="width: 200px;"/>
6
+      </el-form-item>
7
+      <el-form-item label="权重" prop="sort">
8
+        <el-input v-model="listQuery.sort" style="width: 200px;"/>
9
+      </el-form-item>
10
+      <el-form-item>
11
+        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
12
+        <el-button @click="resetForm('ruleForm')">重置</el-button>
13
+      </el-form-item>
14
+    </el-form>
15
+  </div>
16
+</template>
17
+
18
+<script>
19
+export default {
20
+  data() {
21
+    return {
22
+      listQuery: {
23
+        typeName: '',
24
+        sort: ''
25
+      },
26
+      rules: {
27
+        typeName: [
28
+          { required: true, message: '请输入商铺类型', trigger: 'blur' }
29
+        ]
30
+      }
31
+    }
32
+  },
33
+  mounted() {
34
+  },
35
+  methods: {
36
+    submitForm(formName) { // 提交
37
+      this.$refs[formName].validate((valid) => {
38
+        if (valid) {
39
+          this.addBuilding()
40
+        } else {
41
+          console.log('error submit!!')
42
+          return false
43
+        }
44
+      })
45
+    },
46
+    resetForm(formName) { // 重置
47
+      // 重置为未注册
48
+      this.isRegistered = true
49
+      // 重置为非户主
50
+      this.roleDisabled = false
51
+
52
+      console.log(this.isRegistered)
53
+      this.$refs[formName].resetFields()
54
+    },
55
+    addBuilding() {
56
+      // 加载框
57
+      const loading = this.$loading({
58
+        lock: true,
59
+        text: 'Loading',
60
+        spinner: 'el-icon-loading',
61
+        background: 'rgba(0, 0, 0, 0.7)'
62
+      })
63
+      this.$store.dispatch('shopType/AddShopType', this.listQuery).then((res) => {
64
+        if (res.code === '0') {
65
+          this.$message({
66
+            message: res.message,
67
+            type: 'success'
68
+          })
69
+          this.$router.push({ name: 'shop-setting' })
70
+          loading.close()
71
+          return
72
+        }
73
+        this.$message.error(res.message)
74
+        loading.close()
75
+      }).catch(() => {
76
+        loading.close()
77
+        console.log('error AddBuilding')
78
+      })
79
+    }
80
+  }
81
+}
82
+</script>
83
+
84
+<style scoped>
85
+.add-ruleForm{
86
+  width: 800px;
87
+  margin-left: auto;
88
+  margin-right: auto;
89
+  margin-top: 50px;
90
+}
91
+</style>

+ 101
- 0
VUECODE/smart-property-manage/src/views/shop/shopSettingEdit.vue Vedi File

@@ -0,0 +1,101 @@
1
+<template>
2
+  <div class="root">
3
+    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px" class="add-ruleForm">
4
+      <el-form-item label="商铺类型" prop="typeName">
5
+        <el-input v-model="listQuery.typeName" style="width: 200px;"/>
6
+      </el-form-item>
7
+      <el-form-item label="权重" prop="sort">
8
+        <el-input v-model="listQuery.sort" style="width: 200px;"/>
9
+      </el-form-item>
10
+      <el-form-item>
11
+        <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
12
+      </el-form-item>
13
+    </el-form>
14
+  </div>
15
+</template>
16
+
17
+<script>
18
+export default {
19
+  data() {
20
+    return {
21
+      listQuery: {
22
+        id: '',
23
+        typeName: '',
24
+        sort: ''
25
+      },
26
+      rules: {
27
+        typeName: [
28
+          { required: true, message: '请输入商铺类型', trigger: 'blur' }
29
+        ]
30
+      }
31
+    }
32
+  },
33
+  mounted() {
34
+    this.listQuery.id = this.$route.query.id
35
+    this.getById()
36
+  },
37
+  methods: {
38
+    submitForm(formName) { // 提交
39
+      this.$refs[formName].validate((valid) => {
40
+        if (valid) {
41
+          this.updateBuilding()
42
+        } else {
43
+          console.log('error submit!!')
44
+          return false
45
+        }
46
+      })
47
+    },
48
+    resetForm(formName) { // 重置
49
+      // 重置为未注册
50
+      this.isRegistered = true
51
+      // 重置为非户主
52
+      this.roleDisabled = false
53
+
54
+      console.log(this.isRegistered)
55
+      this.$refs[formName].resetFields()
56
+    },
57
+    getById() {
58
+      this.$store.dispatch('shopType/GetShopType', this.listQuery.id).then((res) => {
59
+        console.log(res)
60
+        const typeData = res.data
61
+        this.listQuery.typeName = typeData.typeName
62
+        this.listQuery.sort = typeData.sort
63
+      })
64
+    },
65
+    updateBuilding() {
66
+      // 加载框
67
+      const loading = this.$loading({
68
+        lock: true,
69
+        text: 'Loading',
70
+        spinner: 'el-icon-loading',
71
+        background: 'rgba(0, 0, 0, 0.7)'
72
+      })
73
+      this.$store.dispatch('shopType/UpdateShopType', this.listQuery).then((res) => {
74
+        if (res.code === '0') {
75
+          this.$message({
76
+            message: res.message,
77
+            type: 'success'
78
+          })
79
+          this.$router.push({ name: 'shop-setting' })
80
+          loading.close()
81
+          return
82
+        }
83
+        this.$message.error(res.message)
84
+        loading.close()
85
+      }).catch(() => {
86
+        loading.close()
87
+        console.log('error updateBuilding')
88
+      })
89
+    }
90
+  }
91
+}
92
+</script>
93
+
94
+<style scoped>
95
+.add-ruleForm{
96
+  width: 800px;
97
+  margin-left: auto;
98
+  margin-right: auto;
99
+  margin-top: 50px;
100
+}
101
+</style>