feat: 搭建基础信息模块的页面布局

app/src/views/BasicInfo/index.vue

@@ -1,6 +1,58 @@
 
 <template >
-  <div></div>
+  <div style="padding: 0px 35px; display: flex; justify-content: space-between"
+      >
+      <div>
+          <border-panel
+            height="360px"
+            style="margin-bottom: 6px"
+            title="建筑信息"
+          >
+          </border-panel>
+          <border-panel
+            height="310px"
+            style="margin-bottom: 6px"
+            title="管理单位"
+          >
+          </border-panel>
+          <border-panel height="270px" title="风险等级">
+          </border-panel>
+        </div>
+      <div style="display: flex; flex-direction: column;">
+        <div style="height: 682px;"></div>
+        <div style="display: flex; justify-content: space-between;">
+          <border-panel
+            height="270px"
+            width="468px"
+            title="历史火宅"
+            :headerType="2"
+            style="margin-right: 8px;"
+          >
+          </border-panel>
+          <border-panel
+            height="270px"
+            width="468px"
+            title="隐患"
+            :headerType="2"
+          >
+          </border-panel>
+        </div>
+      </div>
+      <div>
+        <border-panel
+            height="521px"
+            style="margin-bottom: 6px"
+            title="智慧消防"
+          >
+          </border-panel>
+          <border-panel
+            height="421px"
+            style="margin-bottom: 6px"
+            title="自查、监督、维保"
+          >
+          </border-panel>
+      </div>
+  </div>
 </template>
 <script>
 

app/src/views/Home/index.vue

@@ -1,6 +1,5 @@
 <template>
-  <div>
-      <div
+   <div
         style="padding: 0px 35px; display: flex; justify-content: space-between"
       >
         <div>
@@ -61,7 +60,6 @@
           </border-panel>
         </div>
       </div>
-  </div>
 </template>
 <script>
 import BasicInfo from "./components/BasicInfo.vue";

components/BorderPanel/data.js

@@ -1,4 +1,5 @@
 import headerTitleBg1 from "../assets/border-panel_header_1.svg";
 import headerTitleBg2 from "../assets/border-panel_header_2.svg";
+import headerTitleBg3 from "../assets/border-panel_header_3.svg";
 
-export const headerTitleBgs = [headerTitleBg1, headerTitleBg2];
+export const headerTitleBgs = [headerTitleBg1, headerTitleBg2, headerTitleBg3];

components/BorderPanel/index.vue

@@ -58,10 +58,11 @@ export default {
       return {
         "--height": this.$props.height,
         "--width": this.$props.width,
-        "--header-ops": ["-4px", "0px"][this.$props.headerType],
+        "--header-ops": ["-4px", "0px", "0px"][this.$props.headerType],
       };
     },
     headerImageBgUrl: function () {
+      console.log(this.headerType)
       return headerTitleBgs[this.$props.headerType];
     },
   },

components/assets/border-panel_header_3.svg

