|
@@ -30,7 +30,7 @@
|
|
|
ref="richEditor"
|
|
|
v-html="content"
|
|
|
@click="handleImageClick"
|
|
|
- :class="{'view-mode': isEdit == 2}"
|
|
|
+ :class="{ 'view-mode': isEdit == 2 }"
|
|
|
></div>
|
|
|
</template>
|
|
|
<div v-if="loading" class="overlay">
|
|
@@ -86,10 +86,10 @@ export default {
|
|
|
watch: {
|
|
|
isEdit: {
|
|
|
handler(val) {
|
|
|
- console.log("isEdit:",val);
|
|
|
+ console.log("isEdit:", val);
|
|
|
let _this = this;
|
|
|
- if (val == '2') {
|
|
|
- _this.save()
|
|
|
+ if (val == "2") {
|
|
|
+ _this.save();
|
|
|
/* if (_this.com && _this.com.content) {
|
|
|
_this.replaceData(_this.com.content).then((res) => {
|
|
|
_this.content = res;
|
|
@@ -135,36 +135,38 @@ export default {
|
|
|
insertCmd: {
|
|
|
handler(val) {
|
|
|
if (val == null || this.isEdit != 1) return;
|
|
|
-
|
|
|
+
|
|
|
this.$nextTick(async () => {
|
|
|
try {
|
|
|
if (!this.$refs.wordEditor) {
|
|
|
- console.warn('编辑器未就绪');
|
|
|
+ console.warn("编辑器未就绪");
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const editor = this.$refs.wordEditor;
|
|
|
-
|
|
|
+
|
|
|
// 获取当前内容和新内容
|
|
|
- let currentContent = this.com.content || '';
|
|
|
+ let currentContent = this.com.content || "";
|
|
|
let insertContent = val.content;
|
|
|
|
|
|
// 如果是规格属性,先进行预处理
|
|
|
- if (val.type === 'ProductAttr') {
|
|
|
+ if (val.type === "ProductAttr") {
|
|
|
// 构建规格HTML
|
|
|
const specs = val.attrs?.specifications?.[0];
|
|
|
if (specs) {
|
|
|
const prodAttrId = `${val.id}_${this.com.attrs?.length || 0}`;
|
|
|
-
|
|
|
+
|
|
|
let specHtml = `
|
|
|
<div class="product-attr-container">
|
|
|
- <div class="spec-label">${specs.psp_name || '规格'}:</div>
|
|
|
+ <div class="spec-label">${specs.psp_name || "规格"}:</div>
|
|
|
<div class="spec-input">
|
|
|
`;
|
|
|
|
|
|
switch (specs.psp_type) {
|
|
|
- case '单选':
|
|
|
- const options = specs.psp_value ? specs.psp_value.split(',') : [];
|
|
|
+ case "单选":
|
|
|
+ const options = specs.psp_value
|
|
|
+ ? specs.psp_value.split(",")
|
|
|
+ : [];
|
|
|
specHtml += `
|
|
|
<select
|
|
|
id="${prodAttrId}"
|
|
@@ -173,23 +175,31 @@ export default {
|
|
|
style="min-width: 120px;"
|
|
|
>
|
|
|
<option value="">请选择</option>
|
|
|
- ${options.map(opt => `<option value="${opt}">${opt}</option>`).join('')}
|
|
|
+ ${options
|
|
|
+ .map(
|
|
|
+ (opt) => `<option value="${opt}">${opt}</option>`
|
|
|
+ )
|
|
|
+ .join("")}
|
|
|
</select>
|
|
|
`;
|
|
|
break;
|
|
|
|
|
|
- case '多选':
|
|
|
- const multiOptions = specs.psp_value ? specs.psp_value.split(',') : [];
|
|
|
+ case "多选":
|
|
|
+ const multiOptions = specs.psp_value ? specs.psp_value.split(",") : [];
|
|
|
specHtml += `
|
|
|
- <select
|
|
|
- id="${prodAttrId}"
|
|
|
- data-index="${this.com.attrs?.length || 0}"
|
|
|
- class="text-input-box product-select"
|
|
|
- multiple
|
|
|
- style="min-width: 120px;"
|
|
|
- >
|
|
|
- ${multiOptions.map(opt => `<option value="${opt}">${opt}</option>`).join('')}
|
|
|
- </select>
|
|
|
+ <div class="checkbox-group" id="${prodAttrId}" data-index="${this.com.attrs?.length || 0}">
|
|
|
+ ${multiOptions.map(opt => `
|
|
|
+ <label class="checkbox-item">
|
|
|
+ <input
|
|
|
+ type="checkbox"
|
|
|
+ value="${opt.trim()}"
|
|
|
+ ${item.content?.includes(opt.trim()) ? 'checked' : ''}
|
|
|
+ class="product-checkbox"
|
|
|
+ >
|
|
|
+ <span class="checkbox-label">${opt.trim()}</span>
|
|
|
+ </label>
|
|
|
+ `).join('')}
|
|
|
+ </div>
|
|
|
`;
|
|
|
break;
|
|
|
|
|
@@ -200,8 +210,8 @@ export default {
|
|
|
id="${prodAttrId}"
|
|
|
data-index="${this.com.attrs?.length || 0}"
|
|
|
class="text-input-box auto-width"
|
|
|
- value="${specs.ps_name||0}"
|
|
|
- placeholder="请输入${specs.psp_name || ''}"
|
|
|
+ value="${specs.ps_name || ""}"
|
|
|
+ placeholder="请输入${specs.psp_name || ""}"
|
|
|
style="min-width: 120px;"
|
|
|
>
|
|
|
`;
|
|
@@ -211,13 +221,13 @@ export default {
|
|
|
</div>
|
|
|
</div>
|
|
|
`;
|
|
|
-
|
|
|
+
|
|
|
insertContent = specHtml;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 确保变量两侧有空格
|
|
|
- if (insertContent.includes('{{') && insertContent.includes('}}')) {
|
|
|
+ if (insertContent.includes("{{") && insertContent.includes("}}")) {
|
|
|
insertContent = ` ${insertContent} `;
|
|
|
}
|
|
|
|
|
@@ -226,9 +236,10 @@ export default {
|
|
|
if (editor.getSelection) {
|
|
|
const selection = editor.getSelection();
|
|
|
if (selection) {
|
|
|
- newContent = currentContent.substring(0, selection.start) +
|
|
|
- insertContent +
|
|
|
- currentContent.substring(selection.end);
|
|
|
+ newContent =
|
|
|
+ currentContent.substring(0, selection.start) +
|
|
|
+ insertContent +
|
|
|
+ currentContent.substring(selection.end);
|
|
|
} else {
|
|
|
newContent = currentContent + insertContent;
|
|
|
}
|
|
@@ -249,7 +260,7 @@ export default {
|
|
|
|
|
|
// 保存更新
|
|
|
await this.save({
|
|
|
- main: newContent
|
|
|
+ main: newContent,
|
|
|
});
|
|
|
|
|
|
// 确保视图更新并绑定事件
|
|
@@ -257,13 +268,12 @@ export default {
|
|
|
this.bindProductAttrEvents();
|
|
|
this.$forceUpdate();
|
|
|
});
|
|
|
-
|
|
|
} catch (error) {
|
|
|
- console.error('插入内容时出错:', error);
|
|
|
+ console.error("插入内容时出错:", error);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- deep: true
|
|
|
+ deep: true,
|
|
|
},
|
|
|
},
|
|
|
data() {
|
|
@@ -297,7 +307,7 @@ export default {
|
|
|
},
|
|
|
updated() {
|
|
|
this.$nextTick(() => {
|
|
|
- if (this.isEdit == '2') {
|
|
|
+ if (this.isEdit == "2") {
|
|
|
this.syncContent();
|
|
|
} else {
|
|
|
this.bindProductAttrEvents();
|
|
@@ -309,9 +319,9 @@ export default {
|
|
|
this.$el.removeEventListener("input", this.handleInputChange);
|
|
|
this.$el.removeEventListener("input", this.handleVariableNullInput);
|
|
|
this.$el.removeEventListener("blur", this.handleVariableNullBlur, true);
|
|
|
- const inputs = this.$el.querySelectorAll('.text-input-box');
|
|
|
- inputs.forEach(input => {
|
|
|
- input.removeEventListener('change', this.handleProductAttrChange);
|
|
|
+ const inputs = this.$el.querySelectorAll(".text-input-box");
|
|
|
+ inputs.forEach((input) => {
|
|
|
+ input.removeEventListener("change", this.handleProductAttrChange);
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
@@ -323,10 +333,10 @@ export default {
|
|
|
// 更新内容
|
|
|
this.com.content = content;
|
|
|
this.syncContent(); // 同步到预览模式
|
|
|
-
|
|
|
+
|
|
|
// 触发更新事件
|
|
|
- this.$emit('onUpdate', this.currentIndex, this.com.content);
|
|
|
-
|
|
|
+ this.$emit("onUpdate", this.currentIndex, this.com.content);
|
|
|
+
|
|
|
// 返回保存成功状态
|
|
|
return true;
|
|
|
},
|
|
@@ -431,36 +441,41 @@ export default {
|
|
|
} else if (_this.com.attrs[i].type == "ProductAttr") {
|
|
|
let item = _this.com.attrs[i];
|
|
|
let prodAttrId = item.id + "_" + i;
|
|
|
-
|
|
|
+
|
|
|
// 添加调试日志
|
|
|
- console.log('ProductAttr item:', item);
|
|
|
- console.log('ProductAttr specifications:', item.attrs?.specifications);
|
|
|
-
|
|
|
+ console.log("ProductAttr item:", item);
|
|
|
+ console.log(
|
|
|
+ "ProductAttr specifications:",
|
|
|
+ item.attrs?.specifications
|
|
|
+ );
|
|
|
+
|
|
|
// 获取规格信息
|
|
|
const specs = item.attrs?.specifications?.[0];
|
|
|
if (!specs) {
|
|
|
- console.warn('No specifications found for ProductAttr:', item);
|
|
|
+ console.warn("No specifications found for ProductAttr:", item);
|
|
|
continue;
|
|
|
}
|
|
|
|
|
|
// 添加规格名称显示
|
|
|
let specHtml = `
|
|
|
<div class="product-attr-container">
|
|
|
- <div class="spec-label">${specs.psp_name || '规格'}:</div>
|
|
|
+ <div class="spec-label">${specs.psp_name || "规格"}:</div>
|
|
|
<div class="spec-input">
|
|
|
`;
|
|
|
|
|
|
// 根据psp_type决定渲染什么类型的输入控件
|
|
|
- if (this.isEdit == '1') {
|
|
|
+ if (this.isEdit == "1") {
|
|
|
// 预览模式直接显示内容
|
|
|
- specHtml += `<span class="preview-content">${item.content || ''}</span>`;
|
|
|
+ specHtml += `<span class="preview-content">${
|
|
|
+ item.content || ""
|
|
|
+ }</span>`;
|
|
|
} else {
|
|
|
console.log(specs.psp_type);
|
|
|
switch (specs.psp_type) {
|
|
|
/* case '2': // 单选 */
|
|
|
- case '单选':
|
|
|
+ case "单选":
|
|
|
// 处理单选下拉框
|
|
|
- const options = specs.psp_value ? specs.psp_value.split(',') : [];
|
|
|
+ const options = specs.ps_name ? specs.ps_name.split(",") : [];
|
|
|
specHtml += `
|
|
|
<select
|
|
|
id="${prodAttrId}"
|
|
@@ -469,36 +484,38 @@ export default {
|
|
|
style="min-width: 120px;"
|
|
|
>
|
|
|
<option value="">请选择</option>
|
|
|
- ${options.map(opt => `
|
|
|
+ ${options
|
|
|
+ .map(
|
|
|
+ (opt) => `
|
|
|
<option
|
|
|
value="${opt}"
|
|
|
- ${item.content === opt ? 'selected' : ''}
|
|
|
+ ${item.content === opt ? "selected" : ""}
|
|
|
>${opt}</option>
|
|
|
- `).join('')}
|
|
|
+ `
|
|
|
+ )
|
|
|
+ .join("")}
|
|
|
</select>
|
|
|
`;
|
|
|
break;
|
|
|
|
|
|
- /* case '3': // 多选 */
|
|
|
- case '多选':
|
|
|
+ /* case '3': // 多选 */
|
|
|
+ case "多选":
|
|
|
// 处理多选下拉框
|
|
|
- const multiOptions = specs.psp_value ? specs.psp_value.split(',') : [];
|
|
|
- const selectedValues = specs.ps_name ? specs.ps_name.split(',') : [];
|
|
|
+ const selectedValues = specs.ps_name ? specs.ps_name.split(",") : [];
|
|
|
specHtml += `
|
|
|
- <select
|
|
|
- id="${prodAttrId}"
|
|
|
- data-index="${i}"
|
|
|
- class="text-input-box product-select"
|
|
|
- multiple
|
|
|
- style="min-width: 120px;"
|
|
|
- >
|
|
|
- ${multiOptions.map(opt => `
|
|
|
- <option
|
|
|
- value="${opt}"
|
|
|
- ${selectedValues.includes(opt) ? 'selected' : ''}
|
|
|
- >${opt}</option>
|
|
|
+ <div class="checkbox-group" id="${prodAttrId}" data-index="${i}">
|
|
|
+ ${selectedValues.map(opt => `
|
|
|
+ <label class="checkbox-item">
|
|
|
+ <input
|
|
|
+ type="checkbox"
|
|
|
+ value="${opt.trim()}"
|
|
|
+ ${item.content?.includes(opt.trim()) ? 'checked' : ''}
|
|
|
+ class="product-checkbox"
|
|
|
+ >
|
|
|
+ <span class="checkbox-label">${opt.trim()}</span>
|
|
|
+ </label>
|
|
|
`).join('')}
|
|
|
- </select>
|
|
|
+ </div>
|
|
|
`;
|
|
|
break;
|
|
|
|
|
@@ -507,9 +524,9 @@ export default {
|
|
|
<input
|
|
|
id="${prodAttrId}"
|
|
|
data-index="${i}"
|
|
|
- class="text-input-box product-input"
|
|
|
+ class="text-input-box auto-width"
|
|
|
value="${item.content || 0}"
|
|
|
- placeholder="请输入${specs.psp_name || ''}"
|
|
|
+ placeholder="请输入${specs.psp_name || ""}"
|
|
|
style="min-width: 120px;"
|
|
|
>
|
|
|
`;
|
|
@@ -1217,20 +1234,20 @@ export default {
|
|
|
}, */
|
|
|
|
|
|
syncContent() {
|
|
|
- if (this.isEdit == '2' && this.com && this.com.content) {
|
|
|
+ if (this.isEdit == "2" && this.com && this.com.content) {
|
|
|
const formattedContent = this.formatContent(this.com.content);
|
|
|
this.replaceData(formattedContent).then((res) => {
|
|
|
this.content = res;
|
|
|
this.$nextTick(() => {
|
|
|
this.bindEvents();
|
|
|
this.initializeInputWidths();
|
|
|
-
|
|
|
+
|
|
|
// 确保变量和空格都正确显示
|
|
|
if (this.com.attrs) {
|
|
|
this.com.attrs.forEach((attr, index) => {
|
|
|
const element = this.$el.querySelector(`#${attr.id}`);
|
|
|
if (element) {
|
|
|
- element.value = attr.content || '';
|
|
|
+ element.value = attr.content || "";
|
|
|
this.adjustInputWidth({ target: element });
|
|
|
}
|
|
|
});
|
|
@@ -1256,74 +1273,78 @@ export default {
|
|
|
|
|
|
formatContent(content) {
|
|
|
// 保留空格和换行
|
|
|
- return content.replace(/\s+/g, ' ').replace(/\n/g, '<br>');
|
|
|
+ return content.replace(/\s+/g, " ").replace(/\n/g, "<br>");
|
|
|
},
|
|
|
|
|
|
handleProductAttrChange(event) {
|
|
|
const target = event.target;
|
|
|
- const index = parseInt(target.dataset.index);
|
|
|
+ const container = target.closest('.checkbox-group, .product-select, .product-input');
|
|
|
+ if (!container) return;
|
|
|
+
|
|
|
+ const index = parseInt(container.dataset.index);
|
|
|
const item = this.com.attrs[index];
|
|
|
-
|
|
|
- console.log('ProductAttr change:', {
|
|
|
- target,
|
|
|
- index,
|
|
|
- item
|
|
|
- });
|
|
|
-
|
|
|
- if (!item || item.type !== 'ProductAttr') return;
|
|
|
-
|
|
|
+
|
|
|
+ if (!item || item.type !== "ProductAttr") return;
|
|
|
+
|
|
|
let newValue;
|
|
|
- if (target.multiple) {
|
|
|
- // 处理多选
|
|
|
+ if (container.classList.contains('checkbox-group')) {
|
|
|
+ // 处理checkbox组
|
|
|
+ const checkboxes = container.querySelectorAll('input[type="checkbox"]:checked');
|
|
|
+ newValue = Array.from(checkboxes)
|
|
|
+ .map(cb => cb.value)
|
|
|
+ .filter(Boolean)
|
|
|
+ .join(",");
|
|
|
+ } else if (target.multiple) {
|
|
|
+ // 处理多选select(保留原有逻辑)
|
|
|
newValue = Array.from(target.selectedOptions)
|
|
|
.map(opt => opt.value)
|
|
|
.filter(Boolean)
|
|
|
- .join(',');
|
|
|
+ .join(",");
|
|
|
} else {
|
|
|
newValue = target.value;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 更新内容
|
|
|
- this.$set(item, 'content', newValue);
|
|
|
-
|
|
|
+ this.$set(item, "content", newValue);
|
|
|
+
|
|
|
// 触发更新事件
|
|
|
- this.$emit('onUpdateProdAttr', this.currentIndex, index, newValue);
|
|
|
+ this.$emit("onUpdateProdAttr", this.currentIndex, index, newValue);
|
|
|
},
|
|
|
|
|
|
handleProductAttrInput(event) {
|
|
|
// 处理输入框实时输入
|
|
|
const target = event.target;
|
|
|
- if (target.classList.contains('product-input')) {
|
|
|
+ if (target.classList.contains("product-input")) {
|
|
|
this.adjustInputWidth({ target });
|
|
|
}
|
|
|
},
|
|
|
|
|
|
bindProductAttrEvents() {
|
|
|
- // 移除编辑模式判断,允许在所有模式下绑定事件
|
|
|
this.$nextTick(() => {
|
|
|
- const inputs = this.$el.querySelectorAll('.product-input, .product-select');
|
|
|
- console.log('Found product inputs:', inputs.length);
|
|
|
-
|
|
|
- inputs.forEach(input => {
|
|
|
- // 移除旧的事件监听
|
|
|
- input.removeEventListener('change', this.handleProductAttrChange);
|
|
|
- input.removeEventListener('input', this.handleProductAttrInput);
|
|
|
- input.removeEventListener('blur', this.handleProductAttrChange);
|
|
|
-
|
|
|
- // 确保输入控件是可交互的
|
|
|
- input.removeAttribute('readonly');
|
|
|
- input.removeAttribute('disabled');
|
|
|
-
|
|
|
- // 添加新的事件监听
|
|
|
- if (input.tagName.toLowerCase() === 'select') {
|
|
|
- input.addEventListener('change', this.handleProductAttrChange);
|
|
|
+ const inputs = this.$el.querySelectorAll(
|
|
|
+ '.product-input, .product-select, .product-checkbox'
|
|
|
+ );
|
|
|
+ console.log("Found product inputs:", inputs.length);
|
|
|
+
|
|
|
+ inputs.forEach((input) => {
|
|
|
+ input.removeEventListener("change", this.handleProductAttrChange);
|
|
|
+ input.removeEventListener("input", this.handleProductAttrInput);
|
|
|
+ input.removeEventListener("blur", this.handleProductAttrChange);
|
|
|
+
|
|
|
+ input.removeAttribute("readonly");
|
|
|
+ input.removeAttribute("disabled");
|
|
|
+
|
|
|
+ if (input.type === 'checkbox') {
|
|
|
+ input.addEventListener("change", this.handleProductAttrChange);
|
|
|
+ } else if (input.tagName.toLowerCase() === "select") {
|
|
|
+ input.addEventListener("change", this.handleProductAttrChange);
|
|
|
} else {
|
|
|
- input.addEventListener('input', this.handleProductAttrInput);
|
|
|
- input.addEventListener('blur', this.handleProductAttrChange);
|
|
|
+ input.addEventListener("input", this.handleProductAttrInput);
|
|
|
+ input.addEventListener("blur", this.handleProductAttrChange);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -1425,42 +1446,49 @@ export default {
|
|
|
font-family: inherit;
|
|
|
line-height: 1.6;
|
|
|
color: inherit;
|
|
|
-
|
|
|
+
|
|
|
// 标题样式
|
|
|
- h1, h2, h3, h4, h5, h6 {
|
|
|
+ h1,
|
|
|
+ h2,
|
|
|
+ h3,
|
|
|
+ h4,
|
|
|
+ h5,
|
|
|
+ h6 {
|
|
|
margin: 1em 0 0.5em;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 段落样式
|
|
|
p {
|
|
|
margin: 1em 0;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 列表样式
|
|
|
- ul, ol {
|
|
|
+ ul,
|
|
|
+ ol {
|
|
|
padding-left: 2em;
|
|
|
margin: 1em 0;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 表格样式
|
|
|
table {
|
|
|
border-collapse: collapse;
|
|
|
width: 100%;
|
|
|
margin: 1em 0;
|
|
|
-
|
|
|
- td, th {
|
|
|
+
|
|
|
+ td,
|
|
|
+ th {
|
|
|
border: 1px solid #ddd;
|
|
|
padding: 8px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 图片样式
|
|
|
img {
|
|
|
max-width: 100%;
|
|
|
height: auto;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 保持输入框样式一致
|
|
|
.text-input-box,
|
|
|
.text-input-boxs {
|
|
@@ -1470,7 +1498,7 @@ export default {
|
|
|
padding: 2px 4px;
|
|
|
min-width: 20px;
|
|
|
outline: none;
|
|
|
-
|
|
|
+
|
|
|
&:hover {
|
|
|
border-color: #ddd;
|
|
|
}
|
|
@@ -1515,11 +1543,11 @@ export default {
|
|
|
color: #606266;
|
|
|
background-color: #fff;
|
|
|
transition: all 0.2s;
|
|
|
-
|
|
|
+
|
|
|
&:hover {
|
|
|
border-color: #c0c4cc;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
&:focus {
|
|
|
border-color: #409eff;
|
|
|
outline: none;
|
|
@@ -1528,18 +1556,18 @@ export default {
|
|
|
|
|
|
.product-select {
|
|
|
padding-right: 25px;
|
|
|
-
|
|
|
+
|
|
|
&[multiple] {
|
|
|
// 调整多选下拉框的高度
|
|
|
height: auto;
|
|
|
min-height: 28px;
|
|
|
max-height: 120px;
|
|
|
padding: 2px;
|
|
|
-
|
|
|
+
|
|
|
option {
|
|
|
padding: 4px 8px;
|
|
|
line-height: 20px;
|
|
|
-
|
|
|
+
|
|
|
&:checked {
|
|
|
background-color: #409eff;
|
|
|
color: #fff;
|
|
@@ -1558,20 +1586,74 @@ export default {
|
|
|
.product-select {
|
|
|
background-color: transparent;
|
|
|
min-width: 80px;
|
|
|
-
|
|
|
+
|
|
|
&:not(:focus) {
|
|
|
border-color: transparent;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
&:hover {
|
|
|
border-color: #dcdfe6;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
&:focus {
|
|
|
background-color: #fff;
|
|
|
border-color: #409eff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .checkbox-group {
|
|
|
+ display: inline-flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+ min-width: 120px;
|
|
|
+ padding: 4px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .checkbox-item {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+ margin-right: 12px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ .checkbox-label {
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-checkbox {
|
|
|
+ margin-right: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:checked + .checkbox-label {
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .checkbox-label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ transition: color 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 预览模式样式优化
|
|
|
+ .view-mode {
|
|
|
+ .checkbox-group {
|
|
|
+ margin: 0 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .checkbox-item {
|
|
|
+ opacity: 0.9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-checkbox {
|
|
|
+ &:not(:checked) {
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|