<template> <div class="public-style navigateHrms"> <div ref="content" class="content"> <button class="skip-button" @click="goToMain"> 跳过 </button> <swipe ref="swipe" :auto="false" :loop="false" :show-indicators="false" class="swiper-container"> <swipe-item class="swiper-slide"> <img :src="guide[0]"> <div v-show="isIosX" class="slider-button" @click="move"> <img src="./next@2x.png"> </div> </swipe-item> <swipe-item class="swiper-slide"> <img :src="guide[1]"> <div v-show="isIosX" class="slider-button" @click="move"> <img src="./next@2x.png"> </div> </swipe-item> <swipe-item class="swiper-slide"> <img :src="guide[2]"> <div class="slider-button" @click="goToMain" > <img v-show="isIosX" src="./login@2x.png"> </div> </swipe-item> </swipe> </div> </div> </template> <script> export default { data () { return { isIosX: false, } }, computed: { guide () { const guide = [] let height = window.innerHeight let width = window.innerWidth if (width >= 749 && height >= 1620) { guide.push(require('./guide1@3x.png')) guide.push(require('./guide2@3x.png')) guide.push(require('./guide3@3x.png')) this.isIosX = true } else { guide.push(require('./1@3x.png')) guide.push(require('./2@3x.png')) guide.push(require('./3@3x.png')) } return guide }, }, created: function () { window.localStorage.needGuid = 'false' }, methods: { goToMain: function () { this.$router.push({name: 'Login'}) }, move () { this.$refs.swipe.move(1) }, }, } </script> <style lang="less" rel="stylesheet"> .navigateHrms { height: 100%; width: 100%; background-color: rgba(233, 238, 240, 1); .content { padding-top: 0; height: 100%; width: 100%; } .hls-swipe-item { display: flex; align-items: center; img { width: 100%; } } .skip-button { margin: 0; padding: 0; position: absolute; top: 50px; right: 30px; height: 40px; line-height: 40px; text-align: center; width: 40px; border-radius: 20px; border: none; font-size: 12px; background: rgba(000, 000, 000, 0.4); color: white; z-index: 100; &.activated { opacity: 0.9; -webkit-transform: scale(0.95); transform: scale(0.95) } } .hls-swipe-indicators { bottom: 40px !important; } .slider-button { position: absolute; left: 25%; width: 50%; height: 200px; bottom: 78px; background: none; border: none; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; img { width: 150px; height: 150px; } } } .platform-ios { .navigateHrms .skip-button { top: 70px; } } // iPhoneX适配 @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios.platform-cordova:not(.fullscreen) { .navigateHrms .skip-button { top: 90px; } } } // iPhoneX Max适配 @media (device-width: 414px) and (device-height: 896px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios.platform-cordova:not(.fullscreen) { .navigateHrms .skip-button { top: 90px; } } } </style>