<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="@/assets/images/15探海神龟.jpg" alt="">
                </div>
                <div class="right">
                    <div class="indroduce">
                        江苏中业消防技术服务有限公司位于江苏省连云港市，注册资本1000万元，具备消防设施工程专业承包贰级、建筑装修装饰工程专业承包贰级、施工劳务不分等级资质，同时具备建筑消防设施检测、维保、评估资质。是一家集设计咨询、消防技术咨询、消防工程技术服务、消防施工、火灾隐患排查整治指导及消防设施维护保养、检测、安全评估为一体的综合性消防技术服务机构，一直致力于消防领域的科学研究与社会消防技术服务，实现品牌创造与效益双赢。
                    </div>
                    <div class="menu">
                        <div class="item">
                            <img src="@/assets/images/企业介绍(1).png" alt="">
                            <span>公司介绍</span>
                        </div>
                        <div class="item">
                            <img src="@/assets/images/组织架构管理.png" alt="">
                            <span>组织机构</span>
                        </div>
                        <div class="item">
                            <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="i in 5">
                            <span class="title">中业消防获“第一批成都工业精品”认定</span>
                            <span class="time">2019-2-13</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="item" v-for="i in 2">
                            <img src="@/assets/images/15探海神龟.jpg" alt="">
                            <div class="title">中业消防获“第一批成都工业精品”认定</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
  </template>
  
  <script>
  export default {
      name: 'Home',
      components: {
      },
      data(){
          return{
            activeIndexInfo: 0,
            informationMenu:[
                {name:'公司新闻'},
                {name:'行业动态'},
                {name:'消防规范'}
            ]
              
          }
      },
      created(){
          
      },
      
      methods:{
        selectTab(i){
              this.activeIndexInfo = i
          }
      }
  }
  </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;
                            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;
                        &: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;
                        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;
                        }
                    }
                }
            }
        }
    }
          
  </style>
  