Главная Обзор Помощь
Регистрация Вход
zhaobao
/
JDHDB
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

tj

zhaobao 2 лет назад
Родитель
4e78968b25
Сommit
9d8e2beb73
12 измененных файлов с 163 добавлено и 5 удалено
Разделённый вид Показать статистику Diff
  1. 2 1
      README.md
  2. 1 1
      index.html
  3. 2 0
      src/App.vue
  4. 0 0
      src/assets/font/YouSheBiaoTiHei.ttf
  5. BIN
      src/assets/images/head.png
  6. 0 0
      src/assets/images/header.png
  7. BIN
      src/assets/images/layout_cont.png
  8. 0 1
      src/assets/vue.svg
  9. 13 2
      src/components/Header/index.vue
  10. 124 0
      src/components/Layouts/index.vue
  11. 18 0
      src/style.css
  12. 3 0
      vite.config.js

+ 2 - 1
README.md
Просмотреть файл 

@@ -1 +1,2 @@
 
-冀东海德堡(泾阳)水泥有限公司厂区风险分布四色图
 
+## 冀东海德堡(泾阳)水泥有限公司厂区风险分布四色图
 
+### 设计图地址[https://www.figma.com/file/Mdx5rjDsOLZnpEXmZ1MfKA/%E5%9B%9B%E8%89%B2%E9%A3%8E%E9%99%A9%E5%9B%BE?node-id=0%3A1&t=zaJM8WF2M19XSDy8-1]

+ 1 - 1
index.html
Просмотреть файл 

@@ -4,7 +4,7 @@
 
     <meta charset="UTF-8" />
 
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>Vite + Vue</title>
 
+    <title>冀东海德堡(泾阳)水泥有限公司厂区风险分布四色图</title>
 
   </head>
 
   <body>
 
     <div id="app"></div>

+ 2 - 0
src/App.vue
Просмотреть файл 

@@ -1,9 +1,11 @@
 
 <script setup>
 
 import Header from '@/components/Header/index.vue'
 
+import Layout from '@/components/Layouts/index.vue'
 
 </script>
 
 
 <template>
 
   <Header  />
 
+  <Layout/>
 
 </template>
 
 
 <style scoped>

+ 0 - 0
src/assets/font/庞门正道标题体2.0增强版.ttf → src/assets/font/YouSheBiaoTiHei.ttf
Просмотреть файл


BIN
src/assets/images/head.png
Просмотреть файл


+ 0 - 0
src/assets/images/Group 427318998.png → src/assets/images/header.png
Просмотреть файл


BIN
src/assets/images/layout_cont.png
Просмотреть файл


+ 0 - 1
src/assets/vue.svg
Просмотреть файл 

@@ -1 +0,0 @@
 
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

+ 13 - 2
src/components/Header/index.vue
Просмотреть файл 

@@ -1,5 +1,8 @@
 
 <template>
 
-    <div id="header"></div>
 
+    <div id="header">
 
+    <!-- 切图中包含文字 并且提供的字体跟图片的不是100%契合所以使用图片，如果文字需要改动请自行ps处理掉文字即可 -->
 
+        <!-- <p class="head-font">冀东海德堡(泾阳)水泥有限公司厂区风险分布四色图</p> -->
 
+    </div>
 
 </template>
 
 <script>
 
     export default {
 
@@ -14,8 +17,16 @@
 
 #header{
 
     width: 100%;
 
     height: 23.6vh;
 
-    background-image: url('@/assets/images/Group 427318998.png');
 
+    background-image: url('@/assets/images/header.png');
 
     background-size: 100% 100%;
 
     background-repeat: no-repeat;
 
+    .head-font{
 
+        height: 23.6vh;
 
+        line-height: 11vh;
 
+        color: #fff;
 
+        font-weight: bold;
 
+        font-size: 2.17vw;
 
+        letter-spacing: 0.09vw;
 
+    }
 
 }
 
 </style>

+ 124 - 0
src/components/Layouts/index.vue
Просмотреть файл 

@@ -0,0 +1,124 @@
 
+<template>
 
+    <div id="layout">
 
+        <div class="layout-cont">
 
+            <div class="map">
 
+                <img src="@/assets/images/layout_cont.png" alt="地图图片">
 
+            </div>
 
+            <div class="map-card lb">
 
+                <div class="title">图例</div>
 
+                <div class="item">重大风险</div>
 
+                <div class="item level-1">较大风险</div>
 
+                <div class="item level-2">一般风险</div>
 
+                <div class="item level-3">低风险</div>
 
+            </div>    
+            <div class="map-card rt">
 
+                <div class="title">作业项目</div>
 
