blame | history | patch | commit | commitdiff | ignore whitespace
1
李凌
2025-10-09 c17311ba1351cd5e64654c3fc7b2fe765b1e7382 
 src/views/homePage/index.vue


@@ -1,7 +1,8 @@


<template>


    <div class="home_page">




        <Head></Head>


    <Head></Head>


    <div class="home_page">


        <!-- <Head></Head>


        <div class="home_logo flex justify-center"><img src="@/assets/imgs/home/home_logo.png" alt=""></div>


        <div class="text-center font-bold mt-8 logo_text">{{ $t('复制财富，從此刻開始') }}</div>


        <div class="text-center mt-2 logo_text_small">{{ $t('超6000種熱門交易類別，立即註冊领取5000USDT') }}!</div>


@@ -35,40 +36,92 @@


            </van-swipe>


        </van-notice-bar>




        <!-- <div class="flex justify-between mt-10">


            <van-swipe class="home_swipe_1" :autoplay="2000">


                <van-swipe-item v-for="value in swipe1" :key="value.key" class="flex justify-center items-center">


                    <img :src="value.img" alt="" class="swipe-item-img">


                </van-swipe-item>


                <template #indicator="{ active, total }">


                    <div class="custom-indicator"><span>{{ active + 1 }}</span>/{{ total }}</div>


                </template>


</van-swipe>




<div style="width:24rem">


    <van-swipe class="home_swipe_2" :autoplay="2000">


        <van-swipe-item v-for="value in swipe2" :key="value.key" class="flex justify-center items-center">


            <img :src="value.img" alt="" class="swipe-item-img">


        </van-swipe-item>


        <template #indicator="{ active, total }">


                        <div class="custom-indicator flex justify-center items-center">


                            <div v-for="value in total" :key="value" class="ml-1"


                                :class="active + 1 === value ? 'active' : ''">


                            </div>


                        </div>


                    </template>


    </van-swipe>




    <div class="purchase mt-7 font-bold flex justify-between items-center">


        {{ $t('购买加密货币') }}


        <van-icon name="arrow" />


    </div>


</div>


</div> -->




        <div id="cryptos" class="pt-10">


            <list-quatation :listData="qList" :tabShow="false" />


        </div> -->




        <div class="home_1 flex justify-around items-center">


            <div v-for="i in tabbers" :key="i.key" @click="toPage(i.path)">


                <img :src="i.icon" v-if="storeS.state.vant.theme == 'light'">


                <img :src="i.icon2" v-else>


                <div>{{ i.name }}</div>


            </div>


        </div>




        <van-notice-bar class="font-26 mt-10 index_notice" :scrollable="false" wrapable>


            <van-swipe vertical class="notice-swipe" :autoplay="2000" :show-indicators="false">


                <van-swipe-item v-for="item in announceList" :key="item.id" @click="toAnnounceDetail(item.uuid)">


                    <div class="flex justify-start items-center">


                        <img :src="item.imgUrl" alt="" class="notice_img mr-5">


                        <div class="notice_content textColor">


                            <div>{{ item.startTime }}</div>


                            <div>{{ item.title }}</div>


                        </div>


                    </div>


                </van-swipe-item>


            </van-swipe>


        </van-notice-bar>




        <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">


                {{ i.name }}


            </div>


        </div>




        <div id="cryptos">


            <list-quatation :listData="qList" :tabShow="false" :tabActive="tab" />


        </div>




        <div class="home_2" @click="toPage('/quotes/index')">


            {{ $t("更多") }}


            <van-icon name="arrow-down" />


        </div>




        <div class="home_3 flex justify-start">


            <img :src="LOGO" alt="">


            <span>{{ $t('安全、便利、社交') }}</span>


        </div>




        <van-collapse v-model="activeName" accordion>


            <van-collapse-item name="1" class="border_b">


                <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'">


                        <img src="@/assets/imgs/home/home_23b.png" alt="" class="border_icon" v-else>


                        {{ $t('公司') }}


                    </div>


                </template>


                <div style="padding-left: 2.3rem;">


                    <p @click="toPage('/aboutUs')">{{ $t('关于我们') }}</p>


                    <p @click="toPage('/helpCenter')">{{ $t('帮助中心') }}</p>


                </div>


            </van-collapse-item>


            <van-collapse-item name="2" class="border_b">


                <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'">


                        <img src="@/assets/imgs/home/home_21b.png" alt="" class="border_icon" v-else>


                        {{ $t('法律') }}


                    </div>


                </template>


                <div style="padding-left: 2.3rem;">


                    <p @click="toPage('/TermsOfService')">{{ $t('serviceConf') }}</p>


                </div>


            </van-collapse-item>


            <van-collapse-item name="3" class="border_b">


                <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'">


                        <img src="@/assets/imgs/home/home_22b.png" alt="" class="border_icon" v-else>


                        {{ $t('支援') }}


                    </div>


                </template>


                <div style="padding-left: 2.3rem;">


                    <p @click="toPage('/customerService')">{{ $t('onLineService') }}</p>


                </div>


            </van-collapse-item>


        </van-collapse>


    </div>


