Authored by ccbikai

完善基础设施

<h1>Index</h1>
<h1>公有样式示例</h1>
<h2>color</h2>
统一色号(css 中使用统一变量)
主色调:
底色:
红色:
<h2>icon</h2>
iconfont 新建项目,使用 class 控制图标样式,不要用 unicode
<h2>button</h2>
三种尺寸,圆角直角,实心空心,选中未选中
<h2>badge</h2>
一个数字的时候是圆形,数字长的时候圆角长方形,类似跑道
<h2>checkbox</h2>
单选,多选,开关,选中不选中。
纯 CSS 实现,不能依赖 JS,原理参考 http://forsigner.com/magic-check/
<h2>tip</h2>
可以控制显示,隐藏
支持设置,自动消失
<h2>modal</h2>
支持 一个按钮,两个按钮,多个按钮
每个按钮支持自定义事件
<h2>Vue 示例</h2>
<div id="app">
<app></app>
</div>
... ...
... ... @@ -6,6 +6,8 @@
module.exports = app => {
// 组件
// 组件示例
if (app.locals.devEnv) {
app.use('/example', require('./apps/example'));
}
};
... ...
... ... @@ -9,7 +9,8 @@
module.exports = () => {
return (req, res, next) => {
let yoho = {
pageChannel: {}
pageChannel: {},
yohoTitle: 'Yoho!BLK'
};
const channel = req.query.channel || req.cookies._Channel || 'boys';
... ...
... ... @@ -2,14 +2,13 @@
<html>
<head>
<meta charset="utf-8">
<title>{{title}}</title>
<title>{{title}} {{#unless noYohoTitle}}{{yohoTitle}}{{/unless}}</title>
<meta name="keywords" content="{{keywords}}">
<meta name="description" content="{{description}}">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv="cleartype" content="on">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<link rel="dns-prefetch" href="//cdn.yoho.cn">
<link rel="dns-prefetch" href="//static.yohobuy.com">
<script type="text/javascript">
... ... @@ -23,13 +22,7 @@
</head>
<body {{#if isPassportPage}}class=passport-body{{/if}} {{#if isStarIndexPage}} class="star-index-bg"{{/if}} {{#if isStarDetailPage}}class="star-class-body"{{/if}}>
<div class="main-wrap">
{{#if systemUpdate}}
{{> updata}}
{{/if}}
{{> header}}
{{{body}}}
{{> footer}}
</div>
{{#wechatShare}}
... ...
@import "reset";
@import "font";
@import "common";
@import "color";
@import "icon";
@import "tip";
@import "modal";
@import "swiper";
... ...