mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-10 11:26:43 +08:00
整体门户页面的样式，宽度的处理
This commit is contained in:
daihh
@@ -3,86 +3,86 @@
|
||||
<div class="qa-banner">
|
||||
<portal-header current="qa" class="qa-nav" @emitInput="emitInput"></portal-header>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="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="order-div">
|
||||
<span class="quyer-tag">
|
||||
<el-button type="text" class="order-class" @click="orderFieldData('answers')" :class="{ actice: styleControl == 2 }">
|
||||
最热
|
||||
</el-button>
|
||||
<el-button type="text" class="order-class" @click="orderFieldData('')" :class="{ actice: styleControl == 1 }">
|
||||
最新
|
||||
</el-button>
|
||||
<el-button type="text" @click="setEssence(queryConditions.isEssence)" class="order-class" :class="{ actice: styleControl == 3 }">精华问题</el-button>
|
||||
</span>
|
||||
<span class="quyer-tag">
|
||||
<el-button type="text" class="order-class" @click="isResolveData(null)" :class="{ actice: queryConditions.isResolve === null }">
|
||||
全部
|
||||
</el-button>
|
||||
<el-button type="text" class="order-class" @click="isResolveData(false)" :class="{ actice: queryConditions.isResolve === false }">
|
||||
待解决
|
||||
</el-button>
|
||||
<el-button type="text" @click="isResolveData(true)" class="order-class" :class="{ actice: queryConditions.isResolve===true }">已解决</el-button>
|
||||
</span>
|
||||
</el-row>
|
||||
<div class="data-content" v-if="qaList.length > 0">
|
||||
<div :span="24" v-for="(qa, qaidx) in qaList" :key="qaidx" class="qa-list">
|
||||
<div class="qa-info-box">
|
||||
<div class="qa-info">
|
||||
<div class="qa-info-title" @click="jumpDetail(qa)">
|
||||
<div class="portal-title-tow one-line-ellipsis">
|
||||
<span v-if="qa.isResolve == false" @click="searchData()">【待解决】</span>
|
||||
<span class="qa-basic qa-solve" v-if="qa.isResolve == true" @click="searchData()">【已解决】</span>
|
||||
<span v-html="$keywordActiveShow(qa.title,queryKeyWord)"></span>
|
||||
</div>
|
||||
<div class="portal-time">
|
||||
<i class="el-icon-time" style="margin-right:4px"></i> {{qa.sysCreateTime}}
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content:space-between;">
|
||||
<div class="qa-info-summary portal-summary-text two-line-ellipsis" @click="jumpDetail(qa)" v-html="$keywordActiveShow(qa.content,queryKeyWord)"></div>
|
||||
<div style="cursor: pointer; text-align: right;cursor: pointer;" v-if="qa.images!==''" @click="jumpDetail(qa)">
|
||||
<img style="width: 156px;height: 105px;border-radius: 4px;margin-left: 18px;" :src="fileBaseUrl + qa.images" alt="">
|
||||
<div class="xcontent2">
|
||||
<div class="xcontent2-main" style="margin-right: 30px;background-color: #fff;padding-top: 50px;">
|
||||
<div>
|
||||
<div class="left-div">
|
||||
<div class="order-div">
|
||||
<span class="quyer-tag">
|
||||
<el-button type="text" class="order-class" @click="orderFieldData('answers')" :class="{ actice: styleControl == 2 }">
|
||||
最热
|
||||
</el-button>
|
||||
<el-button type="text" class="order-class" @click="orderFieldData('')" :class="{ actice: styleControl == 1 }">
|
||||
最新
|
||||
</el-button>
|
||||
<el-button type="text" @click="setEssence(queryConditions.isEssence)" class="order-class" :class="{ actice: styleControl == 3 }">精华问题</el-button>
|
||||
</span>
|
||||
<span class="quyer-tag">
|
||||
<el-button type="text" class="order-class" @click="isResolveData(null)" :class="{ actice: queryConditions.isResolve === null }">
|
||||
全部
|
||||
</el-button>
|
||||
<el-button type="text" class="order-class" @click="isResolveData(false)" :class="{ actice: queryConditions.isResolve === false }">
|
||||
待解决
|
||||
</el-button>
|
||||
<el-button type="text" @click="isResolveData(true)" class="order-class" :class="{ actice: queryConditions.isResolve===true }">已解决</el-button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="data-content" v-if="qaList.length > 0">
|
||||
<div :span="24" v-for="(qa, qaidx) in qaList" :key="qaidx" class="qa-list">
|
||||
<div class="qa-info-box">
|
||||
<div class="qa-info">
|
||||
<div class="qa-info-title" @click="jumpDetail(qa)">
|
||||
<div class="portal-title-tow one-line-ellipsis">
|
||||
<span v-if="qa.isResolve == false" @click="searchData()">【待解决】</span>
|
||||
<span class="qa-basic qa-solve" v-if="qa.isResolve == true" @click="searchData()">【已解决】</span>
|
||||
<span v-html="$keywordActiveShow(qa.title,queryKeyWord)"></span>
|
||||
</div>
|
||||
<div class="portal-time">
|
||||
<i class="el-icon-time" style="margin-right:4px"></i> {{qa.sysCreateTime}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content:space-between;">
|
||||
<div style="width: 120px;">
|
||||
<author :avatar="qa.authorInfo.avatar" :name="qa.authorInfo.name" :sex="qa.authorInfo.sex"></author>
|
||||
</div>
|
||||
<div><interactBar nodeWidth="60px" :readonly="true" :type="4" :data="qa" @addAnswers="qaAnswer(qa)" :shares="true" :comments="false" :answers="true" :clickAnswer="true" :views="false"></interactBar></div>
|
||||
<div style="display: flex;justify-content:space-between;">
|
||||
<div class="qa-info-summary portal-summary-text two-line-ellipsis" @click="jumpDetail(qa)" v-html="$keywordActiveShow(qa.content,queryKeyWord)"></div>
|
||||
<div style="cursor: pointer; text-align: right;cursor: pointer;" v-if="qa.images!==''" @click="jumpDetail(qa)">
|
||||
<img style="width: 156px;height: 105px;border-radius: 4px;margin-left: 18px;" :src="fileBaseUrl + qa.images" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content:space-between;">
|
||||
<div style="width: 120px;">
|
||||
<author :avatar="qa.authorInfo.avatar" :name="qa.authorInfo.name" :sex="qa.authorInfo.sex"></author>
|
||||
</div>
|
||||
<div><interactBar nodeWidth="60px" :readonly="true" :type="4" :data="qa" @addAnswers="qaAnswer(qa)" :shares="true" :comments="false" :answers="true" :clickAnswer="true" :views="false"></interactBar></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<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>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 410px;">
|
||||
<div class="xcontent2-minor">
|
||||
<!-- <div> -->
|
||||
<div style="padding:0" id="qa-fixd">
|
||||
<div class="portal-model-btn pointer" @click="$refs.addQuestion.askQuestionDialog = true">
|
||||
<svg-icon style="margin-right: 0;font-size: 24px;" icon-class="question-mark"></svg-icon>
|
||||
提问题
|
||||
</div>
|
||||
<div class="portal-right-box list-bg">
|
||||
<p class="portal-title-one" style="padding-bottom:12px">贡献榜</p>
|
||||
<ul>
|
||||
<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="">
|
||||
@@ -109,11 +109,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<addQuestion ref="addQuestion" @sure="getQaData(true)"></addQuestion>
|
||||
</div>
|
||||
<!-- :before-close="handleClose" -->
|
||||
@@ -215,7 +214,7 @@ export default {
|
||||
let key = 'qa';
|
||||
apiPlace.detail(key).then(res=>{
|
||||
console.log(res)
|
||||
let lmj = JSON.parse(res.result.content)
|
||||
let lmj = JSON.parse(res.result.content)
|
||||
this.resonimg = lmj[0]
|
||||
console.log(this.resonimg.image)
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user