AgriculturalCloud-h5-UI/pages/results/index.vue

<template>
  <view class="page-content results">
    <view class="page-header results-header">
      <view class="results-header-content">
        <view class="results-header-image">
          <image class="results-image"
            src="@/static/agrcloud-images/agrcloud-results-page-img.png"></image>
        </view>
        <view class="results-header-text">
          <text class="results-text">操作成功</text>
        </view>
      </view>
    </view>
    <view class="page-main results-main">
      <view class="results-main-btngroup">
        <view class="btngroup-backuplevelbtn">
          <view class="results-backuplevelbtn">
            <view class="results-backuplevelbtn-text"
              @click="handleBackUplevelClick">
              返回上一级
            </view>
          </view>
        </view>
        <view class="btngroup-backhomebtn">
          <view class="results-backhomebtn">
            <view class="results-backhomebtn-text"
              @click="handleBackHomeClick">
              返回主页
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  name: 'results',
  components: {},
  data() {
    return {};
  },
  onLoad: function(option) {
    this.initData();
  },
  methods: {
    /** 初始化数据 */
    initData() {},
    handleBackUplevelClick() {
      uni.navigateBack({
        delta: 1
      });
    },
    handleBackHomeClick() {
      uni.navigateTo({
        url: '/pages/index/index'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  .results {
    padding: 0;

    &-header {
      padding-top: 25rpx;
      width: 100%;

      &-content {
        width: 100%;
        height: 346rpx;
        background-color: #FFFFFF;

        .results-header-image {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .results-image {
            width: 128rpx;
            height: 128rpx;
            margin: 64rpx auto auto auto;
          }
        }

        .results-header-text {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .results-text {
            margin: 40rpx auto auto auto;
            height: 50rpx;
            font-size: 36rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 50rpx;
          }
        }
      }
    }

    &-main {
      width: 100%;

      &-btngroup {
        width: 100%;
        padding-top: 60rpx;

        .btngroup-backuplevelbtn {
          padding: 0 24rpx;
        }

        .btngroup-backhomebtn {
          padding: 24rpx;
        }
      }

      .results-backuplevelbtn {
        height: 98rpx;
        background: #53A0FD;
        border-radius: 8rpx;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .results-backuplevelbtn-text {
          margin: 24rpx auto auto auto;
          height: 50rpx;
          font-size: 36rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 50rpx;
        }
      }

      .results-backhomebtn {
        height: 98rpx;
        background: #FFFFFF;
        border-radius: 8rpx;
        border: 2rpx solid #E5E5E5;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .results-backhomebtn-text {
          margin: 24rpx auto auto auto;
          height: 50rpx;
          font-size: 36rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 50rpx;
        }
      }
    }
  }
</style>