|
@@ -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>
|