ymt-lib-backcss

v0.0.5

Published

4 years ago

ymatou后端css库

0High
0Medium
0Low

langxianmei

ymt-back-csslib

说明文档

UI库设计的两大原则:一、设计与布局分离；二、内容与结构无关；谨记并理解

目录文档结构说明

global.scss 目前在sadmin.s1.ymatou.com 未来做全局样式库

variables 库变量
reset rest全局样式
mixin 常用混合，未来要改成做混合聚合
container 容器定义，内容偏少，以后要扩容
title 标题定义混合函数
form 要废弃掉，在优惠券项目中使用，已经迁移只优惠券内做局部scss，目前全局中没有使用，希望以后改成form元素集合
listgroup list集合，涵盖图片list，图文，图表单域list
table table list，未来要增加table相关系列的函数混合
page 分页混合
radio radio，checkbox定义，未来聚合到form混合，包含在mixin内
icon 图片icon，没有发现有用到
tab tab沿用以前写的名称结构，包括之前智豪写的资金合规中的，估计和seller中的也是一致的
section 定义段落的文本布局
iconfont 定义字体icon，http://iconfont.cn/showProject?pid=65453，没有权限的找我要
dialog 弹窗，默认350，设想是最小350宽度，middle：550，large：750
grid 现在缺少的模块，栅格化布局

UI库的目标：希望能建立一套seller和admin这种后台都通用的UI标准

btn:普通灰色底小按钮

<button class="btn btn-pop" type="button">判定</button>

btn:普通白底灰字

<a href="#" class="btn btn-link-normal"><span class="txt">取消</span></a>

btn:大按钮蓝色

<a href="#" class="btn btn-large btn-minor">关闭</a>

btn:小按钮蓝色

<a href="#" class="btn btn-small btn-minor">关闭</a>

btn:小按钮红色

<a href="#" class="btn btn-small btn-major">确定</a>

btn:小按钮红色

<a href="#" class="btn btn-small btn-major">确定</a>

btn:大按钮红色

<a href="#" class="btn btn-large btn-major">确定</a>

select:普通select 宽度190px

<select class="select select-normal" name="">
    <option selected="selected" value="-1">普通</option>
    <option value="2">2</option>
    <option value="1">1</option>
</select>

select:普通小select 宽度80px

<select class="select select-small" name="">
    <option selected="selected" value="-1">普通</option>
    <option value="2">2</option>
    <option value="1">1</option>
</select>

input:input做成的select

<input class="input input-normal input-select" value="2015-06-08" type="text" placeholder="选择日期" name="" />

input:最小input 42px

<input class="input input-smaller" value="" type="text" placeholder="请输入" name="" />

input:小input 80px

<input class="input input-small" value="" type="text" placeholder="请输入" name="" />

input:普通input 190px

<input class="input input-normal" value="" type="text" placeholder="请输入" name="" />

input:大input 300px

<input class="input input-large" value="" type="text" placeholder="请输入" name="" />

textarea:大 300px

<textarea name="" class="input textarea-large"></textarea>

tab

<div class="c-tabs section-normal">
    <ul class="tab-header">
        <li class="active">
            <a href="javascript:void(0);">
                等我受理的工单 <!-- <em>99+</em> -->
            </a>
        </li>
        <li>
            <a href="javascript:void(0);">
                我受理的工单 <!-- <em>28</em> -->
            </a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-content-item">
        </div>
    </div>
</div>

table list

<table class="table">
    <thead class="thead">
        <tr>
            <th>批次号</th>
            <th>发放方式</th>
            <th>名称</th>
            <th>有效期</th>
        </tr>
    </thead>
    <tbody class="tbody">
        <tr>
            <td>1620305029</td>
            <td>
                <p>2016-04-29 17:30:46 <br>～<br> 2016-05-10 23:59:59</p>
            </td>
            <td>
                <p>2016-04-30 17:20:37</p>
            </td>
            <td>
                <a href="/Coupon/Detail?batchId=1375029" class="btn btn-text">查看</a>
            </td>
        </tr>
        <tr>
            <td>1620305029</td>
            <td>
                <p>2016-04-29 17:30:46 <br>～<br> 2016-05-10 23:59:59</p>
            </td>
            <td>
                <p>2016-04-30 17:20:37</p>
            </td>
            <td>
                <a href="/Coupon/Detail?batchId=1375029" class="btn btn-text">查看</a>
            </td>
        </tr>
    </tbody>
