<template>
  <view class="div">
		<view v-if="$isVip()">
			<watermark dark="light" source="uni_alipay_other_bank" />
			<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_other_bank')">
				<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
			</liu-drag-button>
		</view>
    <view class="flexcontainer">
			
      <view class="group_48184" @click="openEditDialog">
			<view :style="{height:$systemInfo.statusBarHeight*2+96+'rpx'}" style="position: relative;width: 100%;">
				
			</view>
        <view class="header">
					<image @click="back" src="/static/image/nav-bar/back-black.png" mode=""></image>
					<text class="text_1">借记卡详情</text>
					<text class="imgXl"></text>
        </view>
				
        <view class="rectangle_23309">
          <view class="flexcontainer_1">
            <image class="group_13998" src="/static/image/other/bank/nyyh/eyes.png" />
            <image class="group_48187" src="/static/image/other/bank/nyyh/copy.png" />
            <text class="text_2">{{data.form.accountType}}</text>
            <view class="div_6216_2173">
              <text class="text_3">{{data.form.cardNumberPrefix}}</text>
              <text class="text_4">****</text>
              <text class="text_5">{{data.form.cardNumberSuffix}}</text>
            </view>
          </view>
          <view class="flexcontainer_2">
            <text class="text_6">注册渠道</text>
            <text class="text_7">{{data.form.registerChannel}}</text>
          </view>
          <view class="flexcontainer_3">
            <text class="text_8">开户网点</text>
            <text class="text_9">{{data.form.bankBranch}}</text>
          </view>
          <view class="flexcontainer_4">
            <text class="text_10">卡状态</text>
            <text class="text_11">{{data.form.cardStatus}}</text>
          </view>
          <view class="flexcontainer_5">
            <text class="text_12">账户状态</text>
            <text class="text_13">{{data.form.accountStatus}}</text>
          </view>
          <view class="flexcontainer_6">
            <text class="text_14">默认账户</text>
            <text class="text_15">{{data.form.isDefault}}</text>
          </view>
          <view class="flexcontainer_7">
            <view class="rectangle_23304">
              <text class="text_16">挂失</text>
            </view>
            <view class="rectangle_23305">
              <text class="text_17">改密</text>
            </view>
            <view class="rectangle_23306">
              <text class="text_18">密码解锁</text>
            </view>
            <view class="rectangle_23307">
              <text class="text_19">更多</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="group_48185" @click="openEditDialog">
      <view class="rectangle_23311">
        <view class="flexcontainer_8">
          <image class="group_48186" src="/static/image/other/bank/nyyh/china.png" />
          <text class="text_20">{{data.form.currency}}</text>
        </view>
        <view class="flexcontainer_9">
          <text class="text_21">可用余额</text>
          <text class="text_22">¥ {{data.form.availableBalance}}</text>
        </view>
        <view class="flexcontainer_10">
          <text class="text_23">¥ {{data.form.accountBalance}}</text>
          <text class="text_24">账户余额</text>
        </view>
        <view class="div_417"></view>
        <view class="flexcontainer_11">
          <text class="text_25">钞汇标志</text>
          <text class="text_26">{{data.form.exchangeFlag}}</text>
        </view>
        <view class="flexcontainer_12">
          <text class="text_27">执行利率</text>
          <text class="text_28">{{data.form.interestRate}}</text>
        </view>
        <view class="flexcontainer_13">
          <text class="text_29">开户日期</text>
          <text class="text_30">{{data.form.openDate}}</text>
        </view>
      </view>
    </view>

    <!-- 编辑弹窗 -->
    <view v-if="editDialog.show" class="editDialog">
      <view class="editDialog_bg">
        <view class="editDialog_header">
          <text class="title">编辑账户信息</text>
        </view>
        <view class="editDialog_body">
          <view class="formItem">
            <text>卡号前缀</text>
            <input v-model="editDialog.data.cardNumberPrefix" placeholder="如: 6216" />
          </view>
          <view class="formItem">
            <text>卡号后缀</text>
            <input v-model="editDialog.data.cardNumberSuffix" placeholder="如: 2173" />
          </view>
          <view class="formItem">
            <text>账户类型</text>
            <input v-model="editDialog.data.accountType" placeholder="如: I类" />
          </view>
          <view class="formItem">
            <text>注册渠道</text>
            <input v-model="editDialog.data.registerChannel" placeholder="如: 网点注册" />
          </view>
          <view class="formItem">
            <text>开户网点</text>
            <input v-model="editDialog.data.bankBranch" placeholder="如: 农业银行北京支行" />
          </view>
          <view class="formItem">
            <text>卡状态</text>
            <input v-model="editDialog.data.cardStatus" placeholder="如: 正常户" />
          </view>
          <view class="formItem">
            <text>账户状态</text>
            <input v-model="editDialog.data.accountStatus" placeholder="如: 正常户" />
          </view>
          <view class="formItem">
            <text>默认账户</text>
            <input v-model="editDialog.data.isDefault" placeholder="如: 是" />
          </view>
          <view class="formItem">
            <text>币种</text>
            <input v-model="editDialog.data.currency" placeholder="如: 人民币活期" />
          </view>
          <view class="formItem">
            <text>可用余额</text>
            <input :value="editDialog.data.availableBalance" @input="(e) => onNumberInput('availableBalance', e.detail.value)" placeholder="如: 0.00" />
          </view>
          <view class="formItem">
            <text>账户余额</text>
            <input :value="editDialog.data.accountBalance" @input="(e) => onNumberInput('accountBalance', e.detail.value)" placeholder="如: 0.00" />
          </view>
          <view class="formItem">
            <text>钞汇标志</text>
            <input v-model="editDialog.data.exchangeFlag" placeholder="如: 本币" />
          </view>
          <view class="formItem">
            <text>执行利率</text>
            <input v-model="editDialog.data.interestRate" placeholder="如: 0.05000%" />
          </view>
          <view class="formItem">
            <text>开户日期</text>
            <input v-model="editDialog.data.openDate" placeholder="如: 2026/12/02" />
          </view>
        </view>
        <view class="popup-footer">
          <view class="btn-cancel" @click="editDialog.show=false">取消</view>
          <view class="btn-save" @click="saveEdit">保存</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, onMounted } from 'vue';

