122 lines
2.4 KiB
Vue
122 lines
2.4 KiB
Vue
<script setup></script>
|
||
|
||
<template>
|
||
<view class="container">
|
||
<image class="tag" src="../static/winner-yellow.png" mode="widthFix" />
|
||
<view>
|
||
<image src="../static/battle-result.png" mode="widthFix" />
|
||
</view>
|
||
<view>
|
||
<image src="../static/shining-bg.png" mode="widthFix" />
|
||
<image src="../static/throphy.png" mode="widthFix" />
|
||
<text>蓝队获胜</text>
|
||
<text>强势登顶，荣耀加冕</text>
|
||
</view>
|
||
<view>
|
||
<image src="../static/row-yellow-bg.png" mode="widthFix" />
|
||
<text>经验 +20</text>
|
||
</view>
|
||
<text>你是朋友中的佼佼者哦</text>
|
||
<view>
|
||
<view>查看靶纸</view>
|
||
<view>退出</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.container {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: #000;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.tag {
|
||
position: absolute;
|
||
width: 32vw;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
.container > view {
|
||
position: relative;
|
||
}
|
||
.container > view:nth-child(2) {
|
||
width: 80%;
|
||
margin: 10px;
|
||
}
|
||
.container > view:nth-child(2) > image {
|
||
width: 20vw;
|
||
}
|
||
.container > view:nth-child(3) {
|
||
width: 100%;
|
||
height: 38%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
color: #fff9;
|
||
font-size: 14px;
|
||
}
|
||
.container > view:nth-child(3) > image {
|
||
position: absolute;
|
||
width: 100vw;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.container > view:nth-child(3) > image:nth-child(2) {
|
||
top: 6vw;
|
||
}
|
||
.container > view:nth-child(3) > text:nth-child(3) {
|
||
font-size: 30px;
|
||
margin: 10px;
|
||
font-weight: bold;
|
||
color: #fed847;
|
||
}
|
||
.container > view:nth-child(4) {
|
||
width: 100%;
|
||
height: 60px;
|
||
margin: 20px 0;
|
||
}
|
||
.container > view:nth-child(4) > image {
|
||
position: absolute;
|
||
width: 100vw;
|
||
top: 45%;
|
||
}
|
||
.container > view:nth-child(4) > text {
|
||
position: absolute;
|
||
width: 100%;
|
||
font-size: 30px;
|
||
color: #fff;
|
||
text-align: center;
|
||
top: 54%;
|
||
}
|
||
.container > text:nth-child(5) {
|
||
margin: 50px 0;
|
||
font-size: 14px;
|
||
color: #fed847;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
.container > view:nth-child(6) {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.container > view:nth-child(6) > view {
|
||
width: 36%;
|
||
margin: 0 10px;
|
||
background-color: #fed847;
|
||
border-radius: 20px;
|
||
padding: 10px 0;
|
||
text-align: center;
|
||
}
|
||
.container > view:nth-child(6) > view:last-child {
|
||
color: #fff;
|
||
background-color: #757575;
|
||
}
|
||
</style>
|