Skip to content

B
biz.qingxiao.com
Commit 551c84a1 authored by baixian's avatar baixian
Browse files
Options

bug修改

parent 4284bda0
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 69 deletions
src/pages/coursegather/detail/CourseBox.js
View file @ 551c84a1
......@@ -233,30 +233,35 @@ class CourseBoxForm extends React.Component {
{isEditSingleCourse &&
<Form hideRequiredMark className={pageStyle.modalform} labelAlign="left" onSubmit={this.save}>
<FormItem {...formItemModalLineLayout} label="封面" className={pageStyle.imgFormItem}>
<div className={pageStyle.photoWrap} style={{ display: editSingleCourseInfo.cover ? 'block' : 'none' }}>
<div className={pageStyle.photoWrap} style={{ display: editSingleCourseInfo.cover ? 'inline-flex' : 'none' }}>
<div className={pageStyle.photoCover}>
<img src={imagify(editSingleCourseInfo.cover)} alt="封面" />
<Icon onClick={deleteCover} className={pageStyle.coverDelete} type="delete" />
</div>
</div>
<div className={pageStyle.photoWrap} style={{ display: !editSingleCourseInfo.cover ? 'flex' : 'none' }}>
<div className={pageStyle.material} onClick={chooseMaterial}>
<img src={`${__IMGCDN__}course/check.png`} alt="从素材库选择" />
<div className={pageStyle.tip}>从素材库选择</div>
</div>
<div className={pageStyle.material}>
<img src={`${__IMGCDN__}course/uploadImg.png`} alt="上传图片" />
<div className={pageStyle.tip}>上传图片</div>
<input
type="file"
id="uploadsinglecoursecover"
className={pageStyle.uploadInput}
accept="image/png, image/jpg, image/jpeg"
onChange={(e) => { this.uploadCover(e); }}
/>
<div className={pageStyle.photoWrap} style={{ display: !editSingleCourseInfo.cover ? 'inline-flex' : 'none' }}>
<div className={pageStyle.defaultImgBox}>
<img className={pageStyle.defaultImg} src={`${__IMGCDN__}course/courseDefaultImg.png`} alt="" />
<div className={pageStyle.chooseType}>
<div className={pageStyle.material} onClick={chooseMaterial}>
<img src={`${__IMGCDN__}course/upload_icon2.png`} alt="从素材库选择" />
<div className={pageStyle.tip}>从素材库选择</div>
</div>
<div className={pageStyle.material}>
<img src={`${__IMGCDN__}course/upload_icon1.png`} alt="上传图片" />
<div className={pageStyle.tip}>上传图片</div>
<input
type="file"
id="uploadsinglecoursecover"
className={pageStyle.uploadInput}
accept="image/png, image/jpg, image/jpeg"
onChange={(e) => { this.uploadCover(e); }}
/>
</div>
</div>
</div>
</div>
<span className="ant-form-text">图片建议格式位JPG/PNG，尺寸140*140，图片大小不超过10MB</span>
<span style={{ verticalAlign: 'top' }} className="ant-form-text">图片建议格式位JPG/PNG，尺寸424*230，图片大小不超过10MB</span>
</FormItem>
<FormItem {...formItemModalLineLayout} label="标题">
{getFieldDecorator('title', {
......@@ -267,7 +272,7 @@ class CourseBoxForm extends React.Component {
message: '请输入标题',
},
],
})(<Input maxLength={40} onChange={e => this.sizeChange(e)} style={{ width: 520, marginRight: 30 }} addonAfter={selectBefore} placeholder="请输入标题" />)}
})(<Input maxLength={40} onChange={e => this.sizeChange(e)} style={{ width: 424, marginRight: 30 }} addonAfter={selectBefore} placeholder="请输入标题" />)}
<span className="ant-form-text">标题长度建议在40字以内</span>
</FormItem>
<FormItem {...formItemModalLineLayout} label="开课时间">
......@@ -283,6 +288,7 @@ class CourseBoxForm extends React.Component {
showTime={{ format: 'HH:mm' }}
format="YYYY-MM-DD HH:mm"
placeholder="选择时间"
style={{ width: 424 }}
/>)}
</FormItem>
<FormItem {...formItemModalLineLayout}>
......
src/pages/coursegather/detail/CourseBox.less
View file @ 551c84a1
......@@ -6,7 +6,7 @@
display: flex;
align-items: center;
flex-wrap: wrap;
.mediaCardBoxHeaderTitle {
color: #191919;
font-size: 16px;
......@@ -131,57 +131,91 @@
}
}
.photoWrap {
display: inline-flex;
width: 320px;
.photoCover {
width: 140px;
height: 140px;
position: relative;
&>img {
width: 140px;
height: 140px;
border-radius: 6px;
}
.coverDelete {
font-size: 22px;
color: #fa4f53;
cursor: pointer;
position: absolute;
right: -40px;
top: 0;
}
}
.material {
width: 140px;
height: 140px;
background-color: #F9F9F9;
border-radius: 6px;
display: inline-flex;
width: 424px;
height: 230px;
position: relative;
margin-right: 30px;
.defaultImgBox {
width: 424px;
height: 230px;
cursor: pointer;
.chooseType {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-right: 11px;
justify-content: space-between;
z-index: -10;
background: rgba(0,0,0,0.7);
transition: opacity .3s linear;
border-radius: 6px;
}
.defaultImg {
width: 424px;
height: 230px;
border-radius: 6px;
}
}
.defaultImgBox:hover .chooseType {
opacity: 1;
z-index: 0;
}
.photoCover {
width: 424px;
height: 230px;
position: relative;
&>img {
width: 424px;
height: 230px;
border-radius: 6px;
}
.coverDelete {
font-size: 22px;
color: #d5d5d5;
cursor: pointer;
position: relative;
.uploadInput {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.tip {
font-size:14px;
font-weight:400;
color:rgba(87,87,87,1);
}
&>img {
width: 32px;
height: 32px;
margin-top: 10px;
}
position: absolute;
right: -25px;
top: 0;
}
.coverDelete:hover {
color: #fa4f53;
}
}
.material {
width: 50%;
height: 230px;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-right: 11px;
cursor: pointer;
position: relative;
.uploadInput {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.tip {
font-size:14px;
font-weight:400;
color:#fff;
}
&>img {
width: 32px;
height: 32px;
margin-top: 10px;
}
}
\ No newline at end of file
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment