hook_test

about.html

@@ -15,7 +15,11 @@
 			<div id="header_nav">
 				<img id="logo" src="img/index/图层2.png"/>
 				<ul id="header_nav_list">
-					<li>
+					<li v-for="item in items" class="header_nav_list_li">
+						<a v-bind:href="item.href">{{item.title}}</a>
+						<div class="head_nav_subscript"></div>
+					</li>
+					<!--<li>
 						<a href="#">首页</a>
 						<div class="head_nav_subscript head_nav_subscript_active"></div>
 					</li>
@@ -42,13 +46,18 @@
 					<li>
 						<a href="#">软件下载</a>
 						<div class="head_nav_subscript"></div>
-					</li>
+					</li>-->
 				</ul>
 			</div>
 			<div class="clear" style="height: 0px;"></div>
 			<div id="header_sed_nav">
 				<div id="header_sed_nav_con">
-					<ul id="home_page">
+					<template>
+					<ul v-for="item in items">
+						<li v-for="it in item"><a v-bind:href="it.href">{{it.title}}</a></li>
+					</ul>
+					</template>
+					<!--<ul id="home_page">
 						
 					</ul>
 					<ul id="about_us">
@@ -87,7 +96,7 @@
 					<ul id="app_download">
 						<li><a href="#">完整版下载</a></li>
 						<li><a href="#">手机版下载</a></li>
-					</ul>
+					</ul>-->
 				</div>
 			</div>
 		</header>
@@ -125,20 +134,26 @@
 			
 		</section>
 		
-		<footer>
+		<footer id="footer">
 			<div id="footer_title">
 				<ul>
-					<li>关于我们</li>
+					<li v-for="item in footerTitle">{{item}}</li>
+					<!--<li>关于我们</li>
 					<li>添富汇研究</li>
 					<li>石油学院</li>
 					<li>石油投资</li>
 					<li>我要开户</li>
-					<li>软件下载</li>
+					<li>软件下载</li>-->
 				</ul>
 			</div>
 			<div id="footer_content">
 				<div>
-					<ul>
+					<template>
+						<ul v-for="item in footerContent">
+							<li v-for="it in item"><a v-bind:href="it.href">{{it.title}}</a></li>
+						</ul>
+					</template>
+					<!--<ul>
 						<li><a href="#">公司简介</a></li>
 						<li><a href="#">公司文化</a></li>
 						<li><a href="#">公司环境</a></li>
@@ -179,7 +194,7 @@
 					<ul>
 						<li><a href="#">完整版下载</a></li>
 						<li><a href="#">手机版下载</a></li>
-					</ul>
+					</ul>-->
 				</div>
 			</div>
 		</footer>

bower.json

@@ -19,6 +19,7 @@
   ],
   "dependencies": {
     "vue": "^2.5.13",
-    "bootstrap": "^3.3.7"
+    "bootstrap": "^3.3.7",
+    "jquery": "^3.2.1"
   }
 }

css/base.css

@@ -69,6 +69,7 @@ header{
 	width: 100%;
 	height: 35px;
 	background: rgba(255,255,255,.5);
+	padding-left: 400px;
 }
 #header_sed_nav_con ul li{
 	float: left;
@@ -81,7 +82,7 @@ header{
 	font-size: 14px;
 	color: #26201e;
 }
-#home_page{
+/*#home_page{
 	height: 0px !important;
 }
 #about_us{
@@ -101,7 +102,7 @@ header{
 }
 #app_download{
 	padding-left: 1000px;
-}
+}*/
 
 
 footer{

css/index.css

@@ -65,11 +65,17 @@
 	height: 395px;
 	box-sizing: border-box;
 	padding-top: 70px;
+	text-align: center;
 }
