gypsy-crm-frontend-vu/pages/customer/dashboard.vue

<template>
  <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
    <view class="header">
      <view class="title">
        <view class="mb-3 h3">{{ t('Home.msg.Custom') }}</view>
        <view class="">{{ dateWeek }}</view>
      </view>

      <button hover-class="" type="button" class="btn btn-danger btn-shadow waves-effect" @click="createAccount">
        <view class="d-flex align-items-center">
          <cwg-icon name="crm-plus" :size="14" color="#fff" />
          <text v-t="'Custom.Index.AddAccount'" />
        </view>
      </button>
    </view>
    <uni-loading v-if="loading" />
    <uni-row v-else class="demo-uni-row uni-row1" :gutter="20">
      <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <uni-row :gutter="10">
          <uni-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <view class="card position-relative">
              <view class="card-body d-flex align-items-center gap-3">
                <view class="icon-placeholder">
                  <cwg-icon name="crm-wallet" :size="28" color="red" />
                </view>
                <view class="flex-1">
                  <view class="d-flex justify-between items-start mb-1">
                    <text class="text-muted text-sm">{{ t('vu.custom.t1') }}</text>
                    <text
                      :class="['growth-rate', compareData.totalBalanceGrowthRate || 0 >= 0 ? 'rate-up' : 'rate-down']">
                      {{ compareData.totalBalanceGrowthRate || 0 >= 0 ? '+' : ''
                      }}{{ compareData.totalBalanceGrowthRate || 0 }}%
                    </text>
                  </view>
                  <view class="fw-bold text-lg">${{ numberDecimal(compareData.totalBalance || '0') }}</view>
                </view>
              </view>
            </view>
          </uni-col>
          <uni-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <view class="card position-relative">
              <view class="card-body d-flex align-items-center gap-3">
                <view class="icon-placeholder">
                  <cwg-icon name="crm-money-up" :size="28" color="red" />
                </view>
                <view class="flex-1">
                  <view class="d-flex justify-between items-start mb-1">
                    <text class="text-muted text-sm">{{ t('vu.custom.t2') }}</text>
                    <text :class="['growth-rate', compareData.totalEquityGrowthRate || 0 >= 0 ? 'rate-up' : 'rate-down']">
                      {{ compareData.totalEquityGrowthRate || 0 >= 0 ? '+' : ''
                      }}{{ compareData.totalEquityGrowthRate || 0 }}%
                    </text>
                  </view>
                  <view class="fw-bold text-lg">${{ numberFormat(compareData.totalEquity || '0') }}</view>
                </view>
              </view>
            </view>
          </uni-col>
          <uni-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <view class="card position-relative">
              <view class="card-body d-flex align-items-center gap-3">
                <view class="icon-placeholder">
                  <cwg-icon name="icon_withdraw" :size="28" color="red" />
                </view>
                <view class="flex-1">
                  <view class="d-flex justify-between items-start mb-1">
                    <text class="text-muted text-sm">{{ t('vu.custom.t3') }}</text>
                    <text
                      :class="['growth-rate', compareData.totalDepositAmountGrowthRate || 0 >= 0 ? 'rate-up' : 'rate-down']">
                      {{ compareData.totalDepositAmountGrowthRate || 0 >= 0 ? '+' : ''
                      }}{{ compareData.totalDepositAmountGrowthRate || 0 }}%
                    </text>
                  </view>
                  <view class="fw-bold text-lg">${{ numberFormat(compareData.totalDepositAmount || '0') }}</view>
                </view>
              </view>
            </view>
          </uni-col>
          <uni-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <view class="card position-relative">
              <view class="card-body d-flex align-items-center gap-3">
                <view class="icon-placeholder">
                  <cwg-icon name="crm-money-bill-transfer" :size="28" color="red" />
                </view>
                <view class="flex-1">
                  <view class="d-flex justify-between items-start mb-1">
                    <text class="text-muted text-sm">{{ t('vu.custom.t4') }}</text>
                    <text
                      :class="['growth-rate', compareData.totalWithdrawalAmountGrowthRate || 0 >= 0 ? 'rate-up' : 'rate-down']">
                      {{ compareData.totalWithdrawalAmountGrowthRate || 0 >= 0 ? '+' : ''
                      }}{{ compareData.totalWithdrawalAmountGrowthRate || 0 }}%
                    </text>
                  </view>
                  <view class="fw-bold text-lg">${{ numberFormat(compareData.totalWithdrawalAmount || '0') }}</view>
                </view>
              </view>
            </view>
          </uni-col>
        </uni-row>
      </uni-col>
      <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <uni-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mobilH mb-3">
          <view class="chart-box crm-border-radius">
            <view class="chart-title">
              <uni-row>
                <uni-row>
                  <view class="opt-title mb-2">
                    <view class="bigtitle">
                      <text v-if="chartForm.chartType == 4">{{ t('Custom.Index.TradingVolumeStatistics') }}</text>
                      <text v-if="chartForm.chartType == 2">{{ t('Custom.Index.DepositStatistical') }}</text>
                      <text v-if="chartForm.chartType == 3">{{ t('Custom.Index.WithdrawalsStatistical') }}</text>
                      <text v-if="chartForm.chartType == 6">{{ t('Custom.Index.ProfitLoss') }}</text>
                    </view>
                    <view class="time cursor-pointer" @click="toReload" :data-tooltip="t('vu.tooltip.t7')"
                      data-placement="top">
                      <cwg-icon name="crm-refresh" :size="16" color="#666" />
                      <text class="crm-cursor"> GMT+3 {{ time }}</text>
                    </view>
                  </view>

                </uni-row>

                <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <view class="btn-opt">
                    <view class="title">

                      <view class="account" v-if="chartForm.login">
                        <text>{{ t('Custom.Index.TradingAccount') }}</text>
                        <text> —</text>
                        <text>{{ chartForm.login }}</text>
                      </view>
                      <view class="date">
                        <uni-datetime-picker v-model="isDate" type="daterange"
                          :placeholder="t('placeholder.Start') + ' - ' + t('placeholder.End')"
                          @change="getSearchDate" />
                      </view>
                    </view>

                    <button hover-class="" class="operation" @click="isChart = true">
                      <text style="font-size: 14px">{{ t('Custom.Index.Parameter') }}</text>
                    </button>
                  </view>
                </uni-col>
              </uni-row>
            </view>
            <view class="chart-container">
              <cwg-match-media :max-width="991">
                <cwg-charts type="line" :chartData="chartData" :opts="chartOpts" tooltipFormat="tooltipCustom"
                  ontouch />
              </cwg-match-media>
              <cwg-match-media :min-width="991">
                <cwg-charts type="line" :chartData="chartData" :opts="chartOpts" tooltipFormat="tooltipCustom" />
              </cwg-match-media>
            </view>
          </view>
        </uni-col>
        <uni-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mobilH">
          <view class="chart-box mh crm-border-radius">
            <view class="bigtitle mb-3">
              {{ t('Custom.Index.MyAccount') }}
            </view>
            <view class="mb-2">
              <cwg-combox :clearable="false" v-model:value="loginValue" :options="loginComboxOptions"
                :placeholder="t('placeholder.choose')" @change="setCurData" />
            </view>
            <view v-if="curData">
              <AccountCard :key="curData?.accountNumber" :account="curData" noCtrl />
            </view>
          </view>
        </uni-col>
      </uni-col>
    </uni-row>
    <cwg-improve-popup v-model:visible="dialogCheck" @confirm="confirm" />

    <cwg-popup v-model:visible="isChart" type="center" :mask-click="false" :show-footers="true"
      :title="t('Custom.Index.ChartSet')">
      <view class="dia-content">
        <uni-forms ref="chartFormRef" labelWidth="160">
          <uni-forms-item :label="t('Label.ChartType') + ':'" prop="chartType">
            <cwg-combox v-model:value="chartForm.chartType" :options="chartTypeOptions"
              :placeholder="t('placeholder.choose')" />
          </uni-forms-item>
          <uni-forms-item :label="t('Label.PlatformType') + ':'" prop="platform">
            <cwg-combox v-model:value="chartForm.platform" :options="platformOptions"
              :placeholder="t('placeholder.choose')" @change="onPlatformChange" />
          </uni-forms-item>
          <uni-forms-item :label="t('Label.TradingAccount') + ':'" prop="login">
            <cwg-combox v-model:value="chartForm.login" :options="loginOptions"
              :placeholder="t('placeholder.choose')" />
          </uni-forms-item>
        </uni-forms>
      </view>
      <template #footer>
        <button hover-class="" @click="isChart = false">{{ t('Btn.Cancel') }}</button>
        <button hover-class="" type="primary" @click="handleChartConfirm">{{ t('Btn.Confirm') }}</button>
      </template>
    </cwg-popup>
  </cwg-page-wrapper>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick, onUnmounted } from 'vue'
