# 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>
```