155 lines
3.4 KiB
Vue
155 lines
3.4 KiB
Vue
<template>
|
||
<view class="event-rules-page">
|
||
<!-- 章节列表 -->
|
||
<view class="rules-list">
|
||
<view class="rules-item" v-for="(item, index) in rulesList" :key="index" @click="toggleSection(index)">
|
||
<view class="rules-header">
|
||
<view class="chapter-number">{{ item.chapter }}</view>
|
||
<view class="chapter-title">{{ item.title }}</view>
|
||
<view class="arrow" :class="{ expanded: item.expanded }">›</view>
|
||
</view>
|
||
<view class="rules-content" v-if="item.expanded">
|
||
<view class="content-item" v-for="(content, idx) in item.contents" :key="idx">
|
||
<text class="content-text">{{ content }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
rulesList: [
|
||
{
|
||
chapter: '第一章',
|
||
title: '总则',
|
||
expanded: false,
|
||
contents: [
|
||
'1.1 本次比赛遵循国际武术联合会竞赛规则。',
|
||
'1.2 所有参赛选手必须持有效证件参赛。',
|
||
'1.3 参赛选手须服从裁判判决，不得有违规行为。'
|
||
]
|
||
},
|
||
{
|
||
chapter: '第二章',
|
||
title: '参赛资格',
|
||
expanded: false,
|
||
contents: [
|
||
'2.1 参赛选手年龄须在18-45周岁之间。',
|
||
'2.2 参赛选手须持有武术等级证书或相关证明。',
|
||
'2.3 参赛选手须通过健康检查，身体状况良好。'
|
||
]
|
||
},
|
||
{
|
||
chapter: '第三章',
|
||
title: '比赛规则',
|
||
expanded: false,
|
||
contents: [
|
||
'3.1 比赛采用单败淘汰制。',
|
||
'3.2 每场比赛时间为3分钟，分3局进行。',
|
||
'3.3 得分规则按照国际标准执行。'
|
||
]
|
||
},
|
||
{
|
||
chapter: '第四章',
|
||
title: '奖项设置',
|
||
expanded: false,
|
||
contents: [
|
||
'4.1 各组别设金、银、铜牌各一枚。',
|
||
'4.2 设最佳表现奖、体育道德风尚奖等特别奖项。',
|
||
'4.3 所有参赛选手均可获得参赛证书。'
|
||
]
|
||
}
|
||
]
|
||
};
|
||
},
|
||
methods: {
|
||
toggleSection(index) {
|
||
this.rulesList[index].expanded = !this.rulesList[index].expanded;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.event-rules-page {
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
|
||
.rules-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.rules-item {
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.rules-header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
gap: 15rpx;
|
||
}
|
||
|
||
.chapter-number {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #C93639;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.chapter-title {
|
||
flex: 1;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
.arrow {
|
||
font-size: 40rpx;
|
||
color: #999999;
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.arrow.expanded {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.rules-content {
|
||
padding: 0 30rpx 30rpx;
|
||
border-top: 1rpx solid #f5f5f5;
|
||
}
|
||
|
||
.content-item {
|
||
margin-bottom: 15rpx;
|
||
padding-left: 20rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.content-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 12rpx;
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
background-color: #C93639;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.content-text {
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
line-height: 1.8;
|
||
}
|
||
</style>
|