From 37bb6da78f4435f83cff5f2193cbdb46eebaad12 Mon Sep 17 00:00:00 2001 From: odc.xiaohui <xiaohui@Q1> Date: 星期三, 28 二月 2024 09:24:57 +0800 Subject: [PATCH] 大屏创建 --- src/components/item-wrap/item-wrap.vue | 47 +++++++++++++++++++++++++++-------------------- 1 files changed, 27 insertions(+), 20 deletions(-) diff --git a/src/components/item-wrap/item-wrap.vue b/src/components/item-wrap/item-wrap.vue index 3f63d7f..4352584 100644 --- a/src/components/item-wrap/item-wrap.vue +++ b/src/components/item-wrap/item-wrap.vue @@ -1,9 +1,10 @@ <script setup lang="ts"> import BorderBox13 from "@/components/datav/border-box-13"; + const props = withDefaults( defineProps<{ // 鏍囬 - title: number | string; + title: number | string, }>(), { title: "", @@ -12,24 +13,26 @@ </script> <template> - <BorderBox13> - <div class="item_title" v-if="title !== ''"> - <div class="zuo"></div> - <span class="title-inner"> {{ title }} </span> - <div class="you"></div> - </div> + + <div class="item_title" v-if="title !== ''"> + <span class="title-inner"> {{ title }} </span> + </div> <div :class="title !== '' ? 'item_title_content' : 'item_title_content_def'" > - <slot></slot></div - ></BorderBox13> + + <!-- 鍐呭鎻掓Ы --> + <slot></slot></div> + </template> <style scoped lang="scss"> $item-title-height: 38px; -$item_title_content-height: calc(100% - 38px); +//$item_title_content-height: calc(100% - 38px); .item_title { + background-image: url("@/assets/img/candantop.png") ; + background-repeat: no-repeat; height: $item-title-height; line-height: $item-title-height; width: 100%; @@ -39,7 +42,7 @@ position: relative; display: flex; align-items: center; - justify-content: center; + //justify-content: center; .zuo, .you { @@ -52,16 +55,19 @@ transform: rotate(180deg); } .title-inner { + margin-left: 15px; + color: #fff; font-weight: 900; letter-spacing: 2px; - background: linear-gradient( - 92deg, - #0072ff 0%, - #00eaff 48.8525390625%, - #01aaff 100% - ); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; + font-style: italic; + //background: linear-gradient( + // 92deg, + // #0072ff 0%, + // #00eaff 48.8525390625%, + // #01aaff 100% + //); + //-webkit-background-clip: text; + //-webkit-text-fill-color: transparent; } } @@ -71,7 +77,8 @@ } .item_title_content { - height: $item_title_content-height; + //height: $item_title_content-height; + margin: 20px 0; } .item_title_content_def { -- Gitblit v1.8.0