ykxiao
/
DemuMesDataV
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Canonical class name

This commit is contained in:
jiaming743 2020-08-25 16:54:47 +08:00
parent 751eb2f29b
commit 918653c9d9
9 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/borderBox10/src/main.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`"> <div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
<svg class="border" :width="width" :height="height"> <svg class="dv-border-svg-container" :width="width" :height="height">
<polygon :fill="backgroundColor" :points="` <polygon :fill="backgroundColor" :points="`
4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height} 4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
4, ${height} 0, ${height - 4} 0, 4 4, ${height} 0, ${height - 4} 0, 4
@ -12,7 +12,7 @@
height="150px" height="150px"
:key="item" :key="item"
v-for="item in border" v-for="item in border"
:class="`${item} border`" :class="`${item} dv-border-svg-container`"
> >
<polygon <polygon
:fill="mergedColor[1]" :fill="mergedColor[1]"
@ -86,7 +86,7 @@ export default {
height: 100%; height: 100%;
border-radius: 6px; border-radius: 6px;
.border { .dv-border-svg-container {
position: absolute; position: absolute;
display: block; display: block;
} }

2
src/components/borderBox11/src/main.vue
View File

@ -292,7 +292,7 @@ export default {
top: 0px; top: 0px;
left: 0px; left: 0px;
polyline { & > polyline {
fill: none; fill: none;
stroke-width: 1; stroke-width: 1;
} }

2
src/components/borderBox2/src/main.vue
View File

@ -89,7 +89,7 @@ export default {
top: 0px; top: 0px;
left: 0px; left: 0px;
polyline { & > polyline {
fill: none; fill: none;
stroke-width: 1; stroke-width: 1;
} }

2
src/components/borderBox3/src/main.vue
View File

@ -93,7 +93,7 @@ export default {
top: 0px; top: 0px;
left: 0px; left: 0px;
polyline { & > polyline {
fill: none; fill: none;
} }
} }

2
src/components/borderBox4/src/main.vue
View File

@ -105,7 +105,7 @@ export default {
top: 0px; top: 0px;
left: 0px; left: 0px;
polyline { & > polyline {
fill: none; fill: none;
} }
} }

6
src/components/borderBox5/src/main.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="dv-border-box-5" :ref="ref"> <div class="dv-border-box-5" :ref="ref">
<svg :class="`dv-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height"> <svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
<polygon :fill="backgroundColor" :points="` <polygon :fill="backgroundColor" :points="`
10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24} 10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
`" /> `" />
@ -94,14 +94,14 @@ export default {
transform: rotate(180deg); transform: rotate(180deg);
} }
.dv-svg-container { .dv-border-svg-container {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
polyline { & > polyline {
fill: none; fill: none;
} }
} }

6
src/components/borderBox6/src/main.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="dv-border-box-6" :ref="ref"> <div class="dv-border-box-6" :ref="ref">
<svg class="dv-svg-container" :width="width" :height="height"> <svg class="dv-border-svg-container" :width="width" :height="height">
<polygon :fill="backgroundColor" :points="` <polygon :fill="backgroundColor" :points="`
9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7} 9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
`" /> `" />
@ -86,14 +86,14 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
.dv-svg-container { .dv-border-svg-container {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
polyline { & > polyline {
fill: none; fill: none;
stroke-width: 1; stroke-width: 1;
} }

6
src/components/borderBox7/src/main.vue
View File

@ -5,7 +5,7 @@
:style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`" :style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`"
:ref="ref" :ref="ref"
> >
<svg class="dv-svg-container" :width="width" :height="height"> <svg class="dv-border-svg-container" :width="width" :height="height">
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" /> <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" /> <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" /> <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
@ -80,14 +80,14 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
.dv-svg-container { .dv-border-svg-container {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
polyline { & > polyline {
fill: none; fill: none;
stroke-linecap: round; stroke-linecap: round;
} }

4
src/components/borderBox9/src/main.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="dv-border-box-9" :ref="ref"> <div class="dv-border-box-9" :ref="ref">
<svg class="dv-svg-container" :width="width" :height="height"> <svg class="dv-border-svg-container" :width="width" :height="height">
<defs> <defs>
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%"> <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
<animate <animate
@ -185,7 +185,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
svg { .dv-border-svg-container {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;