Merge pull request #64 from jetlinks/dev-hub

style: 更改TitleComponent组件样式
This commit is contained in:
胡彪 2023-03-20 09:29:03 +08:00 committed by GitHub
commit 6f9db383be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 26 additions and 101 deletions

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>

View File

@ -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;
}

View File

@ -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',

View File

@ -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 {

View File

@ -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;

View File

@ -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;
}

View File

@ -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;