Home Explore Help
Register Sign In
ndjsxh
/
study_sm
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

折睿网站改版

y595705120 2 years ago
parent
bbb5baa1a0
commit
9a971b6df4
31 changed files with 2597 additions and 739 deletions
Unified View Show Diff Stats
  1. 1 1
      index.html
  2. 306 221
      package-lock.json
  3. 2 0
      package.json
  4. 3 6
      src/App.vue
  5. 6 3
      src/assets/css/main.css
  6. 234 0
      src/components/nav/navbar.css
  7. 2 1
      src/components/nav/navbar.less
  8. 1 1
      src/components/nav/navbar.vue
  9. 1 1
      src/containers/center/center.vue
  10. 35 8
      src/containers/center/class/train/index.vue
  11. 22 7
      src/containers/center/components/menu/iheader.vue
  12. 1 1
      src/containers/center/components/navbar/index.vue
  13. 23 17
      src/containers/center/home/index.vue
  14. 55 13
      src/containers/center/market/index.vue
  15. 11 8
      src/containers/center/myOrder/index.vue
  16. 254 201
      src/containers/center/setting/index.vue
  17. 11 7
      src/containers/center/sign/index.vue
  18. 12 6
      src/containers/login/components/isLogin.vue
  19. 49 45
      src/containers/login/components/unLogin.vue
  20. 46 50
      src/containers/login/login.vue
  21. 98 105
      src/containers/register/register.vue
  22. 1 0
      src/main.js
  23. 0 0
      src/setting.js
  24. 11 0
      src/settings.js
  25. 890 0
      src/tailwind.css
  26. BIN
      static/images/header-bg-1.jpg
  27. 0 0
      static/images/header-bg.jpg.bak.jpg
  28. BIN
      static/images/login-banner-1.jpg
  29. BIN
      static/images/login-banner.jpg
  30. 18 0
      tailwind.config.js
  31. 504 37
      yarn.lock

+ 1 - 1
index.html
View File 

@@ -8,7 +8,7 @@
 
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
 
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
 
     <!-- <meta name="referrer" content="origin"> -->
 
     <!-- <meta name="referrer" content="origin"> -->
 
 
 
-    <title>三明市建设人才服务中心</title>
 
+    <title>福建省哲睿网络科技有限公司 </title>
 
   </head>
 
   </head>
 
   <body style="margin:0px;">
 
   <body style="margin:0px;">
 
 <!--    <div id="img_float" style="z-index: 101; left: 134px; width: 242px; height: 141px; position: absolute; top: 577px; visibility: visible; cursor: pointer;">
 
 <!--    <div id="img_float" style="z-index: 101; left: 134px; width: 242px; height: 141px; position: absolute; top: 577px; visibility: visible; cursor: pointer;">

File diff suppressed because it is too large
+ 306 - 221
package-lock.json


+ 2 - 0
package.json
View File 

@@ -6,6 +6,7 @@
 
   "private": true,
 
   "private": true,
 
   "scripts": {
 
   "scripts": {
 
     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 
     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 
+    "wind": "npx tailwindcss -o ./src/tailwind.css  --watch",
 
     "start": "npm run dev",
 
     "start": "npm run dev",
 
     "build": "node build/build.js"
 
     "build": "node build/build.js"
 
   },
 
   },
 
@@ -21,6 +22,7 @@
 
     "sass-loader": "^10.1.0",
 
     "sass-loader": "^10.1.0",
 
     "save": "^2.4.0",
 
     "save": "^2.4.0",
 
     "spark-md5": "^3.0.1",
 
     "spark-md5": "^3.0.1",
 
+    "tailwindcss": "^3.0.23",
 
     "vue": "^2.5.2",
 
     "vue": "^2.5.2",
 
     "vue-router": "^3.0.1",
 
     "vue-router": "^3.0.1",
 
     "vue-socket.io-extended": "^4.2.0",
 
     "vue-socket.io-extended": "^4.2.0",

+ 3 - 6
src/App.vue
View File 

@@ -7,14 +7,11 @@
 
     <div class="ng-scope">
 
     <div class="ng-scope">
 
       <div class="footer ng-scope" style="z-index: 10">
 
       <div class="footer ng-scope" style="z-index: 10">
 
         <div class="footer-bd">
 
         <div class="footer-bd">
 
-          <p>技术支持：福建省爱数信息技术有限公司</p>
 
+          <p>技术支持：福建省哲睿网络科技有限公司 ©2022</p>
 
           <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"> -->
 
+              <img class="beian inline-block" src="./assets/images/beian_hashc9b229c96d.png" alt="">
 
               <a href="http://beian.miit.gov.cn/" target="_blank">
 
               <a href="http://beian.miit.gov.cn/" target="_blank">
 
-                网站备案：闽ICP备1921760号-2
 
+                网站备案：闽ICP备0000000号
 
               </a>
 
               </a>
 
            </p>
 
            </p>
 
         </div>
 
         </div>

+ 6 - 3
src/assets/css/main.css
View File 