import { useI18n } from 'vue-i18n'
import dayjs from 'dayjs'
import useRouter from '@/hooks/useRouter'
import config from '@/config/index'
import useUserStore from '@/stores/use-user-store'
import { useFilters } from '@/composables/useFilters'
import { documentaryApi } from '@/service/documentary'
import { customApi } from '@/service/custom'
import { userApi } from '@/api/user'
import AccountCard from '@/pages/customer/components/AccountCard.vue'
import { useWindowWidth } from '@/composables/useWindowWidth'
const windowWidth = useWindowWidth(300)
const { t, locale } = useI18n()
const loading = ref(false)
const router = useRouter()
const { Code } = config
const userStore = useUserStore()
const { numberFormat, numberDecimal } = useFilters()


const loginOptions = ref([])
const ChartSetDate = ref({})
const isDealLogin = ref(false)
const dealDate = ref({})
const SubscribeProfitDate = ref([])
const compareData = ref({})
const loginValue = ref('')

const isChart = ref(false)
const isDate = ref(['', ''])
const time = ref('')
const chartData = ref({ categories: [], series: [] })
const chartOpts = computed(() => ({
  color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
  padding: [15, 10, 0, 15],
  enableScroll: true,
  legend: {
    show: false,
  },
  xAxis: {
    // disableGrid: true,
    scrollShow: true,
    itemCount: isMobile.value ? 3 : 4,
  },
  tooltipFormat: 'tooltipCustom',
  extra: {
    line: {
      type: 'straight',
      width: 2,
      activeType: 'hollow',
    },
    tooltip: {
      legendShow: false,
      // showCategory: true,
      formatter: 'tooltipCustom',
    },
  },
}))

