From 5c29b14ba3554276256198b5863eee7b123f53e7 Mon Sep 17 00:00:00 2001
From: chenJinxu <2183691628@qq.com>
Date: Thu, 1 Feb 2024 18:00:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=EF=BC=8C=E5=88=A0=E9=99=A4=E7=94=A8=E6=88=B7=E8=B5=84=E6=96=99?=
 =?UTF-8?q?=20=E5=A2=9E=E5=8A=A0=20=E7=BB=91=E5=AE=9A=EF=BC=8C=E8=A7=A3?=
 =?UTF-8?q?=E7=BB=91=E8=AE=BE=E5=A4=87=20=E5=A2=9E=E5=8A=A0=20=E9=80=80?=
 =?UTF-8?q?=E5=87=BA=E7=99=BB=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SubmenuList.vue                |  51 +++-
 src/components/TopNavBar.vue                  |  18 +-
 src/config/models.js                          |   6 +-
 src/router/router.config.js                   |   6 +
 src/views/development/index.vue               |   5 +-
 src/views/login/bindDevices.vue               |  21 +-
 .../myself/deviceSetting/personInfos.vue      | 127 ++++++---
 src/views/myself/index.vue                    |   4 +-
 src/views/myself/news/news.vue                |   2 +-
 src/views/myself/personList.vue               | 258 ++++++++++++++++++
 src/views/myself/relation.vue                 |   8 +-
 11 files changed, 439 insertions(+), 67 deletions(-)
 create mode 100644 src/views/myself/personList.vue

diff --git a/src/components/SubmenuList.vue b/src/components/SubmenuList.vue
index 491a82a..b8f104a 100644
--- a/src/components/SubmenuList.vue
+++ b/src/components/SubmenuList.vue
@@ -43,10 +43,12 @@
 </template>
 
 <script>
-import { VersionModel } from '@/config/models';
+import { VersionModel, WechatHomeModel } from '@/config/models';
 import DialogService from '@/services/dialog-service';
 import ToastService from '@/services/toast-service';
 import APICommand from '@/api/command';
