Skip to content

X
xiaomai-cloud-class-web
Commit 8a855681 by wufan
Options

style:线下课样式优化

parent 631a4a09
Showing with 22 additions and 22 deletions
src/modules/course-manage/offline-course/AddOfflineCourse.less
...@@ -62,7 +62,6 @@ ...@@ -62,7 +62,6 @@
.course-catalog { .course-catalog {
margin-bottom:16px; margin-bottom:16px;
margin-top:16px; margin-top:16px;
display: flex;
.switch-box { .switch-box {
.switch-item { .switch-item {
display: flex; display: flex;
......
src/modules/course-manage/offline-course/OfflineCourseData.less
...@@ -106,7 +106,7 @@ ...@@ -106,7 +106,7 @@
.iconfont { .iconfont {
font-size: 15px; font-size: 15px;
color: #999999; color: #999999;
margin-right: 6px; margin-right: 4px;
} }
.data-text { .data-text {
color: #333; color: #333;
......
src/modules/course-manage/offline-course/components/OfflineCourseFilter.jsx
...@@ -134,25 +134,9 @@ class OfflineCourseFilter extends React.Component { ...@@ -134,25 +134,9 @@ class OfflineCourseFilter extends React.Component {
onChange={(e) => { this.handleChangeQuery('courseName', e.target.value)}} onChange={(e) => { this.handleChangeQuery('courseName', e.target.value)}}
onSearch={ () => { this.props.onChange(this.state.query) } } onSearch={ () => { this.props.onChange(this.state.query) } }
style={{ width: "calc(100% - 84px)" }} style={{ width: "calc(100% - 84px)" }}
enterButton={<span className="icon iconfont">&#xe832;</span>} enterButton={<span className="icon iconfont" style={{fontSize: '16px'}}>&#xe832;</span>}
/> />
</div> </div>
{/* <div className="search-condition__item">
<span className="select-status">课程状态：</span>
<Select
style={{ width: "calc(100% - 70px)" }}
placeholder="请选择"
allowClear={true}
value={courseState}
onChange={(value) => { this.handleChangeQuery('courseState', value) }}
suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}
>
<Option value="UN_START">未开始</Option>
<Option value="STARTING">进行中</Option>
<Option value="FINISH">已结束</Option>
<Option value="EXPIRED">已取消</Option>
</Select>
</div> */}
<div className="search-condition__item"> <div className="search-condition__item">
<span className="shelf-status">学院展示：</span> <span className="shelf-status">学院展示：</span>
<Select <Select
......
src/modules/course-manage/offline-course/modal/PreviewOfflineModal.jsx
...@@ -112,6 +112,7 @@ class PreviewOfflineModal extends React.Component { ...@@ -112,6 +112,7 @@ class PreviewOfflineModal extends React.Component {
<div className="container__wrap"> <div className="container__wrap">
<div className="container"> <div className="container">
<div className="container__header"> <div className="container__header">
<div className="cover"></div>
<img src={coverUrl || defaultCoverUrl} className="course-cover" /> <img src={coverUrl || defaultCoverUrl} className="course-cover" />
<span className="cover-teacher">主讲人：{teacherName}</span> <span className="cover-teacher">主讲人：{teacherName}</span>
<span className="cover-state" style={{ background: (ENUM.offlineStateShow[courseState] || {}).color }}>{(ENUM.offlineStateShow[courseState] || {}).title}</span> <span className="cover-state" style={{ background: (ENUM.offlineStateShow[courseState] || {}).color }}>{(ENUM.offlineStateShow[courseState] || {}).title}</span>
......
src/modules/course-manage/offline-course/modal/PreviewOfflineModal.less
...@@ -17,6 +17,15 @@ ...@@ -17,6 +17,15 @@
height: 100%;; height: 100%;;
&__header { &__header {
position: relative; position: relative;
.cover {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.05);
z-index: 10;
}
.course-cover, .course-url { .course-cover, .course-url {
width: 100%; width: 100%;
height: 141px; height: 141px;
...@@ -26,7 +35,7 @@ ...@@ -26,7 +35,7 @@
position: absolute; position: absolute;
bottom: 8px; bottom: 8px;
left: 16px; left: 16px;
font-size: 12px; font-size: 10px;
color: #fff; color: #fff;
} }
.cover-state { .cover-state {
...@@ -49,9 +58,10 @@ ...@@ -49,9 +58,10 @@
.title__name { .title__name {
color: #333333; color: #333333;
font-weight: 500; font-weight: 500;
font-size: 12px;
} }
.title__categery { .title__categery {
font-size: 12px; font-size: 10px;
color: #999999; color: #999999;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -59,6 +69,7 @@ ...@@ -59,6 +69,7 @@
width: 12px; width: 12px;
height: 12px; height: 12px;
margin-right: 4px; margin-right: 4px;
font-size: 10px;
} }
} }
} }
...@@ -110,7 +121,7 @@ ...@@ -110,7 +121,7 @@
&__list { &__list {
margin-top: 8px; margin-top: 8px;
.course-time { .course-time {
margin: 0 16px 8px; margin: 0 16px 8px 0;
.time-title { .time-title {
position: relative; position: relative;
padding-left: 6px; padding-left: 6px;
......
src/modules/course-manage/offline-course/modal/QRCodeModal.less
.offline-qrcode-modal { .offline-qrcode-modal {
.ant-modal-body {
max-height: 483px!important;
}
.image-box { .image-box {
margin: 16px auto 0; margin: 16px auto 0;
width: 380px; width: 380px;
...@@ -8,6 +11,8 @@ ...@@ -8,6 +11,8 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
box-shadow: 0px 0px 30px 0px rgba(128, 128, 128, 0.1);
border-radius: 6px;
} }
.title { .title {
position: absolute; position: absolute;
......
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