165 lines
3.6 KiB
Vue
165 lines
3.6 KiB
Vue
<script setup>
|
|
import { defineProps } from "vue";
|
|
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
|
|
onMounted(() => {
|
|
console.log(props.type1, "ceshi");
|
|
});
|
|
import Carousel from "@/views/recruitment/components/carousel.vue";
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: "标题"
|
|
},
|
|
info: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
type1: {
|
|
type: Object,
|
|
default: () => ({
|
|
title: "",
|
|
count: "",
|
|
class: ""
|
|
})
|
|
},
|
|
type2: {
|
|
type: Object,
|
|
default: () => ({
|
|
title: "",
|
|
count: "",
|
|
class: ""
|
|
})
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="enterpriseEmploymentWrapper">
|
|
<div class="titleWrapper">
|
|
<div class="left">{{ title }}</div>
|
|
<div class="right">{{ description }}</div>
|
|
</div>
|
|
<slot name="header"></slot>
|
|
<div class="row">
|
|
<div :class="type1.class">
|
|
<div class="title">{{ type1.title }}</div>
|
|
<div class="count">{{ type1.count }}</div>
|
|
</div>
|
|
<div :class="type2.class">
|
|
<div class="title">{{ type2.title }}</div>
|
|
<div class="count">{{ type2.count }}</div>
|
|
</div>
|
|
<div :class="type2.class">
|
|
<div class="title">{{ type2.title }}</div>
|
|
<div class="count">{{ type2.count }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cardWrapper">
|
|
<slot>
|
|
<!-- <carousel /> -->
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.enterpriseEmploymentWrapper {
|
|
position: relative;
|
|
width: 20.729vw;
|
|
height: 24.6875vw;
|
|
background: url("~@/assets/recruitment/module_bg.svg") no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.cardWrapper {
|
|
position: relative;
|
|
height: calc(100% - 6.2vw);
|
|
margin: 0 1vw;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
justify-content:space-between;
|
|
margin: 0.521vw 0.573vw 0;
|
|
|
|
.count {
|
|
font-size: 1.042vw;
|
|
color: #48fafc;
|
|
}
|
|
|
|
.title {
|
|
color: #ffffff;
|
|
margin-bottom: 0.46875vw;
|
|
font-size: 0.729vw;
|
|
}
|
|
|
|
.modelItem1 {
|
|
padding-top: 1.09375vw;
|
|
padding-left: 4vw;
|
|
text-align: left;
|
|
background: url("~@/assets/recruitment/model1.svg") no-repeat;
|
|
background-size: auto 100%;
|
|
width: 9.823vw;
|
|
height: 4.167vw;
|
|
}
|
|
|
|
.modelItem2 {
|
|
padding-top: 1.09375vw;
|
|
padding-left: 4vw;
|
|
text-align: left;
|
|
background: url("~@/assets/recruitment/model2.svg") no-repeat;
|
|
background-size: auto 100%;
|
|
width: 9.823vw;
|
|
height: 4.167vw;
|
|
}
|
|
.modelItem3 {
|
|
padding-top: 0.8vw;
|
|
padding-left: 3.2vw;
|
|
text-align: left;
|
|
// background: url("~@/assets/recruitment/model2.svg") no-repeat;
|
|
// background-size: auto 100%;
|
|
width: 7vw;
|
|
height: 4.167vw;
|
|
}
|
|
.first{
|
|
background: url("~@/assets/recruitment/first.svg") no-repeat;
|
|
background-size: auto 100%;
|
|
}
|
|
.seconed{
|
|
background: url("~@/assets/recruitment/seconed.svg") no-repeat;
|
|
background-size: auto 100%;
|
|
}
|
|
.third{
|
|
background: url("~@/assets/recruitment/third.svg") no-repeat;
|
|
background-size: auto 100%;
|
|
}
|
|
}
|
|
|
|
.titleWrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 1.5625vw;
|
|
line-height: 1.5625vw;
|
|
font-size: 0.833vw;
|
|
font-family: PingFang SC, PingFang SC;
|
|
.left {
|
|
margin-left: 2.917vw;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
color: #a9f0ff;
|
|
}
|
|
|
|
.right {
|
|
margin-right: 1.042vw;
|
|
color: #a9f0ff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|