122 lines
2.8 KiB
Vue
122 lines
2.8 KiB
Vue
<script setup>
|
||
import AppBackground from "@/components/AppBackground.vue";
|
||
import Header from "@/components/Header.vue";
|
||
import Guide from "@/components/Guide.vue";
|
||
import SButton from "@/components/SButton.vue";
|
||
</script>
|
||
|
||
<template>
|
||
<view>
|
||
<AppBackground />
|
||
<Header title="好友约战" />
|
||
<Guide>
|
||
<view class="guide-tips">
|
||
<text>约上朋友开几局，欢乐多，不寂寞</text>
|
||
<text>一起练升级更快，早日加入全国排位赛！</text>
|
||
</view>
|
||
</Guide>
|
||
<view class="founded-room">
|
||
<image src="../static/founded-room.png" mode="widthFix" />
|
||
<view>
|
||
<input placeholder="输入房间号" />
|
||
<button>进入房间</button>
|
||
</view>
|
||
</view>
|
||
<view class="create-room">
|
||
<image src="../static/battle-bg.png" mode="widthFix" />
|
||
<view>
|
||
<image src="../static/avatar.png" mode="widthFix" />
|
||
<image src="../static/versus.png" mode="widthFix" />
|
||
<view>
|
||
<image src="../static/question-mark.png" mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<SButton width="70%" :rounded="30">创建约战房</SButton>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.founded-room {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
padding: 20px 0;
|
||
background-color: #54431d33;
|
||
border: 1px solid #54431d;
|
||
margin: 25px 15px;
|
||
border-radius: 10px;
|
||
padding: 15px;
|
||
}
|
||
.founded-room > image {
|
||
width: 16vw;
|
||
}
|
||
.founded-room > view {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: 25px 0;
|
||
background-color: #fff;
|
||
border-radius: 30px;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
.founded-room > view > input {
|
||
width: 70%;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
height: 40px;
|
||
}
|
||
.founded-room > view > button {
|
||
background-color: #fed847;
|
||
width: 30%;
|
||
line-height: 40px;
|
||
border-radius: 30px;
|
||
font-size: 14px;
|
||
padding: 3px 0;
|
||
font-weight: bold;
|
||
color: #000;
|
||
}
|
||
.create-room {
|
||
position: relative;
|
||
margin: 25px 15px;
|
||
}
|
||
.create-room > image:first-of-type {
|
||
position: absolute;
|
||
width: 100%;
|
||
}
|
||
.create-room > view {
|
||
margin: 0 30px;
|
||
padding-top: 30px;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.create-room > view > image:first-child {
|
||
width: 18vw;
|
||
transform: translateX(40%);
|
||
}
|
||
.create-room > view > image:nth-child(2) {
|
||
width: 36vw;
|
||
transform: translateX(55%) translateY(-40px);
|
||
}
|
||
.create-room > view > view:nth-child(3) {
|
||
width: 18vw;
|
||
height: 18vw;
|
||
border-radius: 50%;
|
||
background-color: #ccc;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
transform: translate(280%, -75px);
|
||
}
|
||
.create-room > view > view:nth-child(3) > image {
|
||
width: 40%;
|
||
}
|
||
.create-room > view:last-child {
|
||
transform: translateY(-110%);
|
||
}
|
||
</style>
|