feat: 修复样式bug,优化formRule,调整样式

src/components/RichEditor/Quill.vue

@@ -61,7 +61,7 @@ const saveHandler = debounce(() => {
   </div>
 </template>
 
-<style lang="less">
+<style lang="less" scoped>
   .title{
     font-size: 18px;
     font-family: PingFang SC, PingFang SC-Medium;

src/views/home/aside/comp/modals/CustomFilterModal.vue

@@ -304,7 +304,7 @@ onMounted(() => {
               :title="allCount" class="dragcardStyle" :segmented="{ content: true, footer: true }" size="small"
               :bordered="false"
             >
-              <div>
+              <div class="input_wrap">
                 <n-input placeholder="搜索关键词" @input="leftInputHandler">
                   <template #suffix>
                     <SvgIcon size="14px" name="magnifying-1-color999" />
@@ -340,7 +340,7 @@ onMounted(() => {
               <template #header-extra>
                 <span class="textbtnStyle" @click="clearDragSource">清空</span>
               </template>
-              <div>
+              <div class="input_wrap">
                 <n-input placeholder="搜索关键词" @input="rightInputHandler">
                   <template #suffix>
                     <SvgIcon size="14px" name="magnifying-1-color999" />
@@ -395,6 +395,13 @@ onMounted(() => {
   &-footer {
     display: flex;
     justify-content: flex-end;
+    .n-button--info-type{
+      background: #507AFD !important;
+    }
+    .n-button--default-type{
+      background: #CAD2DD !important;
+      color: #333333;
+    }
   }
 
   &-info {
@@ -464,7 +471,25 @@ onMounted(() => {
   font-weight: bolder !important;
 }
 ::v-deep(.n-scrollbar){
-  border-top: none !important;
+  border-left: 1px solid #cad2dd !important;
+  border-right: 1px solid #cad2dd !important;
+  border-bottom: 1px solid #E8E8E8 !important;
+  border-top: 1px solid #E8E8E8 !important;
+}
+::v-deep(.n-card__content){
+  padding: 20px 24px  0 24px !important;
+}
+::v-deep(.n-card__footer){
+  padding: 0 24px 16px 24px !important;
+}
+::v-deep(.n-input .n-input-wrapper){
+  height: 44px !important;
+  border: 1px solid #cad2dd !important;
+  border-bottom: none !important;
+  // margin-bottom: -3px;
+  .n-input__input input{
+    height: 44px !important;
+  }
 }
 
 </style>

src/views/login/components/Login.vue

@@ -42,7 +42,7 @@ let formInline: FormState = reactive({
   // password: "123456",
   enterprisecode: "",
   username: "",
-  password: ""
+  password: "",
 });
 
 let formSms: FormSms = reactive({
@@ -54,38 +54,52 @@ const tab = ref(0);
 const countTime = ref("获取验证码");
 const rules = {
   enterprisecode: [
-    { required: true, message: "请输入企业编码", trigger: "blur" },
     {
-      trigger: ["blur"],
+      trigger: ["blur","input","change"],
       level: "error",
       validator(_rule, value) {
         if (loginSuccess.value) {
           return true;
-        } else {
-          return new Error(loginRejectMessge.value);
         }
+        if (!value) {
+          return new Error("请输入企业编码");
+        }
+        return new Error(loginRejectMessge.value);
       },
     },
   ],
   agentcode: [
-    { required: true, message: "请输入企业编码", trigger: "blur" },
     {
-      trigger: ["blur"],
+      trigger: ["blur","input","change"],
       level: "error",
       validator(_rule, value) {
         if (loginSuccess.value) {
           return true;
-        } else {
-          return new Error(loginRejectMessge.value);
         }
+        if (!value) {
+          return new Error("请输入验证码");
+        }
+        return new Error(loginRejectMessge.value);
       },
     },
   ],
-  phone: { required: true, message: "请输入手机号", trigger: "blur" },
+  phone: [
+  {
+      trigger: ["blur","input","change"],
+      level: "error",
+      validator(_rule, value) {
+        if (loginSuccess.value) {
+          return true;
+        }
+        if (!value) {
+          return new Error("请输入手机号");
+        }
+        return new Error(loginRejectMessge.value);
+      },
+    },],
   phonecode: [
-    { required: true, message: "请输入验证码", trigger: "blur" },
     {
-      trigger: ["blur"],
+      trigger: ["blur","input","change"],
       level: "error",
       validator(_rule, value) {
         if (value.length < 4 && value.length > 0) {
@@ -93,32 +107,49 @@ const rules = {
         }
         if (loginSuccess.value) {
           return true;
-        } else {
-          return new Error("验证码错误");
         }
+        if (!value) {
+          return new Error("请输入验证码");
+        }
+        return new Error(loginRejectMessge.value);
       },
     },
   ],
   username: [
-    { required: true, message: "请输入用户名", trigger: "blur" },
     {
-      trigger: ["blur"],
+      trigger: ["blur","input","change"],
       level: "error",
       validator(_rule, value) {
         if (loginSuccess.value) {
           return true;
-        } else {
-          return new Error(loginRejectMessge.value);
         }
+        if (!value) {
+          return new Error("请输入账号");
+        }
+        return new Error(loginRejectMessge.value);
       },
     },
   ],
-  password: { required: true, message: "请输入密码", trigger: "blur" },
-  captcha: { required: true, message: "请输入验证码", trigger: "blur" },
+  password: [
+  {
+      trigger: ["blur","input","change"],
+      level: "error",
+      validator(_rule, value) {
+        if (loginSuccess.value) {
+          return true;
+        }
+        if (!value) {
+          return new Error("请输入密码");
+        }
+        return new Error(loginRejectMessge.value);
+      },
+    },],
+  captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
 };
 
 function handleSubmit(e) {
   e.preventDefault();
+  loginSuccess.value = true;
   formRef.value.validate(async (errors) => {
     if (!errors) {
       const { username, password, enterprisecode } = formInline;
@@ -163,9 +194,9 @@ function handleSubmit(e) {
 }
 
 onMounted(() => {
-  let data:any = localStorage.getItem("LOGIN_FORM_SMS");
+  let data: any = localStorage.getItem("LOGIN_FORM_SMS");
   if (data) {
-    data = JSON.parse(data) as any
+    data = JSON.parse(data) as any;
     formSms.agentcode = data.agentcode;
     formSms.phone = data.phone;
     formSms.phonecode = "";
@@ -175,7 +206,7 @@ onMounted(() => {
   if (data) {
     data = JSON.parse(data) as any;
     formInline.username = data.username;
-    formInline.password = '';
+    formInline.password = "";
     // formInline.password = data.password;
     formInline.enterprisecode = data.enterprisecode;
     autoLogin.value = true;
@@ -184,6 +215,7 @@ onMounted(() => {
 
 function handleSmsSubmit(e) {
   e.preventDefault();
+  loginSuccess.value = true;
   formRefSms.value.validate(async (errors) => {
     if (!errors) {
       const { phone, agentcode, phonecode } = formSms;
@@ -346,20 +378,20 @@ function forget() {
             </template>
           </n-input>
         </n-form-item>
-        <n-form-item class="form-item">
-          <n-button
-            :class="{ 'btn-disabled': computedForm() }"
-            class="btn"
-            type="primary"
-            size="large"
-            :loading="loading"
-            block
-            @click="handleSubmit"
-            :disabled="computedForm()"
-          >
-            登录
-          </n-button>
-        </n-form-item>
+        <!-- <n-form-item class="form-item"> -->
+        <n-button
+          :class="{ 'btn-disabled': computedForm() }"
+          class="btn"
+          type="primary"
+          size="large"
+          :loading="loading"
+          block
+          @click="handleSubmit"
+          :disabled="computedForm()"
+        >
+          登录
+        </n-button>
+        <!-- </n-form-item> -->
         <n-form-item class="default-color">
           <div class="flex justify-between w-full">
             <div class="flex-initial">
@@ -440,23 +472,23 @@ function forget() {
             </template>
           </n-input>
         </n-form-item>
-        <n-form-item class="form-item">
-          <n-button
-            :class="{ 'btn-disabled': computedForm() }"
-            class="btn"
-            type="primary"
-            size="large"
-            :loading="loading"
-            block
-            @click="handleSmsSubmit"
-            :disabled="computedForm()"
-          >
-            登录
-          </n-button>
-        </n-form-item>
+        <!-- <n-form-item class="form-item"> -->
+        <n-button
+          :class="{ 'btn-disabled': computedForm() }"
+          class="btn"
+          type="primary"
+          size="large"
+          :loading="loading"
+          block
+          @click="handleSmsSubmit"
+          :disabled="computedForm()"
+        >
+          登录
+        </n-button>
+        <!-- </n-form-item> -->
         <n-form-item class="default-color">
           <div class="flex justify-between w-full">
-            <div class="flex-initial">
+            <div class="flex-initial save-btn">
               <n-checkbox v-model:checked="autoLogin">
                 <span class="forgetSpan">记住账号</span>
               </n-checkbox>
@@ -474,7 +506,7 @@ function forget() {
 <style lang="less" scoped>
 .form-login {
   width: 26.25rem;
-  height: 26.0625rem;
+  height: 28.0625rem;
   box-sizing: border-box;
   background: linear-gradient(
     136deg,
@@ -486,7 +518,7 @@ function forget() {
   box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.04);
   backdrop-filter: blur(12px);
   position: relative;
-  padding: 3rem 1.6875rem 0;
+  padding: 3rem 1.6875rem 2rem;
 
   .img-close {
     position: absolute;
@@ -528,10 +560,10 @@ function forget() {
 
       .line {
         width: 2rem;
-        height: .25rem;
+        height: 0.25rem;
         border-radius: 2px;
         margin: 0 auto;
-        margin-top: .5625rem;
+        margin-top: 0.5625rem;
       }
     }
   }
@@ -540,14 +572,16 @@ function forget() {
     margin-top: 1.8125rem;
 
     .form-item {
-      height: 3.75rem;
+      height: 4.75rem;
     }
 
     .item-input {
       width: 22.875rem;
-      // height: 44px;
+      // height: 2.75rem;
       background: rgba(255, 255, 255, 0.5);
       border-radius: 4px;
+      // margin-bottom: 1rem;
+      font-size: 1rem;
     }
 
     .btn {
@@ -555,8 +589,8 @@ function forget() {
       height: 2.75rem;
       background: linear-gradient(234deg, #96aaff 0%, #1c43ff 100%);
       border-radius: 3px;
-      margin-top: .625rem;
-      margin-bottom: .875rem;
+      // margin-top: 1rem;
+      // margin-bottom: -0.875rem;
 
       &-disabled {
         opacity: 0.5;
@@ -571,38 +605,56 @@ function forget() {
   }
 
   .order-last {
-    font-size: .875rem;
+    font-size: 1rem;
     font-family: PingFang SC, PingFang SC-Regular;
     font-weight: Regular;
     color: #507afd;
   }
 
   .code {
-    font-size: .9375rem;
+    font-size: 0.9375rem;
     font-family: PingFang SC, PingFang SC-Regular;
     font-weight: Regular;
     color: #507afd;
-    margin-left: .75rem;
+    margin-left: 0.75rem;
     cursor: pointer;
 
     &-count {
-      font-size: .875rem;
+      font-size: 0.875rem;
       color: #999999;
     }
   }
 }
 ::v-deep(.n-form-item-feedback--error) {
-  // color: #FF4E4F !important;
+  color: #ff4e4f !important;
 }
 .forgetSpan {
-  font-size: .9375rem;
+  font-size: 0.9375rem;
   font-family: PingFang SC, PingFang SC-Regular;
   font-weight: Regular;
   text-align: center;
   color: #999999;
-  line-height: 1.3125rem;
+  line-height: 1rem;
 }
-::v-deep(.n-base-clear>.n-base-clear__clear>.n-base-icon>svg){
+::v-deep(.n-base-clear > .n-base-clear__clear > .n-base-icon > svg) {
   color: #c9c9c9;
 }
+::v-deep(.n-input .n-input__input-el) {
+  height: 2.75rem !important;
+  font-size: 1rem !important;
+}
+::v-deep(.n-input .n-input-wrapper) {
+  height: 2.75rem !important;
+}
+.save-btn {
+  font-size: 0.9375rem;
+}
+::v-deep(.n-form-item .n-form-item-feedback-wrapper) {
+  height: 1rem;
+  padding: 0 !important;
+  margin: 0 !important;
+  line-height: normal !important;
+  min-height: 0 !important;
+  // margin-bottom: .5rem;
+}
 </style>

src/views/login/index.vue

@@ -293,4 +293,9 @@ function close() {
     margin-left: -30.3125rem;
   }
 }
+::v-deep(.n-form-item .n-form-item-feedback-wrapper .n-form-item-feedback.n-form-item-feedback--error){
+  color: #FF4E4F !important;
+  font-size: .75rem !important;
+}
+
 </style>

src/views/message/content/List.vue

@@ -103,7 +103,7 @@ function getMore() {
 
 <template>
   <div class="wrapper-message">
-    <div class="header flex justify-between">
+    <div class="flex justify-between header">
       <div class="header-title">
         消息通知
       </div>
@@ -118,10 +118,10 @@ function getMore() {
           v-for="(item) in tabList"
           :key="item.value"
           :class="{ 'item-active': tab === item.value }"
-          class="item flex"
+          class="flex item"
           @click="switchTab(item.value)"
         >
-          <div class="item-left flex align-center">
+          <div class="flex item-left align-center">
             <img class="icon" :src="tab === item.value ? item.activeIcon : item.icon" alt="">
             <div :class="{ 'text-active': tab === item.value }" class="text">
               {{ item.name }}
@@ -133,7 +133,7 @@ function getMore() {
       </div>
       <div class="list">
         <div v-for="(item, index) in list" :key="item.id" :class="{ 'pt0': index === 0, 'item-disabled': item.readFlag }" class="item" @click="goDetail(item)">
-          <div class="left left">
+          <div class="left">
             <div class="num">
               {{ format(item.sendTime, 'dd') }}
               <div v-if="!item.readFlag" class="point" />
@@ -240,7 +240,6 @@ function getMore() {
         align-items: center;
         justify-content: space-between;
         cursor: pointer;
-
         &-active{
           background: rgba(80,122,253,.1);
         }
@@ -311,7 +310,7 @@ function getMore() {
         align-items: center;
         justify-content: space-between;
         flex: 1;
-        padding: 16px 0 16px 25px;
+        padding: 16px 0 8px 25px;
         border-bottom: 1px solid #eeeeee;
 
         &-disabled{
@@ -369,7 +368,7 @@ function getMore() {
       .status{
         display: flex;
         align-items: center;
-        margin-top: 8px;
+        // margin-top: 8px;
       }
 
       .tag{
@@ -415,7 +414,7 @@ function getMore() {
         text-align: left;
         color: #999999;
         line-height: 19px;
-        margin-top: 8px;
+        // margin-top: 8px;
       }
 
       .name{