完成首页UI

src/components/NoticeBar.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const { user } = storeToRefs(useStore());
+
+const props = defineProps({});
+const list = [1, 2, 3, 4, 5];
+const timer = ref(null);
+const offset = ref(0);
+
+onMounted(async () => {
+  timer.value = setInterval(() => {
+    if (offset.value <= -100 * list.length) {
+      offset.value = 100;
+    } else {
+      offset.value -= 0.2;
+    }
+  }, 10);
+});
+onBeforeUnmount(() => {
+  clearInterval(timer.value);
+});
+</script>
+
+<template>
+  <view class="notice-bar">
+    <image src="../static/announce.png" mode="heightFix" />
+    <view>
+      <view
+        v-for="(item, index) in list"
+        :key="item"
+        :style="{
+          transform: `translateX(${offset}%)`,
+        }"
+      >
+        <image src="../static/user-icon.png" mode="widthFix" />
+        <text class="truncate">{{ index + 1 }}毛毛丛</text>
+        <text>成功晋升</text>
+        <text>荣耀王者</text>
+        <text>段位，从此横着走！</text>
+      </view>
+    </view>
+    <image src="../static/enter.png" mode="widthFix" />
+  </view>
+</template>
+
+<style scoped>
+.notice-bar {
+  margin-top: 10rpx;
+  background: linear-gradient(180deg, #2f2d2b 0%, #252831 100%);
+  border-radius: 25rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+}
+.notice-bar > image:first-child {
+  height: 100%;
+}
+.notice-bar > view {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+.notice-bar > view > view {
+  flex-shrink: 0;
+  font-size: 24rpx;
+  padding-left: 15rpx;
+  color: #999;
+  display: flex;
+  align-items: center;
+}
+.notice-bar > view > view > image {
+  width: 48rpx;
+  height: 48rpx;
+  margin-right: 10rpx;
+  border-radius: 50%;
+}
+.notice-bar > view > view > text {
+  word-break: keep-all;
+  display: inline-block;
+}
+.notice-bar > view > view > text:nth-child(2) {
+  color: #fff;
+  width: 100rpx;
+  display: block;
+}
+.notice-bar > view > view > text:nth-child(4) {
+  color: #e7ba80;
+}
+.notice-bar > image:last-child {
+  width: 30rpx;
+  height: 30rpx;
+  margin: 0 20rpx;
+}
+</style>