fks-xuxinyue
4 months ago
22 changed files with 580 additions and 15 deletions
|
After Width: | Height: | Size: 417 B |
|
After Width: | Height: | Size: 426 B |
|
After Width: | Height: | Size: 717 B |
|
After Width: | Height: | Size: 717 B |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 298 B |
@ -0,0 +1,6 @@ |
|||
<?xml version="1.0" encoding="utf-8"?> |
|||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="37px" height="37px" xmlns="http://www.w3.org/2000/svg"> |
|||
<g transform="matrix(1 0 0 1 -738 -62 )"> |
|||
<path d="M 32 16.17637875390625 L 32 5 L 5 5 L 5 32 L 16.17637875390625 32 L 16.17637875390625 37 L 0 37 L 0 0 L 37 0 L 37 16.17637875390625 L 32 16.17637875390625 Z M 6.9478248789666415 18.66767607469059 C 6.9478248789666415 15.5442205297455 8.189402439205798 12.548862312376832 10.3991006171875 10.341327827148438 C 12.604273280037184 8.143662959434554 15.590626658621316 6.909656880840238 18.703907459282163 6.909656880840238 C 25.201454239889483 6.909656880840238 30.46875662920404 12.176959270154791 30.46875662920404 18.674506050762112 C 30.46875662920404 20.983959083452117 29.789040393343488 23.24233673232217 28.514333895507814 25.16813439941406 L 36.990756359375 33.66766596484375 L 33.6653550546875 36.99768908984375 L 25.18893259082031 28.49815752441406 C 23.267562429817577 29.7630406080517 21.01764204116391 30.43714706492497 18.717295869201017 30.43714706492497 C 12.217196527718643 30.43714706492497 6.9478248789666415 25.167775416172965 6.9478248789666415 18.66767607469059 Z M 18.53350819726563 25.387670972656252 L 18.526575466796874 25.387670972656245 C 18.537359653048604 25.387721182280185 18.54814394157355 25.387746287194187 18.558928244709044 25.387746287194187 C 22.396705336309363 25.387746287194187 25.50783837263873 22.27661325086481 25.50783837263873 18.438836159264497 C 25.50783837263873 14.601059067664185 22.396705336309363 11.48992603133481 18.558928244709044 11.48992603133481 C 14.72118056523231 11.48992603133481 11.610059711939467 14.601013165475232 11.610018117187504 18.438760844726563 C 11.6100055260099 18.44415500501238 11.609999230414665 18.449549178157536 11.609999230414665 18.45494335313865 C 11.609999230414665 22.280184472224335 14.70827046453852 25.38258105471001 18.53350819726563 25.387670972656252 Z " fill-rule="nonzero" fill="#e4793f" stroke="none" transform="matrix(1 0 0 1 738 62 )" /> |
|||
</g> |
|||
</svg> |
|||
@ -0,0 +1,6 @@ |
|||
<?xml version="1.0" encoding="utf-8"?> |
|||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="37px" height="37px" xmlns="http://www.w3.org/2000/svg"> |
|||
<g transform="matrix(1 0 0 1 -738 -62 )"> |
|||
<path d="M 32 16.17637875390625 L 32 5 L 5 5 L 5 32 L 16.17637875390625 32 L 16.17637875390625 37 L 0 37 L 0 0 L 37 0 L 37 16.17637875390625 L 32 16.17637875390625 Z M 6.9478248789666415 18.66767607469059 C 6.9478248789666415 15.5442205297455 8.189402439205798 12.548862312376832 10.3991006171875 10.341327827148438 C 12.604273280037184 8.143662959434554 15.590626658621316 6.909656880840238 18.703907459282163 6.909656880840238 C 25.201454239889483 6.909656880840238 30.46875662920404 12.176959270154791 30.46875662920404 18.674506050762112 C 30.46875662920404 20.983959083452117 29.789040393343488 23.24233673232217 28.514333895507814 25.16813439941406 L 36.990756359375 33.66766596484375 L 33.6653550546875 36.99768908984375 L 25.18893259082031 28.49815752441406 C 23.267562429817577 29.7630406080517 21.01764204116391 30.43714706492497 18.717295869201017 30.43714706492497 C 12.217196527718643 30.43714706492497 6.9478248789666415 25.167775416172965 6.9478248789666415 18.66767607469059 Z M 18.53350819726563 25.387670972656252 L 18.526575466796874 25.387670972656245 C 18.537359653048604 25.387721182280185 18.54814394157355 25.387746287194187 18.558928244709044 25.387746287194187 C 22.396705336309363 25.387746287194187 25.50783837263873 22.27661325086481 25.50783837263873 18.438836159264497 C 25.50783837263873 14.601059067664185 22.396705336309363 11.48992603133481 18.558928244709044 11.48992603133481 C 14.72118056523231 11.48992603133481 11.610059711939467 14.601013165475232 11.610018117187504 18.438760844726563 C 11.6100055260099 18.44415500501238 11.609999230414665 18.449549178157536 11.609999230414665 18.45494335313865 C 11.609999230414665 22.280184472224335 14.70827046453852 25.38258105471001 18.53350819726563 25.387670972656252 Z " fill-rule="nonzero" fill="#e93f33" stroke="none" transform="matrix(1 0 0 1 738 62 )" /> |
|||
</g> |
|||
</svg> |
|||
@ -0,0 +1,6 @@ |
|||
<?xml version="1.0" encoding="utf-8"?> |
|||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="37px" height="37px" xmlns="http://www.w3.org/2000/svg"> |
|||
<g transform="matrix(1 0 0 1 -738 -62 )"> |
|||
<path d="M 32 16.17637875390625 L 32 5 L 5 5 L 5 32 L 16.17637875390625 32 L 16.17637875390625 37 L 0 37 L 0 0 L 37 0 L 37 16.17637875390625 L 32 16.17637875390625 Z M 6.9478248789666415 18.66767607469059 C 6.9478248789666415 15.5442205297455 8.189402439205798 12.548862312376832 10.3991006171875 10.341327827148438 C 12.604273280037184 8.143662959434554 15.590626658621316 6.909656880840238 18.703907459282163 6.909656880840238 C 25.201454239889483 6.909656880840238 30.46875662920404 12.176959270154791 30.46875662920404 18.674506050762112 C 30.46875662920404 20.983959083452117 29.789040393343488 23.24233673232217 28.514333895507814 25.16813439941406 L 36.990756359375 33.66766596484375 L 33.6653550546875 36.99768908984375 L 25.18893259082031 28.49815752441406 C 23.267562429817577 29.7630406080517 21.01764204116391 30.43714706492497 18.717295869201017 30.43714706492497 C 12.217196527718643 30.43714706492497 6.9478248789666415 25.167775416172965 6.9478248789666415 18.66767607469059 Z M 18.53350819726563 25.387670972656252 L 18.526575466796874 25.387670972656245 C 18.537359653048604 25.387721182280185 18.54814394157355 25.387746287194187 18.558928244709044 25.387746287194187 C 22.396705336309363 25.387746287194187 25.50783837263873 22.27661325086481 25.50783837263873 18.438836159264497 C 25.50783837263873 14.601059067664185 22.396705336309363 11.48992603133481 18.558928244709044 11.48992603133481 C 14.72118056523231 11.48992603133481 11.610059711939467 14.601013165475232 11.610018117187504 18.438760844726563 C 11.6100055260099 18.44415500501238 11.609999230414665 18.449549178157536 11.609999230414665 18.45494335313865 C 11.609999230414665 22.280184472224335 14.70827046453852 25.38258105471001 18.53350819726563 25.387670972656252 Z " fill-rule="nonzero" fill="#3da1de" stroke="none" transform="matrix(1 0 0 1 738 62 )" /> |
|||
</g> |
|||
</svg> |
|||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,28 @@ |
|||
<template> |
|||
<div class="detailTable"> |
|||
</div> |
|||
<div class="total"> </div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref } from 'vue'; |
|||
import { http } from '/nerv-lib/util/http'; |
|||
defineOptions({ |
|||
energyType: 'carbonAssetsDetail', // 与页面路由name一致缓存才可生效 |
|||
}); |
|||
const orgId = ref(''); |
|||
const result = JSON.parse(sessionStorage.getItem('ORGID')!); |
|||
orgId.value = result; |
|||
const fetch = (api, params = { orgId }) => { |
|||
return http.post(api, params); |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.detailTable { |
|||
height: 80%; |
|||
} |
|||
.total { |
|||
height: 20%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,319 @@ |
|||
<template> |
|||
<div class="mainContant" v-if="homePage"> |
|||
<a-card class="card" style="margin-right: 1%; margin-bottom: 1%"> |
|||
<div class="top" style="background: rgba(252, 139, 78, 0.05)"> |
|||
<div class="moneyImg" |
|||
><img width="68px" height="68px" src="../../../../src/icon/carbonAssetsMoney-1.svg" |
|||
/></div> |
|||
<div class="moneyTitle">全国碳账户估值（CNY）</div> |
|||
<div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">300,000.00</div> |
|||
<div class="moneyDetail" |
|||
><img width="34px" height="34px" src="../../../../src/icon/carbonAssetsSearch-1.svg" |
|||
/></div> |
|||
</div> |
|||
<div class="title"> |
|||
<img width="24px" height="24px" src="../../../../src/icon/carbonAssetsTitle-1.svg" /> |
|||
<span>全国碳账户余额</span> |
|||
</div> |
|||
<div class="bottom"> |
|||
<div class="calculation TLCard"> |
|||
<div class="money">75,000.00</div> |
|||
<div class="moneyType">期初余额（tCO2）</div> |
|||
</div> |
|||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsAdd.svg" /> |
|||
<div class="calculation TLCard"> |
|||
<div class="money">20,000.00</div> |
|||
<div class="moneyType"> |
|||
<img width="20px" height="17px" src="../../../../src/icon/carbonAssetsIncrease.svg" /> |
|||
增加（tCO2） |
|||
</div> |
|||
</div> |
|||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsReduce.svg" /> |
|||
<div class="calculation TLCard"> |
|||
<div class="money">20,000.00</div> |
|||
<div class="moneyType"> |
|||
<img width="20px" height="17px" src="../../../../src/icon/carbonAssetsLower.svg" /> |
|||
减少（tCO2） |
|||
</div> |
|||
</div> |
|||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsEqual.svg" /> |
|||
<div class="calculation TLCard"> |
|||
<div class="money">75,000.00</div> |
|||
<div class="moneyType">期末余额（tCO2）</div> |
|||
</div> |
|||
</div> |
|||
</a-card> |
|||
<a-card class="card" style="margin-bottom: 1%"> |
|||
<div class="top" style="background: rgba(234, 71, 54, 0.05)"> |
|||
<div class="moneyImg" |
|||
><img width="68px" height="68px" src="../../../../src/icon/carbonAssetsMoney-2.svg" |
|||
/></div> |
|||
<div class="moneyTitle">地方碳账户估值（CNY）</div> |
|||
<div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">300,000.00</div> |
|||
<div class="moneyDetail" |
|||
><img width="34px" height="34px" src="../../../../src/icon/carbonAssetsSearch-2.svg" |
|||
/></div> |
|||
</div> |
|||
<div class="title"> |
|||
<img width="24px" height="24px" src="../../../../src/icon/carbonAssetsTitle-2.svg" /> |
|||
<span>地方碳账户余额</span> |
|||
</div> |
|||
<div class="bottom"> |
|||
<div class="calculation TRCard"> |
|||
<div class="money">75,000.00</div> |
|||
<div class="moneyType">期初余额（tCO2）</div> |
|||
</div> |
|||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsAdd.svg" /> |
|||
<div class="calculation TRCard"> |
|||
<div class="money">20,000.00</div> |
|||
<div class="moneyType"> |
|||
<img width="20px" height="17px" src="../../../../src/icon/carbonAssetsIncrease.svg" /> |
|||
增加（tCO2） |
|||
</div> |
|||
</div> |
|||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsReduce.svg" /> |
|||
<div class="calculation TRCard"> |
|||
<div class="money">20,000.00</div> |
|||
<div class="moneyType"> |
|||
<img width="20px" height="17px" src="../../../../src/icon/carbonAssetsLower.svg" /> |
|||
减少（tCO2） |
|||
</div> |
|||
</div> |
|||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsEqual.svg" /> |
|||
<div class="calculation TRCard"> |
|||
<div class="money">75,000.00</div> |
|||
<div class="moneyType">期末余额（tCO2）</div> |
|||
</div> |
|||
</div> |
|||
</a-card> |
|||
<a-card class="card" style="margin-right: 1%"> |
|||
<div class="top" style="background: rgba(65, 163, 224, 0.05)"> |
|||
<div class="moneyImg" |
|||
><img width="68px" height="68px" src="../../../../src/icon/carbonAssetsMoney-3.svg" |
|||
/></div> |
|||
<div class="moneyTitle">CCER资产估值（CNY）</div> |
|||
<div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">300,000.00</div> |
|||
<div class="moneyDetail" |
|||
><img width="34px" height="34px" src="../../../../src/icon/carbonAssetsSearch-3.svg" |
|||
/></div> |
|||
</div> |
|||
<div class="title"> |
|||
<img width="24px" height="24px" src="../../../../src/icon/carbonAssetsTitle-3.svg" /> |
|||
<span>全国碳账户余额</span> |
|||
</div> |
|||
<div class="bottom"> |
|||
<div class="calculation BLCard"> |
|||
<div class="money">75,000.00</div> |
|||
<div class="moneyType">期初余额（tCO2）</div> |
|||
</div> |
|||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsAdd.svg" /> |
|||
<div class="calculation BLCard"> |
|||
<div class="money">20,000.00</div> |
|||
<div class="moneyType"> |
|||
<img width="20px" height="17px" src="../../../../src/icon/carbonAssetsIncrease.svg" /> |
|||
增加（tCO2） |
|||
</div> |
|||
</div> |
|||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsReduce.svg" /> |
|||
<div class="calculation BLCard"> |
|||
<div class="money">20,000.00</div> |
|||
<div class="moneyType"> |
|||
<img width="20px" height="17px" src="../../../../src/icon/carbonAssetsLower.svg" /> |
|||
减少（tCO2） |
|||
</div> |
|||
</div> |
|||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsEqual.svg" /> |
|||
<div class="calculation BLCard"> |
|||
<div class="money">75,000.00</div> |
|||
<div class="moneyType">期末余额（tCO2）</div> |
|||
</div> |
|||
</div> |
|||
</a-card> |
|||
<a-card class="card"> |
|||
<div class="top" style="background: rgba(37, 192, 150, 0.05)"> |
|||
<div class="moneyImg" |
|||
><img width="68px" height="68px" src="../../../../src/icon/carbonAssetsMoney-4.svg" |
|||
/></div> |
|||
<div class="moneyTitle">全国碳账户估值（CNY）</div> |
|||
<div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">300,000.00</div> |
|||
</div> |
|||
<div class="title" style="justify-content: center"> |
|||
<img |
|||
width="17px" |
|||
height="17px" |
|||
style="transform: rotate(90deg)" |
|||
src="../../../../src/icon/carbonAssetsEqual.svg" /> |
|||
</div> |
|||
<div class="bottom"> |
|||
<div class="BRCard"> |
|||
<div class="money">300,000.00</div> |
|||
<div class="moneyType">全国碳账户资产估值</div> |
|||
</div> |
|||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsAdd.svg" /> |
|||
<div class="BRCard"> |
|||
<div class="money">300,000.00</div> |
|||
<div class="moneyType">地方碳账户资产估值</div> |
|||
</div> |
|||
<img width="17px" height="17px" src="../../../../src/icon/carbonAssetsAdd.svg" /> |
|||
<div class="BRCard"> |
|||
<div class="money">300,000.00</div> |
|||
<div class="moneyType">CCER碳资产估值</div> |
|||
</div> |
|||
</div> |
|||
</a-card> |
|||
</div> |
|||
<div class="detail" v-else> |
|||
<carbonAssetsDetail /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref } from 'vue'; |
|||
import carbonAssetsDetail from './carbonAssetsDetail/index.vue'; |
|||
defineOptions({ |
|||
energyType: 'carbonAssets', // 与页面路由name一致缓存才可生效 |
|||
}); |
|||
const homePage = ref(true); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.mainContant { |
|||
background: #f1f2f6; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
.card { |
|||
width: 49%; |
|||
height: 49%; |
|||
.TLCard { |
|||
background: linear-gradient(180deg, rgba(255, 249, 246, 1) 0%, rgba(255, 255, 255, 1) 100%); |
|||
border: 1px solid rgba(252, 139, 78, 0.3); |
|||
} |
|||
.TRCard { |
|||
background: linear-gradient(180deg, rgba(254, 245, 244, 1) 0%, rgba(255, 255, 255, 1) 100%); |
|||
border: 1px solid rgba(241, 100, 69, 0.2); |
|||
} |
|||
.BLCard { |
|||
background: linear-gradient(180deg, rgba(245, 250, 254, 1) 0%, rgba(255, 255, 255, 1) 100%); |
|||
border: 1px solid rgba(72, 168, 228, 0.3); |
|||
} |
|||
} |
|||
} |
|||
:deep(.ant-card-body) { |
|||
height: 100%; |
|||
} |
|||
.top { |
|||
height: 40%; |
|||
width: 100%; |
|||
border-radius: 8px; |
|||
display: flex; |
|||
align-items: center; |
|||
.moneyImg { |
|||
width: 20%; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
.moneyTitle { |
|||
width: 35%; |
|||
display: flex; |
|||
justify-content: center; |
|||
opacity: 1; |
|||
font-size: 20px; |
|||
font-weight: 700; |
|||
color: rgba(0, 0, 0, 1); |
|||
text-align: left; |
|||
vertical-align: top; |
|||
} |
|||
.moneyTotal { |
|||
width: 35%; |
|||
display: flex; |
|||
justify-content: center; |
|||
opacity: 1; |
|||
font-size: 40px; |
|||
font-weight: 400; |
|||
line-height: 52px; |
|||
text-align: left; |
|||
} |
|||
.moneyDetail { |
|||
width: 10%; |
|||
display: flex; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
.title { |
|||
height: 20%; |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
> span { |
|||
font-size: 20px; |
|||
font-weight: 700; |
|||
letter-spacing: 1.2px; |
|||
line-height: 26px; |
|||
color: rgba(0, 0, 0, 1); |
|||
text-align: left; |
|||
vertical-align: top; |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
.bottom { |
|||
height: 40%; |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.calculation { |
|||
width: 22%; |
|||
height: 100%; |
|||
opacity: 1; |
|||
border-radius: 8px; |
|||
padding: 10px; |
|||
.money { |
|||
opacity: 1; |
|||
font-size: 28px; |
|||
font-weight: 400; |
|||
letter-spacing: 0px; |
|||
line-height: 50px; |
|||
color: rgba(0, 0, 0, 1); |
|||
text-align: left; |
|||
vertical-align: top; |
|||
} |
|||
.moneyType { |
|||
opacity: 1; |
|||
font-size: 14px; |
|||
font-weight: 700; |
|||
line-height: 45px; |
|||
color: rgba(0, 0, 0, 1); |
|||
text-align: left; |
|||
vertical-align: top; |
|||
} |
|||
} |
|||
.BRCard { |
|||
width: 30%; |
|||
height: 100%; |
|||
opacity: 1; |
|||
background: linear-gradient(180deg, rgba(244, 252, 250, 1) 0%, rgba(255, 255, 255, 1) 100%); |
|||
border: 1px solid rgba(42, 197, 155, 0.3); |
|||
padding: 10px; |
|||
.money { |
|||
opacity: 1; |
|||
font-size: 28px; |
|||
font-weight: 400; |
|||
letter-spacing: 0px; |
|||
line-height: 50px; |
|||
color: rgba(0, 0, 0, 1); |
|||
text-align: left; |
|||
vertical-align: top; |
|||
} |
|||
.moneyType { |
|||
opacity: 1; |
|||
font-size: 14px; |
|||
font-weight: 700; |
|||
line-height: 45px; |
|||
color: rgba(0, 0, 0, 1); |
|||
text-align: left; |
|||
vertical-align: top; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue