1

components/matchmaking/index.vue

+<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>