About.vue

<template>
  <h-view class="public-style about" title="关于徐工金服">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
        <span>关于徐工金服</span>
      </div>
    </h-header>
    <h-content>
      <div class="about-content">
        <img class="icon" src="@/assets/image/icon.png">
        <div class="version">徐工金服 v{{ currentVersion }}</div>
      </div>
      <list-item>
        <item :show-arrow="true" @click.native="userAgree">
          <div slot="name">用户协议</div>
        </item>
        <item :show-arrow="true" @click.native="privacyPolicy">
          <div slot="name">隐私政策</div>
        </item>
      </list-item>
    </h-content>
  </h-view>
</template>

<script>
export default {
  data () {
    return {
      currentVersion: process.env.currentVersion,
    }
  },
  methods: {
    userAgree () {
      this.$router.push({
        name: 'UserAgree',
      })
    },
    privacyPolicy () {
      this.$router.push({
        name: 'PrivacyPolicy',
      })
    },
  },
}
</script>

<style lang="less">
  .about {
    background-color: #f3f3f3;
    .content {
      .about-content {
        height: 170px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: #fff;
        .icon{
          width: 60px;
          height: 60px;
          border-radius: 12px;
          box-shadow: 0 0.03rem 0.01rem -0.02rem rgba(0,0,0,.2), 0 0.02rem 0.02rem 0 rgba(0,0,0,.14), 0 0.01rem 0.05rem 0 rgba(0,0,0,.12);
        }
        .version{
          margin-top: 20px;
          font-size: 17px;
          color: #666;
          font-weight: 400;
        }
      }
      .hls-list-item{
        margin-top: 20px;
        .hls-item{
          .contents{
            .add-name{
              color: #666;
            }
          }
        }
      }
    }
  }
</style>