You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@inlong.apache.org by do...@apache.org on 2021/12/02 11:50:22 UTC
[incubator-inlong-website] branch master updated: [INLONG-1878] Optimize user display page layout style (#212)
This is an automated email from the ASF dual-hosted git repository.
dockerzhang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-inlong-website.git
The following commit(s) were added to refs/heads/master by this push:
new 1d6d727 [INLONG-1878] Optimize user display page layout style (#212)
1d6d727 is described below
commit 1d6d727c75486b3739cc457a31dd8a0bbcfbdb11
Author: bluewang <88...@users.noreply.github.com>
AuthorDate: Thu Dec 2 19:50:18 2021 +0800
[INLONG-1878] Optimize user display page layout style (#212)
---
src/pages/users/index.js | 28 ++++++++++++++--------------
src/pages/users/index.less | 42 ++++++++++++++++++------------------------
2 files changed, 32 insertions(+), 38 deletions(-)
diff --git a/src/pages/users/index.js b/src/pages/users/index.js
index 71640d6..c2e79ea 100644
--- a/src/pages/users/index.js
+++ b/src/pages/users/index.js
@@ -22,34 +22,34 @@ export default function() {
<p>{dataSource.content}</p>
</div>
<div className="users-middle-div">
- <div className="middle-div3">
+ <div className="middle-div1">
<div className="img-div1">
- <img src="/img/users/data-logo.png" className="img-style img-color" alt="腾讯大数据"/>
+ <img src="/img/users/data-logo.png" className="img-style" alt="腾讯大数据"/>
</div>
</div>
- <div className="middle-div2">
+ <div className="middle-div1">
<div className="img-div1">
- <img src="/img/users/game-logo.png" className="img-style img-color" alt="腾讯游戏"/>
+ <img src="/img/users/game-logo.png" className="img-style" alt="腾讯游戏"/>
</div>
</div>
- <div className="middle-div2">
+ <div className="middle-div1">
<div className="img-div1">
- <img src="/img/users/pay-logo.png" className="img-style img-color" alt="微信支付"/>
+ <img src="/img/users/pay-logo.png" className="img-style" alt="微信支付"/>
</div>
</div>
- <div className="middle-div2">
- <div className="img-div1">
- <img src="/img/users/meetting-logo.png" className="img-style img-color" alt="腾讯会议"/>
+ <div className="middle-div1">
+ <div className="img-div1 middle-div-margin3">
+ <img src="/img/users/meetting-logo.png" className="img-style" alt="腾讯会议"/>
</div>
</div>
- <div className="middle-div2">
- <div className="img-div1">
- <img src="/img/users/money-logo.png" className="img-style img-color" alt="财付通"/>
+ <div className="middle-div1">
+ <div className="img-div1 middle-div-margin2">
+ <img src="/img/users/money-logo.png" className="img-style" alt="财付通"/>
</div>
</div>
<div className="middle-div1">
- <div className="img-div1">
- <img src="/img/users/brain-logo.png" className="img-style img-color" alt="平台大脑"/>
+ <div className="img-div1 middle-div-margin1">
+ <img src="/img/users/brain-logo.png" className="img-style" alt="平台大脑"/>
</div>
</div>
</div>
diff --git a/src/pages/users/index.less b/src/pages/users/index.less
index e3a02c9..33d78dd 100644
--- a/src/pages/users/index.less
+++ b/src/pages/users/index.less
@@ -1,48 +1,42 @@
.users-div {
- width: 50%;
+ width: 100%;
height: 960px;
margin: 0 auto;
+ background: #666666;
}
.users-top-div {
- margin-left: 240px;
- width: 800px;
+ width: 50%;
text-align: center;
+ margin: 0 auto;
+ color: white;
}
.users-middle-div {
- width: 100%;
+ width: 50%;
height: 700px;
+ margin: 0 auto;
}
-
.middle-div1 {
- width: 200px;
+ width: 16.2%;
height: 600px;
float: left;
- margin-left: 10px;
}
-.middle-div2 {
- width: 200px;
- height: 600px;
- float: left;
- margin-left: 10px;
+.middle-div-margin1 {
+ margin-left: 13px;
}
-.middle-div3 {
- width: 200px;
- height: 600px;
- float: left;
+.middle-div-margin2 {
+ margin-right: 22px;
+}
+.middle-div-margin3 {
+ margin-right: 15px;
}
.img-div1 {
- border: 1px solid gainsboro;
- width: 180px;
height: 80px;
- margin: 10px auto;
+ margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.img-style {
- width: 160px;
- height: 68px;
-}
-.img-color {
- background: gainsboro;
+ width: auto;
+ height: auto;
}
\ No newline at end of file