siyu_app/pages/message/index2.vue

<template>
	<view>
		<es-nav-title title="消息中心" left="none" ref="esNavBg"></es-nav-title>

		<view class="es-bc-fa es-p-r" style="min-height: 1000rpx;">
			<view class="es-bc-white es-pt-30 es-pb-30 es es-center es-view-w-x es-fs-24">
				<view class="es es-ver es-ac es-pc es-ml-20 es-mr-20">
					<view class="es-icon-90">
						<view class="es-icon-90 es-icon-message-1"></view>
					</view>
					<view class="es-mt-10">客服消息</view>
					<!-- <view class="es-icon-30 es-icon-message-point es-fs-22 es-c-white es es-ac es-pc">3</view> -->
				</view>
				<view class="es es-ver es-ac es-pc es-ml-20 es-mr-20">
					<view class="es-icon-90">
						<view class="es-icon-90 es-icon-message-2"></view>
					</view>
					<view class="es-mt-10">健康贴士</view>
					<!-- <view class="es-icon-30 es-icon-message-point es-fs-22 es-c-white es es-ac es-pc">3</view> -->
				</view>
				<view class="es es-ver es-ac es-pc es-ml-20 es-mr-20">
					<view class="es-icon-90">
						<view class="es-icon-90 es-icon-message-3"></view>
					</view>
					<view class="es-mt-10">系统消息</view>
					<!-- <view class="es-icon-30 es-icon-message-point es-fs-22 es-c-white es es-ac es-pc">3</view> -->
				</view>
				<view class="es es-ver es-ac es-pc es-ml-20 es-mr-20">
					<view class="es-icon-90">
						<view class="es-icon-90 es-icon-message-4"></view>
					</view>
					<view class="es-mt-10">售后服务</view>
					<!-- <view class="es-icon-30 es-icon-message-point es-fs-22 es-c-white es es-ac es-pc">3</view> -->
				</view>
			</view>


			<view class="es-view-w-x es-mt-10">
				<view class="es-br-20 es-bc-white es-pl-23 es-pr-23 es-pt-20 es-pb-20 es es-ac es-mt-20"
					v-for="v,i in 0">
					<view class="es-icon-104 es-brc es-br">
						<image src="/static/logo.png"></image>
					</view>
					<view class="es-f1 es-ml-16">
						<view class="es es-ac">
							<view class="es-f1 es-omit">专属药师</view>
							<view class="es-fs-20 es-c-99">12:01</view>
						</view>
						<view class="es-fs-24 es-mt-4 es-omit es-c-99">本次问诊小结 诊断结果：咨询 诊断建议：非...</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-message-1 {
		background-image: url(../../static/images/other/message/1.png);
	}

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

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

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

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

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

	.es-icon-message-point {
		position: absolute;
		right: 0;
		top: 0;
	}

	.es-brc {
		border: 2px solid #FF5C03 !important;
	}
</style>