:lipstick: 课程、配套、师训详情图片显示样式调整

src/routes/Product/Course/CourseCreate.js

@@ -425,24 +425,6 @@ export default class CourseItemCreatePage extends Component {
         </Button>
       );
     };
-    const renderCoverCardName = () => {
-      return (
-        <div className={styles.cardName}>
-          <span>
-            <a onClick={() => this.handleSelectorModalShow('cover')}>更换封面</a>
-          </span>
-        </div>
-      );
-    };
-    const renderbgCardName = () => {
-      return (
-        <div className={styles.cardName}>
-          <span>
-            <a onClick={() => this.handleSelectorModalShow('bg')}>更换背景</a>
-          </span>
-        </div>
-      );
-    };
     return (
       <div>
         {/* 基础信息Card */}
@@ -538,51 +520,38 @@ export default class CourseItemCreatePage extends Component {
             </Form.Item>
           </Form>
         </Card>
-        {/* 封面及背景图选择Card */}
-        <Card title="封面|背景" style={{ marginBottom: 16 }}>
-          <Row gutter={16}>
-            <Col
-              md={{ span: 9, offset: 1 }}
-              lg={{ span: 7, offset: 2 }}
-              xl={{ span: 5, offset: 4 }}
-              xxl={{ span: 3, offset: 6 }}
+        <Row gutter={16} style={{ marginBottom: 16 }}>
+          <Col span={12}>
+            <Card
+              className={styles.picCard}
+              title={
+                <Button
+                  type="primary"
+                  onClick={() => this.handleSelectorModalShow('cover')}
+                >课程封面
+                </Button>
+              }
             >
-              <Card
-                hoverable
-                title={renderCoverCardName()}
-              >
-                {
-                  coverUrl && (
-                    <div className={styles.cover}>
-                      <img src={genAbsolutePicUrl(coverUrl)} alt="" />
-                    </div>
-                  )
-                }
-                {!coverSelectorDestroy && getResourceModal(true)}
-              </Card>
-            </Col>
-            <Col
-              md={{ span: 9, offset: 2 }}
-              lg={{ span: 7, offset: 4 }}
-              xl={{ span: 5, offset: 4 }}
-              xxl={{ span: 3, offset: 5 }}
+              {coverUrl && <img src={genAbsolutePicUrl(coverUrl)} alt="" />}
+              {!coverSelectorDestroy && getResourceModal(true)}
+            </Card>
+          </Col>
+          <Col span={12}>
+            <Card
+              className={styles.picCard}
+              title={
+                <Button
+                  type="primary"
+                  onClick={() => this.handleSelectorModalShow('bg')}
+                >课程背景
+                </Button>
+              }
             >
-              <Card
-                hoverable
-                title={renderbgCardName()}
-              >
-                {
-                  bgUrl ? (
-                    <div className={styles.background}>
-                      <img src={genAbsolutePicUrl(bgUrl)} alt="" />
-                    </div>
-                  ) : null
-                }
-                {!bgSelectorDestroy && getResourceModal(false)}
-              </Card>
-            </Col>
-          </Row>
-        </Card>
+              {bgUrl && <img src={genAbsolutePicUrl(bgUrl)} alt="" />}
+              {!bgSelectorDestroy && getResourceModal(false)}
+            </Card>
+          </Col>
+        </Row>
         {/* 课列表选择Card */}
         <Card title={renderLessonCardName()} style={{ marginBottom: 16 }}>
           <AXDragSortTable

src/routes/Product/Course/CourseCreate.less

@@ -1,34 +1,21 @@
 @import "../../../../node_modules/antd/lib/style/themes/default.less";
 
-.cardName {
-  & > span {
-    display: inline-block;
-    height: 24px;
-    padding: 0 7px;
-    vertical-align: bottom;
-  }
-  :global {
-    .ant-btn-primary {
-      margin-left: 10px;
+.picCard {
+  :global(.ant-card-body) {
+    position: relative;
+    text-align: center;
+    height: 480px;
+    overflow: hidden;
+    img {
+      display: block;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+      max-width: 500px;
     }
   }
 }
 
-.cover {
-  width: 100%;
-  height: 240px;
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.background {
-  width: 100%;
-  height: 240px;
-  line-height: 240px;
-  vertical-align: middle;
-  img {
-    width: 100%;
-  }
-}

src/routes/Product/Support/SupportCreate.js

@@ -291,7 +291,7 @@ export default class SupportCreatePage extends Component {
             pageSize={resource.pageSize}
             totalSize={resource.totalSize}
             multiple={!isCover}
-            selectorName={isCover ? 'PictureSingle' : 'Index'}
+            selectorName={isCover ? 'PictureSingle' : 'Picture'}
             onCancel={() => this.handleSelectorCancel(isCover ? 'cover' : 'carousel')}
             onChange={data => this.handleSelectorChange(isCover ? 'cover' : 'carousel', data)}
             onFinish={rows => this.handleSelectorFinish(isCover ? 'cover' : 'carousel', rows)}
@@ -334,24 +334,6 @@ export default class SupportCreatePage extends Component {
         </Button>
       );
     };
-    const renderCoverCardName = () => {
-      return (
-        <div className={styles.cardName}>
-          <span>
-            <a onClick={() => this.handleSelectorModalShow('cover')}>配套封面</a>
-          </span>
-        </div>
-      );
-    };
-    const renderCarouselCardName = () => {
-      return (
-        <div className={styles.cardName}>
-          <span>
-            <a onClick={() => this.handleSelectorModalShow('carousel')}>详情图册</a>
-          </span>
-        </div>
-      );
-    };
     return (
       <div>
         {/* 基础信息Card */}
@@ -439,51 +421,46 @@ export default class SupportCreatePage extends Component {
             </Form.Item>
           </Form>
         </Card>
-        {/* 封面及走马灯选择Card */}
-        <Card title="封面|图册" style={{ marginBottom: 16 }}>
-          <Row gutter={16}>
-            <Col
-              md={{ span: 10, offset: 1 }}
-              lg={{ span: 8, offset: 2 }}
-              xl={{ span: 6, offset: 4 }}
-              xxl={{ span: 4, offset: 5 }}
+        <Row gutter={16} style={{ marginBottom: 16 }}>
+          <Col span={12}>
+            <Card
+              title={
+                <Button
+                  type="primary"
+                  onClick={() => this.handleSelectorModalShow('cover')}
+                >配套封面
+                </Button>
+              }
+              className={styles.picCard}
             >
-              <Card
-                hoverable
-                title={renderCoverCardName()}
-              >
-                <div className={styles.cover}>
-                  <img src={coverUrl && genAbsolutePicUrl(coverUrl)} alt="" />
-                </div>
-                {!coverSelectorDestroy && getResourceModal(true)}
-              </Card>
-            </Col>
-            <Col
-              md={{ span: 10, offset: 2 }}
-              lg={{ span: 8, offset: 4 }}
-              xl={{ span: 6, offset: 4 }}
-              xxl={{ span: 4, offset: 5 }}
+              {coverUrl && <img src={coverUrl && genAbsolutePicUrl(coverUrl)} alt="" />}
+              {!coverSelectorDestroy && getResourceModal(true)}
+            </Card>
+          </Col>
+          <Col span={12}>
+            <Card
+              title={
+                <Button
+                  type="primary"
+                  onClick={() => this.handleSelectorModalShow('carousel')}
+                >详情图册
+                </Button>
+              }
+              className={styles.carouselCard}
             >
-              <Card
-                hoverable
-                title={renderCarouselCardName()}
-              >
-                <div className={styles.carousel}>
-                  <Carousel autoplay>
-                    {
-                      imgList.map(
-                        path => (
-                          <img key={path} src={genAbsolutePicUrl(path)} alt="" />
-                        )
-                      )
-                    }
-                  </Carousel>
-                </div>
-                {!carouselSelectorDestroy && getResourceModal(false)}
-              </Card>
-            </Col>
-          </Row>
-        </Card>
+              <Carousel autoplay>
+                {
+                  imgList.map(
+                    path => (
+                      <img key={path} src={genAbsolutePicUrl(path)} alt="" />
+                    )
+                  )
+                }
+              </Carousel>
+              {!carouselSelectorDestroy && getResourceModal(false)}
+            </Card>
+          </Col>
+        </Row>
         {/* 相关周边配套选择Card */}
         <Card title={renderSupportCardName()} style={{ marginBottom: 70 }}>
           <AXDragSortTable

src/routes/Product/Support/SupportCreate.less

@@ -1,33 +1,37 @@
 @import "../../../../node_modules/antd/lib/style/themes/default.less";
 
-.cardName {
-  & > span {
-    display: inline-block;
-    height: 24px;
-    padding: 0 7px;
-    vertical-align: bottom;
-  }
-  :global {
-    .ant-btn-primary {
-      margin-left: 10px;
+.picCard {
+  :global(.ant-card-body) {
+    position: relative;
+    text-align: center;
+    height: 450px;
+    overflow: hidden;
+    img {
+      display: block;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+      max-width: 300px;
     }
   }
 }
 
-.cover {
-  width: 100%;
-  height: 240px;
-  img {
-    width: 100%;
-    height: 100%;
+.carouselCard {
+  :global(.ant-card-body) {
+    text-align: center;
+    height: 450px;
   }
-}
-
-.carousel {
-  width: 100%;
-  height: 240px;
-  img {
-    width: 100%;
-    height: 100%;
+  :global(.ant-carousel) {
+    width: 350px;
+    margin: auto !important;
+  }
+  :global(.ant-carousel .slick-slide) {
+    text-align: center;
+    height: 420px;
+    line-height: 420px;
+    overflow: hidden;
   }
 }

src/routes/Product/Training/TrainingCreate.js

@@ -234,24 +234,6 @@ export default class TrainingCreatePage extends Component {
         </Modal>
       );
     };
-    const renderCoverCardName = () => {
-      return (
-        <div className={styles.cardName}>
-          <span>
-            <a onClick={() => this.handleSelectorModalShow('cover')}>师训封面</a>
-          </span>
-        </div>
-      );
-    };
-    const renderCarouselCardName = () => {
-      return (
-        <div className={styles.cardName}>
-          <span>
-            <a onClick={() => this.handleSelectorModalShow('carousel')}>详情大图</a>
-          </span>
-        </div>
-      );
-    };
     return (
       <div>
         {/* 基础信息Card */}
@@ -342,24 +324,38 @@ export default class TrainingCreatePage extends Component {
             </Form.Item>
           </Form>
         </Card>
-        {/* 封面及走马灯选择Card */}
         <Row gutter={16} style={{ marginBottom: 70 }}>
           <Col span={12}>
             <Card
-              title="师训封面"
-              cover={<img style={{ height: 300 }} src={genAbsolutePicUrl(coverUrl)} alt="" />}
-              className={styles.trainingCover}
+              title={
+                <Button
+                  type="primary"
+                  onClick={() => this.handleSelectorModalShow('cover')}
+                >师训封面
+                </Button>
+              }
+              className={styles.picCard}
             >
+              {coverUrl && <img src={coverUrl && genAbsolutePicUrl(coverUrl)} alt="" />}
               {!coverSelectorDestroy && getResourceModal(true)}
             </Card>
           </Col>
           <Col span={12}>
-            <Card title="详情图册">
+            <Card
+              title={
+                <Button
+                  type="primary"
+                  onClick={() => this.handleSelectorModalShow('carousel')}
+                >详情图册
+                </Button>
+              }
+              className={styles.carouselCard}
+            >
               <Carousel autoplay>
                 {
                   imgList.map(
                     path => (
-                      <img style={{ height: 300 }} key={path} src={genAbsolutePicUrl(path)} alt="" />
+                      <img key={path} src={genAbsolutePicUrl(path)} alt="" />
                     )
                   )
                 }

src/routes/Product/Training/TrainingCreate.less

@@ -1,35 +1,36 @@
 @import "../../../../node_modules/antd/lib/style/themes/default.less";
 
-.cardName {
-  & > span {
-    display: inline-block;
-    height: 24px;
-    padding: 0 7px;
-    vertical-align: bottom;
-  }
-  :global {
-    .ant-btn-primary {
-      margin-left: 10px;
+.picCard {
+  :global(.ant-card-body) {
+    position: relative;
+    text-align: center;
+    height: 450px;
+    overflow: hidden;
+    img {
+      display: block;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+      max-width: 655px;
     }
   }
 }
 
-.cover {
-  width: 100%;
-  height: 200px;
-  img {
-    width: 100%;
-    height: 100%;
+.carouselCard {
+  :global(.ant-card-body) {
+    text-align: center;
+    height: 450px;
   }
-}
-
-.trainingCover {
-  :global {
-    .ant-card-cover {
-      padding: 16px;
-    }
-    .ant-card-body {
-      padding: 0 !important;
-    }
+  :global(.ant-carousel) {
+    margin: auto !important;
+  }
+  :global(.ant-carousel .slick-slide) {
+    text-align: center;
+    height: 420px;
+    line-height: 420px;
+    overflow: hidden;
   }
 }