|
|
@@ -3,7 +3,7 @@
|
|
|
id="selectable-area-preview"
|
|
|
ref="courserware"
|
|
|
class="courserware"
|
|
|
- :style="computedCourserwareStyle()"
|
|
|
+ :style="computedCourserwareStyle('courseware')"
|
|
|
@mouseup="handleTextSelection"
|
|
|
@mousedown="startSelection"
|
|
|
@mousemove="updateSelection"
|
|
|
@@ -618,15 +618,24 @@ export default {
|
|
|
|
|
|
/**
|
|
|
* 计算课件背景样式
|
|
|
- * @returns {Object} 课件背景样式对象
|
|
|
+ * @param {'courseware' | 'commonPreview'} type 从哪个组件调用 'courseware' 或 'commonPreview'
|
|
|
+ * @returns {object} 课件背景样式对象
|
|
|
*/
|
|
|
- computedCourserwareStyle() {
|
|
|
+ computedCourserwareStyle(type) {
|
|
|
const {
|
|
|
background_image_url: bcImgUrl = '',
|
|
|
background_position: pos = {},
|
|
|
background: back,
|
|
|
} = this.background || {};
|
|
|
|
|
|
+ // 如果是 commonPreview 但背景不是全域的，或者是 courseware 但背景是全域的，都不应用背景样式
|
|
|
+ if (type === 'commonPreview' && !back?.is_global) {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+ if (type === 'courseware' && back?.is_global) {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+
|
|
|
let canvasStyle = {
|
|
|
backgroundSize: bcImgUrl ? `${pos.width}% ${pos.height}%` : '',
|
|
|
backgroundPosition: bcImgUrl ? `${pos.left}% ${pos.top}%` : '',
|
|
|
@@ -635,10 +644,12 @@ export default {
|
|
|
};
|
|
|
|
|
|
if (back) {
|
|
|
- if (back.mode === 'image') {
|
|
|
- canvasStyle['backgroundBlendMode'] = 'lighten';
|
|
|
- } else {
|
|
|
+ if (!back.has_image) {
|
|
|
canvasStyle['backgroundBlendMode'] = '';
|
|
|
+ canvasStyle['backgroundImage'] = '';
|
|
|
+ canvasStyle['backgroundRepeat'] = '';
|
|
|
+ canvasStyle['backgroundPosition'] = '';
|
|
|
+ canvasStyle['backgroundSize'] = '';
|
|
|
}
|
|
|
|
|
|
if (back.imageMode === 'fill') {
|
|
|
@@ -661,12 +672,8 @@ export default {
|
|
|
canvasStyle['backgroundPosition'] = `${pos.imgX}% ${pos.imgY}%`;
|
|
|
}
|
|
|
|
|
|
- if (back.mode === 'color') {
|
|
|
+ if (back.has_color) {
|
|
|
canvasStyle['backgroundColor'] = back.color;
|
|
|
- canvasStyle['backgroundImage'] = '';
|
|
|
- canvasStyle['backgroundRepeat'] = '';
|
|
|
- canvasStyle['backgroundPosition'] = '';
|
|
|
- canvasStyle['backgroundSize'] = '';
|
|
|
}
|
|
|
|
|
|
if (back.enable_border) {
|
|
|
@@ -699,8 +706,8 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
handleResult(top, left, select_node) {
|
|
|
- this.menuPosition.x = this.menuPosition.x + left;
|
|
|
- this.menuPosition.y = this.menuPosition.y + top;
|
|
|
+ this.menuPosition.x += left;
|
|
|
+ this.menuPosition.y += top;
|
|
|
this.menuPosition.select_node = select_node;
|
|
|
// 设置菜单位置
|
|
|
this.showMenu = true; // 显示菜单
|
|
|
@@ -1191,7 +1198,6 @@ export default {
|
|
|
padding-top: $courseware-top-padding;
|
|
|
padding-bottom: $courseware-bottom-padding;
|
|
|
margin: 15px 0;
|
|
|
- background-color: #fff;
|
|
|
background-repeat: no-repeat;
|
|
|
border-bottom-right-radius: 12px;
|
|
|
border-bottom-left-radius: 12px;
|
dsy