@wya/sass

• Documents

npm install --save @wya/sass

1. 准则

2. 文件目录

3. 命名规范

4. 使用方式

5. 样式输出

• 5.1 flex
• 5.2 layout
• 5.3 柵格
• 5.4 定位
• 5.5 辅助
• 5.6 动画

准则

1. 以flex布局为主，栅格布局、固定布局、流体布局，绝对定位布局，浮动布局等为辅的一套css样式表。
2. 常见的flex布局和flex单个属性类。
3. 辅助布局类。

文件目录

• themes 定义公共的变量
  • color.scss 颜色变量
  • default.scss 全局变量
• mixins 定义公共的方法
  • animate.scss 动画
  • common.scss 公共方法
• core 输出全局的样式
  • globals.scss 定义全局变量的方法
  • reset.scss 输出reset样式
  • animate.scss 输出动画
  • flex.scss 输出flex布局
  • layout.scss 输出全局变量
  • pc pc模块样式
  • mobile 手机模块样式

命名规范

• 全局命名以 g- 开头
• 模块命名以 v- 开头
  1. 外层：以 v- 开头， v-(路由简写)-(组件模块)， 例如： v-home-header;
  2. 内层：以_ 开头， _(模块)， 例如： _tab ;
• 公共组件命名以 c- 开头
  1. 外层：以 c- 开头， c-(弹层功能)-(结构)， 例如： c-addr-header;
  2. 内层：以__ 开头， __(模块)， 例如： __tab ;

使用方法

在需要引用公共变量的时候，一般里面可以去改变全局的颜色，边距，单位等变量。

  @import "../themes/default"; // 公共变量

在需要引用公共方法的时候，可以去调用全局定义的方法，例如：@include commonScale(100px)。

  @import "../mixins/common"; // 公共方法

在需要引用动画方法的时候，定义了例如： @keyframes animate-fadeIn 淡入等动画。

  @import "../mixins/animate"; // 公共动画

样式输出

• 5.1 flex

百分比布局

class	备注	关键代码
.g-flex	flex布局	display: flex
.g-col	占一位	flex: 1
.g-col-2	占两位	flex: 2
.g-full	铺满	flex: 0 0 100%
.g-1of2	占50%	flex: 0 0 50%
.g-1of3	占1/3	flex: 0 0 33.33333333%
.g-2of3	占2/3	flex: 0 0 66.66666666%
.g-1of4	占1/4	flex: 0 0 25%
.g-3of4	占3/4	flex: 0 0 75%
.g-1of5	占1/5	flex: 0 0 20%
.g-2of5	占2/5	flex: 0 0 40%
.g-3of5	占3/5	flex: 0 0 60%
.g-4of5	占4/5	flex: 0 0 80%

基本网格布局

class	备注
.g-flex-grid-3	三列
.g-flex-grid-4	四列
.g-flex-grid-5	五列
.g-flex-grid-6	六列

圣杯布局

class	备注
.g-flex-holy

输入框的布局

<div class="g-flex">
	<label></label>
	<input class="g-col" />
	<button></button>
</div>

悬挂式布局

<div class="g-flex g-ai-fs">
  <img class="g-m-r" src="" alt="">
  <p class="g-col"></p>
</div>

对齐

class	备注	关键代码
.g-flex-cc	水平垂直居中	justify-content: center; align-items: center
.g-flex-ac	垂直居中	align-items: center

flex单个属性类 以g-(属性名首字母)-(属性值首字母) 命名

