kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

迁移大屏UI库和应用

Browse Source
This commit is contained in:
aixianling
2022-03-25 11:09:26 +08:00
parent 60bd0b1dff
commit cc87206dbc
104 changed files with 7124 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
project/dvui/layout/AiDvPanel/AiDvPanel.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<section class="AiDvPanel">
<component :is="border" :title="title" v-if="border">
<template v-if="$slots.title" #title>
<slot name="title"/>
</template>
<slot/>
</component>
<slot style="width: 100%; height: 100%;" v-else></slot>
</section>
</template>
<script>
import Border1 from "./borders/border1";
import Border0 from "./borders/border0";
import Border2 from "./borders/border2";
import Border3 from "./borders/border3";
import Border4 from "./borders/border4";
export default {
name: "AiDvPanel",
components: { Border0, Border1, Border2, Border3, Border4 },
props: {
title: {default: "请传入标题"},
border: {default: "border0"}
},
mounted() {
},
}
</script>
<style lang="scss" scoped>
.AiDvPanel {
height: 100%;
* {
box-sizing: border-box;
}
}
</style>

23
project/dvui/layout/AiDvPanel/asset/border1Bg.svg Normal file
View File

@@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="560px" height="280px" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>矩形备份 58</title>
<defs>
<polygon id="path-1" points="680 760 690 750 1230 750 1240 760 1240 1020 1230 1030 690 1030 680 1020"></polygon>
<filter x="-2.7%" y="-5.4%" width="105.4%" height="110.7%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="10" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
<feGaussianBlur stdDeviation="10" in="shadowSpreadInner1" result="shadowBlurInner1"></feGaussianBlur>
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1"
result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0.239634146 0 0 0 0 0.473717493 0 0 0 0 1 0 0 0 1 0" type="matrix"
in="shadowInnerInner1"></feColorMatrix>
</filter>
</defs>
<g id="钟祥大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.5">
<g id="矩形备份-58" transform="translate(-680.000000, -750.000000)">
<use fill="#0B2949" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

82
project/dvui/layout/AiDvPanel/asset/border1Title.svg Normal file
View File

