yihuo/pages/award/top.vue

<template>
    <view class="marginX14 wrapper flex-align">
        <view class="flex-shrink0 left flex-column-align-center">
            <image :src="resource.award_horn" style="width: 36rpx; height: 36rpx" />
        </view>
        <view class="flex1 paddingR20" v-if="data">
            <swiper class="swiper" circular="true" :interval="4000" duration="400" autoplay vertical @change="change">
                <swiper-item v-for="(item, index) in data" :key="index">
                    <view class="item paddingL15 paddingY6 flex-column-align " @click="showNext(item)">
                        <view class="font2 bold color-white flex-align-between">
                            {{item.title}}
                            <image v-if="item.extend" :src="resource.arrow_right" style="width: 24rpx; height: 24rpx" />
                        </view>
                        <view class="content font0 color-white paddingT5" style="opacity: 0.8">{{item.content}}</view>
                    </view>
                </swiper-item>
            </swiper>
        </view>
        <view class="line translateY"></view>
        <view class="dots flex-column-align-center" v-if="data.length > 1">
            <view v-for="(_, index) in data.length" :key="index" class="dot" :class="[index === indicator && 'active' ]"></view>
        </view>
    </view>
</template>

<script>
import resource from '@/utils/resource'
export default {
    props: {
        data: Array
    },
    data() {
        return {
            resource,
            indicator: 0
        }
    },
    methods: {
        change(e) {
            this.indicator = e.detail.current
        },
        showNext(item) {
            if (!item.extend) {
                this.$router.push('message')
                return
            }
            if (item.extend.indexOf('http') > -1) {
                this.$router.web(item.extend, item.title)
                return
            }
            if (item.extend.indexOf('method:') > -1) {
                let array = item.extend.split('method:')
                if (array.length === 2) {
                    let method = this.$common[array[1]]
                    method()
                }
                return
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.wrapper {
    position: relative;
    height: 124rpx;
    background: linear-gradient(134deg, #3158ba 0%, #d070ff 100%);
    border-radius: 8px;
    opacity: 0.9;
    .left {
        width: 96rpx;
    }
    .line {
        position: absolute;
        left: 96rpx;
        width: 2rpx;
        height: 96rpx;
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 0%,
            #ffffff 52%,
            rgba(255, 255, 255, 0) 100%
        );
        border-radius: 2rpx;
        opacity: 0.8;
    }
    .swiper {
        height: 124rpx;
        .item {
            height: 124rpx;
            .content {
                overflow: hidden;
                text-overflow: ellipsis; /* 超出部分省略号 */
                word-break: break-all; /* break-all(允许在单词内换行。) */
                display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
                -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
                -webkit-line-clamp: 2; /* 显示的行数 */
            }
        }
    }
}
.dots {
    position: absolute;
    right: 20rpx;
    top: 0;
    bottom: 0;
    width: 6rpx;
    .dot {
        width: 6rpx;
        height: 6rpx;
        border-radius: 3rpx;
        background: #ffffff;
        opacity: 0.5;
        margin: 6rpx 0;
        &.active {
            opacity: 1;
        }
    }
}
</style>