<template>
  <view class="gsyh">
    <view class="group_45764">
      <view class="rectangle_23284">
        <!-- <BarsStatusBarsIPhoneLight class="bars_status_bars_iphone_light" /> -->

        <view class="flexcontainer">
          <view class="group_8">
            <!-- <image class="frame" src="/容器.png" /> -->
          </view>

          <view class="group_7">
            <view class="rectangle_18503"></view>
            <text class="text_1">账户详情</text>
          </view>

          <view class="group_9">
            <!-- <image class="group_13980" src="/蒙版组 13980.png" /> -->
            <!-- <image class="group_13979" src="/蒙版组 13979.png" /> -->
          </view>
        </view>
      </view>

      <!-- <image class="div_1" src="/直线.png" /> -->
    </view>

    <view class="group_48164">
      <view class="rectangle_23292">
        <!-- <image class="group_48163" src="/组 48163.png" /> -->

        <view class="flexcontainer_1">
          <view class="flexcontainer_2">
            <text class="text_2">重庆 借记卡(I 类)</text>
            <text class="text_3">6222****9304</text>
          </view>

          <!-- <image class="group_48162" src="/组 48162.png" /> -->

          <view class="rectangle_23290">
            <!-- <image class="f0763869907c4a2a56d1061936006358" src="/f0763869907c4a2a56d1061936006358.png" /> -->
          </view>
        </view>

        <text class="text_4">柜面注册</text>
      </view>
    </view>

    <view class="group_48161">
      <view class="rectangle_23285">
        <text class="text_5">人民币余额</text>
        <text class="text_6">55.22</text>
      </view>
    </view>

    <!-- <image class="group_48140_3x" src="/组 48140@3x.png" /> -->

    <view class="group_48166">
      <view class="flexcontainer_3">
        <text class="text_7">限额</text>
        <!-- <image class="group_48165" src="/组 48165.png" /> -->
      </view>

      <view class="panel_limits">
        <view class="flexcontainer_4">
          <view class="flexcontainer_5">
            <text class="text_8">当日剩余额度(元)</text>
            <text class="text_9">日累积50,000.00</text>
          </view>
          <text class="text_10">50,000.00</text>
        </view>

        <view class="flexcontainer_6">
          <view class="flexcontainer_7">
            <text class="text_11">当月剩余额度(元)</text>
            <text class="text_12">日累积500,000.00</text>
          </view>
          <text class="text_13">500,000.00</text>
        </view>

        <view class="flexcontainer_8">
          <view class="flexcontainer_9">
            <text class="text_14">当年剩余额度(元)</text>
            <text class="text_15">日累积2,500,000.00</text>
          </view>
          <text class="text_16">2,500,000.00</text>
        </view>

       <!-- <image class="div_2" src="/直线(1).png" />
        <image class="div_3" src="/直线(1).png" /> -->
      </view>
    </view>

    <view class="panel_limits_1">
      <view class="group_13988">
        <view class="rectangle_23294">
          <text class="text_17">基本账户</text>
          <!-- <image class="group_13987" src="/蒙版组 13987.png" /> -->
          <text class="text_18">3100****6438</text>
        </view>
      </view>

      <view class="group_13989">
        <view class="rectangle_23294_1">
          <text class="text_19">启用日期</text>
          <text class="text_20">2019年10月01日</text>
        </view>
      </view>

      <view class="group_13990">
        <view class="rectangle_23294_2">
          <text class="text_21">到期日期</text>
          <!-- <image class="group_48165_1" src="/组 48165.png" /> -->
          <text class="text_22">2029年年8月</text>
        </view>
      </view>

      <view class="group_13991">
        <view class="rectangle_23294_3">
          <text class="text_23">设置别名</text>
          <!-- <image class="group_13987_1" src="/蒙版组 13987.png" /> -->
          <text class="text_24">此卡别名</text>
        </view>
      </view>

      <view class="group_13992">
        <view class="rectangle_23294_4">
          <text class="text_25">账户互转</text>
          <!-- <image class="group_13987_2" src="/蒙版组 13987.png" /> -->
        </view>
      </view>

      <view class="group_13993">
        <view class="rectangle_23294_5">
          <text class="text_26">当面收款</text>
          <!-- <image class="group_13987_3" src="/蒙版组 13987.png" /> -->
        </view>
      </view>

      <view class="group_13994">
        <view class="rectangle_23294_6">
          <text class="text_27">绑手机号</text>
          <!-- <image class="group_13987_4" src="/蒙版组 13987.png" /> -->
        </view>
      </view>

<!--      <image class="div_4" src="/直线(1).png" />
      <image class="div_5" src="/直线(1).png" />
      <image class="div_6" src="/直线(1).png" />
      <image class="div_7" src="/直线(1).png" />
      <image class="div_8" src="/直线(1).png" />
      <image class="div_9" src="/直线(1).png" /> -->
    </view>

    <view class="group_13994_1">
      <text class="text_28">其他</text>
      <!-- <image class="group_13987_5" src="/蒙版组 13987.png" /> -->
    </view>

    <view class="group_13995">
      <text class="text_29">其他</text>
      <!-- <image class="group_13987_6" src="/蒙版组 13987.png" /> -->
    </view>

    <!-- <image class="dee351fc65540488ca79ac78c10072f2" src="/dee351fc65540488ca79ac78c10072f2.png" /> -->

    <Home class="home" />
  </view>
</template>

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

