feat：添加32寸大屏去掉上部分内容操作

manifest.json

@@ -7,6 +7,9 @@
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {
+        "compatible" : {
+            "ignoreVersion" : true
+        },
         "orientation" : [
             //竖屏正方向
             "portrait-primary",

pages/index15/index15.vue

@@ -79,7 +79,7 @@
 		// 滚动距离
 		scrollTop: 0,
 		// setTimeout的返回值，唯一确定结束对应的setTimeout
-		timer: null,
+		timer: 0,
 		// 
 		textCount: 0,
 		otherContent: '',

pages/index32/index32.vue

@@ -1,14 +1,17 @@
 <template>
 	<view id='app' style="bottom: {{KeyBoardHeight}}px;">
-		<view class="placeholder"></view>
+		<view class="placeholder" :style="`height: ${styleData.screenWidth}vh`"></view>
 		<view class="head" :style="{backgroundColor:styleData.color}">
 			<text :style="{color:styleData.fontColor}">睿宝AI</text>
-			<switch @change="styleChange(styleData)" />
+			<view class="switch">
+				<switch @change="styleChange(styleData)" />
+				<switch class='second' @change="screenChange()" />
+			</view>
 		</view>
-		
+
 		<view class="pageView" :style="{backgroundColor:styleData.color}">
 			<view class="sidebar-left"></view>
-			<view class="body">
+			<view class="body" :style="`height:${95-styleData.screenWidth}vh`">
 				<view class="list-wrap">
 					<scroll-view id="content-box" scroll-y="true" class="scrollview" :scroll-top="msgList.scrollTop">
 						<!-- 聊天主体 -->
@@ -17,7 +20,9 @@
 								<!-- user方-聊天内容 -->
 								<view class="item self" v-if="item.userContent != ''">
 									<image class="avtar" src="../../static/user-avatar.png" mode="aspectFit"></image>
-									<view class="content right" disabled :style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}">{{ item.userContent }}</view>
+									<view class="content right" disabled
+										:style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}">
+										{{ item.userContent }}</view>
 								</view>
 								<!-- ai方-聊天内容 -->
 								<view class="item other">
@@ -25,7 +30,8 @@
 										<view class="loadingPoint" v-if='msgList.isloading[index]'>
 											<loadingPointsVue></loadingPointsVue>
 										</view>
-										<view class="content left" v-if='!msgList.isloading[index]' :style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}">
+										<view class="content left" v-if='!msgList.isloading[index]'
+											:style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}">
 											{{ msgList.otherChatList[index] }}
 										</view>
 									</view>
@@ -38,23 +44,24 @@
 
 				<view class="chat-bottom">
 					<view class="uni-label">
-						<label v-for="(item,index) in labelList" :key="index" @click="shortcuts(msgList,item)" :style="{backgroundColor:styleData.labelColor,color:styleData.fontColor,borderColor:styleData.borderColor}">{{item}}</label>
+						<label v-for="(item,index) in labelList" :key="index" @click="shortcuts(msgList,item)"
+							:style="{backgroundColor:styleData.labelColor,color:styleData.fontColor,borderColor:styleData.borderColor}">{{item}}</label>
 					</view>
 					<view class="send-msg">
 						<view class="uni-textarea">
 							<!-- bindkeyboardheightchange='getKeyBoardHeight'    - 添加键盘弹起触发属性 -->
 							<textarea id="input-textarea" type="text" v-model="msgList.chatMsg" placeholder="快来聊天吧"
-								confirm-type="send" @confirm="handleSend(msgList)" maxlength="300" />
+								confirm-type="send" @confirm="handleSend(msgList)" maxlength="300"  />
 						</view>
 						<view class="uni-button">
-							<button class="send-btn" @click="handleSend(msgList)" type="primary" :disabled="msgList.isClick" :style="{backgroundColor:styleData.btnColor}">发送</button>
+							<button class="send-btn" @click="handleSend(msgList)" type="primary"
+								:disabled="msgList.isClick" :style="{backgroundColor:styleData.btnColor}">发送</button>
 						</view>
 					</view>
 				</view>s
 			</view>
