页面头部做成响应式的

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

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)