页面顶部和底部组件代码

component/common/footer.js

@@ -0,0 +1,20 @@
(function(){
    Vue.component('page-footer', {
        template: `<div class="bgc-f5f9f9 pt20" style="height:100px;">
                    <div class="text-center c-909090">
                    <span class="mr20">主办方：上饶市卫生与计划生育委员会</span>
                    <span class="mr20">技术支持：健康之路（中国）信息技术有限公司</span>
                    <span>备案号登记号：赣ICP：98273877号-1</span>
                </div>
                <div class="text-center c-909090 mt20">
                    <span>版权所有：上饶市卫生信息中心      Copyright ©2009-2017 All Rights Reserved </span>
                </div>
            </div>`,
        props: [],
        data: function(){
            return {
                
            }
        }
    })
})()

component/common/header.js

@@ -0,0 +1,82 @@
(function(){
    Vue.component('page-header', {
        template: `<div id="main">
            <div class="c-border-b bgc-f5f5f5 c-666">
                <div class="container">
                    <div class="row ptb10">
                        <div class="col-md-6">公众健康服务平台</div>
                        <div class="col-md-6 c-t-right">
                            <span class="plr10 c-border-r " @click="download">下载APP</span>
                            <span class="plr10 c-border-r " @click="login">{{loginText}}</span>
                            <span class="plr10 " @click="logout">退出</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="ui-grid ui-grid-middle">
                        <div class="ui-col-0">
                            <img src="../../images/LOGO.png">
                        </div>
                        <div class="ui-col-1 pl30">
                            <div class="input-group search-box">
                                <i class="search-icon"></i>
                                <input type="text" class="form-control search-input" v-model="searchText" placeholder="请输入医院、医生姓名">
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-primary bgc-0ad8c8">搜 索</button>
                                </span>
                            </div>
                            <div class=" c-909090 mt5"><span class="mr10">糖尿病</span><span class="mr10">胃炎</span><span class="mr10">协和医院</span><span class="mr10">林舜国</span></div>
                        </div>
                        <div class="ui-col-0 ptb10">
                            <img src="" width="80" height="80">
                            <div class=" c-909090 c-t-center mt5">手机扫一扫</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bgc-0ad8c8 h45">
                <div class="container">
                    <div class="row">
                        <div class="nav">
                            <a v-for="(item, index) in navList" class="nav-item" :class="{'active': selectedNav==index}" @click="chooseNav(index)">{{item.text}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>`,
        props: [],
        data: function(){
            return {
                loginText: '您好，请登录',
                searchText: '',
                navList: [{
                    text: "预约挂号",
                    link: ''
                },{
                    text: "健康档案",
                    link: ''
                },{
                    text: "我的就诊",
                    link: ''
                }],
                selectedNav: 0
            }
        },
        methods: {
            login: function(){
                //跳转到登录页面
            },
            logout: function(){
                
            },
            download: function(){
                //下载APP
            },
            chooseNav: function(val){
                this.selectedNav = val;
            }
        }
    })
})()

css/cross.css

@@ -170,7 +170,18 @@
    background-color: #384d5e;
}
.bgc-0ad8c8{
    background-color: #0AD8C8;
}
.bgc-f2f4f6{
    background-color: #f2f4f6;
}
.bgc-f5f9f9{
    background-color: #F5F9F9;
}
.bgc-f5f5f5{
    background-color: #f5f5f5;
}
/* border
-----------------------------------------------------------------------------*/

css/style.min.css

@@ -708,8 +708,8 @@ body.canvas-menu.mini-navbar nav.navbar-static-side {
}
.btn-primary {
    background-color: #1ab394;
    border-color: #1ab394;
    background-color: #0AD8C8;
    border-color: #0AD8C8;
    color: #FFF
}
@@ -718,8 +718,8 @@ body.canvas-menu.mini-navbar nav.navbar-static-side {
.btn-primary:focus,
.btn-primary:hover,
.open .dropdown-toggle.btn-primary {
    background-color: #18a689;
    border-color: #18a689;
    background-color: #0DBCBA;
    border-color: #0DBCBA;
    color: #FFF
}
@@ -7405,15 +7405,8 @@ select {
    z-index: 198910150;
}
.search-box{
    display: inline-block;
    position: relative;
    height: 32px;
    width: 320px;
    line-height: 30px;
    border: 1px solid #e1e1e1;
    border-radius: 16px;
    text-align: left;
    padding: 0 10px;
    max-width: 560px;
    width: 80%;
}
.search-box input[type=search]{
    border: none;
@@ -7422,8 +7415,27 @@ select {
    /* margin-left: 10px; */
    padding: 0 10px;
}
.search-box input[type=search]:focus{
    border: none;
.search-box input:focus{
    border: 1px solid #0AD8C8;
}
.search-input{
    border: 1px solid #0AD8C8;
    padding-left: 40px;
    height: 45px;
}
.search-box .input-group-btn button{
    height: 45px;
    padding-left: 20px;
    padding-right: 20px;
}
.search-icon{
    position: absolute;
    width: 40px;
    height: 45px;
    background: url(../images/icon_sousuo.png) no-repeat;
    background-size: 20px 20px;
    background-position: center;
    z-index: 100;
}
.btn-blue,
.btn-blue:hover,
@@ -7464,3 +7476,17 @@ select {
    margin: 0;
}
.ui-dialog{border-color: #fff;}
.nav-item{
    display: inline-block;
    height: 50px;
    line-height: 50px;
    width: 185px;
    font-size: 18px;
    text-align: center;
    color: #fff;
}
.nav-item.active,
.nav-item:hover{
    color: #fff;
    background-color: #0DBCBA
}

page/home/index.html

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>健康上饶</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="renderer" content="webkit">
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <meta name="keywords" content="公众健康服务平台">
        <meta name="description" content="公众健康服务平台">
        <link rel="shortcut icon" href="../../favicon.ico">
        <link rel="stylesheet" type="text/css" href="../../css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../plugins/artDialog/6.0.5/api/css/ui-dialog.css"/>
        <link rel="stylesheet" type="text/css" href="../../css/style.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../css/cross.css"/>
    </head>
    <body>
        <div id="main">
            <page-header></page-header>
            <page-footer></page-footer>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/jquery-2.2.4.js"></script>
        <script src="../../js/bootstrap.min.js"></script>
        <script src="../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/util.js" type="text/javascript" charset="utf-8"></script>
        <!--<script src="../../api/http-request.js" type="text/javascript" charset="utf-8"></script>-->
        <script src="../../plugins/artDialog/6.0.5/api/js/dialog-plus.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/common/header.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/common/footer.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/common/event-bus.js" type="text/javascript" charset="utf-8"></script>
        <script src="index.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

page/home/index.js

@@ -0,0 +1,6 @@
new Vue({
    el: "#main",
    data: {
        
    }
})