修改首页

ruoyi-ui/.env.production

@@ -6,3 +6,6 @@ ENV = 'production'
 
 # 管理系统/生产环境
 VUE_APP_BASE_API = '/prod-api'
+
+# 路由懒加载
+VUE_CLI_BABEL_TRANSPILE_MODULES = true

ruoyi-ui/public/index.html

@@ -118,7 +118,7 @@
       top: 0;
       width: 51%;
       height: 100%;
-      background: #7171C6;
+      background: #85a1af;
       z-index: 1000;
       -webkit-transform: translateX(0);
       -ms-transform: translateX(0);
@@ -201,7 +201,7 @@
 		    <div id="loader"></div>
 		    <div class="loader-section section-left"></div>
 		    <div class="loader-section section-right"></div>
-		    <div class="load_title">正在加载系统资源，请耐心等待</div>
+		    <div class="load_title">正在加载，请耐心等待</div>
         </div>
 	</div>
   </body>

ruoyi-ui/src/components/MyDialog/index.vue

@@ -0,0 +1,60 @@
+<template>
+    <div >
+        <div v-show="imgShow==1" style="position: fixed;background: white;width: 100%;height: 100%;top: 0;left: 0;">
+            <p style="text-align: center;margin: 10px 10px;font-size:20px">查询结果<i style="float: right;" class="el-icon-close" @click="close"></i></p>
+            <p style="margin: 5px 15px;">您以证书编号：{{certNumber}}为关键字查询验证证书结果如下：</p>
+            <p style="margin: 5px 15px;color: #403f3f;font-size: 14px;">经证书系统验证查询，证书信息正确，该证书预览如下，如需下载使用，请点击“下载”按钮。</p>
+            <img :src="imgUrl" style="width: 100%;aspect-ratio: 750/525;" ref="certImg">
+            <p style="font-weight:bold;color: red;font-size: 20px;text-indent: 0;margin: 5px 15px;">提示：伪造证书系违法行为，请勿尝试。</p>
+            <div style="margin:10px 15px;text-align: center;">
+                <el-button type="primary" style="width: 100%;" @click="download">下 载</el-button>
+                <el-button @click="close" style="width: 100%;margin: 10px 0;">取 消</el-button>
+            </div>
+        </div>
+        <div v-show="imgShow==2" style="position: fixed;background: white;width: 100%;height: 100%;top: 0;left: 0;">
+            <p style="text-align: center;margin:20px 10px;font-size:20px">查询结果<i style="float: right;" class="el-icon-close" @click="close"></i></p>
+            <p style="margin: 15px 15px;">您以证书编号：{{certNumber}}为关键字查询验证证书结果如下：</p>
+            <p style="margin: 15px 15px;">未能查询到该证书，原因可能是证书编号或姓名（单位名称）输入错误， 也可能该证书为伪造证书。请重新输入准确的 证书编号 与 姓名（单位名称）信息后，再查询。谢谢您的关注。</p>
+            <p style="font-weight:bold;color: red;font-size: 20px;text-indent: 0;margin: 5px 15px;">如有疑问，请通知持证人与我会联系。</p>
+            <div style="margin:15px 15px;text-align: center;">
+                <el-button @click="close" type="primary" style="width: 100%;">确 定</el-button>
+            </div>
+        </div>
+    </div>
+    
+</template>
+
+<script>
+export default {
+    name: "MyDialog",
+    data(){
+        return{
+
+        }
+    },
+    props:{
+        certNumber:String,
+        imgUrl:String,
+        imgShow:Number,
+        htmlTitle:String
+    },
+    methods:{
+        close(){
+            this.$emit('mydialogshow', 0)
+        },
+        download(){
+            const el = document.createElement('a')
+            // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
+            el.href = this.$refs.certImg.src
+            el.download = this.htmlTitle
+            // 创建一个点击事件并对 a 标签进行触发
+            const event = new MouseEvent('click')
+            el.dispatchEvent(event)
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

ruoyi-ui/src/permission.js

@@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/auth-redirect', '/bind', '/register','/certInquire/member','/certInquire/train','/certInquire/profess']
+const whiteList = ['/login', '/auth-redirect', '/bind', '/register','/certInquire','/certInquire/member','/certInquire/train','/certInquire/profess']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()
@@ -17,7 +17,7 @@ router.beforeEach((to, from, next) => {
     /* has token*/
     if (whiteList.indexOf(to.path) !== -1) {
       if (to.path === '/login'){
-        next({ path: '/' })
+        next({ path: '/index' })
         NProgress.done()
       }else{
         next()

ruoyi-ui/src/router/index.js

@@ -64,7 +64,7 @@ export const constantRoutes = [
   {
     path: '',
     component: Layout,
-    redirect: 'index',
+    redirect: 'certInquire',
     children: [
       {
         path: 'index',
@@ -92,26 +92,41 @@ export const constantRoutes = [
     path:'/certInquire',
     hidden: true,
     component:() => import('@/views/certInquire'),
-    children: [
-      {
-        path: 'member',
-        component: () => import('@/views/certInquire/member'),
-        name: 'Member',
-        meta: { title: '会员、理事、聘书查询' }
-      },
-      {
-        path: 'train',
-        component: () => import('@/views/certInquire/train'),
-        name: 'Train',
-        meta: { title: '结业、学时证明查询' }
-      },
-      {
-        path: 'profess',
-        component: () => import('@/views/certInquire/profess'),
-        name: 'Profess',
-        meta: { title: '专业能力证书查询' }
-      }
-    ]
+    // children: [
+    //   {
+    //     path: '/certInquire/member',
+    //     component: () => import('@/views/certInquire/member'),
+    //     name: 'Member',
+    //     meta: { title: '会员、理事、聘书查询' }
+    //   },
+    //   {
+    //     path: '/certInquire/train',
+    //     component: () => import('@/views/certInquire/train'),
+    //     name: 'Train',
+    //     meta: { title: '结业、学时证明查询' }
+    //   },
+    //   {
+    //     path: '/certInquire/profess',
+    //     component: () => import('@/views/certInquire/profess'),
+    //     name: 'Profess',
+    //     meta: { title: '专业能力证书查询' }
+    //   }
+    // ]
+  },
+  {
+    path: '/certInquire/member',
+    component: () => import('@/views/certInquire/member'),
+    name: 'Member'
+  },
+  {
+    path: '/certInquire/train',
+    component: () => import('@/views/certInquire/train'),
+    name: 'Train'
+  },
+  {
+    path: '/certInquire/profess',
+    component: () => import('@/views/certInquire/profess'),
+    name: 'Profess'
   }
 ]
 

ruoyi-ui/src/views/certInquire/index.vue

@@ -1,247 +1,285 @@
 <template>
-    <div class="main">
-        <div >
-            <router-view></router-view>
-        </div>
+  <div class="main">
+    <div class="content">
+      <img src="../../assets/logo/logo2.png"/>
+      <router-link tag="div" :to="{name:'Member'}" class="content-btn">会员、理事证书、聘书查询</router-link>
+      <router-link tag="div" :to="{name:'Train'}" class="content-btn">结业证书、学时证明查询</router-link>
+      <router-link tag="div" :to="{name:'Profess'}" class="content-btn">专业能力证书查询</router-link>
     </div>
+  </div>
 </template>
 <script>
 </script>
 <style lang="scss">
-body,html{
-  height: 100vh;
-  width: 100vw;
-}
-.height100{
-  height: 100%;
-}
-.main {
-  text-align: left;
+.main{
+  background-image: url("../../assets/images/img31.jpg");
+  background-size: cover;
   height: 100%;
-  width: 100%;
-  // margin: 100px auto;
-  // width: 500px;
-  // position: absolute;
-  // left: 50%;
-  // top: 50%;
-  // transform: translate(-50%, -50%);
 }
-.main-content{
-  width: 500px;
-  position: absolute;
-  left: 50%;
-  top: 50%;
+.content{
+  border-radius: 6px;
+  // background: #ffffff;
+  width: 600px;
+  padding: 25px 25px 5px 25px;
+  position:fixed;
+  top:50%;
+  left:50%;
   transform: translate(-50%, -50%);
-}
-.img-box {
-  width: 360px;
-  height: 80px;
-//   background-color: brown;
-  text-align: center;
   img{
-    height: 100%;
-    transform: scale(1.5);
+    width:100%
+  }
+  .content-btn{
+    width:100%;
+    height:50px;
+    line-height:50px;
+    text-align:center;
+    background-color:#eeeef2;
+    margin:20px 10px;
+    border-radius:10px;  
   }
 }
-.main-title {
-  width: 360px;
-  text-align: center;
-}
-.label-box {
-  display: flex;
-  align-items: center;
-  margin: 10px 0;
-}
-.label-title {
-  width: 150px;
-  line-height: 22px;
-  flex: 0 0 auto;
-  text-align: center;
-}
-.label-input {
-  line-height: 30px;
-  width: 210px;
-  border: 1px solid #50ac55;
-  padding-left: 10px;
-  box-sizing: border-box;
-  height: 45px;
-  line-height: 45px;
-}
-.label-must {
-  color: red;
-}
-.btn-box {
-  text-align: right;
-}
-.btn-box button {
-  width: 140px;
-  height: 40px;
-  margin: 10px;
-}
-.btn-reset {
-  background-color: #f1f2f3;
-  border: none;
-}
-.btn-search {
-  background-color: rgb(176,11,17);
-  color: white;
-    border: none;
-}
-.captcha-img {
-  width: 120px;
-  background: antiquewhite;
-  margin: auto;
-  height: 50px;
-}
-.activeSpan{
-    color: #50ac55;
+body,html{
+  height: 100vh;
+  width: 100vw;
 }
+// .height100{
+//   height: 100%;
+// }
+// .main {
+//   text-align: left;
+//   height: 100%;
+//   width: 100%;
+//   // margin: 100px auto;
+//   // width: 500px;
+//   // position: absolute;
+//   // left: 50%;
+//   // top: 50%;
+//   // transform: translate(-50%, -50%);
+// }
+// .main-content{
+//   width: 500px;
+//   position: absolute;
+//   left: 50%;
+//   top: 50%;
+//   transform: translate(-50%, -50%);
+// }
+// .img-box {
+//   width: 360px;
+//   height: 80px;
+// //   background-color: brown;
+//   text-align: center;
+//   img{
+//     height: 100%;
+//     transform: scale(1.5);
+//   }
+// }
+// .main-title {
+//   width: 360px;
+//   text-align: center;
+// }
+// .label-box {
+//   display: flex;
+//   align-items: center;
+//   margin: 10px 0;
+// }
+// .label-title {
+//   width: 150px;
+//   line-height: 22px;
+//   flex: 0 0 auto;
+//   text-align: center;
+// }
+// .label-input {
+//   line-height: 30px;
+//   width: 210px;
+//   border: 1px solid #50ac55;
+//   padding-left: 10px;
+//   box-sizing: border-box;
+//   height: 45px;
+//   line-height: 45px;
+// }
+// .label-must {
+//   color: red;
+// }
+// .btn-box {
+//   text-align: right;
+// }
+// .btn-box button {
+//   width: 140px;
+//   height: 40px;
+//   margin: 10px;
+// }
+// .btn-reset {
+//   background-color: #f1f2f3;
+//   border: none;
+// }
+// .btn-search {
+//   background-color: rgb(176,11,17);
+//   color: white;
+//     border: none;
+// }
+// .captcha-img {
+//   width: 120px;
+//   background: antiquewhite;
+//   margin: auto;
+//   height: 50px;
+// }
+// .activeSpan{
+//     color: #50ac55;
+// }
 
-.zs-title-img{
-  display: block;
-    margin: auto;
-    height: 75px;
-    transform: scale(1.7);
-}
+// .zs-title-img{
+//   display: block;
+//     margin: auto;
+//     height: 75px;
+//     transform: scale(1.7);
+// }
 
 
-::v-deep .el-dialog__body {
-  padding: 0px;
-  display: flex;
-  justify-content: center;
-}
-#pdfDom {
-  /* 要想pdf周边留白，要在这里设置 */
-  /* padding: 20px; */
-  width: 750px;
-  margin: auto;
-}
-.proBox {
-  background-size: cover;
-  width: 750px;
-  height: 525px;
-  padding: 40px 60px;
-  box-sizing: border-box;
-  margin: 0 auto;
-  position: relative;
-  color: #000;
-  font-family: 楷体;
-  font-size: 16px;
-}
+// ::v-deep .el-dialog__body {
+//   padding: 0px;
+//   display: flex;
+//   justify-content: center;
+// }
+// #pdfDom {
+//   /* 要想pdf周边留白，要在这里设置 */
+//   /* padding: 20px; */
+//   width: 750px;
+//   margin: auto;
+// }
+// .proBox {
+//   background-size: cover;
+//   width: 750px;
+//   height: 525px;
+//   padding: 40px 60px;
+//   box-sizing: border-box;
+//   margin: 0 auto;
+//   position: relative;
+//   color: #000;
+//   font-family: 楷体;
+//   font-size: 16px;
+// }
 
-.proBox-img{
-  width: 750px;
-  height: 525px;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
+// .proBox-img{
+//   width: 750px;
+//   height: 525px;
+//   position: absolute;
+//   top: 0;
+//   left: 0;
+// }
 
 
 
-.tit {
-  color: #000;
-  font-size: 22px;
-  font-weight: 700;
-  position: relative;
-  top: -6px;
-  left: 8px;
-  letter-spacing: 2px;
-  font-family: STHeiti;
-  margin: 10px 0;
-  text-align: center;
-}
-.proid {
-  text-align: right;
-  margin: 0;
-  font-weight: 500;
-  /* margin-right: 5px; */
-}
-.con {
-  font-size: 18px;
-  text-align: left;
-  margin: 10px 0;
-  line-height: 32px;
-  text-indent: 2em;
-  position: absolute;
-  bottom: 265px;
-  margin-top: 30px;
-  padding-right: 80px;
-  left: 88px;
-}
-.con-name {
-  margin-right: 10px;
-  margin-left: 10px;
-  font-size: 20px;
-}
-.heiti{
-  font-family:黑体 ;
-}
-.con-unit {
-  font-size: 20px;
-  font-weight: 700;
-  position: absolute;
-  right: 45px;
-  bottom: 100px;
-  z-index: 10;
-  text-align: center;
-}
-.con-unit p {
-  margin: 5px 0;
-}
-.con-footer {
-  position: absolute;
-  right: 0;
-  right: 45px;
-  bottom: 65px;
-  font-size: 10px;
-  z-index: 10;
-}
-.con-footer p{
-  margin: 0;
-}
-.chapter {
-  border-radius: 50%;
-  position: absolute;
-  bottom: 45px;
-  right: 40px;
-}
-.cert-msg{
-  font-size: 20px;
-  font-size: 15px;
-  position: absolute;
-  bottom: 50px;
-  left: 90px;
-}
-.foot-term{
-  position: absolute;
-  bottom: 160px;
-  left: 200px;
-}
-.foot-cert{
-  position: absolute;
-    bottom: 130px;
-    left: 200px;
-}
-.foot-date{
-  position: absolute;
-    bottom: 104px;
-    left: 200px;
-}
-.z10{
-  z-index: 10;
-}
-.z01{
-  z-index: 1;
-}
-.foot-pp{
-  position: absolute;
-  top: 273px;
-  left: 161px;
-  text-align: center;
-  line-height: 42px;
-  p{
-    margin: 0;
+// .tit {
+//   color: #000;
+//   font-size: 22px;
+//   font-weight: 700;
+//   position: relative;
+//   top: -6px;
+//   left: 8px;
+//   letter-spacing: 2px;
+//   font-family: STHeiti;
+//   margin: 10px 0;
+//   text-align: center;
+// }
+// .proid {
+//   text-align: right;
+//   margin: 0;
+//   font-weight: 500;
+//   /* margin-right: 5px; */
+// }
+// .con {
+//   font-size: 18px;
+//   text-align: left;
+//   margin: 10px 0;
+//   line-height: 32px;
+//   text-indent: 2em;
+//   position: absolute;
+//   bottom: 265px;
+//   margin-top: 30px;
+//   padding-right: 80px;
+//   left: 88px;
+// }
+// .con-name {
+//   margin-right: 10px;
+//   margin-left: 10px;
+//   font-size: 20px;
+// }
+// .heiti{
+//   font-family:黑体 ;
+// }
+// .con-unit {
+//   font-size: 20px;
+//   font-weight: 700;
+//   position: absolute;
+//   right: 45px;
+//   bottom: 100px;
+//   z-index: 10;
+//   text-align: center;
+// }
+// .con-unit p {
+//   margin: 5px 0;
+// }
+// .con-footer {
+//   position: absolute;
+//   right: 0;
+//   right: 45px;
+//   bottom: 65px;
+//   font-size: 10px;
+//   z-index: 10;
+// }
+// .con-footer p{
+//   margin: 0;
+// }
+// .chapter {
+//   border-radius: 50%;
+//   position: absolute;
+//   bottom: 45px;
+//   right: 40px;
+// }
+// .cert-msg{
+//   font-size: 20px;
+//   font-size: 15px;
+//   position: absolute;
+//   bottom: 50px;
+//   left: 90px;
+// }
+// .foot-term{
+//   position: absolute;
+//   bottom: 160px;
+//   left: 200px;
+// }
+// .foot-cert{
+//   position: absolute;
+//     bottom: 130px;
+//     left: 200px;
+// }
+// .foot-date{
+//   position: absolute;
+//     bottom: 104px;
+//     left: 200px;
+// }
+// .z10{
+//   z-index: 10;
+// }
+// .z01{
+//   z-index: 1;
+// }
+// .foot-pp{
+//   position: absolute;
+//   top: 273px;
+//   left: 161px;
+//   text-align: center;
+//   line-height: 42px;
+//   p{
+//     margin: 0;
+//   }
+// }
+@media screen and (max-width: 600px) {
+  .content{
+      width: 100%;padding: 10px;
+      .content-btn{
+        margin:10px 0
+      }
   }
 }
 </style>

ruoyi-ui/src/views/certInquire/member/index.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="main-content">
       <div class="img-box">
-        <img src="../../../assets/logo/logo2.png" alt="广东省教师继续教育学会">
+        <img src="../../../assets/logo/logo2.png" alt="广东省教师继续教育学会" >
       </div>
       <div style="text-align: center;line-height: 50px;">
         <span class="main-title" style="margin: 0 10px;font-weight: bold;">会员、理事证书、聘书查询</span>
@@ -10,8 +10,8 @@
       <div>
         <div class="label-box">
           <div class="label-title">
-            <p>持证人姓名</p>
-            <p>（或持证单位全称）</p>
+            <p class="label-title-p">持证人姓名</p>
+            <p class="label-title-p">（或持证单位全称）</p>
           </div>
           <input v-model="userName" type="text" class="label-input">
         </div>
@@ -36,9 +36,13 @@
             查询<i v-show="iconShow" class="el-icon-loading" />
           </button>
         </div>
+        <div class="btn-box back" style="margin: 5px 10px;align-items: center;font-size: 14px;" @click="toIndex">
+          返回首页<i class="el-icon-arrow-right"></i>
+        </div>
       </div>
     </div>
     <div style="position:fixed;top:-1200px;left:-1800px">
+      <!--  -->
       <div id="pdfDomm" ref="posterWrap">
         <!-- <div class="proBox" >
             <img class="proBox-img" :src="data.url" >
@@ -52,7 +56,13 @@
           </div> -->
       </div>
     </div>
-
+    <my-dialog 
+    :imgShow="imgShow" 
+    :certNumber="certNumber" 
+    :imgUrl="imgUrl" 
+    @mydialogshow="mydialogshow"
+    :htmlTitle = "htmlTitle"
+    ></my-dialog>
     <el-dialog
       :title="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
       :visible.sync="dialogVisible"
@@ -61,7 +71,7 @@
       class="dialog-box"
     >
       <p>经证书系统验证查询，证书信息正确，该证书预览如下，如需下载使用，请点击“下载”按钮。</p>
-      <img ref="certimg" :src="imgUrl" width="750px" height="525px">
+      <img ref="certimg" :src="imgUrl" >
       <p style="font-weight:bold;color: red;font-size: 20px;text-indent: 0;">提示：伪造证书系违法行为，请勿尝试。</p>
       <span slot="footer" class="dialog-footer">
         <el-button @click="handleClose">取 消</el-button>
@@ -90,6 +100,7 @@
 import { getCodeImg, checkCode } from '@/api/login'
 import { getCert } from '@/api/system/contract'
 import html2Canvas from 'html2canvas'
+import MyDialog from "../../../components/MyDialog";
 export default {
   data() {
     return {
@@ -129,11 +140,20 @@ export default {
       },
       imgUrl: '',
       errorDialog: false,
-      word: ''
+      word: '',
+      screenWidth:window.screen.availWidth,
+      imgShow:0
     }
   },
+  components:{
+    MyDialog      
+  },
   mounted() {
     this.getCode()
+    window.addEventListener('resize', this.debounce(this.getWindowInfo, 500))
+  },
+  destroyed(){
+    window.removeEventListener('resize', this.debounce(this.getWindowInfo, 500))
   },
   methods: {
     getCode() {
@@ -188,13 +208,23 @@ export default {
                 this.$nextTick(() => {
                   // 将html代码=>canvas=>img
                   this.toImg()
-                  this.dialogVisible = true
+                  console.log(this.screenWidth)
+                  if(this.screenWidth>800){
+                    this.dialogVisible = true
+                  }else{
+                    this.imgShow = 1
+                  }
+                  
                   // 然后删除掉用完的html代码
                   const e = document.getElementById('pdfDomm')
                   e.innerHTML = ''
                 })
               } else {
-                this.errorDialog = true
+                if(this.screenWidth>800){
+                  this.errorDialog = true
+                }else{
+                  this.imgShow = 2
+                }
               }
             })
             setTimeout(() => {
@@ -223,11 +253,17 @@ export default {
       this.iconShow = false
       this.getCode()
       this.dialogVisible = false
+      this.userName= ''
+      this.certNumber=''
+      this.code= ''
     },
     handleErrorClose() {
       this.iconShow = false
       this.getCode()
       this.errorDialog = false
+      this.userName= ''
+      this.certNumber=''
+      this.code= ''
     },
     realUrl(val) {
       return process.env.VUE_APP_BASE_API + val
@@ -262,7 +298,7 @@ export default {
       const e = document.getElementById('pdfDomm')
       this.word = `<div class="proBox" >
         <img class="proBox-img" src="${window.location.origin}${this.data.url}" >
-        <div class="con" style="bottom:0;top:165px">
+        <div class="con" style="bottom:0;top:155px">
           <p style="margin:0">
             <span class="con-name heiti">${this.data.name}</span>
             <span>${this.data.certContent}</span>
@@ -274,13 +310,46 @@ export default {
         <span class="foot-date">${this.data.issueDate}</span>
       </div>`
       e.innerHTML = this.word
+    },
+    toIndex(){
+      this.$router.push('/certInquire')
+    },
+    getWindowInfo(){
+      const windowInfo = {
+        width: window.innerWidth
+      }
+      this.screenWidth = windowInfo.width
+      console.log(this.screenWidth)
+    },
+    debounce(fn, delay){
+      let timer;
+      return function() {
+        if (timer) {
+          clearTimeout(timer);
+        }
+        timer = setTimeout(() => {
+          fn();
+        }, delay);
+      }
+    },
+    mydialogshow(val){
+      this.imgShow = val,
+      this.iconShow = false
+      this.getCode()
+      this.userName= ''
+      this.certNumber=''
+      this.code= ''
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" >
 .dialog-box{
+  img{
+    width:750px;
+    height:525px
+  }
   p{
     width: 725px;
     margin: auto;
@@ -298,4 +367,287 @@ export default {
     text-indent: 2em;
   }
 }
+
+.height100{
+  height: 100%;
+}
+.main {
+  text-align: left;
+  height: 100%;
+  width: 100%;
+  // margin: 100px auto;
+  // width: 500px;
+  // position: absolute;
+  // left: 50%;
+  // top: 50%;
+  // transform: translate(-50%, -50%);
+}
+.main-content{
+  width: 500px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.img-box {
+  width: 360px;
+  height: 80px;
+//   background-color: brown;
+  text-align: center;
+  img{
+    height: 100%;
+    transform: scale(1.5);
+  }
+}
+.main-title {
+  width: 360px;
+  text-align: center;
+}
+.label-box {
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+}
+.label-title {
+  width: 150px;
+  line-height: 22px;
+  flex: 0 0 auto;
+  text-align: center;
+}
+.label-input {
+  line-height: 30px;
+  width: 210px;
+  border: 1px solid #50ac55;
+  padding-left: 10px;
+  box-sizing: border-box;
+  height: 45px;
+  line-height: 45px;
+}
+.label-must {
+  color: red;
+}
+.btn-box {
+  text-align: right;
+}
+.btn-box button {
+  width: 140px;
+  height: 40px;
+  margin: 10px;
+}
+.btn-reset {
+  background-color: #f1f2f3;
+  border: none;
+}
+.btn-search {
+  background-color: rgb(176,11,17);
+  color: white;
+    border: none;
+}
+.captcha-img {
+  width: 120px;
+  // background: antiquewhite;
+  margin: auto;
+  height: 45px;
+}
+.login-code-img{
+  height:45px;
+}
+.activeSpan{
+    color: #50ac55;
+}
+
+.zs-title-img{
+  display: block;
+    margin: auto;
+    height: 75px;
+    transform: scale(1.7);
+}
+::v-deep .el-dialog__body {
+  padding: 0px;
+  display: flex;
+  justify-content: center;
+}
+#pdfDomm {
+  /* 要想pdf周边留白，要在这里设置 */
+  /* padding: 20px; */
+  width: 750px;
+  margin: auto;
+}
+.proBox {
+  background-size: cover;
+  width: 750px;
+  height: 525px;
+  padding: 40px 60px;
+  box-sizing: border-box;
+  margin: 0 auto;
+  position: relative;
+  color: #000;
+  font-family: 楷体;
+  font-size: 16px;
+}
+
+.proBox-img{
+  width: 750px;
+  height: 525px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.tit {
+  color: #000;
+  font-size: 22px;
+  font-weight: 700;
+  position: relative;
+  top: -6px;
+  left: 8px;
+  letter-spacing: 2px;
+  font-family: STHeiti;
+  margin: 10px 0;
+  text-align: center;
+}
+.proid {
+  text-align: right;
+  margin: 0;
+  font-weight: 500;
+  /* margin-right: 5px; */
+}
+.con {
+  font-size: 18px;
+  text-align: left;
+  margin: 10px 0;
+  line-height: 32px;
+  text-indent: 2em;
+  position: absolute;
+  bottom: 265px;
+  margin-top: 30px;
+  padding-right: 80px;
+  left: 88px;
+}
+.con-name {
+  margin-right: 10px;
+  margin-left: 10px;
+  font-size: 20px;
+}
+.heiti{
+  font-family:黑体 ;
+}
+.con-unit {
+  font-size: 20px;
+  font-weight: 700;
+  position: absolute;
+  right: 45px;
+  bottom: 100px;
+  z-index: 10;
+  text-align: center;
+}
+.con-unit p {
+  margin: 5px 0;
+}
+.con-footer {
+  position: absolute;
+  right: 0;
+  right: 45px;
+  bottom: 65px;
+  font-size: 10px;
+  z-index: 10;
+}
+.con-footer p{
+  margin: 0;
+}
+.chapter {
+  border-radius: 50%;
+  position: absolute;
+  bottom: 45px;
+  right: 40px;
+}
+.cert-msg{
+  font-size: 20px;
+  font-size: 15px;
+  position: absolute;
+  bottom: 50px;
+  left: 90px;
+}
+.foot-term{
+  position: absolute;
+  bottom: 160px;
+  left: 200px;
+}
+.foot-cert{
+  position: absolute;
+    bottom: 130px;
+    left: 200px;
+}
+.foot-date{
+  position: absolute;
+    bottom: 104px;
+    left: 200px;
+}
+.z10{
+  z-index: 10;
+}
+.z01{
+  z-index: 1;
+}
+.foot-pp{
+  position: absolute;
+  top: 273px;
+  left: 161px;
+  text-align: center;
+  line-height: 42px;
+  p{
+    margin: 0;
+  }
+}
+.back{
+  justify-content: flex-end;
+}
+@media screen and (max-width: 600px) {
+  .main-content{
+    width: 100%;
+    padding: 10px;
+    position: initial;
+    top: initial;
+    left: initial;
+    transform: initial;
+    -webkit-transform: initial;
+    .img-box{
+      width: 98%;
+      img{
+        height: 85%;
+      }
+    }
+  }
+  .label-box{
+    flex-direction: column;
+    align-items: flex-start;
+    .label-title{
+      text-align: left;
+      width: 100%;
+      .label-title-p{
+        display: inline-block;
+      }
+    }
+    .label-input{
+      width: 100%;
+    }
+    .captcha-img{
+      margin:20px 0;
+    }
+  }
+  .btn-box{
+    display: flex;
+    flex-direction: row;
+  }
+  .dialog-box{
+    width: 100%;
+    img{
+      width: 100%;
+      aspect-ratio: auto 750 / 525;
+    }
+  }
+  .back{
+    justify-content: flex-start;
+  }
+}
 </style>

ruoyi-ui/src/views/certInquire/profess/index.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="main-content">
       <div class="img-box">
-        <img src="../../../assets/logo/logo2.png" alt="广东省教师继续教育学会">
+        <img src="../../../assets/logo/logo2.png" alt="广东省教师继续教育学会" style="">
       </div>
       <div style="text-align: center;line-height: 50px;">
         <span class="main-title" style="margin: 0 10px;font-weight: bold;">专业能力证书查询</span>
@@ -10,8 +10,8 @@
       <div>
         <div class="label-box">
           <div class="label-title">
-            <p>持证人姓名</p>
-            <p>（或持证单位全称）</p>
+            <p class="label-title-p">持证人姓名</p>
+            <p class="label-title-p">（或持证单位全称）</p>
           </div>
           <input v-model="userName" type="text" class="label-input">
         </div>
@@ -36,11 +36,15 @@
             查询<i v-show="iconShow" class="el-icon-loading" />
           </button>
         </div>
+        <div class="btn-box back" style="margin: 5px 10px;align-items: center;font-size: 14px;" @click="toIndex">
+          返回首页<i class="el-icon-arrow-right"></i>
+        </div>
       </div>
     </div>
-    <div style="position:fixed;top:-1200px;left:-1800px">
+    <div style="position:fixed;">
+      <!-- top:-1200px;left:-1800px -->
       <div id="pdfDomm" ref="posterWrap">
-        <div class="proBox">
+        <!-- <div class="proBox">
           <img class="proBox-img z01" :src="data.backurl">
           <div class="con z10" style="width: 64px; height: 83px;overflow: hidden;text-indent: 0;padding-right: 0;top: 144px;left: 183px;">
             <img id="pdfhead" :src="data.headurl" style="height:100%;position: absolute;left: 50%;transform: translate(-50%, -50%);top: 50%;">
@@ -57,9 +61,16 @@
             </p>
             <p style="margin:0">考核合格，准予结业，特发此证。</p>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
+    <my-dialog 
+    :imgShow="imgShow" 
+    :certNumber="certNumber" 
+    :imgUrl="imgUrl" 
+    @mydialogshow="mydialogshow"
+    :htmlTitle = "htmlTitle"
+    ></my-dialog>
     <el-dialog
       :title="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
       :visible.sync="dialogVisible"
@@ -117,6 +128,7 @@
 import { getCodeImg, checkCode } from '@/api/login'
 import { getACert } from '@/api/system/grad'
 import html2Canvas from 'html2canvas'
+import MyDialog from "../../../components/MyDialog";
 export default {
   data() {
     return {
@@ -159,11 +171,20 @@ export default {
       },
       imgUrl: '',
       errorDialog: false,
-      word: ''
+      word: '',
+      screenWidth:window.screen.availWidth,
+      imgShow:0
     }
   },
+  components:{
+    MyDialog      
+  },
   mounted() {
     this.getCode()
+    window.addEventListener('resize', this.debounce(this.getWindowInfo, 500))
+  },
+  destroyed(){
+    window.removeEventListener('resize', this.debounce(this.getWindowInfo, 500))
   },
   methods: {
     getCode() {
@@ -218,18 +239,25 @@ export default {
                 this.data.backurl = backimg
                 this.data.headurl = headimg
                 // 创建html代码
-                // this.makeHtml()
+                this.makeHtml()
                 this.$nextTick(() => {
                   // 将html代码=>canvas=>img
                   this.toImg()
-                  this.dialogVisible = true
+                  if(this.screenWidth>800){
+                    this.dialogVisible = true
+                  }else{
+                    this.imgShow = 1
+                  }
                   // 然后删除掉用完的html代码
                   const e = document.getElementById('pdfDomm')
-
                   e.innerHTML = ''
                 })
               } else {
-                this.errorDialog = true
+                if(this.screenWidth>800){
+                  this.errorDialog = true
+                }else{
+                  this.imgShow = 2
+                }
               }
             })
             setTimeout(() => {
@@ -258,11 +286,17 @@ export default {
       this.iconShow = false
       this.getCode()
       this.dialogVisible = false
+      this.userName= ''
+      this.certNumber=''
+      this.code= ''
     },
     handleErrorClose() {
       this.iconShow = false
       this.getCode()
       this.errorDialog = false
+      this.userName= ''
+      this.certNumber=''
+      this.code= ''
     },
     realUrl(val) {
       return process.env.VUE_APP_BASE_API + val
@@ -306,7 +340,7 @@ export default {
               <p class="foot-p-cert ">${this.data.certId}</p>
               <p class="foot-p-date ">${this.data.issueDate}</p>
             </div>
-            <div class="content z10" style="position: absolute;left: 450px;width: 230px;top: 85px;font-size: 19px;line-height: 30px;text-indent: 2em;">
+            <div class="content z10" style="position: absolute;left: 525px;width: 355px;top: 185px;font-size: 19px;line-height: 30px;text-indent: 2em;">
               <p style="margin:0">
                 持证人参加了<span class="heiti" style="margin: 0 15px;font-size: 19px;">${this.data.certName}</span>，已修完教学计划规定的全部课程，合计<span class="heiti" style="margin: 0 15px;font-size: 20px;">${this.data.courseHours}</span>学时。
               </p>
@@ -314,11 +348,325 @@ export default {
             </div>
           </div>`
       e.innerHTML = this.word
+    },
+    toIndex(){
+      this.$router.push('/certInquire')
+    },
+    getWindowInfo(){
+      const windowInfo = {
+        width: window.innerWidth
+      }
+      this.screenWidth = windowInfo.width
+      console.log(this.screenWidth)
+    },
+    debounce(fn, delay){
+      let timer;
+      return function() {
+        if (timer) {
+          clearTimeout(timer);
+        }
+        timer = setTimeout(() => {
+          fn();
+        }, delay);
+      }
+    },
+    mydialogshow(val){
+      this.imgShow = val,
+      this.iconShow = false
+      this.getCode()
+      this.userName= ''
+      this.certNumber=''
+      this.code= ''
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+.height100{
+  height: 100%;
+}
+.main {
+  text-align: left;
+  height: 100%;
+  width: 100%;
+  // margin: 100px auto;
+  // width: 500px;
+  // position: absolute;
+  // left: 50%;
+  // top: 50%;
+  // transform: translate(-50%, -50%);
+}
+.main-content{
+  width: 500px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.img-box {
+  width: 360px;
+  height: 80px;
+//   background-color: brown;
+  text-align: center;
+  img{
+    height: 100%;
+    transform: scale(1.5);
+  }
+}
+.main-title {
+  width: 360px;
+  text-align: center;
+}
+.label-box {
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+}
+.label-title {
+  width: 150px;
+  line-height: 22px;
+  flex: 0 0 auto;
+  text-align: center;
+}
+.label-input {
+  line-height: 30px;
+  width: 210px;
+  border: 1px solid #50ac55;
+  padding-left: 10px;
+  box-sizing: border-box;
+  height: 45px;
+  line-height: 45px;
+}
+.label-must {
+  color: red;
+}
+.btn-box {
+  text-align: right;
+}
+.btn-box button {
+  width: 140px;
+  height: 40px;
+  margin: 10px;
+}
+.btn-reset {
+  background-color: #f1f2f3;
+  border: none;
+}
+.btn-search {
+  background-color: rgb(176,11,17);
+  color: white;
+    border: none;
+}
+.captcha-img {
+  width: 120px;
+  // background: antiquewhite;
+  margin: auto;
+  height: 45px;
+}
+.login-code-img{
+  height:45px;
+}
+.activeSpan{
+    color: #50ac55;
+}
+
+.zs-title-img{
+  display: block;
+    margin: auto;
+    height: 75px;
+    transform: scale(1.7);
+}
+
+
+::v-deep .el-dialog__body {
+  padding: 0px;
+  display: flex;
+  justify-content: center;
+}
+#pdfDomm {
+  /* 要想pdf周边留白，要在这里设置 */
+  /* padding: 20px; */
+  width: 750px;
+  margin: auto;
+}
+.proBox {
+  background-size: cover;
+  width: 750px;
+  height: 525px;
+  padding: 40px 60px;
+  box-sizing: border-box;
+  margin: 0 auto;
+  position: relative;
+  color: #000;
+  font-family: 楷体;
+  font-size: 16px;
+}
+
+.proBox-img{
+  width: 750px;
+  height: 525px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
 
+
+.tit {
+  color: #000;
+  font-size: 22px;
+  font-weight: 700;
+  position: relative;
+  top: -6px;
+  left: 8px;
+  letter-spacing: 2px;
+  font-family: STHeiti;
+  margin: 10px 0;
+  text-align: center;
+}
+.proid {
+  text-align: right;
+  margin: 0;
+  font-weight: 500;
+  /* margin-right: 5px; */
+}
+.con {
+  font-size: 18px;
+  text-align: left;
+  margin: 10px 0;
+  line-height: 32px;
+  text-indent: 2em;
+  position: absolute;
+  bottom: 265px;
+  margin-top: 30px;
+  padding-right: 80px;
+  left: 88px;
+}
+.con-name {
+  margin-right: 10px;
+  margin-left: 10px;
+  font-size: 20px;
+}
+.heiti{
+  font-family:黑体 ;
+}
+.con-unit {
+  font-size: 20px;
+  font-weight: 700;
+  position: absolute;
+  right: 45px;
+  bottom: 100px;
+  z-index: 10;
+  text-align: center;
+}
+.con-unit p {
+  margin: 5px 0;
+}
+.con-footer {
+  position: absolute;
+  right: 0;
+  right: 45px;
+  bottom: 65px;
+  font-size: 10px;
+  z-index: 10;
+}
+.con-footer p{
+  margin: 0;
+}
+.chapter {
+  border-radius: 50%;
+  position: absolute;
+  bottom: 45px;
+  right: 40px;
+}
+.cert-msg{
+  font-size: 20px;
+  font-size: 15px;
+  position: absolute;
+  bottom: 50px;
+  left: 90px;
+}
+.foot-term{
+  position: absolute;
+  bottom: 160px;
+  left: 200px;
+}
+.foot-cert{
+  position: absolute;
+    bottom: 130px;
+    left: 200px;
+}
+.foot-date{
+  position: absolute;
+    bottom: 104px;
+    left: 200px;
+}
+.z10{
+  z-index: 10;
+}
+.z01{
+  z-index: 1;
+}
+.foot-pp{
+  position: absolute;
+  top: 273px;
+  left: 161px;
+  text-align: center;
+  line-height: 42px;
+  p{
+    margin: 0;
+  }
+}
+.back{
+  justify-content: flex-end;
+}
+@media screen and (max-width: 600px) {
+  .main-content{
+    width: 100%;
+    padding: 10px;
+    position: initial;
+    top: initial;
+    left: initial;
+    transform: initial;
+    -webkit-transform: initial;
+    .img-box{
+      width: 98%;
+      img{
+        height: 85%;
+      }
+    }
+  }
+  .label-box{
+    flex-direction: column;
+    align-items: flex-start;
+    .label-title{
+      text-align: left;
+      width: 100%;
+      .label-title-p{
+        display: inline-block;
+      }
+    }
+    .label-input{
+      width: 100%;
+    }
+    .captcha-img{
+      margin:20px 0;
+    }
+  }
+  .btn-box{
+    display: flex;
+    flex-direction: row;
+  }
+  .dialog-box{
+    width: 100%;
+    img{
+      width: 100%;
+      aspect-ratio: auto 750 / 525;
+    }
+  }
+  .back{
+    justify-content: flex-start;
+  }
+}
 </style>

ruoyi-ui/src/views/certInquire/train/index.vue

@@ -2,23 +2,23 @@
   <div>
     <div class="main-content">
       <div class="img-box">
-        <img src="../../../assets/logo/logo2.png" alt="广东省教师继续教育学会">
+        <img src="../../../assets/logo/logo2.png" alt="广东省教师继续教育学会" >
       </div>
       <div style="text-align: center;line-height: 50px;">
         <span class="main-title" style="margin: 0 10px;font-weight: bold;">结业证书、学时证明查询</span>
       </div>
       <div>
-        <div class="label-box">
+        <!-- <div class="label-box">
           <div class="label-title">
             <p>证书类型</p>
           </div>
           <el-radio v-model="radio" label="1">结业证书</el-radio>
           <el-radio v-model="radio" label="2">学时证明</el-radio>
-        </div>
+        </div> -->
         <div class="label-box">
           <div class="label-title">
-            <p>持证人姓名</p>
-            <p>（或持证单位全称）</p>
+            <p class="label-title-p">持证人姓名</p>
+            <p class="label-title-p">（或持证单位全称）</p>
           </div>
           <input v-model="userName" type="text" class="label-input">
         </div>
@@ -43,11 +43,22 @@
             查询<i v-show="iconShow" class="el-icon-loading" />
           </button>
         </div>
+        <div class="btn-box back" style="margin: 5px 10px;align-items: center;font-size: 14px;" @click="toIndex">
+          返回首页<i class="el-icon-arrow-right"></i>
+        </div>
       </div>
     </div>
     <div style="position:fixed;top:-1200px;left:-1800px">
+      <!-- -->
       <div id="pdfDomm" ref="posterWrap" />
     </div>
+    <my-dialog 
+    :imgShow="imgShow" 
+    :certNumber="certNumber" 
+    :imgUrl="imgUrl" 
+    @mydialogshow="mydialogshow"
+    :htmlTitle = "htmlTitle"
+    ></my-dialog>
     <el-dialog
       :title="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
       :before-close="handleClose"
@@ -98,6 +109,7 @@
 import { getCodeImg, checkCode } from '@/api/login'
 import { getACert } from '@/api/system/grad'
 import html2Canvas from 'html2canvas'
+import MyDialog from "../../../components/MyDialog"
 export default {
   data() {
     return {
@@ -141,11 +153,20 @@ export default {
       },
       imgUrl: '',
       errorDialog: false,
-      word: ''
+      word: '',
+      screenWidth:window.screen.availWidth,
+      imgShow:0
     }
   },
+  components:{
+    MyDialog      
+  },
   mounted() {
     this.getCode()
+    window.addEventListener('resize', this.debounce(this.getWindowInfo, 500))
+  },
+  destroyed(){
+    window.removeEventListener('resize', this.debounce(this.getWindowInfo, 500))
   },
   methods: {
     getCode() {
@@ -178,7 +199,7 @@ export default {
       const form = {
         userName: this.userName,
         certNumber: this.certNumber,
-        certType: Number(this.radio)
+        certType: 1
       }
       const codeForm = {
         code: this.code,
@@ -197,23 +218,32 @@ export default {
                 const backimg = this.realUrl(this.data.url)
                 this.htmlTitle = this.data.uesrName
                 this.data.backurl = backimg
-                if(this.radio=='1'){
+                if(this.data.certType==1){
                   //结业证书
                   // 创建html代码
                   this.makeHtml()
                 }else{
+                  // 学时证明
                   this.makeTimeHtml()
                 }
                 this.$nextTick(() => {
                   // 将html代码=>canvas=>img
                   this.toImg()
-                  this.dialogVisible = true
+                  if(this.screenWidth>800){
+                    this.dialogVisible = true
+                  }else{
+                    this.imgShow = 1
+                  }
                   // 然后删除掉用完的html代码
-                  // const e = document.getElementById('pdfDomm')
-                  // e.innerHTML = ''
+                  const e = document.getElementById('pdfDomm')
+                  e.innerHTML = ''
                 })
               } else {
-                this.errorDialog = true
+                if(this.screenWidth>800){
+                  this.errorDialog = true
+                }else{
+                  this.imgShow = 2
+                }
               }
             })
             setTimeout(() => {
@@ -242,11 +272,17 @@ export default {
       this.iconShow = false
       this.getCode()
       this.dialogVisible = false
+      this.userName= ''
+      this.certNumber=''
+      this.code= ''
     },
     handleErrorClose() {
       this.iconShow = false
       this.getCode()
       this.errorDialog = false
+      this.userName= ''
+      this.certNumber=''
+      this.code= ''
     },
     realUrl(val) {
       return process.env.VUE_APP_BASE_API + val
@@ -309,15 +345,43 @@ export default {
           <span class="foot-date train-foot-date">${this.data.issueDate}</span>
       </div>`
       e.innerHTML = this.word
+    },
+    toIndex(){
+      this.$router.push('/certInquire')
+    },
+    getWindowInfo(){
+      const windowInfo = {
+        width: window.innerWidth
+      }
+      this.screenWidth = windowInfo.width
+      console.log(this.screenWidth)
+    },
+    debounce(fn, delay){
+      let timer;
+      return function() {
+        if (timer) {
+          clearTimeout(timer);
+        }
+        timer = setTimeout(() => {
+          fn();
+        }, delay);
+      }
+    },
+    mydialogshow(val){
+      this.imgShow = val,
+      this.iconShow = false
+      this.getCode()
+      this.userName= ''
+      this.certNumber=''
+      this.code= ''
     }
-
   }
 }
 </script>
 
-<style>
+<style lang="scss">
 .train-con{
-  top: 138px;
+  top: 140px;
   bottom: 0;
   line-height: 40px;
 }
@@ -336,4 +400,290 @@ export default {
   left: 190px;
   bottom: 104px;
 }
+.height100{
+  height: 100%;
+}
+.main {
+  text-align: left;
+  height: 100%;
+  width: 100%;
+  // margin: 100px auto;
+  // width: 500px;
+  // position: absolute;
+  // left: 50%;
+  // top: 50%;
+  // transform: translate(-50%, -50%);
+}
+.main-content{
+  width: 500px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.img-box {
+  width: 360px;
+  height: 80px;
+//   background-color: brown;
+  text-align: center;
+  img{
+    height: 100%;
+    transform: scale(1.5);
+  }
+}
+.main-title {
+  width: 360px;
+  text-align: center;
+}
+.label-box {
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+}
+.label-title {
+  width: 150px;
+  line-height: 22px;
+  flex: 0 0 auto;
+  text-align: center;
+}
+.label-input {
+  line-height: 30px;
+  width: 210px;
+  border: 1px solid #50ac55;
+  padding-left: 10px;
+  box-sizing: border-box;
+  height: 45px;
+  line-height: 45px;
+}
+.label-must {
+  color: red;
+}
+.btn-box {
+  text-align: right;
+}
+.btn-box button {
+  width: 140px;
+  height: 40px;
+  margin: 10px;
+}
+.btn-reset {
+  background-color: #f1f2f3;
+  border: none;
+}
+.btn-search {
+  background-color: rgb(176,11,17);
+  color: white;
+    border: none;
+}
+.captcha-img {
+  width: 120px;
+  // background: antiquewhite;
+  margin: auto;
+  height: 45px;
+}
+.login-code-img{
+  height:45px;
+}
+.activeSpan{
+    color: #50ac55;
+}
+
+.zs-title-img{
+  display: block;
+    margin: auto;
+    height: 75px;
+    transform: scale(1.7);
+}
+
+
+::v-deep .el-dialog__body {
+  padding: 0px;
+  display: flex;
+  justify-content: center;
+}
+#pdfDomm {
+  /* 要想pdf周边留白，要在这里设置 */
+  /* padding: 20px; */
+  width: 750px;
+  margin: auto;
+}
+.proBox {
+  background-size: cover;
+  width: 750px;
+  height: 525px;
+  padding: 40px 60px;
+  box-sizing: border-box;
+  margin: 0 auto;
+  position: relative;
+  color: #000;
+  font-family: 楷体;
+  font-size: 16px;
+}
+
+.proBox-img{
+  width: 750px;
+  height: 525px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+
+
+.tit {
+  color: #000;
+  font-size: 22px;
+  font-weight: 700;
+  position: relative;
+  top: -6px;
+  left: 8px;
+  letter-spacing: 2px;
+  font-family: STHeiti;
+  margin: 10px 0;
+  text-align: center;
+}
+.proid {
+  text-align: right;
+  margin: 0;
+  font-weight: 500;
+  /* margin-right: 5px; */
+}
+.con {
+  font-size: 18px;
+  text-align: left;
+  margin: 10px 0;
+  line-height: 35px;
+  text-indent: 2em;
+  position: absolute;
+  bottom: 265px;
+  margin-top: 30px;
+  padding-right: 80px;
+  left: 88px;
+}
+.con-name {
+  margin-right: 10px;
+  margin-left: 10px;
+  font-size: 20px;
+}
+.heiti{
+  font-family:黑体 ;
+}
+.con-unit {
+  font-size: 20px;
+  font-weight: 700;
+  position: absolute;
+  right: 45px;
+  bottom: 100px;
+  z-index: 10;
+  text-align: center;
+}
+.con-unit p {
+  margin: 5px 0;
+}
+.con-footer {
+  position: absolute;
+  right: 0;
+  right: 45px;
+  bottom: 65px;
+  font-size: 10px;
+  z-index: 10;
+}
+.con-footer p{
+  margin: 0;
+}
+.chapter {
+  border-radius: 50%;
+  position: absolute;
+  bottom: 45px;
+  right: 40px;
+}
+.cert-msg{
+  font-size: 20px;
+  font-size: 15px;
+  position: absolute;
+  bottom: 50px;
+  left: 90px;
+}
+.foot-term{
+  position: absolute;
+  bottom: 160px;
+  left: 200px;
+}
+.foot-cert{
+  position: absolute;
+    bottom: 130px;
+    left: 200px;
+}
+.foot-date{
+  position: absolute;
+    bottom: 104px;
+    left: 200px;
+}
+.z10{
+  z-index: 10;
+}
+.z01{
+  z-index: 1;
+}
+.foot-pp{
+  position: absolute;
+  top: 273px;
+  left: 161px;
+  text-align: center;
+  line-height: 42px;
+  p{
+    margin: 0;
+  }
+}
+.back{
+  justify-content: flex-end;
+}
+@media screen and (max-width: 600px) {
+  .main-content{
+    width: 100%;
+    padding: 10px;
+    position: initial;
+    top: initial;
+    left: initial;
+    transform:initial;
+    -webkit-transform: initial;
+    .img-box{
+      width: 98%;
+      img{
+        height: 85%;
+      }
+    }
+  }
+  .label-box{
+    flex-direction: column;
+    align-items: flex-start;
+    .label-title{
+      text-align: left;
+      width: 100%;
+      .label-title-p{
+        display: inline-block;
+      }
+    }
+    .label-input{
+      width: 100%;
+    }
+    .captcha-img{
+      margin:20px 0;
+    }
+  }
+  .btn-box{
+    display: flex;
+    flex-direction: row;
+  }
+  .dialog-box{
+    width: 100%;
+    img{
+      width: 100%;
+      aspect-ratio: auto 750 / 525;
+    }
+  }
+  .back{
+    justify-content: flex-start;
+  }
+}
 </style>

ruoyi-ui/src/views/index.vue

@@ -4,19 +4,19 @@
       <el-col :sm="8" :lg="8">
         <div class="home-card" @click="toTarget('/certInquire/member')">
           <img src="../assets/images/cert.png" alt="证书" >
-          <div class="content">会员、理事证书、聘书查询</div>
+          <div class="home-content">会员、理事证书、聘书查询</div>
         </div>
       </el-col>
       <el-col :sm="8" :lg="8">
         <div class="home-card" @click="toTarget('/certInquire/profess')">
           <img src="../assets/images/cert.png" alt="证书" >
-          <div class="content">专业能力证书查询</div>
+          <div class="home-content">专业能力证书查询</div>
         </div>
       </el-col>
       <el-col :sm="8" :lg="8">
         <div class="home-card" @click="toTarget('/certInquire/train')">
           <img src="../assets/images/cert.png" alt="证书" >
-          <div class="content">结业证书、学时证明查询</div>
+          <div class="home-content">结业证书、学时证明查询</div>
         </div>
       </el-col>
     </el-row>
@@ -140,7 +140,7 @@
             <p>
               <i class="el-icon-user-solid"></i> QQ群：<s>满937441</s> <s>满887144332</s>
               <s>满180251782</s> <s>满104180207</s> <s>满186866453</s> <s>满201396349</s>
-              <s>满101456076</s> <s>满101539465</s> <s>满264312783</s> <s>满167385320</s> 
+              <s>满101456076</s> <s>满101539465</s> <s>满264312783</s> <s>满167385320</s>
               <s>满104748341</s> <a href="https://jq.qq.com/?_wv=1027&k=0fsNiYZt" target="_blank">
                 160110482</a
               >
@@ -981,7 +981,7 @@ export default {
   img{
     width: 30px;
   }
-  .content{
+  .home-content{
     font-size: 18px;
     margin-left: 10px;
   }

ruoyi-ui/src/views/login.vue

@@ -53,14 +53,14 @@
           <router-link class="link-type" :to="'/register'">立即注册</router-link>
         </div>
       </el-form-item>
-      <el-form-item style="width:100%;">
+      <!-- <el-form-item style="width:100%;">
         <p @click="showLink">快速链接 <i :class="linkShow?'el-icon-arrow-up':'el-icon-arrow-down'" /></p>
         <div v-show="linkShow">
           <router-link to="/certInquire/member" tag="a" target="_blank" class="fast-link">会员、理事证书、聘书查询</router-link>
           <router-link to="/certInquire/profess" tag="a" target="_blank" class="fast-link">专业能力证书查询</router-link>
           <router-link to="/certInquire/train" tag="a" target="_blank" class="fast-link">结业证书、学时证明查询</router-link>
         </div>
-      </el-form-item>
+      </el-form-item> -->
     </el-form>
     <!--  底部  -->
     <div class="el-login-footer">
@@ -154,7 +154,7 @@ export default {
             Cookies.remove('rememberMe');
           }
           this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
+            this.$router.push({ path: this.redirect || "/index" }).catch(()=>{});
           }).catch(() => {
             this.loading = false;
             if (this.captchaEnabled) {

ruoyi-ui/vue.config.js

@@ -36,8 +36,8 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         // target: `http://localhost:8080`,
-        // target: `http://192.168.0.104:8080`,
-        target: `http://114.116.114.108:18585`,
+        target: `http://192.168.0.107:18590`,
+        // target: `http://114.116.114.108:18590`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''