</template>




@@ -81,13 +134,15 @@


import { _getHomeList } from '@/service/cryptos.api'


import { _getNewsList1, _getPopupNews } from '@/service/user.api'


import { useStore } from "vuex";


import { TIME_OUT } from "@/config";


import { TIME_OUT, LOGO } from "@/config";


import { useUserStore } from '@/store/user';


import { setStorage,getStorage } from '@/utils/index.js';


  let catchSymbol = getStorage('symbol')


  if(!catchSymbol){


     setStorage('symbol', 'btcusdt');


  }


import { setStorage, getStorage } from '@/utils/index.js';


import storeS from '@/store/store'




let catchSymbol = getStorage('symbol')


if (!catchSymbol) {


    setStorage('symbol', 'btcusdt');


}


const userStore = useUserStore()


const { t } = useI18n()


const router = useRouter()


@@ -97,17 +152,28 @@


    // { key: 1, name: t('跟单'), icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url) },


    // { key: 3, name: `C2C ${t('交易')}`, icon: new URL('@/assets/imgs/home/home_3.png', import.meta.url) },


    // { key: 4, name: t('邀请好友'), icon: new URL('@/assets/imgs/home/home_4.png', import.meta.url) },


    { key: 5, name: t('合约'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/trade/index' },


    { key: 6, name: t('现货'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/cryptos/trade/btcusdt' },


   { key: 2, name: t('储值'), icon: new URL('@/assets/imgs/home/home_2.png', import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true' },


    // { key: 5, name: t('合约'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/trade/index' },


    // { key: 6, name: t('现货'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/cryptos/trade/btcusdt' },


    // { key: 2, name: t('储值'), icon: new URL('@/assets/imgs/home/home_2.png', import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true' },


    // { key: 7, name: t('提现'), icon: new URL('@/assets/imgs/home/home_6.png', import.meta.url), path: '/exchange/withdraw-usdt' },/cryptos/Withdraw/withdrawPage


   { key: 7, name: t('提现'), icon: new URL('@/assets/imgs/home/home_6.png', import.meta.url), path: '/cryptos/Withdraw/withdrawPage' },


    // { key: 7, name: t('提现'), icon: new URL('@/assets/imgs/home/home_6.png', import.meta.url), path: '/cryptos/Withdraw/withdrawPage' },


    // { key: 8, name: t('卡券中心'), icon: new URL('@/assets/imgs/home/home_7.png', import.meta.url) },


    { key: 9, name: t('闪兑'), icon: new URL('@/assets/imgs/home/home_8.png', import.meta.url), path: '/cryptos/exchangePage' },


    // { key: 10, name: t('更多'), icon: new URL('@/assets/imgs/home/home_9.png', import.meta.url) },




    { key: 11, name: "ICO", icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '/ICO/ico' },


    { key: 12, name: "C2C", icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '/wantBuy' },


    { key: 9, name: t('闪兑'), icon: new URL('@/assets/imgs/home/home_12a.png', import.meta.url), icon2: new URL('@/assets/imgs/home/home_12b.png', import.meta.url), path: '/cryptos/exchangePage' },


    { key: 11, name: "ICO", icon: new URL('@/assets/imgs/home/home_11a.png', import.meta.url), icon2: new URL('@/assets/imgs/home/home_11b.png', import.meta.url), path: '/ICO/ico' },


    { key: 12, name: "C2C", icon: new URL('@/assets/imgs/home/home_11a.png', import.meta.url), icon2: new URL('@/assets/imgs/home/home_11b.png', import.meta.url), path: '/wantBuy' },


    { key: 13, name: t('onLineService'), icon: new URL('@/assets/imgs/home/home_10a.png', import.meta.url), icon2: new URL('@/assets/imgs/home/home_10b.png', import.meta.url), path: '/customerService' },


]




// 手风琴选中


const activeName = ref('0')




// tab切换


const tab = ref(1)


const tabList = [


    { name: t('永续合约'), key: 1 },


    { name: t('现货'), key: 2 },


]




// 获取公告数据


@@ -125,10 +191,21 @@


    }


}




// 获取客服链接


const customer_service_url = ref(storeS.state.user.customer_service_url)




// 跳转页面


const toPage = (path) => {


    if (!path) return


    router.push(path)


    if (path == '/customerService') {


        if (customer_service_url.value) {


            window.location.href = customer_service_url.value;


        } else {


            router.push(path)


        }


    } else {


        router.push(path)


    }


}




// 轮播图数据


@@ -155,7 +232,7 @@


    if (!(list instanceof Array)) {


        return


    }


    qList.value = list;


    qList.value = list.slice(0, 4);




    if (timeout.value) {


        clearTimeout(timeout.value)


@@ -177,18 +254,34 @@




<style lang="scss">


.home_page {


    background: $white;


    min-height: 100vh;


    width: 100%;


    padding: 1rem 1rem 10rem 1rem;


    // $log-c: #282828;


    $tab-c: #343434;


    $inp-c: #999;


    $crd-b: #f7f7f7;


    font-size: 1.4rem;




    .home_1 {


        padding-top: 2rem;




        div {


            text-align: center;


            font-size: 1.4rem;


        }




        img {


            width: 2.8rem;


            margin: 0 auto .4rem;


        }


    }




    .index_notice {


        height: 100px;


        border-radius: 10px;


        margin-bottom: 2rem;




        @include themify() {


            background: themed("main_background");


            border: themed("border_color") solid 1px;


        }




        .notice-swipe {


            height: 82px;


@@ -207,132 +300,187 @@


        }


    }




    .home_logo {


        width: 100%;




        img {


            width: 22.5rem;


        }


    }




    .logo_text {


        color: $log-c;


        font-size: 2rem;


    }




    .logo_text_small {


        color: $inp-c;


        font-size: 1.5rem;


    }




    .login_buts {


        width: 100%;


    .tabs {


        font-size: 1.8rem;




        &>div {


            width: 21rem;


            height: 5rem;


            line-height: 5rem;


            border-radius: 2.5rem;


            font-size: 1.8rem;


            color: $log-c;


        }




        .login_but_z {


            background: $crd-b;


        }




        .login_but_d {


            background: $bg_yellow;


            margin-right: 2rem;


        }


    }




    .home_grid {


        width: 100%;


    .home_2 {


        font-size: 1.5rem;


        text-align: center;


        padding-bottom: 1.2rem;


        margin: 1rem 0 1rem;




        .grid_item {


            width: 25%;


            color: $tab-c;


            font-size: 1.6rem;




            .grid_item_img {


                width: 100%;




                img {


                    width: 6.3rem;


                }


            }


        @include themify() {


            border-bottom: themed("divi_line") solid 1px;


        }


    }




    .home_3 {


        padding: 1rem 0;




    .home_swipe_1,


    .home_swipe_2 {


        width: 24rem;


        border-radius: 1rem;


    }




    .home_swipe_1 {


        .van-swipe-item {


            height: 23rem;


            background-color: $crd-b;




            .swipe-item-img {


                width: 100%;


            }


        }




        .custom-indicator {


            position: absolute;


            left: 5px;


            bottom: 5px;


            padding: 2px 5px;


            font-size: 1.8rem;


            background: rgba(255, 255, 255, 0.5);


            color: $inp-c;




            span {


                color: $log-c;


            }


        img {


            height: 2rem;


            margin-right: 1rem;


        }


    }




    .home_swipe_2 {


        .van-swipe-item {


            height: 15rem;


            background-color: $crd-b;




            .swipe-item-img {


                width: 100%;


            }


    .border_b {


        @include themify() {


            border-bottom: themed("divi_line") solid 1px;


        }




        .custom-indicator {


            position: absolute;


            right: 5px;


            top: 1rem;


            padding: 2px 5px;


        .van-collapse-item__title--expanded:after {


            display: none;


        }




            div {


                background: $inp-c;


                width: 0.6rem;


                height: 0.6rem;


                border-radius: 0.3rem;


                transition: 0.3s all;


            }


        .van-cell__title {


            font-weight: 600;


        }




            .active {


                background: $bg_yellow;


                width: 2rem;


            }


        .van-collapse-item__content {


            padding-top: 0;


        }




        p {


            font-size: 1.4rem;


        }




        .border_icon {


            width: 1.5rem;


            margin-right: 1rem;


        }


    }




    .purchase {


        color: $log-c;


        background: $crd-b;


        border-radius: 1rem;


        padding: 1.6rem 1.6rem 2rem 1.6rem;


        font-size: 2rem;


    }


    // .home_logo {


    //     width: 100%;




    //     img {


    //         width: 22.5rem;


    //     }


    // }




    // .logo_text {


    //     color: $log-c;


    //     font-size: 2rem;


    // }




    // .logo_text_small {


    //     color: $inp-c;


    //     font-size: 1.5rem;


    // }




    // .login_buts {


    //     width: 100%;




    //     &>div {


    //         width: 21rem;


    //         height: 5rem;


    //         line-height: 5rem;


    //         border-radius: 2.5rem;


    //         font-size: 1.8rem;


    //         color: $log-c;


    //     }




    //     .login_but_z {


    //         background: $crd-b;


    //     }




    //     .login_but_d {


    //         background: $bg_yellow;


    //     }


    // }




    // .home_grid {


    //     width: 100%;




    //     .grid_item {


    //         width: 25%;


    //         color: $tab-c;


    //         font-size: 1.6rem;




    //         .grid_item_img {


    //             width: 100%;




    //             img {


    //                 width: 6.3rem;


    //             }


    //         }


    //     }


    // }






    // .home_swipe_1,


    // .home_swipe_2 {


    //     width: 24rem;


    //     border-radius: 1rem;


    // }




    // .home_swipe_1 {


    //     .van-swipe-item {


    //         height: 23rem;


    //         background-color: $crd-b;




    //         .swipe-item-img {


    //             width: 100%;


    //         }


    //     }




    //     .custom-indicator {


    //         position: absolute;


    //         left: 5px;


    //         bottom: 5px;


    //         padding: 2px 5px;


    //         font-size: 1.8rem;


    //         background: rgba(255, 255, 255, 0.5);


    //         color: $inp-c;




    //         span {


    //             color: $log-c;


    //         }


    //     }


    // }




    // .home_swipe_2 {


    //     .van-swipe-item {


    //         height: 15rem;


    //         background-color: $crd-b;




    //         .swipe-item-img {


    //             width: 100%;


    //         }


    //     }




    //     .custom-indicator {


    //         position: absolute;


    //         right: 5px;


    //         top: 1rem;


    //         padding: 2px 5px;




    //         div {


    //             background: $inp-c;


    //             width: 0.6rem;


    //             height: 0.6rem;


    //             border-radius: 0.3rem;


    //             transition: 0.3s all;


    //         }




    //         .active {


    //             background: $bg_yellow;


    //             width: 2rem;


    //         }


    //     }


    // }




    // .purchase {


    //     color: $log-c;


    //     background: $crd-b;


    //     border-radius: 1rem;


    //     padding: 1.6rem 1.6rem 2rem 1.6rem;


    //     font-size: 2rem;


    // }


}


</style>