大屏处理

src/views/recruitment/components/enterpriseEmploymentCard.vue

@@ -0,0 +1,122 @@
+<script setup>
+import { defineProps } from 'vue';
+import Carousel from "@/views/recruitment/components/carousel.vue";
+const props = defineProps({
+  title: {
+    type: String,
+    default: "标题"
+  },
+  info: {
+    type: Object,
+    default: () => {}
+  },
+  description: {
+    type: String,
+    default: ""
+  }
+})
+</script>
+
+<template>
+  <div class="enterpriseEmploymentWrapper">
+    <div class="titleWrapper">
+      <div class="left">{{ title }}</div>
+      <div class="right">{{ description }}</div>
+    </div>
+
+    <div class="row">
+      <div class="modelItem1">
+        <div class="title">岗位种类数</div>
+        <div class="count">200.000</div>
+      </div>
+      <div class="modelItem2">
+        <div class="title">岗位人员数</div>
+        <div class="count">1246</div>
+      </div>
+    </div>
+
+    <div class="cardWrapper">
+      <slot name="card">
+        <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;
+    left: 50%;
+    top: 0.78125vw;
+    transform: translateX(-50%);
+    //background: url("~@/assets/recruitment/card_bg.svg") no-repeat;
+    //background-size: 100% 100%;
+    width: 17.03125vw;
+    height: 16.615vw;
+  }
+
+  .row {
+    display: flex;
+    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;
+      text-align: right;
+      background: url("~@/assets/recruitment/model1.svg") no-repeat;
+      background-size: 100% 100%;
+      width: 7.823vw;
+      height: 4.167vw;
+      margin-right: 3.021vw;
+    }
+
+    .modelItem2 {
+      padding-top: 1.09375vw;
+      text-align: right;
+      background: url("~@/assets/recruitment/model2.svg") no-repeat;
+      background-size: 100% 100%;
+      width: 6.823vw;
+      height: 4.167vw;
+    }
+  }
+
+  .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>