96 lines
1.9 KiB
Vue
96 lines
1.9 KiB
Vue
<script setup lang="ts">
|
||
import { useRouter } from 'vue-router'
|
||
import { ref } from 'vue'
|
||
|
||
const router = useRouter()
|
||
// 记录切换值
|
||
const changeValue = ref('/book/index')
|
||
|
||
const changeRouters = () => {
|
||
if (changeValue.value == '/book/my') {
|
||
changeValue.value = '/book/index'
|
||
} else if (changeValue.value == '/book/index') {
|
||
changeValue.value = '/book/my'
|
||
}
|
||
router.push(changeValue.value)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="bg-color">
|
||
<div class="nav-link">
|
||
<div class="site-nav-bd">
|
||
<ul>
|
||
<li @click="router.push('/book/login?returnUrl=/book/index&status=0')">亲，请登录</li>
|
||
<li @click="router.push('/book/login?returnUrl=/book/index&status=1')">免费注册</li>
|
||
</ul>
|
||
<ul>
|
||
<li @click="changeRouters">{{ changeValue == '/book/my' ? '商城首页' : '我的淘宝' }}</li>
|
||
<li @click="router.push('/book/trolley')">
|
||
<el-icon>
|
||
<ShoppingCart />
|
||
</el-icon>
|
||
购物车
|
||
</li>
|
||
<li @click="router.push('/book/collection')">
|
||
<el-icon>
|
||
<Collection />
|
||
</el-icon>
|
||
收藏夹
|
||
</li>
|
||
<li @click="router.push('/login')">
|
||
<el-icon><Setting /></el-icon>书城管理后台
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<router-view></router-view>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.nav-link {
|
||
background-color: #f5f5f5;
|
||
border-bottom: 1px solid #eee;
|
||
width: 100%;
|
||
height: 35px;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 10000;
|
||
|
||
.site-nav-bd {
|
||
margin: 0 auto;
|
||
width: 1190px;
|
||
height: 35px;
|
||
background: #f5f5f5;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
ul {
|
||
display: flex;
|
||
}
|
||
|
||
ul li {
|
||
list-style-type: none;
|
||
height: 35px;
|
||
margin-right: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
li:hover {
|
||
color: #ff4400;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bg-color {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #f5f8fa;
|
||
overflow-y: scroll;
|
||
}
|
||
</style>
|