大屏处理
This commit is contained in:
maojiacai
134
src/views/recruitment/layout/centerModel.vue
Normal file
134
src/views/recruitment/layout/centerModel.vue
Normal file
@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="contentWrapper">
|
||||
<div class="rowContent">
|
||||
<div class="modelWrapper">
|
||||
<template v-for="(item, index) in modelContentList" :key="index">
|
||||
<div class="modelContent">
|
||||
<div class="num">{{ item.num }}</div>
|
||||
<div class="label">{{ item.label }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="num">780,000</div>
|
||||
<div class="label">人口总数</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const modelContentList = ref([
|
||||
{
|
||||
num: '780,000',
|
||||
label: '户籍人口',
|
||||
},
|
||||
{
|
||||
num: '780,000',
|
||||
label: '流动人口',
|
||||
},
|
||||
{
|
||||
num: '780,000',
|
||||
label: '就业人群',
|
||||
},
|
||||
{
|
||||
num: '780,000',
|
||||
label: '待就业人群',
|
||||
},
|
||||
{
|
||||
num: '780,000',
|
||||
label: '新增就业群体',
|
||||
},
|
||||
{
|
||||
num: '780,000',
|
||||
label: '灵活就业群体',
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contentWrapper {
|
||||
position: absolute;
|
||||
top: 9.53125vw;
|
||||
left: 23.58vw;
|
||||
width: 52.46vw;
|
||||
|
||||
.rowContent {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding-bottom: 9.46875vw;
|
||||
|
||||
margin-top: 10.90625vw;
|
||||
background: url("~@/assets/recruitment/content_bg.svg") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 52.46vw;
|
||||
height: 31.667vw;
|
||||
|
||||
.num {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-size: 2.667vw;
|
||||
color: #30DCFF;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-top: 0.521vw;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.833vw;
|
||||
color: #CBF2FA;
|
||||
}
|
||||
}
|
||||
|
||||
.modelWrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.modelContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
background: url("~@/assets/recruitment/model_bg.svg") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 10.729vw;
|
||||
height: 6.667vw;
|
||||
padding: 0.625vw 0;
|
||||
|
||||
.num {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-size: 1.667vw;
|
||||
color: #30DCFF;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-top: 0.521vw;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.833vw;
|
||||
color: #CBF2FA;
|
||||
}
|
||||
|
||||
&:nth-last-child(-n+1) {
|
||||
margin-top: 2.34375vw;
|
||||
margin-right: 13.8vw;
|
||||
}
|
||||
|
||||
&:nth-last-child(2) {
|
||||
margin-top: 2.34375vw;
|
||||
margin-left: 13.8vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
src/views/recruitment/layout/head.vue
Normal file
66
src/views/recruitment/layout/head.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="homeHead">
|
||||
<!-- <div class="left_Head">
|
||||
<el-icon style="top:5px" color="#0DE7EE" :size="20"><Cloudy/></el-icon>
|
||||
<span class="head_text ml5 mr5">阴</span>
|
||||
<span class="head_text ml5 mr5">空气质量：良</span>
|
||||
<span class="head_text ml5">8 ~ 13°C</span>
|
||||
</div> -->
|
||||
<div class="center_head" :text="props.title">
|
||||
<span>{{props.title}}</span>
|
||||
</div>
|
||||
<!-- <div class="right_head">
|
||||
<img src="@/assets/images/icon_01.png" alt="" class="setting">
|
||||
<span class="head_text ml5 mr5">{{ hour + ":" + minute + ":" + second }}</span>
|
||||
<span class="head_text ml5 mr5">{{weekenday}} </span>
|
||||
<span class="head_text ml5">{{ datatime }}</span>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { timeValidate ,weekValidate} from "@/utils/tools.js";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance ,onBeforeUnmount} from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const minute = ref("00"); //分
|
||||
const second = ref("00"); //秒
|
||||
const hour = ref("00"); //时
|
||||
const day = ref();
|
||||
const weekenday = weekValidate() //星期几
|
||||
const datatime = ref(timeValidate(null,'ymd'));
|
||||
const timersfm = ref(null);
|
||||
const props = defineProps({
|
||||
title:{
|
||||
type:String,
|
||||
default:'兴蜀数智化驾驶舱'
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
timersfm.value = setInterval(() => {
|
||||
CurrentTime();
|
||||
}, 1000);
|
||||
});
|
||||
// 获取时分秒
|
||||
function CurrentTime() {
|
||||
const date = new Date();
|
||||
hour.value = date.getHours();
|
||||
minute.value = date.getMinutes();
|
||||
second.value = date.getSeconds();
|
||||
day.value = day.value < 10 ? "0" + day.value : day.value;
|
||||
hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
|
||||
minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
|
||||
second.value = second.value < 10 ? "0" + second.value : second.value;
|
||||
}
|
||||
onUnmounted(() => {
|
||||
clearInterval(timersfm.value)
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
.head_text{
|
||||
font-size: 1.8vw;
|
||||
}
|
||||
</style>
|
||||
65
src/views/recruitment/layout/headHome.vue
Normal file
65
src/views/recruitment/layout/headHome.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="homeHeadsmall">
|
||||
<div class="left_Head">
|
||||
<el-icon style="top:5px" color="#0DE7EE" :size="20"><Cloudy/></el-icon>
|
||||
<span class="head_text ml5 mr5">小雨</span>
|
||||
<span class="head_text ml5">13°C</span>
|
||||
</div>
|
||||
<div class="center_head" :text="props.title">
|
||||
<span>{{props.title}}</span>
|
||||
</div>
|
||||
<div class="right_head">
|
||||
<!-- <img src="@/assets/images/icon_01.png" alt="" class="setting">-->
|
||||
<span class="head_text ml5 mr5">{{ hour + ":" + minute + ":" + second }}</span>
|
||||
<span class="head_text ml5 mr5">{{weekenday}} </span>
|
||||
<span class="head_text ml5">{{ datatime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { timeValidate ,weekValidate} from "@/utils/tools.js";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance ,onBeforeUnmount} from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const minute = ref("00"); //分
|
||||
const second = ref("00"); //秒
|
||||
const hour = ref("00"); //时
|
||||
const day = ref();
|
||||
const weekenday = weekValidate() //星期几
|
||||
const datatime = ref(timeValidate(null,'ymd'));
|
||||
const timersfm = ref(null);
|
||||
const props = defineProps({
|
||||
title:{
|
||||
type:String,
|
||||
default:'兴蜀数智化驾驶舱'
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
timersfm.value = setInterval(() => {
|
||||
CurrentTime();
|
||||
}, 1000);
|
||||
});
|
||||
// 获取时分秒
|
||||
function CurrentTime() {
|
||||
const date = new Date();
|
||||
hour.value = date.getHours();
|
||||
minute.value = date.getMinutes();
|
||||
second.value = date.getSeconds();
|
||||
day.value = day.value < 10 ? "0" + day.value : day.value;
|
||||
hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
|
||||
minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
|
||||
second.value = second.value < 10 ? "0" + second.value : second.value;
|
||||
}
|
||||
onUnmounted(() => {
|
||||
clearInterval(timersfm.value)
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../components/recruitment.scss";
|
||||
.head_text{
|
||||
font-size: 0.729vw;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user