new-hjb-pc/hjb_pc/layouts/default.vue

<template>
  <div class="w-100% h100vh relative">
    <!-- 头部广告 -->
    <LayoutAdvertisement :pc-home-con="pcHomeCon" v-if="pcHomeCon &&pcHomeCon.advertisement && pcHomeCon.advertisement.imageUrl && !pcHomeCon.advertisement.status && useStore.isHomePage"></LayoutAdvertisement>

    <!-- 共享的头部内容 -->
    <LayoutHeader :pc-home-con="pcHomeCon"></LayoutHeader>
    <main class="main_Box">
      <!-- 页面内容 -->
      <div class="h-100%">
        <!-- 内容区域 -->
        <div v-loading="loading">
          <slot></slot>
        </div>

        <!-- 右侧黑条-->
        <!-- <right-navigation :isShowCoupon="isShowCoupon"></right-navigation> -->
      </div>
    </main>
    <!-- 共享的底部内容 -->
    <LayoutFooter :pc-home-con="pcHomeCon"></LayoutFooter>
    <!-- 登录弹窗 -->
    <UserLogin ref="userLoginRef" @on-login-succeeded="onLoginSucceeded"></UserLogin>
    <FixedRight :isShowGoTop="isShowGoTop"/>
  </div>
</template>

<script setup lang="ts">
useHead({
  title: '花机宝 鲜花蛋糕行业高效运营管理系统',
  meta: [
    {
      name: 'description',
      content:
          '花机宝商城',
    },
    {
      name: 'keywords',
      content:
          '花机宝商城',
    },
  ],
  bodyAttrs: {
    class: 'test',
  },
})

import useDialog from "~/composables/useDialog"; 
import FixedRight from "~/components/FixedRight.vue"; 
import {pcHomeConfigApi} from "~/server/homeApi";
import {useUserStore} from "~/stores/user";
import { shallowRef, ref, onMounted } from 'vue'
import {useAppStore} from "~/stores/app";
import {tokenIsExistApi} from "~/server/userApi";
const userLoginRef = shallowRef()
const userStore = useUserStore()
const useStore = useAppStore()

const loading= ref<boolean>(false)
// ==================================================提供给FixedRight.vue
const isShowGoTop = ref(false)
const getScrollTop = () => {
    const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop    
    if (scrollTop >= 400) isShowGoTop.value = true
    else isShowGoTop.value = false
}
onMounted(() => setTimeout(getScrollTop, 0))
window.addEventListener('scroll', getScrollTop)
// ==================================================


//没登录，清除缓存
if(!userStore.isLogin)window.localStorage.clear();

//首页配置
const { data: pcHomeCon } = useAsyncData(() => pcHomeConfigApi())

//动画
const { $aos } = useNuxtApp()
onMounted(() => {
  $aos().init({
    easing: 'ease-out-back',
    duration: 3000,
  })
  getTokenIsExist()
})

//购物车没登录状态下显示0
const { getCarNumber } = useAppStore()
const getTokenIsExist = async () =>{
  let data = await tokenIsExistApi()
  if(!data) await getCarNumber(0)
}

//登录弹窗
const nuxtApp = useNuxtApp()
nuxtApp.provide('onHandlerLogin', () => {
  userLoginRef.value.open()
})

//登录成功后回调
const onLoginSucceeded = () => {
 // location.reload();
}

//优惠券弹窗
const { bool: isShowCoupon, DialogOpen, DialogClose } = useDialog()
nuxtApp.provide('onHandlerCoupon', () => {
  DialogOpen()
})
nuxtApp.provide('onHandlerCloseCoupon', () => {
  DialogClose()
})
</script>
<style scoped lang="scss">
.floatClass:hover .floatTitle{
  display: block !important;
  animation: slideRight 0.5s forwards; /* 调用名为slideRight的动画，持续2秒 */
}
@keyframes slideRight {
  from {
    left: -150px; /* 元素初始位置在左侧屏幕外 */
  }
  to {
    left: -122px; /* 元素最终位置靠左边缘 */
  }
}
.main_Box{
  padding-top: .5208rem;
  background-color: #fff;
}
.floatClass:hover{
  width: 100%;
  background: #E93323;
}
.floatTitle{
  height: 40px;
  background: #222222;
  padding: 0 27px;
  font-size: 14px;
  color: #fff;
  line-height: 40px;
  left: -122px;
  border-radius: 3px;
  display: none;
}
.floatTitle::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -16px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent #222222; /* 右边三角形的颜色 */
  transform: translateY(-50%);
}
.right-278px,.right-0px{
  transition: all 1s;
}
.rightNavigation{
  .title{
    display: none;
  }
}

</style>