---
layout: post
title:  Hybrid重构框架
color:  blue
width:   3 
height:  1
category: hybrid
---

#### Hybrid重构框架结构

!["框架结构"]({{"/assets/framework/1.png" | prepend: site.baseurl }})

框架结构是基于业务模型定制的 分为 【公共模块】  和 【业务模块】




#### 公共模块（Common ） 组成

公共模块  由两部分组成 分别是 【Scss】 和 【Widget】

!["公共模块结构"]({{"/assets/framework/2.png" | prepend: site.baseurl }})

***
**Scss 放着框架公用代码**

【component】 

*  _button(按钮)

*  _list-item(列表 包括带箭头的)

*  _name-gender(性别样式  主要用在理财师业务模块中)

*  _notice-bar(小黄条)

*  _value(代表收益涨、跌的公共色值类)


【mixins】 

*  _border-line(兼容ios9 和 Android 关于1px显示的粗细问题 现已统一采用1px/*no*/)

*  _button(按钮 + 状态)

*  _clearfix(清除浮动)

*  _cus-font-height(自定义字号 高度 和button 合作用的)

*  _ellipse(省略号缩写)

*  _list-item(列表样式 供 component里的的list-item调用)

*  _value(涨跌样式 供 component里的的value调用)

*  _way-step-v(类似时间轴一样的 竖列步骤结构)


【themes】 定义了全站通用的颜色值

*  字体

*  基本色  橙色、白色、蓝色

*  蓝色、灰色的灰度级

*  线条色

*  文本色  

*  按钮色

*  收益涨跌色值


【core】是以上通用 样式的集合出口 


***

**Widget 存放框架组件样式代码**

暂时抽出的组件有 

*  animate（动画）

*  banner（广告banner）

*  baseloading（加载样式）

*  fundItem（基金模块）

*  indexCrowdfunding(理财首页的众筹模块)

*  newsItem（发现频道的 新闻模块）

*  prodfixItem （固收页的 产品模块 包括新手 和  加息类产品)

*  slick （轮播组件样式)

*  tab ( tab 导航)

***

#### 业务模块（Pages） 组成

目前业务模块 有众筹、白拿、基金、理财、发现、积分商城、新手引导、邀请、理财师 后续会根据业务内容的增加而变化


!["业务模块"]({{"/assets/framework/3.png" | prepend: site.baseurl }})