@@ -0,0 +1,82 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="166px" height="48px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 8</title>
<defs>
<polygon id="path-1" points="1 0 165 0 165 31 155 40 11 40 1 31"></polygon>
<filter x="-4.6%" y="-18.8%" width="109.1%" height="137.5%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="5" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
<feGaussianBlur stdDeviation="5" in="shadowSpreadInner1" result="shadowBlurInner1"></feGaussianBlur>
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0.0340090302 0 0 0 0 0.105477684 0 0 0 0 0.340155118 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<polygon id="path-3" points="72 4 94 4 98 0 68 0"></polygon>
<filter x="-20.0%" y="-150.0%" width="140.0%" height="400.0%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.607194757 0 0 0 0 0.291006098 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<filter x="-20.0%" y="-150.0%" width="140.0%" height="400.0%" filterUnits="objectBoundingBox" id="filter-5">
<feGaussianBlur stdDeviation="2" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.97961238 0 0 0 0 0.9078125 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<polygon id="path-6" points="76 38 90 38 92 40 74 40"></polygon>
<filter x="-33.3%" y="-300.0%" width="166.7%" height="700.0%" filterUnits="objectBoundingBox" id="filter-7">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.607194757 0 0 0 0 0.291006098 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<filter x="-33.3%" y="-300.0%" width="166.7%" height="700.0%" filterUnits="objectBoundingBox" id="filter-8">
<feGaussianBlur stdDeviation="2" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.97961238 0 0 0 0 0.9078125 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
</defs>
<g id="钟祥大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="画板" transform="translate(-878.000000, -726.000000)">
<g id="编组-8" transform="translate(878.000000, 730.000000)">
<g id="矩形">
<use fill-opacity="0.8" fill="#0B2949" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
</g>
<path d="M3,23 L1,20 L1,12.333 L0,11 L0,0 L30,0 L27,3 L17,3 L17,2 L11,2 L10,3 L3,3 L3,10 L5,10 L5,12 L3,12 L3,14 L5,14 L5,16 L3,16 L3,18 L5,18 L5,20 L3,20 L3,23 Z" id="形状结合" fill="#2B6EFF" fill-rule="nonzero"></path>
<path d="M139,23 L137,20 L137,12.333 L136,11 L136,0 L166,0 L163,3 L153,3 L153,2 L147,2 L146,3 L139,3 L139,10 L141,10 L141,12 L139,12 L139,14 L141,14 L141,16 L139,16 L139,18 L141,18 L141,20 L139,20 L139,23 Z" id="形状结合备份" fill="#2B6EFF" fill-rule="nonzero" transform="translate(151.000000, 11.500000) scale(-1, 1) translate(-151.000000, -11.500000) "></path>
<polygon id="矩形" fill="#51AAFF" points="38 0 42 0 40 2 36 2"></polygon>
<polygon id="矩形备份-74" fill="#51AAFF" transform="translate(127.000000, 1.000000) scale(-1, 1) translate(-127.000000, -1.000000) " points="126 0 130 0 128 2 124 2"></polygon>
<polygon id="矩形备份-64" fill="#51AAFF" points="32 0 36 0 34 2 30 2"></polygon>
<polygon id="矩形备份-75" fill="#51AAFF" transform="translate(121.000000, 1.000000) scale(-1, 1) translate(-121.000000, -1.000000) " points="120 0 124 0 122 2 118 2"></polygon>
<polygon id="矩形备份-61" fill="#51AAFF" points="44 0 48 0 46 2 42 2"></polygon>
<polygon id="矩形备份-76" fill="#51AAFF" transform="translate(133.000000, 1.000000) scale(-1, 1) translate(-133.000000, -1.000000) " points="132 0 136 0 134 2 130 2"></polygon>
<polygon id="矩形备份-62" fill="#2B6EFF" fill-rule="nonzero" points="50 0 66 0 69 3 47 3"></polygon>
<polygon id="矩形备份-73" fill="#2B6EFF" fill-rule="nonzero" points="100 0 116 0 119 3 97 3"></polygon>
<g id="矩形备份-63">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<use fill="#FFC143" fill-rule="evenodd" xlink:href="#path-3"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-3"></use>
</g>
<polygon id="矩形备份-68" fill="#2B6EFF" points="28 37 39 37 39 40 25 40"></polygon>
<polygon id="矩形备份-79" fill="#2B6EFF" transform="translate(134.000000, 38.500000) scale(-1, 1) translate(-134.000000, -38.500000) " points="130 37 141 37 141 40 127 40"></polygon>
<polygon id="矩形备份-70" fill="#2B6EFF" transform="translate(56.500000, 38.500000) scale(-1, -1) translate(-56.500000, -38.500000) " points="56 37 60 37 57 40 53 40"></polygon>
<polygon id="矩形备份-81" fill="#2B6EFF" transform="translate(95.500000, 38.500000) scale(1, -1) translate(-95.500000, -38.500000) " points="95 37 99 37 96 40 92 40"></polygon>
<polygon id="矩形备份-71" fill="#2B6EFF" transform="translate(63.500000, 38.500000) scale(-1, -1) translate(-63.500000, -38.500000) " points="63 37 67 37 64 40 60 40"></polygon>
<polygon id="矩形备份-82" fill="#2B6EFF" transform="translate(102.500000, 38.500000) scale(1, -1) translate(-102.500000, -38.500000) " points="102 37 106 37 103 40 99 40"></polygon>
<polygon id="矩形备份-72" fill="#2B6EFF" transform="translate(70.500000, 38.500000) scale(-1, -1) translate(-70.500000, -38.500000) " points="70 37 74 37 71 40 67 40"></polygon>
<polygon id="矩形备份-83" fill="#2B6EFF" transform="translate(109.500000, 38.500000) scale(1, -1) translate(-109.500000, -38.500000) " points="109 37 113 37 110 40 106 40"></polygon>
<polygon id="矩形备份-65" fill="#2B6EFF" fill-rule="nonzero" points="4 32 10 37 16 37 18 40 10 40 1 32 1 28 0 26.6037002 0 23 4 28"></polygon>
<polygon id="矩形备份-77" fill="#2B6EFF" fill-rule="nonzero" transform="translate(157.000000, 31.500000) scale(-1, 1) translate(-157.000000, -31.500000) " points="152 32 158 37 164 37 166 40 158 40 149 32 149 28 148 26.6037002 148 23 152 28"></polygon>
<rect id="矩形" fill="#2B6EFF" x="16" y="39" width="20" height="1"></rect>
<rect id="矩形备份-78" fill="#2B6EFF" transform="translate(140.000000, 39.500000) scale(-1, 1) translate(-140.000000, -39.500000) " x="130" y="39" width="20" height="1"></rect>
<polygon id="矩形备份-69" fill="#2B6EFF" points="38 39 51 39 50 40 38 40"></polygon>
<polygon id="矩形备份-80" fill="#2B6EFF" transform="translate(121.500000, 39.500000) scale(-1, 1) translate(-121.500000, -39.500000) " points="115 39 128 39 127 40 115 40"></polygon>
<g id="矩形">
<use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
<use fill="#FFC143" fill-rule="evenodd" xlink:href="#path-6"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-6"></use>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
project/dvui/layout/AiDvPanel/asset/border2Bottom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

