BLi/pages/doctor/words.vue

<template>
	<view class="words">
		<u-toast ref="uToast" />
		<view class="ul">
			<image @click="index = i" :class="i==index?'active':''" :src="item" mode="" v-for="(item,i) in pic" :key="i"></image>
		</view>
		<view class="con" v-html="strArr[index]">
			111
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index:0,
				patient:{},
				pic:[],
				strArr:[]
			}
		},
		onLoad(option) {
			if(uni.getStorageSync('patient')){
				this.patient = JSON.parse(uni.getStorageSync('patient'))
				if(this.patient.pic != ''){
					this.pic = this.patient.pic.split(',')
				}
				if(this.patient.picWordRecognition != '' && this.patient.picWordRecognition != null){
					this.strArr = this.patient.picWordRecognition.split(',')
				}
			}		
		},
		methods: {
		}
	}
</script>

<style lang="scss">
	.words{
		height: 100%;
		.ul{
			display: flex;
			// flex-direction: row;
			// align-items: center;
			overflow: hidden;
			overflow-x: auto;
			margin-left: 32rpx;
			image{
				flex-grow: 0;
				flex-shrink: 0;
				width: 160rpx;
				height: 160rpx;
				border-radius: 24rpx;
				border: 2rpx solid #fff;
				margin-right: 24rpx;
			}
			.active{
				border: 2rpx solid #167FFF;
			}
		}
		.con{
			width:680rpx;
			margin: 24rpx auto;
			padding:32rpx;
			background-color: #fff;
			border-radius: 24rpx;
		}
	}
</style>