《样式设计011：模组-瓷片区》

描述：在开发小程序过程中，发现一些不错的案例，平时使用也比较多，稍微总结了下经验，以下内容可以直接复制使用，希望对大家有所帮助，废话不多说直接上干货！

一、小程序：模组-瓷片区

（一）样式图

（二）代码部分

2.1：wxml

序号003：瓷片区+弥散渐变

  
  
  
  
  
  


序号002：瓷片区+内容

  
    
      
        这是顶部标题
        这是小标题
      
    
  
  
    
      
        这是顶部标题
        这是小标题
      
    
    
      
        这是顶部标题
        这是小标题
      
    
  


序号001：瓷片区

  
    
  
  
    
    
  


序号000：瓷片区

  
    
  
  
    
    
  
  
    
    
  

2.2：wxss代码

/* --------------------------【序号003：瓷片区+弥散渐变】----------------------------------- */
.tile-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  width: 100%;
  height: 120px; /* 设置瓷片区的高度 */
  background-color: #D3D3D3;
  /* 设置浅灰色背景色 */
  margin-bottom: 10px;
}
.tile {
  width: 30%; /* 设置每个瓷片的宽度 */
  height: 44%; /* 设置每个瓷片的高度 */
  margin-top: 2%;
}
/* --------------------------【序号002：瓷片区+内容】----------------------------------- */
.main-container2 {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding-bottom: 10rpx;
  height: 300rpx;
  /* 设置整个布局的高度 */
  background-color: #D3D3D3;
  /* 设置浅灰色背景色 */
  margin-bottom: 10px;
}
.left-area2 {
  width: 43%;
}
.right-area2 {
  width: 55%;
}
.left-tile2 {
  height: 100%;
  padding-bottom: 10rpx;
  margin-left: 20rpx;
}
.right-top-tile2,
.right-bottom-tile2 {
  height: 50%;
  /* 设置瓷砖高度，左侧和中间右侧一样高 */
}
.right-bottom-tile2 {
  margin-top: 10rpx;
  /* 设置瓷砖高度，左侧和中间右侧一样高 */
}
.right-top-tile2,
.right-bottom-tile2 {
  margin-right: 20rpx;
}
/* ---瓷片区里面的内容--- */
.left-content2-1,
.left-content2-2,
.left-content2-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 水平居中 */
  height: 100%;
}
.left-content2-1 {
  justify-content: center; 
  /* 垂直居中 */
}
.left-content2-2 {
  justify-content: flex-start;
  /* 垂直居上 */
}
.left-content2-3 {
  justify-content: flex-end;
  /* 垂直居上 */
}

.title2 {
  font-size: 35rpx;
  /* 或其他您喜欢的尺寸 */
  font-weight: bold;
  color: #000000;
  /* 黑色 */
  margin-bottom: 5rpx;
  /* 调整标题和副标题的间距 */
}
.subtitle2 {
  font-size: 25rpx;
  /* 或其他您喜欢的尺寸 */
  color: #808080;
  /* 灰色 */
}
.image2 {
  width: 100%;
  height: auto;
  margin-top: 10rpx;
}
/* --------------------------【序号001：瓷片区+3个】----------------------------------- */
.main-container1 {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding-bottom: 10rpx;
  height: 300rpx;
  /* 设置整个布局的高度 */
  background-color: #D3D3D3;
  /* 设置浅灰色背景色 */
  margin-bottom: 10px;
}
.left-area1 {
  width: 43%;
}
.right-area1 {
  width: 55%;
}
.left-tile1 {
  height: 100%;
  padding-bottom: 10rpx;
  margin-left: 20rpx;
}
.right-top-tile1,
.right-bottom-tile1 {
  height: 50%;
  /* 设置瓷砖高度，左侧和中间右侧一样高 */
}
.right-bottom-tile1 {
  margin-top: 10rpx;
  /* 设置瓷砖高度，左侧和中间右侧一样高 */
}
.right-top-tile1,
.right-bottom-tile1 {
  margin-right: 20rpx;
}
/* --------------------------【序号000：瓷片区+5个】----------------------------------- */
.main-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding-bottom: 10rpx;
  height: 300rpx;
  /* 设置整个布局的高度 */
  background-color: #D3D3D3;
  /* 设置浅灰色背景色 */
  margin-bottom: 10px;
}
.left-area,
.middle-area,
.right-area {
  width: 32%;
  /* 设置左、中、右区域宽度 */
}
.left-tile {
  height: 100%;
  /* 设置瓷砖高度，左侧和中间右侧一样高 */
  padding-bottom: 10rpx;
  margin-left: 10rpx;
}
.middle-top-tile,
.middle-bottom-tile,
.right-top-tile,
.right-bottom-tile {
  height: 50%;
  /* 设置瓷砖高度，左侧和中间右侧一样高 */
}
.middle-bottom-tile,
.right-bottom-tile {
  margin-top: 10rpx;
  /* 设置瓷砖高度，左侧和中间右侧一样高 */
}
.right-top-tile,
.right-bottom-tile {
  margin-right: 10rpx;
}