</table>

分页page count

<div class="pagination">
    <ul class="page">
        <li><a class="disabled">&lt;&lt;</a></li>
        <li><a class="disabled">&lt;</a></li>
        <li><a class="active">1</a></li>
        <li><a href="http://www.ymatou.com/page?p=2">2</a></li>
        <li><a href="http://www.ymatou.com/page?p=3">3</a></li>
        <li><a href="http://www.ymatou.com/page?p=4">4</a></li>
        <li><a href="http://www.ymatou.com/page?p=5">5</a></li>
        <li><a href="http://www.ymatou.com/page?p=6">6</a></li>
        <li><a href="http://www.ymatou.com/page?p=7">7</a></li>
        <li><a href="http://www.ymatou.com/page?p=8">8</a></li>
        <li><a href="http://www.ymatou.com/page?p=9">9</a></li>
        <li class="text">...</li>
        <li><a href="http://www.ymatou.com/page?p=50">50</a></li>
        <li><a href="http://www.ymatou.com/page?p=2">&gt;</a></li>
        <li><a href="http://www.ymatou.com/page?p=50">&gt;&gt;</a></li>
    </ul>
    <div class="foward">
        <span>到第</span>
        <input name="p" class="input input-smaller" type="text">
        <span>/50页</span>
        <button class="btn btn-pop" type="submit">前往</button>
    </div>
</div>

list:img

<div class="list-square">
    <div class="list-square-item">
        <div class="imgbox">
            <img src="about:blank" class="img">
        </div>
    </div>
    <div class="list-square-item">
        <div class="imgbox">
            <img src="about:blank" class="img">
        </div>
    </div>
    <div class="list-square-item">
        <div class="imgbox">
            <img src="about:blank" class="img">
        </div>
    </div>
</div>

list:upload

<div class="list-square">
    <div class="list-square-item">			
        <div class="imgbox"></div>			
        <span class="iconfont icon-jixutianjiatupian01"></span>
        <input type="file" name="file" class="hidden-file">			
        <div class="corner iconfont icon-laji"></div>	   
    </div>
    <div class="list-square-item">			
        <div class="imgbox"></div>			
        <span class="iconfont icon-jixutianjiatupian01"></span>
        <input type="file" name="file" class="hidden-file">			
        <div class="corner iconfont icon-laji"></div>	   
    </div>
</div>

dialog:普通350px 带表单

<div class="dialog-normal" style="display:block;top:0">
    <div class="dialog-hd">
        <span class="iconfont icon-chachada dialog-closer"></span>
        <b>分配专员</b>
    </div>
    <div class="dialog-bd">
        <div class="list-group list-align">
            <div class="list-item">
                <label for="" class="list-label">分配给：</label>
                <div class="list-element">
                    <select class="select select-normal" name="">
                        <option selected="selected" value="-1">全部组</option>
                        <option value="2">2</option>
                        <option value="1">1</option>
                    </select>
                </div>
            </div>
            <div class="list-item">
                <label for="" class="list-label">&nbsp;</label>
                <div class="list-element">
                    <select class="select select-normal" name="">
                        <option selected="selected" value="-1">全部组</option>
                        <option value="2">2</option>
                        <option value="1">1</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="dialog-bt">
        <a href="#" class="btn btn-small btn-major">关闭</a><a class="dialog-cancel dialog-closer" href="javascript:void 0">取消</a>
    </div>
</div>

dialog:普通350px 警告

<div class="dialog-normal" style="display:block;top:250px">
    <div class="dialog-hd">
        <span class="iconfont icon-chachada dialog-closer"></span>
        <b>提示</b>
    </div>
    <div class="dialog-bd">
        <div class="list-group list-align">
            <div class="list-item">
                <label for="" class="list-label">
                    <span class="iconfont icon-jinggao"></span>
                </label>
                <div class="list-element">
                    您的咨询人ID与订单买家/买手ID不匹配，请确认是否继续创建？
                </div>
            </div>
        </div>
    </div>
    <div class="dialog-bt">
        <a href="#" class="btn btn-small btn-major">关闭</a><a class="dialog-cancel dialog-closer" href="javascript:void 0">取消</a>
    </div>
