feat: 新增通用边框面板组件

app/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@zhgkpt/components": "workspace:^1.0.0",
+    "lib-flexible": "^0.3.2",
     "pinia": "^2.0.16",
     "vue": "^2.7.7",
     "vue-router": "^3.5.4"
@@ -19,6 +20,8 @@
     "@vitejs/plugin-legacy": "^2.0.0",
     "@vitejs/plugin-vue2": "^1.1.2",
     "@vitejs/plugin-vue2-jsx": "^1.0.2",
+    "autoprefixer": "^10.4.14",
+    "postcss-plugin-px2rem": "^0.8.1",
     "terser": "^5.14.2",
     "vite": "^3.0.2",
     "vitest": "^0.18.1",

app/src/App.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script>
 </script>
 
 <template>
@@ -9,7 +9,7 @@
 
 <style scoped>
 #app {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
 }
 </style>

app/src/assets/main.css

@@ -1 +1,14 @@
 @import "./base.css";
+
+@font-face {
+  font-family: 'abel';/*声明一个名为iconfont的字体变量*/
+  src:  url('./fonts/Abel-Regular.ttf') format('truetype');
+}
+
+html,body {
+  height: 100vh;
+  width: 100vw;
+  font-family: 'abel';
+  background:#000;
+  color: #fff;
+}

app/src/main.js

@@ -4,6 +4,7 @@ import DataVComponent from "@zhgkpt/components";
 
 import App from "./App.vue";
 import router from "./router";
+// import 'lib-flexible'
 
 import "./assets/main.css";
 

components/BorderPanel/data.js

@@ -0,0 +1,8 @@
+import headerTitleBg1 from '../assets/border-panel_header_1.svg'
+import headerTitleBg2 from '../assets/border-panel_header_2.svg'
+
+
+export const headerTitleBgs = [
+  headerTitleBg1,
+  headerTitleBg2
+]

components/BorderPanel/index.js

@@ -0,0 +1,4 @@
+import BorderPanel from './index.vue'
+import { withInstall } from '@zhgkpt/utils'
+
+export default withInstall(BorderPanel)

components/BorderPanel/index.vue

