94 lines
1.8 KiB
Vue
94 lines
1.8 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 = () => {
|
|||
|
|
debugger
|
|||
|
|
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>
|
|||
|
|
</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>
|