|
@@ -6,23 +6,34 @@
|
|
|
<div class="subhead-title">
|
|
|
<span>上月节约能耗</span>
|
|
|
</div>
|
|
|
- <div class="saveCont">
|
|
|
- <div class="co2Wrap sco2">
|
|
|
- 减排<span class="value">{{ lastAllEnergyRes.cdmCo2 }}Kg</span
|
|
|
- >CO2
|
|
|
+ <div class="saveCont" ref="saveCont">
|
|
|
+ <div
|
|
|
+ class="videoWrap"
|
|
|
+ :style="{ width: videoWidth + 'px', left: videoLeft + 'px' }"
|
|
|
+ >
|
|
|
+ <div class="co2Wrap sco2">
|
|
|
+ 减排<span class="value"
|
|
|
+ >{{ lastAllEnergyRes.cdmCo2 }}Kg</span
|
|
|
+ >CO2
|
|
|
+ </div>
|
|
|
+ <div class="co2Wrap scarbon">
|
|
|
+ 减排<span class="value">{{ lastAllEnergyRes.cdmC }}Kg</span
|
|
|
+ >碳
|
|
|
+ </div>
|
|
|
+ <div class="co2Wrap stree">
|
|
|
+ 为国家种<span class="value">{{
|
|
|
+ lastAllEnergyRes.cdmTree
|
|
|
+ }}</span
|
|
|
+ >棵树
|
|
|
+ </div>
|
|
|
+ <div class="electWrap">
|
|
|
+ <div>节约电</div>
|
|
|
+ <div class="value">
|
|
|
+ {{ lastAllEnergyRes.energySaving }}度
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="co2Wrap scarbon">
|
|
|
- 减排<span class="value">{{ lastAllEnergyRes.cdmC }}Kg</span>碳
|
|
|
- </div>
|
|
|
- <div class="co2Wrap stree">
|
|
|
- 为国家种<span class="value">{{ lastAllEnergyRes.cdmTree }}</span
|
|
|
- >棵树
|
|
|
- </div>
|
|
|
- <div class="electWrap">
|
|
|
- <div>节约电</div>
|
|
|
- <div class="value">{{ lastAllEnergyRes.energySaving }}度</div>
|
|
|
- </div>
|
|
|
- <video class="svideo" autoplay loop muted>
|
|
|
+ <video class="svideo" autoplay loop muted ref="svideo">
|
|
|
<source src="@/assets/image/horImg/saveEnergy.mov" />
|
|
|
</video>
|
|
|
</div>
|
|
@@ -36,6 +47,7 @@ import {
|
|
|
toRefs,
|
|
|
onMounted,
|
|
|
computed,
|
|
|
+ nextTick,
|
|
|
} from "vue";
|
|
|
import { queryLastEnergy } from "@/api/index";
|
|
|
import useProjectStore from "@/store/useProjectStore";
|
|
@@ -50,13 +62,36 @@ export default defineComponent({
|
|
|
},
|
|
|
},
|
|
|
setup(props, contx) {
|
|
|
- const projectStore = useProjectStore();
|
|
|
- const { lastAllEnergy } = storeToRefs(projectStore);
|
|
|
+ const svideo = ref();
|
|
|
+ const saveCont = ref();
|
|
|
|
|
|
const allData = reactive({
|
|
|
lastAllEnergyRes: {},
|
|
|
+ videoWidth: 0,
|
|
|
+ videoLeft: 0,
|
|
|
});
|
|
|
|
|
|
+ onMounted(() => {
|
|
|
+ nextTick(() => {
|
|
|
+ let videoheight = svideo.value.offsetHeight;
|
|
|
+ let videoWidth = (videoheight / 692) * 2116;
|
|
|
+ let contWidth = saveCont.value.offsetWidth;
|
|
|
+
|
|
|
+ allData.videoWidth = videoWidth;
|
|
|
+ allData.videoLeft = (contWidth - videoWidth) / 2;
|
|
|
+ // console.log(
|
|
|
+ // "svideo",
|
|
|
+ // svideo.value,
|
|
|
+ // svideo.value.offsetWidth,
|
|
|
+ // svideo.value.offsetHeight,
|
|
|
+ // );
|
|
|
+ // 2116 × 692
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ const projectStore = useProjectStore();
|
|
|
+ const { lastAllEnergy } = storeToRefs(projectStore);
|
|
|
+
|
|
|
projectStore.$subscribe((mutation, state) => {
|
|
|
const lastAllEnergy = state.lastAllEnergy || {};
|
|
|
allData.lastAllEnergyRes = {
|
|
@@ -77,7 +112,7 @@ export default defineComponent({
|
|
|
onMounted(() => {
|
|
|
//projectStore.setLastAllEnergy();
|
|
|
});
|
|
|
- return { ...toRefs(allData), lastAllEnergy };
|
|
|
+ return { ...toRefs(allData), svideo, saveCont };
|
|
|
},
|
|
|
computed: {},
|
|
|
});
|
|
@@ -102,38 +137,50 @@ export default defineComponent({
|
|
|
.svideo {
|
|
|
height: 100%;
|
|
|
}
|
|
|
+ .videoWrap {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ top: 10px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ // left: 0;
|
|
|
+ // right: 0;
|
|
|
+ }
|
|
|
.co2Wrap {
|
|
|
position: absolute;
|
|
|
- // font-size: 22px;
|
|
|
- font-size: 1.1vw;
|
|
|
+ font-size: 22px;
|
|
|
+ //font-size: 1.1vw;
|
|
|
.value {
|
|
|
padding: 0 8px;
|
|
|
font-size: 24px;
|
|
|
- font-size: 1.2vw;
|
|
|
+ //font-size: 1.2vw;
|
|
|
}
|
|
|
.co2Img {
|
|
|
width: 58px;
|
|
|
}
|
|
|
}
|
|
|
.sco2 {
|
|
|
- top: 26%;
|
|
|
- left: 0%;
|
|
|
+ top: 20%;
|
|
|
+ //top: 62px;
|
|
|
+ left: 7%;
|
|
|
}
|
|
|
.scarbon {
|
|
|
- top: 2%;
|
|
|
- right: 14%;
|
|
|
+ top: 0%;
|
|
|
+ right: 16%;
|
|
|
}
|
|
|
.stree {
|
|
|
- top: 63%;
|
|
|
- right: 4%;
|
|
|
+ top: 56%;
|
|
|
+ right: 5%;
|
|
|
}
|
|
|
.electWrap {
|
|
|
position: absolute;
|
|
|
- top: 25%;
|
|
|
+ top: 27%;
|
|
|
left: 32%;
|
|
|
width: 28%;
|
|
|
font-size: 30px;
|
|
|
- font-size: 1.4vw;
|
|
|
+ //font-size: 1.4vw;
|
|
|
// line-height: 45px;
|
|
|
text-align: center;
|
|
|
white-space: nowrap;
|
|
@@ -142,7 +189,7 @@ export default defineComponent({
|
|
|
margin-top: 5px;
|
|
|
font-weight: 700;
|
|
|
font-size: 46px;
|
|
|
- font-size: 2vw;
|
|
|
+ //font-size: 2vw;
|
|
|
// line-height: 58px;
|
|
|
text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.4);
|
|
|
}
|