Startseite Erkunden Hilfe
Registrieren Anmelden
bulomakaka
/
ekexiu.app
Beobachten 2
Favorit hinzufügen 1
Fork 0
Code Issues 0 Pull-Requests 0 Commits 469 Releases 0 Wiki
Quellcode durchsuchen

搜索找人找资源找文章以及筛选条件

luyanan vor 8 Jahren
Ursprung
8c27324f1b
Commit
6d46295b70
3 geänderte Dateien mit 264 neuen und 0 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 103 0
      app/html/searchFilters.html
  2. 119 0
      app/html/searchListNew.html
  3. 42 0
      app/html/searchNew.html

+ 103 - 0
app/html/searchFilters.html
Datei anzeigen 

@ -0,0 +1,103 @@
1 
<!DOCTYPE html>
2 
<html>
3
4 
	<head>
5 
		<meta charset="utf-8">
6 
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7 
		<title>筛选条件</title>
8 
		<link href="../css/mui.min.css" rel="stylesheet" />
9 
		<link href="../css/app.css" rel="stylesheet" />
10 
		<link href="../css/iconfont.css" rel="stylesheet" />
11 
		<style type="text/css">
12 
			body,.mui-content{background: #FFFFFF;}
13 
		</style>
14 
	</head>
15
16 
	<body>
17 
		<header class="mui-bar mui-bar-nav toptitbox" style="background: #FFFFFF;border-bottom:1px solid #F0F0F0;">
18 
			<a class="mui-pull-left topWord">重置</a>
19 
			<h1 class="mui-title">“找人”</h1>
20 
			<a class="mui-pull-right topWord">完成</a>
21 
		</header>
22 
		<div class="mui-content">
23 
		    <div class="filterListNew">
24 
				<div class="filterClass">
25 
					<h5 class="mui-navigate-right">所在城市<span class="orangeColor">不限</span></h5>
26 
				</div>
27 
				<ul class="filterUl fourUl">
28 
					<li class="filterCurrent">不限</li>
29 
		       		<li>北京</li>
30 
		       		<li>呼和浩特</li>
31 
		       		<li>太原</li>
32 
		       		<li>上海</li>
33 
		       		<li>广州</li>
34 
		       		<li>天津</li>
35 
		       		<li>北京</li>
36 
		       		<li>呼和浩特</li>
37 
		       		<li>太原</li>
38 
		       		<li>上海</li>
39 
		       		<li>广州</li>
40 
		       		<li>天津</li>
41 
		       	</ul>
42 
			</div>
43 
			<div class="filterListNew">
44 
				<div class="filterClass">
45 
					<h5 class="mui-navigate-right">学术领域<span class="orangeColor">不限</span></h5>
46 
				</div>
47 
				<ul class="filterUl threeUl">
48 
					<li class="filterCurrent">不限</li>
49 
		       		<li>材料检测</li>
50 
		       		<li>防腐蚀</li>
51 
		       		<li>材料表面与界面</li>
52 
		       		<li>微晶金属材料</li>
53 
		       		<li>黑色金属</li>
54 
		       		<li>金属基复合材料</li>
55 
		       	</ul>
56 
			</div>
57 
			<div class="filterListNew">
58 
				<div class="filterClass">
59 
					<h5 class="mui-navigate-right">应用行业<span class="orangeColor">不限</span></h5>
60 
				</div>
61 
				<ul class="filterUl fourUl">
62 
					<li class="filterCurrent">不限</li>
63 
		       		<li>航空航天</li>
64 
		       		<li>化工</li>
65 
		       		<li>新能源</li>
66 
		       		<li>半导体</li>
67 
		       		<li>航空航天</li>
68 
		       		<li>化工</li>
69 
		       		<li>新能源</li>
70 
		       		<li>半导体</li>
71 
		       		<li>航空航天</li>
72 
		       		<li>化工</li>
73 
		       		<li>新能源</li>
74 
		       		<li>半导体</li>
75 
		       	</ul>
76 
			</div>
77 
		</div>
78 
		<script src="../js/public/mui.min.js"></script>
79 
		<script src="../js/public/base.js"></script>
80 
		<script type="text/javascript">
81 
			mui.init();
82 
			//筛选条件的选择
83 
			mui(".filterUl").on("tap","li",function(){
84 
				this.parentNode.querySelector('li.filterCurrent').classList.remove("filterCurrent");
85 
				this.classList.add("filterCurrent");
86 
				this.parentNode.parentNode.querySelector(".filterClass span").innerText=this.innerText;
87 
			})
88 
			//筛选条件的展开关闭
89 
			mui(".filterListNew").on("tap",".filterClass",function(){
90 
				if(this.className == "filterClass filterActive") {
91 
					this.classList.remove("filterActive");
92 
					this.parentNode.querySelector(".filterUl").classList.remove("filterUlactive");
93 
				} else {
94 
					this.classList.add("filterActive");
95 
					//this.nextSibling.classList.add("filterUlactive");
96 
					this.parentNode.querySelector(".filterUl").classList.add("filterUlactive");
97 
				}
98 
			})
99 
		</script>
100 
	</body>
101
102 
</html>
103

+ 119 - 0
app/html/searchListNew.html
Datei anzeigen 

@ -0,0 +1,119 @@
1 
<!DOCTYPE html>
2 
<html>
3
4 
	<head>
5 
		<meta charset="utf-8">
6 
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7 
		<title>搜索列表</title>
8 
		<link href="../css/mui.min.css" rel="stylesheet" />
9 
		<link href="../css/app.css" rel="stylesheet" />
10 
		<link href="../css/iconfont.css" rel="stylesheet" />
11 
	</head>
12
13 
	<body>
14 
		<!-- 主页面标题 -->
15 
		<header class="mui-bar mui-bar-nav toptitbox" style="background: #FFFFFF;">
16 
			<a class="mui-action-back mui-icon mui-icon-left-nav leftnav" style="color: #BBBBBB;"></a>
17 
			<div class="searchboxNew searchboxNewT">
18 
				<form onsubmit="return false;">
19 
					<input type="search" class="mui-input-clear searchtxtNew" placeholder="搜索你喜欢的" id="searchval" />
20 
				</form>
21 
			</div>
22 
			<div class="rightnav"><!--选择筛选条件之后添加 filtered-->
23 
				<a class="mui-icon iconfont icon-filter"></a><br />筛选
24 
				<span class="mui-badge">3</span>
25 
			</div>
26 
		</header>
27 
		<div class="mui-content">
28 
			<div class="fixboxNew">
29 
				<ul class="fixbtnNew">
30 
					<li class="mui-col-xs-4 liactive">找人</li>
31 
					<li class="mui-col-xs-4">找资源</li>
32 
					<li class="mui-col-xs-4">找文章</li>
33 
				</ul>
34 
			</div>
35 
			<div class="mui-scroll-wrapper"style="padding-top:86px">
36 
			    <div class="mui-scroll">
37 
					<div class="mui-card-content conblock">
38 
						<div class="maincontent">
39 
							<!--找人-->
40 
							<ul class="mui-table-view searchManTab">
41 
						        <li class="mui-table-view-cell">
42 
							        <div class="flexCenter">
43 
							        	<div class="userImg userRadius">
44 
							        		<img src="../images/default-photo.jpg"/>
45 
							        	</div>
46 
										<div class="userInfo">
47 
											<p class="h1Font positionR"><span>用户姓名</span><em class="authicon authicon-pro"></em></p>
48 
											<p class="h3Font mui-ellipsis">教授级高工，董事长兼CEO</p>
49 
											<!--专家显示研究方向--><!--非专家显示所在机构-->
50 
											<p class="h3Font mui-ellipsis">研究方向：材料腐蚀与防护，材料腐蚀基因组的工程和应用</p>
51 
										</div>
52 
							        </div>
53 
						        </li>
54 
						        <li class="mui-table-view-cell">
55 
							        <div class="flexCenter">
56 
							        	<div class="userImg userRadius">
57 
							        		<img src="../images/default-photo.jpg"/>
58 
							        	</div>
59 
										<div class="userInfo">
60 
											<p class="h1Font positionR"><span>用户姓名</span><em class="authicon authicon-real"></em></p>
61 
											<p class="h3Font mui-ellipsis">教授级高工，董事长兼CEO</p>
62 
											<p class="h3Font mui-ellipsis">北京科技大学</p>
63 
										</div>
64 
							        </div>
65 
						        </li>
66 
						    </ul>
67 
						    <!--找资源-->
68 
						    <ul class="mui-table-view searchOtherTab">
69 
						        <li class="mui-table-view-cell">
70 
									<div class="flexCenter table-item-cell">
71 
										<div class="table-item-img resource-default"></div>
72 
										<div class="table-item-body">
73 
											<p class="h1Font otherTopic mui-ellipsis-2">失效分析、安全评定与剩余寿命评估、红外热像无损检测及其专家系统</p>
74 
											<p class="h3Font positionR mui-ellipsis">用途：进行自然环境下的各种金属材料、新型涂层。</p>
75 
										</div>
76 
									</div>
77 
						        </li>
78 
						        <li class="mui-table-view-cell">
79 
									<div class="flexCenter table-item-cell">
80 
										<div class="table-item-img resource-default"></div>
81 
										<div class="table-item-body">
82 
											<p class="h1Font otherTopic mui-ellipsis-2">失效分析、安全评定</p>
83 
											<p class="h3Font positionR mui-ellipsis">用途：进行自然环境下的各种金属材料、新型涂层材料的暴晒实验和户外加速腐蚀试验研究。</p>
84 
										</div>
85 
									</div>
86 
						        </li>
87 
						    </ul>
88 
						    <!--找文章-->
89 
						    <ul class="mui-table-view searchOtherTab">
90 
						        <li class="mui-table-view-cell">
91 
									<div class="flexCenter table-item-cell">
92 
										<div class="table-item-img artical-default"></div>
93 
										<div class="table-item-body">
94 
											<p class="h1Font otherTopic mui-ellipsis-2">失效分析、安全评定与剩余寿命评估、红外热像无损检测及其专家系统</p>
95 
											<p class="h1Font positionR"><span>用户姓名</span><em class="authicon authicon-real"></em></p>
96 
										</div>
97 
									</div>
98 
						        </li>
99 
						        <li class="mui-table-view-cell">
100 
									<div class="flexCenter table-item-cell">
101 
										<div class="table-item-img artical-default"></div>
102 
										<div class="table-item-body">
103 
											<p class="h1Font otherTopic mui-ellipsis-2">失效分析、安全评定</p>
104 
											<p class="h1Font positionR"><span>北京科袖科技有限公司</span><em class="authicon authicon-com-ok"></em></p>
105 
										</div>
106 
									</div>
107 
						        </li>
108 
						    </ul>
109 
						</div>
110 
					</div>
111 
				</div>
112 
			</div>
113 
		</div>
114 
		<script src="../js/public/mui.min.js"></script>
115 
		<script src="../js/public/base.js"></script>
116 
<!--		<script src="../js/searchhome.js"></script>-->
117 
	</body>
118
119 
</html>

+ 42 - 0
app/html/searchNew.html
Datei anzeigen 

@ -0,0 +1,42 @@
1 
<!DOCTYPE html>
2 
<html>
3
4 
	<head>
5 
		<meta charset="utf-8">
6 
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7 
		<title>搜索</title>
8 
		<link href="../css/mui.min.css" rel="stylesheet" />
9 
		<link href="../css/app.css" rel="stylesheet" />
10 
		<link href="../css/iconfont.css" rel="stylesheet" />
11 
	</head>
12
13 
	<body>
14
15 
		<!-- 主页面标题 -->
16 
		<header class="mui-bar mui-bar-nav toptitbox" style="background: #FFFFFF;border-bottom:1px solid #F0F0F0;">
17 
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left leftnav" style="color: #BBBBBB;"></a>
18 
			<div class="searchboxNew">
19 
				<form onsubmit="return false;">
20 
					<input type="search" class="mui-input-clear searchtxtNew" placeholder="搜索你喜欢的" id="searchval" />
21 
				</form>
22 
			</div>
23 
		</header>
24 
		<div class="mui-content">
25 
		    <div class="hotsearchboxNew">
26 
				<h5>热门搜索</h5>
27 
				<ul class="hotsearchNew">
28 
		       		<li>材料检测</li>
29 
		       		<li>防腐蚀</li>
30 
		       		<li>材料表面与界面</li>
31 
		       		<li>微晶金属材料</li>
32 
		       		<li>黑色金属</li>
33 
		       		<li>金属基复合材料</li>
34 
		       	</ul>
35 
			</div>
36 
		</div>
37 
		<script src="../js/public/mui.min.js"></script>
38 
		<script src="../js/public/base.js"></script>
39 
		<!--<script src="../js/searchhome.js"></script>-->
40 
	</body>
41
42 
</html>