style

lxf

2025-07-02 7a52988eb65d0e50cc56e9da8e0088dfc5f9e416

 src/views/news/index.vue

@@ -1,13 +1,13 @@
<template>
  <section class="inner-tab-container">
    <p class="title">{{ t('news') }}</p>
    <div class="news-container">
      <van-steps direction="vertical" :active="0" active-color="#fff">
        <van-step v-for="(item, index) in list" :key="item.uuid || index">
  <!-- <section class="inner-tab-container"> -->
  <!-- <p class="title">{{ t('news') }}</p> -->
  <!-- <div class="news-container"> -->
  <!-- <van-steps direction="vertical" :active="0" active-color="#fff"> -->
  <!-- <van-step v-for="(item, index) in list" :key="item.uuid || index">
          <p class="time">{{ item.createTime }}</p>
          <p class="context">{{ item.description }}</p>
        </van-step>
        <!-- <van-step>
        </van-step> -->
  <!-- <van-step>
          <p class="time">2023-06-15 11:30</p>
          <p class="context">南非汇市：兰特兑美元走高，美国通胀报告发布后美元跌至约两周地点</p>
        </van-step>
@@ -15,22 +15,141 @@
          <p class="time">2023-06-14 14:20</p>
          <p class="context">降息预期遭重挫败！CPI环比增速抬头 美联储抗通胀之路注定崎岖</p>
        </van-step> -->
      </van-steps>
  <!-- </van-steps> -->
  <!-- </div> -->
  <!-- </section> -->
  <!-- 顶部用户信息栏 -->
  <div class="flex items-center justify-between px-17 pt-10">
    <div class="text-20 font-bold">{{ username }}</div>
    <div class="flex items-center" @click="goToCustomerService">
      <img class="w-30 h-30" src="@/assets/image/service.png" draggable="false">
      <div class="w-45 h-45 rounded-full ml-12"></div>
    </div>
  </section>
  </div>


  <!-- 热门货币卡片部分 -->
  <div class="mt-10">
    <div class="block text-22 font-medium px-17">熱門</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"
        :class="index % 2 === 1 ? 'bg-#9f9cff' : 'bg-#d8f0dd'">
        <div class="py-17 px-13">
          <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>
          </div>
          <div class="flex justify-between">
            <div class="py-2 px-8 rounded-full text-13 font-medium bg-white">{{item.change_ratio}}</div>
            <span class="text-18">→</span>
          </div>
        </div>
      </div>

      <!-- 其他货币卡片保持相同转换模式... -->
    </div>
  </div>

  <!-- 底部导航图标 -->
  <div class="flex justify-between text-12 mt-20">
    <div class="flex-1 flex flex-col items-center" @click="goToPage('/mining')">
      <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>
    <div class="flex-1 flex flex-col items-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>
    <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>
  </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>
    <div class="i-material-symbols:arrow-right-alt-rounded text-20"></div>
  </div>







  <div class="mt-20">
    <div class="flex items-end justify-between px-17">
      <span class="block text-22 font-medium">新聞</span>
    </div>
    <div class="px-17 mt-10">
      <!-- 新闻条目1 -->
      <div class="rounded-5 overflow-hidden mb-10" v-for="(t , i) in list" :key="t.dataId" >
        <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"
              :src="t.img"
              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>
</template>
    
<script setup>
import { ref, onMounted } from 'vue';
import { _getInformationList } from '@/service/etf.api'
import {_getHomeList} from '@/service/cryptos.api'
import { showToast } from 'vant'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
const router = useRouter()

const { t } = useI18n()
const list = ref([])
const hotItems = ref([]) // 热门
const username = ref('')
const usercode = ref('')

onMounted(async () => {
  getInformationList()
  getHomeList()

  // 从localStorage获取用户信息
  const user = JSON.parse(localStorage.getItem('user'))
  console.log('user', user)
  username.value = user.userInfo?.username || ''
  usercode.value = user.userInfo?.usercode || ''
})

const goToExplanation = () => {
  goToPage('/news/explanation')
}
// 点击客服图标
const goToCustomerService = () => {
  goToPage('/customerService')
}
const goToPage = (path) => {
  router.push(path)
}

const getInformationList = () => {
  _getInformationList().then(data => {
@@ -38,58 +157,38 @@
  })
}

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

// 添加跳转方法
const openOriginUrl = (url) => {
  window.open(url, '_blank')
}

const copyInviteLink = () => {
  const inviteLink = 'https://www.thinkmarketga.com/#/pages/register?c=' + usercode.value // 替换为你的实际邀请链接
  navigator.clipboard.writeText(inviteLink)
    .then(() => {
      // 可以添加提示，比如使用Toast组件
      showToast({
        message: '邀请链接已复制',
        position: 'bottom',
      })
    })
}

</script>
<style lang="scss" scoped>
:deep(.van-steps) {
  background: $selectSymbol_background;
@import '@/assets/css/deepseek_css_20250625_30ff932.css';

  .van-step__title {
    color: $text_color;

    .time {
      color: #747A8F;
      margin: 5px 0;
    }

  }

  .van-step__line {
    background-color: $border_color;
  }

  .van-icon-checked::before {
    content: '';
    background-color: #3478F6;
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0px 4px #15284F;
    border-radius: 50%;
  }

  .van-step__circle {
    background-color: #3478F6;
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0px 4px #15284F;
  }

  .van-step--vertical:not(:last-child):after {
    border-bottom-width: 1px;
    border-color: $border_color;
  }
}

.inner-tab-container {
  margin-top: 8px;
  padding: 0 12px 60px;

  .title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .news-container {}
.line3{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>