generated from chenhao/template-h5
87 lines
2.2 KiB
Markdown
87 lines
2.2 KiB
Markdown
# ch-xymy-h5
|
|
|
|
### 一、图片命名规范
|
|
|
|
#### 图片文件
|
|
|
|
| 类型 | 命名格式 | 示例 |
|
|
|------|----------|------|
|
|
| 图标类 | `icon-${模块}-{用途}-{状态}.png` | `icon-home-menu.png`、`icon-mall-cart-active.png` |
|
|
| 图片类 | `{模块}-{用途}-{序号}.jpg` | `goods-detail-1.jpg`、`home-banner.jpg` |
|
|
| Logo类 | `img-logo-{名称}.png` | `img-logo-app.png`、`img-logo-merchant.png` |
|
|
| 背景类 | `img-{模块}-bg.png` | `img-user-center-bg.png` |
|
|
|
|
#### 状态后缀
|
|
|
|
| 后缀 | 含义 |
|
|
|------|------|
|
|
| `-normal` | 普通状态 |
|
|
| `-active` | 高亮/选中状态 |
|
|
| `-inactive` | 非激活状态 |
|
|
| `-disabled` | 禁用状态 |
|
|
| `-1` `-2` `-3` | 索引序号 |
|
|
|
|
#### 图片命名示例
|
|
|
|
```
|
|
# 图标类
|
|
icon-tabbar-home-normal.png # 图标-标签栏-首页-普通
|
|
icon-tabbar-home-active.png # 图标-标签栏-首页-选中
|
|
icon-mall-cart.png # 图标-商城-购物车
|
|
|
|
# 图片类
|
|
img-goods-detail-1.jpg # 图片-商品-详情-1
|
|
img-home-banner.jpg # 图片-首页-横幅
|
|
img-user-center-bg.png # 图片-用户中心-背景
|
|
|
|
# 按钮类
|
|
btn-pay-confirm.png # 按钮-支付-确认
|
|
btn-login-submit.png # 按钮-登录-提交
|
|
|
|
# 通用类
|
|
img-placeholder.png # 占位图
|
|
img-empty.png # 空状态图
|
|
img-loading.gif # 加载动画
|
|
```
|
|
|
|
### 二、路由【文件】命名规范(驼峰式)
|
|
|
|
```javascript
|
|
{
|
|
path: '/Home',
|
|
name: 'Home',
|
|
component: () => import('./views/Tabbars/Home.vue')
|
|
}
|
|
|
|
{
|
|
path: '/GoodsDetail',
|
|
name: 'GoodsDetail',
|
|
component: () => import('./views/Goods/GoodsDetail.vue')
|
|
}
|
|
```
|
|
|
|
### 三、CSS 类名命名规范（下划线命名）
|
|
|
|
#### 命名格式
|
|
|
|
```
|
|
${模块}_${元素}_${状态}
|
|
```
|
|
|
|
```vue
|
|
<template>
|
|
<div class="goods_card">
|
|
<div class="goods_card__img">
|
|
<img :src="image" />
|
|
</div>
|
|
<div class="goods_card__info">
|
|
<h3 class="goods_card__title">{{ title }}</h3>
|
|
<div class="goods_card__footer">
|
|
<span class="goods_card__price goods_card__price--current">¥{{ price }}</span>
|
|
<van-button size="small" class="goods_card__btn">购买</van-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
```
|