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> |