zy-gw-vue/src/views/pages/home.vue

<template>
    <div class="page">
        <div class="about">
            <div class="title">
                <div class="zh-title">关于我们</div>
                <div class="en-title">
                    <span class="line"></span>
                    <span class="title">ABOUT US</span>
                    <span class="line"></span>
                </div>
            </div>
            <div class="content">
                <div class="left">
                    <img :src="$baseUrl + introduce.img" alt="">
                </div>
                <div class="right">
                    <div class="indroduce">
                        {{introduce.excerpt}}
                    </div>
                    <div class="menu">
                        <div class="item" @click="jumpTo('/introduce',1)">
                            <img src="@/assets/images/企业介绍(1).png" alt="">
                            <span>公司介绍</span>
                        </div>
                        <div class="item" @click="jumpTo('/introduce',2)">
                            <img src="@/assets/images/组织架构管理.png" alt="">
                            <span>组织机构</span>
                        </div>
                        <div class="item" @click="jumpTo('/introduce',3)">
                            <img src="@/assets/images/资质.png" alt="">
                            <span>资质证书</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="case">
            <div class="title">
                <div class="zh-title">工程案例</div>
                <div class="en-title">
                    <span class="line"></span>
                    <span class="title">CASES</span>
                    <span class="line"></span>
                </div>
            </div>
            <div class="list">
                <div class="item" v-for="i in 8">
                    <img src="@/assets/images/15探海神龟.jpg" alt="">
                    <div class="title">探海神龟</div>
                </div>
            </div>
        </div>
        <div class="information">
            <div class="title">
                <div class="zh-title">资讯中心</div>
                <div class="en-title">
                    <span class="line"></span>
                    <span class="title">NEWS</span>
                    <span class="line"></span>
                </div>
            </div>
            <div class="content">
                <div class="menu">
                    <div :class="{'item':true, 'active': activeIndexInfo==i}"  
                    v-for="(item,i) in informationMenu" @click="selectTab(i)">{{item.name}}</div>
                </div>
                <div class="list">
                    <div class="left">
                        <div class="item" v-for="(item,i) in information" @click="jumpToArticle(item.id)">
                            <span class="title" v-if="item.tittle.length<=34">{{item.tittle}}</span>
                            <span class="title" v-else>{{item.tittle.slice(0,34)}}...</span>
                            <span class="time">{{item.submitTime}}</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="item" v-for="(item,i) in information.slice(0,2)" @click="jumpToArticle(item.id)">
                            <img :src="$baseUrl+item.img" alt="">
                            <div class="title" v-if="item.tittle.length>20">{{item.tittle.slice(0,20)}}...</div>
                            <div class="title" v-else>{{item.tittle}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
  </template>
  
  <script>
  export default {
      name: 'Home',
      components: {
      },
      data(){
          return{
            introduce:{},
            activeIndexInfo: 0,
            news:[],
            dynamic:[],
            statute:[],
            information:[],
            informationMenu:[
                {name:'公司新闻'},
                {name:'行业动态'},
                {name:'法规标准'}
            ],
            queryParams:{
                pageNum: 1,
                pageSize: 5
            },
              
          }
      },
      created(){
          this.getIntroduce()
      },
      methods:{
        jumpTo(path,name){
            this.$router.push({path: path,query:{name: name}})
        },
        jumpToArticle(id){
            this.$router.push({path:'/article',query:{id: id}})
        },
        selectTab(i){
            this.activeIndexInfo = i
            if(i==0){
                this.information = this.news
            }
            if(i==1){
                this.information = this.dynamic
            }
            if(i==2){
                this.information = this.statute
            }
        },
        getIntroduce(){
            this.$http.get(`zy/website/article/page?type=公司介绍`).then(res=>{
                this.introduce = res.data.rows[0]
            })
            this.$http.get(`zy/website/article/page?type=公司新闻&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
                this.news = res.data.rows
                this.information = this.news
            })
            this.$http.get(`zy/website/article/page?type=行业动态&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
                this.dynamic = res.data.rows
            })
            this.$http.get(`zy/website/article/page?type=法规标准&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
                this.statute = res.data.rows
            })
        }
      }
  }
  </script>
  <style lang="scss" scoped>
    .title{
        text-align: center;
        .zh-title{
            color: #1D2088;
            font-size: .5rem;
            font-weight: bold;
            letter-spacing: .025rem;
            font-family: 'Source Han Sans CN';
        }
        .en-title{
            display: flex;
            align-items: center;
            justify-content: center;
            letter-spacing: .0125rem;
            margin-top: .28rem;
            .line{
                display: inline-block;
                width: .85rem;
                height: .0125rem;
                background-color: #B2B2B2;
                margin: .3rem;
            }
            .title{
                font-size: .225rem;
                color: #B2B2B2;
                line-height: .6rem;
                font-family: Arial;
            }

        }
    }
    .page{
        background: url('@/assets/images/组 11 (1).png') no-repeat;
        background-size: 100% auto;
        background-position: 0 5.4rem;
        .about{
            margin-top: 1.25rem;
            .content{
                margin: .75rem 4.3rem 1.25rem 4.3rem;
                display: flex;
                justify-content: space-between;
                .left{
                    img{
                        width: 7.025rem;
                        height: 4.925rem;
                    }
                }
                .right{
                    .indroduce{
                        width: 7.5rem;
                        font-size: .225rem;
                        color: #333333;
                        line-height: .6rem;
                        font-family: Source Han Sans CN;
                    }
                    .menu{
                        display: flex;
                        margin-top: .14rem;
                        .item{
                            width: 1.625rem;
                            height: .5rem;
                            background: #1D2088;
                            border-radius: .075rem;
                            margin-right: .175rem;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            cursor: pointer;
                            img{
                                width: auto;
                                height: .25rem;
                            }
                            span{
                                font-size: .2rem;
                                color: #FFFFFF;
                                margin-left: .1rem;
                            }
                        }

                    }

                }
            }
        }
        .case{
            margin-top: 3.55rem;
            .list{
                display: flex;
                margin-top: .85rem;
                flex-wrap: wrap;
                justify-content: center;
                .item{
                    width: 4.9rem;
                    height: 3.75rem;
                    padding: 0 .275rem;
                    margin-bottom: .55rem;
                    position: relative;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                    .title{
                        position: absolute;
                        height: .55rem;
                        width: 4.35rem;
                        background: RGBA(207, 70, 75, .6);
                        bottom: 0;
                        font-size: .225rem;
                        color: #FFFFFF;
                        line-height: .55rem;
                        font-family: Source Han Sans CN;

                    }

                }
            }
        }
        .information{
            margin-top: 1.6rem;
            .content{
                .menu{
                    display: flex;
                    justify-content: center;
                    .item{
                        width: 1.65rem;
                        height: .475rem;
                        border-radius: .2375rem;
                        border: .0125rem solid #CCCCCC;
                        font-size: .225rem;
                        color: #666666;
                        line-height: .475rem;
                        text-align: center;
                        margin: .625rem .125rem;
                        cursor: pointer;
                    }
                    .active{
                        background: #E60012;
                        color: #fff;
                        border: none;
                    }
                }
            }
            .list{
                margin: 0 2.375rem;
                margin-bottom: 1rem;
                display: flex;
                justify-content: space-between;
                .left{
                    width: 8.25rem;
                    .item{
                        width: 100%;
                        height: .75rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-size: .2rem;
                        color: #282828;
                        border-bottom: .0125rem solid #DADADA;
                        cursor: pointer;
                        &:hover{
                            color: #189eef;
                        }
                        &:last-child{
                            border: none;
                        }
                        .time{
                            color: #666666;
                            font-size: .175rem;
                        }

                    }
                }
                .right{
                    display: flex;
                    .item{
                        width: 4.675rem;
                        height: 3.2875rem;
                        margin-left: .4rem;
                        position: relative;
                        &:hover{
                            .title{
                                color: #189eef;
                            }
                        }
                        img{
                            width: 100%;
                            height: 100%;
                        }
                        .title{
                            position: absolute;
                            width: 4.675rem;
                            height: .475rem;
                            background-color: RGBA(0, 0, 0, .5);
                            font-size: .2rem;
                            color: #FFFFFF;
                            line-height: .475rem;
                            bottom: 0;
                            padding-left: .125rem;
                            text-align: left;
                        }
                    }
                }
            }
        }
    }
          
  </style>