11111

src/App.vue

@@ -44,7 +44,3 @@ const getVersionJsonApi = async () => {
     }
 }
 </script>
-
-<style scoped>
-
-</style>

src/components/index.js

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

src/components/number-card/card.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="hc-number-card">
+        <numberCard>{{nums[0]}}</numberCard>
+        <numberCard>{{nums[1]}}</numberCard>
+        <numberCard>{{nums[2]}}</numberCard>
+    </div>
+</template>
+
+<script setup>
+import {onMounted, ref, watch} from 'vue'
+import numberCard from './item.vue'
+import {isNullES} from "js-fast-way";
+//参数
+const props = defineProps({
+    value: {
+        type: [String, Number],
+        default: '0',
+    },
+})
+
+//监听
+watch(() => props.value, (val) => {
+    setNumberData(val)
+})
+
+//渲染完成
+onMounted(() => {
+    setNumberData(props.value)
+})
+
+//设置数据
+const nums = ref([0, 0 , 0])
+const setNumberData = (val) => {
+    const str = isNullES(val) ? 0 : val
+    nums.value = str.toString().padStart(3, '0').split('');
+}
+</script>
+
+<style scoped lang="scss">
+.hc-number-card {
+    position: relative;
+}
+</style>

src/components/number-card/item.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="hc-number-card-item">
+        <slot/>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.hc-number-card-item {
+    position: relative;
+    display: inline-flex;
+    width: 40px;
+    height: 63px;
+    justify-content: center;
+    align-items: center;
+    font-size: 42px;
+    font-weight: bold;
+    &::before, &::after {
+        position: absolute;
+        content: '';
+        width: 40px;
+        height: 30px;
+        background: #4083E2;
+        border-radius: 7px;
+        z-index: -1;
+    }
+    &::before {
+        top: 0;
+    }
+    &::after {
+        bottom: 0;
+    }
+}
+.hc-number-card-item + .hc-number-card-item {
+    margin-left: 4px;
+}
+</style>

src/main.js

@@ -10,6 +10,9 @@ import HcVue3UI from 'hc-vue3-ui'
 import 'hc-vue3-ui/dist/index.css'
 import 'hc-vue3-ui/style/index.scss'
 
+//挂载全局
+import { setupComponents } from './components/index'
+
 //导入其它样式
 import './styles/index.scss'
 
@@ -22,9 +25,13 @@ async function bootstrap() {
 
     // 路由准备就绪后挂载APP实例
     await router.isReady()
+
     // hc-vue3-ui
     app.use(HcVue3UI, website)
 
+    // 挂载全局组件
+    setupComponents(app)
+
     app.mount('#app')
 }
 

src/styles/home.scss

