| | |
| | | <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>
|
| | | <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%;
|
| | |
| | | position: relative;
|
| | | display: flex;
|
| | | align-items: center;
|
| | | justify-content: center;
|
| | | //justify-content: center;
|
| | |
|
| | | .zuo,
|
| | | .you {
|
| | |
| | | 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;
|
| | | }
|
| | | }
|
| | |
|
| | |
| | | }
|
| | |
|
| | | .item_title_content {
|
| | | height: $item_title_content-height;
|
| | | //height: $item_title_content-height;
|
| | | margin: 20px 0;
|
| | |
|
| | | }
|
| | |
|
| | | .item_title_content_def {
|