| 
					
				 | 
			
			
				@@ -11,22 +11,24 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       </el-image> --> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       <el-image 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         v-if="detail.coverUrl" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        :src="detail.coverUrl + '@base@tag=imgScale&w=400'" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        :src="detail.coverUrl" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         class="img" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         fit="cover" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      <el-image 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        v-else 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        class="img" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        fit="cover" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      > 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <el-image v-else class="img" fit="cover"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         <div slot="error" class="image-slot"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				           <i class="el-icon-picture-outline"></i> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       </el-image> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    <el-tooltip class="item" effect="dark" :content="name" placement="top" :open-delay=".3"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      <div class="title">{{name}}</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <el-tooltip 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      class="item" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      effect="dark" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      :content="name" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      placement="top" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      :open-delay="0.3" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    > 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <div class="title">{{ name }}</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     </el-tooltip> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     <!-- <viewer class="viewer"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       <div class="img" v-for="item in list" :src="item" :key="item"></div> 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -37,61 +39,61 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 export default { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   props: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     name: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      type: String, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      type: String 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     detail: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       type: Object 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+}; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 </script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 <style scoped lang="less"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  .group{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+.group { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  width: 200px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  cursor: pointer; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .list { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     width: 200px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    cursor: pointer; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    .list{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      width: 200px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      // padding: 10px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      background-color: rgba(0, 0, 0, .05); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      height: 112.5px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      overflow: hidden; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      border-radius: 10px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    .title{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      height: 30px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      line-height: 30px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      text-align: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      margin-top: 10px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      color: rgba(0, 0, 0, .65); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      overflow: hidden; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      text-overflow: ellipsis; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      white-space: pre; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    .img{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      width: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      // width: 130px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      height: 112.5px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      border-radius: 3px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      // background-color: rgba(0, 0, 0, .05); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    .viewer{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      img { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        width: 48%;; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        margin-top: 4%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      img:nth-child(2n) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        margin-right: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    // padding: 10px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    background-color: rgba(0, 0, 0, 0.05); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    height: 112.5px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    overflow: hidden; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    border-radius: 10px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .title { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    height: 30px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    line-height: 30px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    text-align: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    margin-top: 10px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    color: rgba(0, 0, 0, 0.65); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    overflow: hidden; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    text-overflow: ellipsis; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    white-space: pre; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  ::v-deep .image-slot{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    height: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .img { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    width: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    // width: 130px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    height: 112.5px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    border-radius: 3px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     // background-color: rgba(0, 0, 0, .05); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    i{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      margin: auto; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      font-size: 48px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      color: #ccc; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .viewer { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    img { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      width: 48%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      margin-top: 4%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    img:nth-child(2n) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      margin-right: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+::v-deep .image-slot { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  height: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  // background-color: rgba(0, 0, 0, .05); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  i { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    margin: auto; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    font-size: 48px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    color: #ccc; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 </style> 
			 |