feat:底部新增悬停

pages/index.vue

@@ -1,7 +1,9 @@
 <template>
-  <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 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  class="h-[100px] bg-[#fff] flex items-center justify-between w-[1200px]" style="border-bottom: 1px solid #E1E1E1;">
+    <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,15 +16,16 @@
       </div>
       <!-- 右边 -->
       <ul class='flex items-center'>
-        <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)"
+        <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;" >
             登录/注册
           </n-button> -->
-        <van-button type="primary"> 登录/注册</van-button>
+          <van-button type="primary"> 登录/注册</van-button>
 
         </li>
       </ul>
@@ -44,12 +47,13 @@
             数字金融服务商
           </div>
         </div>
-        <span class="mt-[12px] mb-[50px] text-[20px] font-light" style="letter-spacing: 1px;">提交申请，立即开启企业数字化升级/提供专家1V1服务，提供企业定制化数字解决方案</span>
+        <span class="mt-[12px] mb-[50px] text-[20px] font-light"
+          style="letter-spacing: 1px;">提交申请，立即开启企业数字化升级/提供专家1V1服务，提供企业定制化数字解决方案</span>
         <!-- <n-button type="info" class="bg-[#165DFF] w-[256px] h-[67px] text-[26px]" @click="btn">
           立即申请试用
         </n-button>
         <br> -->
-        <van-button type="primary"  class="bg-[#165DFF] w-[256px] h-[67px] text-[26px]" @click="btn">立即申请试用</van-button>
+        <van-button type="primary" class="bg-[#165DFF] w-[256px] h-[67px] text-[26px]" @click="btn">立即申请试用</van-button>
       </div>
       <div class="flex-[1]">
 
@@ -104,34 +108,34 @@
     <div class="flex w-full">
       <div class="flex-[1]"></div>
       <ul class="w-[1200px] flex items-center flex-wrap justify-center mx-auto">
-      <li class="w-[285px] h-[150px] mr-[20px] mb-[20px]">
-        <img src="~/public/image/img_home_ad_0.png" alt="">
-      </li>
-      <li class="w-[285px] h-[150px] mr-[20px] mb-[20px]">
-        <img src="~/public/image/img_home_ad_1.png" alt="">
-      </li>
-      <li class="w-[285px] h-[150px] mr-[20px] mb-[20px]">
-        <img src="~/public/image/img_home_ad_2.png" alt="">
-      </li>
-      <li class="w-[285px] h-[150px] mb-[20px]">
-        <img src="~/public/image/img_home_ad_3.png" alt="">
-      </li>
-      <li class="w-[285px] h-[150px] mr-[20px]">
-        <img src="~/public/image/img_home_ad_4.png" alt="">
-      </li>
-      <li class="w-[285px] h-[150px] mr-[20px]">
-        <img src="~/public/image/img_home_ad_5.png" alt="">
-      </li>
-      <li class="w-[285px] h-[150px] mr-[20px]">
-        <img src="~/public/image/img_home_ad_6.png" alt="">
-      </li>
-      <li class="w-[285px] h-[150px]">
-        <img src="~/public/image/img_home_ad_7.png" alt="">
-      </li>
-    </ul>
-    <div class="flex-[1]">
+        <li class="w-[285px] h-[150px] mr-[20px] mb-[20px]">
+          <img src="~/public/image/img_home_ad_0.png" alt="">
+        </li>
+        <li class="w-[285px] h-[150px] mr-[20px] mb-[20px]">
+          <img src="~/public/image/img_home_ad_1.png" alt="">
+        </li>
+        <li class="w-[285px] h-[150px] mr-[20px] mb-[20px]">
+          <img src="~/public/image/img_home_ad_2.png" alt="">
+        </li>
+        <li class="w-[285px] h-[150px] mb-[20px]">
+          <img src="~/public/image/img_home_ad_3.png" alt="">
+        </li>
+        <li class="w-[285px] h-[150px] mr-[20px]">
+          <img src="~/public/image/img_home_ad_4.png" alt="">
+        </li>
+        <li class="w-[285px] h-[150px] mr-[20px]">
+          <img src="~/public/image/img_home_ad_5.png" alt="">
+        </li>
+        <li class="w-[285px] h-[150px] mr-[20px]">
+          <img src="~/public/image/img_home_ad_6.png" alt="">
+        </li>
+        <li class="w-[285px] h-[150px]">
+          <img src="~/public/image/img_home_ad_7.png" alt="">
+        </li>
+      </ul>
+      <div class="flex-[1]">
 
-    </div>
+      </div>
     </div>
 
 