const dropDown = ref([])
const chartFormRef = ref(null)

const chartForm = ref({
  chartType: 4,
  platform: '',
  login: '',
})

const chartTypeOptions = computed(() => [
  { text: t('Custom.Index.TradingVolumeStatistics'), value: 4 },
  { text: t('Custom.Index.DepositStatistical'), value: 2 },
  { text: t('Custom.Index.WithdrawalsStatistical'), value: 3 },
  { text: t('Custom.Index.ProfitLoss'), value: 6 },
])

const platformOptions = [
  { text: 'MT4', value: 'MT4' },
  { text: 'MT5', value: 'MT5' },
]

const loginDataOptions = ref([])
const loginComboxOptions = computed(() => {
  return loginDataOptions.value.map((item) => ({
    text: item.label,
    value: item.login
  }))
})

const chartLoading = ref(false)

const isAfterJuly28 = () => {
  const now = new Date();
  const july28 = new Date(2025, 6, 28, 0, 0, 0); // 月份从0开始，所以7月是6
  return now >= july28;
}
const getLocalTime = () => {
  let timezone = 2 //目标时区时间，东2区   东时区正数 西市区负数
  let offset_GMT = new Date().getTimezoneOffset() // 本地时间和格林威治的时间差，单位为分钟
  let nowDate = new Date().getTime() // 本地时间距 1970 年 1 月 1 日午夜（GMT 时间）之间的毫秒数
  let now = new Date(
    nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000,
  )

  //当前时间
  let month = now.getMonth() + 1 //月
  let day = now.getDate() //日
  let hh = now.getHours() //时
  let mm = now.getMinutes() //分
  let clock
  if (month < 10) {
    month = '0' + month
  }
  if (day < 10) {
    day = '0' + day
  }
  if (hh < 10) {
    hh = '0' + hh
  }
  if (mm < 10) {
    mm = '0' + mm
  }
  clock = '  ' + hh + ':' + mm + '  ' + month + '/' + day
  time.value = clock
}

