98 lines
2.0 KiB
Vue
98 lines
2.0 KiB
Vue
<!--
|
|
* @Author: daidai
|
|
* @Date: 2022-03-01 09:16:22
|
|
* @LastEditors: Please set LastEditors
|
|
* @LastEditTime: 2022-09-29 15:12:34
|
|
* @FilePath: \web-pc\src\pages\big-screen\components\item-wrap\item-wrap.vue
|
|
-->
|
|
<template>
|
|
<dv-border-box-13 class="lr_titles">
|
|
<div class="item_title" v-if="title !== ''">
|
|
<div class="zuo"></div>
|
|
<span class="title-inner"> {{ title }} </span>
|
|
<div class="you"></div>
|
|
</div>
|
|
<div
|
|
:class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
|
|
>
|
|
<slot></slot>
|
|
</div>
|
|
</dv-border-box-13>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {};
|
|
},
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: () => "",
|
|
},
|
|
},
|
|
created() {},
|
|
|
|
mounted() {},
|
|
methods: {},
|
|
};
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
$item-title-height: 38px;
|
|
$item_title_content-height: calc(100% - 38px);
|
|
|
|
.lr_titles {
|
|
box-sizing: border-box;
|
|
|
|
:deep(.border-box-content) {
|
|
box-sizing: border-box;
|
|
padding: 6px 16px 0px;
|
|
}
|
|
|
|
.item_title {
|
|
height: $item-title-height;
|
|
line-height: $item-title-height;
|
|
width: 100%;
|
|
color: #3b3b3b;
|
|
text-align: center;
|
|
// background: linear-gradient(to right, transparent, #0f0756, transparent);
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.zuo,
|
|
.you {
|
|
width: 58px;
|
|
height: 14px;
|
|
background-image: url("../../assets/img/titles/zuo.png");
|
|
}
|
|
|
|
.you {
|
|
transform: rotate(180deg);
|
|
}
|
|
.title-inner {
|
|
font-weight: 900;
|
|
letter-spacing: 2px;
|
|
background: linear-gradient(
|
|
92deg,
|
|
#565656 0%,
|
|
#465357 48.8525390625%,
|
|
#2b3e49 100%
|
|
);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
}
|
|
|
|
.item_title_content {
|
|
height: $item_title_content-height;
|
|
}
|
|
|
|
.item_title_content_def {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|