caimei-applets-caimei/pages/service/certificate-page.vue

<template>
    <!-- 资质证书 -->
    <view class="container-copyright">
    	<view class="copyright-titi">
    		<view class="copyright-line"></view>
    		<view class="copyright-image">
    			<image class="image" :src="staticUrl + '/icon/icon-logo@1x.png'"></image>
    			<view class="text">资质证书</view>
    		</view>
    	</view>
    	<view class="copyright-cell">
    		<view class="copyright-cell-item" v-for="cell in certificates" :key="cell" @click="handleClick(cell.id)">
    			{{ cell.name }}
    			<text class="iconfont icon-xiayibu"></text>
    		</view>
    	</view>
    </view>
</template>

<script>
    export default{
    	name:'certificate-page',
    	data() {
    		return{
    			staticUrl: this.$Static,
    			certificates:[
    				{name:'中华人民共和国增值电信业务经营许',id:1},
    				{name:'医疗器械网络交易服务第三方平台备案凭证',id:2},
    				{name:'互联网药品信息服务资格证编号(粤)-非经营性-2021-0339',id:3},
    			]
    		}
    	},
    	methods:{
    		handleClick(id){// 跳转资质证书
    			this.$api.navigateTo(`/pages/service/certificate?id=${id}`)
    		}
    	}
    }
</script>

<style lang="scss">
page{
    background-color: #F7F7F7;
}    
.container-copyright {
	width: 100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	padding:300rpx 24rpx 24rpx 24rpx;
	background-color: #f7f7f7;
	.copyright-titi{
		width: 100%;
		height: 56rpx;
		box-sizing: border-box;
		padding: 0 140rpx;
		position: relative;
        margin-bottom: 30rpx;
		.copyright-line{
			width: 100%;
			height: 1px;
			background: #CECECE;
			margin-top: 25rpx;
		}
		.copyright-image{
			position: absolute;
			width: 215rpx;
			left: 50%;
			top:-22rpx;
			margin-left: -130rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #f7f7f7;
			padding: 0 20rpx;
			.image {
				width: 70rpx;
				height: 68rpx;
				margin-right: 6rpx;
			}
			.text {
				font-size: 24rpx;
				color: #cccccc;
			}
		}
		
	}
	.copyright-cell{
		width: 100%;
		.copyright-cell-item{
			height: 55rpx;
			line-height: 55rpx;
			text-align: center;
			font-size: 24rpx;
			color: #999999;
			.icon-xiayibu{
				font-size: 22rpx;
			}
		}
	}
}
</style>