COUI

简介：COUI是一个移动端的css基础组件样式库

引入文件：

 
<link rel="stylesheet" href="./css/main.css">
<script src="./js/common.js"></script>

SCSS文件结构：

 
xxxxxxxxxx
@import "./icons.scss"; //图标样式
@import "./global.scss"; //全局样式,包括颜色变量，公共样式块
@import "./common.scss"; //公共样式

组件列表:

1. 按钮
2. 头部
3. 底部导航栏
4. 标题
5. 列表项
6. 复选项
7. 单选项
8. 选择项
9. 输入框
10. Tab栏
11. 浮窗
12. 提示框
13. 加载提示
14. 左右布局

按钮

按钮默认宽度100%，小按钮宽度自适应，两边边框与文本间距15px

 
xxxxxxxxxx
    <div class="coui_button">主按钮</div>
    <div class="coui_button outline">辅助按钮</div>
    <div class="coui_button loading">正在加载</div>
    <div class="coui_button lighten">不重要的按钮</div>
    <div class="coui_button small">小主按钮</div>
    <div class="coui_button small gray">小辅助按钮</div>

头部

替换icon只需更换"mdi-"开头的类名

 
​x
    <div class="coui_header">
        <div class="coui_search">
            <a href="#" class="coui_headerSearch">
                点击搜索商品
            </a>
        </div>
        <img src="./static/images/icon_c@3x.png" alt="" class="coui_header_left">
        <div class="coui_header_right mdi-message-text-outline"></div>
        <div class="coui_headerBg" id="coui_headerBg"></div>
    </div>
​
    <script>
      document.onscroll = function(){
        var el = document.getElementById("coui_headerBg");
        var opacity = self.pageYOffset/300; //控制透明度
        el.style.opacity=opacity;
      }
    </script>

 
xxxxxxxxxx
<div class="coui_headerL2">购物车
    <div class="coui_header_left mdi-chevron-left"></div>
    <div class="coui_header_right mdi-magnify"></div>
</div>

 
xxxxxxxxxx
    <div class="coui_headerL2">
        <div class="coui_header_select">
            <select name="" id="">
                <option value="">全部的订单</option>
                <option value="">待支付订单</option>
                <option value="">待发货订单</option>
                <option value="">已完成订单</option>
            </select>
        </div>
        <div class="coui_header_left mdi-chevron-left"></div>
        <div class="coui_header_right mdi-magnify"></div>
    </div>

 
xxxxxxxxxx
    <div class="coui_headerL2">
        <div class="coui_search">
            <input type="search" placeholder="我是搜索框">
        </div>
        <div class="coui_header_left mdi-chevron-left"></div>
        <div class="coui_header_right mdi-magnify"></div>
    </div>

底部导航栏

替换icon只需更换"mdi-"开头的类名

 
xxxxxxxxxx
    <div class="coui_navBottom">
        <div class="coui_navBottomItem mdi-home selected">首页</div>
        <div class="coui_navBottomItem mdi-view-quilt">分类</div>
        <div class="coui_navBottomItem mdi-cart">
            <div class="coui_cartNum">12</div>
        购物车</div>
        <div class="coui_navBottomItem mdi-account">我的</div>
    </div>

标题

 
xxxxxxxxxx
    <div class="coui_title color">
        大标题
    </div>
    <div class="coui_title color">
        大标题
        <a class="coui_titleRight">
            查看全部
        </a>
    </div>
    <div class="coui_title">
        主标题
    </div>
    <div class="coui_title">
        主标题
        <div class="coui_titleRight">
            这是描述文字
        </div>
    </div>

列表项

替换icon只需更换"mdi-"开头的类名

 
xxxxxxxxxx
        <div class="coui_listItem">
            <div class="coui_listItemContent">
                一个列表项
            </div>
        </div>
        <div class="coui_listItem coui_arrow">
            <div class="coui_listItemContent">
                一个可点击的列表项
            </div>
        </div>
        <div class="coui_listItem">
            <div class="coui_listItemContent">
                <i class="mdi-calendar-blank"></i>
                一个带字体图标的列表项
            </div>
        </div>
        <div class="coui_listItem coui_arrow">
            <div class="coui_listItemContent">
                <i class="mdi-calendar-blank"></i>
                一个带字体图标的可点击的列表项
            </div>
        </div>
        <div class="coui_listItem">
            <div class="coui_listItemContent">
                <img src="./static/images/huabei.png" alt="">
                一个带图片的列表项
            </div>
        </div>
        <div class="coui_listItem coui_arrow">
            <div class="coui_listItemContent">
                <img src="./static/images/huabei.png" alt="">
                一个带图片的可点击的列表项
            </div>
        </div>

 
