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

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

@@ -6,15 +6,19 @@
.nav-bottbor{
width: 75%;
height: 4px;
background: #FFFFFF;
background: #387DF7;
border-radius: 5px;
position: absolute;
top: 75%;
left: 13%;
}
.current-nav {
// color: #fff;
font-weight: 600;
color: #387DF7;
font-weight: 700;
>a{
color:#387DF7;
}
// background: #588afc;
// border-bottom: 4px solid;
}
@@ -84,7 +88,7 @@
margin-bottom: 22px;
}
.orange-one{
color: #EB5D00;
color: #EB5D00;
}
.orange-tow{
color: #FE9100;
@@ -170,7 +174,7 @@
border-color: #387DF7;
}
.home-no-list{
margin-top: 156px;
margin-top: 156px;
text-align: center;
.img{
width: 148px;
@@ -199,10 +203,10 @@
.u-message{
font-size: 14px;
color: rgba(0,0,0,0.65);
.text{
font-size: 14px;
color: #2C68FF;
color: #2C68FF;
margin-right: 20px;
margin-left: 100px;
}
@@ -211,4 +215,4 @@
border-color: #fff;
background-color: #fff;
box-shadow: 0px 8px 20px 0px rgba(0,35,114,0.1);
}
}

214
src/components/PortalHeader.vue
View File

@@ -1,14 +1,14 @@
<template>
<div class="portal-header">
<div class="portal-top-nav">
<div style="display: flex;justify-content: space-between;">
<div style="flex:1;display: flex;justify-content: flex-start;align-items: center;">
<img src="../assets/logo/logo.png" v-if="current == 'qa'" style="width:240px;height: 40px;" />
<img src="../assets/logo/logo2.png" v-else style="width:240px;height: 40px;" />
<div style="display: flex;justify-content: space-around;margin-left: 20px;">
<div class="portal-top">
<div class="portal-top-left">
<div class="portal-top-logo">
<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:160px;height: 27px;" />
</div>
<div class="portal-top-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>
</router-link></div>
<div class="top-nav" :class="current == 'course' ? 'current-nav' : ''">
@@ -43,7 +43,7 @@
</router-link></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;">
<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="请选择">
@@ -55,7 +55,6 @@
</el-select>
</el-input>
<el-button class="sear-but" @click="searchJump()" type="primary" size="mini">搜索</el-button>
</div>
<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-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-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`" :underline="false">
<svg-icon v-if="current == 'qa'" style="margin-right: 0;font-size:26px;" icon-class="message"></svg-icon>
<svg-icon v-else style="margin-right: 0;font-size:26px;" icon-class="messfff"></svg-icon>
</el-link>
</el-tooltip>
</el-badge>
<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>
<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 class="person-action-item">
<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`" :underline="false">
<svg-icon v-if="current == 'qa'" style="margin-right: 0;font-size:26px;" icon-class="message"></svg-icon>
<svg-icon v-else style="margin-right: 0;font-size:26px;" icon-class="messfff"></svg-icon>
</el-link>
</el-tooltip>
</el-badge>
</div>
<div v-else class="person-action-index" style="color:#fff" @click="logout()">
<svg-icon style="margin-right: 4px;font-size:22px;color: #000;" icon-class="white-out"></svg-icon>登出
<div class="person-action-item">
<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>
</template>
@@ -295,22 +302,44 @@ export default {
background: rgba(255,255,255,0.12);
backdrop-filter: blur(10px);
}
.portal-top-nav {
.portal-top{
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;
.person-action{
display: flex;
justify-content: flex-end;
align-items: center;
margin-left: 10px;
.person-action-index{
margin-left: 40px;
font-size: 16px;
//margin-left: 40px;
font-size: 14px;
font-weight: 600;
}
::v-deep .message-count{
margin-right: 20px;
//margin-right: 20px;
i{
font-size: 26px;
color:#409EFF;
@@ -329,19 +358,52 @@ export default {
}
}
}
.person-action-item{
margin-left: 30px;
}
.top-nav {
font-size: 16px;
// text-align: center;
font-weight: 400;
color: #fff;
color: #000000;
line-height: 72px;
padding: 0px 10px;
white-space:nowrap;
position: relative;
}
.anav {
margin: 10px;
color: #4489ce;
@media screen and (max-width: 1366px){
.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 {
@@ -360,7 +422,7 @@ export default {
border-left: none;
background: rgba(255,255,255,0.12);
}
.message-count a {
color: #858d99;
font-size: 24px;
@@ -375,22 +437,38 @@ export default {
}
.el-dropdown-link {
cursor: pointer;
color: #fff;
color: #000000;
}
.uavatar{
div{
border-radius: 50%;
img{
border-radius: 50%;
width: 40px;
height: 40px;
width: 30px;
height: 30px;
}
}
width: 40px;
height: 40px;
line-height: 40px;
width: 30px;
height: 30px;
line-height: 30px;
font-size: 14px;
margin-right: 8px;
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>

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

@@ -3,14 +3,14 @@
<div class="article-banner">
<portal-header current="article" @emitInput="emitInput"></portal-header>
</div>
<!--内容区域-->
<div class="xcontent portal-content">
<div class="xrow" style="display: flex;justify-content: space-between;">
<div style="flex: 1;" class="xcol content-div">
<el-row>
<el-card :body-style="{ padding: '0px' }" class="left-div">
<el-row class="search-div">
<el-col>
<div style="flex: 1;background-color: #fff;" class="xcol content-div">
<div>
<div style="padding:0px" class="left-div">
<div class="search-div">
<div>
<!-- <el-input placeholder="请输入关键词搜索" clearable v-model="articleList.keyword" maxlength="20">
<el-button slot="append" icon="el-icon-search" @click="searchData()"></el-button>
</el-input> -->
@@ -18,28 +18,15 @@
热门搜索词：
<span v-for="(item, index) in searchRecords" :key="index" @click="useHotword(item)">{{ item.keyword }}</span>
</div> -->
</el-col>
</el-row>
<el-row class="order-div">
</div>
</div>
<div class="order-div">
<div class="quyer-tag">
<el-button
type="text"
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>
<el-button type="text" 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>
<span class="more"></span>
</el-row>
</div>
<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 class="article-info">
@@ -48,12 +35,12 @@
<div style="display: flex;justify-content: space-between;margin-bottom: 10px;">
<div class="article-title one-line-ellipsis" v-html="$keywordActiveShow(article.title,articleList.keyword)"></div>
<div class="article-info-date"><i style="font-size:14px" class="el-icon-time"></i> {{article.sysCreateTime}}</div>
</div>
</router-link>
<!--body-->
<div class="article-body" style="display: flex;justify-content: space-between;">
<div style="flex: 1;">
<router-link :to="'article/detail?id=' + article.id">
<div style="padding-top: 5px;">
@@ -90,11 +77,11 @@
<div v-if="isSeach" style="height:382px">
</div>
</el-card>
</el-row>
</div>
</div>
</div>
<div style="width: 410px;margin-left: 5px;">
<div>
<div id="articleAnking">
<el-button class="write-art" @click="openDialog" type="primary"><svg-icon icon-class="addArticle" style="margin-right: 20px;font-size: 26px;"></svg-icon>写文章</el-button>
@@ -127,10 +114,10 @@
</div>
</div>
</div>
</div>
</div>
<el-row :gutter="10">
@@ -230,7 +217,7 @@ export default {
let key = 'article';
apiPlace.detail(key).then(res=>{
console.log(res)
let lmj = JSON.parse(res.result.content)
let lmj = JSON.parse(res.result.content)
// console.log(lmj)
this.resonimg = lmj[0]
console.log(this.resonimg.image)