|
@@ -0,0 +1,70 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view>
|
|
|
|
|
+ <view class="bg" style="position: relative;" >
|
|
|
|
|
+ <slot name="content"></slot>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="navbar-top" :style="{ 'background': 'rgba(42, 91, 164,'+transparent+')'}">
|
|
|
|
|
+ <view class="content">
|
|
|
|
|
+ <view class="back" @click="$back()">
|
|
|
|
|
+ <text class="cuIcon-back text-white" style="font-size: 40rpx;"></text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="title">{{title}}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+ export default {
|
|
|
|
|
+ name: "my-bar",
|
|
|
|
|
+ props:{
|
|
|
|
|
+ title:String,
|
|
|
|
|
+ transparent:{
|
|
|
|
|
+ type:Number,
|
|
|
|
|
+ default:0
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
|
+ .bg {
|
|
|
|
|
+ height: 440rpx;
|
|
|
|
|
+ background-image: linear-gradient(#2a5ba4, #37678d, #836079);
|
|
|
|
|
+ border-radius: 0 0 200rpx -200rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .navbar-top {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ z-index: 99999;
|
|
|
|
|
+ padding-top: var(--status-bar-height);
|
|
|
|
|
+ transition: top .25s;
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ .content {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+
|
|
|
|
|
+ .back {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ padding: 26rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .title {
|
|
|
|
|
+ padding: 26rpx 0;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ font-size: 34rpx;
|
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|