@@ -0,0 +1,123 @@
+<template >
+  <div class="border-panel" :style="borderPanelStyle">
+    <div class="border-panel_header" :style="{
+      backgroundImage: `url(${headerImageBgUrl})`
+    }" >
+      <div class="title" :data-text="title">{{title}}</div>
+    </div>
+    <div class="border-panel_content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script >
+import { headerTitleBgs } from './data'
+/**
+ * 边框面板
+ */
+export default {
+  name: "BorderPanel",
+  props: {
+    title: {
+      type: String,
+      default: "标题"
+    },
+    width: {
+      type: String,
+      default: '443px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    },
+    headerType: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    borderPanelStyle: function () {
+      return {
+        "--height": this.$props.height,
+        "--width": this.$props.width,
+        '--header-ops': ['-4px', '0px'][this.$props.headerType]
+      }
+    },
+    headerImageBgUrl: function() {
+      return headerTitleBgs[this.$props.headerType]
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+.border-panel {
+  position: relative;
+  height: var(--height);
+  width: var(--width);
+  box-sizing: border-box;
+  /* background: linear-gradient(360deg, #0c5a87 0%, rgba(0, 163, 255, 0) 100%); */
+  background: linear-gradient(360deg, rgba(0, 133, 255, 0.25) 0%, rgba(0, 163, 255, 0) 100%);
+}
+
+.border-panel_header{
+  height: 50px;
+  width: var(--width);
+  background-image: url('../assets/border-panel_header_1.svg');
+  background-repeat: no-repeat;
+  background-position: var(--header-ops) 0px;
+}
+
+.border-panel_header .title {
+  position: relative;
+  color: #95CCFF;
+  font-size: 24px;
+  line-height: 24px;
+  top: 11px;
+  left: 35px;
+  text-shadow: 0 1px 1px #0057FF;
+}
+.border-panel_header .title::after {
+  content: attr(data-text);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  color: #fff;
+  -webkit-mask: linear-gradient(180deg, #95CCFF, transparent);
+}
+
+.border-panel::after {
+  content: "";
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  padding: 1px;
+  box-sizing: border-box;
+  width: var(--width);
+  height: var(--height);
+  background: linear-gradient(360deg, #0c5a87 0%, rgba(0, 163, 255, 0) 100%);
+  /* 随便定义颜色 */
+  --mask-bg: linear-gradient(red, red);
+  --m-o: content-box, padding-box;
+  /* mask允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域 */
+  /* 设置了用作元素蒙版层的图像，默认值为none，值为透明图片，或透明渐变 */
+  -webkit-mask-image: var(--mask-bg), var(--mask-bg);
+  /* 默认值为border-box，可选值与background-origin相同 */
+  -webkit-mask-origin: var(--m-o);
+  /* 默认值为border-box，可选值与background-clip相同 */
+  -webkit-mask-clip: var(--m-o);
+  /* exclude排除，只显示不重合的地方,Firefox支持4个属性 */
+  mask-composite: exclude;
+  /*只显示下方遮罩，重合的地方不显示*/
+  -webkit-mask-composite: destination-out;
+}
+
+.border-panel_content {
+  padding: 0px 1px 0px 1px;
+}
+</style>

components/ButtonView/ButtonView.vue

@@ -1,9 +0,0 @@
-<template>
-  <div>Test222</div>
-</template>
-
-<script>
-export default {
-  name: "ButtonView2",
-};
-</script>

components/ButtonView/index.js

@@ -1,3 +0,0 @@
-import ButtonView from "./ButtonView.vue";
-import { withInstall } from "@zhgkpt/utils";
-export default withInstall(ButtonView);

components/assets/border-panel_header_1.svg

@@ -0,0 +1,244 @@
+<svg width="451" height="58" viewBox="0 0 451 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3_579)" filter="url(#filter0_d_3_579)">
+<path d="M3.9996 49H239.606C242.739 49 245.687 47.5163 247.553 45C249.419 42.4837 252.367 41 255.5 41H3.9996V49Z" fill="url(#paint0_linear_3_579)" fill-opacity="0.3"/>
+<path d="M447 41.4919H255.501C252.368 41.4919 249.42 42.9756 247.554 45.4919V45.4919C245.688 48.0082 242.74 49.4919 239.607 49.4919H4.0004" stroke="white"/>
+<path d="M447 41.4919H255.501C252.368 41.4919 249.42 42.9756 247.554 45.4919V45.4919C245.688 48.0082 242.74 49.4919 239.607 49.4919H4.0004" stroke="url(#paint1_linear_3_579)"/>
+<path d="M4 3.57144L447 3.57144V41.0297H4L4 3.57144Z" fill="url(#paint2_linear_3_579)" fill-opacity="0.34"/>
+<g style="mix-blend-mode:overlay" filter="url(#filter1_f_3_579)">
+<path d="M28.7371 17.8571L65.9995 50.7239L-8.52539 50.7239L28.7371 17.8571Z" fill="url(#paint3_radial_3_579)" fill-opacity="0.97" style="mix-blend-mode:overlay"/>
+</g>
+<g style="mix-blend-mode:overlay" filter="url(#filter2_f_3_579)">
+<path d="M28.7374 32.1175L49.8714 50.7239L7.60352 50.7239L28.7374 32.1175Z" fill="url(#paint4_radial_3_579)" fill-opacity="0.97" style="mix-blend-mode:overlay"/>
+</g>
+<g style="mix-blend-mode:overlay" filter="url(#filter3_f_3_579)">
+<path d="M28.7354 41.896L38.7462 50.7239L18.7246 50.7239L28.7354 41.896Z" fill="url(#paint5_radial_3_579)" fill-opacity="0.97" style="mix-blend-mode:overlay"/>
+</g>
+<path d="M548 43H-337V53H548V43Z" fill="url(#paint6_radial_3_579)"/>
+<path d="M548 -3H-337V7H548V-3Z" fill="url(#paint7_radial_3_579)"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 399.145 43)" fill="#00C2FF"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 410.258 43)" fill="#0085FF" fill-opacity="0.5"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 421.373 43)" fill="#00C2FF"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 432.486 43)" fill="#0085FF" fill-opacity="0.5"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 443.855 43)" fill="#00C2FF"/>
+<path d="M255.468 44L250.256 49H248L253.023 44H255.468Z" fill="url(#paint8_linear_3_579)"/>
+<path d="M261.425 44L256.213 49H253.957L258.981 44H261.425Z" fill="url(#paint9_linear_3_579)"/>
+<path d="M268.129 49L273.34 44H270.896L265.873 49H268.129Z" fill="url(#paint10_linear_3_579)"/>
+<path d="M309.085 44L303.873 49H301.617L306.641 44H309.085Z" fill="url(#paint11_linear_3_579)"/>
+<path d="M321 44L315.789 49H313.532L318.556 44H321Z" fill="url(#paint12_linear_3_579)"/>
+<path d="M280.043 49L285.255 44H282.811L277.787 49H280.043Z" fill="url(#paint13_linear_3_579)"/>
+<path d="M297.17 44L291.959 49H289.703L294.726 44H297.17Z" fill="url(#paint14_linear_3_579)"/>
+<path d="M267.382 44L262.171 49H259.915L264.938 44H267.382Z" fill="url(#paint15_linear_3_579)"/>
+<path d="M303.127 44L297.916 49H295.66L300.683 44H303.127Z" fill="url(#paint16_linear_3_579)"/>
+<path d="M279.297 44L274.086 49H271.83L276.853 44H279.297Z" fill="url(#paint17_linear_3_579)"/>
+<path d="M315.043 44L309.831 49H307.575L312.599 44H315.043Z" fill="url(#paint18_linear_3_579)"/>
+<path d="M291.213 44L286.001 49H283.745L288.769 44H291.213Z" fill="url(#paint19_linear_3_579)"/>
+<path d="M327.468 44L322.256 49H320L325.023 44H327.468Z" fill="url(#paint20_linear_3_579)"/>
+<path d="M333.425 44L328.213 49H325.957L330.981 44H333.425Z" fill="url(#paint21_linear_3_579)"/>
+<path d="M340.129 49L345.34 44H342.896L337.873 49H340.129Z" fill="url(#paint22_linear_3_579)"/>
+<path d="M381.085 44L375.873 49H373.617L378.641 44H381.085Z" fill="url(#paint23_linear_3_579)"/>
+<path d="M393 44L387.789 49H385.532L390.556 44H393Z" fill="url(#paint24_linear_3_579)"/>
+<path d="M352.043 49L357.255 44H354.811L349.787 49H352.043Z" fill="url(#paint25_linear_3_579)"/>
+<path d="M369.17 44L363.959 49H361.703L366.726 44H369.17Z" fill="url(#paint26_linear_3_579)"/>
+<path d="M339.382 44L334.171 49H331.915L336.938 44H339.382Z" fill="url(#paint27_linear_3_579)"/>
+<path d="M375.127 44L369.916 49H367.66L372.683 44H375.127Z" fill="url(#paint28_linear_3_579)"/>
+<path d="M351.297 44L346.086 49H343.83L348.853 44H351.297Z" fill="url(#paint29_linear_3_579)"/>
+<path d="M387.043 44L381.831 49H379.575L384.599 44H387.043Z" fill="url(#paint30_linear_3_579)"/>
+<path d="M363.213 44L358.001 49H355.745L360.769 44H363.213Z" fill="url(#paint31_linear_3_579)"/>
+<g filter="url(#filter4_f_3_579)">
+<rect x="8" y="24" width="10.6066" height="10.6066" transform="rotate(-45 8 24)" fill="#0057FF" fill-opacity="0.66"/>
+</g>
+<path d="M21.4325 13L33 23.9425L21.4713 35H16.3534L25.1197 23.9425L16.4147 13H21.4325Z" fill="url(#paint32_linear_3_579)"/>
+<path d="M19.6051 24.0484L16.3025 20.9371L13 24.0484L16.3025 27.1596L19.6051 24.0484Z" fill="url(#paint33_linear_3_579)"/>
+</g>
+<defs>
+<filter id="filter0_d_3_579" x="0" y="0" width="451" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3_579"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3_579" result="shape"/>
+</filter>
+<filter id="filter1_f_3_579" x="-11.5254" y="14.8571" width="80.5249" height="38.8669" 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_3_579"/>
+</filter>
+<filter id="filter2_f_3_579" x="5.60352" y="30.1174" width="46.2679" 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_3_579"/>
+</filter>
+<filter id="filter3_f_3_579" x="17.7246" y="40.896" width="22.0216" 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_3_579"/>
+</filter>
+<filter id="filter4_f_3_579" 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_3_579"/>
+</filter>
+<linearGradient id="paint0_linear_3_579" x1="241.923" y1="49" x2="0.448497" y2="49" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00A3FF"/>
+<stop offset="1" stop-color="#0085FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_3_579" x1="447" y1="38.0736" x2="-3.20155" 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_3_579" x1="271.664" y1="41.0297" x2="271.664" y2="3.57144" 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_3_579" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(28.7371 50.7239) rotate(-90) scale(34.8015 56.8608)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#F6F5F5" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint4_radial_3_579" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(28.7374 50.7239) rotate(-90) scale(19.7017 32.2494)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#F6F5F5" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint5_radial_3_579" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(28.7354 50.7239) rotate(-90) scale(9.34751 15.276)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#F6F5F5" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint6_radial_3_579" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(104.114 47.3304) rotate(-90) scale(4.88953 313.212)">
+<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_3_579" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(104.114 1.33036) rotate(-90) scale(4.88953 313.212)">
+<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_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint12_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint13_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint14_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint15_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint16_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint17_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint18_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint19_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint20_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint21_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint22_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint23_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint24_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint25_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint26_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint27_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint28_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint29_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint30_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint31_linear_3_579" x1="365.458" y1="49.5" x2="365.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint32_linear_3_579" x1="32.4118" y1="23.7976" x2="13" 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_3_579" x1="32.4118" y1="23.7976" x2="13" 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_3_579">
+<rect width="443" height="50" fill="white" transform="translate(4)"/>
+</clipPath>
+</defs>
+</svg>

components/assets/border-panel_header_2.svg

@@ -0,0 +1,234 @@
+<svg width="937" height="50" viewBox="0 0 937 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7_1268)">
+<path d="M-0.000396729 49H235.606C238.739 49 241.687 47.5163 243.553 45C245.419 42.4837 248.367 41 251.5 41H-0.000396729V49Z" fill="url(#paint0_linear_7_1268)" fill-opacity="0.3"/>
+<path d="M443 41.4919H251.501C248.368 41.4919 245.42 42.9756 243.554 45.4919V45.4919C241.688 48.0082 238.74 49.4919 235.607 49.4919H0.000398903" stroke="white"/>
+<path d="M443 41.4919H251.501C248.368 41.4919 245.42 42.9756 243.554 45.4919V45.4919C241.688 48.0082 238.74 49.4919 235.607 49.4919H0.000398903" stroke="url(#paint1_linear_7_1268)"/>
+<path d="M3.77685e-06 4L937 4V41H0L3.77685e-06 4Z" fill="url(#paint2_linear_7_1268)" fill-opacity="0.34"/>
+<g style="mix-blend-mode:overlay" filter="url(#filter0_f_7_1268)">
+<path d="M24.7371 17.8571L61.9995 50.7239L-12.5254 50.7239L24.7371 17.8571Z" fill="url(#paint3_radial_7_1268)" fill-opacity="0.97" style="mix-blend-mode:overlay"/>
+</g>
+<g style="mix-blend-mode:overlay" filter="url(#filter1_f_7_1268)">
+<path d="M24.7374 32.1175L45.8714 50.7239L3.60352 50.7239L24.7374 32.1175Z" fill="url(#paint4_radial_7_1268)" fill-opacity="0.97" style="mix-blend-mode:overlay"/>
+</g>
+<g style="mix-blend-mode:overlay" filter="url(#filter2_f_7_1268)">
+<path d="M24.7354 41.896L34.7462 50.7239L14.7246 50.7239L24.7354 41.896Z" fill="url(#paint5_radial_7_1268)" fill-opacity="0.97" style="mix-blend-mode:overlay"/>
+</g>
+<path d="M937 43H-341V53H937V43Z" fill="url(#paint6_radial_7_1268)"/>
+<path d="M937 -3H-341V7H937V-3Z" fill="url(#paint7_radial_7_1268)"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 395.145 43)" fill="#00C2FF"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 406.258 43)" fill="#0085FF" fill-opacity="0.5"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 417.373 43)" fill="#00C2FF"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 428.486 43)" fill="#0085FF" fill-opacity="0.5"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 439.855 43)" fill="#00C2FF"/>
+<path d="M251.468 44L246.256 49H244L249.023 44H251.468Z" fill="url(#paint8_linear_7_1268)"/>
+<path d="M257.425 44L252.213 49H249.957L254.981 44H257.425Z" fill="url(#paint9_linear_7_1268)"/>
+<path d="M264.129 49L269.34 44H266.896L261.873 49H264.129Z" fill="url(#paint10_linear_7_1268)"/>
+<path d="M305.085 44L299.873 49H297.617L302.641 44H305.085Z" fill="url(#paint11_linear_7_1268)"/>
+<path d="M317 44L311.789 49H309.532L314.556 44H317Z" fill="url(#paint12_linear_7_1268)"/>
+<path d="M276.043 49L281.255 44H278.811L273.787 49H276.043Z" fill="url(#paint13_linear_7_1268)"/>
+<path d="M293.17 44L287.959 49H285.703L290.726 44H293.17Z" fill="url(#paint14_linear_7_1268)"/>
+<path d="M263.382 44L258.171 49H255.915L260.938 44H263.382Z" fill="url(#paint15_linear_7_1268)"/>
+<path d="M299.127 44L293.916 49H291.66L296.683 44H299.127Z" fill="url(#paint16_linear_7_1268)"/>
+<path d="M275.297 44L270.086 49H267.83L272.853 44H275.297Z" fill="url(#paint17_linear_7_1268)"/>
+<path d="M311.043 44L305.831 49H303.575L308.599 44H311.043Z" fill="url(#paint18_linear_7_1268)"/>
+<path d="M287.213 44L282.001 49H279.745L284.769 44H287.213Z" fill="url(#paint19_linear_7_1268)"/>
+<path d="M323.468 44L318.256 49H316L321.023 44H323.468Z" fill="url(#paint20_linear_7_1268)"/>
+<path d="M329.425 44L324.213 49H321.957L326.981 44H329.425Z" fill="url(#paint21_linear_7_1268)"/>
+<path d="M336.129 49L341.34 44H338.896L333.873 49H336.129Z" fill="url(#paint22_linear_7_1268)"/>
+<path d="M377.085 44L371.873 49H369.617L374.641 44H377.085Z" fill="url(#paint23_linear_7_1268)"/>
+<path d="M389 44L383.789 49H381.532L386.556 44H389Z" fill="url(#paint24_linear_7_1268)"/>
+<path d="M348.043 49L353.255 44H350.811L345.787 49H348.043Z" fill="url(#paint25_linear_7_1268)"/>
+<path d="M365.17 44L359.959 49H357.703L362.726 44H365.17Z" fill="url(#paint26_linear_7_1268)"/>
+<path d="M335.382 44L330.171 49H327.915L332.938 44H335.382Z" fill="url(#paint27_linear_7_1268)"/>
+<path d="M371.127 44L365.916 49H363.66L368.683 44H371.127Z" fill="url(#paint28_linear_7_1268)"/>
+<path d="M347.297 44L342.086 49H339.83L344.853 44H347.297Z" fill="url(#paint29_linear_7_1268)"/>
+<path d="M383.043 44L377.831 49H375.575L380.599 44H383.043Z" fill="url(#paint30_linear_7_1268)"/>
+<path d="M359.213 44L354.001 49H351.745L356.769 44H359.213Z" fill="url(#paint31_linear_7_1268)"/>
+<g filter="url(#filter3_f_7_1268)">
+<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_7_1268)"/>
+<path d="M15.6051 24.0484L12.3025 20.9371L9 24.0484L12.3025 27.1596L15.6051 24.0484Z" fill="url(#paint33_linear_7_1268)"/>
+</g>
+<defs>
+<filter id="filter0_f_7_1268" x="-15.5254" y="14.8571" width="80.5249" height="38.8669" 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_7_1268"/>
+</filter>
+<filter id="filter1_f_7_1268" x="1.60352" y="30.1175" width="46.2679" 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_7_1268"/>
+</filter>
+<filter id="filter2_f_7_1268" x="13.7246" y="40.896" width="22.0216" 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_7_1268"/>
+</filter>
+<filter id="filter3_f_7_1268" 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_7_1268"/>
+</filter>
+<linearGradient id="paint0_linear_7_1268" x1="237.923" y1="49" x2="-3.5515" y2="49" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00A3FF"/>
+<stop offset="1" stop-color="#0085FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_7_1268" x1="443" y1="38.0736" x2="-7.20155" 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_7_1268" x1="566.143" y1="41" x2="566.143" 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_7_1268" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(24.7371 50.7239) rotate(-90) scale(34.8015 56.8608)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#F6F5F5" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint4_radial_7_1268" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(24.7374 50.7239) rotate(-90) scale(19.7017 32.2494)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#F6F5F5" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint5_radial_7_1268" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(24.7354 50.7239) rotate(-90) scale(9.34751 15.276)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#F6F5F5" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint6_radial_7_1268" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(295.998 47.3304) rotate(-90) scale(4.88953 452.3)">
+<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_7_1268" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(295.998 1.33036) rotate(-90) scale(4.88953 452.3)">
+<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_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint12_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint13_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint14_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint15_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint16_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint17_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint18_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint19_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint20_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint21_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint22_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint23_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint24_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint25_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint26_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint27_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint28_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint29_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint30_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint31_linear_7_1268" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint32_linear_7_1268" 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_7_1268" 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_7_1268">
+<rect width="937" height="50" fill="white"/>
+</clipPath>
+</defs>
+</svg>

components/index.js

@@ -1,5 +1,5 @@
-import ButtonView from "./ButtonView";
-const components = [ButtonView];
+import BorderPanel from "./BorderPanel";
+const components = [BorderPanel];
 
 function install(app) {
   components.forEach((item) => {
@@ -7,7 +7,7 @@ function install(app) {
   });
 }
 
-export { ButtonView };
+export { BorderPanel };
 
 export default {
   install,

pnpm-lock.yaml

@@ -30,7 +30,10 @@ importers:
       '@vitejs/plugin-vue2': ^1.1.2
       '@vitejs/plugin-vue2-jsx': ^1.0.2
       '@zhgkpt/components': workspace:^1.0.0
+      autoprefixer: ^10.4.14
+      lib-flexible: ^0.3.2
       pinia: ^2.0.16
+      postcss-plugin-px2rem: ^0.8.1
       terser: ^5.14.2
       vite: ^3.0.2
       vitest: ^0.18.1
@@ -39,6 +42,7 @@ importers:
       vue-template-compiler: ^2.7.7
     dependencies:
       '@zhgkpt/components': link:../components
+      lib-flexible: 0.3.2
       pinia: 2.1.3_vue@2.7.14
       vue: 2.7.14
       vue-router: 3.6.5_vue@2.7.14
@@ -46,6 +50,8 @@ importers:
       '@vitejs/plugin-legacy': 2.3.1_terser@5.17.6+vite@3.2.7
       '@vitejs/plugin-vue2': 1.1.2_vite@3.2.7+vue@2.7.14
       '@vitejs/plugin-vue2-jsx': 1.1.0_vite@3.2.7+vue@2.7.14
+      autoprefixer: 10.4.14
+      postcss-plugin-px2rem: 0.8.1
       terser: 5.17.6
       vite: 3.2.7_terser@5.17.6
       vitest: 0.18.1_terser@5.17.6
@@ -762,10 +768,20 @@ packages:
     resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
     engines: {node: '>=6'}
 
+  /ansi-regex/2.1.1:
+    resolution: {integrity: sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /ansi-regex/5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
 
+  /ansi-styles/2.2.1:
+    resolution: {integrity: sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /ansi-styles/3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
     engines: {node: '>=4'}
@@ -789,6 +805,21 @@ packages:
   /asynckit/0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
+  /autoprefixer/10.4.14:
+    resolution: {integrity: sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      browserslist: 4.21.7
+      caniuse-lite: 1.0.30001489
+      fraction.js: 4.2.0
+      normalize-range: 0.1.2
+      picocolors: 1.0.0
+      postcss-value-parser: 4.2.0
+    dev: true
+
   /balanced-match/1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -847,6 +878,17 @@ packages:
       type-detect: 4.0.8
     dev: true
 
+  /chalk/1.1.3:
+    resolution: {integrity: sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      ansi-styles: 2.2.1
+      escape-string-regexp: 1.0.5
+      has-ansi: 2.0.0
+      strip-ansi: 3.0.1
+      supports-color: 2.0.0
+    dev: true
+
   /chalk/2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -1453,6 +1495,10 @@ packages:
       combined-stream: 1.0.8
       mime-types: 2.1.35
 
+  /fraction.js/4.2.0:
+    resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
+    dev: true
+
   /fs.realpath/1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
@@ -1517,6 +1563,18 @@ packages:
     dependencies:
       type-fest: 0.20.2
 
+  /has-ansi/2.0.0:
+    resolution: {integrity: sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      ansi-regex: 2.1.1
+    dev: true
+
+  /has-flag/1.0.0:
+    resolution: {integrity: sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /has-flag/3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
     engines: {node: '>=4'}
@@ -1638,6 +1696,10 @@ packages:
   /isexe/2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
+  /js-base64/2.6.4:
+    resolution: {integrity: sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==}
+    dev: true
+
   /js-beautify/1.14.7:
     resolution: {integrity: sha512-5SOX1KXPFKx+5f6ZrPsIPEY7NwKeQz47n3jm2i+XeHx9MoRsfQenlOP13FQhWvg8JRS0+XLO6XYUQ2GX+q+T9A==}
     engines: {node: '>=10'}
@@ -1736,6 +1798,10 @@ packages:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  /lib-flexible/0.3.2:
+    resolution: {integrity: sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg==}
+    dev: false
+
   /local-pkg/0.4.3:
     resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
     engines: {node: '>=14'}
@@ -1825,6 +1891,11 @@ packages:
     dependencies:
       abbrev: 1.1.1
 
+  /normalize-range/0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /nth-check/2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
     dependencies:
@@ -1912,6 +1983,12 @@ packages:
       vue-demi: 0.14.5_vue@2.7.14
     dev: false
 
+  /postcss-plugin-px2rem/0.8.1:
+    resolution: {integrity: sha512-gNxhrnR57pnGrPLLqVNWY9+BWgj46kYkphw+0gpRJf9tjgwI7/tLqQPK7KdlksB2SSAddOb11otDVwri8b8mXw==}
+    dependencies:
+      postcss: 5.2.18
+    dev: true
+
   /postcss-selector-parser/6.0.13:
     resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
     engines: {node: '>=4'}
@@ -1919,6 +1996,20 @@ packages:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
+  /postcss-value-parser/4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+    dev: true
+
+  /postcss/5.2.18:
+    resolution: {integrity: sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==}
+    engines: {node: '>=0.12'}
+    dependencies:
+      chalk: 1.1.3
+      js-base64: 2.6.4
+      source-map: 0.5.7
+      supports-color: 3.2.3
+    dev: true
+
   /postcss/8.4.24:
     resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -2061,6 +2152,11 @@ packages:
       source-map: 0.6.1
     dev: true
 
+  /source-map/0.5.7:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /source-map/0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
@@ -2070,6 +2166,13 @@ packages:
     deprecated: Please use @jridgewell/sourcemap-codec instead
     dev: true
 
+  /strip-ansi/3.0.1:
+    resolution: {integrity: sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      ansi-regex: 2.1.1
+    dev: true
+
   /strip-ansi/6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -2080,6 +2183,18 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  /supports-color/2.0.0:
+    resolution: {integrity: sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==}
+    engines: {node: '>=0.8.0'}
+    dev: true
+
+  /supports-color/3.2.3:
+    resolution: {integrity: sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==}
+    engines: {node: '>=0.8.0'}
+    dependencies:
+      has-flag: 1.0.0
+    dev: true
+
   /supports-color/5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}

utils/index.js

@@ -5,7 +5,6 @@ export function withInstall(component) {
   return component;
 }
 
-
 export function WithInstallOfGlobalMethod(globalName,method) {
   method.install = function (app) {
     app.prototype[globalName] = method