You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by ki...@apache.org on 2021/12/07 08:58:14 UTC
[dolphinscheduler-website] branch master updated: Revert "[Feature] Mobile adaptation (#564)" (#565)
This is an automated email from the ASF dual-hosted git repository.
kirs pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler-website.git
The following commit(s) were added to refs/heads/master by this push:
new 37e6c28 Revert "[Feature] Mobile adaptation (#564)" (#565)
37e6c28 is described below
commit 37e6c28805144e3f108e8b9a6c702d6cfe66aca4
Author: Kirs <ac...@163.com>
AuthorDate: Tue Dec 7 16:57:57 2021 +0800
Revert "[Feature] Mobile adaptation (#564)" (#565)
This reverts commit cbb1a80e991bfa79a329391aeefee61e7b1dfbaa.
---
docs/en-us/dev/user_doc/guide/quick-start.md | 17 +-
img/banner-mobile.png | Bin 342943 -> 0 bytes
img/menu_black.png | Bin 141 -> 0 bytes
img/menu_white.png | Bin 141 -> 0 bytes
package.json | 2 -
site_config/docs2-0-0.js | 2 +-
src/components/footer/index.jsx | 26 +--
src/components/footer/index.scss | 136 +++++-------
src/components/header/index.jsx | 132 ++++++------
src/components/header/index.scss | 155 +++++++-------
src/markdown.scss | 6 -
src/pages/blog/index.md.scss | 12 --
src/pages/home/index.jsx | 90 +++-----
src/pages/home/index.scss | 295 +++++++++++++------------
src/pages/user/index.jsx | 79 ++++---
src/pages/user/user.scss | 310 +++++++++++++++++++--------
src/variables.scss | 5 -
17 files changed, 673 insertions(+), 594 deletions(-)
diff --git a/docs/en-us/dev/user_doc/guide/quick-start.md b/docs/en-us/dev/user_doc/guide/quick-start.md
index 9410ada..418248a 100644
--- a/docs/en-us/dev/user_doc/guide/quick-start.md
+++ b/docs/en-us/dev/user_doc/guide/quick-start.md
@@ -14,11 +14,10 @@
<img src="/img/create-queue-en.png" width="60%" />
</p>
-* Create tenant
-
-<p align="center">
- <img src="/img/create-tenant-en.png" width="60%" />
-</p>
+ * Create tenant
+ <p align="center">
+ <img src="/img/create-tenant-en.png" width="60%" />
+ </p>
* Creating Ordinary Users
<p align="center">
@@ -44,11 +43,11 @@
<img src="/img/create-environment.png" width="60%" />
</p>
-* Create a token
+ * Create a token
-<p align="center">
- <img src="/img/token-en.png" width="60%" />
-</p>
+ <p align="center">
+ <img src="/img/token-en.png" width="60%" />
+ </p>
* Login with regular users
diff --git a/img/banner-mobile.png b/img/banner-mobile.png
deleted file mode 100644
index 80095dd..0000000
Binary files a/img/banner-mobile.png and /dev/null differ
diff --git a/img/menu_black.png b/img/menu_black.png
deleted file mode 100644
index e84ad37..0000000
Binary files a/img/menu_black.png and /dev/null differ
diff --git a/img/menu_white.png b/img/menu_white.png
deleted file mode 100644
index 83bc00c..0000000
Binary files a/img/menu_white.png and /dev/null differ
diff --git a/package.json b/package.json
index ad80bd6..6a249e3 100644
--- a/package.json
+++ b/package.json
@@ -14,12 +14,10 @@
"classnames": "^2.2.6",
"core-decorators": "^0.20.0",
"js-cookie": "^2.2.1",
- "lodash": "^4.17.21",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scroll": "^1.8.1",
"react-tilt": "^0.1.4",
- "swiper": "^7.3.1",
"whatwg-fetch": "^2.0.4"
},
"devDependencies": {
diff --git a/site_config/docs2-0-0.js b/site_config/docs2-0-0.js
index c02ab09..1ba10c2 100644
--- a/site_config/docs2-0-0.js
+++ b/site_config/docs2-0-0.js
@@ -2,7 +2,7 @@ export default {
'en-us': {
sidemenu: [
{
- title: 'About',
+ title: 'About Apache DolphinScheduler',
children: [
{
title: 'Introduction',
diff --git a/src/components/footer/index.jsx b/src/components/footer/index.jsx
index 0c0cec7..b21d14f 100644
--- a/src/components/footer/index.jsx
+++ b/src/components/footer/index.jsx
@@ -22,17 +22,17 @@ class Footer extends React.Component {
</div>
<div className="contact-container">
<ul>
- {
- dataSource.contact.list.map((contact, i) => (
- <li key={i}>
- <a href={getLink(contact.link)}>
- <img className="img-base" src={contact.img1} />
- <img className="img-change" src={contact.img2} />
- <p>{contact.name}</p>
- </a>
- </li>
- ))
- }
+ {
+ dataSource.contact.list.map((contact, i) => (
+ <li key={i}>
+ <img className="img-base" src={contact.img1} />
+ <img className="img-change" src={contact.img2} />
+ <a href={getLink(contact.link)}>
+ <p>{contact.name}</p>
+ </a>
+ </li>
+ ))
+ }
</ul>
</div>
<div className="cols-container">
@@ -43,7 +43,7 @@ class Footer extends React.Component {
dataSource.documentation.list.map((docu, i) => (
<li key={i}>
<a href={getLink(docu.link)}>
- <p>{docu.text}</p>
+ <p>{docu.text}</p>
</a>
</li>
))
@@ -58,7 +58,7 @@ class Footer extends React.Component {
dataSource.asf.list.map((asf, i) => (
<li key={i}>
<a href={getLink(asf.link)}>
- <p>{asf.text}</p>
+ <p>{asf.text}</p>
</a>
</li>
))
diff --git a/src/components/footer/index.scss b/src/components/footer/index.scss
index df58057..fc42a12 100644
--- a/src/components/footer/index.scss
+++ b/src/components/footer/index.scss
@@ -1,12 +1,16 @@
-@import "../../variables.scss";
+@import '../../variables.scss';
.footer-container {
- background: #f8f8f8;
+ background: #F8F8F8;
.footer-body {
max-width: $contentWidth;
margin: 0 auto;
box-sizing: border-box;
padding: 40px 40px 0;
+ @media screen and (max-width: $mobileWidth) {
+ padding-left: 20px;
+ padding-right: 20px;
+ }
img {
// display: block;
width: 125px;
@@ -18,7 +22,7 @@
font-family: Avenir-Heavy;
text-align: center;
font-size: 36px;
- color: #000f20;
+ color: #000F20;
margin-bottom: 20px;
word-break: break-word;
height: 54px;
@@ -32,109 +36,112 @@
word-break: break-word;
height: 32px;
}
- .contact-container {
- ul {
+ .contact-container{
+ ul{
display: flex;
- margin-top: 80px;
+ margin-top:80px;
margin-bottom: 40px;
flex-direction: row;
align-items: center;
justify-content: center;
align-content: center;
+ // margin-left: 200px;
+ // margin-right: 200px;
li {
list-style: none;
- a {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-self: center;
- }
- p {
+ display:flex;
+ flex-direction: column;
+ align-items: center;
+ p{
font-family: Avenir-Heavy;
font-size: 22px;
- color: #000f20;
+ color: #000F20;
width: 280px;
text-align: center;
}
- &:hover p {
- color: #288fff;
+ &:hover p{
+ color: #288FFF;
}
- img {
+ img{
width: 80px;
height: 80px;
}
- .img-base {
+ .img-base{
display: block;
}
- .img-change {
+ .img-change{
display: none;
}
- &:hover .img-base {
+ &:hover .img-base{
display: none;
}
- &:hover .img-change {
+ &:hover .img-change{
display: block;
}
}
}
+
}
.cols-container {
- margin: 100px 0px 60px 0px;
+ margin-top: 100px;
+ margin-bottom: 60px;
display: flex;
flex-direction: row;
- justify-content: space-around;
- .docu-container {
- margin-left: 0px;
- h4 {
- color: #000f20;
+ justify-content: center;
+ .docu-container{
+ margin-left: 100px;
+ h4{
+ color: #000F20;
font-family: Avenir-Heavy;
font-size: 22px;
text-align: left;
margin-bottom: 10px;
+
}
- ul {
+ ul{
display: flex;
flex-direction: row;
border-top: 1px solid #ccc;
- li {
+ li{
margin-top: 10px;
list-style: none;
margin-right: 35px;
- p {
+ p{
font-family: Avenir-Heavy;
font-size: 16px;
- color: #000f20;
+ color: #000F20;
}
- &:hover p {
- color: #288fff;
+ &:hover p{
+ color: #288FFF;
}
}
}
}
- .asf-container {
+ .asf-container{
margin-left: 200px;
- h4 {
- color: #000f20;
+ h4{
+ color: #000F20;
font-family: Avenir-Heavy;
font-size: 22px;
text-align: left;
margin-bottom: 10px;
+
}
- ul {
+ ul{
display: flex;
flex-direction: row;
border-top: 1px solid #ccc;
- li {
+ li{
margin-top: 10px;
list-style: none;
margin-right: 30px;
- p {
+ p{
font-family: Avenir-Heavy;
font-size: 16px;
- color: #000f20;
+ color: #000F20;
}
- &:hover p {
- color: #288fff;
+ &:hover p{
+ color: #288FFF;
}
}
}
@@ -161,50 +168,13 @@
@media screen and (max-width: $mobileWidth) {
.footer-container {
.footer-body {
- padding: 40px 20px;
- h3 {
- font-size: 28px;
- height: auto;
- }
- h4 {
- font-size: 20px;
- height: auto;
- }
- .contact-container {
- ul {
- margin-top: 20px;
- flex-wrap: wrap;
- justify-content: center;
- li {
- margin-bottom: 20px;
- width: 50%;
- p {
- width: auto;
- }
- }
- }
- }
.cols-container {
- margin: 60px 0 20px 0;
- flex-direction: column;
- .docu-container,.asf-container {
- margin: 0 0 50px 0;
- ul {
- flex-wrap: wrap;
- padding-top: 10px;
- justify-content: center;
- li {
- margin: 8px 15px;
- }
- }
- h4 {
- text-align: center;
- }
+ .col {
+ width: 100%;
+ text-align: center;
+ padding: 0;
}
}
- .copyright {
- padding-top: 20px;
- }
}
}
}
diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx
index e778075..4e58b41 100644
--- a/src/components/header/index.jsx
+++ b/src/components/header/index.jsx
@@ -29,7 +29,7 @@ const searchSwitch = {
url: 'https://www.google.com/search?q=',
},
};
-const noop = () => { };
+const noop = () => {};
const propTypes = {
currentKey: PropTypes.string,
logo: PropTypes.string.isRequired,
@@ -49,7 +49,7 @@ class Header extends React.Component {
super(props);
this.state = {
current: props.currentKey,
- mobileMemuVisible: false,
+ menuBodyVisible: false,
language: props.language,
search: siteConfig.defaultSearch,
searchValue: '',
@@ -137,15 +137,9 @@ class Header extends React.Component {
}
}
- toggleMenu() {
- this.setState({
- mobileMemuVisible: !this.state.mobileMemuVisible,
- });
- }
-
render() {
const { type, logo, onLanguageChange } = this.props;
- const { mobileMemuVisible, language, search, searchVisible } = this.state;
+ const { menuBodyVisible, language, search, searchVisible } = this.state;
return (
<header
className={
@@ -156,80 +150,88 @@ class Header extends React.Component {
}
>
<div className="header-body">
- <span className={classnames({
- 'mobile-menu-btn': true,
- [`mobile-menu-btn-${type}`]: true,
- })}
- />
<a href={getLink(`/${language}/index.html`)}>
<img className="logo" alt={siteConfig.name} title={siteConfig.name} src={getLink(logo)} />
</a>
{
siteConfig.defaultSearch ?
(
- <div
- className={classnames({
- search: true,
- [`search-${type}`]: true,
- })}
- >
- <span className="icon-search" onClick={this.toggleSearch} />
- {
- searchVisible ?
- (
- <div className="search-input">
- <img src={searchSwitch[search].logo} onClick={this.switchSearch} />
- <input autoFocus onChange={this.onInputChange} onKeyDown={this.onKeyDown} />
- </div>
- ) : null
- }
- </div>
+ <div
+ className={classnames({
+ search: true,
+ [`search-${type}`]: true,
+ })}
+ >
+ <span className="icon-search" onClick={this.toggleSearch} />
+ {
+ searchVisible ?
+ (
+ <div className="search-input">
+ <img src={searchSwitch[search].logo} onClick={this.switchSearch} />
+ <input autoFocus onChange={this.onInputChange} onKeyDown={this.onKeyDown} />
+ </div>
+ ) : null
+ }
+ </div>
) : null
}
{
onLanguageChange !== noop ?
- (
- <span
- className={
- classnames({
- 'language-switch': true,
- [`language-switch-${type}`]: true,
- })
- }
- onClick={this.switchLang}
- >
- {languageSwitch.find(lang => lang.value === language).text}
- </span>
- )
+ (<span
+ className={
+ classnames({
+ 'language-switch': true,
+ [`language-switch-${type}`]: true,
+ })
+ }
+ onClick={this.switchLang}
+ >
+ {languageSwitch.find(lang => lang.value === language).text}
+ </span>)
:
null
}
<div
- className="header-menu"
+ className={
+ classnames({
+ 'header-menu': true,
+ 'header-menu-open': menuBodyVisible,
+ })
+ }
>
+ <img
+ className="header-menu-toggle"
+ onClick={this.toggleMenu}
+ src={type === 'normal' ? getLink('/img/system/menu_gray.png') : getLink('/img/system/menu_white.png')}
+ />
<div>
<Menu className={type === 'normal' ? 'blackClass' : 'whiteClass'} onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal" forceSubMenuRender>
- {siteConfig[language].pageMenu.map(item => (
- item.children ?
- <SubMenu
- key={item.key}
- className={this.state.current === item.key ? 'ant-menu-item-selected' : ''}
- title={
- <span className="submenu-title-wrapper">
- <a href={getLink(item.link)} target={item.target || '_self'}>{item.text}</a>
- </span>
- }
- >
- <Menu.ItemGroup className="showUL">
- {item.children.map(items => (
- <Menu.Item key={items.key} ><a href={getLink(items.link)} target={items.target || '_self'}>{items.text}</a></Menu.Item>
- ))}
- </Menu.ItemGroup>
- </SubMenu> :
- <Menu.Item key={item.key}>
+ {siteConfig[language].pageMenu.map(item => (
+ item.children ?
+ <SubMenu
+ key={item.key}
+ className={this.state.current === item.key ? 'ant-menu-item-selected' : ''}
+ title={
+ <span className="submenu-title-wrapper">
<a href={getLink(item.link)} target={item.target || '_self'}>{item.text}</a>
- </Menu.Item>
- ))}
+ <ul style={{ display: 'none' }}>
+ {item.children.map(items => (
+ <li key={items.key} ><a href={getLink(items.link)} target={items.target || '_self'}>{items.text}</a></li>
+ ))}
+ </ul>
+ </span>
+ }
+ >
+ <Menu.ItemGroup className="showUL">
+ {item.children.map(items => (
+ <Menu.Item key={items.key} ><a href={getLink(items.link)} target={items.target || '_self'}>{items.text}</a></Menu.Item>
+ ))}
+ </Menu.ItemGroup>
+ </SubMenu> :
+ <Menu.Item key={item.key}>
+ <a href={getLink(item.link)} target={item.target || '_self'}>{item.text}</a>
+ </Menu.Item>
+ ))}
</Menu>
</div>
</div>
diff --git a/src/components/header/index.scss b/src/components/header/index.scss
index 73567a5..f550732 100644
--- a/src/components/header/index.scss
+++ b/src/components/header/index.scss
@@ -1,10 +1,13 @@
-@import "../../variables.scss";
-.ant-menu {
+@import '../../variables.scss';
+.ant-menu {
background: none;
}
.ant-menu-horizontal {
border-bottom: 0;
}
+.ant-menu-submenu-title {
+ padding: 0 15px !important;
+}
.ant-menu-submenu-hidden {
display: none;
}
@@ -19,11 +22,11 @@
background-color: transparent;
}
&-dark {
- background-color: #000f20;
+ background-color:#000F20;
}
&-normal {
background-color: #fff;
- box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
+ box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
}
.header-body {
max-width: $contentWidth;
@@ -31,15 +34,21 @@
height: $headerHeight;
line-height: $headerHeight;
.logo {
- margin-top: 12px;
- margin-left: 30px;
+ margin-top: 10px;
+ margin-left: 40px;
width: 156px;
vertical-align: sub;
}
.header-menu {
margin-top: 10px;
- margin-right: 20px;
float: right;
+ .header-menu-toggle {
+ display: none;
+ width: 19px;
+ margin-right: 20px;
+ margin-top: $headerHeight / 2 - 15px;
+ cursor: pointer;
+ }
}
ul {
padding: 0;
@@ -47,14 +56,14 @@
}
li {
display: inline-block;
- margin-right: 10px;
+ margin-right: 20px;
}
.menu-item {
font-family: Avenir-Heavy;
font-size: 14px;
vertical-align: bottom;
}
- .whiteClass {
+ .whiteClass{
.ant-menu-item {
a {
color: #fff;
@@ -81,10 +90,10 @@
.submenu-title-wrapper {
a {
color: #fff;
- opacity: 0.6;
+ opacity:0.6;
font-family: Avenir-Medium;
}
- }
+ }
}
}
.blackClass {
@@ -173,12 +182,12 @@
}
}
.language-switch-primary {
- border: 1px solid #fff;
- color: #fff;
+ border: 1px solid #FFF;
+ color: #FFF;
}
.language-switch-dark {
- border: 1px solid #fff;
- color: #fff;
+ border: 1px solid #FFF;
+ color: #FFF;
}
.language-switch-normal {
border: 1px solid #333;
@@ -198,16 +207,16 @@
width: 12px;
height: 12px;
border-radius: 50%;
- border: 2px solid;
+ border:2px solid;
position: relative;
&::before {
- content: "";
+ content: '';
transform: rotate(45deg);
- width: 8px;
+ width:8px;
height: 2px;
position: absolute;
- top: 13px;
- left: 11px;
+ top:13px;
+ left:11px;
}
}
&-primary {
@@ -273,82 +282,62 @@
}
}
-@media screen and (max-width: $navMiddle) {
- .header-container {
- .header-body {
- li {
- margin-right: 10px;
- padding: 0 10px;
- }
- .ant-menu-submenu-title{
- padding: 0;
- }
- }
- }
-}
-@media screen and (max-width: $navSmall) {
+@media screen and (max-width: $mobileWidth) {
.header-container {
.header-body {
- li {
- font-size: 12px;
- margin-right: 5px;
+ .logo {
+ margin-left: 20px;
+ }
+ .language-switch {
+ margin-right: 20px;
}
- }
- }
-}
-
-@media screen and (max-width: $navMini) {
- .header-container {
- .header-body {
.header-menu {
- display: none;
+ ul {
+ display: none;
+ }
+ .header-menu-toggle {
+ display: inline-block;
+ margin-right: 20px;
+ }
}
- .mobile-menu-btn {
- display: block;
- width: 24px;
- height: 24px;
- background-size: 100% 100%;
- margin-top: 21px;
- margin-left: 20px;
- cursor: pointer;
- opacity: 0.6;
- float: left;
- &-primary,
- &-dark {
- background-image: url("/img/menu_white.png");
- opacity: 0.6;
+ .header-menu-open {
+ ul {
+ background-color: $headerMenuBgColor;
+ display: inline-block;
+ position: absolute;
+ right: 0;
+ top: $headerHeight;
+ z-index: 100;
+ }
+ li {
+ width: 200px;
+ display: list-item;
+ padding-left: 30px;
+ list-style: none;
+ line-height: 40px;
+ margin-right: 20px;
+ a {
+ color: #333;
+ display: inline-block;
+ width: 100%;
+ }
&:hover {
- opacity: 1;
+ background: $endColor;
+ a {
+ color: #fff;
+ opacity: 1;
+ }
}
}
- &-normal {
- background-image: url("/img/menu_black.png");
- opacity: 0.6;
- &:hover {
+ .menu-item-primary-active, .menu-item-normal-active, .menu-item-dark-active {
+ background: $endColor;
+ a {
+ color: #fff;
opacity: 1;
}
}
}
- .search {
- margin-right: 20px;
- }
- }
- }
-}
-
-@media screen and (max-width: $mobileWidth) {
- .header-container {
- .header-body {
- .logo {
- margin-left: 20px;
- }
- .search {
- margin-right: 20px;
- }
- .language-switch {
- margin-right: 20px;
- }
}
}
}
diff --git a/src/markdown.scss b/src/markdown.scss
index cc2fe94..7dfc83c 100644
--- a/src/markdown.scss
+++ b/src/markdown.scss
@@ -1553,9 +1553,3 @@ $katexPath: 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/';
.katex .mtable .col-align-r>.vlist {
text-align:right
}
-
-@media screen and (max-width: $mobileWidth) {
- .markdown-body img {
- width: 100%;
- }
-}
diff --git a/src/pages/blog/index.md.scss b/src/pages/blog/index.md.scss
index 3dcb5e2..7e83c19 100644
--- a/src/pages/blog/index.md.scss
+++ b/src/pages/blog/index.md.scss
@@ -5,16 +5,4 @@
margin: $headerHeight auto 0;
min-width: 735px;
}
-}
-
-@media screen and (max-width: $mobileWidth) {
- .blog-detail-page {
- .blog-content {
- min-width: auto;
- width: 100%;
- padding: 40px 20px;
- box-sizing: border-box;
- margin: $headerHeight auto 0;
- }
- }
}
\ No newline at end of file
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index e39d919..9c06057 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -8,12 +8,8 @@ import Language from '../../components/language';
import Item from './featureItem';
import homeConfig from '../../../site_config/home';
import './index.scss';
+import Slider from '../../components/slider';
import EventCard from '../community/eventCard';
-import debounce from 'lodash/debounce';
-import Swiper from 'swiper/swiper-bundle';
-import 'swiper/swiper-bundle.css';
-
-const MOBILE_WIDTH = 640;
class Home extends Language {
constructor(props) {
@@ -23,10 +19,7 @@ class Home extends Language {
starCount: 0,
forkCount: 0,
index: 0,
- isMobile: document.body.clientWidth <= MOBILE_WIDTH,
};
- this.swiper = null;
- this.calculateLayout = null;
}
componentDidMount() {
@@ -47,12 +40,6 @@ class Home extends Language {
});
}
});
- this.calculateLayout = debounce(() => {
- this.setState({
- isMobile: document.body.clientWidth <= MOBILE_WIDTH,
- });
- }, 200);
- window.addEventListener('resize', this.calculateLayout);
// 写死协议，因github会做协议跳转，这种跳转会被Safari拦截
fetch('https://api.github.com/repos/apache/dolphinscheduler')
.then(res => res.json())
@@ -63,41 +50,36 @@ class Home extends Language {
forkCount: data.forks_count,
});
});
- this.initSwiper();
- window._debug = this;
}
- componentDidUpdate(prevProps, prevState) {
- if (prevState.isMobile !== this.state.isMobile) {
- this.initSwiper();
+ addClick = (length) => {
+ if (this.state.index < length - 1) {
+ this.setState({
+ ...this.state,
+ index: this.state.index + 1,
+ });
+ } else {
+ this.setState({
+ ...this.state,
+ index: 0,
+ });
}
}
- componentWillUnmount() {
- if (this.calculateLayout) {
- window.removeEventListener('resize', this.calculateLayout);
+ minusClick = (length) => {
+ if (this.state.index > 0) {
+ this.setState({
+ ...this.state,
+ index: this.state.index - 1,
+ });
+ } else {
+ this.setState({
+ ...this.state,
+ index: length - 1,
+ });
}
}
- initSwiper() {
- const { isMobile } = this.state;
- // Events swiper
- if (this.swiper) this.swiper.destroy();
- this.swiper = new Swiper('.swiper-container', {
- loop: true,
- slidesPerView: isMobile ? 1 : 3,
- spaceBetween: 30,
- slidesPerGroup: isMobile ? 1 : 3,
- navigation: {
- nextEl: '.swiper-button-next',
- prevEl: '.swiper-button-prev',
- },
- pagination: {
- el: '.swiper-pagination',
- clickable: true,
- },
- });
- }
addClick = (length) => {
if (this.state.index < length - 1) {
@@ -128,7 +110,7 @@ class Home extends Language {
}
render() {
- const { starCount, forkCount, isMobile } = this.state;
+ const { starCount, forkCount } = this.state;
const language = this.getLanguage();
const dataSource = homeConfig[language];
const { headerType } = this.state;
@@ -136,9 +118,7 @@ class Home extends Language {
return (
<div className="home-page">
<section className="top-section">
- {
- isMobile ? null : <img className="pc-bg" src="/img/banner.jpg" />
- }
+ <img src="/img/banner.jpg" />
<Header
currentKey="home"
type={headerType}
@@ -200,22 +180,14 @@ class Home extends Language {
}
</ul>
</section>
+
<section className="events-section">
<h3>{dataSource.events.title}</h3>
- <div className="swiper-container">
- <div className="swiper-wrapper">
- {
- dataSource.events.list.map((event, i) => (
- <div key={i} className="swiper-slide">
- <EventCard event={event} key={i} />
- </div>
- ))
- }
- </div>
- </div>
- <div className="swiper-button-next" />
- <div className="swiper-button-prev" />
- <div className="swiper-pagination" />
+ <Slider>
+ {dataSource.events.list.map((event, i) => (
+ <EventCard event={event} key={i} />
+ ))}
+ </Slider>
</section>
<Footer logo="/img/ds_gray.svg" language={language} />
</div>
diff --git a/src/pages/home/index.scss b/src/pages/home/index.scss
index 0691919..cf83b3a 100644
--- a/src/pages/home/index.scss
+++ b/src/pages/home/index.scss
@@ -1,22 +1,17 @@
-@import "../../variables.scss";
-@import "../../reset.scss";
+@import '../../variables.scss';
+@import '../../reset.scss';
@keyframes slashStar {
0% {
- opacity: 1;
- }
+ opacity: 1; }
100% {
- opacity: 0;
- }
+ opacity: 0; }
}
.home-page {
- min-width: 1100px;
.top-section {
- width: 100%;
position: relative;
- height: auto;
- .pc-bg {
+ img {
width: 100%;
}
.animation {
@@ -24,13 +19,13 @@
width: 6px;
height: 6px;
border-radius: 50%;
- background-color: #1be1f6;
- }
+ background-color: #1BE1F6;
+ }
.animation1 {
left: 15%;
top: 70%;
animation: slashStar 2s ease-in-out 0.3s infinite;
- }
+ }
.animation2 {
left: 34%;
top: 35%;
@@ -67,7 +62,7 @@
h2 {
font-family: Avenir-Heavy;
font-size: 46px;
- color: #fff;
+ color: #FFF;
text-align: center;
word-break: break-word;
margin: 0;
@@ -77,7 +72,7 @@
opacity: 0.6;
font-family: Avenir-Medium;
font-size: 24px;
- color: #fff;
+ color: #FFF;
text-align: center;
margin: 12px auto 0;
max-width: 730px;
@@ -134,9 +129,9 @@
display: inline-block;
font-family: Avenir-Heavy;
font-size: 14px;
- color: #fff;
+ color: #FFF;
text-align: center;
- background: #46484b;
+ background: #46484B;
border-radius: 2px;
line-height: 24px;
padding: 0 6px;
@@ -154,7 +149,7 @@
}
}
.introduction-section {
- background: #f9fafa;
+ background: #F9FAFA;
.introduction-body {
max-width: $contentWidth;
box-sizing: border-box;
@@ -167,7 +162,7 @@
justify-content: center;
flex-direction: column;
&::before {
- content: "";
+ content: '';
position: relative;
top: 102px;
left: 40px;
@@ -175,7 +170,7 @@
border-right: 1px solid #666;
}
&::after {
- content: "";
+ content: '';
position: relative;
left: 39px;
top: 165px;
@@ -201,7 +196,7 @@
font-size: 22px;
width: 940px;
height: 64px;
- color: #130e0e;
+ color:#130e0e;
}
}
img {
@@ -211,6 +206,16 @@
max-width: 100%;
// box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.05);
}
+ @media screen and (max-width: 1106px){
+ .introduction {
+ display: inline-block;
+ width: 100%;
+ max-width: 100%;
+ }
+ img {
+ margin: 0;
+ }
+ }
}
}
.feature-section {
@@ -220,7 +225,7 @@
position: relative;
padding: 80px 40px 40px;
&::before {
- content: "";
+ content: '';
position: absolute;
top: 0;
left: 50%;
@@ -230,7 +235,7 @@
border-right: 1px solid #666;
}
&::after {
- content: "";
+ content: '';
position: absolute;
top: 66px;
left: 50%;
@@ -249,11 +254,13 @@
list-style: none;
padding: 0;
margin: 0;
- display: flex;
li {
+ width: 240px;
+ height: 360px;
text-align: center;
- display: block;
- padding-bottom: 40px;
+ vertical-align: top;
+ display: inline-block;
+ margin-bottom: 40px;
width: 25%;
cursor: pointer;
&:hover {
@@ -276,7 +283,7 @@
height: 32px;
font-weight: 400;
color: #333333;
- line-height: 32px;
+ line-height: 32px
}
p {
width: 200px;
@@ -290,28 +297,20 @@
}
}
}
+ @media screen and (max-width: 768px){
+ li {
+ width: 100%;
+ }
+ }
}
}
.events-section {
+ // background: #F9FAFA;
max-width: $contentWidth;
- margin: 0px auto 70px;
- padding: 0 50px;
+ margin: 0px auto 50px;
box-sizing: border-box;
- position: relative;
- .swiper-container {
- overflow: hidden;
- }
- .swiper-button-next {
- position: absolute;
- right: 10px;
- }
- .swiper-pagination {
- position: absolute;
- bottom: -50px;
- }
- .swiper-button-prev {
- position: absolute;
- left: 10px;
+ @media screen and (max-width: $mobileWidth) {
+ padding: 0px;
}
h3 {
font-family: Avenir-Heavy;
@@ -321,12 +320,19 @@
margin: 40px 0 60px;
}
.event-card {
- width: 100%;
+ width: 373px;
font-size: 0;
img {
- width: 100%;
+ width: 373px;
height: 209px;
}
+ @media screen and (max-width: $mobileWidth / 2) {
+ width: 320px;
+ img {
+ width: 320px;
+ height: 179px;
+ }
+ }
.event-introduction {
padding: 20px;
h4 {
@@ -357,7 +363,7 @@
}
}
}
- .ourusers-section {
+ .ourusers-section{
display: flex;
flex-direction: column;
align-items: center;
@@ -370,33 +376,33 @@
margin-top: 40px;
margin-bottom: 60px;
}
- .button1-section {
+ .button1-section{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
- img {
+ img{
width: 80px;
height: 80px;
&:hover {
box-shadow: 0px 0px 12px 0px rgba(9, 97, 197, 0.1);
}
}
- button {
+ button{
border: hidden;
background-color: transparent;
}
- .overflow-section {
+ .overflow-section{
display: flex;
width: 70%;
- ul {
+ ul{
display: inline-flex;
flex-wrap: wrap;
- li {
+ li{
list-style: none;
margin: 5px 5px 5px 5px;
- img {
+ img{
width: 100px;
height: 100px;
&:hover {
@@ -408,7 +414,7 @@
}
}
}
- .review-section {
+ .review-section{
display: flex;
flex-direction: column;
align-items: center;
@@ -420,60 +426,60 @@
text-align: center;
margin-top: 40px;
}
- .button-section {
+ .button-section{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
- img {
+ img{
width: 80px;
height: 80px;
&:hover {
box-shadow: 0px 0px 12px 0px rgba(9, 97, 197, 0.1);
}
}
- button {
+ button{
border: hidden;
background-color: transparent;
}
- .overflow-section {
+ .overflow-section{
overflow: hidden;
width: 65%;
height: 350px;
margin: 40px 0px 20px 0px;
- background: #f9fafa;
+ background: #F9FAFA;
display: flex;
align-items: center;
- ul {
+ ul{
display: -webkit-box;
align-items: center;
flex-direction: row;
width: 100%;
- li {
+ li{
display: flex;
flex-direction: row;
align-items: center;
list-style: none;
width: 100%;
- img {
+ img{
width: 150px;
height: 150px;
margin: 0 40px 0 50px;
}
- .name-section {
+ .name-section{
display: flex;
flex-direction: column;
margin-left: 20px;
}
- p {
+ p{
font-family: Avenir-Heavy;
}
- .pr {
+ .pr{
font-size: 20px;
margin-right: 20px;
}
- .pn {
+ .pn{
font-size: 18px;
text-align: right;
margin-top: 40px;
@@ -484,6 +490,91 @@
}
}
}
+ .start-section {
+ background-image: linear-gradient(0deg, $startColor 0%, $intermediateColor 51%, $endColor 100%);
+ .start-body {
+ max-width: $contentWidth;
+ margin: 0 auto;
+ box-sizing: border-box;
+ height: 260px;
+ padding: 35px 40px;
+ position: relative;
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 20px;
+ height: 100%;
+ opacity: 0.3;
+ border-right: 1px solid #fff;
+ }
+ &::after {
+ content: '';
+ position: absolute;
+ left: 19px;
+ top: 48px;
+ height: 17px;
+ background: #fff;
+ }
+ .left-part {
+ display: inline-block;
+ width: 50%;
+ vertical-align: top;
+ h3 {
+ font-family: Avenir-Heavy;
+ font-size: 36px;
+ color: #FFF;
+ margin: 0;
+ }
+ p {
+ opacity: 0.8;
+ font-family: Avenir-Medium;
+ font-size: 18px;
+ color: #FFF;
+ line-height: 24px;
+ margin: 6px 0 12px;
+ }
+ a {
+ font-family: Avenir-Heavy;
+ font-size: 14px;
+ color: $brandColor;
+ text-align: center;
+ display: inline-block;
+ width: 140px;
+ height: 48px;
+ line-height: 48px;
+ background: #FFF;
+ border-radius: 4px;
+ }
+ }
+ .right-part {
+ display: inline-block;
+ width: 50%;
+ font-size: 0;
+ margin-top: 15px;
+ img {
+ margin-left: 5%;
+ width: 500px;
+ }
+ }
+ @media screen and (max-width: 1050px){
+ & {
+ height: 474px;
+ }
+ .left-part {
+ width: 100%;
+ }
+ .right-part {
+ width: 100%;
+ margin-top: 38px;
+ img {
+ max-width: 100%;
+ margin-left: 0;
+ }
+ }
+ }
+ }
+ }
.users-section {
box-sizing: border-box;
max-width: $contentWidth;
@@ -491,7 +582,7 @@
padding: 80px 40px 40px;
position: relative;
&::before {
- content: "";
+ content: '';
position: absolute;
top: 0;
left: 50%;
@@ -501,7 +592,7 @@
border-right: 1px solid #666;
}
&::after {
- content: "";
+ content: '';
position: absolute;
top: 66px;
left: 50%;
@@ -545,25 +636,6 @@
}
}
@media screen and (max-width: $mobileWidth) {
- min-width: auto;
- .top-section {
- height: 100vh;
- max-height: 1335px;
- background-image: url("/img/banner-mobile.png");
- background-position: right 50% bottom 0%;
- background-size: cover;
- .pc-bg {
- display: none;
- }
- .product-name {
- h2 {
- font-size: 36px;
- }
- }
- .product-desc {
- font-size: 18px;
- }
- }
.introduction-section {
padding: 0 20px;
&::before {
@@ -572,51 +644,10 @@
&::after {
left: 19px;
}
- .introduction-body {
- min-height: auto;
- .introduction {
- margin: 40px auto 0 auto;
- h3 {
- width: 100%;
- font-size: 28px;
- }
- p {
- font-size: 18px;
- width: 100%;
- height: auto;
- text-align: center;
- }
- }
- img {
- width: 100%;
- margin: 40px 0;
- height: auto;
- }
- }
- }
- .feature-section {
- padding: 40px 20px;
- h3 {
- font-size: 28px;
- margin: 0 0 20px 0;
- }
- ul {
- width: 100%;
- flex-direction: column;
- li {
- width: 100%;
- }
- }
}
- .events-section {
- h3 {
- font-size: 28px;
- margin: 20px 0 40px 0;
- }
- padding: 0 10px;
- .swiper-button-next, .swiper-button-prev{
- display: none;
- }
+ .feature-section, .users-section {
+ padding-left: 20px;
+ padding-right: 20px;
}
}
}
diff --git a/src/pages/user/index.jsx b/src/pages/user/index.jsx
index 21fbd0d..1bd983f 100644
--- a/src/pages/user/index.jsx
+++ b/src/pages/user/index.jsx
@@ -4,9 +4,6 @@ import Header from '../../components/header';
import Language from '../../components/language';
import homeConfig from '../../../site_config/home';
import './user.scss';
-import Footer from '../../components/footer';
-import Swiper from 'swiper/swiper-bundle';
-import 'swiper/swiper-bundle.css';
class User extends Language {
constructor(props) {
@@ -16,25 +13,39 @@ class User extends Language {
starCount: 0,
forkCount: 0,
index: 0,
- swiper: null,
};
}
- componentDidMount() {
- this.swiper = new Swiper('.swiper-container', {
- loop: true,
- navigation: {
- nextEl: '.swiper-button-next',
- prevEl: '.swiper-button-prev',
- },
- pagination: {
- el: '.swiper-pagination',
- clickable: true,
- },
- });
+ addClick = (length) => {
+ if (this.state.index < length - 1) {
+ this.setState({
+ ...this.state,
+ index: this.state.index + 1,
+ });
+ } else {
+ this.setState({
+ ...this.state,
+ index: 0,
+ });
+ }
+ }
+
+ minusClick = (length) => {
+ if (this.state.index > 0) {
+ this.setState({
+ ...this.state,
+ index: this.state.index - 1,
+ });
+ } else {
+ this.setState({
+ ...this.state,
+ index: length - 1,
+ });
+ }
}
render() {
+ const { index } = this.state;
const language = this.getLanguage();
const { headerType } = this.state;
const headerLogo = headerType === 'normal' ? '/img/hlogo_colorful.svg' : '/img/hlogo_white.svg';
@@ -54,7 +65,7 @@ class User extends Language {
<h3>
{dataSource.ourusers.title}
</h3>
- <div className="button1-section">
+ <div className="button1-section" id="buttonleft">
<div className="overflow-section">
<ul>
{
@@ -70,30 +81,30 @@ class User extends Language {
</section>
<section className="review-section">
<h3>{dataSource.userreview.title}</h3>
- <div className="swiper-container">
- <div className="swiper-wrapper">
- {
- dataSource.userreview.list.map((ureview, i) => (
- <div key={i} className="swiper-slide">
- <div className="slide-content">
- <div className="img-box">
- <img src={ureview.img} />
- </div>
+ <div className="button-section" id="buttonleft">
+ <button onClick={() => this.minusClick(dataSource.userreview.list.length)} >
+ <img src="/img/gotoleft.png" />
+ </button>
+ <div className="overflow-section">
+ <ul>
+ {
+ dataSource.userreview.list.map((ureview, i) => (
+ <li key={i}>
+ <img src={ureview.img} />
<div className="name-section">
<p className="pr">{ureview.review} </p>
<p className="pn">{ureview.name} </p>
</div>
- </div>
- </div>
- ))
- }
+ </li>
+ ))[index]
+ }
+ </ul>
</div>
- <div className="swiper-button-next" />
- <div className="swiper-button-prev" />
- <div className="swiper-pagination" />
+ <button onClick={() => this.addClick(dataSource.userreview.list.length)}>
+ <img src="/img/gotoright.png" />
+ </button>
</div>
</section>
- <Footer logo="/img/ds_gray.svg" language={language} />
</div>
);
}
diff --git a/src/pages/user/user.scss b/src/pages/user/user.scss
index 067e4bc..22c89f4 100644
--- a/src/pages/user/user.scss
+++ b/src/pages/user/user.scss
@@ -1,21 +1,161 @@
-@import "../../variables.scss";
-@import "../../reset.scss";
+@import '../../variables.scss';
+@import '../../reset.scss';
@keyframes slashStar {
0% {
- opacity: 1;
- }
+ opacity: 1; }
100% {
- opacity: 0;
- }
+ opacity: 0; }
}
.user-page {
- .ourusers-section {
+ .top-section {
+ position: relative;
+
+ img {
+ width: 100%;
+ }
+ .animation {
+ position: absolute;
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background-color: #1BE1F6;
+ }
+ .animation1 {
+ left: 15%;
+ top: 70%;
+ animation: slashStar 2s ease-in-out 0.3s infinite;
+ }
+ .animation2 {
+ left: 34%;
+ top: 35%;
+ animation: slashStar 2s ease-in-out 1.2s infinite;
+ }
+ .animation3 {
+ left: 53%;
+ top: 20%;
+ animation: slashStar 2s ease-in-out 0.5s infinite;
+ }
+ .animation4 {
+ left: 72%;
+ top: 64%;
+ animation: slashStar 2s ease-in-out 0.8s infinite;
+ }
+ .animation5 {
+ left: 87%;
+ top: 30%;
+ animation: slashStar 2s ease-in-out 1.5s infinite;
+ }
+ .vertical-middle {
+ position: absolute;
+ left: 0;
+ top: 40%;
+ transform: translateY(-50%);
+ box-sizing: border-box;
+ width: 100%;
+ text-align: center;
+ padding: 0 20px;
+ }
+ .product-name {
+ position: relative;
+ display: inline-block;
+ h2 {
+ font-family: Avenir-Heavy;
+ font-size: 46px;
+ color: #FFF;
+ text-align: center;
+ word-break: break-word;
+ margin: 0;
+ }
+ }
+ .product-desc {
+ opacity: 0.6;
+ font-family: Avenir-Medium;
+ font-size: 24px;
+ color: #FFF;
+ text-align: center;
+ margin: 12px auto 0;
+ max-width: 730px;
+ }
+ .button-area {
+ text-align: center;
+ margin-top: 40px;
+ .button {
+ margin-right: 20px;
+ }
+ .button:last-child {
+ margin-right: 0;
+ }
+ }
+ .github-buttons {
+ margin-top: 20px;
+ text-align: center;
+ a {
+ margin-right: 12px;
+ &:last-child {
+ margin-right: 0;
+ }
+ div {
+ border-radius: 2px;
+ display: inline-block;
+ height: 24px;
+ line-height: 24px;
+ font-size: 12px;
+ padding: 0 8px;
+ color: #fff;
+ background: rgba(255, 255, 255, 0.2);
+ img {
+ width: 16px;
+ height: 16px;
+ vertical-align: middle;
+ margin-top: -6px;
+ }
+ .count {
+ font-family: TXD_D_Medium;
+ font-size: 16px;
+ padding-left: 4px;
+ display: inline-block;
+ height: 100%;
+ min-width: 30px;
+ }
+ }
+ }
+ }
+ .version-note {
+ text-align: center;
+ margin: 22px 0 10px;
+ a {
+ text-decoration: none;
+ display: inline-block;
+ font-family: Avenir-Heavy;
+ font-size: 14px;
+ color: #FFF;
+ text-align: center;
+ background: #46484B;
+ border-radius: 2px;
+ line-height: 24px;
+ padding: 0 6px;
+ margin-right: 10px;
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ }
+ .release-date {
+ font-family: Avenir-Medium;
+ font-size: 12px;
+ color: #999;
+ text-align: center;
+ }
+ }
+
+ .ourusers-section{
display: flex;
flex-direction: column;
align-items: center;
- margin: 110px auto 80px auto;
+ margin-bottom: 40px;
+ margin:110px auto;
h3 {
font-family: Avenir-Heavy;
font-size: 36px;
@@ -24,33 +164,33 @@
margin-top: 40px;
margin-bottom: 60px;
}
- .button1-section {
+ .button1-section{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
- img {
+ img{
width: 80px;
height: 80px;
&:hover {
box-shadow: 0px 0px 12px 0px rgba(9, 97, 197, 0.1);
}
}
- button {
+ button{
border: hidden;
background-color: transparent;
}
- .overflow-section {
+ .overflow-section{
display: flex;
width: 70%;
- ul {
+ ul{
display: inline-flex;
flex-wrap: wrap;
- li {
+ li{
list-style: none;
margin: 5px 5px 5px 5px;
- img {
+ img{
width: 100px;
height: 100px;
&:hover {
@@ -62,11 +202,11 @@
}
}
}
- .review-section {
+ .review-section{
display: flex;
flex-direction: column;
align-items: center;
- margin-bottom: 80px;
+ margin-bottom: 40px;
h3 {
font-family: Avenir-Heavy;
font-size: 36px;
@@ -74,94 +214,84 @@
text-align: center;
margin-top: 40px;
}
- .swiper-container {
- width: 80%;
- overflow: hidden;
- position: relative;
- margin: 20px 40px;
- .swiper-wrapper {
- align-items: center;
+ .button-section{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ img{
+ width: 80px;
+ height: 80px;
+ &:hover {
+ box-shadow: 0px 0px 12px 0px rgba(9, 97, 197, 0.1);
+ }
}
- .slide-content {
+ button{
+ border: hidden;
+ background-color: transparent;
+ }
+ .overflow-section{
+ overflow: hidden;
+ width: 65%;
+ height: 350px;
+ margin: 40px 0px 20px 0px;
+ background: #F9FAFA;
display: flex;
align-items: center;
- justify-content: center;
- width: calc(100% - 120px);
- background-color: #f9fafa;
- margin: 40px 60px;
- padding: 20px;
- box-sizing: border-box;
- min-height: 300px;
- .img-box {
- width: 150px;
- height: 150px;
- margin: 0 40px 0 50px;
- display: flex;
+ ul{
+ display: -webkit-box;
align-items: center;
- img {
+ flex-direction: row;
+ width: 100%;
+ li{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ list-style: none;
width: 100%;
+ img{
+ width: 150px;
+ height: 150px;
+ margin: 0 40px 0 50px;
+ }
+ .name-section{
+ display: flex;
+ flex-direction: column;
+ margin-left: 20px;
+ }
+ p{
+ font-family: Avenir-Heavy;
+ }
+ .pr{
+ font-size: 20px;
+ margin-right: 20px;
+ }
+ .pn{
+ font-size: 18px;
+ text-align: right;
+ margin-top: 40px;
+ margin-right: 20px;
+ }
}
}
- .name-section {
- flex: 1;
- }
}
}
}
@media screen and (max-width: $mobileWidth) {
- .ourusers-section {
- margin: 70px auto 40px auto;
- h3 {
- font-size: 28px;
- margin-bottom: 40px;
+ .introduction-section {
+ padding: 0 20px;
+ &::before {
+ left: 20px;
}
- .button1-section {
- .overflow-section {
- width: 100%;
- ul {
- justify-content: center;
- }
- }
+ &::after {
+ left: 19px;
}
}
- .review-section {
- h3 {
- font-size: 28px;
- margin: 0 0 20px 0;
- }
- .swiper-container {
- width: 100%;
- overflow: hidden;
- position: relative;
- .swiper-wrapper {
- align-items: stretch;
- }
- .swiper-slide {
- background-color: #f9fafa;
- height: auto;
- }
- .slide-content {
- width: 100%;
- margin: 30px 0;
- flex-direction: column;
- .img-box {
- width: 150px;
- height: 150px;
- background-color: #fff;
- display: flex;
- align-items: center;
- margin-bottom: 20px;
- img {
- width: 100%;
- }
- }
- }
- .swiper-button-prev,
- .swiper-button-next {
- display: none;
- }
- }
+ .feature-section, .users-section {
+ padding-left: 20px;
+ padding-right: 20px;
}
}
}
diff --git a/src/variables.scss b/src/variables.scss
index 9d13a21..6eaf859 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -22,8 +22,3 @@ $barHeight: 200px;
$mobileWidth: 640px;
// 页面主体最大宽度
$contentWidth: 1280px;
-
-
-$navMiddle: $contentWidth;
-$navSmall: 1050px;
-$navMini: 968px;
\ No newline at end of file