style

lxf

2025-07-04 5ef5f50d09b49795c4cc9ca017294cbb74083cae

style

 h5.rar

Binary files differ

 src/assets/css/copy.scss

@@ -54,8 +54,8 @@
$border-grey: #E5E7ED;
$blue: #1194F7;
$light-blue: #1199FA;
$red: #F43368;
$green: #06CDA5;
$red: #de5d56;
$green: #3a7ff6;
$purple: #9A4DFD;
$night: #131a2e;
// 第三版

 src/assets/css/variable-light.scss

@@ -26,7 +26,7 @@
$bg_dark: #f0f2f5; 
$border_color: #e0e0e0; 
$divi_line: #f0f0f0; // 分割线颜色

$btn_000: #000;
// ... 其他变量保持类似的浅色调整 ...

// 类名映射保持不变，会自动使用新的颜色变量

 src/assets/css/variable.scss

@@ -22,7 +22,7 @@
$title_color:#B8BDC5;
$line_color: #393E49;
$bg_dark: #474B62;
$border_color: #212C4E;
$border_color: #e3e3e3;
$divi_line: #151726; //分割线
$bg_step: #868D9A;
$bg_Bottom:#313346;
@@ -44,7 +44,7 @@
$delivery_tab_background: #2A324D;
$search_background: #1B233B;
$pledgeLoan_background:#00E3FF;

$btn_000: #000;
.mainBackground{
    background: $main_background;
}
@@ -153,7 +153,7 @@
  $border-grey: #E5E7ED;
  $blue: #1194F7;
  $light-blue: #1199FA;
  $red: #F43368;
  $green: #06CDA5;
  $red: #de5d56;
  $green: #3a7ff6;
  $purple: #9A4DFD;
  $night: #131a2e;

 src/assets/init.scss

@@ -55,8 +55,8 @@
  $border-grey: #E5E7ED;
  $blue: #1194F7;
  $light-blue: #1199FA;
  $red: #F43368;
  $green: #06CDA5;
  $red: #de5d56;
  $green: #3a7ff6;
  $purple: #9A4DFD;
  $night: #f5f7fa;
  // overwrite vant

 src/assets/theme/dark/index.scss

@@ -14,7 +14,7 @@
$title_color:#B8BDC5;
$line_color: #393E49;
$bg_dark: #474B62;
$border_color: #474B62;
$border_color: #e3e3e3;
$divi_line: #151726; //分割线
$bg_step: #868D9A;
$bg_Bottom:#313346;

 src/components/Transform/list-quotation/index.vue

@@ -18,7 +18,7 @@
      </van-cell> -->

      <div class="flex items-end justify-between">
        <div class="block text-22 font-medium">行情</div>
        <div class="block text-22 font-medium">{{$t('Market')}}</div>
        <div class="relative text-13">
          <!-- <div class="flex px-10 justify-between rounded-full bg-black text-white min-w-100 box-border">
            <div class="block">貨幣</div>
@@ -116,7 +116,6 @@
    </div> -->
  </div>
</template>

<script>
import { List, Cell } from 'vant'
import { mapGetters, mapActions } from 'vuex'
@@ -124,6 +123,8 @@
import ExTabs from "@/components/Transform/ex-tabs/index.vue";
import { HOST_URL } from '@/config'
import { SET_CURRENCY } from "@/store/const.store";
// import { useI18n } from "vue-i18n";
// const t = useI18n()
export default {
  name: 'ListQuotation',
  data() {
@@ -170,14 +171,14 @@
        });
      } else {
        setStorage('symbol', item.symbol)
         this.$router.push({
          path: `/foreign/deliveryContract/${item.symbol}`,
          query: { type: 'cryptos' }
        });
        // this.$router.push({
        //   path: `/cryptos/perpetualContract/${item.symbol}`,
        //  this.$router.push({
        //   path: `/foreign/deliveryContract/${item.symbol}`,
        //   query: { type: 'cryptos' }
        // });
        this.$router.push({
          path: `/cryptos/perpetualContract/${item.symbol}`,
          query: { type: 'cryptos' }
        });
      }
    },
    handleImage(url) {

 src/components/foreign/foreign-contract-header/index.vue

@@ -3,8 +3,8 @@
    <div>
        <div class="contract-header">
            <div class="pl-15 pr-15">
                <div class="flex justify-start pt-10 pb-5 before">
                    <img src="@/assets/image/icon_back.png" class="icon_back_1" alt="" @click="jump()">
                <div class="flex justify-start pt-10 pb-5">
                    <!-- <img src="@/assets/image/icon_back.png" class="icon_back_1" alt="" @click="jump()"> -->
                    <div class="flex items-center font-14">
                        <van-icon name="sort" @click="onSidebar" />
                        <!-- <img src="@/assets/theme/dark/image/black-convert.png" alt="convert-img" class="w-18 h-18" @click="onSidebar"> -->
@@ -144,9 +144,11 @@

<style lang="scss" scoped>
@import '@/assets/css/copy.scss';
@import '@/assets/css/deepseek_css_20250625_30ff932.css';

.contract-header {
    font-size: 15px;
    margin-top: 40px;
}

.before {

 src/components/foreign/foreign-perpetual-open/index.vue

@@ -14,9 +14,9 @@
            }}</span></div>
            <div class="flex textColor font-16 borderColor items-center h-40" style="border-radius:4px;">
              <div class="flex-1 text-center lh-40" style="border-top-left-radius:4px;border-bottom-left-radius:4px;"
                :class="currentType == 'long' ? 'bg-green' : ''" @click="changeTab('long')">{{ $t('buy') }}</div>
                :class="currentType == 'long' ? 'bg-green text_fff' : ''" @click="changeTab('long')">{{ $t('buy') }}</div>
              <div class="flex-1 text-center lh-40" style="border-top-right-radius:4px;border-bottom-right-radius:4px;"
                :class="currentType == 'short' ? 'bg-red' : ''" @click="changeTab('short')">{{ $t('sell') }}</div>
                :class="currentType == 'short' ? 'bg-red text_fff' : ''" @click="changeTab('short')">{{ $t('sell') }}</div>
            </div>
            <div class="flex justify-between h-30 items-center mt-10">
              <span class="textColor2 font-14">{{ $t('time') }}</span>
@@ -391,6 +391,9 @@
  font-size: 14px;
}

