reader-star/apps/admin/src/views/user/rules/index.vue

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import CompetitionLayout from '@/components/custom/user/CompetitionLayout.vue'
import { useRouterPush } from '@/hooks/common/router'
import { useActivityInfoStore } from '@/store/modules/activityinfo'

const activityInfoStore = useActivityInfoStore()
const activityInfo = computed(() => activityInfoStore.activityInfo)

// 获取路由参数
const route = useRoute()
const activityId = computed(() => activityInfoStore.activityId || route.query?.activityId as string)
const groupsId = computed(() => activityInfoStore.groupId || route.query?.groupsId as string)
const teamId = computed(() => activityInfoStore.teamId || route.query?.teamId as string)

const { routerPushByKey, routerBack } = useRouterPush()

const activityName = ref('规则介绍')
const rulesContent = ref('')

const mockContent = computed(() => activityInfo.value?.ActivityContent || '')

onMounted(() => {
  setTimeout(() => {
    rulesContent.value = mockContent.value
  }, 100)
})

function handleBack() {
  // routerPushByKey('user_cover')
  routerBack()
}

function handleNext() {
  routerPushByKey('user_draw', { query: { activityId: activityId.value, groupsId: groupsId.value, teamId: teamId.value } })
}
</script>

<template>
  <CompetitionLayout
    :show-back="true"
    :show-next="true"
    :title="activityName"
    @back="handleBack"
    @next="handleNext"
  >
    <div class="items-flex-start h-full w-full flex justify-center font-sans">
      <div class="rules-content-wrapper">
        <div class="rules-container" v-html="rulesContent" />
      </div>
    </div>
  </CompetitionLayout>
</template>

<style lang="scss" scoped>
@import '@/styles/scss/variables.scss';

.rules-content-wrapper {
  width: 100%;
  max-height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $text-color;

  :deep(.rules-container) {
    margin-top: 10px;
    font-size: 28px;
    line-height: 2;
    // color: #5d4037; // Dark brown/grey text

    .intro-text {
      margin-bottom: 30px;
    }

    .rules-list {
      margin: 40px 0;

      p {
        margin: 15px 0;
      }
    }

    .footer-text {
      margin-top: 40px;
      opacity: 0.8;
    }
  }
}
</style>