<template>
  <view class="add_household">
    <view @click="show = true"> 添加房屋住户 </view>
    <hs-popup :show="show" mode="bottom" :closeable="true" @close="show = false" :round="15">
      <view>
        <view class="popup_title"> 添加房屋住户 </view>
        <view class="popup_content">
          <view class="popup_items">
            <view class="popup_items_content">
              <view class="popup_items_label"> 自行添加住户 </view>
              <view> 自行填写住户信息，绑定房屋 </view>
            </view>
            <uni-icons type="personadd-filled" size="30" color="#2A7EFB"></uni-icons>
          </view>

          <view class="popup_items">
            <view class="popup_items_content">
              <view class="popup_items_label"> 邀请他人填写 </view>
              <view> 转发给他人填写，提交后直接绑定该房屋 </view>
            </view>
            <uni-icons type="weixin" size="30" color="#28C445"></uni-icons>
          </view>
        </view>
      </view>
    </hs-popup>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const show = ref(false)
</script>
<style lang="scss" scoped>
.add_household {
  width: 100%;
  .popup_title {
    font-size: 33rpx;
    font-weight: 550;
    padding: 30rpx 0;
  }
  .popup_content {
    padding-bottom: 50rpx;
  }
  .popup_items {
    background-color: #f9fafb;
    padding: 30rpx;
    margin: 0 30rpx 30rpx 30rpx;
    border-radius: 15rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .popup_items_content {
      flex: 1;
      text-align: left;
      font-size: 28rpx;
      .popup_items_label {
        padding-bottom: 5rpx;
        color: #3d3d3d;
        font-size: 32rpx;
        font-weight: 500;
      }
    }
  }
}
</style>
