gypsy-crm-frontend-vu/pages/follow/trading-center.vue

<template>
  <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
    <cwg-header :title="t('Documentary.page_doc.item2')" />
    <view class="info-card">
      <!--      <view class="time-header">-->
      <!--        <text>{{ t('Documentary.console.item2') }}:</text>-->
      <!--        <text class="time-value">{{ time }}</text>-->
      <!--      </view>-->
      <cwg-complex-search :fields="filterFields" v-model="searchParams" @search="handleSearch" @reset="handleReset" />
      <cwg-tabel ref="tableRef" :columns="currentColumns" :mobilePrimaryFields="mobilePrimaryFields" :immediate="true"
        :queryParams="queryParams" :api="listApi" :show-operation="false" @sort-change="handleSortChange">

        <!-- TOP/推荐 -->
        <template #recommend="{ row }">
          <view v-if="row.top == 1" class="recommend-tag top">TOP</view>
          <view v-else-if="row.recommend == 1" class="recommend-tag green">{{ t('Documentary.tradingCenter.item26') }}
          </view>
        </template>

        <!-- 账户类型 -->
        <template #groupType="{ row }">
          <text v-if="row.groupType == 1">{{ t('AccountType.ClassicAccount') }}</text>
          <text v-else-if="row.groupType == 2">{{ t('AccountType.SeniorAccount') }}</text>
          <text v-else-if="row.groupType == 5 || row.groupType == 6">{{ t('AccountType.SpeedAccount') }}</text>
          <text v-else-if="row.groupType == 7">{{ t('AccountType.StandardAccount') }}</text>
          <text v-else-if="row.groupType == 8">{{ t('AccountType.CentAccount') }}</text>
          <text v-else>--</text>
        </template>

        <!-- 活跃度 -->
        <template #activity="{ row }">
          <text>{{ getActivityText(row.activity) }}</text>
        </template>

        <!-- 查看图表 -->
        <template #view="{ row }">
          <view class="action-icon" @click="toView(row)">
            <cwg-icon name="crm-chart-area" :size="24" color="#000" />
          </view>
        </template>

        <!-- 订阅 -->
        <template #subscribe="{ row }">
          <button class="btn-primary" size="mini" @click="toSubscribe(row)">
            <text>{{ t('Documentary.tradingCenter.item25') }}</text>
          </button>
        </template>
      </cwg-tabel>
    </view>

    <!-- 自动跟随设置弹窗 -->
    <cwg-popup v-model:visible="dialogFllow" type="center" :title="t('Documentary.tradingCenter.item27')"
      :showFooters="true">
      <scroll-view scroll-y class="dia-content" style="max-height: 60vh;">
        <view class="fllow-title">
          <text class="title">{{ t('Documentary.tradingCenter.item27') }}-{{ dialogFllowData1.nickname || '--' }}</text>
          <text class="time">{{ t('Documentary.tradingCenter.item45') }}: {{ time }}</text>
        </view>

        <view class="fllow-info-grid">
          <view class="fllow-content">
            <text class="tit">{{ t('Documentary.tradingCenter.item29') }}</text>
            <text class="con">{{ dialogFllowData1.dealLogin }}</text>
          </view>
          <view class="fllow-content">
            <text class="tit">{{ t('Documentary.console.item3') }}</text>
            <text class="con">{{ dialogFllowData1.dealPlatform || '--' }}</text>
          </view>
          <view class="fllow-content">
            <text class="tit">{{ t('Documentary.console.item7') }}</text>
            <text class="con">{{ dialogFllowData1.dealBalance || '0.00' }}</text>
          </view>
          <view class="fllow-content">
            <text class="tit">{{ t('Label.AccountType') }}</text>
            <text class="con">{{ getAccountTypeText(dialogFllowData1.dealLoginType) }}</text>
          </view>
          <view class="fllow-content">
            <text class="tit">{{ t('Documentary.console.item6') }}</text>
            <text class="con">{{ dialogFllowData1.dealEquity || '0.00' }}</text>
          </view>
          <view class="fllow-content">
            <text class="tit">{{ t('Documentary.tradingCenter.item30') }}</text>
            <text class="con">{{ dialogFllowData1.distributionType == 1 ? t('Documentary.TundManagement.item59') : '--'
              }}
            </text>
          </view>
          <view class="fllow-content">
            <text class="tit">{{ t('Label.Credit') }}</text>
            <text class="con">{{ dialogFllowData1.dealCredit || '0.00' }}</text>
          </view>
          <view class="fllow-content">
            <text class="tit">{{ t('Documentary.AgentBackground.item12') }}</text>
            <text class="con">{{ dialogFllowData1.distributionRatio || '0' }}%</text>
          </view>
          <view class="fllow-content">
            <text class="tit">{{ t('Label.Leverage') }}</text>
            <text class="con">1:{{ dialogFllowData1.dealLeverage || '--' }}</text>
          </view>
          <view class="fllow-content">
            <text class="tit">{{ t('Documentary.tradingCenter.item32') }}</text>
            <text class="con">{{ optObj[dialogFllowData1.settlementCycle] || '--' }}</text>
          </view>
        </view>

        <view class="fllow-title section-title">
          <text class="title">{{ t('Documentary.tradingCenter.item33') }}</text>
        </view>

        <uni-forms ref="formRef" :modelValue="dialogFllowData" :rules="rules" label-position="top" labelWidth="80">
          <view class="form-grid">
            <uni-forms-item :label="t('Documentary.console.item4')" name="followLogin">
              <uni-data-select v-model="dialogFllowData.followLogin" :localdata="followLoginOptions"
                @change="selectLogin"></uni-data-select>
            </uni-forms-item>
            <uni-forms-item :label="t('Documentary.tradingCenter.item34')" name="leverage">
              <uni-easyinput v-model="dialogFllowData.leverage" disabled />
            </uni-forms-item>
            <uni-forms-item :label="t('Documentary.tradingCenter.item35')" name="followType">
              <uni-data-select v-model="dialogFllowData.followType" :localdata="[
                { value: 3, text: t('Documentary.tradingCenter.item118') },
                { value: 2, text: t('Documentary.tradingCenter.item117') },
                { value: 1, text: t('Documentary.tradingCenter.item116') }
              ]"></uni-data-select>
            </uni-forms-item>
            <uni-forms-item v-if="dialogFllowData.followType == 1" :label="t('Documentary.tradingCenter.item119')"
              name="volume">
              <uni-easyinput v-model="dialogFllowData.volume" />
            </uni-forms-item>
            <uni-forms-item v-if="dialogFllowData.followType == 2"
              :label="t('Documentary.tradingCenter.item122') + ' (%)'" name="ratio">
              <uni-easyinput v-model="dialogFllowData.ratio" />
            </uni-forms-item>
          </view>

          <view class="fllow-title section-title">
            <text class="title">{{ t('Documentary.tradingCenter.item37') }}</text>
            <switch :checked="dialogFllowData.protect === 1"
              @change="e => dialogFllowData.protect = e.detail.value ? 1 : 0" color="#368FEC"
              style="transform: scale(0.7)" />
          </view>

          <view class="form-grid" v-if="dialogFllowData.protect === 1">
            <uni-forms-item :label="t('Documentary.tradingCenter.item38')" name="protectType">
              <uni-data-select v-model="dialogFllowData.protectType" :localdata="[
                { value: 1, text: t('Documentary.tradingCenter.item120') }
              ]"></uni-data-select>
            </uni-forms-item>
            <uni-forms-item v-if="dialogFllowData.protectType == 1"
              :label="t('Documentary.tradingCenter.item39') + '($)'" name="protectAmount">
              <uni-easyinput v-model="dialogFllowData.protectAmount" />
            </uni-forms-item>
            <uni-forms-item v-if="dialogFllowData.protectType == 2"
              :label="t('Documentary.tradingCenter.item122') + '(%)'" name="protectRatio">
              <uni-easyinput v-model="dialogFllowData.protectRatio" />
            </uni-forms-item>
          </view>

          <view class="terms-desc">
            <text>{{ t('Documentary.tradingCenter.item130') }}</text>
          </view>

          <uni-forms-item name="agree">
            <label class="agree-label">
              <checkbox :checked="dialogFllowData.agree" @click="dialogFllowData.agree = !dialogFllowData.agree"
                style="transform:scale(0.7)" />
              <text>{{ t('Documentary.tradingCenter.item40') }} -</text>
              <cwg-link type="pdf" title="Documentary.tradingCenter.item41" v-if="['cn', 'zhHant'].indexOf(locale) != -1"
                style="color: #4497ff" url="pdf/CopyTradeUserAgreementcn.pdf" target="_blank" />
              <cwg-link type="pdf" style="color: #4497ff" title="Documentary.tradingCenter.item41"
                url="pdf/CopyTradeUserAgreement.pdf" target="_blank" v-else />
            </label>
          </uni-forms-item>
        </uni-forms>
      </scroll-view>
      <template #footer>
        <button class="cancel-btn" @click="applyFllowCancel">{{ t('Btn.Cancel') }}</button>
        <button class="confirm-btn" type="primary" @click="applyFllow">{{ t('Btn.Confirm') }}</button>
      </template>
    </cwg-popup>
  </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { computed, ref, nextTick, onMounted, onUnmounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { documentaryApi } from '@/service/documentary'
import useUserStore from '@/stores/use-user-store'
import {useFollowEnum} from '@/pages/follow/const/enum'

const { t, locale } = useI18n()
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const {optObj} = useFollowEnum()

// --- Time fetching ---
const time = ref('')
let timer: any = null

const getLocalTime = () => {
  let timezone = 2
  let offset_GMT = new Date().getTimezoneOffset()
  let nowDate = new Date().getTime()
  let now = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000)
  let year = now.getFullYear()
  let month = String(now.getMonth() + 1).padStart(2, '0')
  let day = String(now.getDate()).padStart(2, '0')
  let hh = String(now.getHours()).padStart(2, '0')
  let mm = String(now.getMinutes()).padStart(2, '0')
  time.value = `${year}/${month}/${day}  ${hh}:${mm}`
}

