Tailwind css personel (#1509)

* css

* 修改persion页面的样式

* 优化persion样式

---------
Co-authored-by: Nkrank666 <emosick@qq.com>

web/src/view/person/person.vue

 <template>
   <div>
-    <el-row>
-      <el-col :span="6">
-        <div class="float-left avatar-box">
-          <div class="user-card">
-            <div class="header-box">
+    <div class="grid grid-cols-12 w-full gap-2">
+      <div class="col-span-3 h-full">
+        <div class="w-full h-full bg-white px-4 py-8 rounded-lg shadow-lg box-border">
+          <div class="user-card px-6 text-center bg-white shrink-0">
+            <div class="flex justify-center">
               <SelectImage v-model="userStore.userInfo.headerImg" />
             </div>
-            <div class="user-personality">
-              <p v-if="!editFlag" class="nickName">
+            <div class="py-6 text-center">
+              <p v-if="!editFlag" class="text-3xl flex justify-center items-center gap-4">
                 {{ userStore.userInfo.nickName }}
-                <el-icon class="pointer" color="#66b1ff" @click="openEdit">
+                <el-icon class="cursor-pointer text-sm" color="#66b1ff" @click="openEdit">
                   <edit />
                 </el-icon>
               </p>
-              <p v-if="editFlag" class="nickName">
+              <p v-if="editFlag" class="flex justify-center items-center gap-4">
                 <el-input v-model="nickName" />
-                <el-icon class="pointer" color="#67c23a" @click="enterEdit">
+                <el-icon class="cursor-pointer" color="#67c23a" @click="enterEdit">
                   <check />
                 </el-icon>
-                <el-icon class="pointer" color="#f23c3c" @click="closeEdit">
+                <el-icon class="cursor-pointer" color="#f23c3c" @click="closeEdit">
                   <close />
                 </el-icon>
               </p>
-              <p class="person-info">这个家伙很懒，什么都没有留下</p>
+              <p class="text-gray-500 mt-2 text-md">这个家伙很懒，什么都没有留下</p>
             </div>
-            <div class="user-information">
-              <ul>
-                <li>
+            <div class="w-full h-full text-left">
+              <ul class="inline-block h-full w-full">
+                <li class="info-list">
                   <el-icon>
                     <user />
                   </el-icon>
@@ -39,14 +39,14 @@
                   content="北京反转极光科技有限公司-技术部-前端事业群"
                   placement="top"
                 >
-                  <li>
+                  <li class="info-list">
                     <el-icon>
                       <data-analysis />
                     </el-icon>
                     北京反转极光科技有限公司-技术部-前端事业群
                   </li>
                 </el-tooltip>
-                <li>
+                <li class="info-list">
                   <el-icon>
                     <video-camera />
                   </el-icon>
@@ -58,7 +58,7 @@
                   content="GoLang/JavaScript/Vue/Gorm"
                   placement="top"
                 >
-                  <li>
+                  <li class="info-list">
                     <el-icon>
                       <medal />
                     </el-icon>
@@ -69,40 +69,41 @@
             </div>
           </div>
         </div>
-      </el-col>
-      <el-col :span="18">
-        <div class="user-addcount">
+      </div>
+      <div class="col-span-9 ">
+        <div class="bg-white h-full px-4 py-8 rounded-lg shadow-lg box-border">
           <el-tabs v-model="activeName" @tab-click="handleClick">
             <el-tab-pane label="账号绑定" name="second">
               <ul>
-                <li>
-                  <p class="title">密保手机</p>
-                  <p class="desc">
+                <li class="borderd">
+                  <p class="pb-2.5 text-xl text-gray-600">密保手机</p>
+                  <p class="pb-2.5 text-lg text-gray-400">
                     已绑定手机:{{ userStore.userInfo.phone }}
-                    <a href="javascript:void(0)" @click="changePhoneFlag = true">立即修改</a>
+                    <a href="javascript:void(0)" @click="changePhoneFlag = true" class="float-right text-blue-400">立即修改</a>
                   </p>
                 </li>
-                <li>
-                  <p class="title">密保邮箱</p>
-                  <p class="desc">
+                <li class="borderd pt-2.5">
+                  <p class="pb-2.5 text-xl text-gray-600">密保邮箱</p>
+                  <p class="pb-2.5 text-lg text-gray-400">
                     已绑定邮箱：{{ userStore.userInfo.email }}
-                    <a href="javascript:void(0)" @click="changeEmailFlag = true">立即修改</a>
+                    <a href="javascript:void(0)" @click="changeEmailFlag = true" class="float-right text-blue-400">立即修改</a>
                   </p>
                 </li>
-                <li>
-                  <p class="title">密保问题</p>
-                  <p class="desc">
+                <li class="borderd pt-2.5">
+                  <p class="pb-2.5 text-xl text-gray-600">密保问题</p>
+                  <p class="pb-2.5 text-lg text-gray-400">
                     未设置密保问题
-                    <a href="javascript:void(0)">去设置</a>
+                    <a href="javascript:void(0)" class="float-right text-blue-400">去设置</a>
                   </p>
                 </li>
-                <li>
-                  <p class="title">修改密码</p>
-                  <p class="desc">
+                <li class="borderd pt-2.5">
+                  <p class="pb-2.5 text-xl text-gray-600">修改密码</p>
+                  <p class="pb-2.5 text-lg text-gray-400">
                     修改个人密码
                     <a
                       href="javascript:void(0)"
                       @click="showPassword = true"
+                      class="float-right text-blue-400"
                     >修改密码</a>
                   </p>
                 </li>
@@ -110,8 +111,8 @@
             </el-tab-pane>
           </el-tabs>
         </div>
-      </el-col>
-    </el-row>
+      </div>
+    </div>
 
     <el-dialog
       v-model="showPassword"
@@ -156,8 +157,8 @@
           <el-input v-model="phoneForm.phone" placeholder="请输入手机号" autocomplete="off" />
         </el-form-item>
         <el-form-item label="验证码" label-width="120px">
-          <div class="code-box">
-            <el-input v-model="phoneForm.code" autocomplete="off" placeholder="请自行设计短信服务，此处为模拟随便写" style="width:300px" />
+          <div class="flex w-full gap-4">
+            <el-input class="flex-1"  v-model="phoneForm.code" autocomplete="off" placeholder="请自行设计短信服务，此处为模拟随便写" style="width:300px" />
             <el-button type="primary" :disabled="time>0" @click="getCode">{{ time>0?`(${time}s)后重新获取`:'获取验证码' }}</el-button>
           </div>
         </el-form-item>
@@ -183,8 +184,8 @@
           <el-input v-model="emailForm.email" placeholder="请输入邮箱" autocomplete="off" />
         </el-form-item>
         <el-form-item label="验证码" label-width="120px">
-          <div class="code-box">
-            <el-input v-model="emailForm.code" placeholder="请自行设计邮件服务，此处为模拟随便写" autocomplete="off" style="width:300px" />
+          <div class="flex w-full gap-4">
+            <el-input class="flex-1" v-model="emailForm.code" placeholder="请自行设计邮件服务，此处为模拟随便写" autocomplete="off" style="width:300px" />
             <el-button type="primary" :disabled="emailTime>0" @click="getEmailCode">{{ emailTime>0?`(${emailTime}s)后重新获取`:'获取验证码' }}</el-button>
           </div>
         </el-form-item>
@@ -387,155 +388,15 @@ const changeEmail = async() => {
 </script>
 
 <style lang="scss">
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #409eff;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 178px;
-  height: 178px;
-  line-height: 178px;
-  text-align: center;
-}
-.avatar {
-  width: 178px;
-  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;
-    background-color: #fff;
-    border-radius: 8px;
-    flex-shrink: 0;
-    .el-avatar {
-      border-radius: 50%;
-    }
-    .user-personality {
-      padding: 24px 0;
-      text-align: center;
-      p {
-        font-size: 16px;
-      }
-      .nickName {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 26px;
-      }
-      .person-info {
-        margin-top: 6px;
-        font-size: 14px;
-        color: #999;
-      }
-    }
-    .user-information {
-      width: 100%;
-      height: 100%;
-      text-align: left;
-      ul {
-        display: inline-block;
-        height: 100%;
-        width: 100%;
-        li {
-          width: 100%;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          i {
-            margin-right: 8px;
-          }
-          padding: 20px 0;
-          font-size: 16px;
-          font-weight: 400;
-          color: #606266;
-        }
-      }
-    }
-  }
-}
-.user-addcount {
-  background-color: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  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;
-      &:last-child{
-        border-bottom: none;
-      }
-    }
-  }
-}
-.user-headpic-update {
-  width: 120px;
-  height: 120px;
-  line-height: 120px;
-  margin: 0 auto;
-  display: flex;
-  justify-content: center;
-  border-radius: 20px;
-  &:hover {
-    color: #fff;
-    background: linear-gradient(
-        to bottom,
-        rgba(255, 255, 255, 0.15) 0%,
-        rgba(0, 0, 0, 0.15) 100%
-      ),
-      radial-gradient(
-          at top center,
-          rgba(255, 255, 255, 0.4) 0%,
-          rgba(0, 0, 0, 0.4) 120%
-        )
-        #989898;
-    background-blend-mode: multiply, multiply;
-    .update {
-      color: #fff;
+.borderd {
+  @apply border-b-2 border-solid border-gray-100 border-t-0 border-r-0 border-l-0;
+    &:last-child{
+      @apply border-b-0;
     }
-  }
-  .update {
-    height: 120px;
-    width: 120px;
-    text-align: center;
-    color: transparent;
-  }
-}
-.pointer {
-  cursor: pointer;
-}
-.code-box{
-  display: flex;
-  justify-content: space-between;
-}
-.header-box{
-  display: flex;
-  justify-content: center;
+ }
+
+.info-list{
+  @apply w-full whitespace-nowrap overflow-hidden text-ellipsis py-3 text-lg text-gray-700
 }
+
 </style>