Home Explore Help
Register Sign In
CQ_JD
/
nazw
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

手机端的智能问答库

sunjuan 3 years ago
parent
246bf77ba6
commit
57e014bf95
2 changed files with 205 additions and 0 deletions
Unified View Show Diff Stats
  1. 154 0
      nngkxxdp/src/main/resources/static/intelligence/css/mobile_intelligence.css
  2. 51 0
      nngkxxdp/src/main/resources/static/intelligence/mobile_intelligence.html

+ 154 - 0
nngkxxdp/src/main/resources/static/intelligence/css/mobile_intelligence.css
View File 

@@ -0,0 +1,154 @@
 
+* {
 
+	margin: 0;
 
+	padding: 0;
 
+}
 
+
 
+main {
 
+	width: 100%;
 
+	background-color: #EDEDED;
 
+	position: relative;
 
+}
 
+
 
+.head_tab {
 
+	width: 100%;
 
+	display: flex;
 
+	justify-content: space-between;
 
+	align-items: center;
 
+	height: 8vh;
 
+}
 
+
 
+.head_tab a:first-child {
 
+	margin-left: 28px;
 
+}
 
+
 
+.head_tab a:last-child {
 
+	margin-right: 28px;
 
+}
 
+
 
+.head_tab p {
 
+	font-size: 4.26666vw;
 
+}
 
+
 
+.wrap_hot_QA {
 
+	height: 26.53333vw;
 
+	background: url(../img/hot_QA_mob.png) no-repeat center;
 
+	margin: 0 28px;
 
+	background-size: cover;
 
+}
 
+
 
+.hot_QA {
 
+	display: flex;
 
+	flex-wrap: wrap;
 
+	padding: 3vw 0 3vw 1.06666vw;
 
+	box-sizing: border-box;
 
+	align-items: center;
 
+}
 
+
 
+.hot_QA img {
 
+	width: 3.2vw;
 
+	height: 2.5vh;
 
+	margin-right: 1.46666vw;
 
+}
 
+
 
+.hot_QA p {
 
+	font-size: 4vw;
 
+	font-family: PingFang SC;
 
+	font-weight: bold;
 
+	color: #BF1628;
 
+}
 
+
 
+.hot_text {
 
+	padding: 0 34px 0 41px;
 
+	box-sizing: border-box;
 
+}
 
+
 
+.hot_text li {
 
+	display: flex;
 
+	align-items: center;
 
+	margin-bottom: 1.46666vw;
 
+}
 
+
 
+.hot_text li div {
 
+	width: 8px;
 
+	height: 8px;
 
+	background: #666666;
 
+	border-radius: 4px;
 
+	margin-right: 1.46666vw;
 
+}
 
+
 
+.hot_text li p {
 
+	font-size: 2.66666vw;
 
+	font-family: PingFang SC;
 
+	font-weight: 500;
 
+	color: #666666;
 
+}
 
+
 
+.chat_box {
 
+	/* height: calc(100vh - 38.444vh); */
 
+	overflow-y: auto;
 
+	overflow-x: hidden;
 
+}
 
+
 
+.person {
 
+	display: flex;
 
+	margin: 8.26666vw 5.73333vw 0 5.73333vw;
 
+}
 
+
 
+.left_person {
 
+	justify-content: flex-start;
 
+}
 
+
 
+.right_person {
 
+	justify-content: flex-end;
 
+}
 
+
 
+.person img {
 
+	width: 9.86666vw;
 
+	height: 9.86666vw;
 
+}
 
+
 
+.person .left_talk {
 
+	background: #FFFFFF;
 
+	box-shadow: 0px 0px 8px 0px rgba(55, 121, 218, 0.07);
 
+	padding: 2.93333vw 5.33333vw;
 
+	font-size: 4vw;
 
+	font-family: PingFang SC;
 
+	font-weight: 500;
 
+	color: #333333;
 
+}
 
+
 
+.left_person .left_talk {
 
+	margin: 2.26666vw 0 0 2.4vw;
 
+	border-radius: 0px 25px 25px 26px;
 
+}
 
+
 
+.right_person .left_talk {
 
+	margin: 2.26666vw 2.4vw 0 0;
 
+	border-radius: 34px 0px 34px 34px;
 
+}
 
+
 
+.btn_send {
 
+	width: 100%;
 
+	height: 7vh;
 
+	background-color: #F6F6F6;
 
+	display: flex;
 
+	align-items: center;
 
+	justify-content: space-between;
 
+}
 
+
 
+.btn_send div:first-child {
 
+	margin: 0 28px;
 
+}
 
+
 
+.btn_send div:last-child {
 
+	margin: 0 28px;
 
+}
 
+
 
+.btn_send input {
 
+	border: none;
 
+	width: 79%;
 
+	height: 8vw;
 
+	outline: none;
 
+	text-indent: 1vw;
 
+	border-radius: 1vw;
 
+}

+ 51 - 0
nngkxxdp/src/main/resources/static/intelligence/mobile_intelligence.html
View File 

@@ -0,0 +1,51 @@
 
+<!DOCTYPE html>
 
+<html>
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<title>重庆市南岸区人民政府网--智能问答</title>
 
+		<link rel="stylesheet" href="css/mobile_intelligence.css">
 
+	</head>
 
+	<body>
 
+		<main>
 
+			<div class="head_tab">
 
+				<a><img src="img/back.png" alt=""></a>
 
+				<p>智能问答</p>
 
+				<a><img src="img/three_point.png" alt=""></a>
 
+			</div>
 
+			<div class="wrap_hot_QA">
 
+				<div class="hot_QA">
 
+					<img src="img/hot_QA.png" alt="">
 
+					<p>热门问题</p>
 
+				</div>
 
+				<ul class="hot_text">
 
+					<li><div></div><p>疫情防控具体安排控具体安排控具体安排控具体安排</p></li>
 
+					<li><div></div><p>疫情防控具体安排控具体安排控具体安排控具体安排</p></li>
 
+					<li><div></div><p>疫情防控具体安排控具体安排控具体安排控具体安排</p></li>
 
+				</ul>
 
+			</div>
 
+			<div class="chat_box">
 
+				<div class="person left_person">
 
+					<img src="img/left_head.png" alt="">
 
+					<div class="left_talk">HI~很高兴为您服务！请问您想咨询什么问题呢？</div>
 
+				</div>
 
+				<div class="person right_person">
 
+					<div class="left_talk">创业申请所需材料</div>
 
+					<img src="img/right_head.png" alt="">
 
+				</div>
 
+			</div>
 
+			<div class="btn_send">
 
+				<div><img src="img/yy.png" alt=""></div>
 
+				<input type="text" enterkeyhint="send" placeholder="请输入您的问题..." />
 
+				<div><img src="img/up.png" alt=""></div>
 
+			</div>
 
+		</main>
 
+		<script src="js/jquery-3.5.1.min.js"></script>
 
+		<script>
 
+			// 聊天消息固定在底部
 
+			var otherHeight = $('.head_tab').outerHeight() + $('.wrap_hot_QA').outerHeight() + $('.btn_send').outerHeight()
 
+			var listHeight = window.screen.height - otherHeight
 
+			$('.chat_box').css({ 'height': listHeight })
 
+			console.log(otherHeight)
 
+		</script>
 
+	</body>
 
+</html>