<template>
	<view>
		<view class="main-around top-menu">
			<view class="main-center-y cross-center item" :style="item.bgc" v-for="(item,index) in topMenuData" :key="index">
				<view class="title">{{item.title}}</view>
				<image :src="item.icon" mode=""></image>
			</view>
		</view>
		<view class="main-left cross-center search">
			<image src="https://t17.9026.com/web/statics/image/index/search.png" mode=""></image>
			<input style="width: 560rpx;" type="text" value="" placeholder="搜索客户、商品、时间、订单号" placeholder-style="font-size:28rpx;color:#999;" />
		</view>
		<view class="list">
			<view class="box" v-for="(item,index) in 2" :key="index">
				<view class="main-between cross-center header">
					<view class="cross-center head" :class="{'border_bottom':true}">
						<image src="https://t17.9026.com/web/statics/image/sale/1.png" mode=""></image>
						周先生-世龙广场22号楼2202
					</view>
					<!-- <view class="cross-center head1">
						<image src="https://t17.9026.com/web/statics/image/sale/1.png" mode=""></image>
						客户楼盘绑定通知
					</view> -->
					<view class="main-between cross-center">
						<view class="date">交易成功</view>
						<image class="del" src="https://t17.9026.com/web/statics/image/user-center/del.png" mode=""></image>
					</view>
				</view>
				<view class="center">
					<!-- <view class="main-between cross-center">
						<view class="title">整体评价</view>
						<view class="isopen cross-center">
							展开
							<image src="https://t17.9026.com/web/statics/image/user-center/arrow-bottom.png" mode=""></image>
						</view>
					</view> -->
					<!-- <view class="center-text">客户xxxx向您发起了楼盘xxxx的认证通知，请前往我的-我的客户查看并处理</view> -->
					<!-- <view class="center-img">
						<image v-for="(item, index) in 5" :key="index" src="https://t17.9026.com/web/statics/image/user-center/1.png" mode=""></image>
					</view> -->
					<view class="main-between goods">
						<view class="main-left desc">
							<image class="goods-img" src="https://t17.9026.com/web/statics/image/user-center/1.png" mode=""></image>
							<view>
								<view class="title t-omit-two">兴城人居ins居家占位套餐居家占位套餐居家占位套餐居家占位套餐居家占位套餐</view>
								<view class="main-between price">
									<view>
										<text class="company">￥</text>
										<text>2466.00</text>
									</view>
									<view>
										x1
									</view>
								</view>
							</view>
						</view>
					<!-- 	<view class="isopen cross-center">
							收起
							<image src="https://t17.9026.com/web/statics/image/user-center/arrow-top.png" mode=""></image>
						</view> -->
					</view>
					<view class="main-right cross-bottom total_pay"><text>应付总</text><text>￥</text><text>2388.00</text></view>
				</view>
				<view class="main-between footer cross-center border_top">
					<template>
						<view class="date">2021-12-11</view>
						<view class="main-around">
							<view class="kbtn">上传发票</view>
							<view class="kbtn">再次购买</view>
							<view class="kbtn">查看物流</view>
						</view>
					</template>
					<template v-if="false">
						<view class="left">查看详情</view>
						<image style="width: 12rpx;height: 22rpx;" src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png"
							mode=""></image>
					</template>
				</view>
			</view>
			<view class="no-more">没有更多了...</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topMenuData:[
					{
						title:'已认证客户',
						icon:'https://t17.9026.com/web/statics/image/index/certified.png',
						bgc:'background: linear-gradient(179deg, #266CF3, #5B91FB)'
					},
					{
						title:'未认证客户',
						icon:'https://t17.9026.com/web/statics/image/index/no_certified.png',
						bgc:'background: linear-gradient(179deg, #34BAB3, #87E5E2)'
					},
					{
						title:'我的发票',
						icon:'https://t17.9026.com/web/statics/image/index/my_invoice.png',
						bgc:'background: linear-gradient(179deg, #6994C9, #A2BBED)'
					},
					{
						title:'我的合同',
						icon:'https://t17.9026.com/web/statics/image/index/my_contract.png',
						bgc:'background: linear-gradient(179deg, #8469C9, #C7A3F0)'
					}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.top-menu{
		padding: 20rpx 30rpx;
		.item{
			width: 158rpx;
			height: 130rpx;
			background: linear-gradient(179deg, #8469C9, #C7A3F0);
			border-radius: 8rpx;
			.title{
				font-size: 24rpx;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 34rpx;
			}
			image{
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
	.search{
		width: 680rpx;
		height: 82rpx;
		// background: #FFFFFF;
		border: 1rpx solid #EEEEEE;
		border-radius: 4rpx;
		margin: 0 auto;
		padding-left: 22rpx;
		image{
			width: 22rpx;
			height: 22rpx;
			margin-right: 18rpx;
		}
	}
	.list{
		margin-top: 20rpx;
	}
	.box {
		width: 678rpx;
		height: auto;
		background: #ffffff;
		border-radius: 6rpx;
		padding: 26rpx 31rpx;
		margin: 0 auto 20rpx;
	
		.border_bottom {
			border-bottom: 1px solid #eaeaea;
		}
	
		.border_top {
			border-top: 1px solid #eaeaea;
		}
	
		.header {
			padding-bottom: 21rpx;
	
			.head {
				max-width: 500rpx;
				height: 48rpx;
				background: #f6f6f6;
				border-radius: 24rpx;
				padding: 0 17rpx;
				overflow: hidden;
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 14rpx;
					border-radius: 50%;
				}
	
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
			}
	
			.head1 {
				max-width: 500rpx;
				height: 48rpx;
	overflow: hidden;
				image {
					width: 45rpx;
					height: 45rpx;
					margin-right: 14rpx;
					border-radius: 50%;
				}
	
				font-size: 30rpx;
				font-weight: bold;
				color: #222222;
			}
	
			.date {
				font-size: 22rpx;
				font-weight: 500;
				color: #222222;
				margin-right: 30rpx;
			}
	
			.del {
				width: 36rpx;
				height: 36rpx;
			}
		}
	
		.center {
			padding: 0 0 10rpx;
	
			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #222222;
			}
	
			.isopen {
				font-size: 24rpx;
				font-weight: bold;
				color: #a18353;
	
				image {
					width: 19rpx;
					height: 12rpx;
					margin-left: 8rpx;
				}
			}
	
			.center-text {
				margin-top: 20rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
				line-height: 34rpx;
			}
	
			.center-img {
				margin-top: 28rpx;
	
				image {
					width: 146rpx;
					height: 96rpx;
					border-radius: 12rpx;
					margin-right: 15rpx;
				}
			}
	
			.goods {
				// padding-top: 42rpx;
				// border-top: 1rpx solid #EAEAEA;
	
				.desc {
					width: 100%;
					height: 141rpx;
					// background: #F8F8F8;
					border-radius: 6rpx;
					padding: 18rpx 0 18rpx 24rpx;
	
					.goods-img {
						width: 101rpx;
						height: 99rpx;
						border-radius: 8rpx;
						margin-right: 21rpx;
					}
	
					.title {
						width: 438rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: #222222;
						line-height: 34rpx;
					}
	
					.price {
						width: 470rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #222222;
						line-height: 36rpx;
	
						.company {}
					}
				}
	
			}
			.total_pay{
				font-size: 24rpx;
				color: #222222;
				line-height: 34px;
				&>text:nth-child(1) { font-weight: 500;margin-right: 8rpx;} 
				&>text:nth-child(2) { font-weight: 500;font-size: 20rpx;}
				&>text:nth-child(3) { font-weight: 600;} 
			}
		}
	
		.footer {
			padding: 28rpx 0 0;
	
			.left {
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
			}
			.date{
				font-size: 22rpx;
				font-weight: 500;
				color: #838584;
				line-height: 34rpx;
			}
			.kbtn{
				width: 138rpx;
				height: 52rpx;
				border: 1rpx solid #999999;
				border-radius: 4rpx;
				font-size: 20rpx;
				font-weight: 500;
				color: #222222;
				text-align: center;
				line-height: 52rpx;
				margin-left: 20rpx;
			}
		}
	}
	
	.no-more {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		margin-top: 37rpx;
		text-align: center;
	}
</style>