+                <div class="item">重大风险</div>
 
+                <div class="item level-1">较大风险</div>
 
+                <div class="item level-2">一般风险</div>
 
+                <div class="item level-3">
 
+                    <span>低风险</span>
 
+                    <span class="number">3</span>
 
+                </div>
 
+            </div>              
+        </div>
 
+    </div>
 
+</template>
 
+<script >
 
+export default {
 
+    setup(props) {
 
+        
+    }
 
+}
 
+</script>
 
+<style lang="scss" scoped>
 
+#layout{
 
+    &{
 
+        width: 100%;
 
+        height: calc(100% - 11.82vh); 
+        position: absolute;
 
+        top: 11.78vh;
 
+    }
 
+    .layout-cont{
 
+        width: 100%;
 
+        height: 100%;
 
+        border: 1px solid rgb(0, 255, 213);  
+        box-sizing: border-box; 
+        .map{
 
+        // 2420.41*1868.11
 
+            display: block;
 
+            width: 63.03vw;
 
+            height: 86.49vh;
 
+            margin: 0 auto;
 
+            border: 1px solid red;
 
+            img{
 
+                width: 100%;
 
+                height: 100%;
 
+            }
 
+        }
 
+        .map-card{
 
+            padding:0.8vw;
 
+            position: absolute;
 
+            box-sizing: border-box;
 
+            background: linear-gradient( rgba(4, 58, 152, 0.2),rgba(4, 58, 152, 0.4));
 
+            background-image: radial-gradient(
 
+            rgba(39, 115, 255, 0.1) 50%,
 
+            rgba(39, 115, 255, 0.2),
 
+            rgba(39, 115, 255, 0.5));
 
+            .title{
 
+                color: #fff;
 
+                font-size: 1.2vh;
 
+                line-height: 1;
 
+                font-weight: bold;
 
+                padding-bottom: 0.1vh;
 
+                font-family: Microsoft YaHei UI;
 
+            }
 
+            &.lb{
 
+               min-width: 7.92%;
 
+               bottom:4.76vh;
 
+               left: 2%;
 
+            }
 
+            &.rt{
 
+               top: 1.5vh; 
+               right: 2%;
 
+               min-width:13.33% ;
 
+               .title{
 
+                color: #0075ff;
 
+               }
 
+            }
 
+            .item{
 
+                position: relative;
 
+                color: #fff;
 
+                font-size: 1.5vh;
 
+                line-height: 1;
 
+                margin-top: 1.6vh;
 
+                text-indent: 1.5vw;
 
+                display: flex;
 
+                justify-content: space-between;
 
+                .number{
 
+                    font-family: 'YouSheBiaoTiHei';
 
+                }
 
+                &::before{
 
+                    display: block;
 
+                    content: "";
 
+                    width: 1vw;
 
+                    height: 0.6vw;
 
+                    background-color: red;
 
+                    position: absolute;
 
+                    left: 0;
 
+                    top: 0.35vh;
 
+                } 
+                &.level-1::before{
 
+                    background-color: #FF6100;
 
+                }   
+                &.level-2::before{
 
+                    background-color: #FFFF00;
 
+                } 
+                &.level-3::before{
 
+                    background-color: #0000FF;
 
+                }             
+            }
 
+        }
 
+    }
 
+}
 
+</style>

+ 18 - 0
src/style.css
Просмотреть файл 

@@ -70,12 +70,30 @@ button:focus-visible {
 
   right: 0;
 
   top: 0;
 
   bottom: 0;
 
+  width: 100vw;
 
+  height: 100vh;
 
   background-image: url('@/assets/images/bg.png');
 
   background-size: 100% 100%;
 
   background-repeat: no-repeat;
 
   background-color: #03214e;
 
 }
 
 
+@font-face{
 
+  font-family: 'YouSheBiaoTiHei';
 
+  src: url('@/assets/font/YouSheBiaoTiHei.ttf');
 
+}
 
+.head-font{
 
+  font-family: YouSheBiaoTiHei;
 
+  font-style: Regular;
 
+  font-size:1.9vw;
 
+  line-height: 1;
 
+  letter-spacing: 0.3vw;
 
+  color: #fff;
 
+  text-align: center;
 
+  margin: 0;
 
+  padding: 0;
 
+}
 
+
 
 @media (prefers-color-scheme: light) {
 
   :root {
 
     color: #213547;

+ 3 - 0
vite.config.js
Просмотреть файл 

@@ -9,4 +9,7 @@ export default defineConfig({
 
       '@': path.resolve(__dirname, 'src')
 
     }
 
   },
 
+  server:{
 
+    host:'0.0.0.0'
 
+  }
 
 })