Bladeren bron

分销时间段设置功能 -zzx

学习?学个屁 6 maanden geleden
bovenliggende
commit
f9425ce2aa

+ 2 - 2
config/dev.env.js

@@ -4,6 +4,6 @@ const prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.110.241:9120/zs/channel/admin"'
-  BASE_API: '"http://192.168.2.13:9120/zs/channel/admin"'
+  BASE_API: '"http://192.168.110.241:9120/zs/channel/admin"'
+  // BASE_API: '"http://192.168.2.13:9120/zs/channel/admin"'
 })

+ 1 - 1
src/permission.js

@@ -11,7 +11,7 @@ router.beforeEach((to, from, next) => {
   if (getToken()) {
     if (to.path === '/login') {
       next({ path: '/' })
-      NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
+      NProgress.done() // 如果当前页面是 dashboard 后不会触发 AfterEach 钩子,所以手动处理
     } else {
       if (store.getters.roles.length === 0) {
         store.dispatch('GetInfo').then(res => { // 拉取用户信息

+ 2 - 2
src/store/modules/user.js

@@ -49,10 +49,10 @@ const user = {
         getInfo()
           .then((response) => {
             const data = response.data;
-            commit('cache/setIsAdmin', data.type);
             if (data.roles && data.roles.length > 0) {
               // 验证返回的roles是否是一个非空数组
               commit("SET_ROLES", data.roles);
+              commit("cache/setIsAdmin", data.type);
             } else {
               reject("getInfo: roles must be a non-null array !");
             }
@@ -73,7 +73,7 @@ const user = {
           .then(() => {
             commit("SET_TOKEN", "");
             commit("SET_ROLES", []);
-            commit('cache/setIsAdmin', null);
+            commit("cache/setIsAdmin", null);
             removeToken();
             resolve();
           })

+ 6 - 0
src/utils/common.js

@@ -0,0 +1,6 @@
+//消除js计算误差,add、reduce是传入的加减数字,reduce是被加数(被减数),s是加减符号
+export function addAndsub(add,reduce, s, num){
+	let m = Math.pow(10, num); //num是10的次幂
+	let res = s == '+' ? (add * m + reduce * m) / m : (add * m - reduce * m) / m;
+	return Math.round(res * m) / m;
+}

+ 73 - 46
src/utils/request.js

@@ -1,70 +1,97 @@
-import axios from 'axios'
-import { Message, MessageBox } from 'element-ui'
-import store from '../store'
-import { getToken } from '@/utils/auth'
+import axios from "axios";
+import { Message, MessageBox } from "element-ui";
+import store from "../store";
+import { getToken } from "@/utils/auth";
 
 // 创建axios实例
 const service = axios.create({
   baseURL: process.env.BASE_API, // api的base_url
-  timeout: 15000 // 请求超时时间
-})
+  timeout: 15000, // 请求超时时间
+});
 
 // request拦截器
-service.interceptors.request.use(config => {
-  if (store.getters.token) {
-    config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+service.interceptors.request.use(
+  (config) => {
+    if (store.getters.token) {
+      config.headers["Authorization"] = getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
+    }
+    return config;
+  },
+  (error) => {
+    // Do something with request error
+    console.log(error); // for debug
+    Promise.reject(error);
+    
   }
-  return config
-}, error => {
-  // Do something with request error
-  console.log(error) // for debug
-  Promise.reject(error)
-})
+);
 
 // respone拦截器
 service.interceptors.response.use(
-  response => {
-  /**
-  * code为非200是抛错 可结合自己业务进行修改
-  */
-    const res = response.data
-    if(res.code){
+  (response) => {
+    /**
+     * code为非200是抛错 可结合自己业务进行修改
+     */
+    const res = response.data;
+    if (res.code) {
       if (res.code !== 200) {
         Message({
           message: res.message,
-          type: 'error',
-          duration: 3 * 1000
-        })
-  
+          type: "error",
+          duration: 3 * 1000,
+        });
+
         // 401:未登录;
         if (res.code === 401) {
-          MessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }).then(() => {
-            store.dispatch('FedLogOut').then(() => {
-              location.reload()// 为了重新实例化vue-router对象 避免bug
-            })
-          })
+          MessageBox.confirm(
+            "你已被登出,可以取消继续留在该页面,或者重新登录",
+            "确定登出",
+            {
+              confirmButtonText: "重新登录",
+              cancelButtonText: "取消",
+              type: "warning",
+            }
+          ).then(() => {
+            store.dispatch("FedLogOut").then(() => {
+              location.reload(); // 为了重新实例化vue-router对象 避免bug
+            });
+          });
         }
-        return Promise.reject('error')
+        return Promise.reject("error");
       } else {
-        return response.data
+        return response.data;
       }
-    }else{
-      return response
+    } else {
+      return response;
     }
   },
-  error => {
-    console.log('err' + error)// for debug
+  (error) => {
+    if (error.response) {
+      if (error.response.status === 500) {
+        if(error.response.data.code==401){
+          MessageBox.confirm(
+            "你已被登出,可以取消继续留在该页面,或者重新登录",
+            "确定登出",
+            {
+              confirmButtonText: "重新登录",
+              cancelButtonText: "取消",
+              type: "warning",
+            }
+          ).then(() => {
+            store.dispatch("FedLogOut").then(() => {
+              location.reload();
+            });
+          });
+        }
+      }
+    }
+    console.log("err" + error); // for debug
     Message({
       message: error.message,
-      type: 'error',
-      duration: 3 * 1000
-    })
-    return Promise.reject(error)
+      type: "error",
+      duration: 3 * 1000,
+    });
+    return Promise.reject(error);
   }
-)
+);
 
-export default service
+export default service;

+ 52 - 27
src/views/distribution/peopleManage/firstSetPrice.vue

@@ -21,15 +21,12 @@
                     </div>
                     <div style="margin-left: 20px">
                         <el-descriptions class="margin-top" :column="3" size="medium" border>
-                            <el-descriptions-item>
-                                <template slot="label"> 电站 </template>
-                                {{ name }}
-                            </el-descriptions-item>
+                            <el-descriptions-item label="电站">{{ name }}</el-descriptions-item>
                         </el-descriptions>
                     </div>
                 </div>
                 <div>
-                    <back-button></back-button> 
+                    <back-button></back-button>
                 </div>
             </div>
         </el-card>
@@ -37,10 +34,15 @@
             <el-table ref="adminTable" :data="dialogList" style="width: 100%" v-loading="dialogListLoading" border>
                 <el-table-column label="时间段" align="center" prop="time"></el-table-column>
                 <el-table-column label="销售合计价(元)" align="center" prop="platformPrice"></el-table-column>
-                <el-table-column label="一级代理价" align="center" prop="firstLevelPrice"></el-table-column>
-                <el-table-column label="二级代理价(元)" align="center">
+                <el-table-column label="一级代理价(元)" align="center" prop="firstLevelPrice" v-if="isAdmin!=3"></el-table-column>
+                <el-table-column label="二级代理价(元)" align="center" prop="secondLevelPrice" v-if="isAdmin==3"></el-table-column>
+                <el-table-column label="二级代理价(元)" align="center" v-else>
                     <template slot-scope="scope">
-                            <el-input v-model="scope.row.secondLevelPrice" :disabled="isAdmin==3" size="small" style="width: 80px;" @blur="saveEdit(scope.row)"></el-input>
+                        <span class="edit" v-if="scope.row.isEdit === false"
+                            @click="toggleEdit(scope.row)">{{ scope.row.secondLevelPrice }}</span>
+                        <el-input v-else v-model="scope.row.secondLevelPrice" :disabled="isAdmin == 3" size="small" style="width: 100px;" @blur="saveEdit(scope.row)">
+                            <i slot="suffix" size="small" class="el-icon-close" @click="cancelEdit(scope.row)"></i>
+                        </el-input>
                     </template>
                 </el-table-column>
             </el-table>
@@ -48,7 +50,8 @@
         <el-divider></el-divider>
         <el-card class="operate-container" shadow="hover">
             <div style="text-align: center;">
-                <el-button type="primary" @click="confirmForbidden">提交</el-button>
+                <el-button type="primary" size="small" @click="confirmForbidden">提交</el-button>
+                <el-button type="info" size="small" @click="cancelForbidden">取消</el-button>
             </div>
         </el-card>
     </div>
@@ -82,30 +85,41 @@ export default {
         this.getList();
     },
     methods: {
-        priceEdit( row) {
-            row.isEdit = true;
-            console.log(row);
+        toggleEdit(row) {
+            row.isEdit = !row.isEdit;
+        },
+        cancelEdit(row) {
+            if (row.firstLevelPrice >= row.platformPrice) {
+                row.firstLevelPrice = 0
+                return this.$message.error('分销价格必须小于平台价格');
+            }
+            if (row.secondLevelPrice <= row.firstLevelPrice) {
+                row.secondLevelPrice = 0
+                return this.$message.error('二级代理价不能小于一级代理价');
+            }
+            row.isEdit = false
         },
         saveEdit(row) {
-            if(row.secondLevelPrice>=row.platformPrice){
-                row.secondLevelPrice=0
+            if (row.secondLevelPrice >= row.platformPrice) {
+                row.secondLevelPrice = 0
                 return this.$message.error('分销价格必须小于平台价格');
             }
-            if(row.secondLevelPrice<=row.firstLevelPrice){
-                row.secondLevelPrice=0
+            if (row.secondLevelPrice <= row.firstLevelPrice) {
+                row.secondLevelPrice = 0
                 return this.$message.error('二级代理价不能小于一级代理价');
             }
+            row.isEdit = false
         },
         confirmForbidden() {
-            const newArray=this.dialogList.map(item=>({
-                adminUserId:this.listQuery.adminUserId,
-                firstLevelPrice:item.firstLevelPrice,
-                id:item.id,
-                platformPrice:item.platformPrice,
-                secondLevelPrice:item.secondLevelPrice,
-                servicePrice:new Big(item.platformPrice).minus(new Big(item.secondLevelPrice)).toNumber(),
-                stationId:this.listQuery.stationId,
-                time:item.time
+            const newArray = this.dialogList.map(item => ({
+                adminUserId: this.listQuery.adminUserId,
+                firstLevelPrice: item.firstLevelPrice,
+                id: item.id,
+                platformPrice: item.platformPrice,
+                secondLevelPrice: item.secondLevelPrice,
+                servicePrice: new Big(item.platformPrice).minus(new Big(item.secondLevelPrice)).toNumber(),
+                stationId: this.listQuery.stationId,
+                time: item.time
             }))
             settingsPrice(newArray).then((res) => {
                 if (res.code == 200) {
@@ -114,17 +128,28 @@ export default {
                 }
             })
         },
+        cancelForbidden() {
+            this.getList();
+        },
         getList() {
             this.dialogListLoading = true;
             priceList(this.listQuery).then((response) => {
                 this.dialogListLoading = false;
                 this.dialogList = response.data;
                 this.dialogList.map(item => {
-                    item.isEdit=false
+                    this.$set(item, 'isEdit', false); //初始化为 false
                 })
             });
         },
     },
 };
 </script>
-<style scoped></style>
+<style scoped>
+.edit{
+    color: #409EFF;
+    cursor: pointer;
+}
+.el-icon-close{
+    font-size: 18px;
+}
+</style>

+ 24 - 16
src/views/distribution/peopleManage/index.vue

@@ -38,8 +38,8 @@
                     </el-form-item>
                     <el-form-item label="更新时间:">
                         <el-date-picker v-model="date" size="small" value-format="yyyy-MM-dd HH:mm:ss"
-                            class="item-width-350 ml10" type="datetimerange" range-separator="至" start-placeholder="开始日期"
-                            end-placeholder="结束日期">
+                            class="item-width-350 ml10" type="datetimerange" range-separator="至"
+                            start-placeholder="开始日期" end-placeholder="结束日期">
                         </el-date-picker>
                     </el-form-item>
                 </el-form>
@@ -75,15 +75,22 @@
                     <template slot-scope="scope">
                         <el-button size="mini" type="primary" plain @click="checkQrCode(scope.row)">
                             查看二维码</el-button>
-                        <el-button size="mini" type="success" plain
-                            @click="checkJunior(scope.$index, scope.row)" v-if="scope.row.type != 3">查看下级</el-button>
-                        <el-button :disabled="scope.row.isWithdraw==0?isWithdraw=false:isWithdraw=true" size="mini" v-if="scope.row.isSelf == 1" type="info" plain
-                            @click="userEdit(scope.row)">编辑</el-button>
-                            <span v-if="isAdmin!=3">
-                                <el-button size="mini" v-if="scope.row.isSelf !=1" type="warning" plain @click="settingsCommission(scope.row)">
-                                {{ isAdmin!=3?'设置分销佣金':'查看分销佣金' }}
+                        <el-button size="mini" type="success" plain @click="checkJunior(scope.$index, scope.row)"
+                            v-if="scope.row.type != 3">查看下级</el-button>
+                        <el-button :disabled="scope.row.isWithdraw == 0 ? isWithdraw = false : isWithdraw = true" size="mini"
+                            v-if="scope.row.isSelf == 1" type="info" plain @click="userEdit(scope.row)">编辑</el-button>
+                        <span v-if="isAdmin != 3">
+                            <el-button size="mini" v-if="scope.row.isSelf != 1" type="warning" plain
+                                @click="settingsCommission(scope.row)">
+                                设置分销佣金
                             </el-button>
-                            </span>
+                        </span>
+                        <span v-if="isAdmin == 3">
+                            <el-button size="mini" v-if="scope.row.isSelf==1" type="warning" plain
+                                @click="settingsCommission(scope.row)">
+                                查看分销佣金
+                            </el-button>
+                        </span>
                     </template>
                 </el-table-column>
             </el-table>
@@ -144,7 +151,8 @@
                 </div>
             </div>
             <div style="text-align: center;margin-top: 20px;">
-                <el-button type="success" @click="downloadQrCode" :loading="downloadingQrCode" lazy size="mini">下载二维码</el-button>
+                <el-button type="success" @click="downloadQrCode" :loading="downloadingQrCode" lazy
+                    size="mini">下载二维码</el-button>
             </div>
         </el-dialog>
     </div>
@@ -239,7 +247,7 @@ export default {
             this.$refs["adminForm"].resetFields();
             this.forbiddenDialogVisible = false;
         },
-        handleClose(){
+        handleClose() {
             this.$refs["adminForm"].resetFields();
             this.forbiddenDialogVisible = false;
         },
@@ -283,7 +291,7 @@ export default {
             this.downloadingQrCode = true;
             const posterContainer = this.$refs.posterContainer;
             html2canvas(posterContainer, {
-                scale: 4 // 设置下载图片分辨率
+                scale: 4 //图片分辨率
             }).then(canvas => {
                 this.downloadingQrCode = false;
                 const dataURL = canvas.toDataURL('image/png');
@@ -305,7 +313,7 @@ export default {
                 },
             });
         },
-        settingsCommission(row){
+        settingsCommission(row) {
             this.$router.push({
                 name: "setCommission",
                 query: {
@@ -367,9 +375,9 @@ export default {
 
 .qrCode {
     width: 100px;
-    height:100px;
+    height: 100px;
     position: absolute;
-    top:233px;
+    top: 233px;
     left: 80px;
 }
 </style>

+ 10 - 28
src/views/distribution/peopleManage/setCommission.vue

@@ -48,24 +48,9 @@
                     </div>
                     <div style="margin-left:20px;">
                         <el-descriptions class="margin-top" :column="3" size="medium" border>
-                            <el-descriptions-item>
-                                <template slot="label">
-                                    可设置电站总数
-                                </template>
-                                {{ noSetCount - haveSetCount || '0' }}
-                            </el-descriptions-item>
-                            <el-descriptions-item>
-                                <template slot="label">
-                                    已设置
-                                </template>
-                                {{ haveSetCount || '0' }}
-                            </el-descriptions-item>
-                            <el-descriptions-item>
-                                <template slot="label">
-                                    未设置
-                                </template>
-                                {{ noSetCount || '0' }}
-                            </el-descriptions-item>
+                            <el-descriptions-item label="可设置电站总数"> {{ noSetCount - haveSetCount || '0' }}</el-descriptions-item>
+                            <el-descriptions-item label="已设置">{{ haveSetCount || '0' }}</el-descriptions-item>
+                            <el-descriptions-item label="未设置">{{ noSetCount || '0' }}</el-descriptions-item>
                         </el-descriptions>
                     </div>
                 </div>
@@ -100,9 +85,9 @@
                     </template>
                 </el-table-column>
                 <el-table-column label="充电终端数量" align="center" prop="equipmentnum"></el-table-column>
-                <el-table-column label="站点状态" align="center" prop="createTime">
+                <el-table-column label="站点状态" align="center">
                     <template slot-scope="scope">
-                        {{ scope.row.stationStatus | stationStatusFilter }}
+                            {{ scope.row.stationStatus | stationStatusFilter }}
                     </template>
                 </el-table-column>
                 <el-table-column label="服务电话" align="center">
@@ -119,15 +104,15 @@
                     <template slot-scope="scope">
                         <el-button size="mini" v-if="isAdmin == 0" type="success" plain
                             @click="get_settingType(scope.row)">
-                            设置分销佣金(平台)
+                            设置分销佣金
                         </el-button>
                         <el-button v-if="isAdmin == 2" size="mini" type="success" plain
                             @click="settingsFirst(scope.row)">
-                            设置分销佣金(一级)
+                            设置分销佣金
                         </el-button>
                         <el-button v-if="isAdmin == 3" size="mini" type="success" plain
                             @click="settingsFirst(scope.row)">
-                            查看分销佣金(二级)
+                            查看分销佣金
                         </el-button>
                     </template>
                 </el-table-column>
@@ -179,9 +164,6 @@ export default {
                 label: '正常使用'
             }],
         };
-    },
-    watch: {
-
     },
     created() {
         this.isAdmin = localStorage.getItem("isAdmin");
@@ -208,7 +190,6 @@ export default {
         }
     },
     methods: {
-        // 设置分销
         get_settingType(row) {
             this.$router.push({
                 name: "settingsPrice",
@@ -262,4 +243,5 @@ export default {
     },
 };
 </script>
-<style scoped></style>
+<style scoped>
+</style>

+ 42 - 22
src/views/distribution/peopleManage/settingsPrice.vue

@@ -21,10 +21,7 @@
                     </div>
                     <div style="margin-left: 20px">
                         <el-descriptions class="margin-top" :column="3" size="medium" border>
-                            <el-descriptions-item>
-                                <template slot="label"> 电站 </template>
-                                {{ name }}
-                            </el-descriptions-item>
+                            <el-descriptions-item label="电站">{{ name }}</el-descriptions-item>
                         </el-descriptions>
                     </div>
                 </div>
@@ -43,7 +40,10 @@
                 <el-table-column label="销售合计价(元)" align="center" prop="platformPrice"></el-table-column>
                 <el-table-column label="一级代理价(元)" align="center" prop="">
                     <template slot-scope="scope">
-                            <el-input v-model="scope.row.firstLevelPrice" size="small" style="width: 80px;" @blur="saveEdit(scope.row)"></el-input>
+                        <span class="edit" v-if="scope.row.isEdit === false" @click="toggleEdit(scope.row)">{{scope.row.firstLevelPrice }}</span>
+                        <el-input v-else v-model="scope.row.firstLevelPrice" size="small" style="width: 100px;" @blur="saveEdit(scope.row)">
+                            <i slot="suffix" size="small" class="el-icon-close" @click="cancelEdit(scope.row)"></i>
+                        </el-input>
                     </template>
                 </el-table-column>
             </el-table>
@@ -51,7 +51,8 @@
         <el-divider></el-divider>
         <el-card class="operate-container" shadow="hover">
             <div style="text-align: center;">
-                <el-button type="primary" @click="confirmForbidden">提交</el-button>
+                <el-button type="primary" size="small" @click="confirmForbidden">提交</el-button>
+                <el-button type="info" size="small" @click="cancelForbidden">取消</el-button>
             </div>
         </el-card>
     </div>
@@ -84,26 +85,34 @@ export default {
         this.getList();
     },
     methods: {
-        priceEdit( row) {
-            row.isEdit = true;
-            console.log(row);
+        toggleEdit(row) {
+            row.isEdit = !row.isEdit;
+        },
+        cancelEdit(row) {
+            if (row.firstLevelPrice >= row.platformPrice) {
+                row.firstLevelPrice = 0
+                return this.$message.error('分销价格必须小于平台价格');
+            }else{
+                row.isEdit=false
+            }
         },
         saveEdit(row) {
-            if(row.firstLevelPrice>=row.platformPrice){
-                row.firstLevelPrice=0
+            if (row.firstLevelPrice >= row.platformPrice) {
+                row.firstLevelPrice = 0
                 return this.$message.error('分销价格必须小于平台价格');
             }
+            row.isEdit=false
         },
         confirmForbidden() {
-            const newArray=this.dialogList.map(item=>({
-                adminUserId:this.listQuery.adminUserId,
-                firstLevelPrice:item.firstLevelPrice,
-                id:item.id,
-                platformPrice:item.platformPrice,
-                secondLevelPrice:item.secondLevelPrice,
-                servicePrice:new Big(item.platformPrice).minus(new Big(item.firstLevelPrice)).toNumber(),
-                stationId:this.listQuery.stationId,
-                time:item.time
+            const newArray = this.dialogList.map(item => ({
+                adminUserId: this.listQuery.adminUserId,
+                firstLevelPrice: item.firstLevelPrice,
+                id: item.id,
+                platformPrice: item.platformPrice,
+                secondLevelPrice: item.secondLevelPrice,
+                servicePrice: new Big(item.platformPrice).minus(new Big(item.firstLevelPrice)).toNumber(),
+                stationId: this.listQuery.stationId,
+                time: item.time
             }))
             settingsPrice(newArray).then((res) => {
                 if (res.code == 200) {
@@ -112,17 +121,28 @@ export default {
                 }
             })
         },
+        cancelForbidden() {
+            this.getList();
+        },
         getList() {
             this.dialogListLoading = true;
             priceList(this.listQuery).then((response) => {
                 this.dialogListLoading = false;
                 this.dialogList = response.data;
                 this.dialogList.map(item => {
-                    item.isEdit=false
+                    this.$set(item, 'isEdit', false); //初始化为 false
                 })
             });
         },
     },
 };
 </script>
-<style scoped></style>
+<style scoped>
+.edit{
+    color: #409EFF;
+    cursor: pointer;
+}
+.el-icon-close{
+    font-size: 18px;
+}
+</style>

+ 1 - 97
src/views/home/index.vue

@@ -22,100 +22,4 @@
   }
 </script>
 
-<style scoped>
-  .app-container {
-    margin-top: 40px;
-    margin-left: 120px;
-    margin-right: 120px;
-  }
-
-  .address-layout {
-  }
-
-  .total-layout {
-    margin-top: 20px;
-  }
-
-  .total-frame {
-    border: 1px solid #DCDFE6;
-    padding: 20px;
-    height: 100px;
-  }
-
-  .total-icon {
-    color: #2836FE;
-    width: 60px;
-    height: 60px;
-  }
-
-  .total-title {
-    position: relative;
-    font-size: 16px;
-    color: #909399;
-    left: 70px;
-    top: -50px;
-  }
-
-  .total-value {
-    position: relative;
-    font-size: 18px;
-    color: #606266;
-    left: 70px;
-    top: -40px;
-  }
-
-  .un-handle-layout {
-    margin-top: 20px;
-    border: 1px solid #DCDFE6;
-  }
-
-  .layout-title {
-    color: #606266;
-    padding: 15px 20px;
-    background: #F2F6FC;
-    font-weight: bold;
-  }
-
-  .un-handle-content {
-    padding: 20px 40px;
-  }
-
-  .un-handle-item {
-    border-bottom: 1px solid #EBEEF5;
-    padding: 10px;
-  }
-
-  .overview-layout {
-    margin-top: 20px;
-  }
-
-  .overview-item-value {
-    font-size: 24px;
-    text-align: center;
-  }
-
-  .overview-item-title {
-    margin-top: 10px;
-    text-align: center;
-  }
-
-  .out-border {
-    border: 1px solid #DCDFE6;
-  }
-
-  .statistics-layout {
-    margin-top: 20px;
-    border: 1px solid #DCDFE6;
-  }
-  .mine-layout {
-    position: absolute;
-    right: 140px;
-    top: 107px;
-    width: 250px;
-    height: 235px;
-  }
-  .address-content{
-    padding: 20px;
-    font-size: 18px
-  }
-</style>
+<style scoped></style>