修复Panel组件样式位置错误:将style从template内部移到组件选项中
This commit is contained in:
@@ -230,34 +230,34 @@ export default defineComponent({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
`,
|
||||||
<style scoped>
|
// 样式应该放在模板外部,作为组件的style选项
|
||||||
/* 向下小三角 */
|
style: `
|
||||||
.icon-triangle-down {
|
/* 向下小三角 */
|
||||||
width: 0; height: 0;
|
.panel-container .icon-triangle-down {
|
||||||
border-left: 5px solid transparent;
|
width: 0; height: 0;
|
||||||
border-right: 5px solid transparent;
|
border-left: 5px solid transparent;
|
||||||
border-top: 6px solid #cbd6ff;
|
border-right: 5px solid transparent;
|
||||||
}
|
border-top: 6px solid #cbd6ff;
|
||||||
|
}
|
||||||
/* 最大化图标 */
|
|
||||||
.icon-square {
|
/* 最大化图标 */
|
||||||
position: relative;
|
.panel-container .icon-square {
|
||||||
width: 11px; height: 11px;
|
position: relative;
|
||||||
background: linear-gradient(180deg, #cbd6ff 0%, #b9c8ff 100%);
|
width: 11px; height: 11px;
|
||||||
border: 1px solid #b8c6ff;
|
background: linear-gradient(180deg, #cbd6ff 0%, #b9c8ff 100%);
|
||||||
box-sizing: border-box;
|
border: 1px solid #b8c6ff;
|
||||||
}
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
/* X图标 */
|
|
||||||
.icon-x {
|
/* X图标 */
|
||||||
position: relative; width: 11px; height: 11px;
|
.panel-container .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;
|
.panel-container .icon-x::before, .panel-container .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); }
|
.panel-container .icon-x::before { transform: rotate(45deg); }
|
||||||
</style>
|
.panel-container .icon-x::after { transform: rotate(-45deg); }
|
||||||
`
|
`
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user