构建版本修改
This commit is contained in:
aixianling
131
components/layout/AiDvDisplay/AiDvDisplay.vue
Normal file
131
components/layout/AiDvDisplay/AiDvDisplay.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<section class="AiDvDisplay">
|
||||
<div class="display-top">
|
||||
<img class="left" src="https://cdn.cunwuyun.cn/dvcp/dv/img/display-icon.svg">
|
||||
<h2>{{ title }}</h2>
|
||||
<img class="right" src="https://cdn.cunwuyun.cn/dvcp/dv/img/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: () => []},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
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>
|
||||
25
components/layout/AiDvDisplay/asset/display-icon.svg
Normal file
25
components/layout/AiDvDisplay/asset/display-icon.svg
Normal 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 |
36
components/layout/AiDvDisplay/asset/display-top.svg
Normal file
36
components/layout/AiDvDisplay/asset/display-top.svg
Normal 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 |
BIN
components/layout/AiDvDisplay/asset/display0-bg.png
Normal file
BIN
components/layout/AiDvDisplay/asset/display0-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 500 KiB |
BIN
components/layout/AiDvDisplay/asset/display0-left.png
Normal file
BIN
components/layout/AiDvDisplay/asset/display0-left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
34
components/layout/AiDvDisplay/asset/displayItem-bg.svg
Normal file
34
components/layout/AiDvDisplay/asset/displayItem-bg.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.4 KiB |
34
components/layout/AiDvDisplay/asset/displayItem-bg1.svg
Normal file
34
components/layout/AiDvDisplay/asset/displayItem-bg1.svg
Normal 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 |
49
components/layout/AiDvDisplay/components/Display0.vue
Normal file
49
components/layout/AiDvDisplay/components/Display0.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="display0">
|
||||
<div class="display0-container">
|
||||
<div class="display0-content">
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/img/display0-left.png">
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/img/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>
|
||||
64
components/layout/AiDvDisplay/components/displayItem.vue
Normal file
64
components/layout/AiDvDisplay/components/displayItem.vue
Normal 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>
|
||||
Reference in New Issue
Block a user