xxxxxxxxxx
        <div class="coui_listItem">
            <div class="coui_listItemContent">
                一个列表项
                <div class="coui_listItemsSubtitle">描述文字</div>
            </div>
        </div>
        <div class="coui_listItem coui_arrow">
            <div class="coui_listItemContent">
                一个可点击的列表项
                <div class="coui_listItemsSubtitle">描述文字</div>
            </div>
        </div>
        <div class="coui_listItem">
            <div class="coui_listItemContent">
                <i class="mdi-calendar-blank"></i>
                一个带字体图标的列表项
                <div class="coui_listItemsSubtitle">描述文字</div>
            </div>
        </div>
        <div class="coui_listItem coui_arrow">
            <div class="coui_listItemContent">
                <i class="mdi-calendar-blank"></i>
                带字体图标的可点击列表项
                <div class="coui_listItemsSubtitle">描述文字</div>
            </div>
        </div>
        <div class="coui_listItem">
            <div class="coui_listItemContent">
                <img src="./static/images/huabei.png" alt="">
                一个带图片的列表项
                <div class="coui_listItemsSubtitle">描述文字</div>
            </div>
        </div>
        <div class="coui_listItem coui_arrow">
            <div class="coui_listItemContent">
                <img src="./static/images/huabei.png" alt="">
                带图片的可点击列表项
                <div class="coui_listItemsSubtitle">描述文字</div>
            </div>
        </div>

复选项

 
xxxxxxxxxx
        <label class="coui_checkboxItem" for="a1">
            <input type="checkbox" id="a1">
            <i class="coui_checkbox"></i>
            <div class="coui_checkboxTitle">复选项</div>
        </label>
        <label class="coui_checkboxItem" for="a2">
            <input type="checkbox" id="a2" checked>
            <i class="coui_checkbox"></i>
            <i class="coui_itemDetail"></i>
            <div class="coui_checkboxTitle">带信息描述的复选项</div>
        </label>

单选项

 
xxxxxxxxxx
        <label class="coui_radioItem" for="b1">
            <input type="radio" id="b1" name="b1">
            <i class="coui_radio"></i>
            <div class="coui_radioTitle">单选项</div>
        </label>
        <label class="coui_radioItem" for="b2">
            <input type="radio" id="b2" name="b1" checked>
            <i class="coui_radio"></i>
            <i class="coui_itemDetail"></i>
            <div class="coui_radioTitle">带信息描述的单选项</div>
        </label>

选择项

选择项默认宽度100%

 
xxxxxxxxxx
    <div class="coui_select">
        <select>
            <option>我选择一个苹果</option>
            <option>我选择一个香蕉</option>
            <option>我选择一个香梨</option>
            <option>我选择一个西瓜</option>
        </select>
    </div>

 
xxxxxxxxxx
        <div class="coui_selectSubtitle">
            <div class="coui_selectSubtitleTitle">请选择水果</div>
            <select>
                <option>我选择一个苹果</option>
                <option>我选择一个香蕉</option>
                <option>我选择一个香梨</option>
                <option>我选择一个西瓜</option>
            </select>
        </div>

输入框

 
xxxxxxxxxx
    <div class="coui_inputWithReminder">
        <input type="text" onblur="input()">
        <div class="coui_placeholder">提示文字</div>
    </div>
    <div class="coui_inputWithReminder coui_inputValue coui_error">
        <input type="text" onblur="input()" value="错误的输入">
        <div class="coui_placeholder">错误提示</div>
    </div>
    <div class="coui_inputWithReminder coui_inputValue coui_success">
        <input type="text" onblur="input()" value="成功的输入">
        <div class="coui_placeholder">成功提示</div>
    </div>
    <div class="coui_inputWithReminder">
        <img src="./example/vcode.jpg" alt="">
        <input type="text" onblur="input()">
        <div class="coui_placeholder">请输入验证码</div>
    </div>
    <div class="coui_inputWithReminder">
        <textarea onblur="input()"></textarea>
        <div class="coui_placeholder">文本输入框</div>
    </div>

Tab栏

默认为三栏，可自定义百分比设置数量

 
xxxxxxxxxx
    <div class="coui_tab">
        <div class="coui_tabItem selected" style="width: 50%;">栏目一</div>
        <div class="coui_tabItem" style="width: 50%">栏目二</div>
    </div>
    <div class="coui_tab">
        <div class="coui_tabItem selected">栏目一</div>
        <div class="coui_tabItem">栏目二</div>
        <div class="coui_tabItem">栏目三</div>
    </div>
    <div class="coui_tab">
        <div class="coui_tabItem selected" style="width: 25%">栏目一</div>
        <div class="coui_tabItem" style="width: 25%">栏目二</div>
        <div class="coui_tabItem" style="width: 25%">栏目三</div>
        <div class="coui_tabItem" style="width: 25%">栏目四</div>
    </div>

