<template>
	<view>
		<el-container class="pc-container">
		  <view class="pc-header">
			<Header />
		  </view>
		  <view style="width: 100%;height: 100rpx;"></view>
		  <view class="pc-main">
		  	<view class="main-content" :style="{height: WindowHeight-50 + 'px'}">
		  		<view class="mc-left">
					<view class="mcl-out">
						<view class="mcl-top">
							自由的Ai图像重绘服务图像识别与替换
						</view>
						<view class="mcl-bottom">
							自由绘制 | 自动识别 | 无线扩展
						</view>
					</view>
		  		</view>
				<view class="mc-right">
					<view class="mcr-card">
						
					</view>
				</view>
		  	</view>
		  </view>
		</el-container>
	</view>
</template>

<script>
import Header from './components/header.vue';
export default {
	components:{
		Header
	},
	data(){
		return{
		}
	},
	onLoad() {
	},
}
</script>

<style scoped lang="scss">
.pc-container{
	display: flex;
	flex-direction: column;
}
.pc-header{
	width: 100%;
	height: 100rpx;
	box-shadow: 0 5rpx 10rpx 0 #dcdae4;
	position: fixed;
}
.pc-main{
	background-color: #edecf1;
	.main-content{
		width: 100%;
		height: 100%;
		background-image: url('http://8.138.171.103/static/homeBackground.png');
		background-size: cover;
		display: flex;
		overflow-x: scroll;
		.mc-left{
			margin-top: 11%;
			flex: 1;
			height: 60%;
			display: flex;
			.mcl-out{
				margin-left: 20%;
				display: flex;
				flex-direction: column;
				width: 650rpx;
				.mcl-top{
					color: #12121f;
					font-weight: 500;
					font-size: 65rpx;
					line-height: 100rpx;
				}
				.mcl-bottom{
					margin-top: 30rpx;
					color: #959ba6;
					font-size: 30rpx;
					font-family: fangsong;
				}
			}
		}
		.mc-right{
			margin-top: 10%;
			flex: 1;
			height: 45%;
			.mcr-card{
				border-radius: 30rpx;
				margin-left: 5%;
				// height: 100%;
				height: 26em;
				width: 33em;
				background-color: #fff;
				// aspect-ratio: 22/17;
				box-shadow: 0 5rpx 10rpx 0 #dcdae4;
			}
		}
	}
}
</style>