提交

assets/css/root.scss

@@ -565,6 +565,7 @@
         --size-283: 283px;
         --size-287: 287px;
         --size-288: 288px;
+        --size-290: 290px;
         --size-293: 293px;
         --size-294: 294px;
         --size-297: 297px;
@@ -635,6 +636,7 @@
         --size-553: 553px;
         --size-560: 560px;
         --size-565: 565px;
+        --size-573: 573px;
         --size-579: 579px;
         --size-583: 583px;
         --size-590: 590px;
@@ -685,6 +687,7 @@
         --size-1000: 1000px;
         --size-1022: 1022px;
         --size-1044: 1044px;
+        --size-1055: 1055px;
         --size-1065: 1065px;
         --size-1079: 1079px;
         --size-1116: 1116px;
@@ -908,6 +911,7 @@
         --size-283: 14.7407vw;
         --size-287: 14.9479vw;
         --size-288: 14.9792vw;
+        --size-290: 15.1041vw;
         --size-293: 15.2604vw;
         --size-294: 15.3125vw;
         --size-297: 15.4792vw;
@@ -978,6 +982,7 @@
         --size-553: 28.7500vw;
         --size-560: 29.1667vw;
         --size-565: 29.3750vw;
+        --size-573: 29.8437vw;
         --size-579: 30.1563vw;
         --size-583: 30.3646vw;
         --size-590: 30.7292vw;
@@ -1028,6 +1033,7 @@
         --size-1000: 52.0833vw;
         --size-1022: 53.2292vw;
         --size-1044: 54.3750vw;
+        --size-1055: 54.9479vw;
         --size-1065: 55.4688vw;
         --size-1079: 56.1979vw;
         --size-1116: 58.0625vw;

assets/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4953057 */
-  src: url('iconfont.woff2?t=1750756422610') format('woff2'),
-       url('iconfont.woff?t=1750756422610') format('woff'),
-       url('iconfont.ttf?t=1750756422610') format('truetype');
+  src: url('iconfont.woff2?t=1751102158992') format('woff2'),
+       url('iconfont.woff?t=1751102158992') format('woff'),
+       url('iconfont.ttf?t=1751102158992') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-shanchu1:before {
+  content: "\e600";
+}
+
 .icon-top_:before {
   content: "\e615";
 }

