siyu_app/pages/user/integralMall.vue

<template>
	<view>
		<es-nav-bg title="芳华币商城" ref="esNavBg"></es-nav-bg>

		<view class="es-view-w-x es-mt-10">
			<view class="es-icon-user-bg es-h-180 es-icon-auto">
				<view class="es-view-w-x es-h-80 es es-ac">
					<view class="es-icon es-w-36 es-h-33 es-icon-user-integral"></view>
					<view class="es-f1 es-fw-500 es-fs-30 es-ml-20">我的芳华币</view>
					<view class="es-w-162 es-h-42 es-icon-user-bg1 es-icon es es-ac es-pc">
						<view class="es-icon-25 es-icon-user-btn1"></view>
						<view class="es-fs-22 es-ml-9">芳华币记录</view>
					</view>
				</view>
				<view class="es-h-100 es-view-w-x es es-ac">
					<view class="es-f1 es es-ac">
						<view class="es-fs-56 es-fw-600">123456.00</view>
						<view class="es es-ac es-mt-10 es-ml-30">
							<view class="es-icon es-w-31 es-h-25 es-icon-user-get"></view>
							<view class="es-ml-6 es-fw-600 es-fs-22 es-c">获取芳华币</view>
						</view>
					</view>
					<view class="es-w-162 es-h-42 es-icon-user-bg1 es-icon es es-ac es-pc">
						<view class="es-icon-25 es-icon-user-btn2"></view>
						<view class="es-fs-22 es-ml-9">兑换记录</view>
					</view>
				</view>
			</view>
		</view>

		<view class="es-bc-fa" style="margin-top: -100rpx;border-radius: 30rpx;min-height: 500rpx;">
			<view class="es-h-100"></view>

			<view class="es-pl-21 es-pr-21 es-mt-5">
				<view class="es es-h-90 es-ac es-fs-28" style="border-bottom: #EEEEEE solid 1px;">
					<view class="es-f1"></view>
					<block v-for="v,i in ['日用品','药品','食品','养生']">
						<view class="es-f3" v-if="i"></view>
						<view class="es es-ver es-ac es-pc">
							<view :class="i==0?'es-c es-fw-600':'es-c-99'">{{v}}</view>
							<view class="es-h-6 es-w-54 es-br es-mt-6" :class="i==0?'es-bc':''"></view>
						</view>
					</block>
					<view class="es-f1"></view>
				</view>
			</view>

			<view class="es-view-w-x con es-center">

				<view class="item es-bc-white es-br-20 es-oh es-mt-30" v-for="v,i in 10">
					<view class="es-block">
						<view class="" style="padding-top: 100%;"></view>
						<view class="es-icon-auto">
							<image src="/static/logo.png"></image>
						</view>
					</view>
					<view class="es-pl-25 es-pr-25 es-fw-500">
						<view class="es-h-84 es-mt-20">
							<view class="es-omit-2 es-fs-27">御君方山药粉 补脾养胃生津益肺 补肾益精优...</view>
						</view>
						<view class="es es-pb-22 es-mt-10">
							<view class="es-icon-23 es-h-25 es-icon-user-change"></view>
							<view class="es-c es-fs-22 es-ml-10">1230芳华币</view>
							<view class="es-f1 es-tr es-fs-22 es-c-99">原价：198元</view>
						</view>
					</view>
				</view>

			</view>

		</view>







	</view>
</template>

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


			}
		},
		onLoad(options) {


		},
		onPageScroll: function(e) {
			this.$refs.esNavBg.scrollBody(e);
		},
		methods: {


		}
	}
</script>

<style>
	.es-icon-user-integral {
		background-image: url(/static/images/other/user/integral.png);
	}

	.es-icon-user-bg {
		background-image: url(/static/images/other/user/bg.png);
	}

	.es-icon-user-bg1 {
		background-image: url(/static/images/other/user/bg1.png);
	}

	.es-icon-user-bg2 {
		background-image: url(/static/images/other/user/bg2.png);
	}

	.es-icon-user-btn1 {
		background-image: url(/static/images/other/user/btn1.png);
	}

	.es-icon-user-btn2 {
		background-image: url(/static/images/other/user/btn2.png);
	}

	.es-icon-user-change {
		background-image: url(/static/images/other/user/change.png);
	}

	.es-icon-user-get {
		background-image: url(/static/images/other/user/get.png);
	}

	.con {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.item {
		width: calc(50% - 13rpx);
	}
</style>