perf: style optimize

@@ -40,7 +40,7 @@ VITE_GLOB_API_URL_PREFIX=/yt
 VITE_GLOB_CONFIGURATION = /thingskit-drawio
 
 # Content Security Policy
-VITE_GLOB_CONTENT_SECURITY_POLICY = true
+VITE_GLOB_CONTENT_SECURITY_POLICY = false
 
 # Alarm Notify Polling Interval Time
 VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 500000

 <template>
   <BasicModal
-    width="82vw"
+    width="80%"
     :height="compHeight"
     v-bind="$attrs"
     @register="registerModal"
     @ok="handleSubmit"
+    title="个人信息"
     :draggable="false"
-    class="basic-modal"
-    className="{styles.headSetPop}"
+    wrap-class-name="personal-info-modal"
   >
-    <div
-      style="
-        height: 62vh;
-        width: 120vw;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-      "
-    >
-      <div style="width: 29vw; height: 62vh; border: 1px solid #e9edf6; box-shadow: 0 0 5px -5px">
-        <div style="width: 29vw; height: 4vh; border: 1px solid #e9edf6"
-          ><p style="font-size: 17px; margin-top: 7px; margin-left: 10px">个人信息</p></div
-        >
-        <div class="change-avatar" style="text-align: center">
-          <div class="mb-2" style="font-weight: 700">个人头像</div>
-          <div style="display: flex; align-items: center; justify-content: center">
-            <div>
-              <Upload
-                name="avatar"
-                list-type="picture-card"
-                class="avatar-uploader"
-                :show-upload-list="false"
-                :customRequest="customUploadqrcodePic"
-                :before-upload="beforeUploadqrcodePic"
-              >
-                <img
-                  style="border-radius: 50%; height: 8.75rem; width: 10rem"
-                  v-if="peresonalPic || headerImg"
-                  :src="peresonalPic || headerImg"
-                  alt="avatar"
-                />
-                <div v-else>
-                  <div>
-                    <LoadingOutlined style="font-size: 30px" v-if="loading" />
-                    <PlusOutlined v-else style="font-size: 30px" />
-                  </div>
+    <div class="flex">
+      <div class="flex flex-col w-1/2 border border-gray-200">
+        <div class="text-center cursor-pointer">
+          <div class="text-left text-lg border-gray-200 p-2 border">个人头像</div>
+          <div class="flex items-center justify-center mt-4">
+            <Upload
+              name="avatar"
+              list-type="picture-card"
+              class="round !flex justify-center items-center"
+              :show-upload-list="false"
+              :customRequest="customUploadqrcodePic"
+              :before-upload="beforeUploadqrcodePic"
+            >
+              <img
+                class="round"
+                v-if="peresonalPic || headerImg"
+                :src="peresonalPic || headerImg"
+                alt="avatar"
+              />
+              <div v-else>
+                <div>
+                  <LoadingOutlined class="text-3xl" v-if="loading" />
+                  <PlusOutlined v-else class="text-3xl" />
                 </div>
-              </Upload>
-            </div>
+              </div>
+            </Upload>
           </div>
         </div>
+
         <Description
-          class="mt-8"
+          class="mt-8 p-4"
           :column="1"
           :bordered="true"
           :data="getPersonalDetailValue"
           :schema="schema"
         />
       </div>
-      <div
-        style="
-          width: 90vw;
-          height: 60vh;
-          border: 1px solid #e9edf6;
-          margin-top: -15px;
-          box-shadow: 0 0 5px -5px;
-        "
-      >
-        <div style="height: 4vh; border: 1px solid #e9edf6"
-          ><p style="font-size: 17px; margin-top: 7px; margin-left: 20px">基本资料</p></div
-        >
-        <div style="margin-left: 20px">
+      <div class="ml-4 border border-gray-200">
+        <div class="text-lg p-2 border border-gray-200"> 基本资料 </div>
+        <div class="ml-5">
           <BasicForm @register="registerForm" />
         </div>
       </div>
@@ -192,7 +169,7 @@
                 phoneNumber: updataPersonlData.value.phoneNumber,
                 email: updataPersonlData.value.email,
               });
-            getPersonalDetailValue.value = updataPersonlData.value;
+            getPersonalDetailValue.value = userInfo;
           } else {
             if (userInfo) {
               getPersonalDetailValue.value = userInfo;
@@ -255,18 +232,14 @@
   });
 </script>
 <style scoped lang="less">
-  .change-avatar {
-    :deep .ant-upload-select-picture-card {
-      border-radius: 50%;
-      width: 10rem;
-      height: 10rem;
-      overflow: hidden;
-      cursor: pointer;
-      transition: border-color 0.3s ease;
-    }
+  .round {
+    border-radius: 50%;
   }
 
-  .headSetPop :global(.ant-modal-header) {
-    padding: 27px 0 !important;
+  .personal-info-modal:global(.ant-upload.ant-upload-select-picture-card) {
+    border-radius: 50%;
+    width: 140px;
+    height: 140px;
+    margin: 0 !important;
   }
 </style>