<template>
	<view class="content">
		<view class="introBox">
			<view class="intro_column">
				<view class="imgOuter"><image mode="aspectFill" src="../../static/rishang.png"></image><view class="i_intro">推荐</view></view>
				<view class="columnInfo">
					<view class="title">孕育邦孕妈妈摄影体验</view>
					<view class="tags"><text>孕妈</text><text>宝宝成长</text><text>讲座知识</text></view>
					<view class="subInfo">2020/12/11 14:00</view>
					<view class="subInfo">苏州·园区星海街188号园区星海街188号苏州·园区星海街188号园区星海街188号</view>
					<view class="price"><text class="font_red">￥100</text><view class="shareMoney"><text>分享金</text>10元</view></view>
				</view>
			</view>
			<view class="intro_column">
				<view class="imgOuter"><image mode="aspectFill" src="../../static/rishang.png"></image><view class="i_intro">推荐</view></view>
				<view class="columnInfo">
					<view class="title">孕育邦孕妈妈摄影体验</view>
					<view class="tags"><text>孕妈</text><text>宝宝成长</text><text>讲座知识</text></view>
					<view class="subInfo">2020/12/11 14:00</view>
					<view class="subInfo">苏州·园区星海街188号园区星海街188号苏州·园区星海街188号园区星海街188号</view>
					<view class="price"><text class="font_red">￥100</text></view>
				</view>
			</view>
			<view class="intro_column">
				<view class="imgOuter"><image mode="aspectFill" src="../../static/rishang.png"></image><view class="i_intro">推荐</view></view>
				<view class="columnInfo">
					<view class="title">孕育邦孕妈妈摄影体验</view>
					<view class="tags"><text>孕妈</text><text>宝宝成长</text><text>讲座知识</text></view>
					<view class="subInfo">2020/12/11 14:00</view>
					<view class="subInfo">时光印记摄影机构</view>
					<view class="price"><text class="font_red">￥100</text></view>
					<view class="buyBtn">立即预约</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.introBox{
		width:710rpx;
		margin:20rpx auto 0 auto;
		border-radius: 16rpx;
		background: #fff;
		padding:0 25rpx;
		box-sizing: border-box;
	}
	.introBox .intro_column{border-botom:none;}
	.intro_column{
		display: flex;
		justify-content: flex-start;
		padding:20rpx 0;
		border-bottom:2rpx solid rgba(234,234,234,0.6);
		
		.imgOuter{
			width: 260rpx;
			height:210rpx;
			position: relative;
			image{width:260rpx;height:210rpx;border-radius:5rpx;}
			.i_intro{position: absolute;top:0;left:0;width: 68rpx;height: 32rpx;background: #FF578A;border-radius: 5rpx 0px 18rpx 5rpx;font-size: 22rpx;font-weight: 400;color: #FFFFFF;line-height: 32rpx;text-align: center;}	
		}
		.columnInfo{
			width:380rpx;
			margin-left:22rpx;
			position: relative;
			.title{
				width:100%;
				font-size:30rpx;
				font-weight:bold;
				color:#333;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;				
			}
			.tags text{
				height: 28rpx;
				background: rgba(255,177,62,0.1);
				border-radius: 4rpx;
				line-height:28rpx;
				font-size:20rpx;
				padding: 0 10rpx;
				margin-right:10rpx;
				color:#FF753E;
			}
			.subInfo{
				width:100%;
				font-size:24rpx;
				color:#999;
				font-weight:400;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-top:5rpx;	
				.font_red{margin-left:10rpx;}
			}
			.buyBtn{
				width: 130rpx;
				height: 48rpx;
				line-height: 48rpx;
				background: #FF578A;
				border-radius: 6rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;		
				text-align: center;
				position: absolute;
				bottom:0;
				right:0;
			}
			.price{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				align-content: center;
				margin-top:8rpx;
				text{margin-right:10rpx;}
				.shareMoney{
					height: 28rpx;
					border:2rpx solid #FF578A;
					border-radius: 4rpx;
					line-height:28rpx;
					font-size:20rpx;
					margin-right:10rpx;
					padding-right:10rpx;
					color:#FF578A;
					display: flex;
					flex-direction: flex-start;
					text{background: #FF578A;color:#fff;padding: 0 10rpx;}
				}
				.free{
					height: 28rpx;
					background: #FF753E;
					border-radius: 4rpx;
					line-height:28rpx;
					font-size:20rpx;
					padding: 0 10rpx;
					margin-right:10rpx;
					color:#fff;					
				}
			}
			
		}		
	}

</style>
