0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: 调整TitleComponent组件样式

This commit is contained in:
jackhoo_98 2023-03-12 15:45:41 +08:00
parent 721409dfb0
commit 92590869b7
1 changed files with 16 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/TitleComponent/index.vue
View File

@ -1,6 +1,5 @@
<template>
<div class="title" :style='style'>
<div class="title-before"></div>
<span>{{ data }}</span>
<slot name="extra"></slot>
</div>
@ -23,23 +22,22 @@ const props = defineProps({
</script>
<style lang="less" scoped>
.title {
position: relative;
width: 100%;
margin-bottom: 10px;
padding-left: 10px;
color: rgba(0, 0, 0, 0.8);
font-weight: 600;
font-size: 16px;
}
.title-before {
position: absolute;
top: 0;
left: 0;
width: 4px;
height: calc(100% - 2px);
background-color: @primary-color;
border-radius: 0 3px 3px 0;
position: relative;
width: 100%;
margin-bottom: 10px;
padding-left: 10px;
color: rgba(0, 0, 0, 0.8);
font-weight: 600;
font-size: 16px;
&::before {
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background-color: @primary-color;
content: '';
}
}
</style>