完成首页UI

2026-01-13 11:35:36 +08:00
parent a05ed12541
commit f6f5793e41
18 changed files with 862 additions and 7 deletions
--- a/src/components/LiveItem.vue
+++ b/src/components/LiveItem.vue
@@ -0,0 +1,142 @@
+<script setup>
+import { ref, onMounted } from "vue";
+
+const props = defineProps({});
+
+onMounted(async () => {});
+</script>
+
+<template>
+  <view class="live-item">
+    <view>
+      <image src="../static/user-icon-dark.png" mode="widthFix" />
+    </view>
+    <view>
+      <text>陈百强姓陈</text>
+      <view>
+        <text>节奏迅猛</text>
+        <text>节奏迅猛</text>
+      </view>
+      <view class="live-item-avatars">
+        <view :style="{ width: `${25 * 5 + 25}rpx` }">
+          <image
+            v-for="(avatar, i) in [1, 2, 3, 4, 5]"
+            :key="avatar"
+            :src="'../static/user-icon.png'"
+            :style="{
+              zIndex: i,
+              transform: `translateX(-${10 * i}rpx)`,
+            }"
+          />
+        </view>
+        <text>观战中...</text>
+      </view>
+    </view>
+    <view>
+      <view>
+        <image src="../static/race-title-bg.png" mode="widthFix" />
+        <text>1v1对抗</text>
+      </view>
+      <view>
+        <text>本轮环数</text>
+        <text>62</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.live-item {
+  display: flex;
+  align-items: center;
+  background: #252831;
+  padding: 25rpx;
+  border-radius: 25rpx;
+}
+.live-item > view:nth-child(1) {
+  width: 150rpx;
+  height: 150rpx;
+}
+.live-item > view:nth-child(1) > image {
+  width: 100%;
+  height: 100%;
+  border-radius: 25rpx;
+}
+.live-item > view:nth-child(2) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin: 0 20rpx;
+}
+.live-item > view:nth-child(2) > text {
+  font-weight: 500;
+  font-size: 28rpx;
+  color: #ffffff;
+}
+.live-item > view:nth-child(2) > view:nth-child(2) {
+  font-weight: 500;
+  font-size: 20rpx;
+  color: #ffa61b;
+  margin-top: 10rpx;
+  margin-bottom: 20rpx;
+}
+.live-item > view:nth-child(2) > view:nth-child(2) > text {
+  line-height: 28rpx;
+  border-radius: 15rpx;
+  border: 2rpx solid #ffc05d;
+  padding: 0 10rpx;
+  margin-right: 10rpx;
+}
+.live-item-avatars {
+  display: flex;
+  align-items: center;
+  font-size: 20rpx;
+  color: #999999;
+}
+.live-item-avatars > view {
+  display: flex;
+  align-items: center;
+}
+.live-item-avatars > view > image {
+  width: 36rpx;
+  height: 36rpx;
+  border-radius: 50%;
+  flex-shrink: 0;
+  border: 1rpx solid #000;
+  box-sizing: border-box;
+}
+.live-item > view:nth-child(3) {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: space-around;
+  height: 150rpx;
+}
+.live-item > view:nth-child(3) > view:first-child {
+  display: flex;
+  align-items: center;
+  font-size: 24rpx;
+  color: #c46e36;
+  transform: translateX(100rpx);
+}
+.live-item > view:nth-child(3) > view:first-child > text {
+  transform: translateX(-90rpx);
+}
+.live-item > view:nth-child(3) > view:first-child > image {
+  width: 160rpx;
+  height: 50rpx;
+}
+.live-item > view:nth-child(3) > view:last-child {
+  display: flex;
+  align-items: flex-end;
+  font-size: 20rpx;
+  color: #999999;
+}
+.live-item > view:nth-child(3) > view:last-child > text:last-child {
+  font-weight: 600;
+  font-size: 48rpx;
+  color: #ffd299;
+  margin-left: 10rpx;
+  line-height: 40rpx;
+}
+</style>