feat:修改样式

manifest.json

@@ -7,6 +7,18 @@
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {
+		"orientation": [
+					//竖屏正方向
+					"portrait-primary",
+					//竖屏反方向
+					"portrait-secondary",
+					//横屏正方向
+					"landscape-primary",
+					//横屏反方向
+					"landscape-secondary",
+					//自然方向
+					"default"
+				],
         "usingComponents" : true,
         "nvueStyleCompiler" : "uni-app",
         "compilerVersion" : 3,

pages.json

@@ -8,7 +8,6 @@
 		}
 	],
 	"globalStyle": {
-		"pageOrientation": "auto",
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",
 		"navigationBarBackgroundColor": "#F8F8F8",

pages/index/index.vue

@@ -1,4 +1,7 @@
 <template>
+	<view class="zhanwei">
+		
+	</view>
 	<view class="pageView">
 		<view class="sidebar-left"></view>
 		<view class="body">

theme/chat.css

@@ -1,3 +1,4 @@
+/* 15寸 大屏样式 */
 .pageView {
 	display: flex;
 	background-color: #f5f5f5;
@@ -8,13 +9,13 @@
 	flex-direction: column;
 	height: 100vh;
 	width: 50%;
-	background-color: #f5f5f5;
+	/* background-color: #f5f5f5; */
 }
 
 /* 头部 */
 .head {
 	height: 100rpx;
-	background-color: #f5f5f5;
+	/* background-color: #f5f5f5; */
 	text-align: center;
 	line-height: 100rpx;
 }
@@ -33,7 +34,6 @@
 		display: flex;
 		flex-direction: column;
 
-
 		.item {
 			display: flex;
 			margin: 0 24rpx 50rpx;
@@ -110,17 +110,16 @@
 }
 
 .sidebar-left {
-	height: 100vh;
 	width: 20%;
 }
 
 .sidebar-right {
-	height: 100vh;
 	width: 30%;
+	
 
 	image {
-		display: inline-block;
-		height: 400px;
+		/* display: inline-block; */
+		height: 50%;
 		left: 8%;
 		top: 48%;
 	}

theme/chat32.css

@@ -0,0 +1,140 @@
+/* 32寸 大屏样式 */
+.zhanwei{
+	height: 40%;
+}
+
+.pageView {
+	
+	height: 60%;
+	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;
+
+}