maxjhandsome
/
seata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update navigator

This commit is contained in:
hanxie 2021-08-17 14:23:30 +08:00
parent d0d19c1f50
commit 06217dfee4
14 changed files with 537 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
build/blog.css
View File

@ -26,6 +26,55 @@
margin-right: 40px;
margin-top: 18px;
cursor: pointer; }
.header-container .header-body .nav-container {
position: relative;
cursor: pointer;
margin-right: 24px; }
.header-container .header-body .nav-container .word {
position: relative; }
.header-container .header-body .nav-container .word .menu-img {
position: absolute;
width: 24px;
height: 24px;
right: -42px;
top: 12px; }
.header-container .header-body .nav-container .word::before {
content: ' ';
opacity: .6;
position: absolute;
top: 30px;
right: -16px;
width: 0;
height: 0;
border-top: 6px solid white;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent; }
.header-container .header-body .nav-container .sub-nav-container {
display: none;
background-color: #f8f8ff;
position: absolute;
top: 48px;
min-width: 180px;
left: -48px; }
.header-container .header-body .nav-container .sub-nav-container li {
display: block;
padding-left: 24px;
padding-right: 24px;
height: 60px;
line-height: 60px;
margin: 0; }
.header-container .header-body .nav-container .sub-nav-container li a {
color: black; }
.header-container .header-body .nav-container .sub-nav-container li:hover {
text-decoration: underline;
background-color: #eee; }
.header-container .header-body .nav-container:hover {
color: #fff; }
.header-container .header-body .nav-container:hover .sub-nav-container {
display: block; }
.header-container .header-body .nav-container:hover .word::before {
opacity: 1; }
.header-container .header-body ul {
padding: 0;
margin: 0; }
@ -138,6 +187,8 @@
vertical-align: middle; }
@media screen and (max-width: 640px) {
.header-container .header-body .sub-nav-container li a {
color: black !important; }
.header-container .header-body .logo {
margin-left: 20px; }
.header-container .header-body .language-switch {

4
build/blog.js
View File

File diff suppressed because one or more lines are too long

51
build/blogDetail.css
View File

@ -26,6 +26,55 @@
margin-right: 40px;
margin-top: 18px;
cursor: pointer; }
.header-container .header-body .nav-container {
position: relative;
cursor: pointer;
margin-right: 24px; }
.header-container .header-body .nav-container .word {
position: relative; }
.header-container .header-body .nav-container .word .menu-img {
position: absolute;
width: 24px;
height: 24px;
right: -42px;
top: 12px; }
.header-container .header-body .nav-container .word::before {
content: ' ';
opacity: .6;
position: absolute;
top: 30px;
right: -16px;
width: 0;
height: 0;
border-top: 6px solid white;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent; }
.header-container .header-body .nav-container .sub-nav-container {
display: none;
background-color: #f8f8ff;
position: absolute;
top: 48px;
min-width: 180px;
left: -48px; }
.header-container .header-body .nav-container .sub-nav-container li {
display: block;
padding-left: 24px;
padding-right: 24px;
height: 60px;
line-height: 60px;
margin: 0; }
.header-container .header-body .nav-container .sub-nav-container li a {
color: black; }
.header-container .header-body .nav-container .sub-nav-container li:hover {
text-decoration: underline;
background-color: #eee; }
.header-container .header-body .nav-container:hover {
color: #fff; }
.header-container .header-body .nav-container:hover .sub-nav-container {
display: block; }
.header-container .header-body .nav-container:hover .word::before {
opacity: 1; }
.header-container .header-body ul {
padding: 0;
margin: 0; }
@ -138,6 +187,8 @@
vertical-align: middle; }
@media screen and (max-width: 640px) {
.header-container .header-body .sub-nav-container li a {
color: black !important; }
.header-container .header-body .logo {
margin-left: 20px; }
.header-container .header-body .language-switch {

4
build/blogDetail.js
View File

File diff suppressed because one or more lines are too long

51
build/community.css
View File

@ -26,6 +26,55 @@
margin-right: 40px;
margin-top: 18px;
cursor: pointer; }
.header-container .header-body .nav-container {
position: relative;
cursor: pointer;
margin-right: 24px; }
.header-container .header-body .nav-container .word {
position: relative; }
.header-container .header-body .nav-container .word .menu-img {
position: absolute;
width: 24px;
height: 24px;
right: -42px;
top: 12px; }
.header-container .header-body .nav-container .word::before {
content: ' ';
opacity: .6;
position: absolute;
top: 30px;
right: -16px;
width: 0;
height: 0;
border-top: 6px solid white;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent; }
.header-container .header-body .nav-container .sub-nav-container {
display: none;
background-color: #f8f8ff;
position: absolute;
top: 48px;
min-width: 180px;
left: -48px; }
.header-container .header-body .nav-container .sub-nav-container li {
display: block;
padding-left: 24px;
padding-right: 24px;
height: 60px;
line-height: 60px;
margin: 0; }
.header-container .header-body .nav-container .sub-nav-container li a {
color: black; }
.header-container .header-body .nav-container .sub-nav-container li:hover {
text-decoration: underline;
background-color: #eee; }
.header-container .header-body .nav-container:hover {
color: #fff; }
.header-container .header-body .nav-container:hover .sub-nav-container {
display: block; }
.header-container .header-body .nav-container:hover .word::before {
opacity: 1; }
.header-container .header-body ul {
padding: 0;
margin: 0; }
@ -138,6 +187,8 @@
vertical-align: middle; }
@media screen and (max-width: 640px) {
.header-container .header-body .sub-nav-container li a {
color: black !important; }
.header-container .header-body .logo {
margin-left: 20px; }
.header-container .header-body .language-switch {

4
build/community.js
View File

File diff suppressed because one or more lines are too long

51
build/documentation.css
View File

@ -26,6 +26,55 @@
margin-right: 40px;
margin-top: 18px;
cursor: pointer; }
.header-container .header-body .nav-container {
position: relative;
cursor: pointer;
margin-right: 24px; }
.header-container .header-body .nav-container .word {
position: relative; }
.header-container .header-body .nav-container .word .menu-img {
position: absolute;
width: 24px;
height: 24px;
right: -42px;
top: 12px; }
.header-container .header-body .nav-container .word::before {
content: ' ';
opacity: .6;
position: absolute;
top: 30px;
right: -16px;
width: 0;
height: 0;
border-top: 6px solid white;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent; }
.header-container .header-body .nav-container .sub-nav-container {
display: none;
background-color: #f8f8ff;
position: absolute;
top: 48px;
min-width: 180px;
left: -48px; }
.header-container .header-body .nav-container .sub-nav-container li {
display: block;
padding-left: 24px;
padding-right: 24px;
height: 60px;
line-height: 60px;
margin: 0; }
.header-container .header-body .nav-container .sub-nav-container li a {
color: black; }
.header-container .header-body .nav-container .sub-nav-container li:hover {
text-decoration: underline;
background-color: #eee; }
.header-container .header-body .nav-container:hover {
color: #fff; }
.header-container .header-body .nav-container:hover .sub-nav-container {
display: block; }
.header-container .header-body .nav-container:hover .word::before {
opacity: 1; }
.header-container .header-body ul {
padding: 0;
margin: 0; }
@ -138,6 +187,8 @@
vertical-align: middle; }
@media screen and (max-width: 640px) {
.header-container .header-body .sub-nav-container li a {
color: black !important; }
.header-container .header-body .logo {
margin-left: 20px; }
.header-container .header-body .language-switch {

4
build/documentation.js
View File

File diff suppressed because one or more lines are too long

187
build/home.css
View File

@ -26,6 +26,55 @@
margin-right: 40px;
margin-top: 18px;
cursor: pointer; }
.header-container .header-body .nav-container {
position: relative;
cursor: pointer;
margin-right: 24px; }
.header-container .header-body .nav-container .word {
position: relative; }
.header-container .header-body .nav-container .word .menu-img {
position: absolute;
width: 24px;
height: 24px;
right: -42px;
top: 12px; }
.header-container .header-body .nav-container .word::before {
content: ' ';
opacity: .6;
position: absolute;
top: 30px;
right: -16px;
width: 0;
height: 0;
border-top: 6px solid white;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent; }
.header-container .header-body .nav-container .sub-nav-container {
display: none;
background-color: #f8f8ff;
position: absolute;
top: 48px;
min-width: 180px;
left: -48px; }
.header-container .header-body .nav-container .sub-nav-container li {
display: block;
padding-left: 24px;
padding-right: 24px;
height: 60px;
line-height: 60px;
margin: 0; }
.header-container .header-body .nav-container .sub-nav-container li a {
color: black; }
.header-container .header-body .nav-container .sub-nav-container li:hover {
text-decoration: underline;
background-color: #eee; }
.header-container .header-body .nav-container:hover {
color: #fff; }
.header-container .header-body .nav-container:hover .sub-nav-container {
display: block; }
.header-container .header-body .nav-container:hover .word::before {
opacity: 1; }
.header-container .header-body ul {
padding: 0;
margin: 0; }
@ -138,6 +187,8 @@
vertical-align: middle; }
@media screen and (max-width: 640px) {
.header-container .header-body .sub-nav-container li a {
color: black !important; }
.header-container .header-body .logo {
margin-left: 20px; }
.header-container .header-body .language-switch {
@ -308,6 +359,41 @@
.docsite-icon-feature-4:before {
content: "\e64b"; }
.bone {
width: 24px;
height: 2px;
position: relative; }
.bone::before {
position: absolute;
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
left: 0;
top: -2px; }
.bone::after {
position: absolute;
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
right: 0;
top: -2px; }
.bone-dark {
background-color: #1161F6; }
.bone-dark::before {
background-color: #1161F6; }
.bone-dark::after {
background-color: #1161F6; }
.bone-light {
background-color: #fff;
opacity: 0.8; }
.bone-light::before {
background-color: #fff;
opacity: 0.8; }
.bone-light::after {
background-color: #fff;
opacity: 0.8; }
@charset "UTF-8";
@font-face {
font-family: octicons-link;
@ -1813,6 +1899,25 @@ h1, h2, h3, h4, h5, h6 {
vertical-align: middle;
font-size: 16px;
padding: 0 8px; }
.home-page .top-section .version-note {
margin: 22px 0 10px; }
.home-page .top-section .version-note a {
text-decoration: none;
display: inline-block;
font-family: Avenir-Heavy;
font-size: 14px;
color: #FFF;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
line-height: 24px;
padding: 0 6px;
margin-right: 10px; }
.home-page .top-section .version-note a:last-child {
margin-right: 0; }
.home-page .top-section .release-date {
font-family: Avenir-Medium;
font-size: 12px;
color: #fff; }
.home-page .top-section .animation {
width: 546px;
height: 578px;
@ -1994,53 +2099,38 @@ h1, h2, h3, h4, h5, h6 {
max-width: 1280px;
margin: 0 auto;
padding: 80px 40px 40px;
position: relative;
}
.home-page .users-section .bone {
margin: 0 auto 40px;
}
.home-page .users-section h3 {
font-family: Avenir-Heavy;
font-size: 36px;
color: #333;
text-align: center;
}
.home-page .users-section p {
font-family: Avenir-Medium;
font-size: 14px;
color: #666;
text-align: center;
margin: 0 0 40px;
}
.home-page .users-section p a {
color: #1e6bb8;
text-decoration: none;
}
.home-page .users-section .users {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.home-page .users-section .users .user-item {
display: flex;
width: 140px;
height: 80px;
margin: 10px;
padding: 4px;
border: 1px solid #eee;
justify-content: center;
align-items: center;
}
.home-page .users-section .users .user-item img {
width: 100%;
}
position: relative; }
.home-page .users-section .bone {
margin: 0 auto 40px; }
.home-page .users-section h3 {
font-family: Avenir-Heavy;
font-size: 36px;
color: #333;
text-align: center; }
.home-page .users-section p {
font-family: Avenir-Medium;
font-size: 14px;
color: #666;
text-align: center;
margin: 0 0 40px; }
.home-page .users-section p a {
color: #1e6bb8;
text-decoration: none; }
.home-page .users-section .users {
display: flex;
flex-wrap: wrap;
justify-content: center; }
.home-page .users-section .users .user-item {
display: flex;
width: 140px;
height: 80px;
margin: 10px;
padding: 4px;
border: 1px solid #eee;
justify-content: center;
align-items: center; }
.home-page .users-section .users .user-item img {
width: 100%; }
.home-page .footer-container {
background: #fff; }
@ -2053,5 +2143,8 @@ h1, h2, h3, h4, h5, h6 {
.home-page .introduction-section::after {
left: 19px; }
.home-page .feature-container {
padding-left: 20px;
padding-right: 20px; }
.home-page .feature-section-body, .home-page .users-section {
padding-left: 20px;
padding-right: 20px; } }

4
build/home.js
View File

File diff suppressed because one or more lines are too long

19
package-lock.json generated
View File

@ -2,7 +2,6 @@
"name": "site",
"version": "0.0.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@types/node": {
"version": "10.12.27",
@ -11591,6 +11590,15 @@
"xtend": "^4.0.0"
}
},
"string_decoder": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dev": true,
"requires": {
"safe-buffer": "~5.1.0"
}
},
"string-width": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@ -11618,15 +11626,6 @@
}
}
},
"string_decoder": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dev": true,
"requires": {
"safe-buffer": "~5.1.0"
}
},
"stringstream": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.6.tgz",

66
site_config/site.js
View File

@ -17,6 +17,39 @@ export default {
text: 'DOCS',
link: '/en-us/docs/overview/what-is-seata.html',
},
{
key: 'solution',
text: 'SOLUTIONS',
link: '',
imgUrl: 'https://img.alicdn.com/tfs/TB1esl_m.T1gK0jSZFrXXcNCXXa-200-200.png',
children: [{
key: 'gts',
text: 'Distributed transaction solution',
link: 'https://www.aliyun.com/aliware/txc?spm=seata-website.topbar.0.0.0'
}, {
key: 'msha',
text: 'High-availability solution',
link: 'https://www.aliyun.com/product/ahas?spm=seata-website.topbar.0.0.0'
}, {
key: 'micoservice',
text: 'Microservice solutions',
link: 'https://cn.aliyun.com/product/aliware/mse?spm=seata-website.topbar.0.0.0'
}, {
key: 'serverless',
text: 'Serverless solution for miscoservices',
link: 'https://cn.aliyun.com/product/aliware/sae?spm=seata-website.topbar.0.0.0'
},
{
key: 'appas',
text: 'APaaS solution',
link: 'https://www.aliyun.com/product/edas?spm=seata-website.topbar.0.0.0'
}, {
key: 'mesh',
text: 'Service mesh solution',
link: 'https://www.aliyun.com/product/servicemesh?spm=seata-website.topbar.0.0.0',
}
]
},
{
key: 'developers',
text: 'DEVELOPERS',
@ -95,6 +128,39 @@ export default {
text: '文档',
link: '/zh-cn/docs/overview/what-is-seata.html',
},
{
key: 'solution',
text: '解决方案',
link: '',
imgUrl: 'https://img.alicdn.com/tfs/TB1esl_m.T1gK0jSZFrXXcNCXXa-200-200.png',
children: [{
key: 'gts',
text: '分布式事务解决方案',
link: 'https://www.aliyun.com/aliware/txc?spm=seata-website.topbar.0.0.0'
}, {
key: 'msha',
text: '高可用解决方案',
link: 'https://www.aliyun.com/product/ahas?spm=seata-website.topbar.0.0.0'
}, {
key: 'micoservice',
text: '微服务解决方案',
link: 'https://cn.aliyun.com/product/aliware/mse?spm=seata-website.topbar.0.0.0'
}, {
key: 'serverless',
text: '微服务Serverless解决方案',
link: 'https://cn.aliyun.com/product/aliware/sae?spm=seata-website.topbar.0.0.0'
},
{
key: 'appas',
text: 'APaaS解决方案',
link: 'https://www.aliyun.com/product/edas?spm=seata-website.topbar.0.0.0'
}, {
key: 'mesh',
text: '服务网格解决方案',
link: 'https://www.aliyun.com/product/servicemesh?spm=seata-website.topbar.0.0.0',
}
]
},
{
key: 'developers',
text: '开发者',

71
src/components/header/index.jsx
View File

@ -26,7 +26,7 @@ const searchSwitch = {
url: 'https://www.google.com/search?q=',
},
};
const noop = () => {};
const noop = () => { };
const propTypes = {
currentKey: PropTypes.string,
logo: PropTypes.string.isRequired,
@ -131,41 +131,41 @@ class Header extends React.Component {
</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>
) : null
(
<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>)
:
null
(<span
className={
classnames({
'language-switch': true,
[`language-switch-${type}`]: true,
})
}
onClick={this.switchLang}
>
{languageSwitch.find(lang => lang.value === language).text}
</span>)
:
null
}
<div
className={
@ -183,14 +183,15 @@ class Header extends React.Component {
<ul>
{siteConfig[language].pageMenu.map(item => (
<li
key={item.key}
className={classnames({
'menu-item': true,
[`menu-item-${type}`]: true,
[`menu-item-${type}-active`]: currentKey === item.key,
})}
key={item.key}
>
<a href={getLink(item.link)} target={item.target || '_self'}>{item.text}</a>
{item.link ? <span><a href={getLink(item.link)}>{item.text}</a>{item.imgUrl ? <img className={"menu-img"} src={item.imgUrl} /> : null}</span> : null}
{item.children ? <div className="nav-container"><div className="word"><a >{item.text}</a>{item.imgUrl ? <img className={"menu-img"} src={item.imgUrl} /> : null}</div><ul className="sub-nav-container" style={{ width: language === 'zh-cn' ? 220 : 290 }}>{item.children.map((child) => <li><a href={child.link} target="_blank">{child.text}</a></li>)}</ul> </div> : null}
</li>))}
</ul>
</div>

72
src/components/header/index.scss
View File

@ -34,6 +34,71 @@
cursor: pointer;
}
}
.nav-container {
position: relative;
cursor: pointer;
margin-right: 24px;
.word {
position: relative;
.menu-img {
position: absolute;
width: 24px;
height: 24px;
right: -42px;
top: 12px;
}
&::before {
content: ' ';
opacity: .6;
position: absolute;
top: 30px;
right: -16px;
width: 0;
height: 0;
border-top: 6px solid white;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent;
}
}
.sub-nav-container {
display: none;
background-color: #f8f8ff;
position: absolute;
top: 48px;
min-width: 180px;
left: -48px;
li {
display: block;
padding-left: 24px;
padding-right: 24px;
height: 60px;
line-height: 60px;
margin: 0;
a {
color: black;
}
&:hover {
text-decoration: underline;
background-color: #eee;
}
}
}
&:hover {
color: #fff;
.sub-nav-container {
display: block;
}
.word {
&::before {
opacity: 1;
}
}
}
}
ul {
padding: 0;
margin: 0;
@ -191,6 +256,13 @@
@media screen and (max-width: $mobileWidth) {
.header-container {
.header-body {
.sub-nav-container {
li {
a {
color: black !important;
}
}
}
.logo {
margin-left: 20px;
}