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

<template>
	<view class="index-container">
		<view class="project" v-if="project.id">
			<view class="project-box" @click="$navigateTo('/pages/projectList/projectList')">
				<uni-icons custom-prefix="iconfont" type="icon-wodegongsi-gaoliang" class="inherit-icons"
					color="#08979c">
				</uni-icons>
				<text class="name hui-ellipsis">{{project.name}}</text>
				<uni-icons class="inherit-icons" type="forward" size="18" color="#c1c0c8"></uni-icons>
			</view>
		</view>
		<view class="banner-box">
			<uv-swiper :list="list" indicator indicatorMode="line" circular bgColor="transparent" height="200">
			</uv-swiper>
		</view>
		<view class="index-group">
			<view class="title">工单管理</view>
			<view class="group-box">
				<view class="small-box">
					<view class="small">
						<view class="group-veiw bg1">
							<text class="label">维修工单</text>
							<view class="group-icon">
								<uni-icons custom-prefix="iconfont" type="icon-weixiugongdan" color="#fff" size="30">
								</uni-icons>
							</view>
						</view>
					</view>
					<view class="small">
						<view class="group-veiw bg2">
							<text class="label">保洁工单</text>
							<view class="group-icon">
								<uni-icons custom-prefix="iconfont" type="icon-jinribaojie" color="#fff" size="30">
								</uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="group-item">
					<view class="group-veiw bg3">
						<text class="label">运维工单</text>
						<view class="group-icon">
							<uni-icons custom-prefix="iconfont" type="icon-yunwei-jiancebaogao" color="#fff" size="30">
							</uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view class="title">合同管理</view>
			<view class="group-box">
				<view class="group-item">
					<view class="group-veiw bg4">
						<text class="label">合同列表</text>
						<view class="group-icon">
							<uni-icons custom-prefix="iconfont" type="icon-hetongguanli" color="#fff" size="30">
							</uni-icons>
						</view>
					</view>
				</view>
				<view class="small-box">
					<view class="small">
						<view class="group-veiw bg5">
							<text class="label">公司合同</text>
							<view class="group-icon">
								<uni-icons custom-prefix="iconfont" type="icon-anli" color="#fff" size="30">
								</uni-icons>
							</view>
						</view>
					</view>
					<view class="small">
						<view class="group-veiw bg6">
							<text class="label">个人合同</text>
							<view class="group-icon">
								<uni-icons custom-prefix="iconfont" type="icon-gerenhetongchaxun" color="#fff"
									size="30">
								</uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="title">账单管理</view>
			<view class="group-box">
				<view class="small-box small-boxs">
					<view class="small">
						<view class="group-veiw bg7">
							<text class="label">合同账单</text>
							<view class="group-icon">
								<uni-icons custom-prefix="iconfont" type="icon-jiesuanguanli" color="#fff" size="30">
								</uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="small-box small-boxs">
					<view class="small">
						<view class="group-veiw bg8">
							<text class="label">付款账单</text>
							<view class="group-icon">
								<uni-icons custom-prefix="iconfont" type="icon-yuemingxi" color="#fff" size="30">
								</uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="title">发票管理</view>
			<view class="group-box">
				<view class="small-box small-boxs">
					<view class="small">
						<view class="group-veiw bg9">
							<text class="label">合同发票</text>
							<view class="group-icon">
								<uni-icons custom-prefix="iconfont" type="icon-app-hetongguanli-hetongfapiao"
									color="#fff" size="30">
								</uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="small-box small-boxs">
					<view class="small">
						<view class="group-veiw bg10">
							<text class="label">付款发票</text>
							<view class="group-icon">
								<uni-icons custom-prefix="iconfont" type="icon-integralrecord" color="#fff" size="30">
								</uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getProjectDetailById
	} from '@/request/api/project'
	export default {
		data() {
			return {
				list: [
					'https://images.unsplash.com/photo-1592229505726-ca121723b8ef?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyMDUzMDJ8MHwxfHNlYXJjaHw0Mnx8aG90ZWx8ZW58MXx8fHwxNjg3NzA1MjkwfDA&ixlib=rb-4.0.3&q=80&w=1080'
				],
				project: {}
			}
		},
		onShow() {
			this.project = this.$store.getters.project;
		},
		methods: {}
	}
</script>

<style lang="scss">
	.index-container {
		background: #fff;
		box-sizing: border-box;
		border-top: 2rpx solid $uni-border-1;
		min-height: 100vh;
		padding-bottom: 40rpx;

		.project {
			max-width: 100%;
			display: inline-block;
			padding: 30rpx;
			box-sizing: border-box;

			.project-box {
				box-sizing: border-box;
				padding: 0 30rpx;
				height: 80rpx;
				background-color: #ffffff;
				border-radius: 80rpx;
				box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
				display: flex;
				align-items: center;

				.name {
					margin: 0 12rpx;
					font-weight: 500;
					flex: 1;
				}
			}
		}

		.banner-box {
			padding: 0 30rpx;
		}

		.index-group {
			padding: 0 20rpx;

			.title {
				font-size: 32rpx;
				font-weight: 700;
				padding: 30rpx 10rpx 20rpx 10rpx;
			}

			.group-box {
				display: flex;
				flex-wrap: wrap;
				align-items: flex-start;
			}

			.group-item {
				width: 50%;
				height: 400rpx;
				padding: 10rpx;
				box-sizing: border-box;
			}

			.small-box {
				width: 50%;
				height: 400rpx;
				box-sizing: border-box;

				&.small-boxs {
					height: 200rpx;
				}

				.small {
					height: 200rpx;
					padding: 10rpx;
					box-sizing: border-box;
				}
			}

			.group-veiw {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
				position: relative;

				.label {
					color: #fff;
					font-weight: 500;
					position: absolute;
					top: 40rpx;
					left: 40rpx;
				}

				.group-icon {
					position: absolute;
					bottom: 40rpx;
					right: 40rpx;
				}
			}

			.bg1 {
				background-color: #88d498;
			}

			.bg2 {
				background-color: #7ad9ff;
			}

			.bg3 {
				background-color: #ffb997;
			}

			.bg4 {
				background-color: #f67e7d;
			}

			.bg5 {
				background-color: #ffaaaa;
			}

			.bg6 {
				background-color: #9ac0cd;
			}

			.bg7 {
				background-color: #d8d8ff;
			}

			.bg8 {
				background-color: #bfbfbf;
			}

			.bg9 {
				background-color: #40e0d0;
			}

			.bg10 {
				background-color: #f8d3da;
			}
		}
	}
</style>