-.advantage_list_pic{
+/*.advantage_list_pic{
 	width: 100%;
 	height: 134px;
 	background: url(../img/index/图层41.png)50% 50% no-repeat;
+}*/
+#advantage_con_ul li img{
+	width: 134px;
+	height: 134px;
+	
 }
 .advantage_list_name{
 	width: 100%;
@@ -103,10 +109,12 @@
 	right: -49px;
 	width: 49px;
 	height: 70px;
-	background: url(../img/index/形状5副本3.png)0 0 no-repeat;
+	background: url(../img/index/20180116221219.jpg)0 0 no-repeat;
 	cursor: pointer;
 }
-
+#go_left:hover,#go_right:hover{
+	opacity: 0.8;
+}
 #news_center{
 	width: 100%;
 	max-width: 1920px;

download.html

@@ -15,7 +15,11 @@
 			<div id="header_nav">
 				<img id="logo" src="img/index/图层2.png"/>
 				<ul id="header_nav_list">
-					<li>
+					<li v-for="item in items" class="header_nav_list_li">
+						<a v-bind:href="item.href">{{item.title}}</a>
+						<div class="head_nav_subscript"></div>
+					</li>
+					<!--<li>
 						<a href="#">首页</a>
 						<div class="head_nav_subscript head_nav_subscript_active"></div>
 					</li>
@@ -42,13 +46,18 @@
 					<li>
 						<a href="#">软件下载</a>
 						<div class="head_nav_subscript"></div>
-					</li>
+					</li>-->
 				</ul>
 			</div>
 			<div class="clear" style="height: 0px;"></div>
 			<div id="header_sed_nav">
 				<div id="header_sed_nav_con">
-					<ul id="home_page">
+					<template>
+					<ul v-for="item in items">
+						<li v-for="it in item"><a v-bind:href="it.href">{{it.title}}</a></li>
+					</ul>
+					</template>
+					<!--<ul id="home_page">
 						
 					</ul>
 					<ul id="about_us">
@@ -87,7 +96,7 @@
 					<ul id="app_download">
 						<li><a href="#">完整版下载</a></li>
 						<li><a href="#">手机版下载</a></li>
-					</ul>
+					</ul>-->
 				</div>
 			</div>
 		</header>
@@ -131,20 +140,26 @@
 			
 		</section>
 		
-		<footer>
+		<footer id="footer">
 			<div id="footer_title">
 				<ul>
-					<li>关于我们</li>
+					<li v-for="item in footerTitle">{{item}}</li>
+					<!--<li>关于我们</li>
 					<li>添富汇研究</li>
 					<li>石油学院</li>
 					<li>石油投资</li>
 					<li>我要开户</li>
-					<li>软件下载</li>
+					<li>软件下载</li>-->
 				</ul>
 			</div>
 			<div id="footer_content">
 				<div>
-					<ul>
+					<template>
+						<ul v-for="item in footerContent">
+							<li v-for="it in item"><a v-bind:href="it.href">{{it.title}}</a></li>
+						</ul>
+					</template>
+					<!--<ul>
 						<li><a href="#">公司简介</a></li>
 						<li><a href="#">公司文化</a></li>
 						<li><a href="#">公司环境</a></li>
@@ -185,7 +200,7 @@
 					<ul>
 						<li><a href="#">完整版下载</a></li>
 						<li><a href="#">手机版下载</a></li>
-					</ul>
+					</ul>-->
 				</div>
 			</div>
 		</footer>

index.html

@@ -8,15 +8,21 @@
 		<link rel="stylesheet" type="text/css" href="css/index.css"/>
 		<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
 		<script src="bower_components/vue/dist/vue.min.js"></script>
-		<script type="text/javascript" src="js/index.js"></script>
 		<script src="js/base.js"></script>
+		<script type="text/javascript" src="js/index.js"></script>
+		
+		
 	</head>
 	<body>
 		<header>
 			<div id="header_nav">
 				<img id="logo" src="img/index/图层2.png"/>
 				<ul id="header_nav_list">
