增加other分包页面
我的页面里增加跳转other分包跳转（仅在ios不是浏览器审核时展示）
This commit is contained in:
458
components/other-xuafu.vue
Normal file
458
components/other-xuafu.vue
Normal file
@@ -0,0 +1,458 @@
|
||||
<template>
|
||||
<button @click="navThanks" v-if="show">
|
||||
<view class="dong">
|
||||
<view class="monster">
|
||||
<view class="monster__face">
|
||||
<view class="monster__eye avatar-eye avatar-eye--green eye--left">
|
||||
<view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span
|
||||
class="avatar-eye-pupil-lightReflection"></span></span></view>
|
||||
</view>
|
||||
<view class="monster__eye avatar-eye avatar-eye--violet eye--right">
|
||||
<view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span
|
||||
class="avatar-eye-pupil-lightReflection"></span></span></view>
|
||||
</view>
|
||||
<view class="monster__noses">
|
||||
<view class="monster__nose"></view>
|
||||
<view class="monster__nose"></view>
|
||||
</view>
|
||||
<view class="monster__mouth">
|
||||
<view class="monster__top"></view>
|
||||
<view class="monster__bottom"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {returnIsShenhe} from '@/utils/api.js'
|
||||
import {isIos} from '@/utils/app.js'
|
||||
export default {
|
||||
name: "other-xuanu",
|
||||
data() {
|
||||
return {
|
||||
show:false
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
navThanks(){
|
||||
uni.navigateTo({
|
||||
url:'/other/index/index'
|
||||
})
|
||||
},
|
||||
async init(){
|
||||
const isShehe=await returnIsShenhe()
|
||||
this.show=isShehe
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef APP
|
||||
if(isIos()){
|
||||
this.init()
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
/* 大嘴鸟*/
|
||||
.dong {
|
||||
z-index: 9999;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: -80px;
|
||||
transform: scale(0.24);
|
||||
-webkit-transform: scale(0.24);
|
||||
-moz-transform: scale(0.24);
|
||||
|
||||
}
|
||||
|
||||
.monster {
|
||||
transform: rotate(-50deg);
|
||||
-ms-transform: rotate(-50deg);
|
||||
/* IE 9 */
|
||||
-moz-transform: rotate(-50deg);
|
||||
/* Firefox */
|
||||
-webkit-transform: rotate(-50deg);
|
||||
/* Safari 和 Chrome */
|
||||
-o-transform: rotate(-50deg);
|
||||
/* Opera */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 170px;
|
||||
height: 400px;
|
||||
border-top-left-radius: 200px;
|
||||
border-top-right-radius: 200px;
|
||||
background-color: rgb(255, 117, 129);
|
||||
box-shadow: 20px 20px 60px rgba(255, 117, 129,.7);
|
||||
}
|
||||
|
||||
.monster__face {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 14%;
|
||||
width: 75%;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.monster__noses {
|
||||
top: 50%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 28%;
|
||||
height: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.monster__nose {
|
||||
width: 8px;
|
||||
height: 12px;
|
||||
border-radius: 20px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.monster__mouth {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
overflow: hidden;
|
||||
border: 25px solid #FFC333;
|
||||
border-radius: 100px;
|
||||
background-color: #810332;
|
||||
animation: mouth 1.75s infinite;
|
||||
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.monster__mouth::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 80px;
|
||||
border-radius: 100px;
|
||||
background-color: #400018;
|
||||
}
|
||||
|
||||
.monster__mouth::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -80px;
|
||||
width: 160px;
|
||||
height: 80px;
|
||||
border-top-left-radius: 50%;
|
||||
border-top-right-radius: 50%;
|
||||
background-color: #DC1B50;
|
||||
animation: tongue 1.75s infinite;
|
||||
}
|
||||
|
||||
.monster__top {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
width: 170px;
|
||||
height: 30px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
background-color: #ffffff;
|
||||
z-index: 100;
|
||||
animation: t 1.75s infinite;
|
||||
}
|
||||
|
||||
.monster__bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
background-color: #ffffff;
|
||||
z-index: 100;
|
||||
animation: b 1.75s infinite;
|
||||
}
|
||||
|
||||
|
||||
.avatar-eye {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
background: linear-gradient(105deg, white, #cb87f4);
|
||||
border-radius: 100%;
|
||||
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
|
||||
margin: 3px;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
|
||||
.avatar-eye--green {
|
||||
background: linear-gradient(to bottom, #fdfdfd, #c3efea);
|
||||
}
|
||||
|
||||
.avatar-eye--violet {
|
||||
background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
|
||||
}
|
||||
|
||||
|
||||
.eye--left {
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.eye--right {
|
||||
left: 85%;
|
||||
}
|
||||
|
||||
.eye--center {
|
||||
left: 45%;
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
.avatar-eye-pupil {
|
||||
position: absolute;
|
||||
width: 55%;
|
||||
height: 55%;
|
||||
left: 50%;
|
||||
top: 25%;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
z-index: 100;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
|
||||
.pupil--green {
|
||||
background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
|
||||
}
|
||||
|
||||
.pupil--pink {
|
||||
background: linear-gradient(135deg, #f1a183, #8535cd);
|
||||
}
|
||||
|
||||
|
||||
.avatar-eye-pupil-blackThing {
|
||||
position: absolute;
|
||||
width: 55%;
|
||||
height: 55%;
|
||||
left: 50%;
|
||||
top: 25%;
|
||||
background: #2c2f32;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
border-radius: 100%;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.avatar-eye-pupil-lightReflection {
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
left: 25%;
|
||||
top: 10%;
|
||||
background: #ebebeb;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
border-radius: 100%;
|
||||
box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
/*大嘴动起来*/
|
||||
@keyframes t {
|
||||
|
||||
0%,
|
||||
10%,
|
||||
80%,
|
||||
100% {
|
||||
top: -30px;
|
||||
}
|
||||
|
||||
20% {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
30% {
|
||||
top: -20px;
|
||||
}
|
||||
|
||||
40% {
|
||||
top: -0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
top: -25px;
|
||||
}
|
||||
|
||||
70% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes b {
|
||||
|
||||
0%,
|
||||
10%,
|
||||
80%,
|
||||
100% {
|
||||
bottom: -30px;
|
||||
}
|
||||
|
||||
20% {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
30% {
|
||||
bottom: -20px;
|
||||
}
|
||||
|
||||
40% {
|
||||
bottom: -0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
bottom: -25px;
|
||||
}
|
||||
|
||||
70% {
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mouth {
|
||||
|
||||
0%,
|
||||
10%,
|
||||
100% {
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
}
|
||||
|
||||
15% {
|
||||
width: 90%;
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
20% {
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
25% {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
30% {
|
||||
width: 80%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
35% {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
40% {
|
||||
width: 55%;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
45% {
|
||||
width: 50%;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
50% {
|
||||
width: 40%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
55% {
|
||||
width: 70%;
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
60% {
|
||||
width: 40%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
65% {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
70% {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
75% {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
80% {
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
85% {
|
||||
width: 90%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
85% {
|
||||
width: 40%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
90% {
|
||||
width: 90%;
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
95% {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tongue {
|
||||
|
||||
0%,
|
||||
20%,
|
||||
100% {
|
||||
bottom: -80px;
|
||||
}
|
||||
|
||||
30%,
|
||||
90% {
|
||||
bottom: -40px;
|
||||
}
|
||||
|
||||
40% {
|
||||
bottom: -45px;
|
||||
}
|
||||
|
||||
50% {
|
||||
bottom: -50px;
|
||||
}
|
||||
|
||||
70% {
|
||||
bottom: -80px;
|
||||
}
|
||||
|
||||
90% {
|
||||
bottom: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user