团队冲刺(3)

调整页面头部样式

 1 <template>
 2 <div class="header">
 3     <!-- <header class="header"> -->
 4     <!-- 头部的第一行 -->
 5     <div class="top">
 6       <div class="container">
 7         <div class="loginList">
 8           <p>医学文献智能识别与检索系统</p>
 9         </div>
10         <div class="typeList">
11           
12           <p v-if="!$store.state.user.userinfo"> 
13           <!-- <p v-if="0==0"> -->
14             <span>请</span>
15               <router-link to="/login">登录</router-link>
16               <router-link class="register" to="/register">注册</router-link>
17               <!-- <router-link class="register" to="/upload">上传文件</router-link> -->
18               <router-link class="register" to="/about">关于本系统</router-link>
19           </p>
20            <p v-else>
21              <!-- <a>{{$store.state.user.userinfo.username}}</a>  -->
22             <router-link to="/search">首页</router-link>
23               <router-link class="register" to="/personalCenter">个人中心</router-link>
24               <router-link class="register" to="/upload">上传文件</router-link>
25               <router-link class="register" to="/about">关于本系统</router-link>
26               <a class="register" @click="logout">退出登录</a>
27           </p>
28         </div>
29       </div>
30     </div>
31     <!--头部第二行 搜索区域-->
32   <!-- </header> -->
33 </div>
34 </template>
35 
36 <script>
37 export default {
38 //取出来sessionStorage的值
39   //  data(){
40   //    return{
41   //          userInfo : sessionStorage.getItem("userinfo"),
42   //     },
43   //     alert(userInfo)
44   // },
45   methods:{
46      //退出登录的按钮的回调
47     logout(){
48        //派遣action退出登录
49        this.$store.dispatch('logout');
50        this.$router.push('login');
51     }
52   }
53 };
54 </script>
55 
56 <style lang="css">
57 .header > .top {
58   background-color: #eaeaea;
59   height: 50px;
60   line-height: 50px;
61 }
62 .header > .top .container {
63   width: 1200px;
64   margin: 0 auto;
65   overflow: hidden;
66 }
67 .header > .top .container .loginList {
68   float: left;
69 }
70 .header > .top .container .loginList p {
71   float: left;
72   margin-right: 10px;
73 }
74 .header > .top .container .loginList p .register {
75   border-left: 1px solid #b3aeae;
76   padding: 0 5px;
77   margin-left: 5px;
78 }
79 .header > .top .container .typeList {
80   float: right;
81 }
82 .header > .top .container .typeList a {
83   padding: 0 10px;
84 }
85 .header > .top .container .typeList a + a {
86   border-left: 1px solid #b3aeae;
87 }
88 </style>

 

遇到的问题:对登录是否成功的判断,

解决方法:利用  v-if="!$store.state.user.userinfo  判断session域里的值

明天学习:接口的编写

posted @ 2023-04-14 17:51  旺旺大菠萝  阅读(90)  评论(0)    收藏  举报