2

xxyy

2025-02-12 a89ebd95326deb11bd98ee2d83f3b876a079d8a2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<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>