recruit

src/components/detail/Paragraph.vue

@@ -1,16 +1,32 @@
 <template>
-  <article class="paragraph_container" v-html="text"></article>
+  <article
+    :class="isHtml ? 'html_container' : 'paragraph_container'"
+    v-html="text"
+  ></article>
 </template>
 
 <script setup>
 const props = defineProps({
   text: String,
+  isHtml: Boolean,
 })
 </script>
 
 <style lang="scss" scoped>
+.html_container {
+  font-size: 16px;
+  zoom: 0.5;
+  font-family: Source Han Sans CN;
+  font-weight: 300;
+  color: #4f4f4f;
+  line-height: 25px;
+  padding: 20px;
+  box-sizing: border-box;
+  background: #fff;
+}
 .paragraph_container {
   font-size: 16px;
+  text-indent: 32px;
   zoom: 0.5;
   font-family: Source Han Sans CN;
   font-weight: 300;

src/pages/Detail.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="detail_container">
     <SubNavigation :title="`${getTitle()} - 详情页`" />
-    <Paragraph :text="getList()?.topText" />
+    <Paragraph :text="getList()?.topText" :isHtml="getList()?.isHtml" />
     <div v-for="(item, index) in getList()?.card" :key="index">
       <CardTitle
         :title="item?.cardTitle"

src/pages/Recruit.vue

@@ -2,11 +2,12 @@
   <div class="recruit_container">
     <SubNavigation title="招贤纳士" />
     <div class="collapse_container">
-      <div class="single" v-for="item in recruitList" :key="item.id">
+      <div class="single" v-for="item in realList" :key="item.id">
         <div
           :class="
             activeTab == item.id ? 'collapse_header active' : 'collapse_header'
           "
+          :id="item.id"
           @click="changeTab(item.id)"
         >
           <p class="title">{{ item.postName }}</p>
@@ -54,12 +55,32 @@ import SubNavigation from 'cpns/SubNavigation'
 import Right from '@/static/img/recruit/right.png'
 import Right2 from '@/static/img/recruit/right2.png'
 import Answer from '@/static/img/recruit/answer.png'
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 
-const activeTab = ref(1)
+const activeTab = ref(0)
+const realList = ref([])
+
+onMounted(() => {
+  realList.value = recruitList
+})
 
 const changeTab = id => {
+  if (id == activeTab.value) {
+    activeTab.value = 0
+    return
+  }
   activeTab.value = id
+  // 但是各个标签位置已经限制了
+  // 把当前选中的id提升到数组第一位
+  const arr = recruitList.filter(item => item.id != id)
+  const current = recruitList.filter(item => item.id == id)
+  const res = [current[0], ...arr]
+  realList.value = res
+  const dom = document.getElementById(`${id}`)
+  window.scrollTo({
+    top: dom.offsetTop, //需要滚动的距离
+    behavior: 'smooth',
+  })
 }
 </script>
 
@@ -68,6 +89,7 @@ const changeTab = id => {
   padding-top: $sub-header-height;
   .collapse_container {
     .single {
+      position: sticky;
       .collapse_header {
         width: 100%;
         height: 47px;
@@ -166,15 +188,14 @@ const changeTab = id => {
             display: flex;
             align-items: center;
             margin-bottom: 14px;
+            zoom: 0.5;
             .answer {
-              width: 11px;
-              height: 11px;
+              width: 22px;
+              height: 22px;
               margin-right: 7px;
             }
             .text {
-              font-size: 7px;
-              // transform: scale(0.5);
-              // transform-origin: 0 center;
+              font-size: 14px;
               font-family: Alibaba PuHuiTi;
               font-weight: 300;
               color: #595959;