Home Explore Help
Register Sign In
bulomakaka
/
ekexiu.app
Watch 2
Star 1
Fork 0
Code Issues 0 Pull Requests 0 Commits 190 Releases 0 Wiki
Browse Source

首页修改

xuchunyang 8 years ago
parent
4e6af983db
commit
b744900ba1
2 changed files with 26 additions and 131 deletions
Split View Show Diff Stats
  1. 25 122
      app/html/index_home.html
  2. 1 9
      app/js/index.js

+ 25 - 122
app/html/index_home.html
View File 

@ -11,7 +11,6 @@
11 11 
	</head>
12 12
13 13 
	<body>
14
15 14 
		<!-- 主页面标题 -->
16 15 
		<header class="mui-bar mui-bar-nav toptitbox">
17 16 
			<div class="searchbox bgRadius" id="search">
 
@ -19,129 +18,33 @@
19 18 
				<!--<input type="search" class="mui-input-clear searchtxt" placeholder="搜索专家、合作资源">-->
20 19 
			</div>
21 20 
		</header>
22 
		<!-- 主页面内容容器 -->
23 
		<div class="mui-content mui-scroll-wrapper" id="pullrefresh" >
24 
			<div class="mui-scroll">
25 
				<!-- 主界面具体展示内容 -->
26 
				<!--图片轮播-->
27 
				<div id="slider" class="mui-slider">
28 
					<div class="mui-slider-group mui-slider-loop">
29 
						<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
30 
						<div class="mui-slider-item mui-slider-item-duplicate">
31 
							<a>
32 
								<img src="../images/banner/4.jpg">
33 
							</a>
34 
						</div>
35 
						<!-- 第一张 -->
36 
						<div class="mui-slider-item">
37 
							<a>
38 
								<img src="../images/banner/1.jpg">
39 
							</a>
40 
						</div>
41 
						<!-- 第二张 -->
42 
						<div class="mui-slider-item">
43 
							<a>
44 
								<img src="../images/banner/2.jpg">
45 
							</a>
46 
						</div>
47 
						<!-- 第三张 -->
48 
						<div class="mui-slider-item">
49 
							<a>
50 
								<img src="../images/banner/3.jpg">
51 
							</a>
52 
						</div>
53 
						<!-- 第四张 -->
54 
						<div class="mui-slider-item">
55 
							<a>
56 
								<img src="../images/banner/4.jpg">
57 
							</a>
58 
						</div>
59 
						<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
60 
						<div class="mui-slider-item mui-slider-item-duplicate">
61 
							<a>
62 
								<img src="../images/banner/1.jpg">
63 
							</a>
64 
						</div>
65 
					</div>
66 
					<div class="mui-slider-indicator">
67 
						<div class="mui-indicator mui-active"></div>
68 
						<div class="mui-indicator"></div>
69 
						<div class="mui-indicator"></div>
70 
						<div class="mui-indicator"></div>
71 
					</div>
72 
				</div>
73 
				<!-- 九宫格排版-->
74 
				<div class="mui-card-content conblock">
75 
					<div class="maintitbox">
76 
						<div class="maintit">热门领域</div>
77 
					</div>
78 
					<ul class="mui-table-view mui-grid-view mui-grid-9 gridbg">
79 
						<li class="mui-table-view-cell mui-media mui-col-xs-4" data-title="材料失效与保护">
80 
							<a>
81 
								<div class="fieldicon">
82 
									<img src="../images/field_icon/field05.png" />
83 
								</div>
84 
								<div class="mui-media-body">材料失效与保护</div>
85 
							</a>
86 
						</li>
87 
						<li class="mui-table-view-cell mui-media mui-col-xs-4" data-title="材料表面与界面">
88 
							<a>
89 
								<div class="fieldicon">
90 
									<img src="../images/field_icon/field02.png" />
91 
								</div>
92 
								<div class="mui-media-body">材料表面与界面</div>
93 
							</a>
94 
						</li>
