CSS样式库 (commonStyle)

通用样式库是一组预定义的CSS类和样式，用于在UniApp项目中快速应用常见的样式效果。这些样式在App.vue中全局导入，可以在任何组件中直接使用。

通用字体配置

通用样式库提供了一系列字体大小类，可以通过简单的类名应用不同的字体大小。

.mf-font-15 {
  font-style: normal;
  font-size: 15rpx;
}

// 字体大小范围从15rpx到69rpx

还可以同时设置字体大小和行高：

.mf-font-15-h-20 {
  font-style: normal;
  font-size: 15rpx;
  line-height: 20rpx;
}

// 字体大小范围从15rpx到69rpx
// 行高范围从20rpx到69rpx

通用字体粗细

提供一系列字体粗细的类名，方便统一控制文本粗细：

.mf-weight-300 { font-weight: 300; letter-spacing: 2rpx; }
.mf-weight-400 { font-weight: 400; letter-spacing: 2rpx; }
.mf-weight-500 { font-weight: 500; letter-spacing: 2rpx; }
.mf-weight-600 { font-weight: 600; letter-spacing: 2rpx; }
.mf-weight-700 { font-weight: 700; letter-spacing: 2rpx; }
.mf-weight-800 { font-weight: 800; letter-spacing: 2rpx; }
.mf-weight-900 { font-weight: 900; letter-spacing: 2rpx; }
.mf-weight-1000 { font-weight: 1000; letter-spacing: 2rpx; }
.mf-weight-bold { font-weight: bold; letter-spacing: 2rpx; }

间距(Gap)设置

提供了5rpx到59rpx的间距设置：

.gap-5 { gap: 5rpx; }
.gap-6 { gap: 6rpx; }
// ...以此类推，一直到
.gap-59 { gap: 59rpx; }

多行文本截断

控制文本显示的行数，超出部分使用省略号表示：

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

// 行数范围从1到9

弹性布局 (Flex)

基础弹性盒子

.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

主轴对齐

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.flex-row-start {
  justify-content: flex-start;
}

.flex-row-end {
  justify-content: flex-end;
}

交叉轴对齐

.align-center {
  align-items: center;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.flex-col-start {
  align-items: flex-start;
}

.flex-col-end {
  align-items: flex-end;
}

自身对齐

.align-self-start {
  align-self: flex-start;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-center {
  align-self: center;
}

.align-self-stretch {
  align-self: stretch;
}

弹性盒子换行

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

弹性属性

.flex-shrink {
  flex-shrink: 1;
}

.flex-grow {
  flex-grow: 1;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.flex-3 {
  flex: 3;
}

组合弹性布局

.flex-center {
  justify-content: center;
  align-items: center;
}

使用示例

基础布局

<!-- 水平居中 -->
<view class="flex justify-center">
  <text>居中内容</text>
</view>

<!-- 垂直居中 -->
<view class="flex flex-col align-center">
  <text>垂直居中内容</text>
</view>

<!-- 水平垂直居中 -->
<view class="flex flex-center">
  <text>完全居中</text>
</view>

栅格布局

<!-- 两列等分布局 -->
<view class="flex">
  <view class="flex-1">左侧内容</view>
  <view class="flex-1">右侧内容</view>
</view>

<!-- 三列不等分布局 -->
<view class="flex">
  <view class="flex-1">左侧内容</view>
  <view class="flex-2">中间内容（占两份）</view>
  <view class="flex-1">右侧内容</view>
</view>

多行文本截断

<!-- 单行文本截断 -->
<view class="line-clamp-1">
  这是一段很长的文本，如果超出一行将会被截断并显示省略号...
</view>

<!-- 三行文本截断 -->
<view class="line-clamp-3">
  这是一段很长的文本，最多显示三行，超出的部分将被截断并显示省略号...
</view>

字体样式

<!-- 设置字体大小 -->
<text class="mf-font-18">18rpx大小的文本</text>

<!-- 设置字体大小和行高 -->
<text class="mf-font-20-h-30">20rpx大小，30rpx行高的文本</text>

<!-- 设置字体粗细 -->
<text class="mf-weight-500">中等粗细的文本</text>
<text class="mf-weight-bold">粗体文本</text>

间距设置

<!-- 设置10rpx的间距 -->
<view class="flex gap-10">
  <view>项目1</view>
  <view>项目2</view>
  <view>项目3</view>
</view>

最佳实践

1. 组合使用类名：通用样式类可以组合使用，例如 flex flex-center gap-10
2. 避免重复定义：优先使用通用样式类，避免在组件中重复定义相同的样式
3. 按需使用：只使用所需的样式类，避免添加不必要的类名
4. 维护可读性：保持类名的简洁和可读性，避免过多的类名堆叠

注意事项

1. 通用样式库使用 rpx 作为单位，在不同设备上会自动适配
2. 在复杂的布局中，可能需要结合内联样式和自定义样式
3. 字体大小类 .mf-font-* 覆盖了从15rpx到69rpx的范围，超出此范围需要自定义样式