<template>
  <view style="background-color: #2c66a9; height: 3rem" :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }">
    <!-- 导航栏 -->
    <view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="van-nav-bar">
      <view class="van-nav-bar__content">
        <view class="page-icon" @click="gotoBack">
          <uni-icons color="#fff" type="back" size="26"></uni-icons>
          <view>返回</view>
        </view>
        <view class="page-navbar">有效期限</view>
      </view>
    </view>
    <!-- 用户详情 -->
    <view class="boxone">
      <view class="user">
        <view class="userbox">
          <view style="font-weight: 700">姓名</view>
          <view style="margin-left: 6rem; color: #6a7372">xx</view>
        </view>
        <view class="userbox">
          <view style="font-weight: 700">证件类型</view>
          <view style="margin-left: 4rem; color: #6a7372">A居民身份证</view>
        </view>
        <view class="userbox">
          <view style="font-weight: 700">证件号码</view>
          <view style="margin-left: 4rem; color: #6a7372">2323***********229</view>
        </view>
        <view class="userboxdata">
          <view style="display: flex">
            <view style="font-weight: 700">证件有效期限</view>
            <view style="margin-left: 2rem; color: #6a7372">请选择日期</view>
          </view>
          <view>
            <uni-icons style="margin-right: 0.5rem" type="right" size="20" color="#b3b3b3"></uni-icons>
          </view>
        </view>
      </view>
      <!-- 案例 -->
      <view class="example">样例</view>
      <!-- 图片 -->
      <view style="background-color: #fff">
        <image style="width: 90%; height: 12rem; margin: 0.8rem 5%" src="../../../../static/shenfen.png"></image>
      </view>
      <!-- 按钮 -->
      <view class="buttom">
        <view class="buttombox">下一步</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const { safeAreaInsets } = uni.getSystemInfoSync();
const user = ref([
  {
    text: '',
    content: '',
    id: 1
  },
  {
    text: '',
    content: '',
    id: 2
  },
  {
    text: '',
    content: '',
    id: 3
  },
  {
    text: '',
    content: '',
    id: 4
  }
]);
const gotoBack = () => {
  uni.navigateBack({
    delta: 1
  });
};
</script>

<style lang="scss">
.van-nav-bar__content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  background-color: #2c66a9;
  color: #fff;
  letter-spacing: 1.5px;
  position: relative;

  .page-icon {
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
  }
  .page-navbar {
    font-size: 1.1rem;
  }
}
.boxone {
  background-color: #f2fbfa;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 3rem);
}
.user {
  width: 100%;
  background-color: #fff;
  margin-top: 0.8rem;
  .userbox {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    width: 95%;
    border-bottom: 1rpx solid #ececec;
    margin-left: 5%;
  }
  .userboxdata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95%;
    margin-left: 5%;
    padding: 1rem 0;
  }
}
.example {
  padding: 0.8rem 0;
  width: 95%;
  margin-left: 5%;
  color: #6a7372;
  font-size: 1rem;
}
.buttom {
  flex-grow: 1;
  .buttombox {
    background-color: #d5d5d5;
    width: 90%;
    height: 3.2rem;
    border-radius: 0.2rem;
    text-align: center;
    line-height: 3.2rem;
    color: #a1a1a1;
    margin: 2rem 5%;
  }
}
</style>
