Authored by 毕凯

Merge branch 'feature/refactoring' into 'release/5.5.1'

重构APP使用的一些接口



See merge request !426
@@ -88,3 +88,31 @@ exports.receive = (req, res, next) => { @@ -88,3 +88,31 @@ exports.receive = (req, res, next) => {
88 res.jsonp(result); 88 res.jsonp(result);
89 }).catch(next); 89 }).catch(next);
90 }; 90 };
  91 +
  92 +/**
  93 + * 获取优惠券
  94 + */
  95 +exports.couponSend = (req, res, next) => {
  96 + let token = req.query.token || '',
  97 + uid = req.user.uid,
  98 + app = req.query.app;
  99 +
  100 + let resultData = {
  101 + code: 403,
  102 + message: '参数错误',
  103 + data: ''
  104 + };
  105 +
  106 + // APP时用参数中的ID
  107 + if (!uid) {
  108 + uid = app && app.uid ? app.uid : 0;
  109 + }
  110 +
  111 + if (uid === '' || uid === 0 || token === '' || token === 0) {
  112 + return res.jsonp(resultData);
  113 + }
  114 +
  115 + model.couponSend(uid, token, app).then(result => {
  116 + res.jsonp(result);
  117 + }).catch(next);
  118 +};
@@ -358,3 +358,20 @@ exports.receiveCoupon = (receiveData, uid) => { @@ -358,3 +358,20 @@ exports.receiveCoupon = (receiveData, uid) => {
358 return returnData; 358 return returnData;
359 }); 359 });
360 }; 360 };
  361 +
  362 +exports.couponSend = (uid, token) => {
  363 +
  364 + return api.get('', {
  365 + method: 'app.coupons.couponSend',
  366 + uid: uid,
  367 + coupon_send_token: token
  368 + }).then(result => {
  369 +
  370 + if (!result) {
  371 + result.code = 404;
  372 + result.message = '出错啦~';
  373 + }
  374 +
  375 + return result;
  376 + });
  377 +};
@@ -235,4 +235,6 @@ router.get('/annual-account', annualAccount.index); @@ -235,4 +235,6 @@ router.get('/annual-account', annualAccount.index);
235 router.get('/annual-account/share', annualAccount.share); 235 router.get('/annual-account/share', annualAccount.share);
236 router.get('/app-downloads', appDownloads.index); 236 router.get('/app-downloads', appDownloads.index);
237 237
  238 +router.get('/couponSend', couponFloor.couponSend); // 获取优惠券
  239 +
238 module.exports = router; 240 module.exports = router;
  1 +'use strict';
  2 +const md5 = require('md5');
  3 +const PRIVATE_KEY = 'fd4ad5fcsa0de589af23234ks1923ks';
  4 +
  5 +const v1 = (req, res) => {
  6 + let result = {
  7 + code: 400,
  8 + message: 'Config Success',
  9 + data: {}
  10 + };
  11 +
  12 + let version = req.body.app_version || '';
  13 +
  14 + switch (version) {
  15 + case '4.0.1':
  16 + result.data.url = 'http://cdn.yoho.cn/app-reactnative/4.0.1/main.zip';
  17 + result.data.rnv = '101';
  18 + result.data.minv = '4.0.1';
  19 + result.data.filecode = md5('dffb998e43a33215b4c47a4ccd3cf619yohorn2016');
  20 + result.md5 = md5(PRIVATE_KEY + ':' + JSON.stringify(result.data));
  21 + break;
  22 + case '4.1.0':
  23 + result.data.url = 'http://cdn.yoho.cn/app-downfiles/index.android.bundle.zip';
  24 + result.data.rnv = '101';
  25 + result.data.minv = '4.1.0';
  26 + result.data.filecode = md5('47c47db1eec6159f940e2018d3a83676yohorn2016');
  27 + result.md5 = md5(PRIVATE_KEY + ':' + JSON.stringify(result.data));
  28 + break;
  29 + default:
  30 + result.data.url = '';
  31 + result.data.rnv = '';
  32 + result.data.minv = '';
  33 + result.data.filecode = '';
  34 + result.md5 = md5(PRIVATE_KEY + ':' + JSON.stringify(result.data));
  35 + }
  36 +
  37 + return res.json(result);
  38 +};
  39 +
  40 +module.exports = {
  41 + v1
  42 +};
