long/mes_home
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Liyunkun11
2019-03-05 17:47:30 +08:00
commit 370fc5833c
72 changed files with 3347 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/Footer.vue Normal file
View File

@@ -0,0 +1,76 @@
<template>
<div id="footer" class="container-fluid">
<div class="logo">
<img src="@/assets/img/logo_white.png" alt="logo图">
</div>
<p class="title">公司企业网站模板</p>
<p class="address_tel_fax">
<span>地址：公司地址公司地址公司地址公司地址</span>
<span>Tel：888-888-888</span>
<span>Fax：8888-88888888</span>
</p>
<p class="email_wx">
<span>邮箱：liyunkun_11@163.com</span>
<span>公司微信号：ilyk_gg</span>
</p>
<p class="copy">Copyright &copy; 2018 - 2019 公司名称公司名称</p>
</div>
</template>
<script>
export default {
name: "Footer",
data() {
return {};
}
};
</script>
<style scoped>
#footer {
width: 100%;
height: 100%;
color: #fff;
background: #474747;
overflow: hidden;
text-align: center;
}
.logo {
width: 95px;
height: 45px;
margin: 50px auto 20px;
}
.title {
font-size: 25px;
margin-bottom: 20px;
}
.address_tel_fax {
color: #d3d3d3;
font-size: 14px;
margin: 10px 0;
}
.email_wx {
color: #d3d3d3;
font-size: 14px;
}
.copy {
color: #d3d3d3;
font-size: 14px;
margin: 50px 0 10px;
}
@media screen and (max-width: 997px) {
.title {
font-size: 20px;
}
.address_tel_fax {
font-size: 12px;
}
.email_wx {
font-size: 12px;
}
.copy {
font-size: 12px;
margin: 30px 0 10px;
}
}
</style>

45
src/components/GoTop.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<div id="GoTop" @click="GoTop()">
<span class="glyphicon glyphicon-chevron-up"></span>
</div>
</template>
<script>
export default {
name: "GoTop",
data() {
return {
flag: false
};
},
methods: {
GoTop() {
(function smoothscroll() {
var currentScroll =
document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo(0, currentScroll - currentScroll / 10);
}
})();
}
}
};
</script>
<style scoped>
#GoTop {
width: 50px;
height: 50px;
position: fixed;
right: 20px;
bottom: 20px;
z-index: 99999999;
cursor: pointer;
}
#GoTop > span {
display: block;
width: 100%;
height: 100%;
color: rgb(8, 162, 233);
font-size: 30px;
}
</style>

352
src/components/Header.vue Normal file
View File

