wwbsr/pages/pledge/introduce.vue

<template>
	<v-page class="pledgeRonqi">
		<v-header class="" :border="false" :title="$t('pledge.c1')" :leftClick="()=>_router.replace('/pages/base/index')">
		</v-header>
		<view class="p-x-md p-t-md p-b-lg d-flex  align-center flex-col" style="width: 100%;">
			<view class="h-25 label d-flex align-center fn-15">{{$t('pledge.c2')}}</view>
			<view class="box-shadow bg-panel-3 m-t-sm fn-13 p-x-md p-y-sm box-content fn-center">{{$t('pledge.c3')}}</view>
			<view class="h-25 label m-t-md d-flex align-center fn-15">{{$t('pledge.c4')}}</view>
			<view class="d-flex align-stretch flex-wrap justify-between  m-t-sm" style="width: 100%;">
				<view class="box-shadow bg-panel-3 radius-5 item d-flex align-center justify-center p-xs"  style="width:48%">{{$t('pledge.c5')}}</view>
				<view class="box-shadow bg-panel-3 radius-5 item d-flex align-center justify-center p-xs"  style="width:48%">{{$t('pledge.c6')}}</view>
			</view>
			<view class="d-flex align-stretch flex-wrap justify-between m-t-sm" style="width: 100%;">
				<view class="box-shadow bg-panel-3 radius-5 item d-flex align-center justify-center p-xs"  style="width:48%">{{$t('pledge.c7')}}</view>
				<view class="box-shadow bg-panel-3 radius-5 item d-flex align-center justify-center p-xs"  style="width:48%">{{$t('pledge.c8')}}</view>
			</view>
			<view class="d-flex align-stretch  justify-between m-t-lg" style="width: 100%;">
				<view class="box-shadow bg-panel-3 radius-5 item1">
					<view class="d-flex justify-center align-center" style="width:68rpx;height:66rpx;">
						<image src="/static/img/new/pledeg_1.png" mode="widthFix" style="display: block;margin: 0 auto; width: 66rpx;height:66rpx;"></image>
					</view>
					<view class="fn-13 m-t-sm fn-center">{{$t('pledge.c9')}}</view>
				</view>
				<view class="box-shadow bg-panel-3 radius-5 item1"  style="width:36%">
					<view class="d-flex justify-center align-center" style="width:68rpx;height:66rpx;">
						<image src="/static/img/new/pledeg_2.png" mode="widthFix" style="display: block;margin: 0 auto; width: 54rpx;height:62rpx;"></image>
					</view>
					<view class="fn-13 m-t-sm fn-center">{{$t('pledge.d1')}}</view>
				</view>
				<view class="box-shadow bg-panel-3 radius-5 item1">
					<view class="d-flex justify-center align-center" style="width:68rpx;height:66rpx;">
						<image src="/static/img/new/pledeg_3.png" mode="widthFix" style="display: block;margin: 0 auto; width: 68rpx;height:48rpx;"></image>
					</view>
					<view class="fn-13 m-t-sm fn-center">{{$t('pledge.d2')}}</view>
				</view>
			</view>
			<view class="h-25 label  m-t-md d-flex align-center fn-15">{{$t('pledge.d3')}}</view>
			<view class="box-shadow bg-panel-3 m-t-sm fn-13 p-x-md p-y-sm box-content fn-center">
				<view>{{$t('pledge.d4')}}</view>
				<view>{{$t('pledge.d5')}}</view>
				<view>{{$t('pledge.d6')}}</view>
				<view>{{$t('pledge.d7')}}</view>
			</view>
			<view class="h-25 label  m-t-md d-flex align-center fn-15">{{$t('pledge.d8')}}</view>
			<view class="box-shadow bg-panel-3 m-t-sm fn-13 p-x-md p-y-sm box-content fn-center">
				<view>{{$t('pledge.d9')}}</view>
				<view>{{$t('pledge.e1')}}</view>
				<view>{{$t('pledge.e2')}}</view>
				<view></view>
			</view>
			<navigator url="./index" class="m-t-lg p-x-md btn d-flex justify-center align-center fn-15">{{$t('pledge.e3')}}</navigator>
		</view>
	</v-page>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	view{
		box-sizing: border-box;
	}
	.radius-5 {
		border-radius: 5rpx;
	}
	.btn{
		background: #DD3F62;
		border-radius: 20rpx;
		min-height:80rpx;
		color: #fff;
	}

	.label {
		border-radius: 5rpx;
		background: #DD3F62;
		padding: 0 20rpx;
		width: max-content;
		color: #fff;
	}

	.box-content {
		border-radius: 20rpx;
	}

	.item {
		min-height: 52rpx;
		width: 335rpx;
		box-sizing: border-box;
	}
	.item1{
		min-height: 180rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		width:200rpx;
	}
</style>