Merge pull request #64 from jetlinks/dev-hub
style: 更改TitleComponent组件样式
This commit is contained in:
commit
6f9db383be
|
@ -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>
|
||||
|
|
|
@ -310,15 +310,6 @@ const handleSearch = (e: any) => {
|
|||
<style lang="less" scoped>
|
||||
.card-item-content {
|
||||
min-height: 100px;
|
||||
|
||||
.card-item-content-title-a {
|
||||
// color: #000 !important;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
text-overflow: ellipsis; //溢出用省略号显示
|
||||
white-space: nowrap; //溢出不换行
|
||||
}
|
||||
.card-item-content-box {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
|
|
@ -56,7 +56,7 @@ const unSelectKeys = ref();
|
|||
const handleOk = async () => {
|
||||
const data: any = await formTableRef.value?.validate().catch(() => {});
|
||||
if (!data) return;
|
||||
const list = data.map((item: any) => {
|
||||
const list: any = data.map((item: any) => {
|
||||
return {
|
||||
name: item.name,
|
||||
provider: 'OPC_UA',
|
||||
|
|
|
@ -34,11 +34,6 @@
|
|||
:value="slotProps"
|
||||
:actions="getActions(slotProps)"
|
||||
v-bind="slotProps"
|
||||
:class="
|
||||
slotProps.state.value === 'disabled'
|
||||
? 'tableCardDisabled'
|
||||
: 'tableCardEnabled'
|
||||
"
|
||||
:status="slotProps.state.value"
|
||||
:statusText="slotProps.state.text"
|
||||
:statusNames="{
|
||||
|
@ -361,18 +356,6 @@ const handleSearch = (e: any) => {
|
|||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.tableCardDisabled {
|
||||
width: 100%;
|
||||
background: url('/images/access-config-diaabled.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tableCardEnabled {
|
||||
width: 100%;
|
||||
background: url('/images/access-config-enabled.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.card-item-content {
|
||||
min-height: 100px;
|
||||
.card-item-content-box {
|
||||
|
|
|
@ -281,17 +281,6 @@ const handleSearch = (e: any) => {
|
|||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tableCardDisabled {
|
||||
width: 100%;
|
||||
background: url('/images/access-config-diaabled.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tableCardEnabled {
|
||||
width: 100%;
|
||||
background: url('/images/access-config-enabled.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.card-item-content {
|
||||
min-height: 100px;
|
||||
|
|
|
@ -33,11 +33,6 @@
|
|||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:class="
|
||||
slotProps.state.value === 'disabled'
|
||||
? 'tableCardDisabled'
|
||||
: 'tableCardEnabled'
|
||||
"
|
||||
:status="slotProps.state.value"
|
||||
:statusText="slotProps.state.text"
|
||||
:statusNames="{
|
||||
|
@ -386,29 +381,8 @@ const handleSearch = (e: any) => {
|
|||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tableCardDisabled {
|
||||
width: 100%;
|
||||
background: url('/images/access-config-diaabled.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tableCardEnabled {
|
||||
width: 100%;
|
||||
background: url('/images/access-config-enabled.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.card-item-content {
|
||||
min-height: 100px;
|
||||
|
||||
.card-item-content-title-a {
|
||||
// color: #000 !important;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
text-overflow: ellipsis; //溢出用省略号显示
|
||||
white-space: nowrap; //溢出不换行
|
||||
}
|
||||
.card-item-content-box {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
|
|
@ -35,11 +35,6 @@
|
|||
:value="slotProps"
|
||||
:actions="getActions(slotProps)"
|
||||
v-bind="slotProps"
|
||||
:class="
|
||||
slotProps.state.value === 'disabled'
|
||||
? 'tableCardDisabled'
|
||||
: 'tableCardEnabled'
|
||||
"
|
||||
:status="slotProps.state.value"
|
||||
:statusText="slotProps.state.text"
|
||||
:statusNames="{
|
||||
|
@ -272,18 +267,6 @@ const handleSearch = (e: any) => {
|
|||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tableCardDisabled {
|
||||
width: 100%;
|
||||
background: url('/images/access-config-diaabled.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tableCardEnabled {
|
||||
width: 100%;
|
||||
background: url('/images/access-config-enabled.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.card-item-content {
|
||||
min-height: 100px;
|
||||
|
||||
|
|
Loading…
Reference in New Issue