@@ -0,0 +1,234 @@
+<svg width="468" height="50" viewBox="0 0 468 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_99_181)">
+<path d="M-0.000335693 49H236.685C239.823 49 242.778 47.517 244.653 45C246.528 42.483 249.482 41 252.621 41H-0.000335693V49Z" fill="url(#paint0_linear_99_181)" fill-opacity="0.3"/>
+<path d="M445 41.4919H252.622C249.483 41.4919 246.529 42.9749 244.654 45.4919V45.4919C242.778 48.0089 239.824 49.4919 236.685 49.4919H0.000402641" stroke="white"/>
+<path d="M445 41.4919H252.622C249.483 41.4919 246.529 42.9749 244.654 45.4919V45.4919C242.778 48.0089 239.824 49.4919 236.685 49.4919H0.000402641" stroke="url(#paint1_linear_99_181)"/>
+<path d="M1.88641e-06 4L468 4V41H0L1.88641e-06 4Z" fill="url(#paint2_linear_99_181)" fill-opacity="0.34"/>
+<g style="mix-blend-mode:overlay" filter="url(#filter0_f_99_181)">
+<path d="M24.8486 17.8571L62.2793 50.7239L-12.582 50.7239L24.8486 17.8571Z" fill="url(#paint3_radial_99_181)" fill-opacity="0.97" style="mix-blend-mode:overlay"/>
+</g>
+<g style="mix-blend-mode:overlay" filter="url(#filter1_f_99_181)">
+<path d="M24.849 32.1175L46.0783 50.7239L3.61963 50.7239L24.849 32.1175Z" fill="url(#paint4_radial_99_181)" fill-opacity="0.97" style="mix-blend-mode:overlay"/>
+</g>
+<g style="mix-blend-mode:overlay" filter="url(#filter2_f_99_181)">
+<path d="M24.847 41.896L34.903 50.7239L14.791 50.7239L24.847 41.896Z" fill="url(#paint5_radial_99_181)" fill-opacity="0.97" style="mix-blend-mode:overlay"/>
+</g>
+<path d="M941.23 43H-342.54V53H941.23V43Z" fill="url(#paint6_radial_99_181)"/>
+<path d="M941.23 -3H-342.54V7H941.23V-3Z" fill="url(#paint7_radial_99_181)"/>
+<rect width="4.50427" height="4.50427" transform="matrix(-0.701084 0.713079 0.701084 0.713079 396.928 43)" fill="#00C2FF"/>
+<rect width="4.50427" height="4.50427" transform="matrix(-0.701084 0.713079 0.701084 0.713079 408.092 43)" fill="#0085FF" fill-opacity="0.5"/>
+<rect width="4.50427" height="4.50427" transform="matrix(-0.701084 0.713079 0.701084 0.713079 419.257 43)" fill="#00C2FF"/>
+<rect width="4.50427" height="4.50427" transform="matrix(-0.701084 0.713079 0.701084 0.713079 430.421 43)" fill="#0085FF" fill-opacity="0.5"/>
+<rect width="4.50427" height="4.50427" transform="matrix(-0.701084 0.713079 0.701084 0.713079 441.841 43)" fill="#00C2FF"/>
+<path d="M252.603 44L247.368 49H245.102L250.148 44H252.603Z" fill="url(#paint8_linear_99_181)"/>
+<path d="M258.587 44L253.352 49H251.086L256.132 44H258.587Z" fill="url(#paint9_linear_99_181)"/>
+<path d="M265.321 49L270.556 44H268.101L263.055 49H265.321Z" fill="url(#paint10_linear_99_181)"/>
+<path d="M306.462 44L301.227 49H298.961L304.007 44H306.462Z" fill="url(#paint11_linear_99_181)"/>
+<path d="M318.431 44L313.196 49H310.93L315.976 44H318.431Z" fill="url(#paint12_linear_99_181)"/>
+<path d="M277.29 49L282.525 44H280.069L275.023 49H277.29Z" fill="url(#paint13_linear_99_181)"/>
+<path d="M294.494 44L289.259 49H286.992L292.039 44H294.494Z" fill="url(#paint14_linear_99_181)"/>
+<path d="M264.571 44L259.336 49H257.07L262.116 44H264.571Z" fill="url(#paint15_linear_99_181)"/>
+<path d="M300.478 44L295.243 49H292.977L298.023 44H300.478Z" fill="url(#paint16_linear_99_181)"/>
+<path d="M276.54 44L271.305 49H269.039L274.085 44H276.54Z" fill="url(#paint17_linear_99_181)"/>
+<path d="M312.447 44L307.212 49H304.946L309.992 44H312.447Z" fill="url(#paint18_linear_99_181)"/>
+<path d="M288.509 44L283.274 49H281.008L286.054 44H288.509Z" fill="url(#paint19_linear_99_181)"/>
+<path d="M324.928 44L319.693 49H317.427L322.473 44H324.928Z" fill="url(#paint20_linear_99_181)"/>
+<path d="M330.912 44L325.677 49H323.411L328.457 44H330.912Z" fill="url(#paint21_linear_99_181)"/>
+<path d="M337.646 49L342.881 44H340.426L335.38 49H337.646Z" fill="url(#paint22_linear_99_181)"/>
+<path d="M378.787 44L373.552 49H371.286L376.332 44H378.787Z" fill="url(#paint23_linear_99_181)"/>
+<path d="M390.756 44L385.521 49H383.255L388.301 44H390.756Z" fill="url(#paint24_linear_99_181)"/>
+<path d="M349.615 49L354.85 44H352.395L347.348 49H349.615Z" fill="url(#paint25_linear_99_181)"/>
+<path d="M366.819 44L361.584 49H359.317L364.364 44H366.819Z" fill="url(#paint26_linear_99_181)"/>
+<path d="M336.896 44L331.661 49H329.395L334.441 44H336.896Z" fill="url(#paint27_linear_99_181)"/>
+<path d="M372.803 44L367.568 49H365.302L370.348 44H372.803Z" fill="url(#paint28_linear_99_181)"/>
+<path d="M348.865 44L343.63 49H341.364L346.41 44H348.865Z" fill="url(#paint29_linear_99_181)"/>
+<path d="M384.772 44L379.537 49H377.271L382.317 44H384.772Z" fill="url(#paint30_linear_99_181)"/>
+<path d="M360.834 44L355.599 49H353.333L358.379 44H360.834Z" fill="url(#paint31_linear_99_181)"/>
+<g filter="url(#filter3_f_99_181)">
+<rect x="4" y="24" width="10.6066" height="10.6066" transform="rotate(-45 4 24)" fill="#0057FF" fill-opacity="0.66"/>
+</g>
+<path d="M17.4325 13L29 23.9425L17.4713 35H12.3534L21.1197 23.9425L12.4147 13H17.4325Z" fill="url(#paint32_linear_99_181)"/>
+<path d="M15.6051 24.0484L12.3025 20.9371L9 24.0484L12.3025 27.1596L15.6051 24.0484Z" fill="url(#paint33_linear_99_181)"/>
+</g>
+<defs>
+<filter id="filter0_f_99_181" x="-15.582" y="14.8571" width="80.8613" height="38.8668" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.5" result="effect1_foregroundBlur_99_181"/>
+</filter>
+<filter id="filter1_f_99_181" x="1.61963" y="30.1175" width="46.4587" height="22.6064" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_99_181"/>
+</filter>
+<filter id="filter2_f_99_181" x="13.791" y="40.896" width="22.1121" height="10.8279" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_99_181"/>
+</filter>
+<filter id="filter3_f_99_181" x="-2" y="10.5" width="27" height="27" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur_99_181"/>
+</filter>
+<linearGradient id="paint0_linear_99_181" x1="238.997" y1="49" x2="-3.56747" y2="49" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00A3FF"/>
+<stop offset="1" stop-color="#0085FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_99_181" x1="445" y1="38.0736" x2="-7.23407" y2="38.0736" gradientUnits="userSpaceOnUse">
+<stop stop-color="#001F3D"/>
+<stop offset="0.177083" stop-color="#0084FF"/>
+<stop offset="1" stop-color="#00C2FF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_99_181" x1="282.77" y1="41" x2="282.77" y2="4" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.572917" stop-color="#00A3FF" stop-opacity="0"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint3_radial_99_181" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(24.8487 50.7239) rotate(-90) scale(34.8015 57.1175)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#F6F5F5" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint4_radial_99_181" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(24.849 50.7239) rotate(-90) scale(19.7017 32.395)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#F6F5F5" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint5_radial_99_181" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(24.847 50.7239) rotate(-90) scale(9.34751 15.345)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#F6F5F5" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint6_radial_99_181" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(297.335 47.3304) rotate(-90) scale(4.88953 454.342)">
+<stop offset="0.0381" stop-color="white"/>
+<stop offset="0.1359" stop-color="#00D5FF" stop-opacity="0.6"/>
+<stop offset="0.2643" stop-color="#006AFF" stop-opacity="0.5"/>
+<stop offset="0.4568" stop-color="#0935CC" stop-opacity="0.3238"/>
+<stop offset="0.6172" stop-color="#100EA7" stop-opacity="0.177"/>
+<stop offset="0.7013" stop-color="#120099" stop-opacity="0.1"/>
+<stop offset="0.746" stop-color="#100089" stop-opacity="0.085"/>
+<stop offset="0.8334" stop-color="#0B005F" stop-opacity="0.0558"/>
+<stop offset="0.954" stop-color="#03001B" stop-opacity="0.0154"/>
+<stop offset="1" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint7_radial_99_181" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(297.335 1.33036) rotate(-90) scale(4.88953 454.342)">
+<stop offset="0.0381" stop-color="white"/>
+<stop offset="0.1359" stop-color="#00D5FF" stop-opacity="0.6"/>
+<stop offset="0.2643" stop-color="#006AFF" stop-opacity="0.5"/>
+<stop offset="0.4568" stop-color="#0935CC" stop-opacity="0.3238"/>
+<stop offset="0.6172" stop-color="#100EA7" stop-opacity="0.177"/>
+<stop offset="0.7013" stop-color="#120099" stop-opacity="0.1"/>
+<stop offset="0.746" stop-color="#100089" stop-opacity="0.085"/>
+<stop offset="0.8334" stop-color="#0B005F" stop-opacity="0.0558"/>
+<stop offset="0.954" stop-color="#03001B" stop-opacity="0.0154"/>
+<stop offset="1" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint8_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint12_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint13_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint14_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint15_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint16_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint17_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint18_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint19_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint20_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint21_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint22_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint23_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint24_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint25_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint26_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint27_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint28_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint29_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint30_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint31_linear_99_181" x1="363.09" y1="49.5" x2="363.09" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint32_linear_99_181" x1="28.4118" y1="23.7976" x2="9" y2="23.7976" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.254331" stop-color="#CDE4FF"/>
+<stop offset="1" stop-color="#0075FF"/>
+</linearGradient>
+<linearGradient id="paint33_linear_99_181" x1="28.4118" y1="23.7976" x2="9" y2="23.7976" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.254331" stop-color="#CDE4FF"/>
+<stop offset="1" stop-color="#0075FF"/>
+</linearGradient>
+<clipPath id="clip0_99_181">
+<rect width="468" height="50" fill="white"/>
+</clipPath>
+</defs>
+</svg>