You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
2.9 KiB
140 lines
2.9 KiB
<template>
|
|
<view class="content" :class="{'active':active}">
|
|
<image class="logo" :class="{'active':active}" src="../../../static/logo.png" mode="aspectFit"></image>
|
|
<view class="tabbar-box-wrap">
|
|
<view class="tabbar-box">
|
|
<view class="tabbar-box-item" @click="goToPage('/pages/tabbar-3-detial/tabbar-3-release/tabbar-3-release')">
|
|
<image class="box-image" src="../../../static/img/release.png" mode="aspectFit"></image>
|
|
<text class="explain">发图文</text>
|
|
</view>
|
|
<view class="tabbar-box-item" @click="goToPage('/pages/tabbar-3-detial/tabbar-3-video/tabbar-3-video')">
|
|
<image class="box-image" src="../../../static/img/video.png" mode="aspectFit"></image>
|
|
<text class="explain">发视频</text>
|
|
</view>
|
|
<view class="tabbar-box-item" @click="goToPage('/pages/tabbar-3-detial/tabbar-3-qa/tabbar-3-qa')">
|
|
<image class="box-image" src="../../../static/img/qa.png" mode="aspectFit"></image>
|
|
<text class="explain">提问</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
active: false
|
|
};
|
|
},
|
|
onLoad() {},
|
|
onShow() {
|
|
// setTimeout(() => {
|
|
this.active = true;
|
|
// }, 500);
|
|
},
|
|
onHide() {
|
|
this.active = false;
|
|
},
|
|
methods: {
|
|
goToPage(url) {
|
|
if (!url) return;
|
|
uni.navigateTo({
|
|
url
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
/* #ifdef H5 */
|
|
height: calc(100vh - var(--window-bottom) - var(--window-top));
|
|
/* #endif */
|
|
/* #ifndef H5 */
|
|
height: 100vh;
|
|
/* #endif */
|
|
transition: opacity 0.3s;
|
|
background: #999;
|
|
opacity: 0;
|
|
&.active {
|
|
opacity: 1;
|
|
}
|
|
.logo {
|
|
position: relative;
|
|
margin-top: -400upx;
|
|
width: 200upx;
|
|
height: 200upx;
|
|
// z-index: -1;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
&.active {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
.tabbar-box-wrap {
|
|
position: absolute;
|
|
width: 100%;
|
|
padding: 50upx;
|
|
box-sizing: border-box;
|
|
bottom: 0;
|
|
left: 0;
|
|
.tabbar-box {
|
|
position: relative;
|
|
display: flex;
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 20upx;
|
|
padding: 15upx 20upx;
|
|
box-sizing: border-box;
|
|
z-index: 2;
|
|
box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -16upx;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
width: 50upx;
|
|
height: 50upx;
|
|
transform: rotate(45deg);
|
|
background: #fff;
|
|
z-index: 1;
|
|
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
|
|
border-radius: 2px;
|
|
}
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #ffffff;
|
|
border-radius: 20upx;
|
|
z-index: 2;
|
|
}
|
|
.tabbar-box-item {
|
|
// position: relative;
|
|
width: 100%;
|
|
z-index: 3;
|
|
margin: 10upx;
|
|
color: $uni-color-subtitle;
|
|
text-align: center;
|
|
font-size: $uni-font-size-base;
|
|
.box-image {
|
|
width: 100%;
|
|
height: $uni-img-size-lg;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|