v3-h5-web/pages_basics/views/certificate.vue

<!-- 身份验证 -->
<template>
	<view class="certificate">
		<view class="certificate-page">
			<view class="check-box">
				<view :class="checkIndex == 1 ? 'checkClass':''" @click="buttonClick(1)">iOS</view>
				<view :class="checkIndex == 2 ? 'checkClass':''" @click="buttonClick(2)">Android</view>
			</view>
			<view class="max-big-help-box" v-if="checkIndex == 1">
				<img :src="imagesUrl('certificate/IOS/1.png')" />
				<img :src="imagesUrl('certificate/IOS/2.png')" />
				<img :src="imagesUrl('certificate/IOS/3.png')" />
				<img :src="imagesUrl('certificate/IOS/4.png')" />
				<img :src="imagesUrl('certificate/IOS/5.png')" />
				<img :src="imagesUrl('certificate/IOS/6.png')" />
				<img :src="imagesUrl('certificate/IOS/7.png')" />
				<img :src="imagesUrl('certificate/IOS/8.png')" />
				<img :src="imagesUrl('certificate/IOS/9.png')" />
				<img :src="imagesUrl('certificate/IOS/10.png')" />
				<img :src="imagesUrl('certificate/IOS/11.png')" />
			</view>
			<view class="max-big-help-box" v-if="checkIndex == 2">
				<img :src="imagesUrl('certificate/Android/1.png')" />
				<img :src="imagesUrl('certificate/Android/2.png')" />
				<img :src="imagesUrl('certificate/Android/3.png')" />
				<img :src="imagesUrl('certificate/Android/4.png')" />
				<img :src="imagesUrl('certificate/Android/5.png')" />
			</view>
			<view class="button-box" @click="downloadACUrl()">
				<img :src="imagesUrl('certificate/download.png')" />
				<view>点击下载证书</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	export default {
		data() {
			return {
				checkIndex:1,
			}
		},
		onLoad() {

		},
		onShow() {
			
		},
		methods: {
			//选项卡切换
			buttonClick(val){
				if(this.checkIndex != val){
					this.$set(this,'checkIndex',val);
				}
			},
			downloadACUrl() {
        const link = document.createElement('a');
        link.href = 'https://192.168.166.11/statics/ca.crt';
        link.download = 'ca.crt';
        link.click();
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.certificate {
		height: 100%;
		width: 100%;
		flex:1;
		display: flex;
		flex-direction: column;
		overflow: hidden
		.certificate-page{
			flex:1;
			display: flex;
			flex-direction: column;
			overflow: hidden
			.button-box{
				border-top:1px solid #dedede;
				background-color: #fff;
				display: flex;
				height:120rpx;
				img{
					display: block;
					width:40rpx;
					height:40rpx;
					margin:40rpx 20rpx 20rpx 260rpx;
				}
				view{
					height:120rpx;
					line-height:120rpx;
				}
			}
			.check-box{
				display: flex;
				padding-right:20rpx;
				border-top:1px solid #dedede;
				border-bottom:1px solid #dedede;
				view{
					height:60rpx;
					line-height:58rpx;
					border:none;
					flex:1;
					margin:20rpx 0 20rpx 20rpx;
					text-align: center;
					background-color: #dedede;
					border-radius:4rpx;
				}
				.checkClass{
					background-color: #0183FA;
					color:#fff;
				}
			}
			.max-big-help-box{
				flex:1;
				overflow-y: scroll;
				overflow-x: hidden;
				img{
					display: block;
					width:700rpx;
					margin:20rpx auto 0;
				}
			}
		}
	}
</style>