123

2026-07-07 09:00:53 +08:00
parent 203d129ffb
commit 6d89d1049f
19 changed files with 476 additions and 255 deletions
@@ -0,0 +1,96 @@
+<template>
+  <view class="page">
+    <view class="bg-ornament" />
+    <view class="scroll-wrap">
+      <view class="content">
+        <view v-if="loading" class="loading">
+          <view class="loading-spinner" />
+          <text class="loading-text">加载中...</text>
+        </view>
+        <rich-text v-else class="rich-body" :nodes="content" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { post } from '../../../api/request'
+import { showToast } from '../../../utils'
+
+const content = ref('')
+const loading = ref(true)
+
+onMounted(async () => {
+  try {
+    const list = await post<any[]>('/mp-api/mpContent/queryList', { channel: 'pingxiang', type: 'CARD_NOTICE' })
+    content.value = list?.[0]?.content || ''
+  } catch {
+    showToast('加载失败')
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<style scoped>
+.page {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 140rpx);
+  position: relative;
+}
+
+.bg-ornament {
+  position: fixed;
+  top: -120rpx;
+  right: -80rpx;
+  width: 360rpx;
+  height: 360rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(60, 156, 255, 0.08), rgba(60, 156, 255, 0.02));
+  pointer-events: none;
+  z-index: 0;
+}
+
+.scroll-wrap {
+  position: relative;
+  z-index: 1;
+  min-height: 100vh;
+}
+
+.content {
+  padding: 48rpx;
+}
+
+.rich-body {
+  font-size: 28rpx;
+  color: $uv-content-color;
+  line-height: 1.9;
+}
+
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 120rpx 0;
+  gap: 24rpx;
+}
+
+.loading-spinner {
+  width: 48rpx;
+  height: 48rpx;
+  border: 4rpx solid #e8ecf1;
+  border-top-color: $uv-primary;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.loading-text {
+  font-size: $font-size-base;
+  color: $uv-tips-color;
+}
+</style>