flex布局实现多个盒子平均分布并换行

最新推荐文章于 2024-04-05 08:00:26 发布

入门小白

最新推荐文章于 2024-04-05 08:00:26 发布

阅读量1.5k

点赞数 1

文章标签： java 前端 javascript vue

本文链接：https://blog.csdn.net/qq_31346077/article/details/128156419

版权

<template>
	<view class="all">
		<!-- 设备信息 -->
		<view class="frame core">
			<!-- 标题 -->
			<view class="frame-box">
				<view class="frame-title-symbol"></view>
				<view class="frame-title">设备信息</view>
			</view>
			<!-- 图标 -->
			<view class="category">
				<view class="category-box">
					<image class="category-icon" src="/static/device/sbxx_01sbjs.svg" mode=""></image>
					<view class="">设备检索</view>
				</view>
				<view class="category-box">
					<image class="category-icon" src="/static/device/sbxx_02sbjk.svg" mode=""></image>
					<view class="">设备监控</view>
				</view>
				<view class="category-box">
					<image class="category-icon" src="/static/device/sbxx_03wgjc.svg" mode=""></image>
					<view class="">网关监测</view>
				</view>
				<view class="category-box">
					<image class="category-icon" src="/static/device/sbxx_04sys.svg" mode=""></image>
					<view class="">扫一扫</view>
				</view>
			</view>
		</view>
		<!-- 我的工作 -->
		<view class="frame core">
			<!-- 标题 -->
			<view class="frame-box">
				<view class="frame-title-symbol02"></view>
				<view class="frame-title">我的工作</view>
			</view>
			<!-- 图标 -->
			<view class="category">
				<view class="category-box">
					<image class="category-icon" src="/static/device/wdgz_01gzbj.svg" mode=""></image>
					<view class="">故障报警</view>
				</view>
				<view class="category-box">
					<image class="category-icon" src="/static/device/wdgz_02gzyj.svg" mode=""></image>
					<view class="">故障预警</view>
				</view>
				<view class="category-box">
					<image class="category-icon" src="/static/device/wdgz_03rgsb.svg" mode=""></image>
					<view class="">人工上报</view>
				</view>
				<view class="category-box">
					<image class="category-icon" src="/static/device/wdgz_04sbgh.svg" mode=""></image>
					<view class="">设备更换</view>
				</view>
				<view class="category-box">
					<image class="category-icon" src="/static/device/wdgz_05db.svg" mode=""></image>
					<view class="">待办</view>
				</view>
				<view class="category-box">
					<image class="category-icon" src="/static/device/wdgz_06dqr.svg" mode=""></image>
					<view class="">待确认</view>
				</view>
				<view class="category-box">
					<image class="category-icon" src="/static/device/wdgz_07yb.svg" mode=""></image>
					<view class="">已办</view>
				</view>
				<view class="category-box">
					<image class="category-icon" src="/static/device/wdgz_08qbrw.svg" mode=""></image>
					<view class="">全部任务</view>
				</view>
			</view>
		</view>
		<!-- 历史记录 -->
		<view class="frame core">
			<!-- 标题 -->
			<view class="frame-box">
				<view class="frame-title-symbol02"></view>
				<view class="frame-title">历史记录</view>
			</view>
			<!-- 图标 -->
			<view class="category">
				<view class="category-box">
					<image class="category-icon" src="/static/device/lsjl_01bjjl.svg" mode=""></image>
					<view class="">报警记录</view>
				</view>
				<view class="category-box">
					<image class="category-icon" src="/static/device/lsjl_02yjjl.svg" mode=""></image>
					<view class="">预警记录</view>
				</view>
				<view class="category-box">
					<image class="category-icon" src="/static/device/lsjl_03sbjl.svg" mode=""></image>
					<view class="">上报记录</view>
				</view>
				<view class="category-box">
					<image class="category-icon" src="/static/device/lsjl_04ghjl.svg" mode=""></image>
					<view class="">更换记录</view>
				</view>
			</view>
		</view>
		<!-- 知识库 -->
		<view class="frame core">
			<!-- 标题 -->
			<view class="frame-box">
				<view class="frame-title-symbol"></view>
				<view class="frame-title">设备信息</view>
			</view>
			<!-- 图标 -->
			<view class="category">
				<view class="category-box">
					<image class="category-icon" src="/static/device/zsk_01czsc.svg" mode=""></image>
					<view class="">操作手册</view>
				</view>
				<view class="category-box">
					<image class="category-icon" src="/static/device/zsk_02gzzn.svg" mode=""></image>
					<view class="">故障指南</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f3f3f3;
		font-family: MiSans-Medium, MiSans;
	}
	.all{
		padding-bottom: 30rpx;
	}
	.core{
		margin: 25rpx;
	}
	.frame{
		background-color: #fff;
		border-radius: 19rpx;
		padding: 26rpx 0;
	}
	// 标题
	.frame-box{
		display: flex;
		align-items: center;
		font-size: 33rpx;
		color: #333333;
		margin-left: 28rpx;
	}
	.frame-title{
		font-size: 33rpx;
		font-weight: 500;
	}
	.frame-title-symbol{
		width: 15rpx;
		height: 35rpx;
		background: #19BE6B;
		border-radius: 6rpx;
		margin-right: 15rpx;
	}
	.frame-title-symbol02{
		width: 15rpx;
		height: 35rpx;
		background: #FA3534;
		border-radius: 6rpx;
		margin-right: 15rpx;
	}
	// 类别图标
	.category{
		display: flex;
		flex-wrap: wrap;
	}
	.category-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		margin-top: 46rpx;
		font-size: 26rpx;
	}
	.category-icon{
		width: 104rpx;
		height: 104rpx;
		margin-bottom: 16rpx;
	}
</style>