const CACHE_KEY = 'nyyh_account_info';

const data = reactive({
  form: {
    cardNumberPrefix: '6216',
    cardNumberSuffix: '2173',
    accountType: 'I类',
    registerChannel: '网点注册',
    bankBranch: '农业银行北京支行',
    cardStatus: '正常户',
    accountStatus: '正常户',
    isDefault: '是',
    currency: '人民币活期',
    availableBalance: '0.00',
    accountBalance: '0.00',
    exchangeFlag: '本币',
    interestRate: '0.05000%',
    openDate: '2026/12/02',
  }
});

const editDialog = reactive({
  show: false,
  data: {}
});

onMounted(() => {
  loadCache();
});

function loadCache() {
  const cache = uni.getStorageSync(CACHE_KEY);
  if (cache) {
    data.form = { ...data.form, ...cache };
  }
}

function saveCache() {
  uni.setStorageSync(CACHE_KEY, data.form);
}

function openEditDialog() {
  editDialog.data = JSON.parse(JSON.stringify(data.form));
  editDialog.show = true;
}

function saveEdit() {
  data.form = { ...data.form, ...editDialog.data };
  saveCache();
  editDialog.show = false;
  uni.showToast({
    title: '保存成功',
    icon: 'success'
  });
}

// 格式化数字，保留两位小数并添加千分位逗号
function formatNumber(num) {
  if (!num && num !== 0) return '';
  let cleanNum = String(num).replace(/[^\d.]/g, '');
  const parts = cleanNum.split('.');
  if (parts.length > 2) {
    cleanNum = parts[0] + '.' + parts.slice(1).join('');
  }
  let number = parseFloat(cleanNum);
  if (isNaN(number)) return '';
  number = Math.round(number * 100) / 100;
  return number.toLocaleString('en-US', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  });
}

// 处理输入事件
function onNumberInput(field, value) {
  editDialog.data[field] = formatNumber(value);
}

function back(){
	uni.navigateBack()
}
</script>

<style lang="scss" scoped>
$color-text-primary: #1a1a1a;
$color-text-secondary: #767676;
$color-text-muted: #999999;
$color-text-btn: #6a6a6a;
$color-accent: #08c1a2;
$color-gold: #dda94f;
$color-bg: #f7f7f7;
$color-white: #ffffff;
$color-border: #e6e6e6;

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  display: flex;
  justify-content: flex-start;
}

.justify-center {
  display: flex;
  justify-content: center;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}

.justify-between {
  display: flex;
  justify-content: space-between;
}

.items-start {
  display: flex;
  align-items: flex-start;
}

.items-end {
  display: flex;
  align-items: flex-end;
}

.items-center {
  display: flex;
  align-items: center;
}

