asd/asd-pc/homePackage/pages/testRecord.vue

<template>
	<view class="content">
		<view class="header">
			<image src="../../static/images/baogao-bg.png"></image>
		</view>
		<view class="record-con">
			<view class="title">量表1测评结果</view>
			<view class="tip">该报表测评仅供参考</view>
			<view class="table">
				<radar ref="radar" :categories="categories" :series="series"></radar>
			</view>
			<view class="text">{{context}}</view>
		</view>
		<view class="device-con">
			<view class="device-title">
				<view class="icon"></view>
				<view class="name">推荐设备</view>
			</view>
			<template v-for="item in deviceList">
				<view class="device-one">
					<view class="img">
						<image class="left-img" src="../../static/images/article.png"></image>
					</view>
					<view class="right">
						<view class="title">{{item.title}}</view>
						<view class="info">{{item.content}}</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import radar from '@/components/radar/radar.vue'
	export default{
		components:{
			radar
		},
		data(){
			return{
				context:'上图呈现了孩子在感觉能力（S）、交往能力（R）、运动能力（B）、语言能力（L）和自我照顾能力（S）五个领域的分数分布。分数越高，说明孩子在该领域缺陷越显著。该儿童5大领域报告中，可呈现感觉能力，语言能力问题较严重。建议家长咨讯相关专业人士为孩子做更为细致的技能评估和疗愈计划。',
				deviceList:[
					{
						title:'设备名',
						content:'具体位置具体位置具体位置具体具体位置具体位置具体位置',
					},{
						title:'设备名1',
						content:'具体位置具体位置具体位置具体具体位置具体位置具体位置',
					}
				],
				  categories: ['维度1', '维度2', '维度3', '维度4', '维度5', '维度6'],
				    series: [{
				        name: '成交量1',
				        data: [90, 110, 165, 195, 187, 172]
				    }, {
				        name: '成交量2',
				        data: [190, 210, 105, 35, 27, 102]
				    }]
			}
		},
		onLoad(){
			this.$nextTick(() => {
				this.$refs['radar'].showRadar("canvasRadar",this.categories,this.series)
			})
		}
	}
</script>

<style lang="less">
	page{
		background-color: rgba(249, 249, 251, 1);
	}
	.content{
		.header{
			width: 100%;
			image{
				width:100%;
			}
		}
		.record-con{
			line-height: 40rpx;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 1);
			text-align: center;
			box-shadow: 0px 2px 6px 0px rgba(228, 228, 228, 100);
			padding:30rpx 40rpx;
			margin:0 40rpx;
			.title{
				color: rgba(16, 16, 16, 1);
				font-size: 40rpx;
				text-align:center;
				font-weight: 600;
			}
			.tip{
				color: rgba(82, 81, 81, 1);
				font-size: 24rpx;
			}
			.text{
				color: rgba(82, 81, 81, 1);
				font-size: 28rpx;	
				margin-top:50rpx;
			}
		}
		.device-con{
			padding-bottom:40rpx;
		}
		.device-title{
			display: flex;
			align-items: center;
			margin:30rpx 40rpx;
			.icon{
				width: 6px;
				height: 20px;
				line-height: 20px;
				border-radius: 50px;
				background-color: rgba(40, 124, 206, 1);
				text-align: center;
				margin:0rpx 10rpx 0rpx 0rpx;
			}
			.name{
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;
				text-align: left;
				font-weight: 600;
			}
		}
		.device-one{
			line-height: 20px;
			border-radius: 15px;
			background-color: rgba(255, 255, 255, 1);
			text-align: center;
			padding:20rpx;
			display: flex;
			justify-content: space-between;
			border-radius: 15px;
			background-color: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 5px 0px rgba(230, 230, 230, 100);
			margin:0px 30rpx 16rpx;
			.img{
				width: 112px;
				height: 90px;
				border-radius: 6px;
				margin-right: 20rpx;
				image{
					width:100%;
					height:100%;
				}
			}
			.right{
				width: 65%;
				.title{
					color: rgba(16, 16, 16, 1);
					font-size: 16px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: left;
				}
				.info{
					color: rgba(140, 139, 139, 1);
					font-size: 13px;
					overflow:hidden; 
					text-overflow:ellipsis;
					display:-webkit-box; 
					-webkit-box-orient:vertical;
					-webkit-line-clamp:2; 
					text-align: left;
				}
			}
		}
	}
</style>