This commit is contained in:
yanran200730
2022-03-25 11:30:25 +08:00
104 changed files with 7124 additions and 139 deletions

145
project/dvui/AppDVDemo.vue Normal file
View File

@@ -0,0 +1,145 @@
<template>
<section class="AppDVDemo">
<ai-list>
<ai-title slot="title" title="数据大屏草稿板" isShowBottomBorder/>
<template #content>
<div class="showPanel">
<ai-dv-wrapper :views="views" v-model="active">
<AiMonitor style="width: 600px; height: 300px" type="slw"
src="http://120.221.159.18:8000/flv/MT_20220319123025570adZa68OLywxi?encrypt=m3sbNQg2wFw9HdZn&timestamp=1647992818471"></AiMonitor>
</ai-dv-wrapper>
</div>
</template>
</ai-list>
</section>
</template>
<script>
import AiDvWrapper from "./layout/AiDvWrapper/AiDvWrapper";
import ops from './components/AiEchart/template/pie/pieChart2'
import AiDvPanel from "./layout/AiDvPanel/AiDvPanel";
import AiDvDisplay from "./layout/AiDvDisplay/AiDvDisplay";
import AiDvSummary from "./layout/AiDvSummary/AiDvSummary";
import AiMonitor from "./components/AiMonitor/AiMonitor";
export default {
name: "AppDVDemo",
label: "数据大屏草稿板",
components: {AiMonitor, AiDvPanel, AiDvWrapper, AiDvDisplay, AiDvSummary},
data() {
return {
ops,
active: '',
views: [
{label: '标准大屏', id: '0'},
{label: '当前大屏', id: '1'},
{label: '平安乡村', id: '2'},
{label: '人口数据', id: '3'},
{label: '人口数据', id: '4'},
{label: '人口数据', id: '5'},
{label: '宅基地', id: '6'},
],
list: [
{name: '阿斯达', v1: 23, v2: 33},
{name: '水电费', v1: 12, v2: 34},
{name: '凡哥', v1: 67, v2: 25},
{name: '党费', v1: 98, v2: 85},
{name: '阿萨德', v1: 98, v2: 85},
{name: '电饭锅', v1: 98, v2: 85},
{name: '户籍科', v1: 98, v2: 85},
],
data: [
{
"key": "阿斯达",
"value": '22',
"percentage": 33,
text: '同比上月'
},
{
"key": "阿斯达",
"value": '22',
"percentage": -33,
text: '同比上月'
}
],
value: [
{
"key": "宅基地 ",
"value": 1252292,
"value1": 12592,
"value2": 12592,
"value3": 12592,
"value4": 12592
},
{
"key": "人数",
"value": 12592,
"value1": 12592,
"value2": 12592,
"value3": 12592,
"value4": 12592
},
{
"key": "户数 ",
"value": 12592,
"value1": 12592,
"value2": 12592,
"value3": 12592,
"value4": 12592
},
{
"key": "村社区",
"value": 12592,
"value1": 12592,
"value2": 12592,
"value3": 12592,
"value4": 12592
}
],
markers: []
}
},
methods: {
getMarkers() {
this.$request.post('/app/appcommunitybuildinginfo/listByBuildingAndHomestead', null, {
params: {current: 1, size: 1000000},
withoutToken: true
}).then(res => {
if (res?.data) {
this.markers = res.data.map(e => ({
...e,
icon: "https://cdn.cunwuyun.cn/dvcp/dv/monitor.svg",
label: e.communityName
}))
}
})
}
},
created() {
// this.getMarkers()
setTimeout(() => {
this.list = this.list.map(e => ({name: e.name, '电费': e.v1, '水费': e.v2 * 2}))
}, 2000)
},
mounted() {
this.$initWxOpenData()
}
}
</script>
<style lang="scss" scoped>
@import "./lib/animation";
.AppDVDemo {
height: 100%;
.showPanel {
height: 600px;
}
.AiDvPanel {
width: 600px;
}
}
</style>

View File

@@ -0,0 +1,91 @@
export default {
legend: {
right: 0,
itemHeight: 5,
itemWidth: 16,
textStyle: { color: '#fff' }
},
yAxis: {
nameGap: 23,
minInterval: 1,
splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
axisLabel: { color: '#fff' },
axisPointer: { show: false }
},
axisPointer: {
type: 'shadow',
triggerTooltip: false,
shadowStyle: { color: 'rgba(46, 153, 255, .2)' }
},
color: [
{
type: 'linear',
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(66, 187, 255, 1)' },
{ offset: 1, color: 'rgba(37, 143, 255, 0.2)' }
]
},
{
type: 'linear',
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(66, 255, 254, 1)' },
{ offset: 1, color: 'rgba(37, 255, 246, 0.2)' }
]
},
{
type: 'linear',
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(97, 253, 185, 1)' },
{ offset: 1, color: 'rgba(97, 253, 185, 0.2)' }
]
},
{
type: 'linear',
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(253, 108, 57, 1)' },
{ offset: 1, color: 'rgba(253, 108, 57, 0.2)' }
]
},
{
type: 'linear',
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(248, 187, 25, 1)' },
{ offset: 1, color: 'rgba(55, 39, 5, 1)' }
]
}
],
daemon: {
type: 'bar',
label: {
show: true,
position: 'top',
color: '#fff',
formatter: e => {
return e.data[e.seriesName] || ''
}
},
barWidth: 16,
barCategoryGap: 40,
itemStyle: {}
}
}

View File

@@ -0,0 +1,24 @@
export default {
legend: {
right: 0, itemGap: 16,
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
itemWidth: 16, itemHeight: 5
},
grid: {
left: 50, right: 0
},
tooltip: {
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
textStyle: {color: '#fff'}
},
yAxis: {
nameGap: 23, minInterval: 1,
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
axisLabel: {color: '#fff'}, axisPointer: {show: false}
},
axisPointer: {
type: 'shadow', show: true,
shadowStyle: {color: 'rgba(46, 153, 255, .2)'}
},
daemon: {type: 'bar', barWidth: 2, barGap: 4}
}

View File

@@ -0,0 +1,33 @@
export default {
legend: {show: false},
yAxis: {
nameGap: 23, minInterval: 1,
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
axisLabel: {color: '#fff'}, axisPointer: {show: false}
},
axisPointer: {
type: 'none', show: true, triggerTooltip: false,
},
daemon: {
type: 'bar', label: {show: true, position: 'insideBottom', color: '#fff'},
barWidth: 24,
showBackground: true,
backgroundStyle: {
color: 'rgba(123, 165, 255, .2)'
},
itemStyle: {
color: {
type: 'linear', x: 0, x2: 0, y: 0, y2: 1,
colorStops: [{offset: 0, color: '#42BBFF'}, {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}]
}
},
emphasis: {
itemStyle: {
color: {
type: 'linear', x: 0, x2: 0, y: 0, y2: 1,
colorStops: [{offset: 0, color: '#42FFFE'}, {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}]
}
}
}
}
}

View File

@@ -0,0 +1,23 @@
export default {
legend: {
right: 0, itemGap: 16,
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
itemWidth: 16, itemHeight: 5
},
grid: {
left: 50, right: 0
},
tooltip: {
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
textStyle: {color: '#fff'}
},
yAxis: {
nameGap: 23, minInterval: 1,
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
axisLabel: {color: '#fff'}, axisPointer: {show: false}
},
axisPointer: {
type: 'none', show: true, triggerTooltip: false,
},
daemon: {type: 'bar', barWidth: 12, stack: 'stack'}
}

View File

@@ -0,0 +1,45 @@
export default {
legend: {show: false},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'},
axisPointer: {
type: 'shadow', shadowStyle: {color: 'rgba(46, 153, 255, .2)'},
label: {show: true, backgroundColor: 'transparent', fontSize: 14, margin: 1, color: '#28FBFF'}
}
},
yAxis: {
type: 'category',
axisLabel: {color: '#fff', fontSize: 14},
axisTick: {show: false},
axisLine: {show: false},
},
xAxis: {
nameGap: 23, minInterval: 1,
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
axisLabel: {color: '#fff', fontSize: 14},
},
daemon: {
type: 'bar', barWidth: 10, barGap: '40%',
label: {show: true, position: 'insideRight', color: '#fff', fontSize: 14},
showBackground: true,
backgroundStyle: {
color: 'rgba(123, 165, 255, .2)'
},
itemStyle: {
color: {
type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
colorStops: [{offset: 0, color: 'rgba(37, 143, 255,.5)'}, {offset: 1, color: 'rgba(43, 199, 255, 1)'}]
}
},
emphasis: {
label: {color: '#28FBFF', position: 'right'},
itemStyle: {
color: {
type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
colorStops: [{offset: 0, color: 'rgba(37, 255, 246, 0.5)'}, {offset: 1, color: '#28FBFF'}]
}
}
}
}
}

View File

@@ -0,0 +1,36 @@
import tools from "../tools";
export default {
legend: {
right: 0, itemGap: 16,
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
itemWidth: 16, itemHeight: 5
},
grid: {
left: 50, right: 0
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'}
},
yAxis: {
type: 'category',
axisLabel: {color: '#fff', fontSize: 14},
axisLine: {lineStyle: {color: 'rgba(255,255,255,.5)'}},
axisPointer: {show: false},
},
xAxis: {
nameGap: 23, minInterval: 1,
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
axisLabel: {color: '#fff', fontSize: 14},
},
daemon: {
type: 'bar', barWidth: 10,
itemStyle: {
color: ({color}) => ({
type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
colorStops: [{offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)}, {offset: 1, color}]
})
},
}
}

View File

@@ -0,0 +1,29 @@
export default {
legend: {
right: 0, itemGap: 16,
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
itemWidth: 16, itemHeight: 5
},
grid: {
left: 80, right: 0
},
tooltip: {
backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'},
},
yAxis: {
type: 'category',
axisLabel: {color: '#fff', fontSize: 14, margin: 23},
axisTick: {show: false},
axisLine: {show: false},
},
xAxis: {
nameGap: 23, minInterval: 1,
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
axisLabel: {color: '#fff', fontSize: 14},
},
daemon: {
type: 'bar', barWidth: 10, barGap: '40%', stack: 'stack',
showBackground: true,
backgroundStyle: {color: 'rgba(123, 165, 255, .2)'}
}
}

View File

@@ -0,0 +1,40 @@
import tools from '../tools';
export default {
legend: { show: false },
grid: {
left: 50,
right: 0
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(14, 51, 111, 0.9)',
borderColor: '#1A6ABC',
textStyle: { color: '#fff' },
axisPointer: { type: 'cross' }
},
yAxis: {
nameGap: 23,
minInterval: 1,
splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
axisLabel: { color: '#fff' },
axisPointer: { snap: true }
},
daemon: (color) => ({
showSymbol: false,
lineStyle: { shadowBlur: 4, shadowOffsetY: 2 },
areaStyle: {
color: {
type: 'linear',
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{ offset: 0, color: tools.$colorUtils.Hex2RGBA(color, 0.5) },
{ offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0.5) }
]
}
}
})
};

View File

@@ -0,0 +1,27 @@
import tools from "../tools";
export default {
legend: {
right: 0, itemGap: 16,
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
},
grid: {
left: 50, right: 0
},
tooltip: {
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
textStyle: {color: '#fff'}
},
daemon: color => ({
showSymbol: false,
lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
areaStyle: {
color: {
type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [
{offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)},
{offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)},
]
}
}
})
}

View File

@@ -0,0 +1,16 @@
export default {
legend: {
right: 0, itemGap: 16,
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
},
grid: {
left: 50, right: 0
},
tooltip: {
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
textStyle: {color: '#fff'}
},
daemon: {
lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
}
}

View File

@@ -0,0 +1,19 @@
export default {
legend: {
right: 0, itemGap: 16,
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
},
grid: {
left: 50, right: 0
},
tooltip: {
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
textStyle: {color: '#fff'}
},
daemon: {
lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
emphasis: {
focus: 'self'
}
}
}

View File

@@ -0,0 +1,31 @@
import tools from "../tools";
export default {
legend: {show: false},
grid: {
left: 50, right: 0
},
tooltip: {
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
textStyle: {color: '#fff'},
axisPointer: {type: 'cross'}
},
yAxis: {
nameGap: 23, minInterval: 1,
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
axisLabel: {color: '#fff'},
axisPointer: {snap: true}
},
daemon: color=> ({
showSymbol: false, smooth: true,
lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
areaStyle: {
color: {
type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [
{offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)},
{offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)},
]
}
}
})
}

View File

@@ -0,0 +1,96 @@
export default {
legend: {
bottom: 0,
itemGap: 14,
itemWidth: 16,
itemHeight: 5,
textStyle: {color: "#fff", fontSize: 14}
},
grid: {
height: 260
},
xAxis: {show: false},
yAxis: {show: false},
tooltip: {
backgroundColor: "rgba(14, 51, 111, 0.9)",
borderColor: "#1A6ABC",
textStyle: {color: "#fff"}
},
series: {
type: "pie",
minShowLabelAngle: 10,
radius: [70, 81],
itemStyle: {
borderColor: "#fff",
borderWidth: 2
},
label: {
color: "#A8D7F3",
fontSize: 14,
formatter: "{name|{b}}\n{v|{d}%}",
minMargin: 5,
edgeDistance: 10,
lineHeight: 22,
rich: {
v: {
color: "#fff"
}
}
},
labelLine: {},
labelLayout: function (params) {
let points = params.labelLinePoints,
isLeft = points[2][0] < points[1][0]
points[2][0] =
points[2][0] + (params.labelRect.width + 4) * (isLeft ? -1 : 1)
return {
labelLinePoints: points
}
}
},
render: (h, params) => {
const formatNum = num => {
if (num >= 10000000) {
return num / 10000000 + "千万"
}
if (num >= 10000) {
return num / 10000 + "万"
}
return parseFloat(num.toFixed(2))
}
let total = params.data.reduce((t, e) => {
return t + Number(Object.values(e)?.[1] || 0)
}, 0)
return h(
"div",
{
style: {
height: "162px",
width: "162px",
color: "#8BCCFF",
left: "50%",
top: "50%",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexDirection: "column",
position: "absolute",
transform: "translate(-50%,-50%)",
backgroundImage: `url('https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie2Circle.png')`,
backgroundPosition: "center"
}
},
[
h(
"span",
{style: {fontSize: "28px", color: "#fff", fontFamily: "DIN"}},
formatNum(total)
),
h("span", null, "总量")
]
)
}
}

View File

@@ -0,0 +1,24 @@
export default {
$colorUtils: {
Hex2RGBA(color, alpha = 1) {
let hex = 0;
if (color.charAt(0) == "#") {
if (color.length == 4) {
//检测诸如#FFF简写格式
color = "#" + color.charAt(1).repeat(2) +
color.charAt(2).repeat(2) +
color.charAt(3).repeat(2);
}
hex = parseInt(color.slice(1), 16);
}
let r = hex >> 16 & 0xFF;
let g = hex >> 8 & 0xFF;
let b = hex & 0xFF;
return `rgba(${r},${g},${b},${alpha})`;
},
RGBtoHex(r, g, b) {
let hex = r << 16 | g << 8 | b;
return "#" + hex.toString(16);
}
}
}

View File

@@ -0,0 +1,48 @@
<template>
<section class="AiMonitor">
<template v-if="type=='cmcc'">
<iframe :src="src" allow="autoplay *; microphone *; fullscreen *" allowfullscreen allowtransparency
allowusermedia frameBorder="no"/>
</template>
<hikversion-monitor v-else-if="type=='hik'" :src="src"/>
<dhVideo v-else-if="type=='dahua'" :src="src"/>
<slwVideo v-else-if="type=='slw'" :src="src"/>
</section>
</template>
<script>
import HikversionMonitor from "./hikversionMonitor";
import dhVideo from "./dhVideo";
import slwVideo from "./slwVideo";
export default {
name: "AiMonitor",
components: {HikversionMonitor, dhVideo, slwVideo},
props: {
/**
* 视频源
*/
src: {default: ""},
/**
* 组件类型
* cmcc 中移物联,hik 海康威视
* @values cmcc,hik
*/
type: {default: "cmcc"},
}
}
</script>
<style lang="scss" scoped>
.AiMonitor {
width: 100%;
height: 100%;
min-width: 100px;
min-height: 60px;
iframe {
width: 100%;
height: 100%;
}
}
</style>