@@ -0,0 +1,352 @@
<template>
<!-- 头部整体盒子 -->
<div id="header" class="container-fuild">
<!-- 头部顶部 -->
<div class="header-top container-fuild hidden-xs">
<div class="container">
<div class="server pull-left">
<span class="glyphicon glyphicon-earphone"></span>888-888-888
<span class="glyphicon glyphicon-envelope"></span>liyunkun_11@163.com
<span class="glyphicon glyphicon-time"></span>7x24小时为您服务
</div>
<div class="shejiao pull-right">
<span class="glyphicon glyphicon-hand-right"></span>赶快联系我们吧！
<span class="glyphicon glyphicon-hand-left"></span>
</div>
</div>
</div>
<!-- 电脑导航 -->
<div class="header-nav container hidden-xs">
<!-- 导航logo -->
<div class="header-nav-logo">
<img src="@/assets/img/logo_black.png">
</div>
<!-- 导航内容 -->
<ul class="header-nav-wrapper">
<li
v-for="(item,index) in navList"
:key="index"
:class="index==navIndex?'active':''"
@click="navClick(index,item.name)"
>
<router-link :to="item.path">
{{item.name}}
<span v-if="item.children.length>0" class="glyphicon glyphicon-menu-down"></span>
<i class="underline"></i>
</router-link>
<dl v-if="item.children.length>0">
<dt v-for="(i,n) in item.children" :key="n">
<router-link :to="i.path">{{i.name}}</router-link>
</dt>
</dl>
</li>
</ul>
</div>
<!-- 手机导航 -->
<div class="header-nav-m container-fuild visible-xs">
<div class="header-nav-m-logo">
<img class="center-block" src="@/assets/img/logo_black.png" alt="logo">
</div>
<!-- 导航栏 -->
<div class="header-nav-m-menu text-center">
{{menuName}}
<div
class="header-nav-m-menu-wrapper"
data-toggle="collapse"
data-target="#menu"
@click="menuClick"
>
<span :class="menuClass"></span>
</div>
<!-- 导航内容 -->
<ul id="menu" class="header-nav-m-wrapper collapse">
<li
v-for="(item,index) in navList"
:key="index"
:class="index==navIndex?'active':''"
@click="navClick(index,item.name)"
data-toggle="collapse"
data-target="#menu"
>
<router-link :to="item.path">
{{item.name}}
<i class="underline"></i>
</router-link>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Header",
data() {
return {
navIndex: sessionStorage.getItem('navIndex') ? sessionStorage.getItem('navIndex') : 0,
menuName: "首页",
menuClass: "glyphicon glyphicon-menu-down",
navList: [
{
name: "首页",
path: "/",
children: []
},
{
name: "软件产品",
path: "/software",
children: [
{
name: "智能小镇管理系统",
path: "/software/smartTown"
},
{
name: "大数据管理系统",
path: "/software/bigData"
}
]
},
{
name: "相关服务",
path: "/service",
children: []
},
{
name: "新闻动态",
path: "/newsinformation",
children: []
},
{
name: "公司介绍",
path: "/companyintroduction",
children: []
},
{
name: "工作机会",
path: "/jobchance",
children: []
},
{
name: "联系我们",
path: "/contactus",
children: []
}
]
};
},
methods: {
navClick(index, name) {
this.navIndex = index;
sessionStorage.setItem('navIndex',index)
this.menuName = name;
},
menuClick() {
if (this.menuClass == "glyphicon glyphicon-menu-down") {
this.menuClass = "glyphicon glyphicon-menu-up";
} else {
this.menuClass = "glyphicon glyphicon-menu-down";
}
}
}
};
</script>
<style scoped>
/* 顶部 */
#header {
background: #f4f4f4;
transition: all ease 0.6s;
}
#header .header-top {
height: 50px;
color: #fff;
font-size: 12px;
line-height: 50px;
background: #474747;
}
/* 顶部的图标 */
#header .header-top span {
margin: 0 8px;
}
/* 导航栏 */
#header .header-nav {
height: 110px;
}
/* 导航栏logo */
#header .header-nav .header-nav-logo {
width: 100px;
height: 100%;
float: left;
position: relative;
}
/* 导航栏logo图片 */
#header .header-nav .header-nav-logo img {
width: 95px;
height: 45px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
/* 导航栏 导航容器 */
#header .header-nav-fixed .header-nav-wrapper {
line-height: 50px;
}
#header .header-nav .header-nav-wrapper {
line-height: 110px;
float: right;
margin: 0;
max-width: 800px;
}
/* 导航栏 每个导航 */
#header .header-nav .header-nav-wrapper > li {
float: left;
margin: 0 15px;
position: relative;
}
/* 导航栏 每个导航下面的 a 链接 */
#header .header-nav .header-nav-wrapper > li > a {
color: #000;
font-size: 15px;
font-weight: bold;
padding: 15px 0;
position: relative;
}
/* 导航栏 每个导航下面的 a 链接的下划线 */
#header .header-nav .header-nav-wrapper > li > a > i {
display: block;
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
opacity: 0;
transition: all 0.6s ease;
background-color: #1e73be;
}
/* 导航栏 每个导航下面的 a 链接的右侧小三角 */
#header .header-nav .header-nav-wrapper > li > a > span {
font-size: 12px;
transition: transform ease 0.5s;
}
/* 导航栏 每个导航下面的 a 链接 鼠标滑上去的样式 */
#header .header-nav .header-nav-wrapper > li > a:hover {
color: #1e73be;
text-decoration: none;
}
/* 导航栏 每个导航下面的 a 链接 鼠标滑上去下划线的样式 */
#header .header-nav .header-nav-wrapper > li > a:hover .underline {
opacity: 1;
width: 100%;
left: 0;
}
/* 导航栏 每个导航下面的 a 链接 鼠标滑上去三角标的样式 */
#header .header-nav .header-nav-wrapper > li > a:hover span {
transform: rotate(180deg);
}
/* 导航栏 每个导航下面的 a 链接 鼠标点击后的样式 */
#header .header-nav .header-nav-wrapper > li.active > a {
color: #1e73be;
text-decoration: none;
border-bottom: 2px solid #1e73be;
}
/* 导航栏 每个导航下面的二级导航容器 */
#header .header-nav .header-nav-wrapper > li > dl {
display: none;
position: absolute;
width: 168px;
top: 80%;
left: 0;
z-index: 999999;
box-shadow: 0 0 3px 1px #ccc;
background: #fff;
}
/* 导航栏 每个导航下面的二级导航容器的每个导航 */
#header .header-nav .header-nav-wrapper > li > dl > dt {
width: 100%;
padding: 10px;
border-bottom: 1px solid #ccc;
}
/* 导航栏 每个导航下面的二级导航容器的每个导航 当鼠标滑上时的样式*/
#header .header-nav .header-nav-wrapper > li > dl > dt > a:hover {
text-decoration: none;
}
/* 导航栏 滑上一级导航显示二级导航 */
#header .header-nav .header-nav-wrapper > li:hover dl {
display: block;
}
#header .header-nav .header-nav-wrapper > li > dl > dt:hover {
cursor: pointer;
background: #ccc;
}
@media screen and (max-width: 997px) {
#header .header-nav-m {
position: relative;
}
/* 导航栏logo容器 */
#header .header-nav-m .header-nav-m-logo {
height: 80px;
position: relative;
}
/* 导航栏logo图片 */
#header .header-nav-m .header-nav-m-logo img {
width: 95px;
height: 45px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
/* 导航栏 菜单容器 */
#header .header-nav-m .header-nav-m-menu {
color: #fff;
height: 50px;
font-size: 20px;
line-height: 50px;
background: #474747;
position: relative;
}
/* 导航栏 菜单图标 */
#header .header-nav-m .header-nav-m-menu-wrapper {
position: absolute;
top: 50%;
right: 20px;
margin-top: -20px;
width: 50px;
height: 40px;
color: #fff;
z-index: 999999;
font-size: 12px;
}
/* 导航栏 */
#header .header-nav-m .header-nav-m-wrapper {
position: absolute;
top: 50px;
left: 0;
width: 100%;
background: #474747;
z-index: 9999999;
}
/* 导航栏 每个导航 */
#header .header-nav-m .header-nav-m-wrapper > li {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
/* 导航栏 每个导航下面的 a 链接 */
#header .header-nav-m .header-nav-m-wrapper > li > a {
color: #fff;
font-size: 15px;
font-weight: bold;
padding: 15px 0;
position: relative;
}
/* 导航栏 每个导航下面的 a 链接的右侧小三角 */
#header .header-nav .header-nav-wrapper > li > a > span {
font-size: 10px;
}
}
</style>