浮窗

 
xxxxxxxxxx
<div class="coui_button" onclick="coui_dialogShow('b')">
    点击显示浮窗
</div>  
​
<div class="coui_dialogAll" id="b">
        <div class="coui_dialog">
            <div class="coui_dialogHeader">这是一个浮窗</div>
            <div class="coui_dialogBottomContent">
                这是浮窗的内容
            </div>
            <div class="coui_button small gray" onclick="coui_dialogHidden('b')">取消</div>
            <div class="coui_button small" onclick="coui_dialogHidden('b')">确认</div>
        </div>
        <div class="coui_dialogMask" onclick="coui_dialogHidden('b')"></div>
    </div>

 
xxxxxxxxxx
    <div class="coui_button" onclick="coui_dialogBottomShow('a')">点击显示底部浮窗</div>
​
    <div class="coui_dialogBottomAll" id="a">
        <div class="coui_dialogBottom">
            <div class="coui_dialogBottomHeader">底部浮窗
                <div class="coui_button small gray coui_dialogBottomButton" onclick="coui_dialogBottomHidden('a')">
                    取消
                 </div>
            </div>
            <div class="coui_dialogBottomContent">
                <div class="coui_listItem">
                    <div class="coui_listItemContent">
                        一个列表项
                    </div>
                </div>
                <div class="coui_listItem">
                    <div class="coui_listItemContent">
                        一个列表项
                    </div>
                </div>
                <div class="coui_listItem">
                    <div class="coui_listItemContent">
                        一个列表项
                    </div>
                </div>
                <div class="coui_listItem">
                    <div class="coui_listItemContent">
                        一个列表项
                    </div>
                </div>
            </div>
        </div>
        <div class="coui_dialogMask" onclick="coui_dialogBottomHidden('a')"></div>
    </div>

提示框

 
xxxxxxxxxx
    <div class="coui_alertLoading">
        <img src="./static/images/loading.gif">
        <div>正在加载中</div>
    </div>

 
xxxxxxxxxx
    <div class="coui_alert success">
        <div>成功的提示文字</div>
    </div>

 
xxxxxxxxxx
    <div class="coui_alert">
        <div>普通的提示文字</div>
    </div>

加载提示

 
xxxxxxxxxx
    <div class="coui_bottomLoading">
        正在加载...
    </div>

优惠券

 
xxxxxxxxxx
    <div class="coui_coupon">
        <div class="coui_couponTopcCircle"></div>
        <div class="coui_couponBottomCircle"></div>
        <div class="coui_couponContent">
            <div class="coui_couponLeft">
                <div class="coui_couponLeftPrice">100</div>
                <div class="coui_couponLeftDes">全品类满减券</div>
            </div>
            <div class="coui_couponRight">
                <div class="coui_couponRightDes">
                    满¥2000可使用
                </div>
                <div class="coui_couponTime">
                    2016.11.11 - 2016.11.13
                </div>
            </div>
        </div>
    </div>
​
    <div class="coui_coupon selected">
        <div class="coui_couponTopcCircle"></div>
        <div class="coui_couponBottomCircle"></div>
        <div class="coui_couponContent">
            <div class="coui_couponLeft">
                <div class="coui_couponLeftPrice">100</div>
                <div class="coui_couponLeftDes">全品类满减券</div>
            </div>
            <div class="coui_couponRight">
                <div class="coui_couponRightDes">
                    满¥2000可使用
                </div>
                <div class="coui_couponTime">
                    2016.11.11 - 2016.11.13
                </div>
            </div>
        </div>
    </div>
​
    <div class="coui_coupon gray">
        <div class="coui_couponTopcCircle"></div>
        <div class="coui_couponBottomCircle"></div>
        <div class="coui_couponContent">
            <div class="coui_couponLeft">
                <div class="coui_couponLeftPrice">100</div>
                <div class="coui_couponLeftDes">全品类满减券</div>
            </div>
            <div class="coui_couponRight">
                <div class="coui_couponRightDes">
                    这是一张已使用或者过期失效的优惠券
                </div>
                <div class="coui_couponTime">
                    2016.11.11 - 2016.11.13
                </div>
            </div>
        </div>
    </div>

左右布局

 
xxxxxxxxxx
         <div class="coui_body">
            <div class="coui_content">
                <div class="coui_half">
                    <div class="coui_item"></div>
                </div>
                <div class="coui_half">
                    <div class="coui_item"></div>
                </div>
            </div>
         </div>