147 lines
5.5 KiB
Vue
147 lines
5.5 KiB
Vue
<script>
|
|
const w = 12, h = 10, r = 200
|
|
export default {
|
|
name: "AiDvSvg",
|
|
props: {
|
|
title: {default: "慧智会言"},
|
|
},
|
|
data() {
|
|
return {
|
|
border: "",
|
|
box: {},
|
|
height: 0,
|
|
width: 0
|
|
}
|
|
},
|
|
methods: {
|
|
init() {
|
|
let {width, height} = this.$el.getBoundingClientRect()
|
|
width -= 13 * 2
|
|
height -= 13 * 2
|
|
this.width = width
|
|
this.height = height
|
|
this.getBorder(width, height)
|
|
const vv = width - w
|
|
this.box = {
|
|
top: `m${vv - r + 33},${13 + h}l7,0l-2.5,-3l-7,0l2.5,3zm-1.5,0l-4.5,-5.5l-7,0l4.5,5.5l7,0zm-21,-7l6,7l7,0l-6,-7l-7,0z`,
|
|
leftBottom: `m46.5,${height + 10}l7,0l-2.5,-3l-7,0l2.5,3zm-1.5,0l-4.5,-5.5l-7,0l4.5,5.5l7,0zm-21,-7l6,7l7,0l-6,-7l-7,0z`,
|
|
rightBottom: `m${vv - 8},${height + 8}l-2.5,3l7,0l2.5,-3l-7,0zm17.5,-2.5l-7,0l-4.5,5.5l7,0l4.5,-5.5zm-3.5,5.5l7,0l6,-7l-7,0l-6,7z`,
|
|
}
|
|
},
|
|
getBorder(cw, ch) {
|
|
const vv = cw - w, hh = ch - h
|
|
this.border = `${w} 0,${cw - w * 2 - r} 0,${cw - w - r} ${h}, ${vv} ${h},${cw} ${h * 2},${cw} ${hh}, ${vv} ${ch},${w} ${ch},0 ${hh},0 ${h}`
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => this.init())
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="AiDvSvg">
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
|
|
<defs>
|
|
<polygon :points="border" id="path-1"/>
|
|
<filter id="filter-2" filterUnits="objectBoundingBox" height="105.6%" width="108.5%" y="-3.3%" x="-4.2%">
|
|
<feGaussianBlur result="shadowBlurOuter1" in="shadowOffsetOuter1" stdDeviation="6"/>
|
|
</filter>
|
|
<linearGradient id="linearGradient-3" y2="50.1547687%" x2="23.733%" y1="49.6234888%" x1="23.7333333%">
|
|
<stop offset="0%" stop-color="#0D5B8C"/>
|
|
<stop offset="61.81%" stop-opacity="0.18" stop-color="#1275B3"/>
|
|
<stop offset="100%" stop-opacity="0.01" stop-color="#137ABA"/>
|
|
</linearGradient>
|
|
<linearGradient id="linearGradient-4" y2="50%" x2="100%" y1="50%" x1="0%">
|
|
<stop offset="0%" stop-opacity="0" stop-color="#4ACCED"/>
|
|
<stop offset="48.88%" stop-color="#4ACCED"/>
|
|
<stop offset="100%" stop-opacity="0" stop-color="#49CDEE"/>
|
|
</linearGradient>
|
|
<linearGradient id="linearGradient-5" y2="50%" x2="100%" y1="50%" x1="0%">
|
|
<stop offset="0%" stop-opacity="0" stop-color="#A4EEEF"/>
|
|
<stop offset="48.88%" stop-color="#A4EEEF"/>
|
|
<stop offset="100%" stop-opacity="0" stop-color="#A4EEEF"/>
|
|
</linearGradient>
|
|
<linearGradient id="linearGradient-6" y2="50%" x2="100%" y1="50%" x1="0%">
|
|
<stop offset="0%" stop-color="#21EDED"/>
|
|
<stop offset="100%" stop-color="#276269"/>
|
|
</linearGradient>
|
|
<linearGradient id="linearGradient-7" y2="50%" x2="0%" y1="50%" x1="100%">
|
|
<stop offset="0%" stop-color="#21EDED"/>
|
|
<stop offset="100%" stop-color="#276269"/>
|
|
</linearGradient>
|
|
<linearGradient id="linearGradient-8" y2="50%" x2="100%" y1="50%" x1="0%">
|
|
<stop offset="0%" stop-opacity="0" stop-color="#0061AB"/>
|
|
<stop offset="51.39%" stop-color="#0061AB"/>
|
|
<stop offset="100%" stop-opacity="0" stop-color="#0062AB"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<g>
|
|
<g fill-rule="evenodd" fill="none" id="未央区">
|
|
<g id="弹窗6备份">
|
|
<g id="编组-11">
|
|
<g stroke-dasharray="0,0" id="路径">
|
|
<use id="svg_1" x="13" y="17" xlink:href="#path-1" filter="url(#filter-2)" fill="black"/>
|
|
<use id="svg_2" x="13" y="17" xlink:href="#path-1" fill-rule="evenodd" fill="#0A2234" fill-opacity="0.88" stroke="#22D3D4"/>
|
|
</g>
|
|
<!-- <path fill="url(#linearGradient-3)" id="路径" d="m497,46.5l-15,-14l-250.5,0l-16.5,-15.5l-188.5,0l-13.5,15.5l0,26.5l484,0l0,-12.5z"/>-->
|
|
<line stroke-dasharray="0,0" stroke-width="2" stroke="url(#linearGradient-4)" id="路径-3" y2="17.5" x2="175" y1="17.5" x1="26.5"/>
|
|
<line stroke-dasharray="0,0" stroke-width="2" stroke="url(#linearGradient-5)" id="路径-3" y2="17.5" x2="149.5" y1="17.5" x1="58"/>
|
|
<path fill="url(#linearGradient-6)" id="上部拼合图形" :d="box.top"/>
|
|
<path fill="url(#linearGradient-6)" id="左下拼合图形" :d="box.leftBottom"/>
|
|
<path fill="url(#linearGradient-7)" id="右下拼合图形" :d="box.rightBottom"/>
|
|
<line stroke-dasharray="0,0" stroke-width="2" stroke="url(#linearGradient-8)" id="底部亮线" :y2="height+10" :x2="width/2+110" :y1="height+10" :x1="width/2-110+26"/>
|
|
<line stroke-dasharray="0,0" stroke-width="2" stroke="url(#linearGradient-8)" id="标题下划线" y2="65" x2="248" y1="65" x1="23"/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<div class="close" @click="$emit('close')"/>
|
|
<div class="content">
|
|
<div class="header" v-text="title"/>
|
|
<slot/>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.AiDvSvg {
|
|
position: relative;
|
|
width: max(400px, 100%);
|
|
height: auto;
|
|
|
|
& > svg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 14px 33px;
|
|
|
|
.header {
|
|
padding: 16px 0;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.close {
|
|
background-image: url("./assets/close.png");
|
|
width: 24px;
|
|
height: 24px;
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 35px;
|
|
z-index: 6;
|
|
}
|
|
}
|
|
</style>
|