返回顶部组件

components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     AreaSelect: typeof import('./src/components/AreaSelect/index.vue')['default']
     AreaSelectPanel: typeof import('./src/components/AreaSelectPanel/index.vue')['default']
     Autocomplete: typeof import('./src/components/FormUI/autocomplete/index.vue')['default']
+    BackTop: typeof import('./src/components/BackTop/index.vue')['default']
     Cascade: typeof import('./src/components/FormUI/cascade/index.vue')['default']
     Checkbox: typeof import('./src/components/FormUI/checkbox/index.vue')['default']
     Combobox: typeof import('./src/components/FormUI/combobox/index.vue')['default']
@@ -30,6 +31,7 @@ declare module 'vue' {
     CtTextField: typeof import('./src/components/CtVuetify/CtTextField/index.vue')['default']
     DatePicker: typeof import('./src/components/DatePicker/index.vue')['default']
     Echarts: typeof import('./src/components/Echarts/index.vue')['default']
+    ElBacktop: typeof import('element-plus/es')['ElBacktop']
     ElCascader: typeof import('element-plus/es')['ElCascader']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     Empty: typeof import('./src/components/Empty/index.vue')['default']
@@ -51,7 +53,7 @@ declare module 'vue' {
     LongCompany: typeof import('./src/components/Position/longCompany.vue')['default']
     LongStrip: typeof import('./src/components/Position/longStrip.vue')['default']
     NestedListGroup: typeof import('./src/components/FormUI/nestedListGroup/index.vue')['default']
-    Pay: typeof import('./src/components/pay/index.vue')['default']
+    Pay: typeof import('./src/components/personalRecharge/pay.vue')['default']
     PersonalRecharge: typeof import('./src/components/personalRecharge/index.vue')['default']
     PreviewImage: typeof import('./src/components/PreviewImg/previewImage.vue')['default']
     PreviewImg: typeof import('./src/components/PreviewImg/index.vue')['default']

src/components/BackTop/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <el-backtop :bottom="bottom" class="text-center" :style="{'width': width + 'px', height: height + 'px'}">
+    <div class="customStyle" :style="{'line-height': (Number(height) - 7) + 'px'}">
+      <v-icon color="#fff">mdi-menu-up</v-icon>
+    </div>
+  </el-backtop>
+</template>
+
+<script setup>
+defineOptions({ name: 'back-top'})
+
+defineProps({
+  bottom: {
+    type: Number,
+    default: 50
+  },
+	width: {
+		type: [Number, String],
+		default: 56
+	},
+	height: {
+		type: [Number, String],
+		default: 56
+	}
+})
+</script>
+
+<style scoped lang="scss">
+.customStyle {
+	width: 100%;
+	height: 100%;
+	background-color: #00B760;
+	box-shadow: var(--el-box-shadow-lighter);
+  color: #fff;
+	border-radius: 50%;
+}
+</style>

src/layout/enterprise.vue

@@ -51,6 +51,8 @@
       </v-carousel-item>
     </v-carousel>
   </v-dialog>
+
+  <BackTop />
 </template>
 
 <script setup>
@@ -62,6 +64,7 @@ import { ref, watch, computed, onMounted } from 'vue'
 import { useSystem } from '@/store/system'
 import { useUserStore } from '@/store/user'
 import { getWebContent } from '@/api/common'
+import BackTop from '@/components/BackTop'
 
 const router = useRouter()
 const route = useRoute()

src/layout/index.vue

@@ -12,6 +12,8 @@
     </div>
     <Footers v-if="footerWhiteList.indexOf(router.currentRoute.value.path) === -1" :class="{'mt-10': !router.currentRoute.value.path.includes('/mall')}"></Footers>
     <Slider v-if="whiteList.indexOf(router.currentRoute.value.path) === -1" class="slider"></Slider>
+
+    <BackTop />
   </div>
 </template>
 
@@ -24,6 +26,7 @@ import Slider from './personal/slider.vue'
 import { useSharedState } from '@/store/sharedState'
 import { useRouter } from 'vue-router'
 import { useMallStore } from '@/store/mall'
+import BackTop from '@/components/BackTop'
 
 // 不展示侧边栏名单
 const whiteList = ['/login', '/privacyPolicy', '/userAgreement', '/register', '/recruit/personal/advertisement/introduce', '/contactService']

src/layout/personal/slider.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="slider-box" :style="{'height': getToken() ? '225px' : '137px'}">
+  <div class="slider-box" :style="{'height': getToken() ? '186px' : '100px'}">
     <div v-for="(item, index) in list" :key="index" class="slider-box-item" @click="handleClick(item, index)">
       <v-btn size="30" class="icons" icon variant="text">
         <v-icon class="icons" size="30">{{ item.mdi }}</v-icon>
@@ -22,12 +22,10 @@ import { getToken } from '@/utils/auth'
 
 const router = useRouter()
 const defaultList = [
-  { mdi: 'mdi-arrow-up-bold', tips: '返回顶部' },
   { mdi: 'mdi-qrcode', tips: '微信公众号', showImg: 'https://minio.citupro.com/dev/menduner/official-account-code4.jpg' },
   { mdi: 'mdi-headphones', tips: '联系我们', path: '/contactUs' }
 ]
 const hasTokenList = [
-  { mdi: 'mdi-arrow-up-bold', tips: '返回顶部' },
   { mdi: 'mdi-qrcode', tips: '微信公众号', showImg: 'https://minio.citupro.com/dev/menduner/official-account-code4.jpg' },
   { mdi: 'mdi-bell-outline', tips: '通知', path: '/recruit/personal/message' },
   { mdi: 'mdi-list-box-outline', tips: '在线简历', path: '/recruit/personal/personalCenter/resume/online' },
@@ -45,7 +43,6 @@ const handleClick = (item, index) => {
 <style lang="scss" scoped>
 .slider-box {
   width: 44px;
-  // height: 180px;
   background-color: #fff;
   border-radius: 22px;
   box-shadow: 0 4px 20px 0 rgba(0,0,0,.06);
@@ -55,6 +52,9 @@ const handleClick = (item, index) => {
   height: 44px;
   padding: 6px 0;
   text-align: center;
+  &:first-child {
+    margin-top: 8px;
+  }
 }
 .icons {
   color: var(--color-ccc);

src/layout/teacher.vue

@@ -24,6 +24,8 @@
         </div>
       </div>
     </div>
+
+    <BackTop />
   </div>
 </template>
 
@@ -34,6 +36,7 @@ import side from './teacher/side.vue'
 import { useRouter, useRoute } from 'vue-router'
 import { watch, computed } from 'vue'
 import { useSystem } from '@/store/system'
+import BackTop from '@/components/BackTop'
 // import { useUserStore } from '@/store/user'; const user = useUserStore()
 
 const router = useRouter()

src/views/recruit/personal/home/components/advertisement/preferred.vue

@@ -106,7 +106,8 @@
       ></CtPagination>
       </div>
     </div>
-    <v-btn icon="mdi-chevron-up" size="large" color="primary" class="up-btn" @click="handleToTop"></v-btn>
+
+    <BackTop />
   </div>
 </template>
 
@@ -119,6 +120,7 @@ import { getJobAdvertisedSearch } from '@/api/position'
 import { dealDictObjData } from '@/utils/position'
 import { timesTampChange } from '@/utils/date'
 import { formatName } from '@/utils/getText'
+import BackTop from '@/components/BackTop'
 
 const route = useRoute()
 const { id } = route.params
@@ -165,10 +167,6 @@ const handleChangePage = (e) => {
 const handlePosition = (val) => {
   window.open(`/recruit/personal/position/details/${val.job.id}`)
 }
-
-const handleToTop = () => {
-  window.scrollTo({ top: 0, behavior: 'smooth' })
-}
 </script>
 
 <style scoped lang="scss">