56 lines
1.1 KiB
Vue
56 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<div class="large_title">
|
||
|
|
<div class="title">
|
||
|
|
<img class="title_icon" src="@/assets/large/title_icon.png" alt=""></img>
|
||
|
|
<div class="title_text">{{ title }}</div>
|
||
|
|
</div>
|
||
|
|
<img class="title_bottom" src="@/assets/large/title_bottom.png" alt="">
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { defineProps } from 'vue';
|
||
|
|
|
||
|
|
// 定义组件属性，使组件可配置
|
||
|
|
const props = defineProps({
|
||
|
|
// 标题文本
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
default: '标题'
|
||
|
|
},
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.large_title {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
display: flex;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title_icon {
|
||
|
|
width: 10px;
|
||
|
|
height: 24px;
|
||
|
|
margin-right: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title_text {
|
||
|
|
font-size: 24px;
|
||
|
|
font-family: Rang_men_zheng_title;
|
||
|
|
font-weight: 400;
|
||
|
|
color: rgba(226, 235, 241, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.title_bottom {
|
||
|
|
width: 100%;
|
||
|
|
height: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|