34
project/dvui/layout/AiDvPanel/asset/border2Title.svg Normal file
View File

@@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="580px" height="40px" viewBox="0 0 580 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>矩形</title>
<defs>
<rect id="path-1" x="40" y="740" width="580" height="40"></rect>
<pattern id="pattern-2" width="12.0397351" height="12.0397351" x="27.9602649" y="727.960265" patternUnits="userSpaceOnUse">
<use xlink:href="#image-3" transform="scale(0.250827815,0.250827815)"></use>
</pattern>
<image id="image-3" width="48" height="48" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAMKADAAQAAAABAAAAMAAAAADbN2wMAAABX0lEQVRoBe3Y7Q2CMBAGYGu3gOgOJrAQcRAHUXcwrsEcrFH7agpB+ex5cJfQH9ISvfO5xkjP5Hnudn445+5lWZ4xxZo4TJZlV2NMEeJwxbdpml6QxCc7JUlyqKrqGZJSroiDeIjLGd/6JEfuJJzx7VKV4kJYbK9mxBugGVEDtCJaAI2IH4A2RCdAE6IXoAUxCNCAGAVIR0wCSEZMBkhFzAJIRMwGSENEASQhogFSECSABAQZsDYCAIMvQR1rHYqs7x7ckJwKwOfXQKAr8dDYjQhn7D0q5xcF+jiYYk0cDv0l9IFCHM74W18oVLnrusRvYusLdVX++x7nTtR/ZJxJAOKKXwM4k4Qd4UC0ABoRPwBtiE6AJkQvQAtiEKABMQqQjpgEkIyYDJCKmAWQiJgNkIaIAkhCRAOkIEgACQgyYG0EAP84yLM976NAGH2P4ltf6FOf5rWvUrjfvCt+9h3/BX5SBuUP9sYWAAAAAElFTkSuQmCC"></image>
<filter x="-0.3%" y="-5.0%" width="100.7%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="4" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0.121683836 0 0 0 0 0.302967066 0 0 0 0 0.653362772 0 0 0 0.504234047 0" type="matrix" in="shadowInnerInner1" result="shadowMatrixInner1"></feColorMatrix>
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner2"></feOffset>
<feComposite in="shadowOffsetInner2" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner2"></feComposite>
<feColorMatrix values="0 0 0 0 0.333333333 0 0 0 0 0.476619275 0 0 0 0 0.862745098 0 0 0 1 0" type="matrix" in="shadowInnerInner2" result="shadowMatrixInner2"></feColorMatrix>
<feOffset dx="0" dy="-2" in="SourceAlpha" result="shadowOffsetInner3"></feOffset>
<feComposite in="shadowOffsetInner3" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner3"></feComposite>
<feColorMatrix values="0 0 0 0 0.22745098 0 0 0 0 0.344729535 0 0 0 0 0.588235294 0 0 0 0.250355114 0" type="matrix" in="shadowInnerInner3" result="shadowMatrixInner3"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixInner1"></feMergeNode>
<feMergeNode in="shadowMatrixInner2"></feMergeNode>
<feMergeNode in="shadowMatrixInner3"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="钟祥大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="矩形" transform="translate(-40.000000, -740.000000)">
<use fill-opacity="0.2" fill="#004CA0" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill-opacity="0.5" fill="url(#pattern-2)" fill-rule="evenodd" style="mix-blend-mode: multiply;" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-1"></use>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
project/dvui/layout/AiDvPanel/asset/border3Title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

