fix:修改字体、图标、背景、阴影问题

ZhangXianQiang

2024-03-05 5300255dd40ac2ed67676da5568f0e4fd25a7078

 src/components/item-wrap/item-wrap.vue

@@ -1,40 +1,39 @@
<script setup lang="ts">

import BorderBox13 from "@/components/datav/border-box-13";



const props = withDefaults(

  defineProps<{

    // 标题

    title: number | string;

    title: number | string,

  }>(),

  {

    title: "",

  }

);



</script>



<template>

  <div class="item-wrap">

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

     </div>

    <div

      :class="title !== '' ? 'item_title_content' : 'item_title_content_def'"

    >

      <slot></slot>

    </div>

  </div>



    <!-- 内容插槽 -->

      <slot></slot></div>



</template>



<style scoped lang="scss">

.item-wrap {

  // border: red dashed 1px;

  box-sizing: border-box;

}

$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-size: 231px 100%;

  background-repeat: no-repeat;

  height: $item-title-height;

  line-height: $item-title-height;

  width: 100%;

@@ -44,7 +43,7 @@
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  //justify-content: center;



  .zuo,

  .you {

@@ -57,21 +56,34 @@
    transform: rotate(180deg);

  }

  .title-inner {

    font-weight: 900;

    margin-left: 25px;

    margin-top: 4px;

    color: #fff;

    font-weight: 400;

    letter-spacing: 2px;

    background: linear-gradient(

      92deg,

      #0072ff 0%,

      #00eaff 48.8525390625%,

      #01aaff 100%

    );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    font-size: 20px;

    font-style: italic;

    font-family: '200-SSBoYaTi';

    //background: linear-gradient(

    //  92deg,

    //  #0072ff 0%,

    //  #00eaff 48.8525390625%,

    //  #01aaff 100%

    //);

    //-webkit-background-clip: text;

    //-webkit-text-fill-color: transparent;

  }

}



:deep(.dv-border-box-content)  {

    box-sizing: border-box;

    padding: 6px 16px 0px;

  }



.item_title_content {

  height: $item_title_content-height;

  //height: $item_title_content-height;

  margin: 20px 0;



}



.item_title_content_def {