feat:修改样式

.hbuilderx/launch.json

@@ -0,0 +1,16 @@
+{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+  // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
+    "version": "0.0",
+    "configurations": [{
+     	"app-plus" : 
+     	{
+     		"launchtype" : "local"
+     	},
+     	"default" : 
+     	{
+     		"launchtype" : "local"
+     	},
+     	"type" : "uniCloud"
+     }
+    ]
+}

App.vue

@@ -5,6 +5,25 @@
 		},
 		onShow: function() {
 			console.log('App Show')
+			var screenWidth = 0
+			var screenHeight = 0
+			uni.getSystemInfo({
+				success: (res) => {
+					screenHeight = res.screenHeight
+					screenWidth = res.screenWidth
+					console.log(screenHeight, screenWidth)
+				}
+			})
+			if (screenHeight == 720 && screenWidth == 1280) {
+				uni.navigateTo({
+					url: '/pages/index15/index15'
+				})
+			}
+			if (screenHeight == 1920 && screenWidth == 1080) {
+				uni.navigateTo({
+					url: '/pages/index32/index32'
+				})
+			}
 		},
 		onHide: function() {
 			console.log('App Hide')
@@ -14,4 +33,4 @@
 
 <style>
 	/*每个页面公共css */
-</style>
+</style>

pages.json

@@ -1,9 +1,15 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
-			"path": "pages/index/index",
+			"path": "pages/index15/index15",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": ""
+			}
+		},
+		{
+			"path": "pages/index32/index32",
+			"style": {
+				"navigationBarTitleText": ""
 			}
 		}
 	],
@@ -15,4 +21,4 @@
 		"navigationStyle": "custom"
 	},
 	"uniIdRouter": {}
-}
+}

pages/index/index.vue → pages/index15/index15.vue

@@ -1,47 +1,46 @@
 <template>
-	<view class="zhanwei">
-		
-	</view>
-	<view class="pageView">
-		<view class="sidebar-left"></view>
-		<view class="body">
-			<view class="head">
-				<text>uniapp聊天框</text>
-			</view>
-			<view class="list-wrap">
-				<scroll-view id="content-box" scroll-y="true" class="scrollview" :scroll-top="msgList.scrollTop">
-					<!-- 聊天主体 -->
-					<view id="content-overflow">
-						<view class="scrollview-item" v-for="(item,index) in msgList.myList" :key='index'>
-							<!-- 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>{{ item.userContent }}</view>
-							</view>
-							<!-- ai方-聊天内容 -->
-							<view class="item other" v-if="item.otherContent != ''">
-								<view class="content left">{{ item.otherContent }}</view>
-								<image class="avtar" src="../../static/Ai-avatar.png" mode="aspectFit"></image>
+	<view id='app'>
+		<view class="pageView">
+			<view class="sidebar-left"></view>
+			<view class="body">
+				<view class="head">
+					<text>uniapp聊天框</text>
+				</view>
+				<view class="list-wrap">
+					<scroll-view id="content-box" scroll-y="true" class="scrollview" :scroll-top="msgList.scrollTop">
+						<!-- 聊天主体 -->
+						<view id="content-overflow">
+							<view class="scrollview-item" v-for="(item,index) in msgList.myList" :key='index'>
+								<!-- 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>{{ item.userContent }}</view>
+								</view>
+								<!-- ai方-聊天内容 -->
+								<view class="item other" v-if="item.otherContent != ''">
+									<view class="content left">{{ item.otherContent }}</view>
+									<image class="avtar" src="../../static/Ai-avatar.png" mode="aspectFit"></image>
+								</view>
 							</view>
 						</view>
-					</view>
-				</scroll-view>
-			</view>
+					</scroll-view>
+				</view>
 
-			<view class="chat-bottom">
-				<view class="send-msg">
-					<view class="uni-textarea">
-						<textarea id="input-textarea" type="text" v-model="msgList.chatMsg" placeholder="快来聊天吧"
-							confirm-type="send" @confirm="handleSend" maxlength="300" />
-					</view>
-					<view class="uni-button">
-						<button class="send-btn" @click="handleSend" type="primary">发送</button>
+				<view class="chat-bottom">
+					<view class="send-msg">
+						<view class="uni-textarea">
+							<textarea id="input-textarea" type="text" v-model="msgList.chatMsg" placeholder="快来聊天吧"
+								confirm-type="send" @confirm="handleSend" maxlength="300" />
+						</view>
+						<view class="uni-button">
+							<button class="send-btn" @click="handleSend" type="primary">发送</button>
+						</view>
 					</view>
 				</view>
 			</view>
-		</view>
-		<view class="sidebar-right">
-			<image src="../../static/logo.png" mode="aspectFit"></image>
+			<view class="sidebar-right">
+				<image src="../../static/logo.png" mode="aspectFit"></image>
+			</view>
 		</view>
 	</view>
 </template>
@@ -52,6 +51,9 @@
 		reactive,
 		watch
 	} from 'vue';