const getDate = async () => {
  try {
    let res = await documentaryApi.followDealSignalRefreshDate()
    if (res.code === 200 && res.data) {
      time.value = res.data
    } else {
      getLocalTime()
    }
  } catch (error) {
    getLocalTime()
  }
}

onMounted(() => {
  getDate()
})

onUnmounted(() => {
})

// --- Table Config ---
const searchParams = ref({
  nickname: '',
  plStart: '', plEnd: '',
  plRateStart: '', plRateEnd: '',
  volumeStart: '', volumeEnd: '',
  winRateStart: '', winRateEnd: '',
  maxDdRateStart: '', maxDdRateEnd: '',
  activityRange: '',
  followsStart: '', followsEnd: '',
})

const filterFields = computed(() => [
  { key: 'nickname', type: 'input', label: t('TradingCenter.item13'), placeholder: t('TradingCenter.item13') },
  {
    key: 'plStart',
    type: 'number',
    label: t('TradingCenter.item3') + ' (' + t('TradingCenter.item1') + ')',
    placeholder: t('TradingCenter.item3') + ' (' + t('TradingCenter.item1') + ')',
  },
  {
    key: 'plEnd',
    type: 'number',
    label: t('TradingCenter.item3') + ' (' + t('TradingCenter.item2') + ')',
    placeholder: t('TradingCenter.item3') + ' (' + t('TradingCenter.item2') + ')',
  },
  {
    key: 'plRateStart',
    type: 'number',
    label: t('TradingCenter.item4') + ' (' + t('TradingCenter.item1') + ')',
    placeholder: t('TradingCenter.item4') + ' (' + t('TradingCenter.item1') + ')',
  },
  {
    key: 'plRateEnd',
    type: 'number',
    label: t('TradingCenter.item4') + ' (' + t('TradingCenter.item2') + ')',
    placeholder: t('TradingCenter.item4') + ' (' + t('TradingCenter.item2') + ')',
  },
  {
    key: 'volumeStart',
    type: 'number',
    label: t('TradingCenter.item5') + ' (' + t('TradingCenter.item1') + ')',
    placeholder: t('TradingCenter.item5') + ' (' + t('TradingCenter.item1') + ')',
  },
  {
    key: 'volumeEnd',
    type: 'number',
    label: t('TradingCenter.item5') + ' (' + t('TradingCenter.item2') + ')',
    placeholder: t('TradingCenter.item5') + ' (' + t('TradingCenter.item2') + ')',
  },
  {
    key: 'winRateStart',
    type: 'number',
    label: t('TradingCenter.item6') + ' (' + t('TradingCenter.item1') + ')',
    placeholder: t('TradingCenter.item6') + ' (' + t('TradingCenter.item1') + ')',
  },
  {
    key: 'winRateEnd',
    type: 'number',
    label: t('TradingCenter.item6') + ' (' + t('TradingCenter.item2') + ')',
    placeholder: t('TradingCenter.item6') + ' (' + t('TradingCenter.item2') + ')',
  },
  {
    key: 'maxDdRateStart',
    type: 'number',
    label: t('TradingCenter.item7') + ' (' + t('TradingCenter.item1') + ')',
    placeholder: t('TradingCenter.item7') + ' (' + t('TradingCenter.item1') + ')',
  },
  {
    key: 'maxDdRateEnd',
    type: 'number',
    label: t('TradingCenter.item7') + ' (' + t('TradingCenter.item2') + ')',
    placeholder: t('TradingCenter.item7') + ' (' + t('TradingCenter.item2') + ')',
  },
  {
    key: 'activityRange',
    type: 'select',
    label: t('TradingCenter.item8'),
    placeholder: t('TradingCenter.item8'),
    options: [
      { value: 'inactive', text: t('activeState.item1') },
      { value: 'active', text: t('activeState.item2') },
      { value: 'very_active', text: t('activeState.item3') },
    ],
  },
  {
    key: 'followsStart',
    type: 'number',
    label: t('TradingCenter.item9') + ' (' + t('TradingCenter.item1') + ')',
    placeholder: t('TradingCenter.item9') + ' (' + t('TradingCenter.item1') + ')',
  },
  {
    key: 'followsEnd',
    type: 'number',
    label: t('TradingCenter.item9') + ' (' + t('TradingCenter.item2') + ')',
    placeholder: t('TradingCenter.item9') + ' (' + t('TradingCenter.item2') + ')',
  },
])

