完成我的成长脚印UI
This commit is contained in:
kron
225
src/pages/my-growth.vue
Normal file
225
src/pages/my-growth.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<script setup>
|
||||
import Container from "@/components/Container.vue";
|
||||
import Avatar from "@/components/Avatar.vue";
|
||||
|
||||
import { ref } from "vue";
|
||||
|
||||
const selectedIndex = ref(0);
|
||||
|
||||
const handleSelect = (index) => {
|
||||
selectedIndex.value = index;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container title="我的成长脚印">
|
||||
<view class="tabs">
|
||||
<view
|
||||
v-for="(rankType, index) in ['排位赛', '好友约战', '射馆练习']"
|
||||
:key="index"
|
||||
:style="{
|
||||
color: index === selectedIndex ? '#000' : '#fff',
|
||||
backgroundColor: index === selectedIndex ? '#FFD947' : 'transparent',
|
||||
}"
|
||||
@tap="handleSelect(index)"
|
||||
>
|
||||
{{ rankType }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="contents">
|
||||
<view
|
||||
:style="{
|
||||
display: selectedIndex !== 2 ? 'flex' : 'none',
|
||||
}"
|
||||
>
|
||||
<view>
|
||||
<view class="contest-header">
|
||||
<text>1V1</text>
|
||||
<text>2025.01.21 14:09:23</text>
|
||||
<image src="../static/back.png" mode="widthFix" />
|
||||
</view>
|
||||
<view class="contest-1v1">
|
||||
<view class="player">
|
||||
<Avatar frame src="../static/avatar.png" />
|
||||
<text>选手1</text>
|
||||
<image src="../static/winner-badge.png" mode="widthFix" />
|
||||
</view>
|
||||
<view class="player">
|
||||
<Avatar frame src="../static/avatar.png" />
|
||||
<text>选手2</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="contest-header">
|
||||
<text>1V1</text>
|
||||
<text>2025.01.21 14:09:23</text>
|
||||
<image src="../static/back.png" mode="widthFix" />
|
||||
</view>
|
||||
<view class="contest-1v1">
|
||||
<view class="player">
|
||||
<Avatar frame src="../static/avatar.png" />
|
||||
<text>选手1</text>
|
||||
<image src="../static/winner-badge.png" mode="widthFix" />
|
||||
</view>
|
||||
<view class="player">
|
||||
<Avatar frame src="../static/avatar.png" />
|
||||
<text>选手2</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="contest-header">
|
||||
<text>5v5</text>
|
||||
<text>2025.01.21 14:09:23</text>
|
||||
<image src="../static/back.png" mode="widthFix" />
|
||||
</view>
|
||||
<view class="contest-multi">
|
||||
<view class="player">
|
||||
<Avatar :rank="1" src="../static/avatar.png" />
|
||||
<text>选手1</text>
|
||||
</view>
|
||||
<view class="player">
|
||||
<Avatar :rank="2" src="../static/avatar.png" />
|
||||
<text>选手2</text>
|
||||
</view>
|
||||
<view class="player">
|
||||
<Avatar :rank="3" src="../static/avatar.png" />
|
||||
<text>选手3</text>
|
||||
</view>
|
||||
<view class="player">
|
||||
<Avatar :rank="4" src="../static/avatar.png" />
|
||||
<text>选手4</text>
|
||||
</view>
|
||||
<view class="player">
|
||||
<Avatar :rank="5" src="../static/avatar.png" />
|
||||
<text>选手5</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
:style="{
|
||||
display: selectedIndex === 2 ? 'flex' : 'none',
|
||||
}"
|
||||
>
|
||||
<view
|
||||
v-for="(_, index) in new Array(6).fill(0)"
|
||||
:key="index"
|
||||
class="practice-record"
|
||||
>
|
||||
<text>单组练习 2025.01.21 14:09:23</text>
|
||||
<image src="../static/back.png" mode="widthFix" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tabs {
|
||||
width: calc(100% - 30px);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 15px;
|
||||
padding: 15px;
|
||||
padding-top: 0;
|
||||
}
|
||||
.tabs > view {
|
||||
width: 33.3%;
|
||||
padding: 7px 10px;
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.contents > view {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.contest-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 7px 12px;
|
||||
font-size: 12px;
|
||||
background: linear-gradient(180deg, #323845 0%, #2e2e39 100%);
|
||||
position: relative;
|
||||
}
|
||||
.contest-header > text:first-child {
|
||||
color: #ffd947;
|
||||
font-size: 14px;
|
||||
}
|
||||
.contest-header > text:nth-child(2) {
|
||||
color: #fff9;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.contest-header > image {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 10px;
|
||||
width: 15px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.player {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #fff9;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 5px;
|
||||
position: relative;
|
||||
}
|
||||
.player > text {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.player > image:last-child {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.contest-1v1,
|
||||
.contest-multi {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.contest-1v1 > view {
|
||||
width: 50%;
|
||||
}
|
||||
.contest-1v1 > view:first-child {
|
||||
background-color: #364469;
|
||||
}
|
||||
.contest-1v1 > view:last-child {
|
||||
background-color: #692735;
|
||||
}
|
||||
.contest-multi > view {
|
||||
width: 20%;
|
||||
}
|
||||
.contest-multi > view:nth-child(1) {
|
||||
background-color: #364469;
|
||||
}
|
||||
.contest-multi > view:nth-child(2) {
|
||||
background-color: #692735;
|
||||
}
|
||||
.contest-multi > view:nth-child(3) {
|
||||
background-color: #934b4b;
|
||||
}
|
||||
.contest-multi > view:nth-child(4) {
|
||||
background-color: #a98b69;
|
||||
}
|
||||
.contest-multi > view:nth-child(5) {
|
||||
background-color: #8268a2;
|
||||
}
|
||||
.practice-record {
|
||||
color: #fff9;
|
||||
border-bottom: 1px solid #fff9;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.practice-record > image {
|
||||
width: 15px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user