const toReload = () => {
  uni.showLoading({ title: t('common.loading') })
  goTime()
}
// 获取账户信息
const getDateList = async () => {
  let res = await customApi.CustomDropdown({ platform: "" })
  if (res.code == Code.StatusOK) {
    dropDown.value = res.data || []
    loginOptions.value = (res.data || []).map(item => ({
      text: item.login,
      value: item.login,
    }))
    loginDataOptions.value = res.data.map(item => ({
      ...item,
      label: `${item.login}`,
      disable: item.closeFunctions.includes('1')
    }))
    const found = loginDataOptions.value?.[0]
    loginValue.value = found?.login || null
  } else {
    uni.showToast({ title: res.msg, icon: 'none' })
  }
}

const getSearchDate = (val) => {
  if (Array.isArray(val)) {
    isDate.value = val
  }
  fetchChartData()
}

const onPlatformChange = (val) => {
  console.log('Platform changed:', val)
}

const handleChartConfirm = async () => {
  try {
    const params = {
      type: chartForm.value.chartType || 4,
      platform: chartForm.value.platform,
      login: chartForm.value.login,
      startDate: isDate.value[0],
      endDate: isDate.value[1],
    }
    const res = await customApi.getChartInfo(params)
    if (res.code === Code.StatusOK) {
      if (res.data) {
        let categories = []
        let seriesData = []
        res.data.forEach((item) => {
          categories.push(item.date.split(' ')[0])
          seriesData.push(item.amount)
        })
        chartData.value = { categories, series: [{ name: '', data: seriesData }] }
      } else {
        chartData.value = { categories: [], series: [] }
      }
    }
    isChart.value = false
  } catch (error) {
    console.error('获取图表数据失败', error)
    isChart.value = false
  }
}

const fetchChartData = async () => {
  try {
    const params = {
      type: chartForm.value.chartType || 4,
      platform: chartForm.value.platform,
      login: chartForm.value.login,
      startDate: isDate.value[0],
      endDate: isDate.value[1],
    }
    const res = await customApi.getChartInfo(params)
    if (res.code === Code.StatusOK) {
      if (res.data) {
        let categories = []
        let seriesData = []
        res.data.forEach((item) => {
          categories.push(item.date.split(' ')[0])
          seriesData.push(item.amount)
        })
        chartData.value = { categories, series: [{ name: '', data: seriesData }] }
      } else {
        chartData.value = { categories: [], series: [] }
      }
    }
  } catch (error) {
    console.error('获取图表数据失败', error)
  } finally {
    uni.hideLoading()
  }
}

const getDropDown = async () => {
  try {
    const res = await customApi.CustomDropdown()
    if (res.code === Code.StatusOK) {
      dropDown.value = res.data || []
      loginOptions.value = (res.data || []).map(item => ({
        text: item.login,
        value: item.login,
      }))
    }
  } catch (error) {
    console.error('获取账户列表失败', error)
  }
}


// 今日时间
const dateWeek = computed(() => {
  const now = dayjs()
  const isChinese = locale.value === 'cn' || locale.value === 'zhHant'

  if (isChinese) {
    const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    return `${weekDays[now.day()]}, ${months[now.month()]}${now.date()}日, ${now.year()}`
  } else {
    return now.format('ddd, MMMD, YYYY')
  }
})


const createAccount = () => {
  getCustomLoginInfo()
}
// 获取客户登录信息
const dialogCheck = ref(false)

async function getCustomLoginInfo() {
  try {
    const res = await userApi.getUserInfo()
    userStore.saveUserInfo(res.data)
    if (res.code === 200) {
      if (
        res.data.customInfo.status == 2 &&
        res.data.customInfo.applyRealStatus == 2
      ) {
        router.push(`/pages/customer/account-select?server=${'real'}`)
      } else {
        dialogCheck.value = true
      }
    }
  } catch (error) {
    //  console.log(error, 111);
  }
}

const confirm = () => {
  dialogCheck.value = false
  router.push(`/pages/mine/improveImmediately`)
}

