brands.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <template>
  2. <view class="container clearfix" >
  3. <view class="banner">
  4. <image :class="'banner-img'+index" :src="item" mode="" v-for="(item,index) in image1" :key="index"></image>
  5. </view>
  6. <!-- 侧边 -->
  7. <scroll-top :isScrollTop="isScrollTop" :bottom="300"></scroll-top>
  8. </view>
  9. </template>
  10. <script>
  11. import { mapState,mapMutations} from 'vuex';
  12. export default{
  13. data(){
  14. return{
  15. isIphoneX:this.$store.state.isIphoneX,
  16. isBannerHome:true,
  17. isBannerOems:false,
  18. image1:[
  19. 'https://static.caimei365.com/www/ppzs/1.png',
  20. ],
  21. image2:[
  22. 'https://www.caimei365.com/img/investment/h5_4.jpg',
  23. 'https://www.caimei365.com/img/investment/h5_5.jpg'
  24. ],
  25. isScrollTop:false
  26. }
  27. },
  28. onLoad(option) {
  29. },
  30. methods:{
  31. NavToH5Page(index) {//跳转H5超皮秒防伪查询
  32. switch(index){
  33. case 1:
  34. let path ='https://static.caimei365.com/app/caimei-activity-h5/html/2020/caimeih5_99.html'
  35. this.$api.navigateTo(`/h5/pages/activity/activity?link=${path}&title=品牌OEM服务`)
  36. break;
  37. case 2:
  38. this.isBannerHome = false
  39. this.isBannerOems = true
  40. break;
  41. case 3:
  42. this.isBannerHome = true
  43. this.isBannerOems = false
  44. break;
  45. }
  46. }
  47. },
  48. onPageScroll(e){//实时获取到滚动的值
  49. if(e.scrollTop>400){
  50. this.isScrollTop = true
  51. }else{
  52. this.isScrollTop = false
  53. }
  54. },
  55. onShow() {
  56. }
  57. }
  58. </script>
  59. <style lang="scss">
  60. page{
  61. background-color: #FFFFFF;
  62. }
  63. .container{
  64. width: 100%;
  65. height: auto;
  66. .container-btn{
  67. width: 100%;
  68. box-sizing: border-box;
  69. padding: 7rpx 24rpx;
  70. background-color: #FFFFFF;
  71. position: fixed;
  72. display: flex;
  73. bottom: 0;
  74. left: 0;
  75. z-index: 999;
  76. .btn{
  77. flex: 1;
  78. background-image: linear-gradient(270deg, #1045e1 0%, #2bb4ff 100%);
  79. line-height: 84rpx;
  80. border-radius: 42rpx;
  81. text-align: center;
  82. font-size: 26rpx;
  83. color: #FFFFFF;
  84. padding: 13rpx;
  85. box-sizing:border-box;
  86. margin: 0 10rpx;
  87. .btn-text{
  88. width: 100%;
  89. height: 29rpx;
  90. float: left;
  91. line-height: 29rpx;
  92. font-size: $font-size-24;
  93. color: #FFFFFF;
  94. text-align: center;
  95. &.small{
  96. font-size: 18rpx;
  97. }
  98. }
  99. }
  100. }
  101. .banner{
  102. width: 100%;
  103. height: auto;
  104. float: left;
  105. .banner-img0{
  106. width: 100%;
  107. height: 2531rpx;
  108. display: block;
  109. }
  110. }
  111. }
  112. </style>