class	备注	关键代码
.g-fd-c	主轴为垂直方向，起点在上	flex-direction: column
.g-fd-cr	主轴为垂直方向，倒序	flex-direction: column-reverse
.g-fd-r	主轴为水平方向，起点在左	flex-direction: row
.g-fd-rr	主轴为水平方向，起点在右	flex-direction: row-reverse
.g-fw-w	换行，第一行在上方。	flex-wrap: wrap
.g-fw-wr	换行，第一行在下方。	flex-wrap: wrap-reverse
.g-fw-n	不换行	flex-wrap: nowrap
.g-jc-fs	位于容器的开头	justify-content: flex-start
.g-jc-fe	位于容器的结尾	justify-content: flex-end
.g-jc-c	位于容器的中心	justify-content: center
.g-jc-sb	两端对齐, 间隔相等	justify-content: space-between
.g-jc-sa	间隔相等	justify-content: space-around
.g-ai-fs	侧轴方向, 位于容器的开头, 主轴方向排列	align-items: flex-start
.g-ai-fe	侧轴方向, 位于容器的结尾, 主轴方向排列	align-items: flex-end
.g-ai-c	侧轴方向, 位于容器的中心, 主轴方向排列	align-items: center
.g-ai-b	侧轴方向, 位于容器的基线上, 主轴方向排列	align-items: baseline
.g-ai-s	侧轴方向, 元素被拉伸以适应容器, 主轴方向排列	align-items: stretch
.g-ac-fs	侧轴方向, 元素位于容器的开头, 侧轴方向排列	align-content: flex-start
.g-ac-fe	侧轴方向,元素位于容器的结尾, 侧轴方向排列	align-content: flex-end
.g-ac-sb	两端对齐, 间隔相等, 侧轴方向排列	align-content: space-between
.g-ac-sa	间隔相等, 侧轴方向排列	align-content: space-around
.g-ac-s	元素被拉伸以适应容器, 剩余空间被所有行平分, 以扩大它们的侧轴尺寸	align-content: stretch
.g-as-fs	flex子项在侧轴方向上的对齐方式: 位于容器的开头	align-self: flex-start
.g-as-fe	flex子项在侧轴方向上的对齐方式: 位于容器的结尾	align-self: flex-end
.g-as-a	默认值，继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"	align-self: auto
.g-as-b	元素位于容器的基线上	align-self: baseline
.g-as-c	flex子项在侧轴方向上的对齐方式: 元素位于容器的中心	align-self: center
.g-as-s	元素被拉伸以适应容器	align-self: stretch

• 5.2 layout

color g-c-(颜色／变量) 颜色效果可在MarkDown编辑器中查看

class	备注	颜色效果
.g-c-blue-dark	#0b76fe	blue-dark
.g-c-blue-mid	#16a3ff	blue-mid
.g-c-blue-light	#6ab4ff	blue-light
.g-c-yellow-dark	#f2c300	yellow-dark
.g-c-yellow-mid	#ffd00d	yellow-mid
.g-c-yellow-light	#ffd31c	yellow-light
.g-c-orange-dark	#ef3528	orange-dark
.g-c-orange-mid	#fa6f60	orange-mid
.g-c-orange-light	#fc9780	orange-light
.g-c-gray-dark	#edeef0	gray-dark
.g-c-gray-mid	#f5f6f7	gray-mid
.g-c-gray-light	#f7f8fa	gray-light
.g-c-black-dark	#2e3136	black-dark
.g-c-black-mid	#636770	black-mid
.g-c-black-light	#9c9fa6	black-light
.g-c-purple-dark	#8b61f3	purple-dark
.g-c-purple-mid	#a48efc	purple-mid
.g-c-purple-light	#cca3ff	purple-light
.g-c-black	#000	black
.g-c-white	#fff	white
.g-c-444	#444	444
.g-c-67	#676767	676767
.g-c-f8	#f2f2f2	f2f2f2
.g-c-f8	#f8f8f8	f8f8f8
.g-c-ef	#efefef	efefef
.g-c-cd	#cdcdcd	cdcdcd
.g-c-e8	#e8e8e8	e8e8e8
.g-c-d9	#d9d9d9	d9d9d9
.g-c-f4	#f4f4f4	f4f4f4
.g-c-f9	#f9f9f9	f9f9f9
.g-c-000	#000000	000000
.g-c-333	#333333	333333
.g-c-51	#515151	515151
.g-c-666	#666666	666666
.g-c-999	#999999	999999
.g-c-aaa	#aaaaaa	aaaaaa
.g-c-bbb	#bbbbbb	bbbbbb
.g-c-bd	#bdbdbd	bdbdbd
.g-c-info	#0177de	0177de
.g-c-success	#00a854	00a854
.g-c-error	#f04134	f04134
.g-c-warn	#ffbf00	ffbf00

bgColor g-bg-(颜色／变量) 颜色效果可在MarkDown编辑器中查看