View File

@@ -0,0 +1,77 @@
<template>
<div class="dh-video">
<video :id="id" autoplay class="video-js vjs-default-skin" style="width: 100%; height: 100%;" controls>
<source :src="src">
</video>
</div>
</template>
<script>
import videojs from 'video.js'
import 'videojs-contrib-hls'
import 'video.js/dist/video-js.css'
export default {
props: ['src'],
data () {
return {
id: `video-${new Date().getTime()}`
}
},
watch: {
src: {
handler(val) {
if (val) {
this.$nextTick(() => {
videojs(this.id, {
autoplay: true
}, function () { console.log('videojs播放器初始化成功') })
})
}
},
immediate: true,
deep: true
}
},
mounted () {
if (this.src) {
this.$nextTick(() => {
videojs(this.id, {
autoplay: true
}, function () { console.log('videojs播放器初始化成功') })
})
}
}
}
</script>
<style lang="scss" scoped>
.dh-video {
width: 100%;
height: 100%;
.video-js {
width: 100%!important;
height: 100%!important;
}
::v-deep .video-js {
width: 100%!important;
height: 100%!important;
.vjs-big-play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
& > div {
width: 100%!important;
height: 100%!important;
}
}
</style>

View File

@@ -0,0 +1,169 @@
<template>
<section class="hikversionMonitor">
<div id="monitorIns">
<el-link v-if="needSetupPlugin" href="https://cdn.cunwuyun.cn/wsr/lib/VideoWebPlugin.exe" type="primary">
请检查是否安装视频插件,如果没有请点击下载视频插件并安装
</el-link>
<div v-else>视频插件未启动正在尝试启动请稍候...</div>
</div>
</section>
</template>
<script>
export default {
name: "hikversionMonitor",
props: {
src: {default: ""},
list: {default: () => []}
},
data() {
return {
monitorIns: null,
initCount: 0
}
},
computed: {
needSetupPlugin() {
return this.initCount >= 3
}
},
methods: {
getMonitorWidth() {
let {width} = document.querySelector("#monitorIns")?.getBoundingClientRect()
return width
},
getMonitorHeight() {
let {height} = document.querySelector("#monitorIns")?.getBoundingClientRect()
return height
},
initSDK() {
this.$nextTick(() => {
let width = this.getMonitorWidth(), height = this.getMonitorHeight()
if (width) {
this.monitorIns = new WebControl({
szPluginContainer: "monitorIns", // 指定容器id
iServicePortStart: 15900, // 指定起止端口号,建议使用该值
iServicePortEnd: 15909,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
cbConnectSuccess: () => { // 创建WebControl实例成功
this.monitorIns.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
}).then(() => { // 启动插件服务成功
this.monitorIns.JS_CreateWnd("monitorIns", width, height).then(() => { //JS_CreateWnd创建视频播放窗口宽高可设定
this.monitorIns.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024
})
}).then((oData) => {
if (oData.responseMsg.data) {
let encrypt = new JSEncrypt();
encrypt.setPublicKey(oData.responseMsg.data);
let secret = encrypt.encrypt("JSqHo9JUgPLQxfCIjsmQ");
this.monitorIns.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey: "23335895", //API网关提供的appkey
secret, //API网关提供的secret
ip: "124.128.246.74", //API网关IP地址
playMode: 0, //初始播放模式0-预览1-回放
port: 1443, //端口
snapDir: ".", //抓图存储路径
videoDir: ".", //紧急录像或录像剪辑存储路径
layout: "1x1", //布局
enableHTTPS: 1, //是否启用HTTPS协议
encryptedFields: "secret", //加密字段
showToolbar: 1, //是否显示工具栏
showSmart: 1, //是否显示智能信息
buttonIDs: "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769" //自定义工具条按钮
})
}).then(() => {
this.monitorIns.JS_Resize(width, height); // 初始化后resize一次规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
this.startPreview()
})
}
})
});
}, (...args) => {
// 启动插件服务失败
console.log(args)
})
},
cbConnectError: () => {
this.monitorIns = null
WebControl.JS_WakeUp("VideoWebPlugin://");
this.initCount++
if (!this.needSetupPlugin) {
setTimeout(() => {
this.initSDK()
}, 3000)
}
}
})
}
})
},
startPreview() {
const layout = len =>
len <= 1 ? '1x1' :
len == 2 ? '1x2' :
len == 3 ? '1+2' :
len == 4 ? '2x2' :
len < 6 ? '1+5' :
len == 7 ? '3+4' :
len == 8 ? '1+7' :
len == 9 ? '3x3' :
len == 10 ? '1+9' :
len <= 16 ? '4x4' : '4x6'
let list = this.src?.split(",")
this.monitorIns?.JS_RequestInterface({
funcName: "setLayout",
argument: JSON.stringify({layout: layout(list.length)})
}).then(() => {
this.monitorIns?.JS_RequestInterface({
funcName: "startMultiPreviewByCameraIndexCode",
argument: JSON.stringify({
list: list.map((cameraIndexCode, i) => ({
cameraIndexCode, //监控点编号
streamMode: 0, //主子码流标识
transMode: 1, //传输协议
gpuMode: 0, //是否开启GPU硬解
wndId: i + 1 //可指定播放窗口
}))
})
})
})
},
},
watch: {
src(v) {
v && this.monitorIns?.JS_RequestInterface({funcName: "stopAllPreview"}).then(() => this.startPreview())
}
},
mounted() {
this.$injectLib("https://cdn.cunwuyun.cn/wsr/lib/jsencrypt.min.js")
this.$injectLib("https://cdn.cunwuyun.cn/wsr/lib/jsWebControl-1.0.0.min.js", () => {
this.initSDK()
})
},
beforeDestroy() {
this.monitorIns?.JS_DestroyWnd()
}
}
</script>
<style lang="scss" scoped>
.hikversionMonitor {
color: #fff;
height: 100%;
#monitorIns {
height: 100%;
background: #000;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>

View File

@@ -0,0 +1,90 @@
<template>
<div class="slw">
<iframe
v-if="isShow"
:id="id"
allow="autoplay *; microphone *; fullscreen *" allowfullscreen allowtransparency key="" allowusermedia frameBorder="no"
style="width: 100%; height: 100%;"
:src="`https://cdn.cunwuyun.cn/jssdk/slw/index.html?url=${src}`"></iframe>
</div>
</template>
<script>
export default {
props: ['src'],
name: 'slwVideo',
data () {
return {
isShow: true,
id: `video-${new Date().getTime()}`
}
},
watch: {
src: {
handler (val) {
if (val) {
this.isShow = false
this.$nextTick(() => {
this.isShow = true
})
}
},
immediate: true,
deep: true
}
},
mounted () {
window.addEventListener('message', e => {
if (e.data.type && e.data.name === 'fullscreen') {
this.requestFullScreen(document.getElementById(this.id))
}
if (!e.data.type && e.data.name === 'fullscreen') {
this.exitFullscreen()
}
}, false)
},
methods: {
exitFullscreen () {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
},
requestFullScreen (element) {
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== 'undefined') {
var wscript = new ActiveXObject('WScript.Shell')
if (wscript !== null) {
wscript.SendKeys('{F11}')
}
}
}
}
}
</script>
<style lang="scss" scoped>
.slw {
width: 100%;
height: 100%;
iframe {
border: none;
}
}
</style>

View File

@@ -0,0 +1,2 @@
# jessibuca-mobile-demo
jessibuca mobile demo

File diff suppressed because one or more lines are too long

Binary file not shown.

View File

@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
background-color: #000;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="index.js"></script>
<script>
var search = document.location.search
if (!search && search.split('url=').length < 2) {
} else {
var url = search.split('url=')[1]
var player = new window.Jessibuca({
container: document.getElementById("container"),
decoder: "./index.js",
isResize: false,
supportDblclickFullscreen: true,
forceNoOffscreen: true,
keepScreenOn: true,
isNotMute: true,
loadingText: '加载中...',
operateBtns: {
fullscreen: true,
screenshot: true,
play: true,
audio: true,
record: true
}
});
if (player.hasLoaded()) {
player.play(url)
} else {
player.on('load', function () {
player.play(url)
})
}
player.on('fullscreen', function (e) {
window.parent.postMessage(e, '*')
})
}
</script>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,32 @@
<template>
<section class="AiDvBackground" :style="{opacity:alpha}">
<img class="bgImage" :src="src"/>
</section>
</template>
<script>
export default {
name: "AiDvBackground",
props: {
src: String,
alpha: {default: 1}
}
}
</script>
<style lang="scss" scoped>
.AiDvBackground {
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
pointer-events: none;
//z-index: -1;
.bgImage {
width: 100%;
height: 100%;
}
}
</style>

View File

