添加全局提示
This commit is contained in:
kron
@@ -1,5 +1,6 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import Container from "@/components/Container.vue";
|
||||
import AppFooter from "@/components/AppFooter.vue";
|
||||
import AppBackground from "@/components/AppBackground.vue";
|
||||
import UserHeader from "@/components/UserHeader.vue";
|
||||
@@ -86,134 +87,141 @@ const comingSoon = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view
|
||||
class="root-container"
|
||||
:style="{ paddingTop: isIos ? '100rpx' : '70rpx' }"
|
||||
>
|
||||
<AppBackground />
|
||||
<UserHeader showRank :onSignin="() => (showModal = true)" />
|
||||
<view class="container">
|
||||
<view class="feature-grid">
|
||||
<view class="bow-card">
|
||||
<image
|
||||
src="../static/bow-bg.png"
|
||||
mode="widthFix"
|
||||
@click="() => toPage('/pages/my-device')"
|
||||
/>
|
||||
<text v-if="!user.id">我的弓箭</text>
|
||||
<text v-if="user.id && !device.deviceId">请绑定设备</text>
|
||||
<text v-if="user.id && device.deviceId">{{ device.deviceName }}</text>
|
||||
<image
|
||||
src="../static/a2@2x.png"
|
||||
mode="widthFix"
|
||||
@click="() => toPage('/pages/first-try')"
|
||||
/>
|
||||
</view>
|
||||
<Container :isHome="true">
|
||||
<view class="container" :style="{ paddingTop: isIos ? '100rpx' : '70rpx' }">
|
||||
<UserHeader showRank :onSignin="() => (showModal = true)" />
|
||||
<view :style="{ padding: '12px 10px' }">
|
||||
<view class="feature-grid">
|
||||
<view class="bow-card">
|
||||
<image
|
||||
src="../static/bow-bg.png"
|
||||
mode="widthFix"
|
||||
@click="() => toPage('/pages/my-device')"
|
||||
/>
|
||||
|
||||
<view class="practice-card" @click="() => toPage('/pages/practise')">
|
||||
<image src="../static/a2@2x(1).png" mode="widthFix" />
|
||||
</view>
|
||||
|
||||
<view class="friend-card" @click="() => toPage('/pages/friend-battle')">
|
||||
<image src="../static/a3@2x.png" mode="widthFix" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="ranking-section">
|
||||
<image src="../static/a4@2x.png" mode="widthFix" />
|
||||
<button
|
||||
class="into-btn"
|
||||
@click="() => toPage('/pages/ranking')"
|
||||
hover-class="none"
|
||||
></button>
|
||||
<view class="ranking-players" @click="toRankListPage">
|
||||
<img src="../static/juezhanbang.png" mode="widthFix" />
|
||||
<view class="divide-line"></view>
|
||||
<view class="player-avatars">
|
||||
<block v-for="i in 6" :key="i">
|
||||
<block v-if="rankData.rank && rankData.rank[i - 1]">
|
||||
<view
|
||||
class="player-avatar"
|
||||
:style="{
|
||||
zIndex: 8 - i,
|
||||
borderColor: topThreeColors[i - 1] || '#000',
|
||||
}"
|
||||
>
|
||||
<image v-if="i === 1" src="../static/champ1.png" />
|
||||
<image v-if="i === 2" src="../static/champ2.png" />
|
||||
<image v-if="i === 3" src="../static/champ3.png" />
|
||||
<view v-if="i > 3">{{ i }}</view>
|
||||
<image :src="rankData.rank[i - 1].avatar" mode="aspectFill" />
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
<view class="more-players">
|
||||
<text>{{ rankData.rank.length }}</text>
|
||||
</view>
|
||||
<text v-if="!user.id">我的弓箭</text>
|
||||
<text v-if="user.id && !device.deviceId">请绑定设备</text>
|
||||
<text v-if="user.id && device.deviceId">{{
|
||||
device.deviceName
|
||||
}}</text>
|
||||
<image
|
||||
src="../static/a2@2x.png"
|
||||
mode="widthFix"
|
||||
@click="() => toPage('/pages/first-try')"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="region-stats">
|
||||
|
||||
<view class="practice-card" @click="() => toPage('/pages/practise')">
|
||||
<image src="../static/a2@2x(1).png" mode="widthFix" />
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-for="(region, index) in ['广东', '湖南', '内蒙', '海南', '四川']"
|
||||
:key="index"
|
||||
class="region-item"
|
||||
@click="comingSoon"
|
||||
class="friend-card"
|
||||
@click="() => toPage('/pages/friend-battle')"
|
||||
>
|
||||
<image src="../static/region-bg.png" mode="widthFix" />
|
||||
<image
|
||||
v-if="index === 0"
|
||||
src="../static/region-1.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<image
|
||||
v-if="index === 1"
|
||||
src="../static/region-2.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<image
|
||||
v-if="index === 2"
|
||||
src="../static/region-3.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<image
|
||||
v-if="index === 3"
|
||||
src="../static/region-4.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<image
|
||||
v-if="index === 4"
|
||||
src="../static/region-5.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<text>{{ region }}</text>
|
||||
<view>
|
||||
<text :style="{ color: '#fff', marginRight: '2px' }">2323</text>
|
||||
<text>分</text>
|
||||
<image src="../static/a3@2x.png" mode="widthFix" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="ranking-section">
|
||||
<image src="../static/a4@2x.png" mode="widthFix" />
|
||||
<button
|
||||
class="into-btn"
|
||||
@click="() => toPage('/pages/ranking')"
|
||||
hover-class="none"
|
||||
></button>
|
||||
<view class="ranking-players" @click="toRankListPage">
|
||||
<img src="../static/juezhanbang.png" mode="widthFix" />
|
||||
<view class="divide-line"></view>
|
||||
<view class="player-avatars">
|
||||
<block v-for="i in 6" :key="i">
|
||||
<block v-if="rankData.rank && rankData.rank[i - 1]">
|
||||
<view
|
||||
class="player-avatar"
|
||||
:style="{
|
||||
zIndex: 8 - i,
|
||||
borderColor: topThreeColors[i - 1] || '#000',
|
||||
}"
|
||||
>
|
||||
<image v-if="i === 1" src="../static/champ1.png" />
|
||||
<image v-if="i === 2" src="../static/champ2.png" />
|
||||
<image v-if="i === 3" src="../static/champ3.png" />
|
||||
<view v-if="i > 3">{{ i }}</view>
|
||||
<image
|
||||
:src="rankData.rank[i - 1].avatar"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
<view class="more-players">
|
||||
<text>{{ rankData.rank.length }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="region-more" @click="comingSoon">
|
||||
<image src="../static/region-more.png" mode="widthFix" />
|
||||
<text>...</text>
|
||||
<text>更多</text>
|
||||
<view class="region-stats">
|
||||
<view
|
||||
v-for="(region, index) in [
|
||||
'广东',
|
||||
'湖南',
|
||||
'内蒙',
|
||||
'海南',
|
||||
'四川',
|
||||
]"
|
||||
:key="index"
|
||||
class="region-item"
|
||||
@click="comingSoon"
|
||||
>
|
||||
<image src="../static/region-bg.png" mode="widthFix" />
|
||||
<image
|
||||
v-if="index === 0"
|
||||
src="../static/region-1.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<image
|
||||
v-if="index === 1"
|
||||
src="../static/region-2.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<image
|
||||
v-if="index === 2"
|
||||
src="../static/region-3.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<image
|
||||
v-if="index === 3"
|
||||
src="../static/region-4.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<image
|
||||
v-if="index === 4"
|
||||
src="../static/region-5.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<text>{{ region }}</text>
|
||||
<view>
|
||||
<text :style="{ color: '#fff', marginRight: '2px' }">2323</text>
|
||||
<text>分</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="region-more" @click="comingSoon">
|
||||
<image src="../static/region-more.png" mode="widthFix" />
|
||||
<text>...</text>
|
||||
<text>更多</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<SModal :show="showModal" :onClose="() => (showModal = false)">
|
||||
<Signin :onClose="() => (showModal = false)" />
|
||||
</SModal>
|
||||
</view>
|
||||
<AppFooter :signin="() => (showModal = true)" />
|
||||
<SModal :show="showModal" :onClose="() => (showModal = false)">
|
||||
<Signin :onClose="() => (showModal = false)" />
|
||||
</SModal>
|
||||
</view>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.root-container {
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: calc(100vh - 210px);
|
||||
padding: 15px 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
@@ -352,6 +360,7 @@ const comingSoon = () => {
|
||||
|
||||
.more-players > text {
|
||||
margin-left: 2px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.region-stats {
|
||||
|
||||
Reference in New Issue
Block a user