style

lxf

2025-07-08 b37eef5a0807a8f5688e2112591cb80a3ba333e4

 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"
@@ -45,7 +45,7 @@
            </div>
          </div>
          <div class="flex justify-between">
            <div class="py-2 px-8 rounded-full text-13 font-medium bg-white">{{item.change_ratio}}</div>
            <div class="py-2 px-8 rounded-full text-13 font-medium bg-white">{{item.change_ratio_str}}</div>
            <span class="text-18">→</span>
          </div>
        </div>
@@ -61,25 +61,31 @@
      <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="flex-1 flex flex-col items-center" @click="goToPage('/cryptos/trade/USDSGD')">
      <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">{{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">
        <img class="w-33 h-33" src="@/assets/c.jpg" draggable="false">
      </div>
      <div class="text-center">{{t('外汇交割')}}</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 +97,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 +105,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>
@@ -121,6 +127,8 @@
import { showToast } from 'vant'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { _getCoinList } from '@/service/quotes.api'
import { setStorage } from '@/utils/index'
const router = useRouter()

const { t } = useI18n()
@@ -138,6 +146,10 @@
  console.log('user', user)
  username.value = user.userInfo?.username || ''
  usercode.value = user.userInfo?.usercode || ''

  // 如果本地没有 coins，拉取接口
  const quotesData = await _getCoinList()
  setStorage('qoutes', { coins: quotesData }) // 存到本地
})

const goToExplanation = () => {