+import APIUser from '@/api/user';
+import AppId from '@/config/appId';
 export default {
   name: 'SubmenuList',
   props: {
@@ -76,11 +78,24 @@ export default {
   methods: {
     onItemClick(item) {
       console.log('点击的item', item);
+      let that = this;
       if (item.showType) {
         if (item.showType === 'newPage') {
-          this.$router.push({
-            name: `${item.routerName}`
-          });
+          if (item.routerName === 'personInfos') {
+            this.$store.commit('personId', item.id);
+            this.$router.push({
+              name: `${item.routerName}`,
+              query: {
+                update: true,
+                toRouter: 'Myself',
+                from: 'Myself'
+              }
+            });
+          } else {
+            this.$router.push({
+              name: `${item.routerName}`
+            });
+          }
         } else if (item.showType === 'newDialog') {
           switch (item.routerName) {
             case 'remote':
@@ -100,7 +115,9 @@ export default {
                   title: '确定要退出登录?',
                   showCancelButton: true
                 })
-                .then(() => {})
+                .then(() => {
+                  that.logout();
+                })
                 .catch(() => {});
               break;
             default:
@@ -150,6 +167,30 @@ export default {
         .finally(() => {
           ToastService.clear();
         });
+    },
+    // 退出登录
+    logout() {
+      APIUser.loginOut({
+        headers: { AuthKey: 'key1' },
+        body: {
+          userId: this.$store.getters.userId,
+          openId: this.$store.getters.openId || '',
+          AppId: AppId
+        }
+      }).then(res => {
+        console.log(res);
+        if (res.data.stateCode === 1 || res.data.stateCode === 0) {
+          // success
+          //清空数据
+          this.$own.clearLocalStorage(this.$store);
+          this.$store.commit('isRegister', 'true');
+          this.$store.commit('isLogin', 'true');
+          // this.$router.push({ name: "login" }); // 退出路由至登录页面：需要后端将登录接口分开为登录和code消费接口，之后，才可路由回登录页面
+          window.location.href = WechatHomeModel[process.env.NODE_ENV];
+        } else {
+          DialogService.confirm({ title: '服务器繁忙，请稍后操作' });
+        }
+      });
     }
   }
 };
diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index 36ae2f7..51e54ad 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -1,13 +1,7 @@
 <!--  -->
 <template>
   <div class="nav-bar">
-    <van-nav-bar
-      :title="currentPerson ? currentPerson.nickName || '' + 'LV' + currentPerson.level || '' : ''"
-      :fixed="true"
-      z-index="998"
-      @click-left="onClickLeft"
-      @click-right="onClickRight"
-    >
+    <van-nav-bar :title="middleText" :fixed="true" z-index="998" @click-left="onClickLeft" @click-right="onClickRight">
       <template #left>
         <img class="left-img" :src="currentPerson ? currentPerson.avatar : LeftIcon" alt="" />
       </template>
@@ -38,7 +32,15 @@ export default {
       currentPerson: {}
     };
   },
-  created() {},
+  computed: {
+    middleText() {
+      let text = '';
+      if (this.currentPerson) {
+        text = `${this.currentPerson.nickName || ''}LV${this.currentPerson.level >= 0 ? this.currentPerson.level : ''}`;
+      }
+      return text;
+    }
+  },
   mounted() {
     this.getPersonInfo();
   },
diff --git a/src/config/models.js b/src/config/models.js
index 28bf482..2c671c0 100644
--- a/src/config/models.js
+++ b/src/config/models.js
@@ -57,9 +57,9 @@ export const SafeAreaModel = {
   }
 };
 export const WechatHomeModel = {
-  production: 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU2NzkxNjI2MA==&scene=124#wechat_redirect', // 随手精灵公众号
-  test: 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI5ODIxNTU0MQ==&scene=124#wechat_redirect', // 校乐园
-  development: 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI5ODIxNTU0MQ==&scene=124#wechat_redirect' // 校乐园
+  production: 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkwNjYxMzM3Mw==&scene=124#wechat_redirect', //
+  test: 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU0NzE3Njk0MQ==&scene=124#wechat_redirect', //
+  development: 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU0NzE3Njk0MQ==&scene=124#wechat_redirect' //
 };
 export const LocationType = {
   GPS: 1,
diff --git a/src/router/router.config.js b/src/router/router.config.js
index fb217df..1b4ef95 100644
--- a/src/router/router.config.js
+++ b/src/router/router.config.js
@@ -319,6 +319,12 @@ export const constantRouterMap = [
         name: 'talk',
         component: () => import('@/views/optimize/talk'),
         meta: { title: '养育话题', keepAlive: false }
+      },
+      {
+        path: '/personList',
+        name: 'personList',
+        component: () => import('@/views/myself/personList'),
+        meta: { title: '用户列表', keepAlive: false }
       }
     ]
   }
diff --git a/src/views/development/index.vue b/src/views/development/index.vue
index 105c004..38bf644 100644
--- a/src/views/development/index.vue
+++ b/src/views/development/index.vue
@@ -112,7 +112,8 @@ export default {
       levels: []
     };
   },
-  created() {
+  created() {},
+  mounted() {
     // 写死一个用户Id
     this.$store.commit(
       'authToken',
@@ -120,8 +121,6 @@ export default {
     );
     this.$store.commit('userId', '5a698e94-8c41-4ec5-bb3c-4abab2f37cd1');
     this.$store.commit('personId', 26);
-  },
-  mounted() {
     this.initData();
   },
   methods: {
diff --git a/src/views/login/bindDevices.vue b/src/views/login/bindDevices.vue
index 71a9a86..626c56d 100644
--- a/src/views/login/bindDevices.vue
+++ b/src/views/login/bindDevices.vue
@@ -1,7 +1,7 @@
 <!--  -->
 <template>
   <div class="bind">
-    <NavBar title="绑定设备" @on-click-left="onNavBack" :leftArrow="false" leftText=""></NavBar>
+    <NavBar title="绑定设备" @on-click-left="onNavBack" :leftArrow="leftText !== ''" :leftText="leftText"></NavBar>
     <div class="main">
       <div class="top">
         <van-button size="small" round type="default" class="btn-def" @click="onNotBind">暂不绑定</van-button>
@@ -57,6 +57,11 @@ export default {
       params: {}
     };
   },
+  computed: {
+    leftText() {
+      return this.params.from == 'login' ? '' : '返回';
+    }
+  },
   created() {
     this.loadParams();
     this.getWxAutograph();
@@ -70,20 +75,24 @@ export default {
       }
     },
     onNavBack() {
-      this.$router.back();
+      let toRouter = this.$route.query.toRouter;
+      this.$router.push({
+        name: toRouter ? toRouter : 'Index',
+        notJump: true
+      });
     },
     onNext() {
       // 验证输入框或者微信扫码得到的设备信息，再通过这些信息判断跳转到哪些页面
       // 1.首先判断输入框
       // 2. 再判断微信扫码
-      this.$router.push({
+      /*  this.$router.push({
         name: 'Index'
-      });
-      /* if (this.inputVal != '') {
+      }); */
+      if (this.inputVal != '') {
         this.CheckImei();
       } else {
         DialogService.confirm({ message: '输入的值不能空，请不要输入空格' });
-      } */
+      }
     },
     onScanQRCodeSubmit() {
       if (!this.canScan) {
diff --git a/src/views/myself/deviceSetting/personInfos.vue b/src/views/myself/deviceSetting/personInfos.vue
index b2e6a35..ea899d8 100644
--- a/src/views/myself/deviceSetting/personInfos.vue
+++ b/src/views/myself/deviceSetting/personInfos.vue
@@ -1,12 +1,7 @@
 <template>
   <div class="registe-user-infos-container">
     <div class="nav-bar">
-      <NavBar
-        :title="navBarTitle"
-        @on-click-left="onNavBack"
-        :leftText="leftText"
-        :leftArrow="leftText !== ''"
-      ></NavBar>
+      <NavBar :title="title" @on-click-left="onNavBack" :leftText="leftText" :leftArrow="leftText !== ''"></NavBar>
     </div>
     <div class="main">
       <div class="list">
@@ -192,7 +187,6 @@
 </template>
 
 <script>
-import APIDevice from '@/api/device';
 import APIWx from '@/api/wx';
 import APIHealthUser from '@/api/health-user';
 import { isNotNull, isNull } from '@/services/utils-service';
@@ -329,12 +323,11 @@ export default {
         height: null,
         weight: null,
         gender: null,
-        profession: '',
+        profession: '8',
         regularity: '1',
         chronicDisease: '0',
         ishypertension: '0'
       },
-      btnText: '' || '下一步',
       currentDiallogName: '',
       dialogTitle: '',
       profession: '',
@@ -346,16 +339,23 @@ export default {
   computed: {
     leftText() {
       return this.params.from == 'login' ? '' : '返回';
+    },
+    btnText() {
+      return this.params.update ? '保存' : '下一步';
+    },
+    title() {
+      return this.params.update ? '修改资料' : '添加成员';
     }
   },
   created() {
     this.loadParams();
     this.setMaxDate();
     this.getWxAutograph();
-    this.navBarTitle = this.$route.query.from === 'psychologicalSetting' ? '登记佩戴者信息' : '添加成员';
   },
   mounted() {
-    /* this.getPersonData(); */
+    if (this.params.update) {
+      this.getPersonInfo();
+    }
   },
   methods: {
     // 加载微信jssdk
@@ -386,9 +386,6 @@ export default {
       let params = this.$route.query;
       if (params) {
         this.params = { ...params };
-        if (params.from === 'watchSetting' || params.isShowSubmit) {
-          this.btnText = '保存';
-        }
       }
     },
     setMaxDate() {
@@ -398,26 +395,25 @@ export default {
       this.minDate = new Date(minDate);
       this.currentDate = new Date(maxDate);
     },
-    getPersonData() {
-      APIDevice.getPersonInfo({
-        userId: this.$store.getters.userId,
-        deviceId: this.$store.getters.deviceId || '398b4b34-221b-4fc9-a9fb-e7bec8876248'
-      }).then(res => {
-        console.log('用户信息', res);
-        let data = res.data;
-        this.personData = data;
-        this.currentDate = data.bornDate ? new Date(data.bornDate) : this.currentDate;
-        this.personData.height = data.height === 0 ? '' : data.height;
-        this.personData.weight = data.weight === 0 ? '' : data.weight;
-        this.personData.ishypertension = String(data.ishypertension);
-        this.personData.chronicDisease = String(data.chronicDisease);
-        this.personData.regularity = String(data.regularity);
-        this.personData.profession = String(data.profession);
-        this.currentGender = data.gender;
-        this.uid = data.uid;
-        /* ToastService.success({
-                message: '数据加载完成'
-            }) */
+    getPersonInfo(personId) {
+      let reqParams = {
+        personId: personId || this.$store.getters.personId
+      };
+      APIHealthUser.personInfo(reqParams).then(res => {
+        const data = res.data.data;
+        if (data) {
+          this.personData = data;
+          this.personData.bornDate = data.birth;
+          this.currentDate = new Date(data.birth);
+          this.personData.height = data.height === 0 ? '' : data.height;
+          this.personData.weight = data.weight === 0 ? '' : data.weight;
+          this.personData.ishypertension = data.isHypertension == true ? '1' : '0';
+          this.personData.regularity = data.isScheduleRegular == true ? '1' : '0';
+          this.personData.chronicDisease = data.isChronicDisease == true ? '1' : '0';
+          this.currentGender = data.gender;
+          this.personData.profession = String(data.education);
+          this.imagePath = data.avatar;
+        }
       });
     },
     onNavBack() {
@@ -471,16 +467,66 @@ export default {
           message: '职业不能为空'
         });
       }
-
-      this.savePersonInfo();
+      if (this.params.update) {
+        this.updatePerson();
+      } else {
+        this.savePersonInfo();
+      }
     },
-    savePersonInfo() {
+    updatePerson() {
       let personForm = { ...this.personData };
       let reqBody = {
         sourceType: 1,
         nickName: personForm.nickName,
         avatar: this.imagePath,
         level: 0,
+        gender: personForm.gender,
+        height: Number(personForm.height),
+        weight: Number(personForm.weight),
+        birth: personForm.bornDate,
+        education: Number(personForm.profession),
+        isHypertension: personForm.ishypertension == '1',
+        isScheduleRegular: personForm.regularity == '1',
+        isChronicDisease: personForm.chronicDisease == '1',
+        personId: Number(this.$store.getters.personId)
+      };
+      console.log('reqBody', reqBody);
+      ToastService.loading({
+        message: '保存中'
+      });
+      APIHealthUser.updatePerson(reqBody)
+        .then(res => {
+          ToastService.clear();
+          console.log(res.data);
+          if (res.data.stateCode == 1) {
+            ToastService.success({
+              message: '保存成功'
+            });
+            setTimeout(() => {
+              this.$router.push({
+                name: 'Myself'
+              });
+            }, 1000);
+          } else {
+            DialogService.confirm({
+              title: res.data.message
+            });
+          }
+        })
+        .catch(e => {
+          ToastService.clear();
+          DialogService.confirm({
+            title: e.message || '服务器异常'
+          });
+        });
+    },
+    savePersonInfo() {
+      let personForm = { ...this.personData };
+      let reqBody = {
+        sourceType: 1,
+        nickName: personForm.nickName,
+        avatar: this.imagePath,
+        /* level: 0, */
         gender: personForm.gender == 'false' ? 0 : 1,
         height: Number(personForm.height),
         weight: Number(personForm.weight),
@@ -523,6 +569,12 @@ export default {
                   name: 'deviceBinding'
                 });
               }, 1500);
+            } else {
+              setTimeout(() => {
+                this.$router.push({
+                  name: from
+                });
+              }, 1500);
             }
           } else {
             DialogService.confirm({
@@ -642,6 +694,7 @@ export default {
             img {
               height: inherit;
               width: inherit;
+              border-radius: 50%;
             }
           }
           .avatar-text {
diff --git a/src/views/myself/index.vue b/src/views/myself/index.vue
index d9ded88..b18e875 100644
--- a/src/views/myself/index.vue
+++ b/src/views/myself/index.vue
@@ -304,6 +304,8 @@ export default {
                 imgPath: item.avatar,
                 text: item.nickName,
                 bgColor: 'green',
+                showType: 'newPage',
+                routerName: 'personInfos',
                 ...item
               };
             });
@@ -328,7 +330,7 @@ export default {
     },
     onAddPerson() {
       this.$router.push({
-        name: 'personInfos',
+        name: 'personList',
         query: {
           from: 'Myself',
           toRouter: 'Myself'
diff --git a/src/views/myself/news/news.vue b/src/views/myself/news/news.vue
index 4926828..9504111 100644
--- a/src/views/myself/news/news.vue
+++ b/src/views/myself/news/news.vue
@@ -204,7 +204,7 @@ export default {
   background-color: $background;
   .list-con {
     position: relative;
-    height: calc(100vh - 160px);
+    height: calc(100vh - 50px);
     overflow: scroll;
     .newsNotData {
       @include center();
diff --git a/src/views/myself/personList.vue b/src/views/myself/personList.vue
new file mode 100644
index 0000000..07353ef
--- /dev/null
+++ b/src/views/myself/personList.vue
@@ -0,0 +1,258 @@
+<!--  -->
+<template>
+  <div class="person-list-container">
+    <van-nav-bar title="人员列表" :left-arrow="true" left-text="返回" @click-left="onNavBack">
+      <van-icon name="plus" slot="right" @click="onAddPerson" />
+    </van-nav-bar>
+    <div class="main" v-show="isPageShow">
+      <div class="person-list" v-if="personList.length > 0">
+        <div class="item" v-for="(item, index) in personList" :key="index">
+          <img :src="item.avatar" alt="" />
+          <div class="infos">
+            <p>昵称: {{ item.nickName }}</p>
+            <p>IMEI: {{ item.imei || '无' }}</p>
+          </div>
+          <div class="action">
+            <div class="btn" @click="onUnBind(item)">
+              <!-- 根据deviceId是否为空判断可以解绑还是绑定设备 -->
+              <span>{{ item.deviceId ? '解绑' : '绑定' }}设备</span>
+            </div>
+            <div class="btn" @click="onDelete(item)">
+              <span>删除</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="person-list no-data" v-else>
+        <!-- <img src="~/@/assets/img/news-noData.png" alt="" /> -->
+        <p>暂无人员信息</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import APIHealthUser from '@/api/health-user';
+import APIDevice from '@/api/device';
+import ToastService from '../../services/toast-service';
+import DialogService from '../../services/dialog-service';
+import { isNull } from '@/services/utils-service';
+export default {
+  data() {
+    return {
+      personList: [],
+      isPageShow: false
+    };
+  },
+  created() {},
+  mounted() {
+    this.getPersonList();
+  },
+  methods: {
+    getPersonList() {
+      ToastService.loading();
+      APIHealthUser.personList()
+        .then(res => {
+          console.log('人员列表', res);
+          if (res.data.stateCode === 1) {
+            const list = res.data.data;
+            if (list) {
+              this.personList = list;
+              if (isNull(this.$store.getters.personId)) {
+                this.$store.commit('personId', list[0].id);
+              }
+              if (isNull(this.$store.getters.deviceId)) {
+                this.$store.commit('deviceId', list[0].deviceId);
+                this.$store.commit('serialNo', list[0].imei);
+              }
+            }
+          } else {
+            this.personList = [];
+          }
+        })
+        .catch(() => {
+          this.isPageShow = true;
+        })
+        .finally(() => {
+          ToastService.clear();
+          this.isPageShow = true;
+        });
+    },
+    onNavBack() {
+      this.$router.push({
+        // 2023.11.27 需求变更 如果 路由带有backRouter 则优先返回 backRouter，否则再判断fromRouter
+        name: 'Myself'
+      });
+    },
+    onAddPerson() {
+      this.$router.push({
+        name: 'personInfos',
+        query: {
+          from: 'personList',
+          showLeft: true,
+          backRouter: 'personList',
+          toRouter: 'personList'
+        }
+      });
+    },
+    onUnBind(item) {
+      if (!item.deviceId) {
+        this.$store.commit('personId', item.id);
+        // 未绑定设备
+        this.$router.push({
+          name: 'deviceBinding',
+          query: {
+            from: 'personList',
+            backRouter: 'personList',
+            toRouter: 'personList'
+          }
+        });
+      } else {
+        this.$store.commit('personId', item.id);
+        DialogService.confirm({
+          title: '解绑设备',
+          message: `解绑设备后将无法查看${name}的定位轨迹及相关通知，是否确定解绑？`,
+          showCancelButton: true
+        })
+          .then(() => {
+            ToastService.loading({ message: '正在解绑' });
+            APIDevice.unbindDevice({
+              headers: { AuthToken: this.$store.getters.authToken },
+              deviceId: item.deviceId,
+              userId: this.$store.getters.userId,
+              personId: Number(item.id)
+            })
+              .then(res => {
+                ToastService.clear();
+                let item = res.data;
+                if (item.stateCode == 1) {
+                  ToastService.success({
+                    message: '解绑成功',
+                    onClose: () => this.getPersonList()
+                  });
+                  this.$store.commit('deviceId', '');
+                  this.$store.commit('serialNo', '');
+                } else {
+                  DialogService.confirm({
+                    title: '解绑失败',
+                    message: item.message || ''
+                  });
+                }
+              })
+              .catch(() => ToastService.clear());
+          })
+          .catch(() => {});
+      }
+    },
+    onDelete(item) {
+      this.$store.commit('personId', item.id);
+      DialogService.confirm({
+        title: '删除人员',
+        message: `是否确定删除人员？`,
+        showCancelButton: true
+      }).then(() => {
+        // todo删除接口
+        ToastService.loading({ message: '正在删除' });
+        APIHealthUser.deletePerson({
+          personId: Number(item.id)
+        })
+          .then(res => {
+            ToastService.clear();
+            let item = res.data;
+            if (item.stateCode == 1) {
+              if (Number(item.id) == Number(this.$store.getters.personId)) {
+                this.$store.commit('deviceId', '');
+                this.$store.commit('serialNo', '');
+              }
+              this.$store.commit('personId', '');
+              ToastService.success({
+                message: '删除成功',
+                onClose: () => this.getPersonList('false')
+              });
+            } else {
+              DialogService.confirm({
+                title: '删除失败',
+                message: item.message || ''
+              });
+            }
+          })
+          .catch(() => ToastService.clear());
+      });
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+.person-list-container {
+  height: 100vh;
+  overflow: hidden;
+  .main {
+    position: relative;
+    height: calc(100vh - 100px);
+    width: 100%;
+    background-color: #fff;
+    overflow: scroll;
+    .person-list {
+      position: relative;
+      height: 90vh;
+      width: 100%;
+      background-color: #fff;
+      overflow: scroll;
+      .item {
+        position: relative;
+        padding: 20px 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 2px solid $border_color;
+        img {
+          height: 80px;
+          width: 80px;
+          border-radius: 50%;
+          object-fit: contain;
+        }
+        .infos {
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          flex-direction: column;
+          width: 45%;
+          padding-left: 10px;
+          p {
+            font-size: 28px;
+            padding: 10px 0;
+          }
+        }
+        .action {
+          @include center();
+          .btn {
+            height: 40px;
+            min-width: 100px;
+            margin: 0 10px;
+            padding: 10px 8px;
+            background-color: $blue;
+            color: #fff;
+            font-size: 26px;
+            border-radius: 10px;
+            @include center();
+          }
+        }
+      }
+    }
+    .no-data {
+      @include center();
+      flex-direction: column;
+      img {
+        height: 220px;
+        width: 351px;
+        @include center();
+      }
+      p {
+        color: #999;
+        font-size: 26px;
+      }
+    }
+  }
+}
+/* @import url(); 引入css类 */
+</style>
\ No newline at end of file
diff --git a/src/views/myself/relation.vue b/src/views/myself/relation.vue
index 5d48707..de4e42e 100644
--- a/src/views/myself/relation.vue
+++ b/src/views/myself/relation.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="relation">
-    <van-nav-bar title="设备使用者角色" left-arrow @click-left="onBack" />
-    <div class="title">
+    <van-nav-bar title="设备使用者角色" left-arrow leftText="返回" @click-left="onBack" />
+    <!-- <div class="title">
       <div class="role-user-container">
         <div class="radio-box" v-for="(item, index) in radios" :key="item.id">
           <span class="radio" :class="{ on: item.isChecked }" @click="onChooseRole(item.value, index)"></span>
@@ -15,7 +15,7 @@
         </div>
       </div>
       <p class="main">您是设备使用者的：</p>
-    </div>
+    </div> -->
     <div class="content">
       <div class="item" v-show="roleRadio === '1'">
         <div
@@ -644,6 +644,8 @@ export default {
   }
 
   .content {
+    padding: 60px 0;
+    @include center();
     .item {
       padding: 0 80px;
       display: flex;