feat: 大屏
This commit is contained in:
@@ -276,5 +276,10 @@ $searchWidth: 176px;
|
|||||||
width: 0px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.list-item-img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -291,19 +291,15 @@ export const useSync = () => {
|
|||||||
// 获取缩略图片
|
// 获取缩略图片
|
||||||
const range = document.querySelector('.go-edit-range') as HTMLElement
|
const range = document.querySelector('.go-edit-range') as HTMLElement
|
||||||
|
|
||||||
// 只有配置了背景图片时才需要临时修改样式
|
// 如果配置了背景图片,则移除背景色,只保留背景图片
|
||||||
const hasBackgroundImage = !!chartEditStore.getEditCanvasConfig.backgroundImage
|
const hasBackgroundImage = !!chartEditStore.getEditCanvasConfig.backgroundImage
|
||||||
let originalBgColor = ''
|
let originalBgColor = ''
|
||||||
let originalBgImage = ''
|
|
||||||
|
|
||||||
if (hasBackgroundImage) {
|
if (hasBackgroundImage) {
|
||||||
// 保存原始背景色
|
// 保存原始背景色
|
||||||
originalBgColor = range.style.backgroundColor
|
originalBgColor = range.style.backgroundColor
|
||||||
originalBgImage = range.style.backgroundImage
|
// 移除背景色
|
||||||
|
|
||||||
// 临时设置为透明背景
|
|
||||||
range.style.backgroundColor = 'transparent'
|
range.style.backgroundColor = 'transparent'
|
||||||
range.style.backgroundImage = 'none'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 生成图片(透明底)
|
// 生成图片(透明底)
|
||||||
@@ -318,7 +314,6 @@ export const useSync = () => {
|
|||||||
if (hasBackgroundImage) {
|
if (hasBackgroundImage) {
|
||||||
// 恢复原始背景色
|
// 恢复原始背景色
|
||||||
range.style.backgroundColor = originalBgColor
|
range.style.backgroundColor = originalBgColor
|
||||||
range.style.backgroundImage = originalBgImage
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 上传预览图(使用 FtsUpload)
|
// 上传预览图(使用 FtsUpload)
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
class="list-item-img"
|
class="list-item-img"
|
||||||
v-if="cardData.image"
|
v-if="cardData.image"
|
||||||
object-fit="cover"
|
object-fit="cover"
|
||||||
height="180"
|
height="100%"
|
||||||
preview-disabled
|
preview-disabled
|
||||||
:src="`${cardData.image}?time=${new Date().getTime()}`"
|
:src="`${cardData.image}?time=${new Date().getTime()}`"
|
||||||
:alt="cardData.title"
|
:alt="cardData.title"
|
||||||
@@ -244,6 +244,11 @@ $contentHeight: 180px;
|
|||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -182,6 +182,10 @@ $contentWidth: calc(82vw);
|
|||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
> img {
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user