1.0yangche/pages/packageOne/freeEnter/vip_introduce/vip_introduce.vue

<template>
	<view class="wrap">
		<view class="banner">
			<image src="https://wx.fujinyangche.com/nvrnetwork/images/renzheng_banner2.png"></image>
		</view>
		<view class="title">认证支付费用</view>
		<view class="zheng_money">
			<image src="https://wx.fujinyangche.com/nvrnetwork/images/zheng_money.png"></image>
		</view>
		<view class="title">认证四大权益</view>
		<view class="quanyi_list">
		    <view class="quanyi_list_item" v-for="item,index in quanyi_list" :key="index">
				<image :src="item.imgUrl"></image>
				<view class="quanyi_list_item_title">{{item.title}}</view>
		    </view>
		</view>
		<view class="back"></view>
		<view class="footer">
			<button class="submit" @tap="to_pay">立即支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				quanyi_list:[
				      { imgUrl: 'https://wx.fujinyangche.com/nvrnetwork/images/quanyi01.png', title: '店铺排名 靠前' },
				      { imgUrl: 'https://wx.fujinyangche.com/nvrnetwork/images/quanyi02.png', title: '独享营销 功能' },
				      { imgUrl: 'https://wx.fujinyangche.com/nvrnetwork/images/quanyi03.png', title: '询价优先 推荐' },
				      { imgUrl: 'https://wx.fujinyangche.com/nvrnetwork/images/quanyi04.png', title: '专属认证 标识' },
				]
			}
		},
		methods: {
			//跳转支付页面
			to_pay(){
				uni.navigateTo({
					url:'../submit_order/submit_order'
				})
			}
		}
	}
</script>

<style>
	page{
	  width:100%;
	  height:100%;
	  background-color: #f9f9f9;
	}
	.banner{
	  width:100%;
	  height:328rpx;
	}
	.banner image{
	  display: block;
	  width:100%;
	  height:100%;
	}
	.title{
	  font-size: 32rpx;
	  color:#222222;
	  text-align: center;
	  font-weight: bold;
	  padding:60rpx 0 60rpx 0;
	  background-color: #ffffff;
	}
	.zheng_money{
	  width:100%;
	  height:200rpx;
	  padding:0 30rpx;
	  box-sizing: border-box;
	  background-color: #ffffff;
	}
	.zheng_money image{
	  display: block;
	  width:100%;
	  height:100%;
	}
	.quanyi_list{
	  width:100%;
	  padding:0 46rpx 0rpx 50rpx;
	  box-sizing: border-box;
	  overflow: hidden;
	  background-color: #ffffff;
	}
	.quanyi_list_item{
	  width:90rpx;
	  display: inline-block;
	  margin:0 98rpx 60rpx 0;
	}
	.quanyi_list_item:nth-child(4n){
	  margin-right: 0;
	}
	.quanyi_list_item image{
	  display: block;
	  width:74rpx;
	  height:80rpx;
	  margin:0 auto;
	}
	.quanyi_list_item_title{
	  font-size: 22rpx;
	  color:#222222;
	  margin-top:16rpx;
	  text-align: center;
	}
	.back{
	  width:100%;
	  height:40rpx;
	  background-color: #f9f9f9;
	  padding-bottom: 100rpx;
	}
	.footer{
	  width:100%;
	  height:100rpx;
	  background:rgba(255,255,255,1);
	  box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.5);
	  position: fixed;
	  bottom:0;
	  left:0;
	}
	.submit{
	  width:690rpx;
	  height:80rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  border-radius:40rpx;
	  text-align: center;
	  font-size: 32rpx;
	  color:#ffffff;
	  position: absolute;
	  top:10rpx;
	  left:50%;
	  transform: translateX(-50%)
	}
</style>