CRM12.9 暂存

package.json

@@ -16,6 +16,7 @@
     "normalize.css": "^8.0.1",
     "vconsole": "^3.15.0",
     "vue": "^3.2.41",
+    "vue-demi": "^0.13.11",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {

src/assets/icons/add-circle.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 13C10.7614 13 13 10.7614 13 8C13 5.23858 10.7614 3 8 3C5.23858 3 3 5.23858 3 8C3 10.7614 5.23858 13 8 13ZM8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM7.5 8.5H5V7.5H7.5V5H8.5V7.5H11V8.5H8.5V11H7.5V8.5Z" fill="#1856A7"/>
+</svg>

src/assets/icons/edit.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.9">
+<path d="M14.1321 4.95049L10.8888 1.70711L11.5959 1L14.8393 4.24338L14.1321 4.95049Z" fill="#00459F"/>
+<path d="M5.97196 13.1108L2.359 13.8334C2.14909 13.8754 1.96401 13.6903 2.00599 13.4804L2.72858 9.86742L10.0262 2.56982L13.2696 5.8132L5.97196 13.1108ZM11.8554 5.8132L10.0262 3.98403L3.64979 10.3604L3.19249 12.6469L5.47895 12.1896L11.8554 5.8132Z" fill="#00459F"/>
+<path d="M15 11H11V12H15V11Z" fill="#00459F"/>
+<path d="M15 13H8.5V14H15V13Z" fill="#00459F"/>
+</g>
+</svg>

src/assets/icons/transition-success.svg

@@ -0,0 +1,3 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 56.25C44.4975 56.25 56.25 44.4975 56.25 30C56.25 15.5025 44.4975 3.75 30 3.75C15.5025 3.75 3.75 15.5025 3.75 30C3.75 44.4975 15.5025 56.25 30 56.25ZM16.875 30.7744L19.5244 28.125L26.25 34.8488L40.4719 20.625L43.125 23.2781L26.25 40.1512L16.875 30.7744Z" fill="#67C23A"/>
+</svg>

src/assets/icons/warning.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.875 9C16.875 4.65076 13.3492 1.125 9 1.125C4.65076 1.125 1.125 4.65076 1.125 9C1.125 13.3492 4.65076 16.875 9 16.875C13.3492 16.875 16.875 13.3492 16.875 9ZM9.5625 4.50034V10.6875H8.4375V4.50034H9.5625ZM8.31857 12.375H9.66857V13.725H8.31857V12.375Z" fill="#FF8A00"/>
+</svg>

src/router/index.js

@@ -30,7 +30,36 @@ const routes=[
     name: "RoadshowDetail",
     component: ()=>import("@/views/roadShow/Detail.vue"),
   },
-  
+  {
+    path: "/login",
+    name: "Login",
+    component: ()=>import("@/views/verification/login.vue"),
+  },
+  {
+    path: "/register",
+    name: "Register",
+    component: ()=>import("@/views/verification/register.vue"),
+  },
+  {
+    path: "/bindPhoneNo",
+    name: "BindPhoneNo",
+    component: ()=>import("@/views/verification/bindPhoneNo.vue"),
+  },
+  {
+    path: "/passwordMissing",
+    name: "PasswordMissing",
+    component: ()=>import("@/views/verification/passwordMissing.vue"),
+  },
+  {
+    path: "/passwordChange",
+    name: "PasswordChange",
+    component: ()=>import("@/views/verification/passwordChange.vue"),
+  },
+  {
+    path: "/transitionPage",
+    name: "TransitionPage",
+    component: ()=>import("@/views/verification/transitionPage.vue"),
+  },
   {
     path: '/:pathMatch(.*)',
     name: 'error',
@@ -56,7 +85,16 @@ const router=createRouter({
   }
 })
 
+const whitelist=['/login','/passwordMissing']
+
 router.beforeEach((to, from, next) => {
+  console.log(to.path);
+  // 做登录的权限判断
+  if(!localStorage.getItem('yben_token') && !whitelist.includes(to.path)){
+    sessionStorage.setItem('login_redirect',to.fullPath)
+    next({path:'/login',replace:true})
+    return 
+  }
   if(to.query.ShareEmail){
     sessionStorage.setItem('shareId',to.query.ShareEmail)
   }

src/style/global.scss

@@ -129,4 +129,115 @@ img {
 .disclaimers-box{
   font-size: 16px;
   line-height: 1.7;
-}
+}
+// 沾满全屏宽度的 固定头
+.fixed-header{
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 68px;
+  z-index: 100;
+  width: 100vw;
+  background-color: white;
+  border-bottom: 1px solid #DCDFE6 ;
+  box-shadow: 0px 4px 20px rgba(180, 180, 180, 0.16);
+  span{
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 28px;
+    color: #1856A7;
+  }
+}
+
+
+//PC端提示框样式修改
+.PC-message-confirm{
+  .el-message-box__title::before{
+    content: '';
+    display: inline-block;
+    background-image: url('@/assets/icons/warning.svg');
+    height: 18px;
+    width: 18px;
+    position: relative;
+    top: 2px;
+    margin-right: 8px;
+  }
+}
+.el-message-box__header{
+  border-bottom: solid 1px #DCDFE6;
+}
+.el-message-box__content{
+  padding: 30px 20px;
+}
+.el-message-box__btns{
+  .el-button--primary{
+    background-color: #1856A7;
+    height: 40px;
+    min-width: 120px;
+  }
+}
+// 移动端
+@media screen and (max-width: 768px) {
+  .fixed-header{
+    height: 50px;
+    span{
+      font-weight: 700;
+      font-size: 17px;
+      line-height: 20px;
+      color: #003675;
+    }
+  }
+  // 移动端表单样式
+  #mobile-form-field{
+    .el-form-item{
+      border-bottom: 1px solid #DCDFE6;
+    }
+    .el-form-item__label{
+      padding: 0;
+    }
+    .el-form-item{
+      margin-bottom: 15px;
+    }
+    .el-input__wrapper{
+      box-shadow: none!important;
+    }
+    .el-select{
+      .el-input__wrapper{
+        padding: 0;
+      }
+      .el-input__inner{
+        color: #1856A7;
+      }
+      .el-input__suffix{
+        .el-icon{
+          color: #1856A7;
+        }
+      }
+    }
+  }
+  // 移动端提示框样式修改
+  .mobile-message-confirm{
+    padding: 0;
+    .el-message-box__btns{
+      padding: 0;
+      .mobile-confirm-button{
+        background-color: white;
+        color: #1856A7;
+        width: 100%;
+        border-left: none;
+        border-right: none;
+        border-bottom: none;
+        border-top: solid 1px #DCDFE6;
+        height: 48px;
+        border-radius: 0;
+      }
+    }
+  }
+  .el-message{
+    width: 100%;
+  }
+}
+

src/views/report/Detail.vue

@@ -2,6 +2,7 @@
 import {onMounted, ref} from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import {apiReportDetail,apiReportClassifyList} from '@/api/report'
+import {Avatar,Edit} from '@element-plus/icons-vue'
 
 const route=useRoute()
 const router=useRouter()
@@ -114,6 +115,20 @@ function handleChangeSecClassify(item,pitem){
 onMounted(()=>{
     wwidth.value=window.innerWidth
 })
+
+// TODO 绑定手机号
+const bindPhone=()=>{
+    let {href} = router.resolve({path:"/bindPhoneNo"});
+    window.open(href,'_blank');
+}
+const loginOut=()=>{
+    // TODO 退出登录，清除token
+    router.push('/login')
+}
+const passwordChange=()=>{
+    // TODO 修改密码
+}
+
 </script>
 
 <template>
@@ -123,7 +138,37 @@ onMounted(()=>{
                 <span style="color:#00459F;margin-right:30px;">MORE CONTENT>></span>
                 <span v-for="item in reportClassify" :key="item.id" style="margin-right:20px;cursor: pointer;" @click="goIndex(item)">{{item.classify_name}}</span>
             </div>
-            <div style="color:#00459F;cursor: pointer;" @click="$router.replace('/')">ABOUT US</div>
+            <!-- <div style="color:#00459F;cursor: pointer;" @click="$router.replace('/')">ABOUT US</div> -->
+            <el-popover
+                placement="top-start"
+                trigger="click"
+                :width="240">
+                <template #reference>
+                    <div @click="userInfoShow" class="user-info-hover">
+                        <el-icon><Avatar /></el-icon>
+                        <span>xxxxx</span>
+                    </div>
+                </template>
+                <div class="user-info-message">
+                    <div>用户姓名：<span>xxxxx</span></div>
+                    <div>邮箱：<span>1605177521@qq.com</span></div>
+                    <div>手机号：
+                        <!-- <span style="display: inline-flex;align-items: center;">
+                            <span>+86 13588818597</span>
+                            <el-icon style="margin-left: 8px;cursor: pointer;" @click="bindPhone"><Edit /></el-icon>
+                        </span> -->
+                        <span style="display: inline-flex;align-items: center;color: var(--el-color-primary);cursor: pointer;"
+                        @click="bindPhone">
+                            <el-icon style="margin-right: 8px;"><Edit /></el-icon>
+                            <span>绑定手机号</span>
+                        </span>
+                    </div>
+                    <div style="margin-top: 30px;display: flex;align-items: center;justify-content: space-between;">
+                        <el-button type="primary" @click="loginOut">退出账号</el-button>
+                        <el-button type="primary" plain @click="passwordChange">修改密码</el-button>
+                    </div>
+                </div>
+            </el-popover>
         </div>
         <div class="mobile-header-wrap">
             <img class="menu-icon" @click="showFilter=true;filterSize='100%'" src="@/assets/menu.svg" alt="">
@@ -210,6 +255,11 @@ onMounted(()=>{
     font-size: 20px;
     z-index: 99;
     background-color: #fff;
+    .user-info-hover{
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+    }
 }
 .mobile-header-wrap{
     font-size: 17px;

src/views/report/Index.vue

@@ -1,10 +1,11 @@
 <script setup>
-import {ref,reactive, onMounted} from 'vue'
+import {ref,reactive} from 'vue'
 import { useRoute, useRouter } from "vue-router";
 import {apiReportClassifyList,apiReportList} from '@/api/report'
 import { useWindowSize } from '@vueuse/core'
 import videoPlayBox from '@/components/VideoPlayBox.vue'
 import roadShowList from '@/views/roadShow/List.vue'
+import {Avatar,Edit} from '@element-plus/icons-vue'
 
 const { width, height } = useWindowSize()
 
@@ -158,6 +159,45 @@ function goReportDetail(item){
 let showFilter=ref(false)
 let filterSize=ref('30%')
 
+const userInfoShow=()=>{
+    window.event.stopPropagation()
+}
+
+const userInfoGo=()=>{
+    
+}
+
+// TODO 绑定手机号
+const bindPhone=()=>{
+    let {href} = router.resolve({path:"/bindPhoneNo"});
+    window.open(href,'_blank');
+}
+const loginOut=()=>{
+    // TODO 退出登录，清除token
+    router.push('/login')
+}
+const passwordChange=()=>{
+    // TODO 修改密码
+    let {href} = router.resolve({path:"/passwordChange"});
+    window.open(href,'_blank');
+}
+// const isPhone=ref(window.innerWidth<=768)
+
+// const handleOrientationchange=()=>{
+//     // 移动端横竖屏切换事件
+//     nextTick(()=>{
+//         console.log(window.innerWidth);
+//         isPhone.value = window.innerWidth<=768
+//         console.log(isPhone.value);
+//     })
+// }
+// onMounted(()=>{
+//     window.addEventListener('orientationchange',handleOrientationchange)
+// })
+// onUnmounted(()=>{
+//     window.removeEventListener('orientationchange',handleOrientationchange)
+// })
+
 </script>
 
 <template>
@@ -169,6 +209,38 @@ let filterSize=ref('30%')
                 <img src="@/assets/search.svg" alt="">
                 <span style="margin-left:10px">search for</span>
             </div>
+            <el-icon class="user-info-avatar" @click="userInfoGo"><Avatar /></el-icon>
+            <el-popover
+                popper-class="user-info-popper"
+                placement="top-start"
+                trigger="click"
+                :width="240">
+                <template #reference>
+                    <div @click="userInfoShow" class="user-info-hover">
+                        <el-icon><Avatar /></el-icon>
+                        <span>xxxxx</span>
+                    </div>
+                </template>
+                <div class="user-info-message">
+                    <div class="user-info-item">用户姓名：<span>xxxxx</span></div>
+                    <div class="user-info-item">邮箱：<span>1605177521@qq.com</span></div>
+                    <div class="user-info-item">手机号：
+                        <span style="display: inline-flex;align-items: center;">
+                            <span>+86 13588818597</span>
+                            <img src="@/assets/icons/edit.svg" style="margin-left: 20px;height: 16px;cursor: pointer;" @click="bindPhone" />
+                        </span>
+                        <!-- <span style="display: inline-flex;align-items: center;color: #1856A7;cursor: pointer;"
+                        @click="bindPhone">
+                            <img src="@/assets/icons/add-circle.svg" style="margin-right: 8px;height: 16px;" />
+                            <span>绑定手机号</span>
+                        </span> -->
+                    </div>
+                    <div style="margin-top: 30px;display: flex;align-items: center;justify-content: space-between;">
+                        <el-button type="primary" @click="loginOut" size="large" style="width: 100px;background-color:#1856A7 ;">退出账号</el-button>
+                        <el-button plain @click="passwordChange" size="large" style="width: 100px;">修改密码</el-button>
+                    </div>
+                </div>
+            </el-popover>
         </div>
         <div class="content-wrap">
         <div class="nav-wrap">
@@ -304,6 +376,22 @@ let filterSize=ref('30%')
         margin-bottom: 0;
     }
 }
+.user-info-popper{
+    min-width: 300px!important;
+    .user-info-message{
+        padding: 28px;
+        .user-info-item{
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 20px;
+            color: #333333;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+        }
+    }
+}
+
 </style>
 <style lang="scss" scoped>
 .report-index-page{
@@ -334,7 +422,7 @@ let filterSize=ref('30%')
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
-        right: 20px;
+        left: 20px;
         font-size: 16px;
         color: #333;
         font-weight: 500;
@@ -343,6 +431,18 @@ let filterSize=ref('30%')
             vertical-align: middle;
         }
     }
+    .user-info-avatar{
+        display: none;
+    }
+    .user-info-hover{
+        display: flex;
+        align-items: center;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 20px;
+        cursor: pointer;
+    }
     .menu-icon{
         position: absolute;
         left: 20px;
@@ -358,10 +458,24 @@ let filterSize=ref('30%')
         box-shadow: 0px 4px 20px rgba(180, 180, 180, 0.16);
         padding: 15px 0;
         .search-box{
+            left: unset;
+            right: 45px;
             span{
                 display: none;
             }
         }
+        .user-info-avatar{
+            display: flex;
+            align-items: center;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            right: 20px;
+            font-size: 18px;
+        }
+        .user-info-hover{
+            display: none;
+        }
         .menu-icon{
             display: block;
             width: 17px;

src/views/roadShow/Detail.vue

@@ -4,6 +4,7 @@ import {apiRoadShowVideoDetail,apiVideoPlayLog} from '@/api/roadShow'
 import {apiReportClassifyList} from '@/api/report'
 import videoPlayBox from '@/components/VideoPlayBox.vue'
 import { useRoute, useRouter } from 'vue-router'
+import {Avatar,Edit} from '@element-plus/icons-vue'
 
 const route=useRoute()
 const router=useRouter()
@@ -119,7 +120,18 @@ function handleChangeSecClassify(item,pitem){
         })
 
 }
-
+// TODO 绑定手机号
+const bindPhone=()=>{
+    let {href} = router.resolve({path:"/bindPhoneNo"});
+    window.open(href,'_blank');
+}
+const loginOut=()=>{
+    // TODO 退出登录，清除token
+    router.push('/login')
+}
+const passwordChange=()=>{
+    // TODO 修改密码
+}
 
 </script>
 
@@ -130,7 +142,37 @@ function handleChangeSecClassify(item,pitem){
                 <span style="color:#00459F;margin-right:30px;">MORE CONTENT>></span>
                 <span v-for="item in reportClassify" :key="item.id" style="margin-right:20px;cursor: pointer;" @click="goIndex(item)">{{item.classify_name}}</span>
             </div>
-            <div style="color:#00459F;cursor: pointer;" @click="$router.replace('/')">ABOUT US</div>
+            <!-- <div style="color:#00459F;cursor: pointer;" @click="$router.replace('/')">ABOUT US</div> -->
+            <el-popover
+                placement="top-start"
+                trigger="click"
+                :width="240">
+                <template #reference>
+                    <div @click="userInfoShow" class="user-info-hover">
+                        <el-icon><Avatar /></el-icon>
+                        <span>xxxxx</span>
+                    </div>
+                </template>
+                <div class="user-info-message">
+                    <div>用户姓名：<span>xxxxx</span></div>
+                    <div>邮箱：<span>1605177521@qq.com</span></div>
+                    <div>手机号：
+                        <!-- <span style="display: inline-flex;align-items: center;">
+                            <span>+86 13588818597</span>
+                            <el-icon style="margin-left: 8px;cursor: pointer;" @click="bindPhone"><Edit /></el-icon>
+                        </span> -->
+                        <span style="display: inline-flex;align-items: center;color: var(--el-color-primary);cursor: pointer;"
+                        @click="bindPhone">
+                            <el-icon style="margin-right: 8px;"><Edit /></el-icon>
+                            <span>绑定手机号</span>
+                        </span>
+                    </div>
+                    <div style="margin-top: 30px;display: flex;align-items: center;justify-content: space-between;">
+                        <el-button type="primary" @click="loginOut">退出账号</el-button>
+                        <el-button type="primary" plain @click="passwordChange">修改密码</el-button>
+                    </div>
+                </div>
+            </el-popover>
         </div>
         <div class="mobile-header-wrap">
             <img class="menu-icon" @click="showFilter=true;filterSize='100%'" src="@/assets/menu.svg" alt="">
@@ -172,6 +214,11 @@ function handleChangeSecClassify(item,pitem){
     font-size: 20px;
     z-index: 99;
     background-color: #fff;
+    .user-info-hover{
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+    }
 }
 .mobile-header-wrap{
     font-size: 17px;

src/views/verification/bindPhoneNo.vue

@@ -0,0 +1,231 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import {ElMessage,ElMessageBox} from 'element-plus'
+import { useRouter } from 'vue-router';
+import {CaretBottom} from '@element-plus/icons-vue'
+
+  const router = useRouter()
+
+  const bindPhoneRef = ref(null)
+  const newPhoneNoRef = ref(null)
+
+  const bindPhone=reactive({
+    form:{
+      newPhoneNo:'',
+      newPhoneNoPre:'+86',
+      verificationCode:''
+    },
+    rules:{
+      newPhoneNo:[{required: true, message:'手机号不能为空', trigger: 'blur'},
+      {validator:(rule,value,callback)=>{
+        if(value!='' && !Number(value) || value.indexOf('.')!=-1){
+          callback(new Error('必须都为数字'))
+        }else{
+          callback()
+        }
+      }, trigger: 'blur'}],
+      verificationCode:{required: true, message:'验证码不能为空', trigger: 'blur'}
+    }
+  })
+
+  let codeTimer=null
+  const codeInfo=reactive({
+    timeout:60,// 秒
+    isRequesting:false
+  })
+// ----------------------------------------------------方法
+  const sendVerCode=()=>{
+    codeInfo.isRequesting=true
+    codeInfo.timeout--
+    codeTimer=setInterval(()=>{
+      if(codeInfo.timeout==1){
+        codeInfo.isRequesting=false
+        codeInfo.timeout=60
+        codeTimer=null
+      }
+      codeInfo.timeout--
+    },1000)
+    // TODO 发送验证码
+    ElMessage.success('已发送验证码')
+  }
+
+  const bindSubmit=()=>{
+    bindPhoneRef.value.validate(valid=>{
+      if(valid){
+        if(!bindPhone.form.newPhoneNoPre){
+          ElMessage.error('请选择手机区号')
+        }
+        if(Math.random()>0.5){
+          newPhoneNoRef.value.validateMessage='该手机号已绑定其他账号，请检查'
+          newPhoneNoRef.value.validateState='error'
+        }else{
+          //TODO 注册成功，跳转
+          sessionStorage.setItem('transitionPageMessage','bindPhone')
+          router.replace('/transitionPage')
+        }
+      }
+    })
+  }
+</script>
+
+<template>
+    <div class="bind-phone-container">
+      <div class="fixed-header">
+        <span>
+          HORIZONINSIGHTS
+        </span>
+      </div>
+      <div class="page-title">
+        绑定手机号
+      </div>
+      <div class="bind-phone-form-box" id="bind-phone-form-box">
+        <!-- PC端的表单 -->
+        <el-form :model="bindPhone.form" class="bind-phone-form" :rules="bindPhone.rules" ref="bindPhoneRef" >
+          <el-form-item label="原手机号" label-width="70px" style="border: none;">
+            +86 13588818597
+          </el-form-item>
+          <el-form-item prop="newPhoneNo" ref="newPhoneNoRef" size="large">
+            <div class="phone-item">
+              <el-select v-model="bindPhone.form.newPhoneNoPre" size="large" style="max-width: 90px;margin-right: 10px;" placeholder="请选择">
+                <el-option label="+86" value="+86" />
+                <el-option label="101" value="101" />
+                <el-option label="3" value="3" />
+              </el-select>
+              <el-input v-model.trim="bindPhone.form.newPhoneNo" size="large" style="flex-grow: 1;" placeholder="请输入手机号">
+                <template #suffix>
+                  <span style=" color: var(--el-color-primary);cursor: pointer;white-space: nowrap;" 
+                  @click="sendVerCode" v-if="!codeInfo.isRequesting">获取验证码</span>
+                  <span style=" color: #999999;white-space: nowrap;" v-else>{{ codeInfo.timeout }}s后再获取</span>
+                </template>
+              </el-input>
+            </div>
+          </el-form-item>
+          <el-form-item prop="verificationCode" style="margin-bottom: 0;" size="large">
+            <el-input v-model="bindPhone.form.verificationCode" size="large" style="width: 360px;" placeholder="请输入验证码" class="form-item">
+            </el-input>
+          </el-form-item>
+        </el-form>
+        <!-- 移动端的表单 -->
+        <el-form :model="bindPhone.form" class="mobile-bind-phone-form" id="mobile-form-field" hide-required-asterisk label-position="left"
+        :rules="bindPhone.rules" label-width="60px" ref="bindPhoneRef" >
+          <el-form-item label="原手机号"  style="border: none;">
+            <span style="margin-left: 15px;">+86 13588818597</span>
+          </el-form-item>
+          <el-form-item prop="newPhoneNo" ref="newPhoneNoRef" size="large">
+            <template #label>
+              <el-select v-model="bindPhone.form.newPhoneNoPre" :suffix-icon="CaretBottom"
+              style="max-width: 60px;" placeholder="请选择" size="large">
+                <el-option label="+886" value="+86" />
+                <el-option label="101" value="101" />
+                <el-option label="3" value="3" />
+              </el-select>
+            </template>
+            <!-- <div class="phone-item"> -->
+              <!-- <el-select v-model="bindPhone.form.newPhoneNoPre" size="large" style="max-width: 90px;margin-right: 10px;" placeholder="请选择">
+                <el-option label="+86" value="+86" />
+                <el-option label="101" value="101" />
+                <el-option label="3" value="3" />
+              </el-select> -->
+              <el-input v-model.trim="bindPhone.form.newPhoneNo" size="large" style="flex-grow: 1;" placeholder="请输入手机号">
+                <template #suffix>
+                  <span style=" color: var(--el-color-primary);cursor: pointer;white-space: nowrap;" 
+                  @click="sendVerCode" v-if="!codeInfo.isRequesting">获取验证码</span>
+                  <span style=" color: #999999;white-space: nowrap;" v-else>{{ codeInfo.timeout }}s后再获取</span>
+                </template>
+              </el-input>
+            <!-- </div> -->
+          </el-form-item>
+          <el-form-item prop="verificationCode" label="验证码" style="margin-bottom: 0;" size="large">
+            <el-input v-model="bindPhone.form.verificationCode" size="large" style="width: 360px;" placeholder="请输入验证码" class="form-item">
+            </el-input>
+          </el-form-item>
+        </el-form>
+        <el-button type="primary" @click="bindSubmit" class="submit-button" size="large">提交信息</el-button>
+        <div class="question-hint">若有任何问题，请发邮件至xxxxxxxxxx</div>
+      </div>
+    </div>
+</template>
+  
+<style lang="scss" scoped> 
+  .bind-phone-container{
+    padding-top: 60px;
+    .page-title{
+      text-align: center;
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 28px;
+      color: #1856A7;
+      padding: 56px 0 48px;
+    }
+    .bind-phone-form-box{
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      align-items: center;
+      .bind-phone-form{
+        width: 360px;
+        .phone-item{
+          width: 100%;
+          display: flex;
+          align-items: center;
+        }
+      }
+      .mobile-bind-phone-form{
+        display: none;
+      }
+      .submit-button{
+        margin: 40px 0 30px;
+        width: 360px;
+        background-color: #1856A7;
+      }
+      .question-hint{
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        color: #999999;
+      }
+    }
+  }
+  @media screen and (max-width: 768px) {
+    .bind-phone-container{
+      padding: 50px 30px 30px;
+      .page-title{
+        text-align: left;
+        padding: 50px 0 30px;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 22px;
+        color: #333333;
+      }
+      .bind-phone-form-box{
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        .bind-phone-form{
+          display: none;
+        }
+        .mobile-bind-phone-form{
+          display: block;
+          width: 100%;
+        }
+        .submit-button{
+          margin: 20px 0;
+          width: 100%;
+        }
+        .question-hint{
+          font-size: 12px;
+          line-height: 17px;
+        }
+      }
+    }
+  }
+</style>
+<style lang="scss">
+@media screen and (max-width: 768px) {
+  .el-form-item__error{
+    left: -60px;
+  }
+}
+
+</style>

src/views/verification/login.vue

@@ -0,0 +1,551 @@
+<script setup>
+import {ref,reactive} from 'vue'
+import {ElMessageBox,ElMessage} from 'element-plus'
+import { useRouter } from 'vue-router';
+import {CaretBottom} from '@element-plus/icons-vue'
+
+  const router = useRouter()
+  const loginFormRef=ref(null)
+
+  const isMobile=ref(window.innerWidth>768?false:true)
+
+  const loginForm=reactive({
+    email:'',
+    phone:'',
+    phonePre:'+86',
+    password:'',
+  })
+  const loginFormRules=reactive({
+    email:[{required: true, message:'邮箱不能为空', trigger: 'blur'},
+    {type:'email',message:'邮箱格式不正确', trigger: 'blur'}],
+    phone:[{required: true, message:'手机号不能为空', trigger: 'blur'},
+    {validator:(rule,value,callback)=>{
+      if(!Number(value) || value.indexOf('.')!=-1){
+        callback(new Error('必须都为数字'))
+      }else{
+        callback()
+      }
+    }, trigger: 'blur'}],
+    password:{required: true, message:'密码不能为空', trigger: 'blur'}
+  })
+
+
+  const copyEmail=()=>{
+    if (navigator.clipboard && window.isSecureContext) {
+      // navigator clipboard 向剪贴板写文本
+      navigator.clipboard.writeText('xxxxxxxxxxxxx@qq.com').then(() => {
+        ElMessage.success('复制成功')
+      });
+    }else{
+      const input = document.createElement('input');
+      input.setAttribute('readonly', 'readonly');
+      input.setAttribute('value', 'xxxxxxxxxxxxx@qq.com');
+      document.body.appendChild(input);
+      input.setSelectionRange(0, input.value.length);
+      input.select();
+      document.execCommand('copy');
+      document.body.removeChild(input);
+      ElMessage.success('复制成功')
+    }
+  }
+  console.log();
+  const login=()=>{
+    loginFormRef.value.validate(valid=>{
+      if(valid){
+        //TODO 登录接口对接
+        // if(!loginForm.phonePre && loginType.value==2){
+        //   ElMessage.error('请选择手机区号')
+        // }
+        // console.log(loginForm);
+        // if(Math.random()>0.75){
+          // ElMessageBox.confirm("您的账号未曾注册，请注册后登录", '提示',   
+          // {
+          //   customClass:isMobile.value?'mobile-message-confirm':'PC-message-confirm',
+          //   confirmButtonClass:isMobile.value?'mobile-confirm-button':'',
+          //   confirmButtonText: '立即注册',
+          //   showCancelButton:false,
+          // }).then(res=>{
+          //   router.push('/register')
+          // }).catch(()=>{})
+        // }else if(Math.random()>0.5){
+          // ElMessageBox.confirm("您的手机号未绑定账号，请检查","提示",
+          // {
+          //   customClass:isMobile.value?'mobile-message-confirm':'PC-message-confirm',
+          //   confirmButtonClass:isMobile.value?'mobile-confirm-button':'',
+          //   confirmButtonText: '知道了',
+          //   showCancelButton:false,
+          // }).then(res=>{
+          //   console.log('您的手机号未绑定账号，请检查');
+          // }).catch(()=>{})
+        // }else if(Math.random()>0.25){
+          // ElMessage.error('密码错误，请检查')
+        // }else if(Math.random()>0.2){
+          //TODO 登录成功，跳转
+          localStorage.setItem('yben_token','FDSAFWRFEGGREGEe1')
+          let redirectPath=sessionStorage.getItem('login_redirect') || '/'
+          sessionStorage.removeItem('login_redirect')
+          router.replace(redirectPath)
+        // }else{
+              // ElMessageBox.confirm("您的报告试用权限已超一个月，如需要延长试用期或其他帮助，请联系我们：XXXXXXXXXXXXXXXXXX","提示",
+              // {
+              //   customClass:isMobile.value?'mobile-message-confirm':'PC-message-confirm',
+              //   confirmButtonClass:isMobile.value?'mobile-confirm-button':'',
+              //   confirmButtonText: '复制邮箱',
+              //   showCancelButton:false,
+              // }).then(res=>{
+              //   copyEmail()
+              // }).catch(()=>{})
+        // }
+      }
+    })
+  }
+  // 去注册页
+  const registerPageGo=()=>{
+    let {href} = router.resolve("/register");
+    window.open(href,'_blank');
+  }
+  const psdMissingPageGo=()=>{
+    let {href} = router.resolve("/passwordMissing");
+    window.open(href,'_blank');
+  } 
+  // 登录方式 1-邮箱 2-手机号
+  const loginType=ref(1)
+  // 操作方式 1-登录 2-注册
+  const operationType=ref(1)
+  const changeLoginType=(type)=>{
+    if(type == loginType.value) return 
+    loginType.value=type
+  }
+  const changeOperationType=(type)=>{
+    if(type == operationType.value) return 
+    operationType.value=type
+  }
+
+  // --------------------------------------------------移动端 - 注册
+  // 第几步
+  const step=ref(1)
+
+  const registerForm=reactive({
+    userName:'',
+    companyName:'',
+    email:'',
+    verificationCode:'',
+    password:'',
+    passwordConfirm:''
+  })
+  const registerFormRef=ref(null)
+  const registerFormRules=reactive({
+    userName:{required: true, message:'姓名不能为空', trigger: 'blur'},
+    companyName:{required: true, message:'公司名称不能为空', trigger: 'blur'},
+    email:[{required: true, message:'邮箱不能为空', trigger: 'blur'},
+    {type:'email',message:'邮箱格式不正确', trigger: 'blur'}],
+    verificationCode:{required: true, message:'邮箱验证码不能为空', trigger: 'blur'},
+    password:{required: true, message:'密码不能为空', trigger: 'blur'},
+    passwordConfirm:[{required: true, message:'密码不能为空', trigger: 'blur'},
+    {validator:(rule,value,callback)=>{
+      if(registerForm.passwordConfirm!==registerForm.password){
+        callback(new Error('两次密码不一致'))
+      }else{
+        callback()
+      }
+    }, trigger: 'blur'}]
+  })
+
+  let codeTimer=null
+  const codeInfo=reactive({
+    timeout:60,// 秒
+    isRequesting:false
+  })
+
+  const sendVerCode=()=>{
+    codeInfo.isRequesting=true
+    codeInfo.timeout--
+    codeTimer=setInterval(()=>{
+      if(codeInfo.timeout==1){
+        codeInfo.isRequesting=false
+        codeInfo.timeout=60
+        codeTimer=null
+      }
+      codeInfo.timeout--
+    },1000)
+    // TODO 发送验证码
+    ElMessage.success('已发送验证码')
+  }
+
+  const register=()=>{
+    registerFormRef.value.validate(valid=>{
+      if(valid){
+        if(step.value==1){
+          // 进入下一步
+          step.value=2
+          return
+        }
+        console.log(registerForm);
+        // if(Math.random()>0.75){
+        //   ElMessageBox.confirm("您的邮箱已注册，请直接登录","提示",
+        //   {
+              // customClass:'mobile-message-confirm',
+              // confirmButtonClass:'mobile-confirm-button',
+        //     confirmButtonText: '立即登录',
+        //     showCancelButton:false,
+        //   }).then(res=>{
+        //     router.push('/login')
+        //   }).catch(()=>{})
+        // }else if(Math.random()>0.25){
+        //   //TODO 注册成功，跳转
+          sessionStorage.setItem('transitionPageMessage','register')
+          router.replace('/transitionPage')
+        // }else{
+          // ElMessageBox.confirm("您的报告试用权限已超一个月，如需要延长试用期或其他帮助，请联系我们：XXXXXXXXXXXXXXXXXX","提示",
+          // {
+          //   customClass:'mobile-message-confirm',
+          //   confirmButtonClass:'mobile-confirm-button',
+          //   confirmButtonText: '复制邮箱',
+          //   showCancelButton:false,
+          // }).then(res=>{
+          //   copyEmail()
+          // }).catch(()=>{})
+        // }
+      }
+    })
+  }
+
+</script>
+<template>
+  <div class="login-container" id="login-container">
+    <!-- PC端 -->
+    <div id="PC-part">
+      <div class="login_background_image">
+      </div>
+      <div class="login-container-main">
+        <div class="login-container-right">
+          <div class="login-container-header">
+            <span>HORIZONINSIGHTS</span>
+          </div>
+          <div class="login-container-body">
+            <div class="login-type-tab">
+              <span :class="loginType==1?'active-tab':''" @click="changeLoginType(1)">邮箱登录</span>
+              <div class="tab-split"></div>
+              <span :class="loginType==2?'active-tab':''" @click="changeLoginType(2)">手机号登录</span>
+            </div>
+            <el-form :model="loginForm" class="login-form" :rules="loginFormRules" ref="loginFormRef">
+              <el-form-item prop="email" v-if="loginType==1">
+                <el-input v-model.trim="loginForm.email" size="large" placeholder="请输入邮箱" style="width: 360px;"></el-input>
+              </el-form-item>
+              <el-form-item prop="phone" v-else >
+                <div class="phone-item">
+                  <el-select v-model="loginForm.phonePre" style="max-width: 90px;margin-right: 10px;" placeholder="请选择" size="large">
+                    <el-option label="+86" value="+86" />
+                    <el-option label="101" value="101" />
+                    <el-option label="3" value="3" />
+                  </el-select>
+                  <el-input v-model.trim="loginForm.phone" style="flex-grow: 1;" placeholder="请输入手机号" size="large">
+                  </el-input>
+                </div>
+              </el-form-item>
+              <el-form-item prop="password" style="width: 360px;">
+                <el-input v-model="loginForm.password" size="large" type="password" placeholder="请输入密码"></el-input>
+              </el-form-item>
+            </el-form>
+            <div class="register-message-row">
+              <div class="register-message">
+                还没有账号？<span @click="registerPageGo">去注册</span>
+              </div>
+              <div class="password-miss" @click="psdMissingPageGo">
+                忘记密码？
+              </div>
+            </div>
+            <el-button class="submit-button" type="primary" size="large" @click="login">立即登录</el-button>
+            <div class="login-hint">若有任何问题，请发邮件至xxxxxxxxxx</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 移动端 -->
+    <div id="mobile-part">
+      <div class="fixed-header">
+        <span>
+          HORIZONINSIGHTS
+        </span>
+      </div>
+      <div class="verification-body">
+        <div class="login-type-tab" v-if="step==1 || operationType==1">
+          <span :class="operationType==1?'active-tab':''" @click="changeOperationType(1)">登录</span>
+          <div class="tab-split"></div>
+          <span :class="operationType==2?'active-tab':''" @click="changeOperationType(2)">注册</span>
+        </div>
+        <div class="register-psd-hint" v-else>
+          请设置密码
+        </div>
+        <!-- 登录 -->
+        <div class="mobile-login-box" v-if="operationType==1">
+          <el-form :model="loginForm" label-width="55px" label-position="left" id="mobile-form-field" :rules="loginFormRules" 
+          ref="loginFormRef" hide-required-asterisk>
+            <el-form-item prop="email" v-if="loginType==1" label="邮箱" size="large" >
+              <el-input v-model.trim="loginForm.email" size="large" placeholder="请输入邮箱"></el-input>
+            </el-form-item>
+            <el-form-item prop="phone" v-else >
+              <template #label>
+                <el-select v-model="loginForm.phonePre" :suffix-icon="CaretBottom"
+                style="max-width: 55px;" placeholder="请选择" size="large">
+                  <el-option label="+886" value="+86" />
+                  <el-option label="101" value="101" />
+                  <el-option label="3" value="3" />
+                </el-select>
+              </template>
+              <el-input v-model.trim="loginForm.phone" style="flex-grow: 1;" placeholder="请输入手机号" size="large"></el-input>
+            </el-form-item>
+            <el-form-item prop="password" label="密码" size="large">
+              <el-input v-model="loginForm.password" size="large"  type="password" placeholder="请输入密码"></el-input>
+            </el-form-item>
+          </el-form>
+          <div class="mobile-login-type-change">
+            <span @click="changeLoginType(loginType==1?2:1)">切换至{{ loginType==1?"手机号码":"邮箱" }}登录</span>
+            <span @click="psdMissingPageGo">忘记密码？</span>
+          </div>
+          <el-button type="primary" class="submit-button" @click="login" size="large">立即登录</el-button>
+          <div class="mobile-login-hint">若有任何问题，请发邮件至xxxxxxxxxx</div>
+        </div>
+        <!-- 注册 -->
+        <div class="mobile-register-box" v-else>
+          <el-form :model="registerForm" label-width="55px" label-position="left" id="mobile-form-field" 
+          :rules="registerFormRules" ref="registerFormRef" hide-required-asterisk>
+            <el-form-item prop="userName" label="姓名" size="large" v-if="step==1">
+              <el-input v-model.trim="registerForm.userName" size="large" placeholder="请输入姓名"></el-input>
+            </el-form-item>
+            <el-form-item prop="companyName" label="公司" size="large" v-if="step==1">
+              <el-input v-model="registerForm.companyName" size="large" placeholder="请输入公司名称"></el-input>
+            </el-form-item>
+            <el-form-item prop="email" label="邮箱" size="large" v-if="step==1">
+              <el-input v-model="registerForm.email" size="large" placeholder="请输入邮箱">
+                <template #suffix>
+                  <span style=" color: var(--el-color-primary);cursor: pointer;white-space: nowrap;" 
+                  @click="sendVerCode" v-if="!codeInfo.isRequesting">获取验证码</span>
+                  <span style=" color: #999999;white-space: nowrap;" v-else>{{ codeInfo.timeout }}s后再获取</span>
+                </template>
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="verificationCode" label="验证码" size="large" v-if="step==1">
+              <el-input v-model="registerForm.verificationCode" size="large" placeholder="请输入验证码"></el-input>
+            </el-form-item>
+            <el-form-item prop="password" label="密码" size="large" v-if="step==2">
+              <el-input v-model="registerForm.password" size="large" type="password" placeholder="请输入密码"></el-input>
+            </el-form-item>
+            <el-form-item prop="passwordConfirm" style="margin-bottom: 0;" label="密码" size="large" v-if="step==2">
+              <el-input v-model="registerForm.passwordConfirm" size="large" type="password" placeholder="请再次输入密码"></el-input>
+            </el-form-item>
+          </el-form>
+          <el-button type="primary" class="submit-button" @click="register" size="large" v-if="step==1">下一步</el-button>
+          <el-button type="primary" class="submit-button" size="large" v-if="step==2" @click="register">提交信息</el-button>
+          <div class="mobile-login-hint">若有任何问题，请发邮件至xxxxxxxxxx</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+<style lang="scss" scoped>
+  .login-container{
+    .login-type-tab{
+      display: flex;
+      align-items: center;
+      margin-bottom: 36px;
+      .tab-split{
+        height: 18px;
+        width: 1px;
+        background-color: #1856A7;
+        margin: 0 20px;
+      }
+      span{
+        display: inline-block;
+        cursor: pointer;
+        font-size: 18px;
+        line-height: 25px;
+        color: #999999;
+      }
+      .active-tab{
+        color: #1856A7;
+        font-weight: 600;
+      }
+    }
+    .submit-button{
+      margin-top: 26px;
+      width: 100%;
+      background-color: #1856A7;
+    }
+    #PC-part{
+      width: 100%;
+      height:100vh;
+      .login_background_image{
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        width: 100vw;
+        background-color: rgba(24, 86, 167, 0.2);
+        z-index: -1;
+        background-image: url('@/assets/login_bci.png');
+        background-repeat: no-repeat;
+        background-size: cover;
+      }
+      .login-container-main{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+
+        .login-container-right{
+          background-color: white;
+          width: 600px;
+          height: 500px;
+          opacity: 0.95;
+          border: 1px solid #DCDFE6;
+          border-radius: 8px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          .login-container-header{
+            height: 68px;
+            border-bottom:  solid 1px #DCDFE6;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            span{
+              font-weight: 600;
+              font-size: 20px;
+              color: #1856A7;
+            }
+          }
+          .login-container-body{
+            width: 360px;
+            padding-top: 45px;
+            .login-form{
+              .phone-item{
+                width: 100%;
+                display: flex;
+                align-items: center;
+              }
+            }
+            .register-message-row{
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              .register-message{
+                font-size: 14px;
+                color: #333333;
+                span{
+                  color: #1856A7;
+                  cursor: pointer;
+                }
+              }
+              .password-miss{
+                font-size: 14px;
+                color: #333333;;
+                cursor: pointer;
+              }
+            }
+            .login-hint{
+              font-size: 14px;
+              line-height: 20px;
+              color: #999999;
+              margin-top: 26px;
+            }
+          }
+        }
+      }
+    }
+    #mobile-part{
+      display: none;
+    }
+  }
+  // 移动端样式
+  @media screen and (max-width: 768px) {
+    .login-container{
+      #PC-part{
+        display: none;
+      }
+      #mobile-part{
+        background-color: white;
+        display:block ;
+        width: 100%;
+        height:100%;
+        min-height: 100%;
+        .verification-body{
+          width: 100%;
+          height: 100%;
+          padding: 100px 30px 30px;
+          .login-type-tab{
+            margin-bottom: 30px;
+            .tab-split{
+              height: 16px;
+              width: 2px;
+              background-color: #1856A7;
+              margin: 0 20px;
+            }
+            span{
+              font-size: 16px;
+              line-height: 22px;
+            }
+          }
+          .register-psd-hint{
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 22px;
+            color: #333333;
+            margin-bottom: 40px;
+          }
+          .mobile-login-box{
+            .mobile-login-type-change{
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              span{
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 17px;
+                color: #1856A7;
+              }
+            }
+            .mobile-login-hint{
+              font-weight: 400;
+              font-size: 12px;
+              line-height: 17px;
+              color: #999999;
+              margin-top: 20px;
+            }
+          }
+          .mobile-register-box{
+            .mobile-login-type-change{
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              span{
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 17px;
+                color: #1856A7;
+              }
+            }
+            .mobile-login-hint{
+              font-weight: 400;
+              font-size: 12px;
+              line-height: 17px;
+              color: #999999;
+              margin-top: 20px;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
+<style lang="scss">
+@media screen and (max-width: 768px) {
+  .el-form-item__error{
+    left: -55px;
+  }
+}
+
+</style>

src/views/verification/passwordChange.vue

@@ -0,0 +1,176 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import {ElMessage,ElMessageBox} from 'element-plus'
+import { useRouter } from 'vue-router';
+
+  const router = useRouter()
+
+  const psdChangeRef = ref(null)
+
+  const psdChange=reactive({
+    form:{
+      passwordOrigin:'',
+      password:'',
+      passwordConfirm:'',
+    },
+    rules:{
+      passwordOrigin:{required: true, message:'原密码不能为空', trigger: 'blur'},
+      password:{required: true, message:'密码不能为空', trigger: 'blur'},
+      passwordConfirm:[{required: true, message:'密码不能为空', trigger: 'blur'},
+      {validator:(rule,value,callback)=>{
+        if(psdChange.form.passwordConfirm!==psdChange.form.password){
+          callback(new Error('两次密码不一致'))
+        }else{
+          callback()
+        }
+      }, trigger: 'blur'}],
+    }
+  })
+
+
+// ----------------------------------------------------方法
+
+  const psdMissingPageGo=()=>{
+    let {href} = router.resolve("/passwordMissing");
+    window.open(href,'_blank');
+  }
+  const submit=()=>{
+    psdChangeRef.value.validate(valid=>{
+      if(valid){
+        if(Math.random()>0.75){
+          ElMessage.error('原密码错误')
+        }else{
+          //TODO 注册成功，跳转
+          ElMessage({
+            message: '修改成功,请重新登录',
+            type: 'success',
+            duration:0
+          })
+          setTimeout(()=>{
+            localStorage.removeItem('yben_token')
+            router.replace('/login')
+          },1000)
+        }
+      }
+    })
+  }
+
+</script>
+
+<template>
+    <div class="psdChange-container">
+      <div class="fixed-header">
+        <span>
+          HORIZONINSIGHTS
+        </span>
+      </div>
+      <div class="page-title">
+        修改密码
+      </div>
+      <div class="regitser-form-box" id="regitser-form-box">
+        <!-- PC端表单 -->
+        <el-form :model="psdChange.form" class="regitser-form" :rules="psdChange.rules" ref="psdChangeRef">
+          <el-form-item prop="passwordOrigin">
+            <el-input v-model="psdChange.form.passwordOrigin" size="large" type="password" placeholder="请输入原密码">
+              <template #suffix>
+                <span style=" color:#1856A7;cursor: pointer;white-space: nowrap;" 
+                @click="psdMissingPageGo">忘记密码？</span>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input v-model="psdChange.form.password" size="large" type="password" placeholder="请输入新密码"></el-input>
+          </el-form-item>
+          <el-form-item prop="passwordConfirm" style="margin-bottom: 0;">
+            <el-input v-model="psdChange.form.passwordConfirm" size="large" type="password" placeholder="请再次输入新密码"></el-input>
+          </el-form-item>
+        </el-form>
+        <!-- 移动端表单 -->
+        <el-form :model="psdChange.form" class="mobile-regitser-form" id="mobile-form-field" label-width="45px"
+        :rules="psdChange.rules" ref="psdChangeRef" hide-required-asterisk label-position="left">
+          <el-form-item prop="passwordOrigin" label="原密码" size="large">
+            <el-input v-model="psdChange.form.passwordOrigin" size="large" type="password" placeholder="请输入原密码">
+              <template #suffix>
+                <span style=" color:#1856A7;cursor: pointer;white-space: nowrap;" 
+                @click="psdMissingPageGo">忘记密码？</span>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password" size="large" label="密码">
+            <el-input v-model="psdChange.form.password" size="large" type="password" placeholder="请输入新密码"></el-input>
+          </el-form-item>
+          <el-form-item prop="passwordConfirm" style="margin-bottom: 0;" size="large" label="密码">
+            <el-input v-model="psdChange.form.passwordConfirm" size="large" type="password" placeholder="请再次输入新密码"></el-input>
+          </el-form-item>
+        </el-form>
+        <el-button type="primary" @click="submit" class="psdChange-button" size="large">确定</el-button>
+        <!-- <el-button @click="router.back()" class="psdChange-button" style="background-color: white;" size="large">返回</el-button> -->
+      </div>
+    </div>
+</template>
+  
+<style lang="scss" scoped> 
+  .psdChange-container{
+    padding-top: 68px;
+    .page-title{
+      text-align: center;
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 28px;
+      color: #1856A7;
+      padding: 56px 0 48px;
+    }
+    .regitser-form-box{
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      align-items: center;
+      .regitser-form{
+        width: 360px;
+      }
+      .mobile-regitser-form{
+        display: none;
+      }
+      .psdChange-button{
+        margin-top: 40px;
+        width: 360px;
+        background-color: #1856A7;
+      }
+    }
+  }
+  @media screen and (max-width: 768px) {
+    .psdChange-container{
+      padding: 50px 30px 30px;
+      .page-title{
+        text-align: left;
+        padding: 50px 0 30px;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 22px;
+        color: #333333;
+      }
+      .regitser-form-box{
+        .regitser-form{
+          display: none;
+        }
+        .mobile-regitser-form{
+          display: block;
+          width: 100%;
+        }
+        .psdChange-button{
+          margin-top: 40px;
+          width: 100%;
+          background-color: #1856A7;
+        }
+      }
+    }
+  }
+</style>
+<style lang="scss">
+@media screen and (max-width: 768px) {
+  .el-form-item__error{
+    left: -45px;
+  }
+}
+
+</style>

src/views/verification/passwordMissing.vue

@@ -0,0 +1,343 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import {ElMessage,ElMessageBox} from 'element-plus'
+import { useRouter } from 'vue-router';
+import {CaretBottom} from '@element-plus/icons-vue'
+
+  const router = useRouter()
+
+  const psdMissingRef = ref(null)
+  const phoneRef = ref(null)
+
+  const psdMissing=reactive({
+    form:{
+      email:'',
+      phone:'',
+      phonePre:'+86',
+      password:'',
+      passwordConfirm:'',
+      verificationCode:''
+    },
+    rules:{
+      email:[{required: true, message:'邮箱不能为空', trigger: 'blur'},
+      {type:'email',message:'邮箱格式不正确', trigger: 'blur'}],
+      phone:[{required: true,message:'手机号码不能为空', trigger: 'blur'},
+      {validator:(rule,value,callback)=>{
+        if(value!='' && !Number(value) || value.indexOf('.')!=-1){
+          callback(new Error('必须都为数字'))
+        }else{
+          callback()
+        }
+      }, trigger: 'blur'}],
+      password:{required: true, message:'密码不能为空', trigger: 'blur'},
+      passwordConfirm:[{required: true, message:'密码不能为空', trigger: 'blur'},
+      {validator:(rule,value,callback)=>{
+        if(psdMissing.form.passwordConfirm!==psdMissing.form.password){
+          callback(new Error('两次密码不一致'))
+        }else{
+          callback()
+        }
+      }, trigger: 'blur'}],
+      verificationCode:{required: true, message:'验证码不能为空', trigger: 'blur'}
+
+    }
+  })
+
+  let codeTimer=null
+  const codeInfo=reactive({
+    timeout:60,// 秒
+    isRequesting:false
+  })
+
+// ----------------------------------------------------方法
+
+const loginType=ref(1)
+const changeLoginType=(type)=>{
+  if(type == loginType.value) return 
+  loginType.value=type
+}
+
+  const sendVerCode=()=>{
+    codeInfo.isRequesting=true
+    codeInfo.timeout--
+    codeTimer=setInterval(()=>{
+      if(codeInfo.timeout==1){
+        codeInfo.isRequesting=false
+        codeInfo.timeout=60
+        codeTimer=null
+      }
+      codeInfo.timeout--
+    },1000)
+    // TODO 发送验证码
+    ElMessage.success('已发送验证码')
+  }
+
+  const psdMissingSubmit=()=>{
+    psdMissingRef.value.validate(valid=>{
+      if(valid){
+        if(!psdMissing.form.phonePre){
+          ElMessage.error('请选择手机区号')
+        }
+        if(Math.random()>0.5){
+          // ElMessageBox.confirm("您的账号未曾注册，请注册后登录","提示",
+          // {
+          //   confirmButtonText: '立即注册',
+          //   showCancelButton:false,
+          // }).then(res=>{
+          //   router.push('/register')
+          // }).catch(()=>{})
+        }else{
+          //TODO 注册成功，跳转
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+            duration:1000
+          })
+          setTimeout(()=>{
+            localStorage.removeItem('yben_token')
+            router.replace('/login')
+          },1000)
+        }
+      }
+    })
+  }
+  const loginPageGo=()=>{
+    let {href} = router.resolve("/login");
+    window.open(href,'_blank');
+  }
+
+</script>
+
+<template>
+    <div class="psdMissing-container">
+      <div class="fixed-header">
+        <span>
+          HORIZONINSIGHTS
+        </span>
+      </div>
+      <div class="login-type-tab">
+        <span :class="loginType==1?'active-tab':''" @click="changeLoginType(1)">邮箱验证</span>
+        <div class="tab-split"></div>
+        <span :class="loginType==2?'active-tab':''" @click="changeLoginType(2)">手机号码验证</span>
+      </div>
+      <div class="regitser-form-box" id="regitser-form-box">
+        <!-- PC端表单 -->
+        <el-form :model="psdMissing.form" class="missing-psd-form" :rules="psdMissing.rules" ref="psdMissingRef">
+          <el-form-item prop="phone" ref="phoneRef" v-if="loginType==2">
+            <div class="phone-item">
+              <el-select v-model="psdMissing.form.phonePre" size="large" style="max-width: 90px;margin-right: 10px;" placeholder="请选择">
+                <el-option label="+86" value="+86" />
+                <el-option label="101" value="101" />
+                <el-option label="3" value="3" />
+              </el-select>
+              <el-input v-model.trim="psdMissing.form.phone" size="large" style="flex-grow: 1;height: 40px;" placeholder="请输入手机号">
+                <template #suffix>
+                  <span style=" color: var(--el-color-primary);cursor: pointer;white-space: nowrap;" 
+                  @click="sendVerCode" v-if="!codeInfo.isRequesting">获取验证码</span>
+                  <span style=" color: #999999;white-space: nowrap;" v-else>{{ codeInfo.timeout }}s后再获取</span>
+                </template>
+              </el-input>
+            </div>
+          </el-form-item>
+          <el-form-item prop="email" v-else>
+            <el-input v-model="psdMissing.form.email" size="large" style="height: 40px;" placeholder="请输入邮箱" class="form-item">
+              <template #suffix>
+                <span style=" color: var(--el-color-primary);cursor: pointer;white-space: nowrap;" 
+                @click="sendVerCode" v-if="!codeInfo.isRequesting">获取验证码</span>
+                <span style=" color: #999999;white-space: nowrap;" v-else>{{ codeInfo.timeout }}s后再获取</span>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="verificationCode" >
+            <el-input v-model="psdMissing.form.verificationCode" size="large" placeholder="请输入验证码" class="form-item"></el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input v-model="psdMissing.form.password" size="large" type="password" placeholder="请输入密码" class="form-item"></el-input>
+          </el-form-item>
+          <el-form-item prop="passwordConfirm" style="margin-bottom: 0;">
+            <el-input v-model="psdMissing.form.passwordConfirm" size="large" type="password" placeholder="请再次输入密码" class="form-item"></el-input>
+          </el-form-item>
+        </el-form>
+        <!-- 移动端表单 -->
+        <el-form :model="psdMissing.form" class="mobile-missing-psd-form" id="mobile-form-field" label-width="55px"
+        label-position="left" :rules="psdMissing.rules" ref="psdMissingRef" hide-required-asterisk>
+          <el-form-item prop="phone" ref="phoneRef" v-if="loginType==2" size="large">
+            <!-- <el-select v-model="psdMissing.form.phonePre" size="large" style="margin-right: 10px;" placeholder="请选择">
+              <el-option label="+86" value="+86" />
+              <el-option label="101" value="101" />
+              <el-option label="3" value="3" />
+            </el-select> -->
+            <template #label>
+              <el-select v-model="psdMissing.form.phonePre" :suffix-icon="CaretBottom"
+              style="max-width: 55px;" placeholder="请选择" size="large">
+                <el-option label="+886" value="+86" />
+                <el-option label="101" value="101" />
+                <el-option label="3" value="3" />
+              </el-select>
+            </template>
+            <el-input v-model.trim="psdMissing.form.phone" size="large" style="flex-grow: 1;height: 40px;" placeholder="请输入手机号">
+              <template #suffix>
+                <span style=" color: var(--el-color-primary);cursor: pointer;white-space: nowrap;" 
+                @click="sendVerCode" v-if="!codeInfo.isRequesting">获取验证码</span>
+                <span style=" color: #999999;white-space: nowrap;" v-else>{{ codeInfo.timeout }}s后再获取</span>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="email" v-else label="邮箱" size="large">
+            <el-input v-model="psdMissing.form.email" size="large" style="height: 40px;" placeholder="请输入邮箱" class="form-item">
+              <template #suffix>
+                <span style=" color: var(--el-color-primary);cursor: pointer;white-space: nowrap;" 
+                @click="sendVerCode" v-if="!codeInfo.isRequesting">获取验证码</span>
+                <span style=" color: #999999;white-space: nowrap;" v-else>{{ codeInfo.timeout }}s后再获取</span>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="verificationCode" size="large" label="验证码">
+            <el-input v-model="psdMissing.form.verificationCode" size="large" placeholder="请输入验证码" class="form-item"></el-input>
+          </el-form-item>
+          <el-form-item prop="password" size="large" label="密码">
+            <el-input v-model="psdMissing.form.password" size="large" type="password" placeholder="请输入密码" class="form-item"></el-input>
+          </el-form-item>
+          <el-form-item prop="passwordConfirm" style="margin-bottom: 0;" size="large" label="密码">
+            <el-input v-model="psdMissing.form.passwordConfirm" size="large" type="password" placeholder="请再次输入密码" class="form-item"></el-input>
+          </el-form-item>
+        </el-form>
+        <el-button type="primary" @click="psdMissingSubmit" class="psdMissing-button" size="large">确定</el-button>
+        <div class="login-row">想起密码<span @click="loginPageGo">去登录</span></div>
+      </div>
+    </div>
+</template>
+  
+<style lang="scss" scoped> 
+  .psdMissing-container{
+    padding-top: 68px;
+    .login-type-tab{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 60px 48px;
+      .tab-split{
+        height: 18px;
+        width: 1px;
+        background-color: #1856A7;
+        margin: 0 20px;
+      }
+      span{
+        display: inline-block;
+        cursor: pointer;
+        font-size: 18px;
+        line-height: 25px;
+        color: #999999;
+      }
+      .active-tab{
+        color: #1856A7;
+        font-weight: 600;
+      }
+    }
+    .regitser-form-box{
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      align-items: center;
+      .missing-psd-form{
+        width: 360px;
+        .phone-item{
+          width: 100%;
+          display: flex;
+          align-items: center;
+        }
+      }
+      .mobile-missing-psd-form{
+        display: none;
+      }
+      // .form-item{
+        // width: 317px;
+      // }
+      .psdMissing-button{
+        margin-top: 40px;
+        width: 100%;
+        width: 360px;
+        background-color: #1856A7;
+      }
+      .login-row{
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        color: #333333;
+        margin: 20px 0 30px;
+        span{
+          color: #1856A7;
+          cursor: pointer;
+          margin-left: 12px;
+        }
+      }
+    }
+  }
+  // 移动端样式
+  @media screen and (max-width: 768px) {
+    .psdMissing-container{
+      padding: 100px 30px 30px;
+      .login-type-tab{
+        display: flex;
+        justify-content: flex-start;
+        margin: 0 0 30px 0;
+        .tab-split{
+          height: 18px;
+          width: 1px;
+          background-color: #1856A7;
+          margin: 0 20px;
+        }
+        span{
+          display: inline-block;
+          cursor: pointer;
+          font-size: 18px;
+          line-height: 25px;
+          color: #999999;
+        }
+        .active-tab{
+          color: #1856A7;
+          font-weight: 600;
+        }
+      }
+      .regitser-form-box{
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;    
+        .missing-psd-form{
+          display: none;
+        }
+        .mobile-missing-psd-form{
+          display: block;
+          width: 100%;
+        }
+        .psdMissing-button{
+          margin-top: 40px;
+          width: 100%;
+          width: 360px;
+          background-color: #1856A7;
+        }
+        .login-row{
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 20px;
+          color: #333333;
+          margin: 20px 0 30px;
+          span{
+            color: #1856A7;
+            cursor: pointer;
+            margin-left: 12px;
+          }
+        }
+      }
+    }
+  }
+</style>
+<style lang="scss">
+@media screen and (max-width: 768px) {
+  .el-form-item__error{
+    left: -55px;
+  }
+}
+
+</style>

src/views/verification/register.vue

@@ -0,0 +1,253 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import {ElMessage,ElMessageBox} from 'element-plus'
+import { useRouter } from 'vue-router';
+
+  const router = useRouter()
+
+  const registerRef = ref(null)
+  const phoneRef = ref(null)
+
+  const register=reactive({
+    form:{
+      userName:'',
+      companyName:'',
+      email:'',
+      phone:'',
+      phonePre:'+86',
+      password:'',
+      passwordConfirm:'',
+      verificationCode:''
+    },
+    rules:{
+      userName:{required: true, message:'姓名不能为空', trigger: 'blur'},
+      companyName:{required: true, message:'公司名称不能为空', trigger: 'blur'},
+      email:[{required: true, message:'邮箱不能为空', trigger: 'blur'},
+      {type:'email',message:'邮箱格式不正确', trigger: 'blur'}],
+      phone:[
+      {validator:(rule,value,callback)=>{
+        if(value!='' && !Number(value) || value.indexOf('.')!=-1){
+          callback(new Error('必须都为数字'))
+        }else{
+          callback()
+        }
+      }, trigger: 'blur'}],
+      password:{required: true, message:'密码不能为空', trigger: 'blur'},
+      passwordConfirm:[{required: true, message:'密码不能为空', trigger: 'blur'},
+      {validator:(rule,value,callback)=>{
+        if(register.form.passwordConfirm!==register.form.password){
+          callback(new Error('两次密码不一致'))
+        }else{
+          callback()
+        }
+      }, trigger: 'blur'}],
+      verificationCode:{required: true, message:'邮箱验证码不能为空', trigger: 'blur'}
+
+    }
+  })
+
+  let codeTimer=null
+  const codeInfo=reactive({
+    timeout:60,// 秒
+    isRequesting:false
+  })
+
+// ----------------------------------------------------方法
+  const sendVerCode=()=>{
+    codeInfo.isRequesting=true
+    codeInfo.timeout--
+    codeTimer=setInterval(()=>{
+      if(codeInfo.timeout==1){
+        codeInfo.isRequesting=false
+        codeInfo.timeout=60
+        codeTimer=null
+      }
+      codeInfo.timeout--
+    },1000)
+    // TODO 发送验证码
+    ElMessage.success('已发送验证码')
+  }
+
+  const registerSubmit=()=>{
+    registerRef.value.validate(valid=>{
+      if(valid){
+        if(!register.form.phonePre){
+          ElMessage.error('请选择手机区号')
+        }
+        if(Math.random()>0.75){
+          ElMessageBox.confirm("您的邮箱已注册，请直接登录","提示",
+          {
+            confirmButtonText: '立即登录',
+            showCancelButton:false,
+          }).then(res=>{
+            router.push('/login')
+          }).catch(()=>{})
+        }else if(Math.random()>0.5){
+          phoneRef.value.validateMessage='该手机号已绑定其他账号，请检查'
+          phoneRef.value.validateState='error'
+        }else if(Math.random()>0.25){
+          //TODO 注册成功，跳转
+          sessionStorage.setItem('transitionPageMessage','register')
+          router.replace('/transitionPage')
+        }else{
+          ElMessageBox.confirm("您的报告试用权限已超一个月，如需要延长试用期或其他帮助，请联系我们：XXXXXXXXXXXXXXXXXX","提示",
+          {
+            confirmButtonText: '复制邮箱',
+            showCancelButton:false,
+          }).then(res=>{
+            copyEmail()
+          }).catch(()=>{})
+        }
+      }
+    })
+  }
+  const loginPageGo=()=>{
+    let {href} = router.resolve("/login");
+    window.open(href,'_blank');
+  }
+  const copyEmail=()=>{
+    if (navigator.clipboard && window.isSecureContext) {
+      // navigator clipboard 向剪贴板写文本
+      navigator.clipboard.writeText('xxxxxxxxxxxxx@qq.com').then(() => {
+        ElMessage.success('复制成功')
+      });
+    }else{
+      const input = document.createElement('input');
+      input.setAttribute('readonly', 'readonly');
+      input.setAttribute('value', 'xxxxxxxxxxxxx@qq.com');
+      document.body.appendChild(input);
+      input.setSelectionRange(0, input.value.length);
+      input.select();
+      document.execCommand('copy');
+      document.body.removeChild(input);
+      ElMessage.success('复制成功')
+    }
+  }
+
+</script>
+
+<template>
+    <div class="register-container">
+      <div class="fixed-header">
+        <span>
+          HORIZONINSIGHTS
+        </span>
+      </div>
+      <div class="page-title">
+        注册账号
+      </div>
+      <div class="regitser-form-box" id="regitser-form-box">
+        <el-form :model="register.form" :rules="register.rules" ref="registerRef">
+          <el-form-item prop="userName">
+            <el-input v-model="register.form.userName" size="large" placeholder="请输入姓名" class="form-item"></el-input>
+          </el-form-item>
+          <el-form-item prop="companyName">
+            <el-input v-model="register.form.companyName" size="large" placeholder="请输入公司名称" class="form-item"></el-input>
+          </el-form-item>
+          <el-form-item prop="phone" ref="phoneRef">
+            <div class="phone-item">
+              <el-select v-model="register.form.phonePre" size="large" style="margin-right: 10px;" placeholder="请选择">
+                <el-option label="+86" value="+86" />
+                <el-option label="101" value="101" />
+                <el-option label="3" value="3" />
+              </el-select>
+              <el-input v-model.trim="register.form.phone" size="large" style="flex-grow: 1;" placeholder="请输入手机号">
+              </el-input>
+            </div>
+          </el-form-item>
+          <el-form-item prop="email">
+            <el-input v-model="register.form.email" size="large" placeholder="请输入邮箱" class="form-item">
+              <template #suffix>
+                <span style=" color: var(--el-color-primary);cursor: pointer;white-space: nowrap;" 
+                @click="sendVerCode" v-if="!codeInfo.isRequesting">获取验证码</span>
+                <span style=" color: #999999;white-space: nowrap;" v-else>{{ codeInfo.timeout }}s后再获取</span>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="verificationCode" >
+            <el-input v-model="register.form.verificationCode" size="large" placeholder="请输入邮箱验证码" class="form-item"></el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input v-model="register.form.password" size="large" type="password" placeholder="请输入密码" class="form-item"></el-input>
+          </el-form-item>
+          <el-form-item prop="passwordConfirm" style="margin-bottom: 0;">
+            <el-input v-model="register.form.passwordConfirm" size="large" type="password" placeholder="请再次输入密码" class="form-item"></el-input>
+          </el-form-item>
+        </el-form>
+        <el-button type="primary" @click="registerSubmit" class="register-button" size="large">提交信息</el-button>
+        <div class="login-row">已有账号<span @click="loginPageGo">去登录</span></div>
+        <div class="question-hint">若有任何问题，请发邮件至xxxxxxxxxx</div>
+      </div>
+    </div>
+</template>
+  
+<style lang="scss" scoped> 
+  .register-container{
+    padding-top: 68px;
+    .page-title{
+      text-align: center;
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 28px;
+      color: #1856A7;
+      padding: 56px 0 48px;
+    }
+    .regitser-form-box{
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      align-items: center;
+      .phone-item{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+      // .form-item{
+        // width: 317px;
+      // }
+      .register-button{
+        margin-top: 40px;
+        width: 100%;
+        width: 360px;
+        background-color: #1856A7;
+      }
+      .login-row{
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        color: #333333;
+        margin: 20px 0 30px;
+        span{
+          color: #1856A7;
+          cursor: pointer;
+          margin-left: 12px;
+        }
+      }
+      .question-hint{
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        color: #999999;
+      }
+    }
+  }
+</style>
+<style lang="scss">
+  #regitser-form-box{
+    .el-input,.el-input__wrapper{
+      width: 360px;
+    }
+    .phone-item{
+      width: 360px;
+      .el-select{
+        .el-input,.el-input__wrapper{
+          width: 90px;
+        }
+      }
+      .el-input,.el-input__wrapper{
+        flex-grow: 1;
+        width: unset;
+      }
+    }
+  }
+</style>

src/views/verification/transitionPage.vue

@@ -0,0 +1,114 @@
+<script setup>
+    import { useRouter} from 'vue-router';
+    import {onUnmounted, ref} from 'vue'
+    const router = useRouter()
+    /**
+     * register - 注册成功
+     * bindPhone - 绑定手机号
+     */
+    const transitionType=ref('bindPhone')
+    
+    let timer=null
+    const time = ref(3)
+    const bindPhonePageGo=()=>{
+        router.replace('/bindPhoneNo')
+    }
+
+    const ybPageGo=()=>{
+        let redirectPath=sessionStorage.getItem('login_redirect') || '/'
+        sessionStorage.removeItem('login_redirect')
+        router.replace(redirectPath)
+    }
+
+    onUnmounted(()=>{
+        timer=null
+    })
+
+    // -------------------created
+
+    // transitionType.value = sessionStorage.getItem('transitionPageMessage')
+
+    // // 判断是否是正常操作后的跳转，而不是人工在地址栏做的跳转
+    // if(!transitionType.value){
+    //     router.replace('/')
+    // }else{
+    //     if(transitionType.value =='register'){
+    //         // 设置定时器
+    //         timer=setInterval(()=>{
+    //             if(time.value==1){
+    //                 ybPageGo()
+    //                 return 
+    //             }
+    //             time.value--
+    //         },1000)
+    //     }
+    // }
+    // // 清除
+    // sessionStorage.removeItem('transitionPageMessage')
+    
+</script>
+
+<template>
+    <div class="hint-box" v-show="transitionType">
+        <div class="fixed-header">
+            <span>
+            HORIZONINSIGHTS
+            </span>
+        </div>
+        <img src="@/assets/icons/transition-success.svg" class="success-svg" />
+        <p v-if="transitionType=='register'" class="transitioin-text">您已注册成功！</p>
+        <p v-else-if="transitionType=='bindPhone'" class="transitioin-text">您已成功绑定手机号码！{{ time }}s后自动跳转</p>
+        <div class="register-buttons" v-if="transitionType=='register'" >
+            <el-button type="primary" class="transitioin-button" @click="bindPhonePageGo" 
+            style="background-color: #1856A7;">我要绑定手机号，方便下次登录！</el-button>
+            <el-button class="transitioin-button" @click="ybPageGo" style="margin-left: 0;margin-top: 20px;">不绑定</el-button>
+        </div>
+        <el-button type="primary" class="transitioin-button" @click="ybPageGo" 
+        v-else-if="transitionType=='bindPhone'" style="background-color: #1856A7;">知道了</el-button>
+    </div>
+</template>
+  
+<style lang="scss" scoped>
+    .hint-box{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        padding: 120px 30px;
+        .success-svg{
+            height: 60px;
+        }
+        .transitioin-text{
+            margin: 20px 0 40px;
+            font-weight: 400;
+            font-size: 18px;
+            line-height: 25px;
+            color: #333333;
+        }
+        .register-buttons{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 100%;
+        }
+        .transitioin-button{
+            width: 360px;
+            height: 40px;
+        }
+    }
+    @media screen and (max-width: 768px) {
+        .hint-box{
+            padding: 100px 30px;
+            .success-svg{
+                height: 100px;
+            }
+            .transitioin-text{
+                font-size: 15px;
+            }
+            .transitioin-button{
+                width: 100%;
+            }
+        }
+
+    }
+</style>