21
project/dvui/layout/AiDvPanel/asset/corner.svg Normal file
View File

@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>路径备份</title>
<defs>
<polygon id="path-1" points="1826 14 1826 15 1821 15 1821 20 1820 20 1820 14"></polygon>
<filter x="-150.0%" y="-150.0%" width="400.0%" height="400.0%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.088934077 0 0 0 0 0.269903162 0 0 0 0 0.86962183 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="头部导航备份" transform="translate(-1814.000000, -8.000000)" fill-rule="nonzero">
<g id="路径备份" transform="translate(1823.000000, 17.000000) scale(-1, 1) translate(-1823.000000, -17.000000) ">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#E8F9FF" xlink:href="#path-1"></use>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

21
project/dvui/layout/AiDvPanel/asset/sanjiaoxing.svg Normal file
View File

@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="26px" height="36px" viewBox="0 0 26 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>矩形</title>
<defs>
<polygon id="path-1" points="606 756 610 760 606 764"></polygon>
<filter x="-412.5%" y="-259.3%" width="956.1%" height="618.6%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="1.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.088934077 0 0 0 0 0.269903162 0 0 0 0 0.86962183 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="钟祥大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="画板" transform="translate(-595.000000, -742.000000)" fill-rule="nonzero">
<g id="矩形" transform="translate(608.000000, 760.000000) scale(-1, 1) translate(-608.000000, -760.000000) ">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#E8F9FF" xlink:href="#path-1"></use>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

59
project/dvui/layout/AiDvPanel/asset/titleBg.svg Normal file
View File

