mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-19 15:56:45 +08:00
整体门户页面的样式，宽度的处理
This commit is contained in:
daihh
@@ -4,90 +4,80 @@
|
||||
<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;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> -->
|
||||
<!-- <div class="tip">
|
||||
热门搜索词：
|
||||
<span v-for="(item, index) in searchRecords" :key="index" @click="useHotword(item)">{{ item.keyword }}</span>
|
||||
</div> -->
|
||||
<div class="">
|
||||
<div class="xcontent2">
|
||||
<div class="xcontent2-main" style="margin-right: 30px;background-color: #fff;padding-top: 50px;">
|
||||
<div>
|
||||
<div style="padding:0px" class="left-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>
|
||||
</div>
|
||||
<span class="more"></span>
|
||||
</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>
|
||||
</div>
|
||||
<span class="more"></span>
|
||||
</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">
|
||||
<!--title-->
|
||||
<router-link :to="'article/detail?id=' + article.id">
|
||||
<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;">
|
||||
<div class="article-info-summary" :style="{height:article.coverurl==''? '50px':'100px'}" :class="article.coverurl==''? 'two-line-ellipsis':'four-line-ellipsis'">{{ article.summary }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<router-link :to="'article/detail?id=' + article.id">
|
||||
<div class="article-image" v-if="article.coverurl">
|
||||
<article-image :article="article"></article-image>
|
||||
<div class="data-content" v-if="articleList.list.length > 0">
|
||||
<div v-for="(article, aidx) in articleList.list" :key="aidx" class="article-list">
|
||||
<div class="article-info">
|
||||
<!--title-->
|
||||
<router-link :to="'article/detail?id=' + article.id">
|
||||
<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>
|
||||
</div>
|
||||
<!--互动内容-->
|
||||
<div style="display: flex;justify-content:flex-start;align-items: center;margin-top: 0px;">
|
||||
<div style="flex:1;">
|
||||
<author :avatar="article.authorInfo.avatar" :name="article.sysCreateBy" :sex="article.authorInfo.sex" :aid="article.authorInfo.aid"></author>
|
||||
</div>
|
||||
<div style="">
|
||||
<interactBar nodeWidth="60px" :readonly="true" :type="2" :data="article" :views="false"></interactBar>
|
||||
</div>
|
||||
<!-- <author :avatar="article.authorInfo.avatar" :name="article.sysCreateBy" :info="article.authorInfo.orgInfo"></author> -->
|
||||
<!--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;">
|
||||
<div class="article-info-summary" :style="{height:article.coverurl==''? '50px':'100px'}" :class="article.coverurl==''? 'two-line-ellipsis':'four-line-ellipsis'">{{ article.summary }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<router-link :to="'article/detail?id=' + article.id">
|
||||
<div class="article-image" v-if="article.coverurl">
|
||||
<article-image :article="article"></article-image>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<!--互动内容-->
|
||||
<div style="display: flex;justify-content:flex-start;align-items: center;margin-top: 0px;">
|
||||
<div style="flex:1;">
|
||||
<author :avatar="article.authorInfo.avatar" :name="article.sysCreateBy" :sex="article.authorInfo.sex" :aid="article.authorInfo.aid"></author>
|
||||
</div>
|
||||
<div style="">
|
||||
<interactBar nodeWidth="60px" :readonly="true" :type="2" :data="article" :views="false"></interactBar>
|
||||
</div>
|
||||
<!-- <author :avatar="article.authorInfo.avatar" :name="article.sysCreateBy" :info="article.authorInfo.orgInfo"></author> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="pagination-div" v-if="isMore"><span class="pag-text" @click="loadMore()">加载更多</span></div> -->
|
||||
<div class="pagination-div">
|
||||
<span class="pag-text" @click="loadMore()" v-if="moreState == 1">加载更多</span>
|
||||
<span class="pag-text-msg" v-else-if="moreState == 2">数据加载中</span>
|
||||
<span class="pag-text-msg" v-else-if="moreState == 3 && !isSeach">没有更多数据了</span>
|
||||
<span class="pag-text-msg" v-else-if="isSeach">没有查询到相关内容</span>
|
||||
</div>
|
||||
<div v-if="isSeach" style="height:382px">
|
||||
|
||||
<!-- <div class="pagination-div" v-if="isMore"><span class="pag-text" @click="loadMore()">加载更多</span></div> -->
|
||||
<div class="pagination-div">
|
||||
<span class="pag-text" @click="loadMore()" v-if="moreState == 1">加载更多</span>
|
||||
<span class="pag-text-msg" v-else-if="moreState == 2">数据加载中</span>
|
||||
<span class="pag-text-msg" v-else-if="moreState == 3 && !isSeach">没有更多数据了</span>
|
||||
<span class="pag-text-msg" v-else-if="isSeach">没有查询到相关内容</span>
|
||||
</div>
|
||||
<div v-if="isSeach" style="height:382px"></div>
|
||||
</div>
|
||||
</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>
|
||||
<div class="portal-right-box art-bgimg" style="background-color:#fff;">
|
||||
<p class="portal-title-one" style="padding-bottom:12px" >贡献榜</p>
|
||||
<ul>
|
||||
<div class="xcontent2-minor">
|
||||
<div>
|
||||
<div id="articleAnking">
|
||||
<div>
|
||||
<div class="portal-model-btn pointer" @click="openDialog">
|
||||
<svg-icon style="margin-right: 10px;font-size: 24px;" icon-class="addArticle"></svg-icon>
|
||||
写文章
|
||||
</div>
|
||||
</div>
|
||||
<div class="portal-ranking ranking-bg">
|
||||
<p class="ranking-title">贡献榜</p>
|
||||
<ul class="ranking-data">
|
||||
<li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
|
||||
<span class="portal-right-text orange-one" v-if="index==0" style="margin-right:94px">
|
||||
<img src="/images/list-01.png" alt="">
|
||||
@@ -119,12 +109,7 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<el-row :gutter="10">
|
||||
|
||||
<el-col :span="6" class="right-box" >
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-dialog title="创建文章" :visible.sync="diagSync" :close-on-click-modal="false" width="900px" custom-class="g-dialog">
|
||||
<editItems v-if="diagSync" :jumpLimit="false" :editForm="{}" @success="saveSuccess"></editItems>
|
||||
@@ -194,7 +179,10 @@ export default {
|
||||
// let el_anking = document.querySelector('#articleAnking');
|
||||
// this.ankingWidth=el_anking.clientWidth;
|
||||
//console.log(el_anking.clientWidth,'clientWidth');
|
||||
this.articleList.keyword = this.$route.query.keyword;
|
||||
if(this.$route.query){
|
||||
this.articleList.keyword = this.$route.query.keyword;
|
||||
}
|
||||
|
||||
if(this.articleList.keyword != '') {
|
||||
this.isSeach = true;
|
||||
}
|
||||
@@ -243,6 +231,7 @@ export default {
|
||||
//el_anking.wid
|
||||
let innerHeight = document.querySelector('#article-list-content').clientHeight
|
||||
let outerHeight = document.documentElement.clientHeight
|
||||
let outerWidth = el_anking.clientWidth;
|
||||
let scrollTop = document.documentElement.scrollTop
|
||||
if ((outerHeight + scrollTop + 350) >= innerHeight) {
|
||||
if(this.moreState == 1) {
|
||||
@@ -265,7 +254,7 @@ export default {
|
||||
// }
|
||||
// }
|
||||
if(scrollTop > 400) {
|
||||
document.querySelector('#articleAnking').style.cssText = "position: fixed;top: 0;width:242.5px";
|
||||
document.querySelector('#articleAnking').style.cssText = "position: fixed;top: 0;width:"+outerWidth+"px";
|
||||
} else {
|
||||
document.querySelector('#articleAnking').style.cssText = "position: static";
|
||||
}
|
||||
@@ -409,7 +398,7 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.course-resources{
|
||||
margin-top: 26px;
|
||||
width: 410px;
|
||||
width:100%;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
Reference in New Issue
Block a user