之前我们遇到异形背景并且需要适配大小的时候使用过类似九宫格的思路，js 九宫格图片背景大小及定位生成，但是在一些复杂的情况比如类似下图，使用九宫格的方式也不是很方便，今天换一种思路使用flex的方式来实现。
实现代码
/**
* @Author: 858834013@qq.com
* @Name: gridView
* @Date: 2023年12月10日16:16:25
* @Desc: 仿安卓.9图九宫格效果
*/
<template>
<div class="gridView">
<!-- 顶部-->
<div class="gridViewTop">
<div class="gTop1"></div>
<div class="gTop2"></div>
<div class="gTop3"></div>
<div class="gTop4"></div>
<div class="gTop5"></div>
</div>
<!-- 上部-->
<div class="gridViewTop2">
<div class="gridViewTop2_01"></div>
<div class="gridViewTop2_02"></div>
<div class="gridViewTop2_03"></div>
</div>
<!-- 中间-->
<div class="gridViewTop3">
<div class="gridViewTop3_01"></div>
<div class="gridViewTop3_02"></div>
<div class="gridViewTop3_03"></div>
</div>
<!-- 下部-->
<div class="gridViewTop4">
<div class="gridViewTop4_01"></div>
<div class="gridViewTop4_02"></div>
<div class="gridViewTop4_03"></div>
</div>
<!-- 底部-->
<div class="gridViewBottom">
<div class="gridViewBottom1"></div>
<div class="gridViewBottom2"></div>
<div class="gridViewBottom3"></div>
</div>
</div>
</template>
<script>
export default {
name: "gridView"
}
</script>
<style lang="scss" scoped>
.gridView {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 80px;
min-width: 250px;
bottom: 0;
right: 0;
z-index: -1;
pointer-events: none; //避免div层被点击
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
align-content: flex-start;
//顶部
.gridViewTop {
width: 100%;
height: 40PX;
flex-shrink: 0;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.gTop1 {
background: url("./assets/bg/01.png") no-repeat;
background-size: 100% 100%;
width: 80PX;
height: 40PX;
flex-shrink: 0;
}
.gTop2 {
background: url("./assets/bg/02.png") no-repeat;
background-size: 100% 100%;
width: 50%;
height: 40PX;
}
.gTop3 {
background: url("./assets/bg/03.png") no-repeat;
background-size: 100% 100%;
width: 171PX;
height: 40PX;
flex-shrink: 0;
}
.gTop4 {
background: url("./assets/bg/04.png") no-repeat;
background-size: 100% 100%;
width: 50%;
height: 40PX;
}
.gTop5 {
background: url("./assets/bg/05.png") no-repeat;
background-size: 100% 100%;
width: 21PX;
height: 40PX;
flex-shrink: 0;
}
}
//中间
.gridViewTop1 {
width: 100%;
height: 40PX;
flex-shrink: 0;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.gTop1 {
background: url("./assets/bg/01.png") no-repeat;
background-size: 100% 100%;
width: 80PX;
height: 40PX;
flex-shrink: 0;
}
.gTop2 {
background: url("./assets/bg/02.png") no-repeat;
background-size: 100% 100%;
width: 50%;
height: 40PX;
}
.gTop3 {
background: url("./assets/bg/03.png") no-repeat;
background-size: 100% 100%;
width: 171PX;
height: 40PX;
flex-shrink: 0;
}
.gTop4 {
background: url("./assets/bg/04.png") no-repeat;
background-size: 100% 100%;
width: 50%;
height: 40PX;
}
.gTop5 {
background: url("./assets/bg/05.png") no-repeat;
background-size: 100% 100%;
width: 21PX;
height: 40PX;
flex-shrink: 0;
}
}
.gridViewTop2 {
width: 100%;
height: 50%;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.gridViewTop2_01 {
background: url("./assets/bg/06.png") no-repeat;
background-size: 100% 100%;
width: 45PX;
height: 100%;
flex-shrink: 0;
}
.gridViewTop2_02 {
background: url("./assets/bg/07.png") no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
.gridViewTop2_03 {
background: url("./assets/bg/08.png") no-repeat;
background-size: 100% 100%;
width: 40PX;
height: 100%;
flex-shrink: 0;
}
}
.gridViewTop4 {
width: 100%;
height: 50%;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.gridViewTop4_01 {
background: url("./assets/bg/12.png") no-repeat;
background-size: 100% 100%;
width: 45PX;
height: 100%;
flex-shrink: 0;
}
.gridViewTop4_02 {
background: url("./assets/bg/07.png") no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
.gridViewTop4_03 {
background: url("./assets/bg/08.png") no-repeat;
background-size: 100% 100%;
width: 40PX;
height: 100%;
flex-shrink: 0;
}
}
.gridViewTop3 {
width: 100%;
height: 83PX;
flex-shrink: 0;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.gridViewTop3_01 {
background: url("./assets/bg/09.png") no-repeat;
background-size: 100% 100%;
width: 45PX;
height: 83PX;
flex-shrink: 0;
}
.gridViewTop3_02 {
background: url("./assets/bg/10.png") no-repeat;
background-size: 100% 100%;
width: 100%;
height: 83PX;
}
.gridViewTop3_03 {
background: url("./assets/bg/11.png") no-repeat;
background-size: 100% 100%;
width: 40PX;
height: 83PX;
flex-shrink: 0;
}
}
//底部
.gridViewBottom {
width: 100%;
height: 32PX;
flex-shrink: 0;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.gridViewBottom1 {
background: url("./assets/bg/13.png") no-repeat;
background-size: 100% 100%;
width: 28PX;
height: 100%;
flex-shrink: 0;
}
.gridViewBottom2 {
background: url("./assets/bg/14.png") no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
.gridViewBottom3 {
background: url("./assets/bg/15.png") no-repeat;
background-size: 100% 100%;
width: 21PX;
height: 100%;
flex-shrink: 0;
}
}
}
</style>