@@ -147,7 +151,8 @@
       <div class="mb-[25px] flex items-center font-medium text-[30px]">
         <span>已有</span>
         <ul class="flex justify-center items-center mx-[5px] my-[20px]">
-          <li v-for="item in freeList" class=" bg-[#fff] w-[50px] h-[60px] text-[36px] text-center mx-[5px] rounded-[4px]">
+          <li v-for="item in freeList"
+            class=" bg-[#fff] w-[50px] h-[60px] text-[36px] text-center mx-[5px] rounded-[4px]">
             {{ item }}
           </li>
         </ul>
@@ -159,7 +164,7 @@
         立即申请试用
       </n-button>
       <br> -->
-        <van-button type="primary">立即申请试用</van-button>
+      <van-button type="primary">立即申请试用</van-button>
     </div>
     <div>
 
@@ -187,7 +192,7 @@
               <!-- <n-button type="info" class="bg-[#165DFF] text-[18px] w-[130px] h-[42px]" @click="btnContent(currentIndex)">
                 查看详情
               </n-button> -->
-            <van-button type="primary" @click="btnContent(currentIndex)">查看详情</van-button>
+              <van-button type="primary" @click="btnContent(currentIndex)">查看详情</van-button>
 
             </div>
           </div>
@@ -238,13 +243,23 @@
             <span class="text-[#fff] text-[17px] mb-[20px]">
               关注公众号
             </span>
-            <img :src="bottomCode.wxQrUrl" style="width:100px;height:100px" alt="">
+            <n-popover trigger="hover">
+              <template #trigger>
+                <img :src="bottomCode.wxQrUrl" class="w-[100px] h-[100px]" alt="">
+              </template>
+              <img :src="bottomCode.wxQrUrl" class="w-[200px] h-[200px]" alt="">
+            </n-popover>
           </div>
           <div class="flex flex-col items-center justify-center mx-[50px]" v-if="bottomCode.iosQrUrl">
             <span class="text-[#fff] text-[17px] mb-[20px]">
               iosAPP下载
             </span>
-            <img :src="bottomCode.iosQrUrl" style="width:100px;height:100px" alt="">
+            <n-popover trigger="hover">
+              <template #trigger>
+                <img :src="bottomCode.iosQrUrl" class="w-[100px] h-[100px]" alt="">
+              </template>
+              <img :src="bottomCode.wxQrUrl" class="w-[200px] h-[200px]" alt="">
+            </n-popover>
 
           </div>
           <div class="flex flex-col items-center justify-center" v-if="bottomCode.androidQrUrl">
@@ -252,8 +267,12 @@
             <span class="text-[#fff] text-[17px] mb-[20px]">
               安卓APP下载
             </span>
-            <img :src="bottomCode.androidQrUrl" style="width:100px;height:100px" alt="">
-            <!-- <img src="~/public/image/tryOut.png" style="width:100px;height:100px" alt=""> -->
+            <n-popover trigger="hover">
+              <template #trigger>
+                <img :src="bottomCode.androidQrUrl" class="w-[100px] h-[100px]" alt="">
+              </template>
+              <img :src="bottomCode.androidQrUrl" class="w-[200px] h-[200px]" alt="">
+            </n-popover>
           </div>
         </div>
       </div>
@@ -262,12 +281,12 @@
       <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>
-          渝ICP备2023000211号-4
-        </span>
-        <span class="mx-[10px]">
-          营业执照:91500000MA60U0WQ8Y
-        </span>
+          <span>
+            渝ICP备2023000211号-4
+          </span>
+          <span class="mx-[10px]">
+            营业执照:91500000MA60U0WQ8Y
+          </span>
         </div>
         <div class="my-[20px]">
           违法和不良信息举报邮箱:sugarpark@163.com
@@ -312,13 +331,14 @@
         </n-form-item>
         <n-form-item path="verifyCode" label="验证码" class="">
           <n-input v-model:value="customer.verifyCode" class="h-[55px] leading-[55px]" placeholder="请输入验证码" />
-          <n-button type="info" class="w-[150px] h-[55px] text-[#fff] bg-[#1f4df5] ml-[20px] rounded-[4px] text-[18px]" :disabled="countdown != 0"
-            @click="verifyCodeFn">
+          <n-button type="info" class="w-[150px] h-[55px] text-[#fff] bg-[#1f4df5] ml-[20px] rounded-[4px] text-[18px]"
+            :disabled="countdown != 0" @click="verifyCodeFn">
             {{ countdown == 0 ? '获取验证码' : countdown }}
           </n-button>
         </n-form-item>
         <div class="flex justify-center mt-[20px]">