const sortState = ref({
  orderColumn: 1, // 1:plRate, 2:pl, 3:volume, 4:winRate, 5:maxDdRate, 6:activity, 7:follows
  orderType: 1,    // 1:asc, 2:desc
})

const queryParams = computed(() => {
  const act = searchParams.value.activityRange
  return {
    ...searchParams.value,
    activityStart: act === 'inactive' ? 0 : act === 'active' ? 0.33 : act === 'very_active' ? 0.66 : null,
    activityEnd: act === 'inactive' ? 0.33 : act === 'active' ? 0.66 : act === 'very_active' ? 1 : null,
    orderColumn: sortState.value.orderColumn,
    orderType: sortState.value.orderType,
  }
})

const tableRef = ref(null)
const listApi = ref(documentaryApi.followDealSearchList)

const handleSearch = (params: any) => {
  searchParams.value = params
  nextTick(() => {
    tableRef.value?.refreshTable()
  })
}

const handleReset = (params: any) => {
  searchParams.value = params
  nextTick(() => {
    tableRef.value?.refreshTable()
  })
}

const handleSortChange = ({ prop, order }: any) => {
  const propToColumn: Record<string, number> = {
    'plRate': 1, 'pl': 2, 'volume': 3, 'winRate': 4, 'maxDdRate': 5, 'activity': 6, 'follows': 7,
  }
  sortState.value.orderColumn = propToColumn[prop] || 1
  sortState.value.orderType = order === 'desc' ? 2 : 1
  nextTick(() => {
    tableRef.value?.refreshTable()
  })
}

