commit
e23f71b36e
@ -0,0 +1,47 @@
|
|||||||
|
import React, { useState, useEffect, memo } from 'react'
|
||||||
|
import ImageLayer from '../../modules/page/layers/ImageLayer'
|
||||||
|
import { isImageExtension } from 'educoder'
|
||||||
|
function ImageLayerHook(props) {
|
||||||
|
const [showImage, setShowImage] = useState(false)
|
||||||
|
const [imageSrc, setImageSrc] = useState('')
|
||||||
|
|
||||||
|
const { parentSel, childSel, watchPropsArray } = props
|
||||||
|
|
||||||
|
const onImageLayerClose = () => {
|
||||||
|
setShowImage(false)
|
||||||
|
setImageSrc('')
|
||||||
|
}
|
||||||
|
const onDelegateClick = (event) => {
|
||||||
|
const imageSrc = event.target.src || event.target.getAttribute('src') || event.target.getAttribute('href')
|
||||||
|
// 判断imageSrc是否是图片
|
||||||
|
const fileName = event.target.innerHTML.trim()
|
||||||
|
if (isImageExtension(imageSrc.trim()) || isImageExtension(fileName) || event.target.tagName == 'IMG' || imageSrc.indexOf('base64,') != -1) {
|
||||||
|
// 非回复里的头像图片; 非emoticons
|
||||||
|
if (imageSrc.indexOf('/images/avatars/User') === -1 &&
|
||||||
|
imageSrc.indexOf('kindeditor/plugins/emoticons') === -1 ) {
|
||||||
|
setShowImage(true)
|
||||||
|
setImageSrc(imageSrc)
|
||||||
|
}
|
||||||
|
event.stopPropagation()
|
||||||
|
event.preventDefault && event.preventDefault()
|
||||||
|
event.originalEvent.preventDefault()
|
||||||
|
// event.originalEvent.stopPropagation()
|
||||||
|
// event.originalEvent.cancelBubble = true
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
useEffect(() => {
|
||||||
|
$(parentSel)
|
||||||
|
.delegate(childSel, "click", onDelegateClick);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
$(parentSel).undelegate(childSel, "click", onDelegateClick )
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ImageLayer showImage={showImage} imageSrc={imageSrc} onImageLayerClose={onImageLayerClose}></ImageLayer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo(ImageLayerHook)
|
||||||
@ -0,0 +1,117 @@
|
|||||||
|
.searchinput{
|
||||||
|
width: 800px;
|
||||||
|
margin-top: 53px;
|
||||||
|
}
|
||||||
|
.headersear{
|
||||||
|
height: 160px;
|
||||||
|
background: #EAF2F9;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.packinput .ant-input{
|
||||||
|
height: 55px;
|
||||||
|
width:663px !important;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #681616 !important;
|
||||||
|
border-color: #E1EDF8 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.packinput .ant-input-group-addon .ant-btn{
|
||||||
|
width:137px !important;
|
||||||
|
font-size: 18px;
|
||||||
|
height: 53px;
|
||||||
|
background:rgba(76,172,255,1);
|
||||||
|
|
||||||
|
}
|
||||||
|
.tabtitle{
|
||||||
|
height: 62px !important;
|
||||||
|
box-shadow: 3px 10px 21px 0px rgba(76, 76, 76, 0.15);
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.tabtitles2{
|
||||||
|
background: #fff;
|
||||||
|
height: 62px !important;
|
||||||
|
width: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabtitless{
|
||||||
|
height: 62px !important;
|
||||||
|
line-height: 62px !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
.tabtitle1{
|
||||||
|
|
||||||
|
}
|
||||||
|
.tabtitle2{
|
||||||
|
margin-left: 30px !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.counttit{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.counttittext{
|
||||||
|
text-align: left;
|
||||||
|
width: 1200px;
|
||||||
|
height: 18px;
|
||||||
|
color: #888888;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-top: 24px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.counttittexts{
|
||||||
|
color: #4CACFF !important;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainx{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 17px;
|
||||||
|
}
|
||||||
|
.project-packages-list{
|
||||||
|
|
||||||
|
}
|
||||||
|
.project-package-item{
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
|
flex-direction:column;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
background: white;
|
||||||
|
/* box-shadow: 1px 3px 3px 1px rgba(156,156,156,0.16); */
|
||||||
|
|
||||||
|
}
|
||||||
|
.xuxianpro{
|
||||||
|
height: 20px;
|
||||||
|
border-bottom: 1px dashed;
|
||||||
|
border-color: #EAEAEA;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
.magr11{
|
||||||
|
margin-top: 11px;
|
||||||
|
}
|
||||||
|
.highlight{
|
||||||
|
color: #4CACFF;
|
||||||
|
}
|
||||||
|
.fonttext{
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fontextcolor{
|
||||||
|
color: #777777;
|
||||||
|
}
|
||||||
|
.tzbq{
|
||||||
|
margin-left: 68px;
|
||||||
|
}
|
||||||
|
.tzbqx{
|
||||||
|
margin-left: 24px;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue