大屏创建

odc.xiaohui

2024-02-28 37bb6da78f4435f83cff5f2193cbdb46eebaad12

 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"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </span>

      <div class="you"></div>

    </div>



     <div class="item_title" v-if="title !== ''">

       <span class="title-inner"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </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 {