<template>
|
|
<!--导航区 -->
|
<div class="nav-bar">
|
<RouterLink class="navlink" to="/AgingLibrary" >陈化库</RouterLink>
|
<RouterLink class="navlink" to="/FormationLibrary" >化成库</RouterLink>
|
<RouterLink class="navlink" to="/StaticLibrary" >静置库</RouterLink>
|
<RouterLink class="navlink" to="/Twoletters" >二封</RouterLink>
|
<RouterLink class="navlink" to="/Volume" >分容库</RouterLink>
|
<RouterLink class="navlink" to="/highTemperature" >老化库</RouterLink>
|
<RouterLink class="navlink" to="/roomTemperature" >常温库</RouterLink>
|
<RouterLink class="navlink" to="/Baozhuang" >包装</RouterLink>
|
</div>
|
<!--注意事项-->
|
<div class="area">
|
<RouterView :key="$route.fullPath" ></RouterView>
|
</div>
|
</template>
|
<script setup>
|
import { RouterView,RouterLink } from 'vue-router';
|
|
</script>
|
<style>
|
.nav-bar {
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
height: 50px;
|
background-color: #f5f5f5;
|
border-bottom: 1px solid #ccc;
|
}
|
.navlink {
|
width: 100px;
|
height: 100%;
|
text-decoration:none;
|
text-align: center;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
color: rgb(0, 195, 255);
|
}
|
.navlink:hover{
|
background-color: rgb(0, 195, 255);
|
color: #ffffff;
|
}
|
|
</style>
|
