修复搜索框问题

pages/index/index.vue

@@ -1,15 +1,14 @@
 <template>
 	<uv-navbar leftIcon="" :safeAreaInsetTop="true" :fixed="false" bgColor="#09b4f1">
-	<!-- 	<view class="slot-wrap "> -->
 		<template v-slot:center>
-				<uv-search placeholder="请输入搜索客户名称" v-model="keyword" bgColor="#ffffff" :showAction="false" :customStyle="customStyle" @focus="onSearch"></uv-search>
+			<view class="slot-wrap">
+				<uv-search placeholder="请输入搜索客户名称" v-model="keyword" bgColor="#ffffff" :showAction="false" 
+				:customStyle="customStyle" @focus="onSearch"></uv-search>
+			</view>
 		</template>
-
-	<!-- 	</view> -->
      </uv-navbar>
 
 	<view class="container">
-		<!-- 浮动顶部导航 -->
 
 		<view class="top" style="background-color: #09b4f1;">
 			<view class="statusBar" :is-back="false" style="height: 30rpx;" ></view>
@@ -63,11 +62,17 @@ import {
 } from '@/api/index'
 const main = useMainStore()
 const statusBarHeight = ref(0)
+const rightSafeArea = ref(0)
 statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
-const customStyle = computed(() =>{
+
+const windowInfo = uni.getWindowInfo()
+const { left } = uni.getMenuButtonBoundingClientRect()
+rightSafeArea.value = windowInfo.windowWidth - left + 'px'
+const customStyle  = computed(() =>{
 	return {
-		  paddingLeft:'20rpx',
-		  paddingRight:'180rpx'
+			//width:'100%'
+		 // paddingLeft:'20rpx',
+		 paddingRight: rightSafeArea.value
 		}
 })
 const customStyle2 = computed(() =>{
@@ -257,24 +262,15 @@ const gopage2 = (url) =>{
 	padding-bottom: 50px;
 	min-height: 100vh;
 }
-.status_bar {
-	height: var(--status-bar-height);
-	width: 100%;
-}
+
 .top {
 	height: 110rpx;
 	/* #ifdef H5 */
 	height: 360rpx;
 	/* #endif */
 	color: #fff;
-	// background-image: linear-gradient(#FF7E69, #FE644A);
 }
 
-.share {
-	border: 1px solid #fff;
-	border-radius: 5px;
-	padding: 15rpx 30rpx;
-}
 .notice {
 	margin: -56px 8px 10px 8px;
 	left: 0;
@@ -325,7 +321,8 @@ const gopage2 = (url) =>{
 .slot-wrap {
 	display: flex;
 	align-items: center;
-	padding: 0 30rpx;
+	padding: 0 30rpx;
+	flex:1
 }
 .statusBar {
 	position: relative;
@@ -335,11 +332,7 @@ const gopage2 = (url) =>{
 	bottom: 16px;
 	left: 10px;
 }
-// /deep/ .u-avatar {
-// 	display: block !important;
-// }
-// 图表样式
-/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
+
 .charts-box{
 	.charts {
 		width: 100%;
@@ -371,49 +364,8 @@ const gopage2 = (url) =>{
 		}
 	}
 }
-// /deep/.left-icon .u-size-mini {
-// 	display: block;
-// }
-// /deep/ .u-model__footer__button {
-// 	height: auto !important;
-// 	line-height: inherit !important;
-// }
-// /deep/ .u-border-top:after {
-//     border-top-width: 0;
-// }
-.privacy_block {
-	padding: 15px 20px;
-	font-size: 14px;
-  line-height: 24px;
-  text-align: justify;
-}
-.disagree-btn {
-	border-radius: 100px;
-  color: #323233;
-  background-color: #fff;
-  padding: 0 12px;
-  font-size: 14px;
-  height: 40px;
-  width: 100%;
-	border: none;
-}
 
-.agree-btn {
-  border-radius: 100px;
-  color: white;
-  background-color: #F15A24;
-  border-color: #F15A24 !important;
-  border-width: 1px !important;
-  border-style: solid !important;
-  padding: 0 12px;
-  font-size: 14px;
-  height: 40px;
-  width: 100%;
-}
-.disagree-btn::after, .agree-btn::after {
-  border: none;
-}
-.modal_btn {
-	padding: 0 30px 15px;
-}
+
+
+
 </style>