const getDailyCompare = async (login) => {
  const res = await documentaryApi.followDailyCompare({ login })
  if (res.code === Code.StatusOK) {
    ChartSetDate.value = res.data ?? {}
  } else {
    uni.showToast({ title: res.msg, icon: 'none' })
  }
}

const getDailyDeal = async (login) => {
  const res = await documentaryApi.followDailyDeal({ login })
  if (res.code === Code.StatusOK) {
    dealDate.value = res.data ?? {}
  } else {
    uni.showToast({ title: res.msg, icon: 'none' })
  }
}

const getDailySubscribeProfit = async (login) => {
  const res = await documentaryApi.followDailySubscribeProfit({ login })
  if (res.code === Code.StatusOK) {
    SubscribeProfitDate.value = res.data?.data ?? []
  } else {
    uni.showToast({ title: res.msg, icon: 'none' })
  }
}
watch(() => chartForm.value.login, async (login) => {
  await getDailyCompare(login)
  if (isDealLogin.value) {
    await getDailyDeal(login)
  } else {
    await getDailySubscribeProfit(login)
  }
})

const getData = async () => {
  try {
    const res = await customApi.customDailyCompare()
    if (res.code === Code.StatusOK) {
      compareData.value = res.data
    }
  } catch (e) {
    console.log(e)
  }
}
const goTime = () => {
  getLocalTime()
  let timezone = 2 //目标时区时间，东2区   东时区正数 西市区负数
  let offset_GMT = new Date().getTimezoneOffset() // 本地时间和格林威治的时间差，单位为分钟
  let nowDate = new Date().getTime() // 本地时间距 1970 年 1 月 1 日午夜（GMT 时间）之间的毫秒数
  let data = new Date(
    nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000,
  )
  //当月第一天和最后一天
  let mon1 = data.setDate(1) //当月第一天
  let mon2 = data.setMonth(data.getMonth() + 1) //下月
  let y1 = new Date(mon1).getFullYear()
  let m1 = new Date(mon1).getMonth() + 1
  let d1 = new Date(mon1).getDate()
  let y2 = new Date(mon2).getFullYear()
  let m2 = new Date(mon2).getMonth() + 1
  let d2 = 1

  isDate.value = [
    y1 + '-' + (m1 < 10 ? '0' + m1 : m1) + '-' + (d1 < 10 ? '0' + d1 : d1),
    y2 + '-' + (m2 < 10 ? '0' + m2 : m2) + '-' + (d2 < 10 ? '0' + d2 : d2),
  ]
  fetchChartData()
}
const isMobile = ref(false)
onUnmounted(() => {
  // #ifdef H5
  window.removeEventListener('resize', handleResize)
  // #endif
})
const chartShow = ref(true)
// 监听窗口大小变化（仅 H5）
// #ifdef H5
const handleResize = () => {
  checkIsMobile()
}
// #endif
const checkIsMobile = () => {
  chartShow.value = false
  isMobile.value = windowWidth.value < 991
  chartShow.value = true
}

