能力广场

front/src/views/capacitySquare/components/application.vue

@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-08-09 09:31:25
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-08-09 16:35:48
+ * @LastEditTime: 2022-08-09 16:48:36
  * @Description: 应用资源
 -->
 <template>
@@ -22,8 +22,17 @@
     </div>
     <div class="item-box">
       <div class="item" v-for="item in data.list" :key="item.id">
-        <a-image :width="527" :height="270" :preview="false" :src="item.pic" />
-        <div class="name">{{ item.name }}</div>
+        <a-image
+          :width="527"
+          :height="270"
+          :preview="false"
+          :src="item.pic"
+          :fallback="item.pic2"
+        />
+        <div class="bottom">
+          <div class="name">{{ item.name }}</div>
+          <div class="dept">{{ item.deptName || '--' }}</div>
+        </div>
       </div>
     </div>
   </div>
@@ -70,6 +79,7 @@
         if (!val.pic) {
           val.pic = require('@/assets/capacitySquare/yyzy.jpg')
         }
+        val.pic2 = require('@/assets/capacitySquare/yyzy.jpg')
       })
       data.list.push(...res.data.data)
       selectFlag.value = false
@@ -196,24 +206,33 @@
           height: 100%;
           object-fit: contain;
         }
-        .name {
+        .bottom {
           width: 100%;
           height: 0.6rem;
-          line-height: 0.6rem;
           padding-left: 0.3rem;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          -o-text-overflow: ellipsis;
-          word-break: break-all;
           background: url('~@/assets/capacitySquare/bt-bg.png') no-repeat;
           background-size: 100%;
           color: #fff;
-          font-size: 0.22rem;
           font-family: webfont;
           position: absolute;
           bottom: 0;
           left: 0;
+          .name {
+            height: 0.44rem;
+            line-height: 0.44rem;
+            font-size: 0.22rem;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            -o-text-overflow: ellipsis;
+            word-break: break-all;
+          }
+          .dept {
+            height: 0.12rem;
+            line-height: 0.04rem;
+            font-size: 0.12rem;
+            color: #bbb;
+          }
         }
       }
     }