You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
2.7 KiB
92 lines
2.7 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-08 08:51:01
|
|
@ 备注: 公共底部组件
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { useRoute,useRouter } from 'vue-router'
|
|
import SvgIcon from '@/components/svgIcon/index.vue'
|
|
|
|
import FloatingBall from './FloatingBall.vue'
|
|
const goTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const footerActive = ref<number>(route.query.fa?route.query.fa:1)
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-12 13:14:24
|
|
@ 功能: 单击底部菜单
|
|
*/
|
|
const openPage = (val:number) => {
|
|
switch (val) {
|
|
case 2:
|
|
router.push({ path: "/news",query:{id: "16213847972425134",fa:2}});
|
|
break;
|
|
case 3:
|
|
router.push({ path: "/app",query:{fa:3}});
|
|
break;
|
|
case 4:
|
|
router.push({ path: "/news",query:{id: "16213848089876281",fa:4}});
|
|
break;
|
|
case 5:
|
|
router.push({ path: "/user",query:{fa:5}});
|
|
break;
|
|
case 6:
|
|
router.push({ path: "/doc",query:{fa:6}});
|
|
break;
|
|
default:
|
|
router.push({ path: "/"});
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<template>
|
|
<div class="contentBetween">
|
|
<div @click="openPage(1)" :class="footerActive==1?'footerBox active':'footerBox'">
|
|
<div class="footSvg"><SvgIcon icon-class="homepage" :size="20" /></div>
|
|
<div>首页</div>
|
|
</div>
|
|
<div @click="openPage(2)" :class="footerActive==2?'footerBox active':'footerBox'">
|
|
<div class="footSvg"><SvgIcon icon-class="gyl" :size="20" /></div>
|
|
<div>资讯</div>
|
|
</div>
|
|
<div @click="openPage(3)" :class="footerActive==3?'footerBox active':'footerBox'">
|
|
<div class="footSvg"><SvgIcon icon-class="all" :size="20" /></div>
|
|
<div>应用</div>
|
|
</div>
|
|
<div @click="openPage(6)" :class="footerActive==6?'footerBox active':'footerBox'">
|
|
<div class="footSvg"><SvgIcon icon-class="folder" :size="20" /></div>
|
|
<div>云盘</div>
|
|
</div>
|
|
<div @click="openPage(5)" :class="footerActive==5?'footerBox active':'footerBox'">
|
|
<div class="footSvg"><SvgIcon icon-class="user" :size="20" /></div>
|
|
<div>我的</div>
|
|
</div>
|
|
<FloatingBall @click="router.push({ path: '/agent',query:{fa:8}});">AI</FloatingBall>
|
|
</div>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
|
|
.fixBtn{
|
|
x: 100px;
|
|
y:300px;
|
|
width: 50px;
|
|
height: 50px;
|
|
position: fixed;
|
|
}
|
|
|
|
.footerBox{
|
|
width: 20%;
|
|
text-align: center;
|
|
background-color: #FFFFFF;
|
|
padding: 10px 0;
|
|
border-top: 1px solid #F5F5F5;
|
|
}
|
|
|
|
.footerBox.active{
|
|
color: #409EFF;
|
|
width: 20%;
|
|
text-align: center;
|
|
}
|
|
</style>
|