-
+
})
Fish Design
-
基于 React 实现的高质量的企业级 UI 组件库，
帮助设计者与开发者快速构建系统。
+
基于 React 实现的高质量的企业级 UI 组件库，帮助设计者与开发者快速构建系统。
@@ -76,25 +86,25 @@ export default class Home extends React.Component {
简洁｜Concise
-
+
如无必要 勿增实体：慎重筛选客户当前需要信息内容
直接｜Immediate
-
+
提供用户操作后的直接反馈，保证用户的操作结果符合预期
优雅｜Elegent
-
+
设计方案追求优雅，給使用者有质感的操作感受
适应性｜Adaptability
-
+
设计方案提供可扩展能力及适应性，适应不同模式的企业使用
@@ -104,25 +114,25 @@ export default class Home extends React.Component {
-
+
贡献指南
-
+
更新日志
-
+
组件库
diff --git a/site/pages/home/index.less b/site/pages/home/index.less
index 4d5380efe..ca5e816b1 100644
--- a/site/pages/home/index.less
+++ b/site/pages/home/index.less
@@ -1,94 +1,105 @@
@import (reference)'../../styles/mixin';
+.app {
+ font-family: "PingFangSC-Medium";
+}
+
+.u-qrcode {
+ width: 160px;
+ height: 160px;
+}
+
.m-home-page {
background: url("//ysf.qiyukf.net/vuewbfdvoyaojqoeaaefhjskpwpbloor") 0 400px no-repeat;
background-size: 100px;
+
.banner {
- height: 640px;
- padding: 82px;
- background: url("//ysf.qiyukf.net/zeenqqdsasgclvvedsbvueqvkzpufgoj") top right no-repeat;
+ padding: 82px 0 74px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: url("//ysf.nosdn.127.net/zeenqqdsasgclvvedsbvueqvkzpufgoj") top right no-repeat;
}
+
.left-logo {
- width: 50%;
- float: left;
- text-align: right;
+ transform: translateX(40px);
+
img.logo {
- width: 450px;
+ width: 500px;
+ height: 500px;
-webkit-user-drag: none;
user-select: none;
}
}
+
.right-desc {
- width: 50%;
- float: left;
- margin-top: 130px;
- padding-left: 20px;
.title {
font-size: 36px;
- color: #2e2e33;
- line-height: 50px;
+ color: #2E2E33;
margin-bottom: 8px;
}
+
.desc {
+ font-family: "PingFangSC-Regular";
font-size: 20px;
- line-height: 28px;
- color: #85888f;
- margin-bottom: 32px;
+ color: #848B99;
+ max-width: 468px;
+ margin-bottom: 28px;
}
+
.button-group {
.button {
- border-radius: 100px;
- display: inline-block;
- margin-bottom: 20px;
+ width: 167px;
height: 40px;
- line-height: 40px;
- text-align: center;
- text-decoration: none;
- }
- .start {
- background: #337eff;
- width: 120px;
- color: #fff;
- font-size: 18px;
- margin-right: 8px;
- transition: all ease 0.3s;
- }
- .start:hover {
- background: #4c8eff;
- }
- .github {
- border: 1px solid #dbdbdb;
- width: 140px;
- background: url('../../assets/fd-web-2.2-github@2x.svg') center no-repeat;
- background-size: 88px;
- }
- .github:hover {
- border: 1px solid #337eff;
- background: url('../../assets/fd-github-active.svg') center no-repeat;
- background-size: 88px;
+ background: #337EFF;
+ border-radius: 100px;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ font-family: "PingFangSC-Semibold";
+ font-size: 16px;
+ color: #FFF;
+ letter-spacing: 0;
+
+ &:last-child {
+ margin-left: 10px;
+ }
+
+ img {
+ width: 16px;
+ height: 16px;
+ margin-left: 14px;
+ }
}
}
+
}
+
.design {
text-align: center;
margin: 0 auto;
padding-bottom: 120px;
+
.title {
font-size: 28px;
color: #27282a;
text-align: center;
margin-bottom: 36px;
}
+
.design-list {
display: flex;
justify-content: center;
}
+
.principle {
width: 268px;
height: 228px;
+
&:not(:last-child) {
margin-right: 36px;
}
+
i {
display: inline-block;
text-align: center;
@@ -97,15 +108,18 @@
background: #337eff;
margin-bottom: 20px;
}
+
h3 {
font-size: 18px;
margin-bottom: 16px;
color: #4f5059;
}
+
p {
font-size: 14px;
color: #85888f;
}
+
img {
width: 120px;
-webkit-user-drag: none;
@@ -120,37 +134,45 @@
margin: auto;
}
}
+
.resource {
text-align: center;
margin: 0 auto;
padding-bottom: 120px;
+
.title {
font-size: 28px;
color: #27282a;
text-align: center;
margin-bottom: 36px;
}
+
.resource-list {
display: flex;
justify-content: center;
}
+
.resource-item {
width: 268px;
+
&:not(:last-child) {
margin-right: 36px;
}
+
img {
width: 100%;
-webkit-user-drag: none;
user-select: none;
margin-bottom: 12px;
}
+
a {
font-size: 18px;
color: #4f5059;
text-decoration: none;
display: inline-block;
}
+
a:hover {
color: #337eff;
}
diff --git a/site/styles/base.less b/site/styles/base.less
index 67bb0ab93..211d0fb90 100755
--- a/site/styles/base.less
+++ b/site/styles/base.less
@@ -9,10 +9,17 @@ html,
body {
height: 100%;
-webkit-font-smoothing: antialiased;
- .scrollbar();
- &::-webkit-scrollbar {
- width: 6px;
- }
+}
+
+*::-webkit-scrollbar {
+ width: 4px;
+ height: 0;
+ background-color: #fff;
+}
+
+*::-webkit-scrollbar-thumb {
+ border-radius: 100px;
+ background-color: rgba(153, 153, 153, 0.6);
}
@media screen and (max-width: 1125px) {
@@ -29,12 +36,14 @@ body {
//主站样式
.app {
+
//顶部fixed
.fixed-header-layout {
- > .fishd-affix {
+ >.fishd-affix {
z-index: 11;
}
}
+
.fish-header {
z-index: 1;
height: 64px;
@@ -45,16 +54,20 @@ body {
left: 0;
width: 100%;
position: relative;
+
@media (max-width: @screen-lg) {
height: 128px;
}
+
.header-title {
text-align: left;
+
img {
height: 36px;
margin: 13px 0 13px 24px;
}
}
+
h1 {
position: relative;
margin: 0;
@@ -65,6 +78,7 @@ body {
font-size: 16px;
color: #45474d;
font-weight: bold;
+
a {
text-decoration: none;
font-size: 16px;
@@ -73,6 +87,7 @@ body {
text-align: center;
display: block;
}
+
img {
vertical-align: sub;
pointer-events: none;
@@ -85,13 +100,10 @@ body {
line-height: 22px;
padding-left: 60px;
margin: 22px auto 0;
- .search-icon {
- width: 16px;
- height: 16px;
- margin-right: -4px;
- margin-bottom: 2px;
- }
+
input {
+ font-family: "PingFangSC-Medium";
+ padding: 0;
font-size: 14px;
margin-top: -5px;
width: 200px;
@@ -107,13 +119,20 @@ body {
background-color: rgba(255, 255, 255, 0);
border-radius: 4px;
transition: all 0.3s;
+
+ &::placeholder {
+ color: #777;
+ }
}
+
input:focus {
outline: 0;
}
}
.nav {
+ display: flex;
+ align-items: center;
float: right;
line-height: 64px;
height: 64px;
@@ -131,36 +150,43 @@ body {
//层级关系需要保留，作样式覆盖
/* stylelint-disable */
.nav-item {
+ font-family: "PingFangSC-Regular";
font-size: 16px;
margin: 0 0 0 20px;
float: left;
list-style: none;
position: relative;
cursor: pointer;
+
&:last-child {
cursor: default;
margin-left: 34px;
}
+
.nav-lang {
cursor: pointer;
display: inline-block;
height: 100%;
+
&.active {
font-weight: 700;
opacity: 1;
font-size: 16px;
- color: @primary-color;
+ color: @text-9;
}
}
+
a {
text-decoration: none;
color: #383838;
display: block;
- padding: 0 20px;
+ padding: 0 10px;
transition: all ease 0.3s;
+
&.active,
&:hover {
color: @primary-color;
+
&:before {
content: "";
display: block;
@@ -176,14 +202,25 @@ body {
}
}
}
+
.nav-version {
+ font-family: "PingFangSC-Medium";
background: @primary-color;
font-size: 12px;
color: #fff;
+ height: 20px;
+ line-height: 20px;
border-radius: 46px;
- margin-left: 40px;
- padding: 4px 13px;
+ margin-left: 20px;
+ margin-right: 20px;
+ padding: 0 20px;
}
+
+ .u-github {
+ display: flex;
+ align-items: center;
+ }
+
/* stylelint-enable */
}
@@ -194,39 +231,55 @@ body {
.footer {
background-color: #292c33;
text-align: center;
+
.logo {
padding: 55px 0 22px;
+
img {
width: 40px;
}
+
h3 {
font-size: 24px;
- color: #d2d3d6;
+ color: #d2d3d6
}
+
.version {
font-size: 13px;
color: #65676e;
}
}
+
.link-item {
font-size: 14px;
color: #fff;
+ font-family: PingFangSC-Regular;
display: inline-block;
min-width: 56px;
margin-bottom: 50px;
text-decoration: none;
+
&:not(:last-child) {
margin-right: 50px;
}
}
+
.github {
+ font-family: PingFangSC-Regular;
border-top: 1px solid #404349;
padding: 15px 0;
+
+ a {
+ display: flex;
+ align-items: center;
+ justify-content: center
+ }
+
img {
height: 20px;
position: relative;
- top: -5px;
}
+
span {
display: inline-block;
margin-left: 8px;
@@ -242,8 +295,8 @@ body {
.img-icon-@{size} {
display: inline-block;
vertical-align: baseline;
- width: ~'@{size}px';
- height: ~'@{size}px';
+ width:~'@{size}px';
+ height:~'@{size}px';
}
}
diff --git a/source/components/PicturePreview/__tests__/__snapshots__/demo.test.js.snap b/source/components/PicturePreview/__tests__/__snapshots__/demo.test.js.snap
index a43603fb5..b467ed098 100644
--- a/source/components/PicturePreview/__tests__/__snapshots__/demo.test.js.snap
+++ b/source/components/PicturePreview/__tests__/__snapshots__/demo.test.js.snap
@@ -20,7 +20,7 @@ exports[`Renders picturePreview demo correctly 1`] = `
})
-
+
})
+