.text_fff{
  color: #fff;
}
.options {
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
  border-radius: 6px;

 src/components/fx-footer/index.vue

@@ -15,10 +15,10 @@
        </template>
      </van-tabbar-item>
      <!-- /foreign -->
      <van-tabbar-item name="trade" to="/foreign/deliveryContract/USDSGD">
      <van-tabbar-item name="trade" :to="'/foreign/deliveryContract/'+jgSymbol">
        <span :class="[active === 'trade' ? 'active' : '']">{{ $t('trade') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.trade.active : icon.trade.inactive" />
          <img :src="active === 'trade' ? icon.trade.active : icon.trade.inactive" />
        </template>
      </van-tabbar-item>
      <!-- <van-tabbar-item name="funds" to="/cryptos/funds">
@@ -56,9 +56,12 @@
import { useI18n } from "vue-i18n";
import { useRoute } from 'vue-router';
import { watch } from "vue";
import { getLocalStorageValue } from '@/utils/utis.js'
const { t } = useI18n()
const active = ref('home')
const route = useRoute()
const jgSymbol = getLocalStorageValue('jgSymbol')

if (route.path == "/trade/index") {
  active.value = 'trade'
} else if (route.path.indexOf('/quotes') != -1) {
@@ -69,7 +72,8 @@
  active.value = 'mine'
} else if (route.path == "/foreign/index") {
  active.value = 'optional'
}else if (route.path == "/foreign/deliveryContract/USDSGD") {
}else if (route.path.startsWith("/foreign/deliveryContract/")) {
  console.log('出现了')
  active.value = 'trade'
}else if (route.path == "/cryptos/funds") {
  active.value = 'funds'
@@ -77,6 +81,7 @@
let quotesStore = useQuotesStore()

watch(() => route.path, (nv) => {
  console.log('path', route.path)
  if (route.path == "/trade/index") {
    active.value = 'trade'
  } else if (route.path.indexOf('/quotes') != -1) {
@@ -87,7 +92,8 @@
    active.value = 'mine'
  } else if (route.path == "/optional/index") {
    active.value = 'optional'
  }else if (route.path == "/foreign/deliveryContract/USDSGD") {
  }else if (route.path.startsWith("/foreign/deliveryContract/")) {
  console.log('出现了')
    active.value = 'trade'
  }
})

 src/config/index.js

@@ -34,8 +34,8 @@
export const defaultSeconds = 1 * 24 * 60 * 60 * 1000

// const ENV_DEV = 'zhapi.coinbtcs.com' // dev
const ENV_DEV = 'openapi.yanshiz.com' // dev
// const ENV_DEV = '192.168.10.18:8086' // dev
// const ENV_DEV = 'openapi.yanshiz.com' // dev
const ENV_DEV = '192.168.10.18:8086' // dev


// const ENV_PRO = 'qheufhj.site' //  app域名

 src/i18n/Deutsch.js

@@ -1767,6 +1767,8 @@
    "金额": "Geldbetrag",
    "全部": "Alle",
    "可用": "Verfügbare",
    "处理中": "In Bearbeitung",
    "转换": "Umwandeln",
    "到账数量": "Anzahl der eingehenden Konten",
    "金额不足": "Unzureichende Beträge",
    "请输入地址": "Bitte Adresse eingeben",
@@ -2083,6 +2085,7 @@
    "锁仓收益": "Rendite der esperrten Positionen",
    "锁仓推广收益": "empfohlene Rendite der esperrten Positionen",
    "账变记录": "Aufzeichnungen",
    "现货订单": "Spot-Auftrag",
    "选择账户类型": "Kontotyp auswählen",
    "查询": "Anfrage",
    "永续合约": "unbefristete Verträge",
@@ -2780,18 +2783,18 @@
    'ETF交割': 'ETF-Lieferung',
    'ETF合约': 'ETF-Vertrag',
    'ETF交易': 'ETF-Transaktion',
    '美股交割':  'US-Lagerlieferung',
    '美股交割': 'US-Lagerlieferung',
    '美股合约': 'US-Aktienvertrag',
    '美股指数':'US-Aktienindex',
    '美股指数': 'US-Aktienindex',
    '公告中心': 'Ankündigungscenter',
    '搜索更多服务': 'Weitere Dienste suchen',
    '股票':'Aktie',
    '买家':'Käufer',
    '卖家':'Verkäufer',
    '已存入交易所账户，请放心付款':'Es wurde auf das Umtauschkonto eingezahlt, bitte seien Sie versichert zu bezahlen',
    '股票': 'Aktie',
    '买家': 'Käufer',
    '卖家': 'Verkäufer',
    '已存入交易所账户，请放心付款': 'Es wurde auf das Umtauschkonto eingezahlt, bitte seien Sie versichert zu bezahlen',
    '请输入推荐码': 'Bitte geben Sie den Empfehlungscode ein',
    '请输入正确的推荐码': 'Bitte geben Sie den richtigen Empfehlungscode ein',
    '余额不足':'Mangelhaftes Gleichgewicht',
    '余额不足': 'Mangelhaftes Gleichgewicht',
    "未实现盈亏（USD）": "Nicht realisierter Gewinn und Verlust (USD) ",
    "证件号码长度超过50": "Die Länge der Ausweisnummer überschreitet 50",
    "实名姓名长度超过50": "Die Länge des Namens überschreitet 50",

 src/i18n/Italy.js

@@ -1844,6 +1844,8 @@
    "金额": "Importo",
    "全部": "Tutti",
    "可用": "Disponibile",
    "处理中": "In elaborazione",
    "转换": "Convertire",
    "到账数量": "Riceverete",
    "金额不足": "Equilibrio insufficiente",
    "请输入地址": "Inserire l'indirizzo del portafoglio",
@@ -2215,6 +2217,7 @@
    "法币交易": "Legale",
    "币币交易": "Valuta",
    "账变记录": "Consumare il record",
    "现货订单": "Ordine spot",
    "选择账户类型": "Selezionare il tipo di conto",
    "查询": "Ricerca",
    "永续合约": "Perpetuo",
@@ -2875,13 +2878,13 @@
    '美股指数': 'Indice azionario statunitense',
    '公告中心': 'Centro annunci',
    '搜索更多服务': 'Cerca più servizi',
    '股票':'Azione',
    '买家':'Acquirente',
    '卖家':'Venditore',
    '已存入交易所账户，请放心付款':'È stato depositato sul conto di scambio, ti assicuriamo di pagare',
    '股票': 'Azione',
    '买家': 'Acquirente',
    '卖家': 'Venditore',
    '已存入交易所账户，请放心付款': 'È stato depositato sul conto di scambio, ti assicuriamo di pagare',
    '请输入推荐码': 'Inserisci il codice di riferimento',
    '请输入正确的推荐码': 'Inserisci il codice di riferimento corretto',
    '余额不足':'Equilibrio insufficiente',
    '余额不足': 'Equilibrio insufficiente',
    "未实现盈亏（USD）": "Non realizzato P/L (USD)",
    "证件号码长度超过50": "La lunghezza del numero di documento supera i 50",
    "实名姓名长度超过50": "La lunghezza del nome reale supera i 50",

 src/i18n/Japanese.js

@@ -1950,6 +1950,7 @@
    "法币交易": "法定通貨取引",
    "币币交易": "通貨取引",
    "账变记录": "アカウント変更記録",
    "现货订单": "現物注文",
    "选择账户类型": "アカウントの種類を選択",
    "查询": "お問い合わせ",
    "永续合约": "無期限契約",
@@ -2195,6 +2196,8 @@
    "日元": "日本円",
    "英镑": "英ポンド",
    "可用:": "利用可能",
    "处理中": '処理中',
    "转换": '変換',
    "交割合约历史": "配送契約履歴",
    "涨幅榜": "ライジング",
    "跌幅榜": "下落リスト",
@@ -2643,13 +2646,13 @@
    '美股指数': '米国株価指数',
    '公告中心': 'アナウンス センター',
    '搜索更多服务': 'さらにサービスを検索',
    '股票':'ストック',
    '买家':'購入者',
    '卖家':'販売者',
    '已存入交易所账户，请放心付款':'取引所口座に入金されましたので、ご安心してお支払いください',
    '股票': 'ストック',
    '买家': '購入者',
    '卖家': '販売者',
    '已存入交易所账户，请放心付款': '取引所口座に入金されましたので、ご安心してお支払いください',
    '请输入推荐码': '紹介コードを入力してください',
    '请输入正确的推荐码': '正しい紹介コードを入力してください',
    '余额不足':'残高不足',
    '余额不足': '残高不足',
    "未实现盈亏（USD）": "未実現損益（USD）",
    "证件号码长度超过50": "IDカード番号の長さが50を超えています",
    "实名姓名长度超过50": "実名の長さが50を超えています",

 src/i18n/Spanish.js

@@ -1746,6 +1746,8 @@
    "金额": "Cantidad",
    "全部": "Todo",
    "可用": "Disponible",
    "处理中": 'En proceso',
    "转换": "Convertir",
    "到账数量": "Número de créditos",
    "金额不足": "Cantidad insuficiente",
    "请输入地址": "Por favor, introduzca su dirección",
@@ -2063,6 +2065,7 @@
    "锁仓推广收益": "Ganancias de referencia bloqueadas",
    "签到奖励": "Bono de inscripción",
    "账变记录": "Historial de la cuenta",
    "现货订单": "Orden al contado",
    "选择账户类型": "Seleccione el tipo de cuenta",
    "查询": "Consulta",
    "永续合约": "Contratos perpetuos",

 src/i18n/cn.js

@@ -2064,6 +2064,7 @@
    "锁仓收益": "鎖倉收益",
    "锁仓推广收益": "鎖倉推薦收益",
    "账变记录": "賬變記錄",
    "现货订单": "現貨訂單",
    "选择账户类型": "選擇賬戶類型",
    "查询": "查詢",
    "永续合约": "永續合約",
@@ -2350,6 +2351,8 @@
    "日元": "日元",
    "英镑": "英鎊",
    "可用:": "可用:",
    "处理中": "处理中",
    "转换": "转换",
    "交割合约历史": "交割合約歷史",
    "涨幅榜": "漲幅榜",
    "跌幅榜": "跌幅榜",
@@ -2764,13 +2767,13 @@
    '美股指数': '美股指數',
    '公告中心': '公告中心',
    '搜索更多服务': '搜索更多服務',
    '股票':'股票',
    '买家':'買家的',
    '卖家':'賣家的',
    '已存入交易所账户，请放心付款':'已存入交易所賬戶，請放心付款',
    '股票': '股票',
    '买家': '買家的',
    '卖家': '賣家的',
    '已存入交易所账户，请放心付款': '已存入交易所賬戶，請放心付款',
    '请输入推荐码': '請輸入推薦碼',
    '请输入正确的推荐码': '請輸入正確的推薦碼',
    '余额不足':'餘額不足',
    '余额不足': '餘額不足',
    "未实现盈亏（USD）": "未實現盈虧（USD）",
    "证件号码长度超过50": "證件號碼長度超過50",
    "实名姓名长度超过50": "實名姓名長度超過50",

 src/i18n/en.js

@@ -1142,6 +1142,7 @@
    '兑入数量': 'Deposit amount',
    '兑出数量': 'Exchange amount',
    '兑换时间': 'Exchange time',
    '兑换': 'Exchange',
    '官方充值通道': 'Official recharge channel',
    '公证时间为1-30个工作日': 'Notarization time is 1-30 working days',
    '复制失败': 'Replication failed',
@@ -1723,6 +1724,8 @@
    "金额": "Amount",
    "全部": "All",
    "可用": "Available",
    "处理中": "Processing",
    "转换": "Convert",
    "到账数量": "You receive",
    "金额不足": "Insufficient balance",
    "请输入地址": "Please enter wallet address",
@@ -2091,6 +2094,7 @@
    "法币交易": "Legal",
    "币币交易": "Currency",
    "账变记录": "Record",
    "现货订单": "Spot Order",
    "选择账户类型": "Select account type",
    "查询": "Search",
    "永续合约": "Perpetual",
@@ -2739,13 +2743,13 @@
    '美股指数': 'US Exchange',
    '公告中心': 'Announcement',
    '搜索更多服务': 'Search for more services',
    '股票':'Stock',
    '买家':'Buyer',
    '卖家':'Seller',
    '已存入交易所账户，请放心付款':'It has been deposited into the exchange account, please rest assured to pay',
    '股票': 'Stock',
    '买家': 'Buyer',
    '卖家': 'Seller',
    '已存入交易所账户，请放心付款': 'It has been deposited into the exchange account, please rest assured to pay',
    '请输入推荐码': 'Please enter the referral code',
    '请输入正确的推荐码': 'Please enter the correct referral code',
    '余额不足':'Insufficient balance',
    '余额不足': 'Insufficient balance',
    "未实现盈亏（USD）": "Unrealized P/L (USD)",
    "证件号码长度超过50": "ID number length exceeds 50",
    "实名姓名长度超过50": "Real name length exceeds 50",

 src/i18n/fa.js

@@ -1658,6 +1658,8 @@
    "金额": "Montant",
    "全部": "Tous",
    "可用": "Disponible sur",
    "处理中": "En cours de traitement",
    "转换": "Convertir",
    "到账数量": "Montant reçu",
    "金额不足": "Solde insuffisant",
    "请输入地址": "Veuillez entrer l'adresse du portefeuille",
@@ -2000,6 +2002,7 @@
    "法币交易": "Légal",
    "币币交易": "Monnaie",
    "账变记录": "Enregistrée",
    "现货订单": "Commande au comptant",
    "选择账户类型": "Sélectionner le type de compte",
    "查询": "Recherche",
    "永续合约": "éternel",
@@ -2671,24 +2674,24 @@
    "loanRuleTitle2": "2. Comment obtenir un prêt ? Quelles sont les exigences ?",
    "loanRuleContent1": "Bybit Loan est un service financier proposé en partenariat avec une société de prêt tiers, vous fournissant des prêts pour répondre à vos besoins de liquidité à court terme.",
    "loanRuleTitle1": "1. Qu'est-ce que Bybit Loan ?",
    '外汇交割':  'Livraison en devises',
    '外汇交割': 'Livraison en devises',
    '外汇合约': 'Contrat de change',
    '外汇交易': 'Foreign Exchange',
    'ETF交割': 'Livraison ETF',
    'ETF合约': 'Contrat ETF',
    'ETF交易':  'Opération ETF',
    'ETF交易': 'Opération ETF',
    '美股交割': 'Livraison stock US',
    '美股合约': 'Contrat boursier américain',
    '美股指数':  'Indice boursier américain',
    '美股指数': 'Indice boursier américain',
    '公告中心': 'Centre d annonces',
    '搜索更多服务': 'Rechercher plus de services',
    '股票':'Action',
    '买家':'Acheteur',
    '卖家':'Vendeur',
    '已存入交易所账户，请放心付款':'Il a été déposé sur le compte d échange, soyez assuré de payer',
    '股票': 'Action',
    '买家': 'Acheteur',
    '卖家': 'Vendeur',
    '已存入交易所账户，请放心付款': 'Il a été déposé sur le compte d échange, soyez assuré de payer',
    '请输入推荐码': 'Veuillez entrer le code de recommandation',
    '请输入正确的推荐码': 'Veuillez entrer le code de recommandation correct',
    '余额不足':'Solde insuffisant',
    '余额不足': 'Solde insuffisant',
    "未实现盈亏（USD）": "Non réalisé P/L (USD)",
    "证件号码长度超过50": "La longueur du numéro d'identification dépasse 50",
    "实名姓名长度超过50": "La longueur réelle du nom dépasse 50",

 src/i18n/korean.js

@@ -2106,6 +2106,7 @@
    '锁仓收益': '잠금 수익 ',
    '锁仓推广收益': '잠금 판매 수익 ',
    '账变记录': '장부변동 기록 ',
    "现货订单": "현물 주문",
    '选择账户类型': '계정 유형을 선택하십시오 ',
    '查询': '조회한다 ',
    '永续合约': '영속계약 ',
@@ -2380,6 +2381,8 @@
    '日元': '엔 ',
    '英镑': '파운드 ',
    '可用': '사용 가능',
    "处理中": '처리 중',
    "转换": "변환",
    '交割合约历史': '배송 계약 내역',
    '涨幅榜': '상승률 차트 ',
    '跌幅榜': '낙폭 차트 ',
@@ -2777,15 +2780,15 @@
    '美股交割': '미국 재고 배송',
    '美股合约': '미국 주식 계약',
    '美股指数': '미국 주가 지수',
    '公告中心':'공지센터',
    '公告中心': '공지센터',
    '搜索更多服务': '더 많은 서비스 검색',
    '股票':'재고',
    '买家':'구매자',
    '卖家':'판매자',
    '已存入交易所账户，请放心付款':'거래소 계좌로 입금되었습니다 안심하시고 입금하세요',
    '股票': '재고',
    '买家': '구매자',
    '卖家': '판매자',
    '已存入交易所账户，请放心付款': '거래소 계좌로 입금되었습니다 안심하시고 입금하세요',
    '请输入推荐码': '추천 코드를 입력하십시오',
    '请输入正确的推荐码': '올바른 추천 코드를 입력하십시오',
    '余额不足':'잔액 불충분',
    '余额不足': '잔액 불충분',
    '未实现盈亏（USD）': '미실현 손익(USD） ',
    "证件号码长度超过50": "ID 번호 길이가 50자를 초과합니다.",
    "实名姓名长度超过50": "실명 길이가 50자를 초과합니다.",

 src/i18n/th.js

@@ -1752,6 +1752,8 @@
    "金额": "จำนวนเงิน",
    "全部": "ทั้งหมด",
    "可用": "มีอยู่",
    "处理中": 'กำลังดำเนินการ',
    "转换": "แปลง",
    "到账数量": "จำนวนเงินที่มาถึง",
    "金额不足": "จำนวนเงินไม่เพียงพอ",
    "请输入地址": "กรุณากรอกที่อยู่",
@@ -2093,6 +2095,8 @@
    "法币交易": "ธุรกรรมสกุลเงิน Fiat",
    "币币交易": "การซื้อขายสกุลเงิน",
    "账变记录": "บันทึกการเปลี่ยนแปลงบัญชี",
    "现货订单": "คำสั่งซื้อสปอต",
    "现货订单": "",
    "选择账户类型": "เลือกประเภทบัญชี",
    "查询": "สอบถาม",
    "永续合约": "สัญญาถาวร",
@@ -2744,21 +2748,21 @@
    '外汇交易': 'การแลกเปลี่ยนเงินตราต่างประเทศ',
    'ETF交割': 'การนำส่ง ETF',
    'ETF合约': 'สัญญา ETF',
    'ETF交易':  'ธุรกรรม ETF',
    'ETF交易': 'ธุรกรรม ETF',
    '美股交割': 'การส่งมอบหุ้นสหรัฐฯ',
    '美股合约': 'สัญญาหุ้นสหรัฐ',
    '美股指数': 'ดัชนีหุ้นสหรัฐ',
    '公告中心': 'ศูนย์ประกาศ',
    '搜索更多服务': 'ค้นหาบริการเพิ่มเติม',
    '股票':'คลังสินค้า',
    '买家':'ผู้ซื้อ',
    '卖家':'ผู้ขาย',
    '已存入交易所账户，请放心付款':'มันถูกฝากเข้าบัญชีแลกเปลี่ยนแล้ว โปรดวางใจที่จะจ่าย',
    '股票': 'คลังสินค้า',
    '买家': 'ผู้ซื้อ',
    '卖家': 'ผู้ขาย',
    '已存入交易所账户，请放心付款': 'มันถูกฝากเข้าบัญชีแลกเปลี่ยนแล้ว โปรดวางใจที่จะจ่าย',
    '请输入推荐码': 'กรุณาใส่รหัสแนะนำ',
    '请输入正确的推荐码': 'กรุณาใส่รหัสแนะนำที่ถูกต้อง',
    '余额不足':'ยอดเงินคงเหลือไม่เพียงพอ',
    '余额不足': 'ยอดเงินคงเหลือไม่เพียงพอ',
    "未实现盈亏（USD）": "กำไรและขาดทุนที่ยังไม่เกิดขึ้นจริง (USD)",
    "证件号码长度超过50": "หมายเลข ID ยาวเกิน 50",
    "实名姓名长度超过50": "ความยาวชื่อเกิน 50",
    

}

 src/i18n/vi.js

@@ -2110,6 +2110,7 @@
    "法币交易": "Hợp pháp",
    "币币交易": "Tiền tệ",
    "账变记录": "Kỷ lục thanh khoản",
    "现货订单": "Đơn hàng giao ngay",
    "选择账户类型": "Chọn loại tài khoản",
    "查询": "Tìm kiếm",
    "永续合约": "Vĩnh viễn",
@@ -2355,6 +2356,8 @@
    "日元": "Đồng Yên",
    "英镑": "Đồng bảng Anh",
    "可用:": "Có sẵn",
    "处理中": 'Đang xử lý',
    "转换": "Chuyển đổi",
    "交割合约历史": "Lịch sử hợp đồng cung ứng",
    "涨幅榜": "Người được",
    "跌幅榜": "Người thua lỗ",
@@ -2729,13 +2732,13 @@
    '美股指数': 'Chỉ số chứng khoán Mỹ',
    '公告中心': 'Trung tâm thông báo',
    '搜索更多服务': 'Tìm thêm dịch vụ',
    '股票':'Cổ phần',
    '买家':'Người mua',
    '卖家':'Người bán',
    '已存入交易所账户，请放心付款':'Nó đã được gửi vào tài khoản trao đổi, hãy yên tâm thanh toán',
    '股票': 'Cổ phần',
    '买家': 'Người mua',
    '卖家': 'Người bán',
    '已存入交易所账户，请放心付款': 'Nó đã được gửi vào tài khoản trao đổi, hãy yên tâm thanh toán',
    '请输入推荐码': 'Vui lòng nhập mã giới thiệu',
    '请输入正确的推荐码': 'Vui lòng nhập mã giới thiệu chính xác',
    '余额不足':'Thiếu cân bằng',
    '余额不足': 'Thiếu cân bằng',
    "未实现盈亏（USD）": "Lãi/Lỗ chưa thực hiện (USD) ",
    "证件号码长度超过50": "Số ID vượt quá 50",
    "实名姓名长度超过50": "Tên thật vượt quá 50",

 src/i18n/zhcn.js

@@ -1731,6 +1731,8 @@
    "金额": "金额",
    "全部": "全部",
    "可用": "可用",
    "处理中": "处理中",
    "转换": "转换",
    "到账数量": "到账数量",
    "金额不足": "金额不足",
    "请输入地址": "请输入地址",
@@ -2049,6 +2051,7 @@
    "锁仓收益": "锁仓收益",
    "锁仓推广收益": "锁仓推荐收益",
    "账变记录": "账变记录",
    "现货订单": "现货订单",
    "选择账户类型": "选择账户类型",
    "查询": "查询",
    "永续合约": "永续合约",

 src/store/language.store.js

@@ -9,9 +9,10 @@
        language: getStorage('lang') || getBrowserLang() // 项目初始化时，默认为浏览器的语言,
    }),
    actions: {
        [SET_LANGUAGE](locale) {
        [SET_LANGUAGE](locale, tit = '') {
            this.language = locale
            setStorage('lang', locale)
            setStorage('lang_tit', tit)
        }

    },

 src/utils/utis.js

@@ -10,7 +10,7 @@

//import { Toast } from "vant";

 export const formatData = (data) => {
export const formatData = (data) => {
    let thisData = formatTime(new Date(), "yyyy-MM-dd");
    let myData = data.substr(0, 10);
    if (thisData == myData) {
@@ -49,7 +49,7 @@
}


export const dataTime = (data,isTrue) =>{
export const dataTime = (data, isTrue) => {
    var date = new Date(data);
    let Y = date.getFullYear() + '-';
    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
@@ -58,27 +58,27 @@
    let m = date.getMinutes() + ':';
    let s = date.getSeconds();
    let str = Y + M + D
    if (isTrue){
         str = Y + M + D + h + m+ s
    }else{
         str = Y + M + D
    if (isTrue) {
        str = Y + M + D + h + m + s
    } else {
        str = Y + M + D
    }
    return str
}

export const dataTimeEx = (data,isTrue) =>{
export const dataTimeEx = (data, isTrue) => {
    var date = new Date(data);
    let Y = date.getFullYear() + '-';
    let M = ((date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '').padStart(2,'0') + '-';
    let D = (date.getDate() + '').padStart(2,'0') + ' ';
    let h = (date.getHours() + '').padStart(2,'0') + ':';
    let m = (date.getMinutes() + '').padStart(2,'0') + ':';
    let s = (date.getSeconds() + '').padStart(2,'0');
    let str = Y + M + D 
    if (isTrue){
         str = Y + M + D + h + m+ s
    }else{
         str = Y + M + D 
    let M = ((date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '').padStart(2, '0') + '-';
    let D = (date.getDate() + '').padStart(2, '0') + ' ';
    let h = (date.getHours() + '').padStart(2, '0') + ':';
    let m = (date.getMinutes() + '').padStart(2, '0') + ':';
    let s = (date.getSeconds() + '').padStart(2, '0');
    let str = Y + M + D
    if (isTrue) {
        str = Y + M + D + h + m + s
    } else {
        str = Y + M + D
    }
    return str
}
@@ -135,14 +135,14 @@
    return false;
}
// 设置localStorage
export const setStorage = function(key, obj) {
export const setStorage = function (key, obj) {
    let json = JSON.stringify(obj)
    window.localStorage.setItem(key, json)
    // console.log('设置语言', key, json)
}

// 获取localStorage
export const getStorage = function(key) {
export const getStorage = function (key) {
    const str = window.localStorage.getItem(key)
    if (!str) {
        return null
@@ -151,7 +151,7 @@
}

// 移除localStorage
export const removeStorage = function(key) {
export const removeStorage = function (key) {
    window.localStorage.removeItem(key)
}
// 设置sessionStorage
@@ -170,8 +170,8 @@
    return JSON.parse(str)
}
// 获取浏览器默认语言
export const getBrowserLang = function() {
    let browserLang = navigator.language ? navigator.language: navigator.browserLanguage
export const getBrowserLang = function () {
    let browserLang = navigator.language ? navigator.language : navigator.browserLanguage
    let defaultBrowserLang = ''
    if (browserLang.toLowerCase() === 'cn' || browserLang.toLowerCase() === 'zh' || browserLang.toLowerCase() === 'zh-cn') {
        defaultBrowserLang = 'CN'
@@ -202,7 +202,7 @@
    }
}

export const debounce=  (fn, delay = 500)=> {
export const debounce = (fn, delay = 500) => {
    // timer 是在闭包中的
    let timer = null;

@@ -217,7 +217,7 @@
    }
}

export const changeTheme = (theme)=> {
export const changeTheme = (theme) => {
    if ((navigator.userAgent).indexOf('Html5Plus') > -1) {
        if (theme == 'white') {
            plus.navigator.setStatusBarBackground('#ffffff');
@@ -233,10 +233,34 @@
 * 生成随机数
 */
export function getRandom() {
  return Math.floor(Math.random() * 10)
    return Math.floor(Math.random() * 10)
}


export const handleImage = (url) => {
  return new URL(url, import.meta.url).href
    return new URL(url, import.meta.url).href
}

// 获取纯净字符串 
export function getLocalStorageValue(key) {
    const value = localStorage.getItem(key);
    if (value === null) return null;

    try {
        // 尝试直接解析
        const parsed = JSON.parse(value);

        // 如果解析后仍是字符串，尝试二次解析
        if (typeof parsed === 'string') {
            try {
                return JSON.parse(parsed);
            } catch {
                return parsed;
            }
        }
        return parsed;
    } catch (e) {
        // 不是合法JSON时手动清理
        return value.replace(/^"|"$/g, '');
    }
}

 src/views/changeFundsPassword/index.vue

@@ -188,4 +188,10 @@
    color: $color_main;
  }
}

:deep(.van-button--primary){
    background-color: $btn_000;
    border-color: $btn_000;
    border-radius: 10px;
}
</style>

 src/views/changePassword/index.vue

@@ -67,4 +67,10 @@
    background: $btn_main;
    color: $text_color;
}

:deep(.van-button--primary){
    background-color: $btn_000;
    border-color: $btn_000;
    border-radius: 10px;
}
</style>

 src/views/cryptos/AssetsCenter/components/history.css

@@ -22,7 +22,7 @@
  background-color: #F5D658; }

.green-round {
  background-color: #06CDA5; }
  background-color: #3a7ff6; }

.red-round {
  background-color: red; }

 src/views/cryptos/Funds/components/history.css

@@ -22,7 +22,7 @@
  background-color: #F5D658; }

.green-round {
  background-color: #06CDA5; }
  background-color: #3a7ff6; }

.red-round {
  background-color: red; }

 src/views/cryptos/pledgeLoan/index.vue

@@ -27,7 +27,7 @@
                                </div>
                            </div>
                        </div>
                        <div class="errorInfo font-24 h-28 lh-28 mt-20 mb-30" style="color:#F43368;">{{ errorMsg ? errorMsg
                        <div class="errorInfo font-24 h-28 lh-28 mt-20 mb-30" style="color:#de5d56;">{{ errorMsg ? errorMsg
                            : ''
                        }}
                        </div>

 src/views/cryptos/promote/init.scss

@@ -50,8 +50,8 @@
  $border-grey: $border-grey;
  $blue: #1194F7;
  $light-blue: #1199FA;
  $red: #F43368;
  $green: #06CDA5;
  $red: #de5d56;
  $green: #3a7ff6;
  $purple: #9A4DFD;
  $night: #131a2e;


 src/views/foreign/CoinChart.vue

@@ -125,7 +125,7 @@
        </div>
      </section>
      <van-popup overlay-class="left-modal" v-model:show="showLeftPopup" position="left"
        :style="{ width: '80%', height: '100%', background: '#1F233D' }" round safe-area-inset-top safe-area-inset-bottom>
        :style="{ width: '80%', height: '100%', }" round safe-area-inset-top safe-area-inset-bottom>
        <div class="modal-inner-box">
          <div class="sidebar">
            <div class="flex justify-between">
@@ -386,9 +386,10 @@
  }

  .header {
    position: relative;
    // position: relative;
    display: flex;
    align-items: center;
    margin-top: 40px;

    .flex-l {
      flex: 1;
@@ -764,7 +765,7 @@
    left: 0;
    right: 0;
    // bottom: 0px;
    background: $black;
    // background: $black;
    height: 70px;
    width: 100%;
    justify-content: center;
@@ -790,6 +791,7 @@
    .flex-r {
      display: flex;
      justify-content: flex-end;
      color:#fff;

      .sell-btn,
      .buy-btn {
@@ -806,7 +808,7 @@
      }

      .buy-btn {
        background: #5BB989;
        background: #3a7ff6;
        margin-right: 20px;
      }
    }

 src/views/foreign/foreignPerpetualContract/deliveryContract.vue

@@ -1,27 +1,53 @@
<template>
    <div :key="currentSymbol" class="pb-108 ">
        <!-- 头部区 -->
        <ContractHeader :symbol="currentSymbol" :range="range" :selectIndex="selectIndex"
            :balance="userStore.userInfo.balance" @update-coin="onUpdate" page="perpetualContract">
        </ContractHeader>
        <div>
            <div class="mainBackground rounded-view">
                <PerpetualOpen class="pl-15 pr-15" :key="keyIndex + 'c'" :selectIndex="selectIndex" :symbol="currentSymbol"
                    :green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-futrue="initFutrue"
                    @ordered="onOrdered" :currentType="currentType" @changeCurrentType="changeCurrentType">
                </PerpetualOpen>
                <div class="line"></div>
                <PerpetualOrder class="pl-15 pr-15" :key="keyIndex + 'd'" :symbol="currentSymbol" :order-cur="orderCur"
                    :order-hold="orderHold" :price="price" :topIndex="selectIndex" :futrue-hold="futrueHold"
                    :futrue-histroy="futrueHistroy" @tab="onTab" @recall="onRecall">
                </PerpetualOrder>
        <dev  class="status_bar fixed w-full top-0 left-0 h-44 flex items-center justify-between bg-white z-99">
            <dev  class="status_bar absolute top-0 left-0 w-full h-44 flex items-center justify-center z--1">
                <dev  class="p-3 bg-#EEE rounded-full flex text-12 font-medium">
                    <span  
                    :class="['block h-24 w-84.5 text-center leading-24 rounded-full', currentTab === 'spot' ? 'bg-#3640f0 text-white' : '']"
                        @click="goToTab('spot')"
                        style="cursor:pointer;">
                        <span>{{ t('现货') }}</span>
                    </span>
                    <span   
                    :class="['block h-24 w-84.5 text-center leading-24 rounded-full', currentTab === 'delivery' ? 'bg-#3640f0 text-white' : '']"
                        @click="goToTab('delivery')"
                        style="cursor:pointer;"
           >
                        <span>{{ t('交割') }}</span>
                    </span>
                </dev>
            </dev>
        </dev>
        <div v-show="currentTab === 'delivery'">
            <!-- 头部区 -->
            <ContractHeader :symbol="currentSymbol" :range="range" :selectIndex="selectIndex"
                :balance="userStore.userInfo.balance" @update-coin="onUpdate" page="perpetualContract">
            </ContractHeader>
            <JGKline></JGKline>
            <div>
                <div class="mainBackground rounded-view">
                    <PerpetualOpen class="pl-15 pr-15" :key="keyIndex + 'c'" :selectIndex="selectIndex" :symbol="currentSymbol"
                        :green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-futrue="initFutrue"
                        @ordered="onOrdered" :currentType="currentType" @changeCurrentType="changeCurrentType">
                    </PerpetualOpen>
                    <div class="line"></div>
                    <PerpetualOrder class="pl-15 pr-15" :key="keyIndex + 'd'" :symbol="currentSymbol" :order-cur="orderCur"
                        :order-hold="orderHold" :price="price" :topIndex="selectIndex" :futrue-hold="futrueHold"
                        :futrue-histroy="futrueHistroy" @tab="onTab" @recall="onRecall">
                    </PerpetualOrder>
                </div>
            </div>
        </div>

        <div v-show="currentTab === 'spot'">
            <CoinChart></CoinChart>
        </div>
    </div>
</template>

<script setup>
import CoinChart from '@/views/foreign/CoinChart.vue';
import JGKline from './jg_kline.vue';
import PerpetualOpen from '@/components/foreign/foreign-perpetual-open/index.vue'
import PerpetualOrder from '@/components/foreign/foreign-perpetual-order/index.vue'
import { ref, onMounted, onActivated, onDeactivated, onBeforeUnmount } from 'vue';
@@ -29,14 +55,22 @@
import { _getRealtime } from '@/service/quotes.api'
import { useUserStore } from '@/store/user';
import { useQuotesStore } from '@/store/quotes.store';
import { useRoute } from 'vue-router'
import { useRoute, useRouter } from 'vue-router'
import { WS_URL } from '@/config'
import { SET_COIN_LIST, SET_USERINFO } from '@/store/types.store'
import { _getBalance, _c2cPaymentMethodList } from '@/service/user.api.js'
import { _futrueOrderInit, _futrueOrderList, _getDeepData, contractOrder } from "@/service/trade.api.js";
import { useI18n } from 'vue-i18n';
const userStore = useUserStore()
const quotesStore = useQuotesStore()
const router = useRouter()
const route = useRoute()
const { t } = useI18n()

const currentTab = ref('delivery')
const goToTab = (val) => {
    currentTab.value = val
}


const initTimer = ref(null)
@@ -286,6 +320,8 @@
</script>

<style lang="scss" scoped>
@import '@/assets/css/deepseek_css_20250625_30ff932.css';

//.list-enter-active, .list-leave-active {
//  transition: all .5s;
//  transform: translateY(30px)

 src/views/foreign/foreignPerpetualContract/jg_kline.vue

New file
@@ -0,0 +1,822 @@
<template>
  <section class="pb-10">
    <div class="container-box">
      <!-- <header class="header">
        <div class="flex-l">
          <div class="icon back" @click="handleBack">
            <img src="@/assets/image/back.png" alt="">
          </div>
          <div class="name-box flex">
            <div class="icon" @click="handleShowSidebar()">
              <img src="@/assets/image/foreign/exchange.png" alt="">
            </div>
            <p class="title">{{ symbol }}</p>
          </div>
        </div>
        <div class="icon-group">
          <div class="icon record" @click="onRoute('/position')">
            <img src="../../assets/image/foreign/record.png" alt="">
          </div>
          <div class="icon setting">
            <img src="../../assets/image/icon-star_active.png" class="collected-img" @click="openCurrency"
              v-if="isCollect" />
            <img v-else src="../../assets/image/icon-star.png" class="collected-img" @click="openCurrency" />
          </div>
        </div>
      </header> -->
      <!-- <section class="value-container"> -->
        <!-- <div class="flex-l">
          <p class="first-line red">{{ priceFormat(chartData?.close) }}</p>
          <p class="second-line">
            <span class="red">{{ chartData?.change_ratio ? `${chartData?.change_ratio}%` : '--' }}</span>&nbsp;
          </p>
        </div> -->
        <!-- <div class="flex-r">
          <div class="flex-r-item">
            <p>
              <span class="label">{{ t('high') }}</span>
              <span class="value">{{ priceFormat(chartData?.high) }}</span>
            </p>
            <p>
              <span class="label">{{ t('Low') }}</span>
              <span class="value">{{ priceFormat(chartData?.low) }}</span>
            </p>

          </div>
          <div class="flex-r-item">
            <p>
              <span class="label">{{ t('Open') }}</span>
              <span class="value">{{ priceFormat(chartData?.open) }}</span>
            </p>
            <p>
              <span class="label">{{ t('Close') }}</span>
              <span class="value">{{ priceFormat(chartData?.close) }}</span>
            </p>
          </div>
        </div> -->
      <!-- </section> -->
      <!-- <p class="status-info" v-if="chartData?.market?.status">
        <span>{{ chartData?.market?.status && $t(chartData?.market?.status) }},</span>
        <span class="time">{{ chartData?.market?.time_str }}</span>&nbsp;
        <span>{{ chartData?.market?.time_zone && $t(chartData?.market?.time_zone) }}</span>
      </p> -->
      <section class="indicator-index-container">
        <div class="indicator-index-box">
          <div class="flex-l">
            <ul>
              <li v-for="(item, index) in filterOne" :key="item" @click="handleClickSelectTime(item, index)"
                :class="[item.index === timeLabelActive ? 'active' : '']">{{
                  item.name
                }}</li>
              <li @click="handleClickMoreBtn">{{ t('More') }}</li>
            </ul>
          </div>
          <div class="flex-r">
            <!-- <img src="@/assets/image/quotes/index-setting.png" alt=""> -->
          </div>
        </div>
        <div class="indicator-index-box-second" v-if="showMore">
          <ul>
            <li v-for="(item, index) in filterTwo" :key="item" @click="handleClickSelectTime(item, index)"
              :class="[item.index === timeLabelActive ? 'active' : '']">{{
                item.name
              }}</li>
          </ul>
        </div>
      </section>
      <section class="kline-container flex">
        <div class="chart-index">
          <fx-kline :height="450" :symbol="symbol" :isShowsolid="true" :chartType="chartType" v-if="symbol" @data="onData"
            :key="`${symbol}-${timeValue}`" />
        </div>
        <!-- <div class="order-book-container" v-if="timeLabelActive === 0">
          <keep-alive>
            <trade-deep-data :symbol="symbol" v-if="symbol" :price="price" class="trade-deep-container" />
          </keep-alive>
        </div> -->
      </section>
      <!-- <section class="footer-btn-group">
        <div class="flex-l" @click="onRoute('/cryptos/exchangeRate')">
          <img src="@/assets/image/quotes/exchange.png" alt="">
          <p class="rate">{{ t('汇率') }}</p>
        </div>
        <div class="flex btn-group">
          <div class="flex-r flex">
            <div :class="[noData ? 'disabled buy-btn' : 'buy-btn']" @click="gotoPage('buy')">{{
              t('buy') }}</div>
            <div :class="[noData ? 'disabled sell-btn' : 'sell-btn']" @click="gotoPage('sell')">{{ t('sell') }}</div>
          </div>
        </div>
      </section> -->
      <!-- <section class="footer-btn-group flex items-center">
        <div class="flex-l exchangeRate-box" @click="onRoute('/cryptos/exchangeRate')">
          <img src="@/assets/image/quotes/exchange.png" alt="">
          <p class="rate">{{ t('汇率') }}</p>
        </div>
        <div class="flex btn-group">

          <div class="flex btn-group">
            <div class="flex-r flex">
              <div :class="[noData ? 'disabled buy-btn' : 'buy-btn']" @click="gotoPage('buy')">{{
                t('buy') }}</div>
              <div :class="[noData ? 'disabled sell-btn' : 'sell-btn']" @click="gotoPage('sell')">{{ t('sell') }}</div>
            </div>
          </div>
        </div>
      </section> -->
      <van-popup overlay-class="left-modal" v-model:show="showLeftPopup" position="left"
        :style="{ width: '80%', height: '100%' }" round safe-area-inset-top safe-area-inset-bottom>
        <div class="modal-inner-box">
          <div class="sidebar">
            <div class="flex justify-between">
              <div class="flex items-center text-grey">
                <div class="mr-12">{{ $t('Symbol') }}</div>
              </div>
              <div class="flex text-grey right-text">
                <div class="item">
                  <div>{{ $t('lastPrice') }} / 24H {{ $t('upsAndDowns') }}</div>
                </div>
              </div>
            </div>
            <div class="flex justify-between mt-4" v-for="    item     in     listData    " :key="item.name"
              @click="handleSelectSymbol(item)">
              <div>
                <div class="font-700 textColor">{{ item.name || '--' }}</div>
              </div>
              <div class="text-right font-12">
                <div class="textColor">{{ item.close || '--' }}</div>
                <div class="value" :class="item.change_ratio > 0 ? 'green' : 'red'">{{ item.change_ratio
                  || '--'
                }}%</div>
              </div>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
    <add-currency @updateItem="getIsItemHasAddGlobal" :isCollect="isCollect" ref="addCurrencyRef"></add-currency>
  </section>
</template>
      
<script setup>
import { ref, onMounted, onBeforeMount } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Popup } from 'vant';
import { useI18n } from 'vue-i18n'
import fxKline from '@/components/fx-kline/index.vue'
import fxPopup from '@/components/fx-popup/charts-cycle.vue'
import { useUserStore } from '@/store/user.js';
import { useQuotesStore } from '@/store/quotes.store';
import { SET_STAGE } from '@/store/types.store';
import { _getQuotes, _isItemHasAddGlobal } from '@/service/quotes.api'
import addCurrency from '@/components/add-currency/index.vue'

const { t } = useI18n()
const router = useRouter()
const route = useRoute()
const show = ref(false)
const showSelect = ref(false)
const quotesStore = useQuotesStore()
const userStore = useUserStore()
const symbol = ref('')
const timeValue = ref('')
const chartData = ref({})
const listData = ref([])
const active = ref(0)
const timeLabelActive = ref(0)
const chartType = ref('')
const allEtfTabIndex = ref(0)
const allEtfListData = ref([])
const noData = ref(true)
const price = ref('')
const symbolType = ref('forex') //默认查询外汇
const showMore = ref(false)
const showLeftPopup = ref(false)
const addCurrencyRef = ref(null)
const isCollect = ref(false)

const filterOne = ref([

  { name: t('分时'), paramsValue: 'timeSharing', seconds: 1 * 60 * 1000, index: 0, },
  { name: '1' + t('天'), paramsValue: '1day', seconds: 1 * 24 * 60 * 60 * 1000, index: 1, },
  { name: '1' + t('周'), paramsValue: '1week', seconds: 7 * 24 * 60 * 60 * 1000, index: 2, },
  { name: '1' + t('月'), paramsValue: '1mon', seconds: 30 * 24 * 60 * 60 * 1000, index: 3, },
  { name: '5' + t('天'), paramsValue: '5day', seconds: 5 * 24 * 60 * 60 * 1000, index: 4, },
])


const filterTwo = ref([
  { name: '120' + t('分'), paramsValue: '120min', seconds: 2 * 60 * 60 * 1000, index: 5, },
  { name: '60' + t('分'), paramsValue: '60min', seconds: 1 * 60 * 60 * 1000, index: 6, },
  { name: '30' + t('分'), paramsValue: '30min', seconds: 30 * 60 * 1000, index: 7, },
  { name: '15' + t('分'), paramsValue: '15min', seconds: 15 * 60 * 1000, index: 8, },
  { name: '5' + t('分'), paramsValue: '5min', seconds: 5 * 60 * 1000, index: 9, },
  { name: '1' + t('分'), paramsValue: '1min', seconds: 1 * 60 * 1000, index: 10, },
])

onMounted(async () => {
  if (route.query.symbol) {
    symbol.value = route.query.symbol
  } else {
    symbol.value = quotesStore.coins.length ? quotesStore.coins[0].symbol : 'EURUSD'
  }
  if (quotesStore.stage === 'timeSharing') {
    chartType.value = 'area'
  } else {
    chartType.value = 'candle_solid'
  }
  fetchQuotes()
  fetchTableData()
  getIsItemHasAddGlobal()
})

onBeforeMount(() => {
  console.log('mount')

})

const onRoute = (path) => {
  router.push(path)
}

const handleBack = () => {
  if (route.query.isOptional == 1) {
    router.push(`/optional/index`)
    return
  }
  // if (route.query.isOptional == 2){
  //   router.push(`/optional/search`)
  //   return
  // }
  if (route.query.from === 'trade') {
    router.push(`/trade/index?tabActive=2&navActive=2`)
  } else {
    router.push('/quotes/index?tabActive=2')
  }
}

const handleSelectSymbol = (item) => {
  symbol.value = item.name
  showLeftPopup.value = false
  getIsItemHasAddGlobal()
}

const gotoPage = (type) => {
  if (noData.value || Object.keys(chartData.value).length === 0) {
    return
  }
  if (!userStore.userInfo.token) {
    router.push('/login')
    return
  }
  router.push({
    path: '/foreign/opening',
    query: {
      symbol: symbol.value,
      type,
      closePrice: Number(chartData.value.close).toFixed(4),
    }

  })
}

const handleClickSelectTime = (params) => {
  const { paramsValue, seconds, index } = params;
  timeLabelActive.value = index;
  quotesStore[SET_STAGE]({ stage: paramsValue, seconds })
  onSelectTime(paramsValue)
}

const onSelectTime = (evt) => {
  timeValue.value = evt
  if (evt == 'timeSharing') {
    chartType.value = 'area'
  } else {
    chartType.value = 'candle_solid'
  }
}

// 事件
const onData = (data) => {
  chartData.value = data
  noData.value = false
}
const fetchQuotes = () => {
  _getQuotes(quotesStore.coins).then(data => {
    data.map(item => {
      item.name = item.symbol
    })
    listData.value = data
  })
}

const filterCoins = (type) => {
  let arr = [...quotesStore.coins]
  let result = []
  if (type === "all") {
    result = arr;
  } else {
    result = arr.filter(item => item.type === type)
  }
  return result;
}

const fetchTableData = () => {
  const params = filterCoins(symbolType.value)
  _getQuotes(params).then(data => {
    allEtfListData.value = data
  })
}

const handleClickMoreBtn = () => {
  showMore.value = !showMore.value
}

const priceFormat = (value) => {
  return Number(value || '0.00').toFixed(4)
}

const handleShowSidebar = () => {
  showLeftPopup.value = true
}
const openCurrency = () => {
  addCurrencyRef.value.openCurrency(symbol.value)
}
//判断是否加入收藏
const getIsItemHasAddGlobal = () => {
  let obj = {
    symbol: symbol.value
  }
  _isItemHasAddGlobal(obj).then((data) => {
    isCollect.value = data
  })
}
</script>
<style lang="scss" scoped>
:deep(.van-sidebar) {
  width: 100%;
}

:deep(.van-sidebar-item) {
  background-color: $main2_background;
  color: $text_color;
  padding: 10px;
}

:deep(.van-sidebar-item--select) {
  background-color: #1C2946;
  color: $color_main;
}

:deep(.modal-inner-box) {
  padding: 20px;
  font-size: 14px;

}

.container-box {
  padding: 0 10px 10px 10px;

  .green {
    color: $green;
  }

  .red {
    color: $red;
  }

  .header {
    // position: relative;
    display: flex;
    align-items: center;
    margin-top: 40px;

    .flex-l {
      flex: 1;
      display: inline-flex;
      align-items: center;

      .icon {
        margin-right: 10px;
        display: inline-block;
        width: 20px;
        height: 20px;

        img {
          height: 20px;
          width: 20px;
        }
      }

      .name-box {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        align-items: center;

        .title {
          font-size: 16px;
          font-weight: 700;
          line-height: 16px;
        }

        .type {
          font-size: 12px;
          color: $text_color6;
        }
      }
    }

    .icon-group {
      width: 100px;
      text-align: right;

      .icon {
        display: inline-block;
        width: 28px;
        height: 28px;
        padding: 4px;
        margin-left: 16px;
      }
    }


  }

  .status-info {
    padding: 0 6px;
    font-size: 12px;
    line-height: 32px;
    height: 32px;
    border-bottom: 1px solid $border_color;

    .time {
      display: inline-block;
      width: 92px;
    }
  }

  .value-container {
    margin-top: 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #747A8F;
    border-bottom: 1px solid $border_color;

    .flex-l {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 160px;

      .first-line {
        font-weight: 700;
        font-size: 24px;
      }

      .second-line {
        margin-top: 8px;
      }
    }

    .flex-r {
      flex: 1;
      display: flex;
      align-items: center;
      color: $text_color;

      .flex-r-item {
        flex: 1;
        text-align: center;
        font-size: 12px;

        .label {
          color: $lable_color;
          margin-right: 10px;
        }
      }
    }
  }

  .base-info {
    .flex-r-item {
      margin: 0 !important;

      .label {
        display: inline-block;
        width: 130px;
        text-align: left;
      }

      .value {
        text-align: left;
        flex: 1;
      }
    }
  }

  .indicator-index-container {
    .indicator-index-box {
      padding: 12px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .flex-l {
        flex: 1;

        ul {
          display: flex;

          li {
            text-align: center;
            margin: 0 4px;
            padding: 0 4px;
            font-size: 12px;
            border-radius: 4px;
          }
        }
      }

      .flex-r {
        display: flex;
        justify-content: flex-end;
        width: 30px;

        img {
          width: 12px;
          height: 16px;
        }

      }
    }

    .active {
      background: $btn_main;
    }

    .indicator-index-box-second {
      ul {
        display: flex;
        border: 1px solid $border_color;
        align-items: center;
        border-right: none;
      }

      li {
        flex: 1;
        height: 32px;
        line-height: 32px;
        text-align: center;
        font-size: 12px;
        border-right: 1px solid $border_color;
      }
    }
  }

  .kline-container {
    margin-top: 10px;

    .order-book-container {
      padding: 100px 2px 0 6px;
      width: 130px;
      border-left: 1px solid $border_color;
    }

    .chart-index {
      flex: 1;
      min-width: 200px;
    }



    .text-sm {
      position: relative;
    }

    .select-div {
      width: 100px;
      position: absolute;
      top: 30px;
      left: 0;
      z-index: 100;

      ul {
        box-shadow: 0px 3px 11px 0px rgb(0 0 0 / 10%);

        li {
          background: $mainbgWhiteColor;
          text-align: center;
          padding: 10px 0;
          font-size: 16px;
        }

        li:not(:last-child) {
          border-bottom: 1px solid $border-grey;
        }
      }
    }

    .active {
      background: $btn_main !important;
      color: $text_color;
    }
  }

  .all-etf-ranking {
    margin-top: 10px;

    .title {
      font-weight: 700;
      padding: 0 12px;
    }

    .tabs {
      padding: 0 12px;
      margin-top: 10px;
      // height: 40px;
      min-height: 40px;
      line-height: 24px;
      color: #BBBCBD;
      width: 280px;

      .tab-item {
        margin: 4px;
        text-align: center;
        padding: 4px 6px;
        font-size: 12px;
        color: $text_color5;
        background: $US_tab_background;
        border-radius: 10px;
        background-size: cover;
      }

      .active {
        font-weight: 700;
        color: $color_main !important;
        background: $US_tabActice_background;
        border-radius: 10px;
        background-size: cover;
      }
    }

    .etf-table {
      .right {
        text-align: right;
      }

      ul {
        margin-top: 10px;
      }

      .title-line {
        color: #747A8F;
        font-size: 12px;
        font-weight: 400;
        padding: 0 12px;
        border: none;
      }

      li {
        padding: 14px 12px;
        display: flex;
        font-size: 12px;
        line-height: 18px;
        border-bottom: 1px solid $border_color;

        .gray-text {
          color: #BCBDC2;
          font-size: 12px;
        }

        .flex-l {
          width: 100px;
        }

        .flex-r {
          display: inline-flex;
          flex: 1;

          .flex-r-item {
            flex: 1;
            align-self: center;
            text-align: center;
          }
        }
      }
    }
  }

  .f10-container {
    .title {
      margin: 16px 0;
      padding-bottom: 10px;
      border-bottom: 1px solid $border_color;
    }

    .tabs {
      margin-top: 10px;
      height: 40px;
      line-height: 24px;
      color: #BBBCBD;
      width: 120px;

      .tab-item {
        margin: 4px;
        text-align: center;
        padding: 4px 6px;
        font-size: 12px;
        font-weight: 700;
        color: $color_main !important;
        background: $US_tabActice_background;
        border-radius: 10px;
        background-size: cover;
      }
    }

    .value-container {
      margin-top: 10px;
      border: none;
    }

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

    .flex-r-item {
      li {
        display: flex;
        justify-content: space-between;
        line-height: 28px;
      }
    }

    .flex-r-item:first-child {
      margin-right: 40px;
    }

  }

  .footer-btn-group {
    position: fixed;
    z-index: 10;
    left: 0;
    right: 0;
    // bottom: 0px;
    // background: $black;
    height: 70px;
    width: 100%;
    justify-content: center;

    .exchangeRate-box {
      padding-right: 25px;
    }

    .flex-l {
      text-align: center;

      .rate {
        font-size: 12px;
      }

      img {
        width: 22px;
        height: 22px;
        margin: 0 auto;
      }
    }

    .flex-r {
      display: flex;
      justify-content: flex-end;
      color:#fff;

      .sell-btn,
      .buy-btn {
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        width: 140px;
        height: 36px;
        line-height: 36px;
      }

      .sell-btn {
        background: $red;
      }

      .buy-btn {
        background: #3a7ff6;
        margin-right: 20px;
      }
    }
  }
}

.collected-img {
  width: 30px !important;
  height: 20px !important;
}      
</style>

 src/views/language/index.vue

@@ -5,7 +5,7 @@
        {{ $t('setLanguage') }}
      </template>
    </fx-header>
    <div v-for="(item, index) in lang" :key="index" class="lang-padding" @click="handleSetLang(item.key)">
    <div v-for="(item, index) in lang" :key="index" class="lang-padding" @click="handleSetLang(item.key,item.title)">
      <div class="lang-title flex items-center font-13 textColor">
        <img class="h-6 mr-3" :src="item.image" alt="">
        {{ item.title }}
@@ -41,9 +41,9 @@
onMounted(() => {
  console.log(locale.value)
})
const handleSetLang = (lang) => {
const handleSetLang = (lang, tit) => {
  locale.value = lang
  languageStore[SET_LANGUAGE](lang)
  languageStore[SET_LANGUAGE](lang,tit)
}

</script>

 src/views/my/newindex.vue

@@ -8,25 +8,26 @@
        <div class="flex">
          <div class="text-10">ID: {{userStore.userInfo.usercode}}</div>
        </div>
        <div class="text-10 block">信用分: 100</div>
        <!-- <div class="text-10 block">信用分: 100</div> -->
      </div>
    </div>

    <!-- 账户详情部分 -->
    <div class="mt-20 px-17">
      <div class="text-22 font-medium">帳戶詳情</div>
      <div class="text-22 font-medium">{{ t('账号') }} {{ t('详情') }}</div>
      <div class="mt-15 p-15 rounded-15 bg-#f5f7f9">
        <div 
          v-for="(item, index) in accountItems" 
          :key="index"
          class="flex items-center justify-between"
          class="flex items-center justify-between text-16"
          :class="{'mt-15': index > 0}"
           @click="onRoute(item.path)"
        >
          <div class="flex items-center" @click="onRoute(item.path)">
          <div class="flex items-center">
            <img :src="`${item.icon}`" class="w-20 h-20">
            <div class="ml-10">{{ item.title }}</div>
          </div>
          <div v-if="item.status" class="text-gray-400 text-12 py-5">
          <div v-if="item.status" class="text-gray-400 text-14 py-5">
            {{ item.status }}
          </div>
          <div v-else class="i-material-symbols:arrow-right-rounded text-20 text-gray-400">
@@ -38,19 +39,20 @@

     <!-- 帮助和支持部分 -->
     <div class="mt-20 px-17">
      <div class="text-22 font-medium">幫助和支持</div>
      <div class="text-22 font-medium">{{ t('帮助')}}</div>
      <div class="mt-15 p-15 rounded-15 bg-#f5f7f9">
        <div 
          v-for="(item, index) in helpItems" 
          :key="index"
          class="flex items-center justify-between"
          class="flex items-center justify-between text-16"
          :class="{'mt-15': index > 0}"
          @click="onRoute(item.path)"
        >
          <div v-if="item.button" class="flex items-center" @click="loginOut">
            <img :src="`${item.icon}`" class="w-20 h-20">
            <div class="ml-10">{{ item.title }}</div>
          </div>
          <div v-else class="flex items-center" @click="onRoute(item.path)">
          <div v-else class="flex items-center">
            <img :src="`${item.icon}`" class="w-20 h-20">
            <div class="ml-10">{{ item.title }}</div>
          </div>
@@ -81,29 +83,31 @@

const router = useRouter()
const userStore = useUserStore()
const status = ref(null)
const status = ref([t('未认证'),t("审核中"),t("已认证"),t("审核未通过")])
const kycHighStatus = ref(null)
// kyc_status

// 账户详情选项数据
const accountItems = ref([
  // { icon: 'icon-option.png', title: '貨幣訂單' , path: '/position/index'},
  { icon: new URL('../../assets/img/icon-option.png', import.meta.url), title: '現貨訂單' , path: '/position/index'},
  { icon: new URL('../../assets/img/icon-option.png', import.meta.url), title: '帳單' , path:'/cryptos/accountChange'},
  { icon: new URL('../../assets/img/icon-wallet.png', import.meta.url), title: '錢包', path: '/payMentMethod/list'},
  { icon: new URL('../../assets/img/icon-real.png', import.meta.url), title: '實名認證', status: '未認證' , path: '/certificationCenter'},
  { icon: new URL('../../assets/img/icon-small-language.png', import.meta.url), title: '語言', status: '中文繁體', path: '/language' },
  { icon: new URL('../../assets/img/icon-small-password.png', import.meta.url), title: '修改密碼', path: '/changePassword'},
  { icon: new URL('../../assets/img/icon-small-password.png', import.meta.url), title: '修改提現密碼', path: '/changeFundsPassword' } 
  { icon: new URL('../../assets/img/icon-option.png', import.meta.url), title: t('现货订单') , path: '/position/index'},
  { icon: new URL('../../assets/img/icon-option.png', import.meta.url), title: t('账变记录') , path:'/cryptos/accountChange'},
  { icon: new URL('../../assets/img/icon-wallet.png', import.meta.url), title: t('银行卡'), path: '/payMentMethod/list'},
  { icon: new URL('../../assets/img/icon-real.png', import.meta.url), title: t('实名认证'), status: status.value[userStore.userInfo.kyc_status] , path: '/certificationCenter'},
  { icon: new URL('../../assets/img/icon-small-language.png', import.meta.url), title: t('语言'), status: JSON.parse(localStorage.getItem('lang_tit')), path: '/language' },
  { icon: new URL('../../assets/img/icon-small-password.png', import.meta.url), title: t('修改密码'), path: '/changePassword'},
  { icon: new URL('../../assets/img/icon-small-password.png', import.meta.url), title: t('修改资金密码'), path: '/changeFundsPassword' } 
]);

// 帮助和支持选项数据
const helpItems = ref([
  // { icon: 'icon-market.png', title: '市場模式' },
  { icon: new URL('../../assets/img/icon-service.png', import.meta.url), title: '線上客服', path: '/customerService' },
  // 客服
  { icon: new URL('../../assets/img/icon-service.png', import.meta.url), title: t('onLineService'), path: '/customerService' },
  // { icon: 'icon-service.png', title: '專屬客服' },
  { icon: new URL('../../assets/img/icon-about.png', import.meta.url), title: '關於我們', path: '/aboutUs' },
  { icon: new URL('../../assets/img/icon-about.png', import.meta.url), title: t('关于我们'), path: '/aboutUs' },
  // { icon: 'icon-logout.png', title: '下載 APP' },
  { icon: new URL('../../assets/img/icon-logout.png', import.meta.url), title: '註銷', button: true  }
  { icon: new URL('../../assets/img/icon-logout.png', import.meta.url), title: t('退出'), button: true  }
]);

const state = reactive({

 src/views/news/index.vue

@@ -30,7 +30,7 @@

  <!-- 热门货币卡片部分 -->
  <div class="mt-10">
    <div class="block text-22 font-medium px-17">熱門</div>
    <div class="block text-22 font-medium px-17">{{ t('热门') }}</div>
    <div class="flex overflow-x-auto mt-10 px-17">
      <!-- DOGE/USDT 卡片 -->
      <div class="w-140 h-160 mr-10 flex-none rounded-15 text-black" v-for="(item, index) in hotItems" :key="item"
@@ -61,25 +61,25 @@
      <div class="w-40 h-40 rounded-full flex items-center justify-center">
        <img class="w-33 h-33" src="@/assets/a.jpg" draggable="false">
      </div>
      <div class="text-center">理財</div>
      <div class="text-center">{{t('理財')}}</div>
    </div>
    <div class="flex-1 flex flex-col items-center">
      <div class="w-40 h-40 rounded-full flex items-center justify-center">
      <!-- <div class="w-40 h-40 rounded-full flex items-center justify-center">
        <img class="w-33 h-33" src="@/assets/c.jpg" draggable="false">
      </div>
      <div class="text-center">模拟交易</div>
      <div class="text-center">模拟交易</div> -->
    </div>
    <div class="flex-1 flex flex-col items-center" @click="copyInviteLink">
      <div class="w-40 h-40 rounded-full flex items-center justify-center">
        <img class="w-33 h-33" src="@/assets/d.jpg" draggable="false">
      </div>
      <div class="text-center">好友邀请</div>
      <div class="text-center">{{t('邀请好友')}}</div>
    </div>
  </div>

  <!-- 新手指南部分 -->
  <div class="mt-20 mx-17 h-50 rounded-5 bg-#d8f0dd font-500 flex items-center justify-between text-16 px-15" @click="goToExplanation">
    <span>新手指南</span>
    <span>{{t('新手')}}</span>
    <div class="i-material-symbols:arrow-right-alt-rounded text-20"></div>
  </div>

@@ -91,7 +91,7 @@

  <div class="mt-20">
    <div class="flex items-end justify-between px-17">
      <span class="block text-22 font-medium">新聞</span>
      <span class="block text-22 font-medium">{{t('news')}}</span>
    </div>
    <div class="px-17 mt-10">
      <!-- 新闻条目1 -->
@@ -99,13 +99,13 @@
        <div class="bg-#f5f7f9 py-12 px-15 " @click="openOriginUrl(t.originUrl)">
          <div class="flex" style="border-bottom: 1px solid rgb(209, 209, 209);">
            <div class="text-12 h-70 flex-1 line3">{{ t.description }}</div>
            <img class="w-90 h-55 flex-none rounded-10 ml-10"
            <!-- <img class="w-90 h-55 flex-none rounded-10 ml-10"
              :src="t.img"
              draggable="false">
              draggable="false"> -->
          </div>
          <div class="mt-5 text-10 text-#8c8c8c flex justify-between">
            <span>{{t.createTime}}</span>
            <div>全球股市</div>
            <!-- <div>全球股市</div> -->
          </div>
        </div>
      </div>

 src/views/optional/index.vue

@@ -1,17 +1,17 @@
<template>
<div class="status_bar">
  <div class="my-20 mx-17 h-172 box-border text-white pt-40 px-20 bgimglx">
    <div class="text-17 font-medium block">帳戶總金額</div>
    <div class="text-17 font-medium block">{{ t('总额') }}</div>
    <div class="text-34 font-medium block">{{symbol}}</div>
    <div class="flex items-center mt-20">
      <div class="flex items-center rounded-14 bg-#3640f0 px-10">
        <div class="text-13 font-bold">儲值</div>
        <div class="text-13 font-bold">{{ t('充值') }}</div>
      </div>
      <div class="flex items-center rounded-14 bg-#3640f0 px-10 ml-10">
        <div class="text-13 font-bold">提現</div>
        <div class="text-13 font-bold">{{ t('提现') }}</div>
      </div>
      <div class="flex items-center rounded-14 bg-#3640f0 px-10 ml-10">
        <div class="text-13 font-bold">兌換</div>
        <div class="text-13 font-bold">{{ t('兑换') }}</div>
      </div>
      <div class="flex flex-1 justify-end">
        <img src="@/assets/imgs/icon-order.png" class="w-14 h-15" draggable="false">
@@ -34,15 +34,15 @@
    </div>
    <div class="text-12 pt-10">
      <div class="flex justify-between items-center">
        <div style="color: rgb(150, 150, 150);">可用({{ currency.name }})</div>
        <div style="color: rgb(150, 150, 150);">{{t('可用')}}({{ currency.name }})</div>
        <div class="title text-blue-600">{{ currency.mark_price }}</div>
      </div>
      <div class="my-16 flex justify-between items-center">
        <div style="color: rgb(150, 150, 150);">處理中({{ currency.name }})</div>
        <div style="color: rgb(150, 150, 150);">{{ t('处理中') }}({{ currency.name }})</div>
        <div>{{ 0 }}</div>
      </div>
      <div class="flex justify-between items-center">
        <div style="color: rgb(150, 150, 150);">轉換(USDT)</div>
        <div style="color: rgb(150, 150, 150);">{{ t('转换') }}(USDT)</div>
        <div></div>
      </div>
    </div>
@@ -56,6 +56,8 @@
<script setup>
import { ref, onMounted } from 'vue';
import { _getContractBySymbolType, _contractOrder } from '@/service/etf.api';
import { useI18n } from "vue-i18n";
const { t } = useI18n()


onMounted(() => {

 src/views/quotes/ConstituentDetail.vue

@@ -724,7 +724,7 @@
      }

      .buy-btn {
        background: #5BB989;
        background: #3a7ff6;
        margin-right: 20px;
      }
    }

 src/views/quotes/Detail.vue

@@ -1053,7 +1053,7 @@
      }

      .buy-btn {
        background: #5BB989;
        background: #3a7ff6;
        margin-right: 20px;
      }
    }

 src/views/usStock/ConstituentDetail.vue

@@ -705,7 +705,7 @@
      }

      .buy-btn {
        background: #5BB989;
        background: #3a7ff6;
        margin-right: 20px;
      }
    }

 src/views/usStock/Detail.vue

@@ -1029,7 +1029,7 @@
      }

      .buy-btn {
        background: #5BB989;
        background: #3a7ff6;
        margin-right: 20px;
      }
    }

 tailwind.config.cjs

@@ -14,8 +14,8 @@
        gray: '#333333', // 文字颜色
        'btn-gray': '#F1F3F9', // 背景灰
        'bd-gray': '#C3C4CD', // 下单border
        up: '#06CDA5',  // 升
        down: '#F43368' // 降
        up: '#3a7ff6',  // 升
        down: '#de5d56' // 降
      }
    },
  },