@@ -0,0 +1,59 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="528px" height="41px" viewBox="0 0 528 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 2备份</title>
<defs>
<linearGradient x1="-1.11022302e-14%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
<stop stop-color="#0085FF" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#0085FF" stop-opacity="0.502840909" offset="100%"></stop>
</linearGradient>
<polygon id="path-2" points="8 7 0 14 0 0"></polygon>
<filter x="-150.0%" y="-85.7%" width="400.0%" height="271.4%" filterUnits="objectBoundingBox" id="filter-3">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.760001846 0 0 0 0 0.291006098 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<filter x="-125.0%" y="-71.4%" width="350.0%" height="242.9%" filterUnits="objectBoundingBox" id="filter-4">
<feGaussianBlur stdDeviation="2" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.97961238 0 0 0 0 0.9078125 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<polygon id="path-5" points="16 7 8 14 8 0"></polygon>
<filter x="-150.0%" y="-85.7%" width="400.0%" height="271.4%" filterUnits="objectBoundingBox" id="filter-6">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.760001846 0 0 0 0 0.291006098 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<filter x="-125.0%" y="-71.4%" width="350.0%" height="242.9%" filterUnits="objectBoundingBox" id="filter-7">
<feGaussianBlur stdDeviation="2" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.97961238 0 0 0 0 0.9078125 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<linearGradient x1="-1.11022302e-14%" y1="50%" x2="100%" y2="50%" id="linearGradient-8">
<stop stop-color="#0085FF" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#0085FF" stop-opacity="0.502840909" offset="100%"></stop>
</linearGradient>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="饼图" transform="translate(-32.000000, -121.000000)">
<g id="编组-2备份" transform="translate(40.000000, 129.000000)">
<polygon id="矩形" fill="url(#linearGradient-1)" points="1 9 273 9 255 27 1 27"></polygon>
<g id="三角形" opacity="0.300000012">
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
<use fill="#FFC143" fill-rule="evenodd" xlink:href="#path-2"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
</g>
<g id="三角形备份">
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
<use fill="#FFC143" fill-rule="evenodd" xlink:href="#path-5"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-5"></use>
</g>
<polygon id="矩形" fill="#0085FF" opacity="0.25" points="278 13 520 13 520 21 270 21"></polygon>
<polygon id="矩形" fill="#0085FF" opacity="0.100000001" points="270 21 520 21 520 29 262 29"></polygon>
<polygon id="矩形" fill="url(#linearGradient-8)" points="278 13 398 13 390 21 270 21"></polygon>
<polygon id="路径-3" fill="#0085FF" fill-rule="nonzero" opacity="0.5" points="520 11 520 13 278 13 258 33 1 33 1 31 257.17 31 277.18 11"></polygon>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

42
project/dvui/layout/AiDvPanel/borders/border0.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<section class="border0">
<div class="title">
<slot v-if="$slots.title" name="title"/>
<b v-else v-text="title"/>
</div>
<div class="slot">
<slot />
</div>
</section>
</template>
<script>
export default {
name: "border0",
props: {title: String}
}
</script>
<style lang="scss" scoped>
.border0 {
height: 100%;
.title {
padding-left: 30px;
background-image: url("../asset/titleBg.svg");
background-repeat: no-repeat;
height: 41px;
margin-bottom: 10px;
& > b {
font-size: 24px;
color: #fff;
line-height: 32px;
letter-spacing: 2px;
}
}
.slot {
height: calc(100% - 51px);
}
}
</style>

65
project/dvui/layout/AiDvPanel/borders/border1.vue Normal file
View File

@@ -0,0 +1,65 @@
<template>
<section class="border1">
<dv-border-box1 :color="['#2B6EFF']">
<div class="bg">
<div class="header" v-text="title"/>
<div class="slot">
<slot/>
</div>
</div>
</dv-border-box1>
</section>
</template>
<script>
import {borderBox1} from '@jiaminghi/data-view'
import Vue from "vue";
Vue.use(borderBox1)
export default {
name: "border1",
props: {title: String}
}
</script>
<style lang="scss" scoped>
.border1 {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
.bg {
position: relative;
margin: 15px 20px;
background-image: url("../asset/border1Bg.svg");
background-size: 100% calc(100%);
background-repeat: no-repeat;
padding: 30px 20px 0 20px;
box-sizing: border-box;
height: calc(100% - 40px);
.header {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
height: 48px;
min-width: 166px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 16px;
background-image: url("../asset/border1Title.svg");
background-size: 100%;
background-repeat: no-repeat;
}
}
.slot {
height: calc(100% - 20px);
}
}
</style>

