115 lines
2.8 KiB
Vue
115 lines
2.8 KiB
Vue
<template>
|
||
<Container backBtn logoutBtn @handleBack="backPrev">
|
||
<template #main>
|
||
<view class="page-wrap">
|
||
<view class="content-card">
|
||
<!-- 标题+右上角按钮 -->
|
||
<view class="top-row">
|
||
<view class="title">{{ info.title }}</view>
|
||
<view class="btn-take" @click="goScanCard">立即取号</view>
|
||
</view>
|
||
<!-- 部门信息 -->
|
||
<view class="dept-text">部门：{{ info.dept }}</view>
|
||
<!-- 办事详情正文 -->
|
||
<view class="desc-text">{{ info.content }}</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</Container>
|
||
</template>
|
||
|
||
<script>
|
||
import Container from '@/components/container/container.vue'
|
||
export default {
|
||
components: {
|
||
Container
|
||
},
|
||
data() {
|
||
return {
|
||
// 接收上一页传过来的业务参数，没有则默认示例数据
|
||
info: {
|
||
title: '城镇职工基本养老保险关系转移接续申请',
|
||
dept: '公积金',
|
||
content: '《住房公积金管理条例》(1999年4月3日中华人民共和国国务院令第262号发布 根据2002年3月24日《国务院关于修改<住房公积金管理条例>的决定》和2019年3月24日《国务院关于修改部分行政法规的决定》修订)： 第二十四条 职工有下列情形之一的，可以提取职工住房公积金账户内的存储余额： (一)购买、建造、翻建、大修自住住房的; (二)离休、退休的; (三)完全丧失劳动能力，并与单位终止劳动关系的;(四)出境定居的; (五)偿还购房贷款本息的; (六)房租超出家庭工资收入的规定比例的。'
|
||
}
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
// 接收业务列表页传参，动态赋值标题和内容
|
||
if (options.businessName) {
|
||
this.info.title = decodeURIComponent(options.businessName)
|
||
}
|
||
},
|
||
methods: {
|
||
// 返回上一页
|
||
backPrev() {
|
||
uni.navigateBack()
|
||
},
|
||
|
||
// 立即取号→跳转刷身份证页面
|
||
goScanCard() {
|
||
uni.showToast({
|
||
title: '取号成功',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page-wrap {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 200px 60px 150px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.content-card {
|
||
width: 100%;
|
||
height: 740px;
|
||
background: #fff;
|
||
border-radius: 60px;
|
||
padding: 30px 80px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.top-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 1vh;
|
||
}
|
||
|
||
.title {
|
||
font-size: 40px;
|
||
font-weight: bold;
|
||
color: rgba(51, 51, 51, 1);
|
||
width: 75%;
|
||
}
|
||
|
||
.btn-take {
|
||
background-color: #367bfa;
|
||
color: #fff;
|
||
font-size: 40px;
|
||
padding: 2vh 5vw;
|
||
border-radius: 999px;
|
||
}
|
||
|
||
.dept-text {
|
||
font-size: 36px;
|
||
color: rgba(51, 51, 51, 1);
|
||
margin-bottom: 3vh;
|
||
}
|
||
|
||
.desc-text {
|
||
font-size: 36px;
|
||
color: rgba(51, 51, 51, 1);
|
||
line-height: 1.8;
|
||
}
|
||
</style> |