<template>
|
<view class="app">
|
<cu-custom bgColor="bg-gradual-blue" :isBack="false">
|
<block slot="content">中草药</block>
|
</cu-custom>
|
|
<view class="swiper-box">
|
<z-swiper ref="zSwiper" v-model="list" @slideChange="onChange">
|
<z-swiper-item v-for="(item,index) in list" :key="index">
|
<image class="image" :src="item" mode="aspectFill">
|
</image>
|
</z-swiper-item>
|
<template #indicator>
|
<view class="custom-indicator-list1" v-show="true">
|
<view
|
:class="['custom-indicator-list-item1',index == current?'custom-indicator-list-item1-active':'']"
|
v-for="(item,index) in list" :key="index">
|
</view>
|
</view>
|
</template>
|
</z-swiper>
|
</view>
|
|
<view class="calendar-box">
|
|
|
<lunc-calendar :showShrink="true" shrinkState="week" :signList="signList"></lunc-calendar>
|
</view>
|
|
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
current:0,
|
list: [
|
'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg',
|
'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe3.jpg',
|
'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe4.jpg',
|
'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe5.jpg',
|
],
|
}
|
},
|
methods: {
|
onChange(){
|
this.current = this.$refs.zSwiper.swiper.activeIndex;
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.app {}
|
|
.swiper-box{
|
width: 100%;
|
}
|
|
.image {
|
height: 300rpx;
|
width: 100%;
|
}
|
.calendar-box{
|
margin-top: 20rpx;
|
|
}
|
|
.custom-indicator-list1 {
|
position: absolute;
|
bottom: 30rpx;
|
left: 0;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
z-index: 10;
|
|
.custom-indicator-list-item1 {
|
margin: 0 5rpx;
|
background-color: #e8f5ff;
|
width: 20rpx;
|
height: 10rpx;
|
opacity: 1;
|
border-radius: 5rpx;
|
transition: opacity .3s, background-color .3s, width .3s;
|
|
&-active {
|
background-color: #3eb2f3;
|
width: 35rpx;
|
}
|
}
|
}
|
|
|
</style>
|