@@ -15,10 +15,12 @@ var multipartMiddleware = multipart(); @@ -15,10 +15,12 @@ var multipartMiddleware = multipart();
15 const uploadApi = require(cRoot + '/upload.js'); 15 const uploadApi = require(cRoot + '/upload.js');
16 const hotfix = require(`${cRoot}/hotfix`); 16 const hotfix = require(`${cRoot}/hotfix`);
17 const apple = require(`${cRoot}/apple`); 17 const apple = require(`${cRoot}/apple`);
  18 +const rn = require(`${cRoot}/rn`);
18 19
19 // routers 20 // routers
20 router.post('/api/upload/image', multipartMiddleware, uploadApi.uploadImg); 21 router.post('/api/upload/image', multipartMiddleware, uploadApi.uploadImg);
21 router.post('/hf/v1', hotfix.v1); 22 router.post('/hf/v1', hotfix.v1);
  23 +router.post('/rn/v1', rn.v1);
22 24
23 router.get('/.well-known/apple-app-site-association', apple.appSiteAssociation); 25 router.get('/.well-known/apple-app-site-association', apple.appSiteAssociation);
24 26
  1 +'use strict';
  2 +
  3 +const shareorder = (req, res) => {
  4 + res.render('help/share-order', {
  5 + title: '晒单'
  6 + });
  7 +};
  8 +
  9 +const limitcodeHelp = (req, res) => {
  10 + res.render('help/limitcode-help', {
  11 + title: '如何获得限购码'
  12 + });
  13 +};
  14 +
  15 +const limitcodeColSize = (req, res) => {
  16 + res.render('help/limitcode-colsize', {
  17 + title: '选择限购码颜色和尺寸'
  18 + });
  19 +};
  20 +
  21 +const limitcodeIntro = (req, res) => {
  22 + res.render('help/limitcode-intro', {
  23 + title: '什么是限购码'
  24 + });
  25 +};
  26 +
  27 +module.exports = {
  28 + shareorder,
  29 + limitcodeHelp,
  30 + limitcodeColSize,
  31 + limitcodeIntro
  32 +};
  1 +'use strict';
  2 +
  3 +const systemUpdate = (req, res) => {
  4 + res.render('systemUpdate/systemUpdate', {
  5 + localCss: true,
  6 + module: 'service',
  7 + page: 'system'
  8 + });
  9 +};
  10 +
  11 +module.exports = {
  12 + systemUpdate
  13 +};
@@ -13,6 +13,10 @@ const chat = require(`${cRoot}/chat`); @@ -13,6 +13,10 @@ const chat = require(`${cRoot}/chat`);
13 13
14 const chatQa = require(`${cRoot}/chatQa`); // 问题搜索列表页 14 const chatQa = require(`${cRoot}/chatQa`); // 问题搜索列表页
15 15
  16 +const system = require(`${cRoot}/systemUpdate`);
  17 +
  18 +const help = require(`${cRoot}/help`);
  19 +
16 // middlware 20 // middlware
17 21
18 const authGuard = require('../../doraemon/middleware/auth'); 22 const authGuard = require('../../doraemon/middleware/auth');
@@ -33,4 +37,10 @@ router.get('/qaSearch', chatQa.qaSearch); // 问题搜索页 @@ -33,4 +37,10 @@ router.get('/qaSearch', chatQa.qaSearch); // 问题搜索页
33 router.get('/qaDetail', chatQa.qaDetail); // 问题详情页 37 router.get('/qaDetail', chatQa.qaDetail); // 问题详情页
34 router.get('/keySearch', chatQa.keySearch); // 问题搜索关键词 38 router.get('/keySearch', chatQa.keySearch); // 问题搜索关键词
35 39
  40 +router.get('/systemUpdate', system.systemUpdate);// 升级公告 (APP使用)
  41 +router.get('/shareorder', help.shareorder);// 晒单 (APP使用)
  42 +router.get('/limitcodeHelp', help.limitcodeHelp);// 如何获得限购码 (APP使用)
  43 +router.get('/limitcodeColSize', help.limitcodeColSize);// 选择限购码颜色和尺寸 (APP使用)
  44 +router.get('/limitcodeIntro', help.limitcodeIntro);// 什么是限购码 (APP使用)
  45 +