@@ -0,0 +1,175 @@
+.hc-container {
+    flex: 1;
+    flex-basis: auto;
+    box-sizing: border-box;
+    min-width: 0;
+    .hc-header {
+        padding: 6px 0 24px;
+        flex-shrink: 0;
+        .gis-header {
+            height: 100%;
+            display: flex;
+            align-items: center;
+            .header_left, .header_right {
+                flex: 1;
+                height: 100%;
+            }
+            .header_left {
+                position: relative;
+                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAs0AAAA/CAMAAAAsVAWIAAAAS1BMVEUAAAAG3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3//QEWnDAAAAGHRSTlMA/env+eTS9VO5kvTs8dvBrXEpyqGADkO9xtMLAAABkklEQVR42u3cYVLbMBCAUdmmNMFJobSA7n9SZPiDZoBJghlZy3tn+FajVTxJ+cXwoavF7+I4FeOv4s91cbsv/t8Uf3fFfYLm8npOHoy5Hox/++LOYLC9mhsMxuGdwXjYFU+JHyX/EKcPRmEwOpVZezCKafE6GIv94maxWyReqTkUg6FmvmMwHlP/MnxtMOr32nMGQ8305OPBOPWHDDUTyahm4nhQM2EMj2omjFnNxHGnZsIY7tVMGFdqJo5rNRPGsFMzYQwJAAAAANi4AbowqZkw8pQgiCnPCYKY85ggiDEfEgQxumwQx2wVpC/j8MZoFaRrdc5OZ7r26eksZ/oiZwKRM12qw7UK0rU6XKsgXbvkdD4m2KTzcz76kZutOj/ng0+QaK9O9As5WwVpr07UKkjX6kQ91NG11U5nqyDtrXZ3dtmgvTpR7850ba2cj05n2rMKEoiHOgJxdyYQd2cCOSVcn+/TCd9sEIhVkEBWuzs7nWnv8pz95SKbc3nO/nKRzVltFfTuTHvrXTYSnGurOd8+AyeBmcKjJvouAAAAAElFTkSuQmCC);
+                background-size: 100% 100%;
+            }
+            .header_center {
+                text-align: center;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 100%;
+                padding: 0 20px;
+                border-bottom: 2px solid #06DFFF;
+                .title {
+                    color: #fff;
+                    font-weight: bold;
+                    font-size: 25px;
+                    letter-spacing: 2px;
+                }
+            }
+            .header_right {
+                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAs0AAAA/CAMAAAAsVAWIAAAAS1BMVEUAAAAG3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3/8G3//QEWnDAAAAGHRSTlMA/env+eTS9VO5kvTs8dvBrXEpyqGADkO9xtMLAAABeElEQVR42u3a4U7UQBSG4dkOLLtMK4iC5/6v1NYfRnTVSSDZzuF5ruHNyTdNC1zd02n1+X719bx6OK4+3a6mulruVjebw1/FDwXemuDjefXldYKtJ8H3o+aP6Ntp9Xwhwbk7wR0r7N+lBG8vJDhkgWoewWlzvzlvjj8TrJs7CUao+RUJkqzmFwly3ZpffvsmI0He7t0/C0qQqyndpoB9K72eA3aue+caCexe6dQC9q70eQzYvdLlyc5gAKXLTcD+lR7HgAGUDic7gyGUDmJmDAUAAAAA2Ld6gCF0xBwHGELHj821QApTtAIpzDEVSKGJmSyqmUEWfzwAp8MvXG0GUqOJmRyqy0wWYiYNMZPGfx6AEmccNZqYyWFxmclijkXM5DDFLGZyaP+OWeKMo0YTMzm0qGImh9llJotqM5PFYmaQRY1FzOTgAUgaPs2Rhs1MGjYzaVSXmSz8m0EaHoCk0WxmsphcZrKYYxIzOSwegKRhZpDHg5jJ4juVJpnCFsZedAAAAABJRU5ErkJggg==);
+                background-size: 100% 100%;
+                .time {
+                    position: absolute;
+                    bottom: 6px;
+                    right: 24px;
+                    color: #57DCF9;
+                    font-size: 23px;
+                }
+            }
+        }
+    }
+    .hc-main {
+        flex: 1;
+        display: flex;
+        flex-basis: auto;
+        overflow: auto;
+        padding: 8px 16px 20px;
+        .main-left {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            .content {
+                position: relative;
+                border: 1px solid #61616B;
+                .text-content {
+                    position: absolute;
+                    inset: 0;
+                    width: 205px;
+                    margin: 20px;
+                    padding: 16px;
+                    border-radius: 8px;
+                    background: rgba(0, 0, 0, 0.25);
+                    backdrop-filter: blur( 4px );
+                    -webkit-backdrop-filter: blur( 4px );
+                    border: 1px solid #000000;
+                    .title {
+                        font-size: 27px;
+                        margin-bottom: 40px;
+                    }
+                    .scroll-bar {
+                        position: relative;
+                        height: calc(100% - 72px);
+                        overflow: auto;
+                    }
+                    .number-box {
+                        position: relative;
+                        .name {
+                            font-size: 20px;
+                            margin-bottom: 10px;
+                        }
+                        .name.letter {
+                            letter-spacing: 2.4rem;
+                        }
+                    }
+                    .number-box + .number-box {
+                        margin-top: 40px;
+                    }
+                }
+            }
+            .bottom {
+                position: relative;
+                border: 1px solid #61616B;
+                background: #060726;
+                margin-top: 24px;
+                padding: 18px;
+                .content {
+                    position: relative;
+                    border: 0;
+                    .title {
+                        font-size: 24px;
+                        margin-bottom: 10px;
+                    }
+                }
+            }
+        }
+        .main-right {
+            position: relative;
+            border: 1px solid #61616B;
+            margin-left: 24px;
+            padding: 18px;
+        }
+        .hc-border-1 {
+            position: absolute;
+            inset: 0;
+            height: 50%;
+            &::after, &::before {
+                content: '';
+                position: absolute;
+                height: 40px;
+                width: 40px;
+                border-style: solid;
+                border-width: 4px;
+                border-color: #4083E2;
+            }
+            &::before {
+                left: -1px;
+                top: -1px;
+                border-right: 0;
+                border-bottom: 0;
+            }
+            &::after {
+                right: -1px;
+                top: -1px;
+                border-left: 0;
+                border-bottom: 0;
+            }
+        }
+        .hc-border-2 {
+            position: absolute;
+            height: 50%;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            &::after, &::before {
+                content: '';
+                position: absolute;
+                height: 40px;
+                width: 40px;
+                border-style: solid;
+                border-width: 4px;
+                border-color: #4083E2;
+            }
+            &::before {
+                left: -1px;
+                bottom: -1px;
+                border-right: 0;
+                border-top: 0;
+            }
+            &::after {
+                right: -1px;
+                bottom: -1px;
+                border-left: 0;
+                border-top: 0;
+            }
+        }
+    }
+}