</div>

dialog:普通350px 成功

<div class="dialog-normal" style="display:block;top:250px">
    <div class="dialog-hd">
        <span class="iconfont icon-chachada dialog-closer"></span>
        <b>提示</b>
    </div>
    <div class="dialog-bd">
        <div class="list-group list-align">
            <div class="list-item">
                <label for="" class="list-label">
                    <span class="iconfont icon-danyuanduihao"></span>
                </label>
                <div class="list-element">
                    您的咨询人ID与订单买家/买手ID不匹配，请确认是否继续创建？
                </div>
            </div>
        </div>
    </div>
    <div class="dialog-bt">
        <a href="#" class="btn btn-small btn-major">关闭</a><a class="dialog-cancel dialog-closer" href="javascript:void 0">取消</a>
    </div>
</div>

dialog:普通350px 失败

<div class="dialog-normal" style="display:block;top:250px">
    <div class="dialog-hd">
        <span class="iconfont icon-chachada dialog-closer"></span>
        <b>提示</b>
    </div>
    <div class="dialog-bd">
        <div class="list-group list-align">
            <div class="list-item">
                <label for="" class="list-label">
                    <span class="iconfont icon-toupiaoshibai"></span>
                </label>
                <div class="list-element">
                    您的咨询人ID与订单买家/买手ID不匹配，请确认是否继续创建？
                </div>
            </div>
        </div>
    </div>
    <div class="dialog-bt">
        <a href="#" class="btn btn-small btn-major">关闭</a><a class="dialog-cancel dialog-closer" href="javascript:void 0">取消</a>
    </div>
</div>

listgroup:列表项竖排

<div class="list-group list-align">
    <div class="list-item">
        <label for="" class="list-label">工单编号：</label>
        <div class="list-element">
            <input class="input input-normal" type="text" name="" value="" />
        </div>
        
    </div>
    <div class="list-item">
        <label for="" class="list-label">订单号：</label>
        <div class="list-element">
            <input class="input input-normal" type="text" name="" value="" />
        </div>
    </div>
</div>

listgroup:列表项横排

<div class="list-group list-align list-inline-block">
    <div class="list-item">
        <label for="" class="list-label">工单编号：</label>
        <div class="list-element">
            <input class="input input-normal" type="text" name="" value="" />
        </div>
        
    </div>
    <div class="list-item">
        <label for="" class="list-label">订单号：</label>
        <div class="list-element">
            <input class="input input-normal" type="text" name="" value="" />
        </div>
    </div>
</div>

listgroup:列表项标题横排

<div class="list-group list-vlign">
    <div class="list-item">
        <label for="" class="list-label">工单编号：</label>
        <div class="list-element">
            <input class="input input-normal" type="text" name="" value="" />
        </div>
        
    </div>
    <div class="list-item">
        <label for="" class="list-label">订单号：</label>
        <div class="list-element">
            <input class="input input-normal" type="text" name="" value="" />
        </div>
    </div>
</div>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

说明文档

目录文档结构说明

UI库的目标：希望能建立一套seller和admin这种后台都通用的UI标准

btn:普通灰色底小按钮

btn:普通白底灰字

btn:大按钮 蓝色

btn:小按钮 蓝色

btn:小按钮 红色

btn:小按钮 红色

btn:大按钮 红色

select:普通select 宽度190px

select:普通小select 宽度80px

input:input做成的select

input:最小input 42px

input:小input 80px

input:普通input 190px

input:大input 300px

textarea:大 300px

tab

table list

分页page count

list:img

list:upload

dialog:普通350px 带表单

dialog:普通350px 警告

dialog:普通350px 成功

dialog:普通350px 失败

listgroup:列表项竖排

listgroup:列表项横排

listgroup:列表项标题横排

btn:大按钮蓝色

btn:小按钮蓝色

btn:小按钮红色

btn:小按钮红色

btn:大按钮红色