update code
parent
90ba323d33
commit
5edeac1084
|
|
@ -1,22 +1,54 @@
|
|||
<template>
|
||||
<div class="screen-module">
|
||||
<border-box6 v-if="border==6"/>
|
||||
<div class="screen-one-1-1">
|
||||
<div class="module-title"><span>{{label||''}}</span></div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="screen-module" :class="'border-' + border">
|
||||
<border-box6 v-if="border == 6" />
|
||||
<border-box1 v-if="border == 1" />
|
||||
<div class="screen-one-1-1">
|
||||
<div class="module-title"><span>{{ label || '' }}</span></div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
border:{
|
||||
type:Number
|
||||
props: {
|
||||
border: {
|
||||
type: Number
|
||||
},
|
||||
label:{
|
||||
type:String
|
||||
label: {
|
||||
type: String
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.screen-module {
|
||||
&.border-6 {
|
||||
position: relative;
|
||||
/deep/ .dv-border-svg-container{
|
||||
top:14px;
|
||||
}
|
||||
|
||||
.screen-one-1-1 {
|
||||
background: unset;
|
||||
.module-title{
|
||||
position: relative;
|
||||
top:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.border-1 {
|
||||
position: relative;
|
||||
background: rgba(5,12,25,0.6);
|
||||
.screen-one-1-1 {
|
||||
background: unset;
|
||||
.module-title{
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,77 +1,76 @@
|
|||
<template>
|
||||
<div class="dv-border-box-1">
|
||||
<svg class="border" :width="width" :height="height">
|
||||
<polygon
|
||||
:fill="backgroundColor"
|
||||
:points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
|
||||
38, ${
|
||||
height - 11
|
||||
} 41, ${
|
||||
height - 8
|
||||
} 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
|
||||
85, ${height - 6} ${
|
||||
width - 85
|
||||
}, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
|
||||
${width - 73}, ${
|
||||
height - 8
|
||||
} ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
|
||||
${width - 24}, ${
|
||||
height - 11
|
||||
} ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
|
||||
${width - 10}, ${
|
||||
height - 27
|
||||
} ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
|
||||
${width - 24}, 11 ${
|
||||
width - 38
|
||||
}, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
|
||||
${width - 81}, 10 ${
|
||||
width - 85
|
||||
}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`"
|
||||
<svg class="border" :width="width" :height="height">
|
||||
<polygon
|
||||
:fill="backgroundColor"
|
||||
:points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
|
||||
38, ${
|
||||
height - 11
|
||||
} 41, ${
|
||||
height - 8
|
||||
} 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
|
||||
85, ${height - 6} ${
|
||||
width - 85
|
||||
}, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
|
||||
${width - 73}, ${
|
||||
height - 8
|
||||
} ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
|
||||
${width - 24}, ${
|
||||
height - 11
|
||||
} ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
|
||||
${width - 10}, ${
|
||||
height - 27
|
||||
} ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
|
||||
${width - 24}, 11 ${
|
||||
width - 38
|
||||
}, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
|
||||
${width - 81}, 10 ${
|
||||
width - 85
|
||||
}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg v-for="item in border" :key="item" width="150px" height="150px" :class="`${item} border`">
|
||||
<polygon
|
||||
:fill="colorLeft"
|
||||
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
|
||||
>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
:values="`${colorLeft};${colorRight};${colorLeft}`"
|
||||
dur="0.5s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg v-for="item in border" :key="item" width="150px" height="150px" :class="`${item} border`">
|
||||
<polygon
|
||||
:fill="colorLeft"
|
||||
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
|
||||
>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
:values="`${colorLeft};${colorRight};${colorLeft}`"
|
||||
dur="0.5s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
<polygon
|
||||
:fill="colorRight"
|
||||
points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
|
||||
>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
:values="`${colorRight};${colorLeft};${colorRight}`"
|
||||
dur="0.5s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
<polygon
|
||||
:fill="colorLeft"
|
||||
points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
|
||||
>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
:values="`${colorLeft};${colorRight};transparent`"
|
||||
dur="1s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
</svg>
|
||||
</div>
|
||||
</polygon>
|
||||
<polygon
|
||||
:fill="colorRight"
|
||||
points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
|
||||
>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
:values="`${colorRight};${colorLeft};${colorRight}`"
|
||||
dur="0.5s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
<polygon
|
||||
:fill="colorLeft"
|
||||
points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
|
||||
>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
:values="`${colorLeft};${colorRight};transparent`"
|
||||
dur="1s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polygon>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { watch } from 'vue';
|
||||
|
||||
export default{
|
||||
props:{
|
||||
|
|
@ -86,21 +85,29 @@ import { watch } from 'vue';
|
|||
colorRight:{
|
||||
type:String,
|
||||
default:'#235fa7'
|
||||
},
|
||||
width:{
|
||||
type:Number,
|
||||
default:150
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default:150
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
border:['left-top', 'right-top', 'left-bottom', 'right-bottom']
|
||||
width:150,
|
||||
height:150,
|
||||
border:['left-top', 'right-top', 'left-bottom', 'right-bottom']
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(()=>{
|
||||
let resizeObserver = new ResizeObserver(els=>{
|
||||
console.log("--->",els)
|
||||
if(els.length>0){
|
||||
let el=els[0];
|
||||
this.width=el.contentRect?.width||150;
|
||||
this.height=el.contentRect?.height||150;
|
||||
}
|
||||
});
|
||||
resizeObserver.observe(this.$parent.$el);
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<div class="dv-border-box-2">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polygon
|
||||
:fill="backgroundColor"
|
||||
:points="`
|
||||
7, 7 ${width - 7}, 7 ${width - 7}, ${height - 7} 7, ${height - 7}
|
||||
`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
:stroke="color1"
|
||||
:points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`"
|
||||
/>
|
||||
<polyline
|
||||
:stroke="color2"
|
||||
:points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`"
|
||||
/>
|
||||
<circle :fill="color1" cx="11" cy="11" r="1" />
|
||||
<circle :fill="color1" :cx="width - 11" cy="11" r="1" />
|
||||
<circle :fill="color1" :cx="width - 11" :cy="height - 11" r="1" />
|
||||
<circle :fill="color1" cx="11" :cy="height - 11" r="1" />
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default{
|
||||
props:{
|
||||
backgroundColor:{
|
||||
type:String,
|
||||
default:'#00000000'
|
||||
},
|
||||
color1:{
|
||||
type:String,
|
||||
default:'#4fd2dd'
|
||||
},
|
||||
color2:{
|
||||
type:String,
|
||||
default:'#235fa7'
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
width:150,
|
||||
height:150,
|
||||
border:['left-top', 'right-top', 'left-bottom', 'right-bottom']
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(()=>{
|
||||
let resizeObserver = new ResizeObserver(els=>{
|
||||
console.log("--->",els)
|
||||
if(els.length>0){
|
||||
let el=els[0];
|
||||
this.width=el.contentRect?.width||150;
|
||||
this.height=el.contentRect?.height||150;
|
||||
}
|
||||
});
|
||||
resizeObserver.observe(this.$parent.$el);
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.dv-border-box-1 {
|
||||
// position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
.border {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.right-top {
|
||||
right: 0;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.left-bottom {
|
||||
bottom: 0;
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.right-bottom {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: rotateX(180deg) rotateY(180deg);
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<div class="dv-border-box-6">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polygon
|
||||
:fill="backgroundColor"
|
||||
:points="`
|
||||
9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
|
||||
`"
|
||||
/>
|
||||
|
||||
<circle :fill="colorRight" cx="5" cy="5" r="2" />
|
||||
<circle :fill="colorRight" :cx="width - 5" cy="5" r="2" />
|
||||
<circle :fill="colorRight" :cx="width - 5" :cy="height - 5" r="2" />
|
||||
<circle :fill="colorRight" cx="5" :cy="height - 5" r="2" />
|
||||
<polyline :stroke="colorLeft" :points="`10, 4 ${width - 10}, 4`" />
|
||||
<polyline
|
||||
:stroke="colorLeft"
|
||||
:points="`10, ${height - 4} ${width - 10}, ${height - 4}`"
|
||||
/>
|
||||
<polyline :stroke="colorLeft" :points="`5, 70 5, ${height - 70}`" />
|
||||
<polyline
|
||||
:stroke="colorLeft"
|
||||
:points="`${width - 5}, 70 ${width - 5}, ${height - 70}`"
|
||||
/>
|
||||
<polyline :stroke="colorLeft" :points="`3, 10, 3, 50`" />
|
||||
<polyline :stroke="colorLeft" :points="`7, 30 7, 80`" />
|
||||
<polyline :stroke="colorLeft" :points="`${width - 3}, 10 ${width - 3}, 50`" />
|
||||
<polyline :stroke="colorLeft" :points="`${width - 7}, 30 ${width - 7}, 80`" />
|
||||
<polyline
|
||||
:stroke="colorLeft"
|
||||
:points="`3, ${height - 10} 3, ${height - 50}`"
|
||||
/>
|
||||
<polyline
|
||||
:stroke="colorLeft"
|
||||
:points="`7, ${height - 30} 7, ${height - 80}`"
|
||||
/>
|
||||
<polyline
|
||||
:stroke="colorLeft"
|
||||
:points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`"
|
||||
/>
|
||||
<polyline
|
||||
:stroke="colorLeft"
|
||||
:points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default{
|
||||
props:{
|
||||
backgroundColor:{
|
||||
type:String,
|
||||
default:'#00000000'
|
||||
},
|
||||
colorLeft:{
|
||||
type:String,
|
||||
default:'#11eefd'
|
||||
},
|
||||
colorRight:{
|
||||
type:String,
|
||||
default:'#0078d2'
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
width:150,
|
||||
height:150,
|
||||
border:['left-top', 'right-top', 'left-bottom', 'right-bottom']
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(()=>{
|
||||
let resizeObserver = new ResizeObserver(els=>{
|
||||
console.log("--->",els)
|
||||
if(els.length>0){
|
||||
let el=els[0];
|
||||
this.width=el.contentRect?.width||150;
|
||||
this.height=el.contentRect?.height||150;
|
||||
}
|
||||
});
|
||||
resizeObserver.observe(this.$parent.$el);
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.dv-border-box-1 {
|
||||
// position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
.border {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.right-top {
|
||||
right: 0;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.left-bottom {
|
||||
bottom: 0;
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.right-bottom {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: rotateX(180deg) rotateY(180deg);
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<div class="dv-border-box-8">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<defs>
|
||||
<path :id="path" :d="pathD()" fill="transparent" />
|
||||
<radialGradient :id="gradient" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#fff" stop-opacity="1" />
|
||||
<stop offset="100%" stop-color="#fff" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
<mask :id="mask">
|
||||
<circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
|
||||
<animateMotion :dur="`${dur}s`" :path="pathD()" rotate="auto" repeatCount="indefinite" />
|
||||
</circle>
|
||||
</mask>
|
||||
</defs>
|
||||
|
||||
<polygon
|
||||
:fill="backgroundColor"
|
||||
:points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`"
|
||||
/>
|
||||
|
||||
<use :stroke="colorLeft" stroke-width="1" :xlink:href="`#${path}`" />
|
||||
|
||||
<use
|
||||
:stroke="colorRight"
|
||||
stroke-width="3"
|
||||
:xlink:href="`#${path}`"
|
||||
:mask="`url(#${mask})`"
|
||||
>
|
||||
<animate
|
||||
attributeName="stroke-dasharray"
|
||||
:from="`0, ${length}`"
|
||||
:to="`${length}, 0`"
|
||||
:dur="`${dur}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</use>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default{
|
||||
props:{
|
||||
backgroundColor:{
|
||||
type:String,
|
||||
default:'#00000000'
|
||||
},
|
||||
colorLeft:{
|
||||
type:String,
|
||||
default:'#11eefd'
|
||||
},
|
||||
colorRight:{
|
||||
type:String,
|
||||
default:'#0078d2'
|
||||
},
|
||||
reverse:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
dur:{
|
||||
type:Number,
|
||||
default:3
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
width:150,
|
||||
height:150,
|
||||
border:['left-top', 'right-top', 'left-bottom', 'right-bottom']
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
pathD(){
|
||||
if (this.reverse) {
|
||||
return `M 2.5, 2.5 L 2.5, ${this.height - 2.5} L ${this.width - 2.5}, ${
|
||||
this.height - 2.5
|
||||
} L ${this.width - 2.5}, 2.5 L 2.5, 2.5`
|
||||
}
|
||||
|
||||
return `M2.5, 2.5 L${this.width - 2.5}, 2.5 L${this.width - 2.5}, ${this.height - 2.5} L2.5, ${
|
||||
this.height - 2.5
|
||||
} L2.5, 2.5`
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(()=>{
|
||||
let resizeObserver = new ResizeObserver(els=>{
|
||||
console.log("--->",els)
|
||||
if(els.length>0){
|
||||
let el=els[0];
|
||||
this.width=el.contentRect?.width||150;
|
||||
this.height=el.contentRect?.height||150;
|
||||
}
|
||||
});
|
||||
resizeObserver.observe(this.$parent.$el);
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.dv-border-box-1 {
|
||||
// position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
.border {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.right-top {
|
||||
right: 0;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.left-bottom {
|
||||
bottom: 0;
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.right-bottom {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: rotateX(180deg) rotateY(180deg);
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,223 @@
|
|||
<template>
|
||||
<div class="dv-border-box-9">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<defs>
|
||||
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<animate
|
||||
attributeName="x1"
|
||||
values="0%;100%;0%"
|
||||
dur="10s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
|
||||
<animate
|
||||
attributeName="x2"
|
||||
values="100%;0%;100%"
|
||||
dur="10s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
|
||||
<stop offset="0%" :stop-color="colorLeft">
|
||||
<animate
|
||||
attributeName="stop-color"
|
||||
:values="`${colorLeft};${colorRight};${colorLeft}`"
|
||||
dur="10s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</stop>
|
||||
<stop offset="100%" :stop-color="colorRight">
|
||||
<animate
|
||||
attributeName="stop-color"
|
||||
:values="`${colorRight};${colorLeft};${colorRight}`"
|
||||
dur="10s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
|
||||
<mask :id="maskId">
|
||||
<polyline
|
||||
stroke="#fff"
|
||||
stroke-width="3"
|
||||
fill="transparent"
|
||||
:points="`8, ${height * 0.4} 8, 3, ${width * 0.4 + 7}, 3`"
|
||||
/>
|
||||
<polyline
|
||||
fill="#fff"
|
||||
:points="`8, ${height * 0.15} 8, 3, ${width * 0.1 + 7}, 3
|
||||
${width * 0.1}, 8 14, 8 14, ${height * 0.15 - 7}
|
||||
`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
stroke="#fff"
|
||||
stroke-width="3"
|
||||
fill="transparent"
|
||||
:points="`${width * 0.5}, 3 ${width - 3}, 3, ${width - 3}, ${height * 0.25}`"
|
||||
/>
|
||||
<polyline
|
||||
fill="#fff"
|
||||
:points="`
|
||||
${width * 0.52}, 3 ${width * 0.58}, 3
|
||||
${width * 0.58 - 7}, 9 ${width * 0.52 + 7}, 9
|
||||
`"
|
||||
/>
|
||||
<polyline
|
||||
fill="#fff"
|
||||
:points="`
|
||||
${width * 0.9}, 3 ${width - 3}, 3 ${width - 3}, ${height * 0.1}
|
||||
${width - 9}, ${height * 0.1 - 7} ${width - 9}, 9 ${width * 0.9 + 7}, 9
|
||||
`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
stroke="#fff"
|
||||
stroke-width="3"
|
||||
fill="transparent"
|
||||
:points="`8, ${height * 0.5} 8, ${height - 3} ${width * 0.3 + 7}, ${height - 3}`"
|
||||
/>
|
||||
<polyline
|
||||
fill="#fff"
|
||||
:points="`
|
||||
8, ${height * 0.55} 8, ${height * 0.7}
|
||||
2, ${height * 0.7 - 7} 2, ${height * 0.55 + 7}
|
||||
`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
stroke="#fff"
|
||||
stroke-width="3"
|
||||
fill="transparent"
|
||||
:points="`${width * 0.35}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${
|
||||
height * 0.35
|
||||
}`"
|
||||
/>
|
||||
<polyline
|
||||
fill="#fff"
|
||||
:points="`
|
||||
${width * 0.92}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${
|
||||
height * 0.8
|
||||
}
|
||||
${width - 9}, ${height * 0.8 + 7} ${width - 9}, ${height - 9} ${width * 0.92 + 7}, ${
|
||||
height - 9
|
||||
}
|
||||
`"
|
||||
/>
|
||||
</mask>
|
||||
</defs>
|
||||
|
||||
<polygon
|
||||
:fill="backgroundColor"
|
||||
:points="`
|
||||
15, 9 ${width * 0.1 + 1}, 9 ${width * 0.1 + 4}, 6 ${width * 0.52 + 2}, 6
|
||||
${width * 0.52 + 6}, 10 ${width * 0.58 - 7}, 10 ${width * 0.58 - 2}, 6
|
||||
${width * 0.9 + 2}, 6 ${width * 0.9 + 6}, 10 ${width - 10}, 10 ${width - 10}, ${
|
||||
height * 0.1 - 6
|
||||
}
|
||||
${width - 6}, ${height * 0.1 - 1} ${width - 6}, ${height * 0.8 + 1} ${width - 10}, ${
|
||||
height * 0.8 + 6
|
||||
}
|
||||
${width - 10}, ${height - 10} ${width * 0.92 + 7}, ${height - 10} ${width * 0.92 + 2}, ${
|
||||
height - 6
|
||||
}
|
||||
11, ${height - 6} 11, ${height * 0.15 - 2} 15, ${height * 0.15 - 7}
|
||||
`"
|
||||
/>
|
||||
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
:width="width"
|
||||
:height="height"
|
||||
:fill="`url(#${gradientId})`"
|
||||
:mask="`url(#${maskId})`"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default{
|
||||
props:{
|
||||
backgroundColor:{
|
||||
type:String,
|
||||
default:'#00000000'
|
||||
},
|
||||
colorLeft:{
|
||||
type:String,
|
||||
default:'#11eefd'
|
||||
},
|
||||
colorRight:{
|
||||
type:String,
|
||||
default:'#0078d2'
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
width:150,
|
||||
height:150,
|
||||
border:['left-top', 'right-top', 'left-bottom', 'right-bottom']
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(()=>{
|
||||
let resizeObserver = new ResizeObserver(els=>{
|
||||
console.log("--->",els)
|
||||
if(els.length>0){
|
||||
let el=els[0];
|
||||
this.width=el.contentRect?.width||150;
|
||||
this.height=el.contentRect?.height||150;
|
||||
}
|
||||
});
|
||||
resizeObserver.observe(this.$parent.$el);
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.dv-border-box-1 {
|
||||
// position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
.border {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.right-top {
|
||||
right: 0;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.left-bottom {
|
||||
bottom: 0;
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.right-bottom {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: rotateX(180deg) rotateY(180deg);
|
||||
}
|
||||
|
||||
.border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -56,24 +56,26 @@ export default {
|
|||
colorRight:{
|
||||
type:String,
|
||||
default:'#2cf7fe'
|
||||
},
|
||||
width:{
|
||||
type:Number,
|
||||
default:150
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default:150
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
width:150,
|
||||
height:150
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
this.$nextTick(()=>{
|
||||
let resizeObserver = new ResizeObserver(els=>{
|
||||
if(els.length>0){
|
||||
let el=els[0];
|
||||
this.width=el.contentRect?.width||150;
|
||||
this.height=el.contentRect?.height||150;
|
||||
}
|
||||
});
|
||||
resizeObserver.observe(this.$parent.$el);
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -7,12 +7,14 @@ import {tryToJson} from '../utils/tools'
|
|||
import H265Player from '../components/h265-player/index'
|
||||
import { Loading } from 'element-ui';
|
||||
import BorderBox6 from './components/BorderBox6.vue'
|
||||
import BorderBox1 from './components/BorderBox1.vue'
|
||||
import moduleOne11 from '../components/module/module-one-1-1.vue'
|
||||
Loading.install(Vue);
|
||||
H265Player.install(Vue);
|
||||
dayfilter(Vue);
|
||||
const vue=new Vue();
|
||||
Vue.component("border-box6",BorderBox6)
|
||||
Vue.component("border-box1",BorderBox1)
|
||||
Vue.component("module-one-1-1",moduleOne11)
|
||||
Vue.prototype.$api=Api;
|
||||
Vue.prototype.$bus=vue;
|
||||
|
|
|
|||
|
|
@ -9,35 +9,35 @@
|
|||
<div class="screen-content">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<module-one-1-1 label="项目成果">
|
||||
<module-one-1-1 label="现场管理标准化">
|
||||
|
||||
</module-one-1-1>
|
||||
<module-one-1-1 label="项目成果2">
|
||||
<module-one-1-1 label="作业标准" >
|
||||
|
||||
</module-one-1-1>
|
||||
<module-one-1-1 label="项目成果">
|
||||
<module-one-1-1 label="安全技术标准">
|
||||
|
||||
</module-one-1-1>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<module-one-1-1 label="项目成果">
|
||||
<module-one-1-1 label="审批进度" :border="1">
|
||||
|
||||
</module-one-1-1>
|
||||
<module-one-1-1 label="项目成果">
|
||||
<module-one-1-1 label="待审批" :border="1">
|
||||
|
||||
</module-one-1-1>
|
||||
<module-one-1-1 label="项目成果">
|
||||
<module-one-1-1 label="集团期刊" :border="1">
|
||||
|
||||
</module-one-1-1>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<module-one-1-1 label="项目成果">
|
||||
<module-one-1-1 label="设备管理标准">
|
||||
|
||||
</module-one-1-1>
|
||||
<module-one-1-1 label="项目成果">
|
||||
<module-one-1-1 label="文明施工标准">
|
||||
|
||||
</module-one-1-1>
|
||||
<module-one-1-1 label="项目成果">
|
||||
<module-one-1-1 label="环境保护标准">
|
||||
|
||||
</module-one-1-1>
|
||||
</el-col>
|
||||
|
|
|
|||
Loading…
Reference in New Issue