const currentColumns = computed(() => [
  // { prop: 'recommend', label: '', slot: 'recommend', align: 'center', width: 60 },
  { prop: 'nickname', label: t('Documentary.tradingCenter.item1'), align: 'left' },
  { prop: 'maskLogin', label: t('newLoop.item11'), align: 'center' },
  { prop: 'pl', label: t('TradingCenter.item3'), align: 'center', sortable: true },
  { prop: 'volume', label: t('TradingCenter.item5'), align: 'center', sortable: true },
  { prop: 'follows', label: t('TradingCenter.item9'), align: 'center', sortable: true },
  { prop: 'groupType', label: t('Label.AccountType'), slot: 'groupType', align: 'center' },
  { prop: 'plRate', label: t('TradingCenter.item4'), align: 'center', sortable: true },
  { prop: 'winRate', label: t('TradingCenter.item6'), align: 'center', sortable: true },
  { prop: 'maxDdRate', label: t('TradingCenter.item7'), align: 'center', sortable: true },
  { prop: 'activity', label: t('TradingCenter.item8'), slot: 'activity', align: 'center', sortable: true },
  { prop: 'view', label: t('Documentary.tradingCenter.item23'), slot: 'view', align: 'center', width: 80 },
  { prop: 'recommendReason', label: t('Documentary.tradingCenter.item142'), align: 'center', width: 100 },
  { prop: 'subscribe', label: t('Documentary.tradingCenter.item24'), slot: 'subscribe', align: 'center', width: 100 },
])
const mobilePrimaryFields = computed(() => [
  { prop: 'nickname', label: t('Documentary.tradingCenter.item1'), align: 'center' },
  { prop: 'maskLogin', label: t('newLoop.item11'), align: 'center' },
  { prop: 'groupType', label: t('Label.AccountType'), slot: 'groupType', align: 'center' },
  {
    prop: 'more',
    type: 'more',
    width: 20,
    align: 'right',
  },
])