-			<view class="sidebar-right">
-				
-				<image src="../../static/logo.png" mode="aspectFit"></image>
+			<view class="sidebar-right" :style="`height:${95-styleData.screenWidth}vh`">
+				<image src="../../static/logo.png" mode="aspectFit" :style="`top:${70-styleData.screenWidth}vh`"></image>
 			</view>
 		</view>
 	</view>
@@ -74,8 +81,13 @@
 
 	import axios from 'axios';
 	import loadingPointsVue from '../../components/loadingPoints.vue';
-	import {handleSend,scrollToBottom,shortcuts} from "../../until/fun.js"
-	
+	import {
+		styleChange,
+		handleSend,
+		scrollToBottom,
+		shortcuts
+	} from "../../until/fun.js"
+
 
 	const msgList = reactive({
 		// 输入框
@@ -85,27 +97,30 @@
 		// 滚动距离
 		scrollTop: 0,
 		// 
-		timer: null,
-		textCount: 0,
+		timer: '',
+		textCount: '',
 		otherContent: '',
 		otherChatList: [],
 		len: 0,
 		isloading: [],
 		isClick: false,
 		// 键盘弹起高度
-		KeyBoardHeight:0
+		KeyBoardHeight: 0
 	})
-	
+
 	const styleData = reactive({
-		value:false,
-		color:'#f5f5f5',
-		fontColor:"black",
-		btnColor:"rgb(30,144,255)",
-		contentColor:"#fff",
-		labelColor:"#fff",
-		borderColor:"rgb(30,144,255)"
+		value: false,
+		color: '#f5f5f5',
+		fontColor: "black",
+		btnColor: "rgb(30,144,255)",
+		contentColor: "#fff",
+		labelColor: "#fff",
+		borderColor: "rgb(30,144,255)",
+		
+		screenWidth:40,
+		isScreen:false,
 	})
-	
+
 	const labelList = ref([
 		"我要加油",
 		"92号",
@@ -114,19 +129,36 @@
 		"加油卡",
 		"易捷加油"
 	])
-	
-
 
 	//滚动至聊天底部
 	watch([msgList.otherChatList, msgList.chatList], (newVal) => {
 		scrollToBottom(msgList)
 	})
 	
-
+	// 屏幕 去除上屏
+	const screenChange = ()=>{
+		styleData.isScreen = !styleData.isScreen
+		if(styleData.isScreen == true){
+			styleData.screenWidth = 0
+		}else{
+			styleData.screenWidth = 40
+		}
+	}
 	
+	// 键盘弹起事件  --- 真机调试时，测试之后再看能不能这样用
+	// 
+	// const getKeyBoardHeight = ((event)=>{
+	// 	// 获取键盘弹起的高度
+	// 	msgList.KeyBoardHeight = event.detail.height
+	// 	console.log(msgList.KeyBoardHeight)
+	// })
+	 
 </script>
 
 <style>
 	@import url("../../theme/chat32.css");
 	@import url("../../theme/public.css");
+	.second {
+		padding-left: 50rpx;
+	}
 </style>

theme/chat15.css

@@ -1,120 +1,12 @@
 /* 15寸 大屏样式 */
-
-/* --- 标题 --- */
-/* .head {
-	height: 5vh;
-	text-align: center;
-	line-height: 5vh;
-	background-color: #f5f5f5;
-	font-size: 18px;
-} */
-
 .pageView {
 	height: 95%;
-/* 	display: flex;
-	background-color: #f5f5f5; */
 }
-
 .body {
-/* 	display: flex;
-	flex-direction: column; */
 	height: 95vh;
 	width: 75%;
 }
-
-
 /* --- 主内容区 --- */