-          <n-button type="info" class="w-[700px] h-[55px] text-[20px] text-[#fff] bg-[#1f4df5] rounded-[4px]" @click="handleValidateButtonClick">
+          <n-button type="info" class="w-[700px] h-[55px] text-[20px] text-[#fff] bg-[#1f4df5] rounded-[4px]"
+            @click="handleValidateButtonClick">
             立即提交
           </n-button>
         </div>
@@ -358,7 +378,7 @@ const headerTitle = reactive([
   }
 ]
 )
-const headerClass =ref<string>('')
+const headerClass = ref<string>('')
 const titleRight = (i: string) => {
   if (i == 'probation') {
     btn()
@@ -366,11 +386,11 @@ const titleRight = (i: string) => {
   }
   document.querySelector('#' + i)?.scrollIntoView()
 }
-const mouseenterFn = (i:string)=>{
+const mouseenterFn = (i: string) => {
   // console.log('mouseenterFn')
-  headerClass.value =i
+  headerClass.value = i
 }
-const mouseleaveFn =()=>{
+const mouseleaveFn = () => {
   headerClass.value = ''
 }
 const freeList = reactive(['3', '0', '7', '0', '1', '3', '7', '4'])
@@ -391,7 +411,7 @@ const num = reactive([{
 const getImg = (name: number) => {
   return new URL(`/public/image/p_img_home_qs_0_${name}.png`, import.meta.url).href;
 }
-const loginBtn =()=>{
+const loginBtn = () => {
   console.log('跳转')
   window.location.replace('http://p.daicrm.com/#/login')
   // window.location.href('http://p.daicrm.com/#/login')
@@ -415,7 +435,7 @@ const go = (i: number) => {
 const btnContent = (i: number) => {
   // 跳转
   console.log('跳转', i)
-  localStorage.setItem('hryk-id',homeList.value[i].id)
+  localStorage.setItem('hryk-id', homeList.value[i].id)
   router.push({
     path: '/list/'
   })
@@ -581,13 +601,16 @@ p {
   background: url(~/public/image/try_out.png) no-repeat;
   background-size: cover;
 }
-.advantage{
+
+.advantage {
   background: url(~/public/image/advantage.png) no-repeat;
   background-size: cover;
 }
-img{
+
+img {
   height: 100%;
 }
+
 .n-carousel {
   width: 529px !important;
 }
@@ -619,16 +642,19 @@ img{
   width: 40px;
   background: #0047FF;
 }
-.text1{
+
+.text1 {
   display: inline-block;
-  white-space: nowrap; 
-  width: 300px; 
+  white-space: nowrap;
+  width: 300px;
   overflow: hidden;
-  text-overflow:ellipsis;
+  text-overflow: ellipsis;
 }
-::v-deep(.n-button){
-  border-radius:4px !important;
+
+::v-deep(.n-button) {
+  border-radius: 4px !important;
 }
+
 // 框
 ::v-deep(.n-card-header__main) {
   flex: inherit !important;
@@ -649,7 +675,8 @@ img{
 ::v-deep(.n-form-item-label) {
   display: none !important;
 }
-::v-deep(.n-form-item){
+
+::v-deep(.n-form-item) {
   --n-label-height: 10px !important;
 }
 
@@ -661,44 +688,52 @@ img{
   height: 55px !important;
   line-height: 55px !important;
 }
-::v-deep(.n-card-header__main){
+
+::v-deep(.n-card-header__main) {
   font-size: 30px;
 }
+
 // 按钮样式
-::v-deep(.van-button--normal){
+::v-deep(.van-button--normal) {
   border-radius: 6px;
   background: #0047FF;
   border: 0;
   height: 67px;
 }
-.trial ::v-deep(.van-button--normal){
+
+.trial ::v-deep(.van-button--normal) {
   border-radius: 6px;
   background: #0047FF;
   border: 0;
   width: 400px;
   height: 67px;
 }
-::v-deep(.van-button__content){
+
+::v-deep(.van-button__content) {
   font-size: 24px;
 }
-.title ::v-deep(.van-button--normal){
+
+.title ::v-deep(.van-button--normal) {
   border-radius: 6px;
   background: #0047FF;
   border: 0;
   width: 130px;
   height: 42px;
 }
-.title ::v-deep(.van-button__content){
+
+.title ::v-deep(.van-button__content) {
   font-size: 16px;
 }
-.message ::v-deep(.van-button--normal){
+
+.message ::v-deep(.van-button--normal) {
   border-radius: 6px;
   background: #0047FF;
   border: 0;
   width: 130px;
   height: 42px;
 }
-.message ::v-deep(.van-button__content){
+
+.message ::v-deep(.van-button__content) {
   font-size: 16px;
 }
 </style>