.gsyh {
  position: relative;
  width: 750rpx;
  height: 2756rpx;
  overflow: hidden;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  isolation: isolate;
}

/* ===== header ===== */
.group_45764 {
  position: relative;
  width: 750rpx;
  height: 188rpx;
}

.rectangle_23284 {
  width: 750rpx;
  height: 188rpx;
  background-color: #ffffff;
}

.flexcontainer {
  display: flex;
  width: 750rpx;
  height: 96rpx;
  flex-direction: row;
  align-items: flex-start;
}

.group_8 {
  width: 240rpx;
  height: 96rpx;
}

.frame {
  width: 48rpx;
  height: 48rpx;
  margin-top: 32rpx;
  margin-left: 22rpx;
}

.group_7 {
  width: 240rpx;
  height: 96rpx;
}

.rectangle_18503 {
  width: 240rpx;
  height: 96rpx;
}

.text_1 {
  font-size: 36rpx;
  color: #617280;
  text-align: center;
  line-height: 96rpx;
}

.group_9 {
  width: 240rpx;
  height: 96rpx;
  display: flex;
  flex-direction: row;
}

.group_13980,
.group_13979 {
  width: 48rpx;
  height: 48rpx;
  margin-top: 32rpx;
}

.div_1 {
  width: 754rpx;
  height: 2rpx;
}

/* ===== card ===== */
.group_48164 {
  width: 692rpx;
  height: 232rpx;
  margin-top: 28rpx;
  margin-left: 30rpx;
}

.rectangle_23292 {
  width: 692rpx;
  height: 232rpx;
  border-radius: 20rpx;
  background-color: #ffffff;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
}

.group_48163 {
  width: 152rpx;
  height: 38rpx;
  margin-left: 540rpx;
}

.flexcontainer_1 {
  display: flex;
  flex-direction: row;
  margin-top: 10rpx;
}

.flexcontainer_2 {
  display: flex;
  flex-direction: column;
  margin-left: 130rpx;
}

.text_2 {
  font-size: 28rpx;
  color: #333333;
}

.text_3 {
  font-size: 26rpx;
  color: #333333;
}

.group_48162 {
  width: 52rpx;
  height: 32rpx;
  margin-left: 20rpx;
  margin-top: 46rpx;
}

.rectangle_23290 {
  width: 108rpx;
  height: 78rpx;
}

.f0763869907c4a2a56d1061936006358 {
  width: 108rpx;
  height: 78rpx;
}

.text_4 {
  font-size: 22rpx;
  color: #767676;
  margin-top: 10rpx;
}

/* ===== balance ===== */
.group_48161 {
  width: 750rpx;
  height: 108rpx;
  margin-top: 28rpx;
}

.rectangle_23285 {
  width: 750rpx;
  height: 108rpx;
  background-color: #ffffff;
}

.text_5 {
  position: absolute;
  top: 38rpx;
  left: 60rpx;
  font-size: 28rpx;
  color: #1a1a1a;
}

.text_6 {
  position: absolute;
  top: 40rpx;
  right: 28rpx;
  font-size: 34rpx;
  font-weight: bold;
}

/* ===== banner ===== */
.group_48140_3x {
  width: 750rpx;
  height: 364rpx;
}

/* ===== limit ===== */
.group_48166 {
  width: 750rpx;
}

.flexcontainer_3 {
  display: flex;
  flex-direction: row;
  margin-left: 28rpx;
}

.text_7 {
  font-size: 28rpx;
}

.group_48165 {
  width: 28rpx;
  height: 28rpx;
  margin-left: 10rpx;
}

.panel_limits {
  width: 750rpx;
  height: 424rpx;
  background-color: #ffffff;
}

.flexcontainer_4,
.flexcontainer_6,
.flexcontainer_8 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 40rpx 26rpx 0 26rpx;
}

.text_8,
.text_11,
.text_14 {
  font-size: 28rpx;
  color: #333;
}

.text_9,
.text_12,
.text_15 {
  font-size: 24rpx;
  color: #aaa;
}

.text_10,
.text_13,
.text_16 {
  font-size: 30rpx;
  font-weight: bold;
}

/* 分割线 */
.div_2,
.div_3 {
  width: 694rpx;
  height: 2rpx;
  margin-left: 28rpx;
}

/* ===== list ===== */
.panel_limits_1 {
  width: 750rpx;
  background-color: #ffffff;
}

.rectangle_23294,
.rectangle_23294_1,
.rectangle_23294_2,
.rectangle_23294_3,
.rectangle_23294_4,
.rectangle_23294_5,
.rectangle_23294_6 {
  width: 750rpx;
  height: 108rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1rpx solid #eee;
}

.text_17,
.text_19,
.text_21,
.text_23,
.text_25,
.text_26,
.text_27 {
  font-size: 28rpx;
  margin-left: 28rpx;
}

.group_13987,
.group_13987_1,
.group_13987_2,
.group_13987_3,
.group_13987_4 {
  width: 28rpx;
  height: 28rpx;
  margin-left: auto;
  margin-right: 28rpx;
}

/* ===== others ===== */
.group_13994_1,
.group_13995 {
  width: 750rpx;
  height: 108rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text_28,
.text_29 {
  font-size: 28rpx;
  margin-left: 28rpx;
}

.group_13987_5,
.group_13987_6 {
  width: 28rpx;
  height: 28rpx;
  margin-right: 28rpx;
}

.dee351fc65540488ca79ac78c10072f2 {
  width: 750rpx;
  height: 200rpx;
}

.home {
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>