Browse Source

feat: 🚀 添加返回首页按钮

pull/22/head
姜鑫 2 years ago
parent
commit
1a344b4bf4
  1. 7
      src/App.vue
  2. 13
      src/assets/images/back_index_icon.svg

7
src/App.vue

@ -1,6 +1,7 @@
<template> <template>
<WeatherAndTime :mall-code="mallCode" /> <WeatherAndTime :mall-code="mallCode" />
<ScrollList ref="scrollList" :customer-list="customerList" :mall-code="mallCode" /> <ScrollList ref="scrollList" :customer-list="customerList" :mall-code="mallCode" />
<img src="./assets/images/back_index_icon.svg" class="fixed bottom-3 left-3 w-28 h-12" alt="" @click="back" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, onBeforeUnmount, ref, toRefs, shallowRef } from 'vue' import { onMounted, onBeforeUnmount, ref, toRefs, shallowRef } from 'vue'
@ -38,12 +39,16 @@ onMounted(() => {
_getCustomerList() _getCustomerList()
timer = setInterval(() => { timer = setInterval(() => {
_getCustomerList() _getCustomerList()
scrollList.value?.scrollTo(0, 1000, false)
scrollList.value.swiper?.value?.scrollTo(0, 1000, false)
}, 1000 * 60) }, 1000 * 60)
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
clearInterval(timer) clearInterval(timer)
}) })
function back() {
scrollList.value.swiper?.value?.scrollTo(0, 1000, false)
}
</script> </script>
<style> <style>

13
src/assets/images/back_index_icon.svg

@ -0,0 +1,13 @@
<svg width="112" height="48" viewBox="0 0 112 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="112" height="48" rx="24" fill="#C70082"/>
<path d="M42.918 17.66C43.842 18.388 44.626 19.13 45.27 19.858L44.318 20.796C43.772 20.096 43.002 19.34 41.994 18.528L42.918 17.66ZM50.912 30.19C50.156 30.19 49.344 30.176 48.462 30.162C47.566 30.148 46.838 30.064 46.264 29.924C45.704 29.756 45.228 29.434 44.808 28.958C44.626 28.72 44.458 28.608 44.29 28.608C43.996 28.608 43.492 29.238 42.778 30.498L41.798 29.588C42.498 28.454 43.142 27.74 43.702 27.46V23.498H41.812V22.266H44.948V27.586C45.004 27.642 45.074 27.712 45.13 27.782C45.466 28.174 45.788 28.454 46.124 28.636C46.53 28.846 47.146 28.972 47.958 29C48.742 29.014 49.68 29.028 50.744 29.028C51.43 29.028 52.13 29.014 52.83 29C53.53 28.972 54.076 28.958 54.454 28.93L54.16 30.19H50.912ZM53.166 17.604L53.824 18.738C52.032 19.186 50.044 19.438 47.846 19.508L47.86 20.81H53.656V21.748C53.292 23.008 52.76 24.128 52.088 25.122C52.872 25.822 53.586 26.55 54.244 27.306L53.348 28.37C52.732 27.586 52.046 26.844 51.29 26.13C50.436 27.068 49.414 27.88 48.224 28.552L47.412 27.488C48.56 26.872 49.526 26.13 50.324 25.262C49.61 24.646 48.854 24.058 48.056 23.498L48.826 22.56C49.638 23.12 50.394 23.694 51.122 24.282C51.626 23.554 52.046 22.77 52.354 21.93H47.846C47.762 24.632 47.314 26.676 46.502 28.048L45.298 27.46C46.138 26.06 46.572 24.1 46.614 21.58V18.346C49.19 18.29 51.374 18.038 53.166 17.604ZM60.214 21.37H65.814V26.55H60.214V21.37ZM64.554 25.444V22.49H61.446V25.444H64.554ZM68.74 18.304V30.176H67.452V29.686H58.548V30.176H57.26V18.304H68.74ZM58.548 28.51H67.452V19.48H58.548V28.51ZM82.774 21.678V30.456H81.458V29.952H74.542V30.456H73.226V21.678H77.02C77.104 21.314 77.16 20.936 77.216 20.544H71.756V19.256H75.13C74.934 18.78 74.71 18.346 74.458 17.926L75.76 17.436C76.04 17.94 76.292 18.556 76.53 19.256H79.4C79.694 18.668 79.96 18.052 80.184 17.408L81.5 17.87C81.304 18.374 81.094 18.836 80.87 19.256H84.244V20.544H78.63C78.56 20.936 78.476 21.314 78.392 21.678H82.774ZM74.542 28.748H81.458V27.544H74.542V28.748ZM74.542 26.382H81.458V25.206H74.542V26.382ZM74.542 24.058H81.458V22.882H74.542V24.058ZM97.48 20.488V27.278H96.136V21.79H89.808V27.292H88.464V20.488H92.034C92.118 20.082 92.202 19.676 92.258 19.256H86.798V17.996H99.202V19.256H93.7C93.616 19.676 93.532 20.096 93.42 20.488H97.48ZM94.022 27.124C95.814 27.698 97.452 28.398 98.922 29.224L98.096 30.484C96.528 29.532 94.932 28.776 93.294 28.23L94.022 27.124ZM92.328 22.462H93.672V24.688C93.588 26.242 93.084 27.488 92.16 28.426C91.264 29.294 89.78 29.952 87.736 30.428L86.98 29.238C89.024 28.79 90.41 28.23 91.138 27.544C91.866 26.816 92.258 25.864 92.328 24.688V22.462Z" fill="white"/>
<g clip-path="url(#clip0_1162_5572)">
<path d="M18.828 18.9998L21.364 21.5358L19.95 22.9498L15 17.9998L19.95 13.0498L21.364 14.4638L18.828 16.9998H26C28.1217 16.9998 30.1566 17.8427 31.6569 19.3429C33.1571 20.8432 34 22.8781 34 24.9998C34 27.1215 33.1571 29.1564 31.6569 30.6567C30.1566 32.1569 28.1217 32.9998 26 32.9998H17V30.9998H26C27.5913 30.9998 29.1174 30.3677 30.2426 29.2424C31.3679 28.1172 32 26.5911 32 24.9998C32 23.4085 31.3679 21.8824 30.2426 20.7572C29.1174 19.6319 27.5913 18.9998 26 18.9998H18.828Z" fill="white"/>
</g>
<rect x="3" y="3" width="106" height="42" rx="20" stroke="white"/>
<defs>
<clipPath id="clip0_1162_5572">
<rect width="24" height="24" fill="white" transform="translate(13 12)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

Loading…
Cancel
Save