108 lines
2.3 KiB
Vue
108 lines
2.3 KiB
Vue
<template>
|
|
<view
|
|
class="home-container"
|
|
:style="{ 'margin-top': `${statusBarHeight}px` }">
|
|
<CanvasPage />
|
|
<!-- h5 tabbar 底部 -->
|
|
<!-- <view class="h5-tabbar-height"></view> -->
|
|
<adWindow></adWindow>
|
|
<ReturnTop :scroll-top="scrollTop" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { onLoad, onReachBottom, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
|
|
import { useMainStore } from '@/store/modules/useMainStore'
|
|
import { useRouter } from "@/hooks/useRouter";
|
|
import CanvasPage from '@/components/canvasShow/canvasShowPage.vue'
|
|
import ReturnTop from "@/components/ReturnTop/index.vue"
|
|
import adWindow from "@/components/adWindow/adWindow.vue"
|
|
import UvIcon from "@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue";
|
|
import { useScroll } from "@/hooks/useScroll";
|
|
import { homeLogoIcon } from "@/utils/images";
|
|
import { useShare } from "@/hooks/useShare";
|
|
|
|
const main = useMainStore()
|
|
const {push} = useRouter()
|
|
const recommendRef = ref(null)
|
|
const statusBarHeight = ref(0)
|
|
|
|
|
|
const searchShadow = ref({
|
|
boxShadow: '0 0 0 #000'
|
|
})
|
|
|
|
function handleHeaderAnimation(numericalValue) {
|
|
searchShadow.value = {
|
|
boxShadow: `0 0 ${ numericalValue * 15 }px #EFEFEF inset`
|
|
}
|
|
}
|
|
|
|
|
|
onLoad(() => {
|
|
main.init()
|
|
|
|
|
|
// 导航栏距顶距离
|
|
uni.getSystemInfo({
|
|
//获取系统信息
|
|
success: res => {
|
|
statusBarHeight.value = res.statusBarHeight;
|
|
},
|
|
fail(err) {
|
|
// console.log(err);
|
|
}
|
|
});
|
|
})
|
|
|
|
const {shareAppMessage, shareTimeline} = useShare();
|
|
onShareAppMessage(shareAppMessage)
|
|
onShareTimeline(shareTimeline)
|
|
const {scrollTop} = useScroll()
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.home-container {
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
.header-row {
|
|
.logo-col {
|
|
@include useFlex(flex-start, center);
|
|
width: 126rpx;
|
|
aspect-ratio: 126 / 50;
|
|
|
|
.logo {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.search-col {
|
|
@include useFlex(flex-start, center);
|
|
@include usePadding(30, 15);
|
|
width: 100%;
|
|
height: 60rpx;
|
|
border-radius: 50rpx;
|
|
background: $white-color;
|
|
margin-left: 50rpx;
|
|
|
|
.search-input {
|
|
margin-left: 30rpx;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.goods-row {
|
|
padding: 0 8rpx;
|
|
}
|
|
|
|
|
|
</style>
|