.no-shrink {
  flex-shrink: 0;
}

.div {
  position: relative;
  width: 750rpx;
  min-height: 1624rpx;
  overflow: hidden;
  background-color: $color-bg;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  isolation: isolate;

  .flexcontainer {
    position: relative;
    display: flex;
    width: 750rpx;
    flex-direction: column;
    align-items: flex-start;
    isolation: isolate;
    z-index: 0;
    margin-top: 0;
    margin-left: 0;

    .group_48184 {
      width: 750rpx;
      // height: 754rpx;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      z-index: 0;
      // margin-top: -86rpx;
      margin-left: 0;
      background-color: $color-white;
      isolation: isolate;
			padding-bottom: 44rpx;

      .text_1 {
        position: relative;
        text-align: center;
        font-size: 34rpx;
        font-family: 'PingFang SC';
        font-weight: 400;
        color: $color-text-primary;
        white-space: pre;
        width: max-content;
        z-index: 1;
      }

      .rectangle_23309 {
        position: relative;
        width: 686rpx;
        // height: 484rpx;
				padding-bottom: 28rpx;
        border-radius: 12rpx;
        background-color: $color-white;
        box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
        margin: 44rpx auto 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        z-index: 0;

        .flexcontainer_1 {
          position: relative;
          display: flex;
          width: 450rpx;
          height: 42rpx;
          flex-direction: row;
          align-items: flex-start;
          isolation: isolate;
          margin-top: 23rpx;
          margin-left: 39rpx;

          .group_13998 {
            width: 32rpx;
            height: 32rpx;
            z-index: 2;
            position: relative;
            margin-left: 317rpx;
            margin-top: 5rpx;
          }

          .group_48187 {
            width: 80rpx;
            height: 42rpx;
            z-index: 3;
            position: relative;
            margin-left: 21rpx;
            margin-top: 0;
          }

          .text_2 {
            position: absolute;
            top: 5rpx;
            left: 0;
            text-align: center;
            font-size: 30rpx;
            font-family: 'PingFang SC';
            font-weight: 400;
            line-height: 42rpx;
            color: $color-accent;
            white-space: pre;
            height: 42rpx;
            margin-top: -6rpx;
            margin-bottom: -6rpx;
            right: 412rpx;
            width: max-content;
            margin-left: auto;
            margin-right: auto;
            z-index: 0;
          }

          .div_6216_2173 {
            position: absolute;
            top: 5rpx;
            left: 0;
            text-align: center;
            line-height: 44rpx;
            white-space: pre;
            height: 44rpx;
            margin-top: -7rpx;
            margin-bottom: -7rpx;
            right: 96rpx;
            width: max-content;
            margin-left: auto;
            margin-right: auto;
            z-index: 1;

            .text_3,
            .text_5 {
              font-size: 32rpx;
              font-family: 'PingFang SC';
              line-height: 30rpx;
              font-weight: bold;
              color: $color-text-primary;
            }

            .text_4 {
              font-size: 28rpx;
              font-family: 'PingFang SC';
              line-height: 30rpx;
              font-weight: bold;
              color: $color-text-primary;
            }
          }
        }

        .flexcontainer_2,
        .flexcontainer_3,
        .flexcontainer_4,
        .flexcontainer_5,
        .flexcontainer_6 {
          position: relative;
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          margin-left: 38rpx;
        }

        .flexcontainer_2 {
          width: 222rpx;
          height: 26rpx;
          margin-top: 26rpx;

          .text_6 {
            position: absolute;
            top: 0;
            left: 0;
            font-size: 26rpx;
            font-family: 'PingFang SC';
            font-weight: 400;
            line-height: 36rpx;
            color: $color-text-primary;
            white-space: pre;
            height: 36rpx;
            margin-top: -5rpx;
            margin-bottom: -5rpx;
            right: 118rpx;
            width: max-content;
            margin-left: auto;
            margin-right: auto;
          }

          .text_7 {
            position: absolute;
            top: 0;
            left: 118rpx;
            font-size: 26rpx;
            font-family: 'PingFang SC';
            font-weight: 400;
            line-height: 36rpx;
            color: $color-text-secondary;
            white-space: pre;
            height: 36rpx;
            margin-top: -5rpx;
            margin-bottom: -5rpx;
            right: 0;
            width: max-content;
            margin-left: auto;
            margin-right: auto;
          }
        }

        .flexcontainer_3 {
          width: 326rpx;
          height: 26rpx;
          margin-top: 26rpx;

          .text_8 {
            position: absolute;
            top: 0;
            left: 0;
            font-size: 26rpx;
            font-family: 'PingFang SC';
            font-weight: 400;
            line-height: 36rpx;
            color: $color-text-primary;
            white-space: pre;
            height: 36rpx;
            margin-top: -5rpx;
            margin-bottom: -5rpx;
            right: 222rpx;
            width: max-content;
            margin-left: auto;
            margin-right: auto;
          }

          .text_9 {
            position: absolute;
            top: 0;
            left: 118rpx;
            font-size: 26rpx;
            font-family: 'PingFang SC';
            font-weight: 400;
            line-height: 36rpx;
            color: $color-text-secondary;
            white-space: pre;
            height: 36rpx;
            margin-top: -5rpx;
            margin-bottom: -5rpx;
            right: 0;
            width: max-content;
            margin-left: auto;
            margin-right: auto;
          }
        }

        .flexcontainer_4,
        .flexcontainer_5 {
          width: 196rpx;
          height: 26rpx;
        }

        .flexcontainer_4 {
          margin-top: 26rpx;

          .text_10 {
            position: absolute;
            top: 0;
            left: 0;
            font-size: 26rpx;
            font-family: 'PingFang SC';
            font-weight: 400;
            line-height: 36rpx;
            color: $color-text-primary;
            white-space: pre;
            height: 36rpx;
            margin-top: -5rpx;
            margin-bottom: -5rpx;
            right: 118rpx;
            width: max-content;
            margin-left: auto;
            margin-right: auto;
          }

          .text_11 {
            position: absolute;
            top: 0;
            left: 118rpx;
            font-size: 26rpx;
            font-family: 'PingFang SC';
            font-weight: 400;
            line-height: 36rpx;
            color: $color-text-secondary;
            white-space: pre;
            height: 36rpx;
            margin-top: -5rpx;
            margin-bottom: -5rpx;
            right: 0;
            width: max-content;
            margin-left: auto;
            margin-right: auto;
          }
        }

        .flexcontainer_5 {
          margin-top: 26rpx;

          .text_12 {
            position: absolute;
            top: 0;
            left: 0;
            font-size: 26rpx;
            font-family: 'PingFang SC';
            font-weight: 400;
            line-height: 36rpx;
            color: $color-text-primary;
            white-space: pre;
            height: 36rpx;
            margin-top: -5rpx;
            margin-bottom: -5rpx;
            right: 92rpx;
            width: max-content;
            margin-left: auto;
            margin-right: auto;
          }

          .text_13 {
            position: absolute;
            top: 0;
            left: 118rpx;
            font-size: 26rpx;
            font-family: 'PingFang SC';
            font-weight: 400;
            line-height: 36rpx;
            color: $color-text-secondary;
            white-space: pre;
            height: 36rpx;
            margin-top: -5rpx;
            margin-bottom: -5rpx;
            right: 0;
            width: max-content;
            margin-left: auto;
            margin-right: auto;
          }
        }

        .flexcontainer_6 {
          width: 144rpx;
          height: 26rpx;
          margin-top: 26rpx;

          .text_14 {
            position: absolute;
            top: 0;
            left: 0;
            font-size: 26rpx;
            font-family: 'PingFang SC';
            font-weight: 400;
            line-height: 36rpx;
            color: $color-text-primary;
            white-space: pre;
            height: 36rpx;
            margin-top: -5rpx;
            margin-bottom: -5rpx;
            right: 40rpx;
            width: max-content;
            margin-left: auto;
            margin-right: auto;
          }

          .text_15 {
            position: absolute;
            top: 0;
            left: 118rpx;
            font-size: 26rpx;
            font-family: 'PingFang SC';
            font-weight: 400;
            line-height: 36rpx;
            color: $color-text-secondary;
            white-space: pre;
            height: 36rpx;
            margin-top: -5rpx;
            margin-bottom: -5rpx;
            right: 0;
            width: max-content;
            margin-left: auto;
            margin-right: auto;
          }
        }

        .flexcontainer_7 {
          position: relative;
          display: flex;
          width: 624rpx;
          height: 50rpx;
          flex-direction: row;
          align-items: flex-start;
          margin-top: 58rpx;
          margin-left: 30rpx;

          .rectangle_23304,
          .rectangle_23305,
          .rectangle_23306,
          .rectangle_23307 {
            position: absolute;
            width: 144rpx;
            height: 50rpx;
            top: 0;
            border-radius: 25rpx;
            border: 2rpx solid $color-text-muted;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
						justify-content: center;
            text {
              position: relative;
              font-size: 26rpx;
              font-family: 'PingFang SC';
              font-weight: 400;
              // line-height: 36rpx;
              color: $color-text-btn;
              white-space: pre;
              width: max-content;
              margin-left: auto;
              margin-right: auto;
            }
          }

          .rectangle_23304 {
            left: 0;
            right: 480rpx;
          }

          .rectangle_23305 {
            left: 0;
            right: 160rpx;
          }

          .rectangle_23306 {
            left: 160rpx;
            right: 0;
          }

          .rectangle_23307 {
            left: 480rpx;
            right: 0;
          }
        }
      }
    }
  }

  .group_48185 {
    position: relative;
    width: 750rpx;
    height: 468rpx;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 2;
    margin-top: 20rpx;
    margin-left: 0;

    .rectangle_23311 {
      position: relative;
      width: 750rpx;
      height: 468rpx;
      background-color: $color-white;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      isolation: isolate;
      margin-top: 0;

      .flexcontainer_8 {
        position: relative;
        display: flex;
        width: 250rpx;
        height: 50rpx;
        flex-direction: row;
        align-items: flex-start;
        z-index: 0;
        margin-top: 48rpx;
        margin-left: 32rpx;

        .group_48186 {
          width: 50rpx;
          height: 50rpx;
          position: relative;
          margin-left: 0;
          margin-top: 0;
        }

        .text_20 {
          position: absolute;
          top: 8rpx;
          left: 70rpx;
          font-size: 36rpx;
          font-family: 'PingFang SC';
          font-weight: 400;
          line-height: 50rpx;
          color: $color-text-primary;
          white-space: pre;
          height: 50rpx;
          margin-top: -7rpx;
          margin-bottom: -7rpx;
          right: 0;
          width: max-content;
          margin-left: auto;
          margin-right: auto;
        }
      }

      .flexcontainer_9 {
        position: relative;
        display: flex;
        width: 686rpx;
        height: 30rpx;
        flex-direction: row;
        align-items: flex-start;
        z-index: 1;
        margin-top: 44rpx;
        margin-left: 32rpx;

        .text_21 {
          position: absolute;
          top: 0;
          left: 0;
          font-size: 30rpx;
          font-family: 'PingFang SC';
          font-weight: 400;
          line-height: 42rpx;
          color: $color-text-primary;
          white-space: pre;
          height: 42rpx;
          margin-top: -6rpx;
          margin-bottom: -6rpx;
          right: 566rpx;
          width: max-content;
          margin-left: auto;
          margin-right: auto;
        }

        .text_22 {
          position: absolute;
          top: 2rpx;
          font-size: 28rpx;
          font-family: 'PingFang SC';
          font-weight: 400;
          line-height: 40rpx;
          color: $color-gold;
          white-space: pre;
          height: 40rpx;
          margin-top: -6rpx;
          margin-bottom: -6rpx;
          right: 0;
          width: max-content;
          margin-left: auto;
          margin-right: auto;
        }
      }

      .flexcontainer_10 {
        position: relative;
        display: flex;
        width: 686rpx;
        height: 30rpx;
        flex-direction: row;
        align-items: flex-start;
        z-index: 2;
        margin-top: 20rpx;
        margin-left: 32rpx;

        .text_23 {
          position: absolute;
          top: 0;
          font-size: 28rpx;
          font-family: 'PingFang SC';
          font-weight: 400;
          line-height: 40rpx;
          color: $color-gold;
          white-space: pre;
          height: 40rpx;
          margin-top: -6rpx;
          margin-bottom: -6rpx;
          right: 0;
          width: max-content;
          margin-left: auto;
          margin-right: auto;
        }

        .text_24 {
          position: absolute;
          top: 0;
          left: 0;
          font-size: 30rpx;
          font-family: 'PingFang SC';
          font-weight: 400;
          line-height: 42rpx;
          color: $color-text-primary;
          white-space: pre;
          height: 42rpx;
          margin-top: -6rpx;
          margin-bottom: -6rpx;
          right: 566rpx;
          width: max-content;
          margin-left: auto;
          margin-right: auto;
        }
      }

      .div_417 {
        width: 686rpx;
        height: 0;
        position: relative;
        border: 1rpx solid $color-border;
        margin-left: auto;
        margin-right: auto;
        z-index: 6;
        margin-top: 42rpx;
      }

      .flexcontainer_11,
      .flexcontainer_12,
      .flexcontainer_13 {
        position: relative;
        display: flex;
        width: 686rpx;
        height: 30rpx;
        flex-direction: row;
        align-items: flex-start;
        margin-left: 32rpx;
      }

      .flexcontainer_11 {
        z-index: 3;
        margin-top: 30rpx;

        .text_25 {
          position: absolute;
          top: 0;
          left: 0;
          font-size: 30rpx;
          font-family: 'PingFang SC';
          font-weight: 400;
          line-height: 42rpx;
          color: $color-text-muted;
          white-space: pre;
          height: 42rpx;
          margin-top: -6rpx;
          margin-bottom: -6rpx;
          right: 566rpx;
          width: max-content;
          margin-left: auto;
          margin-right: auto;
        }

        .text_26 {
          position: absolute;
          top: 0;
          font-size: 30rpx;
          font-family: 'PingFang SC';
          font-weight: 400;
          line-height: 42rpx;
          color: $color-text-muted;
          white-space: pre;
          height: 42rpx;
          margin-top: -6rpx;
          margin-bottom: -6rpx;
          right: 0;
          width: max-content;
          margin-left: auto;
          margin-right: auto;
        }
      }

      .flexcontainer_12 {
        z-index: 4;
        margin-top: 20rpx;

        .text_27 {
          position: absolute;
          top: 0;
          left: 0;
          font-size: 30rpx;
          font-family: 'PingFang SC';
          font-weight: 400;
          line-height: 42rpx;
          color: $color-text-muted;
          white-space: pre;
          height: 42rpx;
          margin-top: -6rpx;
          margin-bottom: -6rpx;
          right: 566rpx;
          width: max-content;
          margin-left: auto;
          margin-right: auto;
        }

        .text_28 {
          position: absolute;
          top: 0;
          text-align: right;
          font-size: 30rpx;
          font-family: 'PingFang SC';
          font-weight: 400;
          line-height: 42rpx;
          color: $color-text-muted;
          white-space: pre;
          height: 42rpx;
          margin-top: -6rpx;
          margin-bottom: -6rpx;
          right: 0;
          width: max-content;
          margin-left: auto;
          margin-right: auto;
        }
      }

      .flexcontainer_13 {
        z-index: 5;
        margin-top: 20rpx;

        .text_29 {
          position: absolute;
          top: 0;
          left: 0;
          font-size: 30rpx;
          font-family: 'PingFang SC';
          font-weight: 400;
          line-height: 42rpx;
          color: $color-text-muted;
          white-space: pre;
          height: 42rpx;
          margin-top: -6rpx;
          margin-bottom: -6rpx;
          right: 566rpx;
          width: max-content;
          margin-left: auto;
          margin-right: auto;
        }

        .text_30 {
          position: absolute;
          top: 0;
          text-align: right;
          font-size: 30rpx;
          font-family: 'PingFang SC';
          font-weight: 400;
          line-height: 42rpx;
          color: $color-text-muted;
          white-space: pre;
          height: 42rpx;
          margin-top: -6rpx;
          margin-bottom: -6rpx;
          right: 0;
          width: max-content;
          margin-left: auto;
          margin-right: auto;
        }
      }
    }
  }
}

