package_h5/src/pages/index/detail.vue

<template>
  <view>
    <uni-nav-bar :title="form.projectName" leftIcon="left" @clickLeft="getBack" />
    <view class="title">Android安装包</view>
    <view class="list" v-for="item in form.android" :key="item.id">
      <view class="main">
        <text>{{ item.name }}</text>
        <text>{{ item.updateTimeText }} 更新 | {{ item.version }}</text>
      </view>
      <a :href="item.downUrl">安装</a>
    </view>
    <view class="title">IOS安装包</view>
    <view class="list" v-for="item in form.ios" :key="item.id">
      <view class="main">
        <text>{{ item.name }}</text>
        <text>{{ item.updateTimeText }} 更新 | {{ item.version }}</text>
      </view>
      <a :href="item.downUrl">安装</a>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {}
    }
  },
  onLoad(e) {
    this.form = JSON.parse(decodeURIComponent(e.item))
  },
  methods: {
    getBack() {
      uni.redirectTo({
        url: `/pages/index/index`
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.uni-list-chat {
  display: flex;
}

.title {
  padding: 28rpx 20rpx;
  font-size: 28rpx;
}

.list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 20rpx;
  background: #fff;
  border-bottom: 2rpx solid #eee;
}

.main {
  display: flex;
  flex-direction: column;

  text:first-child {
    font-size: 28rpx;
  }

  text:last-child {
    font-size: 22rpx;
  }
}

a {
  margin: 0;
  background: none;
  border: 2rpx solid #f80;
  padding: 10rpx 30rpx;
  font-size: 24rpx;
  color: #f80;
  border-radius: 10rpx;
  text-decoration: none;
}
</style>