热推职位tab

src/styles/index.css

@@ -17,3 +17,11 @@
   height: 36px;
   width: 88px;
 }
+
+.default-width {
+  width: 1184px;
+  min-width: 1184px;
+  max-width: 1184px;
+  margin: 0 auto;
+  align-items: center;
+}

src/styles/index.min.css

@@ -1 +1 @@
-:root{--zIndex-dialog:9999;--v-primary-base:#00897B;--v-primary-lighten1:#26A69A;--v-primary-lighten2:#4DB6AC;--v-primary-lighten3:#80CBC4;--v-primary-lighten4:#B2DFDB;--default-text:#666}.buttons{height:36px;width:224px}.half-button{height:36px;width:88px}
+:root{--zIndex-dialog:9999;--v-primary-base:#00897B;--v-primary-lighten1:#26A69A;--v-primary-lighten2:#4DB6AC;--v-primary-lighten3:#80CBC4;--v-primary-lighten4:#B2DFDB;--default-text:#666}.buttons{height:36px;width:224px}.half-button{height:36px;width:88px}.default-width{width:1184px;min-width:1184px;max-width:1184px;margin:0 auto;align-items:center}

src/styles/index.scss

@@ -16,4 +16,12 @@
 .half-button {
   height: 36px;
   width: 88px;
+}
+// 默认宽度
+.default-width {
+  width: 1184px;
+  min-width: 1184px;
+  max-width: 1184px;
+  margin: 0 auto;
+  align-items: center;
 }

src/views/Home/personal/components/hotPromotedPositions.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <v-tabs v-model="tab" align-tabs="start" color="#00897B" bg-color="#fff">
+      <v-tab :value="1">推荐职位</v-tab>
+      <v-tab :value="2">最新职位</v-tab>
+      <v-tab :value="3">急聘职位</v-tab>
+    </v-tabs>
+    <v-window v-model="tab" class="mt-9">
+        <!-- 推荐职位 -->
+      <v-window-item :value="1">
+        111
+      </v-window-item>
+        <!-- 最新职位 -->
+      <v-window-item :value="2">
+        222
+      </v-window-item>
+      <v-window-item :value="3">
+        333
+      </v-window-item>
+    </v-window>
+  </div>
+</template>
+
+<script setup name="hotPromotedPositions">
+import {ref } from 'vue'
+const tab = ref(0)
+</script>

src/views/Home/personal/index.vue

@@ -1,11 +1,15 @@
 <template>
-  <div class="parent">
+  <div>
     <headCarousel></headCarousel>
+    <div class="default-width mt-3">
+      <hotPromotedPositions></hotPromotedPositions>
+    </div>
   </div>
 </template>
 
 <script setup>
 import headCarousel from './components/headCarousel.vue'
+import hotPromotedPositions from './components/hotPromotedPositions.vue'
 defineOptions({ name:'personal-index'})
 </script>