├── src ├── assets │ ├── styles │ │ └── index.scss │ └── scripts │ │ └── utils │ │ ├── consts.js │ │ └── helpers.js ├── mock │ ├── data │ │ ├── download.json │ │ ├── global.json │ │ ├── article-details.json │ │ ├── articles.json │ │ ├── home.json │ │ └── categories.json │ └── $.js ├── static │ ├── commons │ │ ├── scripts │ │ │ ├── utils │ │ │ │ ├── init.js │ │ │ │ ├── render.js │ │ │ │ ├── polyfills.js │ │ │ │ └── bind.js │ │ │ └── index.js │ │ ├── styles │ │ │ ├── images │ │ │ │ └── .gitkeep │ │ │ ├── utils │ │ │ │ ├── mixins.scss │ │ │ │ ├── functions.scss │ │ │ │ ├── index.scss │ │ │ │ └── variables.scss │ │ │ ├── objects │ │ │ │ ├── index.scss │ │ │ │ ├── media.scss │ │ │ │ └── grid.scss │ │ │ ├── index.scss │ │ │ ├── reset.scss │ │ │ └── classes.scss │ │ ├── components │ │ │ ├── logo │ │ │ │ ├── images │ │ │ │ │ └── logo.png │ │ │ │ └── styles.scss │ │ │ ├── carousel │ │ │ │ ├── images │ │ │ │ │ ├── next.png │ │ │ │ │ └── prev.png │ │ │ │ ├── scripts.js │ │ │ │ └── styles.scss │ │ │ ├── contact-us │ │ │ │ ├── images │ │ │ │ │ └── bg.png │ │ │ │ └── styles.scss │ │ │ ├── side-bar │ │ │ │ ├── images │ │ │ │ │ ├── dot.png │ │ │ │ │ ├── title.png │ │ │ │ │ └── dot-active.png │ │ │ │ └── styles.scss │ │ │ ├── hotline │ │ │ │ ├── images │ │ │ │ │ └── hotline.png │ │ │ │ └── styles.scss │ │ │ ├── article-panel │ │ │ │ ├── images │ │ │ │ │ ├── more.png │ │ │ │ │ └── title.png │ │ │ │ └── styles.scss │ │ │ ├── nav-bar │ │ │ │ ├── scripts.js │ │ │ │ └── styles.scss │ │ │ ├── article-details │ │ │ │ ├── scripts.js │ │ │ │ └── styles.scss │ │ │ ├── qrcode │ │ │ │ └── styles.scss │ │ │ ├── main │ │ │ │ └── styles.scss │ │ │ ├── pagination │ │ │ │ └── styles.scss │ │ │ ├── articles │ │ │ │ └── styles.scss │ │ │ └── article-card │ │ │ │ └── styles.scss │ │ └── snippets │ │ │ ├── footer │ │ │ └── styles.scss │ │ │ └── header │ │ │ └── styles.scss │ ├── home │ │ ├── scripts.js │ │ └── styles.scss │ ├── article │ │ ├── scripts.js │ │ └── styles.scss │ └── article-details │ │ ├── scripts.js │ │ └── styles.scss ├── static-mobile │ ├── commons │ │ ├── styles │ │ │ ├── images │ │ │ │ └── .gitkeep │ │ │ ├── objects │ │ │ │ ├── index.scss │ │ │ │ ├── media.scss │ │ │ │ └── grid.scss │ │ │ ├── utils │ │ │ │ ├── functions.scss │ │ │ │ ├── mixins.scss │ │ │ │ ├── index.scss │ │ │ │ └── variables.scss │ │ │ ├── index.scss │ │ │ ├── reset.scss │ │ │ └── classes.scss │ │ ├── scripts │ │ │ ├── utils │ │ │ │ ├── polyfills.js │ │ │ │ ├── render.js │ │ │ │ ├── init.js │ │ │ │ ├── fastclick.js │ │ │ │ └── bind.js │ │ │ └── index.js │ │ ├── components │ │ │ ├── categories │ │ │ │ ├── scripts.js │ │ │ │ └── styles.scss │ │ │ ├── status-bar │ │ │ │ ├── scripts.js │ │ │ │ ├── images │ │ │ │ │ └── back.png │ │ │ │ └── styles.scss │ │ │ ├── logo │ │ │ │ ├── images │ │ │ │ │ └── logo.png │ │ │ │ └── styles.scss │ │ │ ├── nav-bar │ │ │ │ ├── images │ │ │ │ │ ├── bg.png │ │ │ │ │ └── bg-reverse.png │ │ │ │ ├── scripts.js │ │ │ │ └── styles.scss │ │ │ ├── hotline │ │ │ │ ├── images │ │ │ │ │ └── hotline.png │ │ │ │ └── styles.scss │ │ │ ├── article-panel │ │ │ │ ├── images │ │ │ │ │ ├── more.png │ │ │ │ │ └── title.png │ │ │ │ └── styles.scss │ │ │ ├── swiper │ │ │ │ ├── scripts.js │ │ │ │ └── styles.scss │ │ │ ├── main │ │ │ │ └── styles.scss │ │ │ ├── article-card │ │ │ │ └── styles.scss │ │ │ ├── qrcode │ │ │ │ └── styles.scss │ │ │ └── article-details │ │ │ │ └── styles.scss │ │ └── snippets │ │ │ ├── footer │ │ │ └── styles.scss │ │ │ └── header │ │ │ └── styles.scss │ ├── article │ │ ├── scripts.js │ │ └── styles.scss │ ├── home │ │ ├── scripts.js │ │ ├── images │ │ │ ├── bg.png │ │ │ └── bg-reverse.png │ │ └── styles.scss │ ├── categories │ │ ├── scripts.js │ │ ├── images │ │ │ ├── bg.png │ │ │ └── bg-reverse.png │ │ └── styles.scss │ ├── download │ │ ├── scripts.js │ │ ├── images │ │ │ └── bg.png │ │ └── styles.scss │ └── article-details │ │ ├── scripts.js │ │ └── styles.scss ├── views │ ├── commons │ │ ├── snippets │ │ │ ├── foot.ejs │ │ │ ├── header.ejs │ │ │ ├── footer.ejs │ │ │ └── head.ejs │ │ └── components │ │ │ ├── logo.ejs │ │ │ ├── hotline.ejs │ │ │ ├── nav-bar.ejs │ │ │ ├── contact-us.ejs │ │ │ ├── article-card.ejs │ │ │ ├── article-panel.ejs │ │ │ ├── pagination.ejs │ │ │ ├── side-bar.ejs │ │ │ ├── carousel.ejs │ │ │ ├── article-details.ejs │ │ │ └── articles.ejs │ ├── home.ejs │ ├── article-details.ejs │ └── articles.ejs └── views-mobile │ ├── commons │ ├── snippets │ │ ├── foot.ejs │ │ ├── header.ejs │ │ ├── footer.ejs │ │ └── head.ejs │ └── components │ │ ├── logo.ejs │ │ ├── status-bar.ejs │ │ ├── hotline.ejs │ │ ├── nav-bar.ejs │ │ ├── qrcode.ejs │ │ ├── article-card.ejs │ │ ├── swiper.ejs │ │ ├── article-panel.ejs │ │ ├── categories.ejs │ │ └── article-details.ejs │ ├── categories.ejs │ ├── article-details.ejs │ ├── home.ejs │ ├── articles.ejs │ └── download.ejs ├── .eslintignore ├── .gitignore ├── .eslintrc ├── .stylelintrc ├── .editorconfig ├── .babelrc ├── package.json └── README.md /src/assets/styles/index.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/scripts/utils/consts.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/scripts/utils/helpers.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/mock/data/download.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /src/static/commons/scripts/utils/init.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/static/commons/scripts/utils/render.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/static/commons/styles/images/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/static/commons/styles/utils/mixins.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/**/*.js 2 | dist/**/*.js 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .idea 4 | -------------------------------------------------------------------------------- /src/static-mobile/commons/styles/images/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/static/commons/scripts/utils/polyfills.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/static/commons/styles/objects/index.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/static/commons/styles/utils/functions.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/static-mobile/commons/scripts/utils/polyfills.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/static-mobile/commons/scripts/utils/render.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/static-mobile/commons/styles/objects/index.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/static-mobile/commons/styles/utils/functions.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/static-mobile/commons/styles/utils/mixins.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/static/home/scripts.js: -------------------------------------------------------------------------------- 1 | import './styles.scss' 2 | -------------------------------------------------------------------------------- /src/static/article/scripts.js: -------------------------------------------------------------------------------- 1 | import './styles.scss' 2 | -------------------------------------------------------------------------------- /src/static-mobile/article/scripts.js: -------------------------------------------------------------------------------- 1 | import './styles.scss' 2 | -------------------------------------------------------------------------------- /src/static-mobile/home/scripts.js: -------------------------------------------------------------------------------- 1 | import './styles.scss' 2 | -------------------------------------------------------------------------------- /src/views/commons/snippets/foot.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/static-mobile/categories/scripts.js: -------------------------------------------------------------------------------- 1 | import './styles.scss' 2 | -------------------------------------------------------------------------------- /src/static-mobile/download/scripts.js: -------------------------------------------------------------------------------- 1 | import './styles.scss' 2 | -------------------------------------------------------------------------------- /src/static/article-details/scripts.js: -------------------------------------------------------------------------------- 1 | import './styles.scss' 2 | -------------------------------------------------------------------------------- /src/views-mobile/commons/snippets/foot.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/static-mobile/article-details/scripts.js: -------------------------------------------------------------------------------- 1 | import './styles.scss' 2 | -------------------------------------------------------------------------------- /src/static-mobile/commons/scripts/utils/init.js: -------------------------------------------------------------------------------- 1 | import './fastclick' 2 | -------------------------------------------------------------------------------- /src/views/commons/components/logo.ejs: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/static-mobile/commons/components/categories/scripts.js: -------------------------------------------------------------------------------- 1 | $(() => {}) 2 | -------------------------------------------------------------------------------- /src/views-mobile/commons/components/logo.ejs: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/static-mobile/article/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../commons/styles/utils/index"; 2 | 3 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "standard", 3 | "globals": { 4 | "$": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/static/article/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../commons/styles/utils/index"; 2 | 3 | @include p(article) { 4 | } 5 | -------------------------------------------------------------------------------- /src/static/commons/styles/index.scss: -------------------------------------------------------------------------------- 1 | @import "./utils/index"; 2 | @import "./reset"; 3 | @import "./classes"; 4 | -------------------------------------------------------------------------------- /src/static-mobile/commons/styles/index.scss: -------------------------------------------------------------------------------- 1 | @import "./utils/index"; 2 | @import "./reset"; 3 | @import "./classes"; 4 | -------------------------------------------------------------------------------- /src/static/article-details/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../commons/styles/utils/index"; 2 | 3 | @include p(article-details) { 4 | } 5 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard", 3 | "rules": { 4 | "at-rule-no-unknown": null 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/static-mobile/article-details/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../commons/styles/utils/index"; 2 | 3 | @include p(article-details) { 4 | } 5 | -------------------------------------------------------------------------------- /src/static-mobile/home/images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static-mobile/home/images/bg.png -------------------------------------------------------------------------------- /src/static-mobile/categories/images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static-mobile/categories/images/bg.png -------------------------------------------------------------------------------- /src/static-mobile/download/images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static-mobile/download/images/bg.png -------------------------------------------------------------------------------- /src/static/commons/styles/utils/index.scss: -------------------------------------------------------------------------------- 1 | @import "~sass-utils"; 2 | @import "./variables"; 3 | @import "./functions"; 4 | @import "./mixins"; 5 | -------------------------------------------------------------------------------- /src/static-mobile/home/images/bg-reverse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static-mobile/home/images/bg-reverse.png -------------------------------------------------------------------------------- /src/static-mobile/commons/components/status-bar/scripts.js: -------------------------------------------------------------------------------- 1 | $(() => { 2 | $('#back').on('click', () => { 3 | window.history.go(-1) 4 | }) 5 | }) 6 | -------------------------------------------------------------------------------- /src/static-mobile/commons/scripts/utils/fastclick.js: -------------------------------------------------------------------------------- 1 | import FastClick from 'fastclick' 2 | 3 | $(() => { 4 | FastClick.attach(document.body) 5 | }) 6 | -------------------------------------------------------------------------------- /src/static-mobile/commons/styles/utils/index.scss: -------------------------------------------------------------------------------- 1 | @import "~sass-utils"; 2 | @import "./variables"; 3 | @import "./functions"; 4 | @import "./mixins"; 5 | -------------------------------------------------------------------------------- /src/static-mobile/categories/images/bg-reverse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static-mobile/categories/images/bg-reverse.png -------------------------------------------------------------------------------- /src/static/commons/components/logo/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static/commons/components/logo/images/logo.png -------------------------------------------------------------------------------- /src/static/commons/components/carousel/images/next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static/commons/components/carousel/images/next.png -------------------------------------------------------------------------------- /src/static/commons/components/carousel/images/prev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static/commons/components/carousel/images/prev.png -------------------------------------------------------------------------------- /src/static/commons/components/contact-us/images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static/commons/components/contact-us/images/bg.png -------------------------------------------------------------------------------- /src/static/commons/components/side-bar/images/dot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static/commons/components/side-bar/images/dot.png -------------------------------------------------------------------------------- /src/static/home/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../commons/styles/utils/index"; 2 | 3 | @include p(home) { 4 | @include c(contact-us) { 5 | margin-top: 15px; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/static-mobile/commons/components/logo/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static-mobile/commons/components/logo/images/logo.png -------------------------------------------------------------------------------- /src/static/commons/components/hotline/images/hotline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static/commons/components/hotline/images/hotline.png -------------------------------------------------------------------------------- /src/static/commons/components/side-bar/images/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static/commons/components/side-bar/images/title.png -------------------------------------------------------------------------------- /src/static/commons/scripts/utils/bind.js: -------------------------------------------------------------------------------- 1 | $(() => { 2 | $('body').on('click', '.js-link', function () { 3 | window.location.href = $(this).data('url') 4 | }) 5 | }) 6 | -------------------------------------------------------------------------------- /src/static-mobile/commons/components/nav-bar/images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static-mobile/commons/components/nav-bar/images/bg.png -------------------------------------------------------------------------------- /src/static-mobile/commons/scripts/utils/bind.js: -------------------------------------------------------------------------------- 1 | $(() => { 2 | $('body').on('click', '.js-link', function () { 3 | window.location.href = $(this).data('url') 4 | }) 5 | }) 6 | -------------------------------------------------------------------------------- /src/static/commons/components/article-panel/images/more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static/commons/components/article-panel/images/more.png -------------------------------------------------------------------------------- /src/static/commons/components/article-panel/images/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static/commons/components/article-panel/images/title.png -------------------------------------------------------------------------------- /src/static/commons/components/side-bar/images/dot-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static/commons/components/side-bar/images/dot-active.png -------------------------------------------------------------------------------- /src/static-mobile/commons/components/hotline/images/hotline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static-mobile/commons/components/hotline/images/hotline.png -------------------------------------------------------------------------------- /src/static-mobile/commons/components/status-bar/images/back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static-mobile/commons/components/status-bar/images/back.png -------------------------------------------------------------------------------- /src/static-mobile/commons/components/article-panel/images/more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static-mobile/commons/components/article-panel/images/more.png -------------------------------------------------------------------------------- /src/static-mobile/commons/components/article-panel/images/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static-mobile/commons/components/article-panel/images/title.png -------------------------------------------------------------------------------- /src/static-mobile/commons/components/nav-bar/images/bg-reverse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhaotoday/webpack-multi-page/HEAD/src/static-mobile/commons/components/nav-bar/images/bg-reverse.png -------------------------------------------------------------------------------- /src/views/commons/components/hotline.ejs: -------------------------------------------------------------------------------- 1 |
2 |

<%= $.settings.cellphone %>

3 |

24 小时客服热线

4 |
5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /src/views-mobile/commons/components/status-bar.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
标题的
4 |
5 | -------------------------------------------------------------------------------- /src/static-mobile/commons/styles/reset.scss: -------------------------------------------------------------------------------- 1 | @import "~minireset.css/minireset.min.css"; 2 | 3 | body { 4 | font-family: $font-family-mobile; 5 | background-color: nth($colors, 9); 6 | overflow-x: hidden; 7 | } 8 | -------------------------------------------------------------------------------- /src/static/commons/components/logo/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(logo) { 4 | @include size(74px, 92px); 5 | 6 | background-image: url("./images/logo.png"); 7 | display: block; 8 | } 9 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-decorators-legacy" 4 | ], 5 | "presets": [ 6 | [ 7 | "es2015", 8 | { 9 | "modules": false 10 | } 11 | ], 12 | "stage-1" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /src/static-mobile/commons/snippets/footer/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | .footer { 4 | @include padding(px2rem(16px * 2), null, px2rem(16px * 2), null); 5 | 6 | line-height: 150%; 7 | text-align: center; 8 | } 9 | -------------------------------------------------------------------------------- /src/views/commons/snippets/header.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 | <%- include ../components/logo.ejs %> 4 | <%- include ../components/nav-bar.ejs %> 5 | <%- include ../components/hotline.ejs %> 6 |
7 |
8 | -------------------------------------------------------------------------------- /src/views-mobile/commons/snippets/header.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 | <%- include ../components/logo.ejs %> 4 | <%- include ../components/nav-bar.ejs %> 5 | <%- include ../components/hotline.ejs %> 6 |
7 |
8 | -------------------------------------------------------------------------------- /src/static/commons/components/nav-bar/scripts.js: -------------------------------------------------------------------------------- 1 | $(() => { 2 | const $navBar = $('#nav-bar') 3 | 4 | $navBar.find('a').each(function () { 5 | if ($(this).data('route') === window.ROUTE) { 6 | $(this).addClass('is-active') 7 | } 8 | }) 9 | }) 10 | -------------------------------------------------------------------------------- /src/views-mobile/commons/components/hotline.ejs: -------------------------------------------------------------------------------- 1 |
2 | 3 | <%= $.settings.cellphone %> 4 |
5 | -------------------------------------------------------------------------------- /src/static/commons/styles/objects/media.scss: -------------------------------------------------------------------------------- 1 | @import "../utils/index"; 2 | 3 | @include o(media) { 4 | display: flex; 5 | 6 | @include e(image) { 7 | flex: 0 1 auto; 8 | display: block; 9 | } 10 | 11 | @include e(body) { 12 | flex: 1; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/static-mobile/commons/styles/objects/media.scss: -------------------------------------------------------------------------------- 1 | @import "../utils/index"; 2 | 3 | @include o(media) { 4 | display: flex; 5 | 6 | @include e(image) { 7 | flex: 0 1 auto; 8 | display: block; 9 | } 10 | 11 | @include e(body) { 12 | flex: 1; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/static-mobile/commons/components/logo/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(logo) { 4 | @include size(px2rem(478px / 1.44), px2rem(111px / 1.44)); 5 | 6 | background: { 7 | image: url("./images/logo.png"); 8 | size: 100% 100%; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/static/commons/snippets/footer/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | .footer { 4 | @include padding(20px, null, 20px, null); 5 | 6 | background-color: nth($colors, 12); 7 | color: nth($colors, 13); 8 | line-height: 180%; 9 | text-align: center; 10 | } 11 | -------------------------------------------------------------------------------- /src/views/commons/snippets/footer.ejs: -------------------------------------------------------------------------------- 1 |
2 | Copyright © 2018 3 | <%= $.settings.title %>　　 4 | <%= $.settings.icp %> 5 |
6 | 联系电话：<%= $.settings.telephone %>　　 7 | 地址：<%= $.settings.address %> 8 |
9 | -------------------------------------------------------------------------------- /src/static/commons/styles/objects/grid.scss: -------------------------------------------------------------------------------- 1 | @import "../utils/index"; 2 | 3 | @include o(grid) { 4 | display: flex; 5 | 6 | @include m(full) { 7 | flex-wrap: wrap; 8 | } 9 | 10 | @include e(cell) { 11 | flex: 1; 12 | 13 | @include m(width-fixed) { 14 | flex: 0 1 auto; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/static-mobile/commons/styles/objects/grid.scss: -------------------------------------------------------------------------------- 1 | @import "../utils/index"; 2 | 3 | @include o(grid) { 4 | display: flex; 5 | 6 | @include m(full) { 7 | flex-wrap: wrap; 8 | } 9 | 10 | @include e(cell) { 11 | flex: 1; 12 | 13 | @include m(width-fixed) { 14 | flex: 0 1 auto; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/static-mobile/download/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../commons/styles/utils/index"; 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | .bg { 9 | @include position--absolute(0, 0, 0, 0); 10 | 11 | background: { 12 | image: url("./images/bg.png"); 13 | size: 100% 100%; 14 | repeat: no-repeat; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/views-mobile/commons/snippets/footer.ejs: -------------------------------------------------------------------------------- 1 |
2 | Copyright © 2018 3 | <%= $.settings.title %>　　 4 | <%= $.settings.icp %> 5 |
6 | 联系电话：<%= $.settings.telephone %> 7 |
8 | 地址：<%= $.settings.address %> 9 |
10 | -------------------------------------------------------------------------------- /src/views/commons/components/nav-bar.ejs: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/static-mobile/commons/components/nav-bar/scripts.js: -------------------------------------------------------------------------------- 1 | $(() => { 2 | const $navBar = $('#nav-bar') 3 | 4 | $navBar.find('li').each(function () { 5 | const $this = $(this) 6 | const views = $this.data('route') 7 | 8 | if (views.indexOf(window.ROUTE) !== -1) { 9 | $this.addClass('is-active') 10 | } 11 | }) 12 | }) 13 | -------------------------------------------------------------------------------- /src/views/commons/components/contact-us.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 扫描关注公众号 5 |
6 |
7 | 8 | 扫描下载 App 9 |
10 |
11 | -------------------------------------------------------------------------------- /src/static/commons/styles/reset.scss: -------------------------------------------------------------------------------- 1 | @import "~minireset.css/minireset.min.css"; 2 | 3 | body { 4 | color: nth($colors, 2); 5 | font-family: $font-family; 6 | font-size: nth($font-sizes, 2); 7 | background-color: nth($colors, 1); 8 | min-width: $wrap-width; 9 | overflow-x: hidden; 10 | } 11 | 12 | a { 13 | text-decoration: none; 14 | 15 | &:hover { 16 | text-decoration: none; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/views-mobile/commons/components/nav-bar.ejs: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/static/commons/components/hotline/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(hotline) { 4 | height: 42px; 5 | padding-left: 64px; 6 | background: { 7 | image: url("./images/hotline.png"); 8 | repeat: no-repeat; 9 | } 10 | 11 | @include e(tel, tip) { 12 | line-height: 100%; 13 | } 14 | 15 | @include e(tel) { 16 | @include padding(2px, null, 5px); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/static/commons/components/article-details/scripts.js: -------------------------------------------------------------------------------- 1 | $(() => { 2 | const $articleViews = $('#article-views') 3 | const resourceId = $articleViews.data('resourceid') 4 | 5 | $.ajax({ 6 | url: `${window.BASE_URL}/apis/v1/views`, 7 | data: { 8 | resource_id: resourceId, 9 | resource_module: 'articles' 10 | }, 11 | success (res) { 12 | $articleViews.html(res.data.count + ' 次') 13 | } 14 | }) 15 | }) 16 | -------------------------------------------------------------------------------- /src/views-mobile/commons/components/qrcode.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 | 扫描关注公众号 6 |
7 |
8 |
9 | 10 |
11 | 扫描下载 App 12 |
13 | -------------------------------------------------------------------------------- /src/static/commons/components/qrcode/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(qrcode) { 4 | width: 138px; 5 | line-height: 100%; 6 | text-align: center; 7 | 8 | img { 9 | @include size(122px, 122px); 10 | 11 | box-sizing: content-box; 12 | display: block; 13 | border: 8px solid nth($colors, 1); 14 | box-shadow: 0 0 20px rgba(nth($colors, 7), 0.4); 15 | margin-bottom: 7px; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/views-mobile/categories.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | const view = 'categories' 3 | const $ = require('../mock/$')(view) 4 | %> 5 | <%- include ./commons/snippets/head.ejs %> 6 |
7 | <%- include ./commons/components/swiper.ejs %> 8 | <%- include ./commons/components/nav-bar.ejs %> 9 | <%- include commons/components/categories.ejs %> 10 |
11 | <%- include ./commons/snippets/footer.ejs %> 12 | <%- include ./commons/snippets/foot.ejs %> 13 | -------------------------------------------------------------------------------- /src/views/commons/components/article-card.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 |

<%= item.title %>

4 |

<%- $.utils.cut({ text: item.content, max: 86 }) %>

5 |

<%= $.utils.time.getDate(item.created_at) %>

6 | 7 | -------------------------------------------------------------------------------- /src/views-mobile/commons/components/article-card.ejs: -------------------------------------------------------------------------------- 1 |
2 | 3 |

<%= item.title %>

4 |

<%- $.utils.cut({ text: item.content, max: 86 }) %>

5 |

<%= $.utils.time.getDate(item.created_at) %>

6 |
7 | -------------------------------------------------------------------------------- /src/static-mobile/commons/snippets/header/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | .header { 4 | background-color: nth($colors, 1); 5 | height: 92px; 6 | 7 | @include c(logo) { 8 | @include position--absolute(2px, null, null, 71px); 9 | } 10 | 11 | @include c(nav-bar) { 12 | @include position--absolute(24px, null, null, 194px); 13 | } 14 | 15 | @include c(hotline) { 16 | @include position--absolute(28px, null, null, 931px); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/static-mobile/commons/components/swiper/scripts.js: -------------------------------------------------------------------------------- 1 | import Swiper from 'swiper/dist/js/swiper' 2 | 3 | $(() => { 4 | new Swiper('#swiper', { 5 | autoplay: { 6 | delay: 3000, 7 | disableOnInteraction: false 8 | }, 9 | loop: true, 10 | pagination: { 11 | el: '#swiper-nav', 12 | clickable: true, 13 | passiveListeners: true, 14 | bulletClass: 'c-swiper__nav-item', 15 | bulletActiveClass: 'is-active' 16 | } 17 | }) 18 | }) 19 | -------------------------------------------------------------------------------- /src/static/commons/snippets/header/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | .header { 4 | background-color: nth($colors, 1); 5 | height: 80px; 6 | 7 | @include c(logo) { 8 | @include position--absolute(0, null, null, 71px); 9 | } 10 | 11 | @include c(nav-bar) { 12 | @include position--absolute(21px, null, null, 194px); 13 | } 14 | 15 | @include c(hotline) { 16 | @include position--absolute(22px, null, null, 931px); 17 | 18 | text-align: center; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/views/commons/components/article-panel.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
最新资讯
4 | 5 |
6 |
7 | <% $.categoryTops.forEach(function (item) { %> 8 | <%- require('./commons/components/article-card.ejs')({ $: $, item: item }) %> 9 | <% }) %> 10 |
11 |
12 | -------------------------------------------------------------------------------- /src/views-mobile/commons/components/swiper.ejs: -------------------------------------------------------------------------------- 1 |
2 | 10 | 11 |
12 | -------------------------------------------------------------------------------- /src/views-mobile/commons/components/article-panel.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
最新资讯
4 |
5 |
6 |
7 | <% $.categoryTops.forEach(function (item) { %> 8 | <%- require('./commons/components/article-card.ejs')({ $: $, item: item }) %> 9 | <% }) %> 10 |
11 |
12 | -------------------------------------------------------------------------------- /src/static/commons/styles/classes.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | @include block--center; 3 | 4 | position: relative; 5 | width: $wrap-width; 6 | } 7 | 8 | .bg { 9 | background-color: nth($colors, 10); 10 | width: 100%; 11 | } 12 | 13 | @for $i from 1 through length($font-sizes) { 14 | $item: nth($font-sizes, $i); 15 | 16 | .fs#{$i} { 17 | font-size: $item; 18 | } 19 | } 20 | 21 | @for $i from 1 through length($colors) { 22 | $item: nth($colors, $i); 23 | 24 | .c#{$i} { 25 | color: $item; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/views-mobile/commons/components/categories.ejs: -------------------------------------------------------------------------------- 1 |
2 | <% $.categoryTops.forEach(function (item) { %> 3 | <% const category = $.categories.find(function (category) { return category.id === item.category_id }) %> 4 |
5 | 6 |
<%= category.title %>
7 |
8 | <% }) %> 9 |
10 | -------------------------------------------------------------------------------- /src/static/commons/components/main/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(main) { 4 | @include block--center; 5 | @include margin(25px, null, 60px); 6 | 7 | width: 1150px; 8 | position: relative; 9 | 10 | @include e(side) { 11 | @include position--absolute(0); 12 | } 13 | 14 | @include e(body) { 15 | @include margin(null, null, null, 210px + 30px); 16 | @include padding(null, null, 50px, 30px); 17 | 18 | border-left: 1px solid #ededed; 19 | min-height: 700px; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/static-mobile/commons/components/main/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(main) { 4 | @include block--center; 5 | @include margin(25px, null, 60px); 6 | 7 | width: 1150px; 8 | position: relative; 9 | 10 | @include e(side) { 11 | @include position--absolute(0); 12 | } 13 | 14 | @include e(body) { 15 | @include margin(null, null, null, 210px + 30px); 16 | @include padding(null, null, 50px, 30px); 17 | 18 | border-left: 1px solid #ededed; 19 | min-height: 700px; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/static/commons/components/contact-us/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(contact-us) { 4 | @include size(1150px, 187px); 5 | 6 | position: relative; 7 | background: { 8 | image: url("./images/bg.png"); 9 | size: 100% 100%; 10 | } 11 | 12 | @include e(scan-oa, scan-app) { 13 | @include position--absolute(22px); 14 | 15 | display: none; 16 | } 17 | 18 | @include e(scan-oa) { 19 | right: 320px; 20 | } 21 | 22 | @include e(scan-app) { 23 | right: 105px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/static/commons/components/nav-bar/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(nav-bar) { 4 | @include e(item) { 5 | @include text--middle(45px); 6 | @include padding(null, 10px, null, 10px); 7 | 8 | box-sizing: border-box; 9 | display: inline-block; 10 | font-size: nth($font-sizes, 4); 11 | margin-right: 52px; 12 | text-align: center; 13 | color: nth($colors, 2); 14 | 15 | @include m(is-active) { 16 | color: nth($colors, 21); 17 | font-weight: bold; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/views-mobile/article-details.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | const view = 'article-details' 3 | const $ = require('../mock/$')(view) 4 | %> 5 | <%- include ./commons/snippets/head.ejs %> 6 |
7 |
8 |
<%= $.details.title %>
9 |
10 |
11 | <%- include ./commons/components/article-details.ejs %> 12 | <%- include ./commons/snippets/footer.ejs %> 13 |
14 | <%- include ./commons/snippets/foot.ejs %> 15 | -------------------------------------------------------------------------------- /src/views/home.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | const view = 'home' 3 | const $ = require('../mock/$')(view) 4 | %> 5 | <%- include ./commons/snippets/head.ejs %> 6 | <%- include ./commons/snippets/header.ejs %> 7 |
8 | <%- include ./commons/components/carousel.ejs %> 9 | <%- include ./commons/components/contact-us.ejs %> 10 |
11 | <%- include ./commons/components/article-panel.ejs %> 12 |
13 |
14 | <%- include ./commons/snippets/footer.ejs %> 15 | <%- include ./commons/snippets/foot.ejs %> 16 | -------------------------------------------------------------------------------- /src/views-mobile/commons/components/article-details.ejs: -------------------------------------------------------------------------------- 1 | 2 |
3 |

<%= $.details.title %>

4 |
5 | <%= $.utils.time.getDate($.details.created_at) %> 6 |
7 |
8 | <%- $.details.content %>
9 |
10 | 11 | -------------------------------------------------------------------------------- /src/mock/data/global.json: -------------------------------------------------------------------------------- 1 | { 2 | "head": { 3 | "title": "title for website", 4 | "keywords": "keyword1,keyword2", 5 | "description": "description for website" 6 | }, 7 | "settings": { 8 | "title": "闽侯养老院", 9 | "cellphone": "400-918-9833", 10 | "telephone": "13899875765", 11 | "address": "福建省福州市闽侯县荆溪镇荔园度假村内东艺楼", 12 | "copyright": "Copyright © 2018 闽侯重阳养老院", 13 | "icp": "京ICP备17002856号", 14 | "oa_qrcode": "1", 15 | "app_qrcode": "2" 16 | }, 17 | "global": { 18 | "company": "some company", 19 | "domain": "company.cn" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/static-mobile/commons/components/article-card/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(article-card) { 4 | img { 5 | @include size(px2rem(335px * 2), px2rem(188px * 2)); 6 | 7 | display: block; 8 | border-radius: px2rem(4px * 2); 9 | } 10 | 11 | @include e(title) { 12 | @include text--overflow; 13 | @include padding(px2rem(15px * 2), null, px2rem(5px * 2)); 14 | 15 | line-height: 100%; 16 | } 17 | 18 | @include e(time) { 19 | @include padding(px2rem(10px * 2), null, px2rem(20px * 2)); 20 | 21 | line-height: 100%; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/static-mobile/commons/components/qrcode/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(qrcode) { 4 | width: px2rem(224px / 1.44 + 40px); 5 | box-sizing: border-box; 6 | line-height: 100%; 7 | text-align: center; 8 | 9 | @include e(wrap) { 10 | @include size(px2rem(224px / 1.44), px2rem(224px / 1.44)); 11 | @include block--center; 12 | 13 | position: relative; 14 | overflow: hidden; 15 | margin-bottom: px2rem(30px); 16 | } 17 | 18 | img { 19 | @include size(px2rem(224px / 1.44), px2rem(224px / 1.44)); 20 | 21 | display: block; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/views/article-details.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | const view = 'article-details' 3 | const $ = require('../mock/$')(view) 4 | %> 5 | <%- include ./commons/snippets/head.ejs %> 6 | <%- include ./commons/snippets/header.ejs %> 7 |
8 | <%- include ./commons/components/contact-us.ejs %> 9 |
10 |
11 |
12 | <%- include ./commons/components/side-bar.ejs %> 13 |
14 |
15 | <%- include ./commons/components/article-details.ejs %> 16 |
17 |
18 | <%- include ./commons/snippets/footer.ejs %> 19 | <%- include ./commons/snippets/foot.ejs %> 20 | -------------------------------------------------------------------------------- /src/views/articles.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | const view = 'articles' 3 | const $ = require('../mock/$')(view) 4 | %> 5 | <%- include ./commons/snippets/head.ejs %> 6 | <%- include ./commons/snippets/header.ejs %> 7 |
8 | <%- include ./commons/components/contact-us.ejs %> 9 |
10 |
11 |
12 | <%- include ./commons/components/side-bar.ejs %> 13 |
14 |
15 | <%- include ./commons/components/articles.ejs %> 16 | <%- include ./commons/components/pagination.ejs %> 17 |
18 |
19 | <%- include ./commons/snippets/footer.ejs %> 20 | <%- include ./commons/snippets/foot.ejs %> 21 | -------------------------------------------------------------------------------- /src/views-mobile/home.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | const view = 'home' 3 | const $ = require('../mock/$')(view) 4 | %> 5 | <%- include ./commons/snippets/head.ejs %> 6 |
7 | <%- include ./commons/components/swiper.ejs %> 8 | <%- include ./commons/components/nav-bar.ejs %> 9 |
10 | <%- include ./commons/components/logo.ejs %> 11 | <%- include ./commons/components/hotline.ejs %> 12 | <%- include ./commons/components/qrcode.ejs %> 13 |
14 |
15 | <%- include ./commons/components/article-panel.ejs %> 16 |
17 |
18 | <%- include ./commons/snippets/footer.ejs %> 19 | <%- include ./commons/snippets/foot.ejs %> 20 | -------------------------------------------------------------------------------- /src/views-mobile/articles.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | const view = 'articles' 3 | const $ = require('../mock/$')(view) 4 | %> 5 | <%- include ./commons/snippets/head.ejs %> 6 |
7 |
8 |
<%= $.category.title %>
9 |
10 |
11 |
12 |
13 | <% $.items.forEach(function (item) { %> 14 | <%- require('./commons/components/article-card.ejs')({ $: $, item: item }) %> 15 | <% }) %> 16 |
17 |
18 | <%- include ./commons/snippets/footer.ejs %> 19 |
20 | <%- include ./commons/snippets/foot.ejs %> 21 | -------------------------------------------------------------------------------- /src/static-mobile/commons/components/hotline/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(hotline) { 4 | @include text--middle(px2rem(132px / 1.44)); 5 | 6 | position: relative; 7 | width: 100%; 8 | text-align: center; 9 | z-index: 1; 10 | box-shadow: 0 0 px2rem(16px) rgba(#bababa, 0.4); 11 | 12 | @include e(icon, tel) { 13 | vertical-align: middle; 14 | display: inline-block; 15 | } 16 | 17 | @include e(icon) { 18 | @include size(px2rem(66px / 1.44), px2rem(66px / 1.44)); 19 | 20 | background: { 21 | image: url("./images/hotline.png"); 22 | size: 100% 100%; 23 | } 24 | } 25 | 26 | @include e(tel) { 27 | @include text--middle(px2rem(44px)); 28 | 29 | padding-left: px2rem(7px * 2); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/static-mobile/commons/components/categories/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(categories) { 4 | @include clearfix; 5 | @include padding(px2rem(20px * 2), null, null, px2rem(25px)); 6 | 7 | background-color: nth($colors, 1); 8 | 9 | @include e(item) { 10 | @include size(px2rem(170px * 2), px2rem(260px)); 11 | @include margin(null, px2rem(5px), px2rem(10px), px2rem(5px)); 12 | 13 | float: left; 14 | position: relative; 15 | 16 | img { 17 | @include size(px2rem(170px * 2), px2rem(96px * 2)); 18 | } 19 | } 20 | 21 | @include e(title) { 22 | @include position--absolute(null, null, px2rem(20px)); 23 | @include text--middle(px2rem(34px)); 24 | 25 | width: 100%; 26 | text-align: center; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/static/commons/styles/utils/variables.scss: -------------------------------------------------------------------------------- 1 | $font-family: "Microsoft YaHei", "微软雅黑", Helvetica, Tahoma, Arial, STXihei, "华文细黑", SimSun, "宋体", Heiti, "黑体", sans-serif; 2 | 3 | $wrap-width: 1200px; 4 | 5 | $font-sizes: ( 6 | 12px, // 1 7 | 14px, // 2 8 | 16px, // 3 9 | 18px, // 4 10 | 20px, // 5 11 | 22px, // 6 12 | 24px, // 7 13 | 26px // 8 14 | ); 15 | 16 | $colors: ( 17 | #fff, // 1 18 | #000, // 2 19 | #040404, // 3 20 | #545454, // 4 21 | #666, // 5 22 | #999, // 6 23 | #bababa, // 7 24 | #f6793c, // 8 25 | #823805, // 9 26 | #f5f5f5, // 10 27 | #e0e0e0, // 11 28 | #eaeaea, // 12 29 | #333, // 13 30 | #2d2d2d, // 14 31 | #8e8e8e, // 15 32 | #ededed, // 16 33 | #cbcbcb, // 17 34 | #f47c2f, // 18 35 | #797979, // 19 36 | #5b5b5b, // 20 37 | #6eddd7, // 21 38 | ); 39 | -------------------------------------------------------------------------------- /src/static-mobile/commons/components/status-bar/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(status-bar) { 4 | @include header--sticky; 5 | @include text--middle(px2rem(50px * 2)); 6 | 7 | @include e(back) { 8 | @include size(px2rem(22px), px2rem(40px)); 9 | @include position--absolute(50%, null, null, px2rem(14px * 2 - 10px)); 10 | 11 | transform: translateY(-50%); 12 | padding: px2rem(10px); 13 | box-sizing: content-box; 14 | background: { 15 | image: url("./images/back.png"); 16 | size: px2rem(22px) px2rem(40px); 17 | position: center center; 18 | repeat: no-repeat; 19 | } 20 | } 21 | 22 | @include e(title) { 23 | @include text--overflow; 24 | @include block--center; 25 | 26 | width: 80%; 27 | text-align: center; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/views/commons/components/pagination.ejs: -------------------------------------------------------------------------------- 1 | <% const pages = Math.ceil($.count / $.consts.PAGE_SIZE) %> 2 | <% if (pages > 1) { %> 3 | 18 | <% } %> 19 | -------------------------------------------------------------------------------- /src/views/commons/components/side-bar.ejs: -------------------------------------------------------------------------------- 1 |
2 | 3 | <%= $.alias === 'news' ? '重阳画映' : '联系我们' %> 4 | 5 | 25 |
26 | -------------------------------------------------------------------------------- /src/static/commons/components/pagination/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(pagination) { 4 | padding-top: 80px; 5 | font-size: 0; 6 | text-align: center; 7 | 8 | @include e(item) { 9 | @include margin(null, 4px, null, 5px); 10 | 11 | padding: 6px 8px; 12 | line-height: 100%; 13 | display: inline-block; 14 | box-sizing: border-box; 15 | text-align: center; 16 | font-size: nth($font-sizes, 1); 17 | color: #6c6c6c; 18 | border: 1px solid nth($colors, 17); 19 | cursor: pointer; 20 | 21 | @include m(ellipsis) { 22 | border: 0; 23 | cursor: text; 24 | } 25 | 26 | @include m(is-active) { 27 | border: 1px solid nth($colors, 21); 28 | cursor: text; 29 | color: nth($colors, 1); 30 | background-color: nth($colors, 21); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/static-mobile/commons/styles/utils/variables.scss: -------------------------------------------------------------------------------- 1 | $font-family: "Microsoft YaHei", "微软雅黑", Helvetica, Tahoma, Arial, STXihei, "华文细黑", SimSun, "宋体", Heiti, "黑体", sans-serif; 2 | 3 | $wrap-width: 1200px; 4 | 5 | $font-sizes: ( 6 | 10px, // 1 7 | 11px, // 2 8 | 12px, // 3 9 | 13px, // 4 10 | 14px, // 5 11 | 15px, // 6 12 | 16px, // 7 13 | 17px, // 8 14 | 18px, // 9 15 | 19px, // 10 16 | 20px, // 11 17 | 21px, // 12 18 | 22px, // 13 19 | 23px, // 14 20 | 24px, // 15 21 | 25px, // 16 22 | 26px, // 17 23 | 27px //18 24 | ); 25 | 26 | $colors: ( 27 | #fff, // 1 28 | #888, // 2 29 | #000, // 3 30 | #f78445, // 4 31 | #eceef3, // 5 32 | #bababa, // 6 33 | #9b9b9b, // 7 34 | #ebebeb, // 8, 35 | #f6f6f6, // 9 36 | #f5f5f5, // 10 37 | #4a4a4a, // 11 38 | #b2b2b2, // 12 39 | #cacaca, // 13 40 | #6eddd6 // 14 41 | ); 42 | -------------------------------------------------------------------------------- /src/static-mobile/commons/scripts/index.js: -------------------------------------------------------------------------------- 1 | // 引入公用样式 2 | import '../styles/index.scss' 3 | 4 | import '../components/swiper/styles.scss' 5 | import '../components/nav-bar/styles.scss' 6 | import '../components/logo/styles.scss' 7 | import '../components/qrcode/styles.scss' 8 | import '../components/hotline/styles.scss' 9 | import '../components/article-panel/styles.scss' 10 | import '../components/article-card/styles.scss' 11 | import '../components/categories/styles.scss' 12 | import '../components/status-bar/styles.scss' 13 | import '../components/article-details/styles.scss' 14 | 15 | import '../snippets/header/styles.scss' 16 | import '../snippets/footer/styles.scss' 17 | 18 | // 引入全局脚本 19 | import './utils/polyfills' 20 | import './utils/render' 21 | import './utils/init' 22 | import './utils/bind' 23 | 24 | import '../components/swiper/scripts' 25 | import '../components/nav-bar/scripts' 26 | import '../components/status-bar/scripts' 27 | -------------------------------------------------------------------------------- /src/views/commons/snippets/head.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= $.head.title %> 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/static/commons/components/article-panel/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(article-panel) { 4 | @include e(header) { 5 | @include padding(46px, null, 29px); 6 | 7 | line-height: 100%; 8 | position: relative; 9 | } 10 | 11 | @include e(title) { 12 | @include text--middle(28px); 13 | @include block--center; 14 | 15 | text-align: center; 16 | width: 169px; 17 | background-image: url("./images/title.png"); 18 | } 19 | 20 | @include e(more) { 21 | @include size(40px + 10px, 10px + 10px); 22 | @include position--absolute(45px, 40px); 23 | 24 | display: block; 25 | background: { 26 | image: url("./images/more.png"); 27 | repeat: no-repeat; 28 | position: center center; 29 | } 30 | } 31 | 32 | @include e(body) { 33 | @include padding(10px, null, 46px, -16px); 34 | @include clearfix; 35 | 36 | width: 100%; 37 | 38 | .c-article-card { 39 | float: left; 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/views/commons/components/carousel.ejs: -------------------------------------------------------------------------------- 1 |
2 | 18 | 23 |
24 |
25 |
26 | -------------------------------------------------------------------------------- /src/static/commons/scripts/index.js: -------------------------------------------------------------------------------- 1 | // 引入公用样式 2 | import '../styles/index.scss' 3 | 4 | import '../components/logo/styles.scss' 5 | import '../components/hotline/styles.scss' 6 | import '../components/nav-bar/styles.scss' 7 | import '../components/carousel/styles.scss' 8 | import '../components/qrcode/styles.scss' 9 | import '../components/article-panel/styles.scss' 10 | import '../components/article-card/styles.scss' 11 | import '../components/contact-us/styles.scss' 12 | import '../components/side-bar/styles.scss' 13 | import '../components/main/styles.scss' 14 | import '../components/articles/styles.scss' 15 | import '../components/pagination/styles.scss' 16 | import '../components/article-details/styles.scss' 17 | 18 | import '../snippets/header/styles.scss' 19 | import '../snippets/footer/styles.scss' 20 | 21 | // 引入全局脚本 22 | import './utils/polyfills' 23 | import './utils/render' 24 | import './utils/bind' 25 | import './utils/init' 26 | 27 | import '../components/carousel/scripts' 28 | import '../components/nav-bar/scripts' 29 | import '../components/article-details/scripts' 30 | -------------------------------------------------------------------------------- /src/mock/$.js: -------------------------------------------------------------------------------- 1 | module.exports = page => { 2 | const globalData = require('./data/global.json') 3 | const pageData = require(`./data/${page}.json`) 4 | const isDev = process.env.NODE_ENV === 'development' 5 | 6 | const BASE_URL = 'http://localhost:3002' 7 | const PAGE_SIZE = 2 8 | const CDN = isDev ? 'http://localhost:8083' : 'https://yly-cdn.liruan.cn' 9 | const STATIC_VERSION = '0.1' 10 | 11 | return Object.assign({ 12 | route: '', 13 | helpers: { 14 | getFileURL (id) { 15 | return `${BASE_URL}/apis/v1/files/${id}` 16 | } 17 | }, 18 | utils: { 19 | time: { 20 | getDate () { 21 | return '2018-01-01' 22 | }, 23 | getTime () { 24 | return '2018-01-01 01:01:01' 25 | } 26 | }, 27 | cut () { 28 | return '引进美国先进的养老经验，结合国内养老特点，为长者提供一站式的退休生活解决方案' 29 | } 30 | }, 31 | consts: { 32 | BASE_URL, 33 | PAGE_SIZE, 34 | CDN, 35 | STATIC_VERSION 36 | }, 37 | styles: [page], 38 | scripts: [page] 39 | }, globalData, pageData) 40 | } 41 | -------------------------------------------------------------------------------- /src/static-mobile/home/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../commons/styles/utils/index"; 2 | 3 | @include p(home) { 4 | @include pb(middle-wrap) { 5 | @include size(100%, px2rem(562px / 1.44)); 6 | 7 | position: relative; 8 | background: { 9 | image: url("./images/bg.png"); 10 | repeat: no-repeat; 11 | size: px2rem(347px / 1.44) px2rem(639px / 1.44); 12 | } 13 | 14 | @include m(reverse) { 15 | background: { 16 | image: url("./images/bg-reverse.png"); 17 | position: right 0; 18 | } 19 | } 20 | } 21 | 22 | @include c(logo) { 23 | @include position--absolute(px2rem(44px / 1.44), null, null, 50%); 24 | 25 | transform: translateX(-50%); 26 | } 27 | 28 | @include pb(oa-qrcode, app-qrcode) { 29 | @include position--absolute(null, null, px2rem(45px / 1.44)); 30 | } 31 | 32 | @include pb(oa-qrcode) { 33 | left: 50%; 34 | margin-left: px2rem(-224px / 1.44 / 2 - 40px / 2); 35 | } 36 | 37 | @include pb(app-qrcode) { 38 | display: none; 39 | right: px2rem(206px / 1.44 - 20px); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/static-mobile/categories/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../commons/styles/utils/index"; 2 | 3 | @include p(categories) { 4 | @include pb(middle-wrap) { 5 | @include size(100%, px2rem(562px / 1.44)); 6 | 7 | position: relative; 8 | background: { 9 | image: url("./images/bg.png"); 10 | repeat: no-repeat; 11 | size: px2rem(347px / 1.44) px2rem(639px / 1.44); 12 | } 13 | 14 | @include m(reverse) { 15 | background: { 16 | image: url("./images/bg-reverse.png"); 17 | position: right 0; 18 | } 19 | } 20 | } 21 | 22 | @include c(logo) { 23 | @include position--absolute(px2rem(44px / 1.44), null, null, 50%); 24 | 25 | transform: translateX(-50%); 26 | } 27 | 28 | @include pb(oa-qrcode, app-qrcode) { 29 | @include position--absolute(null, null, px2rem(45px / 1.44)); 30 | } 31 | 32 | @include pb(oa-qrcode) { 33 | left: 50%; 34 | margin-left: px2rem(-224px / 1.44 / 2 - 40px / 2); 35 | } 36 | 37 | @include pb(app-qrcode) { 38 | display: none; 39 | right: px2rem(206px / 1.44 - 20px); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/views-mobile/download.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 孝道乐龄 6 | <% 7 | const view = 'article-details' 8 | const $ = require('../mock/$')(view) 9 | %> 10 | 11 | 24 | 25 | 26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /src/static-mobile/commons/components/article-details/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(article-details) { 4 | @include e(title) { 5 | @include block--center; 6 | @include text--overflow(2); 7 | 8 | padding-top: px2rem(20px * 2); 9 | margin-bottom: px2rem(10px * 2); 10 | width: px2rem(260px * 2); 11 | text-align: center; 12 | line-height: 150%; 13 | } 14 | 15 | @include e(extra) { 16 | @include padding(px2rem(9px * 2), null, px2rem(24px * 2)); 17 | 18 | line-height: 100%; 19 | text-align: center; 20 | } 21 | 22 | @include e(body) { 23 | @include padding(null, px2rem(20px * 2), px2rem(20px * 2), px2rem(20px * 2)); 24 | } 25 | 26 | .s-cms-content { 27 | line-height: 180%; 28 | 29 | p { 30 | padding-bottom: px2rem(24px); 31 | } 32 | 33 | img { 34 | @include block--center; 35 | 36 | max-width: px2rem(335px * 2); 37 | display: block; 38 | margin-bottom: px2rem(20px); 39 | } 40 | 41 | .video-js { 42 | @include size(px2rem(335px * 2), px2rem(335px * 2 * 9 / 16)); 43 | @include block--center; 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/views/commons/components/article-details.ejs: -------------------------------------------------------------------------------- 1 | 2 |
3 |

<%= $.details.title %>

4 |
5 | 发布日期：<%= $.utils.time.getDate($.details.created_at) %> 6 | 阅读：- 7 |
8 |
9 | <%- $.details.content %>
10 |
11 | <% if ($.prev) { %> 12 | 上一篇：<%= $.prev.title %> 13 | <% } %> 14 | <% if ($.prev && $.next) { %> 15 |
16 | <% } %> 17 | <% if ($.next) { %> 18 | 下一篇：<%= $.next.title %> 19 | <% } %> 20 |
21 | < 更多 22 |
23 |
24 |
25 | 26 | -------------------------------------------------------------------------------- /src/static-mobile/commons/components/article-panel/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(article-panel) { 4 | @include padding(null, px2rem(20px * 2), null, px2rem(20px * 2)); 5 | 6 | @include e(header) { 7 | @include text--middle(px2rem(48px * 2)); 8 | 9 | width: 100%; 10 | position: relative; 11 | background: { 12 | image: url("./images/title.png"); 13 | size: px2rem(240px), px2rem(30px); 14 | repeat: no-repeat; 15 | position: center center; 16 | } 17 | } 18 | 19 | @include e(title) { 20 | text-align: center; 21 | } 22 | 23 | @include e(more) { 24 | @include position--absolute(50%, 0); 25 | @include size(px2rem(58px), px2rem(18px)); 26 | 27 | padding: px2rem(10px); 28 | margin-right: px2rem(-10px); 29 | box-sizing: content-box; 30 | transform: translateY(-50%); 31 | background: { 32 | image: url("./images/more.png"); 33 | size: px2rem(58px) px2rem(18px); 34 | position: center center; 35 | repeat: no-repeat; 36 | } 37 | } 38 | 39 | @include e(body) { 40 | @include m(padding-top-30) { 41 | padding-top: px2rem(30px); 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "website", 3 | "version": "1.0.0", 4 | "description": "website", 5 | "main": "index.js", 6 | "scripts": { 7 | "eslintfix": "eslint src/**/*.js --fix", 8 | "eslint": "eslint src/**/*.js", 9 | "stylelint": "stylelint src/**/*.scss" 10 | }, 11 | "keywords": [ 12 | "website" 13 | ], 14 | "author": "zhaojintian", 15 | "license": "ISC", 16 | "devDependencies": { 17 | "babel-eslint": "^8.2.1", 18 | "babel-plugin-transform-decorators-legacy": "^1.3.5", 19 | "babel-preset-es2015": "^6.24.1", 20 | "babel-preset-stage-1": "^6.24.1", 21 | "eslint": "^4.17.0", 22 | "eslint-config-standard": "^11.0.0-beta.0", 23 | "eslint-plugin-import": "^2.8.0", 24 | "eslint-plugin-node": "^6.0.0", 25 | "eslint-plugin-promise": "^3.6.0", 26 | "eslint-plugin-standard": "^3.0.1", 27 | "stylelint": "^8.4.0", 28 | "stylelint-config-standard": "^18.0.0" 29 | }, 30 | "dependencies": { 31 | "fastclick": "^1.0.6", 32 | "include-media": "^1.4.9", 33 | "jquery": "^1.12.4", 34 | "minireset.css": "0.0.3", 35 | "sass-utils": "^1.0.16", 36 | "swiper": "^4.3.3", 37 | "video.js": "^7.1.0", 38 | "zepto": "^1.2.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/static/commons/components/side-bar/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(side-bar) { 4 | width: 210px; 5 | 6 | @include e(title) { 7 | @include size(210px, 81px); 8 | 9 | display: block; 10 | text-align: center; 11 | line-height: 81px; 12 | 13 | background: { 14 | image: url("./images/title.png"); 15 | size: 100% 100%; 16 | } 17 | 18 | &:hover, 19 | &:active, 20 | &:focus { 21 | color: nth($colors, 1); 22 | } 23 | } 24 | 25 | @include cc(menu) { 26 | @include e(item) { 27 | a { 28 | @include text--middle(48px); 29 | 30 | width: 100%; 31 | text-align: center; 32 | display: block; 33 | border-bottom: 1px solid #e8e8e8; 34 | color: #5b5b5b; 35 | background: { 36 | image: url("./images/dot.png"); 37 | repeat: no-repeat; 38 | position: 56px center; 39 | } 40 | 41 | &.is-active { 42 | color: nth($colors, 21); 43 | background: { 44 | color: #fbfbfb; 45 | image: url("./images/dot.png"); 46 | repeat: no-repeat; 47 | position: 56px center; 48 | } 49 | } 50 | } 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/views/commons/components/articles.ejs: -------------------------------------------------------------------------------- 1 | <% const topCategoryTitle = $.alias === 'news' ? '重阳画映' : '联系我们' %> 2 |
3 |
4 |
<%= $.category ? $.category.title : topCategoryTitle %>
5 |
6 | 遇见重阳 7 | > 8 | <%= topCategoryTitle %> 9 | <% if ($.category) { %> 10 | > <%= $.category.title %> 11 | <% } %> 12 |
13 |
14 | 27 |
28 | -------------------------------------------------------------------------------- /src/static-mobile/commons/components/swiper/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | @import "~swiper/dist/css/swiper.min.css"; 3 | 4 | @include c(swiper) { 5 | @include size(px2rem(375px * 2), px2rem(211px * 2)); 6 | 7 | position: relative; 8 | overflow: hidden; 9 | 10 | @include e(item) { 11 | @include size(px2rem(375px * 2), px2rem(211px * 2)); 12 | } 13 | 14 | @include e(item-title) { 15 | @include position--absolute(null, null, px2rem(50px), 0); 16 | @include text--overflow; 17 | 18 | text-indent: px2rem(50px); 19 | width: 100%; 20 | line-height: 100%; 21 | } 22 | 23 | img { 24 | @include size(100%, 100%); 25 | } 26 | 27 | @include e(nav) { 28 | position: absolute; 29 | left: 0; 30 | bottom: px2rem(20px) !important; 31 | text-align: center; 32 | width: 100%; 33 | line-height: 0; 34 | z-index: 2; 35 | } 36 | 37 | @include e(nav-item) { 38 | @include size(px2rem(36px), px2rem(6px)); 39 | @include margin(null, px2rem(6px), null, px2rem(6px)); 40 | 41 | border-radius: px2rem(6px); 42 | display: inline-block; 43 | background-color: nth($colors, 1); 44 | opacity: 0.8; 45 | 46 | @include m(is-active) { 47 | background-color: nth($colors, 14); 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/static/commons/components/article-details/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(article-details) { 4 | @include e(title) { 5 | line-height: 100%; 6 | padding-top: 5px; 7 | } 8 | 9 | @include e(extra) { 10 | @include padding(15px, null, 26px); 11 | 12 | border-bottom: 2px solid nth($colors, 21); 13 | 14 | span { 15 | padding-right: 15px; 16 | } 17 | } 18 | 19 | @include e(body) { 20 | padding-top: 32px; 21 | } 22 | 23 | .s-cms-content { 24 | font-size: nth($font-sizes, 2); 25 | line-height: 200%; 26 | color: nth($colors, 20); 27 | 28 | p { 29 | padding-bottom: 20px; 30 | } 31 | 32 | img { 33 | @include block--center; 34 | 35 | max-width: 800px; 36 | display: block; 37 | } 38 | 39 | .video-js { 40 | @include size(800px, 450px); 41 | @include block--center; 42 | } 43 | } 44 | 45 | @include e(nav) { 46 | @include padding(12px, null, 12px); 47 | 48 | margin-top: 50px; 49 | position: relative; 50 | line-height: 200%; 51 | border-top: 1px dotted nth($colors, 19); 52 | border-bottom: 1px dotted nth($colors, 19); 53 | 54 | a { 55 | color: nth($colors, 21); 56 | 57 | &:hover { 58 | color: nth($colors, 21); 59 | } 60 | } 61 | } 62 | 63 | @include e(nav-more) { 64 | @include position--absolute(50%, 0); 65 | 66 | transform: translateY(-50%); 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/static/commons/components/articles/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(articles) { 4 | @include e(heading) { 5 | @include padding(34px, null, 20px); 6 | 7 | line-height: 100%; 8 | position: relative; 9 | border-bottom: 1px solid nth($colors, 16); 10 | } 11 | 12 | @include e(title) { 13 | @include text--middle(28px); 14 | 15 | border-left: 2px solid nth($colors, 21); 16 | padding-left: 12px; 17 | } 18 | 19 | @include e(nav) { 20 | @include position--absolute(53px, 0); 21 | 22 | a:hover { 23 | color: nth($colors, 15); 24 | text-decoration: underline; 25 | } 26 | } 27 | 28 | @include cc(item) { 29 | @include padding(30px, null, 30px); 30 | 31 | box-sizing: content-box; 32 | height: 112px; 33 | position: relative; 34 | border-bottom: 1px dotted nth($colors, 6); 35 | 36 | @include e(img) { 37 | @include size(200px, 112px); 38 | 39 | display: block; 40 | cursor: pointer; 41 | } 42 | 43 | @include e(body) { 44 | @include position--absolute(30px, 0, 30px, 220px); 45 | } 46 | 47 | @include e(title) { 48 | line-height: 100%; 49 | 50 | &:hover { 51 | text-decoration: underline; 52 | color: nth($colors, 2); 53 | } 54 | } 55 | 56 | @include e(desc) { 57 | padding-top: 12px; 58 | line-height: 140%; 59 | height: 40px; 60 | overflow: hidden; 61 | } 62 | 63 | @include e(time) { 64 | margin-top: 24px; 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/static-mobile/commons/components/nav-bar/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(nav-bar) { 4 | @include size(100%, px2rem(140px / 1.44)); 5 | 6 | position: relative; 7 | z-index: 1; 8 | margin-bottom: -1px; 9 | display: flex; 10 | background: { 11 | image: url("./images/bg.png"); 12 | size: 100% 100%; 13 | } 14 | 15 | @include m(reverse) { 16 | background-image: url("./images/bg-reverse.png"); 17 | } 18 | 19 | @include e(item) { 20 | @include text--middle(px2rem(140px / 1.44)); 21 | 22 | padding-top: px2rem(6px); 23 | flex: 1; 24 | list-style: none; 25 | text-align: center; 26 | box-sizing: border-box; 27 | } 28 | } 29 | 30 | .nav-is-active { 31 | color: nth($colors, 14); 32 | position: relative; 33 | 34 | &::after { 35 | @include position--absolute(null, null, -1px, 50%); 36 | @include size(px2rem(140px), px2rem(4px)); 37 | 38 | transform: translateX(-50%); 39 | content: ""; 40 | display: block; 41 | background-color: nth($colors, 14); 42 | } 43 | } 44 | 45 | @include c(nav-bar1) { 46 | @include padding(null, px2rem(13px * 2), null, px2rem(13px * 2)); 47 | 48 | display: flex; 49 | align-items: center; 50 | list-style: none; 51 | 52 | @include e(item) { 53 | @include text--middle(px2rem(40px * 2)); 54 | 55 | flex: 1; 56 | text-align: center; 57 | box-sizing: border-box; 58 | 59 | @include m(is-active) { 60 | color: nth($colors, 3); 61 | border-bottom: 0.05333rem solid nth($colors, 14); 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/static/commons/components/article-card/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(article-card) { 4 | @include clearfix; 5 | 6 | width: 330px * 1.5 + 10px * 2; 7 | padding-bottom: 10px; 8 | display: block; 9 | box-sizing: border-box; 10 | border: 1px solid nth($colors, 10); 11 | 12 | &:first-child { 13 | float: left; 14 | margin-left: 30px; 15 | } 16 | 17 | &:last-child { 18 | float: right; 19 | margin-right: 30px; 20 | } 21 | 22 | img { 23 | @include size(330px * 1.5, 185px * 1.5); 24 | @include margin(10px, 10px, null, 10px); 25 | 26 | display: block; 27 | border-radius: 4px; 28 | } 29 | 30 | &:hover { 31 | background-color: nth($colors, 1); 32 | border: 1px solid nth($colors, 11); 33 | box-shadow: 0 0 10px rgba(nth($colors, 7), 0.2); 34 | } 35 | 36 | @include e(title, desc, time) { 37 | @include margin(null, 9px, null, 9px); 38 | } 39 | 40 | @include e(title) { 41 | @include text--middle(20px); 42 | @include text--overflow; 43 | 44 | text-align: center; 45 | font-size: nth($font-sizes, 3); 46 | color: nth($colors, 2); 47 | margin-top: 10px; 48 | 49 | &:hover { 50 | color: nth($colors, 8); 51 | } 52 | } 53 | 54 | @include e(desc) { 55 | height: 50px; 56 | font-size: nth($font-sizes, 2); 57 | color: nth($colors, 6); 58 | margin-top: 10px; 59 | } 60 | 61 | @include e(time) { 62 | @include text--middle(18px); 63 | 64 | font-size: nth($font-sizes, 2); 65 | color: nth($colors, 7); 66 | margin-top: 13px; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/static/commons/components/carousel/scripts.js: -------------------------------------------------------------------------------- 1 | $(() => { 2 | const $carouseImages = $('#carousel-images') 3 | const imagesTotal = $carouseImages.find('.js-carousel-image-item').length 4 | const images = Array.from({ length: imagesTotal }, (v, k) => k) 5 | 6 | const renderImages = () => { 7 | const $carouseImageItems = $carouseImages.find('.js-carousel-image-item') 8 | 9 | $carouseImageItems.removeClass('image-left image-middle image-right') 10 | 11 | images.forEach((item, index) => { 12 | $carouseImageItems.eq(item).addClass( 13 | 'image-' + 14 | (index === 0 15 | ? 'middle' 16 | : index === 1 17 | ? 'left' 18 | : 'right') 19 | ) 20 | }) 21 | } 22 | 23 | const renderNavIndexes = () => { 24 | const currentIndex = images.findIndex(index => index === 0) 25 | 26 | $('#carousel-nav > li').removeClass('is-active').eq(currentIndex).addClass('is-active') 27 | } 28 | 29 | function playPrev () { 30 | images.unshift(images[images.length - 1]) 31 | images.pop() 32 | renderImages() 33 | renderNavIndexes() 34 | } 35 | 36 | function playNext () { 37 | images.push(images[0]) 38 | images.shift() 39 | renderImages() 40 | renderNavIndexes() 41 | } 42 | 43 | let timer = setInterval(playNext, 3000) 44 | 45 | $('#carousel-prev').on('click', () => { 46 | clearInterval(timer) 47 | playPrev() 48 | timer = setInterval(playNext, 3000) 49 | }) 50 | 51 | $('#carousel-next').on('click', () => { 52 | clearInterval(timer) 53 | playNext() 54 | timer = setInterval(playNext, 3000) 55 | }) 56 | }) 57 | -------------------------------------------------------------------------------- /src/static-mobile/commons/styles/classes.scss: -------------------------------------------------------------------------------- 1 | @for $i from 1 to length($font-sizes) { 2 | .fs#{$i} { 3 | font-size: nth($font-sizes, $i); 4 | } 5 | } 6 | 7 | [data-dpr="2"] { 8 | @for $i from 1 to length($font-sizes) { 9 | .fs#{$i} { 10 | font-size: nth($font-sizes, $i) * 2; 11 | } 12 | } 13 | } 14 | 15 | [data-dpr="3"] { 16 | @for $i from 1 to length($font-sizes) { 17 | .fs#{$i} { 18 | font-size: nth($font-sizes, $i) * 3; 19 | } 20 | } 21 | } 22 | 23 | @for $i from 1 through length($colors) { 24 | .c#{$i} { 25 | color: nth($colors, $i); 26 | } 27 | } 28 | 29 | @for $i from 1 through length($colors) { 30 | .bd#{$i} { 31 | border: 1px solid nth($colors, $i); 32 | } 33 | } 34 | 35 | @for $i from 1 through length($colors) { 36 | .bg#{$i} { 37 | background-color: nth($colors, $i); 38 | } 39 | } 40 | 41 | .mt-16 { 42 | margin-top: px2rem(8px * 2); 43 | } 44 | 45 | .border-1px { 46 | position: relative; 47 | 48 | &::after { 49 | content: ''; 50 | position: absolute; 51 | top: 0; 52 | left: 0; 53 | -webkit-box-sizing: border-box; 54 | box-sizing: border-box; 55 | -webkit-transform-origin: left top; 56 | transform-origin: left top; 57 | width: 100%; 58 | height: 100%; 59 | } 60 | } 61 | 62 | @media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min-device-pixel-ratio: 2.0) { 63 | .border-1px::after { 64 | width: 200%; 65 | height: 200%; 66 | -webkit-transform: scale(0.5); 67 | transform: scale(0.5); 68 | } 69 | } 70 | 71 | @media only screen and (-webkit-min-device-pixel-ratio: 2.5), only screen and (min-device-pixel-ratio: 2.5) { 72 | .border-1px::after { 73 | width: 300%; 74 | height: 300%; 75 | -webkit-transform: scale(0.33333334); 76 | transform: scale(0.33333334); 77 | } 78 | } 79 | 80 | .mb { 81 | border-bottom: 1px solid nth($colors, 13); 82 | } 83 | 84 | .box { 85 | @include position--absolute(px2rem(50px * 2), 0, 0, 0); 86 | 87 | background-color: nth($colors, 9); 88 | overflow-x: hidden; 89 | overflow-y: auto; 90 | } 91 | -------------------------------------------------------------------------------- /src/mock/data/article-details.json: -------------------------------------------------------------------------------- 1 | { 2 | "categories": [ 3 | { 4 | "id": 19, 5 | "parent_id": null, 6 | "title": "分类六", 7 | "description": "", 8 | "order": null, 9 | "module": null, 10 | "created_at": "2018-07-26T06:44:06.000Z", 11 | "updated_at": "2018-07-26T06:44:06.000Z" 12 | }, 13 | { 14 | "id": 18, 15 | "parent_id": null, 16 | "title": "分类五", 17 | "description": "", 18 | "order": null, 19 | "module": null, 20 | "created_at": "2018-07-26T06:43:56.000Z", 21 | "updated_at": "2018-07-26T06:43:56.000Z" 22 | }, 23 | { 24 | "id": 17, 25 | "parent_id": null, 26 | "title": "分类四", 27 | "description": "", 28 | "order": null, 29 | "module": null, 30 | "created_at": "2018-07-26T06:43:34.000Z", 31 | "updated_at": "2018-07-26T06:43:34.000Z" 32 | }, 33 | { 34 | "id": 16, 35 | "parent_id": null, 36 | "title": "分类三", 37 | "description": "", 38 | "order": null, 39 | "module": null, 40 | "created_at": "2018-07-26T06:43:25.000Z", 41 | "updated_at": "2018-07-26T06:43:25.000Z" 42 | }, 43 | { 44 | "id": 15, 45 | "parent_id": null, 46 | "title": "分类二", 47 | "description": "", 48 | "order": null, 49 | "module": null, 50 | "created_at": "2018-07-24T15:14:03.000Z", 51 | "updated_at": "2018-07-26T06:43:11.000Z" 52 | }, 53 | { 54 | "id": 13, 55 | "parent_id": null, 56 | "title": "分类一", 57 | "description": "d", 58 | "order": null, 59 | "module": null, 60 | "created_at": "2018-07-24T09:34:06.000Z", 61 | "updated_at": "2018-07-26T06:43:04.000Z" 62 | } 63 | ], 64 | "details": { 65 | "id": 15, 66 | "category_id": 13, 67 | "author": null, 68 | "title": "防守打法", 69 | "subtitle": null, 70 | "description": null, 71 | "content": "范德萨范德萨", 72 | "picture": 149, 73 | "order": null, 74 | "is_home_ad": 1, 75 | "is_category_top": 1, 76 | "created_at": "2018-07-26T07:47:41.000Z", 77 | "updated_at": "2018-07-26T08:57:05.000Z" 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/static/commons/components/carousel/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/utils/index"; 2 | 3 | @include c(carousel) { 4 | zoom: 0.72; 5 | height: 648px + 10px; 6 | 7 | @include e(images) { 8 | @include position--absolute(10px, null, null, (1200px - 1152px) / 2); 9 | @include size(1152px, 648px); 10 | 11 | img { 12 | @include size(100%, 100%); 13 | 14 | display: block; 15 | cursor: pointer; 16 | } 17 | } 18 | 19 | @include e(images-item) { 20 | @include size(1152px, 648px); 21 | @include position--absolute(0); 22 | 23 | overflow: hidden; 24 | border-radius: 8px; 25 | box-shadow: 0 0 20px rgba(nth($colors, 7), 0.4); 26 | transition: all 0.3s ease; 27 | 28 | .overlay { 29 | @include position--absolute(0, null, null, 0); 30 | @include size(100%, 100%); 31 | 32 | background-color: nth($colors, 7); 33 | } 34 | 35 | @include m(image-left) { 36 | transform: translate3d(-383px, 0, 0) scale(0.83); 37 | transform-origin: 50% 50%; 38 | z-index: 0; 39 | 40 | .overlay { 41 | background-color: nth($colors, 2); 42 | opacity: 0.2; 43 | } 44 | } 45 | 46 | @include m(image-middle) { 47 | transform: translate3d(0, 0, 0) scale(1); 48 | transform-origin: 50% 50%; 49 | z-index: 1; 50 | 51 | .overlay { 52 | display: none; 53 | } 54 | } 55 | 56 | @include m(image-right) { 57 | transform: translate3d(383px, 0, 0) scale(0.83); 58 | transform-origin: 50% 50%; 59 | z-index: 0; 60 | 61 | .overlay { 62 | background-color: nth($colors, 2); 63 | opacity: 0.2; 64 | } 65 | } 66 | } 67 | 68 | @include e(title) { 69 | @include position--absolute(null, null, 80px, 0); 70 | @include text--overflow; 71 | 72 | width: 100%; 73 | line-height: 100%; 74 | text-indent: 80px; 75 | } 76 | 77 | @include e(prev, next) { 78 | @include position--absolute(285px); 79 | @include size(67px, 100px); 80 | 81 | cursor: pointer; 82 | } 83 | 84 | @include e(prev) { 85 | left: -60px; 86 | background-image: url("./images/prev.png"); 87 | } 88 | 89 | @include e(next) { 90 | right: -60px; 91 | background-image: url("./images/next.png"); 92 | } 93 | 94 | @include e(nav) { 95 | @include position--absolute(null, null, 38px, 0); 96 | 97 | text-align: center; 98 | width: 100%; 99 | line-height: 0; 100 | z-index: 2; 101 | } 102 | 103 | @include e(nav-item) { 104 | @include size(25px, 5px); 105 | @include margin(null, 3px, null, 3px); 106 | 107 | display: inline-block; 108 | background-color: nth($colors, 1); 109 | opacity: 0.8; 110 | 111 | @include m(is-active) { 112 | background-color: nth($colors, 21); 113 | } 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /src/mock/data/articles.json: -------------------------------------------------------------------------------- 1 | { 2 | "category": { 3 | "id": 19, 4 | "parent_id": null, 5 | "title": "分类六", 6 | "description": "", 7 | "order": null, 8 | "module": null, 9 | "created_at": "2018-07-26T06:44:06.000Z", 10 | "updated_at": "2018-07-26T06:44:06.000Z" 11 | }, 12 | "categories": [ 13 | { 14 | "id": 19, 15 | "parent_id": null, 16 | "title": "分类六", 17 | "description": "", 18 | "order": null, 19 | "module": null, 20 | "created_at": "2018-07-26T06:44:06.000Z", 21 | "updated_at": "2018-07-26T06:44:06.000Z" 22 | }, 23 | { 24 | "id": 18, 25 | "parent_id": null, 26 | "title": "分类五", 27 | "description": "", 28 | "order": null, 29 | "module": null, 30 | "created_at": "2018-07-26T06:43:56.000Z", 31 | "updated_at": "2018-07-26T06:43:56.000Z" 32 | }, 33 | { 34 | "id": 17, 35 | "parent_id": null, 36 | "title": "分类四", 37 | "description": "", 38 | "order": null, 39 | "module": null, 40 | "created_at": "2018-07-26T06:43:34.000Z", 41 | "updated_at": "2018-07-26T06:43:34.000Z" 42 | }, 43 | { 44 | "id": 16, 45 | "parent_id": null, 46 | "title": "分类三", 47 | "description": "", 48 | "order": null, 49 | "module": null, 50 | "created_at": "2018-07-26T06:43:25.000Z", 51 | "updated_at": "2018-07-26T06:43:25.000Z" 52 | }, 53 | { 54 | "id": 15, 55 | "parent_id": null, 56 | "title": "分类二", 57 | "description": "", 58 | "order": null, 59 | "module": null, 60 | "created_at": "2018-07-24T15:14:03.000Z", 61 | "updated_at": "2018-07-26T06:43:11.000Z" 62 | }, 63 | { 64 | "id": 13, 65 | "parent_id": null, 66 | "title": "分类一", 67 | "description": "d", 68 | "order": null, 69 | "module": null, 70 | "created_at": "2018-07-24T09:34:06.000Z", 71 | "updated_at": "2018-07-26T06:43:04.000Z" 72 | } 73 | ], 74 | "count": 12, 75 | "page": 1, 76 | "items": [ 77 | { 78 | "id": 15, 79 | "category_id": 13, 80 | "author": null, 81 | "title": "防守打法", 82 | "subtitle": null, 83 | "description": null, 84 | "content": "范德萨范德萨", 85 | "picture": 149, 86 | "order": null, 87 | "is_home_ad": 1, 88 | "is_category_top": 1, 89 | "created_at": "2018-07-26T07:47:41.000Z", 90 | "updated_at": "2018-07-26T08:57:05.000Z" 91 | }, 92 | { 93 | "id": 14, 94 | "category_id": 19, 95 | "author": null, 96 | "title": "是的范德萨", 97 | "subtitle": null, 98 | "description": null, 99 | "content": "第三方的手", 100 | "picture": 148, 101 | "order": null, 102 | "is_home_ad": 1, 103 | "is_category_top": 1, 104 | "created_at": "2018-07-26T07:23:07.000Z", 105 | "updated_at": "2018-07-26T10:54:17.000Z" 106 | } 107 | ] 108 | } 109 | -------------------------------------------------------------------------------- /src/views-mobile/commons/snippets/head.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= $.head.title %> 9 | 10 | 11 | 14 | 15 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/mock/data/home.json: -------------------------------------------------------------------------------- 1 | { 2 | "homeAds": [ 3 | { 4 | "id": 15, 5 | "category_id": 13, 6 | "author": null, 7 | "title": "防守打法", 8 | "subtitle": null, 9 | "description": null, 10 | "content": "范德萨范德萨", 11 | "picture": 1, 12 | "order": null, 13 | "is_home_ad": 1, 14 | "is_category_top": 0, 15 | "created_at": "2018-07-26T07:47:41.000Z", 16 | "updated_at": "2018-07-26T07:48:54.000Z" 17 | }, 18 | { 19 | "id": 13, 20 | "category_id": 18, 21 | "author": null, 22 | "title": "多福多寿", 23 | "subtitle": null, 24 | "description": null, 25 | "content": "对方的说法", 26 | "picture": 2, 27 | "order": null, 28 | "is_home_ad": 1, 29 | "is_category_top": 0, 30 | "created_at": "2018-07-26T07:22:57.000Z", 31 | "updated_at": "2018-07-26T07:48:21.000Z" 32 | }, 33 | { 34 | "id": 11, 35 | "category_id": 16, 36 | "author": null, 37 | "title": "第三方的手", 38 | "subtitle": null, 39 | "description": null, 40 | "content": "第三方的手", 41 | "picture": 3, 42 | "order": null, 43 | "is_home_ad": 1, 44 | "is_category_top": 1, 45 | "created_at": "2018-07-26T07:22:29.000Z", 46 | "updated_at": "2018-07-26T07:48:28.000Z" 47 | }, 48 | { 49 | "id": 11, 50 | "category_id": 16, 51 | "author": null, 52 | "title": "第三方的手", 53 | "subtitle": null, 54 | "description": null, 55 | "content": "第三方的手", 56 | "picture": 145, 57 | "order": null, 58 | "is_home_ad": 1, 59 | "is_category_top": 1, 60 | "created_at": "2018-07-26T07:22:29.000Z", 61 | "updated_at": "2018-07-26T07:48:28.000Z" 62 | } 63 | ], 64 | "categoryTops": [ 65 | { 66 | "id": 15, 67 | "category_id": 13, 68 | "author": null, 69 | "title": "防守打法", 70 | "subtitle": null, 71 | "description": null, 72 | "content": "范德萨范德萨", 73 | "picture": 149, 74 | "order": null, 75 | "is_home_ad": 1, 76 | "is_category_top": 1, 77 | "created_at": "2018-07-26T07:47:41.000Z", 78 | "updated_at": "2018-07-26T08:57:05.000Z" 79 | }, 80 | { 81 | "id": 14, 82 | "category_id": 19, 83 | "author": null, 84 | "title": "是的范德萨", 85 | "subtitle": null, 86 | "description": null, 87 | "content": "第三方的手", 88 | "picture": 148, 89 | "order": null, 90 | "is_home_ad": 0, 91 | "is_category_top": 1, 92 | "created_at": "2018-07-26T07:23:07.000Z", 93 | "updated_at": "2018-07-26T07:45:09.000Z" 94 | }, 95 | { 96 | "id": 13, 97 | "category_id": 18, 98 | "author": null, 99 | "title": "多福多寿", 100 | "subtitle": null, 101 | "description": null, 102 | "content": "对方的说法", 103 | "picture": 147, 104 | "order": null, 105 | "is_home_ad": 1, 106 | "is_category_top": 1, 107 | "created_at": "2018-07-26T07:22:57.000Z", 108 | "updated_at": "2018-07-26T08:57:02.000Z" 109 | }, 110 | { 111 | "id": 12, 112 | "category_id": 17, 113 | "author": null, 114 | "title": "第三方的手", 115 | "subtitle": null, 116 | "description": null, 117 | "content": "多福多寿", 118 | "picture": 146, 119 | "order": null, 120 | "is_home_ad": 0, 121 | "is_category_top": 1, 122 | "created_at": "2018-07-26T07:22:46.000Z", 123 | "updated_at": "2018-07-26T08:56:59.000Z" 124 | }, 125 | { 126 | "id": 11, 127 | "category_id": 16, 128 | "author": null, 129 | "title": "第三方的手", 130 | "subtitle": null, 131 | "description": null, 132 | "content": "第三方的手", 133 | "picture": 145, 134 | "order": null, 135 | "is_home_ad": 0, 136 | "is_category_top": 1, 137 | "created_at": "2018-07-26T07:22:29.000Z", 138 | "updated_at": "2018-07-26T08:56:41.000Z" 139 | }, 140 | { 141 | "id": 10, 142 | "category_id": 15, 143 | "author": null, 144 | "title": "水电费第三方", 145 | "subtitle": null, 146 | "description": null, 147 | "content": "范德萨范德萨", 148 | "picture": 144, 149 | "order": null, 150 | "is_home_ad": 0, 151 | "is_category_top": 1, 152 | "created_at": "2018-07-26T07:22:17.000Z", 153 | "updated_at": "2018-07-26T08:56:43.000Z" 154 | } 155 | ] 156 | } 157 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 简介 2 | 基于 Webpack 开发、调试和构建多页面站点（普通 Web 站点）的前端工程化方案，同时适用于 PC 端和移动端。 3 | 4 | ## 特性 5 | - 前端工程化 6 | - 集成 PostCSS、Sass 7 | - 支持 EJS 模板引擎 8 | - 支持响应式 9 | - 支持模块化、组件化 10 | - 支持开发、调试和构建 11 | - 支持 JS、CSS 代码规范性校验 12 | 13 | ## 兼容 14 | - PC 端：IE8+（含 IE8）； 15 | - 移动端：主流浏览器； 16 | 17 | ## 项目地址 18 | https://github.com/zhaotoday/webpack-multi-page 19 | 20 | ## 参考 21 | - [JavaScript 代码规范](https://github.com/feross/standard/blob/master/docs/README-zhcn.md) 22 | - [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard) 23 | - [sass-utils](https://github.com/zhaotoday/sass-utils) 24 | - [compass](http://compass-style.org/) 25 | - [include-media](https://github.com/eduardoboucas/include-media) 26 | - [react 项目的一个ie8兼容性问题](http://www.aliued.com/?p=3240) 27 | - [PostCSS](https://github.com/postcss/postcss/blob/master/README.cn.md) 28 | - [EJS 模板引擎](https://ejs.bootcss.com) 29 | - [EJS 模板语言使用](https://www.w3cschool.cn/weflow/weflow-ejs.html) 30 | 31 | ## Webpack 32 | - [Webpack 中文文档](https://www.webpackjs.com/concepts/) 33 | - [Webpack 2.2 中文文档](http://www.css88.com/doc/webpack2/) 34 | - [webpack报错no postcss config...](https://www.cnblogs.com/wang715100018066/p/7049981.html) 35 | - [webpack-dev-server 示例](https://github.com/webpack/webpack-dev-server/blob/master/examples/api/simple/server.js) 36 | 37 | ## 命令 38 | ```bash 39 | # 安装依赖（在根目录、build、build-ie8 目录下执行） 40 | $ npm install 41 | 42 | # 开发、调试（在 build 目录下执行） 43 | $ npm run dev 44 | 45 | # 构建（在 build 目录下执行） 46 | $ npm run build 47 | 48 | # 如果需要兼容 IE8，将 src 复制到 build-ie8/website 下，并构建（在 build-ie8 目录下执行） 49 | $ npm run build 50 | 51 | # 预览 52 | $ open http://localhost:8083/webpack-dev-server/{my-view}.html 53 | 54 | # fix JS 代码 55 | $ npm run eslintfix 56 | 57 | # 校验 JS 代码 58 | $ npm run eslint 59 | 60 | # 校验 CSS 代码 61 | $ npm run stylelint 62 | ``` 63 | 64 | ## 添加 polyfill 65 | 使用 ES6 语法开发时，可按需引入 polyfill，提高浏览器兼容性。 66 | ```bash 67 | # 安装 core-js 68 | $ npm install --save core-js 69 | ``` 70 | polyfill 在 src/static/commons/scripts/utils/polyfills.js 中引入： 71 | ```js 72 | import 'core-js/es6/promise' 73 | ``` 74 | 75 | ## CSS 规范 76 | 请参照 BEM 规范，详情见：[https://github.com/zhaotoday/bem](https://github.com/zhaotoday/bem)，下面是一个例子： 77 | HTML 代码： 78 | ```html 79 | 84 | ``` 85 | Sass 代码： 86 | ```scss 87 | .nav { 88 | &__item { 89 | &--normal { 90 | } 91 | &--active { 92 | } 93 | &--hover { 94 | } 95 | } 96 | } 97 | ``` 98 | 基于 BEM mixin 的 Sass 代码： 99 | ```scss 100 | @include b(nav) { 101 | @include e(item) { 102 | @include m(normal) { 103 | } 104 | @include m(active) { 105 | } 106 | @include m(hover) { 107 | } 108 | } 109 | } 110 | ``` 111 | 112 | ## 响应式 113 | ```scss 114 | @import "~include-media/dist/_include-media.scss"; 115 | 116 | $breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px); 117 | 118 | .selector { 119 | @include media("<=tablet") { 120 | background-color: red; 121 | } 122 | 123 | @include media(">tablet", "=desktop") { 128 | background-color: green; 129 | } 130 | } 131 | ``` 132 | 133 | ## IE8 兼容 134 | - 添加 es3ify-webpack-plugin，解决 es3 语法兼容问题： 135 | ```bash 136 | $ npm install --save-dev es3ify-webpack-plugin 137 | ``` 138 | ```js 139 | const es3ifyPlugin = require('es3ify-webpack-plugin'); 140 | 141 | // 在 Webpack plugins 配置中添加 142 | const config = { 143 | plugins: [ 144 | new es3ifyPlugin() 145 | ] 146 | } 147 | ``` 148 | - 添加 es5-shim 和 es5-sham，解决 es3 环境下 es5 API 缺失问题： 149 | ```html 150 | 154 | ``` 155 | - 引入 selectivizr.js，使 IE8 支持 CSS3 伪类以及属性选择器： 156 | ```html 157 | 161 | ``` 162 | - 尽量减少使用 CSS3，并且不使用 IE8 不能模拟的 ECMAScript 5 特性； 163 | - 请用 build 的构建方案来开发调试，构建时，将 src 复制到 build-ie8/website 下，并在 build-ie8 下执行 npm run build； 164 | 165 | ## 目录结构 166 | ``` 167 | |- build // Webpack 配置 168 | |- src // 源码 169 | | |- static // 静态资源 170 | | |- commons // 公用脚本和样式，构建成 commons.js 和 commons.css 171 | | |- components // 组件集合 172 | | |- my-component // my-component 组件 173 | | |- images // 页面引用图片 174 | | |- styles // 样式 175 | | |- index.scss 176 | | |- images // CSS 引用图片 177 | | |- scripts // 脚本 178 | | |- index.js // 需要引入 components 中的所有样式文件和 styles/index.scss 179 | | |- utils 180 | | |- styles // 样式 181 | | |- index.scss 182 | | |- reset.scss // 重置 183 | | |- fonts.scss // 字体 184 | | |- classes // 样式类 185 | | |- images // CSS 引用图片 186 | | |- my-view // my-view 页面 187 | | |- images // 页面引用图片 188 | | |- scripts // 脚本 189 | | |- index.js 190 | | |- utils 191 | | |- styles // 样式 192 | | |- index.scss 193 | | |- images // CSS 引用图片 194 | | |- views // 页面 195 | | |- commons // 公用组件、代码块等 196 | | |- components // 组件集合 197 | | |- my-component.ejs // my-component 组件 198 | | |- snippets // 代码块，在各页面的 html 模板中引入 199 | | |- head.ejs // 头部，也就是 标签 200 | | |- foot.ejs // 底部，如：在页面底部引入的公用 JS、统计代码等 201 | | |- my-view.ejs // my-view 页面 202 | | |- mock // mock 数据 203 | | |- data // 配置数据 204 | | |- global.json // 全局配置数据 205 | | |- my-view.json // my-view 页面配置数据 206 | | |- assets // 公用静态资源 207 | | |- scripts // 脚本 208 | | |- libs // JS 库 209 | | |- utils // JS 工具集合 210 | | |- styles // 样式 211 | | |- utils // Sass 工具集合 212 | | |- functions.scss // 函数 213 | | |- mixins.scss // 混合 214 | | |- variables.scss // 变量 215 | ``` 216 | -------------------------------------------------------------------------------- /src/mock/data/categories.json: -------------------------------------------------------------------------------- 1 | { 2 | "homeAds": [ 3 | { 4 | "id": 15, 5 | "category_id": 13, 6 | "author": null, 7 | "title": "防守打法", 8 | "subtitle": null, 9 | "description": null, 10 | "content": "范德萨范德萨", 11 | "picture": 1, 12 | "order": null, 13 | "is_home_ad": 1, 14 | "is_category_top": 0, 15 | "created_at": "2018-07-26T07:47:41.000Z", 16 | "updated_at": "2018-07-26T07:48:54.000Z" 17 | }, 18 | { 19 | "id": 13, 20 | "category_id": 18, 21 | "author": null, 22 | "title": "多福多寿", 23 | "subtitle": null, 24 | "description": null, 25 | "content": "对方的说法", 26 | "picture": 2, 27 | "order": null, 28 | "is_home_ad": 1, 29 | "is_category_top": 0, 30 | "created_at": "2018-07-26T07:22:57.000Z", 31 | "updated_at": "2018-07-26T07:48:21.000Z" 32 | }, 33 | { 34 | "id": 11, 35 | "category_id": 16, 36 | "author": null, 37 | "title": "第三方的手", 38 | "subtitle": null, 39 | "description": null, 40 | "content": "第三方的手", 41 | "picture": 3, 42 | "order": null, 43 | "is_home_ad": 1, 44 | "is_category_top": 1, 45 | "created_at": "2018-07-26T07:22:29.000Z", 46 | "updated_at": "2018-07-26T07:48:28.000Z" 47 | }, 48 | { 49 | "id": 11, 50 | "category_id": 16, 51 | "author": null, 52 | "title": "第三方的手", 53 | "subtitle": null, 54 | "description": null, 55 | "content": "第三方的手", 56 | "picture": 145, 57 | "order": null, 58 | "is_home_ad": 1, 59 | "is_category_top": 1, 60 | "created_at": "2018-07-26T07:22:29.000Z", 61 | "updated_at": "2018-07-26T07:48:28.000Z" 62 | } 63 | ], 64 | "consts": { 65 | "BASE_URL": "https://www.rjwb.cn", 66 | "CDN": "http://localhost:8083", 67 | "PAGE_SIZE": 5 68 | }, 69 | "settings": { 70 | "id": 1, 71 | "title": "重阳养老院", 72 | "keywords": "重阳养老院", 73 | "description": "重阳养老院", 74 | "telephone": "13705057800", 75 | "cellphone": "400-918-9833", 76 | "email": null, 77 | "copyright": "6", 78 | "icp": "闽ICP备17019681号-1", 79 | "address": "福建省福州市闽侯县荆溪镇荔园度假村内东艺楼", 80 | "postcode": null, 81 | "oa_qrcode": 5, 82 | "app_qrcode": 4, 83 | "created_at": null, 84 | "updated_at": "2018-07-28T03:58:12.000Z" 85 | }, 86 | "head": { 87 | "title": "重阳养老院", 88 | "keywords": "重阳养老院", 89 | "description": "重阳养老院" 90 | }, 91 | "categories": [ 92 | { 93 | "id": 6, 94 | "parent_id": null, 95 | "title": "重阳画映", 96 | "description": "11", 97 | "order": 3, 98 | "module": null, 99 | "created_at": "2018-07-27T16:59:29.000Z", 100 | "updated_at": "2018-07-28T03:43:40.000Z" 101 | }, 102 | { 103 | "id": 5, 104 | "parent_id": null, 105 | "title": "遇见重阳", 106 | "description": "", 107 | "order": 2, 108 | "module": null, 109 | "created_at": "2018-07-27T16:59:20.000Z", 110 | "updated_at": "2018-07-28T03:44:28.000Z" 111 | }, 112 | { 113 | "id": 4, 114 | "parent_id": null, 115 | "title": "重阳医养", 116 | "description": "", 117 | "order": 6, 118 | "module": null, 119 | "created_at": "2018-07-27T16:59:01.000Z", 120 | "updated_at": "2018-07-28T03:49:58.000Z" 121 | }, 122 | { 123 | "id": 3, 124 | "parent_id": null, 125 | "title": "重阳画映", 126 | "description": "", 127 | "order": 5, 128 | "module": null, 129 | "created_at": "2018-07-27T16:58:42.000Z", 130 | "updated_at": "2018-07-28T03:49:52.000Z" 131 | }, 132 | { 133 | "id": 2, 134 | "parent_id": null, 135 | "title": "重阳史乘", 136 | "description": "", 137 | "order": 4, 138 | "module": null, 139 | "created_at": "2018-07-27T16:58:01.000Z", 140 | "updated_at": "2018-07-28T03:49:46.000Z" 141 | }, 142 | { 143 | "id": 1, 144 | "parent_id": null, 145 | "title": "重阳头条", 146 | "description": "", 147 | "order": 1, 148 | "module": null, 149 | "created_at": "2018-07-27T16:57:39.000Z", 150 | "updated_at": "2018-07-28T03:49:40.000Z" 151 | } 152 | ], 153 | "categoryTops": [ 154 | { 155 | "id": 6, 156 | "category_id": 1, 157 | "author": null, 158 | "title": "合肥市企业退休人员 新增养老金发放到位", 159 | "subtitle": null, 160 | "description": null, 161 | "content": "  近日，安徽省人力资源和社会保障厅下发了《关于2018年调整退休人员基本养老金的通知》（皖人社秘〔2018〕234号），决定从2018年1月1日起，调整我省2017年12月31日前已按规定办理退休手续的退休人员基本养老金水平。
\n
\n  企业退休人员基本养老金具体调整办法如下：（一）定额部分。每人每月增加40元。（二）挂钩部分。分为两部分：第一部分，按本人缴费年限（含视同缴费年限，不含特殊工种折算工龄；缴费年限尾数不足1年的按1年计算）每满1年，每人每月增加2元；第二部分，按本人2017年12月份基本养老金水平增加，每人每月增加本人养老金的1%（见角进元）。（三）倾斜部分(即高龄补贴)。对符合以下条件的高龄企业退休人员，在定额增加和挂钩增加的基础上再另行增加：年满70-74周岁、75-79周岁、80-84周岁和85周岁以上（截至2017年12月31日）的企业退休人员，每人每月分别增加140元、180元、260元、330元，以前调整基本养老金时已经享受过高龄倾斜的人员，达不到上述标准的补齐到上述标准。
\n
\n  2018年养老金调整通知下发后，合肥市人社部门迅速制定方案、做好政策解读、精心组织实施，日前,企业退休人员新增养老金已全部发放到位。全市涉及本次养老金调整的企业退休人员近24万人次，平均调整增加132.23元，其中涉及高龄倾斜人员近3万人。姚莉
", 162 | "picture": 8, 163 | "order": null, 164 | "is_home_ad": 0, 165 | "is_category_top": 1, 166 | "created_at": "2018-07-27T17:34:50.000Z", 167 | "updated_at": "2018-07-27T17:36:32.000Z" 168 | }, 169 | { 170 | "id": 5, 171 | "category_id": 2, 172 | "author": null, 173 | "title": "成都调整基本养老金发放到位 来算算你的养老金增加多少钱", 174 | "subtitle": null, 175 | "description": null, 176 | "content": "  近日，四川省公布了2018年调整退休人员基本养老金方案，为2017年底前已按规定办理退休手续并按月领取基本养老金的企业和机关事业单位退休人员提高基本养老金水平，总体调整水平为2017年退休人员月人均基本养老金的5%左右。
\n
\n  记者从成都市人社局获悉，我市调整退休人员基本养老金已于昨日发放到位。那么，每位退休人员能够领取多少养老金呢？市人社局进行了举例介绍。
\n
\n  >调整
\n
\n  定额调整、挂钩调整、倾斜调整相结合
\n
\n  按照四川省公布的2018年调整退休人员基本养老金方案，此次调整继续统一采取定额调整、挂钩调整与适当倾斜相结合的调整办法。
\n
\n  定额调整为每人月基本养老金增加45元。挂钩调整办法分为3类。
\n
\n  第一类，企业退休人员。以本人2017年12月经社保经办机构核定的基本养老金为基数增加1. 2%，缴费年限15年及以下的每满一年增加1元，缴费年限超过15年的部分每满一年增加2.5元。缴费年限不足1年的部分按1年计算。
\n
\n  第二类，机关事业单位2014年10月1日以后退休的人员。按照企业退休人员挂钩调整办法调整。
\n
\n  第三类，机关事业单位2014年9月30日及以前退休的人员，以本人2017年12月的基本养老金为基数增加2.7%。
\n
\n  而根据适度倾斜办法，高龄退休人员满70岁且不满80岁的人员，增加30元；满80岁且不满90岁的人员，增加60元；满90岁及以上的人员，增加100元。
\n
\n  >举例
\n
\n  来算算你的养老金增加了多少钱
\n
\n  具体怎么计算养老金增加了多少钱呢？市人社局进行了举例。
\n
\n  举例1：企业退休人员王叔叔，65岁，缴费年限15年，2017年12月基本养老金是A元。那么王叔叔本次养老金调整额包括定额调整45元，再加上挂钩调整部分“1.2%×A元+15年×1元/年”。也就是说，王叔叔调整后增加的养老金应为（60+1.2%×A）元。假设A是2000元，那么王叔叔调整后增加的养老金应为84元。
", 177 | "picture": 7, 178 | "order": null, 179 | "is_home_ad": 0, 180 | "is_category_top": 1, 181 | "created_at": "2018-07-27T17:34:41.000Z", 182 | "updated_at": "2018-07-28T02:20:21.000Z" 183 | }, 184 | { 185 | "id": 4, 186 | "category_id": 3, 187 | "author": null, 188 | "title": "制约税延型个人养老保险的不是个税政策，而是我们的收入！", 189 | "subtitle": null, 190 | "description": null, 191 | "content": "《第一财经日报》刊文分析养老金第三支柱遇到的问题，一些专家强调，此番新个税起征点将在全国人大通过后实施，届时缴纳个税的人数将进一步减少，这也意味着，有资格享受到税收递延优惠的人群也将同步减少。这成为了限制税延型养老保险规模扩大的主要因素。
\n
\n目前，我国正在努力建设多层次的养老保险制度，所谓多层次，也叫做多支柱，即第一支柱为“社会统筹+个人账户”的基本养老金，第二支柱为企业年金和职业年金，第三支柱为自愿性个人养老储蓄。三支柱中，第一和第二支柱是税前列支，在未来支取的时候也是免税的。第三支柱，目前刚刚开始试点，所得税方面的政策也是递延缴纳，也就是在购买保险的时候是免税的，保险机构运营时也是免税的，只有在未来退休支取的时候，按照那时的收入和个税政策纳税。所以，这项政策被叫做税延型个人养老金产品。
\n
\n养老保险的这三个支柱目前严重跛足。第二支柱仅仅在机关事业单位和垄断国企实行，覆盖的人数非常少，近些年基本上没有增加。第三支柱即税延型个人养老保险，今年才开始在上海市、福建省（含厦门市）和苏州工业园区进行试点。试点期为一年。目前还没有什么有价值的试点结论。
\n
\n虽然不少人对于税延型个人养老保险寄予厚望，甚至有人乐观地认为一旦试点结束并在全国全面推开，就会带来千亿量级的资金。而目前正在征求意见中的个税修法，则被认为打破了这样的美梦。因为新个税一旦实行，缴纳个税的人数要大大减少，享受个税递延优惠政策的人数大为减少，从而第三支柱也要大受影响，千亿元的商业养老保险要落空。
\n
\n笔者早就指出，希图靠个税递延型商业养老保险撑起养老保险第三支柱，注定是一场黄粱美梦。个税递延商业养老保险模式对于高收入者来说有一定的节税力度，但是高收入者有很强的能力去规划和安排未来的养老计划，即使没有国家的税收优惠政策，他们的未来养老也不应该是国家公共政策重点关照的对象。个税递延商业养老保险模式对于中等收入者来说，有一定节税效果，但吸引力有限，因为非常复杂繁琐，未来的个税政策也是不确定，无法预料，节税多少无从判断。而对于不缴纳个税的低收入者来说，个税递延商业养老保险模式没有什么意义。而中低收入者的未来养老安排，恰恰是政府应该大力解决的公共事务。
\n
\n事实上，制约第三支柱的根本原因，并不是什么个税政策，而是人们的收入。截至2017年底，我国参加基本养老保险的人数达到9.15亿人。而今年年初国家统计局的一项统计显示，我国年收入2.5万~25万元人民币（即月平均收入2083－20830元）的所谓中等收入人数，全国大概是３亿人。这些中等收入人群加上年收入25万元以上的富人，总数一定不会超过４亿人吧？这些数字可以证明，中国参加社会养老保险的9.15亿人里面，月收入超过2083元的，远远不到一半，甚至可能仅仅是三分之一。近三分之二的参保者月收入低于2000元。
\n
\n这些月收入不到2000元的参保者，当然每月都要负担一定比例的保险费用。对于这些低收入人群来说，各项社会保险费用是一项比较沉重的负担。能够想象，他们有可能享受一份企业年金吗？不可能，因为他们要么没有企业，如果有，效益肯定会非常低下，除了最低限度的社会保险外，他们和他们的雇主，不可能再出资建立企业年金。所以，他们不可能有第二支柱。那么，他们有可能参加第三支柱吗？基本不可能，如此低廉的收入，维持基本生活尚有困难，缴纳强制性的社会养老保险已经是很大的负担，参与商业保险当然是没有余力了。所以，第三支柱也是不可想象的。事实上，不但月收入2000元以下的群体不可能有第二支柱和第三支柱的奢望，就是月收入5000元以下的，也基本上与第二支柱和第三支柱无缘，道理与前面的相同，关键在于企业和个人都没有余力做这些事。月收入5000元以上的人群（也就是新个税覆盖的人群），在中国可能只是区区数千万人，假设这些人全部建立第二支柱，第三支柱，相对于全国9.15亿人的养老保险参保人数，区区几千万的覆盖面实在太小了。更何况，多数月收入达到5000元的人，仍然没有什么企业年金或职业年金。
", 192 | "picture": 6, 193 | "order": null, 194 | "is_home_ad": 0, 195 | "is_category_top": 1, 196 | "created_at": "2018-07-27T17:34:31.000Z", 197 | "updated_at": "2018-07-28T02:21:09.000Z" 198 | }, 199 | { 200 | "id": 3, 201 | "category_id": 4, 202 | "author": null, 203 | "title": "中央调剂基金或按季度下拨 养老金三支柱齐发力", 204 | "subtitle": null, 205 | "description": null, 206 | "content": "  “这半年，养老金三支柱都有不同程度的变化。第一支柱，自十九大报告明确表明养老保险要尽快实现全国统筹之后，今年正式推出了中央调剂金制度，这是一个最大的变化。同时，在确立了中央调剂金制度后，也确定了各个省实现养老金统收统支的最后时间为2020年底，这是一个很重要的亮点，只有全省实现统收统支之后才能过渡到全国统收统支，从而真正过渡到全国统筹；第二支柱方面，那就是职业年金管理办法的出台，职业年金的开户缴费和强制推行对于企业年金有很好的示范作用；第三支柱的变化主要就是从无到有，今年3月份的养老目标基金和4月份的个税递延的商业养老保险相关政策的落实，对建设养老金第三支柱都有很大的推动。”武汉科技大学金融证券研究所所长、中国养老金融50人论坛核心成员董登新接受《华夏时报》记者采访时表示，第三支柱虽然只是政策方面的落地、产品正在开发之中，但是，依然寄希望于与第二、第三支柱能够融合发展、相互促进，从而把我国的私人养老金做大做强。
\n
\n  7月23日，人社部新闻发言人卢爱红在2018年第二季度新闻发布会上表示，下一步将继续健全社会保障制度，并且正在会同有关部门制定企业职工基本养老保险基金中央调剂具体实施办法，尽快启动资金缴拨工作。同时，强化基金投资和监督管理，分类推进基本养老保险基金投资运营，加快推进城乡居民养老保险基金和职业年金基金投资运营工作。
\n
\n  三支柱齐发力
\n
\n  根据国家统计局的统计资料，截至2017年底，我国60岁及以上老年人口有2.41亿人，占总人口的17.3%，从而成为世界上唯一一个老年人口过两亿的国家。更为惊人的是，预计到2053年，我国老年人口将达到峰值4.87亿，届时全国老年人口占比将超过三分之一。
\n
\n  而与这样的人口比例相悖的是，我国整个养老金体系仅占GDP规模的10.6%，远不及欧洲、澳大利亚这些高福利国家，与美国的120%和日本、韩国、中国香港的30%-40%相比，也薄弱不少。面对快速增加的老年人口，我国当前的养老金体系面临着极大的挑战，改革势在必行。
", 207 | "picture": 3, 208 | "order": null, 209 | "is_home_ad": 1, 210 | "is_category_top": 1, 211 | "created_at": "2018-07-27T17:11:34.000Z", 212 | "updated_at": "2018-07-28T02:23:30.000Z" 213 | }, 214 | { 215 | "id": 2, 216 | "category_id": 5, 217 | "author": null, 218 | "title": "本报推出《养老在杭州》栏目 和您聊聊杭城养老机构那些事", 219 | "subtitle": null, 220 | "description": null, 221 | "content": "你养我长大，我陪你变老，在中国人的传统观念里，养儿防老，照料父母的晚年生活，是子女义不容辞的责任。然而，现代社会，工作节奏越来越快，生活压力越来越大，尤其是对于独生子女来说，照顾父母，有时候成了一件心有余而力不足的事。于是，也有越来越多的老年人选择去养老院养老。
\n
\n此前，网络综艺节目《奇葩说》抛出一个伤感的话题：“当父母老了，提出要和老伙伴一起去住养老院，你会支持吗？”本周，《乐活老年》周刊也就这个话题进行了一次微信问卷调查，总共有300位网友参加了这次小调查，对于是否支持父母去养老院这个问题，24%的受访者投了反对票，39%的网友投了赞成票，另外还有37%的受访者表示，由父母自己来选择。
\n
\n在现实中，出于什么样的考虑，老人及其子女会选择养老院？在选择养老院时，他们最看重什么？记者也进行了调查。
\n
\n有两个儿子但不愿成为他们的负担 从五年前开始了解养老院信息
\n
\n家住景苑社区的许连冲老人今年76岁，老伴70岁，两人身体硬朗，这几年一直在社区做志愿者，服务周边的居民。两个儿子都已四十多岁了，成家立业，生活稳定无忧，对两位老人也很孝顺。但许大伯五年前就已经开始关注周边养老院的信息。在周围人眼里，许大伯夫妇不必去养老院养老，但是他们却不这样认为。
\n
\n每个月，许家都有个固定的家庭聚会，两个儿子的岳父岳母也会参加。在聚会上，他们喜欢闲聊，近年来关于养老的话题被频频提及。许大伯夫妇明确表态，不会去任何一个儿子身边养老，养老院会是他们不二选择。
\n
\n许大伯算了一笔账，他和老伴儿退休金加起来8000元左右，他们会选择一家每月花费在5000左右的养老院，余下的钱够足够夫妻二人零花，应付小病。
\n
\n“两个儿媳都是独生女，现在儿子的家庭都面对上有老下有小的状况，我们老了，不能再帮他们什么忙，却不能成为他们的负担。”许大伯说，“最重要的是，他们不可能时刻陪伴在我们身边，老了怕孤独。”
\n
\n许大伯认为，现在养老院的条件和以前的情况不一样，硬件设施完善，而且一日三餐，生活起居都有照料，一旦身体出现状况，无论是护工还是周边的人，都会第一时间发现，对老人是个很好的保障。而有繁重生活工作压力的子女，是不能做到时刻陪伴的。
\n
\n“我们身边的这些老伙伴经常讨论去哪个养老院比较好，最大的期待是我们可以去同一家养老院，这样就不孤单了。”许大伯笑呵呵地说道。
\n
\n年近60要照顾三位八九十岁的老人 常常感觉心有余而力不足
\n
\n采荷街道人民社区的刘绮雯今年56岁，曾在一家大企业做财务。经验丰富、做事细心，退休一年来，陆续接到几家公司的返聘邀请，但她都拒绝了。“我的父母都80多岁了，公公也年过90岁了，虽然身体都没有生什么大病，但小毛病不断。” 刘绮雯说，“两个弟弟都很忙，爱人明年退休，总要有一个子女可以随叫随到，才能让人安心。”
\n
\n与许连冲不同的是，刘绮雯的父母非常排斥去养老院养老，曾坚决对子女表态，无论如何都不会去养老院生活。现在，陪三个老人去医院、下雨天送餐，都落在了刘绮雯一个人头上。每周她都会定期到三位老人的住处走走转转，每天至少一个电话问候。
", 222 | "picture": 2, 223 | "order": null, 224 | "is_home_ad": 1, 225 | "is_category_top": 1, 226 | "created_at": "2018-07-27T17:11:24.000Z", 227 | "updated_at": "2018-07-28T02:25:09.000Z" 228 | }, 229 | { 230 | "id": 1, 231 | "category_id": 6, 232 | "author": null, 233 | "title": "南京退休人员养老金增至人均2984元，本月底前发放到位", 234 | "subtitle": null, 235 | "description": null, 236 | "content": "    扬子晚报网7月27日讯（记者 董婉愉）参加南京市企业职工基本养老保险、机关事业单位工作人员基本养老保险，并在2017年12月31日前办理退休、退职或领取定期生活费手续的人员，从今年1月1日起调整养老金。调整后新的标准养老金将在本月底前发放到位，8月起按照增加后的标准正常发放。据了解，此次养老金调整共涉及全市企业退休人员89万人，调整后人均月养老金水平为2984元。
\n    目前全市退休人员基本养老金调整的相关实施工作已完成，调整后补发的养老金将于7月31日前发放到位。记者今天从南京市社保中心养老保险处了解到，此次基本养老金调整办法全省统一，分为固定额增加、与缴费年限挂钩增加及与本人基本养老金挂钩增加，同时对高龄人员适当倾斜。其中固定额增加部分为退休、退职或领取定期生活费人员统一按照每人每月34元增加；与本人缴费年限挂钩调整部分统一按照本人缴费年限（含视同缴费年限，不满1年按1年计算）分段增发，具体办法为：缴费年限15年及以下的部分，每满1年，每月增加1.7元；缴费年限16年至25年部分，每满1年，每月增加2.7元；缴费年限26年及以上部分，每满1年，每月增加3.9元。按缴费年限月增加额不足25.5元的，按25.5元增加；与本人养老金挂钩增加部分统一按本次调整前本人养老金的1.6%增加；适当倾斜为对2017年12月31日前年满70周岁不满75周岁、年满75周岁不满80周岁以及年满80周岁以上的退休人员，统一每月分别增发25元、35元、45元；退职和领取定期生活费人员，每月分别增发15元、25元、35元。 
", 237 | "picture": 1, 238 | "order": null, 239 | "is_home_ad": 1, 240 | "is_category_top": 1, 241 | "created_at": "2018-07-27T17:11:11.000Z", 242 | "updated_at": "2018-07-28T02:25:56.000Z" 243 | } 244 | ] 245 | } 246 | --------------------------------------------------------------------------------