xinelu-applet-ui/pagesB/doctordetails/doctordetails.vue

<template>
	<view class="app">
		<image :src="require('@/pagesC/images/headsculpture.png')" mode=""></image>
		<view class="name">
			张三
		</view>
		<view class="position">
			主任医师 肾内科
		</view>
		<view class="Affiliation">
			<view class="header">
				三甲
			</view>
			<view class="title">
				山东大学齐鲁医院
			</view>
		</view>
		<view class="headertitle">
			<view class="left">
			</view>
			<view class="right">
				擅长
			</view>
		</view>
		<view class="text">
			从事内科临床、教学及科研工作，对肾脏内科常见病、多发病的诊治，疑难和危重病人抢救治疗方面积累了丰富的经验。
		</view>
		<view class="headertitle" style="margin-top: 60rpx;">
			<view class="left">
			</view>
			<view class="right">
				医生介绍
			</view>
		</view>
		<view class="text">
			梁凯，男，医学博士，副主任医师，山东大学齐鲁医
			院内分泌科科主任助理，兼任山东省医学会慢性病多
			学科管理联合委员会委员兼秘书、山东省医师协会内
			分泌科医师分会秘书、山东预防医学会甲状腺疾病防
			治分会委员、山东省研究型医院协会标准化代谢性疾
			病管理分会委员。
		</view>
		<view class="headertitle" style="margin-top: 60rpx;">
			<view class="left">
			</view>
			<view class="right">
				诊疗费
			</view>
		</view>
		<view class="text">
			18元
		</view>
		<view class="btn" @tap='goconfirmation'>
			立即预约
		</view>
	</view>
</template>

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

			};
		},
		methods: {
			goconfirmation() {
				uni.navigateTo({
					url: "/pagesB/confirmation/confirmation"
				})
			},
		}
	}
</script>

<style lang="scss">
.app {
		width: 96%;
		margin: 16rpx auto;
		color: #666666;
		background-color: #fff;
		padding-bottom: 70rpx;

		.btn {
			width: 80%;
			margin: 90rpx auto;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background: #26A888;
			border-radius: 5rpx;
			font-size: 31rpx;
			font-weight: 500;
			color: #FFFFFF;
		}

		.text {
			line-height: 60rpx;
			word-break: break-all;
			width: 90%;
			margin: 35rpx auto 0;
			text-align: justify;
			font-size: 28rpx;
			font-weight: 400;
			color: #000000;
		}

		.headertitle {
			margin: 30rpx 0 0 30rpx;
			display: flex;
			align-items: center;

			.left {
				display: inline-block;
				width: 10rpx;
				height: 30rpx;
				background: #26A888;
				border-radius: 1rpx;
				margin-right: 16rpx;
			}

			.right {
				display: inline-block;
				font-size: 30rpx;
				font-weight: 500;
				color: #26A888;
			}
		}

		image {
			display: block;
			width: 150rpx;
			height: 150rpx;
			margin: 0 auto;
			padding-top: 20rpx;
		}

		.name {
			text-align: center;
			margin: 40rpx auto 0;
			font-size: 32rpx;
			font-weight: 500;
			color: #000000;
		}

		.Affiliation {
			text-align: center;
			margin: 16rpx auto 0;
			font-size: 22rpx;
			line-height: 30rpx;

			.title {
				display: inline-block;
			}

			.header {
				margin-right: 10rpx;
				display: inline-block;
				color: #FFA115;
				font-size: 20rpx;
				width: 50rpx;
				height: 30rpx;
				background: #FFFFFF;
				border: 2rpx solid #FFA115;
				border-radius: 2rpx;
				text-align: center;
			}
		}

		.position {
			text-align: center;
			margin: 20rpx auto 0;
			font-size: 22rpx;
		}
	}
</style>