@@ -0,0 +1,127 @@
<template>
<section class="AiDvDisplay">
<div class="display-top">
<img class="left" src="asset/display-icon.svg">
<h2>{{ title }}</h2>
<img class="right" src="asset/display-icon.svg">
</div>
<component class="background" :is="type"/>
<div class="displayPanel">
<div class="animation">
<component class="item" v-for="(op,i) in list" :key="i" :is="item" v-bind="op" :style="{transform:getPos(i)}"/>
</div>
</div>
</section>
</template>
<script>
import Display0 from './components/Display0'
import DisplayItem from "./components/displayItem";
export default {
name: 'AiDvDisplay',
components: {DisplayItem, Display0},
props: {
type: {default: 'display0'},
item: {default: 'DisplayItem'},
title: {
default: '数据统计'
},
list: {default: () => []},
},
methods: {
getPos(i) {
let unit = this.list.length > 0 ? 2 * Math.PI / this.list.length : 0,
corner = this.list.length > 0 ? 360 / this.list.length : 0
return `translateZ(${250 * Math.cos(unit * i)}px) translateX(${250 * Math.sin(unit * i)}px) rotateY(${corner * i}deg)`
}
}
}
</script>
<style lang="scss" scoped>
.AiDvDisplay {
position: relative;
width: 100%;
height: 100%;
.display-top {
position: relative;
width: 840px;
background-image: url(asset/display-top.svg);
background-size: 1420px 142px;
background-position: center;
text-align: center;
overflow: hidden;
.left {
position: absolute;
left: 280px;
top: 50%;
z-index: 1;
width: 35px;
height: 22px;
background-image: url(asset/display-icon.svg);
background-size: 100% 100%;
transform: translate(0, -50%);
}
.right {
position: absolute;
right: 280px;
top: 50%;
z-index: 1;
width: 35px;
height: 22px;
background-image: url(asset/display-icon.svg);
background-size: 100% 100%;
transform: translate(0, -50%) rotate(180deg);
transform-origin: center;
}
h2 {
line-height: 75px;
margin: 0;
font-size: 36px;
color: #FFFFFF;
text-shadow: 0px 4px 20px #345FFF;
background: linear-gradient(180deg, #FFFFFF 0%, #A1E4FF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.displayPanel {
position: absolute;
width: 160px;
height: 160px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 9;
.animation {
animation: rotate3D 30s infinite linear;
transform-style: preserve-3d;
&:hover {
animation-play-state: paused;
}
}
.item {
position: absolute;
}
}
}
@keyframes rotate3D {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
</style>

View File

@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="35px" height="22px" viewBox="0 0 35 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>形状结合</title>
<defs>
<path d="M1072,220 L1072,228 L1068,224 L1072,220 Z M1064,220 L1064,228 L1060,224 L1064,220 Z M1056,220 L1056,228 L1052,224 L1056,220 Z" id="path-1"></path>
<filter x="-60.0%" y="-150.0%" width="220.0%" height="400.0%" filterUnits="objectBoundingBox" id="filter-2">
<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="-50.0%" y="-125.0%" width="200.0%" height="350.0%" filterUnits="objectBoundingBox" id="filter-3">
<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(-1045.000000, -213.000000)">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FFC143" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1478px" height="142px" viewBox="0 0 1478 142" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 2</title>
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
<stop stop-color="#5A86FF" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#5AACFF" offset="36.7624563%"></stop>
<stop stop-color="#7EEFFF" offset="50.0376124%"></stop>
<stop stop-color="#5AACFF" offset="62.9709649%"></stop>
<stop stop-color="#5A86FF" offset="100%"></stop>
</linearGradient>
<path d="M547,0.25 C556.749607,0.25 565.858022,4.76380868 571.818048,12.456132 L572.118303,12.85 C577.460114,19.9724141 585.628339,24.4148226 594.493503,25.038944 L594.977736,25.069194 L800,39.9977736 L594.814342,27.814741 C585.045723,27.2819072 576.001062,22.5266807 570.024678,14.8021845 L569.718303,14.4 C564.430381,7.34943641 556.184331,3.14910303 547.389942,3.00389299 L547,3 C483.876874,3 434.876874,3 400,3 C365.099096,3 316.099096,3 253,3 C244.186796,3 235.797203,7.07663928 230.404401,14.0250247 L230.118303,14.4 C224.248419,22.2265123 215.269839,27.1053605 205.52688,27.7834215 L205.022264,27.814741 L0,39.9977736 L204.858871,25.069194 C213.748674,24.5842957 221.980256,20.260414 227.424142,13.235831 L227.718303,12.85 C233.568068,5.05031402 242.693181,0.406510872 252.423056,0.253884 L253,0.25 C316.068383,0.0833333333 365.068383,3.55271368e-15 400,3.55271368e-15 C434.846161,3.55271368e-15 483.846161,0.0833333333 547,0.25 Z" id="path-2"></path>
<filter x="-45.4%" y="-147.5%" width="190.9%" height="479.4%" filterUnits="objectBoundingBox" id="filter-3">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="8" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="20" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.254665854 0 0 0 0 0.715268342 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<linearGradient x1="0%" y1="49.1111111%" x2="100%" y2="50%" id="linearGradient-4">
<stop stop-color="#0085FF" stop-opacity="0.502840909" offset="0%"></stop>
<stop stop-color="#0085FF" stop-opacity="0" offset="100%"></stop>
</linearGradient>
</defs>
<g id="钟祥大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="公共招聘" transform="translate(-221.000000, -146.000000)">
<g id="编组-2" transform="translate(560.000000, 180.000000)">
<g id="路径-3备份" fill-rule="nonzero">
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
<use fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
</g>
<path d="M190.442478,46.7350415 L194.690265,47.0710935 L200,54 L195.752212,53.663948 L190.442478,46.7350415 Z M181.946903,46.0629376 L186.19469,46.3989895 L191.504425,53.3278961 L187.256637,52.9918441 L181.946903,46.0629376 Z M173.451327,45.3919885 L177.699115,45.7280404 L183.00885,52.656947 L178.761062,52.320895 L173.451327,45.3919885 Z M164.955752,44.7198845 L169.20354,45.0559365 L174.513274,51.984843 L170.265487,51.6487911 L164.955752,44.7198845 Z M156.460177,44.0489354 L160.707965,44.3849874 L166.017699,51.3138939 L161.769912,50.9778419 L156.460177,44.0489354 Z M147.964602,43.3768315 L152.212389,43.7128834 L157.522124,50.64179 L153.274336,50.305738 L147.964602,43.3768315 Z M139.469027,42.7047275 L143.716814,43.0407795 L149.026549,49.969686 L144.778761,49.6336341 L139.469027,42.7047275 Z M130.973451,42.0326236 L135.221239,42.3686756 L140.530973,49.2975821 L136.283186,48.9615301 L130.973451,42.0326236 Z M122.477876,41.3605197 L126.725664,41.6965716 L132.035398,48.6254782 L127.787611,48.2894262 L122.477876,41.3605197 Z M113.982301,40.6884157 L118.230088,41.0244677 L123.539823,47.9533742 L119.292035,47.6173223 L113.982301,40.6884157 Z M105.486726,40.0163118 L109.734513,40.3523638 L115.044248,47.2812703 L110.79646,46.9452183 L105.486726,40.0163118 Z M96.9911504,39.3442079 L101.238938,39.6802598 L106.548673,46.6091664 L102.300885,46.2731144 L96.9911504,39.3442079 Z M88.4955752,38.6721039 L92.7433628,39.0081559 L98.0530973,45.9370624 L93.8053097,45.6010105 L88.4955752,38.6721039 Z M80,38 L84.2477876,38.336052 L89.5575221,45.2649585 L85.3097345,44.9289065 L80,38 Z" id="形状" fill="url(#linearGradient-4)" transform="translate(140.000000, 46.000000) scale(-1, 1) translate(-140.000000, -46.000000) "></path>
<path d="M710.442478,46.7350415 L714.690265,47.0710935 L720,54 L715.752212,53.663948 L710.442478,46.7350415 Z M701.946903,46.0629376 L706.19469,46.3989895 L711.504425,53.3278961 L707.256637,52.9918441 L701.946903,46.0629376 Z M693.451327,45.3919885 L697.699115,45.7280404 L703.00885,52.656947 L698.761062,52.320895 L693.451327,45.3919885 Z M684.955752,44.7198845 L689.20354,45.0559365 L694.513274,51.984843 L690.265487,51.6487911 L684.955752,44.7198845 Z M676.460177,44.0489354 L680.707965,44.3849874 L686.017699,51.3138939 L681.769912,50.9778419 L676.460177,44.0489354 Z M667.964602,43.3768315 L672.212389,43.7128834 L677.522124,50.64179 L673.274336,50.305738 L667.964602,43.3768315 Z M659.469027,42.7047275 L663.716814,43.0407795 L669.026549,49.969686 L664.778761,49.6336341 L659.469027,42.7047275 Z M650.973451,42.0326236 L655.221239,42.3686756 L660.530973,49.2975821 L656.283186,48.9615301 L650.973451,42.0326236 Z M642.477876,41.3605197 L646.725664,41.6965716 L652.035398,48.6254782 L647.787611,48.2894262 L642.477876,41.3605197 Z M633.982301,40.6884157 L638.230088,41.0244677 L643.539823,47.9533742 L639.292035,47.6173223 L633.982301,40.6884157 Z M625.486726,40.0163118 L629.734513,40.3523638 L635.044248,47.2812703 L630.79646,46.9452183 L625.486726,40.0163118 Z M616.99115,39.3442079 L621.238938,39.6802598 L626.548673,46.6091664 L622.300885,46.2731144 L616.99115,39.3442079 Z M608.495575,38.6721039 L612.743363,39.0081559 L618.053097,45.9370624 L613.80531,45.6010105 L608.495575,38.6721039 Z M600,38 L604.247788,38.336052 L609.557522,45.2649585 L605.309735,44.9289065 L600,38 Z" id="形状" fill="url(#linearGradient-4)"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 500 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 9.4 KiB

View File

@@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 3</title>
<defs>
<linearGradient x1="100%" y1="0%" x2="0%" y2="100%" id="linearGradient-1">
<stop stop-color="#00DDF2" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#00E0C9" offset="100%"></stop>
</linearGradient>
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-2">
<stop stop-color="#FFE457" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#FFDC2C" offset="100%"></stop>
</linearGradient>
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-3">
<stop stop-color="#FFDC2C" offset="0%"></stop>
<stop stop-color="#FFE457" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="0%" x2="0%" y2="100%" id="linearGradient-4">
<stop stop-color="#00E0C9" offset="0%"></stop>
<stop stop-color="#00DDF2" stop-opacity="0" offset="100%"></stop>
</linearGradient>
</defs>
<g id="大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="农产品推荐" transform="translate(-896.000000, -416.000000)" fill-rule="nonzero">
<g id="编组-13" transform="translate(880.000000, 400.000000)">
<g id="编组-3" transform="translate(22.000000, 22.000000)">
<path d="M122,58 C122,92.9927617 93.9164341,121.426255 59.058357,121.991426 L58,122 L58,110 C86.4316189,110 109.533832,87.1821027 109.993033,58.8599151 L110,58 L122,58 Z" id="路径" fill="url(#linearGradient-1)"></path>
<path d="M58,-6 C92.9927617,-6 121.426255,22.0835659 121.991426,56.941643 L122,58 L110,58 C110,29.5683811 87.1821027,6.46616762 58.8599151,6.00696651 L58,6 L58,-6 Z" id="路径" fill="url(#linearGradient-2)"></path>
<path d="M6,58 C6,86.4316189 28.8178973,109.533832 57.1400849,109.993033 L58,110 L58,122 C23.0072383,122 -5.42625523,93.9164341 -5.99142583,59.058357 L-6,58 L6,58 Z" id="路径" fill="url(#linearGradient-3)"></path>
<path d="M58,-6 L58,6 C29.5683811,6 6.46616762,28.8178973 6.00696651,57.1400849 L6,58 L-6,58 C-6,23.0072383 22.0835659,-5.42625523 56.941643,-5.99142583 L58,-6 Z" id="路径" fill="url(#linearGradient-4)"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@@ -0,0 +1,50 @@
<template>
<div class="display0">
<div class="display0-container">
<div class="display0-content">
<img src="../asset/display0-left.png">
<img src="../asset/display0-left.png">
</div>
</div>
</div>
</template>
<script>
export default {
name: 'display0',
data () {
return {
}
}
}
</script>
<style lang="scss" scoped>
.display0 {
position: relative;
width: 840px;
height: 465px;
background: url(../asset/display0-bg.png) no-repeat center;
background-size: cover;
.display0-content {
display: flex;
position: absolute;
top: 50%;
width: 100%;
height: 465px;
transform: translateY(-50%);
align-items: center;
justify-content: space-between;
background: url(../asset/display0-bg.png) no-repeat center;
background-size: cover;
img:last-child {
position: relative;
transform: rotate(180deg);
}
}
}
</style>

View File

@@ -0,0 +1,64 @@
<template>
<section class="displayItem">
<span class="num" v-text="value"/>
<span v-text="label"/>
</section>
</template>
<script>
export default {
name: "displayItem",
props: {
label: {default: "标题"},
value: {default: 0},
}
}
</script>
<style lang="scss" scoped>
.displayItem {
width: 160px;
height: 160px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 15px;
font-weight: bold;
line-height: 26px;
position: relative;
background-image: url("../asset/displayItem-bg.svg");
background-repeat: no-repeat;
background-position: center;
&:before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: " ";
background-image: url("../asset/displayItem-bg1.svg");
background-repeat: no-repeat;
background-position: center;
animation: rotate 4s infinite linear;
background-color: transparent;
}
.num {
font-family: DIN;
font-size: 32px;
line-height: 32px;
}
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>

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>

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>

After

Width:  |  Height:  |  Size: 1.5 KiB

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>

After

Width:  |  Height:  |  Size: 8.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

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>

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

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>

After

Width:  |  Height:  |  Size: 1.5 KiB

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>

After

Width:  |  Height:  |  Size: 1.4 KiB

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>

After

Width:  |  Height:  |  Size: 4.7 KiB

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>

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>

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>

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>

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>

View File

@@ -0,0 +1,63 @@
<template>
<div class="AiSummary">
<component :is="type" :data="data" :keys="keys" :value="value"></component>
</div>
</template>
<script>
import Summary0 from './components/Summary0'
import Summary1 from './components/Summary1'
import Summary2 from './components/Summary2'
import Summary3 from './components/Summary3'
import Summary4 from './components/Summary4'
import Summary5 from './components/Summary5'
import Summary6 from './components/Summary6'
import Summary7 from './components/Summary7'
import Summary9 from './components/Summary9'
import Summary10 from './components/Summary10'
export default {
name: 'AiDvSummary',
components: {
Summary0,
Summary1,
Summary2,
Summary3,
Summary4,
Summary5,
Summary6,
Summary7,
Summary9,
Summary10
},
props: {
type: {
default: 'Summary0'
},
data: {
type: Array,
default: () => []
},
keys: {
type: String,
default: 'key'
},
value: {
type: String,
default: 'value'
}
}
}
</script>
<style lang="scss" scoped>
.AiSummary {
width: 100%;
height: 100%;
}
</style>

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>

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 500 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

View File

@@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="35px" height="22px" viewBox="0 0 35 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>形状结合备份 2</title>
<defs>
<path d="M844,226 L844,234 L840,230 L844,226 Z M836,226 L836,234 L832,230 L836,226 Z M828,226 L828,234 L824,230 L828,226 Z" id="path-1"></path>
<filter x="-60.0%" y="-150.0%" width="220.0%" height="400.0%" filterUnits="objectBoundingBox" id="filter-2">
<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="-50.0%" y="-125.0%" width="200.0%" height="350.0%" filterUnits="objectBoundingBox" id="filter-3">
<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(-816.000000, -219.000000)">
<g id="形状结合备份-2" transform="translate(834.000000, 230.000000) scale(-1, 1) translate(-834.000000, -230.000000) ">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FFC143" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@@ -0,0 +1,48 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1652px" height="316px" viewBox="0 0 1652 316" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 11</title>
<defs>
<radialGradient cx="50%" cy="100%" fx="50%" fy="100%" r="222.222222%" gradientTransform="translate(0.500000,1.000000),scale(0.225000,1.000000),rotate(180.000000),scale(1.000000,0.217020),translate(-0.500000,-1.000000)" id="radialGradient-1">
<stop stop-color="#5A8DFF" stop-opacity="0.503091879" offset="0%"></stop>
<stop stop-color="#5A86FF" stop-opacity="0" offset="100%"></stop>
</radialGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-2">
<stop stop-color="#5A86FF" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#5AACFF" offset="36.7624563%"></stop>
<stop stop-color="#7EEFFF" offset="50.0376124%"></stop>
<stop stop-color="#5AACFF" offset="62.9709649%"></stop>
<stop stop-color="#5A86FF" offset="100%"></stop>
</linearGradient>
<path d="M487,140.25 C496.749607,140.25 505.858022,144.763809 511.818048,152.456132 L512.118303,152.85 C517.460114,159.972414 525.628339,164.414823 534.493503,165.038944 L534.977736,165.069194 L800,179.997774 L534.814342,167.814741 C525.045723,167.281907 516.001062,162.526681 510.024678,154.802184 L509.718303,154.4 C504.430381,147.349436 496.184331,143.149103 487.389942,143.003893 L487,143 C463.876874,143 434.876874,143 400,143 C365.099096,143 336.099096,143 313,143 C304.186796,143 295.797203,147.076639 290.404401,154.025025 L290.118303,154.4 C284.248419,162.226512 275.269839,167.10536 265.52688,167.783422 L265.022264,167.814741 L0,179.997774 L264.858871,165.069194 C273.748674,164.584296 281.980256,160.260414 287.424142,153.235831 L287.718303,152.85 C293.568068,145.050314 302.693181,140.406511 312.423056,140.253884 L313,140.25 C336.068383,140.083333 365.068383,140 400,140 C434.846161,140 463.846161,140.083333 487,140.25 Z" id="path-3"></path>
<filter x="-56.3%" y="-147.5%" width="212.6%" height="479.3%" filterUnits="objectBoundingBox" id="filter-4">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="8" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="20" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.254665854 0 0 0 0 0.715268342 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<path d="M487,0.25 C496.749607,0.25 505.858022,4.76380868 511.818048,12.456132 L512.118303,12.85 C517.460114,19.9724141 525.628339,24.4148226 534.493503,25.038944 L534.977736,25.069194 L800,39.9977736 L534.814342,27.814741 C525.045723,27.2819072 516.001062,22.5266807 510.024678,14.8021845 L509.718303,14.4 C504.430381,7.34943641 496.184331,3.14910303 487.389942,3.00389299 L487,3 C463.876874,3 434.876874,3 400,3 C365.099096,3 336.099096,3 313,3 C304.186796,3 295.797203,7.07663928 290.404401,14.0250247 L290.118303,14.4 C284.248419,22.2265123 275.269839,27.1053605 265.52688,27.7834215 L265.022264,27.814741 L0,39.9977736 L264.858871,25.069194 C273.748674,24.5842957 281.980256,20.260414 287.424142,13.235831 L287.718303,12.85 C293.568068,5.05031402 302.693181,0.406510872 312.423056,0.253884 L313,0.25 C336.068383,0.0833333333 365.068383,5.68434189e-14 400,5.68434189e-14 C434.846161,5.68434189e-14 463.846161,0.0833333333 487,0.25 Z" id="path-5"></path>
<filter x="-56.3%" y="-147.5%" width="212.6%" height="479.3%" filterUnits="objectBoundingBox" id="filter-6">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="8" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="20" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.254665854 0 0 0 0 0.715268342 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(-134.000000, -72.000000)">
<g id="编组-11" transform="translate(560.000000, 140.000000)">
<path d="M487,140.252226 C496.749607,140.252226 505.858022,144.766035 511.818048,152.458358 L512.118303,152.852226 C517.460114,159.974641 525.628339,164.417049 534.493503,165.04117 L534.977736,165.07142 L800,180 L800,1.13686838e-13 L0,1.13686838e-13 L0,180 L264.858871,165.07142 C273.748674,164.586522 281.980256,160.26264 287.424142,153.238057 L287.718303,152.852226 C293.568068,145.05254 302.693181,140.408737 312.423056,140.25611 L313,140.252226 C336.068383,140.08556 365.068383,140.002226 400,140.002226 C434.846161,140.002226 463.846161,140.08556 487,140.252226 Z" id="路径" fill="url(#radialGradient-1)" fill-rule="nonzero"></path>
<g id="编组-3" transform="translate(0.000000, 34.000000)"></g>
<g id="编组-3" transform="translate(784.000000, 89.998000) scale(-1, 1) translate(-784.000000, -89.998000) translate(768.000000, 34.000000)"></g>
<g id="路径" fill-rule="nonzero">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<use fill="url(#linearGradient-2)" xlink:href="#path-3"></use>
</g>
<g id="路径" opacity="0.100000001" fill-rule="nonzero" transform="translate(400.000000, 19.998887) scale(1, -1) translate(-400.000000, -19.998887) ">
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
<use fill="url(#linearGradient-2)" xlink:href="#path-5"></use>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

@@ -0,0 +1,58 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="280px" height="218px" viewBox="0 0 280 218" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组备份 3</title>
<defs>
<linearGradient x1="100%" y1="37.8854658%" x2="1.48868591%" y2="37.8854658%" id="linearGradient-1">
<stop stop-color="#14243B" offset="0%"></stop>
<stop stop-color="#47AFFF" offset="49.217955%"></stop>
<stop stop-color="#14243B" offset="100%"></stop>
</linearGradient>
<filter x="-1.7%" y="-7.5%" width="103.3%" height="115.0%" filterUnits="objectBoundingBox" id="filter-2">
<feGaussianBlur stdDeviation="1" in="SourceGraphic"></feGaussianBlur>
</filter>
<linearGradient x1="49.9857746%" y1="48.7901235%" x2="50%" y2="51.2098765%" id="linearGradient-3">
<stop stop-color="#0F181C" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#418DAB" stop-opacity="0.598912806" offset="58.034917%"></stop>
<stop stop-color="#417FAA" stop-opacity="0.797612544" offset="87.0457779%"></stop>
<stop stop-color="#6FC5FB" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
<stop stop-color="#0D1419" stop-opacity="0.1" offset="0%"></stop>
<stop stop-color="#3586A4" stop-opacity="0.3" offset="100%"></stop>
</linearGradient>
<linearGradient x1="49.9857746%" y1="48.875%" x2="50%" y2="51.125%" id="linearGradient-5">
<stop stop-color="#233967" offset="0%"></stop>
<stop stop-color="#3F8ED5" stop-opacity="0.598912806" offset="58.5107763%"></stop>
<stop stop-color="#4793D9" stop-opacity="0.797612544" offset="86.3050768%"></stop>
<stop stop-color="#75D1FF" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-6">
<stop stop-color="#0D1119" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#0172B1" stop-opacity="0.6" offset="79.4821317%"></stop>
<stop stop-color="#C1D4F5" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="20.864466%" x2="0%" y2="20.864466%" id="linearGradient-7">
<stop stop-color="#3F85D8" offset="0.00990220717%"></stop>
<stop stop-color="#FFFFFF" stop-opacity="0.606943837" offset="50.1065341%"></stop>
<stop stop-color="#3F85D8" offset="100%"></stop>
</linearGradient>
</defs>
<g id="大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="政民互动" transform="translate(-820.000000, -362.000000)">
<g id="bg" transform="translate(820.000000, 362.000000)">
<ellipse id="椭圆形备份" fill="#47AFFF" opacity="0.100000001" cx="140" cy="176" rx="140" ry="42"></ellipse>
<ellipse id="椭圆形备份-8" fill="#47AFFF" opacity="0.100000001" cx="140" cy="173" rx="120" ry="31"></ellipse>
<path d="M139.992432,146 C189.499775,146 229.633407,152.06582 229.633407,159.548387 C229.633407,161.874102 230.464643,169.226142 229.623749,172.652197 C228.919579,180.041478 189.059956,186 139.992432,186 C91.475235,186 51.9605512,180.174387 50.3993707,172.89883 L50.3514565,172.795043 C49.5606794,170.705636 50.3514565,161.752656 50.3514565,159.548387 C50.3514565,152.06582 90.4850881,146 139.992432,146 Z" id="形状结合" fill="url(#linearGradient-1)" filter="url(#filter-2)"></path>
<ellipse id="椭圆形备份-4" stroke="url(#linearGradient-3)" fill="#4389DF" cx="140" cy="160" rx="89.5" ry="13.5"></ellipse>
<g id="编组-2" transform="translate(140.000000, 97.000000) scale(1, -1) translate(-140.000000, -97.000000) translate(90.000000, 52.000000)">
<path d="M1.05870868e-12,0 L100,0 L100,82.7759197 C100,86.7656691 77.6142375,90 50,90 C22.3857625,90 0,86.7656691 0,82.7759197 L0,82.7759197 L1.05870868e-12,0 Z" id="形状结合备份" fill="url(#linearGradient-4)"></path>
<ellipse id="椭圆形备份-7" stroke="url(#linearGradient-5)" opacity="0.699999988" cx="50" cy="82.5" rx="49.5" ry="7"></ellipse>
</g>
<g id="编组-2备份" transform="translate(140.000000, 81.000000) scale(1, -1) translate(-140.000000, -81.000000) translate(50.000000, 0.000000)" fill="url(#linearGradient-6)">
<path d="M180,0 L180,85.217128 L179.939854,85.2176647 C178.192518,127.885249 138.593711,162 90,162 C41.4062889,162 1.80748225,127.885249 0.0601464025,85.2176647 L0,85.217128 L0,0 L180,0 Z" id="形状结合备份"></path>
</g>
<path d="M199.817754,169 L200,170.237255 C199.401975,170.333411 198.796774,170.427737 198.1845,170.520231 L196.326564,170.792217 C194.134458,171.103118 191.85697,171.391561 189.49851,171.657483 L187.457244,171.8799 L185.376936,172.091279 L183.2582,172.291609 L181.101655,172.480884 L178.907917,172.659094 L176.677603,172.82623 L174.411329,172.982285 C174.030654,173.00737 173.648507,173.031993 173.2649,173.056153 L170.945844,173.195568 L168.592372,173.32388 L166.205098,173.441079 L163.784642,173.547158 L161.331619,173.642107 L158.846646,173.725917 L156.33034,173.798581 L153.783319,173.86009 L151.206198,173.910435 C150.774204,173.917895 150.340981,173.924889 149.906543,173.931418 L147.28543,173.965 C146.846181,173.969665 146.405742,173.973864 145.964127,173.977597 L143.30041,173.994398 L140.609061,174 L137.993817,173.995285 L134.126656,173.970503 C133.70073,173.966567 133.276066,173.962236 132.852673,173.957511 L130.327637,173.924413 L127.833533,173.881816 L125.370795,173.829702 C124.962976,173.820222 124.556482,173.810344 124.151322,173.800069 L121.736441,173.733643 L119.354004,173.657651 L117.004443,173.572075 L114.688191,173.476896 L112.405679,173.372095 L110.157339,173.257654 C109.785487,173.237776 109.415077,173.217495 109.046118,173.196812 L106.849846,173.067873 L104.688826,172.929247 L102.56349,172.780913 L100.474269,172.622853 L98.4215965,172.455049 L96.4059029,172.27748 C96.0730596,172.247071 95.7417751,172.216253 95.4120584,172.185028 L93.4526439,171.992778 L91.5312885,171.790717 C91.2142582,171.756222 90.8988317,171.721317 90.585018,171.686002 L88.7215613,171.469188 L86.8972436,171.242516 L85.1124967,171.005967 L83.3677525,170.759521 L81.663443,170.50316 C81.3827849,170.459606 81.1038297,170.415638 80.8265862,170.371255 L80,170.236865 L80.1870353,169.00039 L81.8427931,169.26544 C83.5191112,169.525551 85.2568922,169.770857 87.0541748,170.001436 L88.8712186,170.227108 C89.4834627,170.300698 90.1022454,170.372655 90.7274942,170.442981 L92.6225659,170.64907 L94.5559977,170.845395 L96.5273538,171.031971 L98.5361985,171.208818 C98.8741057,171.237482 99.2135568,171.265742 99.5545427,171.293598 L101.618803,171.455882 L103.719462,171.608479 L105.856084,171.751408 L108.028233,171.884685 L110.235473,172.008329 L112.477369,172.122357 L114.753484,172.226786 L117.063384,172.321633 L119.406631,172.406917 L121.78279,172.482655 C122.181535,172.494484 122.581633,172.505915 122.983075,172.51695 L125.407785,172.578402 C125.814567,172.587851 126.222676,172.596905 126.632101,172.605563 L129.104381,172.652768 L131.60783,172.690497 C132.027644,172.695997 132.448739,172.701102 132.871106,172.705814 L136.70649,172.737598 L139.300829,172.747004 C139.735683,172.747788 140.171764,172.748179 140.609061,172.748179 L143.293926,172.742593 L145.951141,172.725842 C146.391672,172.72212 146.831024,172.717933 147.269186,172.713282 L149.883766,172.679801 L152.469146,172.635179 L155.024707,172.579426 L157.549829,172.512553 L160.043892,172.434569 C160.456946,172.420646 160.868681,172.406261 161.279083,172.391413 L163.725395,172.296782 C164.130414,172.280085 164.534074,172.262927 164.936362,172.245308 L167.33353,172.134051 L169.697159,172.011723 L172.026629,171.878334 L174.321321,171.733893 L176.580616,171.578412 C176.95418,171.551579 177.326244,171.524286 177.696795,171.496534 L179.901829,171.324509 L182.069916,171.141468 C182.42815,171.110043 182.784819,171.07816 183.13991,171.045819 L185.251412,170.846272 L187.324417,170.635733 C189.377966,170.419702 191.372839,170.187199 193.306246,169.938267 L195.219061,169.683862 C195.849767,169.597236 196.473541,169.508787 197.090278,169.418515 L198.919279,169.142236 L199.817754,169 Z" id="路径" fill="url(#linearGradient-7)" fill-rule="nonzero"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.4 KiB

View File

@@ -0,0 +1,58 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="214px" height="164px" viewBox="0 0 214 164" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组备份 4</title>
<defs>
<linearGradient x1="100%" y1="37.8854658%" x2="1.48868591%" y2="37.8854658%" id="linearGradient-1">
<stop stop-color="#14243B" offset="0%"></stop>
<stop stop-color="#47AFFF" offset="49.217955%"></stop>
<stop stop-color="#14243B" offset="100%"></stop>
</linearGradient>
<filter x="-2.1%" y="-9.7%" width="104.2%" height="119.4%" filterUnits="objectBoundingBox" id="filter-2">
<feGaussianBlur stdDeviation="1" in="SourceGraphic"></feGaussianBlur>
</filter>
<linearGradient x1="49.9857746%" y1="48.7998413%" x2="50%" y2="51.2001587%" id="linearGradient-3">
<stop stop-color="#0F181C" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#418DAB" stop-opacity="0.598912806" offset="58.034917%"></stop>
<stop stop-color="#417FAA" stop-opacity="0.797612544" offset="87.0457779%"></stop>
<stop stop-color="#6FC5FB" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
<stop stop-color="#0D1419" stop-opacity="0.1" offset="0%"></stop>
<stop stop-color="#3586A4" stop-opacity="0.3" offset="100%"></stop>
</linearGradient>
<linearGradient x1="49.9857746%" y1="48.8574905%" x2="50%" y2="51.1425095%" id="linearGradient-5">
<stop stop-color="#233967" offset="0%"></stop>
<stop stop-color="#3F8ED5" stop-opacity="0.598912806" offset="58.5107763%"></stop>
<stop stop-color="#4793D9" stop-opacity="0.797612544" offset="86.3050768%"></stop>
<stop stop-color="#75D1FF" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-6">
<stop stop-color="#0D1119" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#0172B1" stop-opacity="0.6" offset="79.4821317%"></stop>
<stop stop-color="#C1D4F5" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="20.864466%" x2="0%" y2="20.864466%" id="linearGradient-7">
<stop stop-color="#3F85D8" offset="0.00990220717%"></stop>
<stop stop-color="#FFFFFF" stop-opacity="0.606943837" offset="50.1065341%"></stop>
<stop stop-color="#3F85D8" offset="100%"></stop>
</linearGradient>
</defs>
<g id="大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="政民互动" transform="translate(-1146.000000, -406.000000)">
<g id="bg" transform="translate(1146.000000, 406.000000)">
<ellipse id="椭圆形备份" fill="#47AFFF" opacity="0.100000001" cx="107" cy="132" rx="107" ry="32"></ellipse>
<ellipse id="椭圆形备份-8" fill="#47AFFF" opacity="0.100000001" cx="107" cy="130" rx="90" ry="23"></ellipse>
<path d="M106.994029,112 C146.049823,112 177.710799,116.70101 177.710799,122.5 C177.710799,124.302058 178.366282,129.997915 177.703589,132.653813 C177.157541,138.380696 145.708931,143 106.994029,143 C68.7193521,143 37.5466571,138.48515 36.3150591,132.846593 L36.2772601,132.766158 C35.6534249,131.146868 36.2772601,124.208308 36.2772601,122.5 C36.2772601,116.70101 67.9382362,112 106.994029,112 Z" id="形状结合" fill="url(#linearGradient-1)" filter="url(#filter-2)"></path>
<ellipse id="椭圆形备份-4" stroke="url(#linearGradient-3)" fill="#4389DF" cx="106" cy="123" rx="70.5" ry="10.5"></ellipse>
<g id="编组-2" transform="translate(106.000000, 68.500000) scale(1, -1) translate(-106.000000, -68.500000) translate(62.902439, 29.000000)">
<path d="M9.09494702e-13,0 L86.195122,0 L86.195122,71.7391304 C86.195122,75.1969132 66.8996867,78 43.097561,78 L42.384864,77.9991612 C18.9114561,77.9438728 0,75.1623354 0,71.7391304 L0,71.7391304 L9.09494702e-13,0 Z" id="形状结合备份" fill="url(#linearGradient-4)"></path>
<ellipse id="椭圆形备份-7" stroke="url(#linearGradient-5)" opacity="0.699999988" cx="43.097561" cy="72.5" rx="42.5" ry="6"></ellipse>
</g>
<g id="编组-2备份" transform="translate(107.000000, 64.000000) scale(1, -1) translate(-107.000000, -64.000000) translate(36.000000, 0.000000)" fill="url(#linearGradient-6)">
<path d="M142,0 L142,67.3320517 L141.952544,67.3326519 C140.573989,101.045229 109.334972,128 71,128 C32.665028,128 1.42601145,101.045229 0.0474560294,67.3326519 L0,67.3320517 L0,0 L142,0 Z" id="形状结合备份"></path>
</g>
<path d="M155.848128,130 L156,130.989804 C155.501646,131.066729 154.997312,131.14219 154.487084,131.216185 L152.938804,131.433773 C151.112048,131.682494 149.214142,131.913248 147.248758,132.125987 L145.547704,132.30392 L143.814113,132.473023 L142.0485,132.633287 L140.251379,132.784707 L138.423264,132.927275 L136.564669,133.060984 L134.676107,133.185828 C134.358879,133.205896 134.040423,133.225594 133.72075,133.244923 L131.788204,133.356455 L129.826976,133.459104 L127.837582,133.552863 L125.820535,133.637726 L123.776349,133.713685 L121.705538,133.780734 L119.608617,133.838865 L117.486099,133.888072 L115.338498,133.928348 C114.978503,133.934316 114.617484,133.939911 114.255453,133.945134 L112.071192,133.972 C111.705151,133.975732 111.338119,133.979091 110.970105,133.982078 L108.750341,133.995518 L106.507551,134 L104.328181,133.996228 L101.105547,133.976403 C100.750609,133.973254 100.396722,133.969789 100.043894,133.966008 L97.9396975,133.93953 L95.8612779,133.905453 L93.8089957,133.863761 C93.4691468,133.856177 93.1304019,133.848276 92.7927686,133.840055 L90.7803672,133.786914 L88.795003,133.726121 L86.8370358,133.65766 L84.9068256,133.581517 L83.0047322,133.497676 L81.1311156,133.406123 C80.8212392,133.39022 80.5125644,133.373996 80.2050986,133.357449 L78.374872,133.254299 L76.5740219,133.143397 L74.8029084,133.02473 L73.0618912,132.898283 L71.3513304,132.764039 L69.6715858,132.621984 C69.3942163,132.597656 69.1181459,132.573003 68.843382,132.548023 L67.2105366,132.394223 L65.6094071,132.232574 C65.3452152,132.204978 65.0823598,132.177053 64.8208484,132.148801 L63.2679678,131.975351 L61.747703,131.794013 L60.2604139,131.604774 L58.8064604,131.407617 L57.3862025,131.202528 C57.1523208,131.167685 56.9198581,131.13251 56.6888218,131.097004 L56,130.989492 L56.1558628,130.000312 L57.535661,130.212352 C58.9325927,130.420441 60.3807435,130.616685 61.878479,130.801148 L63.3926821,130.981687 C63.9028856,131.040559 64.4185379,131.098124 64.9395785,131.154385 L66.5188049,131.319256 L68.1299981,131.476316 L69.7727949,131.625577 L71.4468321,131.767054 C71.7284214,131.789986 72.0112974,131.812594 72.2954523,131.834878 L74.015669,131.964705 L75.7662182,132.086783 L77.5467364,132.201126 L79.3568607,132.307748 L81.1962276,132.406663 L83.0644742,132.497885 L84.961237,132.581428 L86.886153,132.657307 L88.8388588,132.725534 L90.8189914,132.786124 C91.1512789,132.795587 91.484694,132.804732 91.8192292,132.81356 L93.8398209,132.862721 C94.1788061,132.870281 94.5188963,132.877524 94.8600839,132.884451 L96.9203173,132.922215 L99.0065246,132.952398 C99.3563702,132.956797 99.7072828,132.960882 100.059255,132.964651 L103.255408,132.990078 L105.417358,132.997603 C105.779736,132.99823 106.143136,132.998543 106.507551,132.998543 L108.744938,132.994075 L110.959284,132.980673 C111.326393,132.977696 111.69252,132.974347 112.057655,132.970625 L114.236471,132.943841 L116.390955,132.908143 L118.520589,132.863541 L120.624857,132.810042 L122.703243,132.747655 C123.047455,132.736517 123.390567,132.725009 123.732569,132.713131 L125.771163,132.637425 C126.108678,132.624068 126.445062,132.610342 126.780302,132.596246 L128.777941,132.507241 L130.747632,132.409378 L132.688858,132.302667 L134.601101,132.187115 L136.483846,132.062729 C136.79515,132.041263 137.105204,132.019429 137.413995,131.997227 L139.251524,131.859607 L141.058263,131.713174 C141.356792,131.688035 141.654016,131.662528 141.949925,131.636655 L143.70951,131.477017 L145.437014,131.308587 C147.148305,131.135762 148.810699,130.949759 150.421871,130.750614 L152.015884,130.54709 C152.541473,130.477789 153.061284,130.407029 153.575232,130.334812 L155.099399,130.113789 L155.848128,130 Z" id="路径" fill="url(#linearGradient-7)" fill-rule="nonzero"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.5 KiB

View File

@@ -0,0 +1,42 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="130px" height="116px" viewBox="0 0 130 116" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 4</title>
<defs>
<polygon id="path-1" points="130 54 100 108 30 108 -2.14411822e-13 54 30 1.14845633e-13 46 1.14845633e-13 52 6 78 6 84 1.14845633e-13 100 1.14845633e-13"></polygon>
<filter x="-9.6%" y="-11.6%" width="119.2%" height="123.1%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="5" 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.126200457 0 0 0 0 0.164826608 0 0 0 0 1 0 0 0 0.2 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<polygon id="path-3" points="49 0 81 0 77 4 53 4"></polygon>
<filter x="-37.5%" y="-300.0%" width="175.0%" height="700.0%" filterUnits="objectBoundingBox" id="filter-4">
<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="-31.2%" y="-250.0%" width="162.5%" height="600.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 1 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">
<g id="综合治理" transform="translate(-320.000000, -218.000000)">
<g id="编组-4" transform="translate(320.000000, 226.000000)">
<g id="多边形">
<use fill-opacity="0.800913564" fill="#00041A" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<path stroke="#66A8FF" stroke-width="1" d="M45.7928932,0.5 L51.7928932,6.5 L78.2071068,6.5 L84.2071068,0.5 L99.7057983,0.5 L129.428021,54 L99.7057983,107.5 L30.2942017,107.5 L0.571979452,54 L30.2942017,0.5 L45.7928932,0.5 Z" stroke-linejoin="square"></path>
</g>
<g id="矩形">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<use fill="#43D9FF" fill-rule="evenodd" xlink:href="#path-3"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-3"></use>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@@ -0,0 +1,49 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="164px" height="140px" viewBox="0 0 164 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 3</title>
<defs>
<polygon id="path-1" points="162 70 122 140 106 140 100 134 64 134 58 140 42 140 2 70 42 6.21724894e-14 58 3.10862447e-14 64 6 100 6 106 3.10862447e-14 122 6.21724894e-14"></polygon>
<filter x="-15.6%" y="-17.9%" width="131.2%" height="135.7%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="10" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
<feGaussianBlur stdDeviation="20" 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.126200457 0 0 0 0 0.164826608 0 0 0 0 1 0 0 0 0.503193462 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<polygon id="path-3" points="61 0 103 0 99 4 65 4"></polygon>
<filter x="-4.8%" y="-50.0%" width="109.5%" height="200.0%" 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="61 136 103 136 99 140 65 140"></polygon>
<filter x="-4.8%" y="-50.0%" width="109.5%" height="200.0%" filterUnits="objectBoundingBox" id="filter-6">
<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(-178.000000, -210.000000)">
<g id="编组-3" transform="translate(178.000000, 210.000000)">
<g id="多边形">
<use fill-opacity="0.5" fill="#00041A" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<path stroke="#66A8FF" stroke-width="1" d="M57.7928932,0.5 L63.7928932,6.5 L100.207107,6.5 L106.207107,0.5 L121.709839,0.5 L161.424124,70 L121.709839,139.5 L106.207107,139.5 L100.207107,133.5 L63.7928932,133.5 L57.7928932,139.5 L42.2901613,139.5 L2.57587555,70 L42.2901613,0.5 L57.7928932,0.5 Z" stroke-linejoin="square"></path>
</g>
<polygon id="路径" fill="#66A8FF" fill-rule="nonzero" points="148 45.9729832 149.703891 45 164 70 149.703891 95 148 94.0270168 161.738494 69.9990195"></polygon>
<polygon id="路径" fill="#66A8FF" fill-rule="nonzero" transform="translate(8.000000, 70.000000) scale(-1, 1) translate(-8.000000, -70.000000) " points="0 45.9729832 1.70389128 45 16 70 1.70389128 95 0 94.0270168 13.7384939 69.9990195"></polygon>
<g id="矩形">
<use fill="#FFC143" fill-rule="evenodd" xlink:href="#path-3"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
</g>
<g id="矩形" transform="translate(82.000000, 138.000000) scale(1, -1) translate(-82.000000, -138.000000) ">
<use fill="#FFC143" fill-rule="evenodd" xlink:href="#path-5"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@@ -0,0 +1,101 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="432px" height="126px" viewBox="0 0 432 126" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 6</title>
<defs>
<polygon id="path-1" points="16 1 364 1 380 13 380 113 364 125 16 125 -2.13162821e-13 113 1.0658141e-13 13"></polygon>
<filter x="-3.3%" y="-10.1%" width="106.6%" height="120.2%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="5" 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.126200457 0 0 0 0 0.164826608 0 0 0 0 1 0 0 0 0.2 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
<stop stop-color="#74D5FF" stop-opacity="0.297940341" offset="0%"></stop>
<stop stop-color="#ACECFF" stop-opacity="0.10385708" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
<stop stop-color="#ACECFF" stop-opacity="0.10385708" offset="0%"></stop>
<stop stop-color="#74D5FF" stop-opacity="0.297940341" offset="100%"></stop>
</linearGradient>
<polygon id="path-5" points="4 60 8 63 4 66"></polygon>
<filter x="-1125.0%" y="-850.0%" width="2450.0%" height="1800.0%" filterUnits="objectBoundingBox" id="filter-6">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.141520579 0 0 0 0 0.448441981 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMorphology radius="3" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter2"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter2" result="shadowOffsetOuter2"></feOffset>
<feGaussianBlur stdDeviation="12" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.21875 0 0 0 0 0.423793979 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
<filter x="-787.5%" y="-625.0%" width="1775.0%" height="1350.0%" filterUnits="objectBoundingBox" id="filter-7">
<feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
<feGaussianBlur stdDeviation="1" 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.772446646 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<polygon id="path-8" points="4 60 8 63 4 66"></polygon>
<filter x="-1125.0%" y="-850.0%" width="2450.0%" height="1800.0%" filterUnits="objectBoundingBox" id="filter-9">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.141520579 0 0 0 0 0.448441981 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMorphology radius="3" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter2"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter2" result="shadowOffsetOuter2"></feOffset>
<feGaussianBlur stdDeviation="12" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.21875 0 0 0 0 0.423793979 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
<filter x="-787.5%" y="-625.0%" width="1775.0%" height="1350.0%" filterUnits="objectBoundingBox" id="filter-10">
<feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
<feGaussianBlur stdDeviation="1" 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.772446646 0 0 0 0 1 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">
<g id="综合治理" transform="translate(-534.000000, -140.000000)">
<g id="编组-6" transform="translate(560.000000, 140.000000)">
<g id="矩形">
<use fill-opacity="0.800913564" fill="#00041A" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<path stroke="#66A8FF" stroke-width="1" d="M363.833333,1.5 L379.5,13.25 L379.5,112.75 L363.833333,124.5 L16.1666667,124.5 L0.5,112.75 L0.5,13.25 L16.1666667,1.5 L363.833333,1.5 Z" stroke-linejoin="square"></path>
</g>
<g id="编组-5">
<polyline id="路径" stroke-opacity="0.5" stroke="#0085FF" points="16 125 0 113 0 13 16 1"></polyline>
<path d="M8,49 L8,52 L4,55 L4,52 L8,49 Z M8,43 L8,46 L4,49 L4,46 L8,43 Z M8,37 L8,40 L4,43 L4,40 L8,37 Z M8,31 L8,34 L4,37 L4,34 L8,31 Z M8,25 L8,28 L4,31 L4,28 L8,25 Z M8,19 L8,22 L4,25 L4,22 L8,19 Z M8,13 L8,16 L4,19 L4,16 L8,13 Z" id="形状结合" fill="url(#linearGradient-3)"></path>
<path d="M4,107 L8,110 L8,113 L4,110 L4,107 Z M4,101 L8,104 L8,107 L4,104 L4,101 Z M4,95 L8,98 L8,101 L4,98 L4,95 Z M4,89 L8,92 L8,95 L4,92 L4,89 Z M4,83 L8,86 L8,89 L4,86 L4,83 Z M4,77 L8,80 L8,83 L4,80 L4,77 Z M4,71 L8,74 L8,77 L4,74 L4,71 Z" id="形状结合" fill="url(#linearGradient-4)"></path>
<circle id="椭圆形" fill="#09F0FE" cx="15.5" cy="1.5" r="1.5"></circle>
<circle id="椭圆形备份" fill="#09F0FE" cx="15.5" cy="124.5" r="1.5"></circle>
<g id="矩形">
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
<use fill="#B5FBFF" fill-rule="evenodd" xlink:href="#path-5"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-5"></use>
</g>
</g>
<g id="编组-5备份-2" transform="translate(371.500000, 63.000000) scale(-1, 1) translate(-371.500000, -63.000000) translate(363.000000, 0.000000)">
<polyline id="路径" stroke-opacity="0.5" stroke="#0085FF" points="16 125 0 113 0 13 16 1"></polyline>
<path d="M8,49 L8,52 L4,55 L4,52 L8,49 Z M8,43 L8,46 L4,49 L4,46 L8,43 Z M8,37 L8,40 L4,43 L4,40 L8,37 Z M8,31 L8,34 L4,37 L4,34 L8,31 Z M8,25 L8,28 L4,31 L4,28 L8,25 Z M8,19 L8,22 L4,25 L4,22 L8,19 Z M8,13 L8,16 L4,19 L4,16 L8,13 Z" id="形状结合" fill="url(#linearGradient-3)"></path>
<path d="M4,107 L8,110 L8,113 L4,110 L4,107 Z M4,101 L8,104 L8,107 L4,104 L4,101 Z M4,95 L8,98 L8,101 L4,98 L4,95 Z M4,89 L8,92 L8,95 L4,92 L4,89 Z M4,83 L8,86 L8,89 L4,86 L4,83 Z M4,77 L8,80 L8,83 L4,80 L4,77 Z M4,71 L8,74 L8,77 L4,74 L4,71 Z" id="形状结合" fill="url(#linearGradient-4)"></path>
<circle id="椭圆形" fill="#09F0FE" cx="15.5" cy="1.5" r="1.5"></circle>
<circle id="椭圆形备份" fill="#09F0FE" cx="15.5" cy="124.5" r="1.5"></circle>
<g id="矩形">
<use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
<use fill="#B5FBFF" fill-rule="evenodd" xlink:href="#path-8"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-8"></use>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.5 KiB

View File

@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="480px" height="124px" viewBox="0 0 480 124" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>矩形</title>
<defs>
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="219.598516%" gradientTransform="translate(0.500000,0.500000),scale(0.258333,1.000000),scale(1.000000,1.764370),translate(-0.500000,-0.500000)" id="radialGradient-1">
<stop stop-color="#1D3091" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#2C94E1" stop-opacity="0.301628059" offset="100%"></stop>
</radialGradient>
</defs>
<g id="钟祥大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="公共招聘" transform="translate(-40.000000, -214.000000)" fill="url(#radialGradient-1)">
<polygon id="矩形" points="56 214 504 214 520 226 520 326 504 338 56 338 40 326 40 226"></polygon>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 993 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="68px" height="126px" viewBox="0 0 68 126" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 5</title>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#74D5FF" stop-opacity="0.297940341" offset="0%"></stop>
<stop stop-color="#ACECFF" stop-opacity="0.10385708" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#ACECFF" stop-opacity="0.10385708" offset="0%"></stop>
<stop stop-color="#74D5FF" stop-opacity="0.297940341" offset="100%"></stop>
</linearGradient>
<polygon id="path-3" points="4 60 8 63 4 66"></polygon>
<filter x="-1125.0%" y="-850.0%" width="2450.0%" height="1800.0%" filterUnits="objectBoundingBox" id="filter-4">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.141520579 0 0 0 0 0.448441981 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMorphology radius="3" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter2"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter2" result="shadowOffsetOuter2"></feOffset>
<feGaussianBlur stdDeviation="12" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.21875 0 0 0 0 0.423793979 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
<filter x="-787.5%" y="-625.0%" width="1775.0%" height="1350.0%" filterUnits="objectBoundingBox" id="filter-5">
<feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
<feGaussianBlur stdDeviation="1" 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.772446646 0 0 0 0 1 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">
<g id="公共招聘" transform="translate(-14.000000, -213.000000)">
<g id="编组-5" transform="translate(40.000000, 213.000000)">
<polyline id="路径" stroke-opacity="0.5" stroke="#0085FF" points="16 125 0 113 0 13 16 1"></polyline>
<path d="M8,49 L8,52 L4,55 L4,52 L8,49 Z M8,43 L8,46 L4,49 L4,46 L8,43 Z M8,37 L8,40 L4,43 L4,40 L8,37 Z M8,31 L8,34 L4,37 L4,34 L8,31 Z M8,25 L8,28 L4,31 L4,28 L8,25 Z M8,19 L8,22 L4,25 L4,22 L8,19 Z M8,13 L8,16 L4,19 L4,16 L8,13 Z" id="形状结合" fill="url(#linearGradient-1)"></path>
<path d="M4,107 L8,110 L8,113 L4,110 L4,107 Z M4,101 L8,104 L8,107 L4,104 L4,101 Z M4,95 L8,98 L8,101 L4,98 L4,95 Z M4,89 L8,92 L8,95 L4,92 L4,89 Z M4,83 L8,86 L8,89 L4,86 L4,83 Z M4,77 L8,80 L8,83 L4,80 L4,77 Z M4,71 L8,74 L8,77 L4,74 L4,71 Z" id="形状结合" fill="url(#linearGradient-2)"></path>
<circle id="椭圆形" fill="#09F0FE" cx="15.5" cy="1.5" r="1.5"></circle>
<circle id="椭圆形备份" fill="#09F0FE" cx="15.5" cy="124.5" r="1.5"></circle>
<g id="矩形">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<use fill="#B5FBFF" fill-rule="evenodd" xlink:href="#path-3"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-3"></use>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.4 KiB

View File

@@ -0,0 +1,35 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="142px" height="170px" viewBox="0 0 142 170" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 3</title>
<defs>
<polygon id="path-1" points="66 0 132 40 132 60 128 64 128 96 132 100 132 120 66 160 1.80502097e-14 120 0 100 4 96 4 64 0 60 0 40"></polygon>
<filter x="-4.9%" y="-4.1%" width="109.8%" height="108.2%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="0.5" 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>
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
<feColorMatrix values="0 0 0 0 0.165549971 0 0 0 0 0.890365602 0 0 0 0 1 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<filter x="-11.0%" y="-9.1%" width="122.0%" height="118.2%" filterUnits="objectBoundingBox" id="filter-3">
<feGaussianBlur stdDeviation="10" 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 0.149355377 0 0 0 0 0.388320864 0 0 0 0 0.92939515 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(-363.000000, -455.000000)">
<g id="编组-3" transform="translate(368.000000, 460.000000)">
<g id="多边形备份-2">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill-opacity="0.201730155" fill="#000000" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
<use stroke="#2586FA" stroke-width="1" xlink:href="#path-1"></use>
</g>
<polygon id="矩形备份-61" fill="#FFD09D" points="130 66 132 64 132 96 130 94"></polygon>
<polygon id="矩形备份-60" fill="#FFD09D" transform="translate(1.000000, 80.000000) scale(-1, 1) translate(-1.000000, -80.000000) " points="0 66 2 64 2 96 0 94"></polygon>
<path d="M89.1,146 L66,160 L42.9,146 M42.9,14 L66,0 L89.1,14" id="形状备份-2" stroke="#3FFBFF" stroke-width="2"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@@ -0,0 +1,39 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="112px" viewBox="0 0 40 112" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 13</title>
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
<stop stop-color="#5DE2FF" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#30C0FF" offset="100%"></stop>
</linearGradient>
<polygon id="path-2" points="24 52 28 52 32 57 28 62 24 62"></polygon>
<filter x="-150.0%" y="-120.0%" width="400.0%" height="340.0%" 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="-100.0%" width="350.0%" height="300.0%" 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>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-5">
<stop stop-color="#5DE2FF" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#30C0FF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="政民互动" transform="translate(-560.000000, -174.000000)">
<g id="编组-13" transform="translate(560.000000, 174.000000)">
<polygon id="路径" fill="url(#linearGradient-1)" fill-rule="nonzero" points="24 6 24 11.255 16 18.079 16 95.925 24 102.748 24 108.004 12 97.77028 12 16.2347913"></polygon>
<g id="矩形">
<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>
<polygon id="路径" fill="url(#linearGradient-5)" fill-rule="nonzero" opacity="0.5" points="10 4.1964876e-14 10 2.702 2 9.97 2 102.026 10 109.293 10 111.996 0 102.910788 0 9.08624437"></polygon>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@@ -0,0 +1,104 @@
<template>
<div class="summary0">
<div class="summary0-item" v-for="(item, index) in data" :key="index">
<h2>{{ item[value] }}</h2>
<p>{{ item[keys] }}</p>
<div class="corner left-top"></div>
<div class="corner right-top"></div>
<div class="corner left-bottom"></div>
<div class="corner right-bottom"></div>
</div>
</div>
</template>
<script>
export default {
name: 'summary0',
props: {
data: {
type: Array,
default: () => []
},
keys: {
type: String,
default: 'key'
},
value: {
type: String,
default: 'value'
}
},
data () {
return {
}
}
}
</script>
<style lang="scss" scoped>
.summary0 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
.summary0-item {
display: flex;
position: relative;
justify-content: center;
align-items: center;
flex-direction: column;
width: 180px;
height: 100px;
box-shadow: 0 0 14px 10px #0e3a77 inset;
background: transparent;
.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);
}
h2 {
color: #fff;
font-size: 28px;
font-weight: 500;
}
p {
line-height: 24px;
font-size: 16px;
color: #8BCCFF;
}
}
}
</style>

View File

@@ -0,0 +1,88 @@
<template>
<div class="summary1">
<div class="summary1-item" v-for="(item, index) in data" :key="index">
<h2>{{ item[keys] }}</h2>
<p>{{ item[value] }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'summary1',
props: {
data: {
type: Array,
default: () => []
},
keys: {
type: String,
default: 'key'
},
value: {
type: String,
default: 'value'
}
},
data () {
return {
}
}
}
</script>
<style lang="scss" scoped>
.summary1 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
div {
box-sizing: border-box;
}
.summary1-item {
display: flex;
position: relative;
align-items: center;
flex-direction: column;
width: 195px;
height: 180px;
padding-top: 58px;
background-image: url(https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/number-bg.png);
background-size: 100% 100%;
h2 {
color: #fff;
font-size: 16px;
font-weight: bold;
background-image: linear-gradient(
180deg,
rgba(255, 255, 255, 1) 0%,
rgba(235, 249, 255, 1) 36%,
rgba(53, 190, 255, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
p {
margin-top: 20px;
font-size: 36px;
font-weight: 700;
color: #8BCCFF;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(235, 249, 255, 1) 36%, rgba(53, 190, 255, 1) 100% );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
</style>

View File

@@ -0,0 +1,105 @@
<template>
<div class="summary10">
<div class="summary10-item" v-for="(item, index) in data" :key="index">
<p>{{ item[keys] }}</p>
<h2>{{ item[value] }}</h2>
<div class="corner left-top"></div>
<div class="corner right-top"></div>
<div class="corner left-bottom"></div>
<div class="corner right-bottom"></div>
</div>
</div>
</template>
<script>
export default {
name: 'Summary10',
props: {
data: {
type: Array,
default: () => []
},
keys: {
type: String,
default: 'key'
},
value: {
type: String,
default: 'value'
}
},
data () {
return {
}
}
}
</script>
<style lang="scss" scoped>
.summary10 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
.summary10-item {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
width: 210px;
height: 50px;
padding: 0 20px;
box-sizing: border-box;
box-shadow: 0 0 14px 10px rgba(32, 133, 255, 0.5) inset;
background: transparent;
.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);
}
h2 {
color: #fff;
font-size: 24px;
font-weight: bold;
}
p {
line-height: 24px;
font-size: 14px;
color: #8BCCFF;
}
}
}
</style>

View File

@@ -0,0 +1,156 @@
<template>
<div class="summary2">
<div class="summary2-title">{{ summaryTitle }}</div>
<div class="summary2-item" v-for="(item, index) in data" :key="index" v-show="index < 2">
<h2>{{ item[value] }}</h2>
<p>{{ item[keys] }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'summary2',
props: {
data: {
type: Array,
default: () => []
},
summaryTitle: {
type: String,
default: '居民上报统计'
},
keys: {
type: String,
default: 'key'
},
value: {
type: String,
default: 'value'
}
},
data () {
return {
}
}
}
</script>
<style lang="scss" scoped>
.summary2 {
display: flex;
position: relative;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 800px;
height: 180px;
padding: 0 90px;
box-sizing: border-box;
background: url(../asset/summary1-bg.svg) center;
background-size: 800px 180px;
.summary2-title {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
font-size: 28px;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(161, 228, 255, 1) 100% );
text-shadow: 0px 4px 20px rgb(52, 95, 255);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transform: translate(-50%, -50%);
&:after {
position: absolute;
top: 50%;
left: -20px;
z-index: 1;
width: 35px;
height: 22px;
content: '';
background: url(../asset/jt.svg) center;
background-size: 40px 112px;
transform: translate(-100%, -50%);
}
&::before {
position: absolute;
top: 50%;
right: -20px;
z-index: 1;
width: 35px;
height: 22px;
content: '';
background: url(../asset/jt.svg) center;
background-size: 40px 112px;
transform: translate(100%, -50%) rotate(180deg);
}
}
&:after {
position: absolute;
top: 50%;
left: 0;
z-index: 1;
width: 40px;
height: 112px;
content: '';
background: url(../asset/top.svg) center;
background-size: 40px 112px;
transform: translateY(-50%);
}
&::before {
position: absolute;
top: 50%;
right: 0;
z-index: 1;
width: 40px;
height: 112px;
content: '';
background: url(../asset/top.svg) center;
background-size: 40px 112px;
transform: translateY(-50%) rotate(180deg);
}
div {
box-sizing: border-box;
}
.summary2-item {
display: flex;
position: relative;
align-items: center;
flex-direction: column;
width: 195px;
height: 180px;
line-height: 1;
padding-top: 58px;
h2 {
color: #fff;
font-size: 40px;
font-weight: bold;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 253, 243, 1) 36%, rgba(255, 203, 101, 1) 100% );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
p {
font-size: 14px;
color: #8BCCFF;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 253, 243, 1) 36%, rgba(255, 203, 101, 1) 100% );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
</style>

View File

@@ -0,0 +1,94 @@
<template>
<div class="summary3">
<div class="summary3-item" v-for="(item, index) in data" :key="index">
<h2>{{ item[value] }}</h2>
<p>{{ item[keys] }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'summary3',
props: {
data: {
type: Array,
default: () => []
},
keys: {
type: String,
default: 'key'
},
value: {
type: String,
default: 'value'
}
},
data () {
return {
}
}
}
</script>
<style lang="scss" scoped>
.summary3 {
display: flex;
position: relative;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
width: 800px;
box-sizing: border-box;
div {
box-sizing: border-box;
}
.summary3-item {
display: flex;
position: relative;
align-items: center;
flex-direction: column;
width: 214px;
height: 164px;
line-height: 1;
padding-top: 58px;
background: url(../asset/summary3-small.svg);
background-size: 100% 164px;
transform: scale(0.8);
&:nth-of-type(2) {
width: 280px;
height: 180px;
background: url(../asset/summary3-big.svg);
background-size: 100% 180px;
transform: scale(1);
}
h2 {
color: #fff;
font-size: 40px;
font-weight: bold;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(235, 249, 255, 1) 36%, rgba(53, 190, 255, 1) 100% );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
p {
margin-top: 10px;
font-size: 16px;
font-weight: 700;
color: #8BCCFF;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(235, 249, 255, 1) 36%, rgba(53, 190, 255, 1) 100% );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
</style>

View File

@@ -0,0 +1,115 @@
<template>
<div class="summary4">
<div class="summary4-item" v-for="(item, index) in data" :key="index" v-show="index < 3">
<p>{{ item[value] }}</p>
<h2>{{ item[keys] }}</h2>
</div>
</div>
</template>
<script>
export default {
name: 'Summary4',
props: {
data: {
type: Array,
default: () => []
},
keys: {
type: String,
default: 'key'
},
value: {
type: String,
default: 'value'
}
},
data () {
return {
}
}
}
</script>
<style lang="scss" scoped>
.summary4 {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
height: 100%;
div {
box-sizing: border-box;
}
.summary4-item {
display: flex;
position: relative;
align-items: center;
flex-direction: column;
justify-content: space-between;
width: 130px;
height: 108px;
padding: 18px 0 ;
font-size: 0;
background-image: url(../asset/summary4-small.svg);
background-size: 100% 100%;
&::after {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: 40px;
height: 2px;
background: #FDDD60;
content: '';
transform: translate(-50%, -50%);
}
&:nth-of-type(3) {
left: -48px;
}
&:nth-of-type(2) {
z-index: 1;
left: -24px;
width: 160px;
height: 140px;
padding-top: 28px;
padding: 28px ;
background-image: url(../asset/summary4-big.svg);
background-size: 100% 100%;
}
h2 {
color: #fff;
font-size: 14px;
line-height: 28px;
background-image: linear-gradient(
180deg,
rgba(255, 255, 255, 1) 0%,
rgba(140, 209, 255, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
p {
font-size: 28px;
font-weight: 700;
line-height: 28px;
color: #8BCCFF;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(235, 249, 255, 1) 36%, rgba(53, 190, 255, 1) 100% );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
</style>

View File

@@ -0,0 +1,138 @@
<template>
<div class="summary5">
<div class="summary5-item" v-for="(item, index) in data" :key="index" v-if="index < 4">
<div class="left">
<img :src="getImg(index)">
<div class="corner left-top"></div>
<div class="corner right-top"></div>
<div class="corner left-bottom"></div>
<div class="corner right-bottom"></div>
</div>
<div class="right">
<h2>{{ item[keys] }}</h2>
<p>{{ item[value] }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'summary5',
props: {
data: {
type: Array,
default: () => []
},
keys: {
type: String,
default: 'key'
},
value: {
type: String,
default: 'value'
}
},
data () {
return {
img1: require('../asset/summary5-1.png'),
img2: require('../asset/summary5-2.png'),
img3: require('../asset/summary5-3.png'),
img4: require('../asset/summary5-4.png')
}
},
methods: {
getImg (index) {
return {
'0': this.img1,
'1': this.img2,
'2': this.img3,
'3': this.img4
}[index]
}
}
}
</script>
<style lang="scss" scoped>
.summary5 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
div {
box-sizing: border-box;
}
.summary5-item {
display: flex;
position: relative;
align-items: center;
.right {
min-width: 90px;
}
.left {
display: flex;
position: relative;
align-items: center;
justify-content: center;
margin-right: 20px;
width: 50px;
height: 50px;
box-shadow: 0 0 8px 4px #0e3a77 inset;
background: transparent;
.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);
}
}
h2 {
line-height: 24px;
color: #fff;
font-size: 16px;
font-weight: normal;
}
p {
font-size: 26px;
color: #fff;
font-weight: 700;
}
}
}
</style>

View File

@@ -0,0 +1,92 @@
<template>
<div class="summary6">
<div class="summary6-item" v-for="(item, index) in data" :key="index" v-if="index < 4">
<div class="left">
</div>
<div class="right">
<h2>{{ item[keys] }}</h2>
<p>{{ item[value] }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'summary6',
props: {
data: {
type: Array,
default: () => []
},
keys: {
type: String,
default: 'key'
},
value: {
type: String,
default: 'value'
}
},
data () {
return {
}
},
methods: {
getImg (index) {
return {
'0': this.img1,
'1': this.img2,
'2': this.img3,
'3': this.img4
}[index]
}
}
}
</script>
<style lang="scss" scoped>
.summary6 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
div {
box-sizing: border-box;
}
.summary6-item {
display: flex;
position: relative;
align-items: center;
.left {
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
h2 {
line-height: 24px;
color: #fff;
font-size: 16px;
font-weight: normal;
}
p {
font-size: 28px;
color: #fff;
font-weight: 700;
}
}
}
</style>

View File

@@ -0,0 +1,266 @@
<template>
<div class="summary7">
<div class="left">
<div class="el-progress-circle" :style="{height: width + 'px', width: width + 'px'}">
<svg viewBox="0 0 100 100">
<defs>
<linearGradient id="blue" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#243D93;stop-opacity:1" />
<stop offset="100%" style="stop-color:#4EFFDC;stop-opacity:1" />
</linearGradient>
</defs>
<path
class="el-progress-circle__track"
:d="trackPath"
stroke="#464C63"
:stroke-width="relativeStrokeWidth"
fill="none"
:style="trailPathStyle"></path>
<path
class="el-progress-circle__path"
:d="trackPath"
:stroke="stroke"
fill="none"
stroke-linecap="butt"
:stroke-width="percentage ? relativeStrokeWidth : 0"
:style="circlePathStyle"></path>
</svg>
<div class="pointer">
<div class="pointer-round"></div>
<div class="pointer-circle"></div>
<div class="pointer-line" :style="{transform: `rotate(${rotateDeg}deg)`}"></div>
</div>
</div>
</div>
<div class="middle">
<p><span>{{ data[0][value] }}</span></p>
<h2>{{ data[0][keys] }}</h2>
</div>
<div class="right">
<div class="summary7-item" v-for="(item, index) in data" :key="index" v-if="index < 4 && index !== 0">
<h2>{{ item[keys] }}</h2>
<p>{{ item[value] }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Summary7',
props: {
data: {
type: Array,
default: () => []
},
keys: {
type: String,
default: 'key'
},
value: {
type: String,
default: 'value'
},
},
data () {
return {
width: 70,
strokeWidth: 8
}
},
computed: {
rotateDeg () {
return this.percentage / 100 * 270 + (360 * 0.25) / 2 + 90
},
relativeStrokeWidth() {
return (this.strokeWidth / this.width * 100).toFixed(1);
},
percentage () {
if (this.data.length) {
return typeof this.data[0][this.value] === 'string' ? Number(this.data[0][this.value].replace('%', '')) : this.data[0][this.value]
}
return 0
},
radius() {
return parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);
},
perimeter() {
return 2 * Math.PI * this.radius;
},
trackPath() {
const radius = this.radius;
const isDashboard = true
return `
M 50 50
m 0 ${isDashboard ? '' : '-'}${radius}
a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '-' : ''}${radius * 2}
a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '' : '-'}${radius * 2}
`;
},
strokeDashoffset() {
const offset = -1 * this.perimeter * (1 - this.rate) / 2;
return `${offset}px`;
},
trailPathStyle() {
return {
strokeDasharray: `${(this.perimeter * this.rate)}px, ${this.perimeter}px`,
strokeDashoffset: this.strokeDashoffset
};
},
circlePathStyle() {
return {
strokeDasharray: `${this.perimeter * this.rate * (this.percentage / 100) }px, ${this.perimeter}px`,
strokeDashoffset: this.strokeDashoffset,
transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease'
};
},
stroke() {
return 'url(#blue)';
},
rate() {
return 0.75
},
},
methods: {
getCurrentColor(percentage) {
if (typeof this.color === 'function') {
return this.color(percentage);
} else if (typeof this.color === 'string') {
return this.color;
} else {
return this.getLevelColor(percentage);
}
},
}
}
</script>
<style lang="scss" scoped>
.summary7 {
display: flex;
align-items: center;
justify-content: space-between;
width: 380px;
height: 124px;
padding: 0 44px;
background: url(../asset/summary6-bg.svg);
background-size: 100% 100%;
.el-progress-circle {
position: relative;
.pointer-round {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 20px;
height: 20px;
border: 1px solid #2E69FF;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.pointer-circle {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 8px;
height: 8px;
background: #FDDD60;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.pointer-line {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 35px;
height: 1px;
background: #FDDD60;
transform: rotate(90deg);
transform-origin: 0 0 0;
}
}
div {
box-sizing: border-box;
}
.left {
position: relative;
top: 5px;
}
.middle {
margin: 0 16px;
p {
display: flex;
align-items: baseline;
justify-content: center;
font-size: 36px;
font-weight: bold;
color: #FFFFFF;
line-height: 32px;
text-align: center;
background-image: linear-gradient(180deg, #FFFFFF 0%, #FFDD8C 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
i {
font-size: 16px;
}
}
h2 {
display: flex;
align-items: baseline;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
background-image: linear-gradient(180deg, #FFFFFF 0%, #C7C7C7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.right {
}
.summary7-item {
display: flex;
position: relative;
align-items: center;
h2 {
flex: 1;
line-height: 24px;
margin-right: 8px;
color: #A8D7F3;
font-size: 12px;
font-weight: normal;
text-align: right;
}
p {
font-weight: 700;
font-size: 15px;
color: #fff;
}
}
}
</style>

View File

@@ -0,0 +1,117 @@
<template>
<div class="summary9">
<div class="summary9-item" v-for="(item, index) in data" :key="index">
<h2>{{ item[key] }}</h2>
<p>{{ item[value] }}</p>
<i></i>
<div>
<span>{{ item.text }}</span>
<i :style="{color: item.percentage < 0 ? '#FCD25D' : '#1BB249'}">{{ item.percentage > 0 ? '+' + item.percentage : item.percentage }}</i>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'summary9',
props: {
data: {
type: Array,
default: () => []
},
key: {
type: String,
default: 'keys'
},
value: {
type: String,
default: 'value'
},
text: {
type: String,
default: '同比上月'
},
percentage: {
type: String,
default: 'percentage'
}
},
data () {
return {
}
}
}
</script>
<style lang="scss" scoped>
.summary9 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
div {
box-sizing: border-box;
}
.summary9-item {
display: flex;
position: relative;
align-items: center;
flex-direction: column;
width: 132px;
height: 160px;
padding-top: 32px;
background-image: url(../asset/summary9-bg.svg);
background-size: 100% 100%;
div {
display: flex;
align-items: center;
margin-top: 8px;
line-height: 20px;
span {
color: #B6DFFF;
font-size: 12px;
}
i {
color: #1BB249;
font-size: 12px;
font-style: normal;
}
}
& > i {
width: 60px;
height: 1px;
margin: 0 auto;
background: #0A91FB;
}
h2 {
line-height: 27px;
color: #0A91FB;
font-size: 14px;
}
p {
line-height: 35px;
margin: 0 0 4px;
font-size: 32px;
font-weight: 700;
color: #fff;
}
}
}
</style>

View File

@@ -0,0 +1,540 @@
<template>
<section class="AiDvWrapper">
<dv-full-screen-container>
<div class="viewPanel column" flex>
<el-row type="flex" class="headerPane">
<div class="fill topPane">
<div class="viewTabs" flex>
<div v-for="view in tabs" :key="view.id" class="btn" :class="{active:view.id==active}" flex
@click="$emit('change',view.id)">{{ view.label }}
</div>
<div v-if="hasMoreDvs" class="btn more" :class="{active:isMoreTabs}" flex>更多
<div class="moreViews">
<div v-for="view in moreTabs" :key="view.id" v-text="view.label"
class="moreViewItem" :class="{active:view.id==active}"
:popper-options="{boundariesElement:'AiDvWrapper'}"
@click="$emit('change',view.id)"/>
</div>
</div>
</div>
<div class="headerBottomBorder">
<div class="breatheLights"/>
</div>
</div>
<div class="headerCenter">
<div class="headerZone">
<div ref="fly" class="fly"/>
<span>{{ title }}</span>
</div>
</div>
<div class="fill topPane">
<div class="settingZone" flex>
<right-top-border class="time">{{ currentTime }}</right-top-border>
<right-top-border class="setting" @click.native.stop="dialog=true"/>
<right-top-border class="fullscreen" @click.native.stop="handleFullScreen"/>
</div>
<div class="headerBottomBorder right">
<div class="breatheLights"/>
</div>
</div>
</el-row>
<div class="fill">
<slot/>
</div>
</div>
</dv-full-screen-container>
<ai-dialog :visible.sync="dialog" title="设置" @onConfirm="handleSetting" width="500px" class="settingDialog">
<el-form size="mini">
<el-form-item label="轮播频次">
<el-input-number v-model="setting.splitViewTime" :min="0" controls-position="right"/>
</el-form-item>
</el-form>
</ai-dialog>
</section>
</template>
<script>
import {fullScreenContainer} from '@jiaminghi/data-view'
import {gsap} from 'gsap'
import {MotionPathPlugin} from "gsap/MotionPathPlugin.js"
import Vue from "vue";
import RightTopBorder from "./rightTopBorder";
Vue.use(fullScreenContainer)
export default {
name: "AiDvWrapper",
components: {RightTopBorder},
model: {
prop: 'value',
event: 'change'
},
props: {
title: {default: "数字乡村数据大屏"},
views: {
default: () => []
},
value: {default: ''}
},
computed: {
active: {
set(v) {
this.$emit('change', v)
},
get() {
return this.value || this.views?.[0]?.id
}
},
hasMoreDvs() {
return this.views.length > 4
},
tabs() {
return !this.hasMoreDvs ? this.views : this.views.slice(0, 3)
},
moreTabs() {
return this.views?.slice(3) || []
},
isMoreTabs() {
return this.moreTabs?.some(e => e.id == this.active)
}
},
data() {
return {
currentTime: '',
fullscreen: false,
dialog: false,
setting: {splitViewTime: 0}
}
},
methods: {
handleFullScreen() {
this.fullscreen = !this.fullscreen
if (this.fullscreen) {
let el = document.documentElement;
let rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
el.mozRequestFullScreen || el.msRequestFullScreen;
rfs.call(el)
} else {
let el = document;
let cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
el.mozCancelFullScreen || el.exitFullScreen;
cfs.call(el)
}
},
initFly() {
gsap.registerPlugin(MotionPathPlugin);
const rand = (min, max) => min + (max - min) * Math.random(),
startFly = (p) => {
gsap.timeline()
.fromTo(p, {
x: rand(0, 600),
y: 90 - rand(8, 50),
scale: rand(1, 3),
}, {
y: 0,
ease: 'elastic.easeInOut',
duration: rand(2, 6),
onComplete: () => {
startFly(p, true);
}
}, 0)
.fromTo(p, {
opacity: 1
}, {
opacity: 0,
duration: rand(1, 1.5),
yoyo: true,
repeat: -1,
ease: 'power4.in'
}, 0)
}
setTimeout(() => {
//初始化标题萤火效果
let numP = 70;
for (let i = 0; i <= numP; i++) {
let p = document.createElement('div');
p.id = "p" + i;
this.$refs.fly?.appendChild(p)
setTimeout(() => startFly(p), 1000)
}
}, 1000)
},
handleSetting() {
if (this.setting.timer) clearInterval(this.setting.timer)
let count = 0
if (this.setting?.splitViewTime > 0) {
this.setting.timer = setInterval(() => {
if (this.views.length > 0) {
count++
this.active = this.views?.[count % this.views.length]?.id
}
}, this.setting.splitViewTime * 1000)
}
this.dialog = false
}
},
created() {
setInterval(() => {
this.currentTime = this.$moment().format("YYYY/MM/DD HH:mm:ss")
}, 1000)
},
mounted() {
this.initFly()
}
}
</script>
<style lang="scss" scoped>
@font-face {
font-family: DIN;
src: url("assets/D-DINExp.otf");
}
@import url('../../lib/animation.scss');
.AiDvWrapper {
.viewPanel {
position: relative;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("https://cdn.cunwuyun.cn/dvcp/dv/background.png");
padding: 0 0 20px;
box-sizing: border-box;
& > .fill {
width: 100%;
padding: 0 40px;
box-sizing: border-box;
}
}
::v-deep.headerPane {
height: 120px;
width: 100%;
padding: 0 10px;
position: relative;
color: #fff;
.topPane {
z-index: 5;
}
.viewTabs {
height: 60px;
font-size: 15px;
overflow: visible;
.btn {
cursor: pointer;
justify-content: center;
min-width: 120px;
height: 48px;
background-repeat: no-repeat;
background-position: center;
background-image: url("assets/viewTabBtn.svg");
&.more {
position: relative;
overflow: visible;
&:hover {
background-image: url("assets/moreViewsBtn.svg");
.moreViews {
display: block;
}
}
}
&.active {
position: relative;
background-image: none;
&:before {
content: " ";
display: block;
position: absolute;
width: 126px;
height: 38px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-image: url("assets/viewTabBtn-active.svg");
}
}
& + .btn, & + .moreTabs {
margin-left: 10px;
}
}
}
.settingZone {
font-family: DIN, serif;
height: 60px;
justify-content: flex-end;
font-size: 18px;
z-index: 5;
.rightTopBorder + .rightTopBorder {
margin-left: 10px;
}
.time {
width: 200px;
}
.setting {
background-image: url("assets/setting.svg");
}
.fullscreen {
background-image: url("assets/fullscreen.svg");
}
}
.headerCenter {
width: 880px;
height: 90px;
z-index: 3;
background-repeat: no-repeat;
background-position: center -32px;
background-image: url("assets/headerCenterBg1.svg");
&:before {
content: " ";
display: block;
position: absolute;
background: linear-gradient(180deg, #040718 0%, rgba(4, 7, 24, 0) 100%);
top: 0;
left: 0;
right: 0;
pointer-events: none;
height: 64px;
z-index: 4;
}
.headerZone {
position: relative;
margin: 0 auto;
width: 760px;
height: 124px;
background-repeat: no-repeat;
background-image: url("assets/headerCenterBorderLight.svg"), url("assets/headerCenterBorder.svg"), url("assets/headerCenterBg2.png");
background-position: center bottom, center 0, center -20px;
overflow: visible;
& > span {
position: absolute;
left: 50%;
top: calc(50% - 20px);
transform: translate(-50%, -50%);
white-space: nowrap;
font-size: 40px;
line-height: 47px;
letter-spacing: 5px;
text-shadow: 0 0 8px #1365FF, 0 0 2px rgba(133, 181, 255, .5);
z-index: 9;
font-weight: bold;
}
.fly {
position: absolute;
top: 0;
width: 600px;
height: 90px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
& > div {
width: 0;
box-shadow: 0 0 1px 1px #0aa5ff;
}
}
}
}
.headerBottomBorder {
position: relative;
width: 538px;
height: 15px;
background-image: url("assets/headerBottomBorder.svg");
&:before {
content: " ";
display: block;
position: absolute;
left: -3px;
bottom: -3px;
width: 40px;
height: 12px;
background-image: url("assets/headerBottomLight.svg");
}
.breatheLights {
position: absolute;
right: -7px;
bottom: -20px;
transform: translateX(100%);
width: 132px;
height: 20px;
animation: breathes 1.5s ease-in-out infinite alternate;
animation-delay: .5s;
display: flex;
background-repeat: no-repeat;
&:before {
transform: translateX(calc(6px - 100%));
display: block;
content: " ";
width: 44px;
height: 20px;
animation: breathes 1.5s ease-in-out infinite alternate;
}
&:after {
transform: translateX(-6px);
display: block;
content: " ";
width: 44px;
height: 20px;
animation: breathes 1.5s infinite alternate;
animation-delay: 1s;
}
}
&.right {
float: right;
transform: rotateY(180deg);
}
}
.moreViews {
display: none;
position: absolute;
bottom: 0;
transform: translateY(100%);
width: 120px;
min-width: 120px;
padding: 0;
background: rgba(9, 43, 75, 0.5);
box-shadow: 0 0 8px 0 #20B8FF inset;
border: 1px solid #66DBFF;
border-radius: 0;
z-index: 2;
.moreViewItem {
height: 44px;
width: 100px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #0C5369;
margin: 0 10px;
color: #fff;
cursor: pointer;
&:last-of-type {
border-bottom: none;
}
&.active, &:hover {
color: #FFDB52;
}
}
}
}
::v-deep.settingDialog {
.ai-dialog {
background: #1D2127;
box-shadow: 0 0 4px 0 #206EFF;
border: 1px solid #4283FF;
color: #fff;
.el-dialog__header {
border-radius: 0;
box-shadow: none;
line-height: 28px;
font-size: 20px;
font-family: FZZZHONGJW--GB1-0, FZZZHONGJW--GB1;
text-shadow: 0 0 8px #1365FF;
background: linear-gradient(270deg, #F0F4FF 0%, #FFFFFF 51%, #F0F4FF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
.ai-dialog__header {
border-bottom: none;
}
}
.el-dialog__footer {
background: inherit;
}
}
.el-form {
.el-form-item__label {
color: #fff;
}
.el-input:after {
position: absolute;
display: block;
right: 32px;
top: 50%;
content: "秒";
transform: translateY(-50%);
font-size: 12px;
}
.el-input__inner {
background: #262C33;
border: 1px solid #030411;
border-radius: 0;
color: #fff;
text-align: start;
position: relative;
}
.el-input-number__decrease, .el-input-number__increase {
border-color: #030411;
background: #262C33;
color: #fff;
}
}
}
}
@keyframes breatheList {
0% {
border-color: rgba(#FFC24A, 1);
box-shadow: 0 0 8px 0 #FFC24A, 0 0 4px 0 #FFFAE7;
}
50% {
border-color: rgba(#FFC24A, .4);
box-shadow: 0 0 8px 0 rgba(#FFC24A, .4), 0 0 4px 0 rgba(#FFFAE7, .4);
}
100% {
border-color: rgba(#FFC24A, .2);
box-shadow: 0 0 8px 0 rgba(#FFC24A, .2), 0 0 4px 0 rgba(#FFFAE7, .2);
}
}
@keyframes breathes {
0% {
background-image: url("assets/parallelogram.svg");
}
50% {
background-image: url("assets/parallelogram1.svg");
}
100% {
background-image: url("assets/parallelogram2.svg");
}
}
</style>

Binary file not shown.

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>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>形状结合</title>
<defs>
<path d="M1902,22 L1902,38 L1886,38 L1886,22 L1902,22 Z M1901,23 L1887,23 L1887,37 L1901,37 L1901,23 Z M1895.35711,30.65 L1898.00355,33.2965534 L1898.00355,31.0035534 L1899.00355,31.0035534 L1899.00355,35.0035534 L1895.00355,35.0035534 L1895.00355,34.0035534 L1897.29655,34.0035534 L1894.65,31.3571068 L1895.35711,30.65 Z M1893,25 L1893,26 L1890.707,26 L1893.35355,28.6464466 L1892.64645,29.3535534 L1890,26.707 L1890,29 L1889,29 L1889,25 L1893,25 Z" id="path-1"></path>
<filter x="-56.2%" y="-56.2%" width="212.5%" height="212.5%" 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(-1880.000000, -16.000000)" fill-rule="nonzero">
<g id="形状结合">
<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>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="538px" height="15px" viewBox="0 0 538 15" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>编组</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="头部导航备份" transform="translate(-10.000000, -57.000000)">
<g id="编组" transform="translate(10.000000, 57.000000)">
<path d="M199,0 L196,3 L240,3 L242,5 L145.333,5 L132,15 L0,15 L2.21428571,13 L57.012,13 L60.0307692,10 L130.667,10 L144,0 L199,0 Z M425,9 L428,12 L453,12 L455,14 L422,14 L417,9 L425,9 Z M407,11 L409,13 L149,13 L151,11 L407,11 Z M538,3 L538,5 L254,5 L252,3 L538,3 Z"
id="line_2" fill="#0085FF" opacity="0.5"
transform="translate(269.000000, 7.500000) scale(-1, 1) translate(-269.000000, -7.500000) "></path>
<polygon id="blue_blocks_2" fill="#0065FF" opacity="0.800000012"
transform="translate(511.000000, 6.000000) scale(-1, 1) translate(-511.000000, -6.000000) "
points="495 4 527 4 531 8 491 8"></polygon>
<polygon id="矩形" fill="#0065FF" opacity="0.5" points="76 10 46 10 42 14 72 14"></polygon>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="12px" viewBox="0 0 40 12" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>矩形备份 4</title>
<defs>
<polygon id="path-1" points="-3.41060513e-13 0 32 0 28 4 -4.54747351e-13 4"></polygon>
<filter x="-18.8%" y="-150.0%" width="137.5%" height="400.0%" filterUnits="objectBoundingBox" id="filter-2">
<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.760001846 0 0 0 0 0.291006098 0 0 0 1 0" type="matrix"
in="shadowBlurOuter1"></feColorMatrix>
</filter>
<filter x="-18.8%" y="-150.0%" width="137.5%" height="400.0%" filterUnits="objectBoundingBox" id="filter-3">
<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.899941501 0 0 0 0 0.547561571 0 0 0 1 0" type="matrix"
in="shadowInnerInner1"></feColorMatrix>
</filter>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="头部导航备份" transform="translate(-6.000000, -63.000000)">
<g id="head_left" transform="translate(10.000000, 57.000000)">
<g id="矩形备份-4" transform="translate(0.000000, 10.000000)">
<use fill="black" fill-opacity=".6" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FFC143" fill-opacity=".6" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity=".6" filter="url(#filter-3)" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="928px" height="156px" viewBox="0 0 928 156" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>title_2</title>
<defs>
<path d="M844,0 L844,38.8055502 L812.851491,72 L31.1485094,72 L0,38.8055502 L0,0 L844,0 Z M840,0 L4,0 L4,37.194 L32.852,68 L811.147,68 L840,37.193 L840,0 Z" id="path-1"></path>
<filter x="-7.9%" y="-79.2%" width="115.9%" height="286.1%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="20" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.16179497 0 0 0 0 0.595551419 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter2"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter2" result="shadowOffsetOuter2"></feOffset>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.0240472561 0 0 0 0 0.420474739 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.5">
<g id="头部导航备份" transform="translate(-496.000000, 32.000000)">
<g id="title_2" transform="translate(538.000000, 0.000000)">
<polygon id="填充" fill-opacity="0.5" fill="#4B6FFF" points="2 0 842 0 842 38 812 70 32 70 2 38"></polygon>
<g id="形状">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#B3E7FB" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

View File

@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="782px" height="106px" viewBox="0 0 782 106" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>形状</title>
<defs>
<path d="M759.998,0 L687.998105,92 L606.999,92 L600.999,96 L558.999,96 L552.999,92 L432.662333,92 L416.662,80 L343.336,80 L327.335667,92 L206.999,92 L200.999,96 L158.999,96 L152.999562,92 L71.999895,92 L1.70530257e-13,0 L759.998,0 Z M754.526,0 L5.471,0 L73.738,88 L326.002,88 L342.002333,76 L417.995667,76 L433.996,88 L686.259,88 L754.526,0 Z"
id="path-1"></path>
<filter x="-2.3%" y="-15.6%" width="104.5%" height="131.2%" 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="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.0240472561 0 0 0 0 0.420474739 0 0 0 0 1 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(-569.000000, 0.000000)">
<g id="形状" transform="translate(580.000000, 0.000000)">
<animate attributeName='opacity' dur='2s' values="1;.6;1" repeatCount="indefinite"/>
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#B3E7FB" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="164px" height="68px" viewBox="0 0 164 68" 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="413 88 347 88 336 96 424 96"></polygon>
<filter x="-65.3%" y="-562.5%" width="230.6%" height="1225.0%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.141520579 0 0 0 0 0.448441981 0 0 0 0 1 0 0 0 1 0" type="matrix"
in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMorphology radius="3" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter2"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter2" result="shadowOffsetOuter2"></feOffset>
<feGaussianBlur stdDeviation="12" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.21875 0 0 0 0 0.423793979 0 0 0 0 1 0 0 0 1 0" type="matrix"
in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
<filter x="-49.9%" y="-393.8%" width="199.9%" height="887.5%" filterUnits="objectBoundingBox" id="filter-3">
<feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
<feGaussianBlur stdDeviation="1" 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.772446646 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix"
in="shadowInnerInner1"></feColorMatrix>
</filter>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="头部导航备份" transform="translate(-878.000000, -58.000000)">
<g id="中间色块" transform="translate(580.000000, 0.000000)">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#B5FBFF" fill-rule="evenodd" xlink:href="#path-1">
<animate attributeName='opacity' dur='2s' values="0;1;0" repeatCount="indefinite"/>
</use>
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="120px" height="32px" viewBox="0 0 120 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 2</title>
<defs>
<polygon id="path-1" points="0 2.84217094e-14 102 0 120 18 120 32 0 32"></polygon>
<filter x="-3.3%" y="-12.5%" width="106.7%" height="125.0%" filterUnits="objectBoundingBox" id="filter-2">
<feGaussianBlur stdDeviation="4" 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 0.126200457 0 0 0 0 0.722235433 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<polygon id="path-3" points="120 0 120 8 112 0"></polygon>
<filter x="-18.8%" y="-18.8%" width="137.5%" height="137.5%" filterUnits="objectBoundingBox" id="filter-4">
<feGaussianBlur stdDeviation="1.5" 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 0.126200457 0 0 0 0 0.722235433 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">
<g id="人口数据" transform="translate(-400.000000, -14.000000)">
<g id="编组-2" transform="translate(400.000000, 14.000000)">
<g id="矩形">
<use fill-opacity="0.5" fill="#092B4B" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<path stroke="#66DBFF" stroke-width="0.5" d="M101.896447,0.25 L119.75,18.1035534 L119.75,31.75 L0.25,31.75 L0.25,0.25 L101.896447,0.25 Z" stroke-linejoin="square"></path>
</g>
<g id="矩形">
<use fill-opacity="0.5" fill="#092B4B" fill-rule="evenodd" xlink:href="#path-3"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<path stroke="#66DBFF" stroke-width="0.5" d="M119.75,0.25 L119.75,7.39644661 L112.603553,0.25 L119.75,0.25 Z" stroke-linejoin="square"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="44px" height="20px" viewBox="0 0 44 20" 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="84 0 110 0 106 4 80 4"></polygon>
<filter x="-40.0%" y="-300.0%" width="180.0%" height="700.0%" filterUnits="objectBoundingBox" id="filter-2">
<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="-33.3%" y="-250.0%" width="166.7%" height="600.0%" filterUnits="objectBoundingBox" id="filter-3">
<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="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="折线图" transform="translate(-508.000000, -76.000000)">
<g id="矩形" transform="translate(570.000000, 86.000000) scale(-1, 1) translate(-570.000000, -86.000000) translate(515.000000, 84.000000)">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FFC143" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="44px" height="20px" viewBox="0 0 44 20" 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="84 0 110 0 106 4 80 4"></polygon>
<filter x="-40.0%" y="-300.0%" width="180.0%" height="700.0%" filterUnits="objectBoundingBox" id="filter-2">
<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="-33.3%" y="-250.0%" width="166.7%" height="600.0%" filterUnits="objectBoundingBox" id="filter-3">
<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="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="折线图" transform="translate(-508.000000, -76.000000)">
<g id="矩形"
transform="translate(570.000000, 86.000000) scale(-1, 1) translate(-570.000000, -86.000000) translate(515.000000, 84.000000)">
<use fill="black" fill-opacity=".4" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FFC143" fill-opacity=".4" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity=".4" filter="url(#filter-3)" xlink:href="#path-1"></use>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="44px" height="20px" viewBox="0 0 44 20" 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="84 0 110 0 106 4 80 4"></polygon>
<filter x="-40.0%" y="-300.0%" width="180.0%" height="700.0%" filterUnits="objectBoundingBox" id="filter-2">
<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="-33.3%" y="-250.0%" width="166.7%" height="600.0%" filterUnits="objectBoundingBox" id="filter-3">
<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="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="折线图" transform="translate(-508.000000, -76.000000)">
<g id="矩形"
transform="translate(570.000000, 86.000000) scale(-1, 1) translate(-570.000000, -86.000000) translate(515.000000, 84.000000)">
<use fill="black" fill-opacity=".1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FFC143" fill-opacity=".1" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity=".1" filter="url(#filter-3)" xlink:href="#path-1"></use>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>形状结合</title>
<defs>
<path d="M1854,22 L1855.0708,24.679 L1857.9282,24.2679492 L1859.9282,27.7320508 L1858.1438,29.999 L1859.9282,32.2679492 L1857.9282,35.7320508 L1855.0718,35.321 L1854,38 L1850,38 L1848.9278,35.32 L1846.0718,35.7320508 L1844.0718,32.2679492 L1845.8558,30 L1844.0718,27.7320508 L1846.0718,24.2679492 L1848.9278,24.679 L1850,22 L1854,22 Z M1853.322,23 L1850.676,23 L1849.56392,25.7808587 L1846.599,25.353 L1845.276,27.645 L1847.1281,30 L1845.276,32.354 L1846.598,34.645 L1849.56392,34.2178686 L1850.677,37 L1853.322,37 L1854.43556,34.2191413 L1857.4,34.646 L1858.723,32.354 L1856.87138,29.9987274 L1858.723,27.645 L1857.4,25.353 L1854.43429,25.7808587 L1853.322,23 Z M1852,27 C1853.65685,27 1855,28.3431458 1855,30 C1855,31.6568542 1853.65685,33 1852,33 C1850.34315,33 1849,31.6568542 1849,30 C1849,28.3431458 1850.34315,27 1852,27 Z M1852,28 C1850.89543,28 1850,28.8954305 1850,30 C1850,31.1045695 1850.89543,32 1852,32 C1853.10457,32 1854,31.1045695 1854,30 C1854,28.8954305 1853.10457,28 1852,28 Z" id="path-1"></path>
<filter x="-59.3%" y="-56.2%" width="218.7%" height="212.5%" 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(-1838.000000, -16.000000)" fill-rule="nonzero">
<g id="形状结合">
<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>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@@ -0,0 +1,50 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="126px" height="38px" viewBox="0 0 126 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 4备份</title>
<defs>
<polygon id="path-1" points="0 2.84217094e-14 102 0 120 18 120 32 0 32"></polygon>
<filter x="-3.8%" y="-14.1%" width="107.5%" height="128.1%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.520060506 0 0 0 0 0 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<filter x="-6.2%" y="-23.4%" width="112.5%" height="146.9%" filterUnits="objectBoundingBox" id="filter-3">
<feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
<feGaussianBlur stdDeviation="4" 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 1 0 0 0 0 0.595413728 0 0 0 0 0.13954959 0 0 0 0.996011801 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<polygon id="path-4" points="120 0 120 8 112 0"></polygon>
<filter x="-56.2%" y="-56.2%" width="212.5%" height="212.5%" filterUnits="objectBoundingBox" id="filter-5">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.520060506 0 0 0 0 0 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<filter x="-62.5%" y="-62.5%" width="225.0%" height="225.0%" filterUnits="objectBoundingBox" id="filter-6">
<feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
<feGaussianBlur stdDeviation="1.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 1 0 0 0 0 0.595413728 0 0 0 0 0.13954959 0 0 0 0.996011801 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-2" transform="translate(3.000000, 3.000000)">
<g id="矩形">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill-opacity="0.198153409" fill="#A15400" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
<path stroke="#FFCC52" stroke-width="0.5" d="M101.896447,0.25 L119.75,18.1035534 L119.75,31.75 L0.25,31.75 L0.25,0.25 L101.896447,0.25 Z" stroke-linejoin="square"></path>
</g>
<g id="形状结合">
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
<use fill-opacity="0.198153409" fill="#A15400" fill-rule="evenodd" xlink:href="#path-4"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-4"></use>
<path stroke="#FFCC52" stroke-width="0.5" d="M119.75,0.25 L119.75,7.39644661 L112.603553,0.25 L119.75,0.25 Z" stroke-linejoin="square"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="120px" height="32px" viewBox="0 0 120 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>viewTabBtn</title>
<defs>
<polygon id="path-1" points="0 2.84217094e-14 102 0 120 18 120 32 0 32"></polygon>
<filter x="-3.3%" y="-12.5%" width="106.7%" height="125.0%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="2" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
<feGaussianBlur stdDeviation="3" 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.0261281366 0 0 0 0 0.0922953427 0 0 0 0 0.77753349 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<polygon id="path-3" points="120 0 120 8 112 0"></polygon>
<filter x="-25.0%" y="-25.0%" width="150.0%" height="150.0%" filterUnits="objectBoundingBox" id="filter-4">
<feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
<feGaussianBlur stdDeviation="1.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.0505411679 0 0 0 0 0.17474998 0 0 0 0 0.820295693 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-3">
<g id="矩形">
<use fill-opacity="0.3" fill="#000972" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<path stroke="#4C7BFF" stroke-width="0.5" d="M101.896447,0.25 L119.75,18.1035534 L119.75,31.75 L0.25,31.75 L0.25,0.25 L101.896447,0.25 Z" stroke-linejoin="square"></path>
</g>
<g id="形状结合">
<use fill-opacity="0.2" fill="#0017AA" fill-rule="evenodd" xlink:href="#path-3"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<path stroke="#4C7BFF" stroke-width="0.5" d="M119.75,0.25 L119.75,7.39644661 L112.603553,0.25 L119.75,0.25 Z" stroke-linejoin="square"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@@ -0,0 +1,62 @@
<template>
<section class="rightTopBorder">
<div class="corner" v-for="item in border" :key="item" :class="item"/>
<slot/>
</section>
</template>
<script>
export default {
name: "rightTopBorder",
data() {
return {
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
}
}
}
</script>
<style lang="scss" scoped>
.rightTopBorder {
position: relative;
height: 32px;
min-width: 32px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 4px 2px #1745DE inset;
background: rgba(#000972, .3) no-repeat center;
.corner {
height: 18px;
width: 18px;
position: absolute;
display: block;
background-image: url("assets/corner.svg");
background-repeat: no-repeat;
&.left-top {
left: -6px;
top: -6px;
transform: rotateY(180deg);
}
&.right-top {
right: -6px;
top: -6px;
}
&.left-bottom {
left: -6px;
bottom: -6px;
transform: rotateX(180deg) rotateY(180deg);
}
&.right-bottom {
right: -6px;
bottom: -6px;
transform: rotateX(180deg);
}
}
}
</style>

View File

@@ -0,0 +1,17 @@
@keyframes breathe {
0% {
opacity: .2;
}
100% {
opacity: 1;
}
}
@keyframes floatCard {
0% {
transform: translateY(5px);
}
100% {
transform: translateY(-5px);
}
}

18
project/dvui/package.json Normal file
View File

@@ -0,0 +1,18 @@
{
"name": "dvcp-dv-ui",
"author": "kubbo",
"version": "2.0.1",
"description": "数据大屏UI库",
"main": "dist/index.js",
"publishConfig": {
"registry": "http://192.168.1.87:4873/"
},
"dependencies": {
"dvcp-ui": "^1.42.2",
"@amap/amap-jsapi-loader": "^1.0.1",
"@jiaminghi/data-view": "^2.10.0",
"gsap": "^3.7.1",
"video.js": "^6.13.0",
"videojs-contrib-hls": "^5.15.0"
}
}