36 module.exports = router; 46 module.exports = router;
  1 +{{!-- APP 限购码选择颜色和尺寸 --}}
  2 +<!DOCTYPE html>
  3 +<html lang="en">
  4 +<head>
  5 + <meta charset="UTF-8">
  6 + <title>限购码选择颜色和尺寸</title>
  7 + <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  8 + <meta http-equiv="cleartype" content="on">
  9 + <meta content="telephone=no" name="format-detection" />
  10 + <script type="text/javascript">
  11 + (function(doc, win) {
  12 + var docEl = doc.documentElement;
  13 + (function() {
  14 + var clientWidth = docEl.clientWidth;
  15 + if (!clientWidth) {
  16 + return;
  17 + }
  18 + docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
  19 + }());
  20 + })(document, window);
  21 + </script>
  22 + <style>
  23 + html, body{
  24 + margin: 0;
  25 + padding: 0;
  26 + font-family: helvetica,Arial,"黑体";
  27 + }
  28 + .container {
  29 + width: 100%;
  30 + padding: 0.6rem;
  31 + background-color: #fff;
  32 + box-sizing: border-box;
  33 + }
  34 + p {
  35 + font-size: 0.75rem;
  36 + color: #444;
  37 + line-height: 1.2rem;
  38 + }
  39 + </style>
  40 +</head>
  41 +<body>
  42 + <div class="container">
  43 + <p>1.部分活动可在限定商品详情页选择颜色和尺码。</p>
  44 + <p>2.已选择的颜色尺码在活动结束前都可修改。</p>
  45 + <p>3.排队活动结束后,不管中没中奖都不可修改颜色和尺码。</p>
  46 + <p>4.如排队中奖或者分享获得限购码,将会匹配到之前选择的颜色和尺寸,仅可购买选中的颜色和尺码,不可跟换其他。</p>
  47 + </div>
  48 +</body>
  49 +</html>
  1 +{{!-- APP 如何获得限购码 --}}
  2 +<!DOCTYPE html>
  3 +<html lang="en">
  4 +<head>
  5 + <meta charset="UTF-8">
  6 + <title>如何获得限购码</title>
  7 + <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  8 + <meta http-equiv="cleartype" content="on">
  9 + <meta content="telephone=no" name="format-detection" />
  10 + <script type="text/javascript">
  11 + (function(doc, win) {
  12 + var docEl = doc.documentElement;
  13 + (function() {
  14 + var clientWidth = docEl.clientWidth;
  15 + if (!clientWidth) {
  16 + return;
  17 + }
  18 + docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
  19 + }());
  20 + })(document, window);
  21 + </script>
  22 + <style>
  23 + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, .yoho-header .nav-back, .yoho-header .nav-home, .yoho-header .nav-btn {
  24 + margin: 0;
  25 + padding: 0;
  26 + border: 0;
  27 + font: inherit;
  28 + font-size: 100%;
  29 + vertical-align: baseline;
  30 + }
  31 +
  32 + html {
  33 + line-height: 1;
  34 + }
  35 +
  36 + ol, ul {
  37 + list-style: none;
  38 + }
  39 +
  40 + table {
  41 + border-collapse: collapse;
  42 + border-spacing: 0;
  43 + }
  44 +
  45 + caption, th, td {
  46 + text-align: left;
  47 + font-weight: normal;
  48 + vertical-align: middle;
  49 + }
  50 +
  51 + q, blockquote {
  52 + quotes: none;
  53 + }
  54 +
  55 + q:before, q:after, blockquote:before, blockquote:after {
  56 + content: "";
  57 + content: none;
  58 + }
  59 +
  60 + a img {
  61 + border: none;
  62 + }
  63 +
  64 + article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary, .yoho-header .nav-back, .yoho-header .nav-home, .yoho-header .nav-btn {
  65 + display: block;
  66 + }
  67 + /*Reset End*/
  68 +
  69 + .clearfix:after{
  70 + content: '';
  71 + display: table;
  72 + clear: both;
  73 + }
  74 +
  75 + * {
  76 + -webkit-tap-highlight-color: rgba(0,0,0,0);
  77 + -moz-tap-highlight-color: rgba(0,0,0,0);
  78 + tap-highlight-color: rgba(0,0,0,0);
  79 + }
  80 +
  81 + html, body {
  82 + font-family: helvetica,Arial,"黑体";
  83 + width: 100%;
  84 + font-size: 12PX;
  85 + line-height: 1.4;
  86 + }
  87 +
  88 + button, input, select, textarea {
  89 + font-size: 100%;
  90 + margin: 0;
  91 + }
  92 +
  93 + img {
  94 + max-width: 100%;
  95 + display: block;
  96 + border: 0;
  97 + margin: 0 auto;
  98 + }
  99 +
  100 + a {
  101 + text-decoration: none;
  102 + outline: none;
  103 + color: #000
  104 + }
  105 +
  106 + a:link, a:visited, a:hover, a:actived{
  107 + color: #000;
  108 + }
  109 +
  110 + *:focus {
  111 + outline: none;
  112 + }
  113 +
  114 + .hide {
  115 + display: none;
  116 + }
  117 +
  118 + .overflow-hidden {
  119 + overflow: hidden;
  120 + }
  121 +
  122 + @font-face {
  123 + font-family: "iconfont";
  124 + src: url('../font/iconfont.eot'); /* IE9*/
  125 + src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
  126 + url('../font/iconfont.woff') format('woff'),
  127 + url('../font/iconfont.ttf') format('truetype'),
  128 + url('../font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
  129 + }
  130 +
  131 + .iconfont {
  132 + font-family: "iconfont" !important;
  133 + font-size: 16PX;
  134 + font-style: normal;
  135 + text-decoration: none;
  136 + -webkit-font-smoothing: antialiased;
  137 + -webkit-text-stroke-width: 0.2PX;
  138 + -moz-osx-font-smoothing: grayscale;
  139 + }
  140 + .limit-help-page{
  141 + padding: 0.7rem;
  142 + color: #444;
  143 + }
  144 + .limit-help-page h2{
  145 + font-size: 0.75rem;
  146 + font-weight: bold;
  147 + }
  148 + .limit-help-page .method{
  149 + display: block;
  150 + width: 2.3rem;
  151 + height: 0.875rem;
  152 + line-height: 0.9rem;
  153 + background-color: #444;
  154 + color: #fff;
  155 + border-radius: 0.5rem;
  156 + text-align: center;
  157 + margin: 0.5rem 0;
  158 + }
  159 + .limit-help-page li{
  160 + font-size: 0.6rem;
  161 + }
  162 + .limit-help-page .intro-img{
  163 + width: 100%;
  164 + height: 5.5rem;
  165 + background-size: 100%;
  166 + background-repeat: no-repeat;
  167 + margin: 0.5rem 0;
  168 + }
  169 + .limit-help-page .method-1 li:nth-child(1) .intro-img{
  170 + background-image: url('../img/product/help/1.png');
  171 + }
  172 + .limit-help-page .method-1 li:nth-child(2) .intro-img{
  173 + background-image: url('../img/product/help/2.png');
  174 + }
  175 + .limit-help-page .method-1 li:nth-child(3) .intro-img{
  176 + background-image: url('../img/product/help/3.png');
  177 + }
  178 + .limit-help-page .method-2 li:nth-child(1) .intro-img{
  179 + background-image: url('../img/product/help/4.png');
  180 + }
  181 + .limit-help-page .method-2 li:nth-child(2) .intro-img{
  182 + background-image: url('../img/product/help/5.png');
  183 + }
  184 + .limit-help-page .method-2 li:nth-child(3) .intro-img{
  185 + background-image: url('../img/product/help/6.png');
  186 + }
  187 + .limit-help-page .method-2 li:nth-child(4) .intro-img{
  188 + background-image: url('../img/product/help/7.png');
  189 + }
  190 + .limit-help-page .how li:nth-child(1) .intro-img{
  191 + background-image: url('../img/product/help/8.png');
  192 + }
  193 + .limit-help-page .how li:nth-child(2) .intro-img{
  194 + background-image: url('../img/product/help/9.png');
  195 + margin-bottom: 0;
  196 + }
  197 + </style>
  198 +
  199 +</head>
  200 +<body>
  201 + <div class="limit-help-page yoho-page">
  202 + <h2>不同限定商品获取限购码方式不同,获取限购码目前有两种方式:</h2>
  203 + <span class="method">方式一</span>
  204 + <ul class="method-1">
  205 + <li>1.在限定发售详情页点击分享或者底部“获取限购码”图标。
  206 + <div class="intro-img"></div>
  207 + </li>
  208 + <li>2.从弹出的分享中选取需要分享的渠道。
  209 + <div class="intro-img"></div>
  210 + </li>
  211 + <li>3.分享成功后返回Yoho!Buy有货APP会提示已获得限购码。
  212 + <div class="intro-img"></div>
  213 + </li>
  214 + </ul>
  215 + <span class="method">方式二</span>
  216 + <ul class="method-2">
  217 + <li>1.在限定发售详情页点击参加排队赢取限购码图标。
  218 + <div class="intro-img"></div>
  219 + </li>
  220 + <li>2.进入限定发售排队页面,点击参加排队。
  221 + <div class="intro-img"></div>
  222 + </li>
  223 + <li>3.排队成功后凭排队序列号作为抽奖凭证,等待开奖时间。
  224 + <div class="intro-img"></div>
  225 + </li>
  226 + <li>4.开奖后,排队页面会公布中奖名单,限购码会直接发送至账户。
  227 + <div class="intro-img"></div>
  228 + </li>
  229 + </ul>
  230 + <h2>查看和使用限购码</h2>
  231 + <ul class="how">
  232 + <li>1.从个人中心进入我的限购码页面,可查看所获取的限购码。
  233 + <div class="intro-img"></div>
  234 + </li>
  235 + <li>2.商品开售后,可凭此限购码购买对应商品。
  236 + <div class="intro-img"></div>
  237 + </li>
  238 + </ul>
  239 + </div>
  240 +</body>
  241 +</html>
  1 +{{!-- APP 什么是限购码 --}}
  2 +<!DOCTYPE html>
  3 +<html lang="en">
  4 +<head>
  5 + <meta charset="UTF-8">
  6 + <title>什么是限购码</title>
  7 + <meta name="description" content="">
  8 + <meta name="viewport" content="width=device-width">
  9 + <script type="text/javascript">
  10 + (function(doc, win) {
  11 + var docEl = doc.documentElement;
  12 + (function() {
  13 + var clientWidth = docEl.clientWidth;
  14 + if (!clientWidth) {
  15 + return;
  16 + }
  17 + docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
  18 + }());
  19 + })(document, window);
  20 + </script>
  21 + <style>
  22 + html, body, p {
  23 + margin: 0;
  24 + padding: 0;
  25 + font-family: helvetica,Arial,"黑体";
  26 + }
  27 + body {
  28 + background-color: #ccc;
  29 + }
  30 + .container {
  31 + padding: 0.7rem;
  32 + background-color: #fff;
  33 + }
  34 + .row {
  35 + border-bottom: 1px solid #b4b4b4;
  36 + padding-bottom: 0.2rem;
  37 + }
  38 + .block {
  39 + margin-bottom: 0.5rem
  40 + }
  41 + p {
  42 + font-size: 0.7rem;
  43 + color: #444;
  44 + margin: 0.3rem 0;
  45 + line-height: 1rem;
  46 + }
  47 + </style>
  48 +</head>
  49 +<body>
  50 + <div class="container">
  51 + <p> 1.当稀缺商品上架,同一用户账号在一定时间段内,仅支持购买1件该商品。 </p>
  52 + <p> 2.可通过分享或其他活动获得该商品的限购码,每个商品仅可获得1次限购码。 </p>
  53 + <p> 3.若下单未付款导致交易取消,不会扣限购额度。已付款状态下,无论是否退款则扣除限购额度。 </p>
  54 + <br>
  55 + <div class="block">
  56 + <p class="row">
  57 + Q:限购码可以送给我的朋友吗?
  58 + </p>
  59 + <p>
  60 + A:限购码不可赠送,只能自己账号使用。可以把活动告诉朋友,参与即可获得限购码。
  61 + </p>
  62 + </div>
  63 +
  64 + <div>
  65 + <p class="row">
  66 + Q:下单发现买错码数了,取消订单后我还能再买吗?
  67 + </p>
  68 + <p>
  69 + A:尚未付款的订单取消后,可以再次购买。
  70 + </p>
  71 + </div>
  72 +
  73 + </div>
  74 +</body>
  75 +</html>
  1 +{{!-- APP 内置晒单介绍 --}}
  2 +<!DOCTYPE html>
  3 +<html>
  4 + <head>
  5 + <meta charset="utf-8">
  6 + <title>晒单评价规则</title>
  7 + <style type="text/css">
  8 + * {
  9 + margin: 0;
  10 + padding: 0;
  11 + }
  12 + ul {
  13 + list-style: none;
  14 + margin-bottom: 30px;
  15 + }
  16 + .help {
  17 + padding: 30px 30px;
  18 + font-size: 26px;
  19 + line-height: 1.5;
  20 + color: #444;
  21 + }
  22 + </style>
  23 + </head>
  24 + <body>
  25 + <div class="help">
  26 + <p>晒单评价规则:</p>
  27 + <ul>
  28 + <li>1. 只能对您购买过的商品进行晒单评价;</li>
  29 + <li>2. 晒单通过审核后即可获得奖励,且一件商品只能获得一次晒单奖励;</li>
  30 + <li>3. 未通过审核的晒单评价内容将会被删除,若多次出现晒单评价未审核通过的情况,YOHO!BUY有货有权禁止该用户对商品继续晒单评价;</li>
  31 + </ul>
  32 + <p>如何通过审核:</p>
  33 + <ul>
  34 + <li>1. 晒单图片应与商品相关、且不得出现含违反法律、法规的内容的;</li>
  35 + <li>2. 评价应有一定参考价值的信息,不可以直接拷贝别人的评价文字哦~</li>
  36 + </ul>
  37 + <p>其他说明:</p>
  38 + <ul>
  39 + <li>YOHO!BUY有货对用户在本站进行晒单评价的文字、图片享有使用权利</li>
  40 + </ul>
  41 + </div>
  42 + </body>
  43 +</html>
  1 +<div class="system-main">
  2 + <P>尊敬的顾客:</P>
  3 + <P>您好!</P>
  4 + <P>为了向您提供更优质的服务,目前系统正在升级,请您耐心等待。</P>
  5 + <P>系统升级期间,部分地区用户体验会有暂 时中断,如遇紧急事宜,欢迎垂询客服热线:400-889-9646 09:00-22:30(周一至周日)。</P>
  6 + <P>稍后系统将恢复正常使用,欢迎您继续光顾 Yoho!Buy有货!</P>
  7 + <P>带来不便之处深表 歉意,请您谅解!</P>
  8 + <P>特此公告</P>
  9 + <P>Yoho!Buy有货 客户服务中心。</P>
  10 +</div>
@@ -43,4 +43,3 @@ function scrollHandler() { @@ -43,4 +43,3 @@ function scrollHandler() {
43 $(window).scroll(function() { 43 $(window).scroll(function() {
44 window.requestAnimationFrame(scrollHandler); 44 window.requestAnimationFrame(scrollHandler);
45 }); 45 });
46 -  
  1 +var $ = require('yoho-jquery');
  2 +
  3 +require('service/system.page.css');
  4 +
  5 +if ($('.systemMain').height() < $(window).height()) {
  6 + $('.systemMain').height($(window).height());
  7 +}
  1 +@import "system/system";
  1 +.system-main {
  2 + overflow: hidden;
  3 + background-color: #444;
  4 + color: #fff;
  5 + padding: 0 4%;
  6 + position: absolute;
  7 + top: 0;
  8 + left: 0;
  9 +
  10 + p {
  11 + font-size: 52px;
  12 + line-height: 60px;
  13 +
  14 + &:first-of-type {
  15 + padding-top: 90px;
  16 + }
  17 + }
  18 +}