|
@@ -0,0 +1,74 @@
|
|
|
+<template>
|
|
|
+ <view class="outter">
|
|
|
+ <view class="head_title" :style="{height:head_height+'px'}">
|
|
|
+ <view class="title" :style="{height:title_height+'px'}">
|
|
|
+ <text @click="navigateBack()" class="iconfont .icon-Left"></text>
|
|
|
+ 福利嘉年华
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="body" :style="{height:'calc(100% - '+head_height+'px)'}">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="side-button">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ head_height:0,
|
|
|
+ title_height:0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getSafeHeight(){
|
|
|
+ let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
|
+ this.head_height = menuButtonInfo.bottom + 25
|
|
|
+ this.title_height = menuButtonInfo.height
|
|
|
+ },
|
|
|
+ navigateBack(){
|
|
|
+ uni.navigateBack(1)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.getSafeHeight()
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .outter{
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ .head_title{
|
|
|
+ width: 100%;
|
|
|
+ background: linear-gradient( 270deg, #332968 9%, #435797 44%, #382E73 92%), rgba(0,0,0,0.2);
|
|
|
+ padding-bottom: 25px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ padding-left: 28px;
|
|
|
+ .title{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: white;
|
|
|
+ font-size: 20px;
|
|
|
+ .iconfont{
|
|
|
+ font-size: 26px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .body{
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ .side-button{
|
|
|
+ position: absolute;
|
|
|
+ right: 32px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|