60 lines
1.7 KiB
Vue
60 lines
1.7 KiB
Vue
<template>
|
|
<div class="title-d">
|
|
<span>{{ props.title }}</span>
|
|
<div>
|
|
<span v-if="isShowMore" style="font-size: 14px; font-weight: 100; cursor: pointer; margin-right: 3px" @click="clickMore">更多></span>
|
|
<img src="../assets/img/point.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: () => '',
|
|
},
|
|
isShowMore: {
|
|
type: Boolean,
|
|
default: () => false,
|
|
},
|
|
});
|
|
const emit = defineEmits(['clickMore']);
|
|
function clickMore() {
|
|
emit('clickMore');
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
.title-d {
|
|
padding-left: 17px;
|
|
position: relative;
|
|
text-align: left;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
background: linear-gradient(90deg, rgba(106, 112, 124, 0.4) 0%, rgba(106, 112, 124, 0) 70%, rgba(106, 112, 124, 0) 100%);
|
|
opacity: 1;
|
|
border-top: 1px solid #6a707c;
|
|
border-bottom: 1px solid #6a707c;
|
|
border-image: linear-gradient(
|
|
90deg,
|
|
rgba(217.0000022649765, 231.00000143051147, 255, 0.5),
|
|
rgba(217.0000022649765, 231.00000143051147, 255, 0)
|
|
)
|
|
1 1;
|
|
color: #ffffff;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 7px;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: #45a2ff;
|
|
}
|
|
}
|
|
</style>
|