const getAccountTypeText = (type: number) => {
  const accountTypeMap: Record<number, string> = {
    1: 'AccountType.ClassicAccount',
    2: 'AccountType.SeniorAccount',
    3: 'AccountType.AgencyAccount',
    5: 'AccountType.SpeedAccount',
    6: 'AccountType.SpeedAccount',
    7: 'AccountType.StandardAccount',
    8: 'AccountType.CentAccount',
  }
  return type && accountTypeMap[type] ? t(accountTypeMap[type]) : '--'
}

const getActivityText = (activity: number) => {
  if (!activity) return '--'
  switch (activity) {
    case 1:
      return t('activeState.item1')
    case 2:
      return t('activeState.item2')
    case 3:
      return t('activeState.item3')
    default:
      return activity
  }
}

const toView = (row: any) => {
  uni.navigateTo({
    url: `/pages/follow/trading-center-single?dealLogin=${row.dealLogin}&id=${row.id}&login=${row.login}`,
  })
}

// --- Follow Subscription ---
const dialogFllow = ref(false)
const dialogFllowData1 = ref<any>({})
const dialogFllowLoginData = ref<any[]>([])
const dialogFllowData = ref({
  followLogin: '',
  protect: 0,
  protectType: 1,
  protectAmount: '',
  protectRatio: '',
  followType: 1,
  volume: '',
  ratio: '',
  leverage: '',
  agree: false,
})

const formRef = ref<any>(null)

const rules = {
  protectAmount: { rules: [{ required: true, errorMessage: t('vaildate.input.empty') }] },
  protectRatio: { rules: [{ required: true, errorMessage: t('vaildate.input.empty') }] },
  volume: { rules: [{ required: true, errorMessage: t('vaildate.input.empty') },{
      validateFunction: (rule, value,data, callback) => {
      if (value) {
        const num = Number(value)
        if (isNaN(num) || num <= 0) {
          callback(t('vu.follow.v1'))
        }else {
          callback()
        }
      }
    }
    }] },
  ratio: { rules: [{ required: true, errorMessage: t('vaildate.input.empty') }] },
  followLogin: { rules: [{ required: true, errorMessage: t('vaildate.select.empty') }] },
  followType: { rules: [{ required: true, errorMessage: t('vaildate.select.empty') }] },
  agree: { rules: [{ required: true, errorMessage: t('vaildate.agree.empty') }] },
}

const followLoginOptions = computed(() => {
  return dialogFllowLoginData.value.map(item => ({
    value: item.login,
    text: `${item.login} - ${getAccountTypeText(item.loginType)} - ${t('Custom.Deposit.AvailableBalance')}: $${item.balance || 0}`,
  }))
})

const toSubscribe = async (row: any) => {
  uni.showLoading({ title: t('State.InTheProcessing') })
  try {
    let res = await documentaryApi.followDealSubscribeInfo({ dealId: row.dealId })
    if (res.code === 200) {
      dialogFllowData1.value = row
      dialogFllowData.value.protect = 0
      dialogFllowLoginData.value = res.data || []
      dialogFllow.value = true
    } else {
      uni.showToast({ title: res.msg, icon: 'none' })
    }
  } finally {
    uni.hideLoading()
  }
}

const selectLogin = (val: string) => {
  const target = dialogFllowLoginData.value.find(item => item.login === val)
  if (target) {
    dialogFllowData.value.leverage = `1:${target.leverage}`
  }
}

