style

lxf

2025-07-09 2eb4dd6f50b75c9ec844d08eded5365cd79e4207

style

 src/assets/imgs/footer/history-unselect.png

 src/assets/imgs/footer/home-select.png

 src/assets/imgs/footer/home-unselect.png

 src/assets/imgs/footer/mine-select.png

 src/assets/imgs/footer/mine-unselect.png

 src/assets/imgs/footer/position-select.png

 src/assets/imgs/footer/position-unselect.png

 src/assets/imgs/footer/quotes-select.png

 src/assets/imgs/footer/quotes-unselect.png

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

@@ -20,12 +20,12 @@
      <div class="flex items-end justify-between" style="margin: 14px 0;">
        <div class="block text-22 font-medium" >{{$t('Market')}}</div>
        <div class="relative text-13" @click="toggleDropdown">
          <div class="flex px-20 justify-between rounded-full bg-black text-white min-w-100 box-border">
          <div class="flex px-20 justify-between rounded-full bg-black text-white min-w-140 box-border">
            <div class="block">{{ $t(topTitle) }}</div>
            <van-icon name="play" style="align-content:center;transform: rotate(90deg);"/>
          </div>
          <div class="px-16 py-20 bg-black text-white flex flex-col absolute min-w-100 box-border top-25 rounded-11 leading-28" style="z-index:999;margin-top: 0.8rem;" v-show="isTopShow">
            <div @click="changeType('币币交易', 1)">{{ $t('币币交易') }}</div>
          <div class="px-16 py-20 bg-black text-white flex flex-col absolute min-w-140 box-border top-25 rounded-11 leading-28" style="z-index:999;margin-top: 0.8rem;" v-show="isTopShow">
            <div @click="changeType('外汇交易', 1)">{{ $t('外汇交易') }}</div>
            <div @click="changeType('外汇交割', 2)">{{ $t('外汇交割') }}</div>
            <!-- <div>期貨</div>
            <div>收藏</div> -->
