179crm_user_app/pages_health/healthConsulting.vue

<template>
	<view class="hb column hidden container ">
		<image class="bg" src="/static/images/health_counseling_bg.png" mode="widthFix"></image>
		<view :style="{height: statusBarHeight,background: bgColor }"></view>
		<u-navbar
			title="健康咨询" titleStyle="font-weight: bold;"
			@rightClick="rightClick"
			:autoBack="true"
			:bg-color="bgColor"
		>
		</u-navbar>
		<scroll-view class="content" :scroll-y="true">
			<view v-for="(index,item) in 10" :key="index" class="healthlist justify-start">
				<image src="/static/images/71014b69fdcc4b56ae2a84bdc28f11c3.png" mode="aspectFill" class="w280 h210 radius12"></image>
				<view class="column justify-between ml20">
					<view>
						<view class="color-text bold fs36">翟佳滨教授专家团队</view>
						<view class="fs24 mt8 color-orange">专家团队会诊咨询</view>
					</view>
					<view class="healthbox" @click="toDetails">会诊咨询</view>
				</view>
			</view>
			<view class="h120"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:'',
				top:0
			}
		},
		computed: {
			// 计算属性的 getter
			bgColor: function() {
				var top=this.top/30;
				return 'rgba(11,179,242, ' + top + ')';
			},
		},
		onLoad() {
		    // 获取系统信息
		    const sys = uni.getSystemInfoSync()
		    this.statusBarHeight = sys.statusBarHeight+'px'
		},
		onUnload() { //普通页面在 onUnload 生命周期中执行
		    uni.$emit('stop')
		},
		onHide() { //tabBar页面在onHide生命周期中执行
		    uni.$emit('stop')
		},
		onPageScroll(e) {
		  	//console.log(e)
		  	this.top=e.scrollTop;
		},
		methods: {
			toDetails(){
				uni.navigateTo({
					url:'/pages_health/ConsultationDetails'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.container{
	position: relative;
	.bg{
		width: 100%;
		height: 380rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
}
.content{
	padding-top: calc(var(--status-bar-height) + 140rpx);
	  height: 100vh;
	  box-sizing: border-box;
	  width: 100%;
	  .healthlist{
		  width: 85%;
		  padding: 32rpx;
		  margin: 0 auto;
		  background: #FFFFFF;
		  box-shadow: 0rpx 0rpx 20rpx 8rpx rgba(0,143,211,0.1);
		  border-radius: 16rpx;
		  margin-bottom: 20rpx !important;
	  }
}
.healthbox{
	width: 200rpx;
	height: 72rpx;
	background: linear-gradient( 180deg, #27B7FB 0%, #008FD3 100%);
	box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0,143,211,0.2);
	border-radius: 36rpx 36rpx 36rpx 36rpx;
	text-align: center;
	line-height: 72rpx;
	color: #FFFFFF;
}
</style>