|
|
@@ -1,181 +1,165 @@
|
|
|
<template>
|
|
|
<ion-page>
|
|
|
<ion-content fullscreen class="home">
|
|
|
- <UseElementBounding v-slot="{ width }">
|
|
|
- <van-swipe class="mySwiper" :autoplay="5000" :style="{ height: width * 0.65 + 'px' }">
|
|
|
- <van-swipe-item v-for="(item, index) in topBanners" :key="index">
|
|
|
- <van-image :src="item.pic" fit="cover" :width="width" :height="width * 0.65" />
|
|
|
- </van-swipe-item>
|
|
|
- <van-swipe-item :key="999">
|
|
|
- <van-image
|
|
|
- src="https://paimaide.s3.ap-northeast-1.amazonaws.com/image/2023-03-13-16-01-05mrZJlQJL.jpg"
|
|
|
- fit="cover"
|
|
|
- :width="width"
|
|
|
- :height="width * 0.65"
|
|
|
- @click="customer"
|
|
|
- />
|
|
|
- </van-swipe-item>
|
|
|
- </van-swipe>
|
|
|
- <div class="img-btns">
|
|
|
- <img
|
|
|
- src="@/assets/INTRO.png"
|
|
|
- class="tutorial-btn animate__animated animate__heartBeat animate__infinite"
|
|
|
- alt=""
|
|
|
- srcset=""
|
|
|
- @click="showIntroVideo"
|
|
|
- />
|
|
|
- <img
|
|
|
- src="@/assets/OPNAVI.png"
|
|
|
- class="tutorial-btn animate__animated animate__heartBeat animate__infinite"
|
|
|
- alt=""
|
|
|
- srcset=""
|
|
|
- @click="showTutorialVideo"
|
|
|
- />
|
|
|
- <img
|
|
|
- src="@/assets/TUTORIAL.png"
|
|
|
- class="tutorial-btn animate__animated animate__heartBeat animate__infinite"
|
|
|
- alt=""
|
|
|
- srcset=""
|
|
|
- @click="showGraphicTutorial"
|
|
|
+ <van-swipe class="mySwiper" :autoplay="5000" :style="{ height: '65vw' }">
|
|
|
+ <van-swipe-item v-for="(item, index) in topBanners" :key="index">
|
|
|
+ <van-image :src="item.pic" fit="cover" width="100vw" height="65vw" />
|
|
|
+ </van-swipe-item>
|
|
|
+ <van-swipe-item :key="999">
|
|
|
+ <van-image
|
|
|
+ src="https://paimaide.s3.ap-northeast-1.amazonaws.com/image/2023-03-13-16-01-05mrZJlQJL.jpg"
|
|
|
+ fit="cover"
|
|
|
+ width="100vw"
|
|
|
+ height="65vw"
|
|
|
+ @click="customer"
|
|
|
/>
|
|
|
- </div>
|
|
|
- <div class="notice-box" v-if="news.length > 0">
|
|
|
- <van-notice-bar ref="noticeBarRef" left-icon="volume-o">
|
|
|
- <template #left-icon>
|
|
|
- <van-badge
|
|
|
- dot
|
|
|
- :offset="[-4, 4]"
|
|
|
- class="animate__animated animate__rubberBand animate__infinite"
|
|
|
- v-if="recentNews"
|
|
|
- >
|
|
|
- <img
|
|
|
- class="bar-icon"
|
|
|
- src="../assets/home_icon_redian.png"
|
|
|
- alt=""
|
|
|
- @click="showConsoleEve"
|
|
|
- />
|
|
|
- </van-badge>
|
|
|
-
|
|
|
- <img
|
|
|
- class="bar-icon"
|
|
|
- v-else
|
|
|
- src="../assets/home_icon_redian.png"
|
|
|
- alt=""
|
|
|
- @click="showConsoleEve"
|
|
|
- />
|
|
|
- <div class="driver"></div>
|
|
|
- </template>
|
|
|
- <van-swipe
|
|
|
- vertical
|
|
|
- class="notice-swipe"
|
|
|
- :autoplay="3000"
|
|
|
- :touchable="false"
|
|
|
- :show-indicators="false"
|
|
|
+ </van-swipe-item>
|
|
|
+ </van-swipe>
|
|
|
+ <div class="img-btns">
|
|
|
+ <img
|
|
|
+ src="@/assets/INTRO.png"
|
|
|
+ class="tutorial-btn animate__animated animate__heartBeat animate__infinite"
|
|
|
+ alt=""
|
|
|
+ srcset=""
|
|
|
+ @click="showIntroVideo"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="@/assets/OPNAVI.png"
|
|
|
+ class="tutorial-btn animate__animated animate__heartBeat animate__infinite"
|
|
|
+ alt=""
|
|
|
+ srcset=""
|
|
|
+ @click="showTutorialVideo"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="@/assets/TUTORIAL.png"
|
|
|
+ class="tutorial-btn animate__animated animate__heartBeat animate__infinite"
|
|
|
+ alt=""
|
|
|
+ srcset=""
|
|
|
+ @click="showGraphicTutorial"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="notice-box" v-if="news.length > 0">
|
|
|
+ <van-notice-bar ref="noticeBarRef" left-icon="volume-o">
|
|
|
+ <template #left-icon>
|
|
|
+ <van-badge
|
|
|
+ dot
|
|
|
+ :offset="[-4, 4]"
|
|
|
+ class="animate__animated animate__rubberBand animate__infinite"
|
|
|
+ v-if="recentNews"
|
|
|
>
|
|
|
- <van-swipe-item
|
|
|
- v-for="(item, index) in news"
|
|
|
- :key="index"
|
|
|
- @click="router.push({ name: 'news' })"
|
|
|
- >
|
|
|
- <div class="notic-news">
|
|
|
- <span class="van-ellipsis">{{ item.title }}</span>
|
|
|
- <ion-icon class="right-icon" :icon="intoIcon"></ion-icon>
|
|
|
- </div>
|
|
|
- </van-swipe-item>
|
|
|
- </van-swipe>
|
|
|
- </van-notice-bar>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="rank-content">
|
|
|
- <img class="rank-bg" src="../assets/png-kuang.png" alt="" />
|
|
|
- <div class="rank-box" @click="router.push({ name: 'rank' })">
|
|
|
- <div class="rank-list">
|
|
|
- <div class="rank-info" v-for="(item, index) in recentWidthdraw" :key="index">
|
|
|
- <div class="rank-info-left">
|
|
|
- <div class="name">{{ item.nickname }}</div>
|
|
|
- <!-- <div class="text">
|
|
|
+ <img class="bar-icon" src="../assets/home_icon_redian.png" alt="" @click="showConsoleEve" />
|
|
|
+ </van-badge>
|
|
|
+
|
|
|
+ <img
|
|
|
+ class="bar-icon"
|
|
|
+ v-else
|
|
|
+ src="../assets/home_icon_redian.png"
|
|
|
+ alt=""
|
|
|
+ @click="showConsoleEve"
|
|
|
+ />
|
|
|
+ <div class="driver"></div>
|
|
|
+ </template>
|
|
|
+ <van-swipe
|
|
|
+ vertical
|
|
|
+ class="notice-swipe"
|
|
|
+ :autoplay="3000"
|
|
|
+ :touchable="false"
|
|
|
+ :show-indicators="false"
|
|
|
+ >
|
|
|
+ <van-swipe-item
|
|
|
+ v-for="(item, index) in news"
|
|
|
+ :key="index"
|
|
|
+ @click="router.push({ name: 'news' })"
|
|
|
+ >
|
|
|
+ <div class="notic-news">
|
|
|
+ <span class="van-ellipsis">{{ item.title }}</span>
|
|
|
+ <ion-icon class="right-icon" :icon="intoIcon"></ion-icon>
|
|
|
+ </div>
|
|
|
+ </van-swipe-item>
|
|
|
+ </van-swipe>
|
|
|
+ </van-notice-bar>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="rank-content">
|
|
|
+ <img class="rank-bg" src="../assets/png-kuang.png" alt="" />
|
|
|
+ <div class="rank-box" @click="router.push({ name: 'rank' })">
|
|
|
+ <div class="rank-list">
|
|
|
+ <div class="rank-info" v-for="(item, index) in recentWidthdraw" :key="index">
|
|
|
+ <div class="rank-info-left">
|
|
|
+ <div class="name">{{ item.nickname }}</div>
|
|
|
+ <!-- <div class="text">
|
|
|
{{ $t('balance.withdraw') }}{{ item.withdrawAccumulation }}
|
|
|
{{ $t('rank.withdrawRechargeRate') }}{{ parseInt(item.roi * 100) }}%
|
|
|
</div> -->
|
|
|
- <div class="text">
|
|
|
- {{ $t('balance.withdraw') }} <span class="nor">{{
|
|
|
- $t('balance.symbol')
|
|
|
- }}</span
|
|
|
- >{{ item.money }}
|
|
|
- </div>
|
|
|
+ <div class="text">
|
|
|
+ {{ $t('balance.withdraw') }} <span class="nor">{{ $t('balance.symbol') }}</span
|
|
|
+ >{{ item.money }}
|
|
|
</div>
|
|
|
-
|
|
|
- <ion-icon class="right-icon" :icon="intoIcon"></ion-icon>
|
|
|
</div>
|
|
|
- <div class="rank-info" v-for="(item, index) in recentWidthdraw" :key="index">
|
|
|
- <div class="rank-info-left">
|
|
|
- <div class="name">{{ item.nickname }}</div>
|
|
|
- <!-- <div class="text">
|
|
|
+
|
|
|
+ <ion-icon class="right-icon" :icon="intoIcon"></ion-icon>
|
|
|
+ </div>
|
|
|
+ <div class="rank-info" v-for="(item, index) in recentWidthdraw" :key="index">
|
|
|
+ <div class="rank-info-left">
|
|
|
+ <div class="name">{{ item.nickname }}</div>
|
|
|
+ <!-- <div class="text">
|
|
|
{{ $t('balance.withdraw') }}{{ item.withdrawAccumulation }}
|
|
|
{{ $t('rank.withdrawRechargeRate') }}{{ parseInt(item.roi * 100) }}%
|
|
|
</div> -->
|
|
|
- <div class="text">
|
|
|
- {{ $t('balance.withdraw') }} <span class="nor">{{
|
|
|
- $t('balance.symbol')
|
|
|
- }}</span
|
|
|
- >{{ item.money }}
|
|
|
- </div>
|
|
|
+ <div class="text">
|
|
|
+ {{ $t('balance.withdraw') }} <span class="nor">{{ $t('balance.symbol') }}</span
|
|
|
+ >{{ item.money }}
|
|
|
</div>
|
|
|
-
|
|
|
- <ion-icon class="right-icon" :icon="intoIcon"></ion-icon>
|
|
|
</div>
|
|
|
+
|
|
|
+ <ion-icon class="right-icon" :icon="intoIcon"></ion-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 初级场 -->
|
|
|
+
|
|
|
+ <template v-for="(item, index) in saleBatches" :key="index">
|
|
|
+ <div class="level">
|
|
|
+ <van-cell :title="item.name" :value="$t('home.all')" @click="goList(item)" :border="false" is-link>
|
|
|
+ <template #title>
|
|
|
+ <div class="cell-title" :class="[`level_` + index]">
|
|
|
+ <span>
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ <img class="title-bg" src="@/assets/title-bg.png" alt="" />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #right-icon>
|
|
|
+ <ion-icon class="right-icon" :icon="intoIcon"></ion-icon>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
|
|
|
- <!-- 初级场 -->
|
|
|
+ <div class="second">
|
|
|
+ <van-image @click="goList(item)" :src="item.cover" fit="scale-down" />
|
|
|
|
|
|
- <template v-for="(item, index) in saleBatches" :key="index">
|
|
|
- <div class="level">
|
|
|
- <van-cell
|
|
|
- :title="item.name"
|
|
|
- :value="$t('home.all')"
|
|
|
- @click="goList(item)"
|
|
|
- :border="false"
|
|
|
- is-link
|
|
|
- >
|
|
|
- <template #title>
|
|
|
- <div class="cell-title" :class="[`level_` + index]">
|
|
|
- <span>
|
|
|
- <span>{{ item.name }}</span>
|
|
|
- <img class="title-bg" src="@/assets/title-bg.png" alt="" />
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #right-icon>
|
|
|
- <ion-icon class="right-icon" :icon="intoIcon"></ion-icon>
|
|
|
- </template>
|
|
|
- </van-cell>
|
|
|
-
|
|
|
- <div class="second">
|
|
|
- <van-image @click="goList(item)" :src="item.cover" fit="scale-down" />
|
|
|
-
|
|
|
- <!-- <img class="second-btn" v-if="index === 0" src="../assets/TUTORIAL.png" alt="" /> -->
|
|
|
- <template v-if="item.empty !== null && item.id != 11547">
|
|
|
- <div
|
|
|
- class="status hot animate__animated animate__tada animate__infinite"
|
|
|
- v-if="getStatus(item) === '抢购中'"
|
|
|
- >
|
|
|
- <img src="../assets/info_icon_qianggouzhong.png" alt="" />
|
|
|
- <span>{{ $t('product.hot') }}</span>
|
|
|
- </div>
|
|
|
- <div class="status" v-else-if="getStatus(item)">
|
|
|
- <img src="../assets/info_icon_shijian.png" alt="" />
|
|
|
- <span>{{ $t('product.start', { time: formatTime(item.saleStart) }) }}</span>
|
|
|
- <span v-if="getStatus(item) === '已抢光'">({{ $t('blf.finish') }})</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
+ <!-- <img class="second-btn" v-if="index === 0" src="../assets/TUTORIAL.png" alt="" /> -->
|
|
|
+ <template v-if="item.empty !== null && item.id != 11547">
|
|
|
+ <div
|
|
|
+ class="status hot animate__animated animate__tada animate__infinite"
|
|
|
+ v-if="getStatus(item) === '抢购中'"
|
|
|
+ >
|
|
|
+ <img src="../assets/info_icon_qianggouzhong.png" alt="" />
|
|
|
+ <span>{{ $t('product.hot') }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="status" v-else-if="getStatus(item)">
|
|
|
+ <img src="../assets/info_icon_shijian.png" alt="" />
|
|
|
+ <span>{{ $t('product.start', { time: formatTime(item.saleStart) }) }}</span>
|
|
|
+ <span v-if="getStatus(item) === '已抢光'">({{ $t('blf.finish') }})</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
|
|
|
- <div class="tools">
|
|
|
- <!-- <div class="tool">
|
|
|
+ <div class="tools">
|
|
|
+ <!-- <div class="tool">
|
|
|
<img src="../assets/home_icon_pingtaixieyi.png" alt="" />
|
|
|
<span>{{ $t('common.eula') }}</span>
|
|
|
</div>
|
|
|
@@ -183,14 +167,13 @@
|
|
|
<img src="../assets/home_icon_liucheng.png" alt="" />
|
|
|
<span>{{ $t('common.guide') }}</span>
|
|
|
</div> -->
|
|
|
- <div class="tool-info" @click="showTutorialVideo">
|
|
|
- <img src="../assets/png-TUTORIAL.png" alt="" />
|
|
|
- </div>
|
|
|
- <div class="tool-info" @click="showIntroVideo">
|
|
|
- <img src="../assets/png-AGREEMENT.png" alt="" />
|
|
|
- </div>
|
|
|
+ <div class="tool-info" @click="showTutorialVideo">
|
|
|
+ <img src="../assets/png-TUTORIAL.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="tool-info" @click="showIntroVideo">
|
|
|
+ <img src="../assets/png-AGREEMENT.png" alt="" />
|
|
|
</div>
|
|
|
- </UseElementBounding>
|
|
|
+ </div>
|
|
|
</ion-content>
|
|
|
</ion-page>
|
|
|
</template>
|