110
project/dvui/layout/AiDvPanel/borders/border2.vue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<section class="border2">
<div class="corner left-bottom"></div>
<div class="corner right-bottom"></div>
<div class="bg">
<div class="header">
<img src="../asset/sanjiaoxing.svg" />
<h2>{{ title }}</h2>
<img class="header-right" src="../asset/sanjiaoxing.svg" />
</div>
<div class="slot">
<slot/>
</div>
</div>
</section>
</template>
<script>
export default {
name: 'border2',
props: {title: String}
}
</script>
<style lang="scss" scoped>
.border2 {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(7, 29, 62, 0.2) 0%, rgba(15, 69, 124, 0.2) 100%);
* {
box-sizing: border-box;
}
.corner {
height: 18px;
width: 18px;
position: absolute;
display: block;
background-image: url(../asset/corner.svg);
background-repeat: no-repeat;
}
.corner.left-top {
left: -6px;
top: -6px;
transform: rotateY(180deg);
}
.corner.right-top {
right: -6px;
top: -6px;
}
.corner.left-bottom {
left: -6px;
bottom: -6px;
transform: rotateX(180deg) rotateY(180deg);
}
.corner.right-bottom {
right: -6px;
bottom: -6px;
transform: rotateX(180deg);
}
.bg {
position: relative;
height: 100%;
background-repeat: no-repeat;
box-sizing: border-box;
&:after {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 28px;
background-size: 100% 100%;
content: ' ';
}
.header {
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
height: 40px;
line-height: 40px;
text-align: center;
background: url(../asset/border2Title.svg) no-repeat;
background-size: cover;
.header-right {
position: relative;
transform-origin: center;
transform: rotate(180deg);
}
h2 {
font-size: 18px;
color: #fff;
font-weight: normal;
}
}
.slot {
height: calc(100% - 40px);
padding: 0 20px 20px;
}
}
}
</style>

140
project/dvui/layout/AiDvPanel/borders/border3.vue Normal file
View File

@@ -0,0 +1,140 @@
<template>
<section class="border3">
<div class="bg">
<div class="bg-wrapper"></div>
<div class="header">
<div class="header-border">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
<h2>{{ title }}</h2>
<div class="header-border">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
</div>
<div class="bottom">
<div class="bottom-left">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
<div class="bottom-right">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
</div>
<div class="slot">
<slot/>
</div>
</div>
</section>
</template>
<script>
export default {
name: 'border3',
props: {title: String}
}
</script>
<style lang="scss" scoped>
.border3 {
width: 100%;
height: 100%;
box-sizing: border-box;
* {
box-sizing: border-box;
}
.bg {
position: relative;
height: 100%;
.bg-wrapper {
position: absolute;
top: 12px;
width: 100%;
height: calc(100% - 12px);
background: rgba(11, 24, 73, 0.3);
}
.bottom-left, .bottom-right, .header-border {
display: flex;
align-items: center;
position: relative;
justify-content: space-between;
width: 24%;
height: 1px;
.point {
width: 4px;
height: 1px;
background: #FFCD68;
}
}
.bottom {
display: flex;
justify-content: space-between;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 1px;
background: rgba(0, 133, 255, 0.5);
}
.header {
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
height: 24px;
line-height: 24px;
text-align: center;
.header-border {
position: relative;
display: flex;
align-items: center;
width: 30%;
height: 1px;
background: rgba(0, 133, 255, 0.5);
}
h2 {
position: relative;
font-size: 18px;
color: #fff;
letter-spacing: 2px;
&::after {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 12px;
transform: translate(-50%, -50%);
content: ' ';
background: url(../asset/border3Title.png) no-repeat;
background-size: 100% 100%;
opacity: 0.8;
}
}
}
.slot {
position: relative;
z-index: 1;
height: calc(100% - 34px);
padding: 0;
}
}
}
</style>

45
project/dvui/layout/AiDvPanel/borders/border4.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<section class="border4">
<div class="slot">
<slot/>
</div>
<div class="title">{{ title }}</div>
</section>
</template>
<script>
export default {
name: 'border4',
props: {title: String}
}
</script>
<style lang="scss" scoped>
.border4 {
width: 100%;
height: 100%;
background: rgba(33, 73, 157, 0.15);
border-radius: 6px;
border: 1px solid #274A7E;
box-sizing: border-box;
overflow: hidden;
.slot {
width: 100%;
height: calc(100% - 48px);
}
.title {
height: 48px;
line-height: 48px;
padding: 0 10px;
color: #82C5FF;
font-size: 16px;
text-align: center;
}
* {
box-sizing: border-box;
}
}
</style>