Commit 34f51acb authored by baixian's avatar baixian

bug修改

parent 3c3737d4
......@@ -137,11 +137,11 @@ class AddCourseModalForm extends React.Component {
const formItemModalLineLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 7 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 17 },
sm: { span: 20 },
},
};
return (
......@@ -154,7 +154,7 @@ class AddCourseModalForm extends React.Component {
width={600}
onCancel={this.close}
bodyStyle={{
padding: '40px 20px',
padding: '40px 20px 0',
}}
>
<div className={pageStyle.wrap}>
......@@ -196,7 +196,7 @@ class AddCourseModalForm extends React.Component {
</FormItem>
{
Number(getFieldValue('is_encrypt')) === 1 ?
<FormItem {...formItemModalLineLayout} label=" " colon={false}>
<FormItem {...formItemModalLineLayout} colon={false}>
{getFieldDecorator('password', {
initialValue: '',
rules: [
......@@ -207,7 +207,7 @@ class AddCourseModalForm extends React.Component {
},
],
})(
<Input placeholder="请输入4-8位数字密码" min={0} />,
<Input style={{ width: 260 }} placeholder="请输入4-8位数字密码" min={0} />,
)}
</FormItem> : ''
}
......@@ -250,11 +250,17 @@ class AddCourseModalForm extends React.Component {
</div>
<div className={pageStyle.modalbody} hidden={isActive !== 2}>
<div className={pageStyle.active2title}>选择单课</div>
{courseListTotal == 0 && <Empty description={<span className={pageStyle.emptytext}>您还没有创建单课<br />请直接点击“创建专栏”完成创建</span>} />}
{courseListTotal == 0 && <Empty
imageStyle={{
height: 64,
}}
image={`${__IMGCDN__}/course/no_data.png`}
description={<span className={pageStyle.emptytext}>您还没有创建单课<br /><br />请直接点击<strong>“创建专栏”</strong> 完成创建</span>}
/>}
{courseListTotal > 0 &&
<Row className={pageStyle.courseListBox} gutter={32}>
{courseList.map(ele => (
<Col span={12} style={{ marginBottom: '10px' }} key={ele.id}>
<Col span={12} style={{ marginBottom: '20px' }} key={ele.id}>
<Checkbox id="1" style={{ display: 'flex', alignItems: 'flex-start' }} onChange={() => this.checkedChange(ele.id)} checked={course_ids.indexOf(ele.id) != -1}>
<div className={pageStyle.colItem} >
<img className={pageStyle.courseCover} src={ele.cover ? imagify(ele.cover || '') : `${__IMGCDN__}/course/courseDefaultImg.png`} alt="" />
......
.tabList {
display: flex;
align-items: center;
justify-content: center;
.tabLine {
width: 140px;
height: 1px;
......@@ -54,26 +55,25 @@
display: flex;
align-items: flex-start;
justify-content: space-between;
.formLeft {
width: 96%;
}
}
.modalFooter {
text-align: right;
}
.courseCover {
width: 60px;
height: 60px;
border-radius: 6px;
}
.courseTitle {
line-height: 1.3;
text-overflow: ellipsis;
word-break:break-all;
white-space: normal;
word-wrap: break-word;
font-size: 16px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
line-clamp: 5;
align-items:center;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 14px;
line-height: 1.3;
}
.active2title {
font-size: 14px;
......@@ -82,6 +82,10 @@
}
.emptytext {
text-align: center;
strong {
color: #1890FF;
font-weight: normal;
}
}
.courseListBox {
max-height: 350px;
......@@ -91,8 +95,10 @@
display: flex;
align-items: flex-start;
.courseCover {
margin-left: 8px;
margin-right: 18px;
margin-right: 12px;
width: 101px;
height: 55px;
border-radius: 4px;
}
}
}
\ No newline at end of file
}
......@@ -108,7 +108,7 @@ class StaticCenter extends React.Component {
<Button type="primary" className={pageStyle.uploadbtn} onClick={this.toAddGather}> </Button>
</div>
{gatherListTotal == 0 &&
<div style={{ padding: '20px' }}>
<div className={pageStyle.noEmpty}>
<Empty />
</div>}
{gatherListTotal > 0 &&
......
......@@ -21,4 +21,11 @@
align-items: center;
justify-content: space-between;
padding: 0 20px 27px;
}
\ No newline at end of file
}
.noEmpty {
width: 100%;
min-height: 80vh;
display: flex;
justify-content: center;
align-items: center;
}
......@@ -19,7 +19,7 @@
width: 200px;
height: 164px;
}
}
&.videoBox {
.videoicon {
......@@ -108,4 +108,4 @@
font-size: 16px;
}
}
}
\ No newline at end of file
}
......@@ -206,7 +206,9 @@ class StaticCenter extends React.Component {
</Button>
</div>
{materiaListTotal == 0 &&
<div className={pageStyle.noEmpty}>
<Empty description="暂无素材" />
</div>
}
{materiaListTotal > 0 &&
<div className={pageStyle.mediaCardBox}>
......@@ -225,18 +227,20 @@ class StaticCenter extends React.Component {
}
</div>
}
<div className={pageStyle.tablefooterbox}>
<span className="tablefooterstatic">{materiaListTotal}条数据</span>
<Pagination
showSizeChanger
showQuickJumper
onShowSizeChange={this.sizeChange}
total={Number(materiaListTotal)}
onChange={this.changePagination}
current={Number(queryParams.page) || 1}
pageSize={queryParams.perPage}
/>
</div>
{materiaListTotal > 0 &&
<div className={pageStyle.tablefooterbox}>
<span className="tablefooterstatic">{materiaListTotal}条数据</span>
<Pagination
showSizeChanger
showQuickJumper
onShowSizeChange={this.sizeChange}
total={Number(materiaListTotal)}
onChange={this.changePagination}
current={Number(queryParams.page) || 1}
pageSize={queryParams.perPage}
/>
</div>
}
{this.state.imgPreviewShow &&
<ImagePreview
// currentIndex={this.state.currentIndex}
......
......@@ -51,4 +51,10 @@
align-items: center;
justify-content: space-between;
padding: 0 20px 27px;
}
\ No newline at end of file
}
.noEmpty {
min-height: 80vh;
display: flex;
justify-content: center;
align-items: center;
}
......@@ -108,11 +108,11 @@ class AddCourseModalForm extends React.Component {
const formItemModalLineLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 7 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 17 },
sm: { span: 18 },
},
};
return (
......@@ -121,16 +121,16 @@ class AddCourseModalForm extends React.Component {
maskClosable={false}
zIndex={110}
footer={null}
width={600}
width={680}
bodyStyle={{
padding: '40px 20px',
padding: '40px 20px 24px',
}}
onCancel={this.close}
>
<div className={pageStyle.wrap}>
<div className={pageStyle.tabList}>
<div className={pageStyle.tabItem}>
<div className={isActive === 1 ? pageStyle.tabNum : pageStyle.tabNormal}>1</div>
<div className={isActive === 1 ? pageStyle.tabNum : pageStyle.tabNormal}>{isActive === 1 ? '1' : '√'}</div>
<span>填写课程信息</span>
</div>
<div className={pageStyle.tabLine}></div>
......@@ -142,6 +142,9 @@ class AddCourseModalForm extends React.Component {
<Form className={pageStyle.modalform} labelAlign="left" onSubmit={this.save}>
<div className={pageStyle.modalbody} hidden={isActive !== 1}>
<div className={pageStyle.formWrap}>
<div className={pageStyle.formRight}>
<img src={`${__IMGCDN__}/course/left_preview.png`} alt="预览图" />
</div>
<div className={pageStyle.formLeft}>
<FormItem {...formItemModalLineLayout} label="标题">
{getFieldDecorator('title', {
......@@ -152,7 +155,7 @@ class AddCourseModalForm extends React.Component {
message: '请输入标题',
},
],
})(<Input maxLength={40} placeholder="请输入标题" />)}
})(<TextArea style={{ width: 255 }} rows={2} maxLength={40} placeholder="请输入标题" />)}
</FormItem>
<FormItem {...formItemModalLineLayout} label="开课时间">
{getFieldDecorator('time', {
......@@ -164,6 +167,7 @@ class AddCourseModalForm extends React.Component {
],
})(
<DatePicker
style={{ width: 255 }}
showTime={{ format: 'HH:mm' }}
format="YYYY-MM-DD HH:mm"
placeholder="选择时间"
......@@ -171,10 +175,10 @@ class AddCourseModalForm extends React.Component {
)}
</FormItem>
</div>
<div className={pageStyle.formRight}>
</div>
</div>
<Button onClick={() => this.handleClick(2)}>下一步</Button>
<div style={{ textAlign: 'right' }}>
<Button type="primary" onClick={() => this.handleClick(2)}>下一步</Button>
</div>
</div>
{getFieldDecorator('type', { initialValue: 1 })(<Input type="hidden" />)}
{getFieldDecorator('charge_type', { initialValue: 1 })(<Input type="hidden" />)}
......@@ -187,7 +191,7 @@ class AddCourseModalForm extends React.Component {
</FormItem>
{
Number(getFieldValue('is_encrypt')) === 1 ?
<FormItem style={{ marginLeft: 70 }} {...formItemModalLineLayout}>
<FormItem {...formItemModalLineLayout}>
{getFieldDecorator('password', {
initialValue: '',
rules: [
......
.tabList {
display: flex;
align-items: center;
justify-content: center;
.tabLine {
width: 140px;
height: 1px;
......@@ -55,9 +56,15 @@
align-items: flex-start;
justify-content: space-between;
.formRight {
width: 190px;
height: 339px;
background-color: #EDEDED;
width: 273px;
height: 483px;
img {
width: 273px;
height: 483px;
}
}
.formLeft {
width: calc(100% - 300px);
}
}
.modalFooter {
......
......@@ -114,5 +114,5 @@
}
}
.chartBox {
width: 800px;
//width: 800px;
}
......@@ -290,7 +290,7 @@ class ClassMgtForm extends React.Component {
dataSource={courseList}
renderItem={item => (
<List.Item className={pageStyle.listitem}>
<Card bodyStyle={{ padding: 20 }}>
<Card bodyStyle={{ padding: 14 }}>
<Card.Meta
style={{ padding: 0 }}
avatar={
......
......@@ -2,6 +2,7 @@
background-color: #fff;
position: relative;
min-height: calc(100vh - 110px);
border-radius: 6px;
.head {
height: 70px;
width: 100%;
......@@ -24,8 +25,13 @@
}
.courseList {
margin-top: 20px;
:global {
.ant-card {
border-radius: 6px;
}
}
.itemImg {
width: 90px;
width: 166px;
height: 90px;
border-radius: 6px;
}
......@@ -51,7 +57,7 @@
.deleteIcon {
position: absolute;
right: 0;
color: #d5d5d5;
color: #c2c2c2;
top: 0;
cursor: pointer;
}
......
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