-					<li>
+					<li v-for="item in items" class="header_nav_list_li">
+						<a v-bind:href="item.href">{{item.title}}</a>
+						<div class="head_nav_subscript"></div>
+					</li>
+					<!--<li>
 						<a href="#">首页</a>
 						<div class="head_nav_subscript head_nav_subscript_active"></div>
 					</li>
@@ -43,13 +49,18 @@
 					<li>
 						<a href="#">软件下载</a>
 						<div class="head_nav_subscript"></div>
-					</li>
+					</li>-->
 				</ul>
 			</div>
 			<div class="clear" style="height: 0px;"></div>
 			<div id="header_sed_nav">
 				<div id="header_sed_nav_con">
-					<ul id="home_page">
+					<template>
+					<ul v-for="item in items">
+						<li v-for="it in item"><a v-bind:href="it.href">{{it.title}}</a></li>
+					</ul>
+					</template>
+					<!--<ul id="home_page">
 						
 					</ul>
 					<ul id="about_us">
@@ -88,7 +99,7 @@
 					<ul id="app_download">
 						<li><a href="#">完整版下载</a></li>
 						<li><a href="#">手机版下载</a></li>
-					</ul>
+					</ul>-->
 				</div>
 			</div>
 		</header>
@@ -104,12 +115,19 @@
 				<div id="advantage_model">
 					<div id="advantage_con">
 						<ul id="advantage_con_ul">
-							<li>
-								<div class="advantage_list_pic"></div>
+							
+							<li v-for="item in items">
+								<img v-bind:src="item.img" />
+								<div class="advantage_list_name">{{item.title}}</div>
+								<div class="advantage_list_instructions">{{item.msg}}</div>
+							</li>
+							
+							<!--<li>
+								<img src="./img/index/图层41.png" />
 								<div class="advantage_list_name">平台优势</div>
 								<div class="advantage_list_instructions">大连再生资源交易所，国内最先进系统环境安全稳定</div>
-							</li>
-							<li>
+							</li>-->
+							<!--<li>
 								<div class="advantage_list_pic"></div>
 								<div class="advantage_list_name">平台优势</div>
 								<div class="advantage_list_instructions">大连再生资源交易所，国内最先进系统环境安全稳定</div>
@@ -139,7 +157,7 @@
 								<div class="advantage_list_pic"></div>
 								<div class="advantage_list_name">平台优势</div>
 								<div class="advantage_list_instructions">大连再生资源交易所，国内最先进系统环境安全稳定</div>
-							</li>
+							</li>-->
 						</ul>
 					</div>
 					<div id="go_left"></div>
@@ -155,25 +173,25 @@
 				</div>
 				
 				<div id="news_con">
-					<ul>
-						<li>
+					<ul id="news_con_ul">
+						<li v-for="item in items">
 							<div class="news_lists">
 								<div class="news_title">
-									<span class="news_title_ch">每日点评</span>
-									<span class="news_title_en">Daily Comments</span>
+									<span class="news_title_ch">{{item.title1}}</span>
+									<span class="news_title_en">{{item.title2}}</span>
 								</div>
 								<div class="news_lists_con">
 									<div class="news_time">
-										<span class="news_time_day">16</span>
-										<span class="news_time_month">Mar</span>
+										<span class="news_time_day">{{item.day}}</span>
+										<span class="news_time_month">{{item.month}}</span>
 									</div>
-									<img src="img/index/图层22.png"/>
-									<div class="news_detail">2月12日美元上涨，此前数据显示美国消费者支出看来在1月重拾动能，支持了在其他央行放宽政策之际，美联储将继续升息的可能性。</div>
-									<a href="#"><div class="news_more">MORE</div></a>
+									<img v-bind:src="item.img"/>
+									<div class="news_detail">{{item.msg}}</div>
+									<a v-bind:href="item.link"><div class="news_more">MORE</div></a>
 								</div>
 							</div>
 						</li>
