| | |
| | | <swiper class="guide-page__swiper" :current="current" circular @change="handleSwiperChange"> |
| | | <swiper-item v-for="(item, index) in guideList" :key="index"> |
| | | <view class="guide-page__slide"> |
| | | <image class="guide-page__image" :src="item.url" mode="heightFix"></image> |
| | | <image class="guide-page__image" :src="item.imgurlFull" mode="heightFix"></image> |
| | | </view> |
| | | </swiper-item> |
| | | </swiper> |
| | |
| | | <view class="guide-page__dots"> |
| | | <view |
| | | v-for="(item, index) in guideList" |
| | | :key="item.id" |
| | | :key="index" |
| | | class="guide-page__dot" |
| | | :class="{ 'guide-page__dot--active': current === index }" |
| | | ></view> |
| | |
| | | data() { |
| | | return { |
| | | current: 0, |
| | | guideList: [ |
| | | { id: 1, background: '#d9d9d9', url: '/static/image/background.png' }, |
| | | { id: 2, background: '#d9d9d9', url: '/static/image/background.png' }, |
| | | { id: 3, background: '#d9d9d9', url: '/static/image/background.png' }, |
| | | { id: 4, background: '#d9d9d9', url: '/static/image/background.png' } |
| | | ] |
| | | guideList: [] |
| | | }; |
| | | }, |
| | | onLoad() { |
| | | this.getBannerList(); |
| | | }, |
| | | methods: { |
| | | handleSwiperChange(event) { |
| | | this.current = event.detail.current; |
| | | }, |
| | | getBannerList() { |
| | | this.$u.api.getBannerList({ position: 1 }).then(res => { |
| | | if (res.code === 200 && res.data) { |
| | | console.log(res.data); |
| | | this.guideList = res.data; |
| | | } |
| | | }).catch(err => { |
| | | console.log('获取轮播图失败', err); |
| | | }); |
| | | }, |
| | | jump() { |
| | | uni.navigateTo({ |
| | |
| | | transition: all 0.2s ease; |
| | | |
| | | &--active { |
| | | width: 18rpx; |
| | | height: 18rpx; |
| | | width: 40rpx; |
| | | border-radius: 7rpx; |
| | | background: #ffffff; |
| | | box-shadow: 0 0 0 4rpx rgba(255, 255, 255, 0.18); |
| | | } |
| | | } |
| | | |
| | | &__action { |
| | | padding: 0 0 8rpx; |
| | | padding: 0 40rpx; |
| | | } |
| | | |
| | | &__button { |
| | | width: 330rpx; |
| | | height: 74rpx; |
| | | line-height: 74rpx; |
| | | border: 0; |
| | | border-radius: 999rpx; |
| | | background: linear-gradient(180deg, #2d7fff 0%, #2369f3 100%); |
| | | box-shadow: 0 16rpx 32rpx rgba(35, 105, 243, 0.24); |
| | | font-size: 30rpx; |
| | | font-weight: 600; |
| | | width: 320rpx; |
| | | height: 88rpx; |
| | | line-height: 88rpx; |
| | | background: #007AFF; |
| | | color: #ffffff; |
| | | padding: 0; |
| | | |
| | | &::after { |
| | | border: 0; |
| | | } |
| | | font-size: 32rpx; |
| | | border-radius: 44rpx; |
| | | border: 0; |
| | | |
| | | &--hover { |
| | | opacity: 0.92; |
| | | transform: translateY(2rpx); |
| | | opacity: 0.9; |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | </style> |