2406 lines
49 KiB
Vue
2406 lines
49 KiB
Vue
<template>
|
||
<div class="page flex-col justify-between">
|
||
<div class="box_3 flex-col">
|
||
<div class="text-wrapper_1 flex-col">
|
||
<span class="text_13">积分中心</span>
|
||
<span class="text_14">完成任务获取智点，解锁更多AI体验</span>
|
||
</div>
|
||
|
||
<!-- 首页 -->
|
||
<div v-if="currentView === 'home'">
|
||
<div class="box_4 flex-row justify-between">
|
||
<div class="section_1 flex-col">
|
||
<div class="group_5 flex-row justify-between">
|
||
<span class="text_15">我的智点：</span>
|
||
<div class="box_5 flex-row" @click="switchToRules" style="cursor: pointer;">
|
||
<img class="thumbnail_4" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPng916c5656fade9f42bf31d24f6485ab9a74435e195bc567630d7bc81e3cf09840.png" />
|
||
<span class="text_16">规则</span>
|
||
</div>
|
||
</div>
|
||
<div class="group_6 flex-row justify-between">
|
||
<img class="label_4" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPng9c657bfdcc0b0e200e87010da7555355ad7a4043a4357c45f6009a9afb20e90f.png" />
|
||
<span class="text_17">124.8</span>
|
||
<span class="text_18" @click="switchToDetails" style="cursor: pointer;">明细 ></span>
|
||
</div>
|
||
</div>
|
||
<div class="section_2 flex-row justify-end">
|
||
<span class="text_19">本周您已累计签到 天</span>
|
||
<span class="text_20">2</span>
|
||
<div class="group_7 flex-col">
|
||
<span class="text_21">漏签</span>
|
||
<img class="label_5" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPng1b856671c7a495f82c8d2b4239e280881e9f6f49444312bc1d0f2a5b7f9ed9ea.png" />
|
||
</div>
|
||
<div class="group_8 flex-col">
|
||
<span class="text_22">漏签</span>
|
||
<img class="label_6" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPng1b856671c7a495f82c8d2b4239e280881e9f6f49444312bc1d0f2a5b7f9ed9ea.png" />
|
||
</div>
|
||
<div class="group_9 flex-col">
|
||
<span class="text_23">+2</span>
|
||
<img class="label_7" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPngd3b709a79d8ae724adc8bff7962dece1aa9630f0a53e457876789455c45cfd70.png" />
|
||
</div>
|
||
<div class="group_9 flex-col">
|
||
<span class="text_24">+21</span>
|
||
<img class="label_8" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPngd3b709a79d8ae724adc8bff7962dece1aa9630f0a53e457876789455c45cfd70.png" />
|
||
</div>
|
||
<div class="group_11 flex-col">
|
||
<span class="text_25">+2</span>
|
||
<img class="label_9" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPngd7c9c3c2b84111b0ff428f0eef9c2a99ae6082f040b50445d5748400c5790aa8.png" />
|
||
</div>
|
||
<div class="group_12 flex-col">
|
||
<span class="text_26">+2</span>
|
||
<img class="label_10" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPngd7c9c3c2b84111b0ff428f0eef9c2a99ae6082f040b50445d5748400c5790aa8.png" />
|
||
</div>
|
||
<div class="group_13 flex-col">
|
||
<span class="text_27">+2</span>
|
||
<img class="label_11" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPngd7c9c3c2b84111b0ff428f0eef9c2a99ae6082f040b50445d5748400c5790aa8.png" />
|
||
</div>
|
||
<div class="group_14 flex-col"></div>
|
||
</div>
|
||
</div>
|
||
<div class="box_6 flex-col">
|
||
<div class="text-wrapper_2 flex-row justify-between">
|
||
<span class="text_28">完成下方学习任务可获得智点，每周上限100点，每月上限300点</span>
|
||
<span class="text_29">前往学习 >></span>
|
||
</div>
|
||
<div class="block_1 flex-col">
|
||
<div class="box_7 flex-col"></div>
|
||
</div>
|
||
<div class="text-wrapper_3 flex-row">
|
||
<span class="text_30">今日学习进度</span>
|
||
<span class="text_31">2</span>
|
||
<span class="text_32">/8</span>
|
||
</div>
|
||
</div>
|
||
<div class="box_8 flex-col">
|
||
<span class="text_33">新手任务</span>
|
||
<img class="image_7" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPngdc50d163a50a5a37461e082e887a02706cab843b14f2c65008b7a169588cb26e.png" />
|
||
<div class="box_9 flex-row">
|
||
<div class="image-wrapper_2 flex-col">
|
||
<img class="label_12" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPng391f27637218dcf71888b20ec75eae7eb34b046e0fcda6da384f8e04aba3b60b.png" />
|
||
</div>
|
||
<div class="box_10 flex-col justify-between">
|
||
<div class="group_15 flex-row">
|
||
<span class="text_34">新手大礼包</span>
|
||
<img class="label_13" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPngf317211537d27a4970d7d242f380a5412bae398ad35d8d2b773f691131e41b3a.png" />
|
||
<span class="text_35">+100</span>
|
||
</div>
|
||
<span class="text_36">首次注册登录，并完成实名认证</span>
|
||
</div>
|
||
<div class="text-wrapper_4 flex-col"><span class="text_37">已完成</span></div>
|
||
</div>
|
||
<div class="box_11 flex-row">
|
||
<div class="image-wrapper_3 flex-col">
|
||
<img class="label_14" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPng24f5ebea3c697588df5f3399ba241a1fd96e2db18464d679db6b41d50cd23a55.png" />
|
||
</div>
|
||
<div class="group_16 flex-col justify-between">
|
||
<div class="block_2 flex-row">
|
||
<span class="text_38">完善个人资料</span>
|
||
<img class="label_15" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPngf317211537d27a4970d7d242f380a5412bae398ad35d8d2b773f691131e41b3a.png" />
|
||
<span class="text_39">+10</span>
|
||
</div>
|
||
<span class="text_40">首次注册登录，并完成实名认证</span>
|
||
</div>
|
||
<div class="text-wrapper_5 flex-col"><span class="text_41">做任务</span></div>
|
||
</div>
|
||
<div class="box_12 flex-row">
|
||
<div class="image-wrapper_4 flex-col">
|
||
<img class="label_16" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPng79da5ab43b0d604a30d984731a3d0d5bb85c9298a3583de8575fa9af1b7fdb14.png" />
|
||
</div>
|
||
<div class="box_13 flex-col justify-between">
|
||
<div class="section_3 flex-row">
|
||
<span class="text_42">首次报名学习课程</span>
|
||
<img class="label_17" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPngf317211537d27a4970d7d242f380a5412bae398ad35d8d2b773f691131e41b3a.png" />
|
||
<span class="text_43">+20</span>
|
||
</div>
|
||
<span class="text_44">首次注册登录，并完成实名认证</span>
|
||
</div>
|
||
<div class="text-wrapper_6 flex-col"><span class="text_45">待领取</span></div>
|
||
</div>
|
||
<div class="box_14 flex-row">
|
||
<div class="image-wrapper_5 flex-col">
|
||
<img class="label_18" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPng0d792f64b66b07c22a6bda56aea3c84f6ace26175305907b48ab1e663acdf7e7.png" />
|
||
</div>
|
||
<div class="group_17 flex-col justify-between">
|
||
<div class="box_15 flex-row">
|
||
<span class="text_46">首次发表评论</span>
|
||
<img class="label_19" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPngf317211537d27a4970d7d242f380a5412bae398ad35d8d2b773f691131e41b3a.png" />
|
||
<span class="text_47">+10</span>
|
||
</div>
|
||
<span class="text_48">在课程评论区首次完成评论，评论内容需有效，禁止灌水广告等违规内容</span>
|
||
</div>
|
||
<div class="text-wrapper_7 flex-col"><span class="text_49">待领取</span></div>
|
||
</div>
|
||
<div class="box_16 flex-row">
|
||
<div class="image-wrapper_6 flex-col">
|
||
<img class="label_20" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPngd450c70d8ebdefd1a0d3e687093063ebf7dffba73e995e7073270d294f00a363.png" />
|
||
</div>
|
||
<div class="group_18 flex-col justify-between">
|
||
<div class="section_4 flex-row">
|
||
<span class="text_50">首次发布学习笔记</span>
|
||
<img class="label_21" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPngf317211537d27a4970d7d242f380a5412bae398ad35d8d2b773f691131e41b3a.png" />
|
||
<span class="text_51">+10</span>
|
||
</div>
|
||
<span class="text_52">首次注册登录，并完成实名认证</span>
|
||
</div>
|
||
<div class="text-wrapper_8 flex-col"><span class="text_53">做任务</span></div>
|
||
</div>
|
||
<span class="text_54">日常任务</span>
|
||
<img class="image_8" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPngdc50d163a50a5a37461e082e887a02706cab843b14f2c65008b7a169588cb26e.png" />
|
||
<div class="box_17 flex-row">
|
||
<div class="image-wrapper_7 flex-col">
|
||
<img class="label_22" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPng56be8e57450cb3a2167e30009f1ebf614e4d992059f2c3f2117b857da9e940f0.png" />
|
||
</div>
|
||
<div class="text-group_1 flex-col justify-between">
|
||
<span class="text_55">日常学习，累计观看视频30分钟</span>
|
||
<span class="text_56">首次注册登录，并完成实名认证</span>
|
||
</div>
|
||
<img class="label_23" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPngf317211537d27a4970d7d242f380a5412bae398ad35d8d2b773f691131e41b3a.png" />
|
||
<span class="text_57">+10</span>
|
||
<div class="text-wrapper_9 flex-col"><span class="text_58">做任务</span></div>
|
||
</div>
|
||
<div class="box_18 flex-row">
|
||
<div class="image-wrapper_8 flex-col">
|
||
<img class="label_24" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPng0d792f64b66b07c22a6bda56aea3c84f6ace26175305907b48ab1e663acdf7e7.png" />
|
||
</div>
|
||
<div class="box_19 flex-col justify-between">
|
||
<div class="box_20 flex-row">
|
||
<span class="text_59">日常发评论</span>
|
||
<img class="label_25" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPngf317211537d27a4970d7d242f380a5412bae398ad35d8d2b773f691131e41b3a.png" />
|
||
<span class="text_60">+10</span>
|
||
</div>
|
||
<span class="text_61">首次注册登录，并完成实名认证</span>
|
||
</div>
|
||
<div class="text-wrapper_10 flex-col"><span class="text_62">已完成</span></div>
|
||
</div>
|
||
<div class="box_21 flex-row">
|
||
<div class="image-wrapper_9 flex-col">
|
||
<img class="label_26" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPngb8074516f66fdceaa74d53f9fce999f88d97f51bc58f88b8d11124fb0957689d.png" />
|
||
</div>
|
||
<div class="box_22 flex-col justify-between">
|
||
<div class="block_3 flex-row">
|
||
<span class="text_63">提交一次作业</span>
|
||
<img class="label_27" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPngf317211537d27a4970d7d242f380a5412bae398ad35d8d2b773f691131e41b3a.png" />
|
||
<span class="text_64">+5</span>
|
||
</div>
|
||
<span class="text_65">每参与一次作业提交加5分，每天上限20分</span>
|
||
</div>
|
||
<div class="text-wrapper_11 flex-col"><span class="text_66">已完成</span></div>
|
||
</div>
|
||
<div class="box_23 flex-row">
|
||
<div class="image-wrapper_10 flex-col">
|
||
<img class="label_28" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPng76309bc69f7a7f45116514af7e4467268ec0a1f0618f38ded979f72c6753a113.png" />
|
||
</div>
|
||
<div class="group_19 flex-col justify-between">
|
||
<div class="box_24 flex-row">
|
||
<span class="text_67">参与一次练习/考试</span>
|
||
<img class="label_29" referrerpolicy="no-referrer"
|
||
src="../assets/img/SketchPngf317211537d27a4970d7d242f380a5412bae398ad35d8d2b773f691131e41b3a.png" />
|
||
<span class="text_68">+10</span>
|
||
</div>
|
||
<span class="text_69">每参与一次练习/考试加10分，每天上限50分</span>
|
||
</div>
|
||
<div class="text-wrapper_12 flex-col"><span class="text_70">已完成</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 规则说明 -->
|
||
<div v-if="currentView === 'rules'" class="rules-container">
|
||
<div class="rule-section">
|
||
<h4>一. 如何领取智点</h4>
|
||
<p>完成新手任务或日常任务和进行每日签到等各种任务可获得相应智点。完成积分任务后，点击领取智点自动到账，由于数据可能存在延迟，若未及时到账，可等几分钟后重新进入页面查看，若依旧无法领取，可联系客服反馈。</p>
|
||
</div>
|
||
<div class="rule-section">
|
||
<h4>二. 兑换说明</h4>
|
||
<p>智点可以在报名“AI伴学”课程时进行抵扣解锁课程。</p>
|
||
</div>
|
||
<div class="rule-section">
|
||
<h4>三. 积分失效</h4>
|
||
<p>在没有特别说明的情况下，平台的智点有效期为12个月：即每年9月获得学币，需要在次年9月1日之前使用，否则失效。</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 积分明细 -->
|
||
<div v-if="currentView === 'details'" class="details-container">
|
||
<div class="details-header">
|
||
<h2>积分明细</h2>
|
||
<div class="time-filter">
|
||
<span>时间</span>
|
||
<span class="dropdown-arrow">▼</span>
|
||
</div>
|
||
</div>
|
||
<div class="details-table">
|
||
<div class="table-header">
|
||
<div class="header-cell">详细说明</div>
|
||
<div class="header-cell">收入/支出时间</div>
|
||
<div class="header-cell">收入/支出智点</div>
|
||
<div class="header-cell">余额</div>
|
||
</div>
|
||
<div class="table-row" v-for="(item, index) in pointsDetails" :key="index">
|
||
<div class="table-cell">{{ item.description }}</div>
|
||
<div class="table-cell">{{ item.time }}</div>
|
||
<div class="table-cell" :class="item.type">{{ item.points }}</div>
|
||
<div class="table-cell">{{ item.balance }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
constants: {},
|
||
currentView: 'home', // 当前显示的视图：'home', 'rules', 'details'
|
||
pointsDetails: [
|
||
{
|
||
description: '新手大礼包',
|
||
time: '2025.08.06 20:54',
|
||
points: '+100',
|
||
type: 'income',
|
||
balance: '100'
|
||
},
|
||
{
|
||
description: '完善个人资料',
|
||
time: '2025.08.08 22:03',
|
||
points: '+10',
|
||
type: 'income',
|
||
balance: '110'
|
||
},
|
||
{
|
||
description: '签到成功',
|
||
time: '2025.08.09 10:03',
|
||
points: '+2',
|
||
type: 'income',
|
||
balance: '112'
|
||
},
|
||
{
|
||
description: '首次报名学习课程',
|
||
time: '2025.08.09 10:14',
|
||
points: '+20',
|
||
type: 'income',
|
||
balance: '132'
|
||
},
|
||
{
|
||
description: '报名学习《暑期名师领学,提高班级教...》',
|
||
time: '2025.08.09 10:20',
|
||
points: '-29',
|
||
type: 'expense',
|
||
balance: '103'
|
||
}
|
||
]
|
||
};
|
||
},
|
||
methods: {
|
||
switchToRules() {
|
||
this.currentView = 'rules';
|
||
},
|
||
switchToDetails() {
|
||
this.currentView = 'details';
|
||
},
|
||
switchToHome() {
|
||
this.currentView = 'home';
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped lang="css">
|
||
body * {
|
||
box-sizing: border-box;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
body {
|
||
font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC-Light, Microsoft YaHei;
|
||
}
|
||
|
||
button {
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 1px solid transparent;
|
||
outline: none;
|
||
background-color: transparent;
|
||
}
|
||
|
||
button:active {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.flex-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.flex-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.justify-start {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.justify-center {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.justify-end {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.justify-evenly {
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
}
|
||
|
||
.justify-around {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.justify-between {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.align-start {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.align-center {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.align-end {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
|
||
.page {
|
||
/* background-color: rgba(255, 255, 255, 1); */
|
||
position: relative;
|
||
width: 100%;
|
||
height: 2047px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.box_1 {
|
||
box-shadow: 0px 2px 13px 0px rgba(229, 229, 229, 0.5);
|
||
height: 70px;
|
||
width: 1920px;
|
||
}
|
||
|
||
.box_2 {
|
||
height: 70px;
|
||
width: 1920px;
|
||
}
|
||
|
||
.group_1 {
|
||
position: relative;
|
||
width: 1920px;
|
||
height: 70px;
|
||
background: url(../assets/img/SketchPng6e7499038fe50878492d829d9775b9aa2d5a385bae4c040e1ffdffdfa031d668.png) 0px 0px no-repeat;
|
||
background-size: 1920px 85px;
|
||
justify-content: flex-center;
|
||
}
|
||
|
||
.image_1 {
|
||
width: 72px;
|
||
height: 61px;
|
||
margin: 4px 0 0 30px;
|
||
}
|
||
|
||
.text_1 {
|
||
width: 36px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 23px 0 0 38px;
|
||
}
|
||
|
||
.group_2 {
|
||
position: relative;
|
||
width: 621px;
|
||
height: 31px;
|
||
margin: 23px 0 0 14px;
|
||
}
|
||
|
||
.thumbnail_1 {
|
||
width: 15px;
|
||
height: 16px;
|
||
margin: 4px 0 0 34px;
|
||
}
|
||
|
||
.text_2 {
|
||
width: 72px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin-left: 6px;
|
||
}
|
||
|
||
.text_3 {
|
||
width: 72px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin-left: 48px;
|
||
}
|
||
|
||
.text_4 {
|
||
width: 72px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin-left: 48px;
|
||
}
|
||
|
||
.text_5 {
|
||
width: 72px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin-left: 48px;
|
||
}
|
||
|
||
.text_6 {
|
||
width: 36px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 0 50px 0 48px;
|
||
}
|
||
|
||
.image-wrapper_1 {
|
||
height: 18px;
|
||
background: url(../assets/img/SketchPnga2a271e1fd4f68df58a9c29bfc854f269f7a46449157ef1bac4bbdfb386289b3.png) -13px -11px no-repeat;
|
||
background-size: 68px 44px;
|
||
width: 42px;
|
||
position: absolute;
|
||
left: 574px;
|
||
top: -9px;
|
||
}
|
||
|
||
.image_2 {
|
||
width: 22px;
|
||
height: 7px;
|
||
margin: 6px 0 0 10px;
|
||
}
|
||
|
||
.image_3 {
|
||
width: 50px;
|
||
height: 28px;
|
||
margin: 20px 0 0 15px;
|
||
}
|
||
|
||
.text_7 {
|
||
width: 53px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 24px 0 0 -27px;
|
||
}
|
||
|
||
.image_4 {
|
||
width: 24px;
|
||
height: 20px;
|
||
margin: 24px 0 0 45px;
|
||
}
|
||
|
||
.text_8 {
|
||
width: 53px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 24px 0 0 6px;
|
||
}
|
||
|
||
.image_5 {
|
||
width: 1px;
|
||
height: 70px;
|
||
margin-left: 61px;
|
||
}
|
||
|
||
.thumbnail_2 {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin: 27px 0 0 22px;
|
||
}
|
||
|
||
.text_9 {
|
||
width: 126px;
|
||
height: 20px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 14px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 20px;
|
||
margin: 24px 0 0 14px;
|
||
}
|
||
|
||
.image_6 {
|
||
width: 1px;
|
||
height: 70px;
|
||
margin-left: 103px;
|
||
}
|
||
|
||
.thumbnail_3 {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin: 27px 0 0 120px;
|
||
}
|
||
|
||
.text_10 {
|
||
width: 72px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 24px 0 0 6px;
|
||
}
|
||
|
||
.label_1 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin: 24px 0 0 24px;
|
||
}
|
||
|
||
.text_11 {
|
||
width: 72px;
|
||
height: 25px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 136, 209, 1);
|
||
font-size: 18px;
|
||
font-family: PingFangSC-Medium;
|
||
font-weight: 500;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 25px;
|
||
margin: 23px 0 0 6px;
|
||
}
|
||
|
||
.label_2 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin: 24px 0 0 24px;
|
||
}
|
||
|
||
.text_12 {
|
||
width: 54px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 24px 0 0 6px;
|
||
}
|
||
|
||
.label_3 {
|
||
width: 42px;
|
||
height: 42px;
|
||
margin: 14px 30px 0 24px;
|
||
}
|
||
|
||
.group_3 {
|
||
position: absolute;
|
||
left: 825px;
|
||
top: 20px;
|
||
width: 88px;
|
||
height: 30px;
|
||
}
|
||
|
||
.group_4 {
|
||
position: absolute;
|
||
left: 945px;
|
||
top: 20px;
|
||
width: 88px;
|
||
height: 30px;
|
||
}
|
||
|
||
.box_3 {
|
||
width: 100%;
|
||
height: 1977px;
|
||
background: url(../assets/img/SketchPngc62587e39aa1180cde132cca80f0c79f9e16c87b1ad383fbb1c657fc8cc9d70a.png) 100% no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.text-wrapper_1 {
|
||
background-image: url(../assets/img/eb01161fa49749e0a0ea087fb6f07ac2_mergeImage.png);
|
||
width: 100%;
|
||
height: 163px;
|
||
}
|
||
|
||
.text_13 {
|
||
width: 128px;
|
||
height: 39px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 32px;
|
||
font-family: AlimamaShuHeiTi-Bold;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 39px;
|
||
margin: 51px 0 0 796px;
|
||
}
|
||
|
||
.text_14 {
|
||
width: 224px;
|
||
height: 20px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 14px;
|
||
font-weight: NaN;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 20px;
|
||
margin: 12px 0 41px 748px;
|
||
}
|
||
|
||
.box_4 {
|
||
width: 1420px;
|
||
height: 152px;
|
||
margin: 35px 0 0 130px;
|
||
}
|
||
|
||
.section_1 {
|
||
background-color: rgba(255, 255, 255, 0.3);
|
||
border-radius: 2px;
|
||
height: 152px;
|
||
border: 2px solid rgba(255, 255, 255, 1);
|
||
width: 432px;
|
||
}
|
||
|
||
.group_5 {
|
||
width: 392px;
|
||
height: 28px;
|
||
margin: 35px 0 0 38px;
|
||
}
|
||
|
||
.text_15 {
|
||
width: 80px;
|
||
height: 22px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(102, 102, 102, 1);
|
||
font-size: 16px;
|
||
font-family: PingFangSC-Medium;
|
||
font-weight: 500;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 22px;
|
||
margin-top: 3px;
|
||
}
|
||
|
||
.box_5 {
|
||
background-color: rgba(217, 241, 255, 1);
|
||
border-radius: 14px 0px 0px 14px;
|
||
width: 72px;
|
||
height: 28px;
|
||
}
|
||
|
||
.thumbnail_4 {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin: 6px 0 0 7px;
|
||
}
|
||
|
||
.text_16 {
|
||
width: 32px;
|
||
height: 16px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 136, 209, 1);
|
||
font-size: 16px;
|
||
font-family: PingFangSC-Medium;
|
||
font-weight: 500;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 16px;
|
||
margin: 6px 11px 0 6px;
|
||
}
|
||
|
||
.group_6 {
|
||
width: 180px;
|
||
height: 40px;
|
||
margin: 12px 0 37px 38px;
|
||
}
|
||
|
||
.label_4 {
|
||
width: 32px;
|
||
height: 32px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.text_17 {
|
||
width: 90px;
|
||
height: 40px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 36px;
|
||
font-family: PingFangSC-Semibold;
|
||
font-weight: 600;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 40px;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.text_18 {
|
||
width: 42px;
|
||
height: 20px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(102, 102, 102, 1);
|
||
font-size: 14px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 20px;
|
||
margin: 16px 0 0 20px;
|
||
}
|
||
|
||
.section_2 {
|
||
background-color: rgba(255, 255, 255, 0.3);
|
||
border-radius: 2px;
|
||
width: 964px;
|
||
height: 152px;
|
||
border: 2px solid rgba(255, 255, 255, 1);
|
||
}
|
||
|
||
.text_19 {
|
||
width: 198px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 69px 0 0 64px;
|
||
}
|
||
|
||
.text_20 {
|
||
width: 22px;
|
||
height: 50px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 136, 209, 1);
|
||
font-size: 36px;
|
||
font-family: PingFangSC-Semibold;
|
||
font-weight: 600;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 50px;
|
||
margin: 51px 0 0 -47px;
|
||
}
|
||
|
||
.group_7 {
|
||
background-color: rgba(225, 225, 225, 1);
|
||
border-radius: 2px;
|
||
height: 56px;
|
||
width: 48px;
|
||
position: relative;
|
||
margin: 56px 0 0 57px;
|
||
}
|
||
|
||
.text_21 {
|
||
width: 36px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 24px 0 0 6px;
|
||
}
|
||
|
||
.label_5 {
|
||
position: absolute;
|
||
left: 8px;
|
||
top: -16px;
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
.group_8 {
|
||
background-color: rgba(225, 225, 225, 1);
|
||
border-radius: 2px;
|
||
height: 56px;
|
||
width: 48px;
|
||
position: relative;
|
||
margin: 56px 0 0 16px;
|
||
}
|
||
|
||
.text_22 {
|
||
width: 36px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 24px 0 0 6px;
|
||
}
|
||
|
||
.label_6 {
|
||
position: absolute;
|
||
left: 8px;
|
||
top: -16px;
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
.group_9 {
|
||
height: 56px;
|
||
background: url(../assets/img/SketchPng572fdf3739f55412f3bba5a4df83b80c9d066d746a842605cc97b6a7651963f1.png) 100% no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 48px;
|
||
position: relative;
|
||
margin: 56px 0 0 16px;
|
||
}
|
||
|
||
.text_23 {
|
||
width: 22px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 136, 209, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 24px 0 0 13px;
|
||
}
|
||
|
||
.label_7 {
|
||
position: absolute;
|
||
left: 8px;
|
||
top: -16px;
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
.group_10 {
|
||
height: 56px;
|
||
background: url(../img/SketchPng572fdf3739f55412f3bba5a4df83b80c9d066d746a842605cc97b6a7651963f1.png) 100% no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 48px;
|
||
position: relative;
|
||
margin: 56px 0 0 16px;
|
||
}
|
||
|
||
.text_24 {
|
||
width: 22px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 136, 209, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 24px 0 0 13px;
|
||
}
|
||
|
||
.label_8 {
|
||
position: absolute;
|
||
left: 8px;
|
||
top: -16px;
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
.group_11 {
|
||
background-color: rgba(225, 225, 225, 1);
|
||
border-radius: 2px;
|
||
height: 56px;
|
||
width: 48px;
|
||
position: relative;
|
||
margin: 56px 0 0 16px;
|
||
}
|
||
|
||
.text_25 {
|
||
width: 22px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 24px 0 0 13px;
|
||
}
|
||
|
||
.label_9 {
|
||
position: absolute;
|
||
left: 8px;
|
||
top: -16px;
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
.group_12 {
|
||
background-color: rgba(225, 225, 225, 1);
|
||
border-radius: 2px;
|
||
height: 56px;
|
||
width: 48px;
|
||
position: relative;
|
||
margin: 56px 0 0 16px;
|
||
}
|
||
|
||
.text_26 {
|
||
width: 22px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 24px 0 0 13px;
|
||
}
|
||
|
||
.label_10 {
|
||
position: absolute;
|
||
left: 8px;
|
||
top: -16px;
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
.group_13 {
|
||
background-color: rgba(225, 225, 225, 1);
|
||
border-radius: 2px;
|
||
height: 56px;
|
||
width: 48px;
|
||
position: relative;
|
||
margin: 56px 0 0 16px;
|
||
}
|
||
|
||
.text_27 {
|
||
width: 22px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 24px 0 0 13px;
|
||
}
|
||
|
||
.label_11 {
|
||
position: absolute;
|
||
left: 8px;
|
||
top: -16px;
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
.group_14 {
|
||
background-image: url(../assets/img/f09a054de74c4e2eaba4cbeaec1487ad_mergeImage.png);
|
||
width: 152px;
|
||
height: 152px;
|
||
margin-left: 86px;
|
||
}
|
||
|
||
.box_6 {
|
||
background-color: rgba(255, 255, 255, 0.3);
|
||
border-radius: 2px;
|
||
width: 1420px;
|
||
height: 152px;
|
||
border: 2px solid rgba(255, 255, 255, 1);
|
||
margin: 24px 0 0 130px;
|
||
}
|
||
|
||
.text-wrapper_2 {
|
||
width: 1340px;
|
||
height: 24px;
|
||
margin: 40px 0 0 40px;
|
||
}
|
||
|
||
.text_28 {
|
||
width: 512px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.text_29 {
|
||
width: 106px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(7, 139, 210, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.block_1 {
|
||
background-color: rgba(226, 245, 255, 1);
|
||
border-radius: 5px;
|
||
height: 8px;
|
||
width: 1340px;
|
||
margin: 22px 0 0 40px;
|
||
}
|
||
|
||
.box_7 {
|
||
background-color: rgba(7, 139, 210, 1);
|
||
border-radius: 5px;
|
||
width: 360px;
|
||
height: 8px;
|
||
}
|
||
|
||
.text-wrapper_3 {
|
||
width: 1340px;
|
||
height: 22px;
|
||
margin: 9px 0 27px 40px;
|
||
}
|
||
|
||
.text_30 {
|
||
width: 96px;
|
||
height: 20px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 16px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 20px;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.text_31 {
|
||
width: 10px;
|
||
height: 22px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 16px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 22px;
|
||
margin-left: 1209px;
|
||
}
|
||
|
||
.text_32 {
|
||
width: 18px;
|
||
height: 22px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 16px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 22px;
|
||
margin-left: 7px;
|
||
}
|
||
|
||
.box_8 {
|
||
background-color: rgba(255, 255, 255, 0.3);
|
||
border-radius: 2px;
|
||
width: 1420px;
|
||
height: 1106px;
|
||
border: 2px solid rgba(255, 255, 255, 1);
|
||
margin: 24px 0 0 130px;
|
||
}
|
||
|
||
.text_33 {
|
||
width: 104px;
|
||
height: 33px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 24px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 33px;
|
||
margin: 40px 0 0 40px;
|
||
}
|
||
|
||
.image_7 {
|
||
width: 1340px;
|
||
height: 1px;
|
||
margin: 24px 0 0 40px;
|
||
}
|
||
|
||
.box_9 {
|
||
width: 1340px;
|
||
height: 56px;
|
||
margin: 32px 0 0 40px;
|
||
}
|
||
|
||
.image-wrapper_2 {
|
||
background-color: rgba(226, 245, 255, 1);
|
||
border-radius: 50%;
|
||
height: 56px;
|
||
width: 56px;
|
||
}
|
||
|
||
.label_12 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin: 16px 0 0 16px;
|
||
}
|
||
|
||
.box_10 {
|
||
width: 224px;
|
||
height: 52px;
|
||
margin: 2px 0 0 16px;
|
||
}
|
||
|
||
.group_15 {
|
||
width: 175px;
|
||
height: 24px;
|
||
}
|
||
|
||
.text_34 {
|
||
width: 90px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.label_13 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-left: 16px;
|
||
}
|
||
|
||
.text_35 {
|
||
width: 41px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(7, 139, 210, 1);
|
||
font-size: 18px;
|
||
font-family: Helvetica;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.text_36 {
|
||
width: 224px;
|
||
height: 20px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 16px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 20px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.text-wrapper_4 {
|
||
background-color: rgba(225, 225, 225, 1);
|
||
border-radius: 20px;
|
||
height: 40px;
|
||
width: 128px;
|
||
margin: 8px 0 0 916px;
|
||
}
|
||
|
||
.text_37 {
|
||
width: 54px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 8px 0 0 37px;
|
||
}
|
||
|
||
.box_11 {
|
||
width: 1340px;
|
||
height: 56px;
|
||
margin: 40px 0 0 40px;
|
||
}
|
||
|
||
.image-wrapper_3 {
|
||
background-color: rgba(226, 245, 255, 1);
|
||
border-radius: 50%;
|
||
height: 56px;
|
||
width: 56px;
|
||
}
|
||
|
||
.label_14 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin: 16px 0 0 16px;
|
||
}
|
||
|
||
.group_16 {
|
||
width: 224px;
|
||
height: 52px;
|
||
margin: 2px 0 0 16px;
|
||
}
|
||
|
||
.block_2 {
|
||
width: 183px;
|
||
height: 24px;
|
||
}
|
||
|
||
.text_38 {
|
||
width: 108px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.label_15 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-left: 16px;
|
||
}
|
||
|
||
.text_39 {
|
||
width: 31px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(7, 139, 210, 1);
|
||
font-size: 18px;
|
||
font-family: Helvetica;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.text_40 {
|
||
width: 224px;
|
||
height: 20px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 16px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 20px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.text-wrapper_5 {
|
||
background-color: rgba(7, 139, 210, 1);
|
||
border-radius: 20px;
|
||
height: 40px;
|
||
width: 128px;
|
||
margin: 8px 0 0 916px;
|
||
}
|
||
|
||
.text_41 {
|
||
width: 54px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 8px 0 0 37px;
|
||
}
|
||
|
||
.box_12 {
|
||
width: 1340px;
|
||
height: 56px;
|
||
margin: 40px 0 0 40px;
|
||
}
|
||
|
||
.image-wrapper_4 {
|
||
background-color: rgba(226, 245, 255, 1);
|
||
border-radius: 50%;
|
||
height: 56px;
|
||
width: 56px;
|
||
}
|
||
|
||
.label_16 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin: 16px 0 0 16px;
|
||
}
|
||
|
||
.box_13 {
|
||
width: 224px;
|
||
height: 52px;
|
||
margin: 2px 0 0 16px;
|
||
}
|
||
|
||
.section_3 {
|
||
width: 219px;
|
||
height: 24px;
|
||
}
|
||
|
||
.text_42 {
|
||
width: 144px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.label_17 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-left: 16px;
|
||
}
|
||
|
||
.text_43 {
|
||
width: 31px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(7, 139, 210, 1);
|
||
font-size: 18px;
|
||
font-family: Helvetica;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.text_44 {
|
||
width: 224px;
|
||
height: 20px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 16px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 20px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.text-wrapper_6 {
|
||
background-color: rgba(226, 245, 255, 1);
|
||
border-radius: 20px;
|
||
height: 40px;
|
||
width: 128px;
|
||
margin: 8px 0 0 916px;
|
||
}
|
||
|
||
.text_45 {
|
||
width: 54px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(7, 139, 210, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 8px 0 0 37px;
|
||
}
|
||
|
||
.box_14 {
|
||
width: 1340px;
|
||
height: 56px;
|
||
margin: 40px 0 0 40px;
|
||
}
|
||
|
||
.image-wrapper_5 {
|
||
background-color: rgba(226, 245, 255, 1);
|
||
border-radius: 50%;
|
||
height: 56px;
|
||
width: 56px;
|
||
}
|
||
|
||
.label_18 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin: 16px 0 0 16px;
|
||
}
|
||
|
||
.group_17 {
|
||
width: 512px;
|
||
height: 52px;
|
||
margin: 2px 0 0 16px;
|
||
}
|
||
|
||
.box_15 {
|
||
width: 183px;
|
||
height: 24px;
|
||
}
|
||
|
||
.text_46 {
|
||
width: 108px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.label_19 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-left: 16px;
|
||
}
|
||
|
||
.text_47 {
|
||
width: 31px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(7, 139, 210, 1);
|
||
font-size: 18px;
|
||
font-family: Helvetica;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.text_48 {
|
||
width: 512px;
|
||
height: 20px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 16px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 20px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.text-wrapper_7 {
|
||
background-color: rgba(226, 245, 255, 1);
|
||
border-radius: 20px;
|
||
height: 40px;
|
||
width: 128px;
|
||
margin: 8px 0 0 628px;
|
||
}
|
||
|
||
.text_49 {
|
||
width: 54px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(7, 139, 210, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 8px 0 0 37px;
|
||
}
|
||
|
||
.box_16 {
|
||
width: 1340px;
|
||
height: 56px;
|
||
margin: 40px 0 0 40px;
|
||
}
|
||
|
||
.image-wrapper_6 {
|
||
background-color: rgba(226, 245, 255, 1);
|
||
border-radius: 50%;
|
||
height: 56px;
|
||
width: 56px;
|
||
}
|
||
|
||
.label_20 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin: 16px 0 0 16px;
|
||
}
|
||
|
||
.group_18 {
|
||
width: 224px;
|
||
height: 52px;
|
||
margin: 2px 0 0 16px;
|
||
}
|
||
|
||
.section_4 {
|
||
width: 219px;
|
||
height: 24px;
|
||
}
|
||
|
||
.text_50 {
|
||
width: 144px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.label_21 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-left: 16px;
|
||
}
|
||
|
||
.text_51 {
|
||
width: 31px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(7, 139, 210, 1);
|
||
font-size: 18px;
|
||
font-family: Helvetica;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.text_52 {
|
||
width: 224px;
|
||
height: 20px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 16px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 20px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.text-wrapper_8 {
|
||
background-color: rgba(7, 139, 210, 1);
|
||
border-radius: 20px;
|
||
height: 40px;
|
||
width: 128px;
|
||
margin: 8px 0 0 916px;
|
||
}
|
||
|
||
.text_53 {
|
||
width: 54px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 8px 0 0 37px;
|
||
}
|
||
|
||
.text_54 {
|
||
width: 104px;
|
||
height: 33px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 24px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 33px;
|
||
margin: 64px 0 0 40px;
|
||
}
|
||
|
||
.image_8 {
|
||
width: 1340px;
|
||
height: 1px;
|
||
margin: 24px 0 0 40px;
|
||
}
|
||
|
||
.box_17 {
|
||
width: 1340px;
|
||
height: 56px;
|
||
margin: 32px 0 0 40px;
|
||
}
|
||
|
||
.image-wrapper_7 {
|
||
background-color: rgba(226, 245, 255, 1);
|
||
border-radius: 50%;
|
||
height: 56px;
|
||
width: 56px;
|
||
}
|
||
|
||
.label_22 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin: 16px 0 0 16px;
|
||
}
|
||
|
||
.text-group_1 {
|
||
width: 256px;
|
||
height: 52px;
|
||
margin: 2px 0 0 16px;
|
||
}
|
||
|
||
.text_55 {
|
||
width: 256px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.text_56 {
|
||
width: 224px;
|
||
height: 20px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 16px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 20px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.label_23 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin: 2px 0 0 16px;
|
||
}
|
||
|
||
.text_57 {
|
||
width: 31px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(7, 139, 210, 1);
|
||
font-size: 18px;
|
||
font-family: Helvetica;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 2px 0 0 4px;
|
||
}
|
||
|
||
.text-wrapper_9 {
|
||
background-color: rgba(7, 139, 210, 1);
|
||
border-radius: 20px;
|
||
height: 40px;
|
||
width: 128px;
|
||
margin: 8px 0 0 809px;
|
||
}
|
||
|
||
.text_58 {
|
||
width: 54px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 8px 0 0 37px;
|
||
}
|
||
|
||
.box_18 {
|
||
width: 1340px;
|
||
height: 56px;
|
||
margin: 40px 0 0 40px;
|
||
}
|
||
|
||
.image-wrapper_8 {
|
||
background-color: rgba(226, 245, 255, 1);
|
||
border-radius: 50%;
|
||
height: 56px;
|
||
width: 56px;
|
||
}
|
||
|
||
.label_24 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin: 16px 0 0 16px;
|
||
}
|
||
|
||
.box_19 {
|
||
width: 224px;
|
||
height: 52px;
|
||
margin: 2px 0 0 16px;
|
||
}
|
||
|
||
.box_20 {
|
||
width: 165px;
|
||
height: 24px;
|
||
}
|
||
|
||
.text_59 {
|
||
width: 90px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.label_25 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-left: 16px;
|
||
}
|
||
|
||
.text_60 {
|
||
width: 31px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(7, 139, 210, 1);
|
||
font-size: 18px;
|
||
font-family: Helvetica;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.text_61 {
|
||
width: 224px;
|
||
height: 20px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 16px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 20px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.text-wrapper_10 {
|
||
background-color: rgba(225, 225, 225, 1);
|
||
border-radius: 20px;
|
||
height: 40px;
|
||
width: 128px;
|
||
margin: 8px 0 0 916px;
|
||
}
|
||
|
||
.text_62 {
|
||
width: 54px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 8px 0 0 37px;
|
||
}
|
||
|
||
.box_21 {
|
||
width: 1340px;
|
||
height: 56px;
|
||
margin: 40px 0 0 40px;
|
||
}
|
||
|
||
.image-wrapper_9 {
|
||
background-color: rgba(226, 245, 255, 1);
|
||
border-radius: 50%;
|
||
height: 56px;
|
||
width: 56px;
|
||
}
|
||
|
||
.label_26 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin: 16px 0 0 16px;
|
||
}
|
||
|
||
.box_22 {
|
||
width: 301px;
|
||
height: 52px;
|
||
margin: 2px 0 0 16px;
|
||
}
|
||
|
||
.block_3 {
|
||
width: 173px;
|
||
height: 24px;
|
||
}
|
||
|
||
.text_63 {
|
||
width: 108px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.label_27 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-left: 16px;
|
||
}
|
||
|
||
.text_64 {
|
||
width: 21px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(7, 139, 210, 1);
|
||
font-size: 18px;
|
||
font-family: Helvetica;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.text_65 {
|
||
width: 301px;
|
||
height: 20px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 16px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 20px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.text-wrapper_11 {
|
||
background-color: rgba(225, 225, 225, 1);
|
||
border-radius: 20px;
|
||
height: 40px;
|
||
width: 128px;
|
||
margin: 8px 0 0 839px;
|
||
}
|
||
|
||
.text_66 {
|
||
width: 54px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 8px 0 0 37px;
|
||
}
|
||
|
||
.box_23 {
|
||
width: 1340px;
|
||
height: 56px;
|
||
margin: 40px 0 38px 40px;
|
||
}
|
||
|
||
.image-wrapper_10 {
|
||
background-color: rgba(226, 245, 255, 1);
|
||
border-radius: 50%;
|
||
height: 56px;
|
||
width: 56px;
|
||
}
|
||
|
||
.label_28 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin: 16px 0 0 16px;
|
||
}
|
||
|
||
.group_19 {
|
||
width: 316px;
|
||
height: 52px;
|
||
margin: 2px 0 0 16px;
|
||
}
|
||
|
||
.box_24 {
|
||
width: 228px;
|
||
height: 24px;
|
||
}
|
||
|
||
.text_67 {
|
||
width: 153px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.label_29 {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-left: 16px;
|
||
}
|
||
|
||
.text_68 {
|
||
width: 31px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(7, 139, 210, 1);
|
||
font-size: 18px;
|
||
font-family: Helvetica;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.text_69 {
|
||
width: 316px;
|
||
height: 20px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 16px;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 20px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.text-wrapper_12 {
|
||
background-color: rgba(225, 225, 225, 1);
|
||
border-radius: 20px;
|
||
height: 40px;
|
||
width: 128px;
|
||
margin: 8px 0 0 824px;
|
||
}
|
||
|
||
.text_70 {
|
||
width: 54px;
|
||
height: 24px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(153, 153, 153, 1);
|
||
font-size: 18px;
|
||
font-weight: NaN;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 24px;
|
||
margin: 8px 0 0 37px;
|
||
}
|
||
|
||
.box_25 {
|
||
width: 1920px;
|
||
height: 225px;
|
||
background: url(../assets/img/SketchPng1a840a0a6a91d4e9dbd409007c68a12039978f551728d58ec84418c47a3e68e5.png) 100% no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-top: 96px;
|
||
}
|
||
|
||
.image-text_1 {
|
||
width: 494px;
|
||
height: 104px;
|
||
margin: 68px 0 0 388px;
|
||
}
|
||
|
||
.image-wrapper_11 {
|
||
width: 207px;
|
||
height: 53px;
|
||
margin-left: 6px;
|
||
}
|
||
|
||
.image_9 {
|
||
width: 62px;
|
||
height: 53px;
|
||
}
|
||
|
||
.image_10 {
|
||
width: 113px;
|
||
height: 51px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.text-group_2 {
|
||
width: 494px;
|
||
height: 37px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-size: 26px;
|
||
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 30px;
|
||
margin-top: 14px;
|
||
}
|
||
|
||
.image_11 {
|
||
width: 1px;
|
||
height: 140px;
|
||
margin: 43px 0 0 78px;
|
||
}
|
||
|
||
.image_12 {
|
||
width: 108px;
|
||
height: 107px;
|
||
margin: 61px 0 0 78px;
|
||
}
|
||
|
||
.text-wrapper_13 {
|
||
width: 542px;
|
||
height: 104px;
|
||
margin: 61px 200px 0 31px;
|
||
}
|
||
|
||
.text_71 {
|
||
width: 406px;
|
||
height: 18px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-size: 18px;
|
||
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 18px;
|
||
}
|
||
|
||
.text_72 {
|
||
width: 448px;
|
||
height: 18px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-size: 18px;
|
||
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 18px;
|
||
margin-top: 25px;
|
||
}
|
||
|
||
.text_73 {
|
||
width: 542px;
|
||
height: 18px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-size: 18px;
|
||
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 18px;
|
||
margin-top: 25px;
|
||
}
|
||
|
||
/* 切换显示样式 */
|
||
.rules-container,
|
||
.details-container {
|
||
width: 1420px;
|
||
margin: 30px auto;
|
||
background: rgba(246, 246, 246, 0.3);
|
||
border: 1.5px solid #fff;
|
||
padding: 30px 20px;
|
||
}
|
||
|
||
.rules-header,
|
||
.details-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px solid #ccc;
|
||
}
|
||
|
||
.back-btn {
|
||
background: #f5f5f5;
|
||
border: 1px solid #d9d9d9;
|
||
padding: 8px 16px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
color: #666;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.back-btn:hover {
|
||
background: #e6f7ff;
|
||
border-color: #0088d1;
|
||
color: #0088d1;
|
||
}
|
||
|
||
.rules-header h2,
|
||
.details-header h2 {
|
||
margin: 0;
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
color: #000;
|
||
}
|
||
|
||
.time-filter {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 16px;
|
||
color: #000;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.time-filter:hover {
|
||
border-color: #0088d1;
|
||
}
|
||
|
||
.dropdown-arrow {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
/* 规则内容样式 */
|
||
.rules-content {
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.rule-section {
|
||
margin-bottom: 20px;
|
||
padding: 20px;
|
||
border-radius: 6px;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.rule-section:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.rule-section h4 {
|
||
font-weight: 500;
|
||
color: #000;
|
||
margin: 0 0 15px 0;
|
||
}
|
||
|
||
.rule-section p {
|
||
color: #000;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 积分明细表格样式 */
|
||
.details-table {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.table-header {
|
||
display: flex;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
|
||
.header-cell:not(:first-child) {
|
||
text-align: center;
|
||
}
|
||
|
||
.table-header .header-cell:last-child {
|
||
text-align: right;
|
||
}
|
||
|
||
.table-row .table-cell:last-child {
|
||
text-align: right;
|
||
}
|
||
|
||
.table-cell:not(:first-child) {
|
||
text-align: center;
|
||
}
|
||
|
||
.header-cell {
|
||
flex: 1;
|
||
padding: 15px 12px;
|
||
text-align: left;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.header-cell:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
.table-row {
|
||
display: flex;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
.table-row:hover {
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
.table-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.table-cell {
|
||
flex: 1;
|
||
padding: 15px 12px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.table-cell:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
.table-cell.income {
|
||
color: #ff4d4f;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.table-cell.expense {
|
||
color: #52c41a;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
|
||
.rules-container,
|
||
.details-container {
|
||
padding: 20px;
|
||
margin: 10px;
|
||
}
|
||
|
||
.rules-header,
|
||
.details-header {
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.table-header,
|
||
.table-row {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.header-cell,
|
||
.table-cell {
|
||
padding: 10px 8px;
|
||
font-size: 12px;
|
||
border-right: none;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.header-cell:last-child,
|
||
.table-cell:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
</style> |