/* 编辑弹窗样式 */
.editDialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.editDialog_bg {
  width: 680rpx;
  max-height: 80vh;
  background-color: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.editDialog_header {
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
  text-align: center;

  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
}

.editDialog_body {
  padding: 20rpx 30rpx;
  overflow-y: auto;
  max-height: 60vh;
}

.formItem {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  text {
    width: 200rpx;
    font-size: 28rpx;
    color: #666;
    flex-shrink: 0;
  }

  input {
    flex: 1;
    font-size: 28rpx;
    color: #333;
    text-align: right;
  }
}

.popup-footer {
  display: flex;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #eee;
  gap: 20rpx;

  .btn-cancel,
  .btn-save {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 10rpx;
    font-size: 28rpx;
  }

  .btn-cancel {
    background-color: #f5f5f5;
    color: #666;
  }

  .btn-save {
    background-color: #187AFF;
    color: #fff;
  }
}
.header{
	display: flex;
	align-items: center;
	width: 750rpx;
	height: 96rpx;
	justify-content: space-between;
	position: fixed;
	left: 0;
	top: 0;
	image{
		width: 48rpx;
		height: 48rpx;
		margin-left: 18rpx;
	}
	.imgXl{
		width: 48rpx;
		margin-right: 18rpx;
	}
}
</style>
