hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-13 04:46:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

头部导航样式更改

Browse Source
This commit is contained in:
zhaofang
2022-08-31 17:15:52 +08:00
parent 11800257fd
commit b2bc6c9650
21 changed files with 165 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/PortalHeader.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="portal-header">
<div class="portal-content xcontent">
<div class="portal-top-nav">
<div style="display: flex;justify-content: space-between;">
<div style="display: flex;justify-content: flex-start;align-items: center;">
<img src="../assets/logo/logo.png" style="width:221px;height: 30px;" />
<div style="flex:1;display: flex;justify-content: flex-start;align-items: center;">
<img src="../assets/logo/logo.png" style="width:240px;height: 40px;" />
<div style="display: flex;justify-content: space-around;margin-left: 20px;">
<div class="top-nav" :class="current == 'index' ? 'current-nav' : ''"><router-link to="/index">首页</router-link></div>
<div class="top-nav" :class="current == 'course' ? 'current-nav' : ''"><router-link to="/course">课程</router-link></div>
@@ -24,9 +24,9 @@
</div>
</div>
</div>
<div style="display: flex;justify-content: flex-end;align-items: center;">
<div style="flex:1;display: flex;justify-content: flex-end;align-items: center;">
<div v-if="goSearch !=10">
<el-input v-show="!hideSearch" placeholder="请输入标题搜索" style="width: 260px;" @keyup.enter.native="searchJump()" clearable maxlength="50" v-model="keyword" class="input-with-select">
<el-input v-show="!hideSearch" placeholder="搜索" style="width: 260px;border-radius: 20px !important;" @keyup.enter.native="searchJump()" clearable maxlength="50" v-model="keyword" class="input-with-select">
<el-select v-if="current == 'index'" v-model="findType" style="width: 75px;" slot="prepend" placeholder="请选择">
<el-option label="课程" value="1"></el-option>
<el-option label="案例" value="2"></el-option>
@@ -40,12 +40,24 @@
</div>
<div class="person-action" >
<!-- 消息 -->
<el-badge :value="userMsg" :hidden="userMsg == 0" class="message-count">
<el-link class="person-action-index" type="primary" style="margin-right:10px;" :href="`${webBaseUrl}${isTiao ? '/uc/study/task' : '/uc/study/courses'}`" :underline="false">个人中心</el-link>
<!-- <el-link type="primary" @click="logout()" icon="el-icon-switch-button" :underline="false">退出</el-link> -->
<el-badge class="person-action-index message-count" :value="userMsg" :hidden="userMsg == 0">
<el-tooltip content="消息" placement="bottom" effect="light" :visible-arrow="false" popper-class="text-tooltip">
<el-link type="primary" :href="`${webBaseUrl}/message`" icon="el-icon-bell" :underline="false"></el-link>
</el-tooltip>
</el-badge>
<div>
<el-dropdown class="person-action-index">
<span class="el-dropdown-link">
<span style="color: #333;">学员</span><i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>学员</el-dropdown-item>
<el-dropdown-item>教师</el-dropdown-item>
<el-dropdown-item>管理员</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div class="person-action-index">
<a :href="`${webBaseUrl}${isTiao ? '/uc/study/task' : '/uc/study/courses'}`">
<el-avatar :src="userInfo.avatar" v-if="userInfo.avatar !== '' "></el-avatar>
<div v-else class="uavatar">
@@ -54,8 +66,7 @@
</div>
</a>
</div>
<el-link type="primary" style="margin-right:10px;" :href="`${webBaseUrl}${isTiao ? '/uc/study/task' : '/uc/study/courses'}`" :underline="false">个人中心</el-link>
<el-link type="primary" @click="logout()" icon="el-icon-switch-button" :underline="false">退出</el-link>
<div style="color:#333;font-size: 16px;font-weight: 600;">{{userInfo.name}}</div>
</div>
</div>
</div>
@@ -230,24 +241,33 @@ export default {
}
.portal-header {
margin: 0 auto;
// margin: 0 87px;
height: 72px;
display: flex;
align-items: center;
background-color: #ffffff;
border-bottom: 1px solid #f0f0f0;
// align-items: center;
background: rgba(255,255,255,0.12);
// background-color: #ffffff;
// border-bottom: 1px solid #f0f0f0;
// line-height: 56px;
//width: 100%;
// padding: 5px 0px 0px;
}
.portal-content {
margin: 0px auto;
.portal-top-nav {
width: 100%;
margin: 0px 40px;
//width: 1050px;
.person-action{
display: flex;
justify-content: flex-end;
align-items: center;
margin-left: 10px;
.person-action-index{
margin-left: 40px;
font-size: 16px;
font-weight: 600;
color: #333333 !important;
}
::v-deep .message-count{
margin-right: 20px;
i{
@@ -269,8 +289,11 @@ export default {
}
}
.top-nav {
text-align: center;
line-height: 56px;
font-size: 16px;
// text-align: center;
font-weight: 600;
color: #333330;
line-height: 72px;
padding: 0px 10px;
white-space:nowrap;
}
@@ -279,8 +302,8 @@ export default {
color: #4489ce;
}
.current-nav {
color: #fff;
background: #588afc;
color: #387DF7;
// background: #588afc;
// border-bottom: 4px solid;
}
::v-deep .el-badge {
@@ -300,10 +323,10 @@ export default {
border-radius: 0;
}
.input-with-select-btn {
.input-with-select-btn {
font-size: 25px !important;
margin: 0 !important;
padding: 0 !important
padding: 0 !important;
}
.message-count a {
color: #858d99;