兴蜀大屏轮播组件部分提交

src/views/recruitment/components/enterpriseEmploymentCard.vue

@@ -1,5 +1,9 @@
 <script setup>
-import { defineProps } from 'vue';
+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: {
@@ -13,8 +17,24 @@ const props = defineProps({
   description: {
     type: String,
     default: ""
+  },
+  type1: {
+    type: Object,
+    default: () => ({
+      title: "",
+      count: "",
+      class: ""
+    })
+  },
+  type2: {
+    type: Object,
+    default: () => ({
+      title: "",
+      count: "",
+      class: ""
+    })
   }
-})
+});
 </script>
 
 <template>
@@ -25,19 +45,19 @@ const props = defineProps({
     </div>
 
     <div class="row">
-      <div class="modelItem1">
-        <div class="title">岗位种类数</div>
-        <div class="count">200.000</div>
+      <div :class="type1.class">
+        <div class="title">{{ type1.title }}</div>
+        <div class="count">{{ type1.count }}</div>
       </div>
-      <div class="modelItem2">
-        <div class="title">岗位人员数</div>
-        <div class="count">1246</div>
+      <div :class="type2.class">
+        <div class="title">{{ type2.title }}</div>
+        <div class="count">{{ type2.count }}</div>
       </div>
     </div>
 
     <div class="cardWrapper">
-      <slot name="card">
-        <carousel />
+      <slot>
+        <!-- <carousel /> -->
       </slot>
     </div>
   </div>
@@ -53,13 +73,8 @@ const props = defineProps({
 
   .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;
+    height: calc(100% - 6.2vw);
+    margin: 0 1vw;
   }
 
   .row {
@@ -68,31 +83,32 @@ const props = defineProps({
 
     .count {
       font-size: 1.042vw;
-      color: #48FAFC;
+      color: #48fafc;
     }
 
     .title {
-      color: #FFFFFF;
+      color: #ffffff;
       margin-bottom: 0.46875vw;
       font-size: 0.729vw;
     }
 
     .modelItem1 {
       padding-top: 1.09375vw;
-      text-align: right;
+      padding-left: 4vw;
+      text-align: left;
       background: url("~@/assets/recruitment/model1.svg") no-repeat;
-      background-size: 100% 100%;
-      width: 7.823vw;
+      background-size: auto 100%;
+      width: 9.823vw;
       height: 4.167vw;
-      margin-right: 3.021vw;
     }
 
     .modelItem2 {
       padding-top: 1.09375vw;
-      text-align: right;
+      padding-left: 4vw;
+      text-align: left;
       background: url("~@/assets/recruitment/model2.svg") no-repeat;
-      background-size: 100% 100%;
-      width: 6.823vw;
+      background-size: auto 100%;
+      width: 9.823vw;
       height: 4.167vw;
     }
   }
@@ -110,12 +126,12 @@ const props = defineProps({
       text-align: left;
       font-style: normal;
       text-transform: none;
-      color: #A9F0FF;
+      color: #a9f0ff;
     }
 
     .right {
       margin-right: 1.042vw;
-      color: #A9F0FF;
+      color: #a9f0ff;
     }
   }
 }