const AccountList = ref([])
const getAccountList = async () => {
  AccountList.value = []

  const res = await customApi.AccountAllList({
    page: {
      current: 1,
      size: 100
    }
  })
  if (res.code === 200) {
    AccountList.value = res.data

  }
}
const typeMap = computed(() => ({
  1: t('AccountType.ClassicAccount'),
  2: t('AccountType.SeniorAccount'),
  3: !isAfterJuly28() ? t('AccountType.AgencyAccount') : '',
  5: t('AccountType.SpeedAccount'),
  6: t('AccountType.SpeedAccount'),
  7: t('AccountType.StandardAccount'),
  8: t('AccountType.CentAccount')
}));
// 格式化数值函数
function formatMoney(value) {
  if (value === null || value === undefined) value = 0;
  const sign = value >= 0 ? '' : '-';
  const absoluteValue = Math.abs(value);
  return '$' + sign + numberDecimal(absoluteValue);
}
// 转换数组
const accounts = computed(() => {
  if (!AccountList.value || AccountList.value.length == 0) return []
  let filteredAccounts = AccountList.value
  return filteredAccounts.map((acc, index) => {
    const currency = acc.currency || 'USD';
    const floating = acc.floating ?? 0;
    let labels = [t('vu.item1'), 'MT4', 'Standard'];
    labels[0] = t('vu.item1');
    labels[1] = acc.platform || 'MT4';
    labels[2] = typeMap.value[acc.type];
    let nickname = typeMap.value[acc.type];
    let fwq

    fwq = acc.platform == 'MT4' ? 'CWGMarketsLtd-Live' : 'CWGMarketsSVG-Live';

    const balance = acc.balance
    return {
      ...acc,
      labels,
      isExpanded: index == 0,
      balance,
      accountNumber: acc.login.toString(),
      nickname,
      fwq,
      balanceWithSymbol: acc.balanceWithSymbol ?? '$0.00',
      creditWithSymbol: acc.creditWithSymbol ?? '$0.00',
      equityWithSymbol: acc.equityWithSymbol ?? '$0.00',
      currency,
      actualLeverage: '1:' + (acc.leverage ?? 0),
      floatingPL: acc.floatingWithSymbol ?? '$0.00',
      platform: acc.platform || 'MT4',
      server: acc.groupCode || '',
      login: acc.login.toString(),
      listType: 'real'
    };
  })
})
const curData = ref()
const setCurData = (val) => {
  console.log(accounts.value, val)
  curData.value = accounts.value.find(item => item.login == val)
}
watch(() => accounts.value, (val) => {
  if (val.length) {
    curData.value = accounts.value.find(item => item.login == loginValue.value)
  }
})
onMounted(async () => {
  loading.value = true
  goTime()
  await getData()
  // await getDropDown()
  await getDateList()
  await getAccountList()
  // #ifdef H5
  window.addEventListener('resize', handleResize)
  // #endif
  checkIsMobile()
  // await fetchChartData()
  loading.value = false
})

</script>

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

.mobilH {
  height: 100%;
}

@media screen and (max-width: 1200px) {
  .mobilH {
    height: auto;
  }
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: px2rpx(20);

  .title {
    font-size: px2rpx(24);
    font-weight: bold;
  }
}

.demo-uni-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 auto !important;
}

.uni-col-left {
  //display: flex;
  //flex-direction: column;
}

.uni-col-right {
  display: flex;
}