@@ -41,7 +41,7 @@
              <li class="flex items-center left">
                <img
                  :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol_data}.png` : handleImage('../../../assets/loading-default.png')"
                  alt="logo" class="w-72 h-72 rounded-full mr-16" />
                  alt="logo" class="w-72 h-72 mr-16" />
                <p class="flex flex-col">
                  <span class="flex items-end font-32 flex items-center">
                    <span class="textColor font-600 font-30">{{ item.name || '--'
@@ -52,7 +52,7 @@
                    <!-- <span class="font-24 text-grey" style="position: relative; top: 1px">
                      {{ item.name && item.name.replace(item.symbol.toUpperCase(), '') || '--' }}</span> -->
                  </span>
                  <span class="font-24 text-grey text-left">{{ $t('成交量') + ' ' + (item.amount * 1).toFixed(2) }}</span>
                  <span class="font-24 text-grey text-left">{{ (item.amount * 1).toFixed(2) }}</span>
                </p>
              </li>
              <li class="flex flex-col items-end mid">
@@ -75,7 +75,7 @@
            <ul class="flex justify-between w-full items-center" @click="onItemClick(item)">
              <li class="flex items-center left">
                <img :src="`${HOST_URL}/symbol/${item.symbol_data}.png`" alt="logo"
                  class="w-72 h-72 rounded-full mr-16" />
                  class="w-72 h-72 mr-16" />
                <p class="flex flex-col">
                  <span class="flex items-end font-32 flex items-center">
                    <span class="textColor font-600 font-30">{{ item.symbol_data && item.symbol_data.toUpperCase() || '--'
@@ -133,7 +133,7 @@
      HOST_URL,
      active: 0,
      isTopShow: false,
      topTitle: '币币交易',
      topTitle: '外汇交易',
      topValue: 1,
      type: 'left' //left 从左往右 right 从有王座
    }

 src/components/add-currency/index.vue

@@ -1,6 +1,6 @@
<template>
  <van-popup v-model:show="showLeft" closeable position="left"
    :style="{ width: '75%', height: '100%', background: 'rgb(31, 35, 61)' }">
    :style="{ width: '75%', height: '100%'}">
    <div class="main">
      <div class="title">{{ t('selectombination') }}</div>
      <div class="list">

 src/components/fx-footer/index.vue

@@ -3,13 +3,13 @@
    <!-- 底部 bar -->
    <van-tabbar route v-model="active" active-color="#1194F7" @change="changeIndex" fixed safe-area-inset-bottom>
      <van-tabbar-item name="news" to="/news">
        <span :class="[active === 'news' ? 'active' : '']">{{ $t('首页') }}</span>
        <span :class="[active === 'news' ? 'active' : 'cor_t1']">{{ $t('首页') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.news.active : icon.news.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="quotes" to="/quotes">
        <span :class="[active === 'quotes' ? 'active' : '']">{{ $t('quotes') }}</span>
        <span :class="[active === 'quotes' ? 'active' : 'cor_t1']">{{ $t('quotes') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.quotes.active : icon.quotes.inactive" />
        </template>
@@ -28,7 +28,7 @@
        </template>
      </van-tabbar-item> -->
      <van-tabbar-item name="optional" to="/optional">
        <span :class="[active === 'optional' ? 'active' : '']">{{ $t('资产') }}</span>
        <span :class="[active === 'optional' ? 'active' : 'cor_t1']">{{ $t('资产') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.optional.active : icon.optional.inactive" />
        </template>
@@ -41,7 +41,7 @@
        </template>
      </van-tabbar-item> -->
      <van-tabbar-item name="mine" to="/my">
        <span :class="[active === 'mine' ? 'active' : '']">{{ $t('my') }}</span>
        <span :class="[active === 'mine' ? 'active' : 'cor_t1']">{{ $t('my') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.mine.active : icon.mine.inactive" />
        </template>
@@ -100,28 +100,28 @@
// 底部列表
const icon = {
  optional: {
    active: new URL('@/assets/imgs/footer/optional-active.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/optional.png', import.meta.url),
    active: new URL('@/assets/imgs/footer/position-select.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/position-unselect.png', import.meta.url),
  },
  quotes: {
    active: new URL('@/assets/imgs/footer/quotes-active.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/quotes.png', import.meta.url),
    active: new URL('@/assets/imgs/footer/quotes-select.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/quotes-unselect.png', import.meta.url),
  },
  news: {
    active: new URL('@/assets/imgs/footer/news-active.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/news.png', import.meta.url),
    active: new URL('@/assets/imgs/footer/home-select.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/home-unselect.png', import.meta.url),
  },
  trade: {
    active: new URL('@/assets/imgs/footer/trade-active.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/trade.png', import.meta.url),
    active: new URL('@/assets/imgs/footer/position-select.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/position-unselect.png', import.meta.url),
  },
  // funds: {
  //   active: new URL('@/assets/imgs/footer/funds-active.png', import.meta.url),
  //   inactive: new URL('@/assets/imgs/footer/funds.png', import.meta.url),
  // },
  mine: {
    active: new URL('@/assets/imgs/footer/menu-active.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/menu.png', import.meta.url),
    active: new URL('@/assets/imgs/footer/mine-select.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/mine-unselect.png', import.meta.url),
  }
}
const changeIndex = (index) => {
@@ -155,7 +155,10 @@
}

.active {
  color: $blue !important;
  color: #000 !important;
}
.cor_t1{
  color: #333;
}

.footer {

 src/views/cryptos/AccountChange/index.vue

@@ -9,16 +9,16 @@
            :finished-text="list.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="130" class="pt-10 px-17" style="background: #fff;">
              <div class="p-15 bg-#f5f7f9 rounded-10 mb-10" v-for="(item, index) in list" :key="index">
                <div class="flex justify-between">
                  <span class="text-13 text-#8c8c8c">金額</span>
                  <span class="text-11 text-green">{{item.amount }}&nbsp;{{ item.wallet_type.toUpperCase() }}</span>
                  <span class="text-16 text-#8c8c8c">{{ $t('金额') }}</span>
                  <span class="text-14 text-green">{{item.amount }}&nbsp;{{ item.wallet_type.toUpperCase() }}</span>
                </div>
                <div class="flex justify-between py-5">
                  <span class="text-13 text-#8c8c8c">分類</span>
                  <span class="text-11">{{category[item.category]}}</span>
                  <span class="text-16 text-#8c8c8c">{{ $t('类型') }}</span>
                  <span class="text-14">{{category[item.category]}}</span>
                </div>
                <div class="flex justify-between">
                  <span class="text-13 text-#8c8c8c">日期</span>
                  <span class="text-11">{{ item.createTime }}</span>
                  <span class="text-16 text-#8c8c8c">{{ $t('日期') }}</span>
                  <span class="text-14">{{ item.createTime }}</span>
                </div>
              </div>
              <!-- <div class="flex items-center">

 src/views/cryptos/TrendDetails/index.vue

@@ -443,7 +443,7 @@
        })
        return
      } else {
        this.$router.push(`/cryptos/perpetualContract/${this.symbol}`)
        this.$router.push(`/cryptos/perpetualContract/${this.symbol}?type=cryptos&selectIndex=2`)
      }
    },
    onClose() {

 src/views/news/explanation.vue

@@ -4,7 +4,7 @@
    <div class="status_bar fixed w-full top-0 left-0 h-44 flex items-center justify-between bg-white">
      <div class="i-material-symbols:arrow-back-ios-new-rounded text-black ml-13 text-18"></div>
      <div class="absolute top-0 left-0 w-full h-44 flex items-center justify-center z--1">
        <div class="text-19 font-medium">新手指南</div>
        <div class="text-19 font-medium">{{t('新手')}}指南</div>
      </div>
    </div>
    
@@ -12,7 +12,7 @@
    <div class="h-44"></div>
    
    <!-- 内容区域 -->
    <div class="p-15 text-16">
    <div class="p-15 text-16" v-if="lang === 'zh-CN'">
      <h2>產品詳情</h2>
      <p>1 用戶可以隨時查看股票、數位貨幣、期貨價格，線上交易更安全。</p>
      <p>2 提供使用者最專業的K線，深度分析市場行情，為使用者投資提供參考。</p>
@@ -55,7 +55,9 @@
</template>

<script setup>
// 可以在这里添加需要的逻辑
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>

<style scoped>

 src/views/news/index.vue

@@ -39,14 +39,16 @@
          <div class="font-bold block text-18">{{ item.name }}</div>
          <div class="font-bold block text-20">{{ item.ask }}</div>
          <div class="w-full h-50">
            <div id="DOGEUSDT" class="w-full h-full"
              style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
              <!-- 图表容器保持不变 -->
            <div id="DOGEUSDT" class="w-full h-full relative overflow-hidden" 
                style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);margin: 0 10px;">
              <!-- 添加进度条动画 -->
              <div class="absolute top-10 left-0 h-1 bg-blue-500 progress-bar-animation" 
                  :style="{width: '80%'}"></div>
            </div>
          </div>
          <div class="flex justify-between">
            <div class="py-2 px-8 rounded-full text-13 font-medium bg-white">{{item.change_ratio_str}}</div>
            <span class="text-18">→</span>
            <span class="text-18" :class="index % 2 === 1 ? 'c2c_color' : ''">→</span>
          </div>
        </div>
      </div>
@@ -67,7 +69,7 @@
      <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">{{t('币币交易')}}</div>
      <div class="text-center">{{t('外汇交易')}}</div>
    </div>
    <div class="flex-1 flex flex-col items-center" @click="goToPage('/cryptos/perpetualContract/USDSGD?selectIndex=2')">
      <div class="w-40 h-40 rounded-full flex items-center justify-center">
@@ -86,7 +88,7 @@
  <!-- 新手指南部分 -->
  <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>{{t('新手')}}</span>
    <div class="i-material-symbols:arrow-right-alt-rounded text-20"></div>
    <div class="text-20">→</div>
  </div>


@@ -121,7 +123,7 @@
</template>
    
<script setup>
import { ref, onMounted } from 'vue';
import { ref, onMounted, onUnmounted } from 'vue';
import { _getInformationList } from '@/service/etf.api'
import {_getHomeList} from '@/service/cryptos.api'
import { showToast } from 'vant'
@@ -169,11 +171,38 @@
  })
}


const getHomeList = () => {
  _getHomeList().then(data => {
    hotItems.value = data.slice(0, 3) // 取前3条数据
  const intervalId = ref(null)
  if (intervalId.value) {
    clearInterval(intervalId.value)
  }

  const fetchData = () => {
    _getHomeList().then(data => {
      hotItems.value = data.slice(0, 3) // 取前3条数据
    })
  }
 
  // 立即执行一次
  fetchData()
  
  intervalId.value = setInterval(fetchData, 1000)
  
  onUnmounted(() => {
    if (intervalId.value) {
      clearInterval(intervalId.value)
    }
  })

  router.beforeEach((to, from, next) => {
    if (from.path === '/news/index') {
      clearInterval(intervalId.value)
    }
    next()
  })
}


// 添加跳转方法
const openOriginUrl = (url) => {
@@ -181,7 +210,7 @@
}

const copyInviteLink = () => {
  const inviteLink = 'https://www.thinkmarketga.com/#/pages/register?c=' + usercode.value // 替换为你的实际邀请链接
  const inviteLink = 'https://www.thinkmarketga.com/#/pages/register?c=' + usercode.value // 邀请链接
  navigator.clipboard.writeText(inviteLink)
    .then(() => {
      // 可以添加提示，比如使用Toast组件
@@ -203,4 +232,22 @@
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress-bar-animation {
  animation: progress 1.5s ease-in-out forwards;
  transform-origin: left;
}

@keyframes progress {
  // 0% {
  //   transform: scaleX(0);
  // }
  // 100% {
  //   transform: scaleX(1);
  // }
}

.c2c_color{
  color: #fff;
}
</style>

 src/views/position/newindex.vue

@@ -6,20 +6,20 @@
      <div class="px-17"></div>
      
      <div class="status_bar absolute top-0 left-0 w-full h-44 flex items-center justify-center z--1">
        <div class="p-3 bg-#EEE rounded-full flex text-12 font-medium">
        <div class="p-3 bg-#EEE rounded-full flex text-15 font-medium">
          <span 
          class="block h-24 w-84.5 text-center leading-24 rounded-full cursor-pointer"
          :class="activeTab === 'position' ? 'bg-#3640f0 text-white' : ''"
          @click="switchTab('position')"
        >
          持倉
          {{ t('持仓') }}
        </span>
        <span 
          class="block h-24 w-84.5 text-center leading-24 rounded-full cursor-pointer"
          :class="activeTab === 'history' ? 'bg-#3640f0 text-white' : ''"
          @click="switchTab('history')"
        >
          歷史
          {{ t('历史') }}
        </span>
        </div>
      </div>
@@ -35,40 +35,40 @@
        class="py-20 px-15 rounded-15 bg-#f5f7f9 mb-10"
      >
        <div class="flex justify-between pb-10" style="border-bottom: 0.5px solid rgb(218, 218, 218);">
          <span class="font-medium text-15">{{ order.pair }}</span>
          <span class="font-medium text-18">{{ order.pair }}</span>
          <div class="text-end">
            <span class="font-medium">{{ order.price }}<br></span>
            <span class="text-11 font-medium" :class="order.type === 'sell' ? 'text-red' : 'text-blue'">
              {{ order.type === 'sell' ? '拋售' : '購買' }}
            <span class="font-medium text-14">{{ order.price }}<br></span>
            <span class="text-14 font-medium" :class="order.type === 'sell' ? 'text-red' : 'text-blue'">
              {{ order.type === 'sell' ? t('卖出') : t('购买') }}
            </span>
          </div>
        </div>
        
        <div class="mt-10 text-11 text-#8c8c8c">
        <div class="mt-10 text-14 text-#8c8c8c">
          <div class="flex justify-between">
            <div class="flex-1 flex justify-between">
              <span>金額</span>
              <span>{{t('金额')}}</span>
              <span class="text-black">{{ order.amount }}</span>
            </div>
            <div class="flex-1 flex justify-between ml-30">
              <span>時長</span>
              <span>{{t('时间')}}</span>
              <span class="text-black">{{ order.duration }}</span>
            </div>
          </div>
          
          <div class="flex" v-if="activeTab === 'history'">
          <div class="flex text-14" v-if="activeTab === 'history'">
            <div class="flex justify-between mt-10 flex-1">
              <span>結算價格</span>
              <span>{{t('结算价格')}}</span>
              <span :class="order.profit >= 0 ? 'text-green' : 'text-red'">{{ order.settlePrice }}</span>
            </div>
            <div class="flex justify-between mt-10 flex-1 ml-30">
              <span>服務費</span>
              <span>{{t('服务费')}}</span>
              <span :class="order.profit >= 0 ? 'text-green' : 'text-red'">{{ order.fee }}</span>
            </div>
          </div>
          
          <div class="flex justify-between mt-10">
            <span>下單時間</span>
          <div class="flex justify-between mt-10 text-14">
            <span>{{t('订单时间')}}</span>
            <span class="text-black">{{ order.time }}</span>
          </div>
        </div>
@@ -76,7 +76,7 @@


      
      <div class="text-center py-20" style="color: rgb(167, 166, 166);">已全部載入···</div>
      <div class="text-center py-20 text-12" style="color: rgb(167, 166, 166);">{{ t('加载完毕') }}...</div>
    </div>
  </div>
</template>
@@ -104,39 +104,39 @@
const route = useRoute()

const orders = ref([
  {
    pair: 'USD/CNH',
    price: '7.31271',
    type: 'sell',
    amount: '10000',
    duration: '300s',
    settlePrice: '7.31225',
    fee: '300',
    profit: 1,
    time: '2024-12-23 15:56:57'
  },
  {
    pair: 'USD/CNH',
    price: '7.29718',
    type: 'sell',
    amount: '5000',
    duration: '300s',
    settlePrice: '7.29675',
    fee: '150',
    profit: 1,
    time: '2024-12-19 00:17:05'
  },
  {
    pair: 'USD/HKD',
    price: '7.76941',
    type: 'buy',
    amount: '10000',
    duration: '300s',
    settlePrice: '7.76899',
    fee: '-300',
    profit: -1,
    time: '2024-12-18 09:25:02'
  }
  // {
  //   pair: 'USD/CNH',
  //   price: '7.31271',
  //   type: 'sell',
  //   amount: '10000',
  //   duration: '300s',
  //   settlePrice: '7.31225',
  //   fee: '300',
  //   profit: 1,
  //   time: '2024-12-23 15:56:57'
  // },
  // {
  //   pair: 'USD/CNH',
  //   price: '7.29718',
  //   type: 'sell',
  //   amount: '5000',
  //   duration: '300s',
  //   settlePrice: '7.29675',
  //   fee: '150',
  //   profit: 1,
  //   time: '2024-12-19 00:17:05'
  // },
  // {
  //   pair: 'USD/HKD',
  //   price: '7.76941',
  //   type: 'buy',
  //   amount: '10000',
  //   duration: '300s',
  //   settlePrice: '7.76899',
  //   fee: '-300',
  //   profit: -1,
  //   time: '2024-12-18 09:25:02'
  // }
])
const activeTab = ref('position')
const switchTab = (tab) => {
@@ -154,7 +154,7 @@
    symbolType: 'forex'
  }
  contractOrder(obj).then((res) => {
    list.value = res.data
    orders.value = res.data
    // 处理历史订单数据...
  })
}