54 lines
1.4 KiB
Vue
54 lines
1.4 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> |