爱数科技 页面大改版

src/App.vue

@@ -7,14 +7,14 @@
     <div class="ng-scope">
       <div class="footer ng-scope" style="z-index: 10">
         <div class="footer-bd">
-          <p>技术支持：福建省爱数信息技术有限公司</p>
+          <p>技术支持：{{settings.title}}</p>
           <p>
               <span> ©2021 </span>
               <!-- <a href="http://beian.miit.gov.cn/" target="_blank">闽ICP备19021760号-1</a> -->
               <img class="beian" src="./assets/images/beian_hashc9b229c96d.png" alt="">
               <!-- <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35010202001216" target="_blank"> -->
               <a href="http://beian.miit.gov.cn/" target="_blank">
-                网站备案：闽ICP备1921760号-2
+                网站备案：{{settings.beian}}
               </a>
            </p>
         </div>
@@ -25,8 +25,12 @@
 
 <script>
   import { mapActions } from "vuex";
+  import settings from "@/settings.js";
   export default {
     name: 'App',
+    data(){
+      return {settings}
+    },
     methods:{
       ...mapActions("user", ["loadTypeList"]),
     },

src/assets/css/base.css

@@ -109,11 +109,11 @@ button:focus {
 
 .btn-o {
   color: #fff;
-  background-color: #fe8391;
+  background-color: #005656;
 }
 .btn-o:hover {
   color: #fff;
-  background-color: #fe9ca7;
+  background-color: #FFBE00;
 }
 .btn-gr {
   color: #fff;

src/assets/css/content.css

@@ -30,7 +30,7 @@
 }
 .content .photo .pt-line .pt-sola {
   width: 286px;
-  height: 290px;
+  height: 200px;
   margin-right: 19px;
   border-radius: 4px;
   border: 1px solid #e8e8e8;

src/assets/css/course.css

@@ -3,7 +3,7 @@
   }
   .m-course-list li {
     width: 238px;
-    height: 190px;
+    /* height: 190px; */
     border: 1px solid #e8e8e8;
     float: left;
     margin-right: 10px;
@@ -23,13 +23,13 @@
   }
   .m-course-list li .course-img {
     width: 222px;
-    height: 125px;
+    /* height: 125px; */
     overflow: hidden;
     position: relative;
   }
   .m-course-list li .course-img img {
     width: 222px;
-    height: 125px;
+    /* height: 125px; */
   }
   .m-course-list li .course-img .label {
     position: absolute;
@@ -142,7 +142,7 @@
   }
   .m-course-list li .hover-block .mask-bg {
     /* width: 236px; */
-    height: 193px;
+    /* height: 193px; */
     background-color: #000;
     opacity: .5;
     filter: alpha(opacity=50);
@@ -423,7 +423,7 @@
 .classlist li {
     overflow: hidden;
     width: 285px;
-    min-height: 270px !important;
+    min-height: 200px !important;
     margin-right: 20px;
     border: 1px solid #eee;
     background: #fff;

src/components/nav/navbar.vue

@@ -3,7 +3,7 @@
     <div class="m-header ng-scope">
       <div class="p-wrap-full tc" @click="goto('/')">
         <span class="logo " style="color: white;font-size: 56px;">
-          福建省爱数信息技术有限公司  </span>
+          {{settings.title}}  </span>
       </div>
     </div>
 
@@ -11,7 +11,11 @@
 </template>
 
 <script>
+  import settings from "@/settings.js";
   export default {
+    data(){
+      return {settings}
+    },
     methods:{
       goto( path ){
         if( this.$route.path != path){

src/components/upload/imgView.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-button v-if="button" type="primary" @click="visible=true" style="margin-left:50px;width:100px;"> 
+        <el-button v-if="button" type="primary" @click="visible=true" style="margin-left:50px;width:80px;"> 
             {{button}}
         </el-button>
         <el-dialog 

src/components/upload/index.vue

@@ -11,7 +11,7 @@
       name="avatar"
       :on-success="handleImageSuccess"
       :before-upload="beforeImageUpload">
-      <el-button type="primary" style="width: 200px;" class="mt20">
+      <el-button type="text" style="width: 200px;" class="mt20">
         {{placeholder}}
       </el-button>
     </el-upload>

src/containers/center/center.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <div clss="">
-    <navbar :user="userInfo" @openLoginDialog="openLoginDialog"></navbar>
+    <navbar :user="userInfo"></navbar>
     <IHeader :user="userInfo"></IHeader>
     <div class="p-wrap-full m-content clear body-bg">
       <router-view></router-view>

src/containers/center/class/train/index.vue

@@ -12,25 +12,22 @@
         <li v-for="(item,index) in list" :key="item.course_id" class="pt-sola mt20 pb10">
           <div>
             <span v-if="item.isFinish==1" class="p-ico2 ico-passed"></span>
-            <div class="img">
-              <img :src="item.tb">
-
-              <div class="hover-block">
-                <div class="mask-bg tc"></div>
-                <el-button @click="gotoPlay(item.courseId)" class="ui-btn">进入学习</el-button>
-              </div>
-            </div>
 
             <div class="tit"><a>{{item.name}}</a></div>
             <div class="info">
-               <p class="w1"><span class="p-ico c1"></span> {{item.type}}</p>
-               <p class="w2"><span class="p-ico c2"></span>{{item.nd||'2020'}}</p>
+               <p class="w1"><span class="c1"></span> {{item.type}}</p>
+               <p class="w2"><span class="c2">获得</span>{{item.nd||'2020'}}</p>
                <p class="w1">
-                <span class="p-ico c3"></span> 获得<strong style="color: orange;">{{item.getXs/10}}</strong>学时
+                <span class="c3">获得</span> <strong style="color: orange;">{{item.getXs/10}}</strong>学时
                </p>
                <p class="w2" >
-                 <span class="p-ico c3"></span> 总共 <strong style="color: orange;">{{item.totalXs/10}}</strong>学时
+                 <span class="c3">总共</span>  <strong style="color: orange;">{{item.totalXs/10}}</strong>学时
                </p>
+               <p class="w1" >
+               </p>
+            </div>
+            <div class="clear tc mt20">
+              <el-button @click="gotoPlay(item.courseId)" type="primary">进入学习</el-button>
             </div>
           </div>
         </li>

src/containers/center/components/menu/iheader.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="nav">
       <ul>
-
         <li :class="{'navfirst': isActive('/login')}">
           <a href="#/" @click="goto('/login')"> 回到主页</a>
         </li>
@@ -61,6 +60,11 @@
           this.goSubState( item );
         }
       },
+      goto( path ){
+        if( this.$route.path != path){
+          this.$router.push({path})
+        }
+      },
       goSubState(item){
         if(item.path == this.$route.path) return;
         this.$router.push(item.path);
@@ -80,6 +84,6 @@
 
   .nav ul li a{ padding:0 27px; color:#FFF; display:block; height:50px;}
 
-  .nav ul li a:hover{ background:#4679fe; text-decoration:none;}
+  .nav ul li a:hover{ background:greenyellow; text-decoration:none;}
   .navfirst a{ background:#ffa200; display:block;}
 </style>

src/containers/center/exam/index.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="m-right-block fr">
+  <div class="m-right-block">
     <div class="exam-card">
         <el-row :gutter="20">
           <el-col :span="16"  >

src/containers/center/home/index.vue

@@ -5,20 +5,25 @@
         <div class="panel-tit mt30 clear">
           <p class="fl">最近学习课程</p>
         </div>
-        <div class="clear mt10">
-          <div class="m-history-course fl ng-scope" v-for="item in list" :key="item.courseId" style="width:464px; margin-left:8px;cursor:pointer">
-            <a  class="course-img" @click="gotoPlay(item.courseId)">
-              <img :src="item.tb">
-              <span class="p-ico2"></span>
-            </a>
-            <div class="history-course-bd" style="width:276px">
-              <p class="tit ng-binding">{{item.name}}</p>
-              <div class="info">课程进度
-                <span class="num ml10 ng-binding">{{getPercent(item)}}</span>
-                <span class="t-b">%</span>
+        <div class="clear mt20">
+          <div class="m-history-course fl" v-for="item in list"
+            :key="item.courseId" style="width:300px; margin-left:8px;cursor:pointer">
+            <div class="history-course-bd" style="width:260px">
+              <p class="tit ng-binding">
+                {{item.name}}
+              </p>
+              <div class="info">
+                需要学时:
+                <span class="t-b">{{item.getXs/10}}/{{item.totalXs/10}}</span>
               </div>
-              <div class="info">最近一次学习
-                <span>{{item.endDate}}</span>
+
+              <div class="info">
+                证书编号:
+                <span class="t-b">{{item.rzCode}}</span>
+              </div>
+              <div class="info">
+                学习时间:
+                <span>{{item.startDate}} 到 {{item.endDate}}</span>
               </div>
             </div>
           </div>

src/containers/center/market/index.css

@@ -11,4 +11,8 @@
 .notice{
     color: red;
     margin: 0 -8px;
-}
+}
+
+.mt20{
+    margin-top: 20px;
+}

src/containers/center/market/index.vue

@@ -5,56 +5,38 @@
         <p class="fl">推荐课程</p>
       </div>
 
-      <ul class="pt-line mt20">
-        <li :span="6" v-for="item in typeList" style="width: 25%;float: left;" :key="item.id" v-if="item.isOpen">
-          <span :class="{active:item.name==type }" class="nav-btn w220" @click="type=item.name">{{item.name}} </span>
-        </li>
-      </ul>
-
-      <div class="mt10" v-if="type=='施工现场专业人员'">
-        <p class="tc" style="color: red;font-size: 18px;">
-          报名对象为：2020年度及以后由培训单位核发的和2021年度换发的“电子培训合格证”且每年度需参加继续教育人员
-        </p>
-      </div>
+      <el-row class=" mt20">
+        <el-col :span="6" v-for="item in typeList"  :key="item.id" v-if="item.isOpen">
+          <el-button :type="item.name!=type?'primary':'warning'" class="p20 w200"
+            @click="type=item.name">
+            {{item.name}}
+          </el-button>
+        </el-col>
+      </el-row>
 
       <ul class="m-course-list clear mt10 classlist" v-if="total>0">
-        <li v-for="(item,index) in list" :key="item.course_id" class="pt-sola mt20 pb10">
+        <li v-for="(item,index) in list" :key="item.course_id" class="pt-sola mt20">
           <div>
-            <span v-if="item.isFinish==1" class="p-ico2 ico-passed"></span>
-            <div class="img">
-              <img :src="item.tb">
-              <div class="year-label ng-binding">
-                <span v-if="item.is_pay==0 && item.buyImg =='' && item.payNo == ''">
-                  还未购买
-                </span>
-                <span v-else-if="item.is_pay==0" style="background-color: orange;">
-                  等待审核
-                </span>
-                <span v-else-if="item.is_pay==2" style="background-color: #78335F;">申请驳回</span>
-                <span v-else-if="!item.is_pass" style="background-color: blue;padding: 2px;border-radius: 2px;">在学习中</span>
-                <span v-else style="background-color: green;padding: 2px;border-radius: 2px;">已经完成</span>
-              </div>
-
-              <div class="hover-block">
-                <div class="mask-bg"></div>
-                <el-button @click="gotoPlay(item.course_id)" v-if="item.is_pay==1" class="ui-btn">进入学习</el-button>
-
-                <el-button @click="goPay(index)" v-else-if="item.is_pay==2 || !!item.buyImg" class="ui-btn btn-o">补充材料</el-button>
-                <el-button @click="goPay(index)" v-else class="ui-btn btn-o">购买课程</el-button>
-              </div>
-            </div>
-
             <div class="tit"><a>{{item.name}}</a></div>
             <div class="info">
-              <p class="w1"><span class="p-ico c1"></span> {{item.type}}</p>
-              <p class="w2"><span class="p-ico c2"></span>{{item.nd||'2020'}}</p>
+              <p class="w1">{{item.type}}</p>
+              <p class="w2">
+              <span class="c5">年度</span>
+              {{item.nd||'2020'}}</p>
               <p class="w1">
-                <span class="p-ico c5"></span> ￥{{item.fee/100}}元
+                <span class="c5">费用</span> ￥{{item.fee/100}}元
               </p>
               <p class="w2">
-                <span class="p-ico c3"></span> {{item.xs/10}}学时
+                <span class="c3">学时</span> {{item.xs/10}}学时
+              </p>
+              <p class="w1">
               </p>
             </div>
+            <div class="tc pt20 clear">
+              <el-button @click="gotoPlay(item.course_id)" v-if="item.is_pay==1" class="ui-btn">进入学习</el-button>
+              <el-button @click="goPay(index)" v-else-if="item.is_pay==2 || !!item.buyImg" class="ui-btn btn-o">补充材料</el-button>
+              <el-button @click="goPay(index)" v-else class="ui-btn btn-o">购买课程</el-button>
+            </div>
           </div>
         </li>
       </ul>
@@ -489,4 +471,7 @@
   .commitment-content {
     font-size: 16px;
   }
+  .w200{
+    width: 200px;
+  }
 </style>

src/containers/center/myOrder/index.vue

@@ -9,10 +9,9 @@
       <div  class="ng-scope">
 
         <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>
-
-          <el-table-column label="交易订单" >
-            <template slot-scope="{row, $index}">
-              <span>{{row.id}}</span>
+          <el-table-column label="培训年度" width="90" >
+            <template slot-scope="{row, $index}" >
+              <span>{{row.nd}}</span>
             </template>
           </el-table-column>
           <el-table-column label="培训内容" >
@@ -23,7 +22,7 @@
 
           <el-table-column label="证书类型" >
             <template slot-scope="{row, $index}">
-              <span>{{row.type}}-{{row.nd}}</span>
+              <span>{{row.type}}</span>
             </template>
           </el-table-column>
 
@@ -41,9 +40,9 @@
 
           <el-table-column label="订单状态" min-width="120">
             <template slot-scope="{row}">
-              <span v-if="row.isPay==1" style="color: green;">支付完成</span>
+              <span v-if="row.isPay==1" >支付完成</span>
               <span v-if="row.isPay==0" >待审核</span>
-              <span v-if="row.isPay==2" style="color: red;" @click="rebuyInfo(row)">{{row.marks||'拒绝'}}
+              <span v-if="row.isPay==2"  @click="rebuyInfo(row)">{{row.marks||'拒绝'}}
                 <el-button  type="text">修改</el-button>
               </span>
             </template>

src/containers/center/play/index.vue

@@ -1,54 +1,27 @@
 <template>
-  <div class="m-right-block fr mh576">
+  <div class="m-right-block mh576">
 
     <el-row class="p20">
-      <el-col :lg="6" :md="6" :span="6">
-        <el-progress
-          class="mprocess"
-          type="circle"
-          :width="150"
-          :format="formatFinish"
-          :stroke-width="18"
-          :percentage="info.percent"
-          >
-        </el-progress>
-
-      </el-col>
-
-      <el-col :lg="6"  :md="6" :span="6">
-        <el-progress v-if="tpl.examGroupId>0"
-           class="mprocess"
-           type="circle"
-           :width="150"
-           :format="formatExam"
-           :stroke-width="18"
-           :percentage="info.score"
-           >
-        </el-progress>
-
-        <el-progress v-else
-           class="mprocess"
-           type="circle"
-           :width="150"
-           :format="formatString('--')"
-           :stroke-width="18"
-           :percentage="0"
-           >
-        </el-progress>
-      </el-col>
-
-      <el-col :lg="6" :md="6" :span="6">
-        <img src="../../../assets/wxapp.jpg"  width="150px"  />
+      <el-col :span="8">
+        <div>
+          <p style="font-size: 24px;"> 完成情况 </p>
+          <p class="mt10" >获得{{info.gxs}}学时</p>
+          <p class="mt10" >总共{{info.axs}}学时</p>
+        </div>
       </el-col>
-
-      <el-col :lg="6" :md="6" :span="6">
+      <el-col  :span="8">
         <div>
-          <p style="font-size: 24px;"> 说明 </p>
+          <p style="font-size: 24px;"> 课程说明 </p>
           <p class="mt10" >岗位名称：{{tpl.name}} </p>
-          <p class="mt10" v-if="tpl.examGroupId>0" >考试不限次数，获得60分即合格</p>
+          <p class="mt10">考试不限次数，获得60分即合格</p>
 
-          <p class="mt10" v-if="tpl.examGroupId==0" >学完所有课程，即可打印学时证明</p>
+        </div>
+      </el-col>
 
+      <el-col :span="8">
+        <div>
+          <p style="font-size: 24px;"> 学习证明 </p>
+          <p class="mt10">学完所有课程，即可打印学时证明</p>
           <div>
               <el-button type="primary" class="mt10" style="font-size: 14px;" @click="startExam" v-if="tpl.examGroupId>0">
                 参加考试
@@ -57,7 +30,7 @@
                 学时证明
               </el-button>
           </div>
-         </div>
+        </div>
       </el-col>
 
     </el-row>
@@ -122,35 +95,39 @@
         <div v-if="show ==3" class="lwh-ul-form mt20">
           <exam-list :courseId="courseId"> </exam-list>
         </div>
-      </div>
-     </div>
-    <el-dialog
-     class="fc tc media-dialog"
-     :visible.sync="mediaDialog"
-     append-to-body
-     top="50px"
-     :title="media.name"
-     :close-on-click-modal="false"
-     width="640px"
-     >
 
-        <Media
-          :options="options"
-          :dialog="mediaDialog"
-          :media="media"
-          :duration="info.duration"
-          @close="mediaDialog=false"
-          @update="update">
-        </Media>
-        <span slot="footer" class="dialog-footer mt5">
-          <el-button type="warning" @click="mediaDialog=false">退出播放</el-button>
-          <el-select placeholder="流畅" v-model="mediaType" style="width: 80px;">
-            <el-option label="流畅" value="ld"></el-option>
-            <el-option label="标清" value="hls"></el-option>
-          </el-select>
-        </span>
+        <div v-if="show ==4" class="lwh-ul-form mt20">
+          <Media
+            :options="options"
+            :dialog="mediaDialog"
+            :media="media"
+            :duration="info.duration"
+            @close="mediaDialog=false"
+            @update="update">
+          </Media>
+          <span slot="footer" class="dialog-footer mt5">
+            <span style="display: flex;">
+              <el-progress
+                type="line"
+                style="width: 120px;margin-top: 10px;"
+                :stroke-width="26"
+                :text-inside="true"
+                :show-text="false"
+                :percentage="media.percent"
+                :class="media.percent|showProgressColor">
+              </el-progress>
+              <span style="margin-left: 10px;margin-top: 10px;"> {{media.percent}}% </span>
 
-    </el-dialog>
+              <el-select placeholder="流畅" v-model="mediaType" style="width: 80px;margin-left: 20px;">
+                <el-option label="流畅" value="ld"></el-option>
+                <el-option label="标清" value="hls"></el-option>
+              </el-select>
+            </span>
+
+          </span>
+        </div>
+      </div>
+     </div>
 
     <el-dialog title="输入认证" center :visible.sync="editRzcode"  >
       <el-form  label-width="120px" ref="elAdd">
@@ -364,6 +341,7 @@
         httpServer('course.GetMedia', {id:item.id}).then( ({data, code}) => {
           this.mediaUrl = data
           this.mediaType = 'hls';
+          this.show = 4
           this.options.sources = [{src:this.mediaUrl,type: "application/x-mpegURL"}];
           this.options.playtimes = item.position;
           this.options.autoplay = item.position>0;
@@ -392,6 +370,8 @@
    .mprocess{
      margin: 0 auto;
      width: 150px !important;
+     font-size: 20px;
+     color: #196FAD;
    }
    .el-progress{
      width: 100%;

src/containers/center/setting/index.vue

@@ -1,228 +1,141 @@
 <template>
   <div class="m-right-block">
     <div class="right-block-bd">
-      <div class="m-account">
-        <div class="account-tit" style="height:30px">
-          <a :class="{'current':show===1}" style="text-decoration: none;padding-bottom: 5px" @click="show=1" class="">基础资料</a>
-          <a :class="{'current':show===2}" style="text-decoration: none;padding-bottom: 5px" @click="show=2" class="">实名认证</a>
-          <a :class="{'current':show===3}" style="text-decoration: none;padding-bottom: 5px" @click="show=3" class="">额外信息</a>
-          <a :class="{'current':show===4}" style="text-decoration: none;padding-bottom: 5px" @click="show=4" class="">密码修改</a>
-          <a :class="{'current':show===5}" style="text-decoration: none;padding-bottom: 5px" @click="show=5" class="">手机修改</a>
-        </div>
-
-        <div v-if="show===1" class="lwh-ul-form">
-          <form name="user">
-            <div class="m-img tc"></div>
-
-            <el-row :gutter="40" class="mt20">
-              <el-col :span="6" class="col-normal tc">
-                <img :src="userInfo.headImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.headImg)">
-                <do-upload @onFinish="setHeadImg" placeholder="上传头像"> </do-upload>
-              </el-col>
-
-              <el-col :span="6" class="col-normal tc">
-                <img :src="userInfo.graduateImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.graduateImg)">
-                <do-upload @onFinish="setGraduateImg" placeholder="上传毕业照"> </do-upload>
-              </el-col>
-            </el-row>
-
-            <ul class="ul-form">
-              <li class="txt-r">
-                <span class="l-t"></span>注：<i></i>只有头像、性别、毕业照可以修改
-              </li>
-
-              <li>
-                <span class="l-t">姓名：</span>
-                <input type="text" v-model="userInfo.nickname" class="ipt ng-pristine ng-valid ng-valid-required"
-                  required="" placeholder="请输入用户名" disabled="disabled">
-              </li>
-              <li class="ng-binding">
-                <span class="l-t">证件号：</span>{{userInfo.cardId||'未知'}}</li>
-              <li>
-                <span class="l-t"><i></i>性别：</span>
-
-                <span class="sex">
-                  <a href="javascript:void(0)" @click="userInfo.gender='男'" :class="{'selected':userInfo.gender=='男'}">
-                    <span class="p-ico2 ico-man"></span>男
-                  </a>
-                  <a href="javascript:void(0)" @click="userInfo.gender='女'" :class="{'selected':userInfo.gender=='女'}">
-                    <span  class="p-ico2 ico-woman"></span>女
-                  </a>
-                </span>
-              </li>
-              <li>
-                <span class="l-t"><i></i>手机号码：</span>
-                <input type="text" v-model="userInfo.phone"  class="ipt" disabled placeholder="请输入手机号码">
-
-                <span class="tips ng-scope" v-if="!isPhone()">
-                  <span class="p-ico2"></span>手机格式不对
-                </span>
-              </li>
-              <li class="mt20">
-                <span class="l-t"></span>
-                <el-button type="primary" class="confirm" @click="doSaveBaseInfo()">保 存</el-button>
-              </li>
-            </ul>
-
-          </form>
-        </div>
-
-
-        <div v-if="show===2" class="lwh-ul-form ng-scope">
-          <form name="user" class="ng-pristine ng-valid">
-            <div class="m-img tc"></div>
-
-            <el-row :gutter="40" class="mt20">
-              <el-col :span="6" class="col-normal tc">
-                 <img :src="userInfo.cardImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.cardImg)">
-                <do-upload @onFinish="setCardImg" placeholder="身份证正面"> </do-upload>
-              </el-col>
-
-              <el-col :span="6" class="col-normal tc">
-                <img :src="userInfo.cardBackImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.cardBackImg)">
-                <do-upload @onFinish="setCardBackImg" placeholder="身份证背面"> </do-upload>
-              </el-col>
-            </el-row>
-
-            <ul class="ul-form mt50 ng-scope">
-              <li>
-                <span class="l-t">身份证：</span>
-                 <input v-model="userInfo.cardId" class="ipt1" disabled></input>
-              </li>
-              <li>
-                <span class="l-t">姓名：</span>
-                <input v-model="userInfo.nickname" class="ipt1" disabled></input>
-              </li>
-              <li>
-                <span class="l-t">手机号：</span>
-                <input v-model="userInfo.phone" class="ipt1" disabled></input>
-              </li>
-
-              <li class="mt30">
-                <span class="l-t"></span>
-                <el-button type="primary" class="confirm" @click="identify()" v-if="!userInfo.identify">实名认证</el-button>
-                <el-button type="text" v-else >已经完成实名认证</el-button>
-              </li>
-            </ul>
-          </form>
-        </div>
-
-
-        <div v-if="show===3" >
-          <el-form ref="elForm" :inline="false"  class="mt50">
-            <el-form-item label="详细地址" label-width='150px' class="mt30" prop="address" >
-               <el-input placeholder="详细地址" v-model="userInfo.address " class="pass-input">
-               </el-input>
-            </el-form-item>
-
-            <el-form-item label="邮政编码" label-width='150px' class="mt30" prop="postalCode" >
-               <el-input placeholder="邮政编码" v-model="userInfo.postalCode " class="pass-input">
-               </el-input>
-            </el-form-item>
-
-
-            <el-form-item label="工作年限" label-width='150px' class="mt30" prop="years" >
-               <el-input placeholder="工作年限" v-model="userInfo.years " class="pass-input">
-               </el-input>
+      <el-row class="mt50">
+        <el-col :span="16">
+          <el-form ref="elForm" :inline="false">
+            <el-form-item label="详细地址" label-width='150px' class="mt30" prop="address">
+              <el-input placeholder="详细地址" v-model="userInfo.address " class="pass-input">
+              </el-input>
             </el-form-item>
 
-            <el-form-item label="工作单位" label-width='150px' class="mt30" prop="company" >
-               <el-input placeholder="工作单位" v-model="userInfo.company " class="pass-input">
-               </el-input>
-            </el-form-item>
-
-            <el-form-item label="最高学历" label-width='150px' class="mt30" prop="oldPass" >
-               <el-input placeholder="最高学历" v-model="userInfo.education " class="pass-input">
-               </el-input>
-            </el-form-item>
-
-            <el-form-item   label="" label-width='150px' class="mt30" prop="rePass">
-               <el-button type="primary"  class="confirm" @click="saveMoreInfo()">
-                 确认修改
-                </el-button>
-            </el-form-item>
-          </el-form>
-
-        </div>
-
-
-        <div v-if="show===4" class="ng-scope">
-          <el-form ref="elForm" :inline="false" :model="passForm" :rules="passRules" class="mt50">
-            <el-form-item label="输入旧密码" label-width='150px' class="mt30" prop="oldPass" >
-               <el-input placeholder="输入旧密码" v-model="passForm.oldPass " class="pass-input" type="password"
-               show-password auto-complete="new-password">
-
-               </el-input>
+            <el-form-item label="邮政编码" label-width='150px' class="mt30" prop="postalCode">
+              <el-input placeholder="邮政编码" v-model="userInfo.postalCode " class="pass-input">
+              </el-input>
             </el-form-item>
 
-            <el-form-item label="输入新密码" label-width='150px' class="mt30" prop="newPass" >
-               <el-input placeholder="输入新密码" v-model="passForm.newPass" class="pass-input" type="password"
-               show-password auto-complete="new-password">
-               </el-input>
-            </el-form-item>
 
-            <el-form-item   label="确认新密码" label-width='150px' class="mt30" prop="rePass">
-               <el-input placeholder="确认新密码" v-model="passForm.rePass" class="pass-input" type="password"
-               show-password auto-complete="new-password">
-               </el-input>
+            <el-form-item label="工作年限" label-width='150px' class="mt30" prop="years">
+              <el-input placeholder="工作年限" v-model="userInfo.years " class="pass-input">
+              </el-input>
             </el-form-item>
 
-            <el-form-item   label="" label-width='150px' class="mt30" prop="rePass">
-               <el-button type="primary"  class="confirm" @click="doSavePassword()">
-                 确认修改
-                </el-button>
+            <el-form-item label="工作单位" label-width='150px' class="mt30" prop="company">
+              <el-input placeholder="工作单位" v-model="userInfo.company " class="pass-input">
+              </el-input>
             </el-form-item>
 
-          </el-form>
-        </div>
-
-        <div v-if="show===5" class="ng-scope">
-          <el-form ref="elFormPhone" :inline="false" :model="phoneForm" :rules="phoneRules" class="mt50">
-            <el-form-item label="输入新手机" label-width='150px' class="mt30" prop="phone" >
-               <el-input placeholder="输入新手机" v-model="phoneForm.phone " style="width: 300px;" :maxlength="11" show-word-limit>
-               </el-input>
+            <el-form-item label="最高学历" label-width='150px' class="mt30" prop="oldPass">
+              <el-input placeholder="最高学历" v-model="userInfo.education " class="pass-input">
+              </el-input>
             </el-form-item>
 
-            <el-form-item label="短信检验码" label-width='150px' class="mt30" prop="code" >
-               <el-input placeholder="输入短信检验码" v-model="phoneForm.code" style="width: 180px;" :maxlength="6" show-word-limit>
-               </el-input>
-               <el-button style="width: 120px;" type="info" v-if="phoneForm.phone.length!=11" disabled>获取检验码</el-button>
-               <el-button style="width: 120px;" type="primary" v-else-if="!count" @click="getCode()">获取检验码</el-button>
-               <el-button style="width: 120px;" type="info" disabled v-else>剩余时间{{count}} s</el-button>
-            </el-form-item>
-            <el-form-item label="" label-width='150px' class="mt30" prop="code" >
-              <span style="color: red;">注意：手机必须本人实名认证手机</span>
+            <el-form-item label="" label-width='150px' class="mt30" prop="rePass">
+              <el-button type="primary" class="confirm" @click="saveMoreInfo()">
+                确认修改
+              </el-button>
             </el-form-item>
-            <el-form-item   label="" label-width='150px' class="mt30" prop="rePass">
-               <el-button type="primary"  class="confirm" @click="doSavePhone()">
-                 确认修改
-                </el-button>
-            </el-form-item>
-
           </el-form>
-        </div>
+        </el-col>
+
+        <el-col :span="8">
+          <el-button type="primary" @click="passwdDialog=true">修改密码</el-button>
+          <el-button type="primary" @click="phoneDialog=true">修改手机</el-button>
+        </el-col>
+      </el-row>
+
+      <el-dialog :visible.sync="passwdDialog" title="修改密码" center :close-on-click-modal="false"
+        :modal-append-to-body="false" :append-to-body="true" :show-close="false">
+        <el-form ref="passForm" :inline="false" :model="passForm" :rules="passRules" class="mt50">
+          <el-form-item label="输入旧密码" label-width='150px' class="mt30" prop="oldPass">
+            <el-input placeholder="输入旧密码" v-model="passForm.oldPass " class="pass-input" type="password" show-password
+              auto-complete="new-password">
+
+            </el-input>
+          </el-form-item>
+
+          <el-form-item label="输入新密码" label-width='150px' class="mt30" prop="newPass">
+            <el-input placeholder="输入新密码" v-model="passForm.newPass" class="pass-input" type="password" show-password
+              auto-complete="new-password">
+            </el-input>
+          </el-form-item>
+
+          <el-form-item label="确认新密码" label-width='150px' class="mt30" prop="rePass">
+            <el-input placeholder="确认新密码" v-model="passForm.rePass" class="pass-input" type="password" show-password
+              auto-complete="new-password">
+            </el-input>
+          </el-form-item>
+
+          <el-form-item label="" label-width='150px' class="mt30" prop="rePass">
+            <el-button type="primary" @click="passwdDialog=false">
+              取消修改
+            </el-button>
+            <el-button type="warning" @click="doSavePassword()">
+              确认修改
+            </el-button>
+          </el-form-item>
+
+        </el-form>
+      </el-dialog>
+
+
+      <el-dialog :visible.sync="phoneDialog" title="修改手机" center :close-on-click-modal="false"
+        :modal-append-to-body="false" :append-to-body="true" :show-close="false">
+
+        <el-form ref="phoneForm" :inline="false" :model="phoneForm" :rules="phoneRules" class="mt50">
+          <el-form-item label="输入新手机" label-width='150px' class="mt30" prop="phone">
+            <el-input placeholder="输入新手机" v-model="phoneForm.phone " style="width: 300px;" :maxlength="11"
+              show-word-limit>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item label="短信检验码" label-width='150px' class="mt30" prop="code">
+            <el-input placeholder="输入短信检验码" v-model="phoneForm.code" style="width: 180px;" :maxlength="6"
+              show-word-limit>
+            </el-input>
+            <el-button style="width: 120px;" type="info" v-if="phoneForm.phone.length!=11" disabled>获取检验码</el-button>
+            <el-button style="width: 120px;" type="primary" v-else-if="!count" @click="getCode()">获取检验码</el-button>
+            <el-button style="width: 120px;" type="info" disabled v-else>剩余时间{{count}} s</el-button>
+          </el-form-item>
+
+          <el-form-item label="" label-width='150px' class="mt30" prop="code">
+            <span style="color: red;">注意：手机必须本人实名认证手机</span>
+          </el-form-item>
+          <el-form-item label="" label-width='150px' class="mt30" prop="rePass">
+            <el-button type="primary" @click="phoneDialog=false">
+              取消修改
+            </el-button>
+
+            <el-button type="warning"  @click="doSavePhone()">
+              确认修改
+            </el-button>
+          </el-form-item>
+
+        </el-form>
+      </el-dialog>
 
 
-      </div>
     </div>
 
-    <el-dialog
-        append-to-body
-        close-on-click-modal
-        :visible.sync="visible"
-        :width="width">
-        <img :src="imgUrl" @load="onLoad" alt="" />
+    <el-dialog append-to-body close-on-click-modal :visible.sync="visible" :width="width">
+      <img :src="imgUrl" @load="onLoad" alt="" />
     </el-dialog>
   </div>
+  </div>
 </template>
 
 <script>
-  import { httpServer } from "@/components/httpServer/httpServer.js";
+  import {
+    httpServer
+  } from "@/components/httpServer/httpServer.js";
   import UploadImage from "@/components/upload/index.vue";
   import ImgView from '@/components/upload/imgView.vue';
   import DoUpload from '@/components/upload/index.vue'
   import rules from "@/utils/rules.js";
-  import { mapGetters,mapActions } from "vuex";
+  import {
+    mapGetters,
+    mapActions
+  } from "vuex";
   export default {
     data() {
       var validatePass2 = (rule, value, callback) => {
@@ -241,39 +154,47 @@
         visible: false,
         timer: false,
         count: 0,
-        imgUrl:'',
-        passForm:{
-          oldPass:'',
-          newPass:'',
-          rePass:'',
+        imgUrl: '',
+        passForm: {
+          oldPass: '',
+          newPass: '',
+          rePass: '',
         },
-        passRules:{
+        passwdDialog: false,
+        phoneDialog: false,
+        passRules: {
           oldPass: rules.defaultFun("请输入密码"),
           newPass: rules.passwordItem,
-          rePass: [
-            { required: true, validator: validatePass2, trigger: "blur" },
-          ],
+          rePass: [{
+            required: true,
+            validator: validatePass2,
+            trigger: "blur"
+          }, ],
         },
-        phoneForm:{
-          phone:'',
-          code:''
+        phoneForm: {
+          phone: '',
+          code: ''
         },
-        phoneRules:{
+        phoneRules: {
           phone: rules.defaultFun("请输入新手机"),
           code: rules.defaultFun("请输入短信校验码")
         },
-        errorImg: 'this.src="' + require('../../../assets/images/default-photo_hash88f70f5253.jpg') + '"'
+        errorImg: 'this.src="' + require('../../../assets/images/no-data_hash5abcd2ef62.png') + '"'
       }
     },
     computed: {
-    	...mapGetters("user", ["userInfo"])
+      ...mapGetters("user", ["userInfo"])
+    },
+    components: {
+      DoUpload,
+      UploadImage,
+      ImgView
     },
-    components:{DoUpload,UploadImage,ImgView},
     methods: {
-       ...mapActions("user", ["saveBaseInfo"]),
-      isPhone( ){
+      ...mapActions("user", ["saveBaseInfo"]),
+      isPhone() {
         let phone = this.userInfo.phone;
-        return !phone||/^1[0-9]{10}$/.test(phone)
+        return !phone || /^1[0-9]{10}$/.test(phone)
       },
       checkPhone() {
         let phone = this.phoneForm.phone;
@@ -283,17 +204,19 @@
         }
         return true
       },
-      showImg( url ){
+      showImg(url) {
         this.imgUrl = url;
         this.visible = true;
       },
-      setHeadImg( imgUrl ){
-        console.log( 'setHeadImg', imgUrl)
+      setHeadImg(imgUrl) {
+        console.log('setHeadImg', imgUrl)
         this.userInfo.headImg = imgUrl;
       },
-      setCardImg( url ){
-        httpServer("User.addCardImg", {url}).then( res=>{
-          if( res.code == 200){
+      setCardImg(url) {
+        httpServer("User.addCardImg", {
+          url
+        }).then(res => {
+          if (res.code == 200) {
             this.userInfo.cardImg = res.url;
             this.userInfo.nickname = res.nickanme
             this.userInfo.address = res.address;
@@ -301,53 +224,61 @@
           }
         })
       },
-      setCardBackImg( url  ){
-        httpServer("User.addCardBackImg", {url}).then( res=>{
-          if( res.code == 200){
+      setCardBackImg(url) {
+        httpServer("User.addCardBackImg", {
+          url
+        }).then(res => {
+          if (res.code == 200) {
             this.userInfo.cardBackImg = url;
             this.saveBaseInfo(this.userInfo)
-           }
+          }
         })
       },
-      setGraduateImg( url  ){
-        httpServer("User.addGraduateImg", {url}).then( res=>{
-          if( res.code == 200){
+      setGraduateImg(url) {
+        httpServer("User.addGraduateImg", {
+          url
+        }).then(res => {
+          if (res.code == 200) {
             this.userInfo.graduateImg = url;
             this.saveBaseInfo(this.userInfo);
-           }
+          }
         })
       },
-      identify(){
-        httpServer("User.identify", {}).then( res=>{
-          if( res.code == 200){
+      identify() {
+        httpServer("User.identify", {}).then(res => {
+          if (res.code == 200) {
             this.userInfo.identify = 1;
             this.saveBaseInfo(this.userInfo)
-            this.$message.success( "实名认证成功")
-           }
+            this.$message.success("实名认证成功")
+          }
         })
       },
-      doSaveBaseInfo(){
+      doSaveBaseInfo() {
         let param = {
-           headImg:this.userInfo.headImg,
-           gender:this.userInfo.gender,
-         }
-        httpServer("User.saveBaseInfo", param).then( res=>{
-          if( res.code == 200){
+          headImg: this.userInfo.headImg,
+          gender: this.userInfo.gender,
+        }
+        httpServer("User.saveBaseInfo", param).then(res => {
+          if (res.code == 200) {
             this.$message.success("保存成功")
           }
         })
       },
-      doSavePhone(){
-        let {phone, code}  = this.phoneForm;
-        this.$refs["elFormPhone"].validate((valid) => {
+      doSavePhone() {
+        let {
+          phone,
+          code
+        } = this.phoneForm;
+        this.$refs["phoneForm"].validate((valid) => {
           if (!valid) return;
           let param = {
-             phone: phone,
-             code: code
-           }
-          httpServer("User.ChangePhone", param).then( res=>{
-            if( res.code == 200){
+            phone: phone,
+            code: code
+          }
+          httpServer("User.ChangePhone", param).then(res => {
+            if (res.code == 200) {
               this.userInfo.phone = phone;
+              this.phoneDialog = false
               this.$message.success("修改手机成功");
               this.saveBaseInfo(this.userInfo);
             }
@@ -359,7 +290,10 @@
         let phone = this.phoneForm.phone
         this.startTimer()
         let type = "changePhone"
-        httpServer("Auth.getCode", { phone, type}).then(res => {
+        httpServer("Auth.getCode", {
+          phone,
+          type
+        }).then(res => {
           if (res.code == 200) {
             this.$message.successMsg("发送成功", 1)
             this.startTimer()
@@ -380,19 +314,30 @@
           }
         }, 1000)
       },
-      doSavePassword(){
-        let {oldPass, newPass}  = this.passForm;
-        console.log( {oldPass, newPass})
-        this.$refs["elForm"].validate((valid) => {
+      doSavePassword() {
+        let {
+          oldPass,
+          newPass
+        } = this.passForm;
+        console.log({
+          oldPass,
+          newPass
+        })
+        this.$refs["passForm"].validate((valid) => {
           console.log(" valid")
           if (!valid) return;
           let param = {
-             oldPass:this.$md5(oldPass),
-             newPass:this.$md5(newPass)
-           }
-          httpServer("User.ResetPass", param).then( res=>{
-            if( res.code == 200){
-              this.passForm = {oldPass:'', newPass:'', rePass:''};
+            oldPass: this.$md5(oldPass),
+            newPass: this.$md5(newPass)
+          }
+          httpServer("User.ResetPass", param).then(res => {
+            if (res.code == 200) {
+              this.passForm = {
+                oldPass: '',
+                newPass: '',
+                rePass: ''
+              };
+              this.passwdDialog = false
               this.$message.success("密码修改成功")
             }
           })
@@ -402,24 +347,24 @@
         const img = e.target;
         let width = 0;
         if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {
-            width = img.width + 40;
+          width = img.width + 40;
         }
         this.width = width + "px";
-        console.log( this.width )
+        console.log(this.width)
       },
-      saveMoreInfo(){
-         let param = {
-           education:this.userInfo.education,
-           address:this.userInfo.address,
-           years:+this.userInfo.years,
-           company: this.userInfo.company,
-           address: this.userInfo.address,
-           education: this.userInfo.education,
-           postalCode:this.userInfo.postalCode,
-         }
-        httpServer("User.saveMoreInfo", param).then( res=>{
-          if( res.code == 200){
-            this.$message.success( "编辑成功")
+      saveMoreInfo() {
+        let param = {
+          education: this.userInfo.education,
+          address: this.userInfo.address,
+          years: +this.userInfo.years,
+          company: this.userInfo.company,
+          address: this.userInfo.address,
+          education: this.userInfo.education,
+          postalCode: this.userInfo.postalCode,
+        }
+        httpServer("User.saveMoreInfo", param).then(res => {
+          if (res.code == 200) {
+            this.$message.success("编辑成功")
           }
 
         })
@@ -431,10 +376,12 @@
 <style>
   @import url("./index.css");
   @import url("../../../assets/css/m-account.css");
-  .pass-input{
+
+  .pass-input {
     width: 296px;
   }
-  .confirm{
+
+  .confirm {
     width: 296px;
   }
 </style>

src/containers/login/login.vue

@@ -1,198 +1,199 @@
-<template>
-  <div class="ng-scope">
-    <navbar :user="userInfo" @openLoginDialog="openLoginDialog"></navbar>
-    <div class="banner-box">
-      <div class="p-wrap-full clear pt30">
-        <div class="training-category opacity-bg fl ">
-          <img alt="" class="mimg" src="/static/swiper/1.jpg"/>
-        </div>
-
-        <div class="m-login opacity-bg fr">
-          <is-login v-if="loginOk" :user="userInfo" @logout="logout"></is-login>
-          <un-login v-else @login="login" :err="err"></un-login>
-        </div>
-      </div>
-    </div>
-
-    <div class="p-wrap-full mb20 ng-scope">
-      <el-row :gutter="20" class="shadow p10 mt20"  type="flex" >
-        <el-col :span="16">
-          <div class="training-category bg-white fl"
-            style="border-radius: 15px;padding: 10px; background-color: white;" >
-            <div style="display: flex;justify-content: center;align-items: center;width: 100%;text-align: center;color: #1D78F9;">
-                <img style="width: 80px;height: 4px;margin-right: 14px;" src="../../../static/images/home_left.png">
-                <h2 style="text-align: center;color: #1D78F9;">新闻通知</h2>
-                <img style="width: 80px;height: 4px;margin-left: 14px;" src="../../../static/images/home_right.png">
-            </div>
-            <el-table :data="postList"  highlight-current-row
-            :show-header="false" min-height="310px" style="overflow: hidden;" >
-              <el-table-column min-width="600px">
-                <template slot-scope="{row, $index}">
-                  <span @click="gotoDetail(row.postId)">{{$index+1}}、{{ row.title }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column  width="160px">
-                <template slot-scope="{row}">
-                  <span>{{ row.publishTime  }}</span>
-                </template>
-              </el-table-column>
-            </el-table>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div style="background-color: #fff;padding-top: 10px;height: 360px;" class="opacity-bg fr">
-            <div style="display: flex;justify-content: center;align-items: center;">
-              <img style="width: 80px;height: 4px;margin-right: 14px;" src="../../../static/images/home_left.png">
-              <h2 style="text-align: center;color: #1D78F9;">证书查询</h2>
-              <img style="width: 80px;height: 4px;margin-left: 14px;" src="../../../static/images/home_right.png">
-            </div>
-
-            <div style="margin-top: 50px;text-align: center; ">
-              <el-button @click="gotoOutlink()" type="primary"> 前往证书查询 </el-button>
-            </div>
-          </div>
-        </el-col>
-      </el-row>
-    </div>
-
-    <el-dialog
-      class="fc tc login-dialog"
-      :visible.sync="loginDialog"
-       :show-close='false'
-      width="330px"
-      style="padding:0px;"
-      @close="closeDialog"
-    >
-      <div class="m-login" style="background: none;">
-        <un-login @login="login" :err="err"></un-login>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import isLogin from "./components/isLogin.vue";
-import unLogin from "./components/unLogin.vue";
-import LearnTime from "./components/learnTime/learnTime.vue";
-import navbar from "@/components/nav/navbar.vue";
-import Friendlink from "./components/friendlink/friendlink.vue";
-import { httpServer } from "@/components/httpServer/httpServer.js";
-import { mapGetters,mapActions } from "vuex";
-
-export default {
-  components: {
-    LearnTime,
-    isLogin,
-    unLogin,
-    Friendlink,
-    navbar
-  },
-  data() {
-    return {
-      loginOk: false,
-      periodObj: {
-        userName: "",
-        idNum: "",
-      },
-      postList:[],
-      loginDialog: false,
-      err: {},
-    };
-  },
-  computed: {
-  	...mapGetters("user", ["typeList", "userInfo"])
-  },
-  beforeMount(){
-     if( this.userInfo && this.userInfo.token){
-       this.loginOk = true
-     }else{
-       this.loginOk = false
-     }
-  },
-  created(){
-    this.getPostList()
-  },
-  methods: {
-    ...mapActions("user", ["loadBaseInfo", "doLogout", "doLogin"]),
-    logout() {
-      this.doLogout().then( res=>{
-        this.loginOk = false;
-      } )
+<template>
+  <div class="ng-scope">
+    <navbar :user="userInfo" @openLoginDialog="openLoginDialog"></navbar>
+    <div class="banner-box">
+      <div class="p-wrap-full clear pt30">
+        <div class="training-category opacity-bg fl ">
+          <img alt="" class="mimg" src="/static/swiper/1.jpg"/>
+        </div>
+
+        <div class="m-login opacity-bg fr">
+          <is-login v-if="loginOk" :user="userInfo" @logout="logout"></is-login>
+          <un-login v-else @login="login" :err="err"></un-login>
+        </div>
+      </div>
+    </div>
+
+    <div class="p-wrap-full mb20 ng-scope">
+      <el-row :gutter="20" class="shadow p10 mt20"  type="flex" >
+        <el-col :span="16">
+          <div class="training-category bg-white fl"
+            style="border-radius: 15px;padding: 10px; background-color: white;" >
+            <div style="display: flex;justify-content: center;align-items: center;width: 100%;text-align: center;color: #1D78F9;">
+                <img style="width: 80px;height: 4px;margin-right: 14px;" src="../../../static/images/home_left.png">
+                <h2 style="text-align: center;color: #1D78F9;">新闻通知</h2>
+                <img style="width: 80px;height: 4px;margin-left: 14px;" src="../../../static/images/home_right.png">
+            </div>
+            <el-table :data="postList"  highlight-current-row
+            :show-header="false" min-height="310px" style="overflow: hidden;" >
+              <el-table-column min-width="600px">
+                <template slot-scope="{row, $index}">
+                  <span @click="gotoDetail(row.postId)">{{$index+1}}、{{ row.title }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column  width="160px">
+                <template slot-scope="{row}">
+                  <span>{{ row.publishTime  }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div style="background-color: #fff;padding-top: 10px;height: 360px;" class="opacity-bg fr">
+            <div style="display: flex;justify-content: center;align-items: center;">
+              <img style="width: 80px;height: 4px;margin-right: 14px;" src="../../../static/images/home_left.png">
+              <h2 style="text-align: center;color: #1D78F9;">证书查询</h2>
+              <img style="width: 80px;height: 4px;margin-left: 14px;" src="../../../static/images/home_right.png">
+            </div>
+
+            <div style="margin-top: 50px;text-align: center; ">
+              <el-button @click="gotoOutlink()" type="primary"> 前往证书查询 </el-button>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
+    <el-dialog
+      class="fc tc login-dialog"
+      :visible.sync="loginDialog"
+       :show-close='false'
+      width="330px"
+      style="padding:0px;"
+      @close="closeDialog"
+    >
+      <div class="m-login" style="background: none;">
+        <un-login @login="login" :err="err"></un-login>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import isLogin from "./components/isLogin.vue";
+import unLogin from "./components/unLogin.vue";
+import LearnTime from "./components/learnTime/learnTime.vue";
+import navbar from "@/components/nav/navbar.vue";
+import Friendlink from "./components/friendlink/friendlink.vue";
+import { httpServer } from "@/components/httpServer/httpServer.js";
+import { mapGetters,mapActions } from "vuex";
+import settings from "@/settings.js";
+export default {
+  components: {
+    LearnTime,
+    isLogin,
+    unLogin,
+    Friendlink,
+    navbar
+  },
+  data() {
+    return {
+      loginOk: false,
+      periodObj: {
+        userName: "",
+        idNum: "",
+      },
+      postList:[],
+      loginDialog: false,
+      err: {},
+    };
+  },
+  computed: {
+  	...mapGetters("user", ["typeList", "userInfo"])
+  },
+  beforeMount(){
+     if( this.userInfo && this.userInfo.token){
+       this.loginOk = true
+     }else{
+       this.loginOk = false
+     }
+  },
+  created(){
+    this.getPostList()
+  },
+  methods: {
+    ...mapActions("user", ["loadBaseInfo", "doLogout", "doLogin"]),
+    logout() {
+      this.doLogout().then( res=>{
+        this.loginOk = false;
+      } )
+    },
+    login(param, cb) {
+      this.doLogin( param ).then( res => {
+        if( !res ){
+          this.err.loginErrorEnter = "登入失败"
+          this.loginOk = false;
+          cb &&cb()
+        }else{
+          this.loginOk = true;
+          this.loginDialog = false;
+        }
+      })
+    },
+    getPostList(){
+      httpServer("course.getPostList", {page:1,type:'操作指南', size:6}).then( res=>{
+        this.postList = res.data.list.slice(0,6)
+      })
+    },
+    gotoDetail(postId){
+      this.$router.push({name:'news', query:{postId}})
+    },
+    gotoCourse(item){
+      if ( !localStorage.token ) {
+        this.$message.successMsg("请先登入", 1)
+        return
+      }
+      if( !item.isOpen ){
+         this.$message.errorMsg("暂未开放", 1)
+         return
+      }
+      this.$router.push( {path:'/center/market', query:{type: item.name}})
+    },
+    closeDialog() {
+      this.loginDialog = false;
     },
-    login(param, cb) {
-      this.doLogin( param ).then( res => {
-        if( !res ){
-          this.err.loginErrorEnter = "登入失败"
-          this.loginOk = false;
-          cb &&cb()
-        }else{
-          this.loginOk = true;
-          this.loginDialog = false;
-        }
-      })
-    },
-    getPostList(){
-      httpServer("course.getPostList", {page:1,type:'操作指南', size:6}).then( res=>{
-        this.postList = res.data.list.slice(0,6)
-      })
-    },
-    gotoDetail(postId){
-      this.$router.push({name:'news', query:{postId}})
-    },
-    gotoCourse(item){
-      if ( !localStorage.token ) {
-        this.$message.successMsg("请先登入", 1)
-        return
-      }
-      if( !item.isOpen ){
-         this.$message.errorMsg("暂未开放", 1)
-         return
-      }
-      this.$router.push( {path:'/center/market', query:{type: item.name}})
-    },
-    closeDialog() {
-      this.loginDialog = false;
-    },
-    openLoginDialog() {
-      this.loginDialog = true
-    },
-  },
-};
-</script>
-
-<style>
-@import url("login.css");
-.floatbox{
-  position: fixed;
-  width: 160px;
-  height: 60px;
-  right: 60px;
-  top: 90px;
-  border-radius: 1.25rem;
-  font-size: 30px !important;
-  background-color: orange;
-  line-height: 40px;
-  text-align: center;
-  color: #fff;
-}
-.right-nav {
-    width: 135px;
-    height: 180px;
-    background-color: #8bbdf5;
-    position: fixed;
-    transition: bottom ease .9s;
-    z-index: 0;
-    right: 5%;
-    top: 260px;
-    text-align: center;
-    border-radius: 5px;
-}
-.right-img {
-    display: inline-block;
-    border-radius: 30%;
-    width: 80%;
-    height: 64%;
-    margin: 11px auto 0;
-}
-
-</style>
+    gotoOutlink(){
      window.open( settings.outLink, '_brank');
    },
+    openLoginDialog() {
+      this.loginDialog = true
+    },
+  },
+};
+</script>
+
+<style>
+@import url("login.css");
+.floatbox{
+  position: fixed;
+  width: 160px;
+  height: 60px;
+  right: 60px;
+  top: 90px;
+  border-radius: 1.25rem;
+  font-size: 30px !important;
+  background-color: orange;
+  line-height: 40px;
+  text-align: center;
+  color: #fff;
+}
+.right-nav {
+    width: 135px;
+    height: 180px;
+    background-color: #8bbdf5;
+    position: fixed;
+    transition: bottom ease .9s;
+    z-index: 0;
+    right: 5%;
+    top: 260px;
+    text-align: center;
+    border-radius: 5px;
+}
+.right-img {
+    display: inline-block;
+    border-radius: 30%;
+    width: 80%;
+    height: 64%;
+    margin: 11px auto 0;
+}
+
+</style>

src/containers/report.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

src/settings.js

@@ -0,0 +1,12 @@
+module.exports = {
+  title: '福建省爱数信息技术有限公司'
+  ,beian:'闽ICP备2121760号-1'
+  ,exam:{
+    username:'福建省爱数信息技术有限公司'
+    ,bankName: '中国银行厦门市分行'
+    ,bankNo:'414360427410'
+    ,promise:'本人自愿选择参加福建省爱数信息技术有限公司组织的施工现场专业人员岗位培训，对报名相关条件、提交的材料及收费情况均已知晓！且所提交的材料真实有效，如有存在虚假，所导致的一切后果由本人承担。'
+  }
+  ,email:'1015067257@qq.com'
+  ,outLink: 'http://220.160.52.164:9081/portalWeb/fwZhcx/toFwZhcxPage?code=zscx'
+}