This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch dev
in repository
https://gitbox.apache.org/repos/asf/incubator-streampark-website.git
The following commit(s) were added to refs/heads/dev by this push:
new 5bd5dc15 improve: add home screenshot (#244)
5bd5dc15 is described below
commit 5bd5dc15e78892b0132e13cb50a1a8ea0d8f8e28
Author: Kriszu <[email protected]>
AuthorDate: Fri Sep 8 22:58:10 2023 +0800
improve: add home screenshot (#244)
---
src/pages/home/hero.jsx | 5 +++
src/pages/home/screenshot.jsx | 28 ++++++++++++++++
src/pages/home/screenshot.less | 71 +++++++++++++++++++++++++++++++++++++++++
src/pages/team/index.jsx | 12 +++----
src/pages/team/index.less | 5 ++-
static/home/dark.png | Bin 0 -> 1204757 bytes
static/home/light.png | Bin 0 -> 1124026 bytes
7 files changed, 114 insertions(+), 7 deletions(-)
diff --git a/src/pages/home/hero.jsx b/src/pages/home/hero.jsx
index a9f62fe5..5b19eab2 100644
--- a/src/pages/home/hero.jsx
+++ b/src/pages/home/hero.jsx
@@ -5,6 +5,8 @@ import config from './languages.json'
import Dashboard from "../../../static/home/dashboard.svg"
import Top1 from "../../../static/home/top1.svg"
import Top2 from "../../../static/home/top2.svg"
+import Screenshot from './screenshot';
+
export default function () {
const isBrowser = useIsBrowser();
const language = isBrowser && location.pathname.indexOf('/zh-CN/') === 0 ?
'zh-CN' : 'en'
@@ -52,6 +54,9 @@ export default function () {
<div className="col-6 align-self-center" >
<div className="mt-5 mt-2 text-right" data-aos="fade-up"
data-aos-delay="100">
<Dashboard className="img-fluid" style={{ transform:
'translateY(4rem)' }} />
+ {/* <div className="img-fluid" style={{ transform:
'translateY(4rem)' }} >
+ <Screenshot />
+ </div> */}
</div>
</div>
</div>
diff --git a/src/pages/home/screenshot.jsx b/src/pages/home/screenshot.jsx
new file mode 100644
index 00000000..9fb45b99
--- /dev/null
+++ b/src/pages/home/screenshot.jsx
@@ -0,0 +1,28 @@
+import React, { useCallback, useRef, useState } from 'react'
+import './screenshot.less'
+
+export default function () {
+
+ const containerRef = useRef(null)
+
+ const [offsetX, setOffsetX] = useState(310);
+
+ const handleMouseMove = useCallback((event) => {
+ const { offsetX } = event.nativeEvent;
+ setOffsetX(offsetX);
+ },[setOffsetX])
+
+ return (
+ <div className='d-flex justify-content-end'>
+ <div className='screenshot' ref={containerRef} onMouseMove={(e) =>
handleMouseMove(e)}>
+ <img style={{ 'clip': `rect(auto, ${offsetX}px, auto, auto)` }}
className="overflow-hidden img-height" src="/home/dark.png" alt="" ></img>
+ <div className="overflow-hidden" >
+ <img src="/home/light.png" alt="" className='img-height' />
+ </div>
+ {/* <div className='screenshot-line-wrap' ref={lineRef} style={{ left:
offsetX+'px' }} >
+ <div className='screenshot-line'></div>
+ </div> */}
+ </div>
+ </div>
+ );
+}
diff --git a/src/pages/home/screenshot.less b/src/pages/home/screenshot.less
new file mode 100644
index 00000000..5e3519d5
--- /dev/null
+++ b/src/pages/home/screenshot.less
@@ -0,0 +1,71 @@
+/*------------------------------------
+ Process
+------------------------------------*/
+
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px)
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0)
+ }
+}
+// .screenshot-contain{
+// background: url(/static/home/MacBook.png) no-repeat;
+// }
+.screenshot {
+ width: 620px;
+ height: 380px;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ user-select: none;
+ z-index: 1000;
+ position: relative;
+
+ >img {
+ position: absolute;
+ animation: slide-up .3s ease-in-out;
+ box-shadow: 0 0 #0000, 0 0 #0000, 0 20px 25px -5px #0000001a, 0 8px 10px
-6px #0000001a;
+ will-change: clip;
+ user-select: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 900;
+ }
+
+ .img-height {
+ height: 380px;
+ }
+
+ .screenshot-line {
+ &-wrap {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ z-index: 900;
+ }
+
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ height: 100%;
+ cursor: grab;
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ top: 0;
+ width:3px;
+ height: 100%;
+ background-color: #2c7ef8;
+ }
+ }
+}
diff --git a/src/pages/team/index.jsx b/src/pages/team/index.jsx
index 3e9d36ae..9b30d377 100644
--- a/src/pages/team/index.jsx
+++ b/src/pages/team/index.jsx
@@ -38,12 +38,12 @@ export default function () {
<div className="row py-4">
{
dataSource.mentor.map((item, i) => (
- <div className='col-lg-3 col-sm-6 my-3' key={i}
data-aos="fade-up" data-aos-delay={i * 100}>
+ <div className='team-box my-3' key={i} data-aos="fade-up"
data-aos-delay={i * 100}>
<div className="hover-top-in text-center" >
<div className="overflow-hidden z-index-1
position-relative px-5">
<img className="team-user-img" src={item.avatarUrl}
title="" alt="" />
</div>
- <div className="mx-2 mx-xl-3 position-relative bg-team
text-center hover-top--in">
+ <div className="position-relative bg-team text-center
hover-top--in">
<h6 className="font-weight-bold team-name
mb-1">{item.name}</h6>
<small>{getGitName(item.gitUrl)}</small>
<div className="pt-2">
@@ -65,12 +65,12 @@ export default function () {
<div className="row py-4">
{
dataSource.PPMC.map((item, i) => (
- <div className='col-lg-3 col-sm-6 my-3' key={i}
data-aos="fade-up" data-aos-delay={i * 100}>
+ <div className='team-box my-3' key={i} data-aos="fade-up"
data-aos-delay={i * 100}>
<div className="hover-top-in text-center" >
<div className="overflow-hidden z-index-1
position-relative px-5">
<img className="team-user-img" src={item.avatarUrl}
title="" alt="" />
</div>
- <div className="mx-2 mx-xl-3 position-relative bg-team
text-center hover-top--in">
+ <div className="position-relative bg-team text-center
hover-top--in">
<h6 className="font-weight-bold team-name
mb-1">{item.name}</h6>
<small>{getGitName(item.gitUrl)}</small>
<div className="pt-2">
@@ -92,12 +92,12 @@ export default function () {
<div className="row py-4">
{
dataSource.committer.map((item, i) => (
- <div className='col-lg-3 col-sm-6 my-3' key={i}
data-aos="fade-up" data-aos-delay={i * 100}>
+ <div className='team-box my-3' key={i} data-aos="fade-up"
data-aos-delay={i * 100}>
<div className="hover-top-in text-center" >
<div className="overflow-hidden z-index-1
position-relative px-5">
<img className="team-user-img" src={item.avatarUrl}
title="" alt="" />
</div>
- <div className="mx-2 mx-xl-3 position-relative bg-team
text-center hover-top--in">
+ <div className="position-relative bg-team text-center
hover-top--in">
<h6 className="font-weight-bold team-name
mb-1">{item.name}</h6>
<small>{getGitName(item.gitUrl)}</small>
<div className="pt-2">
diff --git a/src/pages/team/index.less b/src/pages/team/index.less
index 15920470..95175d98 100644
--- a/src/pages/team/index.less
+++ b/src/pages/team/index.less
@@ -104,8 +104,11 @@
/*****************************
team
*****************************/
+.team-box{
+ width: 20%;
+}
.team-user-img {
- min-width: 200px;
+ min-width: 100px;
border-radius:50%;
border: 5px solid #fff;
box-shadow: 0 .375rem 1.5rem 0 rgba(87,96,113,.125)!important;
diff --git a/static/home/dark.png b/static/home/dark.png
new file mode 100644
index 00000000..9855ee46
Binary files /dev/null and b/static/home/dark.png differ
diff --git a/static/home/light.png b/static/home/light.png
new file mode 100644
index 00000000..14af2eed
Binary files /dev/null and b/static/home/light.png differ
