搜索-页切页面完成

2025-06-16 20:13:52 +08:00
parent adec5a0338
commit 6a0616ae01
1 changed files with 103 additions and 0 deletions
@@ -0,0 +1,103 @@
+<template>
+	<view class="main_div max_page">
+		<nav-bar :is_seat="false"></nav-bar>
+		<view class="fixed_search_div">
+			<view class="back_div" @click="common.navigateBack()">
+				<view class="back-icon"></view>
+			</view>
+			<view class="fixed_search_input_div fl1">
+				<uv-input v-model="inputValue" shape="circle" :customStyle="fixedCustomStyles"
+					placeholderStyle='color:#999999;font-size:26rpx' placeholder="请输入关键字" suffixIcon="search"
+					:suffixIconStyle="suffixIconStyle" :focus="true">
+				</uv-input>
+			</view>
+			<view class="message_div" v-show="false">
+				<image src="@/static/images/index/message_b.png" class="message_img"></image>
+				<view class="message_text">消息</view>
+				<view class="message_num">30</view>
+			</view>
+		</view>
+		<!-- 主体 -->
+		<view class="search_content">
+			<image class="bg_img" style="width: 718rpx;height: 1126rpx;" src="@/static/images/test/search_img.png">
+			</image>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref
+	} from 'vue';
+	import common from '@/common/common.js'
+	// 静态样式配置
+	const fixedCustomStyles = {
+		backgroundColor: "#ffffff",
+		paddingLeft: "40rpx",
+		paddingTop: "5px",
+		paddingBottom: "5px",
+		border: "none"
+	}
+	const suffixIconStyle = {
+		color: "#2c8ef2",
+		fontSize: "28px"
+	}
+	const inputValue = ref('');
+</script>
+
+<style scoped lang="scss">
+	.search_content {
+		background-color: #fff;
+		min-height: 400rpx;
+		margin-top: -6rpx;
+		border-radius: 12rpx 12rpx 0 0;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		.bg_img {
+			width: 84%;
+			margin: 20rpx auto;
+		}
+	}
+
+	.fixed_search_div {
+		padding: calc(10rpx + var(--status-bar-height)) 15rpx 24rpx 30rpx;
+		background: linear-gradient(90deg, #F1F7FF 0%, #D8EDFF 50%, #C3E6FF 100%);
+		display: flex;
+		align-items: center;
+
+		.back_div {
+			margin-right: 10rpx;
+
+			.back-icon {
+				position: relative;
+				width: 40rpx;
+				height: 40rpx;
+				cursor: pointer;
+			}
+
+			.back-icon::before,
+			.back-icon::after {
+				content: '';
+				position: absolute;
+				transition: all 0.3s ease;
+			}
+
+			.back-icon::after {
+				top: 25%;
+				left: 25%;
+				width: 40%;
+				height: 40%;
+				border-top: 4rpx solid #2B2C2E;
+				border-left: 4rpx solid #2B2C2E;
+				transform: rotate(-45deg);
+			}
+		}
+	}
+
+	.main_div {
+		display: flex;
+		flex-direction: column;
+	}
+</style>