class	备注	颜色效果
.g-bg-blue-dark	#0b76fe
.g-bg-blue-mid	#16a3ff
.g-bg-blue-light	#6ab4ff
.g-bg-yellow-dark	#f2c300
.g-bg-yellow-mid	#ffd00d
.g-bg-yellow-light	#ffd31c
.g-bg-orange-dark	#ef3528
.g-bg-orange-mid	#fa6f60
.g-bg-orange-light	#fc9780
.g-bg-gray-dark	#edeef0
.g-bg-gray-mid	#f5f6f7
.g-bg-gray-light	#f7f8fa
.g-bg-black-dark	#2e3136
.g-bg-black-mid	#636770
.g-bg-black-light	#9c9fa6
.g-bg-purple-dark	#8b61f3
.g-bg-purple-mid	#a48efc
.g-bg-purple-light	#cca3ff
.g-bg-black	#000
.g-bg-white	#fff
.g-bg-444	#444
.g-bg-67	#676767
.g-bg-f2	#f2f2f2
.g-bg-f8	#f8f8f8
.g-bg-ef	#efefef
.g-bg-cd	#cdcdcd
.g-bg-e8	#e8e8e8
.g-bg-d9	#d9d9d9
.g-bg-f4	#f4f4f4
.g-bg-f9	#f9f9f9
.g-bg-000	#000000
.g-bg-333	#333333
.g-bg-51	#515151
.g-bg-666	#666666
.g-bg-999	#999999
.g-bg-aaa	#aaaaaa
.g-bg-bbb	#bbbbbb
.g-bg-bd	#bdbdbd
.g-bg-info	#0177de
.g-bg-success	#00a854
.g-bg-error	#f04134
.g-bg-warn	#ffbf00

font-size g-fs-(字号)

class	备注
.g-fs-10	font-size: 10px
.g-fs-12	font-size: 12px
.g-fs-12	font-size: 13px
.g-fs-14	font-size: 14px
.g-fs-16	font-size: 16px
.g-fs-18	font-size: 18px
.g-fs-20	font-size: 20px
.g-fs-22	font-size: 22px
.g-fs-24	font-size: 24px
.g-fs-26	font-size: 26px
.g-fs-28	font-size: 28px
.g-fs-30	font-size: 30px
.g-fs-32	font-size: 32px
.g-fs-34	font-size: 34px
.g-fs-36	font-size: 36px
.g-fs-38	font-size: 38px
.g-fs-40	font-size: 40px
.g-fs-48	font-size: 48px
.g-fs-50	font-size: 50px
.g-fs-60	font-size: 60px
.g-fs-70	font-size: 70px
.g-fs-80	font-size: 80px
.g-fs-90	font-size: 90px
.g-fs-100	font-size: 100px

line-height g-lh-(值)

class	备注
.g-lh-16	line-height: 16px
.g-lh-18	line-height: 18px
.g-lh-20	line-height: 20px
.g-lh-22	line-height: 22px
.g-lh-24	line-height: 24px
.g-lh-26	line-height: 26px
.g-lh-28	line-height: 28px
.g-lh-30	line-height: 30px
.g-lh-32	line-height: 32px
.g-lh-34	line-height: 34px
.g-lh-36	line-height: 36px
.g-lh-38	line-height: 38px
.g-lh-40	line-height: 40px
.g-lh-42	line-height: 42px
.g-lh-44	line-height: 44px
.g-lh-60	line-height: 60px
.g-lh-72	line-height: 72px
.g-lh-80	line-height: 80px
.g-lh-88	line-height: 88px
.g-lh-120	line-height: 120px

padding g-pd-(方向)?-(值/变量)

