diff --git a/src/App.js b/src/App.js index 56f3f25..87e1f70 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,7 @@ import React, { Component } from "react"; import "styles/iconfont/iconfont.css"; -import "styles/common.scss"; -import "styles/reset.css"; +import "styles/normalize.scss"; +import "styles/default.scss" import "./utils/prototype" export default class App extends Component { componentDidMount() {} diff --git a/src/pages/home/index.scss b/src/pages/home/index.scss index c05ce14..16993c1 100644 --- a/src/pages/home/index.scss +++ b/src/pages/home/index.scss @@ -266,32 +266,66 @@ .bihuan-process { margin: 100px 30px; .process { - width: 100%; - height: 5px; - background: linear-gradient(to right, #ffc003, #ff4753); - border-radius: 5px; - position: relative; display: flex; - align-items: center; justify-content: space-between; - li{ - flex:auto; + position: relative; + width: 106%; + left: 50%; + transform: translateX(-50%); + &::after{ + content: ""; + position: absolute; + top: 12px; + left: 50%; + transform: translateX(-50%); + width: 90%; + height: 6px; + background: linear-gradient(to right,#ffc003,#ff4753); + } + li { position: relative; text-align: center; - padding-top: 50px; + padding-top: 44px; + flex:1; + &:nth-child(1):after { + background-color: #ffa811; + } + &:nth-child(2):after { + background-color: #ffb707; + } + &:nth-child(3):after { + background-color: #ffa811; + } + &:nth-child(4):after { + background-color: #ff961d; + } + &:nth-child(5):after { + background-color: #ff862c; + } + &:nth-child(6):after { + background-color: #ff7434; + } + &:nth-child(7):after { + background-color: #ff6849; + } + &:nth-child(8):after { + background-color: #ff514c; + } + &:nth-child(9):after { + background-color: #ff4753; + } &::after { - display: block; + content: ""; width: 16px; height: 16px; - background-color: #ffc003; - border: 6px solid #fff; - border-radius: 50%; - box-shadow: 5px 5px 10px rgba(255, 105, 120, 0.36); position: absolute; - top: 15px; + top: 0; left: 50%; transform: translateX(-50%); - content: '', + border-radius: 50%; + border: 6px solid #fff; + box-shadow: 0 4px 20px 0 rgba(255, 105, 120, 0.36); + z-index: 1; } } } @@ -317,7 +351,6 @@ text-align: center; } } - } } } diff --git a/src/styles/common.scss b/src/styles/common.scss deleted file mode 100644 index 2df63c6..0000000 --- a/src/styles/common.scss +++ /dev/null @@ -1,132 +0,0 @@ -@import "styles/default.scss"; - -body { - font: 14px/1.5 Hiragino Sans GB, Microsoft YaHei, \\5fae\8f6f\96c5\9ed1, arial, - \5b8b\4f53, sans-serif; -} - -.w { - width: 1080px; - height: 100%; - margin: 0 auto; -} - -.fl { - float: left; -} - -.fr { - float: right; -} - -.clearfix:before, -.clearfix:after { - content: "."; - display: table; -} - -.clearfix:after { - clear: both; -} - -.clearfix { - *zoom: 1; -} - -.show { - display: block; -} - -.hide { - display: none; -} - -.mline { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - overflow: hidden; -} - -.sline { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* center-vertical-row加到bootstrap的Row上 - center-vertical-col加到bootstrap的Col上 - 使列垂直居中 -*/ -.center-vertical-row { - font-size: 0; -} - -.center-vertical-col { - display: inline-block; - float: none; - vertical-align: middle; - font-size: 14px; -} - -/* flex */ -.flex-row { - display: flex; - flex-direction: row; -} - -.flex-fill { - flex: auto; -} - -@for $i from 1 through 12 { - .flex-#{$i} { - flex: 0 0 ($i * 8.33333%); - max-width: ($i * 8.33333%); - } -} - -.justify-content-around { - justify-content: space-around; -} - -.justify-content-between { - justify-content: space-between; -} - -.flex-wrap { - flex-wrap: wrap; -} - -.flex-nowrap { - flex-wrap: nowrap; -} - -.flex-column { - display: flex; - flex-direction: column; -} - -.justify-content-start { - justify-content: flex-start; -} - -.justify-content-end { - justify-content: flex-end; -} - -.justify-content-center { - justify-content: center; -} - -.align-items-center { - align-items: center; -} - -.align-items-start { - align-items: flex-start; -} - -.align-items-end { - align-items: flex-end; -} diff --git a/src/styles/normalize.scss b/src/styles/normalize.scss new file mode 100644 index 0000000..93d09bf --- /dev/null +++ b/src/styles/normalize.scss @@ -0,0 +1,584 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { + /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { + /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} + +html, +body, +div, +h1, +h2, +h3, +h4, +h5, +h6, +ul, +ol, +dl, +li, +dt, +dd, +p, +blockquote, +pre, +form, +fieldset, +table, +th, +td { + border: none; + margin: 0px; + padding: 0px; +} +html, +body { + height: 100%; + width: 100%; + /* font-family:"微软雅黑","黑体","宋体"; */ + // font-size: 14px; + font: 14px/1.5 Hiragino Sans GB, Microsoft YaHei, \\5fae\8f6f\96c5\9ed1, arial, + \5b8b\4f53, sans-serif; +} +address, +caption, +cite, +code, +dfn, +em, +strong, +th, +var { + font-style: normal; + font-weight: normal; +} +a { + text-decoration: none; +} +a:link { + color: #fff; +} +a:visited { + color: #fff; +} +a:hover { + color: #fff; +} +a:active { + color: #fff; +} +input::-ms-clear { + display: none; +} +input::-ms-reveal { + display: none; +} +input { + -webkit-appearance: none; + margin: 0; + outline: none; + padding: 0; +} +input::-webkit-input-placeholder { + color: #ccc; +} +input::-ms-input-placeholder { + color: #ccc; +} +input::-moz-placeholder { + color: #ccc; +} +input[type="submit"], +input[type="button"] { + cursor: pointer; +} +button[disabled], +input[disabled] { + cursor: default; +} +img { + border: none; +} +ul, +ol, +li { + list-style-type: none; +} + +/* flex */ +.flex-row { + display: flex; + flex-direction: row; +} + +.flex-fill { + flex: auto; +} + +@for $i from 1 through 12 { + .flex-#{$i} { + flex: 0 0 ($i * 8.33333%); + max-width: ($i * 8.33333%); + } +} + +.justify-content-around { + justify-content: space-around; +} + +.justify-content-between { + justify-content: space-between; +} + +.flex-wrap { + flex-wrap: wrap; +} + +.flex-nowrap { + flex-wrap: nowrap; +} + +.flex-column { + display: flex; + flex-direction: column; +} + +.justify-content-start { + justify-content: flex-start; +} + +.justify-content-end { + justify-content: flex-end; +} + +.justify-content-center { + justify-content: center; +} + +.align-items-center { + align-items: center; +} + +.align-items-start { + align-items: flex-start; +} + +.align-items-end { + align-items: flex-end; +} +/* center-vertical-row加到bootstrap的Row上 + center-vertical-col加到bootstrap的Col上 + 使列垂直居中 +*/ +.center-vertical-row { + font-size: 0; +} + +.center-vertical-col { + display: inline-block; + float: none; + vertical-align: middle; + font-size: 14px; +} + +/* 文本 */ +.mline { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; +} + +.sline { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.text-center { + text-align: center; +} + +/* 显示/隐藏 */ +.show { + display: block; +} +.hide { + display: none; +} + +/* 浮动 */ +.fl { + float: left; +} + +.fr { + float: right; +} + +.clearfix:before, +.clearfix:after { + content: "."; + display: table; +} + +.clearfix:after { + clear: both; +} + +.clearfix { + *zoom: 1; +} + +/* 版心 */ +.w { + width: 1080px; + height: 100%; + margin: 0 auto; +} \ No newline at end of file diff --git a/src/styles/reset.css b/src/styles/reset.css deleted file mode 100644 index 4f330b3..0000000 --- a/src/styles/reset.css +++ /dev/null @@ -1,188 +0,0 @@ -body, -ul, -ol, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -figure, -form, -fieldset, -legend, -input, -textarea, -button, -p, -blockquote, -th, -td, -pre, -xmp { - margin: 0; - padding: 0; -} -body, -input, -textarea, -button, -select, -pre, -xmp, -tt, -code, -kbd, -samp { - line-height: 1.5; - font-family: tahoma, arial, "Hiragino Sans GB", simsun, sans-serif; -} -h1, -h2, -h3, -h4, -h5, -h6, -small, -big, -input, -textarea, -button, -select { - font-size: 100%; -} -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: tahoma, arial, "Hiragino Sans GB", "微软雅黑", simsun, sans-serif; -} -h1, -h2, -h3, -h4, -h5, -h6, -b, -strong { - font-weight: normal; -} -address, -cite, -dfn, -em, -i, -optgroup, -var { - font-style: normal; -} -table { - border-collapse: collapse; - border-spacing: 0; - text-align: left; -} -caption, -th { - text-align: inherit; -} -ul, -ol, -menu { - list-style: none; -} -fieldset, -img { - border: 0; -} -img, -object, -input, -textarea, -button, -select { - vertical-align: middle; -} -article, -aside, -footer, -header, -section, -nav, -figure, -figcaption, -hgroup, -details, -menu { - display: block; -} -audio, -canvas, -video { - display: inline-block; - *display: inline; - *zoom: 1; -} -blockquote:before, -blockquote:after, -q:before, -q:after { - content: "\0020"; -} -textarea { - overflow: auto; - resize: vertical; -} -input, -textarea, -button, -select, -a { - outline: 0 none; - border: none; -} -button::-moz-focus-inner, -input::-moz-focus-inner { - padding: 0; - border: 0; -} -mark { - background-color: transparent; -} -a, -ins, -s, -u, -del { - text-decoration: none; -} -sup, -sub { - vertical-align: baseline; -} -html { - overflow-x: hidden; - height: 100%; - font-size: 50px; - -webkit-tap-highlight-color: transparent; -} -body { - font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif; - color: #333; - font-size:14px; - line-height: 1; - -webkit-text-size-adjust: none; -} -hr { - height: 0.02rem; - margin: 0.1rem 0; - border: medium none; - border-top: 0.02rem solid #cacaca; -} -a { - color: #25a4bb; - text-decoration: none; -}