<template> <div class="public-style navigateHrms"> <div class="content" ref="content"> <button class="skip-button" @click="goToMain"> 跳过 </button> <swipe ref="swipe" class="swiper-container" :auto="false" :loop="false" :show-indicators="false"> <swipe-item class="swiper-slide"> <img :src="guide[0]"> <div class="slider-button" @click="move" v-show="isIosX"> <img src="./next@2x.png"> </div> </swipe-item> <swipe-item class="swiper-slide"> <img :src="guide[1]"> <div class="slider-button" @click="move" v-show="isIosX"> <img src="./next@2x.png"> </div> </swipe-item> <swipe-item class="swiper-slide"> <img :src="guide[2]"> <div class="slider-button" @click="goToMain" > <img src="./login@2x.png" v-show="isIosX"> </div> </swipe-item> </swipe> </div> </div> </template> <script> export default { data() { return { isIosX: false } }, created: function () { window.localStorage.needGuid = "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; } }, methods: { goToMain: function () { if (window.localStorage.isOpenFingerLogin) { this.$router.push({name: 'FingerLogin'}) }//if (window.localStorage.user_id && window.localStorage.user_id != "") { //this.$router.push("home"); //} else { this.$router.push({name: "Home"}); } }, 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: 80px; line-height: 80px; text-align: center; width: 80px; border-radius: 40px; border: none; font-size: 24px; 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>