-/* .list-wrap {
-	flex-grow: 1;
-	position: relative;
-} */
-
-/* .list-wrap .scrollview {
-	position: absolute;
-	height: 100%;
-} */
-
-/* .list-wrap .scrollview .scrollview-item {
-	display: flex;
-	flex-direction: column;
-} */
-
-/* .list-wrap .scrollview .scrollview-item .item {
-	display: flex;
-	margin: 0 24rpx 50rpx;
-} */
-
-/* .list-wrap .scrollview .scrollview-item .item .avtar {
-	display: flex;
-	width: 78rpx;
-	height: 78rpx;
-	border-radius: 50rpx;
-	overflow: hidden;
-} */
-
-/* .list-wrap .scrollview .scrollview-item .item .content {
-	position: relative;
-	max-width: 1050rpx;
-	background-color: #fff;
-	margin: 40rpx 24rpx 0;
-	border-radius: 5px;
-	font-size: 32rpx;
-	line-height: 42rpx;
-	padding: 24rpx;
-	word-wrap: break-word;
-} */
-
-/* .list-wrap .scrollview .scrollview-item .other {
-	justify-content: flex-end;
-} */
-
-
-/* 底部发送框 */
-/* .chat-bottom {
-	height: 300rpx;
-	margin: 50rpx;
-	position: relative;
-} */
-
-/* .chat-bottom .send-msg {
-	display: flex;
-}
-
-.chat-bottom .send-msg .uni-textarea {
-	flex: 1;
-} */
-
-/* .chat-bottom .send-msg .send-btn {
-	align-items: center;
-	justify-content: center;
-	width: 320rpx;
-	height: 320rpx;
-	border-radius: 50rpx;
-	font-size: 35rpx;
-	font-weight: 500;
-	color: #fff;
-	line-height: 320rpx;
-	z-index: 1;
-}
-
-.chat-bottom .send-msg .uni-textarea textarea {
-	width: 100%;
-	height: 270rpx;
-	border-radius: 40rpx;
-	line-height: 1.5;
-	padding: 25rpx;
-	right: 50rpx;
-	background-color: #fff;
-} */
-
-/* .chat-bottom .send-msg .uni-textarea textarea ::-webkit-scrollbar {
-	display: none;
-} */
-
-/* --- 左右两边占位调节、图片占位 --- */
-/* .sidebar-left {
-	width: 5%;
-} */
 
 .sidebar-right {
 	width: 20%;
@@ -124,15 +16,4 @@
 	height: 45%;
 	right: 45%;
 	margin-top: 170%;
-}
-
-/* 去除导航条 */
-/* .scrollview ::-webkit-scrollbar {
-	display: none;
-} */
-
-
-/* 聊天框数据加载 图标距离头像的间距 */
-/* .loadingPoint{
-	margin-right: 30px;
-} */
+}

theme/chat32.css

@@ -8,146 +8,28 @@
 
 }
 
-/* --- 标题 --- */
-/* .head {
+.head{
 	height: 5vh;
-	background-color: #f5f5f5;
-	text-align: center;
-	line-height: 5vh;
-} */
-
-.pageView {
-/* 	display: flex;
-	background-color: #f5f5f5; */
-	/* rgb(0,0,0,0.8)  -- 黑色 */
-	/* #f5f5f5; -- 灰色 */
 }
 
 .body {
-/* 	display: flex;
-	flex-direction: column; */
 	height: 55vh;
 	width: 70%;
-	/* background-color: #f5f5f5; */
 }
 
-
-
 /* --- 主内容区 --- */
 .pageView{
 	padding-top: 30px;
 }
