luojigou_exhibition/src/pages/about/index.vue

<template>
  <view class="about">
    <view class="item" :style="{height: heightFarmat(item.height)}" v-for="(item, index) in imgList" :key="index">
      <image :src="item.imgUrl" mode="aspectFill" />
    </view>
    <view class="submit cu-btn block" @tap="navTo('/pages/contact/index')">
      联系我们 <em></em>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        {
          imgUrl: require('@/static/img/about/about_img1.png'),
          height: 1020
        },
        {
          imgUrl: require('@/static/img/about/about_img2.png'),
          height: 480
        },
        {
          imgUrl: require('@/static/img/about/about_img3.png'),
          height: 1022
        },
        {
          imgUrl: require('@/static/img/about/about_img4.png'),
          height: 1026
        },
        {
          imgUrl: require('@/static/img/about/about_img5.png'),
          height: 1020
        },
        {
          imgUrl: require('@/static/img/about/about_img6.png'),
          height: 1024
        },
        {
          imgUrl: require('@/static/img/about/about_img7.png'),
          height: 1024
        },
        {
          imgUrl: require('@/static/img/about/about_img8.png'),
          height: 1026
        },
        {
          imgUrl: require('@/static/img/about/about_img9.png'),
          height: 1026
        },
        {
          imgUrl: require('@/static/img/about/about_img10.png'),
          height: 1024
        },
        {
          imgUrl: require('@/static/img/about/about_img11.png'),
          height: 1024
        },
        {
          imgUrl: require('@/static/img/about/about_img12.png'),
          height: 1022
        },
        {
          imgUrl: require('@/static/img/about/about_img13.png'),
          height: 1022
        },
        {
          imgUrl: require('@/static/img/about/about_img14.png'),
          height: 906
        }
      ]
    }
  },
  computed: {
    heightFarmat(val) {
      return function(val) {
        return uni.upx2px(val) + 'px';
      }
    }
  },
  methods: {
    navTo(route) {
      this.$mRouter.push({
        route
      })
    }
  }
}
</script>

<style lang="scss">
.about {
  .item {
    image {
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
  }
  .submit {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 60upx;
    width: 532upx;
    height: 80upx;
    background: #FFFFFF;
    border-radius: 40upx;
    border: 2upx solid #333333;

    font-size: 32upx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 32upx;
    em {
      margin-left: 8px;
      width: 0;
      height: 0;
      border-top: 8upx solid transparent;
      border-right: 9upx solid transparent;
      border-bottom: 8upx solid transparent;
      border-left: 9upx solid transparent;
      border-left-color: #333333 ;
    }
  }
}
</style>