UI开发

2025-05-16 15:56:54 +08:00
parent 34c9dd00e2
commit 779b3395db
35 changed files with 1003 additions and 40 deletions
--- a/src/components/BattleHeader.vue
+++ b/src/components/BattleHeader.vue
@@ -0,0 +1,86 @@
+<script setup>
+defineProps({
+  isMelee: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<template>
+  <view class="container">
+    <image
+      :src="`../static/battle-header${isMelee ? '-melee' : ''}.png`"
+      mode="widthFix"
+    />
+    <view v-if="isMelee" class="players-melee">
+      <view></view>
+    </view>
+    <view v-if="!isMelee" class="players">
+      <view>
+        <view class="avatar">
+          <image src="../static/avatar-frame.png" mode="widthFix" />
+          <image src="../static/avatar.png" mode="widthFix" />
+        </view>
+        <text>选手1</text>
+      </view>
+      <view>
+        <view class="avatar">
+          <image src="../static/avatar-frame.png" mode="widthFix" />
+          <image src="../static/avatar.png" mode="widthFix" />
+        </view>
+        <text>选手2</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  position: relative;
+  margin-bottom: 10px;
+}
+.container > image:first-child {
+  position: absolute;
+  width: 100%;
+  top: -10px;
+}
+.players {
+  display: flex;
+}
+.players > view {
+  width: 50%;
+  height: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #fff9;
+  font-size: 14px;
+  padding-top: 20px;
+}
+.players > view:first-child {
+  background-color: #364469;
+}
+.players > view:last-child {
+  background-color: #692735;
+}
+.avatar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 5px 0;
+}
+.avatar > image:first-child {
+  position: absolute;
+  width: 55px;
+  height: 55px;
+}
+.avatar > image {
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+}
+</style>