-/* .list-wrap {
-	flex-grow: 1;
-	position: relative;
-} */
-
-/* .list-wrap .scrollview {
-	position: absolute;
-	height: 100%;
-} */
-
-/* .list-wrap .scrollview .scrollview-item {
-	display: flex;
-	flex-direction: column;
-} */
-
-/* .list-wrap .scrollview .scrollview-item .item {
-	display: flex;
-	margin: 0 24rpx 50rpx;
-} */
-
-/* .list-wrap .scrollview .scrollview-item .item .avtar {
-	display: flex;
-	width: 78rpx;
-	height: 78rpx;
-	border-radius: 50rpx;
-	overflow: hidden;
-} */
-
-/* .list-wrap .scrollview .scrollview-item .item .content {
-	position: relative;
-	max-width: 1050rpx;
-	background-color: #fff;
-	margin: 40rpx 24rpx 0;
-	border-radius: 5px;
-	font-size: 32rpx;
-	line-height: 42rpx;
-	padding: 24rpx;
-	word-wrap: break-word;
-} */
-
-/* .list-wrap .scrollview .scrollview-item .other {
-	justify-content: flex-end;
-} */
-
-
-/* 底部发送框 */
-/* .chat-bottom {
-	height: 300rpx;
-	margin: 50rpx;
-	position: relative;
-} */
-
-/* .chat-bottom .send-msg {
-	display: flex;
-}
-
-.chat-bottom .send-msg .uni-textarea {
-	flex: 1;
-} */
-
-/* .chat-bottom .send-msg .send-btn {
-	align-items: center;
-	justify-content: center;
-	width: 320rpx;
-	height: 320rpx;
-	border-radius: 50rpx;
-	font-size: 35rpx;
-	font-weight: 500;
-	color: #fff;
-	line-height: 320rpx;
-	z-index: 1;
-}
-
-.chat-bottom .send-msg .uni-textarea textarea {
-	width: 100%;
-	height: 270rpx;
-	border-radius: 40rpx;
-	line-height: 1.5;
-	padding: 25rpx;
-	right: 50rpx;
-	background-color: #fff;
-} */
-
-/* .chat-bottom .send-msg .uni-textarea textarea ::-webkit-scrollbar {
-	display: none;
-} */
 
-/* --- 左右两边占位调节、图片占位 --- */
-/* .sidebar-left {
-	width: 5%;
-} */
 
 .sidebar-right {
 	width: 25%;
 	height: 55vh;
-	position: relative;
 }
 
 .sidebar-right image {
-	position: absolute;
-	height: 35%;
-	right: -10%;
-	top: 60%;
+	height: 900rpx;
+	right: 10%;
+	top:30vh
 }
-
-/* 去除导航条 */
-/* .scrollview ::-webkit-scrollbar {
-	display: none;
-} */
-
-/* 聊天框数据加载 图标距离头像的间距 */
-/* .loadingPoint{
-	margin-right: 30px;
-} */

theme/public.css

@@ -14,7 +14,7 @@
 	flex: 1;
 }
 
-.head switch{
+.head .switch{
 	padding-right: 100rpx;
 	flex: 1;
 } 

until/fun.js

@@ -32,7 +32,7 @@
 			obj.otherContent = await GetNewsList(msgList,data)
 
 			// await sleep(16000);
-			getChatContent(obj.otherContent, msgList.len)
+			getChatContent(msgList,obj.otherContent, msgList.len)
 
 
 		}
@@ -50,7 +50,6 @@
 	
 	// 逐字显示内容
 	const getChatContent = ((msgList,text, index) => {
-		console.log(index)
 		msgList.timer = setInterval(() => {
 			msgList.textCount++;
 			if (msgList.textCount == text.length + 1) {
@@ -91,10 +90,10 @@
 	const styleChange = ((styleData)=>{
 		styleData.value = !styleData.value
 		if(styleData.value == true){
-			styleData.color = "rgb(0,0,0,0.8)"
+			styleData.color = "rgba(0,0,0,0.8)"
 			styleData.fontColor = "#fff"
 			styleData.btnColor = "#ccc"
-			styleData.contentColor = "rgb(0,0,0,0.5)"
+			styleData.contentColor = "rgba(0,0,0,0.5)"
 			styleData.labelColor = "rgb(105,105,105)"
 			styleData.borderColor = "rgb(105,105,105)"
 			

until/request.js

@@ -7,7 +7,7 @@ const axios = Axios.create({
 		'Content-Type': 'application/json'
 	},
 	timeout: 600000, // 超时
-	baseURL: 'http://192.168.0.166:5000' ,
+	baseURL: 'http://192.168.1.101:5000' ,
 	// baseURL: 'http://192.168.1.105:5000' ,
 	adapter: axiosAdapterUniapp
 })