静态页面编写

src/assets/common.css

@@ -106,7 +106,7 @@ ul, li {
     width: 200%;
     height: 200%;
     border: 1px solid #c9c9c9;
-    border-radius: .8rem;
+    border-radius: .4rem;
     -webkit-transform: scale(0.5);
     transform: scale(0.5);
     -webkit-transform-origin: 0 0;
@@ -248,19 +248,29 @@ body.modal-open {
 }
 
 .content .mint-searchbar {
-    background-color: #1492ff;
+    background-color: #FFF;
+}
+.content .mint-searchbar .mint-searchbar-core, .content .mint-searchbar .mint-searchbar-inner {
+    background-color: #F4F4F4;
+}
+
+.content .mint-searchbar-inner {
+    border-radius: 20px;
 }
 
-.my-testimonial .mint-cell-label {
+.matters-deal .mint-cell-label {
     text-indent: .6rem;
 }
 
-.my-testimonial .mint-cell {
-    padding: 0 .5rem;
+.matters-deal .mint-cell {
     position: relative;
 }
 
-.my-testimonial .mint-cell:before {
+.content .mint-cell-wrapper {
+    padding:  0;
+}
+
+.matters-deal .mint-cell:before {
     content: " ";
     position: absolute;
     top: 0;
@@ -276,10 +286,10 @@ body.modal-open {
     pointer-events: none;
 }
 
-.my-testimonial .mint-cell-wrapper {
+.matters-deal .mint-cell-wrapper {
     font-size: .75rem;
 }
 
-.content .mint-searchbar-cancel {
-    color: #FFF;
+.nav-border-top.mint-tabbar > .mint-tab-item.is-selected {
+    background-color: #f6f8f7;
 }

src/components/base-form.vue

@@ -0,0 +1,145 @@
+<template>
+    <div class="content">
+        <div class="base-form">
+            <span class="base-form-title">基本信息</span>
+            <div class="input-item border-bottom base-form-hint">带*号为必填项，请根据实际情况进行填写。</div>
+            <div class="input-item clearfix border-bottom">
+                <div class="input-title fl"><span>*</span>事项名称&nbsp;</div>
+                <div class="input-value fl">
+                    <input class="input-core" :class="'exceeding' + certifyName.length" :value="certifyName"
+                           readonly unselectable="on">
+                </div>
+            </div>
+            <div class="input-item clearfix border-bottom">
+                <div class="input-title fl"><span>*</span>申请人&nbsp;</div>
+                <div class="input-value fl">
+                    <input class="input-core" readonly unselectable="on"
+                           :value="userInfo.username | Name-filter">
+                </div>
+            </div>
+            <div class="input-item clearfix border-bottom">
+                <div class="input-title fl"><span>*</span>身份证&nbsp;</div>
+                <div class="input-value fl">
+                    <input class="input-core" readonly unselectable="on"
+                           :value="userInfo.idnum | Idnum-filter">
+                </div>
+            </div>
+            <div class="input-item clearfix border-bottom">
+                <div class="input-title fl"><span>*</span>联系电话&nbsp;</div>
+                <div class="input-value fl">
+                    <input class="input-core" readonly unselectable="on"
+                           :value="userInfo.mobile | Mobile-filter">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    var self;
+    module.exports = {
+        props: ['title'],
+        data: function () {
+            return {
+                msg: '',
+                certifyName: '',
+                userInfo: {
+                    username: '张*三',
+                    idnum: '3***************',
+                    mobile: '1888888888'
+
+                }
+            }
+        },
+        created: function () {
+            self = this;
+            self.certifyName = self.title;
+        },
+
+        mounted: function () {
+        },
+        methods: {}
+    };
+</script>
+
+<style scoped>
+    .content {
+        font-size: .8rem;
+        padding-bottom: .5rem;
+        border-radius: .4rem;
+    }
+
+    .base-form {
+        margin: .3rem;
+    }
+
+    .input-item {
+        width: 100%;
+        line-height: 2.2rem;
+        letter-spacing: .1rem;
+    }
+
+    .input-item input {
+        height: 2.4rem;
+    }
+
+    .input-title {
+        padding-left: .2rem;
+        width: 30%;
+        text-align: left;
+    }
+
+    .input-value {
+        width: 66%;
+    }
+
+    .input-core {
+        width: 100%;
+    }
+
+    .base-form-hint {
+        color: red;
+        font-size: 0.65rem;
+        letter-spacing: 1px;
+    }
+
+    .base-form-title {
+        display: inline-block;
+        width: 3.6rem;
+        height: 1.5rem;
+        line-height: 1.5rem;
+        background: #1391FF;
+        color: #FFF;
+        text-align: center;
+        padding: 0 .3rem;
+    }
+
+    .input-core {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        border-radius: 0;
+        border: 0;
+        -webkit-box-flex: 1;
+        -ms-flex: 1;
+        flex: 1;
+        outline: 0;
+        line-height: 1.6;
+        font-size: inherit;
+    }
+
+    .un-hint span {
+        color: #fe3116;
+    }
+
+    .input-title>span {
+        color: #fe3116;
+    }
+
+    @media screen and (max-width: 344px) {
+        .input-value, .input-title {
+            font-size: .75rem;
+        }
+
+    }
+
+</style>

src/components/nav-bottom.vue

@@ -1,39 +1,14 @@
 <template>
-    <div class="btn3 clearfix">
-        <div class="menu">
-            <div class="bt-name">
-                <router-link :to="{path:'/home',query:{obj: 'nom'}}">证明申请</router-link>
-                <!--<router-link to="/application-certificate">证明申请</router-link>-->
-            </div>
-        </div><!--menu-->
-
-
-        <div class="menu">
-            <div class="bt-name">
-                <router-link to="/my-testimonial">我的证照</router-link>
-            </div>
-        </div><!--menu-->
-
-
-        <div class="menu">
-            <div class="bt-name">证明查验</div>
-            <div class="sanjiao"></div>
-            <div class="new-sub">
-                <ul>
-                    <li>
-                        <router-link to="/follow-up">申请记录查询</router-link>
-                    </li>
-                    <li>
-                        <router-link to="/verify">电子证明验证</router-link>
-                    </li>
-                </ul>
-                <div class="tiggle"></div>
-                <div class="innertiggle"></div>
-            </div>
-        </div><!--menu-->
-
-
-    </div><!--btn3-->
+    <mt-tabbar class="nav-border-top" v-model="selected">
+        <mt-tab-item id="matters-deal">
+            <img slot="icon" src="../assets/100x100.png">
+            办事列表
+        </mt-tab-item>
+        <mt-tab-item id="doThing-query">
+            <img slot="icon" src="../assets/100x100.png">
+            办件查询
+        </mt-tab-item>
+    </mt-tabbar>
 </template>
 
 <script>
@@ -42,12 +17,7 @@
         props: ['active'],
         data: function () {
             return {
-                selected: 'application-certificate',
-                imgUrl: '../static/images/',
-                imgPng: '.png',
-                oneImgUrl: 'application-certificate',
-                twoImgUrl: 'follow-up',
-                threeImgUrl: 'my-testimonial'
+                selected: 'matters-deal'
             }
         },
 
@@ -57,148 +27,21 @@
         },
 
         mounted: function () {
-            //弹出垂直菜单
-            $(".menu").click(function () {
-                if ($(this).hasClass("cura")) {
-                    $(this).children(".new-sub").hide(); //当前菜单下的二级菜单隐藏
-                    $(".menu").removeClass("cura"); //同一级的菜单项
-                } else {
-                    $(".menu").removeClass("cura"); //移除所有的样式
-                    $(this).addClass("cura"); //给当前菜单添加特定样式
-                    $(".menu").children(".new-sub").slideUp("fast"); //隐藏所有的二级菜单
-                    $(this).children(".new-sub").slideDown("fast"); //展示当前的二级菜单
-                }
-            });
         },
 
-        methods: {}
+        methods: {},
+
+        watch: {
+            selected: function () {
+                self.$router.push(self.selected);
+            }
+        }
     };
 </script>
 
 <style scoped>
-    .btn3 {
-        position: fixed;
-        z-index: 3;
-        bottom: 0;
-        border-top: 1px solid #D3D3D3;
-        background: #e6e6e6;
-        width: 100%;
-        text-align: center;
-        box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-    }
-
-    .menu {
-        position: relative;
-        float: left;
-        width: 33.33%;
-        height: 50px;
-        line-height: 50px;
-        background: #fff;
-        border-right: 1px solid #D3D3D3;
-        box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-    }
-
-    .menu:last-child {
-        border-right: none;
-    }
-
-    .new-sub {
-        position: absolute;
-        bottom: 60px;
-        z-index: 10;
-        width: 100%;
-        padding: 0 10px;
-        background: #fff;
-        box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-        border: 1px solid #D3D3D3;
-        border-radius: 5px;
-        display: none;
-    }
-
-    .new-sub li {
-        width: 100%;
-        background: #fff;
-        float: none;
-        box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-        border-top: 1px solid #D3D3D3;
-    }
-
-    .new-sub li:first-child {
-        border-top: 0;
-    }
-
-    .new-sub li a {
-        display: block;
-        height: 50px;
-        line-height: 50px;
-        background: #fff;
-        color: #333;
-        border: none;
-        text-align: center;
-        font-size: 16px;
-    }
-
-    .sanjiao {
-        position: absolute;
-        bottom: 5px;
-        right: 5px;
-        width: 0;
-        height: 0;
-        border: 5px solid transparent;
-        border-right: 5px solid #000;
-        border-bottom: 5px solid #000;
-        opacity: .5;
-    }
-
-    .bt-name {
-        font-size: 16px;
-        color: #000;
-    }
-
-    .bt-name a {
-        display: block;
-        font-size: 16px;
-        color: #000;
-    }
-
-    .new-sub .tiggle {
-        width: 0;
-        height: 0;
-        position: absolute;
-        left: 50%;
-        margin-left: -10px;
-        bottom: -9px;
-        border-top: 10px solid #D3D3D3;
-        border-left: 10px solid transparent;
-        border-right: 10px solid transparent;
-        z-index: 10;
-    }
-
-    .new-sub .innertiggle {
-        width: 0;
-        height: 0;
-        position: absolute;
-        left: 50%;
-        margin-left: -9px;
-        bottom: -8px;
-        border-top: 9px solid white;
-        border-left: 9px solid transparent;
-        border-right: 9px solid transparent;
-        z-index: 11;
-    }
-
-    @media screen and (max-width: 358px) {
-        .menu .new-sub li a {
-            font-size: 14px;
-        }
-    }
-    @media screen and (max-width: 323px) {
-        .menu .new-sub li a {
-            font-size: 12px;
-        }
+    .nav-border-top {
+        border-top: 1px solid #cccccc;
+        box-shadow: 0 1px 8px #cccccc;
     }
 </style>

src/router/index.js

@@ -8,6 +8,18 @@ var router = new VueRouter({
             path: '/',
             component: require('views/login')
             // component: require('views/prepare')
+        },
+        {
+            path: '/matters-deal',
+            component: require('views/matters-deal')
+        },
+        {
+            path: '/doThing-query',
+            component: require('views/doThing-query')
+        },
+        {
+            path: '/exam-extraMarks',
+            component: require('views/exam-extra-marks')
         }
     ]
 });

src/views/doThing-query.vue

@@ -0,0 +1,193 @@
+<template>
+    <div>
+        <div class="content doThing-query">
+            <form action="" target="frameFile">
+                <mt-search v-model="msg" cancel-text="取消" placeholder="请输入要搜索的事项名称关键字" @keyup.enter.native="searchData"
+                           show>
+                    <div class="doThing-query-box">
+                        <div class="doThing-query-item border-whole">
+                            <div class="border-bottom"><div class="doThing-query-title">网络预约出租车驾驶员从业资格认证</div></div>
+                            <div class="doThing-query-content">
+                                <p class="clearfix">
+                                    <div class="doThing-left doThing-hint fl">办事部门：<span style="color: #000">市交通局</span></div>
+                                    <div class="doThing-left doThing-hint fl">承诺期限：<span style="color: #000">7天</span></div>
+                                </p>
+                                <p class="clearfix"><div class="fl doThing-hint doThing-hint-left">联系电话：</div><div class="fl doThing-hint-right">0578-88888888</div></p>
+                                <p class="clearfix"><div class="fl doThing-hint doThing-hint-left">用户类型：</div><div class="fl doThing-hint-right">个人用户</div></p>
+                                <p class="clearfix"><div class="fl doThing-hint doThing-hint-left">联系电话：</div><div class="fl doThing-hint-right">未通过</div></p>
+                                <p class="clearfix"><div class="fl doThing-hint doThing-hint-left">原因：</div><div class="fl doThing-hint-right">证明材料缺失或不正确</div></p>
+                                <p class="doThing-btn">
+                                    <mt-button type="primary" size="small" @click="jumpPage">&nbsp;&nbsp;&nbsp;&nbsp;重新申请&nbsp;&nbsp;&nbsp;&nbsp;</mt-button>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <commonBlankPage></commonBlankPage>
+                    <div class="footer-hint">
+                        <p>本服务由浙江政务服务网、丽水市数据管理中心提供</p>
+                        <p>服务咨询热线: <span class="blur-spot">0578-12345</span></p>
+                    </div>
+                </mt-search>
+            </form>
+            <iframe name='frameFile' style="display: none;"></iframe>
+        </div>
+        <navButton active="doThing-query"></navButton>
+    </div>
+</template>
+
+<script>
+    var self;
+    var api = require('api/admin-api');
+    var utils = require('utils/utils');
+    var navButton = require('components/nav-bottom');
+    var commonBlankPage = require('components/common-blank-page');
+    module.exports = {
+        data: function () {
+            return {
+                msg: '',
+                anyData: true, //有无证明列表
+                title: '目前可申请的电子证明',
+                titleObj: {'nom': '目前可申请的电子证明', 'kin': '目前可申请的亲情电子证明'},
+                obj: '',
+                certifyList: [],
+                hotCertify: [],
+                certifyListCopy: [{title: '123'}, {title: '321'}]
+            }
+        },
+
+        created: function () {
+            self = this;
+            self.obj = self.$route.query.obj;
+            self.title = self.titleObj[self.obj];
+        },
+
+        mounted: function () {
+//            getCategoryList();
+        },
+
+        methods: {
+            searchData: function () {
+                self.certifyListCopy = [];
+                for (var i = 0; i < self.certifyList.length; i++) {
+                    if (self.certifyList[i].name.indexOf(self.msg) !== -1) {
+                        self.certifyListCopy.push(self.certifyList[i]);
+                    }
+                    continue;
+                }
+                if (!self.certifyListCopy.length) {
+                    commonBlankPage.methods.setShowStatus(true);
+                    commonBlankPage.methods.setContentType('NEWS');
+                } else {
+                    commonBlankPage.methods.setShowStatus(false);
+                }
+            },
+            jumpPage: function () {
+                self.$router.push('exam-extraMarks');
+            }
+        },
+        components: {
+            commonBlankPage: commonBlankPage,
+            navButton: navButton
+        }
+    };
+
+    function getCategoryList() {
+        self.$indicator.open('加载中...');
+        footerShow();
+        api.getCategoryList(function (data) {
+            self.$indicator.close();
+            if (data && data.length) {
+                console.log(data)
+                self.certifyList = data;
+                self.certifyListCopy = self.certifyList;
+            } else {
+                self.anyData = false;
+                commonBlankPage.methods.setShowStatus(true);
+                commonBlankPage.methods.setContentType('MSG');
+            }
+        }, function (code, msg) {
+            self.$indicator.close();
+            self.$messagebox.alert(msg);
+        })
+    }
+
+    //解决安卓footer Bug
+    function footerShow() {
+        var windheight = window.innerHeight;
+        var bottomx = document.getElementById('bottomx'); //底部导航
+        window.onresize = (function () {
+            var docheight = window.innerHeight;
+            if (docheight < windheight) {
+                bottomx.style.position = 'fixed';
+            } else {
+                bottomx.style.position = 'static';
+            }
+        })
+    }
+</script>
+
+<style scoped>
+    .content {
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .prove-right-icon img {
+        position: relative;
+        top: 1.7rem;
+    }
+
+    .prove-items p:first-child {
+        margin-top: .3rem;
+    }
+
+    .blur-spot {
+        color: #1492ff
+    }
+
+    .doThing-query-box {
+        padding-top: 1rem;
+    }
+
+    .doThing-query-item {
+        font-size: .65rem;
+        margin: 0 .4rem 1rem;
+    }
+
+    .doThing-query-title {
+        font-size: .75rem;
+        line-height: 2rem;
+        font-weight: 600;
+        background: url('../assets/images/star.png') left center no-repeat;
+        background-size: 1.2rem;
+        padding-left: 1.3rem;
+        margin-left: .2rem;
+    }
+
+    .doThing-query-content {
+        padding: .5rem .4rem;
+    }
+    .doThing-hint {
+        color: #A3A3A3;
+    }
+    .doThing-left {
+        width: 48%;
+    }
+    .doThing-query-content div {
+        height: 1.1rem;
+        line-height: 1.1rem;
+    }
+
+    .doThing-hint-left {
+        width: 3.3rem;
+        text-align: right;
+    }
+    .doThing-hint-right {
+        width: 68%;
+    }
+    .doThing-btn {
+        font-size: .7rem;
+        text-align: center;
+        padding-top: 1.5rem;
+    }
+</style>

src/views/exam-extra-marks.vue

@@ -0,0 +1,150 @@
+<template>
+    <div class="content">
+        <baseForm title="少数民族中考加分"></baseForm>
+        <div class="base-form">
+            <span class="base-form-title">考生信息</span>
+            <div class="input-item border-bottom base-form-hint">带*号为必填项，请根据实际情况进行填写。</div>
+            <div class="input-item clearfix border-bottom">
+                <div class="input-title fl"><span>*</span>学校地区&nbsp;</div>
+                <div class="input-value fl" @click="">
+                    <input class="input-core" placeholder="请选择地区" v-model="region" readonly
+                           unselectable="on"></div>
+            </div>
+            <div class="input-item clearfix border-bottom">
+                <div class="input-title fl"><span>*</span>就读学校&nbsp;</div>
+                <div class="input-value fl" @click="">
+                    <input class="input-core" placeholder="请选择就读中学" v-model="school" readonly
+                           unselectable="on"></div>
+            </div>
+            <div class="input-item clearfix border-bottom">
+                <div class="input-title fl"><span>*</span>准考证号&nbsp;</div>
+                <div class="input-value fl"><input class="input-core" placeholder="请输入考生准考证号"
+                                                   v-model="msg"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    var self;
+    var api = require('api/admin-api');
+    var utils = require('utils/utils');
+    var baseForm = require('components/base-form');
+    module.exports = {
+        data: function () {
+            return {
+                region: '',
+                school: '',
+                msg: '',
+                anyData: true, //有无证明列表
+                title: '目前可申请的电子证明',
+                titleObj: {'nom': '目前可申请的电子证明', 'kin': '目前可申请的亲情电子证明'},
+                obj: '',
+                certifyList: [],
+                hotCertify: [],
+                certifyListCopy: [{title: '123'}, {title: '321'}]
+            }
+        },
+
+        created: function () {
+            self = this;
+//            self.obj = self.$route.query.obj;
+        },
+
+        mounted: function () {
+        },
+
+        methods: {
+            jumpPage: function () {
+                self.$router.push('exam-extraMarks');
+            }
+        },
+        components: {
+            baseForm: baseForm
+        }
+    };
+
+</script>
+
+<style scoped>
+    .content {
+        font-size: .8rem;
+        padding-bottom: .5rem;
+        border-radius: .4rem;
+    }
+
+    .base-form {
+        margin: .3rem;
+    }
+
+    .input-item {
+        width: 100%;
+        line-height: 2.2rem;
+        letter-spacing: .1rem;
+    }
+
+    .input-item input {
+        height: 2.4rem;
+    }
+
+    .input-title {
+        padding-left: .2rem;
+        width: 30%;
+        text-align: left;
+    }
+
+    .input-value {
+        width: 66%;
+    }
+
+    .input-core {
+        width: 100%;
+    }
+
+    .base-form-hint {
+        color: red;
+        font-size: 0.65rem;
+        letter-spacing: 1px;
+    }
+
+    .base-form-title {
+        display: inline-block;
+        width: 3.6rem;
+        height: 1.5rem;
+        line-height: 1.5rem;
+        background: #1391FF;
+        color: #FFF;
+        text-align: center;
+        padding: 0 .3rem;
+    }
+
+    .input-core {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        border-radius: 0;
+        border: 0;
+        -webkit-box-flex: 1;
+        -ms-flex: 1;
+        flex: 1;
+        outline: 0;
+        line-height: 1.6;
+        font-size: inherit;
+    }
+
+    .un-hint span {
+        color: #fe3116;
+    }
+
+    .input-title>span {
+        color: #fe3116;
+    }
+
+    @media screen and (max-width: 344px) {
+        .input-value, .input-title {
+            font-size: .75rem;
+        }
+
+    }
+
+</style>

src/views/login.vue

@@ -36,7 +36,7 @@
                 //登录成功
                 YH.callback.loginAppForJs = function(ticket){
                     console.log(ticket);
-
+                    self.$router.replace('matters-deal');
 //                    api.getValidationTicket(ticket, function (data) {
 //                        if (data) {
 ////                            initUserInfo(data.token);

src/views/matters-deal.vue

@@ -0,0 +1,177 @@
+<template>
+    <div>
+        <div class="content matters-deal">
+            <form action="" target="frameFile">
+                <mt-search v-model="msg" cancel-text="取消" placeholder="请输入搜索的内容" @keyup.enter.native="searchData"
+                           show>
+                    <div class="prove-list-box">
+                        <div class="prove-title">
+                            <span class="prove-title-icon">热点办事</span>
+                        </div>
+                        <div class="prove-list">
+                            <mt-cell :title="item.title"
+                                     v-for="(item,index) in certifyListCopy" :key="index">
+                                <img slot="icon" src="../assets/images/li.png" width="8" height="8">
+                                <div class="gray-text fr" @click="jumpPage">点击办理</div>
+                            </mt-cell>
+                        </div>
+                    </div>
+                    <commonBlankPage></commonBlankPage>
+                    <div class="footer-hint">
+                        <p>本服务由浙江政务服务网、丽水市数据管理中心提供</p>
+                        <p>服务咨询热线: <span class="blur-spot">0578-12345</span></p>
+                    </div>
+                </mt-search>
+            </form>
+            <iframe name='frameFile' style="display: none;"></iframe>
+        </div>
+        <navButton active="matters-deal"></navButton>
+    </div>
+</template>
+
+<script>
+    var self;
+    var api = require('api/admin-api');
+    var utils = require('utils/utils');
+    var navButton = require('components/nav-bottom');
+    var commonBlankPage = require('components/common-blank-page');
+    module.exports = {
+        data: function () {
+            return {
+                msg: '',
+                anyData: true, //有无证明列表
+                title: '目前可申请的电子证明',
+                titleObj: {'nom': '目前可申请的电子证明', 'kin': '目前可申请的亲情电子证明'},
+                obj: '',
+                certifyList: [],
+                hotCertify: [],
+                certifyListCopy: [{title: '123'}, {title: '321'}]
+            }
+        },
+
+        created: function () {
+            self = this;
+            self.obj = self.$route.query.obj;
+            self.title = self.titleObj[self.obj];
+        },
+
+        mounted: function () {
+//            getCategoryList();
+        },
+
+        methods: {
+            searchData: function () {
+                self.certifyListCopy = [];
+                for (var i = 0; i < self.certifyList.length; i++) {
+                    if (self.certifyList[i].name.indexOf(self.msg) !== -1) {
+                        self.certifyListCopy.push(self.certifyList[i]);
+                    }
+                    continue;
+                }
+                if (!self.certifyListCopy.length) {
+                    commonBlankPage.methods.setShowStatus(true);
+                    commonBlankPage.methods.setContentType('NEWS');
+                } else {
+                    commonBlankPage.methods.setShowStatus(false);
+                }
+            },
+            jumpPage: function () {
+                self.$router.push('exam-extraMarks');
+            }
+        },
+        components: {
+            commonBlankPage: commonBlankPage,
+            navButton: navButton
+        }
+    };
+
+    function getCategoryList() {
+        self.$indicator.open('加载中...');
+        footerShow();
+        api.getCategoryList(function (data) {
+            self.$indicator.close();
+            if (data && data.length) {
+                console.log(data)
+                self.certifyList = data;
+                self.certifyListCopy = self.certifyList;
+            } else {
+                self.anyData = false;
+                commonBlankPage.methods.setShowStatus(true);
+                commonBlankPage.methods.setContentType('MSG');
+            }
+        }, function (code, msg) {
+            self.$indicator.close();
+            self.$messagebox.alert(msg);
+        })
+    }
+
+    //解决安卓footer Bug
+    function footerShow() {
+        var windheight = window.innerHeight;
+        var bottomx = document.getElementById('bottomx'); //底部导航
+        window.onresize = (function () {
+            var docheight = window.innerHeight;
+            if (docheight < windheight) {
+                bottomx.style.position = 'fixed';
+            } else {
+                bottomx.style.position = 'static';
+            }
+        })
+    }
+</script>
+
+<style scoped>
+    .content {
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .prove-list {
+        border-bottom: 1rem solid #f6f8f7;
+        padding: 0 5%;
+    }
+
+    .prove-right-icon img {
+        position: relative;
+        top: 1.7rem;
+    }
+    .prove-list-box .prove-list:last-child {
+        padding-bottom: 1rem;
+    }
+
+    .prove-items p:first-child {
+        margin-top: .3rem;
+    }
+
+    .blur-spot {
+        color: #1492ff
+    }
+
+    .gray-text {
+        font-size: .65rem;
+        color: #FFF;
+        display: inline-block;
+        padding: 0 .2rem;
+        height: 1.2rem;
+        line-height: 1.2rem;
+        border-radius: .15rem;
+        background: #52B0FA;
+    }
+
+    .prove-title {
+        text-align: center;
+        height: 2.6rem;
+        line-height: 2.6rem;
+        background: #52B0FA;
+        color: #FFF;
+        font-size: .8rem;
+        letter-spacing: 1px;
+    }
+
+    .prove-title-icon {
+        background: url('../assets/images/fire.png') left center no-repeat;
+        background-size: 22%;
+        padding-left: 1.4rem;
+    }
+
+</style>