@@ -25,7 +25,7 @@ form {
 
 .m-content {
 
 .m-content {
 
   position: relative;
 
   position: relative;
 
   /* padding-top: 95px; */
 
   /* padding-top: 95px; */
 
-  border: 1px solid #e8e8e8;
 
+  /* border: 1px solid #e8e8e8; */
 
 }
 
 }
 
 .ng-scope {
 
 .ng-scope {
 
   border: 0px dashed red;
 
   border: 0px dashed red;
 
@@ -225,7 +225,10 @@ a, span {
 
   margin: 0 auto;
 
   margin: 0 auto;
 
   min-height: 700px;
 
   min-height: 700px;
 
   background: #fff;
 
   background: #fff;
 
-  border-left: 1px solid #e8e8e8;
 
+  border-radius: 1rem;
 
+  margin-bottom: 2rem;
 
+  margin-top: 2rem;
 
+  /* border-left: 1px solid #e8e8e8; */
 
 }
 
 }
 
 
 
 .m-right-block .right-block-bd {
 
 .m-right-block .right-block-bd {
 
@@ -271,7 +274,7 @@ a, span {
 
 }
 
 }
 
 .opacity-bg {
 
 .opacity-bg {
 
   border-radius: 10px;
 
   border-radius: 10px;
 
-  background:#6b9eff;
 
+  background:#3876da;
 
   /* background: rgba(0,0,0,0.2); */
 
   /* background: rgba(0,0,0,0.2); */
 
   /* background: url("../../assets/images/opacity-bg_hash548c17198c.png"); */
 
   /* background: url("../../assets/images/opacity-bg_hash548c17198c.png"); */
 
   color: #fff;
 
   color: #fff;

+ 234 - 0
src/components/nav/navbar.css
View File 

@@ -0,0 +1,234 @@
 
+.m-header {
 
+  min-width: 1200px;
 
+  height: 150px;
 
+  background: #fff url("/static/images/header-bg-1.jpg") no-repeat center center;
 
+  background-size: cover;
 
+  position: relative;
 
+  z-index: 3;
 
+}
 
+.m-header .top-wrap {
 
+  height: 30px;
 
+  line-height: 30px;
 
+  border-bottom: 1px solid #479bd8;
 
+  color: #fff;
 
+  font-size: 12px;
 
+}
 
+.m-header .top-wrap a {
 
+  color: #fff;
 
+  height: 30px;
 
+}
 
+.m-header .top-wrap .right a {
 
+  padding: 0 10px;
 
+}
 
+.m-header .top-wrap .right a:hover {
 
+  text-decoration: underline;
 
+}
 
+.m-header .top-wrap .appico {
 
+  background-position: -150px -270px;
 
+  width: 20px;
 
+  height: 20px;
 
+  margin-right: 5px;
 
+  position: relative;
 
+  top: -1px;
 
+}
 
+.m-header .top-wrap .appico-1 {
 
+  background-position: -180px -270px;
 
+}
 
+.m-header .top-wrap .top-app:hover .hover-block {
 
+  display: block;
 
+}
 
+.m-header .top-wrap .top-app .hover-block {
 
+  position: absolute;
 
+  top: 33px;
 
+  left: -30px;
 
+  line-height: 1.5;
 
+  transition: all 0.4s;
 
+  padding-right: 10px;
 
+  z-index: 10;
 
+  display: none;
 
+}
 
+.m-header .top-wrap .top-app .hover-block .hover-bd {
 
+  background-color: #fff;
 
+  text-align: left;
 
+  color: #333;
 
+  padding: 10px;
 
+  border-radius: 5px;
 
+  -moz-box-shadow: 0px 0px 7px #ccc;
 
+  -webkit-box-shadow: 0px 0px 7px #ccc;
 
+  box-shadow: 0px 0px 7px #ccc;
 
+}
 
+.m-header .top-wrap .top-app .hover-block .hover-bd span {
 
+  display: inline-block;
 
+}
 
+.m-header .top-wrap .top-app .hover-block .hover-bd .arrowtop {
 
+  width: 13px;
 
+  height: 7px;
 
+  position: absolute;
 
+  left: 50%;
 
+  top: -7px;
 
+  margin-left: -6px;
 
+  display: inline-block;
 
+  background: url("/assets/images/icon_hash3c59d1b2af.png") no-repeat -322px -23px;
 
+}
 
+.m-header .logo {
 
+  padding-top: 42px;
 
+}
 
+.m-header .channel-txt {
 
+  font-size: 30px;
 
+  color: #3290d4;
 
+  font-weight: bold;
 
+  border-left: 1px solid #3290d4;
 
+  padding-left: 25px;
 
+  margin-left: 25px;
 
+  height: 60px;
 
+  line-height: 52px;
 
+  margin-top: 22px;
 
+}
 
+.m-nav {
 
+  min-width: 1200px;
 
+  height: 56px;
 
+  border-bottom: 1px solid #ddd;
 
+  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
+  position: relative;
 
+  z-index: 2;
 
+  background-color: #fff;
 
+}
 
+.m-nav .nav-bd a {
 
+  line-height: 56px;
 
+  display: block;
 
+  float: left;
 
+  color: #333;
 
+  font-size: 16px;
 
+  padding: 0 15px;
 
+  margin-right: 15px;
 
+  min-width: 150px;
 
+  text-align: center;
 
+  box-sizing: border-box;
 
+  border-bottom: 3px solid transparent;
 
+  position: relative;
 
+  font-weight: bold;
 
+}
 
+.m-nav .nav-bd a:after {
 
+  content: " ";
 
+  display: block;
 
+  width: 100%;
 
+  height: 0;
 
+  border-bottom: 3px solid transparent;
 
+  position: absolute;
 
+  bottom: 0;
 
+  left: 0;
 
+  transition: all 0.4s;
 
+  -moz-transition: all 0.4s;
 
+  -webkit-transition: all 0.4s;
 
+  -o-transition: all 0.4s;
 
+}
 
+.m-nav .nav-bd a:hover,
 
+.m-nav .nav-bd a.current {
 
+  color: #ff914b;
 
+}
 
+.m-nav .nav-bd a.current:after {
 
+  border-color: #ff914b;
 
+}
 
+.m-nav .nav-bd a:focus {
 
+  outline: none;
 
+  text-decoration: none;
 
+}
 
+.m-nav .nav-bd .fr {
 
+  float: right;
 
+  margin-right: 0;
 
+}
 
+.m-nav .nav-bd-1 a {
 
+  padding: 0 36px;
 
+}
 
+.pos-nav {
 
+  color: #666;
 
+  line-height: 36px;
 
+  height: 36px;
 
+  padding-top: 5px;
 
+}
 
+.pos-nav .return-ico {
 
+  background-position: -211px -221px;
 
+  width: 24px;
 
+  height: 18px;
 
+  margin-right: 6px;
 
+}
 
+.pos-nav a {
 
+  color: #666;
 
+}
 
+.pos-nav a:hover {
 
+  color: #3290d4;
 
+  text-decoration: underline;
 
+}
 
+.pos-nav a:hover .return-ico {
 
+  background-position: -211px -240px;
 
+}
 
+.pos-nav span {
 
+  padding: 0 3px;
 
+}
 
+.pos-nav .location-ico {
 
+  width: 18px;
 
+  height: 22px;
 
+  background-position: -128px -382px;
 
+}
 
+.pos-nav .trigger {
 
+  display: inline-block;
 
+  margin-left: 20px;
 
+}
 
+.pos-nav .trigger .conditions-btn {
 
+  display: inline-block;
 
+  background-color: #fff;
 
+  padding-left: 8px;
 
+  padding-right: 30px;
 
+  line-height: 24px;
 
+  height: 24px;
 
+  font-size: 12px;
 
+  color: #333;
 
+  margin-top: 5px;
 
+  margin-right: 5px;
 
+  border: 1px solid #ddd;
 
+  position: relative;
 
+  vertical-align: top;
 
+}
 
+.pos-nav .trigger .conditions-btn .txt {
 
+  color: #3290d4;
 
+}
 
+.pos-nav .trigger .conditions-btn .close-ico {
 
+  background-position: -94px -374px;
 
+  width: 24px;
 
+  height: 24px;
 
+  display: inline-block;
 
+  margin-left: 5px;
 
+  position: absolute;
 
+  top: 0;
 
+  right: 0;
 
+}
 
+.pos-nav .trigger .conditions-btn:hover {
 
+  border: 1px solid #3290d4;
 
+  text-decoration: none;
 
+}
 
+.pos-nav .trigger .conditions-btn:hover:hover {
 
+  text-decoration: none;
 
+}
 
+.pos-nav .trigger .conditions-btn:hover .close-ico {
 
+  background-position: -94px -389px;
 
+  background-color: #3290d4;
 
+}
 
+.pos-nav .trigger .conditions-btn-2 {
 
+  padding-right: 5px;
 
+}
 
+.pos-nav .trigger .clear-btn {
 
+  display: inline-block;
 
+  color: #666;
 
+  font-size: 12px;
 
+}
 
+.pos-nav .trigger .clear-btn:hover {
 
+  color: #3290d4;
 
+  text-decoration: none;
 
+}
 
+.logo-box-img {
 
+  height: 40px;
 
+  width: 100px;
 
+  z-index: 9999 !important;
 
+}

+ 2 - 1
src/components/nav/navbar.less
View File 

@@ -1,7 +1,8 @@
 
 .m-header {
 
 .m-header {
 
   min-width: 1200px;
 
   min-width: 1200px;
 
   height: 150px;
 
   height: 150px;
 
-  background: #fff url("/static/images/header-bg.jpg") no-repeat center bottom;
 
+  background: #fff url("/static/images/header-bg-1.jpg") no-repeat center center;
 
+  background-size: cover;
 
   position: relative;
 
   position: relative;
 
   z-index: 3;
 
   z-index: 3;
 
 }
 
 }

+ 1 - 1
src/components/nav/navbar.vue
View File 

@@ -3,7 +3,7 @@
 
     <div class="m-header ng-scope">
 
     <div class="m-header ng-scope">
 
       <div class="p-wrap-full tc" @click="goto('/')">
 
       <div class="p-wrap-full tc" @click="goto('/')">
 
         <span class="logo " style="color: white;font-size: 56px;">
 
         <span class="logo " style="color: white;font-size: 56px;">
 
-          福建省爱数信息技术有限公司  </span>
 
+          福建省哲睿网络科技有限公司  </span>
 
       </div>
 
       </div>
 
     </div>
 
     </div>

+ 1 - 1
src/containers/center/center.vue
View File 

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

+ 35 - 8
src/containers/center/class/train/index.vue
View File 

@@ -1,14 +1,41 @@
 
 <template>
 
 <template>
 
   <div class="m-right-block mh576">
 
   <div class="m-right-block mh576">
 
-    <!-- uiView: myStudyContent -->
 
-
 
-
 
     <div class="right-block-bd ng-scope" ui-view="myStudyContent" style="position: relative;">
 
     <div class="right-block-bd ng-scope" ui-view="myStudyContent" style="position: relative;">
 
-      <div class="panel-tit clear">
 
-        <p class="fl">课程</p>
 
+      <div class="text-xl leading-10 pb-4 text-blue">
 
+        <p>我的课程</p>
 
+      </div>
 
+
 
+      <el-row class="mt-4" :gutter="48" v-if="list && list.length > 0">
 
+        <el-col :span="8" v-for="(item) in list" :key="item.course_id">
 
+          <el-card class="mb-6">
 
+            <div class="h-48 overflow-hidden relative">
 
+              <img :src="item.tb" class="image object-cover">
 
+              <el-tag class="absolute right-2 top-2" type="success">
 
+                <i class="el-icon-check text-xl"></i>
 
+              </el-tag>
 
+            </div>
 
+            <div class="flex py-2 px-4  items-center justify-between">
 
+              <span>{{item.name}}</span>
 
+              <el-button type="text" @click="gotoPlay(item.courseId)">进入学习</el-button>
 
+            </div>
 
+            <div class="py-2 px-6 text-sm flex">
 
+              <div class="w-1/2 text-left">{{item.type}}</div>
 
+              <div class="w-1/2  text-right">年度: {{item.nd||'2022'}}</div>
 
+            </div>
 
+            <div class="py-2 px-6 text-sm">
 
+              获得: {{item.getXs/10}}学时
 
+            </div>
 
+            <div class="py-2 px-6 text-sm">
 
+              总共: {{item.totalXs/10}}学时
 
+            </div>
 
+          </el-card>
 
+        </el-col>
 
+      </el-row>
 
+      <div v-else class="flex w-auto h-72 justify-center items-center text-gray-300 text-lg">
 
+        暂无信息
 
       </div>
 
       </div>
 
 
 
-      <ul class="m-course-list clear mt10 classlist" v-if="total>0">
 
+      <!-- <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 pb10">
 
           <div>
 
           <div>
 
             <span v-if="item.isFinish==1" class="p-ico2 ico-passed"></span>
 
             <span v-if="item.isFinish==1" class="p-ico2 ico-passed"></span>
 
@@ -34,9 +61,9 @@
 
             </div>
 
             </div>
 
           </div>
 
           </div>
 
         </li>
 
         </li>
 
-      </ul>
 
+      </ul> -->
 
 
 
-      <el-pagination  class="m-pages"
 
+      <el-pagination v-if="total" class="m-pages"
 
       @current-change="handleCurrentChange" :current-page="page" :page-size="size" layout="total, prev, pager, next"
 
       @current-change="handleCurrentChange" :current-page="page" :page-size="size" layout="total, prev, pager, next"
 
         :total="total">
 
         :total="total">
 
       </el-pagination>
 
       </el-pagination>

+ 22 - 7
src/containers/center/components/menu/iheader.vue
View File 

@@ -68,18 +68,33 @@
 
       isActive( path ){
 
       isActive( path ){
 
         let rpath = this.$route.path;
 
         let rpath = this.$route.path;
 
         return rpath.indexOf( path )> -1;
 
         return rpath.indexOf( path )> -1;
 
+      },
 
+      goto( route ){
 
+        if(this.isActive(route)) return;
 
+        this.$router.push( route );
 
       }
 
       }
 
     }
 
     }
 
   }
 
   }
 
 </script>
 
 </script>
 
 
 
-<style>
 
-  @import url("./index.css");
 
-  .nav{ height:50px; background:#4679fe; margin:1px auto; width:1009px;}
 
-  .nav ul li{ float:left; line-height:50px;}
 
+<style lang="less">
 
+  @import "./index.css";
 
+  .nav{
 
+    height:50px;
 
+    margin:1px auto;
 
+    width:1009px;
 
+    text-align: center;
 
+    ul{
 
+      display: inline-block;
 
+    }
 
+  }
 
+  .nav ul li{ float:left; line-height:50px;font-size:1.25rem;}
 
 
 
-  .nav ul li a{ padding:0 27px; color:#FFF; display:block; height:50px;}
 
+  .nav a{ padding:0 20px; color: #999; display:block; height:50px;}
 
+
 
+  .nav ul li a:hover{ background:#5584d1; color: #fff; text-decoration:none;}
 
+  .navfirst a{ background:#3876da;  color: #fff; display:block;}
 
+</style>
 
+<style lang="less" scoped>
 
 
 
-  .nav ul li a:hover{ background:#4679fe; text-decoration:none;}
 
-  .navfirst a{ background:#ffa200; display:block;}
 
 </style>
 
 </style>

+ 1 - 1
src/containers/center/components/navbar/index.vue
View File 

@@ -4,7 +4,7 @@
 
       <div class="logo fl" style="padding-top: 24px;">
 
       <div class="logo fl" style="padding-top: 24px;">
 
         <a href="javascript:void(0)" style="text-decoration: none"
 
         <a href="javascript:void(0)" style="text-decoration: none"
 
             class="rel ng-binding" @click="$router.push('/')">
 
             class="rel ng-binding" @click="$router.push('/')">
 
-           福建省爱数信息技术有限公司
 
+           福建省哲睿网络科技有限公司
 
           <div class="hover-block" style="padding-top: 24px;">
 
           <div class="hover-block" style="padding-top: 24px;">
 
 
 
             <div class="hover-bd ng-scope" style="width:137px;margin-top: -20px" @click="$router.push('/')">
 
             <div class="hover-bd ng-scope" style="width:137px;margin-top: -20px" @click="$router.push('/')">

+ 23 - 17
src/containers/center/home/index.vue
View File 

@@ -2,25 +2,31 @@
 
   <div class="app">
 
   <div class="app">
 
     <div class="m-right-block">
 
     <div class="m-right-block">
 
       <div class="right-block-bd">
 
       <div class="right-block-bd">
 
-        <div class="panel-tit mt30 clear">
 
-          <p class="fl">最近学习课程</p>
 
+        <!-- <div class="panel-tit mt30 clear"> -->
 
+        <div class="text-xl leading-10 pb-4 text-blue">
 
+          <p>最近学习课程</p>
 
         </div>
 
         </div>
 
         <div class="clear mt10">
 
         <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>
 
-              <div class="info">最近一次学习
 
-                <span>{{item.endDate}}</span>
 
-              </div>
 
-            </div>
 
+          <el-row :gutter="12" v-if="list && list.length > 0">
 
+            <el-col  v-for="item in list" :key="item.courseId"  :span="8">
 
+              <el-card>
 
+                <div slot="header" class="clearfix">
 
+                  <span>{{item.name}}</span>
 
+                  <el-button style="float: right; padding: 3px 0" @click="gotoPlay(item.courseId)" type="text">前往</el-button>
 
+                </div>
 
+                <div class="text item flex">
 
+                  <div class="info pr-4">课程进度</div>
 
+                  <div class="info">{{getPercent(item)}}%</div>
 
+                </div>
 
+                <div class="text item flex">
 
+                  <div class="info pr-4">最近一次学习</div>
 
+                  <div class="info">{{item.endDate}}</div>
 
+                </div>
 
+              </el-card>
 
+            </el-col>
 
+          </el-row>
 
+          <div v-else class="flex w-auto h-72 justify-center items-center text-gray-300 text-lg">
 
+            暂无信息
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
       </div>
 
       </div>

+ 55 - 13
src/containers/center/market/index.vue
View File 

@@ -1,23 +1,55 @@
 
 <template>
 
 <template>
 
   <div class="m-right-block">
 
   <div class="m-right-block">
 
-    <div class="right-block-bd ng-scope" ui-view="myStudyContent" style="position: relative;">
 
-      <div class="panel-tit clear">
 
-        <p class="fl">推荐课程</p>
 
+    <div class="right-block-bd" ui-view="myStudyContent" style="position: relative;">
 
+      <div class="text-xl leading-10 pb-4 text-blue">
 
+        <p>推荐课程</p>
 
       </div>
 
       </div>
 
 
 
-      <ul class="pt-line mt20">
 
+      <el-tabs @tab-click="handleClick">
 
+        <template  v-for="item in typeList" >
 
+          <el-tab-pane v-if="item.isOpen" :key="item.id" :label="item.name"></el-tab-pane>
 
+        </template>
 
+      </el-tabs>
 
+
 
+      <!-- <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">
 
         <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>
 
           <span :class="{active:item.name==type }" class="nav-btn w220" @click="type=item.name">{{item.name}} </span>
 
         </li>
 
         </li>
 
-      </ul>
 
-
 
-      <div class="mt10" v-if="type=='施工现场专业人员'">
 
-        <p class="tc" style="color: red;font-size: 18px;">
 
-          报名对象为：2020年度及以后由培训单位核发的和2021年度换发的“电子培训合格证”且每年度需参加继续教育人员
 
-        </p>
 
+      </ul> -->
 
+
 
+      <el-row class="mt-4" :gutter="48" v-if="list && list.length > 0">
 
+        <el-col :span="8" v-for="(item, index) in list" :key="item.course_id">
 
+          <el-card class="mb-6">
 
+            <div class="h-48 overflow-hidden relative">
 
+              <img :src="item.tb" class="image object-cover">
 
+              <el-tag class="absolute right-2 top-2" type="info" v-if="item.is_pay==0 && item.buyImg =='' && item.payNo == ''">还未购买</el-tag>
 
+              <el-tag class="absolute right-2 top-2" type="warning" v-else-if="item.is_pay==0">等待审核</el-tag>
 
+              <el-tag class="absolute right-2 top-2" type="danger" v-else-if="item.is_pay==2">申请驳回</el-tag>
 
+              <el-tag class="absolute right-2 top-2" v-else-if="!item.is_pass">在学习中</el-tag>
 
+              <el-tag class="absolute right-2 top-2" type="success" v-else>已经完成</el-tag>
 
+            </div>
 
+            <div class="flex py-2 px-4  items-center justify-between">
 
+              <span>{{item.name}}</span>
 
+              <el-button type="text" @click="gotoPlay(item.course_id)" v-if="item.is_pay==1">进入学习</el-button>
 
+              <el-button type="text" @click="goPay(index)" v-else-if="item.is_pay==2 || !!item.buyImg">补充材料</el-button>
 
+              <el-button type="text" @click="goPay(index)" v-else>购买课程</el-button>
 
+            </div>
 
+            <div class="py-2 px-6 text-sm flex">
 
+              <div class="w-1/2 text-left">{{item.type}}</div>
 
+              <div class="w-1/2  text-right">年度: {{item.nd||'2022'}}</div>
 
+            </div>
 
+            <div class="py-2 px-6 text-sm flex">
 
+              <div class="w-1/2">费用: ￥{{item.fee/100}}元</div>
 
+              <div class="w-1/2 text-right">学时: {{item.xs/10}}</div>
 
+            </div>
 
+          </el-card>
 
+        </el-col>
 
+      </el-row>
 
+      <div v-else class="flex w-auto h-72 justify-center items-center text-gray-300 text-lg">
 
+        暂无信息
 
       </div>
 
       </div>
 
 
 
-      <ul class="m-course-list clear mt10 classlist" v-if="total>0">
 
+      <!-- <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 pb10">
 
           <div>
 
           <div>
 
             <span v-if="item.isFinish==1" class="p-ico2 ico-passed"></span>
 
             <span v-if="item.isFinish==1" class="p-ico2 ico-passed"></span>
 
@@ -57,9 +89,9 @@
 
             </div>
 
             </div>
 
           </div>
 
           </div>
 
         </li>
 
         </li>
 
-      </ul>
 
+      </ul> -->
 
 
 
-      <el-pagination class="m-pages" @current-change="handleCurrentChange" :current-page="page" :page-size="size"
 
+      <el-pagination  v-if="total" class="m-pages" @current-change="handleCurrentChange" :current-page="page" :page-size="size"
 
         layout="total, prev, pager, next" :total="total">
 
         layout="total, prev, pager, next" :total="total">
 
       </el-pagination>
 
       </el-pagination>
 
 
 
@@ -341,6 +373,9 @@
 
       if (this.timer) window.clearInterval(this.timer);
 
       if (this.timer) window.clearInterval(this.timer);
 
     },
 
     },
 
     methods: {
 
     methods: {
 
+      handleClick(tab){
 
+        this.type = tab.label;
 
+      },
 
       showImg(url) {
 
       showImg(url) {
 
         if (!url) return;
 
         if (!url) return;
 
         this.imgUrl = url;
 
         this.imgUrl = url;
 
@@ -490,3 +525,10 @@
 
     font-size: 16px;
 
     font-size: 16px;
 
   }
 
   }
 
 </style>
 
 </style>
 
+<style lang="less" scoped>
 
+.el-card{
 
+  & /deep/ .el-card__body{
 
+    padding: 0;
 
+  }
 
+}
 
+</style>

+ 11 - 8
src/containers/center/myOrder/index.vue
View File 

@@ -1,34 +1,32 @@
 
 <template>
 
 <template>
 
   <div class="m-right-block" style="position: relative;">
 
   <div class="m-right-block" style="position: relative;">
 
     <div class="right-block-bd">
 
     <div class="right-block-bd">
 
-      <div class="mb10 tc mt20">
 
-        <span class="p-ico2 worm-ico-o"></span>
 
-        注：未付款的订单设置3小时时限,3小时过后未付的订单就不再显示。
 
+      <div class="text-xl leading-10 pb-4 text-blue">
 
+        <p>我的订单</p>
 
       </div>
 
       </div>
 
-
 
       <div  class="ng-scope">
 
       <div  class="ng-scope">
 
 
 
         <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>
 
         <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>
 
 
 
           <el-table-column label="交易订单" >
 
           <el-table-column label="交易订单" >
 
-            <template slot-scope="{row, $index}">
 
+            <template slot-scope="{row}">
 
               <span>{{row.id}}</span>
 
               <span>{{row.id}}</span>
 
             </template>
 
             </template>
 
           </el-table-column>
 
           </el-table-column>
 
           <el-table-column label="培训内容" >
 
           <el-table-column label="培训内容" >
 
-            <template slot-scope="{row, $index}">
 
+            <template slot-scope="{row}">
 
               <span>{{row.name}}</span>
 
               <span>{{row.name}}</span>
 
             </template>
 
             </template>
 
           </el-table-column>
 
           </el-table-column>
 
 
 
           <el-table-column label="证书类型" >
 
           <el-table-column label="证书类型" >
 
-            <template slot-scope="{row, $index}">
 
+            <template slot-scope="{row}">
 
               <span>{{row.type}}-{{row.nd}}</span>
 
               <span>{{row.type}}-{{row.nd}}</span>
 
             </template>
 
             </template>
 
           </el-table-column>
 
           </el-table-column>
 
 
 
           <el-table-column label="学时">
 
           <el-table-column label="学时">
 
-            <template slot-scope="{row, $index}">
 
+            <template slot-scope="{row}">
 
               <span>{{row.totalXs/10}}</span>
 
               <span>{{row.totalXs/10}}</span>
 
             </template>
 
             </template>
 
           </el-table-column>
 
           </el-table-column>
 
@@ -49,8 +47,13 @@
 
             </template>
 
             </template>
 
           </el-table-column>
 
           </el-table-column>
 
         </el-table>
 
         </el-table>
 
+        <div class="mb10 mt20 text-xs text-right text-red-400">
 
+          <span class="p-ico2 worm-ico-o"></span>
 
+          注：未付款的订单设置3小时时限,3小时过后未付的订单就不再显示。
 
+        </div>
 
 
 
         <el-pagination
 
         <el-pagination
 
+          class="m-pages"
 
             @current-change="handleCurrentChange"
 
             @current-change="handleCurrentChange"
 
             :current-page="page"
 
             :current-page="page"
 
            :page-size="size"
 
            :page-size="size"

+ 254 - 201
src/containers/center/setting/index.vue
View File 

@@ -1,208 +1,257 @@
 
 <template>
 
 <template>
 
   <div class="m-right-block">
 
   <div class="m-right-block">
 
     <div class="right-block-bd">
 
     <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-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>
 
-
 
-            <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"  class="confirm" @click="doSavePassword()">
 
-                 确认修改
 
-                </el-button>
 
-            </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>
 
-
 
-            <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"  class="confirm" @click="doSavePhone()">
 
-                 确认修改
 
-                </el-button>
 
-            </el-form-item>
 
-
 
-          </el-form>
 
-        </div>
 
-
 
+      <div class="text-xl leading-10 pb-4 text-blue">
 
+        <p>账号设置</p>
 
+      </div>
 
 
 
+      <div class="m-account">
 
+        <el-tabs tabPosition="left" @tab-click="handleClick">
 
+          <el-tab-pane label="基础资料">
 
+            <div v-if="show===1" class="lwh-ul-form">
 
+              <el-form label-width="150px" 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>
 
+                    <el-form-item label="姓名">
 
+                      <span>{{userInfo.nickname}}</span>
 
+                      <!-- <el-input v-model="userInfo.nickname" placeholder="请输入用户名" disabled="disabled"></el-input> -->
 
+                    </el-form-item>
 
+                    <!-- <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">
 
+                    <el-form-item label="证件号">
 
+                      <span>{{userInfo.cardId||'未知'}}</span>
 
+                    </el-form-item>
 
+                    <!-- <span class="l-t">证件号：</span>{{userInfo.cardId||'未知'}}</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> -->
 
+                    <el-form-item label="手机号码">
 
+                      <span>{{userInfo.phone}}</span>
 
+                    </el-form-item>
 
+                  </li>
 
+                  <li>
 
+                    <!-- <span class="l-t"><i></i>性别：</span> -->
 
+                    <!-- <span class="sex">
 
+                      <el-radio-group v-model="userInfo.gender">
 
+                        <el-radio-button label="男"></el-radio-button>
 
+                        <el-radio-button label="女"></el-radio-button>
 
+                      </el-radio-group>
 
+                    </span> -->
 
+                    <el-form-item label="证件号">
 
+                      <el-radio-group v-model="userInfo.gender">
 
+                        <el-radio-button label="男"></el-radio-button>
 
+                        <el-radio-button label="女"></el-radio-button>
 
+                      </el-radio-group>
 
+                    </el-form-item>
 
+                  </li>
 
+                  <li>
 
+                    <el-form-item label="头像">
 
+                      <img :src="userInfo.headImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.headImg)">
 
+                      <do-upload @onFinish="setHeadImg" placeholder="上传头像"> </do-upload>
 
+                    </el-form-item>
 
+                  </li>
 
+                  <li>
 
+                    <el-form-item label="毕业照">
 
+                      <img :src="userInfo.graduateImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.graduateImg)">
 
+                      <do-upload @onFinish="setGraduateImg" placeholder="上传毕业照"> </do-upload>
 
+                    </el-form-item>
 
+                  </li>
 
+                  <li class="txt-r">
 
+                    <span class="l-t"></span>注：<i></i>只有头像、性别、毕业照可以修改
 
+                  </li>
 
+                  <li class="mt20">
 
+                    <span class="l-t"></span>
 
+                    <el-form-item>
 
+                      <el-button type="primary" class="confirm" @click="doSaveBaseInfo()">保 存</el-button>
 
+                    </el-form-item>
 
+                  </li>
 
+                </ul>
 
+              </el-form>
 
+            </div>
 
+          </el-tab-pane>
 
+          <el-tab-pane label="实名认证">
 
+            <div v-if="show===2" class="lwh-ul-form ng-scope">
 
+              <el-form name="user" label-width="150px" 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 ng-scope">
 
+                  <!-- <li>
 
+                    <span class="l-t">身份证：</span>
 
+                    <input v-model="userInfo.cardId" class="ipt1" disabled />
 
+                  </li>
 
+                  <li>
 
+                    <span class="l-t">姓名：</span>
 
+                    <input v-model="userInfo.nickname" class="ipt1" disabled />
 
+                  </li>
 
+                  <li>
 
+                    <span class="l-t">手机号：</span>
 
+                    <input v-model="userInfo.phone" class="ipt1" disabled />
 
+                  </li> -->
 
+                  <el-form-item label="身份证">
 
+                    <span>{{userInfo.cardId}}</span>
 
+                  </el-form-item>
 
+                  <el-form-item label="姓名">
 
+                    <span>{{userInfo.nickname}}</span>
 
+                  </el-form-item>
 
+                  <el-form-item label="手机号">
 
+                    <span>{{userInfo.phone}}</span>
 
+                  </el-form-item>
 
+
 
+                  <el-form-item label="身份证正面">
 
+                    <img :src="userInfo.cardImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.cardImg)">
 
+                    <do-upload @onFinish="setCardImg" placeholder="身份证正面"> </do-upload>
 
+                  </el-form-item>
 
+
 
+                  <el-form-item label="身份证背面">
 
+                    <img :src="userInfo.cardBackImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.cardBackImg)">
 
+                    <do-upload @onFinish="setCardBackImg" placeholder="身份证背面"> </do-upload>
 
+                  </el-form-item>
 
+
 
+                  <el-form-item>
 
+                    <el-button type="primary" class="confirm" @click="identify()" v-if="!userInfo.identify">实名认证</el-button>
 
+                    <el-button type="text" v-else >已经完成实名认证</el-button>
 
+                  </el-form-item>
 
+
 
+                  <!-- <li>
 
+                    <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>
 
+              </el-form>
 
+            </div>
 
+          </el-tab-pane >
 
+          <el-tab-pane label="额外信息">
 
+            <div v-if="show===3" >
 
+              <el-form ref="elForm" label-width="150px" :inline="false"  class="">
 
+                <el-form-item label="详细地址" prop="address" >
 
+                  <el-input placeholder="详细地址" v-model="userInfo.address " class="pass-input">
 
+                  </el-input>
 
+                </el-form-item>
 
+
 
+                <el-form-item label="邮政编码" prop="postalCode" >
 
+                  <el-input placeholder="邮政编码" v-model="userInfo.postalCode " class="pass-input">
 
+                  </el-input>
 
+                </el-form-item>
 
+
 
+
 
+                <el-form-item label="工作年限" prop="years" >
 
+                  <el-input placeholder="工作年限" v-model="userInfo.years " class="pass-input">
 
+                  </el-input>
 
+                </el-form-item>
 
+
 
+                <el-form-item label="工作单位" prop="company" >
 
+                  <el-input placeholder="工作单位" v-model="userInfo.company " class="pass-input">
 
+                  </el-input>
 
+                </el-form-item>
 
+
 
+                <el-form-item label="最高学历" prop="oldPass" >
 
+                  <el-input placeholder="最高学历" v-model="userInfo.education " class="pass-input">
 
+                  </el-input>
 
+                </el-form-item>
 
+
 
+                <el-form-item   label="" prop="rePass">
 
+                  <el-button type="primary"  class="confirm" @click="saveMoreInfo()">
 
+                    确认修改
 
+                    </el-button>
 
+                </el-form-item>
 
+              </el-form>
 
+
 
+            </div>
 
+          </el-tab-pane>
 
+
 
+          <el-tab-pane label="密码修改">
 
+            <div v-if="show===4" class="ng-scope">
 
+              <el-form ref="elForm" label-width="150px" :inline="false" :model="passForm" :rules="passRules">
 
+                <el-form-item label="输入旧密码" 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="输入新密码" 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="确认新密码" 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="" prop="rePass">
 
+                  <el-button type="primary"  class="confirm" @click="doSavePassword()">
 
+                    确认修改
 
+                    </el-button>
 
+                </el-form-item>
 
+
 
+              </el-form>
 
+            </div>
 
+          </el-tab-pane>
 
+          <el-tab-pane label="手机修改">
 
+            <div v-if="show===5" class="ng-scope">
 
+              <el-form ref="elFormPhone" label-width="150px" :inline="false" :model="phoneForm" :rules="phoneRules">
 
+                <el-form-item label="输入新手机" 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="短信检验码" 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="" prop="code" >
 
+                  <span style="color: red;">注意：手机必须本人实名认证手机</span>
 
+                </el-form-item>
 
+                <el-form-item   label="" prop="rePass">
 
+                  <el-button type="primary"  class="confirm" @click="doSavePhone()">
 
+                    确认修改
 
+                    </el-button>
 
+                </el-form-item>
 
+
 
+              </el-form>
 
+            </div>
 
+          </el-tab-pane>
 
+        </el-tabs>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
 
 
@@ -271,6 +320,10 @@
 
     components:{DoUpload,UploadImage,ImgView},
 
     components:{DoUpload,UploadImage,ImgView},
 
     methods: {
 
     methods: {
 
        ...mapActions("user", ["saveBaseInfo"]),
 
        ...mapActions("user", ["saveBaseInfo"]),
 
+      handleClick(tag){
 
+        const mapper = { '基础资料': 1, '实名认证': 2, '额外信息':3 , '密码修改': 4, '手机修改': 5 };
 
+        this.show = mapper[tag.label];
 
+      },
 
       isPhone( ){
 
       isPhone( ){
 
         let phone = this.userInfo.phone;
 
         let phone = this.userInfo.phone;
 
         return !phone||/^1[0-9]{10}$/.test(phone)
 
         return !phone||/^1[0-9]{10}$/.test(phone)

+ 11 - 7
src/containers/center/sign/index.vue
View File 

@@ -1,22 +1,20 @@
 
 <template>
 
 <template>
 
   <div class="m-right-block" style="position: relative;">
 
   <div class="m-right-block" style="position: relative;">
 
     <div class="right-block-bd">
 
     <div class="right-block-bd">
 
-      <div class="mb10 tc mt20">
 
-        <span class="p-ico2 worm-ico-o"></span>
 
-        注：<span class="txt-o"></span>拥有证书编号才能打印证书
 
+      <div class="text-xl leading-10 pb-4 text-blue">
 
+        <p>学时证明</p>
 
       </div>
 
       </div>
 
-
 
       <div  class="ng-scope">
 
       <div  class="ng-scope">
 
 
 
         <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>
 
         <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>
 
           <el-table-column label="培训内容" align="center" width="100" >
 
           <el-table-column label="培训内容" align="center" width="100" >
 
-            <template slot-scope="{row, $index}">
 
+            <template slot-scope="{row}">
 
               <span>{{row.name}}</span>
 
               <span>{{row.name}}</span>
 
             </template>
 
             </template>
 
           </el-table-column>
 
           </el-table-column>
 
 
 
           <el-table-column label="证书类型" align="center" width="150">
 
           <el-table-column label="证书类型" align="center" width="150">
 
-            <template slot-scope="{row, $index}">
 
+            <template slot-scope="{row}">
 
               <span>{{row.type}}【{{row.nd}}】</span>
 
               <span>{{row.type}}【{{row.nd}}】</span>
 
             </template>
 
             </template>
 
           </el-table-column>
 
           </el-table-column>
 
@@ -28,7 +26,7 @@
 
           </el-table-column>
 
           </el-table-column>
 
 
 
           <el-table-column label="学时" width="80" align="center">
 
           <el-table-column label="学时" width="80" align="center">
 
-            <template slot-scope="{row, $index}">
 
+            <template slot-scope="{row}">
 
               <span>{{row.totalXs/10}}</span>
 
               <span>{{row.totalXs/10}}</span>
 
             </template>
 
             </template>
 
           </el-table-column>
 
           </el-table-column>
 
@@ -55,7 +53,13 @@
 
           </el-table-column>
 
           </el-table-column>
 
         </el-table>
 
         </el-table>
 
 
 
+        <div class="mb10 mt20 text-xs text-right text-red-400">
 
+          <span class="p-ico2 worm-ico-o"></span>
 
+          注：<span class="txt-o"></span>拥有证书编号才能打印证书
 
+        </div>
 
+
 
         <el-pagination
 
         <el-pagination
 
+          class="m-pages"
 
             @current-change="handleCurrentChange"
 
             @current-change="handleCurrentChange"
 
             :current-page="page"
 
             :current-page="page"
 
            :page-size="size"
 
            :page-size="size"

+ 12 - 6
src/containers/login/components/isLogin.vue
View File 

@@ -1,15 +1,15 @@
 
 <template>
 
 <template>
 
   <div class="course-my ng-scope">
 
   <div class="course-my ng-scope">
 
-      <div class="tc mt20">
 
-        <div class="pt20 fs18">
 
-          当前用户
 
-          <span :title="user.nickname" style="display:inline" >
 
+      <div class="tc my-2">
 
+        <div class="pt20 fs18 text-yellow-300">
 
+          <div class="text-xs">当前用户</div>
 
+          <div class="text-2xl" :title="user.nickname" >
 
             {{user.nickname}}
 
             {{user.nickname}}
 
-          </span>
 
+          </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
 
 
-    <el-row class="login-entry" style="width: 100%;">
 
+    <el-row class="" style="width: 100%;">
 
       <el-col :span="12" class="p10">
 
       <el-col :span="12" class="p10">
 
         <button class="btn-b-b fs15" @click="gotoPage('/center/home')">个人中心</button>
 
         <button class="btn-b-b fs15" @click="gotoPage('/center/home')">个人中心</button>
 
       </el-col>
 
       </el-col>
 
@@ -92,3 +92,9 @@
 
 <style>
 
 <style>
 
 @import url("./loginBase.css");
 
 @import url("./loginBase.css");
 
 </style>
 
 </style>
 
+<style lang="less" scoped>
 
+.btn-b-b{
 
+  box-sizing: border-box;
 
+  border: 2px solid #fde047;
 
+}
 
+</style>

+ 49 - 45
src/containers/login/components/unLogin.vue
View File 

@@ -1,53 +1,40 @@
 
 <template>
 
 <template>
 
-  <div class="m-login opacity-bg fr">
 
+  <div class="m-login opacity-bg">
 
     <div ng-if="!sureUseLogin" class="ng-scope">
 
     <div ng-if="!sureUseLogin" class="ng-scope">
 
       <div class="tit">学员登录</div>
 
       <div class="tit">学员登录</div>
 
 
 
       <div  autocomplete="off" class="ng-pristine ng-invalid ng-invalid-required">
 
       <div  autocomplete="off" class="ng-pristine ng-invalid ng-invalid-required">
 
-        <ul class="login-form login-form-1">
 
-          <li><span class="p-ico user-ico"></span>
 
-            <input type="text"  v-model="username" class="ui-ipt ng-pristine ng-valid" placeholder="手机号码">
 
-            <div class="wrong-tips ng-hide" v-show="err.loginError === 'two'">输入的用户名或者密码不正确，请确认</div>
 
-            <div class="wrong-tips ng-hide" v-show="err.loginErrorEnter">请输入正确的用户名密码以及验证码！</div>
 
-            <div class="wrong-tips ng-hide" v-show="err.loginError === 'one'">输入的用户名或者密码不正确，请确认</div>
 
-          </li>
 
-          <li>
 
-            <span class="p-ico code-ico"></span>
 
-            <span href="javascript:void(0)" style="cursor:pointer" class="p-ico ng-scope"></span>
 
-            <input type="password"  v-model="password" class="ui-ipt ng-scope ng-pristine ng-valid"
 
-              placeholder="密码">
 
-          </li>
 
-
 
-         <li>
 
-            <span class="p-ico picode-ico" @click="changeCode()"></span>
 
-            <input type="text"  v-model="code" class="ui-ipt ipt-s" placeholder="图形验证码" @click="!codeShow&&changeCode()" required="required">
 
-
 
-            <div class="wrong-tips ng-hide" v-show="codeShow && code ==''">请输入正确的验证码，看不清？点击验证码刷新</div>
 
-
 
-            <span class="qr-code ng-scope" @click="changeCode()">
 
-              <img alt="验证码"  :src="codeShow" v-show="codeShow">
 
-            </span>
 
-          </li>
 
-
 
-          <li class="clear mt10">
 
-            <div class="fl">
 
-              <label class="ui-label " :class="rememberUse?'checked':''">
 
-                <input type="checkbox" class="checkbox  ng-valid" v-model="rememberUse">
 
-                <a class="checkbox-a"> </a>
 
-                <span class="ipt-txt">记住帐号和密码</span>
 
-              </label>
 
-            </div><a class="ag fr" @click="goReset">忘记密码？</a>
 
-          </li>
 
-
 
-          <li class="last">
 
-            <button class="btn-normal btn-login lwh-disabled" @click="dologin">登 录</button>
 
-          </li>
 
-        </ul>
 
+        <div class="p-4">
 
+          <el-form class="form">
 
+            <el-form-item>
 
+              <el-input placeholder="手机号码" v-model="username">
 
+                <template slot="prepend"><i class="el-icon-user"></i></template>
 
+              </el-input>
 
+            </el-form-item>
 
+            <el-form-item>
 
+              <el-input placeholder="密码" v-model="password">
 
+                <template slot="prepend"><i class="el-icon-lock"></i></template>
 
+              </el-input>
 
+            </el-form-item>
 
+            <el-form-item>
 
+              <div  class="flex">
 
+                <el-input class="flex-auto mr-2" placeholder="图形验证码" v-model="code">
 
+                  <template slot="prepend"><i @click="changeCode" class="el-icon-refresh-right  cursor-pointer"></i></template>
 
+                </el-input>
 
+                <span class="verify-code bg-white rounded ng-scope cursor-pointer flex-none" @click="changeCode()">
 
+                  <img alt="验证码"  :src="codeShow" v-show="codeShow">
 
+                </span>
 
+              </div>
 
+            </el-form-item>
 
+            <el-form-item>
 
+              <el-button type="warning" @click="dologin">登 录</el-button>
 
+              <div class="" style="font-size: 10px; text-align: center;">没有学员/单位管理员帐号？
 
+                <a @click="goRegist()" class="text-yellow-300">立即注册</a>
 
+              </div>
 
+            </el-form-item>
 
+          </el-form>
 
+        </div>
 
       </div>
 
       </div>
 
-
 
-
 
-      <div class="mt10 ng-scope" style="font-size: 10px; text-align: center;">没有学员/单位管理员帐号？
 
-        <a @click="goRegist()" class="ao b">立即注册</a></div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </template>
 
 </template>
 
@@ -78,7 +65,9 @@
 
         codeShow:''
 
         codeShow:''
 
       }
 
       }
 
     },
 
     },
 
-
 
+    created(){
 
+      this.changeCode();
 
+    },
 
     methods: {
 
     methods: {
 
       dologin() {
 
       dologin() {
 
         let mpass = this.password.replace(/(^\s*)|(\s*$)/g, "");
 
         let mpass = this.password.replace(/(^\s*)|(\s*$)/g, "");
 
@@ -118,3 +107,18 @@
 
 <style>
 
 <style>
 
   @import url("./loginBase.css");
 
   @import url("./loginBase.css");
 
 </style>
 
 </style>
 
+<style lang="less" scoped>
 
+.form{
 
+  & /deep/ .el-input{
 
+    .el-input-group__prepend {
 
+      padding: 0 12px;
 
+    }
 
+  }
 
+  .verify-code{
 
+    img{
 
+      width: 90px;
 
+      height: 40px;
 
+    }
 
+  }
 
+}
 
+</style>

+ 46 - 50
src/containers/login/login.vue
View File 

@@ -1,60 +1,45 @@
 
 <template>
 
 <template>
 
-  <div class="ng-scope">
 
+  <div class="ng-scope pb-8">
 
     <navbar :user="userInfo" @openLoginDialog="openLoginDialog"></navbar>
 
     <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">
 
+    <div class="p-wrap-full clear pt30">
 
+      <div class="w-full">
 
+        <img class="rounded-xl" src="/static/images/login-banner-1.jpg"/>
 
+      </div>
 
+    </div>
 
+    <div class="p-wrap-full pt-6 flex">
 
+      <div class="mr-6">
 
+        <div class="m-login opacity-bg mb-4">
 
           <is-login v-if="loginOk" :user="userInfo" @logout="logout"></is-login>
 
           <is-login v-if="loginOk" :user="userInfo" @logout="logout"></is-login>
 
           <un-login v-else @login="login" :err="err"></un-login>
 
           <un-login v-else @login="login" :err="err"></un-login>
 
         </div>
 
         </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 class="bg-white flex-auto rounded-xl px-6 py-2">
 
+          <div class="text-xl text-center leading-10 pb-2 border-gray-200 border-b text-blue">
 
+            证书查询
 
           </div>
 
           </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 class="text-center p-2">
 
+            <el-button @click="gotoOutlink()" type="primary"> 前往证书查询 </el-button>
 
           </div>
 
           </div>
 
-        </el-col>
 
-      </el-row>
 
+        </div>
 
+      </div>
 
+      <div class="bg-white flex-auto rounded-xl px-6 py-2" >
 
+        <div class="text-xl text-center leading-10 pb-2 border-gray-200 border-b text-blue">
 
+            新闻通知
 
+        </div>
 
+        <el-table :data="postList"  highlight-current-row
 
+        :show-header="false" min-height="310px" style="overflow: hidden;" >
 
+          <el-table-column class-name="t-column" min-width="600px">
 
+            <template slot-scope="{row, $index}">
 
+              <span class="px-4 py-6 cursor-pointer hover:text-blue-light" @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>
 
     </div>
 
     </div>
 
-
 
     <el-dialog
 
     <el-dialog
 
       class="fc tc login-dialog"
 
       class="fc tc login-dialog"
 
       :visible.sync="loginDialog"
 
       :visible.sync="loginDialog"
 
@@ -78,6 +63,7 @@ import navbar from "@/components/nav/navbar.vue";
 
 import Friendlink from "./components/friendlink/friendlink.vue";
 
 import Friendlink from "./components/friendlink/friendlink.vue";
 
 import { httpServer } from "@/components/httpServer/httpServer.js";
 
 import { httpServer } from "@/components/httpServer/httpServer.js";
 
 import { mapGetters,mapActions } from "vuex";
 
 import { mapGetters,mapActions } from "vuex";
 
+import settings from '@/settings.js';
 
 
 
 export default {
 
 export default {
 
   components: {
 
   components: {
 
@@ -156,6 +142,9 @@ export default {
 
     openLoginDialog() {
 
     openLoginDialog() {
 
       this.loginDialog = true
 
       this.loginDialog = true
 
     },
 
     },
 
+    gotoOutlink(){
 
+      window.open( settings.outLink, '_brank');
 
+    },
 
   },
 
   },
 
 };
 
 };
 
 </script>
 
 </script>
 
@@ -194,5 +183,12 @@ export default {
 
     height: 64%;
 
     height: 64%;
 
     margin: 11px auto 0;
 
     margin: 11px auto 0;
 
 }
 
 }
 
-
 
+</style>
 
+<style lang="less" scoped>
 
+.ng-scope{
 
+  color: red;
 
+  & /deep/ .t-column{
 
+      padding: 0;
 
+    }
 
+}
 
 </style>
 
 </style>

+ 98 - 105
src/containers/register/register.vue
View File 

@@ -2,120 +2,112 @@
 
   @import "./register.less";
 
   @import "./register.less";
 
 
 
 </style>
 
 </style>
 
+<style lang="less" scoped>
 
+.form{
 
+  .formver {
 
+    position: absolute;
 
+    left: 0;
 
+    bottom: -24px;
 
+    color: red;
 
+    height: 28px;
 
+    line-height: 28px;
 
+    font-size: 0.8rem;
 
+  }
 
+  .code-case {
 
+    background: #e6e6e6;
 
+    height: 14px;
 
+    line-height: 14px;
 
+    width: 311px;
 
+    color: #666;
 
+    overflow: hidden;
 
+
 
+    em {
 
+      display: inline-block;
 
+      width: 103px;
 
+      height: 14px;
 
+      text-align: center;
 
+      font-size: 12px;
 
+      line-height: 14px;
 
+      font-style: normal;
 
+      float: left;
 
+      color: #666;
 
+      border-right: 1px solid #fff;
 
+    }
 
+  }
 
+  .code-case .last {
 
+    border-right: 0;
 
+  }
 
+  .code-case .c1 {
 
+    background: #ff6633;
 
+    color: #fff;
 
+  }
 
+  .code-case .c2 {
 
+    background: #ffcc33;
 
+    color: #fff;
 
+  }
 
+  .code-case .c3 {
 
+    background: #3290d4;
 
+    color: #fff;
 
+  }
 
+}
 
+</style>
 
 
 
 <template>
 
 <template>
 
   <div class="main">
 
   <div class="main">
 
     <navbar :user="user"></navbar>
 
     <navbar :user="user"></navbar>
 
     <div class="main-reg">
 
     <div class="main-reg">
 
-      <form ref="regForm" style="margin: 50px auto;">
 
-        <!-- active0 -->
 
-        <ul class="fhlist" style="width: 600px;margin:0 auto">
 
-          <li class="mt10">
 
-            <span class="title">
 
-              <em class="fvx">*</em>手机号</span>
 
-
 
-            <input type="text" name="phone" v-model="phone" class="ui-ipt iptform" :disabled="!!count" placeholder="输入手机">
 
-
 
-            <span class="formver ng-scope" v-if="phone && phone.length!=11">
 
-              <span class="p-ico ico-formver"></span>
 
-              <span class="p-ico ico-worm"></span>请输入合法手机
 
-            </span>
 
-          </li>
 
-
 
-          <li class="mt10">
 
-            <span class="title"><em class="fvx">*</em>校验码</span>
 
-            <input type="text" name="code" v-model="code" class="ui-ipt iptform2" placeholder="输入校验码">
 
-
 
-            <el-button class="auth-code" type="primary" v-if="phone.length!=11" disabled>校验码</el-button>
 
-            <el-button class="auth-code" type="primary" v-else-if="!count" @click="getCode()">校验码</el-button>
 
-            <el-button class="auth-code" type="primary" disabled v-else>{{count}} s</el-button>
 
-
 
-            <!-- <span class="formver ng-scope" v-if="phone.length==11 && code.length<4">
 
-                    <span class="p-ico ico-formver"></span>
 
-                    <span class="p-ico ico-worm"></span>请输入校验码
 
-                  </span> -->
 
-          </li>
 
-
 
-          <li class="mt10">
 
-            <span class="title"><em class="fvx">*</em>姓名</span>
 
-            <input type="text" name="name" v-model="name" class="ui-ipt iptform" placeholder="输入真实姓名" clearable>
 
-          </li>
 
-
 
-          <li class="mt10">
 
-            <span class="title"><em class="fvx">*</em>身份证</span>
 
-            <input type="text" name="cardId" v-model="cardId" class="ui-ipt iptform" placeholder="输入证件号" clearable>
 
-
 
-            <span class="formver ng-scope" v-if="!is_ok_card(cardId)">
 
-              <span class="p-ico ico-formver"></span>
 
-              <span class="p-ico ico-worm"></span>请输入18位身份证号
 
-            </span>
 
-          </li>
 
-
 
-          <li class="mt10">
 
-            <span class="title"><em class="fvx">*</em>学历</span>
 
-            <input type="text" name="education" v-model="education" class="ui-ipt iptform" placeholder="输入学历" clearable>
 
-          </li>
 
-
 
-
 
-          <li class="mt10">
 
-            <span class="title"><em class="fvx">*</em>工作单位</span>
 
-            <input type="text" name="company" v-model="company" class="ui-ipt iptform" placeholder="输入工作单位" clearable>
 
-          </li>
 
-
 
-
 
-          <!--          <li class="mt10">
 
-                  <span class="title"><em class="fvx">*</em>证书编号</span>
 
-                  <input type="text" name="rzCode" v-model="rzCode" class="ui-ipt iptform" placeholder="输入证书编号" clearable>
 
-                </li> -->
 
-
 
-
 
-
 
-
 
-          <li class="mb5">
 
-            <span class="title">
 
-              <em class="fvx">*</em>账户密码</span>
 
-            <input type="password" v-model="password" autocomplete="new-password" class="ui-ipt iptform ng-pristine ng-valid-pattern ng-invalid ng-invalid-required"
 
-              placeholder="请填写登录密码" required="required">
 
-
 
-            <span class="formver ng-scope" style="width:300px;font-size: 13px;" v-if="password&&password.length<6">
 
-              <span class="p-ico ico-formver"></span>
 
-              <span class="p-ico ico-worm"></span>请输入6~18位由字母、数字组合的登录密码！
 
-            </span>
 
-          </li>
 
-
 
-          <li class="mb5">
 
-            <span class="title">&nbsp;</span>
 
-            <span class="code-case" style="float: left; margin-left: 120px;">
 
+      <el-form class="w-2/4 m-auto my-12 form" label-width="100px">
 
+        <div class="text-center text-2xl mb-4 text-blue">账号注册</div>
 
+        <el-form-item label="手机号" required>
 
+          <el-input  v-model="phone" ></el-input>
 
+          <span class="formver ng-scope" v-if="phone && phone.length!=11">
 
+            请输入合法手机
 
+          </span>
 
+        </el-form-item>
 
+        <el-form-item label="校验码" required>
 
+          <div class="flex">
 
+            <el-input class="flex-auto mr-2" v-model="code" ></el-input>
 
+            <el-button class="auth-code flex-none" type="primary" @click="getCode()"  :disabled="phone.length!=11 || count">{{ !count ?  '校验码' : `${count}s`}}</el-button>
 
+          </div>
 
+        </el-form-item>
 
+        <el-form-item label="姓名" required>
 
+          <el-input  v-model="name" placeholder="请输入真实姓名" ></el-input>
 
+        </el-form-item>
 
+        <el-form-item label="身份证" required>
 
+          <el-input  v-model="cardId" placeholder="请输入证件号" ></el-input>
 
+          <span class="formver ng-scope" v-if="cardId && !is_ok_card(cardId)">
 
+            请输入18位身份证号
 
+          </span>
 
+        </el-form-item>
 
+        <el-form-item label="学历" required>
 
+          <el-input  v-model="education" placeholder="请输入学历" ></el-input>
 
+        </el-form-item>
 
+        <el-form-item label="工作单位" required>
 
+          <el-input  v-model="company" placeholder="请输入工作单位" ></el-input>
 
+        </el-form-item>
 
+        <el-form-item label="账户密码" required>
 
+          <div style="line-height:0;">
 
+            <el-input  type="password" v-model="password" placeholder="请输入账户密码" ></el-input>
 
+            <span class="code-case">
 
               <em :class="{'c1':passwordLevel==='sick' && password,'c2':passwordLevel==='middle','c3':passwordLevel==='strong'}">低</em>
 
               <em :class="{'c1':passwordLevel==='sick' && password,'c2':passwordLevel==='middle','c3':passwordLevel==='strong'}">低</em>
 
               <em :class="{'c2':passwordLevel==='middle','c3':passwordLevel==='strong'}">中</em>
 
               <em :class="{'c2':passwordLevel==='middle','c3':passwordLevel==='strong'}">中</em>
 
               <em class="last" :class="{'c3':passwordLevel==='strong'}">高</em>
 
               <em class="last" :class="{'c3':passwordLevel==='strong'}">高</em>
 
             </span>
 
             </span>
 
-          </li>
 
-
 
-          <li class="mb5">
 
-            <span class="title"><em class="fvx">*</em>确认密码</span>
 
-            <input type="password" name="confirmPassword" validate-password="" v-model="confirmPassword" ng-required="true"
 
-              class="ui-ipt iptform ng-isolate-scope ng-pristine ng-invalid ng-invalid-required" placeholder="请填写登录密码"
 
-              required="required">
 
-
 
-            <span class="formver ng-scope" v-if="confirmPassword && confirmPassword!= password">
 
-              <span class="p-ico ico-formver"></span>
 
-              <span class="p-ico ico-worm"></span>前后密码不一致！
 
+            <span class="formver ng-scope" style="width:300px;font-size: 13px;" v-if="password&&password.length<6">
 
+              请输入6~18位由字母、数字组合的登录密码！
 
             </span>
 
             </span>
 
-          </li>
 
-
 
-          <li class="mb5">
 
-            <span class="title">&nbsp;</span>
 
-            <span style="font-size: 10px;color: red; text-align: center;">{{err}}</span>
 
-          </li>
 
-
 
-          <li class="m-t-20">
 
-            <span class="title">&nbsp;</span>
 
-            <input class="ui-btn btn-r" type="button" value="提 交" :disabled="!cansubmit()" @click="submitData()">
 
-          </li>
 
-        </ul>
 
-      </form>
 
-
 
+          </div>
 
+        </el-form-item>
 
+        <el-form-item label="确认密码" required>
 
+          <el-input  type="password" v-model="confirmPassword" placeholder="确认登录密码"></el-input>
 
+          <span class="formver ng-scope" v-if="confirmPassword && confirmPassword!= password">
 
+              前后密码不一致！
 
+            </span>
 
+        </el-form-item>
 
+        <el-form-item>
 
+          <el-button type="primary" :disabled="!cansubmit()" @click="submitData()">提 交</el-button>
 
+        </el-form-item>
 
+      </el-form>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </template>
 
 </template>
 
@@ -139,7 +131,8 @@
 
         name: '',
 
         name: '',
 
         passwordLevel: 'sick',
 
         passwordLevel: 'sick',
 
         password: '',
 
         password: '',
 
-
 
+        education: '',
 
+        company: '',
 
         confirmPassword: '',
 
         confirmPassword: '',
 
         phone: '',
 
         phone: '',
 
         code: "",
 
         code: "",

+ 1 - 0
src/main.js
View File 

@@ -1,5 +1,6 @@
 
 // The Vue build version to load with the `import` command
 
 // The Vue build version to load with the `import` command
 
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 
+import './tailwind.css';
 
 import Vue from 'vue'
 
 import Vue from 'vue'
 
 import App from './App'
 
 import App from './App'
 
 import router from './router'
 
 import router from './router'

+ 0 - 0
src/setting.js
View File


+ 11 - 0
src/settings.js
View File 

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

+ 890 - 0
src/tailwind.css
View File 

@@ -0,0 +1,890 @@
 
+/*
 
+! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com
 
+*/
 
+
 
+/*
 
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 
+*/
 
+
 
+*,
 
+::before,
 
+::after {
 
+  -webkit-box-sizing: border-box;
 
+          box-sizing: border-box;
 
+  /* 1 */
 
+  border-width: 0;
 
+  /* 2 */
 
+  border-style: solid;
 
+  /* 2 */
 
+  border-color: #e5e7eb;
 
+  /* 2 */
 
+}
 
+
 
+::before,
 
+::after {
 
+  --tw-content: '';
 
+}
 
+
 
+/*
 
+1. Use a consistent sensible line-height in all browsers.
 
+2. Prevent adjustments of font size after orientation changes in iOS.
 
+3. Use a more readable tab size.
 
+4. Use the user's configured `sans` font-family by default.
 
+*/
 
+
 
+html {
 
+  line-height: 1.5;
 
+  /* 1 */
 
+  -webkit-text-size-adjust: 100%;
 
+  /* 2 */
 
+  -moz-tab-size: 4;
 
+  /* 3 */
 
+  -o-tab-size: 4;
 
+     tab-size: 4;
 
+  /* 3 */
 
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
+  /* 4 */
 
+}
 
+
 
+/*
 
+1. Remove the margin in all browsers.
 
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
 
+*/
 
+
 
+body {
 
+  margin: 0;
 
+  /* 1 */
 
+  line-height: inherit;
 
+  /* 2 */
 
+}
 
+
 
+/*
 
+1. Add the correct height in Firefox.
 
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
 
+3. Ensure horizontal rules are visible by default.
 
+*/
 
+
 
+hr {
 
+  height: 0;
 
+  /* 1 */
 
+  color: inherit;
 
+  /* 2 */
 
+  border-top-width: 1px;
 
+  /* 3 */
 
+}
 
+
 
+/*
 
+Add the correct text decoration in Chrome, Edge, and Safari.
 
+*/
 
+
 
+abbr:where([title]) {
 
+  -webkit-text-decoration: underline dotted;
 
+          text-decoration: underline dotted;
 
+}
 
+
 
+/*
 
+Remove the default font size and weight for headings.
 
+*/
 
+
 
+h1,
 
+h2,
 
+h3,
 
+h4,
 
+h5,
 
+h6 {
 
+  font-size: inherit;
 
+  font-weight: inherit;
 
+}
 
+
 
+/*
 
+Reset links to optimize for opt-in styling instead of opt-out.
 
+*/
 
+
 
+a {
 
+  color: inherit;
 
+  text-decoration: inherit;
 
+}
 
+
 
+/*
 
+Add the correct font weight in Edge and Safari.
 
+*/
 
+
 
+b,
 
+strong {
 
+  font-weight: bolder;
 
+}
 
+
 
+/*
 
+1. Use the user's configured `mono` font family by default.
 
+2. Correct the odd `em` font sizing in all browsers.
 
+*/
 
+
 
+code,
 
+kbd,
 
+samp,
 
+pre {
 
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 
+  /* 1 */
 
+  font-size: 1em;
 
+  /* 2 */
 
+}
 
+
 
+/*
 
+Add the correct font size in all browsers.
 
+*/
 
+
 
+small {
 
+  font-size: 80%;
 
+}
 
+
 
+/*
 
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 
+*/
 
+
 
+sub,
 
+sup {
 
+  font-size: 75%;
 
+  line-height: 0;
 
+  position: relative;
 
+  vertical-align: baseline;
 
+}
 
+
 
+sub {
 
+  bottom: -0.25em;
 
+}
 
+
 
+sup {
 
+  top: -0.5em;
 
+}
 
+
 
+/*
 
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
 
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
 
+3. Remove gaps between table borders by default.
 
+*/
 
+
 
+table {
 
+  text-indent: 0;
 
+  /* 1 */
 
+  border-color: inherit;
 
+  /* 2 */
 
+  border-collapse: collapse;
 
+  /* 3 */
 
+}
 
+
 
+/*
 
+1. Change the font styles in all browsers.
 
+2. Remove the margin in Firefox and Safari.
 
+3. Remove default padding in all browsers.
 
+*/
 
+
 
+button,
 
+input,
 
+optgroup,
 
+select,
 
+textarea {
 
+  font-family: inherit;
 
+  /* 1 */
 
+  font-size: 100%;
 
+  /* 1 */
 
+  line-height: inherit;
 
+  /* 1 */
 
+  color: inherit;
 
+  /* 1 */
 
+  margin: 0;
 
+  /* 2 */
 
+  padding: 0;
 
+  /* 3 */
 
+}
 
+
 
+/*
 
+Remove the inheritance of text transform in Edge and Firefox.
 
+*/
 
+
 
+button,
 
+select {
 
+  text-transform: none;
 
+}
 
+
 
+/*
 
+1. Correct the inability to style clickable types in iOS and Safari.
 
+2. Remove default button styles.
 
+*/
 
+
 
+button,
 
+[type='button'],
 
+[type='reset'],
 
+[type='submit'] {
 
+  -webkit-appearance: button;
 
+  /* 1 */
 
+  background-color: transparent;
 
+  /* 2 */
 
+  background-image: none;
 
+  /* 2 */
 
+}
 
+
 
+/*
 
+Use the modern Firefox focus style for all focusable elements.
 
+*/
 
+
 
+:-moz-focusring {
 
+  outline: auto;
 
+}
 
+
 
+/*
 
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 
+*/
 
+
 
+:-moz-ui-invalid {
 
+  box-shadow: none;
 
+}
 
+
 
+/*
 
+Add the correct vertical alignment in Chrome and Firefox.
 
+*/
 
+
 
+progress {
 
+  vertical-align: baseline;
 
+}
 
+
 
+/*
 
+Correct the cursor style of increment and decrement buttons in Safari.
 
+*/
 
+
 
+::-webkit-inner-spin-button,
 
+::-webkit-outer-spin-button {
 
+  height: auto;
 
+}
 
+
 
+/*
 
+1. Correct the odd appearance in Chrome and Safari.
 
+2. Correct the outline style in Safari.
 
+*/
 
+
 
+[type='search'] {
 
+  -webkit-appearance: textfield;
 
+  /* 1 */
 
+  outline-offset: -2px;
 
+  /* 2 */
 
+}
 
+
 
+/*
 
+Remove the inner padding in Chrome and Safari on macOS.
 
+*/
 
+
 
+::-webkit-search-decoration {
 
+  -webkit-appearance: none;
 
+}
 
+
 
+/*
 
+1. Correct the inability to style clickable types in iOS and Safari.
 
+2. Change font properties to `inherit` in Safari.
 
+*/
 
+
 
+::-webkit-file-upload-button {
 
+  -webkit-appearance: button;
 
+  /* 1 */
 
+  font: inherit;
 
+  /* 2 */
 
+}
 
+
 
+/*
 
+Add the correct display in Chrome and Safari.
 
+*/
 
+
 
+summary {
 
+  display: list-item;
 
+}
 
+
 
+/*
 
+Removes the default spacing and border for appropriate elements.
 
+*/
 
+
 
+blockquote,
 
+dl,
 
+dd,
 
+h1,
 
+h2,
 
+h3,
 
+h4,
 
+h5,
 
+h6,
 
+hr,
 
+figure,
 
+p,
 
+pre {
 
+  margin: 0;
 
+}
 
+
 
+fieldset {
 
+  margin: 0;
 
+  padding: 0;
 
+}
 
+
 
+legend {
 
+  padding: 0;
 
+}
 
+
 
+ol,
 
+ul,
 
+menu {
 
+  list-style: none;
 
+  margin: 0;
 
+  padding: 0;
 
+}
 
+
 
+/*
 
+Prevent resizing textareas horizontally by default.
 
+*/
 
+
 
+textarea {
 
+  resize: vertical;
 
+}
 
+
 
+/*
 
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 
+2. Set the default placeholder color to the user's configured gray 400 color.
 
+*/
 
+
 
+input::-webkit-input-placeholder,
 
+textarea::-webkit-input-placeholder {
 
+  opacity: 1;
 
+  /* 1 */
 
+  color: #9ca3af;
 
+  /* 2 */
 
+}
 
+
 
+input::-moz-placeholder,
 
+textarea::-moz-placeholder {
 
+  opacity: 1;
 
+  /* 1 */
 
+  color: #9ca3af;
 
+  /* 2 */
 
+}
 
+
 
+input::-ms-input-placeholder,
 
+textarea::-ms-input-placeholder {
 
+  opacity: 1;
 
+  /* 1 */
 
+  color: #9ca3af;
 
+  /* 2 */
 
+}
 
+
 
+input::placeholder,
 
+textarea::placeholder {
 
+  opacity: 1;
 
+  /* 1 */
 
+  color: #9ca3af;
 
+  /* 2 */
 
+}
 
+
 
+/*
 
+Set the default cursor for buttons.
 
+*/
 
+
 
+button,
 
+[role="button"] {
 
+  cursor: pointer;
 
+}
 
+
 
+/*
 
+Make sure disabled buttons don't get the pointer cursor.
 
+*/
 
+
 
+:disabled {
 
+  cursor: default;
 
+}
 
+
 
+/*
 
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
 
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
 
+   This can trigger a poorly considered lint error in some tools but is included by design.
 
+*/
 
+
 
+img,
 
+svg,
 
+video,
 
+canvas,
 
+audio,
 
+iframe,
 
+embed,
 
+object {
 
+  display: block;
 
+  /* 1 */
 
+  vertical-align: middle;
 
+  /* 2 */
 
+}
 
+
 
+/*
 
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 
+*/
 
+
 
+img,
 
+video {
 
+  max-width: 100%;
 
+  height: auto;
 
+}
 
+
 
+/*
 
+Ensure the default browser behavior of the `hidden` attribute.
 
+*/
 
+
 
+[hidden] {
 
+  display: none;
 
+}
 
+
 
+*, ::before, ::after {
 
+  --tw-translate-x: 0;
 
+  --tw-translate-y: 0;
 
+  --tw-rotate: 0;
 
+  --tw-skew-x: 0;
 
+  --tw-skew-y: 0;
 
+  --tw-scale-x: 1;
 
+  --tw-scale-y: 1;
 
+  --tw-pan-x:  ;
 
+  --tw-pan-y:  ;
 
+  --tw-pinch-zoom:  ;
 
+  --tw-scroll-snap-strictness: proximity;
 
+  --tw-ordinal:  ;
 
+  --tw-slashed-zero:  ;
 
+  --tw-numeric-figure:  ;
 
+  --tw-numeric-spacing:  ;
 
+  --tw-numeric-fraction:  ;
 
+  --tw-ring-inset:  ;
 
+  --tw-ring-offset-width: 0px;
 
+  --tw-ring-offset-color: #fff;
 
+  --tw-ring-color: rgb(59 130 246 / 0.5);
 
+  --tw-ring-offset-shadow: 0 0 #0000;
 
+  --tw-ring-shadow: 0 0 #0000;
 
+  --tw-shadow: 0 0 #0000;
 
+  --tw-shadow-colored: 0 0 #0000;
 
+  --tw-blur:  ;
 
+  --tw-brightness:  ;
 
+  --tw-contrast:  ;
 
+  --tw-grayscale:  ;
 
+  --tw-hue-rotate:  ;
 
+  --tw-invert:  ;
 
+  --tw-saturate:  ;
 
+  --tw-sepia:  ;
 
+  --tw-drop-shadow:  ;
 
+  --tw-backdrop-blur:  ;
 
+  --tw-backdrop-brightness:  ;
 
+  --tw-backdrop-contrast:  ;
 
+  --tw-backdrop-grayscale:  ;
 
+  --tw-backdrop-hue-rotate:  ;
 
+  --tw-backdrop-invert:  ;
 
+  --tw-backdrop-opacity:  ;
 
+  --tw-backdrop-saturate:  ;
 
+  --tw-backdrop-sepia:  ;
 
+}
 
+
 
+.visible {
 
+  visibility: visible;
 
+}
 
+
 
+.fixed {
 
+  position: fixed;
 
+}
 
+
 
+.absolute {
 
+  position: absolute;
 
+}
 
+
 
+.relative {
 
+  position: relative;
 
+}
 
+
 
+.left-1 {
 
+  left: 0.25rem;
 
+}
 
+
 
+.top-1 {
 
+  top: 0.25rem;
 
+}
 
+
 
+.left-2 {
 
+  left: 0.5rem;
 
+}
 
+
 
+.top-2 {
 
+  top: 0.5rem;
 
+}
 
+
 
+.right-2 {
 
+  right: 0.5rem;
 
+}
 
+
 
+.m-auto {
 
+  margin: auto;
 
+}
 
+
 
+.my-2 {
 
+  margin-top: 0.5rem;
 
+  margin-bottom: 0.5rem;
 
+}
 
+
 
+.my-4 {
 
+  margin-top: 1rem;
 
+  margin-bottom: 1rem;
 
+}
 
+
 
+.my-16 {
 
+  margin-top: 4rem;
 
+  margin-bottom: 4rem;
 
+}
 
+
 
+.my-12 {
 
+  margin-top: 3rem;
 
+  margin-bottom: 3rem;
 
+}
 
+
 
+.mr-6 {
 
+  margin-right: 1.5rem;
 
+}
 
+
 
+.mb-4 {
 
+  margin-bottom: 1rem;
 
+}
 
+
 
+.mr-2 {
 
+  margin-right: 0.5rem;
 
+}
 
+
 
+.mb-6 {
 
+  margin-bottom: 1.5rem;
 
+}
 
+
 
+.mt-4 {
 
+  margin-top: 1rem;
 
+}
 
+
 
+.inline-block {
 
+  display: inline-block;
 
+}
 
+
 
+.flex {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+}
 
+
 
+.h-72 {
 
+  height: 18rem;
 
+}
 
+
 
+.h-32 {
 
+  height: 8rem;
 
+}
 
+
 
+.h-56 {
 
+  height: 14rem;
 
+}
 
+
 
+.h-48 {
 
+  height: 12rem;
 
+}
 
+
 
+.w-full {
 
+  width: 100%;
 
+}
 
+
 
+.w-2\/4 {
 
+  width: 50%;
 
+}
 
+
 
+.w-32 {
 
+  width: 8rem;
 
+}
 
+
 
+.w-24 {
 
+  width: 6rem;
 
+}
 
+
 
+.w-auto {
 
+  width: auto;
 
+}
 
+
 
+.w-1\/2 {
 
+  width: 50%;
 
+}
 
+
 
+.flex-auto {
 
+  -webkit-box-flex: 1;
 
+      -ms-flex: 1 1 auto;
 
+          flex: 1 1 auto;
 
+}
 
+
 
+.flex-none {
 
+  -webkit-box-flex: 0;
 
+      -ms-flex: none;
 
+          flex: none;
 
+}
 
+
 
+.transform {
 
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 
+}
 
+
 
+.cursor-pointer {
 
+  cursor: pointer;
 
+}
 
+
 
+.items-center {
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+}
 
+
 
+.justify-center {
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+}
 
+
 
+.justify-between {
 
+  -webkit-box-pack: justify;
 
+      -ms-flex-pack: justify;
 
+          justify-content: space-between;
 
+}
 
+
 
+.overflow-hidden {
 
+  overflow: hidden;
 
+}
 
+
 
+.rounded-xl {
 
+  border-radius: 0.75rem;
 
+}
 
+
 
+.rounded {
 
+  border-radius: 0.25rem;
 
+}
 
+
 
+.border {
 
+  border-width: 1px;
 
+}
 
+
 
+.border-b {
 
+  border-bottom-width: 1px;
 
+}
 
+
 
+.border-gray-200 {
 
+  --tw-border-opacity: 1;
 
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
 
+}
 
+
 
+.bg-white {
 
+  --tw-bg-opacity: 1;
 
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 
+}
 
+
 
+.bg-blue {
 
+  --tw-bg-opacity: 1;
 
+  background-color: rgb(56 118 218 / var(--tw-bg-opacity));
 
+}
 
+
 
+.object-cover {
 
+  -o-object-fit: cover;
 
+     object-fit: cover;
 
+}
 
+
 
+.p-4 {
 
+  padding: 1rem;
 
+}
 
+
 
+.p-2 {
 
+  padding: 0.5rem;
 
+}
 
+
 
+.px-6 {
 
+  padding-left: 1.5rem;
 
+  padding-right: 1.5rem;
 
+}
 
+
 
+.py-2 {
 
+  padding-top: 0.5rem;
 
+  padding-bottom: 0.5rem;
 
+}
 
+
 
+.px-4 {
 
+  padding-left: 1rem;
 
+  padding-right: 1rem;
 
+}
 
+
 
+.py-6 {
 
+  padding-top: 1.5rem;
 
+  padding-bottom: 1.5rem;
 
+}
 
+
 
+.pt-6 {
 
+  padding-top: 1.5rem;
 
+}
 
+
 
+.pb-2 {
 
+  padding-bottom: 0.5rem;
 
+}
 
+
 
+.pb-4 {
 
+  padding-bottom: 1rem;
 
+}
 
+
 
+.pb-6 {
 
+  padding-bottom: 1.5rem;
 
+}
 
+
 
+.pb-8 {
 
+  padding-bottom: 2rem;
 
+}
 
+
 
+.pr-2 {
 
+  padding-right: 0.5rem;
 
+}
 
+
 
+.pr-4 {
 
+  padding-right: 1rem;
 
+}
 
+
 
+.text-left {
 
+  text-align: left;
 
+}
 
+
 
+.text-center {
 
+  text-align: center;
 
+}
 
+
 
+.text-right {
 
+  text-align: right;
 
+}
 
+
 
+.text-xl {
 
+  font-size: 1.25rem;
 
+  line-height: 1.75rem;
 
+}
 
+
 
+.text-base {
 
+  font-size: 1rem;
 
+  line-height: 1.5rem;
 
+}
 
+
 
+.text-xs {
 
+  font-size: 0.75rem;
 
+  line-height: 1rem;
 
+}
 
+
 
+.text-2xl {
 
+  font-size: 1.5rem;
 
+  line-height: 2rem;
 
+}
 
+
 
+.text-lg {
 
+  font-size: 1.125rem;
 
+  line-height: 1.75rem;
 
+}
 
+
 
+.text-sm {
 
+  font-size: 0.875rem;
 
+  line-height: 1.25rem;
 
+}
 
+
 
+.leading-10 {
 
+  line-height: 2.5rem;
 
+}
 
+
 
+.text-blue {
 
+  --tw-text-opacity: 1;
 
+  color: rgb(56 118 218 / var(--tw-text-opacity));
 
+}
 
+
 
+.text-blue-dark {
 
+  --tw-text-opacity: 1;
 
+  color: rgb(18 96 221 / var(--tw-text-opacity));
 
+}
 
+
 
+.text-white {
 
+  --tw-text-opacity: 1;
 
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 
+}
 
+
 
+.text-red-600 {
 
+  --tw-text-opacity: 1;
 
+  color: rgb(220 38 38 / var(--tw-text-opacity));
 
+}
 
+
 
+.text-yellow-600 {
 
+  --tw-text-opacity: 1;
 
+  color: rgb(202 138 4 / var(--tw-text-opacity));
 
+}
 
+
 
+.text-green-600 {
 
+  --tw-text-opacity: 1;
 
+  color: rgb(22 163 74 / var(--tw-text-opacity));
 
+}
 
+
 
+.text-green-700 {
 
+  --tw-text-opacity: 1;
 
+  color: rgb(21 128 61 / var(--tw-text-opacity));
 
+}
 
+
 
+.text-green-300 {
 
+  --tw-text-opacity: 1;
 
+  color: rgb(134 239 172 / var(--tw-text-opacity));
 
+}
 
+
 
+.text-yellow-300 {
 
+  --tw-text-opacity: 1;
 
+  color: rgb(253 224 71 / var(--tw-text-opacity));
 
+}
 
+
 
+.text-gray-300 {
 
+  --tw-text-opacity: 1;
 
+  color: rgb(209 213 219 / var(--tw-text-opacity));
 
+}
 
+
 
+.text-green-500 {
 
+  --tw-text-opacity: 1;
 
+  color: rgb(34 197 94 / var(--tw-text-opacity));
 
+}
 
+
 
+.text-red-300 {
 
+  --tw-text-opacity: 1;
 
+  color: rgb(252 165 165 / var(--tw-text-opacity));
 
+}
 
+
 
+.text-red-400 {
 
+  --tw-text-opacity: 1;
 
+  color: rgb(248 113 113 / var(--tw-text-opacity));
 
+}
 
+
 
+.shadow {
 
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
 
+  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 
+          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 
+}
 
+
 
+.blur {
 
+  --tw-blur: blur(8px);
 
+  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 
+          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 
+}
 
+
 
+.filter {
 
+  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 
+          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 
+}
 
+
 
+.transition {
 
+  -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, -webkit-text-decoration-color, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
 
+  transition-property: color, background-color, border-color, fill, stroke, opacity, -webkit-text-decoration-color, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
 
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
 
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
 
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
+  -webkit-transition-duration: 150ms;
 
+          transition-duration: 150ms;
 
+}
 
+
 
+.hover\:text-blue-light:hover {
 
+  --tw-text-opacity: 1;
 
+  color: rgb(85 132 209 / var(--tw-text-opacity));
 
+}

BIN
static/images/header-bg-1.jpg
View File


+ 0 - 0
static/images/header-bg.jpg.bak → static/images/header-bg.jpg.bak.jpg
View File


BIN
static/images/login-banner-1.jpg
View File


BIN
static/images/login-banner.jpg
View File


+ 18 - 0
tailwind.config.js
View File 

@@ -0,0 +1,18 @@
 
+module.exports = {
 
+  content: [
 
+    './src/**/*.vue',
 
+    './public/**/*.html'
 
+  ],
 
+  theme: {
 
+    extend: {
 
+      colors: {
 
+        blue: {
 
+          light: '#5584d1',
 
+          DEFAULT: '#3876da',
 
+          dark: '#1260dd',
 
+        },
 
+      }
 
+    },
 
+  },
 
+  plugins: [],
 
+}

File diff suppressed because it is too large
+ 504 - 37
yarn.lock


Some files were not shown because too many files changed in this diff