realtorEasier-webSite/pc/src/page/service/down/index.vue

<template>
  <div>
    <div class="d-banner">
      <img :src="`${$cdn}images/service_down_ban.png`" alt="" srcset="">
    </div>

    <div class="info">
      <h2>
        <span>4Dkankan</span>
        {{langDownload.txt}}
      </h2>
      <p>{{langDownload.txt}}</p>

      <div>
        <p>
          <b>iOS v0.5.21</b><br>
          2018-10-17<br>
          1.修复部分情况效果不一致情况；<br>
          2.常规维护与更新；<br>
        </p>
        <p>
          <b>Android v1.0.6</b><br>
          2018-10-29 <br>
          常规性能优化与bug修复。 <br>
        </p>
      </div>

      <div>
        <p>
          <a class="button">
            <img :src="`${$cdn}images/service_icon_ios@2x.png`" >
            <span>IOS</span>
          </a>
        </p>
        <p>
          <a class="button">
            <img :src="`${$cdn}images/service_icon_android@2x.png`" >
            <span>Android</span>
          </a>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      language: state => state.language.current,
      langDownload: state => state.language.home.home.services.down
    })
  }
}
</script>
<style lang="scss" scoped>
.d-banner {
  background-color: #fafafa;

  img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
}

.info {
  width: 750px;
  max-width: 100%;
  margin: 52px auto 78px;

  >h2 {
    font-size: 24px;
    color: #000000;
    margin-bottom: 20px;
    line-height: 1.4em;

    span {
      color: #aaaaaa;
      display: block;
    }
  }

  >p {
    color: #373737;
  }

  >div {
    margin-top: 50px;
    overflow: hidden;

    p {
      color: #858585;
      line-height: 1.6em;
      width: 266px;
      float: left;

      &:first-child .button {
        background-color: #2d2d2d;
      }

      &:last-child .button {
        background-color: #7fc651;
      }
    }

    .button {
      padding: 8px 12px;

      img {
        width: 30px;
        height: auto;
        vertical-align: middle;
      }

      span {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
}
</style>