ch-cymy-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                 # 加载动画

二、路由【文件】命名规范(驼峰式)

{
  path: '/Home',
  name: 'Home',
  component: () => import('./views/Tabbars/Home.vue')
}

{
  path: '/GoodsDetail',
  name: 'GoodsDetail',
  component: () => import('./views/Goods/GoodsDetail.vue')
}

三、CSS 类名命名规范（下划线命名）

命名格式

${模块}_${元素}_${状态}

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