11111

src/components/index.js

@@ -1,6 +1,8 @@
 import NumberCard from './number-card/card.vue'
+import HcProgress from './progress/progress.vue'
 
 //注册全局组件
 export const setupComponents = (App) => {
     App.component('numberCard', NumberCard)
+    App.component('HcProgress', HcProgress)
 }

src/components/progress/progress.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="hc-progress-box" :class="`color-${color}`">
+        <div class="name">{{name}}</div>
+        <div class="main">
+            <div class="bg"/>
+            <div class="color" :style="`width: ${schedule}`"/>
+        </div>
+        <div class="schedule">{{schedule}}</div>
+    </div>
+</template>
+
+<script setup>
+import {onMounted, ref, watch} from 'vue'
+import {isNullES} from "js-fast-way";
+//参数
+const props = defineProps({
+    value: {
+        type: [String, Number],
+        default: '0',
+    },
+    name: {
+        type: String,
+        default: '',
+    },
+    color: {
+        type: String,
+        default: '1',
+    },
+})
+
+//监听
+watch(() => props.value, (val) => {
+    setScheduleData(val)
+})
+
+//渲染完成
+onMounted(() => {
+    setScheduleData(props.value)
+})
+
+//设置进度数据
+const schedule = ref('0%')
+const setScheduleData = (val) => {
+    const str = isNullES(val) ? 0 : val
+    schedule.value = str.toString() + '%'
+}
+</script>
+
+<style scoped lang="scss">
+@import './style';
+</style>

src/components/progress/style.scss

@@ -0,0 +1,52 @@
+.hc-progress-box {
+    position: relative;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    padding: 0 28px;
+    .name {
+        font-size: 20px;
+        margin-right: 24px;
+    }
+    .main {
+        flex: 1;
+        position: relative;
+        height: 100%;
+        padding: 2px;
+        border-radius: 10px;
+        .bg {
+            position: relative;
+            height: 100%;
+            border-radius: 9px;
+            background: #EFEFEF;
+        }
+        .color {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 20%;
+            height: 100%;
+            z-index: 22;
+            border-radius: 9px;
+        }
+    }
+    .schedule {
+        font-size: 20px;
+        margin-left: 24px;
+    }
+    &.color-1 .main {
+        background: linear-gradient(95.32deg, #4095e5 -35%,#0014B7 100% 100%);
+        .color {
+            background: linear-gradient(95.32deg, rgb(64, 149, 229) 14.96%, rgba(119, 40, 245, 0.29) 99.64%);
+        }
+    }
+    &.color-2 .main {
+        background: linear-gradient(95.32deg, #FE6E22 -35%,#E99D42 100% 100%);
+        .color {
+            background: linear-gradient(73.14deg, rgba(254,110,34,1) 3.07%,rgba(243,136,52,0.46) 87.12%);
+        }
+    }
+}
+.hc-progress-box + .hc-progress-box {
+    margin-top: 30px;
+}

src/styles/home.scss

@@ -106,7 +106,7 @@
                     border: 0;
                     .title {
                         font-size: 24px;
-                        margin-bottom: 10px;
+                        margin-bottom: 34px;
                     }
                 }
             }
@@ -116,6 +116,26 @@
             border: 1px solid #61616B;
             margin-left: 24px;
             padding: 18px;
+            .content {
+                position: relative;
+                .title {
+                    font-size: 28px;
+                    margin-bottom: 34px;
+                }
+                .video-content {
+                    position: relative;
+                    height: calc(100% - 70px);
+                    overflow: auto;
+                    .video-item {
+                        position: relative;
+                        width: 100%;
+                        height: 155px;
+                    }
+                    .video-item + .video-item {
+                        margin-top: 24px;
+                    }
+                }
+            }
         }
         .hc-border-1 {
             position: absolute;

src/styles/index.scss

@@ -7,3 +7,7 @@ html, body, #app {
 * {
     box-sizing: border-box;
 }
+*::-webkit-scrollbar {
+    width: 0;
+    height: 9px;
+}

src/views/index.vue

@@ -25,15 +25,15 @@
                         <div class="scroll-bar">
                             <div class="number-box">
                                 <div class="name">总换索量</div>
-                                <numberCard value="3"/>
+                                <number-card value="3"/>
                             </div>
                             <div class="number-box">
                                 <div class="name letter">已换</div>
-                                <numberCard value="300"/>
+                                <number-card value="300"/>
                             </div>
                             <div class="number-box">
                                 <div class="name letter">未换</div>
-                                <numberCard value="13"/>
+                                <number-card value="13"/>
                             </div>
                         </div>
                     </div>
@@ -43,13 +43,22 @@
                     <div class="hc-border-2"/>
                     <div class="h-full content">
                         <div class="title text-center">内外业进度对比</div>
+                        <hc-progress name="内业资料" value="72" color="1"/>
+                        <hc-progress name="外业施工" value="86" color="2"/>
                     </div>
                 </div>
             </div>
             <div class="main-right w-[320px]">
                 <div class="hc-border-1"/>
                 <div class="hc-border-2"/>
-                222
+                <div class="h-full content">
+                    <div class="title text-center">监控视频</div>
+                    <div class="video-content">
+                        <div class="video-item" v-for="item in 8" :key="item">
+                            <video playsinline controls  src="https://cdn.modao.cc/Default_video.mp4" class="w-full h-full"/>
+                        </div>
+                    </div>
+                </div>
             </div>
         </main>
     </section>