miniapp/pages/home/index.vue

<template>
	<view class="content">
		<!-- 首页轮播图 -->
		<view class="headerImg">
			<swiper class="swiper" circular :indicator-dots="true">
				<swiper-item>
					<img src="/static/zhongcai.png" alt="">
				</swiper-item>
				<swiper-item>
					<img src="/static/zhongcai.png" alt="">
				</swiper-item>
				<swiper-item>
					<img src="/static/zhongcai.png" alt="">
				</swiper-item>
			</swiper>
		</view>
		<!-- 是否认证 -->
		<view class="authentication">
			未认证
		</view>
		<!-- 操作菜单 -->
		<view class="memu">
			<view class="memu-item">
				<view class="imgIcon">
					<img src="/static/home/chuizi.png" alt="">
				</view>
				<view class="memu-main">
					<view class="">
						本人立案
					</view>
				</view>
			</view>
			<view class="memu-item">
				<view class="imgIcon">
					<img src="/static/home/jinzhan.png" alt="">
				</view>
				<view class="memu-main">
					<view class="">
						本人案件进展
					</view>
				</view>
			</view>
			<view class="memu-item">
				<view class="imgIcon">
					<img src="/static/home/chuizi.png" alt="">
				</view>
				<view class="memu-main">
					<view class="">
						代理立案
					</view>
				</view>
			</view>
			<view class="memu-item">
				<view class="imgIcon">
					<img src="/static/home/jinzhan.png" alt="">
				</view>
				<view class="memu-main">
					<view class="">
						代理案件进展
					</view>
				</view>
			</view>
			<view class="memu-item">
				<view class="imgIcon">
					<img src="/static/home/zhengju.png" alt="">
				</view>
				<view class="memu-main">
					<view class="">
						证据交换
					</view>
				</view>
			</view>
			<view class="memu-item">
				<view class="imgIcon">
					<img src="/static/home/wangting.png" alt="">
				</view>
				<view class="memu-main">
					<view class="">
						互联网庭
					</view>
				</view>
			</view>
			<view class="memu-item">
				<view class="imgIcon">
					<img src="/static/home/chuizi.png" alt="">
				</view>
				<view class="memu-main">
					<view class="">
						在线撤诉
					</view>
				</view>
			</view>
			<view class="memu-item">
				<view class="imgIcon">
					<img src="/static/home/shenpi.png" alt="">
				</view>
				<view class="memu-main">
					<view class="">
						笔录签字
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// memu: ["本人立案", "本人案件进展", "代理立案", "代理案件进展", "证据交换", "互联网庭", "在线撤诉", "笔录签字"]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	uni-page-body,page{
		height: 100%;
		background-color: #ECEDF4;
		margin-bottom: 100rpx;
	}
	.content {
		margin-bottom: 150rpx;
		.headerImg {
			width: 100%;
			height: 350rpx;
			background-color: red;
			.swiper {
				width: 100%;
				height: 100%;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.authentication {
			height: 70rpx;
			background-color: #ffffff;
			line-height: 70rpx;
			font-size: 24rpx;
			color: #ff0606;
			text-align: right;
			padding-right: 40rpx;
			margin-bottom: 20rpx;
		}

		.memu {
			background: #ffffff;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.memu-item {
				height: 200rpx;
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.imgIcon {
					img {
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 10rpx;
					}
				}

				.memu-main {
					text-align: center;
					font-size: 26rpx;
					font-weight: 600;
				}
			}
		}
	}
</style>