浏览代码

智能问答库的移动端样式

李雪梅 2 年之前
父节点
当前提交
53458c6ae0

+ 38 - 11
nngkxxdp/src/main/resources/static/intelligence/css/mobile_intelligence.css

@@ -16,36 +16,52 @@ main {
 	height: 13vw;
 }
 
+.head_tab a {
+	display: flex;
+	align-items: center;
+}
+
 .head_tab a:first-child {
-	margin-left: 28px;
+	margin-left: 4vw;
 }
 
 .head_tab a:last-child {
-	margin-right: 28px;
+	margin-right: 4vw;
 }
 
 .head_tab p {
 	font-size: 4.26666vw;
 }
 
+.head_tab a:nth-child(1) img {
+	display: inline-block;
+	width: 2.53333vw;
+	height: 4.53333vw;
+}
+
+.head_tab a:nth-child(3) img {
+	display: inline-block;
+	width: 4.13333vw;
+}
+
 .wrap_hot_QA {
 	height: 26.53333vw;
 	background: url(../img/hot_QA_mob.png) no-repeat center;
-	margin: 0 28px;
+	margin: 0 3.73333vw;
 	background-size: cover;
 }
 
 .hot_QA {
 	display: flex;
 	flex-wrap: wrap;
-	padding: 3vw 0 3vw 1.06666vw;
+	padding: 3vw 0 0.5vw 1.06666vw;
 	box-sizing: border-box;
 	align-items: center;
 }
 
 .hot_QA img {
-	width: 3.2vw;
-	height: 2.5vh;
+	width: 3.6vw;
+	height: 2vh;
 	margin-right: 1.46666vw;
 }
 
@@ -57,7 +73,7 @@ main {
 }
 
 .hot_text {
-	padding: 0 34px 0 41px;
+	padding: 0 4.53333vw;
 	box-sizing: border-box;
 }
 
@@ -68,8 +84,8 @@ main {
 }
 
 .hot_text li div {
-	width: 8px;
-	height: 8px;
+	width: 1.06666vw;
+	height: 1.06666vw;
 	background: #666666;
 	border-radius: 4px;
 	margin-right: 1.46666vw;
@@ -136,11 +152,21 @@ main {
 }
 
 .btn_send div:first-child {
-	margin: 0 28px;
+	margin: 0 3.73333vw;
+}
+
+.btn_send div:first-child img {
+	width: 6.4vw;
+	height: 6.4vw;
 }
 
 .btn_send div:last-child {
-	margin: 0 28px;
+	margin: 0 3.73333vw;
+}
+
+.btn_send div:last-child img {
+	width: 6.4vw;
+	height: 6.4vw;
 }
 
 .btn_send input {
@@ -150,4 +176,5 @@ main {
 	outline: none;
 	text-indent: 1vw;
 	border-radius: 1vw;
+	font-size: 3vw;
 }

+ 3 - 2
nngkxxdp/src/main/resources/static/intelligence/mobile_intelligence.html

@@ -2,6 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>重庆市南岸区人民政府网--智能问答</title>
     <link rel="stylesheet" href="css/mobile_intelligence.css">
 </head>
@@ -44,8 +45,8 @@
 
     // 聊天消息固定在底部
     var otherHeight = $('.head_tab').outerHeight() + $('.wrap_hot_QA').outerHeight() + $('.btn_send').outerHeight()
-    var listHeight = window.outerHeight - otherHeight - 18
-    $('.chat_box').css({'height': listHeight + 'vw'})
+    var listHeight = window.outerHeight - otherHeight 
+    $('.chat_box').css({'height': listHeight })
 
     $(function () {
         //加载热点问题