From f8f268ab9a0e4c50ee6d12d32a6fcfd349b088b5 Mon Sep 17 00:00:00 2001
From: krank666 <emosick@qq.com>
Date: Sat, 7 Nov 2020 18:22:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/view/person/person.vue | 133 ++++++++++++++++++++++++++++++---
 web/vue.config.js              |   2 +-
 2 files changed, 125 insertions(+), 10 deletions(-)

diff --git a/web/src/view/person/person.vue b/web/src/view/person/person.vue
index c1be56ee..d8eb48d1 100644
--- a/web/src/view/person/person.vue
+++ b/web/src/view/person/person.vue
@@ -1,14 +1,61 @@
 <template>
   <div>
-    <div class="fl-left left-mg-xs">
-      <el-avatar :size="120" :src="userInfo.headerImg" shape="square" @click.native="openChooseImg"></el-avatar>
-    </div>
-    <div class="fl-left left-mg-lg">
-      <div>用户ID：{{userInfo.uuid}}</div>
-      <div>用户昵称：{{userInfo.nickName}}</div>
-      <div>用户组：{{userInfo.authority&&userInfo.authority.authorityName}}</div>
-    </div>
+    <el-row>
+      <el-col :span="6">
+        <div class="fl-left  avatar-box">
+          <div class="user-card">
+            <el-avatar  :size="160" :src="userInfo.headerImg" shape="square" @click.native="openChooseImg"></el-avatar>
+            <div class="user-personality">
+              <p class="nickname">{{userInfo.nickName}}</p>
+              <p>我是个性签名</p>
+            </div>
+            <div class="user-information">
+              <ul>
+                <li>
+                  <i class="el-icon-user"></i>资深前端工程师
+                </li>
+                <li>
+                  <i class="el-icon-data-analysis"></i>北京反转极光科技有限公司-技术部-前端事业群
+                </li>
+                <li>
+                  <i class="el-icon-video-camera-solid"></i>中国·北京市·朝阳区
+                </li>
+                <li>
+                  <i class="el-icon-medal-1"></i>goLang/JavaScript/Vue/Gorm
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="18">
+        <div class="user-addcount">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="账号绑定" name="second">
+              <ul>
+                <li>
+                  <p class="title">密保手机</p>
+                  <p class="desc">已绑定手机:1245678910 <a href="#">立即修改</a></p>
+                </li>
+                <li>
+                  <p class="title">密保邮箱</p>
+                  <p class="desc">已绑定邮箱：gin-vue-admin@google.com.cn<a href="#">立即修改</a></p>
+                </li>
+                <li>
+                  <p class="title">密保问题</p>
+                  <p class="desc">未设置密保问题 <a href="#">去设置</a></p>
+                </li>
+              </ul>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </el-col>
+    </el-row>
+
     <ChooseImg ref="chooseImg" @enter-img="enterImg"/>
+    <!--      <div>用户ID：{{userInfo.uuid}}</div>-->
+    <!--      <div>用户昵称：{{userInfo.nickName}}</div>-->
+    <!--      <div>用户组：{{userInfo.authority&&userInfo.authority.authorityName}}</div>-->
   </div>
 </template>
 <script>
@@ -20,7 +67,9 @@ export default {
   name: 'Person',
   data(){
     return {
-      path:path
+      path:path,
+      activeName: 'second',
+
     }
   },
   components: {
@@ -45,6 +94,9 @@ export default {
           )
         }
       },
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
   }
 }
 </script>
@@ -72,4 +124,67 @@ export default {
   height: 178px;
   display: block;
 }
+  .avatar-box{
+    box-shadow: -2px 0 20px -16px;
+    width: 80%;
+    height: 100%;
+    .user-card{
+      min-height: calc(90vh - 200px);
+      padding: 30px 20px;
+      text-align: center;
+      .el-avatar{
+        border-radius: 50%;
+      }
+      .user-personality{
+        padding: 24px 0;
+        text-align: center;
+        p{
+          font-size: 16px;
+        }
+        .nickname{
+          font-size: 26px;
+        }
+      }
+      .user-information{
+        width: 100%;
+        height: 100%;
+        text-align: left;
+        ul{
+          display: inline-block;
+          height: 100%;
+          li{
+            i{
+              margin-right: 8px;
+            }
+            padding: 20px 0;
+            font-size: 16px;
+            font-weight: 400;
+            color: #606266;
+          }
+        }
+      }
+    }
+  }
+  .user-addcount{
+    ul{
+      li{
+        .title{
+          padding: 10px;
+          font-size: 18px;
+          color: 	#696969;
+        }
+        .desc{
+            font-size: 16px;
+          padding: 0 10px 20px 10px ;
+          color: 	#A9A9A9;
+          a{
+            color: rgb(64, 158, 255);
+            float: right;
+          }
+        }
+        border-bottom: 2px solid #f0f2f5;
+      }
+    }
+  }
+
 </style>
\ No newline at end of file
diff --git a/web/vue.config.js b/web/vue.config.js
index 7b3b7cf6..71961ce0 100644
--- a/web/vue.config.js
+++ b/web/vue.config.js
@@ -23,7 +23,7 @@ module.exports = {
             // 把key的路径代理到target位置
             // detail: https://cli.vuejs.org/config/#devserver-proxy
             [process.env.VUE_APP_BASE_API]: { //需要代理的路径   例如 '/api'
-                target: `http://127.0.0.1:8888/`, //代理到 目标路径
+                target: `http://139.9.113.229:8888/`, //代理到 目标路径
                 changeOrigin: true,
                 pathRewrite: { // 修改路径数据
                     ['^' + process.env.VUE_APP_BASE_API]: '' // 举例 '^/api:""' 把路径中的/api字符串删除