class	备注
.g-pd-5	padding: 5px
.g-pd-8	padding: 8px
.g-pd-10	padding: 10px
.g-pd-12	padding: 12px
.g-pd-13	padding: 13px
.g-pd-15	padding: 15px
.g-pd-16	padding: 16px
.g-pd-18	padding: 18px
.g-pd-20	padding: 20px
.g-pd-21	padding: 21px
.g-pd-24	padding: 24px
.g-pd-25	padding: 25px
.g-pd-30	padding: 30px
.g-pd-32	padding: 32px
.g-pd-48	padding: 48px
.g-pd-56	padding: 56px
.g-pd-tb-5	padding-top: 5px; padding-bottom: 5px
.g-pd-tb-8	padding-top: 8px; padding-bottom: 8px
.g-pd-tb-10	padding-top: 10px; padding-bottom: 10px
.g-pd-tb-12	padding-top: 12px; padding-bottom: 12px
.g-pd-tb-13	padding-top: 13px; padding-bottom: 13px
.g-pd-tb-15	padding-top: 15px; padding-bottom: 15px
.g-pd-tb-16	padding-top: 16px; padding-bottom: 16px
.g-pd-tb-18	padding-top: 18px; padding-bottom: 18px
.g-pd-tb-20	padding-top: 20px; padding-bottom: 20px
.g-pd-tb-21	padding-top: 21px; padding-bottom: 21px
.g-pd-tb-24	padding-top: 24px; padding-bottom: 24px
.g-pd-tb-25	padding-top: 25px; padding-bottom: 25px
.g-pd-tb-30	padding-top: 30px; padding-bottom: 30px
.g-pd-tb-32	padding-top: 32px; padding-bottom: 32px
.g-pd-tb-48	padding-top: 48px; padding-bottom: 48px
.g-pd-tb-56	padding-top: 56px; padding-bottom: 56px
.g-pd-lr-5	padding-left: 5px; padding-right: 5px
.g-pd-lr-8	padding-left: 8px; padding-right: 8px
.g-pd-lr-10	padding-left: 10px; padding-right: 10px
.g-pd-lr-13	padding-left: 13px; padding-right: 13px
.g-pd-lr-15	padding-left: 15px; padding-right: 15px
.g-pd-lr-16	padding-left: 16px; padding-right: 16px
.g-pd-lr-18	padding-left: 18px; padding-right: 18px
.g-pd-lr-20	padding-left: 20px; padding-right: 20px
.g-pd-lr-21	padding-left: 21px; padding-right: 21px
.g-pd-lr-24	padding-left: 24px; padding-right: 24px
.g-pd-lr-25	padding-left: 25px; padding-right: 25px
.g-pd-lr-30	padding-left: 30px; padding-right: 30px
.g-pd-lr-32	padding-left: 32px; padding-right: 32px
.g-pd-lr-48	padding-left: 48px; padding-right: 48px
.g-pd-lr-56	padding-left: 56px; padding-right: 56px
.g-pd-t-5	padding-top: 5px
.g-pd-t-8	padding-top: 8px
.g-pd-t-10	padding-top: 10px
.g-pd-t-12	padding-top: 12px
.g-pd-t-13	padding-top: 13px
.g-pd-t-15	padding-top: 15px
.g-pd-t-16	padding-top: 16px
.g-pd-t-18	padding-top: 18px
.g-pd-t-20	padding-top: 20px
.g-pd-t-21	padding-top: 21px
.g-pd-t-24	padding-top: 24px
.g-pd-t-25	padding-top: 25px
.g-pd-t-30	padding-top: 30px
.g-pd-t-32	padding-top: 32px
.g-pd-t-48	padding-top: 48px
.g-pd-t-56	padding-top: 56px
.g-pd-l-5	padding-left: 5px
.g-pd-l-8	padding-left: 8px
.g-pd-l-10	padding-left: 10px
.g-pd-l-12	padding-left: 12px
.g-pd-l-13	padding-left: 13px
.g-pd-l-15	padding-left: 15px
.g-pd-l-16	padding-left: 16px
.g-pd-l-18	padding-left: 18px
.g-pd-l-20	padding-left: 20px
.g-pd-l-21	padding-left: 21px
.g-pd-l-24	padding-left: 24px
.g-pd-l-25	padding-left: 25px
.g-pd-l-30	padding-left: 30px
.g-pd-l-32	padding-left: 32px
.g-pd-l-48	padding-left: 48px
.g-pd-l-56	padding-left: 56px
.g-pd-b-5	padding-bottom: 5px
.g-pd-b-8	padding-bottom: 8px
.g-pd-b-10	padding-bottom: 10px
.g-pd-b-12	padding-bottom: 12px
.g-pd-b-13	padding-bottom: 13px
.g-pd-b-15	padding-bottom: 15px
.g-pd-b-16	padding-bottom: 16px
.g-pd-b-18	padding-bottom: 18px
.g-pd-b-20	padding-bottom: 20px
.g-pd-b-21	padding-bottom: 21px
.g-pd-b-24	padding-bottom: 24px
.g-pd-b-25	padding-bottom: 25px
.g-pd-b-30	padding-bottom: 30px
.g-pd-b-32	padding-bottom: 32px
.g-pd-b-48	padding-bottom: 48px
.g-pd-b-56	padding-bottom: 56px
.g-pd-r-5	padding-right: 5px
.g-pd-r-8	padding-right: 8px
.g-pd-r-10	padding-right: 10px
.g-pd-r-12	padding-right: 12px
.g-pd-r-13	padding-right: 13px
.g-pd-r-15	padding-right: 15px
.g-pd-r-16	padding-right: 16px
.g-pd-r-18	padding-right: 18px
.g-pd-r-20	padding-right: 20px
.g-pd-r-21	padding-right: 21px
.g-pd-r-24	padding-right: 24px
.g-pd-r-25	padding-right: 25px
.g-pd-r-30	padding-right: 30px
.g-pd-r-32	padding-right: 32px
.g-pd-r-48	padding-right: 48px
.g-pd-r-56	padding-right: 56px

