web/src/components/windows/dividerIndex.vue

<template>
      <el-col :span="24" class="divider">
            <div class="heng">
                  <span></span>
            </div>
            <div class="info">
                  <p class="title">{{ info.title }}</p>
                  <p class="enTitle">{{ info.enTitle }}</p>
            </div>
            <div class="heng">
                  <span></span>
            </div>
      </el-col>
</template>

<script setup lang="ts">
defineOptions({ name: 'dividerIndex' })

const info = defineModel('info', {
      type: Object,
      default: () => ({ title: '', enTitle: '' })
})

</script>
<style scoped lang="scss">
.divider {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;

      .heng {
            width: 43%;

            span {
                  display: inline-block;
                  width: 100%;
                  height: 2px;
                  background-color: rgb(0, 108, 200);
            }
      }

      .info {
            flex-grow: 1;
            margin: 0 10px;

            p {
                  white-space: nowrap;
            }

            .title {
                  color: rgb(25, 25, 26);
                  // font-family: '黑体';
                  font-size: 32px;
                  font-weight: 500;
                  line-height: 46px;
                  letter-spacing: 2px;
            }

            .enTitle {
                  color: rgb(73, 108, 138);
                  font-family: 'OPPO Sans';
                  font-size: 20px;
                  font-weight: 400;
                  line-height: 26px;
                  letter-spacing: 2px;
                  text-transform: uppercase;
            }
      }


}
</style>