gmjng-gw-new/src/views/pages/notice.vue

<template>
    <div class="index">
        <img src="@/assets/imgs/公告栏.jpg" alt="">
        <div class="page-name">
            <div class="left">
                <div class="page-title">
                    <span>公告栏</span>
                    <img src="@/assets/imgs/single star.png" alt="">
                </div>
            </div>
            <div class="right">
                <span style="cursor: pointer;" @click="$router.push('/home')">首页</span>
                <span>></span>
                <span>公告栏</span>
            </div>
        </div>
        <!-- 小屏 -->
        <div class="small-menu">
            <div class="page-title" @click="$router.push('/home')">
                <span>公告栏</span>
                <img class="back-icon" src="@/assets/imgs/图层 54@2x.png" alt="">
            </div>
        </div>
        <div class="content" >
            <div class="content-style">
                <div class="item" v-for="(item,index) in dataList" :key="index" @click="jumpToPage('/article',item.id)">
                    <div class="left">
                        <span class="circle"></span>
                        <div class="title">{{item.title}}</div>
                    </div>
                    <div class="time">
                        {{item.createTime.split(' ')[0]}}
                    </div>

                </div>
                <div class="big-page">
                    <el-pagination
                        v-model:current-page="pageNum"
                        v-model:page-size="pageSize"
                        background
                        layout="prev, pager, next,jumper"
                        :total="total"
                        @current-change="getData()"
                    />
                </div>
                <div class="small-page">
                    <el-pagination
                        v-model:current-page="pageNum"
                        v-model:page-size="pageSize"
                        :pager-count="3"
                        background
                        layout="prev, pager, next"
                        :total="total"
                        @current-change="getData()"
                    />
                </div>
            </div>
        </div>
        
    </div>
</template>
  
<script>
    export default {
        name: 'Introduce',
        components: {
        },
        data(){
            return{
                dataList:[],
                total:0,
                pageNum:1,
                pageSize:10
            }
        },
        created(){
            this.getData()
        },
        methods:{
            getData(){
                this.$http.post(`/door/gwArticleList?categoryId=25&pageNum=${this.pageNum}&pageSize=${this.pageSize}`).then(res=>{
                    this.dataList = res.data.rows
                    this.total = res.data.total
                })
            },
            jumpToPage(url,id){
                this.$router.push({path:url,query:{id: id}})
            },
        }
    }
</script>
<style lang="scss" scoped>
::v-deep .el-pagination{
    margin-top: 40px;
    display: flex;
    justify-content: flex-end;
    button{
        border-radius: 50%;
        &:hover{
            color: #961824;
        }
    }
    .el-pager li{
        border-radius: 50%;
        &:hover{
            color: #961824;
        }
    }
}
::v-deep .el-pagination.is-background .el-pager li.is-active {
    background-color: #961824;
    &:hover{
        color: #fff;
    }
}
    
.index{
    img{
        width: 100%;
        height: auto;
    }
    .page-name{
        padding: 0 2rem;
        width: 100%;
        height: 1.1rem;
        display: flex;
        justify-content: space-between;
        .left{
            display: flex;
            align-items: center;
            height: 100%;
            .page-title{
                width: 2.4rem;
                height: 100%;
                line-height: 1.1rem;
                text-align: center;
                font-size: .35rem;
                position: relative;
                color: #fff;
                z-index: 999;
                img{
                    position: absolute;
                    top: -4px;
                    left: 0;
                    z-index: -1;
                }
            }
            .menu{
                display: flex;
                margin-left: .3125rem;
                .item{
                    font-size: .25rem;
                    color: #888989;
                    margin-left: .25rem;
                    height: 1.1rem;
                    line-height: 1.1rem;
                    cursor: pointer;
                }
                .active{
                    color: #961824;
                    border-bottom: 3px solid #961824;
                }
            }
        }
        .right{
            display: flex;
            align-items: center;
            
            span{
                font-size: .25rem;
                color: #888989;
            }
        }

    }
    .small-menu{
        display: none;
    }
    .content{
        background-color: #eaeaea;
        padding: .8rem 1.2rem;
        .content-style{
            padding: .3rem .8rem .6rem .8rem;
            background-color: #fff;
            font-size: .23rem;
            line-height: .45rem;
            .item{
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 1rem;
                border-bottom: 1px solid #e4e4e4;
                cursor: pointer;
                .left{
                    display: flex;
                    align-items: center;
                    width: 80%;
                    .circle{
                        display: inline-block;
                        width: .15rem;
                        height: .15rem;
                        border-radius: 50%;
                        border: 1px solid #961824;
                        margin-right: .1rem;
                    }
                    .title{
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
                .time{
                    font-size: .2rem;
                    color: #666;
                }
            } 
            .big-page{
                display: block;
            }
            .small-page{
                display: none;
            } 
        }
    }
}
@media screen and (min-width: 0) and (max-width: 1000px) {
    .index{
        .title-icon{
            display: none;
        }
        .page-name{
            display: none;
        }
        .small-menu{
            display: block;
            .page-title{
                margin-top: -.1rem;
                height: 1.3rem;
                background-color: #961824;
                font-size: .4rem;
                color: #fff;
                text-align: center;
                line-height: 1.3rem;
                position: relative;
                cursor: pointer;
                .back-icon{
                    position: absolute;
                    width: .2rem;
                    height: auto;
                    top: 50%;
                    transform: translateY(-50%);
                    left: .5rem;
                }
            }
            .menu{
                height: 1.3rem;
                background-color: #dcdada;
                display: flex;
                justify-content: space-around;
                font-size: .35rem;
                align-items: center;
                color: #888989;
                .active{
                    color: #961824;
                }
            }
        }
        .content{
            padding: 0;
            .content-style{
                .item{
                    font-size: .35rem;
                    .time{
                        font-size: .3rem;
                    }
                }
                .big-page{
                    display: none;
                }
                .small-page{
                    display: block;
                }
            }
            
        }
    }
}
</style>