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

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

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

（一）样式图

---

 

（二）代码部分

2.1：wxml

<!-- --------------------------【序号003：瓷片区+弥散渐变】----------------------------------- -->
<view style="height: 50rpx;background-color: #FFA07A;"><text>序号003：瓷片区+弥散渐变</text></view>
<view class="tile-container">
  <view class="tile" style="background: linear-gradient(to right, #ffcccc, #ccffff);"></view>
  <view class="tile" style="background: linear-gradient(to right, #ccffcc, #99ccff);"></view>
  <view class="tile" style="background: linear-gradient(to right, #ffcc99, #ccffff);"></view>
  <view class="tile" style="background: linear-gradient(to right, #FFD3B5, #FFB78C);"></view>
  <view class="tile" style="background: linear-gradient(to right, #9AD7E9, #B5E2FF);"></view>
  <view class="tile" style="background: linear-gradient(to right, #B4EDB9, #E0F9E0);"></view>
</view>

<!-- --------------------------【序号002：瓷片区+内容】----------------------------------- -->
<view style="height: 50rpx;background-color: #FFA07A;"><text>序号002：瓷片区+内容</text></view>
<view class="main-container2">
  <view class="left-area2">
    <view class="left-tile2" style="background-color: #FFD700;">
      <view class="left-content2-1">
        <text class="title2">这是顶部标题</text>
        <text class="subtitle2">这是小标题</text>
      </view>
    </view>
  </view>
  <view class="right-area2">
    <view class="right-top-tile2" style="background-color: #98FB98;">
      <view class="left-content2-2">
        <text class="title2">这是顶部标题</text>
        <text class="subtitle2">这是小标题</text>
      </view>
    </view>
    <view class="right-bottom-tile2" style="background-color: #FFB6C1;">
      <view class="left-content2-3">
        <text class="title2">这是顶部标题</text>
        <text class="subtitle2">这是小标题</text>
      </view>
    </view>
  </view>
</view>


<!-- --------------------------【序号001：瓷片区】----------------------------------- -->
<view style="height: 50rpx;background-color: #FFA07A;"><text>序号001：瓷片区</text></view>
<view class="main-container1">
  <view class="left-area1">
    <view class="left-tile1" style="background-color: #FFD700;"></view>
  </view>
  <view class="right-area1">
    <view class="right-top-tile1" style="background-color: #98FB98;"></view>
    <view class="right-bottom-tile1" style="background-color: #FFB6C1;"></view>
  </view>
</view>

<!-- --------------------------【序号000：瓷片区】----------------------------------- -->
<view style="height: 50rpx;background-color: #FFA07A;"><text>序号000：瓷片区</text></view>
<view class="main-container">
  <view class="left-area">
    <view class="left-tile" style="background-color: #FFD700;"></view>
  </view>
  <view class="middle-area">
    <view class="middle-top-tile" style="background-color: #ADD8E6;"></view>
    <view class="middle-bottom-tile" style="background-color: #FFA07A;"></view>
  </view>
  <view class="right-area">
    <view class="right-top-tile" style="background-color: #98FB98;"></view>
    <view class="right-bottom-tile" style="background-color: #FFB6C1;"></view>
  </view>
</view>

---

 

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;
}