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

<template>
	<view class="container index-container">
		<view class="project-box">
			<view class="project-name">
				<span class="label">项目名称</span>
				<uni-icons class="project-icon" type="right" size="16"></uni-icons>
			</view>
		</view>
		<view class="banner-box">
			<uni-swiper-dot :info="info" mode="round">
				<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>
			</uni-swiper-dot>
		</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"
							color="#eee"></uni-icons></view>
				</view>
				<uni-icons class="home-filled" type="home-filled" size="40" color="#eee"></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"
							color="#eee"></uni-icons></view>
				</view>
				<uni-icons class="home-filled" type="person-filled" size="40" color="#eee"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	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'
					}
				],
				modeIndex: -1,
				current: 0,
				swiperDotIndex: 0
			}
		},
		methods: {}
	}
</script>

<style lang="scss">
	.index-container {
		padding: 0 30rpx;
		box-sizing: border-box;

		.project-box {
			padding: 30rpx 0;

			.project-name {
				display: flex;
				font-size: 16px;
				align-items: center;
				font-weight: 400;
			}

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

		.banner-box {
			border-radius: 20rpx;
			overflow: hidden;
		}

		.swiper-box {
			height: 400rpx;
		}

		.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;
			margin-top: 30rpx;

			.grid-item {
				flex: 1;
				height: 180rpx;
				background: #fff;
				border-radius: 16rpx;
				color: #fff;
				display: flex;
				align-items: center;
				padding: 0 10px;
				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: 36rpx;
				margin-bottom: 5px;
			}

			.sub-label {
				color: rgba(255, 255, 255, 0.5);
				font-size: 24rpx;
				display: flex;
				align-items: center;
				height: 40rpx;
			}

			.sub-label-icon {
				opacity: 0.7;
			}

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

			.home-filled {
				color: #eee;
				opacity: 0.3;
			}
		}
	}
</style>