123

src/views/Index/components/Recruit/Card/index.vue

@@ -85,6 +85,9 @@ const getClass = () => {
       font-weight: bold;
       color: #ffffff;
       margin-bottom: 31px;
+      transition-property: all;
+      transition-duration: 0.7s;
+      animation-fill-mode: forwards;
     }
     .desc {
       flex: 1;
@@ -94,6 +97,9 @@ const getClass = () => {
       font-family: 'SourceHanSans';
       font-weight: 300;
       color: rgba(214, 214, 214, 1);
+      transition-property: all;
+      transition-duration: 0.7s;
+      animation-fill-mode: forwards;
     }
     .bottom {
       width: 100%;
@@ -126,6 +132,12 @@ const getClass = () => {
   overflow: hidden;
   .dialog {
     background: rgba(40, 63, 231, 0.5);
+    .title {
+      transform: scale(1.1);
+    }
+    .desc {
+      transform: scale(1.1);
+    }
   }
 }
 

src/views/Index/components/Recruit/Detail/index.vue

@@ -59,26 +59,40 @@
           <p class="font">北京市昌平区回龙观街道博纳集团3号楼一层产品梦工厂</p>
         </div>
       </div>
-      <div class="more_btn" @click="cancleDetail">
-        <span>更多岗位</span>
-        <img :src="Arrow" class="icon" alt="" />
+      <div
+        class="more_btn"
+        @click="cancleDetail"
+        v-on:mouseover="mouseover"
+        v-on:mouseleave="mouseleave"
+      >
+        <span class="return_btn">返回列表</span>
+        <img :src="arrowShow ? Arrow1 : Arrow" class="icon" alt="" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import Arrow1 from '@/assets/img/recruit/jiantou1.png'
 import Arrow from '@/assets/img/recruit/jiantou2.png'
 import Email from '@/assets/img/recruit/youjian.png'
 import Earth from '@/assets/img/recruit/wangzhi.png'
 import Address from '@/assets/img/recruit/zuobiao.png'
 import Ok from '@/assets/img/recruit/duigou.png'
 import { postDetail } from '@/mock/post'
+import { ref } from 'vue'
 const postInfo = postDetail[props.postId]
 const props = defineProps({
   handleDetail: Function,
   postId: String,
 })
+const arrowShow = ref(false)
+const mouseover = () => {
+  arrowShow.value = true
+}
+const mouseleave = () => {
+  arrowShow.value = false
+}
 const cancleDetail = () => {
   props.handleDetail(false)
 }
@@ -119,6 +133,13 @@ const cancleDetail = () => {
             font-weight: 400;
             color: #ffffff;
             margin-right: 39px;
+            transition-property: all;
+            transition-duration: 0.7s;
+            animation-fill-mode: forwards;
+          }
+          .btn:hover {
+            background: #fff;
+            color: $theme_color;
           }
           .slary {
             font-size: 18px;
@@ -149,6 +170,13 @@ const cancleDetail = () => {
           align-items: center;
           justify-content: center;
           margin-bottom: 19px;
+          transition-property: all;
+          transition-duration: 0.7s;
+          animation-fill-mode: forwards;
+        }
+        .btn_skill:hover {
+          color: #fff;
+          background: #283fe7;
         }
         .desc {
           font-size: 18px;
@@ -279,12 +307,19 @@ const cancleDetail = () => {
       align-items: center;
       justify-content: center;
       cursor: pointer;
+      transition-property: all;
+      transition-duration: 0.7s;
+      animation-fill-mode: forwards;
       .icon {
         width: 5px;
         height: 10px;
         margin-left: 13px;
       }
     }
+    .more_btn:hover {
+      background: $theme_color;
+      color: #fff;
+    }
   }
 }
 </style>

src/views/Index/components/Recruit/index.vue

@@ -26,7 +26,7 @@
             />
           </div>
           <div
-            class="detail animate__animated animate__zoomInDown"
+            class="detail animate__animated animate__zoomIn"
             v-if="showDetail"
             v-on:mouseleave="mouseleave"
             id="post_detail_ani"
@@ -52,7 +52,7 @@ const handleDetail = (flag, id) => {
   postId.value = id
 }
 const mouseleave = () => {
-  showDetail.value = false
+  // showDetail.value = false
 }
 onMounted(() => {
   handleScreenAuto('#recruit_container')