+	import {
+		onShow
+	} from '@dcloudio/uni-app'
 
 	const msgList = reactive({
 		chatMsg: '',
@@ -101,5 +103,5 @@
 </script>
 
 <style>
-	@import url("../../theme/chat.css");
+	@import url("../../theme/chat15.css");
 </style>

pages/index32/index32.vue

@@ -0,0 +1,108 @@
+<template>
+	<view id='app'>
+		<view class="zhanwei"></view>
+		<view class="pageView">
+			<view class="sidebar-left"></view>
+			<view class="body">
+				<view class="head">
+					<text>uniapp聊天框</text>
+				</view>
+				<view class="list-wrap">
+					<scroll-view id="content-box" scroll-y="true" class="scrollview" :scroll-top="msgList.scrollTop">
+						<!-- 聊天主体 -->
+						<view id="content-overflow">
+							<view class="scrollview-item" v-for="(item,index) in msgList.myList" :key='index'>
+								<!-- 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>{{ item.userContent }}</view>
+								</view>
+								<!-- ai方-聊天内容 -->
+								<view class="item other" v-if="item.otherContent != ''">
+									<view class="content left">{{ item.otherContent }}</view>
+									<image class="avtar" src="../../static/Ai-avatar.png" mode="aspectFit"></image>
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+
+				<view class="chat-bottom">
+					<view class="send-msg">
+						<view class="uni-textarea">
+							<textarea id="input-textarea" type="text" v-model="msgList.chatMsg" placeholder="快来聊天吧"
+								confirm-type="send" @confirm="handleSend" maxlength="300" />
+						</view>
+						<view class="uni-button">
+							<button class="send-btn" @click="handleSend" type="primary">发送</button>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="sidebar-right">
+				<image src="../../static/logo.png" mode="aspectFit"></image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		nextTick,
+		reactive,
+		watch
+	} from 'vue';
+	import {
+		onShow
+	} from '@dcloudio/uni-app'
+
+	const msgList = reactive({
+		chatMsg: '',
+		myList: [{
+			userContent: '',
+			otherContent: '',
+			image: ''
+		}, ],
+		// 滚动距离
+		scrollTop: 0,
+		boxWord: '选择无处不在，面朝大海春暖花开是海子的选择，人不是生来被打败的是海明威的选择，人固有一死，或重于泰山，或轻于鸿毛，是司马迁的选择，选择是一次又一次自我重塑的过程，让我们不断地成长，不断地完善，如果说人生是一次不断选择的旅程，那么当千帆阅尽最终留下的就是一片属于自己的独一无二的风景   ——董卿《朗读者》'
+	})
+
+	// 发送消息
+	const handleSend = (() => {
+		if (msgList.chatMsg != '') {
+			let obj = {
+				otherContent: msgList.boxWord,
+				userContent: msgList.chatMsg,
+				image: ""
+			}
+			msgList.myList.push(obj)
+		}
+		msgList.chatMsg = ''
+	})
+
+	// 滚动条回到最底部
+	const scrollToBottom = (() => {
+		nextTick(() => {
+			const query = uni.createSelectorQuery();
+			query.select("#content-box").boundingClientRect()
+			query.select("#content-overflow").boundingClientRect()
+			query.exec(res => {
+				const scrollViewHeight = res[0].height
+				const scrollContentHeight = res[1].height
+				if (scrollViewHeight < scrollContentHeight) {
+					const scrollTop = scrollContentHeight - scrollViewHeight
+					msgList.scrollTop = scrollTop
+				}
+			})
+		})
+	})
+	//滚动至聊天底部
+	watch(msgList.myList, (newVal) => {
+		scrollToBottom()
+	})
+</script>
+
+<style>
+	@import url("../../theme/chat32.css");
+</style>

theme/chat.css

@@ -1,132 +0,0 @@
-/* 15寸 大屏样式 */
-.pageView {
-	display: flex;
-	background-color: #f5f5f5;
-}
-
-.body {
-	display: flex;
-	flex-direction: column;
-	height: 100vh;
-	width: 50%;
-	/* background-color: #f5f5f5; */
-}
-
-/* 头部 */
-.head {
-	height: 100rpx;
-	/* background-color: #f5f5f5; */
-	text-align: center;
-	line-height: 100rpx;
-}
-
-/* 主内容区 */
-.list-wrap {
-	flex-grow: 1;
-	position: relative;
-}
-
-.scrollview {
-	position: absolute;
-	height: 100%;
-
-	.scrollview-item {
-		display: flex;
-		flex-direction: column;
-
-		.item {
-			display: flex;
-			margin: 0 24rpx 50rpx;
-		}
-
-		.avtar {
-			display: flex;
-			width: 78rpx;
-			height: 78rpx;
-			border-radius: 50rpx;
-			overflow: hidden;
-		}
-
-		.content {
-			position: relative;
-			max-width: 750rpx;
-			background-color: #fff;
-			margin: 40rpx 24rpx 0;
-			border-radius: 5px;
-			font-size: 32rpx;
-			line-height: 42rpx;
-			padding: 24rpx;
-			word-wrap: break-word;
-		}
-
-		.other {
-			justify-content: flex-end;
-		}
-	}
-}
-
-
-
-/* 底部发送框 */
-.chat-bottom {
-	height: 300rpx;
-	margin: 50rpx;
-	position: relative;
-
-	.send-msg {
-		display: flex;
-
-		.uni-textarea {
-			flex: 1;
-
-			textarea {
-				width: 100%;
-				height: 270rpx;
-				border-radius: 40rpx;
-				line-height: 1.5;
-				padding: 25rpx;
-				right: 50rpx;
-				background-color: #fff;
-
-			}
-
-			textarea ::-webkit-scrollbar {
-				display: none;
-			}
-		}
-
-		.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;
-		}
-	}
-}
-
-.sidebar-left {
-	width: 20%;
-}
-
-.sidebar-right {
-	width: 30%;
-	
-
-	image {
-		/* display: inline-block; */
-		height: 50%;
-		left: 8%;
-		top: 48%;
-	}
-}
-
-/* 去除导航条 */
-.scrollview ::-webkit-scrollbar {
-	display: none;
-
-}

