|
|
@@ -0,0 +1,124 @@
|
|
|
+<template>
|
|
|
+ <view class="container clearfix" >
|
|
|
+ <view class="banner">
|
|
|
+ <image :class="'image_list image'+index" :src="item" mode="" v-for="(item,index) in list" :key="index"></image>
|
|
|
+ </view>
|
|
|
+ <!-- 侧边 -->
|
|
|
+ <scroll-top :isScrollTop="isScrollTop" :bottom="300"></scroll-top>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { mapState,mapMutations} from 'vuex'
|
|
|
+
|
|
|
+ export default{
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ isIphoneX:this.$store.state.isIphoneX,
|
|
|
+ isBannerHome:true,
|
|
|
+ isBannerOems:false,
|
|
|
+ list:[
|
|
|
+ 'https://static.caimei365.com/www/ppzs/attestation_01.jpg',
|
|
|
+ 'https://static.caimei365.com/www/ppzs/attestation_02.jpg',
|
|
|
+ 'https://static.caimei365.com/www/ppzs/attestation_03.jpg',
|
|
|
+ 'https://static.caimei365.com/www/ppzs/attestation_04.jpg',
|
|
|
+ 'https://static.caimei365.com/www/ppzs/attestation_05.jpg',
|
|
|
+ 'https://static.caimei365.com/www/ppzs/attestation_06.jpg',
|
|
|
+ 'https://static.caimei365.com/www/ppzs/attestation_07.jpg',
|
|
|
+ ],
|
|
|
+ isScrollTop:false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+
|
|
|
+ },
|
|
|
+ onPageScroll(e){//实时获取到滚动的值
|
|
|
+ if(e.scrollTop>400){
|
|
|
+ this.isScrollTop = true
|
|
|
+ }else{
|
|
|
+ this.isScrollTop = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ page{
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .container{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ .container-btn{
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 7rpx 24rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ position: fixed;
|
|
|
+ display: flex;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 999;
|
|
|
+ .btn{
|
|
|
+ flex: 1;
|
|
|
+ background-image: linear-gradient(270deg, #1045e1 0%, #2bb4ff 100%);
|
|
|
+ line-height: 84rpx;
|
|
|
+ border-radius: 42rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ padding: 13rpx;
|
|
|
+ box-sizing:border-box;
|
|
|
+ margin: 0 10rpx;
|
|
|
+ .btn-text{
|
|
|
+ width: 100%;
|
|
|
+ height: 29rpx;
|
|
|
+ float: left;
|
|
|
+ line-height: 29rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ &.small{
|
|
|
+ font-size: 18rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .banner{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ .image_list{
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ &.image0{
|
|
|
+ height: 340rpx;
|
|
|
+ }
|
|
|
+ &.image1{
|
|
|
+ height: 1089rpx;
|
|
|
+ }
|
|
|
+ &.image2{
|
|
|
+ height: 699rpx;
|
|
|
+ }
|
|
|
+ &.image3{
|
|
|
+ height: 655rpx;
|
|
|
+ }
|
|
|
+ &.image4{
|
|
|
+ height: 1389rpx;
|
|
|
+ }
|
|
|
+ &.image5{
|
|
|
+ height: 2049rpx;
|
|
|
+ }
|
|
|
+ &.image6{
|
|
|
+ height: 600rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
