unique-interface

<div class="faas-ui"> <header class="header"> <span class="logo">faas设计规范</span> </header> <aside class="aside"> <ui-menu :active="activeMenu" @select="changeMenu"> <template v-for="menu in menus"> <ui-submenu v-if="menu.children" :index="menu.key" :key="menu.key" angle="uicon uicon-unfold"> <i slot="icon" :class="'uicon uicon-design-' + menu.icon"></i> <span slot="title">{{ menu.title }}</span> <ui-menu-item v-for="submenu in menu.children" :index="submenu.key" :key="submenu.key"> {{ submenu.title }} </ui-menu-item> </ui-submenu> <ui-menu-item v-else :index="menu.key" :key="menu.key" :icon="'uicon uicon-design-' + menu.icon"> {{ menu.title }} </ui-menu-item> </template> </ui-menu> </aside> <div class="main-body">  <div v-if="activeMenu === 'introduct'" class="block-section"> <h1 class="section-title">faas设计规范</h1> <div class="section-item"> faas设计规范是一套由易项fe&ui开发并维护的规范，旨在统一设计风格，提高用户体验，降低fe、ui沟通成本，做新需求的时候ui&fe的大部分工作可以像搭积木一样，极大的提高工作效率。 <br> <br> <br> </div> </div>  <div> <section class="block-section v-section" v-if="activeMenu === 'page'"> <section class="v-section"> <h3 class="section-title">统一尺寸</h3> <div class="section-item"> 为了尽可能减少沟通与理解的成本，有必要在组织内部统一设计板的尺寸。统一的画板尺寸为 <em>1200px</em>。 </div> </section> <section class="v-section"> <h3 class="section-title">页面布局</h3> <div class="section-item"> <em>faas</em>页面布局分为<em>3</em>部分，顶部的<em>header</em>、左侧的<em>aside</em>、右侧的<em>main-body</em>。 </div> <div class="section-item"> <p> <span class="tip-tag">.header</span>：高<em>64px</em>，又分为左右2部分，左侧为 logo，宽<em>200px</em>，右侧为登陆账号信息，宽<em>940px</em>，文字右对齐。 </p> <p> <span class="tip-tag">.aside</span>：宽<em>200px</em>。 </p> <p> <span class="tip-tag">.main-body</span>：宽<em>940px</em>，又分为上下2部分，上面是内容，下面是 footer ，footer 上下内间距<em>60px</em>。 </p> <img src="assets/img/layout1.png"> </div> </section> <section class="v-section"> <h3 class="section-title">容器</h3> <div class="section-item"> <p><span class="tip-tag">.container</span>：通用类，页面主容器，定义了页面宽度为<em>940px</em>，在页面中的最外层和 header 中的右侧部分使用。（见本页面宽度）</p> <p><span class="tip-tag">.main-container</span>：通用类，页面主容器，定义了页面上内边距<em>24px</em>，在页面中的最外层使用。（见本页面顶部间距）</p> <p><span class="tip-tag">.footer</span>：通用类，页面页脚，上下内边距<em>60px</em>，字体颜色<em>fade(#222, .4)</em></p> </div> <img src="assets/img/layout2.png"> </section> <section class="v-section"> <h3 class="section-title">适配</h3> <div class="section-item"> 据统计，使用中台系统的用户的主流分辨率主要为 1920、1440 和 1366，个别系统还存在 1280 的显示设备。 <br>我们采用固定aside，固定main-body，间距拉伸的方式做页面适配。 <img src="assets/img/layout3.png" alt="faas-layout-adapt"/> </div> </section> <section class="v-section"> <h3 class="section-title">常用模度</h3> <div class="section-item"> 为了保持界面布局上的一致性和韵律感，统一设计到开发的布局语言，减少还原损耗，设计了一套模度： <br><em>y=8+8*n (n>=0)</em>。 <br>表示区块间的间距是以8为最小单元、8的倍数为单位递增的。 <br><img src="https://gw.alipayobjects.com/zos/rmsportal/QWsZUeuqYGQJqJxIPHOx.png" width="90%" alt="ali模度"> </div> </section> </section>  <template v-else-if="activeMenu === 'section'"> <section class="block-section v-section"> <section class="v-section"> <h3 class="section-title">区块定义</h3> <div class="section-item"> 我们认为，页面物理逻辑上的一块区域称之为「区块」。包括不限于：列表、表单、表格、筛选器区域等。 </div> <div class="section-item"> <span class="tip-tag">.section</span>：区块的背景色默认为<em>白色，区块阴影：0 0 8px 0 fade(#5485f7, .08)</em>。 <img src="assets/img/section1.png" alt=""> </div> </section> <section class="v-section"> <h3 class="section-title">通用区块容器</h3> <div class="section-item">当区块用于普通场景时（特殊的比如表格），会有内边距。</div> <div class="section-item"> <p><span class="tip-tag">.section-content</span>：定义了区块容器通用内边距<em>32px</em>。</p> <p><span class="tip-tag">.block-section</span>：为了方便使用，是<span class="tip-tag">.section</span>与<span class="tip-tag">.section-content</span>的组合，是最常用的区块样式。</p> <img src="assets/img/section2.png" alt=""> </div> </section> <section class="v-section"> <h3 class="section-title">区块布局</h3> <div class="section-item"> <p><span class="tip-tag">.v-section</span>：通用类，区块容器垂直外边距<em>24px</em>。</p> <p><span class="tip-tag">.h-section</span>：通用类，区块容器水平外边距<em>24px</em>。</p> <img src="assets/img/section3.png"> </div> </section> <section class="v-section"> <h3 class="section-title">区块内布局</h3> <div class="section-item"> <p><span class="tip-tag">.section-item</span>：通用类，表示区块元素，从展示逻辑上属于区块的子元素，区块元素上下内边距<em>32px</em>，两个区块元素间用一条线分割，线样式为基础边框样式：<em>1px solid fade(#222, .1)</em>。</p> <div style="display: flex"> <div><img src="assets/img/section4-1.png" width="500"></div> <div><img src="assets/img/section4-2.png" width="500"></div> </div> </div> </section> </section> </template>  <section class="block-section v-section" v-else-if="activeMenu === 'color'"> <section class="v-section"> <h3 class="section-title">品牌色</h3> <div class="section-item"> 应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。 </div> <div class="color-group"> <div class="color dark" style="background-color: #5485f7;"> <div class="color-name"> <span>color-primary</span> <span>主品牌色</span> </div> <span class="color-hex">#5485f7</span> </div> <div class="color dark" style="background-color: #4c78de;"> <div class="color-name"> <span>color-primary, hover</span> <span>品牌色，悬停</span> </div> <span class="color-hex">#4c78de</span> </div> </div> </section> <section class="v-section"> <h3 class="section-title">中性色</h3> <div class="section-item"> 主要被大量的应用在界面的文字部分，此外背景、边框、分割线等场景中也非常常见。 </div> <div class="section-item"> 基础色：<em>@color-base: #222</em>，也是标题色，很多颜色在此基础上增加透明度生成。 </div> <div class="color dark" style="background-color: #222;"> <div class="color-name"> <span>color-base</span> <span>基础色</span> </div> <span class="color-hex">#222</span> </div> <div class="color-group"> <div class="color dark" style="background-color: #222;"> <div class="color-name"> <span>color-text-primary</span> <span>标题色</span> </div> <span class="color-hex">#222</span> </div> <div class="color dark" style="background-color: rgba(34, 34, 34, .6);"> <div class="color-name"> <span>color-text-regular</span> <span>正文色</span> </div> <span class="color-hex">#222, 60%</span> </div> <div class="color dark" style="background-color: rgba(34, 34, 34, .4);"> <div class="color-name"> <span>color-text-secondary</span> <span>第二正文色</span> </div> <span class="color-hex">#222, 40%</span> </div> <div class="color dark" style="background-color: rgba(34, 34, 34, .2);"> <div class="color-name"> <span>@color-placeholder</span> <span>输入框提示色</span> </div> <span class="color-hex">#222, 20%</span> </div> <div class="color dark" style="background-color: #d3d3d3;"> <div class="color-name"> <span>color-disabled</span> <span>不可点击色(文字)</span> </div> <span class="color-hex">#d3d3d3</span> </div> </div> <div class="color-group"> <div class="color" style="background-color: rgba(34, 34, 34, .1);"> <div class="color-name"> <span>border-base</span> <span>边框色</span> </div> <span class="color-hex">#222, 10%</span> </div> <div class="color" style="background-color: #f4f4f4;"> <div class="color-name"> <span>table-header</span> <span>表格表头色</span> </div> <span class="color-hex">#f4f4f4</span> </div> <div class="color" style="background-color: #fafafa;"> <div class="color-name"> <span>bg</span> <span>背景色</span> </div> <span class="color-hex">#fafafa</span> </div> <div class="color" style="background-color: #fbfbfb;"> <div class="color-name"> <span>color-disabled-bg</span> <span>不可点击色(背景)</span> </div> <span class="color-hex">#fbfbfb</span> </div> <div class="color" style="background-color: rgba(245, 245, 245, 0.96);"> <div class="color-name"> <span>color-info-bg</span> <span>信息背景色</span> </div> <span class="color-hex">#f5f5f5, 96%</span> </div> <div class="color" style="background-color: #eef3fe;"> <div class="color-name"> <span>品牌背景色</span> </div> <span class="color-hex">#eef3fe</span> </div> </div> </section> <section class="v-section"> <h3 class="section-title">功能色</h3> <div class="section-item">主要用于功能性提示的场景，如警告、提示等。</div> <p class="section-item"> 标签色：用于标题后或表格中，以提示信息； <br>警告色：用于表单必填项提示文案、叹号警告 icon； <br>文字命中色：用于搜索后文字命中关键词飘红； <br>上新提醒色：用于上新 label 背景； <br>绿色：用于排序 icon 、步骤圆。 </p> <div class="color-group"> <div class="color dark" style="background-color: #ffa800;"> <div class="color-name"> <span>color-tag-orange</span> <span>标签色</span> </div> <span class="color-hex">#ffa800</span> </div> <div class="color dark" style="background-color: #ff8135; margin-left: 12px"> <div class="color-name"> <span>color-warn</span> <span>警告色</span> </div> <span class="color-hex">#ff8135</span> </div> <div class="color dark" style="background-color: #f76260; margin-left: 12px"> <div class="color-name"> <span>color-text-hit</span> <span>文字命中色</span> </div> <span class="color-hex">#f76260</span> </div> <div class="color dark" style="background-color: #ff4449; margin-left: 12px"> <div class="color-name"> <span>color-new</span> <span>上新提醒色</span> </div> <span class="color-hex">#ff4449</span> </div> <div class="color dark" style="background-color: #2eca9c; margin-left: 12px"> <div class="color-name"> <span>color-green</span> <span>绿色</span> </div> <span class="color-hex">#2eca9c</span> </div> </div> </section> <section class="v-section"> <h3 class="section-title">阴影</h3> <div class="section-item">全局所有<span class="tip-tag">.section</span>（区块）都带有阴影效果。</div> <div class="color dark" style="background-color: rgba(84, 133, 247, 0.08); color: #ddd"> <div class="color-name"> <span>box-shadow</span> <span>阴影色</span> </div> <span class="color-hex">#5485f7，8%</span> </div> </section>  </section>  <section class="block-section v-section" v-else-if="activeMenu === 'text-title'"> <section class="v-section"> <h3 class="section-title">文字</h3> <p style="line-height: 24px;"> 字体系统的构建，是『动态秩序之美』的第一步。 <br> <br><b>建立体系化的设计思路：</b>在同一个系统的 UI 设计中先建立体系化的设计思路，对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，提高字体应用的性价比，减少不必要的样式浪费。 <br><b>少即是多：</b>在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。 <br><b>尝试让字体像音符一样跳跃：</b>在需要拉开差距的时候可以尝试在字阶表中跳跃的选择字体大小，会令字阶之间产生一种微妙的韵律感。 </p> </section> <section class="v-section"> <h3 class="section-title">字体</h3> <p class="section-item"> 字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性。 </p> <p class="section-item"> font-family: "PingFang SC", "Lantinghei SC", "Helvetica Neue", "Helvetica", "Arial", "Microsoft YaHei", "STHeitiSC-Light", "simsun", "WenQuanYi Micro Hei", "sans-serif" <br>按照系统是否存在此字体，从前到后的顺序优先取用。理论上，苹果系统用户的字体为苹方，windows 系统用户的字体为微软雅黑 </p>  </section> <section class="v-section"> <h3 class="section-title">字号</h3> <p class="section-item"> 我们基于电脑显示器阅读距离（50 cm）以及最佳阅读角度（0.3）设定主字号为14px，也就是正文字号为14px。 <br>定义了基本行高为 1 (14px)，默认行高，在写一段文字的时候默认是没有行距的。 </p> <table class="table section-example" style="width: 42%"> <colgroup> <col width="120px"> <col width="100px"> <col> </colgroup> <tr> <th>类型</th> <th>字号</th> <th>场景</th> </tr> <tr> <td>强调文字</td> <td>18px</td> <td>项目标题、报表数字</td> </tr> <tr> <td>标题</td> <td>16px</td> <td>h3、aside、区块标题、一级tab</td> </tr> <tr> <td>正文</td> <td>14px</td> <td>一般文字、表格表头、header等</td> </tr> <tr> <td>辅助文字</td> <td>12px</td> <td>提示文字、标签、mini按钮等</td> </tr> </table> </section> <section class="v-section"> <h3 class="section-title">字重</h3> <p class="section-item"> 字重的选择同样基于秩序、稳定、克制的原则。 </p> <table class="table section-example" style="width: 42%"> <colgroup> <col width="120px"> <col> </colgroup> <tr> <th>字重</th> <th>场景</th> </tr> <tr> <td>medium</td> <td>项目标题、报表数字、区块标题、一级tab(checked)</td> </tr> <tr> <td>regular</td> <td>一般场景</td> </tr> </table> </section> <section class="v-section"> <h3 class="section-title">字阶（段落）</h3> <p class="section-item"> 字阶和行高决定着一套字体系统的动态与秩序之美。字阶是指一系列有规律的不同尺寸的字体。行高可以理解为一个包裹在字体外面的无形的盒子。 <br>建议在一个系统设计中（展示型页面除外），字阶的选择尽量控制在 3-5 种之间，保持克制的原则。 </p> <table class="table section-example" style="width: 400px"> <colgroup> <col> <col width="100px"> <col width="100px"> </colgroup> <tr> <th>类名</th> <th>文字</th> <th>行高</th> </tr> <tr> <td>.paragraph-xs</td> <td>12px</td> <td>20px</td> </tr> <tr> <td>.paragraph-base</td> <td>14px</td> <td>24px</td> </tr> <tr> <td>.paragraph-lg</td> <td>16px</td> <td>28px</td> </tr> </table> </section> <section class="v-section"> <h3 class="section-title">链接</h3> <table class="table section-example" style="width: 60%"> <colgroup> <col width="115px"> <col width="150px"> <col width="115px"> <col> </colgroup> <tr> <th>类型</th> <th>类名</th> <th>表现</th> <th>逻辑</th> </tr> <tr> <td>显式链接</td> <td>.ui-link</td> <td><span class="ui-link">显示链接</span></td> <td>文字内容表意链接效果不明显时</td> </tr> <tr> <td>隐式链接</td> <td>.ui-link-implict</td> <td><span class="ui-link-implict">隐式链接</span></td> <td>文字内容已经表意是个链接，比如“查看更多”、“项目标题”</td> </tr> </table> </section> <section class="v-section"> <h3 class="section-title">表单标题</h3> <p class="section-item"> <span class="tip-tag">.form-title</span>：通用类，表单标题，字体<em>18px</em>加粗，颜色<em>#222</em>居中，下外边距<em>32px</em>。 </p> </section> <section class="v-section"> <h3 class="section-title">区块标题</h3> <p class="section-item">区块标题在使用中我们定义为 h3，在 h3 后我们定义了 h4 用于分割两块小内容。</p> <p class="section-item"> <span class="tip-tag">.h3</span>：通用类，区块标题，字体<em>16px</em>加粗，颜色<em>#222</em>，左边竖线宽<em>4px</em>，颜色主题蓝，下边距<em>32px</em>。 <br><span class="tip-tag">.h3-tip</span>：通用类，正文字体样式，右对齐，区块标题的附属内容。 <br><span class="tip-tag">.h4</span>：通用类，字体<em>14px</em>，颜色<em>#222</em>，下边距<em>24px</em>。 </p> <img src="assets/img/text1.png" alt=""> </section> </section>  <section class="block-section v-section" v-else-if="activeMenu === 'button'"> <section class="v-section"> <h3 class="section-title">定义</h3> <div class="section-item"> 按钮用于开始一个即时操作，如新建项目、保存表单、关闭弹窗等。 </div> </section> <section class="v-section"> <h3 class="section-title">样式</h3> <div class="section-item"> <table class="table section-example" style="width: 40%;"> <colgroup> <col width="100px"> <col width="130px"> <col> </colgroup> <tr> <th>形状</th> <th>示例</th> <th>场景</th> </tr> <tr> <td>胶囊</td> <td><ui-button type="default" round>胶囊</ui-button></td> <td>一般场景</td> </tr> <tr> <td>方形</td> <td><ui-button type="default">方形</ui-button></td> <td>表单中的单选、多选</td> </tr> </table> </div> </section> <section class="v-section"> <h3 class="section-title">尺寸</h3> <div class="section-item"> <p><span class="tip-tag">default</span>：大号，高度<em>40px</em>，文字<em>14px</em>，左右内边距<em>24px</em>，边框<em>1px</em>。</p> <p><span class="tip-tag">sm</span>：中号，高度<em>32px</em>，文字<em>14px</em>，左右内边距<em>24px</em>，边框<em>1px</em>。</p> <p><span class="tip-tag">xs</span>：小号，高度<em>24px</em>，文字<em>12px</em>，左右内边距<em>16px</em>，边框<em>1px</em>。</p> </div> <div class="section-item"> <table class="table section-example" style="width: 48%"> <colgroup> <col width="135px"> <col width="130px"> <col> </colgroup> <tr> <th>尺寸</th> <th>示例</th> <th>场景</th> </tr> <tr> <td>大号 default</td> <td><ui-button type="primary" round>大号</ui-button></td> <td>单选、多选</td> </tr> <tr> <td>中号 sm</td> <td><ui-button type="primary" size="sm" round>中号</ui-button></td> <td>默认场景；表单操作；<br>modal 操作；message 操作等</td> </tr> <tr> <td>小号 xs</td> <td><ui-button type="primary" size="xs" round>小号</ui-button></td> <td>日历操作（上周下周）</td> </tr> </table> </div> </section> <section class="v-section"> <h3 class="section-title">颜色</h3> <div class="section-item"> <p><span class="tip-tag">default</span>：默认样式，字体颜色<em>#222</em>，背景白色，hover背景色<em>#f4f4f4</em>，边框颜色为默认边框色。</p> <p><span class="tip-tag">primary</span>：主题样式，字体颜色白色，背景主题蓝，边框颜色主题蓝，hover背景色和边框颜色均为<em>#4c78de</em>。</p> <p><span class="tip-tag">disabled</span>：不可点击样式，字体颜色不可点击文字色，背景颜色不可点击背景色，边框为默认边框样式。</p> </div> <div class="section-item"> <table class="table section-example" style="width: 48%;"> <colgroup> <col width="170px"> <col width="160px"> <col> </colgroup> <tr> <th>类型</th> <th>示例</th> <th>场景</th> </tr> <tr> <td>普通 default</td> <td><ui-button type="default" size="sm" round>普通</ui-button></td> <td>相对较不重要时</td> </tr> <tr> <td>主题 primary</td> <td><ui-button type="primary" size="sm" round>主题</ui-button></td> <td>比较重要时</td> </tr> <tr> <td>不可点击 disable</td> <td><ui-button type="primary" size="sm" round disabled>不可点击</ui-button></td> <td>不可点击时</td> </tr> </table> </div> </section> <section class="v-section"> <h3 class="section-title">如何使用</h3> <p class="section-item"> 样式、颜色、尺寸可以自由选取，组合使用。 <span class="v-text"><a href="http://fe-doc.dev.ethercap.com/?repo=ui_less&tab=component&doc=basic#-button-" target="_blank" class="ui-link">如何使用？</a></span> </p> </section>  </section>  <section class="block-section v-section" v-else-if="activeMenu === 'icon'"> <section class="v-section"> <h3 class="section-title">风格</h3> <div class="section-item"> 图标，语义化的矢量图形。 <br>图标有三种风格：线框风格、实底风格和双色风格。在 faas 中，我们选用<em>线框风格</em>。 <img src="assets/img/icon.png" alt=""> </div> </section> <section class="v-section"> <h3 class="section-title">间距</h3> <div class="section-item"> <table class="table section-example" style="width: 40%;"> <colgroup> <col width="100px"> <col> </colgroup> <tr> <th>间距</th> <th>备注</th> </tr> <tr> <td>0</td> <td>-</td> </tr> <tr> <td>4px</td> <td>-</td> </tr> <tr> <td>特殊</td> <td>比如用于 aside 上，间距为 8px</td> </tr> </table> </div> </section> <section class="v-section"> <h3 class="section-title">如何使用</h3> <div class="section-item"> <p>采用阿里 Iconfont 方案(<a href="http://iconfont.cn/manage/index?spm=a313x.7781069.1998910419.11&manage_type=myprojects&projectId=548064&keyword=" class="ui-link" target="_blank">Iconfont</a>)。</p> <p><span class="tip-tag">.left</span>：通用类，表征 icon 在文字左侧。</p> <p><span class="tip-tag">.right</span>：通用类，表征 icon 在文字右侧。</p> <p><span class="tip-tag">.space</span>：通用类，表征 icon 与文字间距有间距为<em>4px</em>。</p> </div> </section> </section> </div>  <div>  <section class="block-section v-section" v-if="activeMenu === 'menu'"> <section class="v-section"> <h3 class="section-title">定义</h3> <p class="section-item"> 为页面和功能提供导航的菜单列表，提供多级结构来收纳和排列网站架构。 </p> </section> <section class="v-section"> <h3 class="section-title">规范</h3> <div class="section-item"> 目前菜单只有一级。 <br>菜单项高度 60px。宽度为父元素的 100% ：由边框 + 内边距 + 内容三部分组成，边框 6px，内边距20px ，内容自适应。 <br>内容由 icon 与文字两部分组成，其中 icon 与文字相距 8px，字号 16px。 <br>菜单项未选中状态时文字颜色<em>#222</em>，边框颜色透明；选中状态和hover时文字、边框颜色变为品牌色，背景颜色为品牌背景色。 </div> <img src="assets/img/menu0.png" alt=""> </section> <section class="v-section"> <h3 class="section-title">交互</h3> <div class="section-item">点击菜单项目时会跳转到相应的页面，同时该菜单项被激活，样式变成激活状态。</div> <ui-menu :active="exampleMenu" @select="exampleMenu = $event" class="tip-outline v-section"> <ui-menu-item index="home"> <span class="uicon uicon-menu-index" slot="icon"></span>主页 </ui-menu-item> <ui-menu-item index="faas" icon="uicon uicon-menu-report">faas</ui-menu-item> <ui-menu-item index="source" icon="uicon uicon-menu-sp">source</ui-menu-item> </ui-menu> </section> <section class="v-section"> <h3 class="section-title">如何使用</h3> <div class="section-item"><a href="http://fe-doc.dev.ethercap.com/?repo=ui_less&tab=component&doc=navigation#-menu%20submenu%20menuItem-" class="ui-link">如何使用？</a></div> </section> </section>  <section class="block-section" v-if="activeMenu === 'dropdown'"> <div class="v-section"> <h3 class="section-title">定义</h3> <div class="section-item"> 将菜单折叠起来，鼠标 hover 的时候再展开的菜单。 </div> </div> <div class="v-section"> <h3 class="section-title">规范</h3> <div class="section-item"> 展开的菜单圆角<em>8px</em>，菜单项高<em>40px</em>，文字不换行，宽度自适应，菜单项 hover 时增加背景颜色<em>#f4f4f4</em>。 </div> </div> <div class="v-section"> <h3 class="section-title">交互</h3> <div class="section-item"> 当鼠标 hover 到目标元素时，触发下拉菜单，菜单在目标元素下方，带尖角，菜单水平中心线与目标元素水平中心线重合，当鼠标离开目标元素 + 菜单本身时，菜单消失，鼠标 hover 到菜单项时有背景颜色变化提示。 </div> </div> <div class="v-section"> <h3 class="section-title">使用</h3> <div class="section-item"> <p><span class="tip-tag"><ui-dropdown></span>：通用组件，下拉菜单的内容是页面以<em>name</em>为<em>dropdown</em>的插槽（slot）插入进去的。</p> <p><span class="tip-tag">.ui-dropdown-item</span>：通用类，下拉菜单项，为 dropdown 插槽的子元素。</p> </div> <div class="section-item"> <ui-dropdown hover justify="center"> <ui-tag type="primary">下拉菜单</ui-tag> <div slot="dropdown"> <div class="ui-dropdown-item">第一条内容</div> <div class="ui-dropdown-item">第二条内容</div> </div> </ui-dropdown> </div> </div> </section>  <section class="block-section" v-if="activeMenu === 'tab'"> <div class="v-section"> <h3 class="section-title">定义</h3> <div class="section-item"> 分隔内容上有关联但属于不同类别的数据集合。 </div> </div> <div class="v-section"> <h3 class="section-title">规范</h3> <div class="section-item"> <p>标签页由标签组包裹多个标签组成，支持最多两级嵌套；</p> <p>一级标签：标签组上内边距<em>8px</em>，左右内边距<em>32px</em>，背景颜色表格表头色，标签页上内边距<em>16px</em>，左右内边距<em>48px</em>，字体大小<em>16px</em>，未激活状态字体颜色正文色，字重 normal ，无背景色，hover状态时，鼠标指针为手，文字颜色标题色，字重 bold ，激活状态时，文字颜色标题色，字重 bold ，背景颜色为白色；</p> <p>二级标签：标签组无内边距，背景颜色白色，下边框为边框基础样式，标签页上内边距<em>16px</em>，左内边距<em>32px</em>，右内边距<em>16px</em>，字体大小<em>14px</em>，下边框宽<em>4px</em>宽的实线，未激活状态字体颜色正文色，下边框颜色透明，hover 状态鼠标指针为手，文字颜色标题色，激活状态文字颜色标题色，下边框颜色为基础色。</p> </div> </div> <div class="v-section"> <h3 class="section-title">交互</h3> <div class="section-item"> 标签页分为未激活、激活两种状态，用样式上的差异来提示用户标签页是否被激活，鼠标点击标签页则激活该标签页，其余标签页变成未激活状态，鼠标 hover 标签页的时候，也会有样式上的变化以提示用户此处可点击。 </div> </div> <div class="v-section"> <h3 class="section-title">使用</h3> <div class="section-item"> <p><span class="tip-tag"><ui-tabs></span>：通用组件，单独使用表示二级标签组。</p> <p><span class="tip-tag">.ui-tabs-level-1</span>：通用类，用于<span class="tip-tag"><ui-tabs></span>，表示一级标签组。</p> <p><span class="tip-tag"><ui-tab></span>：通用组件，表示单独一个标签页。</p> <p><a href="http://fe-doc.dev.ethercap.com/?repo=ui_less&tab=component&doc=navigation#-tabs%20tab-" class="ui-link">如何使用？</a></p> </div> <ui-tabs v-model="tab" class="section-item tip-outline ui-tabs-level-1"> <ui-tab value="tab1">tab1</ui-tab> <ui-tab value="tab2">tab2</ui-tab> <ui-tab value="tab3">tab3</ui-tab> </ui-tabs> <div v-if="tab === 'tab1'"> <ui-tabs class="tip-outline" value="tab1-1"> <ui-tab value="tab1-1">二级tab1</ui-tab> <ui-tab value="tab1-2">二级tab2</ui-tab> <ui-tab value="tab1-3">二级tab3</ui-tab> </ui-tabs> </div> <div v-else>empty</div> </div> </section>  <section class="block-section v-section" v-if="activeMenu === 'step'"> <div class="v-section"> <h3 class="section-title">定义</h3> <div class="section-item"> 引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步，如分步填写表单等。 </div> </div> <div class="v-section"> <h3 class="section-title">规范</h3> <div class="section-item"> <p>每个步骤用一个实心圆表示，圆直径<em>32px</em>，步骤间用线连接，线宽<em>4px</em>，线与实心圆距离<em>12px</em>，提示文字距离实心圆<em>16px</em>；</p> <p>步骤分为未完成、进行中、已完成3种状态。未完成：圆和连接线背景色为<em>#222, 10%</em>，文字颜色<em>#222, 40%</em>；进行中、已完成：圆和连接线背景色为<em>#2eca9c</em>，文字颜色<em>#222</em>。</p> </div> </div> <div class="v-section"> <h3 class="section-title">交互</h3> <div class="section-item"> 步骤分为未完成、进行中、已完成3种状态，一般会通过点击按钮触发步骤进度更新，进行中或已完成的步骤会自动更改样式以提示用户。 </div> </div> <div class="v-section"> <h3 class="section-title">使用</h3> <div class="section-item"> <p><span class="tip-tag">ui-steps</span>：通用组件，表示步骤组。</p> <p><span class="tip-tag">ui-step</span>：通用组件，表示单个步骤。</p> <p><a href="http://fe-doc.dev.ethercap.com/?repo=ui_less&tab=component&doc=info#-steps%20step-" class="ui-link" target="_blank">如何使用？</a></p> </div> <div class="section-item"> <ui-steps :active="1" class="tip-outline v-section"> <ui-step>第一步</ui-step> <ui-step>第二步</ui-step> <ui-step>第三步</ui-step> <ui-step>第四步</ui-step> </ui-steps> </div> </div> </section>  <section class="block-section" v-if="activeMenu === 'pagination'"> <div class="v-section"> <h3 class="section-title">定义</h3> <div class="section-item"> 当展示的数据量过多时，需要使用分页展示，翻页器用于支持分页展示，通常用于表格等。 </div> </div> <div class="v-section"> <h3 class="section-title">规范</h3> <div class="section-item"> 上外边距<em>2px</em>，下外边距<em>24px</em>，内边距<em>32px</em>，文字样式为正文样式，可点击部分文字、边框颜色为主题色。 </div> </div> <div class="v-section"> <h3 class="section-title">交互</h3> <div class="section-item"> <p>点击上一页，跳转至上一页，如果不存在上一页，则不展示「上一页」按钮；</p> <p>点击下一页，跳转至下一页，如果不存在下一页，则不展示「下一页」按钮；</p> <p>手动输入页数，点击「跳转」，跳转对应页数，如果对应页数不存在，则不做跳转。</p> </div> </div> <div class="v-section"> <h3 class="section-title">使用</h3> <div class="section-item"> <p><span class="tip-tag">ui-pagination</span>：通用组件，需要传入相应的属性。<a href="http://fe-doc.dev.ethercap.com/?repo=ui_less&tab=component&doc=navigation#-pagination-" class="ui-link" target="_blank">如何使用?</a></p> </div> <div class="section-item"> <ui-pagination :total="100" :limit="10" :page="page" @change="page = $event" class="tip-outline" style="margin: 2px 0 24px"> </ui-pagination> </div> </div> </section>  <section class="block-section v-section" v-if="activeMenu === 'breadcrumb'"> <section class="v-section"> <h3 class="section-title">定义</h3> <div class="section-item"> 显示当前页面在系统层级结构中的位置，并能向上返回。 </div> <div class="section-item"> 何时使用？ <ul> <li>当系统拥有超过两级以上的层级结构时；</li> <li>当需要告知用户『你在哪里』时；</li> <li>当需要向上导航的功能时。</li> </ul> </div> </section> <section class="v-section"> <h3 class="section-title">规范</h3> <div class="section-item">高度<em>40px</em>，下边距<em>24px</em>。最后一级文字为正文样式，前面的为隐式链接样式，每级之间用右尖括号来间隔。</div> </section> <section class="v-section"> <h3 class="section-title">交互<span></h3> <div class="section-item"> 面包屑路径中的最后一级为当前页面，前面的点击进入对应的父级页面。 </div> <div class="section-item tip-outline" style="border-bottom: 1px solid transparent"> <ui-breadcrumb> <ui-breadcrumb-item awake>首页</ui-breadcrumb-item> <ui-breadcrumb-item awake>项目列表</ui-breadcrumb-item> <ui-breadcrumb-item>项目详情</ui-breadcrumb-item> </ui-breadcrumb> </div> </section> <section class="v-section"> <h3 class="section-title">如何使用</h3> <div class="section-item"><a href="http://fe-doc.dev.ethercap.com/?repo=ui_less&tab=component&doc=navigation#-breadcrumb%20breadcrumbItem-" class="ui-link-implict">如何使用？</a></div> </section> </section> </div>  <div>  <section class="block-section v-section" v-if="activeMenu === 'input'"> <section class="v-section"> <h3 class="section-title">定义</h3> <div class="section-item"> 通过鼠标或者键盘输入字符的文本框，分为普通输入框和文本域两种。 </div> </section> <section class="v-section"> <h3 class="section-title">规范</h3> <div class="section-item"> <p>普通输入框分为大、中、小三种，高度固定<em>40px</em>，宽度分别为<em>680px</em>、<em>480px</em>、<em>180px</em>，输入框上下内边距<em>8px</em>，左右内边距<em>16px</em>；</p> <p>普通输入框可分别带前缀、后缀，在输入框的最前和最后，前缀、后缀左右内边距<em>16px</em>，颜色为正文色；</p> <p>普通输入框可带有下拉菜单，宽度和输入框相同，最大高度<em>200px</em>，菜单项高<em>40px</em>，左右内边距<em>24px</em>，hover 背景颜色<em>#f4f4f4</em></p>； <p>文本域输入框默认高度为 2 行，高<em>64px</em>，可带后缀，后缀在右下角，左右内边距<em>16px</em>，颜色为输入框提示色。</p> </div> </section> <section class="v-section"> <h3 class="section-title">交互</h3> <div class="section-item"> <p>输入框支持添加提示文字，在输入框内容为空时展示提示文字，当用户输入任意字符时提示文字消失；</p> <p>鼠标单击输入框，光标聚焦到该输入框中，此时可以用键盘输入字符，鼠标点击输入框外，该输入框失去焦点；</p> <p>带有下拉菜单的输入框，用户点击菜单项，会将菜单项内容赋值给该输入框。</p> </div> </section> <section class="v-section"> <h3 class="section-title">使用</h3> <div class="section-item"> <p><span class="tip-tag">ui-input</span>：通用组件，表示单个输入框；</p> <p><span class="tip-tag">.ui-input-xs</span>：通用类，用于<span class="tip-tag"><ui-input></span>，小号输入框，宽度<em>180px</em>；</p> <p><span class="tip-tag">.ui-input-sm</span>：通用类，用于<span