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

页面头部做成响应式的

Browse Source
This commit is contained in:
daihh
2022-09-28 10:10:31 +08:00
parent 0ce81064e8
commit 66819645e4
3 changed files with 178 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/styles/portal-index.scss
View File

@@ -6,15 +6,19 @@
.nav-bottbor{ .nav-bottbor{
width: 75%; width: 75%;
height: 4px; height: 4px;
background: #FFFFFF; background: #387DF7;
border-radius: 5px; border-radius: 5px;
position: absolute; position: absolute;
top: 75%; top: 75%;
left: 13%; left: 13%;
} }
.current-nav { .current-nav {
// color: #fff; color: #387DF7;
font-weight: 600; font-weight: 700;
>a{
color:#387DF7;
}
// background: #588afc; // background: #588afc;
// border-bottom: 4px solid; // border-bottom: 4px solid;
} }

212
src/components/PortalHeader.vue
View File

@@ -1,14 +1,14 @@
<template> <template>
<div class="portal-header"> <div class="portal-header">
<div class="portal-top-nav"> <div class="portal-top">
<div style="display: flex;justify-content: space-between;"> <div class="portal-top-left">
<div style="flex:1;display: flex;justify-content: flex-start;align-items: center;"> <div class="portal-top-logo">
<img src="../assets/logo/logo.png" v-if="current == 'qa'" style="width:240px;height: 40px;" /> <img src="../assets/logo/logo.png" v-if="current == 'qa'" style="width:160px;height: 27px;" />
<img src="../assets/logo/logo2.png" v-else style="width:240px;height: 40px;" /> <img src="../assets/logo/logo2.png" v-else style="width:160px;height: 27px;" />
<div style="display: flex;justify-content: space-around;margin-left: 20px;"> </div>
<div class="portal-top-nav">
<div class="top-nav" :class="current == 'index' ? 'current-nav' : ''"> <div class="top-nav" :class="current == 'index' ? 'current-nav' : ''">
<router-link to="/index"> <router-link to="/index">首页
首页
<div :class="current == 'index' ? 'nav-bottbor' : ''"></div> <div :class="current == 'index' ? 'nav-bottbor' : ''"></div>
</router-link></div> </router-link></div>
<div class="top-nav" :class="current == 'course' ? 'current-nav' : ''"> <div class="top-nav" :class="current == 'course' ? 'current-nav' : ''">
@@ -43,7 +43,7 @@
</router-link></div> </router-link></div>
</div> </div>
</div> </div>
<div style="flex:1;display: flex;justify-content: flex-end;align-items: center;"> <div class="portal-top-right">
<div v-if="goSearch !=10" style="position: relative;"> <div v-if="goSearch !=10" style="position: relative;">
<el-input v-show="!hideSearch" placeholder="搜索全部" style="width: 260px;border-radius: 20px !important; " @keyup.enter.native="searchJump()" clearable maxlength="50" v-model="keyword" > <el-input v-show="!hideSearch" placeholder="搜索全部" style="width: 260px;border-radius: 20px !important; " @keyup.enter.native="searchJump()" clearable maxlength="50" v-model="keyword" >
<el-select v-model="findType" style="width: 75px; border-radius:20px !important;" slot="prepend" placeholder="请选择"> <el-select v-model="findType" style="width: 75px; border-radius:20px !important;" slot="prepend" placeholder="请选择">
@@ -55,7 +55,6 @@
</el-select> </el-select>
</el-input> </el-input>
<el-button class="sear-but" @click="searchJump()" type="primary" size="mini">搜索</el-button> <el-button class="sear-but" @click="searchJump()" type="primary" size="mini">搜索</el-button>
</div> </div>
<div class="person-action" > <div class="person-action" >
@@ -63,52 +62,60 @@
<!-- <el-link v-if="current == 'qa'" class="person-action-index" type="primary" style="margin-right:10px; color:#333;" :href="`${webBaseUrl}${isTiao ? '/uc/study/task' : '/uc/study/courses'}`" :underline="false">个人中心</el-link> <!-- <el-link v-if="current == 'qa'" class="person-action-index" type="primary" style="margin-right:10px; color:#333;" :href="`${webBaseUrl}${isTiao ? '/uc/study/task' : '/uc/study/courses'}`" :underline="false">个人中心</el-link>
<el-link v-else class="person-action-index" type="primary" style="margin-right:10px; color:#fff;" :href="`${webBaseUrl}${isTiao ? '/uc/study/task' : '/uc/study/courses'}`" :underline="false">个人中心</el-link> --> <el-link v-else class="person-action-index" type="primary" style="margin-right:10px; color:#fff;" :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-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"> <div class="person-action-item">
<el-tooltip content="消息" placement="bottom" effect="light" :visible-arrow="false" popper-class="text-tooltip"> <el-badge class="person-action-index message-count" :value="userMsg" :hidden="userMsg == 0">
<el-link type="primary" :href="`${webBaseUrl}/message`" :underline="false"> <el-tooltip content="消息" placement="bottom" effect="light" :visible-arrow="false" popper-class="text-tooltip">
<svg-icon v-if="current == 'qa'" style="margin-right: 0;font-size:26px;" icon-class="message"></svg-icon> <el-link type="primary" :href="`${webBaseUrl}/message`" :underline="false">
<svg-icon v-else style="margin-right: 0;font-size:26px;" icon-class="messfff"></svg-icon> <svg-icon v-if="current == 'qa'" style="margin-right: 0;font-size:26px;" icon-class="message"></svg-icon>
</el-link> <svg-icon v-else style="margin-right: 0;font-size:26px;" icon-class="messfff"></svg-icon>
</el-tooltip> </el-link>
</el-badge> </el-tooltip>
<el-dropdown class="person-action-index"> </el-badge>
<span class="el-dropdown-link">
<span v-if="current == 'qa'" style="color: #333;">学员</span>
<span v-else style="color: #fff;">学员</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>
<el-dropdown>
<div class="el-dropdown-link" style="display:flex">
<div class="person-action-index">
<el-avatar :src="userInfo.avatar" v-if="userInfo.avatar !== '' "></el-avatar>
<div v-else class="uavatar">
<div v-if="sex === 1 "><img src="../../public/images/Avatarman.png" alt=""></div>
<div v-else><img src="../../public/images/Avatarwoman.png" alt=""></div>
</div>
</div>
<div v-if="current == 'qa'" style="color:#000;font-size: 16px;font-weight: 600;margin-top: 10px;">{{userInfo.name}}</div>
<div v-else style="color:#fff;font-size: 16px;font-weight: 600;margin-top: 10px;">{{userInfo.name}}</div>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item><a :href="`${webBaseUrl}${isTiao ? '/uc/study/task' : '/uc/study/courses'}`">个人中心</a></el-dropdown-item>
<el-dropdown-item><router-link :to="'/homePage?id='+userInfo.aid">个人主页</router-link></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div v-if="current == 'qa'" class="person-action-index" style="color:#000" @click="logout()">
<svg-icon style="margin-right: 4px;font-size:22px;" icon-class="black-out"></svg-icon>登出
</div> </div>
<div v-else class="person-action-index" style="color:#fff" @click="logout()"> <div class="person-action-item">
<svg-icon style="margin-right: 4px;font-size:22px;color: #000;" icon-class="white-out"></svg-icon>登出 <el-dropdown class="person-action-index">
<span class="el-dropdown-link">
<span v-if="current == 'qa'" style="color: #333;">学员</span>
<span v-else style="color: #fff;">学员</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>
<div class="person-action-item">
<el-dropdown>
<div class="el-dropdown-link" style="display:flex">
<div class="person-action-index">
<div v-if="userInfo.avatar !== '' " class="user-avatar">
<img :src="userInfo.avatar" style="width: 30px;height: 30px;"/>
</div>
<div v-else class="uavatar">
<div v-if="sex === 1 "><img src="../../public/images/Avatarman.png" alt=""></div>
<div v-else><img src="../../public/images/Avatarwoman.png" alt=""></div>
</div>
</div>
<div v-if="current == 'qa'" style="color:#333333 ;font-size: 14px;font-weight: 600;margin-top: 10px;">{{userInfo.name}}</div>
<div v-else style="color:#fff;font-size: 14px;font-weight: 600;margin-top: 10px;">{{userInfo.name}}</div>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item><a :href="`${webBaseUrl}${isTiao ? '/uc/study/task' : '/uc/study/courses'}`">个人中心</a></el-dropdown-item>
<el-dropdown-item><router-link :to="'/homePage?id='+userInfo.aid">个人主页</router-link></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="person-action-item">
<div v-if="current == 'qa'" class="person-action-index" style="color:#333333" @click="logout()">
<svg-icon style="margin-right: 4px;font-size:22px;" icon-class="black-out"></svg-icon>登出
</div>
<div v-else class="person-action-index" style="color:#fff" @click="logout()">
<svg-icon style="margin-right: 4px;font-size:22px;color: #333333;" icon-class="white-out"></svg-icon>登出
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
</template> </template>
@@ -295,22 +302,44 @@ export default {
background: rgba(255,255,255,0.12); background: rgba(255,255,255,0.12);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
.portal-top-nav { .portal-top{
width: 100%; width: 100%;
margin: 0px 40px; margin: 0px 30px;
display: flex;
justify-content:space-between;
.portal-top-left{
display: flex;
justify-content: flex-start;
align-items: center;
.portal-top-logo{
}
.portal-top-nav{
display: flex;
justify-content: space-around;
margin-left: 20px;
}
}
.portal-top-right{
flex:1;
display: flex;
justify-content: flex-end;
align-items: center;
}
//width: 1050px; //width: 1050px;
.person-action{ .person-action{
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
margin-left: 10px; margin-left: 10px;
.person-action-index{ .person-action-index{
margin-left: 40px; //margin-left: 40px;
font-size: 16px; font-size: 14px;
font-weight: 600; font-weight: 600;
} }
::v-deep .message-count{ ::v-deep .message-count{
margin-right: 20px; //margin-right: 20px;
i{ i{
font-size: 26px; font-size: 26px;
color:#409EFF; color:#409EFF;
@@ -329,19 +358,52 @@ export default {
} }
} }
} }
.person-action-item{
margin-left: 30px;
}
.top-nav { .top-nav {
font-size: 16px; font-size: 16px;
// text-align: center; // text-align: center;
font-weight: 400; font-weight: 400;
color: #fff; color: #000000;
line-height: 72px; line-height: 72px;
padding: 0px 10px; padding: 0px 10px;
white-space:nowrap; white-space:nowrap;
position: relative; position: relative;
} }
.anav {
margin: 10px; @media screen and (max-width: 1366px){
color: #4489ce; .top-nav {
padding: 0px 10px;
}
.person-action-item{
margin-left: 20px;
}
}
@media screen and (max-width: 1680px) and (min-width:1367px){
.top-nav {
padding: 0px 15px;
}
.person-action-item{
margin-left: 30px;
}
}
@media screen and (max-width: 1920px) and (min-width: 1681px){
.top-nav {
padding: 0px 30px;
}
.person-action-item{
margin-left: 40px;
}
}
@media screen and (min-width: 1921px){
.top-nav {
padding: 0px 40px;
}
.person-action-item{
margin-left: 45px;
}
} }
::v-deep .el-badge { ::v-deep .el-badge {
@@ -375,22 +437,38 @@ export default {
} }
.el-dropdown-link { .el-dropdown-link {
cursor: pointer; cursor: pointer;
color: #fff; color: #000000;
} }
.uavatar{ .uavatar{
div{ div{
border-radius: 50%; border-radius: 50%;
img{ img{
border-radius: 50%; border-radius: 50%;
width: 40px; width: 30px;
height: 40px; height: 30px;
} }
} }
width: 40px; width: 30px;
height: 40px; height: 30px;
line-height: 40px; line-height: 30px;
font-size: 14px; font-size: 14px;
margin-right: 8px; margin-right: 8px;
border-radius: 50%; border-radius: 50%;
} }
.user-avatar{
display: inline-block;
border-radius: 50%;
img{
border-radius: 50%;
width: 30px;
height: 30px;
}
width: 30px;
height: 30px;
line-height: 30px;
font-size: 14px;
margin-right: 8px;
border-radius: 50%;
}
</style> </style>

41
src/views/portal/article/Index.vue
View File

@@ -3,14 +3,14 @@
<div class="article-banner"> <div class="article-banner">
<portal-header current="article" @emitInput="emitInput"></portal-header> <portal-header current="article" @emitInput="emitInput"></portal-header>
</div> </div>
<!--内容区域-->
<div class="xcontent portal-content"> <div class="xcontent portal-content">
<div class="xrow" style="display: flex;justify-content: space-between;"> <div class="xrow" style="display: flex;justify-content: space-between;">
<div style="flex: 1;" class="xcol content-div"> <div style="flex: 1;background-color: #fff;" class="xcol content-div">
<el-row> <div>
<el-card :body-style="{ padding: '0px' }" class="left-div"> <div style="padding:0px" class="left-div">
<el-row class="search-div"> <div class="search-div">
<el-col> <div>
<!-- <el-input placeholder="请输入关键词搜索" clearable v-model="articleList.keyword" maxlength="20"> <!-- <el-input placeholder="请输入关键词搜索" clearable v-model="articleList.keyword" maxlength="20">
<el-button slot="append" icon="el-icon-search" @click="searchData()"></el-button> <el-button slot="append" icon="el-icon-search" @click="searchData()"></el-button>
</el-input> --> </el-input> -->
@@ -18,28 +18,15 @@
热门搜索词： 热门搜索词：
<span v-for="(item, index) in searchRecords" :key="index" @click="useHotword(item)">{{ item.keyword }}</span> <span v-for="(item, index) in searchRecords" :key="index" @click="useHotword(item)">{{ item.keyword }}</span>
</div> --> </div> -->
</el-col> </div>
</el-row> </div>
<el-row class="order-div"> <div class="order-div">
<div class="quyer-tag"> <div class="quyer-tag">
<el-button <el-button type="text" class="order-class" @click="getData(2)" :class="{ actice: articleList.order == 2 }"> 最热 </el-button>
type="text" <el-button type="text" class="order-class" @click="getData(1)" :class="{ actice: articleList.order == 1 }"> 最新 </el-button>
class="order-class"
@click="getData(2)"
:class="{ actice: articleList.order == 2 }">
最热
</el-button>
<el-button
type="text"
class="order-class"
@click="getData(1)"
:class="{ actice: articleList.order == 1 }">
最新
</el-button>
</div> </div>
<span class="more"></span> <span class="more"></span>
</el-row> </div>
<div class="data-content" v-if="articleList.list.length > 0"> <div class="data-content" v-if="articleList.list.length > 0">
<div :span="24" v-for="(article, aidx) in articleList.list" :key="aidx" class="article-list"> <div :span="24" v-for="(article, aidx) in articleList.list" :key="aidx" class="article-list">
<div class="article-info"> <div class="article-info">
@@ -90,8 +77,8 @@
<div v-if="isSeach" style="height:382px"> <div v-if="isSeach" style="height:382px">
</div> </div>
</el-card> </div>
</el-row> </div>
</div> </div>
<div style="width: 410px;margin-left: 5px;"> <div style="width: 410px;margin-left: 5px;">