150 lines
2.6 KiB
Vue
150 lines
2.6 KiB
Vue
<template>
|
|
<view class="container">
|
|
<nav-bar title="游戏平台" bgColor="#F0F4F9"></nav-bar>
|
|
<view class="menu-container">
|
|
<view class="card" v-for="(item, index) in menuList" :key="index" style=" background: #ffffff ">
|
|
<text class="card-title">{{ item.name }}</text>
|
|
<view class="icon-wrapper">
|
|
<view class="icon-shadow" :style="{ background: item.shadowColor }"></view>
|
|
<image class="icon-img" :src="`/static/image/other/game/${item.icon}.png`" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="btn" style="background: linear-gradient( 327deg, #1777FF 0%, #17CDFF 100%);"
|
|
@click="goTo(item.url)">立即进入</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
getCurrentInstance
|
|
} from 'vue';
|
|
import {
|
|
onLoad
|
|
} from '@dcloudio/uni-app'
|
|
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance();
|
|
|
|
onLoad(() => {
|
|
proxy.$apiUserEvent('all', {
|
|
type: 'event',
|
|
key: 'game',
|
|
prefix: '.uni.other.',
|
|
value: '游戏'
|
|
})
|
|
})
|
|
|
|
const menuList = ref([{
|
|
name: "王者荣耀",
|
|
icon: "wangzhe",
|
|
shadowColor: "#FF604F",
|
|
url: "/pages/other/game/honor-of-kings"
|
|
}, {
|
|
name: "三角洲",
|
|
icon: "sanjiaozhou",
|
|
shadowColor: "#12C96A",
|
|
url: "/pages/other/game/sanjiaozhou"
|
|
}, {
|
|
name: "和平精英",
|
|
icon: "hepingjingying",
|
|
shadowColor: "#4992F2",
|
|
url: ""
|
|
}, {
|
|
name: "无畏契约",
|
|
icon: "wuweiqiyue",
|
|
shadowColor: "#FF3333",
|
|
url: ""
|
|
}]);
|
|
|
|
const goTo = (url) => {
|
|
if (url) {
|
|
uni.navigateTo({
|
|
url: url
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: "开发中",
|
|
icon: "none"
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #F0F4F9;
|
|
}
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.container {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.menu-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.card {
|
|
width: calc(50% - 14rpx);
|
|
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
|
margin-bottom: 24rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 48rpx;
|
|
padding-bottom: 40rpx;
|
|
box-sizing: border-box;
|
|
border: 1px solid #ffffff;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 28rpx;
|
|
color: #1A1A1A;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.icon-wrapper {
|
|
margin-top: 40rpx;
|
|
margin-bottom: 62rpx;
|
|
position: relative;
|
|
width: 116rpx;
|
|
height: 116rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon-img {
|
|
width: 116rpx;
|
|
height: 116rpx;
|
|
z-index: 2;
|
|
}
|
|
|
|
.icon-shadow {
|
|
position: absolute;
|
|
bottom: -10rpx;
|
|
width: 100rpx;
|
|
height: 8rpx;
|
|
border-radius: 50%;
|
|
filter: blur(5px);
|
|
z-index: 1;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0 20rpx;
|
|
height: 56rpx;
|
|
line-height: 56rpx;
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
}
|
|
</style> |