156 lines
2.9 KiB
Plaintext
156 lines
2.9 KiB
Plaintext
<template>
|
|
<view class="page">
|
|
<view class="nav-bar">
|
|
<view class="nav-back" @click="goBack">
|
|
<uni-icons type="left" size="22" color="#333"></uni-icons>
|
|
</view>
|
|
<text class="nav-title">神兽宠物</text>
|
|
<view class="nav-right"></view>
|
|
</view>
|
|
|
|
<view class="hero">
|
|
<text class="hero-emoji">🐾</text>
|
|
<text class="hero-title">神兽宠物社交</text>
|
|
<text class="hero-sub">养一只专属神兽，结识同好铲屎官</text>
|
|
</view>
|
|
|
|
<view class="grid">
|
|
<view class="pet-card" v-for="(pet, i) in pets" :key="i" @click="selectPet(pet)">
|
|
<text class="pet-emoji">{{ pet.emoji }}</text>
|
|
<text class="pet-name">{{ pet.name }}</text>
|
|
<text class="pet-desc">{{ pet.desc }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="tip">
|
|
<text>领养、互动、宠物社区功能即将上线～</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref } from 'vue'
|
|
|
|
const pets = ref([
|
|
{ emoji: '🐱', name: '招财猫', desc: '带来好运' },
|
|
{ emoji: '🐶', name: '旺旺犬', desc: '守护缘分' },
|
|
{ emoji: '🐰', name: '月亮兔', desc: '温柔陪伴' },
|
|
{ emoji: '🐉', name: '祥云龙', desc: '稀有神兽' }
|
|
] as UTSJSONObject[])
|
|
|
|
const selectPet = (pet : UTSJSONObject) => {
|
|
uni.showToast({ title: '选中「' + (pet.getString('name') ?? '') + '」', icon: 'none' })
|
|
}
|
|
|
|
const goBack = () => {
|
|
uni.navigateBack()
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #f6f6f6;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.nav-bar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 20rpx 24rpx;
|
|
padding-top: 60rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.nav-back {
|
|
width: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-title {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.nav-right {
|
|
width: 60rpx;
|
|
}
|
|
|
|
.hero {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 60rpx 0 40rpx;
|
|
background: linear-gradient(to bottom right, #5AC8FA, #007AFF);
|
|
}
|
|
|
|
.hero-emoji {
|
|
font-size: 90rpx;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.hero-sub {
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.grid {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
padding: 24rpx;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.pet-card {
|
|
width: 48%;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 36rpx 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.pet-emoji {
|
|
font-size: 72rpx;
|
|
}
|
|
|
|
.pet-name {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.pet-desc {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.tip {
|
|
text-align: center;
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.tip text {
|
|
font-size: 24rpx;
|
|
color: #aaa;
|
|
}
|
|
</style>
|