 <!DOCTYPE html>
 <html lang="en">

 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
	 <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.8/lib/theme-chalk/index.css">
<!-- Style CSS -->

 	<link href="../assets/css/myGudianxiaoshuoStyle.css" rel="stylesheet">
	 <!-- <link href="assets/css/styleMini.css" rel="stylesheet"> -->

 	<title>古典小说网</title>
 </head>
 <style>
	 body{
		 margin:0;
	 }
	.el-header, .el-footer {
	  background-color: #13303e;
	  color: #333;
	  text-align: center;
	  line-height: 60px;
	}
	.el-footer {
	    color: #fff;
	}

	
	.el-aside {
	  background-color: #D3DCE6;
	  color: #333;
	  text-align: center;
	  line-height: 200px;
	}
	
	.el-main {
		padding-top:60px;
	  background-color: #E9EEF3;
	  color: #333;
	  text-align: center;
	  line-height: 160px;
	}
	
	body > .el-container {
	  margin-bottom: 40px;
	}
	
	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
	  line-height: 260px;
	}
	
	.el-container:nth-child(7) .el-aside {
	  line-height: 320px;
	}
	/* 去除白线 */
	.el-menu.el-menu--horizontal{  
     border: none;
    }
	.el-row{
		margin: 100px 60px;
    }

    li a{
		display: inline;
	}

  </style>
 <body>

    <div id="app">
		<el-container>


		<el-header height='160px'>
			<el-menu :default-active="activeIndex"  mode="horizontal" @select="handleSelect" background-color="#13303e" text-color="#fff"   active-text-color="#ffd04b" >
				<el-menu-item index="http://www.gudianxiaoshuo.com/">首页</el-menu-item>
				<el-submenu index="2">
				  <template slot="title">古典小说</template>

				  <el-menu-item index="http://www.gudianxiaoshuo.com/%E8%97%8F%E4%B9%A6%E5%BA%93/%E5%8F%A4%E5%85%B8%E5%B0%8F%E8%AF%B4/%E4%BC%A0%E4%B8%96%E7%BB%8F%E5%85%B8/%E7%9B%AE%E5%BD%95.html">传世经典</el-menu-item>
				  <el-menu-item index="http://www.gudianxiaoshuo.com/%E8%97%8F%E4%B9%A6%E5%BA%93/%E5%8F%A4%E5%85%B8%E5%B0%8F%E8%AF%B4/%E5%8F%A4%E4%B9%A6%E6%8B%BE%E9%81%97/%E7%9B%AE%E5%BD%95.html">古书拾遗</el-menu-item>
				  <el-menu-item index="http://www.gudianxiaoshuo.com/%E8%97%8F%E4%B9%A6%E5%BA%93/%E5%8F%A4%E5%85%B8%E5%B0%8F%E8%AF%B4/%E5%8F%A4%E5%85%B8%E8%A8%80%E6%83%85/%E7%9B%AE%E5%BD%95.html">古典言情</el-menu-item>
				  <el-menu-item index="http://www.gudianxiaoshuo.com/%E8%97%8F%E4%B9%A6%E5%BA%93/%E5%8F%A4%E5%85%B8%E5%B0%8F%E8%AF%B4/%E5%8F%B2%E4%B9%A6%E6%88%8F%E6%9B%B2/%E7%9B%AE%E5%BD%95.html">史书戏曲</el-menu-item>
					  
		  <!-- <el-submenu index="2-5">
					<template slot="title">史书戏曲</template>
					<el-menu-item index="2-4-1">选项1</el-menu-item>
					<el-menu-item index="2-4-2">选项2</el-menu-item>
					<el-menu-item index="2-4-3">选项3</el-menu-item>
				  </el-submenu>  -->
				</el-submenu>
				<!-- <el-menu-item index="3" disabled>消息中心</el-menu-item> -->
				<!-- <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> -->
			  </el-menu>

			  <el-row style="line-height:20px;font-size:14px;margin-top:10px;margin-bottom:20px;">
				  <el-col :span="3" style="text-align:left; color:rgb(18, 228, 18);">
					<div class="section-title">
						<p class="pInfo">头条号：古典小说</p>
						<p class="pInfo">公众号：古典小说网</p>
					</div>
				  </el-col>	
				  <el-col :span="21" style=" display: flex; font-size:16px; color:rgb(225, 237, 238); justify-content:flex-start;align-items:center;">
					<sapn>千年千本古典小说，本网站整理近六百本古典小说资源，并提供有声聆听方式，欢迎咨询下载 QQ群号：252380640</sapn>
				  </el-col>				  
			 </el-row>

		</el-header>

	</el-container>
	</div>


 </body>

 <script src="vue.min.js" charset="UTF-8"></script>

 <script src="https://unpkg.com/element-ui/lib/index.js"></script>

 <script>
    new Vue({
      el: '#app',
      data: function() {
        return { 
			activeIndex: '1',
			youshengURL: 'assets/img/有声小说.png',
			ketangURL:'assets/img/kuaileketang.png',
			renxingURL:'assets/img/renxingdongtu.png',
			fit:'contain'
		 }
      },
      methods:{
		handleSelect(key, keyPath) {
		location.href=key;
	   }
      },
      mounted(){
      }
      
    })
 
  </script>
 </html>