update work cover style

ly525
1 parent 7aa92591
Showing 2 changed files with 16 additions and 6 deletions
front-end/h5/src/components/common/work/card-cover.js
front-end/h5/src/components/core/styles/index.scss
 export default {
   props: {
-    qrCode: String,
+    qrcodeUrl: String,
     coverImageUrl: String
   },
   render (h) {
-    if (this.qrcode) {
-      return <img src={this.qrcodeUrl} />
-    }
-    if (this.coverImageUrl) {
-      return <img src={this.coverImageUrl} style="width:100%;height: 100%;" />
+    const img = this.qrcodeUrl || this.coverImageUrl
+    if (img) {
+      const style = {
+        'background-image': `url(${img})`,
+        'background-size': this.qrcodeUrl ? 'contain' : 'cover'
+      }
+      return <div style={style} class="work-cover-img"></div>
     }
  
     return <span>Luban H5</span>
@@ -115,6 +115,14 @@
  
   }
  
+  .work-cover-img {
+    background-size: contain;
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+
 }
  
 .default-router-link {