margin g-m-(方向)?-(值/变量)

class	备注
.g-m-5	margin: 5px
.g-m-8	margin: 8px
.g-m-10	margin: 10px
.g-m-12	margin: 12px
.g-m-13	margin: 13px
.g-m-15	margin: 15px
.g-m-16	margin: 16px
.g-m-18	margin: 18px
.g-m-20	margin: 20px
.g-m-21	margin: 21px
.g-m-24	margin: 24px
.g-m-25	margin: 25px
.g-m-30	margin: 30px
.g-m-32	margin: 32px
.g-m-48	margin: 48px
.g-m-56	margin: 56px
.g-m-tb-5	margin-top: 5px; margin-bottom: 5px
.g-m-tb-8	margin-top: 8px; margin-bottom: 8px
.g-m-tb-10	margin-top: 10px; margin-bottom: 10px
.g-m-tb-12	margin-top: 12px; margin-bottom: 12px
.g-m-tb-13	margin-top: 13px; margin-bottom: 13px
.g-m-tb-15	margin-top: 15px; margin-bottom: 15px
.g-m-tb-16	margin-top: 16px; margin-bottom: 16px
.g-m-tb-18	margin-top: 18px; margin-bottom: 18px
.g-m-tb-20	margin-top: 20px; margin-bottom: 20px
.g-m-tb-21	margin-top: 21px; margin-bottom: 21px
.g-m-tb-24	margin-top: 24px; margin-bottom: 24px
.g-m-tb-25	margin-top: 25px; margin-bottom: 25px
.g-m-tb-30	margin-top: 30px; margin-bottom: 30px
.g-m-tb-32	margin-top: 32px; margin-bottom: 32px
.g-m-tb-48	margin-top: 48px; margin-bottom: 48px
.g-m-tb-56	margin-top: 56px; margin-bottom: 56px
.g-m-lr-5	margin-left: 5px; margin-right: 5px
.g-m-lr-8	margin-left: 8px; margin-right: 8px
.g-m-lr-10	margin-left: 10px; margin-right: 10px
.g-m-lr-13	margin-left: 13px; margin-right: 13px
.g-m-lr-15	margin-left: 15px; margin-right: 15px
.g-m-lr-16	margin-left: 16px; margin-right: 16px
.g-m-lr-18	margin-left: 18px; margin-right: 18px
.g-m-lr-20	margin-left: 20px; margin-right: 20px
.g-m-lr-21	margin-left: 21px; margin-right: 21px
.g-m-lr-24	margin-left: 24px; margin-right: 24px
.g-m-lr-25	margin-left: 25px; margin-right: 25px
.g-m-lr-30	margin-left: 30px; margin-right: 30px
.g-m-lr-32	margin-left: 32px; margin-right: 32px
.g-m-lr-48	margin-left: 48px; margin-right: 48px
.g-m-lr-56	margin-left: 56px; margin-right: 56px
.g-m-t-5	margin-top: 5px
.g-m-t-8	margin-top: 8px
.g-m-t-10	margin-top: 10px
.g-m-t-12	margin-top: 12px
.g-m-t-13	margin-top: 13px
.g-m-t-15	margin-top: 15px
.g-m-t-16	margin-top: 16px
.g-m-t-18	margin-top: 18px
.g-m-t-20	margin-top: 20px
.g-m-t-21	margin-top: 21px
.g-m-t-24	margin-top: 24px
.g-m-t-25	margin-top: 25px
.g-m-t-30	margin-top: 30px
.g-m-t-32	margin-top: 32px
.g-m-t-48	margin-top: 48px
.g-m-t-56	margin-top: 56px
.g-m-l-5	margin-left: 5px
.g-m-l-8	margin-left: 8px
.g-m-l-10	margin-left: 10px
.g-m-l-12	margin-left: 12px
.g-m-l-13	margin-left: 13px
.g-m-l-15	margin-left: 15px
.g-m-l-16	margin-left: 16px
.g-m-l-18	margin-left: 18px
.g-m-l-20	margin-left: 20px
.g-m-l-21	margin-left: 21px
.g-m-l-24	margin-left: 24px
.g-m-l-25	margin-left: 25px
.g-m-l-30	margin-left: 30px
.g-m-l-32	margin-left: 32px
.g-m-l-48	margin-left: 48px
.g-m-l-56	margin-left: 56px
.g-m-b-5	margin-bottom: 5px
.g-m-b-8	margin-bottom: 8px
.g-m-b-10	margin-bottom: 10px
.g-m-b-12	margin-bottom: 12px
.g-m-b-13	margin-bottom: 13px
.g-m-b-15	margin-bottom: 15px
.g-m-b-16	margin-bottom: 16px
.g-m-b-18	margin-bottom: 18px
.g-m-b-20	margin-bottom: 20px
.g-m-b-21	margin-bottom: 21px
.g-m-b-24	margin-bottom: 24px
.g-m-b-25	margin-bottom: 25px
.g-m-b-30	margin-bottom: 30px
.g-m-b-32	margin-bottom: 32px
.g-m-b-48	margin-bottom: 48px
.g-m-b-56	margin-bottom: 56px
.g-m-r-5	margin-right: 5px
.g-m-r-8	margin-right: 8px
.g-m-r-10	margin-right: 10px
.g-m-r-12	margin-right: 12px
.g-m-r-13	margin-right: 13px
.g-m-r-15	margin-right: 15px
.g-m-r-16	margin-right: 16px
.g-m-r-18	margin-right: 18px
.g-m-r-20	margin-right: 20px
.g-m-r-21	margin-right: 21px
.g-m-r-24	margin-right: 24px
.g-m-r-25	margin-right: 25px
.g-m-r-30	margin-right: 30px
.g-m-r-32	margin-right: 32px
.g-m-r-48	margin-right: 48px
.g-m-r-56	margin-right: 56px

