修复Panel组件样式位置错误:将style从template内部移到组件选项中

This commit is contained in:
zqm
2025-10-30 21:21:39 +08:00
parent cb0098757a
commit 145f3c2d70

View File

@@ -230,34 +230,34 @@ export default defineComponent({
</div> </div>
</div> </div>
</div> </div>
`,
// 样式应该放在模板外部作为组件的style选项
style: `
/* 向下小三角 */
.panel-container .icon-triangle-down {
width: 0; height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #cbd6ff;
}
<style scoped> /* 最大化图标 */
/* 向下小三角 */ .panel-container .icon-square {
.icon-triangle-down { position: relative;
width: 0; height: 0; width: 11px; height: 11px;
border-left: 5px solid transparent; background: linear-gradient(180deg, #cbd6ff 0%, #b9c8ff 100%);
border-right: 5px solid transparent; border: 1px solid #b8c6ff;
border-top: 6px solid #cbd6ff; box-sizing: border-box;
} }
/* 最大化图标 */ /* X图标 */
.icon-square { .panel-container .icon-x {
position: relative; position: relative; width: 11px; height: 11px;
width: 11px; height: 11px; }
background: linear-gradient(180deg, #cbd6ff 0%, #b9c8ff 100%); .panel-container .icon-x::before, .panel-container .icon-x::after {
border: 1px solid #b8c6ff; content: ''; position: absolute; left: 5px; top: 0; width: 1px; height: 11px; background: #e6efff;
box-sizing: border-box; }
} .panel-container .icon-x::before { transform: rotate(45deg); }
.panel-container .icon-x::after { transform: rotate(-45deg); }
/* X图标 */
.icon-x {
position: relative; width: 11px; height: 11px;
}
.icon-x::before, .icon-x::after {
content: ''; position: absolute; left: 5px; top: 0; width: 1px; height: 11px; background: #e6efff;
}
.icon-x::before { transform: rotate(45deg); }
.icon-x::after { transform: rotate(-45deg); }
</style>
` `
}); });