139 lines
3.6 KiB
Vue
139 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import zkItem from "@/components/zk-item";
|
|
import LeftTop from "./left-top.vue";
|
|
import LeftCenter from "./left-center.vue";
|
|
import LeftBottom from "./left-bottom.vue";
|
|
import CenterMap from "./center-map.vue";
|
|
import CenterTop from "./center-top.vue";
|
|
import RightTop from "./right-top.vue";
|
|
import RightCenter from "./right-center.vue";
|
|
import RightBottom from "./right-bottom.vue";
|
|
import RightTopTwo from "./right-top-two.vue";
|
|
import RightBottomTwo from "./right-bottom-two.vue";
|
|
const showRight = ref(true)
|
|
const changeRight = () => {
|
|
showRight.value = !showRight.value
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="index-box">
|
|
<div class="contetn_left">
|
|
<zkItem class="contetn_left-top contetn_lt-item" title="迎新进度">
|
|
<LeftTop />
|
|
</zkItem>
|
|
<zkItem class="contetn_left-center contetn_lr-item" title="">
|
|
<LeftCenter />
|
|
</zkItem>
|
|
<zkItem class="contetn_left-bottom contetn_lb-item" title="" >
|
|
<LeftBottom />
|
|
</zkItem>
|
|
</div>
|
|
<div class="contetn_center">
|
|
<CenterTop class="contetn_center_top" />
|
|
<CenterMap class="contetn_center_map" title="全国地图" />
|
|
</div>
|
|
<div class="contetn_right" v-if="showRight">
|
|
<div class="change-btn" @click="changeRight"></div>
|
|
<zkItem class="contetn_left-bottom contetn_rt-one" title="缴费人数">
|
|
<RightTop />
|
|
</zkItem>
|
|
<zkItem class="contetn_left-bottom contetn_rc-item" title="当日缴费人数" style="padding: 0 10px 16px 10px">
|
|
<RightCenter />
|
|
</zkItem>
|
|
<zkItem class="contetn_left-bottom contetn_rb-item" title="报道人数区域排名 ">
|
|
<RightBottom />
|
|
</zkItem>
|
|
</div>
|
|
<div class="contetn_right" v-else>
|
|
<div class="change-btn" @click="changeRight"></div>
|
|
<zkItem class="contetn_left-bottom contetn_rt_two" title="学院报到人数">
|
|
<RightTopTwo />
|
|
</zkItem>
|
|
<zkItem class="contetn_left-bottom contetn_rb-item" title="专业报到人数 ">
|
|
<RightBottomTwo />
|
|
</zkItem>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.index-box {
|
|
width: 100%;
|
|
display: flex;
|
|
min-height: calc(100% - 64px);
|
|
justify-content: space-between;
|
|
}
|
|
|
|
//左边 右边 结构一样
|
|
.contetn_left,
|
|
.contetn_right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
// justify-content: space-around;
|
|
position: relative;
|
|
width: 470px;
|
|
box-sizing: border-box;
|
|
flex-shrink: 0;
|
|
border: 2px solid rgba(107, 163, 247, 0.2);
|
|
border-radius: 16px;
|
|
background-clip: padding-box, border-box;
|
|
background-origin: padding-box, border-box;
|
|
background-image: linear-gradient(to bottom, rgba(0,0,51,0.1), rgba(0,0,0,0.1)), linear-gradient(0deg, rgba(43, 74, 158, 0.1), rgba(89, 153, 252,0.1));
|
|
.change-btn{
|
|
position: absolute;
|
|
left: -60px;
|
|
top: calc(50% - 200px);
|
|
width: 55px;
|
|
height: 400px;
|
|
background: url('@/assets/img/zheke/right_change.png');
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.contetn_center {
|
|
flex: 1;
|
|
// margin: 0 54px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 50px;
|
|
// justify-content: space-around;
|
|
align-items: center;
|
|
.contetn_center_top {
|
|
width: 100%;
|
|
padding: 0 36px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.contetn_center_map {
|
|
width: 100%;
|
|
height: 700px;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
}
|
|
.contetn_lt-item{
|
|
height: 300px;
|
|
}
|
|
.contetn_lr-item {
|
|
height: 310px;
|
|
}
|
|
.contetn_lb-item{
|
|
height: 310px;
|
|
margin-top: 130px;
|
|
}
|
|
.contetn_rt-one{
|
|
height: 240px;
|
|
}
|
|
.contetn_rt_two{
|
|
height: 640px;
|
|
}
|
|
.contetn_rc-item{
|
|
height: 380px;
|
|
}
|
|
.contetn_rb-item{
|
|
height: 310px;
|
|
}
|
|
</style>
|