<template>
	<view class="matchmaking">
		<view class="matchmaking-box" v-for="(item,index) in data" :key='index'>
			<view class="box-top">
				<u-avatar :src="item.tximg" size="80"></u-avatar>
				<image class="gstyle" v-if="item.Gender==1" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan-b.png" ></image>
				<image class="gstyle" v-if="item.Gender==2" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv-b.png" ></image>
				<view class="boxt-center">
					<view class="row">
						<view class="boxtc-t-f" :style="{color:mainColor}">
							{{item.fen}}分
						</view>
						<view class="box-name">{{item.name}}</view>
					</view>
					<view class="row">
						<view class="boxtc-b-item">{{item.Age}}岁</view>
						<view class="boxtc-b-item">{{item.education}}</view>
						<view class="boxtc-b-item">{{item.marriage}}</view>
					</view>
				</view>
				<view class="boxt-r">
					匹配度 {{item.matching}}
				</view>
			</view>
			<view class="box-img">
				<view v-if="type==1" class="box-img-one">
					<image :src="item.tximg" mode="aspectFill" style="width: 100%;height: 100%;border-radius: 15px;"></image>
				</view>
				<view v-if="type==2" class="box-img-two">
					<view class="box-img-two-item" v-for="(x,y) in item.imgs" :key='y'>
						<image :src="x" mode="aspectFill" style="width: 100%;height: 100%;border-radius: 15px;"></image>
					</view>
					<view style="width: 1px;height: 10px;"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// props: ["navs"],
		data(){
			return{
				type:2,
				data:[
					{name:'中日混血-兔牙球球中日混血-兔牙球球中日混血-兔牙球球',fen:'59',Age:'33',education:'大专',marriage:'未婚',matching:'100%',Gender:'1',tximg:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3864518196,3934259062&fm=11&gp=0.jpg',
					imgs:['https://t7.baidu.com/it/u=3522949495,3570538969&fm=193&f=GIF','https://t7.baidu.com/it/u=2878377037,2986969897&fm=193&f=GIF','https://t7.baidu.com/it/u=2253011977,2934623845&fm=193&f=GIF']},
					{name:'中日混血-兔牙球球',fen:'100',Age:'33',education:'大专',marriage:'未婚',matching:'100%',Gender:'1',tximg:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3864518196,3934259062&fm=11&gp=0.jpg',
					imgs:['https://t7.baidu.com/it/u=2010803885,3614601600&fm=193&f=GIF','https://t7.baidu.com/it/u=2107228250,4226787167&fm=193&f=GIF']},
				],
				mainColor: '',
				secondary: '',
			}
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
		}
	}
	
</script>

<style>
	.matchmaking-box{
		display: flex;
		flex-direction: column;
		padding: 10px 0;
	}
	.matchmaking .box-top{
		width: 100%;
		padding:0 15px;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
	}

	.matchmaking  .gstyle{
		position: absolute;
		left: 78rpx;
		bottom: 0;
		width: 32rpx;
		height: 32rpx;
	}
	.matchmaking .boxt-center{
		width: 1px;
		flex: 1;
		height: 80rpx;
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.matchmaking .boxt-r{
		width: 70px;
		font-size: 11px;
		color: #888888;
		text-align: right;
	}
	.matchmaking .row{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.matchmaking .boxtc-t-f{
		width: 28px;
		height:14px ;
		border-radius: 3px;
		font-size: 10px;
		background: #B2EEEC;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.matchmaking .box-name{
		font-size: 14px;
		color: #111111;
		margin-left: 5px;
		width: calc(100vw - 30px - 40px - 28px - 15px - 70px);
		overflow: hidden;display: inline-block;white-space: nowrap; text-overflow:ellipsis
	}
	.matchmaking .boxtc-b-item{
		font-size: 10px;
		color: #858687;
		height: 16px;
		padding: 0 6px;
		border-radius: 8px;
		background: #F8F8F8;
		margin-right: 5px;
	}
	.matchmaking .box-img{
		width: 100%;
		margin-top: 15px;
	}
	.matchmaking .box-img-one{
		padding: 0 15px;
		border-radius: 15px;
		width: 100%;
		height: 420rpx;
	}
	.matchmaking .box-img-two{
		display: -webkit-box;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		padding: 0 15px;
	}
	/* 隐藏下方的滚动条 */
	.box-img-two::-webkit-scrollbar {
		background-color: transparent;
	}

	.matchmaking .box-img-two-item{
		width: 323px;
		height: 450px;
		border-radius: 15px;
		margin-right: 10px;
		overflow: hidden;
	}
</style>
