123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 |
- <template>
- <view class="content">
- <swiper class="swiper" :autoplay="autoplay" :duration="duration">
- <swiper-item v-for="(item, index) in list" :key="item.id">
- <view class="swiper-item">
- <image :src="item.cover" mode="aspectFill"></image>
- </view>
- <view class="jump-over" @tap="launchFlag()">{{s}}s {{jumpover}}</view>
- <view class="experience" v-if="index == list.length - 1" @tap="launchFlag()">{{experience}}</view>
- </swiper-item>
- </swiper>
- </view>
- </template>
- <script>
- export default {
- props: {
- list: {
- type: Array,
- default: () => []
- },
- s: {
- type: Number,
- default: 0
- }
- },
- data() {
- return {
- background: ['color1', 'color2', 'color3'],
- autoplay: false,
- duration: 500,
- jumpover: '跳过',
- experience: '立即体验',
- }
- },
- methods: {
- launchFlag: function() {
- /**
- * 向本地存储中设置launchFlag的值,即启动标识;
- */
- uni.setStorage({
- key: 'launchFlag',
- data: true,
- });
- uni.reLaunch({
- url: '/pages/index/news'
- });
- }
- }
- }
- </script>
- <style>
- page,
- .content {
- width: 100%;
- height: 100%;
- background-size: 100% auto;
- padding: 0;
- }
- .swiper {
- width: 100%;
- height: 100%;
- background: #FFFFFF;
- }
- .swiper-item {
- width: 100%;
- height: 100%;
- text-align: center;
- position: relative;
- display: flex;
- justify-content: center;
- align-items: flex-end;
- flex-direction: column-reverse
- }
-
- .swiper-item image {
- width: 100%;
- height: 100% !important;
- }
- .swiper-item-img {
- width: 100%;
- height: auto;
- margin: 0 auto;
- }
- .swiper-item-img image {
- width: 100%;
- }
- .uniapp-img {
- height: 20%;
- background: #FFFFFF;
- display: flex;
- justify-content: center;
- align-items: center;
- overflow: hidden;
- }
- .uniapp-img image {
- width: 40%;
- }
- .jump-over,
- .experience {
- position: absolute;
- height: 60upx;
- line-height: 60upx;
- padding: 0 40upx;
- border-radius: 30upx;
- font-size: 32upx;
- color: #fff;
- border: 1px solid #fff;
- z-index: 999;
- }
- .jump-over {
- right: 45upx;
- top: 100upx;
- }
- .experience {
- right: 50%;
- margin-right: -105upx;
- bottom: 5%;
- }
- </style>
|