2 |
12 |
13 |
53 |
--------------------------------------------------------------------------------
/src/app/pages/home/home-content/poetry-news/poetry-news.component.scss:
--------------------------------------------------------------------------------
1 |
2 | @media screen and(min-width:768px){
3 | .news-top{
4 | .news-tit{
5 | width: 1200px;
6 | font-size: 33px;
7 | .tit-box{
8 | padding: 15px 0 25px;
9 | }
10 | }
11 | }
12 | .news-bottom{
13 | width: 100%;
14 | position: absolute;
15 | bottom: 58px;
16 | left: 0;
17 | }
18 | .news-detail{
19 | font-size: 16px;
20 | margin-top: 2%;
21 | }
22 | }
23 |
24 | @media screen and(max-width:767px){
25 | .news-top{
26 | margin-top: 60px;
27 | .news-tit{
28 | width: 100%;
29 | font-size: 20px;
30 | .tit-box{
31 | padding: 17px 0 16px;
32 | }
33 | }
34 |
35 | }
36 | .news-bottom{
37 | width: 100%;
38 | }
39 | .news-detail{
40 | font-size: 10px;
41 | padding: 20px;
42 | }
43 | }
44 |
45 |
46 | .news-top{
47 | width: 100%;
48 | padding: 1px 0;
49 | .news-tit{
50 | letter-spacing: 5px;
51 | line-height: 1.1;
52 | text-align: center;
53 | color: #272727;
54 | margin: 0 auto;
55 | margin-top: 3%;
56 | .tit-box{
57 | display:inline-block !important;
58 | width: auto;
59 | border-bottom: 2px #E5E5E5 solid;
60 | position: relative;
61 | .icon-wrap{
62 | width: 100%;
63 | height: 30px;
64 | position: absolute;
65 | bottom: -21px;
66 | padding-right: 40px;
67 | .protect-icon{
68 | width: 40px;
69 | height: 30px;
70 | margin-left: 50%;
71 | background: #f5f5f5;
72 | font-size: 19px;
73 | text-align: center;
74 | padding-left: 7px;
75 | color: #0061ae;
76 | }
77 | }
78 | }
79 | }
80 | .news-detail{
81 | line-height: 2;
82 | text-align: center;
83 | font-weight: 300;
84 | color: #272727;
85 | }
86 | }
87 |
88 |
--------------------------------------------------------------------------------
/src/app/pages/routes/signin/signin.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
10 |
11 |
14 |
15 |
18 |
19 |
52 |
退出，清除登录信息
53 |
54 |
55 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * auther: deepthan
3 | * createDate: 2017.10.23
4 | * explain: 处理浏览器兼容问题
5 | * 不同的浏览器对Web标准的支持程度也不同，填充库（polyfill）能帮我们把这些不同点进行标准化
6 | * */
7 |
8 | /**
9 | * angular和应用加载之前需要这个文件所包含的填充库。
10 | * 你可以添加你自己的填充库到这个文件
11 | *
12 | * 这个文件被分为两个部分：
13 | * 1. 浏览器填充库: 这些在加载ZoneJS之前被应用，并被浏览器分类。
14 | * 2. 应用引用： 在ZoneJS之后导入的文件，应该在您的主文件之前加载。
15 | *
16 | * 目前的设置是所谓的“常用”浏览器; 最新版本的浏览器都会自动更新，包括 Safari >= 10, Chrome >= 55 (包括 Opera),
17 | * Edge >= 13 桌面应用, iOS 10 和 Chrome 移动应用.
18 | *
19 | * 了解更多： https://angular.io/docs/ts/latest/guide/browser-support.html
20 | */
21 |
22 | /***************************************************************************************************
23 | * 浏览器填充库
24 | */
25 |
26 |
27 | /** IE9, IE10 和 IE11 需要下面的所有填充库 **/
28 | // import 'core-js/es6/symbol';
29 | // import 'core-js/es6/object';
30 | // import 'core-js/es6/function';
31 | // import 'core-js/es6/parse-int';
32 | // import 'core-js/es6/parse-float';
33 | // import 'core-js/es6/number';
34 | // import 'core-js/es6/math';
35 | // import 'core-js/es6/string';
36 | // import 'core-js/es6/date';
37 | // import 'core-js/es6/array';
38 | // import 'core-js/es6/regexp';
39 | // import 'core-js/es6/map';
40 | // import 'core-js/es6/weak-map';
41 | // import 'core-js/es6/set';
42 |
43 | /** 在IE10和IE11上SVG元素使用NgClass需要引入下面的依赖包 */
44 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
45 |
46 | /** 常用浏览器需要这些 **/
47 | import 'core-js/es6/reflect';
48 | import 'core-js/es7/reflect';
49 |
50 | /**
51 | * 使用动画需要引入： `@angular/platform-browser/animations`.
52 | * 需要的: 除了Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
53 | **/
54 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
55 |
56 | /***************************************************************************************************
57 | * angular 需要引入zone.js.
58 | */
59 | import 'zone.js/dist/zone'; // Angular CLI 包括这个.
60 |
61 |
62 |
63 | /***************************************************************************************************
64 | * 应用引入的文件
65 | */
66 |
67 | /**
68 | * Date（日期）, currency（货币）, decimal（小数） and percent pipes(管道百分比).
69 | * 需要的: 除了 Chrome, Firefox, Edge, IE11 和 Safari 10
70 | */
71 | // import 'intl'; // Run `npm install --save intl`.
72 | /**
73 | * 使用intl至少需要引入一个本地数据.
74 | */
75 | // import 'intl/locale-data/jsonp/en';
76 |
--------------------------------------------------------------------------------
/src/app/pages/home/home-content/partner-and-footer/partner/partner.component.scss:
--------------------------------------------------------------------------------
1 | @media screen and(min-width:768px){
2 | .news-top{
3 | .news-tit{
4 | width: 1200px;
5 | font-size: 33px;
6 | margin: 0 auto;
7 | margin-top: 58px;
8 |
9 | }
10 | }
11 | .container{
12 | margin-top: 5%;
13 | }
14 | }
15 |
16 | @media screen and(max-width:767px){
17 | .news-top{
18 | .news-tit{
19 | width: 100%;
20 | font-size: 20px;
21 | margin: 0 auto;
22 | margin-top: 10px;
23 | }
24 | }
25 | .container{
26 | padding: 40px 0;
27 | }
28 | }
29 |
30 |
31 |
32 | .news-top{
33 | width: 100%;
34 | padding: 1px 0;
35 | .news-tit{
36 | letter-spacing: 5px;
37 | line-height: 1.1;
38 | text-align: center;
39 | color: #272727;
40 | padding-top: 3%;
41 | .tit-box{
42 | display:inline-block !important;
43 | width: auto;
44 | padding: 15px 0 25px;
45 | border-bottom: 2px #E5E5E5 solid;
46 | position: relative;
47 | .icon-wrap{
48 | width: 100%;
49 | height: 30px;
50 | position: absolute;
51 | bottom: -21px;
52 | padding-right: 40px;
53 | .protect-icon{
54 | width: 40px;
55 | height: 30px;
56 | margin-left: 50%;
57 | background: #f5f5f5;
58 | font-size: 19px;
59 | text-align: center;
60 | padding-left: 7px;
61 | color: #0061ae;
62 | }
63 | }
64 | }
65 | }
66 | // .news-detail{
67 | // font-size: 16px;
68 | // margin-top: 2%;
69 | // line-height: 2;
70 | // text-align: center;
71 | // font-weight: 300;
72 | // color: #272727;
73 | // }
74 | }
75 |
76 |
77 | .img-wrap li{
78 | padding: 7px 15px;
79 | text-align: center;
80 | min-height: 130px;
81 | vertical-align: middle;
82 | border-bottom: 1px solid #e9e9e9;
83 | border-right: 1px solid #e9e9e9;
84 | }
85 | .img-wrap li:nth-child(n+7) {
86 | border-bottom: none;
87 | }
88 | .img-wrap li:nth-child(6n) {
89 | border-right: none;
90 | }
--------------------------------------------------------------------------------
/src/app/pages/home/home-content/presentation-us/presentation-us.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
您好，我是诗生活
4 |
5 |
6 | 诗意您的生活，享受您的快乐。
7 |
8 |
9 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
34 |
35 |
36 |
37 |
44 |
45 |
48 |
49 |
50 |
51 |
52 |
53 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/src/app/theme/scss/atoms/_flex.scss:
--------------------------------------------------------------------------------
1 | // Flex variation
2 | // Custom styles for additional flex alignment options
3 | // @source - https://v4-alpha.getbootstrap.com/utilities/flexbox/
4 | // --------------------------------------------------
5 |
6 | %flex-first {
7 | order: -1;
8 | }
9 |
10 | %flex-last {
11 | order: 1;
12 | }
13 |
14 | %flex-unordered {
15 | order: 0;
16 | }
17 |
18 |
19 | %flex-row {
20 | flex-direction: row;
21 | }
22 |
23 | %flex-column {
24 | flex-direction: column;
25 | }
26 |
27 | %flex-row-reverse {
28 | flex-direction: row-reverse;
29 | }
30 |
31 | %flex-column-reverse {
32 | flex-direction: column-reverse;
33 | }
34 |
35 |
36 | %flex-wrap {
37 | flex-wrap: wrap;
38 | }
39 |
40 | %flex-nowrap {
41 | flex-wrap: nowrap;
42 | }
43 |
44 | %flex-wrap-reverse {
45 | flex-wrap: wrap-reverse;
46 | }
47 |
48 |
49 | %justify-content-start {
50 | justify-content: flex-start;
51 | }
52 |
53 | %justify-content-end {
54 | justify-content: flex-end;
55 | }
56 |
57 | %justify-content-center {
58 | justify-content: center;
59 | }
60 |
61 | %justify-content-between {
62 | justify-content: space-between;
63 | }
64 |
65 | %justify-content-around {
66 | justify-content: space-around;
67 | }
68 |
69 |
70 | %align-items-start {
71 | align-items: flex-start;
72 | }
73 |
74 | %align-items-end {
75 | align-items: flex-end;
76 | }
77 |
78 | %align-items-center {
79 | align-items: center;
80 | }
81 |
82 | %align-items-baseline {
83 | align-items: baseline;
84 | }
85 |
86 | %align-items-stretch {
87 | align-items: stretch;
88 | }
89 |
90 |
91 | %align-content-start {
92 | align-content: flex-start;
93 | }
94 |
95 | %align-content-end {
96 | align-content: flex-end;
97 | }
98 |
99 | %align-content-center {
100 | align-content: center;
101 | }
102 |
103 | %align-content-between {
104 | align-content: space-between;
105 | }
106 |
107 | %align-content-around {
108 | align-content: space-around;
109 | }
110 |
111 | %align-content-stretch {
112 | align-content: stretch;
113 | }
114 |
115 |
116 | %align-self-auto {
117 | align-self: auto;
118 | }
119 |
120 | %align-self-start {
121 | align-self: flex-start;
122 | }
123 |
124 | %align-self-end {
125 | align-self: flex-end;
126 | }
127 |
128 | %align-self-center {
129 | align-self: center;
130 | }
131 |
132 | %align-self-baseline {
133 | align-self: baseline;
134 | }
135 |
136 | %align-self-stretch {
137 | align-self: stretch;
138 | }
139 |
--------------------------------------------------------------------------------
/.angular-cli.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "project": {
4 | "name": "pro0-test",
5 | "ejected": false
6 | },
7 | "apps": [
8 | {
9 | "root": "src",
10 | "outDir": "dist",
11 | "assets": [
12 | "assets"
13 | ],
14 | "index": "index.html",
15 | "main": "main.ts",
16 | "polyfills": "polyfills.ts",
17 | "test": "test.ts",
18 | "tsconfig": "tsconfig.app.json",
19 | "testTsconfig": "tsconfig.spec.json",
20 | "prefix": "poetry",
21 | "styles": [
22 | "app/theme/theme.scss",
23 | "styles.scss"
24 | ],
25 | "scripts": [
26 | "../node_modules/tinymce/tinymce.js",
27 | "../node_modules/tinymce/themes/modern/theme.js",
28 | "../node_modules/tinymce/plugins/link/plugin.js",
29 | "../node_modules/tinymce/plugins/paste/plugin.js",
30 | "../node_modules/tinymce/plugins/table/plugin.js",
31 | "../node_modules/tinymce/plugins/preview/plugin.js",
32 | "../node_modules/tinymce/plugins/fullscreen/plugin.js",
33 | "../node_modules/tinymce/plugins/textcolor/plugin.js",
34 | "../node_modules/tinymce/plugins/image/plugin.js",
35 | "../node_modules/tinymce/plugins/imagetools/plugin.js",
36 | "../node_modules/tinymce/plugins/code/plugin.js"
37 | ],
38 | "environmentSource": "environments/environment.ts",
39 | "environments": {
40 | "dev": "environments/environment.ts",
41 | "demo": "environments/environment.demo.ts",
42 | "prod": "environments/environment.prod.ts",
43 | "test": "environments/environment.test.ts",
44 | "github": "environments/environment.github.ts"
45 | }
46 | }
47 | ],
48 | "e2e": {
49 | "protractor": {
50 | "config": "./protractor.conf.js"
51 | }
52 | },
53 | "lint": [
54 | {
55 | "project": "src/tsconfig.app.json"
56 | },
57 | {
58 | "project": "src/tsconfig.spec.json"
59 | },
60 | {
61 | "project": "e2e/tsconfig.e2e.json"
62 | }
63 | ],
64 | "test": {
65 | "karma": {
66 | "config": "./karma.conf.js"
67 | }
68 | },
69 | "defaults": {
70 | "styleExt": "scss",
71 | "component": {
72 | "flat": false,
73 | "inlineStyle": false,
74 | "inlineTemplate": false,
75 | "spec": false
76 | }
77 | }
78 | }
--------------------------------------------------------------------------------
/src/app/pages/home/home-content/poetry-news/move-img/move-img.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input, ElementRef, ViewChild, Renderer2 } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'poetry-move-img',
5 | templateUrl: './move-img.component.html',
6 | styleUrls: ['./move-img.component.scss']
7 | })
8 | export class MoveImgComponent implements OnInit {
9 |
10 | @Input() public newItem: any ;
11 | @ViewChild('itemWrap') itemWrap: ElementRef;
12 | @ViewChild('content') content: ElementRef;
13 |
14 | private mousePos = {
15 | top: "top: -100%; left: 0",
16 | right: "top: 0; left: 100%",
17 | bottom: "top: 100%; left: 0",
18 | left: "top: 0; left: -100%"
19 | };
20 |
21 | mouseenter(e){
22 | let direction = this.getDirection(e);
23 | // console.log("进来的方向",direction,"初始化的样式",this.mousePos[direction])
24 |
25 | this.renderer2.removeClass(this.content.nativeElement, "active");
26 | this.renderer2.setAttribute(this.content.nativeElement, "style",this.mousePos[direction]);
27 | setTimeout(()=>{
28 | this.renderer2.addClass(this.content.nativeElement, "active");
29 | this.renderer2.setAttribute(this.content.nativeElement, "style","left: 0;top: 0" );
30 | },1)
31 | }
32 |
33 | mouseleave(e){
34 | let direction = this.getDirection(e);
35 | // console.log("离开的方向",direction,"进行的样式",this.mousePos[direction])
36 | this.renderer2.setAttribute(this.content.nativeElement, "style",this.mousePos[direction]);
37 | }
38 |
39 | getDirection(e){
40 | let dire = ['top', 'right', 'bottom', 'left'];
41 | // console.log("获得的数字",this.moveInWay(e))
42 | return dire[this.moveInWay(e)]
43 | }
44 |
45 | /**
46 | * @todo 判断移入方式
47 | * @param 事件属性
48 | * @returns number 0-3 上右下左
49 | */
50 | moveInWay(e){
51 | let item = this.itemWrap.nativeElement; // 获得dom节点
52 | // var w = item.offsetWidth; // 获得节点的宽
53 | // var h = item.offsetWidth; // 获得节点的高 因为无margin所以可以用
54 | var b = item.getBoundingClientRect(); // 获得元素的大小及其相对于视口的位置
55 | var w = b.width;
56 | var h = b.height;
57 | var t = document.body.scrollTop; // 获得卷曲值
58 | // console.log("节点的宽",w,"节点的高",h,"相对视口的位置",b,"卷曲值",t)
59 | var x = (e.pageX - b.left - (w / 2)) * (w > h ? (h / w) : 1);
60 | var y = (e.pageY - b.top - t - (h / 2)) * (h > w ? (w / h) : 1);
61 | return Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
62 | }
63 |
64 |
65 |
66 | constructor( private renderer2 : Renderer2 ) { }
67 |
68 | ngOnInit() {
69 | // this.renderer2.setStyle(this.itemWrap.nativeElement,"background","url("+ this.newItem.img +")");
70 | this.renderer2.setStyle(this.itemWrap.nativeElement,"background","#0061ae");
71 |
72 | }
73 |
74 | }
75 |
--------------------------------------------------------------------------------
/src/app/theme/scss/atoms/_border.scss:
--------------------------------------------------------------------------------
1 | // Border
2 | %border-0 {
3 | border: 0;
4 | }
5 |
6 | %border-top-0 {
7 | border-top: 0;
8 | }
9 |
10 | %border-right-0 {
11 | border-right: 0;
12 | }
13 |
14 | %border-bottom-0 {
15 | border-bottom: 0;
16 | }
17 |
18 | %border-left-0 {
19 | border-left: 0;
20 | }
21 |
22 | // Border width
23 | @for $i from 1 through 10 {
24 | %border-#{$i} {
25 | border-width: ($i / 10) + rem;
26 | }
27 | %border-top-#{$i} {
28 | border-top-width: ($i / 10) + rem;
29 | }
30 | %border-right-#{$i} {
31 | border-right-width: ($i / 10) + rem;
32 | }
33 | %border-bottom-#{$i} {
34 | border-bottom-width: ($i / 10) + rem;
35 | }
36 | %border-left-#{$i} {
37 | border-left-width: ($i / 10) + rem;
38 | }
39 | }
40 |
41 | // Border-radius
42 | $radius-sizes: (
43 | base: $border-radius-base,
44 | sm: $border-radius-sm,
45 | md: $border-radius-md,
46 | lg: $border-radius-lg
47 | );
48 |
49 | @each $size, $value in $radius-sizes {
50 | %rounded-#{$size} {
51 | border-radius: $value;
52 | }
53 |
54 | %rounded-top-#{$size} {
55 | border-top-left-radius: $value;
56 | border-top-right-radius: $value;
57 | }
58 |
59 | %rounded-right-#{$size} {
60 | border-top-right-radius: $value;
61 | border-bottom-right-radius: $value;
62 | }
63 |
64 | %rounded-bottom-#{$size} {
65 | border-bottom-left-radius: $value;
66 | border-bottom-right-radius: $value;
67 | }
68 |
69 | %rounded-left-#{$size} {
70 | border-top-left-radius: $value;
71 | border-bottom-left-radius: $value;
72 | }
73 | }
74 |
75 | %rounded-circle {
76 | border-radius: 50%;
77 | }
78 |
79 | %rounded-0 {
80 | border-radius: 0;
81 | }
82 |
83 | // Border color
84 | $border-colors: (
85 | gray-base: $gray-base,
86 | gray-darker: $gray-darker,
87 | gray-dark: $gray-dark,
88 | gray-light: $gray-light,
89 | gray-lighter: $gray-lighter,
90 | primary: $primary,
91 | success: $brand-success,
92 | info: $brand-info,
93 | warning: $brand-warning,
94 | danger: $brand-danger
95 | );
96 |
97 | @each $parent, $color in $border-colors {
98 | %border-#{$parent} {
99 | border-color: $color;
100 | }
101 | }
102 |
103 | %border-white {
104 | border-color: #fff;
105 | }
106 |
107 | %border-gray {
108 | border-color: $gray;
109 | }
110 |
111 | %border-transparent {
112 | border-color: transparent;
113 | }
114 |
115 | // border style
116 | @each $p in (null, -top, -right, -bottom, -left) {
117 | %dotted#{$p} {
118 | border#{$p}-style: dotted;
119 | }
120 | %dashed#{$p} {
121 | border#{$p}-style: dashed;
122 | }
123 | %solid#{$p} {
124 | border#{$p}-style: solid;
125 | }
126 | }
127 |
128 |
--------------------------------------------------------------------------------
/src/app/pages/home/home-content/need-poetry/need-poetry.component.html:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
14 |
古诗是中华民族乃至全世界的瑰宝，我们应该传承下去， 虽然有古典文集， 但大多数人并没有拥有这些书籍。
15 |
从某种意义上来说，这些庞大的文集离我们是有一定距离的。因此本网站诞生了，你可以在此享受诗词的饕餮盛宴。
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
生活需要诗意
31 |
我们生活在都市里面，生活节奏越来越快的我们少了一颗能静下来慢慢欣赏美好的心。中国的诗词有着无限的魅力，只是未曾发现。
32 |
了解更多
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
你需要诗意
42 |
田园的美好我们或许不理解，但是短暂的生命总是有些东西值得我们追求，千年的时光过去，诗词的美丽依旧。
43 |
了解更多
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
要善于发现
53 |
你需要诗意,你需要诗意
54 |
了解更多
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
你需要诗意
64 |
你需要诗意,你需要诗意
65 |
了解更多
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/src/app/pages/home/home-content/presentation-us/reasons/reasons.component.scss:
--------------------------------------------------------------------------------
1 | .the-tit{
2 | min-height: 63px;
3 | position: relative;
4 | padding: 19px 38px 16px 22px;
5 | font-size: 15px;
6 | font-weight: bold;
7 | line-height: 1.5;
8 | margin-top: 6px;
9 | cursor: pointer;
10 | .icon-common{
11 | width: 24px;
12 | height: 24px;
13 | position: absolute;
14 | right: 10px;
15 | top: 19px;
16 | left: auto;
17 | }
18 | .tit-icon{
19 | background: url("../../../../../../assets/images/why_show_icon.png") no-repeat 0px 0px;
20 | }
21 | .click-tit-icon{
22 | background: url("../../../../../../assets/images/why_show_icon.png") no-repeat 0px -70px;
23 | }
24 | &:hover{
25 | background-color: #f5f5f5;
26 | color: #e9573f;
27 | }
28 | }
29 | .the-det{
30 | padding: 0 24px 15px;
31 | border: 5px solid #bdc3c7;
32 | border-top: none;
33 | border-bottom-left-radius: 4px;
34 | border-bottom-right-radius: 4px;
35 |
36 | }
37 |
38 | .default-tit{
39 | color: #656f78;
40 | border-bottom: none;
41 | background-color: rgb(236, 236, 236);
42 | }
43 | .click-tit{
44 | color: #e9573f;
45 | background: #fff !important;
46 | border: 5px solid #bdc3c7;
47 | border-bottom: none;
48 | }
49 | .show-det{
50 | display: block;
51 | -webkit-animation: fadeinT .5s ease-out backwards;
52 | -moz-animation: fadeinT .5s ease-out backwards;
53 | -ms-animation: fadeinT.5s ease-out backwards;
54 | animation: fadeinT .5s ease-out backwards;
55 | }
56 | .hide-det{
57 | display: none;
58 | -webkit-animation: fadeOutB .5s ease-out backwards;
59 | -moz-animation: fadeOutB .5s ease-out backwards;
60 | -ms-animation: fadeOutB.5s ease-out backwards;
61 | animation: fadeOutB .5s ease-out backwards;
62 | }
63 | /* 淡入-从上 */
64 | @-webkit-keyframes fadeinT{
65 | 0%{-webkit-transform:translateY(-10px);}
66 | 100%{-webkit-transform:translateY(0);}
67 | }
68 | @-moz-keyframes fadeinT{
69 | 0%{-webkit-transform:translateY(-10px);}
70 | 100%{-webkit-transform:translateY(0);}
71 | }
72 | @-ms-keyframes fadeinT{
73 | 0%{-webkit-transform:translateY(-10px);}
74 | 100%{-webkit-transform:translateY(0);}
75 | }
76 | @keyframes fadeinT{
77 | 0%{-webkit-transform:translateY(-10px);}
78 | 100%{-webkit-transform:translateY(0);}
79 | }
80 |
81 | /* 淡出-从上 */
82 | @-webkit-keyframes fadeOutB{
83 | 0%{opacity:1;-webkit-transform:translateY(0);}
84 | 100%{display:none;opacity:0;-webkit-transform:translateY(-10px);}
85 | }
86 | @-moz-keyframes fadeinT{
87 | 0%{opacity:1;-webkit-transform:translateY(0);}
88 | 100%{opacity:0;-webkit-transform:translateY(-10px);}
89 | }
90 | @-ms-keyframes fadeinT{
91 | 0%{opacity:1;-webkit-transform:translateY(0);}
92 | 100%{opacity:0;-webkit-transform:translateY(-10px);}
93 | }
94 | @keyframes fadeOutB{
95 | 0%{opacity:1;-webkit-transform:translateY(0);}
96 | 100%{opacity:0;-webkit-transform:translateY(-10px);}
97 | }
98 |
--------------------------------------------------------------------------------
/src/app/pages/home/home-content/presentation-us/he-said/he-said.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ElementRef, ViewChild, Renderer2 } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'poetry-he-said',
5 | templateUrl: './he-said.component.html',
6 | styleUrls: ['./he-said.component.scss']
7 | })
8 | export class HeSaidComponent implements OnInit {
9 |
10 | companyInfo: any;
11 | index: number = 0;
12 |
13 | @ViewChild('headImg') headImg: ElementRef;
14 |
15 | constructor(private renderer2: Renderer2) { }
16 |
17 | ngOnInit() {
18 | this.changeCom(0);
19 | setInterval(() => { this.addDot() }, 4000);
20 | }
21 |
22 | changeCom(index) {
23 | this.index = index;
24 | this.companyInfo = this.companyArray[index];
25 | this.renderer2.setStyle(this.headImg.nativeElement, 'background-image', 'url(' + this.companyInfo.img + ')');
26 | this.changeDot(index);
27 | }
28 |
29 | firDot: boolean = false;
30 | secDot: boolean = false;
31 | thiDot: boolean = false;
32 | fouDot: boolean = false;
33 |
34 | changeDot(index) {
35 | this.resetDot();
36 | switch (index) {
37 | case 0: this.firDot = true; break;
38 | case 1: this.secDot = true; break;
39 | case 2: this.thiDot = true; break;
40 | case 3: this.fouDot = true; break;
41 | }
42 | // let dots = [this.firDot, this.secDot, this.thiDot, this.fouDot];
43 | // console.log("dots.",dots[index],this.firDot,this.secDot);
44 | // dots.forEach( (item, num) => {
45 | // num === index ? item = true : item = false;
46 | // console.log("item",item, num)
47 | // })
48 | // console.log("this.",dots[index],this.firDot,this.secDot)
49 | }
50 |
51 | addDot() {
52 | if (this.index >= 3) {
53 | this.index = 0;
54 | return;
55 | } else {
56 | this.index++;
57 | }
58 | this.changeCom(this.index);
59 | }
60 |
61 | resetDot() {
62 | this.firDot = false;
63 | this.secDot = false;
64 | this.thiDot = false;
65 | this.fouDot = false;
66 | }
67 |
68 |
69 | private companyArray = [
70 | {
71 | img: './assets/images/home_icon_1.png',
72 | tit: '诗名字',
73 | det: '诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容'
74 | },
75 | {
76 | img: './assets/images/home_icon_2.png',
77 | tit: '诗名字',
78 | det: '诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容'
79 | },
80 | {
81 | img: './assets/images/home_icon_3.png',
82 | tit: '诗名字',
83 | det: '诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容'
84 | },
85 | {
86 | img: './assets/images/home_icon_2.png',
87 | tit: '诗名字',
88 | det: '诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容诗内容'
89 | }
90 | ];
91 |
92 |
93 | }
94 |
--------------------------------------------------------------------------------
/src/app/pages/routes/signin/signin.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormBuilder, FormGroup, Validators } from '@angular/forms';
3 | import { Observable } from 'rxjs/Observable';
4 | import { Router } from '@angular/router';
5 |
6 | import { AuthorizationService } from '../shared/authorization.service';
7 | import { NzNotificationService } from 'ng-zorro-antd';
8 |
9 | @Component({
10 | selector: 'app-signin',
11 | templateUrl: './signin.component.html',
12 | styleUrls: ['./signin.component.scss']
13 | })
14 | export class SigninComponent implements OnInit {
15 |
16 | validateForm: FormGroup;
17 |
18 | _submitForm() {
19 | for (const i in this.validateForm.controls) {
20 | this.validateForm.controls[i].markAsDirty();
21 | }
22 | this.signin(this.validateForm.value)
23 | }
24 |
25 | roleInfo: any;
26 |
27 | signin(userInfo) {
28 | this.signCheck(userInfo);
29 | if (this.roleInfo.role) {
30 | this.authService.saveAccount(this.roleInfo);
31 | this.router.navigateByUrl('/routes/guard');
32 | this.createNotification('success', '恭喜', '登录成功');
33 | } else {
34 | this.createNotification('error', '登录失败', '用户名或密码错误！');
35 | }
36 | }
37 |
38 | signCheck(userInfo) {
39 | let userName = userInfo.userName;
40 | if (userName == 'admin') {
41 | this.setRoleInfo('admin');
42 | } else if (userName == 'user') {
43 | this.setRoleInfo('user');
44 | } else {
45 | this.setRoleInfo(false);
46 | }
47 | }
48 |
49 | setRoleInfo(role) {
50 | this.roleInfo = {
51 | role: role
52 | }
53 | }
54 |
55 | signout() {
56 | this.authService.removeAccount();
57 | this.createNotification('success', '成功', '已清除');
58 | }
59 |
60 | constructor(
61 | private fb: FormBuilder,
62 | private authService: AuthorizationService,
63 | private _notification: NzNotificationService,
64 | private router: Router ) { }
65 |
66 | ngOnInit() {
67 | this.validateForm = this.fb.group({
68 | userName: [null, [Validators.required]],
69 | password: [null, [Validators.required]],
70 | remember: [true],
71 | });
72 |
73 | }
74 |
75 | // private userName : string = '';
76 | // ngOnChanges(){
77 | // this.userName = this.authService.getCurrentUser();
78 | // console.log("userName",this.userName);
79 | // }
80 |
81 | createNotification = (type, tit, content) => {
82 | this._notification.create(type, tit, content);
83 | };
84 |
85 |
86 | }
87 |
--------------------------------------------------------------------------------
/src/app/pages/home/home-content/home-content.component.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 文件名称：首页
3 | * 编写人：何林昆
4 | * 编写日期：2017.5.2
5 | * 变更人：
6 | * 变更内容：
7 | **/
8 |
9 | import { Component, OnInit, ViewContainerRef, ViewChild, OnDestroy } from '@angular/core';
10 | import { WindowRefService } from './../../../shared/service/return-window.service';
11 |
12 | @Component({
13 | selector: 'home-content',
14 | styleUrls: [
15 | './home-content.component.scss'
16 | ],
17 | templateUrl: './home-content.component.html',
18 | })
19 |
20 | export class HomeContentComponent implements OnInit {
21 |
22 | private documentH = document.documentElement.offsetHeight || document.body.offsetHeight; // 屏幕高度
23 |
24 | /**
25 | * 往下滚动的时候
26 | * 1. 正好在节点上 直接加上屏幕大小
27 | * 2. 本页面往下一点 屏幕大小 - 往下的一点
28 | * 3. 往下的卷曲值取余屏幕大小
29 | */
30 | goDown() {
31 | let defaultOffY = window.pageYOffset; //页面卷曲值
32 | // let willScrTop = ele.offsetHeight - 58 + Math.floor(defaultOffY/ele.offsetHeight)*ele.offsetHeight ; // 将要跳转到的位置
33 | let willScrTop = defaultOffY + this.documentH - 58 - defaultOffY % this.documentH;
34 | willScrTop === defaultOffY ? willScrTop = defaultOffY + this.documentH : null;
35 | let tempOffY = defaultOffY;
36 | var timmer = requestAnimationFrame(function fn() {
37 | tempOffY = tempOffY + 50;
38 | if (willScrTop > tempOffY) {
39 | window.scrollTo(0, tempOffY);
40 | setTimeout(() => {
41 | timmer = requestAnimationFrame(fn)
42 | }, 1)
43 | } else {
44 | window.scrollTo(0, willScrTop);
45 | }
46 | })
47 | }
48 |
49 | goUp() {
50 | let defaultOffY = window.pageYOffset; //页面卷曲值
51 | if (defaultOffY <= 0) {
52 | return;
53 | }
54 | let willScrTop = defaultOffY - 58 - defaultOffY % this.documentH;
55 | let tempOffY = defaultOffY;
56 | var timmer = requestAnimationFrame(function fn() {
57 | tempOffY = tempOffY - 50;
58 | if (willScrTop < tempOffY) {
59 | window.scrollTo(0, tempOffY);
60 | setTimeout(() => {
61 | timmer = requestAnimationFrame(fn)
62 | }, 1)
63 | } else {
64 | window.scrollTo(0, willScrTop);
65 | }
66 | })
67 | }
68 |
69 | private eventListener;
70 |
71 | addListener() {
72 | let that = this;
73 | this.eventListener = this._window.addEventListener("scroll", () => {
74 | that.startAnimations();
75 | });
76 | }
77 |
78 | whitchSatrt: number;
79 | private readyAnimateArray = [];
80 |
81 | startAnimations() {
82 | let ratio = Math.ceil((window.pageYOffset - this.documentH / 5) / this.documentH);
83 | if (this.readyAnimateArray.indexOf(ratio) == -1) {
84 | this.readyAnimateArray.push(ratio);
85 | } else {
86 | return;
87 | }
88 | this.whitchSatrt = ratio;
89 | }
90 |
91 | ngOnDestroy() {
92 | this._window.removeEventListener("scroll", this.eventListener);
93 | }
94 |
95 | private _window: Window;
96 |
97 | constructor(private windowRef: WindowRefService) {
98 | this._window = windowRef.nativeWindow;
99 | }
100 |
101 | private documentW = document.documentElement.offsetWidth || document.body.offsetWidth; // 屏幕宽度
102 |
103 | ngOnInit() {
104 | console.log("this.documentW",this.documentW)
105 | if(this.documentW < 768){
106 | for(let item = 0; item<=5; item++){
107 | setTimeout(()=>{
108 | this.whitchSatrt = item;
109 | },1)
110 | }
111 | }else{
112 | this.addListener();
113 | }
114 | }
115 |
116 |
117 | }
118 |
119 |
--------------------------------------------------------------------------------
/src/app/pages/routes/routes.module.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * module Name: 路由相关模块
3 | * Description: 模块懒加载（延迟加载）、预加载、路由守卫、离开提示。
4 | * module URI: https://deepthan.gitee.io/angular-demo/#/routes/signin
5 | * Author: deepthan
6 | * Author URI: https://github.com/deepthan
7 | */
8 | import { RouterModule } from '@angular/router';
9 | import { NgModule } from '@angular/core';
10 | import { CommonModule } from '@angular/common';
11 | import { FormsModule, ReactiveFormsModule } from '@angular/forms';
12 | import { NgZorroAntdModule } from 'ng-zorro-antd';
13 |
14 | import { SharedModule } from '../../shared/shared.module';
15 | import { RoutesRouting } from './routes.routing';
16 | import { RoutesComponent } from './routes.component';
17 | import { SigninComponent } from './signin/signin.component';
18 | import { CanSigninVisitProvide, PreloadService, AuthorizationService, CanAdminVisitProvide, CanLeaveProvide } from './shared/index'
19 |
20 | const ROUTES_COMPONENT = [
21 | RoutesComponent,
22 | SigninComponent
23 | ]
24 |
25 | const ROUTES_PROVIDERS = [
26 | PreloadService,
27 | AuthorizationService,
28 | CanSigninVisitProvide,
29 | CanAdminVisitProvide,
30 | CanLeaveProvide
31 | ]
32 |
33 | @NgModule({
34 | imports: [
35 | CommonModule,
36 | FormsModule,
37 | ReactiveFormsModule,
38 | SharedModule,
39 | NgZorroAntdModule,
40 | RouterModule.forChild(RoutesRouting),
41 | ],
42 | declarations: [
43 | ...ROUTES_COMPONENT
44 | ],
45 | providers: [
46 | ...ROUTES_PROVIDERS
47 | ]
48 |
49 | })
50 |
51 |
52 | export class RoutesModule { }
53 |
54 |
55 | // \\
56 | /******************************************************************************************************************************************************************\
57 | *
58 | * 此为路由模块，包括的功能：
59 | *
60 | * * 下面介绍的 service 或 provider 都放在 routes 目录下的 shared 文件夹下，且都在routes.module.ts里面注册。
61 | *
62 | * 1. 模块懒加载
63 | * 原理：点击到哪个模块才加载哪个模块的js文件。
64 | * 实现方法&位置：
65 | * routes/routes.routing.ts文件，第27~30行进行配置, 懒加载的测试模块：lazy-load 。
66 | *
67 | *
68 | * 2. 模块预加载：
69 | * 原理：只有配置了懒加载可以进行预加载，在加载了本模块文件并且页面渲染完全之后，再去自动加载指定的模块文件，好处是用户打开其他模块会非常快因为文件已经加载过了。
70 | * 实现方法&位置：
71 | * 1) 定义预加载 service ： shared/service/preview-load.ts , 抛出 PreloadService。
72 | * 2) 在app.module.ts里面注册此服务。因为RouterModule.forRoot()可传入路由、指令和服务参数，但RouterModule.forChild()却只接收路由、指令，不可传入服务。
73 | * 3) 服务注册好了，在路由里面直接用 ./routes.routing.ts的 34 行进行预加载设置,默认全局开始预加载，如若不想预加载则设置 preload : false 即可。
74 | *
75 | *
76 | * 3. 路由守卫：
77 | * 原理： 只有登录或相应权限的用户才可以访问某个url，否则会拦截。
78 | * 实现方法&位置：
79 | * 不登录不给访问uri
80 | * [routerLink]="['/routes/guard/admin']" : 顶级路由开始写。
81 | * 0) 模拟登录并存用户信息，供后面验证用。 authorization.provider.ts
82 | * 1) 新建任何人、user、admin 可以访问的组件
83 | * 2) 定义登录、admin访问限制文件 can-signin-visit.provider,ts 和 can-admin-visit.provider.ts文件。
84 | * 3) 在 guard 文件夹下的 guard.routing.ts文件 27-32行配置登录方可访问 和 34-38行admin方可访问的路由守卫。
85 | * 4）账号密码： 普通用户 账号： user 密码： 123
86 | * admin admin 123
87 | * 5) 对应的情况：
88 | * i. 未登录访问 user和admin提示权限不足，可以访问 /routes/guard/anybody 但无法访问 /routes/guard/user 和 /admin
89 | * ii. 登录user可以访问 /routes/guard/anybody 和 /user 但是无法访问 .admin
90 | * iii. 登录admin全都可以访问
91 | *
92 | * 实现原理？
93 | * 源码解读（待续）。
94 | *
95 | *
96 | *
97 | *
98 | *
99 | */
--------------------------------------------------------------------------------
/src/assets/css/loading.css:
--------------------------------------------------------------------------------
1 | #loading{
2 | background-color: #fff;
3 | height: 100%;
4 | width: 100%;
5 | position: fixed;
6 | z-index: 1;
7 | margin-top: 0px;
8 | top: 0px;
9 | }
10 | #loading-center{
11 | width: 100%;
12 | height: 100%;
13 | position: relative;
14 | }
15 | #loading-center-absolute {
16 | position: absolute;
17 | left: 50%;
18 | top: 50%;
19 | height: 50px;
20 | width: 50px;
21 | margin-top: -25px;
22 | margin-left: -25px;
23 | -ms-transform: rotate(45deg);
24 | -webkit-transform: rotate(45deg);
25 | transform: rotate(45deg);
26 | -webkit-animation: loading-center-absolute 1.5s infinite;
27 | animation: loading-center-absolute 1.5s infinite;
28 |
29 | }
30 | .object{
31 | width: 25px;
32 | height: 25px;
33 | background-color: #337ab7;
34 | float: left;
35 |
36 | }
37 | #object_one {
38 | -webkit-animation: object_one 1.5s infinite;
39 | animation: object_one 1.5s infinite;
40 | }
41 | #object_two {
42 | -webkit-animation: object_two 1.5s infinite;
43 | animation: object_two 1.5s infinite;
44 | }
45 | #object_three {
46 | -webkit-animation: object_three 1.5s infinite;
47 | animation: object_three 1.5s infinite;
48 | }
49 | #object_four {
50 | -webkit-animation: object_four 1.5s infinite;
51 | animation: object_four 1.5s infinite;
52 | }
53 |
54 |
55 | @-webkit-keyframes loading-center-absolute {
56 | 100% { -webkit-transform: rotate(-45deg); }
57 |
58 | }
59 |
60 | @keyframes loading-center-absolute {
61 | 100% {
62 | transform: rotate(-45deg);
63 | -webkit-transform: rotate(-45deg);
64 | }
65 | }
66 | @-webkit-keyframes object_one {
67 | 25% { -webkit-transform: translate(0,-50px) rotate(-180deg); }
68 | 100% { -webkit-transform: translate(0,0) rotate(-180deg); }
69 |
70 | }
71 |
72 | @keyframes object_one {
73 | 25% {
74 | transform: translate(0,-50px) rotate(-180deg);
75 | -webkit-transform: translate(0,-50px) rotate(-180deg);
76 | }
77 | 100% {
78 | transform: translate(0,0) rotate(-180deg);
79 | -webkit-transform: translate(0,0) rotate(-180deg);
80 | }
81 | }
82 | @-webkit-keyframes object_two {
83 | 25% { -webkit-transform: translate(50px,0) rotate(-180deg); }
84 | 100% { -webkit-transform: translate(0,0) rotate(-180deg); }
85 | }
86 |
87 | @keyframes object_two {
88 | 25% {
89 | transform: translate(50px,0) rotate(-180deg);
90 | -webkit-transform: translate(50px,0) rotate(-180deg);
91 | }
92 | 100% {
93 | transform: translate(0,0) rotate(-180deg);
94 | -webkit-transform: translate(0,0) rotate(-180deg);
95 | }
96 | }
97 |
98 | @-webkit-keyframes object_three {
99 | 25% { -webkit-transform: translate(-50px,0) rotate(-180deg); }
100 | 100% { -webkit-transform: translate(0,0) rotate(-180deg); }
101 | }
102 |
103 | @keyframes object_three {
104 | 25% {
105 | transform: translate(-50px,0) rotate(-180deg);
106 | -webkit-transform: translate(-50px,0) rotate(-180deg);
107 | }
108 | 100% {
109 | transform: translate(0,0) rotate(-180deg);
110 | -webkit-transform: translate(0,0) rotate(-180deg);
111 | }
112 | }
113 | @-webkit-keyframes object_four {
114 | 25% { -webkit-transform: translate(0,50px) rotate(-180deg); }
115 | 100% { -webkit-transform: translate(0,0) rotate(-180deg); }
116 | }
117 |
118 | @keyframes object_four {
119 | 25% {
120 | transform: translate(0,50px) rotate(-180deg);
121 | -webkit-transform: translate(0,50px) rotate(-180deg);
122 | }
123 | 100% {
124 | transform: translate(0,0) rotate(-180deg);
125 | -webkit-transform: translate(0,0) rotate(-180deg);
126 | }
127 | }
--------------------------------------------------------------------------------
/src/app/pages/home/home-content/presentation-us/he-said/he-said.component.scss:
--------------------------------------------------------------------------------
1 |
2 |
3 | @media screen and(min-width:768px){
4 | .exp-det{
5 | font-size: 16px;
6 | }
7 |
8 | .company-info{
9 | font-size: 16px;
10 | }
11 | }
12 |
13 | @media screen and(max-width:767px){
14 | .exp-det{
15 | font-size: 13px;
16 | }
17 |
18 | .company-info{
19 | font-size: 12px;
20 | }
21 | }
22 |
23 |
24 | .exp-wrap{
25 | border: 1px solid #dcdcdc;
26 | -webkit-box-shadow: 0 -4px 0 0 #656d78;
27 | box-shadow: 0 -4px 0 0 #656d78;
28 | text-align: left;
29 | text-indent: 32px;
30 | padding: 14px 35px 30px 33px;
31 | // padding: 16px 35px 30px 70px;
32 | margin: 5px auto;
33 | position: relative;
34 | border-radius: 5px;
35 |
36 | .exp-det{
37 | line-height: 1.8;
38 | color: #595959;
39 | margin-top: 5px;
40 | // &::before{
41 | // content: '\201C';
42 | // color: #37a7c1;
43 | // font-size: 80px;
44 | // font-weight: bold;
45 | // font-family: sans-serif, Arial, Helvetica;
46 | // padding-right: 3px;
47 | // margin: 0 7px;
48 | // position: absolute;
49 | // left: -3px;
50 | // top: -13px;
51 | // opacity: 0.7;
52 | // }
53 | }
54 |
55 | .exp-arrow{
56 | width: 117px;
57 | left: 0;
58 | position: absolute;
59 | height: 14px;
60 | right: 0px;
61 | bottom: -14px;
62 | &::before{
63 | content: '';
64 | height: 0;
65 | width: 0;
66 | border-style: solid;
67 | border-width: 10px;
68 | // border-color: #dcdcdc transparent transparent transparent;
69 | border-color: #fff transparent transparent transparent;
70 | border-top-width: 16px;
71 | border-left-width: 21px;
72 | position: absolute;
73 | right: 58px;
74 | top: -1px;
75 | left: 49px;
76 | z-index: 9;
77 | }
78 | &::after{
79 | content: '';
80 | height: 0;
81 | width: 0;
82 | border-style: solid;
83 | border-width: 10px;
84 | // border-color: #dcdcdc transparent transparent transparent;
85 | border-color: #dcdcdc transparent transparent transparent;
86 | border-top-width: 17px;
87 | border-left-width: 22px;
88 | position: absolute;
89 | right: 58px;
90 | top: 0px;
91 | left: 49px;
92 | z-index: 8;
93 | }
94 | }
95 |
96 | }
97 |
98 | .company-info{
99 | margin-top: 20px;
100 | padding-left: 20px;
101 | color: #2f2f2f;
102 | line-height: 1.2;
103 | .img-wrap{
104 | width: 85px;
105 | height: 85px;
106 | // background-image: url("../../../../../assets/images/home_icon_1.png");
107 | background-size: 100% 100%;
108 | border-radius: 50%;
109 | }
110 | .exp-tit{
111 | margin-top: 10px;
112 | padding-left: 25px;
113 | }
114 | .lists-tips{
115 | padding-right: 0;
116 | }
117 | .company-list{
118 | li{
119 | clear: both;
120 | overflow: hidden;
121 | cursor: pointer;
122 | div{
123 | width: 12px;
124 | height: 12px;
125 | // border: 2px solid #d1d1d1;
126 | border-radius: 6px;
127 | margin-bottom: 10px;
128 | float: right;
129 | }
130 |
131 | }
132 | }
133 | }
134 |
135 | .activeDot{
136 | background: #d1d1d1;
137 | }
138 | .defaultDot{
139 | border: 2px solid #d1d1d1;
140 | }
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "class-name": true,
4 | "comment-format": [
5 | true,
6 | "check-space"
7 | ],
8 | "curly": true,
9 | "eofline": true,
10 | "forin": true,
11 | "indent": [
12 | true,
13 | "spaces"
14 | ],
15 | "label-position": true,
16 | "label-undefined": true,
17 | "max-line-length": [
18 | true,
19 | 140
20 | ],
21 | "max-file-line-count": [
22 | true,
23 | 300
24 | ],
25 | "member-access": false,
26 | "member-ordering": [
27 | true,
28 | "public-before-private",
29 | "static-before-instance",
30 | "variables-before-functions"
31 | ],
32 | "no-arg": true,
33 | "no-bitwise": true,
34 | "no-console": [
35 | true,
36 | "debug",
37 | "info",
38 | "time",
39 | "timeEnd",
40 | "trace"
41 | ],
42 | "no-construct": true,
43 | "no-debugger": true,
44 | "no-duplicate-key": true,
45 | "no-duplicate-variable": true,
46 | "no-empty": true,
47 | "no-eval": true,
48 | "no-inferrable-types": [
49 | true,
50 | "ignore-params"
51 | ],
52 | "callable-types": true,
53 | "import-blacklist": [
54 | true,
55 | "rxjs"
56 | ],
57 | "import-spacing": true,
58 | "interface-over-type-literal": true,
59 | "no-empty-interface": true,
60 | "no-string-throw": true,
61 | "prefer-const": true,
62 | "typeof-compare": true,
63 | "unified-signatures": true,
64 | "no-shadowed-variable": false,
65 | "no-string-literal": true,
66 | "no-switch-case-fall-through": true,
67 | "no-trailing-whitespace": false,
68 | "no-unused-expression": true,
69 | "no-unused-variable": false,
70 | "no-unreachable": true,
71 | "no-use-before-declare": true,
72 | "no-var-keyword": true,
73 | "object-literal-sort-keys": false,
74 | "one-line": [
75 | true,
76 | "check-open-brace",
77 | "check-catch",
78 | "check-else",
79 | "check-finally",
80 | "check-whitespace"
81 | ],
82 | "quotemark": [
83 | true,
84 | "avoid-escape"
85 | ],
86 | "radix": true,
87 | "semicolon": true,
88 | "trailing-comma": [
89 | false,
90 | {
91 | "singleline": "never",
92 | "multiline": "always"
93 | }
94 | ],
95 | "triple-equals": [
96 | true,
97 | "allow-null-check"
98 | ],
99 | "typedef-whitespace": [
100 | true,
101 | {
102 | "call-signature": "nospace",
103 | "index-signature": "nospace",
104 | "parameter": "nospace",
105 | "property-declaration": "nospace",
106 | "variable-declaration": "nospace"
107 | }
108 | ],
109 | "variable-name": false,
110 | "whitespace": [
111 | true,
112 | "check-branch",
113 | "check-decl",
114 | "check-operator",
115 | "check-separator",
116 | "check-type"
117 | ],
118 | "directive-selector-name": [
119 | true,
120 | "camelCase"
121 | ],
122 | "component-selector-name": [
123 | false,
124 | "kebab-case"
125 | ],
126 | "directive-selector-type": [
127 | true,
128 | "attribute"
129 | ],
130 | "component-selector-type": [
131 | true,
132 | "element"
133 | ],
134 | "directive-selector-prefix": [
135 | false,
136 | ""
137 | ],
138 | "component-selector-prefix": [
139 | false,
140 | ""
141 | ],
142 | "use-input-property-decorator": true,
143 | "use-output-property-decorator": true,
144 | "use-host-property-decorator": true,
145 | "no-attribute-parameter-decorator": true,
146 | "no-input-rename": true,
147 | "no-output-rename": true,
148 | "no-forward-ref": true,
149 | "use-life-cycle-interface": true,
150 | "use-pipe-transform-interface": true,
151 | "pipe-naming": [
152 | true,
153 | "camelCase",
154 | "re"
155 | ],
156 | "component-class-suffix": true,
157 | "directive-class-suffix": true,
158 | "import-destructuring-spacing": true
159 | },
160 | "rulesDirectory": [
161 | "node_modules/codelyzer"
162 | ]
163 | }
--------------------------------------------------------------------------------
/src/app/pages/home/home-content/presentation-us/presentation-us.component.scss:
--------------------------------------------------------------------------------
1 | @media screen and(min-width:768px){
2 | .why-sz-top {
3 | height: 30%;
4 | padding-top: 3%;
5 |
6 | .why-tit{
7 | font-size: 33px;
8 | }
9 | .why-det{
10 | font-size: 15px;
11 | }
12 | .why-tit,
13 | .why-det {
14 | width: 1200px;
15 | padding: 0 15px;
16 | margin-left: auto;
17 | margin-right: auto;
18 | }
19 |
20 |
21 | }
22 | .why-sz-bottom {
23 | width: 1200px;
24 | margin: 0 auto;
25 | padding-top: 30px;
26 | height: 70%;
27 | }
28 | .choosed-common-style{
29 | .choosed-tit{
30 | font-size: 24px;
31 | .sp2{
32 | font-size: 29px;
33 | }
34 | }
35 | p{
36 | font-size: 14px;
37 | }
38 | }
39 |
40 | }
41 |
42 | @media screen and(max-width:767px){
43 | .why-sz-top {
44 | padding: 30px 20px;
45 | .why-tit{
46 | font-size: 20px;
47 | }
48 | .why-det{
49 | font-size: 12px;
50 | line-height: 1.6;
51 | }
52 | }
53 |
54 | .why-sz-bottom {
55 | width: 100%;
56 | padding: 0 10px;
57 | }
58 |
59 | .choosed-common-style{
60 | margin-top: 30px;
61 | .choosed-tit{
62 | font-size: 16px;
63 | .sp2{
64 | font-size: 18px;
65 | }
66 | }
67 | p{
68 | font-size: 12px;
69 | }
70 | }
71 | }
72 |
73 | .why-sz-top {
74 | width: 100%;
75 | background-image: url("../../../../../assets/images/presentatin_us.jpg");
76 | background-size: 100% 100%;
77 | background-attachment: fixed;
78 | text-align: center;
79 | .why-tit{
80 | line-height: 1.1;
81 | font-weight: 300;
82 | color: #fff;
83 | }
84 | .why-det{
85 | color: rgba(255, 255, 255, 0.9);
86 | margin-top: 30px;
87 | margin-bottom: 30px;
88 | line-height: 1.6;
89 | font-weight: 300;
90 | letter-spacing: 0.2px;
91 | }
92 |
93 | .middle-btn-wrap{
94 | margin: 0 auto;
95 | width: 300px;
96 | height: 35px;
97 | .more-btn,
98 | .buy-btn{
99 | width: 115px;
100 | height: 35px;
101 | font-size: 14px;
102 | border-radius: 5px;
103 | color: #fff;
104 | letter-spacing: 1px;
105 | border-bottom: 3px solid rgba(0,0,0,.2);
106 | display: inline-block;
107 | cursor: pointer;
108 | user-select: none;
109 | transition: all .75s ease;
110 | -moz-transition: all .75s ease;
111 | -webkit-transition: all .75s ease;
112 | -o-transition: all .75s ease;
113 | }
114 | .more-btn{
115 | border: 2px#fff solid;
116 | margin-right: 10px;
117 | line-height: 32px;
118 | -webkit-transition:color 0.28s ease;
119 | -moz-transition: color 0.28s ease;
120 | -o-transition: color 0.28s ease;
121 | transition: color 0.28s ease;
122 | &:hover{
123 | background: #fff;
124 | color:#000;
125 | -webkit-transition:color 0.28s ease;
126 | -moz-transition: color 0.28s ease;
127 | -o-transition: color 0.28s ease;
128 | transition: color 0.28s ease;
129 | }
130 | }
131 | .buy-btn{
132 | line-height: 35px;
133 | text-indent: 15px;
134 | background: #f98805;
135 | &:hover{
136 | background: #0061ae;
137 | color: #fff;
138 | text-indent: 10px;
139 | transition: all .75s ease;
140 | -moz-transition: all .75s ease;
141 | -webkit-transition: all .75s ease;
142 | -o-transition: all .75s ease;
143 | }
144 | .btn-arrows{
145 | text-indent: 0px;
146 | opacity: 0;
147 | transition: all .75s ease;
148 | -moz-transition: all .75s ease;
149 | -webkit-transition: all .75s ease;
150 | -o-transition: all .75s ease;
151 | }
152 | &:hover .btn-arrows {
153 | color: #fff;
154 | opacity: 1;
155 | text-indent: 7px;
156 | transition: all .75s ease;
157 | -moz-transition: all .75s ease;
158 | -webkit-transition: all .75s ease;
159 | -o-transition: all .75s ease;
160 | }
161 | }
162 |
163 | }
164 |
165 |
166 | }
167 |
168 |
169 | .choosed-common-style{
170 | margin-bottom: 30px;
171 | padding: 0 3px;
172 | .choosed-tit{
173 | line-height: 1.5;
174 | color: #de4217;
175 | &:after{
176 | content: "";
177 | margin: 6px 0 15px;
178 | width: 69px;
179 | height: 0;
180 | display: block;
181 | position: relative;
182 | border-bottom: 4px solid;
183 | }
184 | .sp2{
185 | font-weight: 800;
186 | color: #363636;
187 | letter-spacing: -1.5px;
188 | }
189 | }
190 | p{
191 | line-height: 1;
192 | margin-top: -5px;
193 | font-weight: 400;
194 | color: #707070;
195 | letter-spacing: -0.4px;
196 | font-family: 'Montserrat','Roboto', Helvetica, Arial, sans-serif;
197 | }
198 |
199 | }
200 |
201 | /* 为什么选择我们 */
202 | .why-choose-wrap{
203 | min-height: 1px;
204 | padding-left: 15px;
205 | padding-right: 15px;
206 |
207 | }
208 |
--------------------------------------------------------------------------------
/src/app/theme/scss/utilities/_mixin.scss:
--------------------------------------------------------------------------------
1 | // Mixins
2 | // --------------------------------------------------
3 |
4 |
5 | // Atoms
6 | // --------------------------------------------------
7 |
8 |
9 | // $Atoms
10 | // Extend atoms placeholder
11 | @mixin atoms($collection...) {
12 | @each $el in $collection {
13 | @extend %#{$el};
14 | }
15 | }
16 |
17 |
18 | // Spacing
19 | // --------------------------------------------------
20 |
21 | // $Spacing
22 | // @param $spacers - spacers list
23 | // Usage: spacing(mt-0, px-1)
24 | // ----------------------------------
25 | @mixin spacing($spacers...) {
26 | @each $spacer in $spacers {
27 | @extend %#{$spacer};
28 | }
29 | }
30 |
31 | // $Spacing-custom
32 | // @param $type - spacing type, margin, padding
33 | // @param $top $right $bottom $left - values
34 | // Usage: spacing-custom(padding, 1rem, $left: 1rem)
35 | // ----------------------------------
36 | @mixin spacing-custom($type, $top: null, $right: null, $bottom: null, $left: null) {
37 | #{$type}-top: $top;
38 | #{$type}-right: $right;
39 | #{$type}-bottom: $bottom;
40 | #{$type}-left: $left;
41 | }
42 |
43 |
44 | // Sizing
45 | // --------------------------------------------------
46 |
47 |
48 | // $Sizing
49 | // @param $size - sizes list
50 | // Usage: sizing(w-25, w-100)
51 | // ----------------------------------
52 | @mixin sizing($sizes...) {
53 | @each $size in $sizes {
54 | @extend %#{$size};
55 | }
56 | }
57 |
58 | // $Sizing-custom
59 | // @param $width - width
60 | // @param $height - height
61 | // Usage: sizing-custom(2rem)
62 | // ----------------------------------
63 | @mixin sizing-custom($width: null, $height: null) {
64 | width: $width;
65 | height: $height;
66 | }
67 |
68 |
69 | // Grid
70 | // --------------------------------------------------
71 |
72 |
73 | // $Grid
74 | // @param $cols - column list
75 | // Usage: grid(col-md-7, col-md-offset-1)
76 | // ----------------------------------
77 | @mixin grid($cols...) {
78 | @each $col in $cols {
79 | @extend %#{$col};
80 | }
81 | }
82 |
83 |
84 | // Flex
85 | // --------------------------------------------------
86 |
87 |
88 | // $Flex box
89 | // @param $utilities - utilitie placeholder
90 | // Usage: flex-box(d-flex)
91 | // ----------------------------------
92 | @mixin flex-box($utilities...) {
93 | @include atoms($utilities...);
94 | }
95 |
96 |
97 | // Font-size
98 | // --------------------------------------------------
99 |
100 |
101 | // $Font size
102 | // @param $size - font size
103 | // Usage: font-size(h1) font-size(fs-13)
104 | // ----------------------------------
105 | @mixin font-size($size) {
106 | @include atoms($size);
107 | }
108 |
109 |
110 | // Colors
111 | // --------------------------------------------------
112 |
113 |
114 | // $Color
115 | // @param $color - text color and bg color
116 | // Usage: colors(text-gray-light)
117 | // ----------------------------------
118 | @mixin colors($color...) {
119 | @include atoms($color...);
120 | }
121 |
122 |
123 | // Text
124 | // --------------------------------------------------
125 |
126 |
127 | // $Text
128 | // @param $props - text
129 | // Usage: text(text-left)
130 | // ----------------------------------
131 | @mixin text($props...) {
132 | @include atoms($props...);
133 | }
134 |
135 | // Text
136 | // --------------------------------------------------
137 |
138 |
139 | // $Display
140 | // @param $display - display
141 | // Usage: display(d-flex)
142 | // ----------------------------------
143 | @mixin display($display) {
144 | @include atoms($display);
145 | }
146 |
147 |
148 | // Align
149 | // --------------------------------------------------
150 |
151 |
152 | // $Align
153 | // @param $align - align
154 | // Usage: align(align-middle)
155 | // ----------------------------------
156 | @mixin align($align) {
157 | @include atoms($align);
158 | }
159 |
160 |
161 | // Variant
162 | // --------------------------------------------------
163 |
164 |
165 | // $Variant
166 | // @param $variant - variant, Contains the following attributes:
167 | // background-color border-color color
168 | // Usage: variant(bg-primary, border-success, color-info)
169 | // ----------------------------------
170 | @mixin variant($variant...) {
171 | @include atoms($variant...);
172 | }
173 |
174 |
175 | // Border
176 | // --------------------------------------------------
177 |
178 |
179 | // $Border
180 | // @param $border - style, width, radius
181 | // Usage: border(border-1, border-solid, rounded)
182 | // ----------------------------------
183 | @mixin border($border...) {
184 | @include atoms($border...);
185 | }
186 |
187 |
188 |
189 | // Button
190 | // --------------------------------------------------
191 |
192 |
193 | // %Button
194 | // @param $size - button size
195 | // @param $variant - button variant
196 | // Usage:
197 | // button(
198 | // $size: (fs-15, line-height-38),
199 | // $variant: (text-success, border-success)
200 | // );
201 | // ----------------------------------
202 | @mixin button($size: null, $variant: null) {
203 | @extend %btn-base;
204 |
205 | @include atoms($size...);
206 | @include variant($variant...);
207 | }
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 | // Reset form input border radius
217 | @mixin form-border-radius($elem, $nth, $dir) {
218 | #{$elem}:nth-child(#{$nth}) {
219 | input {
220 | @if $dir == top {
221 | border-radius: $btn-default-border-radius $btn-default-border-radius 0 0;
222 | } @else if $dir == bottom {
223 | border-radius: 0 0 $btn-default-border-radius $btn-default-border-radius;
224 | }
225 | }
226 | }
227 | }
228 |
229 | // Position
230 | // @param position, $top, $left, $right, $bottom - Position
231 | // ----------------------------------
232 | @mixin position($position, $top: null, $left: null, $right: null, $bottom: null) {
233 | $list: (top: $top, left: $left, right: $right, bottom: $bottom);
234 |
235 | position: $position;
236 |
237 | @each $k, $v in $list {
238 | @if $v != null {
239 | #{$k}:$v;
240 | }
241 | }
242 | }
243 |
--------------------------------------------------------------------------------
/src/app/theme/scss/utilities/_config.scss:
--------------------------------------------------------------------------------
1 | // Variables
2 | // --------------------------------------------------
3 |
4 |
5 | // $Colors
6 | // ----------------------------------
7 | $gray-base: #000 !default;
8 | $gray-darker: lighten($gray-base, 13.5%) !default; // #222
9 | $gray-dark: lighten($gray-base, 20%) !default; // #333
10 | $gray: lighten($gray-base, 60.8%) !default; // #9b9b9b
11 | $gray-light: lighten($gray-base, 86.5%) !default; // #dddddd
12 | $gray-lighter: lighten($gray-base, 95%) !default; // #f7f7f7
13 |
14 | $primary: #ea6f5a !default;
15 | $brand-success: #00bb29 !default;
16 | $brand-info: #498ad5 !default;
17 | $brand-warning: #f0ad4e !default;
18 | $brand-danger: #f53d3d !default;
19 |
20 | // $Scaffolding
21 | // ----------------------------------
22 | // Background color for ``.
23 | $body-bg: #fff !default;
24 | // Global text color on ``.
25 | $text-color: $gray-dark !default;
26 | // Global textual link color.
27 | $link-color: $primary !default;
28 | // Link hover color set via `darken()` function.
29 | $link-hover-color: darken($link-color, 15%) !default;
30 | // Link hover decoration.
31 | $link-hover-decoration: underline !default;
32 |
33 | // $Typography
34 | // ----------------------------------
35 | $font-family-base: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif !default;
36 | // Font size of the root html
37 | $font-size-root: 62.5% !default;
38 | // 1.4rem == 14px
39 | $font-size-base: 1.4rem !default;
40 |
41 | $line-height-base: 1.5 !default;
42 | $line-height-sm: 1 !default;
43 | $line-height-lg: 2 !default;
44 |
45 | $headings: (
46 | h1: 3.6rem,
47 | h2: 3rem,
48 | h3: 2.4rem,
49 | h4: 1.8rem,
50 | h5: $font-size-base,
51 | h6: 1.2rem
52 | ) !default;
53 |
54 | // $Border
55 | // ----------------------------------
56 | $border-radius-base: .4rem !default;
57 | $border-radius-sm: 1rem !default;
58 | $border-radius-md: 2rem !default;
59 | $border-radius-lg: 4rem !default;
60 |
61 | // $Iconography
62 | // ----------------------------------
63 | $icon-font-path: "/assets/fonts/" !default;
64 |
65 | // Spacing
66 | // ----------------------------------
67 | $spacer: 1rem !default;
68 | $spacer-x: $spacer !default;
69 | $spacer-y: $spacer !default;
70 |
71 | $spacers: (
72 | 0: (
73 | x: 0,
74 | y: 0
75 | ),
76 | 1: (
77 | x: ($spacer-x * .5),
78 | y: ($spacer-y * .5)
79 | ),
80 | 2: (
81 | x: $spacer-x,
82 | y: $spacer-y
83 | ),
84 | 3: (
85 | x: ($spacer-x * 1.5),
86 | y: ($spacer-y * 1.5)
87 | ),
88 | 4: (
89 | x: ($spacer-x * 2),
90 | y: ($spacer-y * 2)
91 | ),
92 | 5: (
93 | x: ($spacer-x * 2.5),
94 | y: ($spacer-y * 2.5)
95 | ),
96 | 6: (
97 | x: ($spacer-x * 3),
98 | y: ($spacer-y * 3)
99 | )
100 | ) !default;
101 |
102 | // Sizes
103 | // ----------------------------------
104 | $sizes: (
105 | 25: 25%,
106 | 33: 33.33333%,
107 | 50: 50%,
108 | 66: 66.66667%,
109 | 75: 75%,
110 | 100: 100%
111 | ) !default;
112 |
113 | // $Container max widths
114 | // ----------------------------------
115 | $container-widths: (
116 | sm: 54rem,
117 | md: 72rem,
118 | lg: 96rem,
119 | xl: 114rem
120 | ) !default;
121 |
122 | // $Screen breakpoints
123 | // Adapting to different screen sizes, for use in media queries
124 | // ----------------------------------
125 | $screen-breakpoints: (
126 | xs: 0,
127 | sm: 57.6rem,
128 | md: 76.8rem,
129 | lg: 99.2rem,
130 | xl: 120rem
131 | ) !default;
132 |
133 |
134 | // Components
135 | // --------------------------------------------------
136 |
137 |
138 | // Nav
139 | // ----------------------------------
140 | $nav-bar-height: 5.6rem !default;
141 | $nav-bar-min-width: 76.8rem !default;
142 | $nav-bar-max-width: 144rem !default;
143 |
144 | // Btn
145 | // ----------------------------------
146 | $btn-default-height: 3.8rem !default;
147 | $btn-default-margin-left: 1.5rem !default;
148 | $btn-default-padding-left: 1.5rem !default;
149 | $btn-default-margin: .8rem $btn-default-margin-left !default;
150 | $btn-default-border-radius: .4rem !default;
151 | $btn-default-font-size: 1.5rem !default;
152 |
153 | // Card
154 | // ----------------------------------
155 | $card-box-shadow: 0 0 .8rem rgba(0,0,0,.1) !default;
156 |
157 | // Avatar
158 | // ----------------------------------
159 | $avatar-default-font-size: 1.3rem !default;
160 | $avatar-name-font-size: 1.6rem !default;
161 |
162 | // Icon
163 | // ----------------------------------
164 | $icon-font-size: 2rem !default;
165 |
166 | // Article
167 | // ----------------------------------
168 | $post-limit-width: 62rem !default;
169 | $p-font-size: 1.6rem !default;
170 | $p-margin-bottom: 2.5rem !default;
171 | $p-line-height: 1.7 !default;
172 | $p-font-weight: 400 !default;
173 |
174 |
175 | // Pages
176 | // src/app/pages
177 | // --------------------------------------------------
178 |
179 |
180 | // $Note
181 | // src/app/pages/note
182 | // ----------------------------------
183 |
184 | // @prop Post content width
185 | $note-post-width: 62rem !default;
186 |
187 | // $Collection
188 | // src/app/pages/collection
189 | // ----------------------------------
190 |
191 | // @prop Avatar width
192 | $collection-avatar-width: 8rem !default;
193 | // @prop Avatar height
194 | $collection-avatar-height: $collection-avatar-width !default;
195 | // @prop button width
196 | $collection-btn-width: 10rem !default;
197 | // @prop button width
198 | $collection-btn-height: 3.8rem !default;
199 |
200 |
--------------------------------------------------------------------------------
/src/app/pages/home/home-content/slideshow/slideshow.component.ts:
--------------------------------------------------------------------------------
1 | import { style } from '@angular/animations';
2 | import { Component, OnInit, ElementRef, ViewChild, Renderer2 } from '@angular/core';
3 |
4 | @Component({
5 | selector: 'slideshow',
6 | templateUrl: './slideshow.component.html',
7 | styleUrls: ['./slideshow.component.scss']
8 | })
9 | export class SlideshowComponent implements OnInit {
10 |
11 | /**
12 | * 步骤：
13 | * 1. 确定是查看下一张图片 add() 还是上一张 reduce()
14 | * 2. 设置下一张图片的 frontIndex 或上一张的 nextIndex, setFrontOrNextIndex()
15 | * 3. 设置背景图 changeBg()
16 | */
17 |
18 | @ViewChild('firSlider') firSlider: ElementRef;
19 | @ViewChild('secSlider') secSlider: ElementRef;
20 | @ViewChild('thiSlider') thiSlider: ElementRef;
21 | @ViewChild('fouSlider') fouSlider: ElementRef;
22 |
23 | index : number = 0;
24 | private frontIndex : number;
25 | private nextIndex : number;
26 |
27 | add(){
28 | this.setFrontOrNextIndex(true);
29 | this.index >= 3 ? this.index = -1 : null
30 | this.index += 1;
31 | this.changeBg(true);
32 | }
33 |
34 | reduce(){
35 | this.setFrontOrNextIndex(false);
36 | this.index <= 0 ? this.index = 4 : null
37 | this.index -= 1;
38 | this.changeBg(false);
39 | }
40 |
41 | /**
42 | * @param flag boolean 切换图片
43 | */
44 | changeBg(flag:boolean){
45 | this.renderer2.removeClass(this.firSlider.nativeElement, "default-left");
46 | this.upDateInterval();
47 | let allSlider = [ this.firSlider, this.secSlider, this.thiSlider, this.fouSlider ];
48 | allSlider.forEach((item, index) => {
49 | this.resetClass(item);
50 | this.index == index ? flag ? this.renderer2.addClass(item.nativeElement, "next-in")
51 | : this.renderer2.addClass(item.nativeElement, "front-in")
52 | : null;
53 | })
54 |
55 | flag ? this.renderer2.addClass(allSlider[this.frontIndex].nativeElement, "next-leave")
56 | : this.renderer2.addClass(allSlider[this.nextIndex].nativeElement, "front-leave");
57 | this.innerAnimat(flag);
58 | }
59 |
60 | /**
61 | *
62 | * @param val 要切换到的index ,是子组件切换轮播图的按钮传过来的数据
63 | */
64 | getIndex(val){
65 | let flag : boolean;
66 | if(this.index === val){
67 | return;
68 | }else if( this.index > val ){
69 | this.setFrontOrNextIndex(false);
70 | flag = false;
71 | }else{
72 | this.setFrontOrNextIndex(true);
73 | flag = true;
74 | }
75 | this.index = val;
76 | this.changeBg(flag);
77 | }
78 |
79 | /**
80 | * 定时自动切换
81 | */
82 | private autoTimer;
83 |
84 | setAutoChange(){
85 | this.autoTimer = setInterval(()=>{
86 | this.add();
87 | }, 4000);
88 | }
89 |
90 | clearAutoChange(){
91 | clearInterval(this.autoTimer);
92 | }
93 |
94 | upDateInterval(){
95 | this.clearAutoChange();
96 | this.setAutoChange();
97 | }
98 |
99 | setFrontOrNextIndex(flag){
100 | flag ? this.frontIndex = this.index : this.nextIndex = this.index;
101 | }
102 |
103 | /**
104 | *
105 | * @param item element 要去除样式的元素
106 | */
107 | resetClass(item){
108 | let classArr = ["next-in", "next-leave", "front-in", "front-leave"];
109 | classArr.forEach(classItem =>{
110 | this.renderer2.removeClass(item.nativeElement, classItem);
111 | })
112 | }
113 |
114 | /**
115 | * 轮播图里面的动画
116 | */
117 |
118 | @ViewChild('firTit') firTit: ElementRef;
119 | @ViewChild('firDet') firDet: ElementRef;
120 | @ViewChild('firBtn') firBtn: ElementRef;
121 |
122 | @ViewChild('secTit') secTit: ElementRef;
123 | @ViewChild('secDet') secDet: ElementRef;
124 | @ViewChild('secBtn') secBtn: ElementRef;
125 |
126 | @ViewChild('thiTit') thiTit: ElementRef;
127 | @ViewChild('thiDet') thiDet: ElementRef;
128 | @ViewChild('thiBtn') thiBtn: ElementRef;
129 |
130 | @ViewChild('fouTit') fouTit: ElementRef;
131 | @ViewChild('fouDet') fouDet: ElementRef;
132 | @ViewChild('fouBtn') fouBtn: ElementRef;
133 |
134 | private animateArr = [
135 | "a-bounceinB", "a-fadeinT",
136 | "a-flipinX", "a-rotateinLB",
137 | "a-bounceinL", "a-fadeinL",
138 | "a-fadeinL", "a-fadeinL",
139 | "a-fadeinT", "a-fadeinL"
140 | ];
141 | private newAnimate : string;
142 | private oldAnimate : string;
143 | private pageTimer = {}
144 |
145 | innerAnimat(flag){
146 | this.oldAnimate = this.newAnimate;
147 | this.newAnimate = this.animateArr[this.rd()];
148 | for(let item in this.pageTimer){
149 | clearTimeout(this.pageTimer[item]);
150 | }
151 | this.cleanOrAddClass(this.index, true);
152 | if(flag === 'default'){ return }
153 | if(flag){
154 | this.cleanOrAddClass(this.frontIndex, false);
155 | }else{
156 | this.cleanOrAddClass(this.nextIndex, false);
157 | }
158 | }
159 |
160 | cleanOrAddClass(arrIndex, flag){
161 | let domArr = [
162 | [this.firTit,this.firDet,this.firBtn],
163 | [this.secTit,this.secDet,this.secBtn],
164 | [this.thiTit,this.thiDet,this.thiBtn],
165 | [this.fouTit,this.fouDet,this.fouBtn],
166 | ]
167 | domArr[arrIndex].forEach( (item, index) =>{
168 | if(flag){
169 | // index === 0 ? this.addAnimate(item)
170 | // : index === 1 ? setTimeout(()=>{ this.addAnimate(item) },550)
171 | // : setTimeout(()=>{ this.addAnimate(item) },900)
172 | switch(index){
173 | case 0 : this.addAnimate(item); break;
174 | case 1 : this.pageTimer["timer1"] = setTimeout(()=>{this.addAnimate(item)}, 550); break;
175 | case 2 : this.pageTimer["timer2"] = setTimeout(()=>{this.addAnimate(item)}, 900); break;
176 | default: break;
177 | }
178 | }else{
179 | this.removeAnimate(item)
180 | }
181 | })
182 | }
183 |
184 | addAnimate (ele) {
185 | this.renderer2.addClass(ele.nativeElement, this.newAnimate);
186 | }
187 |
188 | removeAnimate(ele){
189 | this.renderer2.removeClass(ele.nativeElement, this.oldAnimate);
190 | }
191 |
192 | rd(){
193 | return Math.floor(Math.random()*10);
194 | }
195 |
196 | goDown(){
197 | let ele = document.documentElement || document.body;
198 | let willScrTop = ele.offsetHeight - 58;
199 | let offY = window.pageYOffset;
200 | var timmer = requestAnimationFrame(function fn(){
201 | offY = offY + 50;
202 | if(willScrTop> offY){
203 | window.scrollTo(0,offY);
204 | setTimeout(()=>{
205 | timmer=requestAnimationFrame(fn)
206 | },1)
207 | }else{
208 | window.scrollTo(0,willScrTop);
209 | }
210 | })
211 | }
212 |
213 | ngOnInit() {
214 | this.innerAnimat("default");
215 | this.setAutoChange();
216 | }
217 |
218 | constructor( private renderer2 : Renderer2) { }
219 |
220 |
221 | }
222 |
--------------------------------------------------------------------------------
/src/app/theme/scss/libs/_iconfont.scss:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: iconfont;
3 | src: url($icon-font-path + "iconfont/iconfont.eot");
4 | src: url($icon-font-path + "iconfont/iconfont.eot") format("embedded-opentype"), url($icon-font-path + "iconfont/iconfont.woff") format("woff"), url($icon-font-path + "iconfont/iconfont.ttf") format("truetype"), url($icon-font-path + "iconfont/iconfont.svg") format("svg")
5 | }
6 |
7 | .iconfont {
8 | font-family: iconfont!important;
9 | font-size: inherit;
10 | font-style: normal;
11 | font-weight: 400!important;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale
14 | }
15 |
16 | .ic-info:before {
17 | content: "\E60C"
18 | }
19 |
20 | .ic-arrow:before {
21 | content: "\E61E"
22 | }
23 |
24 | .ic-search:before {
25 | content: "\E618"
26 | }
27 |
28 | .ic-qq_connect:before {
29 | content: "\E603"
30 | }
31 |
32 | .ic-douban:before {
33 | content: "\E601"
34 | }
35 |
36 | .ic-location:before {
37 | content: "\E627"
38 | }
39 |
40 | .ic-next:before {
41 | content: "\E62D"
42 | }
43 |
44 | .ic-previous:before {
45 | content: "\E62F"
46 | }
47 |
48 | .ic-unfollow:before {
49 | content: "\E631"
50 | }
51 |
52 | .ic-phone:before {
53 | content: "\E602"
54 | }
55 |
56 | .ic-catalog:before {
57 | content: "\E694"
58 | }
59 |
60 | .ic-search-history:before {
61 | content: "\E640"
62 | }
63 |
64 | .ic-share-more:before {
65 | content: "\E623"
66 | }
67 |
68 | .ic-work:before {
69 | content: "\E628"
70 | }
71 |
72 | .ic-share-wechat:before {
73 | content: "\E625"
74 | }
75 |
76 | .ic-education:before {
77 | content: "\E62B"
78 | }
79 |
80 | .ic-social:before {
81 | content: "\E62A"
82 | }
83 |
84 | .ic-question:before {
85 | content: "\E60D"
86 | }
87 |
88 | .ic-google_oauth2:before {
89 | content: "\E600"
90 | }
91 |
92 | .ic-share-weibo:before {
93 | content: "\E626"
94 | }
95 |
96 | .ic-edit-s:before {
97 | content: "\E619"
98 | }
99 |
100 | .ic-wechat:before {
101 | content: "\E604"
102 | }
103 |
104 | .ic-weibo:before {
105 | content: "\E605"
106 | }
107 |
108 | .ic-hot:before {
109 | content: "\E607"
110 | }
111 |
112 | .ic-feed:before {
113 | content: "\E608"
114 | }
115 |
116 | .ic-latestcomments:before {
117 | content: "\E609"
118 | }
119 |
120 | .ic-articles:before {
121 | content: "\E60A"
122 | }
123 |
124 | .ic-official:before {
125 | content: "\E60B"
126 | }
127 |
128 | .ic-write:before {
129 | content: "\E60E"
130 | }
131 |
132 | .ic-discover-collections:before {
133 | content: "\E61A"
134 | }
135 |
136 | .ic-discover-user:before {
137 | content: "\E61B"
138 | }
139 |
140 | .ic-back:before {
141 | content: "\E61C"
142 | }
143 |
144 | .ic-article-mark:before {
145 | content: "\E629"
146 | }
147 |
148 | .ic-article-like:before {
149 | content: "\E62C"
150 | }
151 |
152 | .ic-collections-followed:before {
153 | content: "\E62E"
154 | }
155 |
156 | .ic-collection:before {
157 | content: "\E615"
158 | }
159 |
160 | .ic-settings-money:before {
161 | content: "\E63A"
162 | }
163 |
164 | .ic-settings-profile:before {
165 | content: "\E63B"
166 | }
167 |
168 | .ic-settings-basic:before {
169 | content: "\E63C"
170 | }
171 |
172 | .ic-settings-verify:before {
173 | content: "\E63D"
174 | }
175 |
176 | .ic-settings-account:before {
177 | content: "\E63E"
178 | }
179 |
180 | .ic-settings-block:before {
181 | content: "\E63F"
182 | }
183 |
184 | .ic-search-collection:before {
185 | content: "\E641"
186 | }
187 |
188 | .ic-search-notebook:before {
189 | content: "\E643"
190 | }
191 |
192 | .ic-money:before {
193 | content: "\E606"
194 | }
195 |
196 | .ic-comment-emotions:before {
197 | content: "\E64A"
198 | }
199 |
200 | .ic-comment-at:before {
201 | content: "\E64B"
202 | }
203 |
204 | .ic-navigation-night:before {
205 | content: "\E64D"
206 | }
207 |
208 | .ic-navigation-mark:before {
209 | content: "\E64F"
210 | }
211 |
212 | .ic-navigation-profile:before {
213 | content: "\E650"
214 | }
215 |
216 | .ic-navigation-help:before {
217 | content: "\E651"
218 | }
219 |
220 | .ic-navigation-settings:before {
221 | content: "\E652"
222 | }
223 |
224 | .ic-navigation-wallet:before {
225 | content: "\E653"
226 | }
227 |
228 | .ic-navigation-like:before {
229 | content: "\E654"
230 | }
231 |
232 | .ic-navigation-feedback:before {
233 | content: "\E655"
234 | }
235 |
236 | .ic-filter:before {
237 | content: "\E657"
238 | }
239 |
240 | .ic-subscribed:before {
241 | content: "\E630"
242 | }
243 |
244 | .ic-fail:before {
245 | content: "\E65B"
246 | }
247 |
248 | .ic-addcollection:before {
249 | content: "\E65C"
250 | }
251 |
252 | .ic-phonenumber:before {
253 | content: "\E65D"
254 | }
255 |
256 | .ic-user:before {
257 | content: "\E65E"
258 | }
259 |
260 | .ic-list-comments:before {
261 | content: "\E660"
262 | }
263 |
264 | .ic-list-like:before {
265 | content: "\E661"
266 | }
267 |
268 | .ic-list-read:before {
269 | content: "\E662"
270 | }
271 |
272 | .ic-list-money:before {
273 | content: "\E60F"
274 | }
275 |
276 | .ic-followed:before {
277 | content: "\E610"
278 | }
279 |
280 | .ic-follow:before {
281 | content: "\E611"
282 | }
283 |
284 | .ic-friends:before {
285 | content: "\E617"
286 | }
287 |
288 | .ic-like-active:before {
289 | content: "\E613"
290 | }
291 |
292 | .ic-like:before {
293 | content: "\E663"
294 | }
295 |
296 | .ic-navigation-signout:before {
297 | content: "\E61D"
298 | }
299 |
300 | .ic-others:before {
301 | content: "\E633"
302 | }
303 |
304 | .ic-requests:before {
305 | content: "\E635"
306 | }
307 |
308 | .ic-follows:before {
309 | content: "\E636"
310 | }
311 |
312 | .ic-chats:before {
313 | content: "\E637"
314 | }
315 |
316 | .ic-comments:before {
317 | content: "\E656"
318 | }
319 |
320 | .ic-likes:before {
321 | content: "\E664"
322 | }
323 |
324 | .ic-woman:before {
325 | content: "\E645"
326 | }
327 |
328 | .ic-man:before {
329 | content: "\E646"
330 | }
331 |
332 | .ic-password:before {
333 | content: "\E614"
334 | }
335 |
336 | .ic-ios:before {
337 | content: "\E612"
338 | }
339 |
340 | .ic-error:before {
341 | content: "\E648"
342 | }
343 |
344 | .ic-qrcode:before {
345 | content: "\E649"
346 | }
347 |
348 | .ic-android:before {
349 | content: "\E65F"
350 | }
351 |
352 | .ic-verify:before {
353 | content: "\E61F"
354 | }
355 |
356 | .ic-show:before {
357 | content: "\E621"
358 | }
359 |
360 | .ic-hide:before {
361 | content: "\E622"
362 | }
363 |
364 | .ic-previous-s:before {
365 | content: "\E647"
366 | }
367 |
368 | .ic-next-s:before {
369 | content: "\E659"
370 | }
371 |
372 | .ic-go:before {
373 | content: "\E65A"
374 | }
375 |
376 | .ic-none:before {
377 | content: "\E665"
378 | }
379 |
380 | .ic-zan-active:before {
381 | content: "\E638"
382 | }
383 |
384 | .ic-comment:before {
385 | content: "\E639"
386 | }
387 |
388 | .ic-zan:before {
389 | content: "\E666"
390 | }
391 |
392 | .ic-share:before {
393 | content: "\E683"
394 | }
395 |
396 | .ic-backtop:before {
397 | content: "\E684"
398 | }
399 |
400 | .ic-addcollectionmodal:before {
401 | content: "\E668"
402 | }
403 |
404 | .ic-link:before {
405 | content: "\E616"
406 | }
407 |
408 | .ic-more:before {
409 | content: "\E620"
410 | }
411 |
412 | .ic-report:before {
413 | content: "\E624"
414 | }
415 |
416 | .ic-block:before {
417 | content: "\E632"
418 | }
419 |
420 | .ic-delete:before {
421 | content: "\E66B"
422 | }
423 |
424 | .ic-email:before {
425 | content: "\E66C"
426 | }
427 |
428 | .ic-recommend:before {
429 | content: "\E66D"
430 | }
431 |
432 | .ic-city:before {
433 | content: "\E66E"
434 | }
435 |
436 | .ic-recommend-collection:before {
437 | content: "\E66F"
438 | }
439 |
440 | .ic-recommend-user:before {
441 | content: "\E670"
442 | }
443 |
444 | .ic-article-s:before {
445 | content: "\E671"
446 | }
447 |
448 | .ic-collection-s:before {
449 | content: "\E672"
450 | }
451 |
452 | .ic-subcomment:before {
453 | content: "\E698"
454 | }
455 |
456 | .ic-navigation-discover:before {
457 | content: "\E69A"
458 | }
459 |
460 | .ic-navigation-notification:before {
461 | content: "\E69B"
462 | }
463 |
464 | .ic-navigation-follow:before {
465 | content: "\E69C"
466 | }
467 |
468 | .ic-navigation-download:before {
469 | content: "\E69D"
470 | }
471 |
472 | .ic-successed:before {
473 | content: "\E69E"
474 | }
475 |
476 | .ic-unblock:before {
477 | content: "\E6A2"
478 | }
479 |
480 | .ic-applying:before {
481 | content: "\E6A7"
482 | }
483 |
484 | .ic-addpeople:before {
485 | content: "\E6A8"
486 | }
487 |
488 | .ic-mark:before {
489 | content: "\E6AF"
490 | }
491 |
492 | .ic-search-user:before {
493 | content: "\E6B0"
494 | }
495 |
496 | .ic-search-note:before {
497 | content: "\E6B1"
498 | }
499 |
500 | .ic-picture:before {
501 | content: "\E6B2"
502 | }
503 |
504 | .ic-navigation-mode:before {
505 | content: "\E6B5"
506 | }
507 |
508 | .ic-mark-active:before {
509 | content: "\E6B7"
510 | }
511 |
512 | .ic-note-requests:before {
513 | content: "\E6BC"
514 | }
515 |
--------------------------------------------------------------------------------
/src/app/theme/scss/libs/_normalize.scss:
--------------------------------------------------------------------------------
1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /* Document
4 | ========================================================================== */
5 |
6 | /**
7 | * 1. Correct the line height in all browsers.
8 | * 2. Prevent adjustments of font size after orientation changes in
9 | * IE on Windows Phone and in iOS.
10 | */
11 |
12 | html {
13 | line-height: 1.15; /* 1 */
14 | -ms-text-size-adjust: 100%; /* 2 */
15 | -webkit-text-size-adjust: 100%; /* 2 */
16 | }
17 |
18 | /* Sections
19 | ========================================================================== */
20 |
21 | /**
22 | * Remove the margin in all browsers (opinionated).
23 | */
24 |
25 | body {
26 | margin: 0;
27 | }
28 |
29 | /**
30 | * Add the correct display in IE 9-.
31 | */
32 |
33 | article,
34 | aside,
35 | footer,
36 | header,
37 | nav,
38 | section {
39 | display: block;
40 | }
41 |
42 | /**
43 | * Correct the font size and margin on `h1` elements within `section` and
44 | * `article` contexts in Chrome, Firefox, and Safari.
45 | */
46 |
47 | h1 {
48 | font-size: 2em;
49 | margin: 0.67em 0;
50 | }
51 |
52 | /* Grouping content
53 | ========================================================================== */
54 |
55 | /**
56 | * Add the correct display in IE 9-.
57 | * 1. Add the correct display in IE.
58 | */
59 |
60 | figcaption,
61 | figure,
62 | main { /* 1 */
63 | display: block;
64 | }
65 |
66 | /**
67 | * Add the correct margin in IE 8.
68 | */
69 |
70 | figure {
71 | margin: 1em 40px;
72 | }
73 |
74 | /**
75 | * 1. Add the correct box sizing in Firefox.
76 | * 2. Show the overflow in Edge and IE.
77 | */
78 |
79 | hr {
80 | box-sizing: content-box; /* 1 */
81 | height: 0; /* 1 */
82 | overflow: visible; /* 2 */
83 | }
84 |
85 | /**
86 | * 1. Correct the inheritance and scaling of font size in all browsers.
87 | * 2. Correct the odd `em` font sizing in all browsers.
88 | */
89 |
90 | pre {
91 | font-family: monospace, monospace; /* 1 */
92 | font-size: 1em; /* 2 */
93 | }
94 |
95 | /* Text-level semantics
96 | ========================================================================== */
97 |
98 | /**
99 | * 1. Remove the gray background on active links in IE 10.
100 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
101 | */
102 |
103 | a {
104 | background-color: transparent; /* 1 */
105 | -webkit-text-decoration-skip: objects; /* 2 */
106 | }
107 |
108 | /**
109 | * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
110 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
111 | */
112 |
113 | abbr[title] {
114 | border-bottom: none; /* 1 */
115 | text-decoration: underline; /* 2 */
116 | text-decoration: underline dotted; /* 2 */
117 | }
118 |
119 | /**
120 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
121 | */
122 |
123 | b,
124 | strong {
125 | font-weight: inherit;
126 | }
127 |
128 | /**
129 | * Add the correct font weight in Chrome, Edge, and Safari.
130 | */
131 |
132 | b,
133 | strong {
134 | font-weight: bolder;
135 | }
136 |
137 | /**
138 | * 1. Correct the inheritance and scaling of font size in all browsers.
139 | * 2. Correct the odd `em` font sizing in all browsers.
140 | */
141 |
142 | code,
143 | kbd,
144 | samp {
145 | font-family: monospace, monospace; /* 1 */
146 | font-size: 1em; /* 2 */
147 | }
148 |
149 | /**
150 | * Add the correct font style in Android 4.3-.
151 | */
152 |
153 | dfn {
154 | font-style: italic;
155 | }
156 |
157 | /**
158 | * Add the correct background and color in IE 9-.
159 | */
160 |
161 | mark {
162 | background-color: #ff0;
163 | color: #000;
164 | }
165 |
166 | /**
167 | * Add the correct font size in all browsers.
168 | */
169 |
170 | small {
171 | font-size: 80%;
172 | }
173 |
174 | /**
175 | * Prevent `sub` and `sup` elements from affecting the line height in
176 | * all browsers.
177 | */
178 |
179 | sub,
180 | sup {
181 | font-size: 75%;
182 | line-height: 0;
183 | position: relative;
184 | vertical-align: baseline;
185 | }
186 |
187 | sub {
188 | bottom: -0.25em;
189 | }
190 |
191 | sup {
192 | top: -0.5em;
193 | }
194 |
195 | /* Embedded content
196 | ========================================================================== */
197 |
198 | /**
199 | * Add the correct display in IE 9-.
200 | */
201 |
202 | audio,
203 | video {
204 | display: inline-block;
205 | }
206 |
207 | /**
208 | * Add the correct display in iOS 4-7.
209 | */
210 |
211 | audio:not([controls]) {
212 | display: none;
213 | height: 0;
214 | }
215 |
216 | /**
217 | * Remove the border on images inside links in IE 10-.
218 | */
219 |
220 | img {
221 | border-style: none;
222 | }
223 |
224 | /**
225 | * Hide the overflow in IE.
226 | */
227 |
228 | svg:not(:root) {
229 | overflow: hidden;
230 | }
231 |
232 | /* Forms
233 | ========================================================================== */
234 |
235 | /**
236 | * 1. Change the font styles in all browsers (opinionated).
237 | * 2. Remove the margin in Firefox and Safari.
238 | */
239 |
240 | button,
241 | input,
242 | optgroup,
243 | select,
244 | textarea {
245 | font-family: sans-serif; /* 1 */
246 | font-size: 100%; /* 1 */
247 | line-height: 1.15; /* 1 */
248 | margin: 0; /* 2 */
249 | }
250 |
251 | /**
252 | * Show the overflow in IE.
253 | * 1. Show the overflow in Edge.
254 | */
255 |
256 | button,
257 | input { /* 1 */
258 | overflow: visible;
259 | }
260 |
261 | /**
262 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
263 | * 1. Remove the inheritance of text transform in Firefox.
264 | */
265 |
266 | button,
267 | select { /* 1 */
268 | text-transform: none;
269 | }
270 |
271 | /**
272 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
273 | * controls in Android 4.
274 | * 2. Correct the inability to style clickable types in iOS and Safari.
275 | */
276 |
277 | button,
278 | html [type="button"], /* 1 */
279 | [type="reset"],
280 | [type="submit"] {
281 | -webkit-appearance: button; /* 2 */
282 | }
283 |
284 | /**
285 | * Remove the inner border and padding in Firefox.
286 | */
287 |
288 | button::-moz-focus-inner,
289 | [type="button"]::-moz-focus-inner,
290 | [type="reset"]::-moz-focus-inner,
291 | [type="submit"]::-moz-focus-inner {
292 | border-style: none;
293 | padding: 0;
294 | }
295 |
296 | /**
297 | * Restore the focus styles unset by the previous rule.
298 | */
299 |
300 | button:-moz-focusring,
301 | [type="button"]:-moz-focusring,
302 | [type="reset"]:-moz-focusring,
303 | [type="submit"]:-moz-focusring {
304 | outline: 1px dotted ButtonText;
305 | }
306 |
307 | /**
308 | * Correct the padding in Firefox.
309 | */
310 |
311 | fieldset {
312 | padding: 0.35em 0.75em 0.625em;
313 | }
314 |
315 | /**
316 | * 1. Correct the text wrapping in Edge and IE.
317 | * 2. Correct the color inheritance from `fieldset` elements in IE.
318 | * 3. Remove the padding so developers are not caught out when they zero out
319 | * `fieldset` elements in all browsers.
320 | */
321 |
322 | legend {
323 | box-sizing: border-box; /* 1 */
324 | color: inherit; /* 2 */
325 | display: table; /* 1 */
326 | max-width: 100%; /* 1 */
327 | padding: 0; /* 3 */
328 | white-space: normal; /* 1 */
329 | }
330 |
331 | /**
332 | * 1. Add the correct display in IE 9-.
333 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
334 | */
335 |
336 | progress {
337 | display: inline-block; /* 1 */
338 | vertical-align: baseline; /* 2 */
339 | }
340 |
341 | /**
342 | * Remove the default vertical scrollbar in IE.
343 | */
344 |
345 | textarea {
346 | overflow: auto;
347 | }
348 |
349 | /**
350 | * 1. Add the correct box sizing in IE 10-.
351 | * 2. Remove the padding in IE 10-.
352 | */
353 |
354 | [type="checkbox"],
355 | [type="radio"] {
356 | box-sizing: border-box; /* 1 */
357 | padding: 0; /* 2 */
358 | }
359 |
360 | /**
361 | * Correct the cursor style of increment and decrement buttons in Chrome.
362 | */
363 |
364 | [type="number"]::-webkit-inner-spin-button,
365 | [type="number"]::-webkit-outer-spin-button {
366 | height: auto;
367 | }
368 |
369 | /**
370 | * 1. Correct the odd appearance in Chrome and Safari.
371 | * 2. Correct the outline style in Safari.
372 | */
373 |
374 | [type="search"] {
375 | -webkit-appearance: textfield; /* 1 */
376 | outline-offset: -2px; /* 2 */
377 | }
378 |
379 | /**
380 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
381 | */
382 |
383 | [type="search"]::-webkit-search-cancel-button,
384 | [type="search"]::-webkit-search-decoration {
385 | -webkit-appearance: none;
386 | }
387 |
388 | /**
389 | * 1. Correct the inability to style clickable types in iOS and Safari.
390 | * 2. Change font properties to `inherit` in Safari.
391 | */
392 |
393 | ::-webkit-file-upload-button {
394 | -webkit-appearance: button; /* 1 */
395 | font: inherit; /* 2 */
396 | }
397 |
398 | /* Interactive
399 | ========================================================================== */
400 |
401 | /*
402 | * Add the correct display in IE 9-.
403 | * 1. Add the correct display in Edge, IE, and Firefox.
404 | */
405 |
406 | details, /* 1 */
407 | menu {
408 | display: block;
409 | }
410 |
411 | /*
412 | * Add the correct display in all browsers.
413 | */
414 |
415 | summary {
416 | display: list-item;
417 | }
418 |
419 | /* Scripting
420 | ========================================================================== */
421 |
422 | /**
423 | * Add the correct display in IE 9-.
424 | */
425 |
426 | canvas {
427 | display: inline-block;
428 | }
429 |
430 | /**
431 | * Add the correct display in IE.
432 | */
433 |
434 | template {
435 | display: none;
436 | }
437 |
438 | /* Hidden
439 | ========================================================================== */
440 |
441 | /**
442 | * Add the correct display in IE 10-.
443 | */
444 |
445 | [hidden] {
446 | display: none;
447 | }
448 |
--------------------------------------------------------------------------------
5 | 
17 |