移动端

tamguo-tms/src/main/java/com/tamguo/utils/BrowserUtils.java

@@ -0,0 +1,34 @@
+package com.tamguo.utils;
+
+import java.util.regex.Pattern;
+
+public class BrowserUtils {
+
+    // \b 是单词边界(连着的两个(字母字符 与 非字母字符) 之间的逻辑上的间隔),    
+    // 字符串在编译时会被转码一次,所以是 "\\b"    
+    // \B 是单词内部逻辑间隔(连着的两个字母字符之间的逻辑上的间隔)    
+   private static final String phoneReg = "\\b(ip(hone|od)|android|opera m(ob|in)i"    
+            +"|windows (phone|ce)|blackberry"    
+            +"|s(ymbian|eries60|amsung)|p(laybook|alm|rofile/midp"    
+            +"|laystation portable)|nokia|fennec|htc[-_]"    
+            +"|mobile|up.browser|[1-4][0-9]{2}x[1-4][0-9]{2})\\b";    
+
+   private static final String tabletReg = "\\b(ipad|tablet|(Nexus 7)|up.browser|[1-4][0-9]{2}x[1-4][0-9]{2})\\b";    
+
+  //移动设备正则匹配：手机端、平板  
+   private static Pattern phonePat = Pattern.compile(phoneReg, Pattern.CASE_INSENSITIVE);    
+   private static Pattern tabletPat = Pattern.compile(tabletReg, Pattern.CASE_INSENSITIVE);    
+
+    /** 
+     * 检测是否是移动设备访问 
+     * 
+     * @param userAgent 浏览器标识 
+     * @return true:移动设备接入，false:pc端接入 
+     */  
+    public static boolean isMobile(String userAgent){    
+        if(null == userAgent){    
+            userAgent = "";    
+        }   
+        return phonePat.matcher(userAgent).find() || tabletPat.matcher(userAgent).find(); 
+    }  
+}

tamguo-tms/src/main/java/com/tamguo/web/tiku/CourseController.java

@@ -2,6 +2,9 @@ package com.tamguo.web.tiku;
 
 import java.util.Arrays;
 import java.util.List;