.dashboard-container {
  min-height: 10vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 卡片通用样式 */
.card {
  background: var(--color-white);
  color: var(--bs-heading-color);
  border-radius: 4px;
  margin-bottom: px2rpx(20);
  box-shadow: 0 px2rpx(4) px2rpx(12) rgba(0, 0, 0, 0.2);
}

.card-body {
  padding: px2rpx(16);
}

.icon-placeholder {
  width: px2rpx(48);
  height: px2rpx(48);
  border-radius: px2rpx(24);
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-text {
  font-size: px2rpx(20);
  font-weight: bold;
  color: #6c757d;
}

.growth-rate {
  font-size: px2rpx(12);
  font-weight: 500;
  padding: px2rpx(2) px2rpx(8);
  border-radius: px2rpx(2);
}

.growth-rate.rate-up {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.growth-rate.rate-down {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.custom-number,
.custom-money {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  padding: 15px;

  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-height: px2rpx(125);
}

.custom-number .title,
.custom-money .left .tit,
.custom-money .right .tit {
  font-size: 14px;
  color: var(--bs-heading-color);
  margin-bottom: 10px;
}

.custom-number .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-money {
  display: flex;
  flex-direction: column;
}

.custom-money .left,
.custom-money .right {
  flex: 1;
}

.custom-money .num {
  font-size: 20px;
  font-weight: bold;
  color: var(--bs-heading-color);
}

.custom-money .num.red {
  color: #eb3f57;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #6c8595;
  font-size: 12px;
}

.account-info1 {
  margin-bottom: 20px;
}

.custom-money-left .header,
.custom-money-right .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: px2rpx(15);
}

.custom-money-left .tab,
.custom-money-right .tab {
  font-size: px2rpx(16);
  font-weight: 600;
  color: var(--bs-heading-color);
}

.bottomCol {
  font-size: 16px;
  color: #868686;

  .bo-left1 {
    margin: 20px 0;
    padding: 20px 0;
    border-right: 1px dashed #989898;
    text-align: center;
    font-size: 16px;
  }


  .bo-right1 {
    margin: 20px 0px;
    padding: 20px 0;
    text-align: center;
    font-size: 16px;

  }
}

.blue-font {
  margin-top: px2rpx(15);
  color: #007aff;
  font-weight: 600;
  font-size: px2rpx(24);
}

.subscribe-table {
  width: 100%;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  overflow: hidden;
}

.subscribe-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  border-top: 1px solid #ebeef5;
}

.subscribe-head {
  background: #f5f7fa;
  border-top: none;
}

.subscribe-cell {
  padding: 10px 8px;
  font-size: 12px;
  color: var(--bs-heading-color);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-dialog-content {
  padding: px2rpx(20);

  .info-text {
    color: var(--bs-heading-color);
    font-size: px2rpx(14);
    line-height: px2rpx(36);
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: px2rpx(12);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.header-title {
  font-size: px2rpx(14);
  font-weight: 600;
}

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

.action-btn {
  background: #ffde02;
  border: none;
  border-radius: 50%;
  width: px2rpx(32);
  height: px2rpx(32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;

  &:after {
    border: none;
  }
}

.dia-content {
  padding: 20rpx;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.label {
  font-weight: 500;
  margin-bottom: 8rpx;
}

.btn {
  text-align: center;
  //background-color: rgb(var(--bs-danger-rgb));
  //font-size: px2rpx(16);
  color: #fff;
  //padding: px2rpx(10) px2rpx(20);
  border-radius: px2rpx(8) !important;
  margin: 0;
}

.crm-cursor {
  cursor: pointer;
}

.link {
  display: flex;
  margin-top: 20rpx;

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: px2rpx(35);
    margin: 0 px2rpx(10);
  }
}

.chart-box {
  background: var(--color-white);
  border-radius: 8px;
  padding: px2rpx(16);
  height: 100%;
  box-shadow: 0 px2rpx(4) px2rpx(12) rgba(0, 0, 0, 0.2);
}

.mh {
  height: 100%;
}

.chart-title {
  width: 100%;
  //display: flex;
  //justify-content: space-between;
  //align-items: flex-start;
  //margin-bottom: px2rpx(16);
  //padding-bottom: px2rpx(16);
  border-bottom: 1px solid #f0f0f0;
}

.bigtitle {
  font-size: px2rpx(18);
}

.opt-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.btn-opt {
  display: flex;
  height: 100%;
  align-items: flex-end;
  justify-content: flex-end;
}

.chart-title .time {
  display: flex;
  align-items: center;
  gap: px2rpx(8);
  font-size: px2rpx(14);
  margin-bottom: px2rpx(10);
  color: #999;
}

.chart-title .title {
  flex: 1;
  margin: 0;
  margin-bottom: px2rpx(10);
}

.chart-title .title .name {
  font-size: px2rpx(18);
  font-weight: 600;
  color: var(--bs-heading-color);
  text-align: center;
  margin-bottom: px2rpx(8);
}

.chart-title .title .account {
  font-size: px2rpx(14);
  color: #999;
  text-align: center;
  margin-bottom: px2rpx(8);
}

.chart-title .title .date {
  display: flex;
}

.chart-title .date-picker {
  font-size: px2rpx(12);
  color: #666;
  padding: px2rpx(6) px2rpx(12);
  background: #f5f5f5;
  border-radius: 4px;
}

.chart-title .operation {
  //gap: px2rpx(4);
  margin-left: px2rpx(10);
  color: #666;
  margin-bottom: px2rpx(10);
  height: px2rpx(48);
  width: px2rpx(100);
  font-size: px2rpx(16);
  line-height: px2rpx(48) !important;
}

.chart-container {
  margin-top: px2rpx(20);
  height: px2rpx(350);
}

.popup-content .form {
  padding: px2rpx(16);
}

.popup-content .form-item {
  margin-bottom: px2rpx(20);
}

.popup-content .form-label {
  display: block;
  font-size: px2rpx(14);
  color: #666;
  margin-bottom: px2rpx(8);
}

.popup-content .picker-value {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: px2rpx(12);
  background: #f5f5f5;
  border-radius: 4px;
  font-size: px2rpx(14);
  color: #333;
}

.crm-cursor {
  cursor: pointer;
}

.crm-border-radius {
  border-radius: 8px;
}
</style>