|
@@ -1,71 +1,64 @@
|
|
|
<template>
|
|
|
- <div class="horizontalScreen">
|
|
|
- <div class="bg">
|
|
|
- <img
|
|
|
- class="bgUp"
|
|
|
- src="@/assets/image/horImg/background_up.png"
|
|
|
- />
|
|
|
- <img
|
|
|
- class="bgBuild"
|
|
|
- src="@/assets/image/horImg/background.png"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="container">
|
|
|
- <div class="hor-head">
|
|
|
- <pageHead @toplay="toplay" @tostop="tostop" @nextpage="nextpage" @lastpage="lastpage"/>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="hor-content firstScreen flexBetween"
|
|
|
- v-if="nowPage == 1"
|
|
|
- >
|
|
|
- <div class="content-left">
|
|
|
- <NowData screenType="hor" />
|
|
|
- <div class="content-left-cont horizontalClass flexBetween">
|
|
|
- <div class="bottom-left" v-if="projectStore.projectId !== 'Pj1101050057'">
|
|
|
- <airSwitchHor></airSwitchHor>
|
|
|
- <!-- <airSwitchVer></airSwitchVer> -->
|
|
|
- </div>
|
|
|
- <div class="bottom-right">
|
|
|
- <TemChart screenType="hor"></TemChart>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="content-right">
|
|
|
- <LastMonthData screenType="hor"></LastMonthData>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="horizontalScreen">
|
|
|
+ <div class="bg">
|
|
|
+ <img class="bgUp" src="@/assets/image/horImg/background_up.png" />
|
|
|
+ <img class="bgBuild" src="@/assets/image/horImg/background.png" />
|
|
|
+ </div>
|
|
|
+ <div class="container">
|
|
|
+ <div class="hor-head">
|
|
|
+ <pageHead
|
|
|
+ @toplay="toplay"
|
|
|
+ @tostop="tostop"
|
|
|
+ @nextpage="nextpage"
|
|
|
+ @lastpage="lastpage"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="hor-content firstScreen flexBetween" v-if="nowPage == 1">
|
|
|
+ <div class="content-left">
|
|
|
+ <NowData screenType="hor" />
|
|
|
+ <div class="content-left-cont horizontalClass flexBetween">
|
|
|
<div
|
|
|
- class="hor-content"
|
|
|
- v-if="nowPage == 2"
|
|
|
+ class="bottom-left"
|
|
|
+ v-if="projectStore.projectId !== 'Pj1101050057'"
|
|
|
>
|
|
|
- <HorFloorSpace
|
|
|
- screenType="hor"
|
|
|
- :showPing="nowPage"
|
|
|
- @donetowpage="doneTowPage"
|
|
|
- ref="floorSpace"
|
|
|
- ></HorFloorSpace>
|
|
|
+ <airSwitchHor></airSwitchHor>
|
|
|
+ <!-- <airSwitchVer></airSwitchVer> -->
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="hor-content threeScreen"
|
|
|
- v-if="nowPage == 3"
|
|
|
- >
|
|
|
- <div class="topCont flexBetween">
|
|
|
- <div class="threeLeft">
|
|
|
- <LastAllEnergy screenType="hor"></LastAllEnergy>
|
|
|
- </div>
|
|
|
- <div class="threeRight">
|
|
|
- <LastSaveEnergy screenType="hor"></LastSaveEnergy>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="bottomCont">
|
|
|
- <lastEnergyChart screenType="hor"></lastEnergyChart>
|
|
|
- </div>
|
|
|
+ <div class="bottom-right">
|
|
|
+ <TemChart screenType="hor"></TemChart>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-right">
|
|
|
+ <LastMonthData screenType="hor"></LastMonthData>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div class="hor-content" v-if="nowPage == 2">
|
|
|
+ <HorFloorSpace
|
|
|
+ screenType="hor"
|
|
|
+ :showPing="nowPage"
|
|
|
+ @donetowpage="doneTowPage"
|
|
|
+ ref="floorSpace"
|
|
|
+ ></HorFloorSpace>
|
|
|
+ </div>
|
|
|
+ <div class="hor-content threeScreen" v-if="nowPage == 3">
|
|
|
+ <div class="topCont flexBetween">
|
|
|
+ <div class="threeLeft">
|
|
|
+ <LastAllEnergy screenType="hor"></LastAllEnergy>
|
|
|
+ </div>
|
|
|
+ <div class="threeRight">
|
|
|
+ <LastSaveEnergy screenType="hor"></LastSaveEnergy>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottomCont">
|
|
|
+ <lastEnergyChart screenType="hor"></lastEnergyChart>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
-import { ref, reactive, toRefs, onMounted, computed ,nextTick} from "vue";
|
|
|
+import { ref, reactive, toRefs, onMounted, computed, nextTick } from "vue";
|
|
|
import pageHead from "@/components/pageHead.vue";
|
|
|
import NowData from "@/components/NowData.vue";
|
|
|
import LastMonthData from "@/components/LastMonthData.vue";
|
|
@@ -81,285 +74,286 @@ import { storeToRefs } from "pinia";
|
|
|
import useProjectStore from "@/store/useProjectStore";
|
|
|
|
|
|
export default {
|
|
|
- components: {
|
|
|
- pageHead: pageHead,
|
|
|
- NowData: NowData,
|
|
|
- LastMonthData: LastMonthData,
|
|
|
- airSwitchVer: airSwitchVer,
|
|
|
- TemChart: TemChart,
|
|
|
- HorFloorSpace: HorFloorSpace,
|
|
|
- LastAllEnergy: LastAllEnergy,
|
|
|
- lastEnergyChart: lastEnergyChart,
|
|
|
- airSwitchHor: airSwitchHor,
|
|
|
- LastSaveEnergy: LastSaveEnergy,
|
|
|
- },
|
|
|
- setup() {
|
|
|
- const floorSpace = ref();
|
|
|
- const projectStore = useProjectStore();
|
|
|
- var showAllPage = computed(() => {
|
|
|
- console.log(
|
|
|
- "lastAllEnergy",
|
|
|
- projectStore.lastAllEnergy.energyTotal
|
|
|
- );
|
|
|
- if (
|
|
|
- projectStore.lastAllEnergy.energyTotal === undefined &&
|
|
|
- projectStore.lastAllEnergy.energyCompare === undefined
|
|
|
- ) {
|
|
|
- return 2;
|
|
|
- } else {
|
|
|
- return 3;
|
|
|
- }
|
|
|
- });
|
|
|
- // projectStore.$subscribe((mutation, state) => {
|
|
|
- // console.log(
|
|
|
- // "projectStore--state1",
|
|
|
- // state,
|
|
|
- // state.lastAllEnergy.energySaving
|
|
|
- // );
|
|
|
- // });
|
|
|
+ components: {
|
|
|
+ pageHead: pageHead,
|
|
|
+ NowData: NowData,
|
|
|
+ LastMonthData: LastMonthData,
|
|
|
+ airSwitchVer: airSwitchVer,
|
|
|
+ TemChart: TemChart,
|
|
|
+ HorFloorSpace: HorFloorSpace,
|
|
|
+ LastAllEnergy: LastAllEnergy,
|
|
|
+ lastEnergyChart: lastEnergyChart,
|
|
|
+ airSwitchHor: airSwitchHor,
|
|
|
+ LastSaveEnergy: LastSaveEnergy,
|
|
|
+ },
|
|
|
+ setup() {
|
|
|
+ const floorSpace = ref();
|
|
|
+ const projectStore = useProjectStore();
|
|
|
|
|
|
- const allData = reactive({
|
|
|
- nowPage: 1,
|
|
|
- timeoutsign:null,
|
|
|
- //showAllPage: 3,
|
|
|
- toplay(){
|
|
|
- //todo
|
|
|
- if(allData.nowPage==2){
|
|
|
- floorSpace.value&&floorSpace.value.toplay();//第二屏动画播放
|
|
|
- }else{
|
|
|
- allData.timePageShow(500);
|
|
|
- }
|
|
|
- },
|
|
|
- tostop(){
|
|
|
- //todo
|
|
|
- if(allData.nowPage==2){
|
|
|
- floorSpace.value&&floorSpace.value.tostop();//第二屏动画暂停
|
|
|
- }
|
|
|
- clearTimeout(allData.timeoutsign);
|
|
|
- },
|
|
|
- nextpage(){
|
|
|
- clearTimeout(allData.timeoutsign);
|
|
|
- if (allData.nowPage == 3) {
|
|
|
- allData.nowPage = 1;
|
|
|
- !projectStore.stopSign&&allData.timePageShow(7000);//3屏变1屏时,预订下一次的切屏
|
|
|
- return;
|
|
|
- }
|
|
|
- if (allData.nowPage == 1) {
|
|
|
- allData.nowPage = 2;
|
|
|
- return;
|
|
|
- }
|
|
|
- if (allData.nowPage == 2) {
|
|
|
- if (showAllPage.value == 3) {
|
|
|
- allData.nowPage = 3;
|
|
|
- } else if (showAllPage.value == 2) {
|
|
|
- allData.nowPage = 1;
|
|
|
- }
|
|
|
- !projectStore.stopSign&&allData.timePageShow(7000);//预订下一次的切屏
|
|
|
- }
|
|
|
- },
|
|
|
- lastpage(){
|
|
|
- clearTimeout(allData.timeoutsign);
|
|
|
- if (allData.nowPage == 3) {
|
|
|
- allData.nowPage = 2;
|
|
|
- return;
|
|
|
- }
|
|
|
- if (allData.nowPage == 2) {
|
|
|
- allData.nowPage = 1;
|
|
|
- !projectStore.stopSign&&allData.timePageShow(7000);//3屏变1屏时,预订下一次的切屏
|
|
|
- return;
|
|
|
- }
|
|
|
- if (allData.nowPage == 1) {
|
|
|
- if (showAllPage.value == 3) {
|
|
|
- allData.nowPage = 3;
|
|
|
- !projectStore.stopSign&&allData.timePageShow(7000);//1屏变3屏时,预订下一次的切屏
|
|
|
- } else if (showAllPage.value == 2) {
|
|
|
- allData.nowPage = 2;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- doneTowPage() {
|
|
|
- if(projectStore.stopSign){
|
|
|
- return;
|
|
|
- }
|
|
|
- //第二屏刷新结束 通知
|
|
|
- allData.timePageShow(500);
|
|
|
- },
|
|
|
- timePageShow(time) {
|
|
|
- allData.timeoutsign = setTimeout(() => {
|
|
|
-
|
|
|
- if(projectStore.stopSign){
|
|
|
- //clearTimeout(allData.timeoutsign);
|
|
|
- return;
|
|
|
- }
|
|
|
- if (allData.nowPage == 3) {
|
|
|
- allData.nowPage = 1;
|
|
|
- //console.log('allData.nowPage3',allData.nowPage,time);
|
|
|
- allData.timePageShow(7000);//3屏变1屏时,预订下一次的切屏
|
|
|
- return;
|
|
|
- }
|
|
|
- if (allData.nowPage == 1) {
|
|
|
- allData.nowPage = 2;
|
|
|
- console.log('allData.nowPage1',allData.nowPage,time);
|
|
|
- return;
|
|
|
- }
|
|
|
- if (allData.nowPage == 2) {
|
|
|
- if (showAllPage.value == 3) {
|
|
|
- allData.nowPage = 3;
|
|
|
- } else if (showAllPage.value == 2) {
|
|
|
- allData.nowPage = 1;
|
|
|
- }
|
|
|
- console.log('allData.nowPage2',allData.nowPage,time);
|
|
|
- allData.timePageShow(7000);//2屏变3屏 或 2屏变1屏时,预订下一次的切屏
|
|
|
- }
|
|
|
-
|
|
|
- }, time);
|
|
|
- },
|
|
|
+ console.log(projectStore);
|
|
|
|
|
|
+ let intervalNumber = 7000;
|
|
|
|
|
|
+ if (projectStore.projectId === "Pj1101050057") {
|
|
|
+ intervalNumber = 15000;
|
|
|
+ }
|
|
|
|
|
|
- });
|
|
|
- onMounted(() => {
|
|
|
- //console.log("horiscreen-mounted");
|
|
|
- allData.timePageShow(7000);
|
|
|
+ var showAllPage = computed(() => {
|
|
|
+ console.log("lastAllEnergy", projectStore.lastAllEnergy.energyTotal);
|
|
|
+ if (
|
|
|
+ projectStore.lastAllEnergy.energyTotal === undefined &&
|
|
|
+ projectStore.lastAllEnergy.energyCompare === undefined
|
|
|
+ ) {
|
|
|
+ return 2;
|
|
|
+ } else {
|
|
|
+ return 3;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // projectStore.$subscribe((mutation, state) => {
|
|
|
+ // console.log(
|
|
|
+ // "projectStore--state1",
|
|
|
+ // state,
|
|
|
+ // state.lastAllEnergy.energySaving
|
|
|
+ // );
|
|
|
+ // });
|
|
|
|
|
|
- });
|
|
|
- return {
|
|
|
- ...toRefs(allData),floorSpace,projectStore
|
|
|
- };
|
|
|
- },
|
|
|
+ const allData = reactive({
|
|
|
+ nowPage: 1,
|
|
|
+ timeoutsign: null,
|
|
|
+ //showAllPage: 3,
|
|
|
+ toplay() {
|
|
|
+ //todo
|
|
|
+ if (allData.nowPage == 2) {
|
|
|
+ floorSpace.value && floorSpace.value.toplay(); //第二屏动画播放
|
|
|
+ } else {
|
|
|
+ allData.timePageShow(500);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tostop() {
|
|
|
+ //todo
|
|
|
+ if (allData.nowPage == 2) {
|
|
|
+ floorSpace.value && floorSpace.value.tostop(); //第二屏动画暂停
|
|
|
+ }
|
|
|
+ clearTimeout(allData.timeoutsign);
|
|
|
+ },
|
|
|
+ nextpage() {
|
|
|
+ clearTimeout(allData.timeoutsign);
|
|
|
+ if (allData.nowPage == 3) {
|
|
|
+ allData.nowPage = 1;
|
|
|
+ !projectStore.stopSign && allData.timePageShow(intervalNumber); //3屏变1屏时,预订下一次的切屏
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (allData.nowPage == 1) {
|
|
|
+ allData.nowPage = 2;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (allData.nowPage == 2) {
|
|
|
+ if (showAllPage.value == 3) {
|
|
|
+ allData.nowPage = 3;
|
|
|
+ } else if (showAllPage.value == 2) {
|
|
|
+ allData.nowPage = 1;
|
|
|
+ }
|
|
|
+ !projectStore.stopSign && allData.timePageShow(intervalNumber); //预订下一次的切屏
|
|
|
+ }
|
|
|
+ },
|
|
|
+ lastpage() {
|
|
|
+ clearTimeout(allData.timeoutsign);
|
|
|
+ if (allData.nowPage == 3) {
|
|
|
+ allData.nowPage = 2;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (allData.nowPage == 2) {
|
|
|
+ allData.nowPage = 1;
|
|
|
+ !projectStore.stopSign && allData.timePageShow(intervalNumber); //3屏变1屏时,预订下一次的切屏
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (allData.nowPage == 1) {
|
|
|
+ if (showAllPage.value == 3) {
|
|
|
+ allData.nowPage = 3;
|
|
|
+ !projectStore.stopSign && allData.timePageShow(intervalNumber); //1屏变3屏时,预订下一次的切屏
|
|
|
+ } else if (showAllPage.value == 2) {
|
|
|
+ allData.nowPage = 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ doneTowPage() {
|
|
|
+ if (projectStore.stopSign) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //第二屏刷新结束 通知
|
|
|
+ allData.timePageShow(500);
|
|
|
+ },
|
|
|
+ timePageShow(time) {
|
|
|
+ allData.timeoutsign = setTimeout(() => {
|
|
|
+ if (projectStore.stopSign) {
|
|
|
+ //clearTimeout(allData.timeoutsign);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (allData.nowPage == 3) {
|
|
|
+ allData.nowPage = 1;
|
|
|
+ //console.log('allData.nowPage3',allData.nowPage,time);
|
|
|
+ allData.timePageShow(intervalNumber); //3屏变1屏时,预订下一次的切屏
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (allData.nowPage == 1) {
|
|
|
+ allData.nowPage = 2;
|
|
|
+ console.log("allData.nowPage1", allData.nowPage, time);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (allData.nowPage == 2) {
|
|
|
+ if (showAllPage.value == 3) {
|
|
|
+ allData.nowPage = 3;
|
|
|
+ } else if (showAllPage.value == 2) {
|
|
|
+ allData.nowPage = 1;
|
|
|
+ }
|
|
|
+ console.log("allData.nowPage2", allData.nowPage, time);
|
|
|
+ allData.timePageShow(intervalNumber); //2屏变3屏 或 2屏变1屏时,预订下一次的切屏
|
|
|
+ }
|
|
|
+ }, time);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ onMounted(() => {
|
|
|
+ //console.log("horiscreen-mounted");
|
|
|
+ allData.timePageShow(intervalNumber);
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ ...toRefs(allData),
|
|
|
+ floorSpace,
|
|
|
+ projectStore,
|
|
|
+ };
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.horizontalScreen {
|
|
|
- padding: 40px;
|
|
|
+ padding: 40px;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+ scrollbar-width: none;
|
|
|
+ position: relative;
|
|
|
+ .container {
|
|
|
height: 100%;
|
|
|
+ }
|
|
|
+ .bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: -1;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
overflow: hidden;
|
|
|
- box-sizing: border-box;
|
|
|
- scrollbar-width: none;
|
|
|
- position: relative;
|
|
|
- .container {
|
|
|
- height: 100%;
|
|
|
+ .bgUp {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: -2;
|
|
|
}
|
|
|
- .bg {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: -1;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- overflow: hidden;
|
|
|
- .bgUp {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: -2;
|
|
|
- }
|
|
|
- .bgBuild {
|
|
|
- position: absolute;
|
|
|
- top: 0%;
|
|
|
- left: 0;
|
|
|
- width: 120%;
|
|
|
- height: 120%;
|
|
|
- // height: 1420PX;//不想自动转换成rem的px 只需要将px大写 PX就可以了
|
|
|
- z-index: -4;
|
|
|
- animation: mymove 40s linear infinite alternate;
|
|
|
- -webkit-animation: mymove 40s linear infinite alternate;
|
|
|
- }
|
|
|
- @keyframes mymove {
|
|
|
- from {
|
|
|
- left: 0px;
|
|
|
- }
|
|
|
- to {
|
|
|
- left: -20%;
|
|
|
- }
|
|
|
- }
|
|
|
- img {
|
|
|
- }
|
|
|
+ .bgBuild {
|
|
|
+ position: absolute;
|
|
|
+ top: 0%;
|
|
|
+ left: 0;
|
|
|
+ width: 120%;
|
|
|
+ height: 120%;
|
|
|
+ // height: 1420PX;//不想自动转换成rem的px 只需要将px大写 PX就可以了
|
|
|
+ z-index: -4;
|
|
|
+ animation: mymove 40s linear infinite alternate;
|
|
|
+ -webkit-animation: mymove 40s linear infinite alternate;
|
|
|
}
|
|
|
- .hor-head {
|
|
|
- height: 134px;
|
|
|
- box-sizing: border-box;
|
|
|
+ @keyframes mymove {
|
|
|
+ from {
|
|
|
+ left: 0px;
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ left: -20%;
|
|
|
+ }
|
|
|
}
|
|
|
- .hor-content {
|
|
|
- height: calc(100% - 134px);
|
|
|
+ img {
|
|
|
}
|
|
|
- .firstScreen {
|
|
|
- box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .hor-head {
|
|
|
+ height: 134px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .hor-content {
|
|
|
+ height: calc(100% - 134px);
|
|
|
+ }
|
|
|
+ .firstScreen {
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .content-left {
|
|
|
- width: calc(100% - 303px);
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .content-right {
|
|
|
- width: 303px;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .content-left-cont {
|
|
|
- height: 52%;
|
|
|
- display: flex;
|
|
|
- flex-flow: row nowrap;
|
|
|
- align-items: stretch;
|
|
|
- justify-content: flex-start;
|
|
|
- .bottom-left {
|
|
|
- width: 36%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(100, 108, 130, 0.06);
|
|
|
- backdrop-filter: blur(20px);
|
|
|
- border-top-left-radius: 20px;
|
|
|
- border-bottom-left-radius: 20px;
|
|
|
- }
|
|
|
- .bottom-right {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- background: rgba(100, 108, 130, 0.06);
|
|
|
- backdrop-filter: blur(20px);
|
|
|
- border-top-right-radius: 20px;
|
|
|
- border-bottom-right-radius: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .content-left {
|
|
|
+ width: calc(100% - 303px);
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
- .flexBetween {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ .content-right {
|
|
|
+ width: 303px;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
+ .content-left-cont {
|
|
|
+ height: 52%;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: row nowrap;
|
|
|
+ align-items: stretch;
|
|
|
+ justify-content: flex-start;
|
|
|
+ .bottom-left {
|
|
|
+ width: 36%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(100, 108, 130, 0.06);
|
|
|
+ backdrop-filter: blur(20px);
|
|
|
+ border-top-left-radius: 20px;
|
|
|
+ border-bottom-left-radius: 20px;
|
|
|
+ }
|
|
|
+ .bottom-right {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(100, 108, 130, 0.06);
|
|
|
+ backdrop-filter: blur(20px);
|
|
|
+ border-top-right-radius: 20px;
|
|
|
+ border-bottom-right-radius: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .flexBetween {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
}
|
|
|
.threeScreen {
|
|
|
- .topCont {
|
|
|
- height: 56%;
|
|
|
- .threeLeft {
|
|
|
- position: relative;
|
|
|
- height: 100%;
|
|
|
- width: 40%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-right: 25px;
|
|
|
- .left-content {
|
|
|
- text-align: center;
|
|
|
- height: 390px;
|
|
|
- width: 100%;
|
|
|
- margin-top: 20px;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- .lastbg {
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .threeRight {
|
|
|
- position: relative;
|
|
|
- height: 100%;
|
|
|
- width: 60%;
|
|
|
+ .topCont {
|
|
|
+ height: 56%;
|
|
|
+ .threeLeft {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ width: 40%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-right: 25px;
|
|
|
+ .left-content {
|
|
|
+ text-align: center;
|
|
|
+ height: 390px;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 20px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .lastbg {
|
|
|
+ position: absolute;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
- .bottomCont {
|
|
|
- height: 44%;
|
|
|
- padding-top: 24px;
|
|
|
- box-sizing: border-box;
|
|
|
+ .threeRight {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ width: 60%;
|
|
|
}
|
|
|
+ }
|
|
|
+ .bottomCont {
|
|
|
+ height: 44%;
|
|
|
+ padding-top: 24px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|