-						<li>
+						<!--<li>
 							<div class="news_lists">
 								<div class="news_title">
 									<span class="news_title_ch">企业新闻</span>
@@ -206,7 +224,7 @@
 									<a href="#"><div class="news_more">MORE</div></a>
 								</div>
 							</div>
-						</li>
+						</li>-->
 					</ul>
 				</div>
 			</div>
@@ -239,20 +257,27 @@
 			</div>
 		</section>
 		
-		<footer>
+		<footer id="footer">
 			<div id="footer_title">
 				<ul>
-					<li>关于我们</li>
+					<li v-for="item in footerTitle">{{item}}</li>
+					<!--<li>关于我们</li>
 					<li>添富汇研究</li>
 					<li>石油学院</li>
 					<li>石油投资</li>
 					<li>我要开户</li>
-					<li>软件下载</li>
+					<li>软件下载</li>-->
 				</ul>
 			</div>
 			<div id="footer_content">
 				<div>
-					<ul>
+					<template>
+						<ul v-for="item in footerContent">
+							<li v-for="it in item"><a v-bind:href="it.href">{{it.title}}</a></li>
+						</ul>
+					</template>
+					
+					<!--<ul>
 						<li><a href="#">公司简介</a></li>
 						<li><a href="#">公司文化</a></li>
 						<li><a href="#">公司环境</a></li>
@@ -293,9 +318,12 @@
 					<ul>
 						<li><a href="#">完整版下载</a></li>
 						<li><a href="#">手机版下载</a></li>
-					</ul>
+					</ul>-->
 				</div>
 			</div>
 		</footer>
+		
+		
+		
 	</body>
 </html>

js/base.js