const openAgreement = () => {
  const lang = locale.value
  const url = ['cn', 'zhHant'].includes(lang) ? 'pdf/CopyTradeUserAgreementcn.pdf' : 'pdf/CopyTradeUserAgreement.pdf'
  // Use plus.runtime.openURL or window.open depending on platform
  // #ifdef H5
  window.open(url, '_blank')
  // #endif
  // #ifndef H5
  uni.showToast({ title: 'Not supported on this platform', icon: 'none' })
  // #endif
}

let submitting = false
const applyFllow = async () => {
  if (submitting) return
  if (!dialogFllowData.value.agree) {
    uni.showToast({ title: t('vaildate.agree.empty'), icon: 'none' })
    return
  }

  try {
    await formRef.value?.validate()
  } catch (e) {
    return
  }

  submitting = true
  uni.showLoading({ title: t('State.InTheProcessing') })

  try {
    const payload = {
      dealId: dialogFllowData1.value.id,
      followLogin: dialogFllowData.value.followLogin,
      protect: dialogFllowData.value.protect,
      protectType: dialogFllowData.value.protect ? dialogFllowData.value.protectType : null,
      protectAmount: dialogFllowData.value.protect ? dialogFllowData.value.protectAmount : null,
      protectRatio: dialogFllowData.value.protect ? dialogFllowData.value.protectRatio : null,
      followType: dialogFllowData.value.followType,
      volume: dialogFllowData.value.followType == 1 ? Number(dialogFllowData.value.volume) * 100 : null,
      ratio: dialogFllowData.value.followType == 2 ? dialogFllowData.value.ratio : null,
    }

    let res = await documentaryApi.followDealSubscriSubscribe(payload)
    if (res.code === 200) {
      uni.showToast({ title: t('Msg.Success'), icon: 'success' })
      applyFllowCancel()
    } else {
      const msg = res.msg == 'EMPTY_POSITION_BEFORE_SUBSCRIBE' ? t('Documentary.tradingCenter.item134') : res.msg
      uni.showToast({ title: msg, icon: 'none' })
    }
  } finally {
    submitting = false
    uni.hideLoading()
  }
}

const applyFllowCancel = () => {
  dialogFllow.value = false
  dialogFllowData.value = {
    followLogin: '', protect: 0, protectType: 1, protectAmount: '', protectRatio: '',
    followType: 1, volume: '', ratio: '', leverage: '', agree: false,
  }
}

</script>

<style scoped lang="scss">
@import "@/uni.scss";

.time-header {
  display: flex;
  justify-content: flex-end;
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: 500;
  color: var(--bs-heading-color);

  .time-value {
    margin-left: 6px;
    color: var(--bs-heading-color);
  }
}

.recommend-tag {
  font-size: 12px;
  color: var(--bs-emphasis-color);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;

  &.top {
    background-color: #eb3f57;
  }

  &.green {
    background-color: #89be30;
  }
}

.action-icon {
  display: inline-flex;
  cursor: pointer;
}

.btn-primary {
  background-color: #4497ff;
  color: white;
  padding: 0 px2rpx(12);
  border: none;
  font-size: px2rpx(12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: px2rpx(4);
  height: 28px;
  line-height: 28px;
  border-radius: 4px;
}

.dia-content {
  padding: 10px;

  .fllow-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;

    .title {
      font-weight: bold;
      color: var(--bs-heading-color);
      padding-left: 8px;
      border-left: 4px solid #eb3f57;
      font-size: 16px;
    }

    .time {
      font-size: 12px;
      color: #888;
    }
  }

  .section-title {
    margin-top: 20px;

    .title {
      border-left-color: #4497ff;
    }
  }

  .fllow-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;

    .fllow-content {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      border-bottom: 1px dashed #eee;
      padding-bottom: 4px;

      .tit {
        color: var(--bs-heading-color);
      }

      .con {
        font-weight: 500;
        color: var(--bs-heading-color);
      }
    }
  }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin-top: 10px;
  }

  .terms-desc {
    font-size: 12px;
    color: #888;
    margin: 10px 0;
  }

  .agree-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--bs-heading-color);

    .link {
      color: #4497ff;
      cursor: pointer;
    }
  }
}

.cancel-btn,
.confirm-btn {
  flex: 1;
  margin: 0 10px;
  border-radius: 4px;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: var(--bs-heading-color);
}

.confirm-btn {
  //background-color: #4497ff;
  color: #fff;
}
</style>