123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168 |
- <template>
- <div id="app">
- <el-container>
- <el-header>
- <div class="logo">
- <img src="./assets/img/toplogo.png" alt />
- </div>
- <el-menu
- :default-active="defaultActive"
- class="el-menu-demo"
- mode="horizontal"
- @select="handleSelect"
- :router="router"
- >
- <el-menu-item index="/">首页</el-menu-item>
- <el-menu-item index="/news">新闻资讯</el-menu-item>
- <el-menu-item index="/product">产品中心</el-menu-item>
- <el-menu-item index="/case">经典案例</el-menu-item>
- <el-menu-item index="/goin">走进科建</el-menu-item>
- <el-menu-item index="/download">下载APP</el-menu-item>
- </el-menu>
- </el-header>
- <el-main>
- <router-view />
- </el-main>
- <div class="footer" v-show="isShow">
- <div class="footer-content">
- <ul class="content-nav">
- <li>
- <p>走进科建</p>
- <span>发展历程</span>
- <span>企业文化</span>
- <span>资质荣誉</span>
- <span>合作伙伴</span>
- </li>
- <li>
- <p>新闻资讯</p>
- <span>公司新闻</span>
- <span>行业动态</span>
- </li>
- <li>
- <p>产品中心</p>
- <span>介绍视频</span>
- <span>管理模式</span>
- <span>平台目标</span>
- <span>功能模块</span>
- </li>
- <li>
- <p>联系我们</p>
- <span>邮箱:kejianlml@163.com</span>
- <span>电话:021-55802368</span>
- <span>地址:上海市杨浦区翔殷路128号12号楼101</span>
- </li>
- </ul>
- <img src="./assets/img/ercode.png" alt />
- </div>
- <div class="copyright">
- <span>科建版权所有</span>
- </div>
- </div>
- </el-container>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- router: true,
- defaultActive: "/",
- isShow: false
- };
- },
- methods: {
- handleSelect(key) {
- this.isShow = this.defaultActive != key;
- window.console.log(this.isShow);
- }
- }
- };
- </script>
- <style lang="scss">
- * {
- padding: 0;
- margin: 0;
- }
- html,
- body {
- height: 100%;
- }
- #app {
- font-family: "Avenir", Helvetica, Arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- color: #2c3e50;
- }
- .el-header {
- display: flex;
- justify-content: space-between;
- align-content: center;
- width: 1240px;
- margin: 0 auto;
- //background-color: #fff;
- .logo {
- width: 280px;
- padding: 10px;
- img {
- width: 100%;
- line-height: 60px;
- }
- }
- }
- .el-main {
- padding: 0 !important;
- }
- .footer {
- width: 100%;
- height: 216px;
- overflow: hidden;
- background-color: #14679f;
- &-content {
- width: 1240px;
- margin: 0 auto;
- padding-top: 20px;
- display: flex;
- justify-content: space-between;
- .content-nav {
- display: flex;
- justify-content: space-around;
- li {
- display: flex;
- flex-direction: column;
- padding: 0 20px;
- //justify-content: center;
- align-items: flex-start;
- p {
- font-size: 20px;
- color: #d4edff;
- padding: 10px 0;
- }
- span {
- color: #f7f7f7;
- font-weight: 300;
- padding: 5px 0;
- }
- }
- }
- img {
- width: 170px;
- height: 170px;
- padding: 10px;
- }
- }
- .copyright {
- height: 30px;
- background: #125688;
- span {
- color: #fff;
- line-height: 30px;
- }
- }
- }
- </style>
|