title组件、progress组件

src/views/largeScreen/components/TitleComponent.vue

@@ -0,0 +1,56 @@
+<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>