95 
						<li class="mui-table-view-cell mui-media mui-col-xs-4" data-title="黑色金属及其合金">
96 
							<a>
97 
								<div class="fieldicon">
98 
									<img src="../images/field_icon/field07.png" />
99 
								</div>
100 
								<div class="mui-media-body">黑色金属及其合金</div>
101 
							</a>
102 
						</li>
103 
						<li class="mui-table-view-cell mui-media mui-col-xs-4" data-title="金属材料">
104 
							<a>
105 
								<div class="fieldicon">
106 
									<img src="../images/field_icon/field18.png" />
107 
								</div>
108 
								<div class="mui-media-body">金属材料</div>
109 
							</a>
110 
						</li>
111 
						<li class="mui-table-view-cell mui-media mui-col-xs-4" data-title="有色金属及其合金">
112 
							<a>
113 
								<div class="fieldicon">
114 
									<img src="../images/field_icon/field04.png" />
115 
								</div>
116 
								<div class="mui-media-body">有色金属及其合金</div>
117 
							</a>
118 
						</li>
119 
						<li class="mui-table-view-cell mui-media mui-col-xs-4" data-title="材料检测与分析技术">
120 
							<a>
121 
								<div class="fieldicon">
122 
									<img src="../images/field_icon/field16.png" />
123 
								</div>
124 
								<div class="mui-media-body">材料检测与分析技术</div>
125 
							</a>
126 
						</li>
127 
					</ul>
128 
				</div>
129 
				<!--图文列表-->
130 
				<div class="mui-card-content conblock">
131 
					<div class="maintitbox">
132 
						<div class="maintit">热门专家</div>
133 
					</div>
134 
					<!--数据列表-->
135 
					<ul class="mui-table-view mui-table-view-chevron list">
136
137 
					</ul>
138 
				</div>
139 
			</div>
140 
		</div>
21 
		<div class="mui-content">	</div>
141 22 
		<script src="../js/public/mui.min.js"></script>
142 23 
		<script src="../js/public/base.js"></script>
143 
		<script src="../js/index.js"></script>
144
24 
		<script>
25 
		/*点击搜索按钮*/
26 
		mui.plusReady(function(){
27 
			search.addEventListener('tap', function() {
28 
				var nwaiting = plus.nativeUI.showWaiting();//显示原生等待框
29 
			    webviewShow = plus.webview.create("../html/search-home.html","../html/search-home.html");//后台创建webview并打开show.html
30 
			    webviewShow.addEventListener("loaded", function() {
31 
			        nwaiting.close(); //新webview的载入完毕后关闭等待框
32 
			        webviewShow.show("slide-in-right",150); //把新webview窗体显示出来，显示动画效果为速度150毫秒的右侧移入动画
33 
			    }, false);
34 
			});
35 
		})
36
37 
		mui.init({
38 
		    subpages:[{
39 
				url:'index_centen.html',
40 
				id:'index_centen.html',
41 
				styles:{
42 
					top: '45px',
43 
					bottom: '0px',
44 
				}
45 
			}]
46 
		  });
47 
		</script>
145 48 
	</body>
146 49
147 50 
</html>

+ 1 - 9
app/js/index.js
View File 

@ -17,15 +17,7 @@ mui('.list').on('tap','a',function(){
17 17 
})
18 18
19 19
20 
/*点击搜索按钮*/
21 
search.addEventListener('tap', function() {
22 
	var nwaiting = plus.nativeUI.showWaiting();//显示原生等待框
23 
    webviewShow = plus.webview.create("../html/search-home.html","../html/search-home.html");//后台创建webview并打开show.html
24 
    webviewShow.addEventListener("loaded", function() {
25 
        nwaiting.close(); //新webview的载入完毕后关闭等待框
26 
        webviewShow.show("slide-in-right",150); //把新webview窗体显示出来，显示动画效果为速度150毫秒的右侧移入动画
27 
    }, false);
28 
});
20
29 21
30 22 
/*点击热门领域*/
31 23 
mui('.gridbg').on('tap','li',function(){