brands.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  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.jpg',
  20. ],
  21. isScrollTop:false
  22. }
  23. },
  24. onLoad(option) {
  25. },
  26. methods:{
  27. },
  28. onPageScroll(e){//实时获取到滚动的值
  29. if(e.scrollTop>400){
  30. this.isScrollTop = true
  31. }else{
  32. this.isScrollTop = false
  33. }
  34. },
  35. onShow() {
  36. }
  37. }
  38. </script>
  39. <style lang="scss">
  40. page{
  41. background-color: #FFFFFF;
  42. }
  43. .container{
  44. width: 100%;
  45. height: auto;
  46. .container-btn{
  47. width: 100%;
  48. box-sizing: border-box;
  49. padding: 7rpx 24rpx;
  50. background-color: #FFFFFF;
  51. position: fixed;
  52. display: flex;
  53. bottom: 0;
  54. left: 0;
  55. z-index: 999;
  56. .btn{
  57. flex: 1;
  58. background-image: linear-gradient(270deg, #1045e1 0%, #2bb4ff 100%);
  59. line-height: 84rpx;
  60. border-radius: 42rpx;
  61. text-align: center;
  62. font-size: 26rpx;
  63. color: #FFFFFF;
  64. padding: 13rpx;
  65. box-sizing:border-box;
  66. margin: 0 10rpx;
  67. .btn-text{
  68. width: 100%;
  69. height: 29rpx;
  70. float: left;
  71. line-height: 29rpx;
  72. font-size: $font-size-24;
  73. color: #FFFFFF;
  74. text-align: center;
  75. &.small{
  76. font-size: 18rpx;
  77. }
  78. }
  79. }
  80. }
  81. .banner{
  82. width: 100%;
  83. height: auto;
  84. float: left;
  85. .banner-img0{
  86. width: 100%;
  87. height: 2531rpx;
  88. display: block;
  89. }
  90. }
  91. }
  92. </style>