fix:顶部样式调整

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex w-full title">
+  <div class="flex w-full h-[100px] title fixed top-0 left-0 bottom-0 z-20 bg-[#fff]" style="border-bottom: 1px solid #E1E1E1;">
     <div class="flex-[1]"></div>
-    <div id="home" class="h-[100px] bg-[#fff] flex items-center justify-between w-[1200px]">
+    <div  class="h-[100px] bg-[#fff] flex items-center justify-between w-[1200px]" style="border-bottom: 1px solid #E1E1E1;">
       <!-- 头部title -->
       <div class="flex items-center">
         <img src="~/public/favicon.ico" class="w-[50px] h-[50px] mr-[10px]" alt="">
@@ -14,10 +14,10 @@
       </div>
       <!-- 右边 -->
       <ul class='flex items-center'>
-        <li v-for="i in headerTitle" :key="i.go" @click="titleRight(i.go)"
+        <li v-for="i in headerTitle" :key="i.go" @mouseenter="mouseenterFn(i.go)" @mouseleave="mouseleaveFn"  :class="headerClass ==i.go?'text-[#1f4df5]':''" @click="titleRight(i.go)"
           class="pr-[70px] text-[#999999] cursor-pointer text-[18px]">
           {{ i.title }}
-        </li>
+        </li> 
         <li class="px-[16px] text-[#999999] font-medium" @click="loginBtn">
           <!-- <n-button type="info" class="bg-[#165DFF] text-[18px] w-[130px] h-[42px]" style="border-radius: 6px;" >
             登录/注册
@@ -32,7 +32,7 @@
     </div>
   </div>
   <!-- 图片 -->
-  <div>
+  <div id="home" class="mt-[100px]">
     <div class="relatives flex ">
       <div class="flex-[1]">
       </div>
@@ -206,27 +206,27 @@
   </div>
   <div class="w-full bg-[#1f1d2a] pt-[20px] pb-[10px] relative" id="contact">
     <div class="w-[1200px] m-auto">
-      <div class="flex justify-between">
+      <div class="flex justify-between my-[20px]">
         <!-- 左侧 -->
         <div class="flex">
           <!-- 左边 -->
           <div class="flex  flex-col text-[#999999] mr-[30px]">
-            <h3 class="text-[16px] font-medium text-[#fff]">
+            <h3 class="text-[17px] font-medium text-[#fff]">
               联系方式
             </h3>
-            <span class="text-[12px] my-[20px]">
+            <span class="text-[13px] my-[20px]">
               客服： kefu@meloinfo.com
             </span>
-            <span class="text-[12px]">
+            <span class="text-[13px]">
               商务： 17723267692（微信同号）
             </span>
           </div>
           <!-- 地址 -->
           <div class="text-[#999999]">
-            <h3 class="text-[16px] font-medium mb-[20px] text-[#fff]">
+            <h3 class="text-[17px] font-medium mb-[20px] text-[#fff]">
               公司地址
             </h3>
-            <span class="text-[12px]">
+            <span class="text-[13px]">
               重庆市两江新区大竹林街道清枫北路10号3幢双子座A座1406
             </span>
           </div>
@@ -235,13 +235,13 @@
         <div class="flex items-center justify-center">
           <div class="flex flex-col items-center justify-center ml-" v-if="bottomCode.wxQrUrl">
             <!-- <div class="flex flex-col items-center justify-center"> -->
-            <span class="text-[#fff] text-[16px] mb-[20px]">
+            <span class="text-[#fff] text-[17px] mb-[20px]">
               关注公众号
             </span>
             <img :src="bottomCode.wxQrUrl" style="width:100px;height:100px" alt="">
           </div>
           <div class="flex flex-col items-center justify-center mx-[50px]" v-if="bottomCode.iosQrUrl">
-            <span class="text-[#fff] text-[16px] mb-[20px]">
+            <span class="text-[#fff] text-[17px] mb-[20px]">
               iosAPP下载
             </span>
             <img :src="bottomCode.iosQrUrl" style="width:100px;height:100px" alt="">
@@ -249,7 +249,7 @@
           </div>
           <div class="flex flex-col items-center justify-center" v-if="bottomCode.androidQrUrl">
             <!-- <div class="flex flex-col items-center justify-center"> -->
-            <span class="text-[#fff] text-[16px] mb-[20px]">
+            <span class="text-[#fff] text-[17px] mb-[20px]">
               安卓APP下载
             </span>
             <img :src="bottomCode.androidQrUrl" style="width:100px;height:100px" alt="">
@@ -259,7 +259,7 @@
       </div>
 
       <!-- 备案号 -->
-      <div class="h-[154px] flex flex-col items-center justify-center text-[#585667] text-[10px] py-[60px]">
+      <div class="h-[154px] flex flex-col items-center justify-center text-[#585667] text-[13px] py-[60px]">
         <div class="pt-[30px]">
           <span>Copyright © 2023 重庆惠融数字科技有限公司版权所有</span>
         <span>
@@ -283,7 +283,7 @@
       </div>
     </div>
     <div class="absolute bottom-[140px] left-0 w-full">
-      <div class="w-full h-0 opacity-[1] border-[1px] border-[#2B374A]">
+      <div class="w-full h-0 opacity-[1] border-[0.5px] border-[#2B374A]">
 
       </div>
     </div>
@@ -358,13 +358,20 @@ const headerTitle = reactive([
   }
 ]
 )
+const headerClass =ref<string>('')
 const titleRight = (i: string) => {
   if (i == 'probation') {
     btn()
     return
   }
   document.querySelector('#' + i)?.scrollIntoView()
-
+}
+const mouseenterFn = (i:string)=>{
+  // console.log('mouseenterFn')
+  headerClass.value =i
+}
+const mouseleaveFn =()=>{
+  headerClass.value = ''
 }
 const freeList = reactive(['3', '0', '7', '0', '1', '3', '7', '4'])
 const message = useMessage()