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

<template>
    <div class="page">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="公司介绍" name="1">
                <div class="item-1">
                    <div class="title">{{introduce.tittle}}</div>
                    <div class="ql-editor content" v-html="introduce.content" ref="content"></div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="组织机构" name="2">
                <div class="item-2">
                    <img :src="$baseUrl+structure.img" alt="">
                </div>
            </el-tab-pane>
            <el-tab-pane label="资质证书" name="3">
                <div class="item-3">
                    <div class="item" v-for="(item,i) in certificate">
                        <img :src="$baseUrl+item.img" alt="">
                        <div class="title">{{item.tittle}}</div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="联系我们" name="4">
                <div class="item-4">
                    <div class="lianxi">
                        <div class="phone">
                            <span class="icon">
                                <img src="@/assets/images/电话.png" alt="">
                            </span>
                            <span class="value">电话：0518-90876754</span>
                        </div>
                        <div class="address">
                            <span class="icon">
                                <img src="@/assets/images/地址.png" alt="">
                            </span>
                            <span class="value">地址：连云港海宁中路西大街</span>
                        </div>
                    </div>
                    <div class="content">
                        <div class="left">
                            <baidu-map class="map" ak="GsmliYCDkPOEKXsh4NHkYVBfWdKP6YiQ" v="3.0" type="API" :center="{lng: 119.135022, lat: 34.621419}" :zoom="15" :scroll-wheel-zoom="true">
                                <!-- 红点定位 -->
                                <bm-marker
                                    :position="{lng: 119.200252, lat: 34.603919}"
                                    :dragging="false"
                                    ></bm-marker>
                                    <!-- 缩放 -->
                                    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

                            </baidu-map>
                        </div>
                    </div>
                </div>

            </el-tab-pane>
        </el-tabs>
       
    </div>    
          
  </template>
  
  <script>
    import { BaiduMap } from 'vue-baidu-map-3x'
  export default {
      name: 'Bottom',
      components: {
        BaiduMap
      },
      data(){
          return{
            introduce:{},
            structure:{},
            certificate:[],
            activeName: '1',
            center: { lng: 0, lat: 0 }, 
              
          }
      },
      created(){
        
        if(this.$route.query&&this.$route.query.name){
            this.activeName = this.$route.query.name
        }
        this.getData()
      },
      activated(){
        if(this.$route.query&&this.$route.query.name){
            this.activeName = this.$route.query.name
        }
      },
      methods:{
        getData(){
            this.$http.get(`zy/website/article/page?type=公司介绍`).then(res=>{
                this.introduce = res.data.rows[0]
            })
            this.$http.get(`zy/website/article/page?type=组织机构`).then(res=>{
                this.structure = res.data.rows[0]
            })
            this.$http.get(`zy/website/article/page?type=资质证书`).then(res=>{
                this.certificate = res.data.rows
            })
        },
        handleClick(tabsPaneContext,e){
            console.log(tabsPaneContext)
            console.log(e)
        }
         
      }
  }
  </script>
  <style lang="scss" scoped>
    ::v-deep .el-tabs{
        --el-tabs-header-height: 1.1rem
    }
    ::v-deep .el-tabs__header{
        margin-bottom: 0;
    }
    ::v-deep .el-tabs__nav-scroll{
        display: flex;
        justify-content: center;
    }
    ::v-deep .el-tabs__item{
        font-size: .25rem;
    }
    ::v-deep .el-tabs__item:hover{
        color: #1D2088;
    }
    ::v-deep .el-tabs__item.is-active{
        color: #1D2088;
    }
    ::v-deep .el-tabs__active-bar{
        width: 1rem!important;
        background-color: #1D2088;
    }
    .page{
        min-height: 10.75rem;
        background: url('@/assets/images/1.png') no-repeat;
        background-size: auto 8.25rem;
        background-position: 0 1.5rem;

        .item-1{
            font-size: .225rem;
            color: #333333;
            line-height: .6rem;
            font-family: Source Han Sans CN;
            padding: 1rem 2.375rem;
            .title{
                font-size: .35rem;
                font-weight: bold;
                text-align: center;
            }
            .content{
                margin-top: .25rem;
                font-size: .275rem;
                line-height: .6rem;
            }

        }
        .item-2{
            margin-top: 1rem;
           display: flex;
           justify-content: center;
            img{
                width: 13.7125rem;
                height: auto;
            }
        }
        .item-3{
            display: flex;
            flex-wrap: wrap;
            padding: 1rem 2.475rem;
            background-color: #fff;
            /* justify-content: space-between; */
            .item{
                width: 33.3%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-bottom: .375rem;
                img{
                    /* width: 90%; */
                    width: auto;
                    height: 3.75rem;
                }
                .title{
                    margin-top: .125rem;
                    font-size: .25rem;
                    color: #333333;
                }
            }
        }
        .item-4{
            .lianxi{
                width: 100%;
                height: 2.5rem;
                display: flex;
                align-items: center;
                padding-left: 1.625rem;
                background: url('@/assets/images/lx-bg.jpg') no-repeat;
                background-size: 100% 100%;
                .phone,.address{
                    display: flex;
                    margin-left: .75rem;
                }
                .icon{
                    display: inline-block;
                    width: .575rem;
                    height: .575rem;
                    background: #A11715;
                    border-radius: .05rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    img{
                        width: .375rem;
                        height: .375rem;
                    }
                }
                .value{
                    display: inline-block;
                    width: 4.875rem;
                    height: .575rem;
                    background: #A11715;
                    border-radius: .05rem;
                    margin-left: .0375rem;
                    line-height: .575rem;
                    color: #fff;
                    padding-left: .375rem;
                    font-size: .25rem;
                }
               

            }
            .map{
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 1rem;
                width: 100%;
                height: 10rem;
                background-color: #fff;
            }
        }
    }
  </style>