+
+import javax.servlet.http.HttpServletRequest;
+
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.PathVariable;
@@ -39,7 +42,7 @@ public class CourseController {
 
 	@SuppressWarnings("unchecked")
 	@RequestMapping(value = {"course/{uid}.html"}, method = RequestMethod.GET)
-	public ModelAndView index(@PathVariable String uid , ModelAndView model) {
+	public ModelAndView index(HttpServletRequest request , @PathVariable String uid , ModelAndView model) {
 		try {
 			CourseEntity course = iCourseService.selectById(uid);
 			List<BookEntity> bookList = iBookService.selectList(Condition.create().eq("course_id", uid));
@@ -58,8 +61,6 @@ public class CourseController {
 			model.addObject("subject", subject);
 			model.addObject("bookList", bookList);
 			model.addObject("book" , book);
-			
-			model.setViewName("chapter");
 			return model;
 		} catch (Exception e) {
 			model.setViewName("404");

tamguo-tms/src/main/java/com/tamguo/web/tiku/PaperController.java

@@ -1,6 +1,9 @@
 package com.tamguo.web.tiku;
 
 import java.util.List;
+
+import javax.servlet.http.HttpServletRequest;
+
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
@@ -21,6 +24,7 @@ import com.tamguo.modules.tiku.service.ICourseService;
 import com.tamguo.modules.tiku.service.IPaperService;
 import com.tamguo.modules.tiku.service.IQuestionService;
 import com.tamguo.modules.tiku.service.ISubjectService;
+import com.tamguo.utils.BrowserUtils;
 import com.tamguo.utils.PageUtils;
 
 /**
@@ -45,11 +49,9 @@ public class PaperController {
 
 	@SuppressWarnings("unchecked")
 	@RequestMapping(value = {"paperlist/{subjectId}-{courseId}-{paperType}-{year}-{area}-{pageNum}.html"}, method = RequestMethod.GET)
-    public ModelAndView indexAction(@PathVariable String subjectId , @PathVariable String courseId , @PathVariable String paperType,
+    public ModelAndView indexAction(HttpServletRequest request , @PathVariable String subjectId , @PathVariable String courseId , @PathVariable String paperType,
     		@PathVariable String year , @PathVariable String area , @PathVariable Integer pageNum, ModelAndView model) {
     	try {
-    		model.setViewName("paperlist");
-        	
         	CourseEntity course = iCourseService.selectById(courseId);
 			List<CourseEntity> courseList = iCourseService.selectList(Condition.create().eq("subject_id", subjectId));
         	SubjectEntity subject = iSubjectService.selectById(subjectId);
@@ -84,6 +86,13 @@ public class PaperController {
         	model.addObject("paperType", paperType);
         	model.addObject("year", year);
         	model.addObject("area", area);
+        	
+
+			if(BrowserUtils.isMobile(request.getHeader("user-agent"))) {
+	    		model.setViewName("mobile/paperlist");
+	    	}else {
+	    		model.setViewName("paperlist");
+	    	}
             return model;
 		} catch (Exception e) {
 			model.setViewName("404");
@@ -94,7 +103,7 @@ public class PaperController {
 	
 	@SuppressWarnings("unchecked")
 	@RequestMapping(value = {"/paper/{paperId}.html"}, method = RequestMethod.GET)
-	public ModelAndView indexAction(@PathVariable String paperId , ModelAndView model){
+	public ModelAndView indexAction(HttpServletRequest request , @PathVariable String paperId , ModelAndView model){
 		try {
 			model.setViewName("paper");
 			PaperEntity paper = iPaperService.selectById(paperId);
@@ -108,6 +117,13 @@ public class PaperController {
 			model.addObject("moniPaperList", iPaperService.selectList(Condition.create().eq("subject_id", paper.getSubjectId()).eq("type",SystemConstant.MONI_PAPER_ID)));
 			model.addObject("yatiPaperList", iPaperService.selectList(Condition.create().eq("subject_id", paper.getSubjectId()).eq("type",SystemConstant.YATI_PAPER_ID)));
 			model.addObject("hotPaperList", iPaperService.selectList(Condition.create().eq("subject_id", paper.getSubjectId()).eq("course_id", paper.getCourseId())));
+			
+
+			if(BrowserUtils.isMobile(request.getHeader("user-agent"))) {
+	    		model.setViewName("mobile/paper");
+	    	}else {
+	    		model.setViewName("paper");
+	    	}
 			return model;
 		} catch (Exception e) {
 			model.setViewName("404");

tamguo-tms/src/main/java/com/tamguo/web/tiku/SubjectController.java

@@ -2,6 +2,9 @@ package com.tamguo.web.tiku;
 
 import java.util.Arrays;
 import java.util.List;
+
+import javax.servlet.http.HttpServletRequest;
+
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -24,6 +27,7 @@ import com.tamguo.modules.tiku.service.IBookService;
 import com.tamguo.modules.tiku.service.IChapterService;
 import com.tamguo.modules.tiku.service.ICourseService;
 import com.tamguo.modules.tiku.service.ISubjectService;
+import com.tamguo.utils.BrowserUtils;
 
 /**
  * Controller - 考试（高考，建造师，医药师）
@@ -47,10 +51,9 @@ public class SubjectController {
 	@Autowired
 	private IBookService iBookService;
 
-
 	@SuppressWarnings("unchecked")
 	@RequestMapping(value = {"subject/{subjectId}.html"}, method = RequestMethod.GET)
-    public ModelAndView indexAction(@PathVariable String subjectId , ModelAndView model) {
+    public ModelAndView indexAction(@PathVariable String subjectId , HttpServletRequest request , ModelAndView model) {
 		try {
 			SubjectEntity subject = iSubjectService.selectById(subjectId);
 			List<CourseEntity> courseList = iCourseService.selectList(Condition.create().eq("subject_id", subjectId).orderAsc(Arrays.asList("sort")));
@@ -63,12 +66,17 @@ public class SubjectController {
 				BookEntity book = bookList.get(0);
 				chapterList = iChapterService.selectList(Condition.create().eq("book_id", book.getId()));
 			}
-	    	model.setViewName("subject");
 	    	model.addObject("subject", subject);
 	    	model.addObject("course" , course);
 	    	model.addObject("courseList", courseList);
 	    	model.addObject("chapterList" , chapterList);
 	    	model.addObject("areaList", iSysAreaService.selectList(Condition.create().eq("tree_level", "0")));
+	    	if(BrowserUtils.isMobile(request.getHeader("user-agent"))) {
+	    		model.setViewName("mobile/subject");
+	    	}else {
+	    		model.setViewName("subject");
+	    	}
+	    	
 	        return model;
 		} catch (Exception e) {
 			logger.error(e.getMessage() , e);

tamguo-tms/src/main/resources/templates/include/footer.html

@@ -5,7 +5,7 @@
 		<div class="intro">
 			<div class="title">探果题库</div>
 			<p>
-				探果题库旨在为用户提供高效的备考服务，让知识能无障碍传播，老用户价值，助您不断前行！
+				探果题库旨在为用户提供高效的备考服务，让知识能无障碍传播，为用户创造价值，助您不断前行！
 			</p>
 		</div>
 		<div class="connect">

tamguo-tms/src/main/resources/templates/mobile/paper.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<title th:text="${#strings.isEmpty(subject.seoTitle) ? '探果题库_聪明的学生都在这里' : subject.seoTitle}"></title>
+<meta name="keywords" th:content="${#strings.isEmpty(subject.seoKeywords) ? '探果题库为考生提供高效的智能备考服务，涵括领域有高考、财会类、建筑工程、职业资格、医卫类、计算机类和学历类等热门考试题库。拥有高校名师丰富的经验，优质的学习资料和备考全阶段的高效服务！' : subject.seoKeywords}"/>
+<meta name="description" th:content="${#strings.isEmpty(subject.seoDescription) ? '探果题库,高考试题,高考试卷,高校试题,名校,名校试题,名校试卷,高校名师,名师专访,名师教案,名师课堂试题库,试卷库,智能题库,历年真题,模拟试题,押题,预测试题,高考,会计证,会计从业,会计师,经济师,施工员,建造师,建筑师,造价师,职业资格,证券资格,考研,计算机考试,建筑考试,财会类,医卫类,护士资格,公务员,知识点,试题,试卷' : subject.seoDescription}"/>
+<meta name="author" content="Tamguo Team" />
+<meta name="copyright" content="Tamguo" />
+<meta name="viewport" content="initial-scale=1, maximum-scale=1">
+<link rel="shortcut icon" href="/favicon.ico">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black">
+<meta name="format-detection" content="telephone=no">
+<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
+<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
+<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
+</head>
+<body>
+	<div class="page-group">
+		<div class="page" id="page-index">
+			<header class="bar bar-nav">
+				<a class="icon icon-me pull-left open-panel"
+					data-panel=".panel-left"></a> <a
+					class="button button-link button-nav pull-right open-popup"
+					data-popup=".popup-about"> 关于 <span class="icon icon-menu"></span>
+				</a>
+				<h1 class="title" th:text="${'探果题库-' + subject.name}"></h1>
+			</header>
+			<div class="bar bar-standard bar-footer">
+				<a class="icon icon-edit pull-left"></a> <a
+					class="icon icon-settings pull-right open-panel"
+					data-panel=".panel-right"></a>
+			</div>
+			<div class="content" id='page-index'>
+				<div class="content-inner">
+					<div class="content-block-title">试卷</div>
+					<div class="card" th:each="question,status:${questionList}">
+					      <div class="card-content no-border">
+					      		<div class="card-header">题干</div>
+					        	<div class="card-content-inner" th:utext="${question.content}">这是一个用纯文本的简单卡片。但卡片可以包含自己的页头，页脚，列表视图，图像，和里面的任何元素。</div>
+					      </div>
+					      <div class="card-content no-border">
+					      		<div class="card-header">答案</div>
+					        	<div class="card-content-inner" th:utext="${question.answer}">这是一个用纯文本的简单卡片。但卡片可以包含自己的页头，页脚，列表视图，图像，和里面的任何元素。</div>
+					      </div>
+					      <div class="card-content no-border">
+					      		<div class="card-header">解析</div>
+					        	<div class="card-content-inner" th:utext="${question.analysis}">这是一个用纯文本的简单卡片。但卡片可以包含自己的页头，页脚，列表视图，图像，和里面的任何元素。</div>
+					      </div>
+					      <div class="card-footer">
+						        <span class="link">赞</span>
+						        <span class="link">评论</span>
+						        <span class="link">分享</span>
+					      </div>
+				    </div>
+				</div>
+			</div>
+		</div>
+		<div class="popup popup-about">
+			<header class="bar bar-nav">
+				<a class="button button-link button-nav pull-right close-popup">
+					关闭 </a>
+				<h1 class="title">关于探果题库</h1>
+			</header>
+			<div class="content">
+				<div class="content-inner">
+					<div class="content-block">
+						<p><h4>探果题库旨在为用户提供高效的备考服务，让知识能无障碍传播，为用户创造价值，助您不断前行！</h4></p>
+						<div>
+							<div>微信公众号</div>
+							<p>
+								<img style="width:80px;height:80px;" alt="探果题库公众号" th:src="${domainName + 'images/qrcode_for_gh_30d79d8188a1_258.jpg'}">
+							</p>
+						</div>
+						<p></p>
+						<p>
+							<a class="button close-popup">确定</a>
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="panel-overlay"></div>
+		<!-- Left Panel with Reveal effect -->
+		<div class="panel panel-left panel-reveal">
+			<div class="content-block">
+				<p>这是一个侧栏</p>
+				<p></p>
+				<!-- Click on link with "close-panel" class will close panel -->
+				<p>
+					<a href="#" class="close-panel">关闭</a>
+				</p>
+			</div>
+		</div>
+		<div class="panel panel-right panel-cover">
+			<div class="content-block">
+				<p>探果题库</p>
+				<p></p>
+				<!-- Click on link with "close-panel" class will close panel -->
+				<p>
+					<a href="#" class="close-panel">关闭</a>
+				</p>
+			</div>
+		</div>
+	</div>
+</body>
+</html>

tamguo-tms/src/main/resources/templates/mobile/paperlist.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<title th:text="${#strings.isEmpty(subject.seoTitle) ? '探果题库_聪明的学生都在这里' : subject.seoTitle}"></title>
+<meta name="keywords" th:content="${#strings.isEmpty(subject.seoKeywords) ? '探果题库为考生提供高效的智能备考服务，涵括领域有高考、财会类、建筑工程、职业资格、医卫类、计算机类和学历类等热门考试题库。拥有高校名师丰富的经验，优质的学习资料和备考全阶段的高效服务！' : subject.seoKeywords}"/>
+<meta name="description" th:content="${#strings.isEmpty(subject.seoDescription) ? '探果题库,高考试题,高考试卷,高校试题,名校,名校试题,名校试卷,高校名师,名师专访,名师教案,名师课堂试题库,试卷库,智能题库,历年真题,模拟试题,押题,预测试题,高考,会计证,会计从业,会计师,经济师,施工员,建造师,建筑师,造价师,职业资格,证券资格,考研,计算机考试,建筑考试,财会类,医卫类,护士资格,公务员,知识点,试题,试卷' : subject.seoDescription}"/>
+<meta name="author" content="Tamguo Team" />
+<meta name="copyright" content="Tamguo" />
+<meta name="viewport" content="initial-scale=1, maximum-scale=1">
+<link rel="shortcut icon" href="/favicon.ico">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black">
+<meta name="format-detection" content="telephone=no">
+<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
+<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
+<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
+</head>
+<body>
+	<div class="page-group">
+		<div class="page" id="page-index">
+			<header class="bar bar-nav">
+				<a class="icon icon-me pull-left open-panel"
+					data-panel=".panel-left"></a> <a
+					class="button button-link button-nav pull-right open-popup"
+					data-popup=".popup-about"> 关于 <span class="icon icon-menu"></span>
+				</a>
+				<h1 class="title" th:text="${'探果题库-' + subject.name}"></h1>
+			</header>
+			<div class="bar bar-standard bar-footer">
+				<a class="icon icon-edit pull-left"></a> <a
+					class="icon icon-settings pull-right open-panel"
+					data-panel=".panel-right"></a>
+			</div>
+			<div class="content" id='page-index'>
+				<div class="content-inner">
+					<div class="content-block-title">试卷</div>
+					<div class="card" th:each="paper,status:${paperPage.list}">
+					      <div class="card-content no-border">
+					      	<a th:href="${domainName + 'paper/' +paper.id + '.html'}" class="item-link item-content">
+					        	<div class="card-content-inner" th:text="${paper.name}">这是一个用纯文本的简单卡片。但卡片可以包含自己的页头，页脚，列表视图，图像，和里面的任何元素。</div>
+					        </a>
+					      </div>
+					      <div class="card-footer">
+						        <span class="link">赞</span>
+						        <span class="link">评论</span>
+						        <span class="link">分享</span>
+					      </div>
+				    </div>
+				</div>
+			</div>
+		</div>
+		<div class="popup popup-about">
+			<header class="bar bar-nav">
+				<a class="button button-link button-nav pull-right close-popup">
+					关闭 </a>
+				<h1 class="title">关于探果题库</h1>
+			</header>
+			<div class="content">
+				<div class="content-inner">
+					<div class="content-block">
+						<p><h4>探果题库旨在为用户提供高效的备考服务，让知识能无障碍传播，为用户创造价值，助您不断前行！</h4></p>
+						<div>
+							<div>微信公众号</div>
+							<p>
+								<img style="width:80px;height:80px;" alt="探果题库公众号" th:src="${domainName + 'images/qrcode_for_gh_30d79d8188a1_258.jpg'}">
+							</p>
+						</div>
+						<p></p>
+						<p>
+							<a class="button close-popup">确定</a>
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="panel-overlay"></div>
+		<!-- Left Panel with Reveal effect -->
+		<div class="panel panel-left panel-reveal">
+			<div class="content-block">
+				<p>这是一个侧栏</p>
+				<p></p>
+				<!-- Click on link with "close-panel" class will close panel -->
+				<p>
+					<a href="#" class="close-panel">关闭</a>
+				</p>
+			</div>
+		</div>
+		<div class="panel panel-right panel-cover">
+			<div class="content-block">
+				<p>探果题库</p>
+				<p></p>
+				<!-- Click on link with "close-panel" class will close panel -->
+				<p>
+					<a href="#" class="close-panel">关闭</a>
+				</p>
+			</div>
+		</div>
+	</div>
+</body>
+</html>

tamguo-tms/src/main/resources/templates/mobile/subject.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<title th:text="${#strings.isEmpty(subject.seoTitle) ? '探果题库_聪明的学生都在这里' : subject.seoTitle}"></title>
+<meta name="keywords" th:content="${#strings.isEmpty(subject.seoKeywords) ? '探果题库为考生提供高效的智能备考服务，涵括领域有高考、财会类、建筑工程、职业资格、医卫类、计算机类和学历类等热门考试题库。拥有高校名师丰富的经验，优质的学习资料和备考全阶段的高效服务！' : subject.seoKeywords}"/>
+<meta name="description" th:content="${#strings.isEmpty(subject.seoDescription) ? '探果题库,高考试题,高考试卷,高校试题,名校,名校试题,名校试卷,高校名师,名师专访,名师教案,名师课堂试题库,试卷库,智能题库,历年真题,模拟试题,押题,预测试题,高考,会计证,会计从业,会计师,经济师,施工员,建造师,建筑师,造价师,职业资格,证券资格,考研,计算机考试,建筑考试,财会类,医卫类,护士资格,公务员,知识点,试题,试卷' : subject.seoDescription}"/>
+<meta name="author" content="Tamguo Team" />
+<meta name="copyright" content="Tamguo" />
+<meta name="viewport" content="initial-scale=1, maximum-scale=1">
+<link rel="shortcut icon" href="/favicon.ico">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black">
+<meta name="format-detection" content="telephone=no">
+<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
+<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
+<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
+</head>
+<body>
+	<div class="page-group">
+		<div class="page" id="page-index">
+			<header class="bar bar-nav">
+				<a class="icon icon-me pull-left open-panel"
+					data-panel=".panel-left"></a> <a
+					class="button button-link button-nav pull-right open-popup"
+					data-popup=".popup-about"> 关于 <span class="icon icon-menu"></span>
+				</a>
+				<h1 class="title" th:text="${'探果题库-' + subject.name}"></h1>
+			</header>
+			<div class="bar bar-standard bar-footer">
+				<a class="icon icon-edit pull-left"></a> <a
+					class="icon icon-settings pull-right open-panel"
+					data-panel=".panel-right"></a>
+			</div>
+			
+			<div class="content" id='page-index'>
+				<div class="content-inner">
+					<div class="content-block-title">科目</div>
+					<div class="list-block">
+						<ul>
+							<li th:each="course,status:${courseList}"><a th:href="${domainName + 'paperlist/'+subject.id+'-'+course.id+'-0-0-0-1.html'}" class="item-link item-content">
+									<div class="item-inner">
+										<div class="item-title" th:text="${course.name}">标题栏和工具栏</div>
+									</div>
+							</a></li>
+						</ul>
+					</div>
+					<div class="content-block-title">历年试卷</div>
+					<div class="list-block">
+						<ul>
+							<li th:each="h,hStat:${historyPaperList}"><a th:href="${domainName + 'paper/' +h.id + '.html'}" class="item-link item-content">
+									<div class="item-inner">
+										<div class="item-title" th:text="${h.name}">标题栏和工具栏</div>
+									</div>
+							</a></li>
+						</ul>
+					</div>
+					
+					<div class="content-block-title">模拟试卷</div>
+					<div class="list-block">
+						<ul>
+							<li th:each="s,sStat:${simulationPaperList}"><a th:href="${domainName + 'paper/' +s.id + '.html'}" class="item-link item-content">
+									<div class="item-inner">
+										<div class="item-title" th:text="${s.name}">标题栏和工具栏</div>
+									</div>
+							</a></li>
+						</ul>
+					</div>
+					
+					<div class="content-block-title">热门试卷</div>
+					<div class="list-block">
+						<ul>
+							<li th:each="s,sStat:${hotPaperList}"><a th:href="${domainName + 'paper/' +s.id + '.html'}" class="item-link item-content">
+									<div class="item-inner">
+										<div class="item-title" th:text="${s.name}">标题栏和工具栏</div>
+									</div>
+							</a></li>
+						</ul>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="popup popup-about">
+			<header class="bar bar-nav">
+				<a class="button button-link button-nav pull-right close-popup">
+					关闭 </a>
+				<h1 class="title">关于探果题库</h1>
+			</header>
+			<div class="content">
+				<div class="content-inner">
+					<div class="content-block">
+						<p><h4>探果题库旨在为用户提供高效的备考服务，让知识能无障碍传播，为用户创造价值，助您不断前行！</h4></p>
+						<div>
+							<div>微信公众号</div>
+							<p>
+								<img style="width:80px;height:80px;" alt="探果题库公众号" th:src="${domainName + 'images/qrcode_for_gh_30d79d8188a1_258.jpg'}">
+							</p>
+						</div>
+						<p></p>
+						<p>
+							<a class="button close-popup">确定</a>
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="panel-overlay"></div>
+		<!-- Left Panel with Reveal effect -->
+		<div class="panel panel-left panel-reveal">
+			<div class="content-block">
+				<p>这是一个侧栏</p>
+				<p></p>
+				<!-- Click on link with "close-panel" class will close panel -->
+				<p>
+					<a href="#" class="close-panel">关闭</a>
+				</p>
+			</div>
+		</div>
+		<div class="panel panel-right panel-cover">
+			<div class="content-block">
+				<p>探果题库</p>
+				<p></p>
+				<!-- Click on link with "close-panel" class will close panel -->
+				<p>
+					<a href="#" class="close-panel">关闭</a>
+				</p>
+			</div>
+		</div>
+	</div>
+</body>
+</html>