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-17 16:22:17 +08:00
parent c0f2ebfa47
commit a07196de3d
1 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,24 +1,23 @@
<template>
<div class="title" :style='style'>
<span>{{ data }}</span>
<slot name="extra"></slot>
</div>
<div class="title" :style="style">
<span class="titleData">{{ data }}</span>
<slot name="extra"></slot>
</div>
</template>
<script setup lang='ts' name='TitleComponent'>
import type { CSSProperties, PropType } from 'vue'
<script setup lang="ts" name="TitleComponent">
import type { CSSProperties, PropType } from 'vue';
const props = defineProps({
data: {
type: String,
default: ""
},
style: {
type: Object as PropType<CSSProperties>,
default: () => ({})
}
})
data: {
type: String,
default: '',
},
style: {
type: Object as PropType<CSSProperties>,
default: () => ({}),
},
});
</script>
<style lang="less" scoped>
@ -26,18 +25,24 @@ const props = defineProps({
position: relative;
width: 100%;
margin-bottom: 10px;
padding-left: 10px;
color: rgba(0, 0, 0, 0.8);
font-weight: 600;
font-size: 16px;
}
.titleData {
position: relative;
width: 100%;
padding-left: 12px;
&::before {
position: absolute;
top: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
bottom: 0.5px;
left: 0;
width: 4px;
height: 100%;
height: 80%;
background-color: @primary-color;
content: '';
}
}
</style>
</style>