静态资源规范

[douzi8]

css sprite

svg

通用svg

1. 可以直接打开h5/style/icon.html查看通用的icon

[manlili]

css sprite使用说明

第一步：图片准备

先将需要合并的小图放在\asset\src\img\sprite\自命名文件（比如test文件）的下面，然后进入\asset\src\h5打开控制台执行grunt csssprite命令，记录控制台每张小图的位置信息如下 { x:--, y:--, width:--, height: --， } 然后返回**\asset\src\img\sprite目录下会发现生成了test.png，将它拷贝到你放置的文件夹下待使用，这里假设合并后的图地址是my/asset/src/img/test.png

第二步：代码实现

具体使用方法如下,实例见my/help/index页面html和css html代码

<div class="hi-service-wrap flex-wrap">
    <a href="tel:4006300111" class="flex hi-tel-service gray3 fix-content" @click="hotlineAction">
        <div class="hi-bj hi-tel"></div>
        电话客服
    </a>
    <div v-if = "isOnLine" class="flex hi-online-service hi-online gray3 fix-content" @click="chatAction">
        <div class="hi-bj hi-service"></div>
        <div class="hi-dot" v-if="isCount"></div>
        在线客服 
    </div>
    <div v-else class="flex hi-online-service gray3 fix-content" @click="feedbackAction">
        <div class="hi-bj hi-online-feedback"></div>
        意见反馈
    </div>
</div>

css代码如下：

.hi-bj {
  background: url(/my/asset/src/img/test.png) no-repeat;
  /*合并后大图的长和宽*/
  -webkit-background-size: .5rem 2.035rem;  
  background-size: .5rem 2.035rem;
  margin: 0 auto;
}
.hi-tel {
  /*你要使用的小图的长和宽*/
  width: .5rem;  
  height: .5rem;
  /*你要使用的小图在大图中的位置，就是执行grunt csssprite后控制台打出的信息 */
  background-position: 0 31.59%;
  margin-bottom: .1rem;
}
.hi-service {
  /*你要使用的小图的长和宽*/
  width: .5rem;
  height: .51rem;
  /*你要使用的小图在大图中的位置，就是执行grunt csssprite后控制台打出的信息 */
  background-position: 0 65.79%;
  margin-bottom: .09rem;
}
.hi-online-feedback {
  /*你要使用的小图的长和宽*/
  width: .5rem;
  height: .51rem;
  /*你要使用的小图在大图中的位置，就是执行grunt csssprite后控制台打出的信息 */
  background-position: 0 100%;
  margin-bottom: .09rem;
}

如上面代码给需要雪碧图的标签加总体类名hi-bj，然后再在标签上加小图类名比如hi-tel，hi-service，hi-online-feedback，具体使用方法见上面注释

[manlili]

svg使用说明

第一步：准备svg图

第一节 框架里面svg

框架svg无需个人准备，可直接使用，每次新增svg需给廖经理说，打开**\asset\src\h5\style文件下面的icon.html便可查看

第二节 业务定制svg

svg图由设计师提交到阿里素材库ui项目，前端去ui项目组中取需要的svg（64*64规格）图下载，下载后放入\asset\src\style\svg文件夹下面，然后进入\asset\src\h5打开控制台执行grunt svgSprite命令，随后返回**\asset\src\style\svg文件夹下面找到生成的index.html文件，打开浏览每个svg的地址

第二步：使用svg图

第一节：使用框架svg

在html里面写入代码

<svg class="svg"><use xlink:href="#car"></use></svg>

第二节：使用定制svg

在html里面写入代码

<svg class="svg"><use xlink:href="/{module}/asset/src/style/sprite.svg#mark"></use></svg>