| | |
| | | <div id="cryptos" class="pt-10"> |
| | | <list-quatation :listData="qList" :tabShow="false" /> |
| | | </div> --> |
| | | <van-notice-bar text="通知内容" left-icon="volume" color="orange" background="white"/> |
| | | <van-notice-bar text="通知内容" left-icon="volume" color="orange" background="white" /> |
| | | <div style="margin: 0 10px"> |
| | | |
| | | <div class="flex-centerY"> |
| | | <div style="font-size: 16px;margin-right: 5px"> |
| | | <van-icon v-if="showMoney" @click="showMoney=!showMoney" name="browsing-history" /> |
| | | <van-icon v-else @click="showMoney=!showMoney" name="closed-eye" /> |
| | | <van-icon v-if="showMoney" @click="showMoney = !showMoney" name="browsing-history" /> |
| | | <van-icon v-else @click="showMoney = !showMoney" name="closed-eye" /> |
| | | </div> |
| | | <div style="font-size: 14px;color: black"> |
| | | {{$t("总资产")}}(USD) |
| | | {{ $t("总资产") }}(USD) |
| | | </div> |
| | | </div> |
| | | <div class="flex-centerY flex-position-between" style="margin-top: 15px"> |
| | | <div class="flex flex-justify-between"> |
| | | <div style="font-size: 33px;font-weight: bold;color: black"> |
| | | {{showMoney?myAssets.capital.toFixed(0):"*****" }} |
| | | </div> |
| | | <div style="font-size: 24px;font-weight: bold;color: black;margin-top: 3px"> |
| | | {{showMoney?myAssets.capital.toFixed(2).substring(myAssets.capital.toFixed(2).indexOf(".")):""}} |
| | | </div> |
| | | </div> |
| | | <div style="background: black;color: white;padding: 4px 17px;border-radius: 90px;font-size: 14px"> |
| | | {{$t("充值")}} |
| | | <div class="flex flex-justify-between"> |
| | | <div style="font-size: 33px;font-weight: bold;color: black"> |
| | | {{ showMoney ? todayMoney.money_contract : "*****" }} |
| | | </div> |
| | | </div> |
| | | <div style="background: black;color: white;padding: 4px 17px;border-radius: 90px;font-size: 14px" |
| | | @click="toPage('/cryptos/recharge/rechargeList?isForeign=true')"> |
| | | {{ $t("充值") }} |
| | | </div> |
| | | </div> |
| | | <div class="flex-centerY" style="font-size: 12px;color: #999;margin-top: 20px;"> |
| | | <div> |
| | | {{$t("今日盈亏")}} |
| | | {{ $t("今日盈亏") }} |
| | | </div> |
| | | <div style="margin-left: 15px"> |
| | | {{showMoney? todayMoney.money_contract_profit_today:"****"}} |
| | | {{ showMoney ? todayMoney.money_contract_profit_today : "****" }} |
| | | </div> |
| | | <div style="margin-left: 15px"> |
| | | {{showMoney?(Number(todayMoney.money_contract_profit_today+'')/(myAssets.capital==0?1:myAssets.capital)*100).toFixed(2)+'%':"****"}} |
| | | {{ showMoney ? (Number(todayMoney.money_contract_profit_today + '') / (todayMoney.money_contract == 0 ? 1 : |
| | | todayMoney.money_contract) * 100).toFixed(2) + '%' : "****" }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | <div style="position: relative;margin: 10px 00px;border-radius: 12px;border: 1px #eee solid"> |
| | | <!-- <van-notice-bar class="font-26 mt-10 index_notice" :scrollable="false" wrapable>--> |
| | | <!-- <van-notice-bar class="font-26 mt-10 index_notice" :scrollable="false" wrapable>--> |
| | | |
| | | <van-swipe @change="current=$event" indicator-color="#999" class="notice-swipe" :autoplay="2000" |
| | | :show-indicators="false" style="border-radius: 8px;overflow: hidden"> |
| | | <van-swipe-item v-for="item in announceList" style="border-radius: 8px;overflow: hidden;border: #eee 1px solid" :key="item.id" @click="toAnnounceDetail(item.uuid)"> |
| | | <!-- <div class="flex justify-start items-center">--> |
| | | <!-- <img :src="item.imgUrl" style="width:100%" alt="" class="notice_img mr-5">--> |
| | | <!--<!– <div class="notice_content textColor">–>--> |
| | | <!--<!– <div>{{ item.startTime }}</div>–>--> |
| | | <!--<!– <div>{{ item.title }}</div>–>--> |
| | | <!--<!– </div>–>--> |
| | | <!-- </div>--> |
| | | <img :src="item.imgUrl" alt="" class="notice_img mr-5" style="width:100%;height:100px;border-radius: 8px" > |
| | | </van-swipe-item> |
| | | </van-swipe> |
| | | <!-- </van-notice-bar>--> |
| | | <van-swipe @change="current = $event" indicator-color="#999" class="notice-swipe" :autoplay="2000" |
| | | :show-indicators="false" style="border-radius: 8px;overflow: hidden"> |
| | | <van-swipe-item v-for="item in announceList" style="border-radius: 8px;overflow: hidden;border: #eee 1px solid" |
| | | :key="item.id" @click="toAnnounceDetail(item.uuid)"> |
| | | <!-- <div class="flex justify-start items-center">--> |
| | | <!-- <img :src="item.imgUrl" style="width:100%" alt="" class="notice_img mr-5">--> |
| | | <!--<!– <div class="notice_content textColor">–>--> |
| | | <!--<!– <div>{{ item.startTime }}</div>–>--> |
| | | <!--<!– <div>{{ item.title }}</div>–>--> |
| | | <!--<!– </div>–>--> |
| | | <!-- </div>--> |
| | | <img :src="item.imgUrl" alt="" class="notice_img mr-5" style="width:100%;height:100px;border-radius: 8px"> |
| | | </van-swipe-item> |
| | | </van-swipe> |
| | | <!-- </van-notice-bar>--> |
| | | <div class="flex-center" style="position:absolute;bottom:5px;left:0;;z-index:999;width: 100%"> |
| | | <div v-for="(i,index) in announceList"> |
| | | <div v-if="current!=index" style="width:3px;height:3px;background:#bbb;margin-right:5px;border-radius: 3px"></div> |
| | | <div v-for="(i, index) in announceList"> |
| | | <div v-if="current != index" style="width:3px;height:3px;background:#bbb;margin-right:5px;border-radius: 3px"> |
| | | </div> |
| | | <div v-else style="width:3px;height:3px;background:#333;;margin-right:5px;border-radius: 3px"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- <div style="margin: 15 0px;align-items: stretch" class="flex-centerY">--> |
| | | <!-- <div class="flex-centerY" style="flex: 1;margin-right: 20px;border: #eee 1px solid;border-radius: 12px;padding: 10px 10px">--> |
| | | <!-- <div style="flex: 1" class="flexY">--> |
| | | <!-- <div style="font-size: 14px;color: black;font-weight: bold">--> |
| | | <!-- {{$t("信贷")}}--> |
| | | <!-- </div>--> |
| | | <!-- <div style="font-size: 12px;color: #999;flex: 1">--> |
| | | <!-- {{$t("低利率,彈性強,助您持續擁有資金")}}--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- <div >--> |
| | | <!-- <img src="../../assets/img/img_4.png" style="width: 55px;height: 55px">--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="flex-centerY" style="flex: 1;border: #eee 1px solid;border-radius: 12px;padding: 10px 10px">--> |
| | | <!-- <div style="flex: 1;height: 100%" class="flexY">--> |
| | | <!-- <div style="font-size: 14px;color: black;font-weight: bold">--> |
| | | <!-- {{$t("OTC")}}--> |
| | | <!-- </div>--> |
| | | <!-- <div style="font-size: 12px;color: #999;;flex: 1">--> |
| | | <!-- {{$t("200+支付方式")}}--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- <div >--> |
| | | <!-- <img src="../../assets/img/img_5.png" style="width: 55px;height: 55px">--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- <div style="margin: 15 0px;align-items: stretch" class="flex-centerY">--> |
| | | <!-- <div class="flex-centerY" style="flex: 1;margin-right: 20px;border: #eee 1px solid;border-radius: 12px;padding: 10px 10px">--> |
| | | <!-- <div style="flex: 1" class="flexY">--> |
| | | <!-- <div style="font-size: 14px;color: black;font-weight: bold">--> |
| | | <!-- {{$t("信贷")}}--> |
| | | <!-- </div>--> |
| | | <!-- <div style="font-size: 12px;color: #999;flex: 1">--> |
| | | <!-- {{$t("低利率,彈性強,助您持續擁有資金")}}--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- <div >--> |
| | | <!-- <img src="../../assets/img/img_4.png" style="width: 55px;height: 55px">--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="flex-centerY" style="flex: 1;border: #eee 1px solid;border-radius: 12px;padding: 10px 10px">--> |
| | | <!-- <div style="flex: 1;height: 100%" class="flexY">--> |
| | | <!-- <div style="font-size: 14px;color: black;font-weight: bold">--> |
| | | <!-- {{$t("OTC")}}--> |
| | | <!-- </div>--> |
| | | <!-- <div style="font-size: 12px;color: #999;;flex: 1">--> |
| | | <!-- {{$t("200+支付方式")}}--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- <div >--> |
| | | <!-- <img src="../../assets/img/img_5.png" style="width: 55px;height: 55px">--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <div class="tabs flex justify-start items-center textColor1"> |
| | | <div v-for="i in tabList" :key="i" :class="i.key == tab ? 'textColor' : ''" @click="tab = i.key" style="font-size: 16px;margin-top: 20px"> |
| | | <div v-for="i in tabList" :key="i" :class="i.key == tab ? 'textColor' : ''" @click="tab = i.key" |
| | | style="font-size: 16px;margin-top: 20px"> |
| | | {{ i.name }} |
| | | </div> |
| | | </div> |
| | | <div id="cryptos"> |
| | | <list-quatation :listData="qList" :tabShow="false" :tabActive="tab"/> |
| | | <list-quatation :listData="qList" :tabShow="false" :tabActive="tab" /> |
| | | </div> |
| | | |
| | | <div class="home_2" @click="toPage('/quotes/index')"> |
| | | {{ $t("更多") }} |
| | | <van-icon name="arrow-down"/> |
| | | <van-icon name="arrow-down" /> |
| | | </div> |
| | | |
| | | <div class="home_3 flex justify-start"> |
| | |
| | | <template #title> |
| | | <div class="flex justify-start items-center"> |
| | | <img src="@/assets/imgs/home/home_23a.png" alt="" class="border_icon" |
| | | v-if="storeS.state.vant.theme == 'light'"> |
| | | v-if="storeS.state.vant.theme == 'light'"> |
| | | <img src="@/assets/imgs/home/home_23b.png" alt="" class="border_icon" v-else> |
| | | {{ $t('公司') }} |
| | | </div> |
| | |
| | | <template #title> |
| | | <div class="flex justify-start items-center"> |
| | | <img src="@/assets/imgs/home/home_21a.png" alt="" class="border_icon" |
| | | v-if="storeS.state.vant.theme == 'light'"> |
| | | v-if="storeS.state.vant.theme == 'light'"> |
| | | <img src="@/assets/imgs/home/home_21b.png" alt="" class="border_icon" v-else> |
| | | {{ $t('法律') }} |
| | | </div> |
| | |
| | | <template #title> |
| | | <div class="flex justify-start items-center"> |
| | | <img src="@/assets/imgs/home/home_22a.png" alt="" class="border_icon" |
| | | v-if="storeS.state.vant.theme == 'light'"> |
| | | v-if="storeS.state.vant.theme == 'light'"> |
| | | <img src="@/assets/imgs/home/home_22b.png" alt="" class="border_icon" v-else> |
| | | {{ $t('支援') }} |
| | | </div> |
| | |
| | | |
| | | <script setup> |
| | | import Head from './components/head.vue' |
| | | import {useI18n} from "vue-i18n"; |
| | | import {ref, computed, onBeforeUnmount} from 'vue'; |
| | | import {useRouter} from 'vue-router'; |
| | | import { useI18n } from "vue-i18n"; |
| | | import { ref, computed, onBeforeUnmount } from 'vue'; |
| | | import { useRouter } from 'vue-router'; |
| | | import ListQuatation from "@/components/Transform/list-quotation/index.vue"; |
| | | import {_getHomeList} from '@/service/cryptos.api' |
| | | import {_getassets, _getContractBySymbolType, _getNewsList1, _getPopupNews} from '@/service/user.api' |
| | | import {useStore} from "vuex"; |
| | | import {TIME_OUT, LOGO} from "@/config"; |
| | | import {useUserStore} from '@/store/user'; |
| | | import {setStorage, getStorage} from '@/utils/index.js'; |
| | | import { _getHomeList } from '@/service/cryptos.api' |
| | | import { _getassets, _getContractBySymbolType, _getNewsList1, _getPopupNews } from '@/service/user.api' |
| | | import { useStore } from "vuex"; |
| | | import { TIME_OUT, LOGO } from "@/config"; |
| | | import { useUserStore } from '@/store/user'; |
| | | import { setStorage, getStorage } from '@/utils/index.js'; |
| | | import storeS from '@/store/store' |
| | | |
| | | let catchSymbol = getStorage('symbol') |
| | |
| | | setStorage('symbol', 'btcusdt'); |
| | | } |
| | | const userStore = useUserStore() |
| | | const {t} = useI18n() |
| | | const { t } = useI18n() |
| | | const router = useRouter() |
| | | const store = useStore(); |
| | | const showMoney=ref(true) |
| | | const myAssets=ref({}) |
| | | _getassets().then(res => { |
| | | myAssets.value = res |
| | | }) |
| | | const showMoney = ref(true) |
| | | const myAssets = ref({}) |
| | | const myAssetsz = ref({}) |
| | | _getassets().then(res => { |
| | | myAssets.value = res |
| | | }) |
| | | |
| | | const todayMoney = ref({ |
| | | money_contract_profit_today: 0 |
| | | }) |
| | | _getContractBySymbolType().then(data => { |
| | | todayMoney.value = data |
| | | }) |
| | | |
| | | const tabbers = [ |
| | | // { key: 1, name: t('跟单'), icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url) }, |
| | |
| | | icon: new URL('@/assets/img/img_3.png', import.meta.url), |
| | | icon2: new URL('@/assets/imgs/home/home_12b.png', import.meta.url), |
| | | path: '/customerService' |
| | | },{ |
| | | }, { |
| | | key: 9, |
| | | name: t('闪兑'), |
| | | icon: new URL('@/assets/img/img_2.png', import.meta.url), |
| | |
| | | |
| | | // 手风琴选中 |
| | | const activeName = ref('0') |
| | | const todayMoney=ref({ |
| | | money_contract_profit_today:0 |
| | | }) |
| | | |
| | | // tab切换 |
| | | const tab = ref(1) |
| | | const current = ref(0) |
| | | const tabList = [ |
| | | {name: t('永续合约'), key: 1}, |
| | | {name: t('现货'), key: 2}, |
| | | { name: t('永续合约'), key: 1 }, |
| | | { name: t('现货'), key: 2 }, |
| | | ] |
| | | |
| | | // 获取公告数据 |
| | | const announceList = ref([]) |
| | | _getContractBySymbolType().then(data => { |
| | | todayMoney.value = data |
| | | }) |
| | | _getNewsList1({ |
| | | language: useI18n().locale.value, |
| | | }).then(res => { |
| | |
| | | // 跳转公告详情 |
| | | const toAnnounceDetail = (announceId) => { |
| | | if (announceId) { |
| | | router.push({path: '/cryptos/AnnounceDetail', query: {id: announceId}}) |
| | | router.push({ path: '/cryptos/AnnounceDetail', query: { id: announceId } }) |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | // 轮播图数据 |
| | | const swipe1 = ref([ |
| | | {key: 1, img: new URL('@/assets/imgs/home/home_1.png', import.meta.url)}, |
| | | {key: 2, img: new URL('@/assets/imgs/home/home_2.png', import.meta.url)}, |
| | | {key: 3, img: new URL('@/assets/imgs/home/home_3.png', import.meta.url)}, |
| | | { key: 1, img: new URL('@/assets/imgs/home/home_1.png', import.meta.url) }, |
| | | { key: 2, img: new URL('@/assets/imgs/home/home_2.png', import.meta.url) }, |
| | | { key: 3, img: new URL('@/assets/imgs/home/home_3.png', import.meta.url) }, |
| | | ]) |
| | | const swipe2 = ref([ |
| | | {key: 1, img: new URL('@/assets/imgs/home/home_1.png', import.meta.url)}, |
| | | {key: 2, img: new URL('@/assets/imgs/home/home_2.png', import.meta.url)}, |
| | | {key: 3, img: new URL('@/assets/imgs/home/home_3.png', import.meta.url)}, |
| | | { key: 1, img: new URL('@/assets/imgs/home/home_1.png', import.meta.url) }, |
| | | { key: 2, img: new URL('@/assets/imgs/home/home_2.png', import.meta.url) }, |
| | | { key: 3, img: new URL('@/assets/imgs/home/home_3.png', import.meta.url) }, |
| | | ]) |
| | | |
| | | //#region 行情数据---------------------------------------- |
| | |
| | | } |
| | | |
| | | .notice_content { |
| | | & > div:first-child { |
| | | &>div:first-child { |
| | | color: $text_color1; |
| | | } |
| | | } |
| | |
| | | .tabs { |
| | | font-size: 1.8rem; |
| | | |
| | | & > div { |
| | | &>div { |
| | | margin-right: 2rem; |
| | | } |
| | | } |