img大小 g-img-(值)

class	备注
.g-img-24	长宽24px
.g-img-32	长宽32px
.g-img-40	长宽40px
.g-img-56	长宽56px
.g-img-64	长宽64px
.g-imgc-24	圆形，长宽24px
.g-imgc-32	圆形，长宽32px
.g-imgc-40	圆形，长宽40px
.g-imgc-56	圆形，长宽56px
.g-imgc-64	圆形，长宽64px
.g-imgr-24	圆角4px，长宽24px
.g-imgr-32	圆角4px，长宽32px
.g-imgr-40	圆角4px，长宽40px
.g-imgr-56	圆角4px，长宽56px
.g-imgr-64	圆角4px，长宽64px

• 5.3 柵格

class	备注
.g-row
.g-w-(number)	12>= number >=1
.g-fw-(number)	12>= number >=1 float:left;

• 5.4 定位

class	备注
.g-fixed	固定定位
.g-relative	绝对定位
.g-absolute	相对定位

• 5.5 浮动

class	备注
.g-clearfix	清除浮动
.g-fr	右浮
.g-fl	左浮

• 5.6 辅助

1像素边框

class	备注
.g-b	1像素边框
.g-bb	1像素下(border-bottom)边框
.g-br	1像素右(border-right)边框
.g-bl	1像素左(border-left)边框
.g-bt	1像素上(border-top)边框

文本

class	备注
.g-tc	居中
.g-tl	居左
.g-tr	居右
.g-td-lh	删除线
.g-td-ul	下划线
.g-nowrap	不换行
.g-nobreak	字母数字换行
.g-break	字母数字换行
.g-allbreak	所有文本换行

其他

class	备注
.g-h-full	height: 100vh;
.g-br-circle	border-radius: 100%;
.g-br-sem	默认圆角 (8px)
.g-bs	边框阴影
.g-bs-t	顶部阴影
.g-disabled	禁用事件
.g-noanimate	禁用动画
.g-show, .g-block, .g-dp-b	display: block
.g-dp-n, .g-hide, .g-none	displacy: none
.g-dp-i, .g-inline	display: inline
.g-dp-ib, .g-inline-block	display: inline-block
.g-pointer	cursor: pointer
.g-divide	分割线
.g-dot	5像素的点
.g-of-h	overflow: hidden
.g-oneline	单行省略
.g-twoline	两行省略
.g-one-lh	行高32px, 高度64px
.g-two-lh	行高32px, 高度32px
.g-operation	点击文字按钮样式
.g-disabled	无点击事件

动画请使用vc-transtion or rc-transtion