@@ -1,6 +1,70 @@
 $(function(){
 	
-	
+//头部导航
+var navTitle = new Vue({
+	el:"#header_nav_list",
+	data:{
+		items:[]
+	}
+})
+
+$.ajax({
+	url:"./json/1.json",
+	type:"get",
+	dataType:"json",
+	success:function(msg){
+		navTitle.items = msg;
+	}
+})
+
+
+//头部二级导航
+var navTitle2 = new Vue({
+	el:"#header_sed_nav_con",
+	data:{
+		items:[]
+	}
+})
+
+$.ajax({
+	url:"./json/2.json",
+	type:"get",
+	dataType:"json",
+	success:function(msg){
+		navTitle2.items = msg;
+	}
+})
+
+//footer
+var footerMsg = new Vue({
+	el:"#footer",
+	data:{
+		footerTitle:[],
+		footerContent:[]
+	}
+})
+
+$.ajax({
+	url:"./json/footer.json",
+	type:"get",
+	dataType:"json",
+	success:function(msg){
+		footerMsg.footerTitle = msg.title;
+		footerMsg.footerContent = msg.content;
+	}
+})
+
+
+
+
+
+
+
+
+
+
+
+window.addEventListener("load",function(){
 //导航
 $("#header_nav_list>li").mouseover(function(event){
 	var num = $(this).index();
@@ -25,4 +89,22 @@ $('#header_nav_list>li').mouseout(function(event){
 
 
 
+
 })
+
+
+
+
+
+
+
+
+
+})
+
+
+
+
+
+
+

js/index.js

@@ -6,6 +6,8 @@ $(function(){
 $("#go_left").click(function(){
 	if($("#advantage_con_ul").css("left") == "0px"){
 		$("#advantage_con_ul").css({"left":"-1200px"});
+		$("#go_left").css("background","url(./img/index/20180116221147.png)0 0 no-repeat");
+		$("#go_right").css("background","url(./img/index/形状5副本3.png)0 0 no-repeat");
 	}else{
 		return false;
 	}
@@ -13,15 +15,48 @@ $("#go_left").click(function(){
 $("#go_right").click(function(){
 	if($("#advantage_con_ul").css("left") == "-1200px"){
 		$("#advantage_con_ul").css({"left":"0px"});
+		$("#go_left").css("background","url(./img/index/形状5副本.png)0 0 no-repeat");
+		$("#go_right").css("background","url(./img/index/20180116221219.jpg)0 0 no-repeat");
 	}else{
 		return false;
 	}
 })
 
+//优势模块
+var advantageMsg = new Vue({
+	el:"#advantage_con_ul",
+	data:{
+		items:[]
+	}
+})
 
+$.ajax({
+	url:"./json/3.json",
+	type:"get",
+	dataType:"json",
+	success:function(msg){
+		advantageMsg.items = msg;
+		console.log(msg);
+	}
+})
 
 
+//新闻
+var newsMsg = new Vue({
+	el:"#news_con_ul",
+	data:{
+		items:[]
+	}
+})
 
+$.ajax({
+	url:"./json/news.json",
+	type:"get",
+	dataType:"json",
+	success:function(msg){
+		newsMsg.items = msg;
+	}
+})
 
 
 
@@ -34,14 +69,9 @@ $("#go_right").click(function(){
 
 
 
-
-
-
-
-
-
-
-
+window.addEventListener("load",function(){
+	$("#header_nav_list li:nth-child(1)").children("div").addClass("head_nav_subscript_active");
+})
 
 
 

json/1.json

@@ -0,0 +1,35 @@
+{
+	"0":{
+		"title":"首页",
+		"href":"index.html"
+	},
+	"1":{
+		"title":"关于我们",
+		"href":"about.html"
+	},
+	"2":
+		{
+		"title":"添富汇研究",
+		"href":"http://www.baidu.com"
+		}
+		,
+	"3":{
+		"title":"石油学院",
+		"href":"http://www.baidu.com"
+	},
+	"4":{"title":"石油投资",
+		"href":"http://www.baidu.com"
+		},
+	"5":{
+		"title":"我要开户",
+		"href":"http://www.baidu.com"
+		},
+	"6":{
+		"title":"软件下载",
+		"href":"download.html"
+		}
+	
+}
+
+
+

json/2.json

@@ -0,0 +1,42 @@
+{
+	"0":[
+		
+	],
+	"1":[
+		{"title":"公司简介","href":"#"},
+		{"title":"公司文化","href":"#"},
+		{"title":"公司环境","href":"#"},
+		{"title":"大交简介","href":"#"}
+	],
+	"2":[
+		{"title":"金融汇通研究","href":"#"},
+		{"title":"每日评论","href":"#"},
+		{"title":"分析研究","href":"#"},
+		{"title":"市场动态","href":"#"},
+		{"title":"机构观点","href":"#"}
+	],
+	"3":[
+		{"title":"投资入门","href":"#"},
+		{"title":"基本面分析","href":"#"},
+		{"title":"技术面分析","href":"#"},
+		{"title":"投资技巧","href":"#"},
+		{"title":"常见问题","href":"#"}
+	],
+	"4":[
+		{"title":"开户指导","href":"#"},
+		{"title":"投资特点","href":"#"},
+		{"title":"大连油标准合同","href":"#"},
+		{"title":"投资者权益保障","href":"#"},
+		{"title":"实物交割","href":"#"}
+	],
+	"5":[
+		{"title":"在线开户","href":"#"},
+		{"title":"开户流程","href":"#"},
+		{"title":"建行网银激活","href":"#"},
+		{"title":"银行签约","href":"#"}
+	],
+	"6":[
+		{"title":"完整版下载","href":"#"},
+		{"title":"手机版下载","href":"#"}
+	]
+}

json/3.json

@@ -0,0 +1,10 @@
+{
+	"0":{"title":"平台优势","img":"./img/index/图层41.png","msg":"大连再生资源交易所，国内最先进系统环境安全稳定"},
+	"1":{"title":"平台优势","img":"./img/index/图层41.png","msg":"大连再生资源交易所，国内最先进系统环境安全稳定"},
+	"2":{"title":"平台优势","img":"./img/index/图层41.png","msg":"大连再生资源交易所，国内最先进系统环境安全稳定"},
+	"3":{"title":"平台优势","img":"./img/index/图层41.png","msg":"大连再生资源交易所，国内最先进系统环境安全稳定"},
+	"4":{"title":"平台优势","img":"./img/index/图层41.png","msg":"大连再生资源交易所，国内最先进系统环境安全稳定"},
+	"5":{"title":"平台优势","img":"./img/index/图层41.png","msg":"大连再生资源交易所，国内最先进系统环境安全稳定"},
+	"6":{"title":"平台优势","img":"./img/index/图层41.png","msg":"大连再生资源交易所，国内最先进系统环境安全稳定"},
+	"7":{"title":"平台优势","img":"./img/index/图层41.png","msg":"大连再生资源交易所，国内最先进系统环境安全稳定"}
+}

json/footer.json

@@ -0,0 +1,42 @@
+{
+	"title":["关于我们","添富汇研究","石油学院","石油投资","我要开户","软件下载"],
+	"content":{
+		"0":[
+			{"title":"公司简介","href":"#"},
+			{"title":"公司文化","href":"#"},
+			{"title":"公司环境","href":"#"},
+			{"title":"大交简介","href":"#"}
+		],
+		"1":[
+			{"title":"金融汇通研究","href":"#"},
+			{"title":"每日评论","href":"#"},
+			{"title":"分析研究","href":"#"},
+			{"title":"市场动态","href":"#"},
+			{"title":"机构观点","href":"#"}
+		],
+		"2":[
+			{"title":"投资入门","href":"#"},
+			{"title":"基本面分析","href":"#"},
+			{"title":"技术面分析","href":"#"},
+			{"title":"投资技巧","href":"#"},
+			{"title":"常见问题","href":"#"}
+		],
+		"3":[
+			{"title":"开户指导","href":"#"},
+			{"title":"投资特点","href":"#"},
+			{"title":"大连油标准合同","href":"#"},
+			{"title":"投资者权益保障","href":"#"},
+			{"title":"实物交割","href":"#"}
+		],
+		"4":[
+			{"title":"在线开户","href":"#"},
+			{"title":"开户流程","href":"#"},
+			{"title":"建行网银激活","href":"#"},
+			{"title":"银行签约","href":"#"}
+		],
+		"5":[
+			{"title":"完整版下载","href":"#"},
+			{"title":"手机版下载","href":"#"}
+		]
+	}
+}

json/news.json

@@ -0,0 +1,29 @@
+{
+	"0":{
+		"title1":"每日点评",
+		"title2":"Daily Comments",
+		"day":"16",
+		"month":"Mar",
+		"img":"img/index/图层22.png",
+		"msg":"2月12日美元上涨，此前数据显示美国消费者支出看来在1月重拾动能，支持了在其他央行放宽政策之际，美联储将继续升息的可能性。",
+		"link":"#"
+	},
+	"1":{
+		"title1":"企业新闻",
+		"title2":"Corporate News",
+		"day":"16",
+		"month":"Mar",
+		"img":"img/index/图层23.png",
+		"msg":"2月12日美元上涨，此前数据显示美国消费者支出看来在1月重拾动能，支持了在其他央行放宽政策之际，美联储将继续升息的可能性。",
+		"link":"#"
+	},
+	"2":{
+		"title1":"行业新闻",
+		"title2":"Industry News",
+		"day":"16",
+		"month":"Mar",
+		"img":"img/index/图层24.png",
+		"msg":"2月12日美元上涨，此前数据显示美国消费者支出看来在1月重拾动能，支持了在其他央行放宽政策之际，美联储将继续升息的可能性。",
+		"link":"#"
+	}
+}