From 15c6e1eef529a72b896308c684f6be0860434084 Mon Sep 17 00:00:00 2001 From: lijunjun Date: Wed, 14 Apr 2021 15:18:59 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E5=9B=BE=E7=89=87=E5=B1=95?= =?UTF-8?q?=E7=A4=BA=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/thread/image-content/index.jsx | 122 ++++++++++++++ .../thread/image-content/index.module.scss | 129 +++++++++++++++ .../imageContent/imageContent.module.scss | 156 ------------------ .../components/thread/imageContent/index.jsx | 113 ------------- common/components/thread/index.jsx | 2 +- 5 files changed, 252 insertions(+), 270 deletions(-) create mode 100644 common/components/thread/image-content/index.jsx create mode 100644 common/components/thread/image-content/index.module.scss delete mode 100644 common/components/thread/imageContent/imageContent.module.scss delete mode 100644 common/components/thread/imageContent/index.jsx diff --git a/common/components/thread/image-content/index.jsx b/common/components/thread/image-content/index.jsx new file mode 100644 index 000000000..3a369d2eb --- /dev/null +++ b/common/components/thread/image-content/index.jsx @@ -0,0 +1,122 @@ +import React from 'react'; +import img from './index.module.scss'; + +const Index = ({imgData = []}) => { + // 一张图片时 + const OneExhibition = () => { + return ( +
+ +
+ ); + } + // 两张图片时 + const TwoExhibition = () => { + return ( +
+ {imgData.map((item, index) => { + return + })} +
+ ); + } + // 三张图片时 + const ThreeExhibition = () => { + let sun = imgData; + sun.splice(0,1); + return
+
+ +
+
+ {sun.map((item, index) => { + return + })} +
+
+ } + // 四张图片时 + const FourExhibition = () => { + let numData = imgData.slice(1, 4); + return
+
+ +
+
+ {numData.map((item, index) => { + return
+ +
+ })} +
+
+ } + // 五张以及五张以上图片时 + const FiveExhibition = () => { + const Image = imgData.slice(0, 2); + let numContent = 0; + const MoreImage = () => { + if (imgData.length === 5) { + const Images = imgData.slice(2, 5); + return
+ { Images.map((item, index)=> { + return
+ +
+ })} +
+ } else if (imgData.length > 5) { + numContent = imgData.length - 5; + return
+
+ +
+
+ +
+
+ +
+ {`+${numContent}`} +
+
+
+ } + } + if (imgData.length >5) { + numContent = imgData.length - 5; + } + return
+
+ {Image.map((item, index) => { + return + })} +
+ +
+ } + const ImgContent = () => { + if (imgData.length === 1) { + return + } else if (imgData.length === 2) { + return + } else if (imgData.length === 3) { + return + } else if (imgData.length === 4) { + return + } else if (imgData.length >= 5) { + return + } else { + return ''; + } + } + return ( +
+
+ +
+
+ ); +} + +export default React.memo(Index); \ No newline at end of file diff --git a/common/components/thread/image-content/index.module.scss b/common/components/thread/image-content/index.module.scss new file mode 100644 index 000000000..762fcc7cc --- /dev/null +++ b/common/components/thread/image-content/index.module.scss @@ -0,0 +1,129 @@ +@import '@common/styles/fn/rem.scss'; +.indexImage { + .imageBox { + width: 100%; + } +} +.oneImage { + width: rem(343); + height: rem(260); + margin: 0 auto; + .oneImages { + width: 100%; + height: 100%; + } +} +.twoImage { + width: rem(343); + height: rem(260); + margin: 0 auto; + display: flex; + justify-content: space-around; + .twoImages { + display: block; + width: rem(170); + } +} +.threeImage { + display: flex; + width: rem(343); + height: rem(260); + margin: 0 auto; + flex-wrap:wrap; + .threeImageTop { + width: rem(343); + height: rem(128); + .threeImageTopImg { + display: block; + width: 100%; + height: 100%; + } + } + .threeImageLower { + width: rem(343); + height: rem(126); + display: flex; + justify-content: space-around; + .threeImageLowerImg { + width: rem(170); + height: rem(126); + } + } +} +.fourImage { + display: flex; + width: rem(343); + height: rem(260); + margin: 0 auto; + overflow: hidden; + justify-content: space-around; + .fourImagesTop { + width: rem(210); + height: rem(260); + .topImg { + display: block; + width: 100%; + height: 100%; + } + } + .fourImagesLower { + width: rem(129); + height: rem(260); + display: flex; + flex-direction: column-reverse; + justify-content: space-around; + .lowerImg { + display: block; + width: 100%; + height: rem(84); + } + } +} +.moreImage { + display: flex; + width: rem(343); + height: rem(260); + margin: 0 auto; + flex-wrap:wrap; + .moreImageTop { + width: 100%; + height: rem(126); + display: flex; + justify-content: space-around; + .moreImageTopImg { + display: block; + width: rem(169); + height: rem(126); + } + } + .moreImageLower { + width: 100%; + height: rem(111); + display: flex; + justify-content: space-around; + .moreImageLowers { + width: rem(111); + height: rem(111); + position: relative; + .moreImageLowerImg { + display: block; + width: 100%; + height: 100%; + } + .modalBox { + position: absolute; + width: 100%; + height: 100%; + background: #666; + opacity: 0.5; + top: 0; + text-align: center; + line-height: rem(111); + .imgSpan { + font-size: rem(20); + color: #fff; + } + } + } + } +} diff --git a/common/components/thread/imageContent/imageContent.module.scss b/common/components/thread/imageContent/imageContent.module.scss deleted file mode 100644 index 6d1371e71..000000000 --- a/common/components/thread/imageContent/imageContent.module.scss +++ /dev/null @@ -1,156 +0,0 @@ -.indexImage { - .imageBox { - .oneImage { - width: 3.43rem; - height: 260px; - margin: 0 auto; - .oneImages { - width: 100%; - height: 100%; - } - } - .twoImage { - width: 3.43rem; - height: 260px; - margin: 0 auto; - display: flex; - justify-content: space-around; - .twoImages { - display: block; - width: 1.7rem; - } - } - .threeImage { - display: flex; - width: 3.43rem; - height: 260px; - margin: 0 auto; - flex-wrap:wrap; - .threeImageTop { - width: 3.43rem; - height: 128px; - .threeImageTopImg { - display: block; - width: 100%; - height: 100%; - } - } - .threeImageLower { - width: 3.43rem; - height: 126px; - display: flex; - justify-content: space-around; - .threeImageLowerImg { - width: 1.7rem; - height: 126px; - } - } - } - .fourImage { - display: flex; - width: 3.43rem; - height: 260px; - margin: 0 auto; - overflow: hidden; - justify-content: space-around; - .fourImagesTop { - width: 2.1rem; - height: 260px; - .topImg { - display: block; - width: 100%; - height: 100%; - } - } - .fourImagesLower { - width: 1.29rem; - height: 260px; - display: flex; - flex-direction: column-reverse; - justify-content: space-around; - .lowerImg { - display: block; - width: 100%; - height: 84px; - } - } - } - .fiveImage { - display: flex; - width: 3.43rem; - height: 260px; - margin: 0 auto; - flex-wrap:wrap; - .fiveImageTop { - width: 100%; - height: 126px; - display: flex; - justify-content: space-around; - .fiveImageTopImg { - display: block; - width: 1.69rem; - height: 126px; - } - } - .fiveImageLower { - width: 100%; - height: 111px; - display: flex; - justify-content: space-around; - .fiveImageLowerImg { - display: block; - width: 1.11rem; - height: 111px; - } - } - } - .moreImage { - display: flex; - width: 3.43rem; - height: 260px; - margin: 0 auto; - flex-wrap:wrap; - .moreImageTop { - width: 100%; - height: 126px; - display: flex; - justify-content: space-around; - .moreImageTopImg { - display: block; - width: 1.69rem; - height: 126px; - } - } - .moreImageLower { - width: 100%; - height: 111px; - display: flex; - justify-content: space-around; - .moreImageLowers { - width: 1.11rem; - height: 111px; - position: relative; - .moreImageLowerImg { - display: block; - width: 100%; - height: 100%; - } - .modalBox { - position: absolute; - width: 100%; - height: 100%; - background: #666; - opacity: 0.5; - top: 0; - text-align: center; - line-height: 111px; - .imgSpan { - font-size: 0.2rem; - color: #fff; - } - } - } - } - } - } -} \ No newline at end of file diff --git a/common/components/thread/imageContent/index.jsx b/common/components/thread/imageContent/index.jsx deleted file mode 100644 index a6ccf8737..000000000 --- a/common/components/thread/imageContent/index.jsx +++ /dev/null @@ -1,113 +0,0 @@ -import React from 'react'; -import img from './imageContent.module.scss'; -const Index = ({imgData = []}) => { - const span = {}; - if (imgData.length === 1) { - span.static = - ( -
- -
- ) - } else if (imgData.length === 2) { - span.static = - ( -
- {imgData.map((item, index) => { - return - })} -
- ) - } else if (imgData.length === 3) { - let sun = imgData; - sun.splice(0,1); - span.static = - ( -
-
- -
-
- {sun.map(item => { - return - })} -
-
- ) - } else if (imgData.length === 4) { - let numData = imgData.slice(1, 4); - span.static = - ( -
-
- -
-
- {numData.map((item, index) => { - return
- -
- })} -
-
- ) - } else if (imgData.length === 5) { - let Num = imgData; - const Image = imgData.slice(0, 2); - const Images = imgData.slice(2, 5); - Num.splice(0,1); - span.static = - ( -
-
- {Image.map(item => { - return - })} -
-
- {Images.map(item => { - return
- -
- })} -
-
- ) - } else if (imgData.length > 5) { - const Image = imgData.slice(0, 2); - const numContent = imgData.length - 5; - span.static = - ( -
-
- {Image.map(item => { - return - })} -
-
-
- -
-
- -
-
- -
- {`+${numContent}`} -
-
-
-
- ) - } - return ( -
-
- {span.static} -
-
- ); -} - -export default React.memo(Index); \ No newline at end of file diff --git a/common/components/thread/index.jsx b/common/components/thread/index.jsx index 4dcf473db..41ca51d7e 100644 --- a/common/components/thread/index.jsx +++ b/common/components/thread/index.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { inject, observer } from 'mobx-react'; import { ThreadCommonContext } from './utils'; import Tip from './tip'; -import ImageContent from './imageContent'; +import ImageContent from './image-content'; import HOCFetchSiteData from '@common/middleware/HOCFetchSiteData'; -- Gitee From 237533d2ba977ee86bf5dc2b93be06be397a4836 Mon Sep 17 00:00:00 2001 From: lijunjun Date: Wed, 14 Apr 2021 15:59:11 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E5=9B=BE=E7=89=87=E5=B1=95?= =?UTF-8?q?=E7=A4=BA=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/thread/image-content/index.jsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/common/components/thread/image-content/index.jsx b/common/components/thread/image-content/index.jsx index 3a369d2eb..56a942acf 100644 --- a/common/components/thread/image-content/index.jsx +++ b/common/components/thread/image-content/index.jsx @@ -22,14 +22,14 @@ const Index = ({imgData = []}) => { } // 三张图片时 const ThreeExhibition = () => { - let sun = imgData; - sun.splice(0,1); + let imgList = imgData; + imgList.splice(0,1); return
- {sun.map((item, index) => { + {imgList.map((item, index) => { return })}
@@ -37,13 +37,13 @@ const Index = ({imgData = []}) => { } // 四张图片时 const FourExhibition = () => { - let numData = imgData.slice(1, 4); + let imgList = imgData.slice(1, 4); return
- {numData.map((item, index) => { + {imgList.map((item, index) => { return
@@ -53,13 +53,13 @@ const Index = ({imgData = []}) => { } // 五张以及五张以上图片时 const FiveExhibition = () => { - const Image = imgData.slice(0, 2); + const imgList = imgData.slice(0, 2); let numContent = 0; const MoreImage = () => { if (imgData.length === 5) { - const Images = imgData.slice(2, 5); + const sliceImg = imgData.slice(2, 5); return
- { Images.map((item, index)=> { + { sliceImg.map((item, index)=> { return
@@ -88,7 +88,7 @@ const Index = ({imgData = []}) => { } return
- {Image.map((item, index) => { + {imgList.map((item, index) => { return })}
-- Gitee