aluminium-trading-uniapp-240925/pages_order/auth/selectionIdentity.vue

<template>
  <view>

    <navbar title="选择身份" leftClick @leftClick="$utils.navigateBack" />

    <view class="container">

      <view class="title">请选择你的身份</view>
      <view class="button-group">
        <!--供应商-->
        <view class="identity-button" @click="selectIdentity(0)">
          <view class="identity-text">我是采购商</view>
          <view class="identity-icon">
            <img src="../../static/image/index/5.png" style="width: 100%; height: 100%;">
          </view>
        </view>
        <!--采购-->
        <view class="identity-button" @click="selectIdentity(1)">
          <view class="identity-text">我是供应商</view>
          <view class="identity-icon">
            <img src="../../static/image/index/6.png" style="width: 100%; height: 100%;">
          </view>
        </view>
      </view>
    </view>
  </view>

</template>

<script>
export default {
  methods: {
    selectIdentity(identity) {
      uni.navigateTo({
        url: `/pages_order/auth/registerShop?identity=${identity}`
      })
    },
  }
}
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  //height: 100vh;
  background-color: #f5f5f5;

  .title {
    font-size: 40rpx;
    color: #333;
    margin: 80rpx 0;
  }

  .button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100vw;
    //padding: 0 20px;

    .identity-button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 80%;
      margin-bottom: 40rpx;
      padding: 40rpx 50rpx;
      background-color: #2d2f59;
      border-radius: 20rpx;
      color: white;

      .identity-text {
        font-size: 40rpx;
      }

      .identity-icon {
        width: 130rpx;
        height: 130rpx;
      }
    }
  }
}


</style>