assets/font/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "11655648",
+      "name": "删除",
+      "font_class": "shanchu1",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
     {
       "icon_id": "11211977",
       "name": "top_01",

components/Demand.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="customer-info">
-    <n-form require-mark-placement="left" label-width="auto" ref="formRef" :model="formData" :rules="rules">
+    <div class="info-title">
+      {{$t('report.detail.subscribe')}}
+      <div></div>
+    </div>
+    <n-form require-mark-placement="left" label-align="left" ref="formRef" :model="formData" :rules="rules">
       <!-- <n-form-item v-show="rowType === '1' && language === 'zh-CN'" > -->
       <div class="info-tips" v-if="rowType === '1' && language === 'zh-CN'">
         注明: 此报告为付费报告，客户可在购买前免费索取样本，样本中不包含关键数据点，仅供客户具体了解报告详细框架和细节。
@@ -19,27 +23,27 @@
           </div>
         </n-radio-group>
       </n-form-item>
-      <n-form-item :label="t('report.demand.companyName')" label-placement="left" path="companyName">
+      <n-form-item :label="t('report.demand.companyName')+'：'" label-placement="left" path="companyName">
         <n-input :placeholder="t('report.demand.companyNameTip')" v-model:value="formData.companyName" />
       </n-form-item>
-      <n-form-item :label="t('report.demand.address')" label-placement="left" path="addr">
+      <n-form-item :label="t('report.demand.address')+'：'" label-placement="left" path="addr">
         <n-input :placeholder="t('report.demand.addressTip')" v-model:value="formData.addr" />
       </n-form-item>
-      <n-form-item :label="t('report.demand.email')" label-placement="left" path="email">
+      <n-form-item :label="t('report.demand.email')+'：'" label-placement="left" path="email">
         <n-input :placeholder="t('report.demand.emailTip')" v-model:value="formData.email" />
       </n-form-item>
-      <n-form-item :label="t('report.demand.phone')" label-placement="left" path="contact" :show-require-mark="language ===  'zh-CN'">
+      <n-form-item :label="t('report.demand.phone')+'：'" label-placement="left" path="contact" :show-require-mark="language ===  'zh-CN'">
         <n-input :placeholder="t('report.demand.phoneTip')" v-model:value="formData.contact" />
       </n-form-item>
-      <n-form-item :label="t('report.demand.person')" label-placement="left" path="name">
+      <n-form-item :label="t('report.demand.person')+'：'" label-placement="left" path="name">
         <n-input :placeholder="t('report.demand.personTip')" v-model:value="formData.name" />
       </n-form-item>
-      <n-form-item :label="t('report.demand.desc')" label-placement="left" path="demand">
-        <n-input type="textarea" :placeholder="t('report.demand.descTip')" v-model:value="formData.demand" />
+      <n-form-item :label="t('report.demand.desc')+'：'" label-placement="left" path="demand">
+        <n-input :placeholder="t('report.demand.descTip')" v-model:value="formData.demand" />
       </n-form-item>
       <div class="form-item-btn">
-        <n-button @click="handleClose">{{t('report.demand.cancel')}}</n-button>
-        <n-button type="primary" @click="handleSubmit">{{t('report.demand.submit')}}</n-button>
+        <n-button class="blue" @click="handleClose">{{t('report.demand.cancel')}}</n-button>
+        <n-button class="green" type="primary" @click="handleSubmit">{{t('report.demand.submit')}}</n-button>
       </div>
     </n-form>
   </div>
@@ -218,7 +222,23 @@ function handleClose () {
 
 <style lang="scss" scoped>
 .customer-info {
-  padding-top: 20px;
+  padding: 20px 58px;
+  background: #ffffff;
+  border-radius: 20px;
+  .info-title {
+    font-size: 38px;
+    font-family: Arial, Arial-Bold;
+    font-weight: 700;
+    text-align: center;
+    color: #1a1a1a;
+    > div {
+      width: 71px;
+      height: 6px;
+      background: linear-gradient(90deg, #719d59 2%, #479f82 98%);
+      border-radius: 3px;
+      margin: auto;
+    }
+  }
   .info-tips {
     padding-bottom: 20px;
     color: #f00;
@@ -235,8 +255,62 @@ function handleClose () {
 .form-item-btn {
   display: flex;
   justify-content: center;
-  button:nth-child(1) {
-    margin-right: 60px;
+  .n-button {
+    width: 144px;
+    height: 48px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-family: Arial, Arial-Regular;
+    text-align: center;
+    color: #ffffff;
+    line-height: 48px;
+    margin-right: 14px;
+    cursor: pointer;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  .blue {
+    color: #666666;
+  }
+  // .green {
+  //   background: #84a86c;
+  // }
+}
+:deep(.n-form-item-label) {
+  color: #666666;
+  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+  line-height: var(--size-34);
+  border-bottom: 1px solid #e6e6e6;
+  padding: 10px 10px 20px 0;
+}
+:deep(.n-input-wrapper) {
+  font-size: var(--size-14);
+  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+  border-bottom: var(--size-1) solid #e6e6e6;
+  line-height: var(--size-34);
+  padding: 10px 0 20px;
+}
+:deep(.n-form-item-blank--error .n-input) {
+  --n-border-error: var(--size-1) solid transparent !important;
+  --n-border-focus-error: var(--size-1) solid transparent !important;
+  --n-border-hover-error: var(--size-1) solid transparent !important;
+  --n-box-shadow-focus-error: var(--size-1) solid transparent !important;
+}
+.area {
+  width: 100%;
+  :deep(.n-form-item-label),
+  :deep(.n-input-wrapper) {
+    border-bottom: none;
+  }
+  :deep(.n-input--textarea) {
+    background: #fafafa;
+    border: var(--size-1) solid #e6e6e6;
+    border-radius: var(--size-10);
+    padding: 0 var(--size-5);
+  }
+  :deep(.n-input.n-input--textarea.n-input--resizable .n-input-wrapper) {
+    min-height: var(--size-260);
   }
 }
 </style>

components/Header/index.vue

@@ -3,7 +3,21 @@
     <div class="top">
       <a> <span class="iconfont icon-youxiang"></span> market@aporesearch.com</a>
       <a><span class="iconfont icon-lianxidianhua"></span> 1-332-251-9412</a>
-      <div><span class="iconfont icon-weidenglu"></span>Login/Register</div>
+      <template v-if="isLogin">
+        <div class="userInfo">
+          <img class="avatar" src="@/assets/images/avatar.png" alt="avatar" width="30" />
+          <span class="username" @click="toMine">{{
+                    userInfo.name
+                  }}</span>
+          <span>|</span>
+          <span class="logout" @click="handleLogout">{{t('common.login.logout')}}</span>
+        </div>
+      </template>
+      <template v-if="!isLogin">
+        <div><span class="iconfont icon-weidenglu"></span>
+          <div @click="handleSignIn()">Login</div> / <div @click="closeSginDialog('register')">Register</div>
+        </div>
+      </template>
     </div>
     <div class="navBox">
       <a class="navBox_l" href="/">
@@ -84,7 +98,7 @@
       <div>
         <div class="userInfo" v-if="userStore.getToken">
           <span class="username">
-            <a href="/personalCenter/myInfo">
+            <a href="/mine/mineCenter">
               {{ userStore.getUserInfo?.name }}
             </a>
           </span>
@@ -94,19 +108,19 @@
           }}</span>
         </div>
         <div v-else class="head_t_r_login">
-          <span @click="openModel(3)">
+          <span @click="handleSignIn()">
             Login</span>/
-          <span @click="openModel(2)">Register</span>
+          <span @click="closeSginDialog('register')">Register</span>
         </div>
       </div>
     </div>
   </div>
-  <n-modal :show="signInVisible" preset="dialog" :title="signInTitle" :showIcon="false" :close-on-esc="false" :mask-closable="false" @close="signInVisible = false" :class="{ 'login-dialog': !pcShow }">
+  <n-modal :show="signInVisible" :title="signInTitle" :showIcon="false" @esc="signInVisible = false" @mask-click="signInVisible = false" @close="signInVisible = false" class="modalCls" :class="{ 'login-dialog': !pcShow }">
     <SignInLogin @closeSginDialog="closeSginDialog" v-if="sginType == 'login'"></SignInLogin>
     <SignInRegister @closeSginDialog="closeSginDialog" v-if="sginType == 'register'"></SignInRegister>
     <SignInForgot @closeSginDialog="closeSginDialog" v-if="sginType == 'forgot'"></SignInForgot>
   </n-modal>
-  <n-modal v-model:show="logoutVisible" preset="dialog" title="提示" :showIcon="false" content="确认退出登录吗?" positive-text="确认" negative-text="取消" :close-on-esc="false" :mask-closable="false" @positive-click="submitLogoutCallback" @negative-click="cancelLogoutCallback" :class="{ 'login-dialog': !pcShow }" />
+  <n-modal v-model:show="logoutVisible" preset="dialog" title="Hint" :showIcon="false" content="Are you sure you want to log out?" positive-text="Confirm" negative-text="Cancel" :close-on-esc="false" :mask-closable="false" @positive-click="submitLogoutCallback" @negative-click="cancelLogoutCallback" :class="{ 'login-dialog': !pcShow }" />
 </template>
 
 <script lang="ts" setup>
@@ -418,6 +432,7 @@ const closeSginDialog = (type: string) => {
       signInTitle.value = t("common.login.title");
       break;
     case "register":
+      signInVisible.value = true;
       sginType.value = type;
       signInTitle.value = t("common.login.register");
       break;
@@ -550,6 +565,34 @@ getDictListData();
         border-left: var(--size-1) solid #fff;
       }
     }
+    .userInfo {
+      display: flex;
+      align-items: center;
+
+      .avatar {
+        width: 30px;
+        height: 30px;
+        margin-right: 10px;
+        vertical-align: middle;
+        border-radius: 50%;
+      }
+
+      .username {
+        font-size: 14px;
+      }
+
+      span {
+        margin-right: 10px;
+        cursor: pointer;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+      > .logout {
+        font-size: var(--size-14);
+      }
+    }
   }
   .navBox {
     display: flex;
@@ -629,6 +672,9 @@ getDictListData();
   font-size: var(--size-16) !important;
   --n-text-color-hover: none !important;
 }
+.modalCls {
+  width: var(--size-720) !important;
+}
 @include responseTo("phone") {
   .pc {
     display: none;

components/Login/forgot.vue

@@ -1,9 +1,14 @@
 <template>
   <div class="container">
+    <div class="title">
+      Forget the password
+      <div></div>
+      <span @click="handleSure()" class="iconfont icon-shanchu1"></span>
+    </div>
     <template v-if="!emailSent">
-      <n-form ref="formRef" label-placement="left" :label-width="100" :model="form" :rules="rules" size="large" require-mark-placement="left">
-        <n-form-item :label="t('common.register.email')+'：'" path="email">
-          <n-input v-model:value="form.email" :placeholder="t('common.register.forgetPasswordPlaceholder')" />
+      <n-form ref="formRef" label-placement="left" label-align="left" :model="form" :rules="rules" size="large" require-mark-placement="left">
+        <n-form-item :label="'Email address：'" path="email">
+          <n-input v-model:value="form.email" placeholder="Please enter your email address" />
         </n-form-item>
       </n-form>
       <n-button class="login-btn" attr-type="button" type="info" color="#18A058" :disabled="submitLoading" @click="handleSend">
@@ -19,7 +24,7 @@
         {{t('common.login.emailSendSuccess')}}
       </p>
       <n-button class="login-btn" attr-type="button" type="info" color="#18A058" @click="handleSure">
-        {{t('common.login.confirm')}}
+        Confirm
       </n-button>
     </template>
   </div>
@@ -45,7 +50,7 @@ const rules: FormRules = {
   email: [
     {
       required: true,
-      message: "请输入邮箱",
+      message: "Please enter your email address.",
       trigger: ["input", "blur"],
     },
     {
@@ -53,7 +58,7 @@ const rules: FormRules = {
       validator: (rule: FormItemRule, value: string): boolean => {
         return value && isEmail(value);
       },
-      message: "请输入正确格式邮箱",
+      message: "Please enter a properly formatted email address",
       trigger: ["blur"],
     },
   ],
@@ -67,7 +72,7 @@ const handleSend = () => {
       submitLoading.value = true;
       const { code } = await email_Api(form);
       if (code === 200) {
-        message.message.success("发送成功");
+        message.message.success("send successfully");
         emailSent.value = true;
       }
       submitLoading.value = false;
@@ -81,18 +86,40 @@ const handleSure = () => {
 </script>
 
 <style lang="scss" scoped>
+@import "~/assets/css/tool.scss";
 .container {
-  width: 100%;
-  padding: 30px 20px;
+  padding: 30px 58px 80px;
+  background: #ffffff;
+  border-radius: 20px;
+  position: relative;
+  .title {
+    font-size: 38px;
+    font-family: Arial, Arial-Bold;
+    font-weight: 700;
+    text-align: center;
+    color: #1a1a1a;
+    > div {
+      width: 71px;
+      height: 6px;
+      background: linear-gradient(90deg, #719d59 2%, #479f82 98%);
+      border-radius: 3px;
+      margin: auto;
+    }
+    > span {
+      position: absolute;
+      right: 20px;
+      top: 15px;
+      cursor: pointer;
+    }
+  }
 
   .login-btn {
-    display: block;
-    width: 50%;
-    height: 50px;
-    color: #fff;
-    font-size: 18px;
+    width: 100%;
+    height: 58px;
+    background: linear-gradient(90deg, #60ab91, #84a86c);
     border-radius: 8px;
-    margin: 0 auto;
+    font-size: 18px;
+    margin-top: 10px;
 
     :deep(.n-button__content) {
       display: block;
@@ -104,4 +131,74 @@ const handleSure = () => {
     line-height: 32px;
   }
 }
+.n-form {
+  margin-top: 30px;
+}
+:deep(.n-form-item-blank) {
+  border-bottom: 1px solid #e6e6e6;
+}
+:deep(.n-form-item-label) {
+  color: #666666;
+  font-size: var(--size-14);
+  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+  line-height: var(--size-20);
+  padding: 10px 10px 10px 0;
+  border-bottom: 1px solid #e6e6e6;
+}
+:deep(.n-form-item-label__text) {
+  height: 30px;
+}
+:deep(.n-input-wrapper) {
+  font-size: var(--size-14);
+  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+  line-height: var(--size-20);
+  padding: 0px 0 10px;
+}
+:deep(.n-form-item-blank--error .n-input) {
+  --n-border-error: var(--size-1) solid transparent !important;
+  --n-border-focus-error: var(--size-1) solid transparent !important;
+  --n-border-hover-error: var(--size-1) solid transparent !important;
+  --n-box-shadow-focus-error: var(--size-1) solid transparent !important;
+}
+:deep(input::-ms-reveal) {
+  display: none;
+}
+@include responseTo("phone") {
+  .container {
+    padding: 10px 20px 30px;
+    .title {
+      font-size: 20px;
+      > div {
+        width: 30px;
+        height: 4px;
+        border-radius: 3px;
+      }
+    }
+    .n-form {
+      margin-top: 15px;
+      .icon {
+        height: 26px;
+        padding-right: 10px;
+        margin-right: 10px;
+        border-right: 1px solid #cccccc;
+      }
+      .icon1 {
+        height: 26px;
+        padding-right: 14px;
+        margin-right: 10px;
+        border-right: 1px solid #cccccc;
+      }
+      .icon2 {
+        height: 26px;
+        padding-right: 13px;
+        margin-right: 10px;
+        border-right: 1px solid #cccccc;
+      }
+    }
+    .login-btn {
+      height: 45px;
+      margin-top: 0;
+    }
+  }
+}
 </style>

components/Login/index.vue

@@ -1,23 +1,37 @@
 <template>
   <div class="container">
+    <div class="title">
+      Log in
+      <div></div>
+      <span @click="close()" class="iconfont icon-shanchu1"></span>
+    </div>
     <n-form ref="formRef" label-placement="left" :label-width="100" :model="form" :rules="rules" size="large" require-mark-placement="left">
       <n-form-item path="loginCode">
         <n-input v-model:value="form.loginCode" :placeholder="t('common.login.usernameTip')">
           <template #prefix>
-            <span class="bqfl-iconfont icon-yonghuming"></span>
+            <div class="icon">
+              <img src="@/assets/images/img18.png" alt="">
+            </div>
           </template>
         </n-input>
       </n-form-item>
       <n-form-item path="password">
         <n-input v-model:value="form.password" type="password" show-password-on="click" :placeholder="t('common.login.passwordTip')">
           <template #prefix>
-            <span class="bqfl-iconfont icon-mima"></span> </template></n-input>
-        <a href="#" class="forgot" @click="handleForgot"> {{t('common.login.forgetPassword')}}</a>
+            <div class="icon1">
+              <img src="@/assets/images/img19.png" alt="">
+            </div>
+          </template></n-input>
+        <div class="forgotBox">
+          <a href="#" class="forgot" @click="handleForgot"> {{t('common.login.forgetPassword')}}</a>
+        </div>
       </n-form-item>
       <n-form-item path="validCode">
         <n-input v-model:value="form.validCode" :placeholder="t('common.login.validCodeTip')">
           <template #prefix>
-            <span class="bqfl-iconfont icon-yanzhengma"></span>
+            <div class="icon1">
+              <img src="@/assets/images/img20.png" alt="">
+            </div>
           </template>
           <template #suffix>
             <img :src="getValidCodeImg" @click="refreshValidCodeImg" class="cursor-pointer" width="100" />
@@ -29,8 +43,8 @@
       {{ submitLoading ? t('common.login.submitting') : t('common.login.title') }}
     </n-button>
     <p class="register-btn">
-      {{t('common.login.noAccount')}}
-      <span @click="handleRegister">{{t('common.login.register')}}</span>
+      No account yet? Click to
+      <span @click="handleRegister">Register</span>
     </p>
   </div>
 </template>
@@ -125,37 +139,66 @@ const handleForgot = () => {
 const handleRegister = () => {
   emit("closeSginDialog", "register");
 };
+const close = () => {
+  emit("closeSginDialog", "success");
+};
 </script>
 
 <style lang="scss" scoped>
+@import "~/assets/css/tool.scss";
 .container {
-  width: 100%;
-  padding: 30px 20px;
-
+  padding: 20px 58px;
+  background: #ffffff;
+  border-radius: 20px;
+  position: relative;
+  .title {
+    font-size: 38px;
+    font-family: Arial, Arial-Bold;
+    font-weight: 700;
+    text-align: center;
+    color: #1a1a1a;
+    > div {
+      width: 71px;
+      height: 6px;
+      background: linear-gradient(90deg, #719d59 2%, #479f82 98%);
+      border-radius: 3px;
+      margin: auto;
+    }
+    > span {
+      position: absolute;
+      right: 20px;
+      top: 15px;
+      cursor: pointer;
+    }
+  }
   .login-btn {
     width: 100%;
-    height: 50px;
-    color: #fff;
-    font-size: 18px;
+    height: 58px;
+    background: linear-gradient(90deg, #60ab91, #84a86c);
     border-radius: 8px;
+    font-size: 18px;
+    margin-top: 10px;
   }
   .register-btn {
     font-size: 18px;
     color: #808080;
     text-align: center;
+    font-family: Arial, Arial-Regular;
 
     span {
-      color: #f0a226;
+      color: #61ab90;
       cursor: pointer;
     }
   }
-
-  .forgot {
+  .forgotBox {
     margin-left: 10px;
+    flex-shrink: 0;
+  }
+  .forgot {
     font-size: 14px;
     color: #00c2ff;
-    text-decoration: underline;
-    flex-shrink: 0;
+    // text-decoration: underline;
+    border-bottom: 1px solid #00c2ff;
   }
 
   .cursor-pointer {
@@ -166,4 +209,110 @@ const handleRegister = () => {
     display: none;
   }
 }
+.icon {
+  height: 26px;
+  padding-right: 18px;
+  margin-right: 18px;
+  border-right: 1px solid #cccccc;
+  img {
+    width: 26px;
+    height: 26px;
+  }
+}
+.icon1 {
+  height: 26px;
+  padding-right: 22px;
+  margin-right: 18px;
+  border-right: 1px solid #cccccc;
+  img {
+    width: 22px;
+    height: 26px;
+  }
+}
+.icon2 {
+  height: 26px;
+  padding-right: 21px;
+  margin-right: 18px;
+  border-right: 1px solid #cccccc;
+  img {
+    width: 23px;
+    height: 26px;
+  }
+}
+.n-form {
+  margin-top: 30px;
+}
+:deep(.n-form-item-blank) {
+  border-bottom: 1px solid #e6e6e6;
+}
+:deep(.n-form-item-label) {
+  color: #666666;
+  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+  line-height: var(--size-20);
+  padding: 0px 10px 10px 0;
+}
+:deep(.n-input-wrapper) {
+  font-size: var(--size-14);
+  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+  line-height: var(--size-20);
+  padding: 0px 0 10px;
+}
+:deep(.n-form-item-blank--error .n-input) {
+  --n-border-error: var(--size-1) solid transparent !important;
+  --n-border-focus-error: var(--size-1) solid transparent !important;
+  --n-border-hover-error: var(--size-1) solid transparent !important;
+  --n-box-shadow-focus-error: var(--size-1) solid transparent !important;
+}
+.area {
+  width: 100%;
+  :deep(.n-form-item-label),
+  :deep(.n-input-wrapper) {
+    border-bottom: none;
+  }
+  :deep(.n-input--textarea) {
+    background: #fafafa;
+    border-radius: var(--size-10);
+    padding: 0 var(--size-5);
+  }
+  :deep(.n-input.n-input--textarea.n-input--resizable .n-input-wrapper) {
+    min-height: var(--size-260);
+  }
+}
+@include responseTo("phone") {
+  .container {
+    padding: 10px 20px;
+    .title {
+      font-size: 20px;
+      > div {
+        width: 30px;
+        height: 4px;
+        border-radius: 3px;
+      }
+    }
+    .n-form {
+      margin-top: 15px;
+      .icon {
+        height: 26px;
+        padding-right: 10px;
+        margin-right: 10px;
+        border-right: 1px solid #cccccc;
+      }
+      .icon1 {
+        height: 26px;
+        padding-right: 14px;
+        margin-right: 10px;
+        border-right: 1px solid #cccccc;
+      }
+      .icon2 {
+        height: 26px;
+        padding-right: 13px;
+        margin-right: 10px;
+        border-right: 1px solid #cccccc;
+      }
+    }
+    .login-btn {
+      height: 45px;
+    }
+  }
+}
 </style>

components/Login/register.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="container">
-    <n-form ref="formRef" label-placement="left" :label-width="160" :model="form" :rules="rules" size="large" require-mark-placement="left">
+    <div class="title">
+      Register an account
+      <div></div>
+      <span @click="close()" class="iconfont icon-shanchu1"></span>
+    </div>
+    <n-form ref="formRef" label-placement="left" label-align="left" :model="form" :rules="rules" size="large" require-mark-placement="left">
       <n-form-item :label="t('common.register.username')+'：'" path="loginCode">
         <n-input v-model:value="form.loginCode" :placeholder="t('common.register.usernameTip')" />
       </n-form-item>
@@ -166,7 +171,9 @@ const handlePasswordInput = () => {
     confirmPasswordRef.value?.validate({ trigger: "password-input" });
   }
 };
-
+const close = () => {
+  emit("closeSginDialog", "success");
+};
 const handleRegister = () => {
   formRef.value?.validate(async (errors: any) => {
     if (!errors) {
@@ -189,26 +196,113 @@ const handleRegister = () => {
 </script>
 
 <style lang="scss" scoped>
+@import "~/assets/css/tool.scss";
 .container {
-  width: 100%;
-  padding: 30px 20px;
+  padding: 30px 58px 45px;
+  background: #ffffff;
+  border-radius: 20px;
+  position: relative;
+  .title {
+    font-size: 38px;
+    font-family: Arial, Arial-Bold;
+    font-weight: 700;
+    text-align: center;
+    color: #1a1a1a;
+    > div {
+      width: 71px;
+      height: 6px;
+      background: linear-gradient(90deg, #719d59 2%, #479f82 98%);
+      border-radius: 3px;
+      margin: auto;
+    }
+    > span {
+      position: absolute;
+      right: 20px;
+      top: 15px;
+      cursor: pointer;
+    }
+  }
 
   .login-btn {
-    display: block;
-    width: 50%;
-    height: 50px;
-    color: #fff;
-    font-size: 18px;
+    width: 100%;
+    height: 58px;
+    background: linear-gradient(90deg, #60ab91, #84a86c);
     border-radius: 8px;
-    margin: 0 auto;
+    font-size: 18px;
+    margin-top: 10px;
 
     :deep(.n-button__content) {
       display: block;
     }
   }
-
+  .n-form {
+    margin-top: 30px;
+  }
+  :deep(.n-form-item-blank) {
+    border-bottom: 1px solid #e6e6e6;
+  }
+  :deep(.n-form-item-label) {
+    color: #666666;
+    font-size: var(--size-14);
+    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+    line-height: var(--size-20);
+    padding: 10px 10px 10px 0;
+    border-bottom: 1px solid #e6e6e6;
+  }
+  :deep(.n-form-item-label__text) {
+    height: 30px;
+  }
+  :deep(.n-input-wrapper) {
+    font-size: var(--size-14);
+    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+    line-height: var(--size-20);
+    padding: 0px 0 10px;
+  }
+  :deep(.n-form-item-blank--error .n-input) {
+    --n-border-error: var(--size-1) solid transparent !important;
+    --n-border-focus-error: var(--size-1) solid transparent !important;
+    --n-border-hover-error: var(--size-1) solid transparent !important;
+    --n-box-shadow-focus-error: var(--size-1) solid transparent !important;
+  }
   :deep(input::-ms-reveal) {
     display: none;
   }
 }
+@include responseTo("phone") {
+  .container {
+    padding: 10px 20px;
+    .title {
+      font-size: 20px;
+      > div {
+        width: 30px;
+        height: 4px;
+        border-radius: 3px;
+      }
+    }
+    .n-form {
+      margin-top: 15px;
+      .icon {
+        height: 26px;
+        padding-right: 10px;
+        margin-right: 10px;
+        border-right: 1px solid #cccccc;
+      }
+      .icon1 {
+        height: 26px;
+        padding-right: 14px;
+        margin-right: 10px;
+        border-right: 1px solid #cccccc;
+      }
+      .icon2 {
+        height: 26px;
+        padding-right: 13px;
+        margin-right: 10px;
+        border-right: 1px solid #cccccc;
+      }
+    }
+    .login-btn {
+      height: 45px;
+    }
+  }
+}
 </style>

components/Login/updatePwd.vue

@@ -1,117 +0,0 @@
-<template>
-  <div class="container">
-    <n-form ref="formRef" label-placement="left" :label-width="100" :model="form" :rules="rules" size="large" require-mark-placement="left">
-      <n-form-item label="密码：" path="newPassword">
-        <n-input v-model:value="form.newPassword" @input="handlePasswordInput" type="password" show-password-on="click" placeholder="请输入密码" />
-      </n-form-item>
-      <n-form-item label="确认密码：" path="confirmNewPassword" ref="confirmPasswordRef">
-        <n-input v-model:value="form.confirmNewPassword" type="password" show-password-on="click" placeholder="请输入确认密码" />
-      </n-form-item>
-    </n-form>
-    <n-button class="login-btn" attr-type="button" type="info" color="#18A058" :disabled="submitLoading" @click="handleSure">
-      {{ submitLoading ? "提交中..." : "确认" }}
-    </n-button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import {
-  NForm,
-  NFormItem,
-  NInput,
-  NButton,
-  FormRules,
-  FormItemRule,
-  createDiscreteApi,
-} from "naive-ui";
-import { ref, reactive } from "vue";
-
-const emit = defineEmits(["closeSginDialog"]);
-
-const message = createDiscreteApi(["message"]);
-
-const formRef = ref();
-const submitLoading = ref(false);
-const confirmPasswordRef = ref();
-
-const form = reactive({
-  newPassword: "",
-  confirmNewPassword: "",
-});
-
-const confirmPasswordValidate = (
-  rule: FormItemRule,
-  value: string
-): boolean => {
-  return value && value == form.newPassword;
-};
-
-const rules: FormRules = {
-  newPassword: [
-    {
-      required: true,
-      message: "请输入密码",
-      trigger: ["input", "blur", "password-input"],
-    },
-  ],
-  confirmNewPassword: [
-    {
-      required: true,
-      message: "请输入密码",
-      trigger: ["input", "blur"],
-    },
-    {
-      required: true,
-      validator: confirmPasswordValidate,
-      message: "两次密码输入不一致",
-      trigger: ["blur", "password-input"],
-    },
-  ],
-};
-
-const handlePasswordInput = () => {
-  if (form.confirmNewPassword) {
-    confirmPasswordRef.value?.validate({ trigger: "password-input" });
-  }
-};
-
-const handleSure = () => {
-  formRef.value?.validate(async (errors: any) => {
-    if (!errors) {
-      submitLoading.value = true;
-      const params = JSON.parse(JSON.stringify(form));
-      params.newPassword = encryptByBase64(params.newPassword);
-      params.confirmNewPassword = encryptByBase64(params.confirmNewPassword);
-      try {
-        const { code } = await updatePwd_Api(params);
-        if (code === 200) {
-          message.message.success("修改成功");
-          emit("closeSginDialog", "success");
-        }
-      } catch (error) {}
-      submitLoading.value = false;
-    }
-  });
-};
-</script>
-
-<style lang="scss" scoped>
-.container {
-  width: 100%;
-  padding: 30px 20px;
-
-  .login-btn {
-    display: block;
-    width: 50%;
-    height: 50px;
-    color: #fff;
-    font-size: 18px;
-    border-radius: 8px;
-    margin: 0 auto;
-
-    :deep(.n-button__content) {
-      display: block;
-    }
-  }
-}
-</style>

components/connectUs/index.vue

@@ -2,15 +2,18 @@
   <div class="customBox">
     <div class="customBox_title">No Relevant Report Found? Please Contact Us</div>
     <div class="customBox_content">Need more information? Our team is ready to assist.Reach out today for expert support tailored to your needs.</div>
-    <a class="customBox_btn">Custom Reports</a>
+    <a class="customBox_btn" @click="handleContact()">Custom Reports</a>
     <img class="customBox_img" src="/assets/images/img1.png" alt="">
   </div>
-  <!-- <reportPop :showModal="showModal" :modalType="modalType" :type="submitType" @close="showModal=false" /> -->
+  <n-modal :show="demandShow" @close="demandShow = false" @esc="demandShow = false" @mask-click="demandShow = false" :style="'width: 720px'">
+    <demand @closeDialog="handleCloseDiag" />
+  </n-modal>
 </template>
 
 <script setup>
 import { ref, onMounted } from "vue";
 const showModal = ref(false);
+const demandShow = ref(false); // 需求页面
 const modalType = ref(1);
 const submitType = ref();
 const openModel = (index, type) => {
@@ -18,6 +21,15 @@ const openModel = (index, type) => {
   modalType.value = index;
   showModal.value = true;
 }
+// 联系我们
+function handleContact () {
+  demandShow.value = true;
+}
+
+// 关闭diag
+function handleCloseDiag () {
+  demandShow.value = false;
+}
 </script>
 
 <style lang='scss' scoped>

composables/useHttp.ts

@@ -58,7 +58,7 @@ class HttpRequest {
                 const userStore = useUserStore();
                 NMessage.message.error("登录状态过期，请重新登陆");
                 userStore.resetState()
-                navigateTo(userStore.getLang=="en-US"?'/en':'/');
+                // navigateTo(userStore.getLang=="en-US"?'/en':'/');
                 return;
               case 500:
               case 5002:

pages/contact/index.vue

@@ -250,24 +250,24 @@ function handleSubmit() {
   }
   .content {
     display: flex;
-    padding: 100px 145px 0;
+    padding: var(--size-100) var(--size-145) 0;
     .content_l {
-      width: 1055px;
-      padding: 30px 30px 60px;
+      width: var(--size-1055);
+      padding: var(--size-30) var(--size-30) var(--size-60);
       background: #ffffff;
       .content_l_title {
-        font-size: 48px;
+        font-size: var(--size-48);
         font-family: Arial, Arial-Bold;
         font-weight: 700;
         text-align: center;
         color: #1a1a1a;
       }
       .content_l_line {
-        width: 71px;
-        height: 4px;
+        width: var(--size-71);
+        height: var(--size-4);
         background: linear-gradient(90deg, #719d59 2%, #479f82 98%);
-        border-radius: 2px;
-        margin: 0 auto 20px;
+        border-radius: var(--size-2);
+        margin: 0 auto var(--size-20);
       }
       .n-form {
         .flex {
@@ -278,22 +278,22 @@ function handleSubmit() {
           }
         }
         :deep(.n-form-item-label) {
-          font-size: 18px;
+          font-size: var(--size-18);
           font-family: Microsoft YaHei, Microsoft YaHei-Regular;
           color: #666666;
-          line-height: 63px;
+          line-height: var(--size-63);
           border-bottom: 1px solid #e6e6e6;
         }
         :deep(.n-input-wrapper) {
-          font-size: 18px;
+          font-size: var(--size-18);
           font-family: Microsoft YaHei, Microsoft YaHei-Regular;
-          line-height: 63px;
-          border-bottom: 1px solid #e6e6e6;
+          line-height: var(--size-63);
+          border-bottom: var(--size-1) solid #e6e6e6;
         }
         :deep(.n-form-item-blank--error .n-input) {
-          --n-border-error: 1px solid transparent !important;
-          --n-border-focus-error: 1px solid transparent !important;
-          --n-border-hover-error: 1px solid transparent !important;
+          --n-border-error: var(--size-1) solid transparent !important;
+          --n-border-focus-error: var(--size-1) solid transparent !important;
+          --n-border-hover-error: var(--size-1) solid transparent !important;
         }
         .area {
           :deep(.n-form-item-label),
@@ -302,14 +302,14 @@ function handleSubmit() {
           }
           :deep(.n-input--textarea) {
             background: #fafafa;
-            border: 1px solid #e6e6e6;
-            border-radius: 10px;
-            padding: 0 5px;
+            border: var(--size-1) solid #e6e6e6;
+            border-radius: var(--size-10);
+            padding: 0 var(--size-5);
           }
           :deep(
               .n-input.n-input--textarea.n-input--resizable .n-input-wrapper
             ) {
-            min-height: 260px;
+            min-height: var(--size-260);
           }
         }
       }
@@ -334,25 +334,25 @@ function handleSubmit() {
       }
     }
     .content_r {
-      width: 573px;
-      height: 881px;
+      width: var(--size-573);
+      // height: var(--size-881);
       background: linear-gradient(180deg, #709d59, #449f86);
-      border-radius: 0px 10px 10px 0px;
-      padding: 50px 0;
+      border-radius: 0px var(--size-10) var(--size-10) 0px;
+      padding: var(--size-50) 0;
       .content_r_list {
         .content_r_item {
           text-align: center;
           img {
-            width: 124px;
-            height: 124px;
+            width: var(--size-124);
+            height: var(--size-124);
           }
           div {
-            width: 290px;
-            font-size: 16px;
+            width: var(--size-290);
+            font-size: var(--size-16);
             font-family: Arial, Arial-Regular;
             text-align: center;
             color: #ffffff;
-            margin: 0 auto 30px;
+            margin: 0 auto var(--size-30);
           }
         }
       }
@@ -378,9 +378,9 @@ function handleSubmit() {
       flex-direction: column;
       .content_l {
         width: 100%;
-        padding: 15px;
+        padding: var(--size-15);
         .content_l_title {
-          font-size: 20px;
+          font-size: var(--size-20);
         }
         .n-form {
           .flex {
@@ -390,22 +390,22 @@ function handleSubmit() {
             }
           }
           :deep(.n-form-item-label) {
-            font-size: 14px;
-            line-height: 40px;
+            font-size: var(--size-14);
+            line-height: var(--size-40);
           }
           :deep(.n-input-wrapper) {
-            font-size: 14px;
-            line-height: 40px;
+            font-size: var(--size-14);
+            line-height: var(--size-40);
           }
           .area {
             :deep(.n-input--textarea) {
-              border-radius: 10px;
-              padding: 0 5px;
+              border-radius: var(--size-10);
+              padding: 0 var(--size-5);
             }
             :deep(
                 .n-input.n-input--textarea.n-input--resizable .n-input-wrapper
               ) {
-              min-height: 100px;
+              min-height: var(--size-100);
             }
           }
         }
@@ -431,8 +431,8 @@ function handleSubmit() {
               }
             }
             img {
-              width: 60px;
-              height: 60px;
+              width: var(--size-60);
+              height: var(--size-60);
             }
           }
         }

pages/index.vue

@@ -196,7 +196,6 @@ const carouselList = ref(); // 轮播图数据
 const reports = ref(); //研究报告
 const markets = ref(); //市场资讯
 const reportDict = ref();
-const demandShow = ref(false); // 需求页面
 const keyword = ref(""); //关键字
 const userStore = useUserStore();
 const lang = ref();
@@ -261,15 +260,6 @@ const list2 = ref([
 const list3 = ref([
   [customersServed1, customersServed2, customersServed3, customersServed4, customersServed5, customersServed6]
 ])
-// 联系我们
-function handleContact () {
-  demandShow.value = true;
-}
-
-// 关闭diag
-function handleCloseDiag () {
-  demandShow.value = false;
-}
 
 //查询
 const router = useRouter();

pages/mine/index.vue

@@ -1,74 +1,53 @@
 <template>
   <div class="page" id="page">
-    <div class="top-title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
-      <div class="top-container">
-        <n-icon :component="MdContact" size="40" style="vertical-align: middle" />
-        <span>{{t('common.navigate.UserCenter')}}</span>
-      </div>
-    </div>
-
-    <div class="page-nav-container wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
-      <div class="nav-txt">
-        <n-breadcrumb separator=">">
-          <n-breadcrumb-item> <n-icon :component="MdHome" /><router-link to="/home">{{t('common.navigate.home')}}</router-link> </n-breadcrumb-item>
-          <n-breadcrumb-item> <n-icon :component="MdContact" />{{t('common.navigate.UserCenter')}} </n-breadcrumb-item>
-        </n-breadcrumb>
-      </div>
+    <div class="location">
+      <div class="location_l"> <span class="iconfont icon-weizhi"></span></div>
+      <div class="location_r"> Current Location ： Home <span class="iconfont icon-dkw_guanbi-"></span> <span>User Center</span></div>
     </div>
-
-    <div class="user-container">
-      <div class="container" v-if="pcShow">
-        <div class="user-main">
-          <div class="left">
-            <img src="@/assets/images/avatar.png" alt="avatar" />
-            <!-- <n-image width="96" src="@/assets/images/avatar.png">
-              <template #error>
-                <n-icon :size="96" :component="MdImage"></n-icon>
-              </template>
-            </n-image> -->
-            <div class="name">{{ user?.name }}</div>
-            <ul>
-              <template v-for="(item, index) in tabList" :key="item.value">
-                <li :class="{ 'active-li': currentTab.index == index }" v-if="!(item.value == 2&&lang!='zh-CN')" @click="handleTab(item, index)">
-                  {{ item.label }}
-                </li>
-              </template>
-            </ul>
+    <div class="content" v-if="pcShow">
+      <div>
+        <div class="content_l">
+          <div class="content_l_t">
+            <img src="@/assets/images/avatar.png" alt="">
+            <div>Linda</div>
           </div>
-          <div class="right">
-            <div class="sub-title">
-              <span>{{ currentTab.title }}</span>
-              <div class="search" v-if="currentTab.index == 1">
-                <n-input v-model:value="researchBriefReportId" clearable :placeholder="t('myInfo.orderSearch')">
-                  <template #prefix>
-                    <span class="bqfl-iconfont icon-sousuo color80"></span>
-                  </template>
-                </n-input>
-                <n-button class="btn" type="primary" color="#18A058" @click="handleSearch"> {{t('myInfo.search')}} </n-button>
-              </div>
+          <div class="content_l_b">
+            <div class="content_l_b_item" :class="{active:currentTab.index==0}" @click="handleTab(0)">
+              <span class="iconfont icon-wo_wodexinxi"></span>
+              My information
+            </div>
+            <div class="content_l_b_item" :class="{active:currentTab.index==1}" @click="handleTab(1)">
+              <span class="iconfont icon-wodedingdan-dingdan"></span>
+              My order
             </div>
-            <div class="content">
-              <UserInfo v-if="currentTab.index == 0"></UserInfo>
-              <OrderList ref="orderRef" v-if="currentTab.index == 1"></OrderList>
-              <DownList v-if="currentTab.index == 2&&lang=='zh-CN'"></DownList>
+            <div class="content_l_b_item" :class="{active:currentTab.index==2}" @click="handleTab(2)">
+              <span class="iconfont icon-wodexiazai"></span>
+              My download
             </div>
           </div>
         </div>
+        <div class="content_r">
+          <ClientOnly>
+            <UserInfo v-if="currentTab.index == 0"></UserInfo>
+            <OrderList ref="orderRef" v-if="currentTab.index == 1"></OrderList>
+            <DownList v-if="currentTab.index == 2"></DownList>
+          </ClientOnly>
+        </div>
       </div>
-      <div class="mobile-container" v-if="!pcShow">
-        <n-tabs justify-content="space-evenly" type="line" size="large" class="custom-tabs" :name="currentTab.index">
-          <n-tab-pane v-for="(item, index) in tabList" :name="index" :tab="item.label" :key="item.value">
-            <UserInfo isMobile v-if="index == 0"></UserInfo>
-            <OrderList ref="orderRef" isMobile v-if="index == 1"></OrderList>
-            <DownList isMobile v-if="index == 2&&lang=='zh-CN'"></DownList>
-          </n-tab-pane>
-        </n-tabs>
-      </div>
+    </div>
+    <div class="mobile-container" v-if="!pcShow">
+      <n-tabs justify-content="space-evenly" type="line" size="large" class="custom-tabs" :name="currentTab.index">
+        <n-tab-pane v-for="(item, index) in tabList" :name="index" :tab="item.label" :key="item.value">
+          <UserInfo isMobile v-if="index == 0"></UserInfo>
+          <OrderList ref="orderRef" isMobile v-if="index == 1"></OrderList>
+          <DownList isMobile v-if="index == 2"></DownList>
+        </n-tab-pane>
+      </n-tabs>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup>
+ <script lang="ts" setup>
 import { useI18n } from "#imports";
 import { ref, reactive, onMounted, computed, watch } from "vue";
 import {
@@ -98,17 +77,17 @@ const user = computed(() => userStore.getUserInfo);
 
 const tabList = reactive<object[]>([
   {
-    label: t('myInfo.myInformation'),
+    label: "My information",
     value: 0,
     name: "user",
   },
   {
-    label: t('myInfo.myOrders'),
+    label: "My order",
     value: 1,
     name: "order",
   },
   {
-    label: t('myInfo.myDownload'),
+    label: "My download",
     value: 2,
     name: "down",
   },
@@ -119,7 +98,7 @@ interface currentTabObj {
 }
 const currentTab = reactive<currentTabObj>({
   index: 0,
-  title: t('myInfo.myInformation'),
+  // title: t("myInfo.myInformation"),
 });
 
 const researchBriefReportId = ref("");
@@ -130,146 +109,144 @@ watch(
   () => route.params.active,
   (val) => {
     currentTab.index = val || 0;
-    currentTab.title = t('myInfo.myInformation');
+    currentTab.title = t("myInfo.myInformation");
   }
 );
 
-const handleTab = (item: any, index: number) => {
+const handleTab = (index: number) => {
   if (currentTab.index == index) {
     return false;
   }
   currentTab.index = index;
-  currentTab.title = item.label;
 };
 
 const handleSearch = () => {
   orderRef.value.searchData(researchBriefReportId.value);
 };
-// onMounted(async () => {
-// pcShow.value = !isMobile();
 isShow.value = true;
-currentTab.index = route.params.active || 0;
-currentTab.title = t('myInfo.myInformation');
-// });
+// currentTab.index = route.params.active || 0;
+currentTab.title = t("myInfo.myInformation");
+onMounted(() => {
+  pcShow.value = !isMobile();
+});
 </script>
 
-<style lang="scss">
-.user-container {
-  background: #ffffff;
-
-  .user-main {
+<style lang="scss" scoped>
+@import "~/assets/css/tool.scss";
+.page {
+  margin-top: var(--size-130);
+  .location {
     display: flex;
-    flex-wrap: wrap;
-    height: 800px;
-    border-radius: 16px;
-    box-shadow: 0 0 10px 10px #f3f3f3;
-
-    .left {
-      width: 250px;
-      height: 100%;
-      padding: 25px 0;
-      background: #f8f8f8;
-      border-radius: 16px 0px 0px 16px;
+    border-bottom: 1px solid #e6e6e6;
+    padding: 0 var(--size-160);
+    background: #ffffff;
+    .location_l {
+      width: var(--size-60);
+      height: var(--size-60);
+      background: #dcdcdc;
+      color: #383838;
+      font-size: var(--size-16);
       text-align: center;
-
-      .n-image {
-        border-radius: 50%;
-      }
-
-      .name {
-        margin-bottom: 35px;
-        font-size: 18px;
-        color: #1a1a1a;
-        line-height: 44px;
-      }
-
-      ul {
-        padding: 0;
-
-        li {
-          margin: 0;
-          list-style: none;
-          padding: 0;
-
-          p {
-            padding: 0;
-            margin: 0;
-          }
-        }
-      }
-
-      li {
-        position: relative;
-        height: 75px;
-        line-height: 75px;
-        cursor: pointer;
+      line-height: var(--size-60);
+      margin-right: var(--size-30);
+    }
+    .location_r {
+      font-size: var(--size-14);
+      font-family: Arial, Arial-Regular;
+      color: #666666;
+      line-height: var(--size-59);
+      span {
+        color: #639e57;
+        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
       }
-
-      .active-li {
-        color: #18a058;
-        font-weight: bold;
-        background-color: #fff;
-
-        &::before {
-          position: absolute;
-          top: 0;
-          left: 0;
-          content: "";
-          width: 6px;
-          height: 100%;
-          border-left: 6px solid #18a058;
-        }
+      .icon-dkw_guanbi- {
+        color: #666666;
+        font-size: var(--size-12);
       }
     }
-
-    .right {
-      flex: 1;
-      height: 100%;
-      padding: 50px 50px 50px 70px;
-
-      .sub-title {
-        display: flex;
-        padding-bottom: 15px;
-        font-size: 24px;
-        font-weight: bold;
-        color: #1a1a1a;
-        border-bottom: 1px solid #e6e6e6;
-      }
-
-      .search {
-        display: flex;
-        width: 500px;
-        height: 60px;
-        margin-left: auto;
-        border-radius: 8px;
-
-        .n-input {
-          height: 100%;
-          border-radius: 8px 0 0 8px;
-
-          .n-input__input-el {
-            height: 100%;
+  }
+  .content {
+    padding: 50px 175px;
+    > div {
+      background: #f4f7f9;
+      border-radius: 20px;
+      padding: 18px 20px;
+      display: flex;
+      .content_l {
+        .content_l_t {
+          width: 343px;
+          height: 220px;
+          background: linear-gradient(180deg, #60ab91, #84a86c);
+          border-radius: 20px;
+          text-align: center;
+          padding-top: 32px;
+          img {
+            width: 100px;
+            height: 100px;
+            background: rgba(0, 0, 0, 0);
+            border: 2px solid #ffffff;
+            border-radius: 50%;
+          }
+          > div {
+            font-size: 28px;
+            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+            text-align: center;
+            color: #ffffff;
+            line-height: 44px;
+            letter-spacing: 0.08px;
           }
         }
-
-        .btn {
-          width: 80px;
-          height: 60px;
-          border-radius: 0;
+        .content_l_b {
+          margin-top: 20px;
+          .content_l_b_item {
+            width: 343px;
+            height: 70px;
+            border-radius: 20px;
+            color: #1a1a1a;
+            line-height: 70px;
+            letter-spacing: 0.05px;
+            font-size: 18px;
+            padding-left: 63px;
+            cursor: pointer;
+            span {
+              display: inline-block;
+              margin-right: 15px;
+              font-size: 20px;
+              color: #1a1a1a;
+            }
+          }
+          .active {
+            background: linear-gradient(180deg, #60ab91, #84a86c);
+            color: #ffffff;
+            span {
+              color: #ffffff;
+            }
+          }
         }
       }
-
-      .content {
-        height: calc(100% - 75px);
-        padding-top: 30px;
+      .content_r {
+        flex: 1;
+        background: #ffffff;
+        border-radius: 20px;
+        margin-left: 45px;
+        padding: 30px 30px;
       }
     }
   }
-
-  .mobile-container {
-    .custom-tabs {
-      .n-tab-pane {
-        padding: 20px;
+}
+@include responseTo("phone") {
+  .page {
+    .location {
+      padding: 0;
+      .location_l {
+        margin-right: 15px;
+      }
+    }
+    .mobile-container {
+      .custom-tabs {
+        .n-tab-pane {
+          padding: 15px;
+        }
       }
     }
   }

pages/mine/modules/down.vue

@@ -1,20 +1,19 @@
 <template>
-  <div class="list-box" :class="{ 'mobile-down': isMobile }">
-    <template v-if="pageData.count">
-      <div class="items">
-        <div class="down-item" v-for="item in pageData.list" :key="item.id">
-          <span class="down-title" @click="toDetail(item)">{{
-            item?.report.title
-          }}</span>
-          <span class="down-file-type">下载文件类型：{{ item.fileName?.split(".")[1] }}</span>
+  <div class="list-box">
+    <div class="title">My download</div>
+    <div class="list">
+      <div class="item" v-for="(v,i) in 3" :key="i">
+        <img src="" alt="">
+        <div class="item_content">
+          <div class="item_content_title">
+            <img src="" alt="">
+            <div>
+              China Industrial Park Industry Market In-depth Research and Investment Strategy Planning Report 2024-2030
+            </div>
+          </div>
+          <div class="item_content_format"> Download file format： <span>PDF</span></div>
         </div>
       </div>
-      <div class="pagination">
-        <n-pagination :page="queryParams?.pageNo" :page-count="pageData?.count" :page-size="queryParams?.pageSize" size="large" :on-update-page="changePage" :page-slot="7" />
-      </div>
-    </template>
-    <div class="empty" v-else>
-      <n-empty description="暂无数据" size="huge"> </n-empty>
     </div>
   </div>
 </template>
@@ -69,76 +68,112 @@ const changePage = (page: number) => {
 </script>
 
 <style lang="scss" scoped>
+@import "~/assets/css/tool.scss";
 .list-box {
-  height: 100%;
-
-  .items {
-    height: calc(100% - 50px);
-    overflow: hidden;
-    overflow-y: scroll;
-  }
-
-  .pagination {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 50px;
-  }
-
-  .empty {
-    padding: 50px 0;
-  }
-}
-.down-item {
-  display: flex;
-  align-items: center;
-  padding: 30px 0 20px;
-  border-bottom: 1px dashed #e6e6e6;
-
-  &:first-child {
-    padding-top: 0;
-  }
-
-  .down-title {
-    flex: 1;
-    width: 0;
+  .title {
     font-size: 24px;
+    font-family: Arial, Arial-Bold;
+    font-weight: 700;
     color: #1a1a1a;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    cursor: pointer;
+    line-height: 44px;
+    padding-bottom: 7px;
+    border-bottom: 1px solid #e6e6e6;
   }
-
-  .down-file-type {
-    margin-left: 30px;
-    font-size: 16px;
-    color: #808080;
-    flex-shrink: 0;
+  .list {
+    margin-top: 45px;
+    .item {
+      padding: 30px 25px;
+      display: flex;
+      border: 1px solid #e6e6e6;
+      margin-bottom: 30px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      img {
+        width: 148px;
+        height: 216px;
+        object-fit: contain;
+      }
+      .item_content {
+        margin-left: 40px;
+        .item_content_title {
+          font-size: 21px;
+          font-family: Arial, Arial-Regular;
+          color: #1a1a1a;
+          line-height: 28px;
+          margin-top: 10px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          > img {
+            display: none;
+          }
+        }
+        .item_content_format {
+          display: flex;
+          font-size: 16px;
+          font-family: Arial, Arial-Regular;
+          color: #1a1a1a;
+          line-height: 44px;
+          letter-spacing: 0.05px;
+          span {
+            color: #808080;
+          }
+        }
+      }
+    }
   }
 }
-
-.mobile-down {
-  .down-item {
-    padding: 15px 0;
-
-    &:first-child {
-      padding-top: 0;
-    }
-
-    .down-title {
-      font-size: 18px;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: normal;
-    }
-
-    .down-file-type {
-      margin-left: 15px;
-      font-size: 14px;
+@include responseTo("phone") {
+  .list-box {
+    .list {
+      margin-top: 20px;
+      .item {
+        padding: 10px;
+        > img {
+          display: none;
+        }
+        .item_content {
+          padding: 10px;
+          margin: 0;
+          .item_content_title {
+            display: flex;
+            > div {
+              font-size: 18px;
+              line-height: 26px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 4;
+              -webkit-box-orient: vertical;
+            }
+            > img {
+              width: 74px;
+              height: 108px;
+              object-fit: contain;
+              margin-right: 10px;
+            }
+          }
+          .item_content_format {
+            font-size: 14px;
+          }
+          .item_content_amount {
+            font-size: 14px;
+            line-height: 30px;
+            span {
+              font-size: 26px;
+            }
+          }
+        }
+        .btnBox {
+          position: static;
+          width: 100%;
+          justify-content: center;
+          padding-bottom: 20px;
+        }
+      }
     }
   }
 }

pages/mine/modules/order.vue

@@ -1,107 +1,39 @@
 <template>
-  <div class="list-box" :class="{ 'mobile-order': isMobile }">
-    <template v-if="pageData.count">
-      <div class="items">
-        <div class="order-item" v-for="item in pageData.list" :key="item.id">
-          <div class="order-info">
-            <div class="order-left">
-              <div class="label label-num">
-                <span class="num">{{t('myInfo.orderNo')}}：</span>
-                <span>{{ item.orderNumber }}</span>
-              </div>
-              <div class="label">
-                <span class="time">{{t('myInfo.orderTime')}}：</span>
-                <span>{{ item.createDate }}</span>
-              </div>
-              <div class="label" v-if="userStore.getLang =='zh-CN'">
-                <span class="way">支付方式：</span>
-                <span v-if="item.payMethod == 'zfb' || item.payMethod == 'zfb_h5'">支付宝 {{ item.payMethod == "zfb" ? "PC端" : "H5端" }}</span>
-                <span v-if="item.payMethod == 'wx' || item.payMethod == 'wx_h5'">微信 {{ item.payMethod == "wx" ? "PC端" : "H5端" }}</span>
-              </div>
-              <div class="label">
-                <span class="time">{{ $t("myInfo.orderStatus") }}：</span>
-                <span>
-                  <span v-if="item.payStatus == 0">{{$t("myInfo.waitingPayment")}}</span>
-                  <span v-else-if="item.payStatus == 1">{{$t("myInfo.paymentSuccess")}}</span>
-                  <span v-else>{{ $t("myInfo.paymentFailed") }}</span>
-                </span>
+  <div class="list-box">
+    <div class="titleBox">
+      <div class="titleBox_l">My order</div>
+      <div class="titleBox_r">
+        <div class="titleBox_r_l">
+          <n-input v-model:value="keyword" type="text" class="custom-placeholder" clearable placeholder="Please enter your order number for inquiry" />
+        </div>
+        <div class="titleBox_r_r">
+          Search
+        </div>
+      </div>
+    </div>
+    <div class="list">
+      <div class="item" v-for="(v,i) in 3" :key="i">
+        <div class="item_title">Order Number：2145878541</div>
+        <div class="item_content">
+          <img src="" alt="">
+          <div>
+            <div class="item_content_title">
+              <img src="" alt="">
+              <div>
+                China Industrial Park Industry Market In-depth Research andInvestment Strategy Planning Report 2024-2030
               </div>
             </div>
-            <div class="order-right">
-              <span>{{t('myInfo.payAmount')}}：</span>
-              <span  v-if="userStore.getLang == 'en-US'">$</span>
-              <span class="price">{{ item.payPrice }}</span>
-              <span v-if="userStore.getLang == 'zh-CN'">元</span>
-            </div>
-          </div>
-          <div class="report">
-            <div class="report-title">{{ item.researchBriefReportTitle }}</div>
-            <div class="report-btns">
-              <n-button type="primary" color="#2683F0" @click="handleTools(item, 'pay')" v-if="item.payStatus == 0&&userStore.getLang == 'zh-CN'">
-                {{t('myInfo.toPay')}}
-              </n-button>
-              <n-button type="primary" color="#2683F0" @click="goPay(item)" v-if="item.payStatus == 0&&userStore.getLang == 'en-US'">
-                {{t('myInfo.toPay')}}
-              </n-button>
-              <n-button type="primary" color="#2683F0" @click="handleClosePay(item)" v-if="item.payStatus == 0">
-                {{t('myInfo.cancelPay')}}
-              </n-button>
-              <n-button type="primary" color="#2683F0" v-if="item.payStatus == 1&&userStore.getLang == 'en-US'&&!item.email" @click="openInpEmail(item)">
-                Check email
-              </n-button>
-              <n-button type="primary" v-if="userStore.getLang =='zh-CN'" color="#2683F0" @click="handleTools(item, 'pdf')">
-                PDF下载
-              </n-button>
-              <n-button type="primary" v-if="userStore.getLang =='zh-CN'" color="#2683F0" @click="handleTools(item, 'ppt')">
-                PPT下载
-              </n-button>
-            </div>
+            <div class="item_content_time">Order placement time：<span>December 21, 2014, 15:11</span></div>
+            <div class="item_content_method">Payment method：<span>Alipay payment</span></div>
+            <div class="item_content_amount">Payment amount：<span>$4.950.00</span></div>
           </div>
         </div>
+        <div class="btnBox">
+          <div class="blue">PDF download</div>
+          <div class="green">PPT Download</div>
+        </div>
       </div>
-      <div class="pagination">
-        <n-pagination :page="queryParams?.pageNo" :page-count="pageData?.count" :page-size="queryParams?.pageSize" size="large" :on-update-page="changePage" :page-slot="7" />
-      </div>
-    </template>
-    <div class="empty" v-else>
-      <n-empty :description="t('myInfo.noData')" size="huge"> </n-empty>
     </div>
-
-    <n-modal :show="payVisible" preset="dialog" :title="payTitle" :showIcon="false" :z-index="9" @close="payVisible = false" @esc="payVisible = false" @mask-click="payVisible = false" :class="{ 'login-dialog': isMobile }">
-      <div class="wxQRCode">
-        <h3>微信支付</h3>
-        <qrcode-vue :value="wxQRCode" size="200" level="H" render-as="svg" />
-        <p>请使用微信扫码支付</p>
-        <p v-if="payShow" style="color: red">支付状态请求中,请勿重复支付</p>
-      </div>
-    </n-modal>
-
-    <n-modal v-model:show="closePayVisible" preset="dialog" :title="t('myInfo.tip')" :showIcon="false" :content="t('myInfo.confirmCancelPayment')" positive-text="确认" negative-text="取消" :close-on-esc="false" :mask-closable="false" @positive-click="submitClosePayCallback" @negative-click="cancelClosePayCallback" :class="{ 'login-dialog': isMobile }" />
-
-    <n-spin class="load" :description="description" :show="spinShow" :delay="1000">
-      <div style="width: 150px"></div>
-    </n-spin>
-
-    <n-modal :show="emailShow" preset="dialog" title="Check email address" :showIcon="false" :close-on-esc="false" :mask-closable="false" @close="close" :class="{ 'login-dialog': !pcShow }">
-     <n-form  :model="model" :rules="rules" label-align="right" label-placement="left" label-width="auto" require-mark-placement="left">
-          <n-form-item label="Enter email address：" class="ms" path="email">
-            <n-input v-model:value="model.email" placeholder="email address" />
-          </n-form-item>
-          <n-form-item label="Confrm email address：" class="ms" path="affirmEmail">
-            <n-input v-model:value="model.affirmEmail" placeholder="email address" />
-          </n-form-item>
-          <n-form-item label="" class="ms">
-            <div class="tig">*Email addresses do not match</div>
-          </n-form-item>
-        </n-form>
-        <n-button class="login-btn" attr-type="button" type="info" color="#18A058" :disabled="submitLoading" @click="submitEmit()">
-         {{
-            submitLoading
-              ? $t("report.demand.submitting")
-              : $t("report.demand.submit")
-          }}
-      </n-button>
-    </n-modal>
   </div>
 </template>
 
@@ -144,27 +76,27 @@ const payTitle = ref<string>("");
 const count = ref(0);
 const timer = ref();
 const spinShow = ref(false);
-const description = ref(t('myInfo.loading'));
+const description = ref(t("myInfo.loading"));
 const payShow = ref(false);
 const closePayVisible = ref(false);
 const closePayId = ref(null);
-const emailShow=ref(false);
-const activeItem=ref();
+const emailShow = ref(false);
+const activeItem = ref();
 // const Message = createDiscreteApi(["message"]);
-const model=ref({
-  email:"",
-  affirmEmail:""
-})
+const model = ref({
+  email: "",
+  affirmEmail: "",
+});
 const openInpEmail = (item) => {
   activeItem.value = item;
   emailShow.value = true;
-}
+};
 const getList = async () => {
   spinShow.value = true;
-  description.value = t('myInfo.loading');
-   let apiFun = getMyOrder_Api;
+  description.value = t("myInfo.loading");
+  let apiFun = getMyOrder_Api;
   if (userStore.getLang != "zh-CN") {
-    apiFun = websiteUserResearchOrderList
+    apiFun = websiteUserResearchOrderList;
   }
   const { code, data } = await apiFun(queryParams);
   if (code === 200) {
@@ -177,24 +109,24 @@ const getList = async () => {
 const submitEmit = () => {
   if (model.value.affirmEmail != model.value.email) {
     message.message.error("The email addresses are inconsistent.");
-    return
+    return;
   }
   let param = {
     id: activeItem.value.id,
-    email: model.value.email
-  }
-  websiteUserResearchOrderUpdateEmail(param).then(res => {
+    email: model.value.email,
+  };
+  websiteUserResearchOrderUpdateEmail(param).then((res) => {
     if (res.code == 200) {
       message.message.success(t("report.demand.submitSuccess"));
       close();
-      queryParams.pageNo=1;
-      getList()
+      queryParams.pageNo = 1;
+      getList();
     }
-  })
-}
-const close=()=>{
-  emailShow.value=false
-}
+  });
+};
+const close = () => {
+  emailShow.value = false;
+};
 // onMounted(() => {
 getList();
 // });
@@ -220,7 +152,7 @@ const searchData = (val: string | any) => {
 };
 const goPay = (item) => {
   window.open(item.orderPayUrl);
-}
+};
 const message = createDiscreteApi(["message"]);
 
 // 下载
@@ -300,8 +232,8 @@ const handleClosePay = async (item) => {
 };
 
 const submitClosePayCallback = async () => {
-   let apiFun = closePay_Api;
-  if (userStore.getLang == 'en-US') {
+  let apiFun = closePay_Api;
+  if (userStore.getLang == "en-US") {
     // 英文  取消订单
     apiFun = websiteUserResearchCancelOrder;
   }
@@ -310,7 +242,7 @@ const submitClosePayCallback = async () => {
   });
   if (code === 200) {
     getList();
-    message.message.success(t('myInfo.PaymentOrderCancelledSuccessfully'));
+    message.message.success(t("myInfo.PaymentOrderCancelledSuccessfully"));
   }
   closePayId.value = null;
   closePayVisible.value = false;
@@ -334,193 +266,214 @@ defineExpose({
 </script>
 
 <style lang="scss"  scoped>
+@import "~/assets/css/tool.scss";
 .list-box {
-  height: 100%;
-
-  .items {
-    height: calc(100% - 50px);
-    overflow: hidden;
-    overflow-y: scroll;
-  }
-
-  .pagination {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 50px;
-  }
-
-  .empty {
-    padding: 50px 0;
-  }
-}
-.order-item {
-  margin-bottom: 30px;
-  background-color: #ffffff;
-  border: 1px solid #6ac796;
-
-  .order-info {
+  .titleBox {
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    padding: 20px 30px;
-    background-color: #e6fff2;
-    font-size: 16px;
-    color: #808080;
-
-    .order-left {
-      .label-num {
-        font-weight: bold;
-        color: #18a058;
-      }
-
-      .label {
-        .time,
-        .way {
-          color: #1a1a1a;
+    padding-bottom: 7px;
+    border-bottom: 1px solid #e6e6e6;
+    .titleBox_l {
+      font-size: 24px;
+      font-family: Arial, Arial-Bold;
+      font-weight: 700;
+      color: #1a1a1a;
+      line-height: 44px;
+    }
+    .titleBox_r {
+      display: flex;
+      align-items: center;
+      width: 500px;
+      height: var(--size-44);
+      background: #f5f5f5;
+      border-radius: 8px;
+      overflow: hidden;
+      .titleBox_r_l {
+        flex-grow: 1;
+        .n-input {
+          --n-height: var(--size-26) !important;
+          line-height: var(--size-26) !important;
+          background: #f5f5f5 !important;
+          font-size: 14px !important;
         }
       }
-    }
-    .order-right {
-      .price {
-        font-size: 30px;
-        color: #666666;
+      .titleBox_r_r {
+        width: var(--size-105);
+        font-size: var(--size-16);
+        color: #ffffff;
+        text-align: center;
+        height: var(--size-44);
+        background: linear-gradient(0deg, #7b9c4f 0%, #2da19d 100%), #1a1a1a;
+        line-height: var(--size-44);
+        cursor: pointer;
       }
     }
   }
-
-  .report {
-    padding: 30px;
-    padding-bottom: 50px;
-    font-size: 24px;
-    color: #1a1a1a;
-
-    .report-title {
-      margin-bottom: 20px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .report-btns {
-      .n-button {
-        width: 140px;
-        height: 50px;
-        margin-right: 20px;
-        font-size: 18px;
-        border-radius: 8px;
+  .list {
+    margin-top: 45px;
+    .item {
+      border: 1px solid #e6e6e6;
+      position: relative;
+      margin-bottom: 30px;
+      &:last-child {
+        margin-bottom: 0;
       }
-    }
-  }
-}
-
-.mobile-order {
-  .order-item {
-    margin-bottom: 15px;
-
-    .order-info {
-      padding: 10px 15px;
-      font-size: 14px;
-
-      .order-right {
-        .price {
-          font-size: 18px;
-        }
+      .item_title {
+        font-size: 20px;
+        font-family: Arial, Arial-Bold;
+        font-weight: 700;
+        text-align: left;
+        color: #1a1a1a;
+        line-height: 44px;
+        letter-spacing: 0.06px;
+        padding: 14px 25px;
+        background: #f5f5f5;
       }
-    }
-
-    .report {
-      padding: 15px;
-      padding-bottom: 20px;
-      font-size: 18px;
-
-      .report-title {
-        margin-bottom: 10px;
+      .item_content {
+        padding: 20px 25px 23px;
+        display: flex;
+        align-items: center;
+        > img {
+          width: 148px;
+          height: 216px;
+          object-fit: contain;
+        }
+        > div {
+          margin-left: 40px;
+          .item_content_title {
+            font-size: 21px;
+            font-family: Arial, Arial-Regular;
+            color: #1a1a1a;
+            line-height: 28px;
+            img {
+              display: none;
+            }
+          }
+          .item_content_time,
+          .item_content_method {
+            display: flex;
+            font-size: 16px;
+            font-family: Arial, Arial-Regular;
+            color: #1a1a1a;
+            letter-spacing: 0.05px;
+            span {
+              color: #808080;
+            }
+          }
+          .item_content_time {
+            margin: 20px 0 0;
+          }
+          .item_content_method {
+            margin: 6px 0 10px;
+          }
+          .item_content_amount {
+            display: flex;
+            font-size: 16px;
+            font-family: Arial, Arial-Regular;
+            color: #1a1a1a;
+            line-height: 44px;
+            letter-spacing: 0.05px;
+            align-items: baseline;
+            span {
+              font-size: 30px;
+              color: #ee001f;
+            }
+          }
+        }
       }
-
-      .report-btns {
-        :deep(.n-button) {
-          width: 90px;
-          height: 45px;
-          margin-right: 10px;
-          margin-bottom: 10px;
+      .btnBox {
+        display: flex;
+        position: absolute;
+        right: 20px;
+        bottom: 45px;
+        > div {
+          width: 144px;
+          height: 48px;
+          border-radius: 8px;
           font-size: 14px;
-          border-radius: 4px;
+          font-family: Arial, Arial-Regular;
+          text-align: center;
+          color: #ffffff;
+          line-height: 48px;
+          margin-right: 14px;
+          cursor: pointer;
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+        .blue {
+          background: #60ac92;
+        }
+        .green {
+          background: #84a86c;
         }
       }
     }
   }
 }
-
-.login-dialog.n-dialog {
-  min-width: auto;
-
-  padding-top: 20px;
-  border-radius: 10px;
-
-  .n-dialog__title {
-    font-size: 18px;
-  }
-
-  .n-dialog__content {
-    .container {
-      padding: 20px 10px;
-
-      .login-btn {
-        height: 45px;
+@include responseTo("phone") {
+  .list-box {
+    .titleBox {
+      padding-bottom: 20px;
+      display: block;
+      .titleBox_r {
+        width: 100%;
       }
     }
-  }
-}
-
-.login-dialog .n-dialog {
-  min-width: auto;
-
-  padding-top: 20px;
-  border-radius: 10px;
-
-  .n-dialog__title {
-    font-size: 18px;
-  }
-
-  .n-dialog__content {
-    .container {
-      padding: 20px 10px;
-
-      .login-btn {
-        height: 45px;
-      }
-
-      .n-form {
-        .n-form-item {
-          .n-form-item-label {
-            width: 85px !important;
-            font-size: 12px;
+    .list {
+      margin-top: 20px;
+      .item {
+        .item_title {
+          padding: 10px 15px;
+          font-size: 18px;
+          line-height: 24px;
+        }
+        .item_content {
+          padding: 10px;
+          > img {
+            display: none;
           }
-
-          .n-form-item-feedback-wrapper {
-            min-height: 10px;
+          > div {
+            margin: 0;
+            .item_content_title {
+              display: flex;
+              > div {
+                font-size: 18px;
+                line-height: 26px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 4;
+                -webkit-box-orient: vertical;
+              }
+              > img {
+                width: 74px;
+                height: 108px;
+                object-fit: contain;
+                margin-right: 10px;
+              }
+            }
+            .item_content_time,
+            .item_content_method {
+              font-size: 14px;
+            }
+            .item_content_amount {
+              font-size: 14px;
+              line-height: 30px;
+              span {
+                font-size: 26px;
+              }
+            }
           }
         }
+        .btnBox {
+          position: static;
+          width: 100%;
+          justify-content: center;
+          padding-bottom: 20px;
+        }
       }
     }
   }
-}
- .login-btn {
-    display: block;
-    width: 50%;
-    height: 50px;
-    color: #fff;
-    font-size: 18px;
-    border-radius: 8px;
-    margin: 0 auto;
-    :deep(.n-button__content) {
-      display: block;
-    }
-  }
-  .tig {
-  font-size: 16px;
-  color: #18A058;
-  margin-left:205px;
 }
 </style>

pages/mine/modules/update-info.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="container">
-    <n-form ref="formRef" label-placement="left" :label-width="140" :model="form" :rules="rules" size="large" require-mark-placement="left">
+    <div class="title">
+      Edit Information
+      <div></div>
+    </div>
+    <n-form ref="formRef" label-placement="left" label-align="left" :model="form" :rules="rules" size="large" require-mark-placement="left">
       <n-form-item :label="t('reportPop.phone')+'：'" path="contact">
         <n-input v-model:value="form.contact" type="number" :placeholder="t('reportPop.phonePlaceholder')" />
       </n-form-item>
@@ -52,7 +56,7 @@ const rules: FormRules = {
   contact: [
     {
       required: true,
-      message: t('reportPop.phoneRequired'),
+      message: t("reportPop.phoneRequired"),
       trigger: ["input", "blur"],
     },
   ],
@@ -64,7 +68,7 @@ const handleSure = () => {
       try {
         const { code } = await updateInfo_Api(form);
         if (code === 200) {
-          message.message.success(t('reportPop.submitSuccess'));
+          message.message.success(t("reportPop.submitSuccess"));
           emit("closeSginDialog", "success");
         }
       } catch (error) {}
@@ -81,22 +85,68 @@ const message = createDiscreteApi(["message"]);
 </script>
 
 <style lang="scss" scoped>
+@import "~/assets/css/tool.scss";
 .container {
-  width: 100%;
-  padding: 30px 20px;
-
+  padding: 30px 58px 45px;
+  background: #ffffff;
+  border-radius: 20px;
+  .title {
+    font-size: 38px;
+    font-family: Arial, Arial-Bold;
+    font-weight: 700;
+    text-align: center;
+    color: #1a1a1a;
+    > div {
+      width: 71px;
+      height: 6px;
+      background: linear-gradient(90deg, #719d59 2%, #479f82 98%);
+      border-radius: 3px;
+      margin: auto;
+    }
+  }
   .login-btn {
-    display: block;
-    width: 50%;
-    height: 50px;
-    color: #fff;
-    font-size: 18px;
+    width: 100%;
+    height: 58px;
+    background: linear-gradient(90deg, #60ab91, #84a86c);
     border-radius: 8px;
-    margin: 0 auto;
+    font-size: 18px;
+    margin-top: 10px;
 
     :deep(.n-button__content) {
       display: block;
     }
   }
+  .n-form {
+    margin-top: 30px;
+  }
+  :deep(.n-form-item-blank) {
+    border-bottom: 1px solid #e6e6e6;
+  }
+  :deep(.n-form-item-label) {
+    color: #666666;
+    font-size: var(--size-14);
+    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+    line-height: var(--size-20);
+    padding: 10px 10px 10px 0;
+    border-bottom: 1px solid #e6e6e6;
+  }
+  :deep(.n-form-item-label__text) {
+    height: 30px;
+  }
+  :deep(.n-input-wrapper) {
+    font-size: var(--size-14);
+    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+    line-height: var(--size-20);
+    padding: 0px 0 10px;
+  }
+  :deep(.n-form-item-blank--error .n-input) {
+    --n-border-error: var(--size-1) solid transparent !important;
+    --n-border-focus-error: var(--size-1) solid transparent !important;
+    --n-border-hover-error: var(--size-1) solid transparent !important;
+    --n-box-shadow-focus-error: var(--size-1) solid transparent !important;
+  }
+  :deep(input::-ms-reveal) {
+    display: none;
+  }
 }
 </style>

pages/mine/updatePwd.vue

@@ -1,17 +1,20 @@
 <template>
-  <div class="page">
+  <div class="container">
+    <div class="title">
+      Change the password
+      <div></div>
+    </div>
     <div class="form" :class="{ 'mobile-form': !pcShow }">
-      <div class="title">修改密码</div>
-      <n-form ref="formRef" label-placement="left" :label-width="100" :model="form" :rules="rules" size="large" require-mark-placement="left">
-        <n-form-item label="密码：" path="newPassword">
-          <n-input v-model:value="form.newPassword" @input="handlePasswordInput" type="password" show-password-on="click" placeholder="请输入密码" />
+      <n-form ref="formRef" label-placement="left" label-align="left" :model="form" :rules="rules" size="large" require-mark-placement="left">
+        <n-form-item label="Password：" path="newPassword">
+          <n-input v-model:value="form.newPassword" @input="handlePasswordInput" type="password" show-password-on="click" placeholder="Please enter the password" />
         </n-form-item>
-        <n-form-item label="确认密码：" path="confirmNewPassword" ref="confirmPasswordRef">
-          <n-input v-model:value="form.confirmNewPassword" type="password" show-password-on="click" placeholder="请输入确认密码" />
+        <n-form-item label="Confirmpassword：" path="confirmNewPassword" ref="confirmPasswordRef">
+          <n-input v-model:value="form.confirmNewPassword" type="password" show-password-on="click" placeholder="Please confirm to enter the password" />
         </n-form-item>
       </n-form>
       <n-button class="login-btn" attr-type="button" type="info" color="#18A058" @click="handleSure">
-        {{ submitLoading ? "提交中..." : "确认" }}
+        {{ submitLoading ? "Checking" : "Confirm" }}
       </n-button>
     </div>
   </div>
@@ -20,12 +23,12 @@
 <script lang="ts" setup>
 import { ref, reactive, onMounted } from "vue";
 import {
-  NForm,
-  NFormItem,
-  NInput,
-  NButton,
-  FormRules,
-  FormItemRule,
+  // NForm,
+  // NFormItem,
+  // NInput,
+  // NButton,
+  // FormRules,
+  // FormItemRule,
   createDiscreteApi,
 } from "naive-ui";
 import { useRouter, useRoute } from "vue-router";
@@ -132,36 +135,33 @@ const handleUrl = () => {
 </script>
 
 <style lang="scss" scoped>
-.page {
-  background-color: #fff;
-
+.container {
+  padding: 30px 58px 55px;
+  background: #ffffff;
+  border-radius: 20px;
   .title {
+    font-size: 38px;
+    font-family: Arial, Arial-Bold;
+    font-weight: 700;
     text-align: center;
-    margin-bottom: 32px;
-    font-size: 24px;
-    font-weight: bold;
     color: #1a1a1a;
+    > div {
+      width: 71px;
+      height: 6px;
+      background: linear-gradient(90deg, #719d59 2%, #479f82 98%);
+      border-radius: 3px;
+      margin: auto;
+    }
   }
 
   .form {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    width: 550px;
-    padding: 50px 70px;
-    transform: translate(-50%, -50%);
-    background: #ffffff;
-    border-radius: 20px;
-    box-shadow: 0 0 8px 8px #e1e1e1;
-
     .login-btn {
-      display: block;
-      width: 50%;
-      height: 50px;
-      color: #fff;
-      font-size: 18px;
+      width: 100%;
+      height: 58px;
+      background: linear-gradient(90deg, #60ab91, #84a86c);
       border-radius: 8px;
-      margin: 0 auto;
+      font-size: 18px;
+      margin-top: 10px;
 
       :deep(.n-button__content) {
         display: block;
@@ -184,5 +184,37 @@ const handleUrl = () => {
   //     border-radius: 8px;
   //   }
   // }
+  .n-form {
+    margin-top: 30px;
+  }
+  :deep(.n-form-item-blank) {
+    border-bottom: 1px solid #e6e6e6;
+  }
+  :deep(.n-form-item-label) {
+    color: #666666;
+    font-size: var(--size-14);
+    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+    line-height: var(--size-20);
+    padding: 10px 10px 10px 0;
+    border-bottom: 1px solid #e6e6e6;
+  }
+  :deep(.n-form-item-label__text) {
+    height: 30px;
+  }
+  :deep(.n-input-wrapper) {
+    font-size: var(--size-14);
+    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+    line-height: var(--size-20);
+    padding: 0px 0 10px;
+  }
+  :deep(.n-form-item-blank--error .n-input) {
+    --n-border-error: var(--size-1) solid transparent !important;
+    --n-border-focus-error: var(--size-1) solid transparent !important;
+    --n-border-hover-error: var(--size-1) solid transparent !important;
+    --n-box-shadow-focus-error: var(--size-1) solid transparent !important;
+  }
+  :deep(input::-ms-reveal) {
+    display: none;
+  }
 }
 </style>

pages/mine/modules/user-info.vue

@@ -1,45 +1,44 @@
 <template>
   <div class="user-box" :class="{ 'mobile-user': isMobile }">
-    <div class="user-info">
-      <div class="label">{{t('myInfo.nickname')}}：</div>
-      <div class="label-info">{{ user.name }}</div>
-    </div>
-    <div class="user-info">
-      <div class="label">{{t('myInfo.phone')}}：</div>
-      <div class="label-info">
-        {{ user.contact }}
-        <span class="bqfl-iconfont icon-xiugai cursor ml5 f16" @click="handleEdit('info')">{{t('myInfo.modify')}}</span>
+    <div class="title">Basic information</div>
+    <div class="formBox">
+      <div class="item">
+        <div class="label">Nickname：</div>
+        <div class="val">Linda</div>
       </div>
-    </div>
-    <div class="user-info">
-      <div class="label">{{t('common.register.password')}}：</div>
-      <div class="label-info">
-        <span class="bqfl-iconfont icon-xiugai cursor ml5 f16" @click="handleEdit('password')">{{t('myInfo.modify')}}</span>
+      <div class="item">
+        <div class="label">Mobile phone number：</div>
+        <div class="val">18525462514</div>
+        <span class="iconfont icon-sousuo" @click="handleEdit('info')"></span>
       </div>
-    </div>
-    <div class="user-info">
-      <div class="label">{{t('myInfo.companyName')}}：</div>
-      <div class="label-info">
-        {{ user.companyName || "--" }}
-        <span class="bqfl-iconfont icon-xiugai cursor ml5 f16" @click="handleEdit('info')">{{t('myInfo.modify')}}</span>
+      <div class="item">
+        <div class="label">Change password：</div>
+        <!-- <div class="val"></div> -->
+        <span class="iconfont icon-sousuo" @click="handleEdit('password')"></span>
       </div>
-    </div>
-    <div class="user-info">
-      <div class="label">{{t('myInfo.position')}}：</div>
-      <div class="label-info">
-        {{ user.addr || "--" }}
-        <span class="bqfl-iconfont icon-xiugai cursor ml5 f16" @click="handleEdit('info')">{{t('myInfo.modify')}}</span>
+      <div class="item">
+        <div class="label">Company name：</div>
+        <div class="val">Wuhan Baijian Fanglue Information Consulting Co., LTD</div>
+        <span class="iconfont icon-sousuo" @click="handleEdit('info')"></span>
       </div>
-    </div>
-    <div class="user-info">
-      <div class="label">{{t('myInfo.email')}}：</div>
-      <div class="label-info">
-        {{ user.email }}
-        <span class="bqfl-iconfont icon-xiugai cursor ml5 f16" @click="handleEdit('info')">{{t('myInfo.modify')}}</span>
+      <div class="item">
+        <div class="label">Company position：</div>
+        <div class="val">Sales Manager</div>
+        <span class="iconfont icon-sousuo" @click="handleEdit('info')"></span>
+      </div>
+      <div class="item">
+        <div class="label">Email address：</div>
+        <div class="val">12454871456@163com</div>
+        <span class="iconfont icon-sousuo" @click="handleEdit('info')"></span>
+      </div>
+      <div class="item">
+        <div class="label">Contact number：</div>
+        <div class="val">13512458745</div>
+        <span class="iconfont icon-sousuo" @click="handleEdit('info')"></span>
       </div>
     </div>
   </div>
-  <n-modal :show="editVisible" preset="dialog" :title="editTitle" :showIcon="false" :close-on-esc="false" :mask-closable="false" @close="editVisible = false" :class="{ 'login-dialog': isMobile }">
+  <n-modal :show="editVisible" :title="editTitle" :showIcon="false" :close-on-esc="false" :mask-closable="false" @esc="editVisible = false" @mask-click="editVisible = false" @close="editVisible = false" class="modalCls" :class="{ 'login-dialog': isMobile }">
     <updatePwd v-if="editType == 'password'" @closeSginDialog="closeSginDialog"></updatePwd>
     <updateInfo :info="user" v-if="editType == 'info'" @closeSginDialog="closeSginDialog"></updateInfo>
   </n-modal>
@@ -50,6 +49,7 @@ import { ref, reactive, onMounted } from "vue";
 import { createDiscreteApi } from "naive-ui";
 import { set } from "~/node_modules/nuxt/dist/app/compat/capi";
 import updateInfo from "./update-info.vue";
+import updatePwd from "./updatePwd.vue";
 import { useI18n } from "#imports";
 const message = createDiscreteApi(["message"]);
 const { t } = useI18n();
@@ -62,7 +62,7 @@ const props = defineProps({
 
 const user = ref({});
 const editVisible = ref(false);
-const editTitle = ref(t('myInfo.modify'));
+const editTitle = ref(t("myInfo.modify"));
 const editType = ref("password");
 
 const getUser = async () => {
@@ -76,9 +76,9 @@ const handleEdit = (type: string) => {
   editType.value = type;
   editVisible.value = true;
   if (type == "password") {
-    editTitle.value = t('myInfo.password');
+    editTitle.value = t("myInfo.password");
   } else {
-    editTitle.value = t('reportPop.title');
+    editTitle.value = t("reportPop.title");
   }
 };
 
@@ -91,76 +91,81 @@ getUser();
 </script>
 
 <style lang="scss" scoped>
+@import "~/assets/css/tool.scss";
 .user-box {
   height: 100%;
-
-  .user-info {
-    display: flex;
-    font-size: 16px;
+  .title {
+    font-size: 24px;
+    font-family: Arial, Arial-Bold;
+    font-weight: 700;
     color: #1a1a1a;
     line-height: 44px;
-
-    .label {
-      display: inline-block;
-      width: 160px;
-      text-align: right;
-    }
-
-    .label-info {
-      color: #808080;
-    }
+    padding-bottom: 7px;
+    border-bottom: 1px solid #e6e6e6;
   }
-}
-
-.mobile-user.user-box {
-  .user-info {
-    .label {
-      text-align: left;
+  .formBox {
+    padding-bottom: 150px;
+    .item {
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #f5f5f5;
+      margin-bottom: 10px;
+      .label {
+        font-size: 18px;
+        font-family: Arial, Arial-Regular;
+        color: #666666;
+        line-height: 63px;
+      }
+      .val {
+        font-size: 18px;
+        font-family: Arial, Arial-Regular;
+        color: #1a1a1a;
+        line-height: 63px;
+      }
+      .iconfont {
+        color: #00b0fd;
+        display: inline-block;
+        margin-left: 20px;
+        font-size: 18px;
+        cursor: pointer;
+      }
     }
   }
 }
-
-.n-dialog {
-  min-width: 550px;
-  padding-top: 48px;
-  border-radius: 20px;
-
-  .n-dialog__title {
-    display: block;
-    font-size: 24px;
-    color: #1a1a1a;
-    font-weight: bold;
-    text-align: center;
-  }
+.modalCls {
+  width: var(--size-720) !important;
 }
 
-.login-dialog.n-dialog {
-  min-width: auto;
-
-  padding-top: 20px;
-  border-radius: 10px;
-
-  .n-dialog__title {
-    font-size: 18px;
-  }
-
-  .n-dialog__content {
-    .container {
-      padding: 20px 10px;
-
-      .login-btn {
-        height: 45px;
-      }
-
-      .n-form {
-        .n-form-item {
-          .n-form-item-label {
-            width: 85px !important;
-            font-size: 12px;
-          }
-          .n-form-item-feedback-wrapper {
-            min-height: 10px;
-          }
+@include responseTo("phone") {
+  .user-box {
+    .formBox {
+      padding-bottom: 30px;
+      margin-top: 15px;
+      .item {
+        align-items: baseline;
+        border-bottom: 1px solid #f5f5f5;
+        margin-bottom: 10px;
+        .label {
+          font-size: 14px;
+          font-family: Arial, Arial-Regular;
+          color: #666666;
+          line-height: 30px;
+          flex-shrink: 0;
+          padding-bottom: 10px;
+        }
+        .val {
+          font-size: 14px;
+          font-family: Arial, Arial-Regular;
+          color: #1a1a1a;
+          line-height: 30px;
+          padding-bottom: 10px;
+        }
+        .iconfont {
+          color: #00b0fd;
+          display: inline-block;
+          margin-left: 20px;
+          font-size: 14px;
+          cursor: pointer;
         }
       }
     }