title组件、progress组件

src/views/largeScreen/components/ProgressComponent.vue

@@ -0,0 +1,120 @@
+<template>
+    <div class="progress_component">
+        <div class="title">
+            <span class="progress_title">{{ title }}</span>
+            <span :class="percentageClass" class="roboto">{{ percentageChange }}</span>
+        </div>
+        <div class="roboto">
+            <span>{{ value }}</span>
+            <span>{{ unit }}</span>
+        </div>
+        <div class="my_el_progress">
+            <el-progress 
+                :percentage="progressPercentage" 
+                :color="progressColor" 
+                :show-text="false" 
+            />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from 'vue';
+
+// 定义组件属性
+const props = defineProps({
+    // 标题文本
+    title: {
+        type: String,
+        required: true,
+        default: '指标名称'
+    },
+    // 数值
+    value: {
+        type: String,
+        required: true,
+        default: '0.00'
+    },
+    // 单位
+    unit: {
+        type: String,
+        default: '万元'
+    },
+    // 百分比变化值（如：-327.55%）
+    percentageChange: {
+        type: String,
+        required: true,
+        default: '0.00%'
+    },
+    // 进度条百分比
+    progressPercentage: {
+        type: Number,
+        required: true,
+        default: 0
+    },
+    // 进度条颜色，默认红色
+    progressColor: {
+        type: String,
+        default: 'rgba(255, 77, 79, 1)'
+    }
+});
+
+// 计算百分比变化的样式类（红色或绿色）
+const percentageClass = computed(() => {
+    // 检查变化值是否为正数
+    const isPositive = props.percentageChange.startsWith('+') || 
+                      (!props.percentageChange.startsWith('-') && props.percentageChange !== '0.00%');
+    return isPositive ? 'green' : 'red';
+});
+</script>
+
+<style lang="scss" scoped>
+.progress_component {
+    width: 100%;
+    height: 100%;
+
+    :deep(.el-progress-bar__outer) {
+        background-color: transparent;
+    }
+
+    :deep(.el-progress-bar__inner),
+    :deep(.el-progress-bar__outer) {
+        border-radius: unset;
+    }
+
+    .my_el_progress {
+        margin-top: 15px;
+        padding: 10px;
+        box-sizing: border-box;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    .title {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        font-size: 12px;
+    }
+
+    .progress_title {
+        color: rgba(143, 171, 191, 1);
+        font-size: 12px;
+        font-family: SourceHanSansCN-Regular;
+        font-weight: 400;
+    }
+
+    .roboto {
+        font-family: Roboto-Regular;
+        font-weight: 400;
+    }
+
+    .red {
+        color: rgba(255, 77, 79, 1);
+    }
+
+    .green {
+        color: rgba(0, 227, 150, 1);
+    }
+}
+</style>
+    

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>

src/views/largeScreen/components/leftPage.vue

@@ -1,13 +1,37 @@
 <template>
-  <div class="leftPage">左边</div>
+  <div class="leftPage">
+    <!--  -->
+    <div class="kpi_box">
+      <TitleComponent :title="'支付KPI'"/>
+      <div style="height: 100px;"></div>
+      <ProgressComponent 
+        title="营业收入" 
+        value="123,456.78" 
+        percentageChange="+25.30%" 
+        progressPercentage="75" 
+        progressColor="rgba(0, 227, 150, 1)"
+      />
+    </div>
+
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup>
+import { ref, reactive, onMounted, computed, toRefs, getCurrentInstance, nextTick } from 'vue';
+import TitleComponent  from './TitleComponent.vue';
+import ProgressComponent from './ProgressComponent.vue';
+</script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .leftPage {
   width: 100%;
   height: 100%;
   background: #0c1e35;
+
+  .kpi_box {
+    padding: 10px;
+    box-sizing: border-box;
+  }
+
 }
 </style>