add 登录

src/App.vue

@@ -6,13 +6,21 @@ let isTop = ref(true)
 let activeIndex = ref(0)
 let menuList = ref(['首页', '优巨引擎官网', '文档中心', '管理中心'])
 const container = ref()
+let currentRouteName = ref()
 watch(() => router.currentRoute.value.name, (newValue, oldValue) => {
+  console.log(typeof newValue);
+  currentRouteName.value = newValue
   if (newValue !== 'home') {
+    if (newValue === 'login') {
+      isTop.value = false
+    } else {
+      isTop.value = false
+    }
     window.removeEventListener('scroll', handleScrollY, true)
-    isTop.value = false
   } else {
     window.addEventListener('scroll', handleScrollY, true)
   }
+
 })
 function handleScrollY() {
   isTop.value = !container.value.getBoundingClientRect().top
@@ -22,9 +30,10 @@ function handleScrollY() {
 <template>
   <a-layout>
     <!-- 头部 -->
-    <a-layout-header :class="isTop ? 'header' : 'header header-color'">
+    <a-layout-header
+      :class="['header', isTop ? '' : 'header-color', currentRouteName === 'login' ? 'login-header' : '']">
       <div class="head-content">
-        <div class="left">
+        <div class="left" @click="router.push('/')">
           <img v-if="isTop" class="img" src="@/assets/images/1.png" alt="">
           <img v-else class="img" src="@/assets/images/1-1.png" alt="">
           <div class="name">优巨引擎·开放平台</div>
@@ -33,7 +42,8 @@ function handleScrollY() {
           <div @click="activeIndex = i" class="btn" v-for="(v, i) in menuList" :key="i"
             :class="activeIndex === i && !isTop ? 'active-btn' : ''">
             {{ v }}</div>
-          <div class="login">登录</div>
+          <div v-if="currentRouteName === 'login'" class="login" @click="router.push('/register')">注册</div>
+          <div v-else class="login" @click="router.push('/login')">登录</div>
         </div>
       </div>
     </a-layout-header>
@@ -58,6 +68,34 @@ function handleScrollY() {
       </div>
     </a-layout-footer>
   </a-layout>
+  <div class="fixed top-40vh right-20px">
+    <a-tooltip placement="left" color="white">
+      <template #title>
+        <div class="flex flex-col items-center px-20px py-20px">
+          <div class="text-16px mb-10px text-dark-500">在线客服，扫码联系</div>
+          <img class="w-160px h-160px" src="@/assets/images/16.png" alt="">
+        </div>
+      </template>
+      <div
+        class="flex flex-col justify-center items-center w-60px h-60px bg-white rounded-10px cursor-pointer customer">
+        <img class="w-30px h-30px" src="@/assets/images/3-1.png" alt="">
+        <div class="text-14px font-500 text-dark-400">客服</div>
+      </div>
+    </a-tooltip>
+    <a-tooltip placement="left" color="white">
+      <template #title>
+        <div class="flex flex-col items-center px-20px py-20px">
+          <div class="text-16px mb-10px text-dark-500">在线客服，扫码联系</div>
+          <img class="w-160px h-160px" src="@/assets/images/16.png" alt="">
+        </div>
+      </template>
+      <div
+        class="mt-20px flex flex-col justify-center items-center w-60px h-60px bg-white rounded-10px cursor-pointer customer">
+        <img class="w-30px h-30px" src="@/assets/images/3-2.png" alt="">
+        <div class="text-14px font-500 text-dark-400">公众号</div>
+      </div>
+    </a-tooltip>
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -126,7 +164,7 @@ function handleScrollY() {
         height: 32px;
         line-height: 32px;
         text-align: center;
-        background: linear-gradient(253deg, #84D3FF 0%, #2A4FAC 35%, #0F1E6C 100%);
+        background: linear-gradient(141deg, #50A7FF 0%, #1B8DFF 100%);
         border-radius: 16px 16px 16px 16px;
         font-size: 14px;
         color: #FFFFFF;
@@ -168,6 +206,12 @@ function handleScrollY() {
   color: #222222;
 }
 
+.login-header {
+  background: rgba(255, 255, 255, 0.85);
+  box-shadow: 0px 4px 4px 1px rgba(0, 0, 0, 0.06);
+  opacity: 0.9;
+}
+
 .lb-container {
   min-height: calc(100vh - 110px);
   background: white;
@@ -198,4 +242,8 @@ function handleScrollY() {
   }
 
 }
+
+.customer {
+  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+}
 </style>

src/views/home/index.vue

@@ -122,7 +122,7 @@ const toRegister = () => {
       </div>
     </div>
     <!-- 合作伙伴 -->
-    <div class="pt-70px">
+    <div class="pt-70px partner" >
       <div class="flex flex-col justify-center">
         <div class="flex justify-center items-center">
           <img class="w-93px h-21px" src="@/assets/images/10 (1).png" alt="" srcset="">
@@ -156,5 +156,8 @@ const toRegister = () => {
     background: url(@/assets/images/13.png) no-repeat;
     background-position-x: center;
   }
+  .partner {
+    background: #f4f4f4;
+  }
 }
 </style>

src/views/login/index.vue

@@ -1,12 +1,22 @@
+<script lang="ts">
+export default defineComponent({
+  name: 'login'
+})
+</script>
 <script setup lang='ts'>
-import { onMounted, ref } from 'vue'
+import { defineComponent, onMounted, ref } from 'vue'
 
 onMounted(() => {
 
 })
 </script>
 <template>
-  <div class="mt-60px">login</div>
+  <div class="login-bg !bg-center"></div>
 </template>
 <style lang='scss' scoped>
+.login-bg {
+  width: 100vw;
+  height: calc(100vh - 110px);
+  background: url(@/assets/images/4.png) no-repeat;
+}
 </style>