shoot-miniprograms/src/pages/friend-battle.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>