美文网首页
活动页面开发规范(简)

活动页面开发规范(简)

作者: color_小浣熊 | 来源:发表于2019-08-08 15:32 被阅读0次

一、目录结构:

|---views
--------luckyDraw //转盘活动
-------------index.vue //PC端页面入口
-------------mindex.vue //m站页面入口
|---components //组件文件夹
---------luckyDraw
------------XXX.vue //子组件
|-----assets
-------------luckyDraw //活动图片位置

二、数据请求处理:

本次活动涉及到的异步数据请求都放在index.vue或者mindex.vue文件中,各个子组件需要的数据如果没有特殊要求均需要通过props获取父组件中的数据 [1]

三、样式(css or sass)书写:

css:

  1. 命名方法:如果需要需要两个单词需要采用单线连接,例:happy-day;更详细的请点击:CSS命名规范

  2. 书写顺序:

    • 代表位置的属性:例:position、top、left、right、bottom、display、z-index、float、flex等;
    • 代表自身大小的属性:例:width、height、padding、margin、border等
    • 代表文字的属性:例:font(family、weight、size)、color、text-align、test-indent、line-height、letter-spacing、text-overflow等;
    • 其他属性:例:background、transition、visibility、border-radius等
  3. 属性简写:padding[2]、margin[2]、font[3]属性的简写;更多的属性简介点击这里

sass:

  1. 页面中的颜色色值采用变量形式存储[4];
  2. 页面中当有可以重复利用的样式时,可以将相同的属性提取到一个自定义的类中,当需要使用的时候使用@extend 类名即可;例:
//自己声明的可复用的类名 test-extend
.test-extend {
  width:100px;
  height;100px;
}
//应用
.extend{
  @extend .test-extend;
  line-height:100px;
}
//渲染为
.extend{
  width:100px;
  height:100px;
  line-height:100px;
}


  1. 因每个人需要的数据可能在同一个接口中获得,所以采用传参形式;

  2. margin、padding的值为四个时,对应关系:上、右、下、左;三个值时:上、左右、下;两个值:上下、左右;

  3. font简写:font-style | font-variant | font-weight | font-size | line-height | font-family,同时,font-size和line-height只能通过斜杠/组成一个值,不能分开写,顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值;

  4. 有的网站多处用到同一个色值,采用变量可以达到类似"一键换肤"效果;

相关文章

  • 活动页面开发规范(简)

    一、目录结构: |---views--------luckyDraw //转盘活动-------------i...

  • 前端h5团队开发代码规范

    代码规范 HTML规范 基于W3C、苹果开发者等官方文档,并结合团队业务和开发过程中总结的规范约定,让页面HTML...

  • Android 编码规范

    转:Android 开发规范(完结版) - 简书

  • 移动端活动运营页设计规范

    前言 本规范用于,使用应用宝移动端常规运营活动视觉设计规范; 页面翻页方式为整屏滑动或者整页单屏; 为保证页面可用...

  • 「页面架构」规范与模块化

    页面模块化 规范 在具体谈论规范的之前,可以下去查看下各大网络公司的前端开发规范(Developemnt Styl...

  • 2021-03-29

    课程规划小程序 安装依赖 开发环境启动 构建生产环境 项目规范 目录及命名规范 【Pages目录】页面级目录pla...

  • android studio 的相关配置

    从工具到代码,全规范开发,实现多协同工作,减少彼此工作对接交叉代价链接代码规范 一. setting 页面默认快捷...

  • 移动前端开发规范(一般规范)

    系列目录 移动前端开发规范(一般规范)移动前端开发规范(技术栈规范)移动前端开发规范(HTML规范)移动前端开发规...

  • Software System Engineering 之 3

    Overview 人:在流程规范下,发挥创造力。 工具:保障软件过程管理。 流程:指导、规范软件开发实践活动,保证...

  • iOS 中JS与OC(UIWebView)的交互

    项目开发中,会推一些活动供用户参加,活动页面一般都是用h5或者web页面,这活动页面有时候需要跟移动端有交互操作,...

网友评论

      本文标题:活动页面开发规范(简)

      本文链接:https://www.haomeiwen.com/subject/rqrxjctx.html