feat: pc端seo登录弹窗添加注册引导

plugins/login-auth/src/views/Layout.vue

@@ -36,18 +36,32 @@ const activeComponentName = computed(() => {
 </script>
 <template>
   <div class="login-auth-group" :class="tabActiveClassName">
-    <h2 v-if="activeComponentName === 'setPass'" class="login-auth--title">设置登录密码</h2>
-    <h2 v-else class="login-auth--title"><span class="highlight-text">免费</span>查询招标采购信息，对接<span class="highlight-text">项目联系人</span></h2>
+    <h2 v-if="activeComponentName === 'setPass'" class="login-auth--title">
+      设置登录密码
+    </h2>
+    <h2 v-else class="login-auth--title">
+      <span class="highlight-text">免费</span>查询招标采购信息，对接<span
+        class="highlight-text"
+        >项目联系人</span
+      >
+    </h2>
     <div class="login-auth--main flex flex-row justify-center">
       <!--  左侧广告区域 -->
       <!-- <div class="login-auth--left" v-if="adImg">
         <img alt="登录注册" :src="adImg" />
       </div> -->
       <!-- 微信扫码登录 -->
-      <div v-if="activeComponentName === 'login' || tabActive === 'login-wx'" class="login-auth--left" :class="{'no-margin': tabActive === 'login-wx'}">
+      <div
+        v-if="activeComponentName === 'login' || tabActive === 'login-wx'"
+        class="login-auth--left"
+        :class="{ 'no-margin': tabActive === 'login-wx' }"
+      >
         <wx></wx>
       </div>
-      <div class="login-auth--right" :class="{'margin-auto': activeComponentName === 'setPass'}">
+      <div
+        class="login-auth--right"
+        :class="{ 'margin-auto': activeComponentName === 'setPass' }"
+      >
         <!--  公共Logo & Close  -->
         <div class="login-auth--top">
           <!-- <img
@@ -61,7 +75,9 @@ const activeComponentName = computed(() => {
       </div>
     </div>
     <!-- 登录提示（自动登录 & 协议政策） -->
-    <loginTips v-if="activeComponentName === 'login' || tabActive === 'login-wx'"></loginTips>
+    <loginTips
+      v-if="activeComponentName === 'login' || tabActive === 'login-wx'"
+    ></loginTips>
   </div>
 </template>
 
@@ -98,26 +114,30 @@ const activeComponentName = computed(() => {
     overflow: hidden;
     box-sizing: border-box;
   }
-  &--title{
+  &--title {
     padding: 40px 0 20px;
     text-align: center;
     font-size: 24px;
     line-height: 36px;
-    background: linear-gradient(to bottom, rgba(135, 223, 234, 0.24), rgba(135, 223, 234, 0));
+    background: linear-gradient(
+      to bottom,
+      rgba(135, 223, 234, 0.24),
+      rgba(135, 223, 234, 0)
+    );
   }
-  &--main{
+  &--main {
     padding: 0 80px;
   }
-  &--left{
+  &--left {
     flex-shrink: 0;
     width: 200px;
     margin-right: 80px;
-    &.no-margin{
+    &.no-margin {
       margin-right: 0;
     }
   }
   &--right {
-    &.margin-auto{
+    &.margin-auto {
       margin: 0 auto;
     }
   }
@@ -242,9 +262,10 @@ const activeComponentName = computed(() => {
     .img-icon.icon-icon-pass {
       width: 20px;
     }
-    .forget-pass{
+    .forget-pass,
+    .user-register {
       margin-top: 12px;
-      &-link{
+      &-link {
         font-size: 13px;
         line-height: 20px;
         color: #2cb7ca;
@@ -252,12 +273,12 @@ const activeComponentName = computed(() => {
     }
   }
   &--switch-tab {
-    &-content{
+    &-content {
       margin-top: 20px;
-      &.mt30{
+      &.mt30 {
         margin-top: 30px;
       }
-      &.mt40{
+      &.mt40 {
         margin-top: 40px;
       }
     }

plugins/login-auth/src/views/form/login.vue

@@ -357,7 +357,7 @@ const loginPassFormSchema = {
       <!-- 密码登录 -->
       <div
         class="login-auth--switch-tab-content"
-        :class="{'mt40': tabActive === 'login-pass'}"
+        :class="{ mt40: tabActive === 'login-pass' }"
         v-if="tabActive === 'login-pass'"
       >
         <base-form
@@ -376,11 +376,20 @@ const loginPassFormSchema = {
         </button>
       </div>
 
-      <div
-        class="flex flex-row items-center justify-center">
-        <div class="forget-pass" v-if="tabActive === 'login-pass'">
-          <a class="forget-pass-link" href="/phone/forgetPwd">忘记密码？</a>
-        </div>
+      <div class="flex flex-row items-center justify-between">
+        <template v-if="tabActive === 'login-pass'">
+          <div class="content-footer-item forget-pass">
+            <a class="forget-pass-link" href="/phone/forgetPwd">忘记密码？</a>
+          </div>
+          <div class="content-footer-item user-register">
+            <a
+              class="user-register-link"
+              href="javascript:;"
+              @click="doChangeTabActive('login-code')"
+              >新用户注册</a
+            >
+          </div>
+        </template>
       </div>
     </template>
   </div>