williamet/jiace-web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改首页tab切换为滑动

Browse Source
This commit is contained in:
熊丽君
2021-10-21 11:30:03 +08:00
parent bcab94bd2e
commit 22783895c7
1 changed files with 95 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/views/home/home.vue
View File

@ -29,14 +29,44 @@
</router-link> </router-link>
</div> </div>
<div class="tab_list"> <div class="tab_list">
<el-tabs <!-- @tab-click="handleClick2" -->
v-model="queryParams2.attributeId" <el-tabs v-model="queryParams2.attributeId">
@tab-click="handleClick2" <el-tab-pane label="科技" name="KJJ">
> <span
<el-tab-pane label="科技" name="KJJ"></el-tab-pane> slot="label"
<el-tab-pane label="经信" name="JXJ"></el-tab-pane> @mouseover="
<el-tab-pane label="发改" name="FGW"></el-tab-pane> (queryParams2.attributeId = 'KJJ'), handleClick2()
<el-tab-pane label="其他" name="OTHER"></el-tab-pane> "
>科技</span
>
</el-tab-pane>
<el-tab-pane label="经信" name="JXJ">
<span
slot="label"
@mouseover="
(queryParams2.attributeId = 'JXJ'), handleClick2()
"
>经信</span
>
</el-tab-pane>
<el-tab-pane label="发改" name="FGW">
<span
slot="label"
@mouseover="
(queryParams2.attributeId = 'FGW'), handleClick2()
"
>发改</span
>
</el-tab-pane>
<el-tab-pane label="其他" name="OTHER">
<span
slot="label"
@mouseover="
(queryParams2.attributeId = 'OTHER'), handleClick2()
"
>其他</span
>
</el-tab-pane>
<div <div
class="tab_item" class="tab_item"
style="position: relative;padding-right:50px" style="position: relative;padding-right:50px"
@ -89,27 +119,53 @@
</router-link> </router-link>
</div> </div>
<div class="tab_list"> <div class="tab_list">
<el-tabs v-model="queryParams.labelId" @tab-click="handleClick"> <!-- @tab-click="handleClick" -->
<el-tab-pane <el-tabs v-model="queryParams.labelId">
label="政策法规" <el-tab-pane name="1415156808053559296">
name="1415156808053559296" <span
></el-tab-pane> slot="label"
<el-tab-pane @mouseover="
label="申报通知" (queryParams.labelId = '1415156808053559296'), handleClick()
name="1415156963146338304" "
></el-tab-pane> >政策法规</span
<el-tab-pane >
label="政府公示" </el-tab-pane>
name="1415157002090450944" <el-tab-pane name="1415156963146338304">
></el-tab-pane> <span
<el-tab-pane slot="label"
label="公告" @mouseover="
name="1415157026115424256" (queryParams.labelId = '1415156963146338304'), handleClick()
></el-tab-pane> "
<el-tab-pane >申报通知</span
label="其他" >
name="1415157049267982336" </el-tab-pane>
></el-tab-pane> <el-tab-pane label="政府公示" name="1415157002090450944">
<span
slot="label"
@mouseover="
(queryParams.labelId = '1415157002090450944'), handleClick()
"
>政府公示</span
>
</el-tab-pane>
<el-tab-pane label="公告" name="1415157026115424256">
<span
slot="label"
@mouseover="
(queryParams.labelId = '1415157026115424256'), handleClick()
"
>公告</span
>
</el-tab-pane>
<el-tab-pane label="其他" name="1415157049267982336">
<span
slot="label"
@mouseover="
(queryParams.labelId = '1415157049267982336'), handleClick()
"
>其他</span
>
</el-tab-pane>
<div style="min-height: 281px"> <div style="min-height: 281px">
<div class="banner_r_list" v-for="item in list" :key="item.id"> <div class="banner_r_list" v-for="item in list" :key="item.id">
<!-- <div class="text_18_333 pointer">{{ item.title }}</div> --> <!-- <div class="text_18_333 pointer">{{ item.title }}</div> -->
@ -148,7 +204,7 @@
</div> </div>
</router-link> </router-link>
</div> </div>
<div class="tab_list"> <div class="tab_list" style="padding-top:8px">
<div class="banner_r_list" v-for="item in list3" :key="item.id"> <div class="banner_r_list" v-for="item in list3" :key="item.id">
<!-- <div class="text_18_333 pointer">{{ item.title }}</div> --> <!-- <div class="text_18_333 pointer">{{ item.title }}</div> -->
<div class="text_18_333 pointer"> <div class="text_18_333 pointer">
@ -425,14 +481,16 @@ export default {
return { return {
bannerList: [], bannerList: [],
queryParams: { queryParams: {
labelId: '1415156808053559296' labelId: '1415156808053559296',
pageSize: 7
}, },
queryParams2: { queryParams2: {
attributeId: 'KJJ' attributeId: 'KJJ',
pageSize: 7
}, },
queryParams3: { queryParams3: {
pageNum: 1, pageNum: 1,
pageSize: 7 pageSize: 8
}, },
// date: this.parseTime(new Date(), '{y}-{m}-{d}'), // date: this.parseTime(new Date(), '{y}-{m}-{d}'),
list: [], list: [],
@ -556,8 +614,8 @@ export default {
.tab_list { .tab_list {
padding: 0 18px; padding: 0 18px;
.tab_item { .tab_item {
height: 68px; height: 37px;
line-height: 68px; line-height: 37px;
display: flex; display: flex;
// justify-content: center; // justify-content: center;
align-items: center; align-items: center;
@ -630,8 +688,8 @@ export default {
.banner_r_list { .banner_r_list {
padding: 0 18px; padding: 0 18px;
position: relative; position: relative;
height: 55px; height: 37px;
line-height: 55px; line-height: 37px;
div { div {
padding-right: 50px; padding-right: 50px;
overflow: hidden; overflow: hidden;