19 changed files with 458 additions and 27 deletions
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
File diff suppressed because one or more lines are too long
@ -1,11 +1,64 @@ |
|||
<style lang="less" scoped> |
|||
|
|||
.right_1{ |
|||
.dv-scroll-board{ |
|||
margin-top:8px; |
|||
&:deep>.header{ |
|||
background:rgba(8, 34, 56, 0.7)!important; |
|||
color:#C0DBF7; |
|||
font-size:18px; |
|||
} |
|||
&:deep>.rows{ |
|||
.row-item{ |
|||
background:transparent!important; |
|||
color:#99A4AE; |
|||
.ceil:last-child{ |
|||
color:#C0DBF7; |
|||
.up{ |
|||
color:#fd2100; |
|||
} |
|||
.down{ |
|||
color:#10cc40; |
|||
display:inline-block; |
|||
transform: rotateX(180deg); |
|||
} |
|||
} |
|||
&:first-child>.ceil:first-child{ |
|||
color:#10CC40; |
|||
} |
|||
&:nth-child(2)>.ceil:first-child{ |
|||
color:#00E4FF; |
|||
} |
|||
&:nth-child(3)>.ceil:first-child{ |
|||
color:#0099FF; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<template> |
|||
<div class="right_1"> |
|||
|
|||
<dTitle title="价格行情" icon="10"> |
|||
<span style="color:#00E4FF;font-size:18px;">单位统一为： 10元/kg</span> |
|||
</dTitle> |
|||
<swiper-btn :list="btns" color/> |
|||
<dvScrollBoard ref="scrollBoard" :config="config" style="height:150px;"/> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import { reactive, shallowRef } from 'vue' |
|||
import dTitle from '../title.vue' |
|||
|
|||
var btns=shallowRef(['火龙果','水蜜桃','黄瓜','西蓝花','白菜','土豆']) |
|||
var config=reactive({ |
|||
header:['地区','最低价','最高价','均价','较上一日涨幅'], |
|||
data:[ |
|||
['本地','2.32','2.32','2.32','0.25%<span class="plantBS-shangsheng up"/>'], |
|||
['本地','2.32','2.32','2.32','0.25%<span class="plantBS-shangsheng up"/>'], |
|||
['本地','2.32','2.32','2.32','0.25%<span class="plantBS-shangsheng down"/>'], |
|||
], |
|||
rowNum:3, |
|||
align:['center','center','center','center','center'], |
|||
columnWidth:[110,110,110,110,117+28], |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,188 @@ |
|||
<style lang="less" scoped> |
|||
.right_2{ |
|||
.number{ |
|||
display:flex; |
|||
align-items: center; |
|||
.vegetable{ |
|||
margin-right:18px; |
|||
width:75px; |
|||
height:40px; |
|||
line-height: 40px; |
|||
text-align: center; |
|||
background-color:rgba(12, 44, 78, 0.4); |
|||
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAoCAYAAAC2LgceAAAAAXNSR0IArs4c6QAABAxJREFUaEPtmk2IHEUUx9+rnumZ7tlsdmM+Npt1MceAoidRvHhL8JCTR03MB6gbCERQQi57DMSAygrZVaIIAY9eDEgIaCDkKAnED4IfIcSLvbM7H5ue2d2ueuFVVe/O7LY4vcftahjq61VN1W/ee3T3/BEAYPjKk2kue6/WUvsyfDj2ZGP/dm9XP12Y9CuVE73nVCR+WpoKbqGGNdMgkIke5w6BAIgIXk/JfUIAeIh6nEtPAJSEbQu2RygJns+lmc82xtbYp3WzBo+vr4f8HXb9dA+8H+7XG9WlrgERANkTccltpftIl+lH2rok089tqXicIOmtKztGpMeNHZmSAH55u8rbsLB4E16Zm1IqPCzK1Xvb3Yv+63woO28BwCfp+MSQgF+PZcAiwK/Bq35UVFDaaxUHT/cmEr3A7QNDCL8dCzZ5Vn3ZD17xJTSKDMvE+cprqOR3HPzjNYTfj2+GdY684FrhQVkAmHS/AaQ3xmoID/ph0c+qNnIEV9fyZuGZySQ+6CHe3h+i/+CdHs9CpS6p6ujHhSe0EYCML+8LxfE/1mE176OS1x2sza6CtPzyngpd//OE9ayRz+rTCBgmzrMyA2uv340crAFzzh6/G/3V51kCw8R3OSuL3+5yN/r7ZBqGM/VpDzBccbAyfe2ZUjd6eMrC2jVjcpaDlR2Xo6VO9OhUaO7gd31e/wAJg9Vg9Epq3lrZwv1WkHPOVp4TwpzfwQda3sKcHm6TQ51rj06GR80jvLsGIuBgDYTJGDlYDlYOAjlMnWc5WDkI5DB1nuVg5SCQw9R5loOVg0AOU+1Z47MLUwhY/acy8lWOuYUx3b0S355/t/a8hjUxtzgNgGETdrrXyhkuUKE4mn+vZh6kJy2sRQcrM1p8iqO6gzVYJtkESwCGdedZmfTKKo4W3rdh+ByHIWJYJ5ezsmiVVBwtprCenWtcLaOYj2iHS/AbaCUKKlWKHy9OWc/aP9uiQMAlByvDr5LOBQ/pXKMXli/o2wUaPjtYyiuG1aqAHeXVzh0PaayRhuH4bIsAUTZl+YjwKneLgWKAU8ruRQQ6LYBgzbPG51rEL02XpHdXYXAYBagBltrWJkouvyRA/WAEigTNNAwPWFht6fHfIOfBC65uaxL/czgtZqP4BgK+yKYbYLWJ38a3E49VXC0lSq8i+v8WFljSOY0IF9Pz98Ga+KKttawtDYtFrHgLvOqbhYQlk0MIyfcANLwGiwiaZ9Kb0i/bPw6V1OupmtgokK0a2ZZabWzVxbq0CmStOrYKZe7XamNug1Eha6UxGo1xWjeubS5WGZsfCEyitOpg3Vak+7TymBXEVols1MTrSmI9ZtXHXE/6xnvVx+vztHKZ1+9TNnMbtZI5VUCnimjOWU8BNV/FOCDxjIQAAAAASUVORK5CYII=); |
|||
background-size:100% 100%; |
|||
position:relative; |
|||
&:before{ |
|||
content: ""; |
|||
position:absolute; |
|||
width:58px; |
|||
height:17px; |
|||
background-image:url(data:image/png;base64,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); |
|||
bottom:-6px; |
|||
} |
|||
&:after{ |
|||
content: ""; |
|||
position:absolute; |
|||
width:58px; |
|||
height:17px; |
|||
left:4px; |
|||
background-image:url(data:image/png;base64,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); |
|||
top:-8px; |
|||
} |
|||
span{ |
|||
font-size:18px; |
|||
background-image:-webkit-linear-gradient(top, #fff,#429EFA); |
|||
-webkit-background-clip:text; |
|||
-webkit-text-fill-color:transparent; |
|||
} |
|||
} |
|||
table{ |
|||
width:100%; |
|||
tr{ |
|||
td{ |
|||
color:#C0DBF7; |
|||
font-size:16px; |
|||
span{ |
|||
&:not([class*=plantBS-]){ |
|||
color:#fff; |
|||
font-weight: bold; |
|||
&:before{ |
|||
content:attr(data-b); |
|||
color:#99A4AE; |
|||
font-weight: normal; |
|||
} |
|||
&:after{ |
|||
content:attr(data-f); |
|||
color:#99A4AE; |
|||
font-weight: normal; |
|||
} |
|||
} |
|||
&.up{ |
|||
color:#F02000; |
|||
} |
|||
&.down{ |
|||
color:#10CC40; |
|||
display: inline-block; |
|||
transform: rotateX(180deg); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<template> |
|||
<div class="right_2"> |
|||
<dTitle title="产能预估" icon="5"/> |
|||
<v-echarts :option="opt" style="height:194px;"/> |
|||
<div class="number"> |
|||
<span class="vegetable"><span>四季豆</span></span> |
|||
<table> |
|||
<tr> |
|||
<td>2022年：<span data-f="吨">8000</span></td> |
|||
<td><span data-b="实际产量: " data-f="吨">8560</span></td> |
|||
<td><span data-b="较上年涨幅："/>+0.8%<span class="plantBS-shangsheng up"/></td> |
|||
</tr> |
|||
<tr> |
|||
<td>2022年：<span data-f="吨">8000</span></td> |
|||
<td><span data-b="实际产量: " data-f="吨">8560</span></td> |
|||
<td><span data-b="较下降涨幅："/>-0.8%<span class="plantBS-shangsheng down"/></td> |
|||
</tr> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import { computed } from 'vue' |
|||
import dTitle from '../title.vue' |
|||
|
|||
var opt=computed(()=>({ |
|||
title:{ |
|||
text:"单位/吨", |
|||
right:2, |
|||
|
|||
textStyle:{ |
|||
color:"#99A4AE", |
|||
fontSize:16, |
|||
} |
|||
}, |
|||
tooltip:{ |
|||
trigger:"axis", |
|||
axisPointer:{ |
|||
type:"cross" |
|||
} |
|||
}, |
|||
grid:{ |
|||
left: 10, |
|||
right: 10, |
|||
bottom: 10, |
|||
top:35, |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
axisLine:{show:false}, |
|||
axisTick:{show:false}, |
|||
axisLabel:{ |
|||
color:"#99A4AE", |
|||
fontSize:16, |
|||
}, |
|||
data: ['西蓝花', '大白菜', '四季豆', '黄瓜', '苤蓝', '韭菜', '土豆'] |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
axisLabel:{ |
|||
color:"#99A4AE", |
|||
fontSize:16, |
|||
}, |
|||
splitLine:{lineStyle:{ |
|||
type:"dashed", |
|||
color:"#0B1A3D", |
|||
}} |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: [120, 200, 150, 80, 70, 110, 130], |
|||
type: 'bar', |
|||
showBackground: true, |
|||
barWidth:20, |
|||
itemStyle:{ |
|||
opacity:0.45, |
|||
color:{ |
|||
type: 'linear', |
|||
x: 0, y: 0, x2: 1, y2: 0, |
|||
colorStops: [ |
|||
{offset: 0, color: 'rgba(12, 137, 254, 1)'}, |
|||
{offset: 0.5, color: 'rgba(12, 137, 254, 0.35)'}, |
|||
{offset: 1, color: 'rgba(12, 137, 254, 1)'} |
|||
], |
|||
global: false |
|||
} |
|||
}, |
|||
label:{ |
|||
show:true, |
|||
position:"top", |
|||
color:"#fff", |
|||
align:"center", |
|||
distance:2, |
|||
opacity:1, |
|||
formatter(e){ |
|||
return `{a|${e.value}}\n{b|}` |
|||
}, |
|||
rich:{ |
|||
b:{ |
|||
width:20, |
|||
height:4, |
|||
backgroundColor:"#0C89FE" |
|||
} |
|||
} |
|||
}, |
|||
backgroundStyle: { |
|||
color: 'rgba(12, 137, 254, 0.15)' |
|||
} |
|||
} |
|||
] |
|||
})) |
|||
</script> |
|||
@ -0,0 +1,108 @@ |
|||
<style lang="less" scoped> |
|||
.right_3{ |
|||
.d-title{ |
|||
.right{ |
|||
span{ |
|||
display:inline-flex; |
|||
align-items: center; |
|||
color:#fff; |
|||
font-size:16px; |
|||
&+span{ |
|||
margin-left:16px; |
|||
} |
|||
&:before{ |
|||
content:""; |
|||
width:18px; |
|||
height:4px; |
|||
background:var(--c); |
|||
margin-right:6px; |
|||
} |
|||
&:after{ |
|||
content:"年"; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<template> |
|||
<div class="right_3"> |
|||
<dTitle title="产值预估" icon="11"> |
|||
<span style="--c:#0C81EF;">2021</span> |
|||
<span style="--c:#10CC40;">2022</span> |
|||
<span style="--c:#00E4FF;">2023</span> |
|||
</dTitle> |
|||
<v-echarts :option="opt" autoresize style="height:238px"/> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import { computed } from 'vue' |
|||
import dTitle from '../title.vue' |
|||
|
|||
var opt=computed(()=>({ |
|||
title:{ |
|||
text:"单位/吨", |
|||
textStyle:{ |
|||
color:"#E2EFFA", |
|||
fontSize:16, |
|||
}, |
|||
right:5, |
|||
top:2, |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer:{ |
|||
type:"cross" |
|||
} |
|||
}, |
|||
grid: { |
|||
left: 10, |
|||
right: 10, |
|||
bottom: 10, |
|||
top:35, |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
axisLine:{show:false}, |
|||
axisTick:{show:false}, |
|||
axisLabel:{ |
|||
color:"#E2EFFA", |
|||
fontSize:16, |
|||
}, |
|||
data: ['西蓝花', '大白菜', '四季豆', '黄瓜', '苤蓝', '韭菜', '土豆','柑橘','苹果','萝卜'] |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
axisLabel:{ |
|||
color:"#E2EFFA", |
|||
fontSize:16, |
|||
}, |
|||
splitLine:{ |
|||
lineStyle:{ |
|||
color:"#4E7C98", |
|||
type:"dashed", |
|||
} |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '预估产量', |
|||
type: 'line', |
|||
itemStyle:{color:"#0C81EF"}, |
|||
symbol:"path://M150.11839294433594,150.11839294433594C250.26559448242188,50.07360076904297,370.8927917480469,0,512,0c141.107177734375,0,261.734375,50.07360076904297,361.881591796875,150.11839294433594C973.9263916015625,250.26559448242188,1024,370.8927917480469,1024,512c0,141.2095947265625,-50.0736083984375,261.8367919921875,-150.118408203125,361.881591796875C773.734375,973.9263916015625,653.107177734375,1024,512,1024c-141.10720825195312,0,-261.7344055175781,-50.0736083984375,-361.88160705566406,-150.118408203125C50.07360076904297,773.8367919921875,0,653.2095947265625,0,512C0,370.8927917480469,50.07360076904297,250.26559448242188,150.11839294433594,150.11839294433594ZM512,41.88159942626953c-85.2991943359375,0,-164.14718627929688,20.889598846435547,-236.33920288085938,62.771202087402344C203.4687957763672,146.4320068359375,146.4320068359375,203.4687957763672,104.65280151367188,275.6607971191406C62.77119827270508,347.9552001953125,41.88159942626953,426.7008056640625,41.88159942626953,512c0,129.638427734375,45.97760009765625,240.4351806640625,137.83040618896484,332.28802490234375C271.5647888183594,936.2432250976562,382.3616027832031,982.118408203125,512,982.118408203125c129.638427734375,0,240.4351806640625,-45.87518310546875,332.28802490234375,-137.83038330078125C936.2432250976562,752.4351806640625,982.118408203125,641.638427734375,982.118408203125,512c0,-129.63839721679688,-45.97760009765625,-240.33279418945312,-137.83038330078125,-332.2879943847656C752.4351806640625,87.75679779052734,641.638427734375,41.88159942626953,512,41.88159942626953ZM512,256c-36.147186279296875,0,-70.14401245117188,7.06561279296875,-102.1951904296875,20.88958740234375C377.8559875488281,290.91839599609375,349.4912109375,309.35040283203125,324.9151916503906,332.2879943847656c-22.937591552734375,24.576019287109375,-41.47198486328125,52.9407958984375,-55.39837646484375,84.88961791992188S248.627197265625,483.3280029296875,248.627197265625,519.372802734375c0,36.147216796875,6.96319580078125,70.14398193359375,20.889617919921875,102.1951904296875s32.460784912109375,60.3135986328125,55.39837646484375,84.88958740234375C349.4912109375,729.4976196289062,377.8559875488281,747.9296264648438,409.8048095703125,761.8560180664062C441.8559875488281,775.7824096679688,475.8528137207031,782.74560546875,512,782.74560546875c36.147216796875,0,70.14398193359375,-6.96319580078125,102.1951904296875,-20.88958740234375C646.1439819335938,747.9296264648438,674.5087890625,729.4976196289062,699.0847778320312,706.4575805664062c22.9376220703125,-24.57598876953125,41.4720458984375,-52.9407958984375,55.3984375,-84.88958740234375s20.88958740234375,-66.0479736328125,20.88958740234375,-102.1951904296875c0,-36.0447998046875,-6.96319580078125,-70.14401245117188,-20.88958740234375,-102.1951904296875S722.0223999023438,356.9664001464844,699.0847778320312,332.2879943847656C674.5087890625,309.35040283203125,646.1439819335938,290.91839599609375,614.1951904296875,276.88958740234375C582.1439819335938,263.06561279296875,548.147216796875,256,512,256Z", |
|||
symbolSize:13, |
|||
data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134] |
|||
}, |
|||
{ |
|||
name: '实际产量', |
|||
type: 'line', |
|||
itemStyle:{color:"#10CC40"}, |
|||
symbol:"path://M150.11839294433594,150.11839294433594C250.26559448242188,50.07360076904297,370.8927917480469,0,512,0c141.107177734375,0,261.734375,50.07360076904297,361.881591796875,150.11839294433594C973.9263916015625,250.26559448242188,1024,370.8927917480469,1024,512c0,141.2095947265625,-50.0736083984375,261.8367919921875,-150.118408203125,361.881591796875C773.734375,973.9263916015625,653.107177734375,1024,512,1024c-141.10720825195312,0,-261.7344055175781,-50.0736083984375,-361.88160705566406,-150.118408203125C50.07360076904297,773.8367919921875,0,653.2095947265625,0,512C0,370.8927917480469,50.07360076904297,250.26559448242188,150.11839294433594,150.11839294433594ZM512,41.88159942626953c-85.2991943359375,0,-164.14718627929688,20.889598846435547,-236.33920288085938,62.771202087402344C203.4687957763672,146.4320068359375,146.4320068359375,203.4687957763672,104.65280151367188,275.6607971191406C62.77119827270508,347.9552001953125,41.88159942626953,426.7008056640625,41.88159942626953,512c0,129.638427734375,45.97760009765625,240.4351806640625,137.83040618896484,332.28802490234375C271.5647888183594,936.2432250976562,382.3616027832031,982.118408203125,512,982.118408203125c129.638427734375,0,240.4351806640625,-45.87518310546875,332.28802490234375,-137.83038330078125C936.2432250976562,752.4351806640625,982.118408203125,641.638427734375,982.118408203125,512c0,-129.63839721679688,-45.97760009765625,-240.33279418945312,-137.83038330078125,-332.2879943847656C752.4351806640625,87.75679779052734,641.638427734375,41.88159942626953,512,41.88159942626953ZM512,256c-36.147186279296875,0,-70.14401245117188,7.06561279296875,-102.1951904296875,20.88958740234375C377.8559875488281,290.91839599609375,349.4912109375,309.35040283203125,324.9151916503906,332.2879943847656c-22.937591552734375,24.576019287109375,-41.47198486328125,52.9407958984375,-55.39837646484375,84.88961791992188S248.627197265625,483.3280029296875,248.627197265625,519.372802734375c0,36.147216796875,6.96319580078125,70.14398193359375,20.889617919921875,102.1951904296875s32.460784912109375,60.3135986328125,55.39837646484375,84.88958740234375C349.4912109375,729.4976196289062,377.8559875488281,747.9296264648438,409.8048095703125,761.8560180664062C441.8559875488281,775.7824096679688,475.8528137207031,782.74560546875,512,782.74560546875c36.147216796875,0,70.14398193359375,-6.96319580078125,102.1951904296875,-20.88958740234375C646.1439819335938,747.9296264648438,674.5087890625,729.4976196289062,699.0847778320312,706.4575805664062c22.9376220703125,-24.57598876953125,41.4720458984375,-52.9407958984375,55.3984375,-84.88958740234375s20.88958740234375,-66.0479736328125,20.88958740234375,-102.1951904296875c0,-36.0447998046875,-6.96319580078125,-70.14401245117188,-20.88958740234375,-102.1951904296875S722.0223999023438,356.9664001464844,699.0847778320312,332.2879943847656C674.5087890625,309.35040283203125,646.1439819335938,290.91839599609375,614.1951904296875,276.88958740234375C582.1439819335938,263.06561279296875,548.147216796875,256,512,256Z", |
|||
symbolSize:13, |
|||
data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 29] |
|||
}, |
|||
] |
|||
})) |
|||
</script> |
|||
Loading…
Reference in new issue