theme/chat15.css

@@ -0,0 +1,128 @@
+/* 15寸 大屏样式 */
+
+
+.pageView {
+	display: flex;
+	background-color: #f5f5f5;
+}
+
+.body {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	width: 75%;
+}
+
+/* --- 头部 --- */
+.head {
+	height: 100rpx;
+	text-align: center;
+	line-height: 100rpx;
+}
+
+/* --- 主内容区 --- */
+.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: 750rpx;
+	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;
+}
+
+.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%;
+}
+
+.sidebar-right image {
+	height: 45%;
+	right: 45%;
+	margin-top: 170%;
+}
+
+/* 去除导航条 */
+.scrollview ::-webkit-scrollbar {
+	display: none;
+}

theme/chat32.css

@@ -1,78 +1,76 @@
 /* 32寸 大屏样式 */
-.zhanwei{
-	height: 40%;
+
+
+.zhanwei {
+	height: 40vh;
+
 }
 
 .pageView {
-	
-	height: 60%;
 	display: flex;
 	background-color: #f5f5f5;
-	
 }
 
 .body {
 	display: flex;
 	flex-direction: column;
-	height: 100vh;
-	width: 50%;
-	background-color: #f5f5f5;
+	height: 60vh;
+	width: 70%;
+	/* background-color: #f5f5f5; */
 }
 
-/* 头部 */
+/* --- 头部 --- */
 .head {
 	height: 100rpx;
-	background-color: #f5f5f5;
+	/* background-color: #f5f5f5; */
 	text-align: center;
 	line-height: 100rpx;
 }
 
-/* 主内容区 */
+/* --- 主内容区 --- */
 .list-wrap {
 	flex-grow: 1;
 	position: relative;
 }
 
-.scrollview {
+.list-wrap .scrollview {
 	position: absolute;
 	height: 100%;
+}
 
-	.scrollview-item {
-		display: flex;
-		flex-direction: column;
-
-
-		.item {
-			display: flex;
-			margin: 0 24rpx 50rpx;
-		}
+.list-wrap .scrollview .scrollview-item {
+	display: flex;
+	flex-direction: column;
+}
 
-		.avtar {
-			display: flex;
-			width: 78rpx;
-			height: 78rpx;
-			border-radius: 50rpx;
-			overflow: hidden;
-		}
+.list-wrap .scrollview .scrollview-item .item {
+	display: flex;
+	margin: 0 24rpx 50rpx;
+}
 
-		.content {
-			position: relative;
-			max-width: 750rpx;
-			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 .item .avtar {
+	display: flex;
+	width: 78rpx;
+	height: 78rpx;
+	border-radius: 50rpx;
+	overflow: hidden;
+}
 
-		.other {
-			justify-content: flex-end;
-		}
-	}
+.list-wrap .scrollview .scrollview-item .item .content {
+	position: relative;
+	max-width: 750rpx;
+	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;
+}
 
 
 /* 底部发送框 */
@@ -80,61 +78,61 @@
 	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;
+}
+
+.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;
+}
 
-	.send-msg {
-		display: flex;
-
-		.uni-textarea {
-			flex: 1;
-
-			textarea {
-				width: 100%;
-				height: 270rpx;
-				border-radius: 40rpx;
-				line-height: 1.5;
-				padding: 25rpx;
-				right: 50rpx;
-				background-color: #fff;
-
-			}
-
-			textarea ::-webkit-scrollbar {
-				display: none;
-			}
-		}
-
-		.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;
-		}
-	}
+.chat-bottom .send-msg .uni-textarea textarea ::-webkit-scrollbar {
+	display: none;
 }
 
+/* --- 左右两边占位调节、图片占位 --- */
 .sidebar-left {
-	width: 20%;
+	width: 5%;
 }
 
 .sidebar-right {
-	width: 30%;
-	
+	width: 25%;
+	height: 60vh;
+	position: relative;
+}
 
-	image {
-		/* display: inline-block; */
-		height: 50%;
-		left: 8%;
-		top: 48%;
-	}
+.sidebar-right image {
+	position: absolute;
+	height: 35%;
+	right: -10%;
+	top: 60%;
 }
 
 /* 去除导航条 */
 .scrollview ::-webkit-scrollbar {
 	display: none;
-
 }