No.7可视化大屏--vite+vue3 头部结构编写

一、头部

在modelTitle.vue 中

 完整代码：

<script setup>
</script>
 
<template>
<div class="box-head">
    <dv-decoration8 style="width:300px;height:50px;" />
    <div class="box-head-1">
        <h2>踽踽的独行者</h2>
        <dv-decoration5 :dur="2" style="width:300px;height:20px;" />
    </div>
    <dv-decoration8 :reverse="true" style="width:300px;height:50px;" />
</div>
</template>
 
<style scoped>
/* 这部分也可以放到index.css 文件中 */
.box-head {
    display: flex;
    width: 100%;
    height: 50px;
    align-items: center;  /* 确保子元素在垂直方向居中 */
    justify-content: space-between;  /* 两端对齐 */
    text-align: center;  /* 文字居中 */
}
.box-head-1 {
    display: flex;
    flex-direction: column;
    align-items: center;  /* 确保子元素水平居中 */
}
.box-head h2 {
    margin-top: 50px;
    letter-spacing: 8px;
    font-size: 28px;
}
</style>

　效果：