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

<style lang="scss">
.container-copyright {
	width: 100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	padding: 24rpx;
	background-color: #f7f7f7;
	.copyright-titi{
		width: 100%;
		height: 56rpx;
		box-sizing: border-box;
		padding: 0 140rpx;
		position: relative;
		.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: 20rpx;
				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>