H5

2024-04-30 18:07:59 +08:00
parent b72c4d7af1
commit 56863dd624
1369 changed files with 156460 additions and 0 deletions
--- a/components/navseat.vue
+++ b/components/navseat.vue
@@ -0,0 +1,153 @@
+<template>
+	<view class="content">
+		<!-- 导航栏 -->
+		<view class="navbar" :class="{active:opacity}">
+			<!-- #ifndef APP-PLUS || MP-WEIXIN -->
+			<view class="status-bar"></view>
+			<view class="navbar_tow flex-between"
+				:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
+			<!-- #endif -->
+				<!-- #ifdef APP-PLUS -->
+				<view class="navbar_tow flex-between" :style="{'marginTop':HeighT.heightBar /2+'px'}">
+				<!-- #endif -->
+					<!-- #ifdef MP-WEIXIN -->
+					<view class="navbar_tow flex-between"
+						:style="{'height':HeighT.customBar+'px','marginTop':HeighT.heightBar+'px','padding-right':HeighT.custwidth + 'px'}">
+					<!-- #endif -->
+						<!-- 标题搜索框 -->
+						<view class="flex-between" @click="clicknavigateBack">
+							<view class="navbar_tow_one flex-start">
+								<u-icon name="arrow-left" color="#000" size="24"></u-icon>
+							</view>
+							<view class="navbar_tow_tow" v-if="opacity || titleshow">
+								{{title}}
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="" :style="{'height':HeighT.customBar+'px'}">
+					
+				</view>
+			</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {};
+		},
+		props: {
+			title: {
+				type: String,
+				default: ''
+			},
+			opacity: {
+				type: Boolean,
+				default: false
+			},
+			titleshow: {
+				type: Boolean,
+				default: false
+			},
+		},
+		computed: {
+			HeighT() { //手机类型的尺寸
+				return this.$store.getters.is_BarHeight
+			},
+		},
+		methods: {
+			clicknavigateBack(){
+				uni.navigateBack()
+			}
+		}
+
+	};
+</script>
+
+<style scoped lang="scss">
+	page {
+		background: #F9F9F9;
+	}
+
+	.content {
+		position: -webkit-sticky;
+		position: sticky;
+		top: 0;
+		z-index: 999999;
+		background: #2f87fd;
+		.active {
+			background: rgba(249, 249, 249, 1);
+		}
+
+		.status-bar {
+			// #ifdef APP-PLUS
+			height: calc(var(--status-bar-height) / 2);
+			// #endif
+			// #ifdef MP-WEIXIN
+			height: var(--status-bar-height);
+			// #endif
+		}
+
+		// #ifdef APP-PLUS
+		.statusbarmargin {
+			margin-top: var(--status-bar-height);
+		}
+
+		// #endif
+		.navbar {
+			position: fixed;
+			top: 0;
+			width: 100%;
+			z-index: 99;
+
+			.navbar_tow {
+				width: 100%;
+				position: relative;
+				font-size: 36rpx;
+
+				.flex-between {
+					// #ifdef APP-PLUS || H5
+					margin: 28rpx;
+					// #endif
+					// #ifdef MP-WEIXIN
+					margin-left: 28rpx;
+					// #endif
+					width: 100%;
+					flex-wrap: nowrap;
+					height: 100%;
+					line-height: 100%;
+
+					.navbar_tow_one {
+						height: 100%;
+						line-height: 100%;
+
+						text:nth-child(1) {
+							font-family: Source Han Sans CN, Source Han Sans CN;
+							font-weight: bold;
+							font-size: 28rpx;
+							color: #333333;
+						}
+
+						text:nth-child(2) {
+							margin-left: 16rpx;
+							font-family: Source Han Sans CN, Source Han Sans CN;
+							font-weight: 400;
+							font-size: 28rpx;
+							color: #333333;
+						}
+					}
+
+					.navbar_tow_tow {
+						text-align: center;
+						flex: auto;
+						font-family: Source Han Sans CN, Source Han Sans CN;
+						font-weight: 400;
+						font-size: 28rpx;
+						color: #333333;
+					}
+				}
+
+			}
+		}
+	}
+</style>