src/styles/index.scss

@@ -0,0 +1,9 @@
+html, body, #app {
+    height: 100%;
+    font-size: 16px;
+    color: #fff;
+    background: #060433;
+}
+* {
+    box-sizing: border-box;
+}

src/views/index.vue

@@ -1,14 +1,79 @@
 <template>
-    <div>
-        1111
-    </div>
+    <section class="hc-container relative flex flex-col h-full">
+        <header class="hc-header relative h-[70px]">
+            <div class="gis-header">
+                <div class="header_left"/>
+                <div class="header_center">
+                    <div class="title">长寿区国道G243长寿长江大桥危桥改造工程</div>
+                </div>
+                <div class="header_right">
+                    <div class="time">
+                        <span>{{headerDate}}</span>
+                        <span class="ml-3">{{headerTime}}</span>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <main class="hc-main relative">
+            <div class="main-left flex-1">
+                <div class="content flex-1">
+                    <div class="hc-border-1"/>
+                    <div class="hc-border-2"/>
+                    <iframe src="http://3d.hczcxx.cn/" hc-border="0" class="relative w-full h-full cursor-pointer"/>
+                    <div class="text-content">
+                        <div class="title">施工换索进度</div>
+                        <div class="scroll-bar">
+                            <div class="number-box">
+                                <div class="name">总换索量</div>
+                                <numberCard value="3"/>
+                            </div>
+                            <div class="number-box">
+                                <div class="name letter">已换</div>
+                                <numberCard value="300"/>
+                            </div>
+                            <div class="number-box">
+                                <div class="name letter">未换</div>
+                                <numberCard value="13"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bottom h-[220px]">
+                    <div class="hc-border-1"/>
+                    <div class="hc-border-2"/>
+                    <div class="h-full content">
+                        <div class="title text-center">内外业进度对比</div>
+                    </div>
+                </div>
+            </div>
+            <div class="main-right w-[320px]">
+                <div class="hc-border-1"/>
+                <div class="hc-border-2"/>
+                222
+            </div>
+        </main>
+    </section>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import {onMounted, ref} from 'vue'
+import dayjs from 'dayjs'
 
+onMounted(() => {
+    getDateTime()
+})
+
+//实时日期时间
+const headerDate = ref(dayjs().format('YYYY年MM月DD日'))
+const headerTime = ref(dayjs().format('HH:mm:ss'))
+const getDateTime = () => {
+    setInterval(() => {
+        headerDate.value = dayjs().format('YYYY年MM月DD日')
+        headerTime.value = dayjs().format('HH:mm:ss')
+    }, 1000)
+}
 </script>
 
 <style lang="scss">
-
+@import '../styles/home';
 </style>

vite.config.js

@@ -17,7 +17,7 @@ export default defineConfig({
     },
     plugins: [
         vue(),
-        UnoCSS(),
+        UnoCSS()
     ],
     build: {
         rollupOptions: {