index.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <view class="content">
  3. <!-- 顶部公告图 -->
  4. <view class="top">
  5. <image class="topImg"
  6. src="http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"
  7. mode=""></image>
  8. <view class="danMu" v-if="DanMuBoon">
  9. <DanMu></DanMu>
  10. </view>
  11. </view>
  12. <!-- 我的贵人 -->
  13. <view class="">
  14. <GuiRenVue></GuiRenVue>
  15. </view>
  16. <!-- 店铺列表 -->
  17. <view class="listBox">
  18. <ListVue></ListVue>
  19. </view>
  20. </view>
  21. </template>
  22. <script setup>
  23. import {
  24. ref,
  25. reactive
  26. } from 'vue'
  27. import {
  28. HTTP
  29. } from '@/api/http.js'
  30. import {
  31. onShow,
  32. onLoad,
  33. onReachBottom
  34. } from '@dcloudio/uni-app'
  35. import {
  36. jieqiFn
  37. } from '@/config' //返回节气样式(a,b),a是节气名称,b是类型,1是返回背景颜色,2是返回边框颜色,3是返回字体颜色
  38. import DanMu from "@/components/DanMu/DanMu.vue"//弹幕
  39. import GuiRenVue from './components/GuiRen.vue'//贵人轮播图
  40. import ListVue from './components/List.vue'
  41. onReachBottom(()=>{//触底加载
  42. })
  43. const DanMuBoon=ref(false)
  44. onShow(()=>{
  45. DanMuBoon.value=false
  46. let tm=setTimeout(()=>{
  47. DanMuBoon.value=true
  48. clearTimeout(tm)
  49. },200)
  50. })
  51. </script>
  52. <style lang="scss" scoped>
  53. page {
  54. background: #f6f6f6;
  55. }
  56. // 顶部大图
  57. .top {
  58. position: relative;
  59. font-size: 0;
  60. .topImg {
  61. width: 750rpx;
  62. height: 400rpx;
  63. }
  64. .danMu{
  65. position: absolute;
  66. top: 0;
  67. left: 0;
  68. }
  69. }
  70. // 店铺列表
  71. .listBox{
  72. margin-top: 30rpx;
  73. }
  74. </style>