usoft-town/pages/about/index.vue

<template>
  <div class="about">
    <div class="container">
      <div class="address">
        <h4>联系方式</h4>
        <p>contact</p>
        <div class="tel">
          <ul class="list-inline">
            <li>
              <h4>联系方式</h4>
              <p>400 - 930 - 3066</p>
              <p>bgyicdd@countrygarden.com.cn</p>
              <a href="">申 请</a>
            </li>
            <li>
              <h4>预约参观</h4>
              <img src="/qrcode/code.png">
            </li>
          </ul>
        </div>
      </div>
      <div class="map">
        <img src="/map.png">
        <div class="map-info">
          <ul class="list-unstyled">
            <li>
              <p>A 潼湖科技小镇</p>
              <p>地址：惠州市惠城区沥林镇英光村</p>
            </li>
            <li>
              <p>B 潼湖科技小镇 .产业发展中心 </p>
              <p>地址：惠州市惠城区沥林镇英光村潼湖科技小镇</p>
            </li>
            <li>
              <p>C 潼湖科技小镇 .深圳展厅</p>
              <p>地址：深圳市南山区科技园（中区）科技路一号桑达科技大厦13楼</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: 'About',
      layout: 'town'
    }
</script>

<style type="text/scss" lang="scss" scoped>
  .about{
    margin-top:54px;
    padding-bottom:150px;
    .address{
      padding:48px 42px;
      margin-bottom:140px;
      h4{
        font-size: 48px;
        color:#1f5a6f;
        margin:0;
        margin-bottom:10px;
      }
      p{
        padding-left:86px;
        font-size: 30px;
        color:#b3cbd3;
        margin-bottom:40px;
      }
      ul{
        li{
          vertical-align: top;
          margin:0 50px;
          border-left:6px solid #122931;
          width:440px;
          height:228px;
          text-align: center;
          background: #e3e7e9;
          padding-top:48px;
          h4{
            font-size: 24px;
            margin:0;
            color:#122931;
            margin-bottom:30px;
          }
          p{
            font-size: 14px;
            color:#777;
            margin-bottom:10px;
            padding:0;
          }
          a{
            display:block;
            margin:0 auto;
            margin-top:20px;
            width:120px;
            height:36px;
            background: #217694;
            text-align: center;
            line-height: 36px;
            color:#fff;
            &:hover{
              cursor:pointer;
            }
          }
          img{
            width:100px;
            height:100px;
          }
        }
      }
    }
    .map{
      position:relative;
      .map-info{
        position:absolute;
        right:0;
        top:50%;
        width:350px;
        height:380px;
        background: #1f5a6f;
        margin-top:-190px;
        padding-top:70px;
        ul{
          li{
            padding: 10px 20px;
            p{
              font-size: 14px;
              color:#e5edf0;
              margin-bottom:10px;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
</style>