refactor(cover) update card cover style and placeholder image

ly525
1 parent 94594a01
Showing 6 changed files with 61 additions and 21 deletions
front-end/h5/src/assets/lbp-picture-placeholder.png
front-end/h5/src/components/common/work/card-cover.js
front-end/h5/src/components/core/styles/index.scss
front-end/h5/src/components/plugins/lbp-picture-placeholder.png
front-end/h5/src/views/work-manager/list.vue
front-end/h5/src/views/work-manager/templates.vue
+import placeholderImg from '@/assets/lbp-picture-placeholder.png'
+
+function getDefaultStyle (img, isPlaceholder) {
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    zIndex: 0,
+    height: '100%',
+    width: '100%',
+    backgroundSize: isPlaceholder ? 'contain' : 'cover',
+    backgroundRepeat: 'no-repeat',
+    backgroundImage: `url(${img})`
+  }
+}
+
 export default {
   props: {
     qrcodeUrl: String,
     coverImageUrl: String
   },
-  render (h) {
-    const img = this.qrcodeUrl || this.coverImageUrl
-    if (img) {
+  methods: {
+    getCover (img, isPlaceholder = false) {
+      const width = 70
       const style = {
-        'background-image': `url(${img})`,
-        'background-size': this.qrcodeUrl ? 'contain' : 'cover'
+        ...getDefaultStyle(img, isPlaceholder),
+        zIndex: 1,
+        width: `${width}%`,
+        margin: `0 ${50 - width / 2}%`
       }
-      return <div style={style} class="work-cover-img"></div>
+      return [
+        <div style={style}></div>
+      ]
+    },
+    getCoverBg (img) {
+      const style = {
+        ...getDefaultStyle(img),
+        filter: 'blur(10px)'
+      }
+      return [
+        <div style={style}></div>
+      ]
+    }
+  },
+  render (h) {
+    let covers = [this.getCover(placeholderImg, true/** isPlaceholder */)]
+    const coverImg = this.coverImageUrl
+
+    if (this.qrcodeUrl) {
+      covers = this.getCover(this.qrcodeUrl)
+    } else if (coverImg) {
+      covers = [this.getCover(coverImg), this.getCoverBg(coverImg)]
     }
-    return <span>Luban H5</span>
+    return <div class="card-cover-wrapper" >
+      {covers}
+    </div>
   }
 }
@@ -118,15 +118,14 @@
     .active-page {
       color: #2981fa;
     }
-
   }
-  .work-cover-img {
-    background-size: contain;
-    width: 100%;
-    height: 100%;
-    background-repeat: no-repeat;
-    background-position: center center;
+  .card-cover-wrapper {
+    position: relative;
+    height: 300px;
+    border: 1px dashed #eee;
+    color: #aaa;
+    padding: 4px;
   }
 }
@@ -171,4 +170,8 @@
   display: flex !important;
   align-items: center;
   justify-content: center;
+}
+
+.cursor-pointer {
+  cursor: pointer !important;
 }
 \ No newline at end of file
@@ -41,9 +41,7 @@ const ListItemCard = {
   render (h) {
     return (
       <a-card hoverable >
-        <div slot="cover" class="flex-center" style="height: 200px;font-size: 24px;border: 1px dashed #eee;color: #aaa;background: #f7f5f557;" >
-          <CardCover qrcodeUrl={this.qrcodeUrl} coverImageUrl={this.work.cover_image_url} />
-        </div>
+        <CardCover slot="cover" qrcodeUrl={this.qrcodeUrl} coverImageUrl={this.work.cover_image_url} />
         <template class="ant-card-actions" slot="actions">
           {/** 编辑 */}
           <a-tooltip effect="dark" placement="bottom" title={this.$t('workCard.edit')}>
@@ -86,7 +84,7 @@ const AddNewCard = {
   render (h, { props, parent }) {
     return (
       <a-card hoverable>
-        <div slot="cover" class="flex-center" style="height: 305px;background: #f7f5f557;" onClick={props.handleCreate}>
+        <div slot="cover" class="flex-center" style="height: 415px;background: #f7f5f557;" onClick={props.handleCreate}>
           <a-icon type="plus" />
         </div>
         <template class="ant-card-actions" slot="actions">
@@ -45,9 +45,7 @@ const ListItemCard = {
   render (h) {
     return (
       <a-card hoverable >
-        <div slot="cover" class="flex-center" style="height: 200px;font-size: 24px;border: 1px dashed #eee;color: #aaa;background: #f7f5f557;" >
-          <CardCover qrcodeUrl={this.qrcodeUrl} coverImageUrl={this.work.cover_image_url} />
-        </div>
+        <CardCover slot="cover" qrcodeUrl={this.qrcodeUrl} coverImageUrl={this.work.cover_image_url} />
         <template class="ant-card-actions" slot="actions">
           <a-tooltip effect="dark" placement="bottom" title={this.$t('workCard.useNow')}>
             <a-icon type="plus-square" title={this.$t('workCard.useNow')} onClick={() => {