realty/virgo.wzfrontend/wx/pages/index/index.vue

<template>
	<view class="index-container">
		<view class="project-box">
			<view class="project-name">
				<text class="label">项目名称</text>
				<uni-icons class="project-icon" type="right" size="16"></uni-icons>
			</view>
			<view class="change-role">
				<uni-icons type="contact" size="14" class="role-icon"></uni-icons>切换角色
			</view>
		</view>
		<view class="banner-box">
			<swiper class="swiper-box">
				<swiper-item class="swiper-item-box" v-for="(item, index) in info" :key="index">
					<view class="swiper-item" :style="'background-image:url(' + item.url + ')'"></view>
				</swiper-item>
			</swiper>
		</view>
		<view class="grid">
			<view class="grid-item red">
				<view>
					<view class="label">房源列表</view>
					<view class="sub-label">
						查看房源
						<uni-icons class="sub-label-icon" type="right" size="14"></uni-icons>
					</view>
				</view>
				<uni-icons class="home-filled" type="home-filled" size="40"></uni-icons>
			</view>
			<view class="grid-item blue">
				<view>
					<view class="label">客户管理</view>
					<view class="sub-label">
						查看客户
						<uni-icons class="sub-label-icon" type="right" size="14"></uni-icons>
					</view>
				</view>
				<uni-icons class="home-filled" type="person-filled" size="40"></uni-icons>
			</view>
		</view>
		<view class="house-box">
			<view class="good-box">
				<text>推荐房源</text>
			</view>
			<house-list></house-list>
		</view>
	</view>
</template>

<script>
	import houseList from '@/components/house/houseList.vue'
	export default {
		data() {
			return {
				info: [{
						url: 'https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3556e2b4f9c844758c3af76407b3a5d5'
					},
					{
						url: 'https://file-node.oss-cn-shanghai.aliyuncs.com/youji/f488a1cc0e904ed089d52d88e3c1b33d'
					}
				]
			}
		},
		onShow() {},
		methods: {},
		components: {
			houseList
		}
	}
</script>

<style lang="scss">
	.index-container {
		box-sizing: border-box;
		position: relative;

		.project-box {
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			background-color: $uni-white;
			border-top: 1px solid $uni-border-2;
			position: fixed;
			/* #ifdef MP-WEIXIN */
			top: 0;
			/* #endif */
			/* #ifdef H5 */
			top: calc(44px + env(safe-area-inset-top));
			/* #endif */
			left: 0;
			right: 0;
			z-index: 99;

			.project-name {
				display: flex;
				align-items: center;
				font-weight: 400;
				align-items: center;
				flex: 1;
				width: 0;
				overflow: hidden;
			}

			.project-icon {
				margin-left: 8rpx;
			}

			.change-role {
				font-size: 24rpx;
				color: $uni-secondary-color;
				border: 1px solid $uni-border-3;
				width: 160rpx;
				height: 40rpx;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.role-icon {
				text {
					color: $uni-secondary-color !important;
				}

				margin-right: 8rpx;
			}
		}

		.banner-box {
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 86rpx;

			.swiper-box {
				height: 400rpx;
				border-radius: 20rpx;
				overflow: hidden;
			}

			.swiper-item {
				width: 100%;
				height: 100%;
				background-size: cover;
				background-position: bottom;
			}

			.swiper-item-box:first-child {
				border-radius: 20rpx 0 0 20rpx;
			}

			.swiper-item-box:last-child {
				border-radius: 0 20rpx 20rpx 0;
			}
		}

		.grid {
			display: flex;
			flex-wrap: wrap;
			padding: 0 30rpx;
			box-sizing: border-box;

			.grid-item {
				flex: 1;
				height: 180rpx;
				border-radius: 16rpx;
				color: $uni-white;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				justify-content: space-between;

				&.red {
					background: linear-gradient(to right, rgb(242, 79, 104), rgb(237, 133, 152));
				}

				&.blue {
					background: linear-gradient(to right, rgb(69, 159, 230), rgb(108, 201, 228));
				}
			}

			.label {
				font-size: 32rpx;
				margin-bottom: 5px;
			}

			.sub-label {
				color: $uni-extras-color;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				height: 40rpx;
				opacity: 0.5;
			}


			.sub-label-icon {
				/* #ifdef H5 */
				color: $uni-extras-color !important;

				/* #endif */
				/* #ifdef MP-WEIXIN */
				text {
					color: $uni-extras-color !important;
				}

				/* #endif */
			}





			.grid-item:nth-child(2n) {
				margin-left: 30rpx;
			}

			.home-filled {
				opacity: 0.3;
				/* #ifdef H5 */
				color: $uni-extras-color !important;

				/* #endif */
				/* #ifdef MP-WEIXIN */
				text {
					color: $uni-extras-color !important;
				}

				/* #endif */
			}
		}

		.house-box {
			padding: 0 30rpx;
			box-sizing: border-box;

			.good-box {
				margin-top: 30rpx;
				position: relative;
				text-align: center;

				text {
					background: $uni-background-color;
					z-index: 9;
					position: relative;
					padding: 5px 10px;
					color: $uni-secondary-color;
				}

				&:before {
					content: '';
					bottom: 20rpx;
					position: absolute;
					left: 0;
					height: 1px;
					right: 0;
					background: $uni-border-2;
					z-index: 8;
				}
			}
		}
	}
</style>