rtim/pages/agent/doctorCommunion.vue

<template>
	<view class="content es-pt-42">
		<view class=" ">
			<view class="u-f ">
				<view class="es-mr-14">
					<image class="es-icon-64" src="/static/image/agent/back_black_icon.png" mode=""></image>
				</view>
				<view class="es-mr-24 avatarCircle u-f-ajc">
					<image class="es-icon-88" src="/static/image/agent/phone_icon50.png" mode=""></image>
				</view>
				<view class="">
					<view class="u-f">
						<view class="es-fs-24 es-c-22 es-fw es-mr-12 u-f-ajc">
							廖万清医生 智能体
						</view>
						<view class="u-f-ajc">
							<image class="es-icon-32" src="/static/image/agent/ai_icon.png" mode=""></image>
						</view>
					</view>
					<view class="es-c-75 es-fs-26">
						六安市人民医院 主任医师 甲乳外科
					</view>
				</view>
			</view>
			<view class="u-f-ajc">
				<view class="circle ">
					<image class="es-icon-88" src="/static/image/agent/phone_icon50.png" mode=""></image>
					<view class="problem u-f-ajc">
						<image class="gifBox" src="/static/image/agent/speech_voice_icon2.gif" mode=""></image>

					</view>
				</view>
			</view>
			<view class="es-br-32 es-fs-32 es-c-22 problemMsg es-bg-white">
				你好，我是廖万清医生智能体，你有什么健康问题需要问我吗?
			</view>

			<view class="footerBox u-f-ajc u-f-fc">
				<view class="u-f-ajc u-f-fc ">
					<view class="u-f-ajc">
						<image class="gifBox" src="/static/image/agent/speech_voice_icon.gif" mode=""></image>
						<!-- <image class="es-h-8 es-w-56" src="/static/image/agent/thinking_icon.gif" mode=""></image> -->
						<!-- <image class="gifBox" src="/static/image/agent/listen_icon.gif" mode=""></image> -->
					</view>
					<view class="es-c-00 es-fs-28 es-mt-28">
						电话接通中
						<!-- 您已静音 -->
						<!-- 医生思考中 -->
						<!-- 我在听，您请问 -->
					</view>
					<!-- <view class="">
						<image class="es-icon-60" src="/static/image/agent/interrupt_icon.png" mode=""></image>
					</view>
					<view class="es-c-00 es-fs-28 es-mt-12">
						点击打断
					</view> -->
				</view>
				<view class="footerBox-btn u-f-ajc u-f-jsb">
					<view class="footerBox-btnBox-recording es-ml-8 u-f-ajc">
						<image class="es-icon-48" src="/static/image/agent/with_audio_icon.png" mode=""></image>
					</view>
					<view class="">
						<image class="es-icon-136" src="/static/image/agent/close_icon.png" mode=""></image>
					</view>
					<view class="footerBox-btnBox-recording es-mr-8">
						<image class="es-icon-48" src="/static/image/agent/close_text_icon.png" mode="">
						</image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		checkFollow,
		doFollow,
		getDoctorDetails,
		getDoctorPingList
	} from '@/api/doctor.js'
	export default {
		data() {
			return {}
		},
		onLoad(options) {

		},
		onShow() {

		},

		methods: {
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>
<style scoped lang="scss">
	.content {
		background-image: url('/static/image/agent/doctor-communication-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 100vh;
	}

	.avatarCircle {
		border-radius: 50%;
		padding: 4rpx;
		background: linear-gradient(135deg, #FFC945, #FF8928);
		width: 88rpx;
		height: 88rpx;
	}

	.circle {
		margin-top: 132rpx;
		width: 408rpx;
		height: 408rpx;
		padding: 16rpx;
		background: #FFFFFF;
		border-radius: 50%;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.problem {
			position: absolute;
			top: 0;
			right: -60rpx;

			width: 208rpx;
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(255, 127, 21, 0.05);
			border-radius: 40rpx 40rpx 40rpx 4rpx;

			.gifBox {
				width: 132rpx;
				height: 36rpx;
			}
		}
	}

	.problemMsg {
		margin: 64rpx 24rpx 0;
		padding: 32rpx;
		background: #FFFFFF;
	}

	.es-icon-36 {
		width: 36rpx;
		height: 36rpx;
	}

	.footerBox {
		position: fixed;
		bottom: 0;
		margin: 54rpx 108rpx 56rpx;

		.gifBox {
			width: 62rpx;
			height: 36rpx;
		}

		.footerBox-btn {
			background-image: url('/static/image/agent/dialogue_footer_bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 536rpx;
			height: 164rpx;
			box-sizing: border-box;
			margin-top: 54rpx;

			.footerBox-btnBox-recording {
				padding: 32rpx;
				background: #ECECEC;
				border-radius: 50%;
			}
		}
	}
</style>