Merge remote-tracking branch 'origin/main'

ruoyi-ui/.env.production

@@ -1,8 +1,11 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = 证书管理系统
 
 # 生产环境配置
 ENV = 'production'
 
-# 若依管理系统/生产环境
+# 管理系统/生产环境
 VUE_APP_BASE_API = '/prod-api'
+
+# 路由懒加载
+VUE_CLI_BABEL_TRANSPILE_MODULES = true

ruoyi-ui/.env.staging

@@ -6,5 +6,5 @@ NODE_ENV = production
 # 测试环境配置
 ENV = 'staging'
 
-# 若依管理系统/测试环境
+# 管理系统/测试环境
 VUE_APP_BASE_API = '/stage-api'

ruoyi-ui/.hintrc

@@ -0,0 +1,14 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "meta-viewport": "off",
+    "axe/language": [
+      "default",
+      {
+        "html-has-lang": "off"
+      }
+    ]
+  }
+}

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,23 +92,41 @@ export const constantRoutes = [
     path:'/certInquire',
     hidden: true,
     component:() => import('@/views/certInquire'),
-    children: [
-      {
-        path: 'member',
-        component: () => import('@/views/certInquire/member'),
-        name: 'Member',
-      },
-      {
-        path: 'train',
-        component: () => import('@/views/certInquire/train'),
-        name: 'Train',
-      },
-      {
-        path: 'profess',
-        component: () => import('@/views/certInquire/profess'),
-        name: 'Profess',
-      }
-    ]
+    // 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/utils/htmlToPdf.js

@@ -1,9 +1,9 @@
 // 导出页面为PDF格式
 import html2Canvas from 'html2canvas'
-import JsPDF from 'jspdf'
+// import JsPDF from 'jspdf'
 export default {
   install(Vue, options) {
-    Vue.prototype.getPdf = function () {
+    Vue.prototype.getPdf = function() {
       var title = this.htmlTitle // 导出名称
       // var type = this.downType // 导出类型 true ->图片 false-> pdf
       var htmlID = document.getElementById('pdfDom')
@@ -12,31 +12,31 @@ export default {
         allowTaint: true,
         // 下面两个用来提高清晰度
         // dpi: window.devicePixelRatio*4, //将分辨率提高到特定的DPI 提高四倍
-        dpi: 300, //将分辨率提高到特定的DPI 提高四倍
-        scale:4, //按比例增加分辨率
+        dpi: 300, // 将分辨率提高到特定的DPI 提高四倍
+        scale: 4, // 按比例增加分辨率
         useCORS: true // 【重要】开启跨域配置
-      }).then(function (canvas) {
-        var contentWidth = canvas.width*2;
-        var contentHeight = canvas.height*2;
-        //一页pdf显示html页面生成的canvas高度;
-        var pageHeight = contentWidth / 592.28 * 841.89;
-        //未生成pdf的html页面高度
-        var leftHeight = contentHeight;
-        //页面偏移
-        var position = 0;
-        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
-        var imgHeight = 590.28;
-        var imgWidth = 841.89 ;
+      }).then(function(canvas) {
+        // var contentWidth = canvas.width * 2
+        // var contentHeight = canvas.height * 2
+        // 一页pdf显示html页面生成的canvas高度;
+        // var pageHeight = contentWidth / 592.28 * 841.89
+        // 未生成pdf的html页面高度
+        // var leftHeight = contentHeight
+        // 页面偏移
+        // var position = 0
+        // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+        // var imgHeight = 590.28
+        // var imgWidth = 841.89
         // var imgHeight = 592.28/contentWidth * contentHeight;
-        var pageData = canvas.toDataURL('image/png', 1.0);
+        var pageData = canvas.toDataURL('image/png', 1.0)
         // console.log(pageData,1111)
         // this.imgUrl = pageData
-        const el = document.createElement("a");
+        const el = document.createElement('a')
         // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
-        el.href = pageData;
-        el.download = title;
+        el.href = pageData
+        el.download = title
         // 创建一个点击事件并对 a 标签进行触发
-        const event = new MouseEvent("click");
+        const event = new MouseEvent('click')
         el.dispatchEvent(event)
         // var pdf = new JsPDF('landscape', 'pt', 'a4');
         // //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)

ruoyi-ui/src/utils/request.js

@@ -1,15 +1,16 @@
+/* eslint-disable eqeqeq */
 import axios from 'axios'
 import { Notification, MessageBox, Message, Loading } from 'element-ui'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
-import { tansParams, blobValidate } from "@/utils/ruoyi";
+import { tansParams, blobValidate } from '@/utils/ruoyi'
 import cache from '@/plugins/cache'
 import { saveAs } from 'file-saver'
 
-let downloadLoadingInstance;
+let downloadLoadingInstance
 // 是否显示重新登录
-export let isRelogin = { show: false };
+export const isRelogin = { show: false }
 
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
@@ -31,10 +32,10 @@ service.interceptors.request.use(config => {
   }
   // get请求映射params参数
   if (config.method === 'get' && config.params) {
-    let url = config.url + '?' + tansParams(config.params);
-    url = url.slice(0, -1);
-    config.params = {};
-    config.url = url;
+    let url = config.url + '?' + tansParams(config.params)
+    url = url.slice(0, -1)
+    config.params = {}
+    config.url = url
   }
   if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
     const requestObj = {
@@ -46,12 +47,12 @@ service.interceptors.request.use(config => {
     if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
       cache.session.setJSON('sessionObj', requestObj)
     } else {
-      const s_url = sessionObj.url;                  // 请求地址
-      const s_data = sessionObj.data;                // 请求数据
-      const s_time = sessionObj.time;                // 请求时间
-      const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交
+      const s_url = sessionObj.url // 请求地址
+      const s_data = sessionObj.data // 请求数据
+      const s_time = sessionObj.time // 请求时间
+      const interval = 1000 // 间隔时间(ms)，小于此时间视为重复提交
       if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
-        const message = '数据正在处理，请勿重复提交';
+        const message = '数据正在处理，请勿重复提交'
         console.warn(`[${s_url}]: ` + message)
         return Promise.reject(new Error(message))
       } else {
@@ -61,85 +62,85 @@ service.interceptors.request.use(config => {
   }
   return config
 }, error => {
-    console.log(error)
-    Promise.reject(error)
+  console.log(error)
+  Promise.reject(error)
 })
 
 // 响应拦截器
 service.interceptors.response.use(res => {
-    // 未设置状态码则默认成功状态
-    const code = res.data.code || 200;
-    // 获取错误信息
-    const msg = errorCode[code] || res.data.msg || errorCode['default']
-    // 二进制数据则直接返回
-    if(res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer'){
-      return res.data
-    }
-    if (code === 401) {
-      if (!isRelogin.show) {
-        isRelogin.show = true;
-        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
-          isRelogin.show = false;
-          store.dispatch('LogOut').then(() => {
-            location.href = '/index';
-          })
+  // 未设置状态码则默认成功状态
+  const code = res.data.code || 200
+  // 获取错误信息
+  const msg = errorCode[code] || res.data.msg || errorCode['default']
+  // 二进制数据则直接返回
+  if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
+    return res.data
+  }
+  if (code === 401) {
+    if (!isRelogin.show) {
+      isRelogin.show = true
+      MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
+        isRelogin.show = false
+        store.dispatch('LogOut').then(() => {
+          location.href = '/index'
+        })
       }).catch(() => {
-        isRelogin.show = false;
-      });
-    }
-      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
-    } else if (code === 500) {
-      Message({ message: msg, type: 'error' })
-      return Promise.reject(new Error(msg))
-    } else if (code === 601) {
-      Message({ message: msg, type: 'warning' })
-      return Promise.reject('error')
-    } else if (code !== 200) {
-      Notification.error({ title: msg })
-      return Promise.reject('error')
-    } else {
-      return res.data
+        isRelogin.show = false
+      })
     }
-  },
-  error => {
-    console.log('err' + error)
-    let { message } = error;
-    if (message == "Network Error") {
-      message = "后端接口连接异常";
-    } else if (message.includes("timeout")) {
-      message = "系统接口请求超时";
-    } else if (message.includes("Request failed with status code")) {
-      message = "系统接口" + message.substr(message.length - 3) + "异常";
-    }
-    Message({ message: message, type: 'error', duration: 5 * 1000 })
-    return Promise.reject(error)
+    return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+  } else if (code === 500) {
+    Message({ message: msg, type: 'error' })
+    return Promise.reject(new Error(msg))
+  } else if (code === 601) {
+    Message({ message: msg, type: 'warning' })
+    return Promise.reject('error')
+  } else if (code !== 200) {
+    Notification.error({ title: msg })
+    return Promise.reject('error')
+  } else {
+    return res.data
+  }
+},
+error => {
+  console.log('err' + error)
+  let { message } = error
+  if (message == 'Network Error') {
+    message = '后端接口连接异常'
+  } else if (message.includes('timeout')) {
+    message = '系统接口请求超时'
+  } else if (message.includes('Request failed with status code')) {
+    message = '系统接口' + message.substr(message.length - 3) + '异常'
   }
+  Message({ message: message, type: 'error', duration: 5 * 1000 })
+  return Promise.reject(error)
+}
 )
 
 // 通用下载方法
 export function download(url, params, filename, config) {
-  downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
+  downloadLoadingInstance = Loading.service({ text: '正在下载数据，请稍候', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' })
   return service.post(url, params, {
     transformRequest: [(params) => { return tansParams(params) }],
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
     responseType: 'blob',
     ...config
-  }).then(async (data) => {
-    const isLogin = await blobValidate(data);
+  }).then(async(data) => {
+    const isLogin = await blobValidate(data)
     if (isLogin) {
       const blob = new Blob([data])
       saveAs(blob, filename)
     } else {
-      const resText = await data.text();
-      const rspObj = JSON.parse(resText);
+      const resText = await data.text()
+      const rspObj = JSON.parse(resText)
       const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
-      Message.error(errMsg);
+      Message.error(errMsg)
     }
-    downloadLoadingInstance.close();
+    downloadLoadingInstance.close()
   }).catch((r) => {
     console.error(r)
     Message.error('下载文件出现错误，请联系管理员！')
-    downloadLoadingInstance.close();
+    downloadLoadingInstance.close()
   })
 }
 

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

@@ -1,252 +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;
-  /* color: #892f27; */
-  /* font-size: 36px; */
-  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: 20px;
-  /* font-weight: 700; */
-  text-align: left;
-  margin: 10px 0;
-  line-height: 32px;
-  text-indent: 2em;
-  // text-indent: 3em;
-  position: absolute;
-    /* top: 129px; */
-  bottom: 265px;
-  margin-top: 30px;
-  padding-right: 80px;
-  left: 88px;
-}
-.con-name {
-  margin-right: 10px;
-  font-size: 24px;
-}
-.heiti{
-  font-family:黑体 ;
-}
-.con-unit {
-  font-size: 20px;
-  font-weight: 700;
-  position: absolute;
-  right: 45px;
-  bottom: 100px;
-  z-index: 10;
-  text-align: center;
-  /* letter-spacing: 2px; */
-}
-.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: 124px;
-  left: 175px;
-}
-.foot-cert{
-  position: absolute;
-  bottom: 94px;
-  left: 175px;
-}
-.foot-date{
-  position: absolute;
-  bottom: 64px;
-  left: 175px;
-}
-.z10{
-  z-index: 10;
-}
-.z01{
-  z-index: 1;
-}
-.foot-pp{
-  position: absolute;
-  top: 270px;
-  left: 147px;
-  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

@@ -1,46 +1,50 @@
 <template>
-    <div >
-      <div class="main-content">
-        <div class="img-box">
-            <img src="../../../assets/logo/logo2.png" alt="广东省教师继续教育学会">
+  <div>
+    <div class="main-content">
+      <div class="img-box">
+        <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-title">
+            <p class="label-title-p">持证人姓名</p>
+            <p class="label-title-p">（或持证单位全称）</p>
+          </div>
+          <input v-model="userName" type="text" class="label-input">
         </div>
-        <div style="text-align: center;line-height: 50px;">
-            <span class="main-title" style="margin: 0 10px;font-weight: bold;" >会员、理事证书、聘书查询</span>
+        <div class="label-box">
+          <div class="label-title">
+            <p>证书编码</p>
+          </div>
+          <input v-model="certNumber" type="text" class="label-input">
         </div>
-        <div>
-            <div class="label-box">
-                <div class="label-title">
-                    <p>持证人姓名</p>
-                    <p>（或持证单位全称）</p>
-                </div>
-                <input type="text" v-model="userName" class="label-input" />
-            </div>
-            <div class="label-box">
-                <div class="label-title">
-                    <p>证书编码</p>
-                </div>
-                <input type="text" v-model="certNumber" class="label-input" />
-            </div>
-            <div class="label-box">
-                <div class="label-title">
-                    <p>验证码<span class="label-must">*</span></p>
-                </div>
-                <input type="text" v-model="code" class="label-input" style="border-color:#acb1b5"/>
-                <div class="captcha-img">
-                    <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-                </div>
-            </div>
-            <div class="btn-box">
-                <button class="btn-reset">重置</button>
-                <button class="btn-search" @click="handleSearch" v-bind:disabled="iconShow">
-                  查询<i class="el-icon-loading" v-show="iconShow"></i>
-                </button>
-            </div>
+        <div class="label-box">
+          <div class="label-title">
+            <p>验证码<span class="label-must">*</span></p>
+          </div>
+          <input v-model="code" type="text" class="label-input" style="border-color:#acb1b5">
+          <div class="captcha-img">
+            <img :src="codeUrl" class="login-code-img" @click="getCode">
+          </div>
+        </div>
+        <div class="btn-box">
+          <button class="btn-reset">重置</button>
+          <button class="btn-search" :disabled="iconShow" @click="handleSearch">
+            查询<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 style="position:fixed;top:-1200px;left:-1800px">
-        <div id="pdfDomm" ref="posterWrap">
-          <!-- <div class="proBox" >
+    </div>
+    <div style="position:fixed;top:-1200px;left:-1800px">
+      <!--  -->
+      <div id="pdfDomm" ref="posterWrap">
+        <!-- <div class="proBox" >
             <img class="proBox-img" :src="data.url" >
             <div class="con" >
               <span class="con-name heiti">{{data.name}}</span>
@@ -50,186 +54,221 @@
             <span class="foot-cert">{{data.certId}}</span>
             <span class="foot-date">{{data.issueDate}}</span>
           </div> -->
-        </div>
       </div>
-      
-      <el-dialog
-        :title="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
-        :visible.sync="dialogVisible"
-        width="fit-content"
-        :before-close="handleClose"
-        class="dialog-box"
-      >
-        <p >经证书系统验证查询，证书信息正确，该证书预览如下，如需下载使用，请点击“下载”按钮。</p>
-        <img :src="imgUrl" width="750px" height="525px" ref="certimg"/>
-        <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>
-          <el-button type="primary" @click="downloadImg">下载</el-button>
-          <!-- getPdf('#pdfDom') -->
-        </span>
-      </el-dialog>
-      <el-dialog
-        :title="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
-        :visible.sync="errorDialog"
-        width="50%"
-        class="errordialog-box"
-        :before-close="handleErrorClose"
-        >
-        <!-- :before-close="handleClose" -->
-        <p>未能查询到该证书，原因可能是证书编号或姓名（单位名称）输入错误， 也可能该证书为伪造证书。请重新输入准确的 证书编号 与 姓名（单位名称）信息后，再查询。谢谢您的关注。</p>
-        <p>如有疑问，请通知持证人与我会联系。</p>
-        <span slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="handleErrorClose" style="width:100px">确 定</el-button>
-        </span>
-      </el-dialog>
     </div>
+    <my-dialog 
+    :imgShow="imgShow" 
+    :certNumber="certNumber" 
+    :imgUrl="imgUrl" 
+    @mydialogshow="mydialogshow"
+    :htmlTitle = "htmlTitle"
+    ></my-dialog>
+    <el-dialog
+      :title="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
+      :visible.sync="dialogVisible"
+      width="fit-content"
+      :before-close="handleClose"
+      class="dialog-box"
+    >
+      <p>经证书系统验证查询，证书信息正确，该证书预览如下，如需下载使用，请点击“下载”按钮。</p>
+      <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>
+        <el-button type="primary" @click="downloadImg">下载</el-button>
+        <!-- getPdf('#pdfDom') -->
+      </span>
+    </el-dialog>
+    <el-dialog
+      :title="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
+      :visible.sync="errorDialog"
+      width="50%"
+      class="errordialog-box"
+      :before-close="handleErrorClose"
+    >
+      <!-- :before-close="handleClose" -->
+      <p>未能查询到该证书，原因可能是证书编号或姓名（单位名称）输入错误， 也可能该证书为伪造证书。请重新输入准确的 证书编号 与 姓名（单位名称）信息后，再查询。谢谢您的关注。</p>
+      <p>如有疑问，请通知持证人与我会联系。</p>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" style="width:100px" @click="handleErrorClose">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-import { getCodeImg,checkCode} from "@/api/login";
-import { getCert } from "@/api/system/contract"
+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 {
-      pic:require('@/assets/certback/appiontment_page-0001.jpg'),
-      userName: "",
-      certNumber: "",
-      code: "",
-      codeUrl:"",
-      captchaEnabled:true,
-      uuid:"",
+      pic: require('@/assets/certback/appiontment_page-0001.jpg'),
+      userName: '',
+      certNumber: '',
+      code: '',
+      codeUrl: '',
+      captchaEnabled: true,
+      uuid: '',
       dialogVisible: false,
-      iconShow:false,
-      dist:"cert_b_type",
-      pageData: null, //接收html格式代码
-      htmlTitle: "结业证书",
+      iconShow: false,
+      dist: 'cert_b_type',
+      pageData: null, // 接收html格式代码
+      htmlTitle: '结业证书',
       isShow: true,
       isCanvas: false,
       downType: false, // false为 pdf , true为图片
-      data:{
+      data: {
         certContent: null,
-        certId: "221231hhh13",
+        certId: '221231hhh13',
         certMajor: 1,
         certType: 1,
-        code: "666666666666666",
+        code: '666666666666666',
         createBy: null,
         createTime: null,
-        email: "littlegreen55@163.com",
+        email: 'littlegreen55@163.com',
         id: 4,
-        issueDate: "2022-11-28",
-        name: "张晓翠",
-        phone: "16329009990",
+        issueDate: '2022-11-28',
+        name: '张晓翠',
+        phone: '16329009990',
         remark: null,
         updateBy: null,
         updateDate: null,
         updateTime: null,
-        validTerm: "22222222"
+        validTerm: '22222222'
       },
-      imgUrl:'',
-      errorDialog:false,
-      word:''
-    };
+      imgUrl: '',
+      errorDialog: false,
+      word: '',
+      screenWidth:window.screen.availWidth,
+      imgShow:0
+    }
+  },
+  components:{
+    MyDialog      
+  },
+  mounted() {
+    this.getCode()
+    window.addEventListener('resize', this.debounce(this.getWindowInfo, 500))
   },
-  methods:{
+  destroyed(){
+    window.removeEventListener('resize', this.debounce(this.getWindowInfo, 500))
+  },
+  methods: {
     getCode() {
       getCodeImg().then(res => {
         // console.log(res)
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
         if (this.captchaEnabled) {
-          this.codeUrl = "data:image/gif;base64," + res.img;
-          this.uuid = res.uuid;
+          this.codeUrl = 'data:image/gif;base64,' + res.img
+          this.uuid = res.uuid
         }
         this.iconShow = false
-      });
+      })
     },
-    async handleSearch(){
-       this.iconShow = true
-        if( this.isBlock(this.userName)){
-          this.iconShow = false
-          this.$message.error("请输入持证人姓名或单位名称！")
-          return;
-        }
-        if( this.isBlock(this.certNumber)){
-          this.iconShow = false
-          this.$message.error("请输入证书编码！")
-          return;
-        }
-        if( this.isBlock(this.code)){
-          this.iconShow = false
-          this.$message.error("请输入验证码！")
-          return;
-        }
-        const form = {
-          userName: this.userName,
-          certNumber: this.certNumber,
-        }
-        const codeForm = {
-          code: this.code,
-          uuid: this.uuid
-        }
-        try{
-          let codeRes = await checkCode(codeForm)
-          if(codeRes.code===200){
-            try{
-              getCert(form).then(res=>{
-                if(res.data){
-                  this.iconShow = false
-                  this.data = res.data
-                  let img = this.realUrl(this.data.url)
-                  this.htmlTitle = this.data.name
-                  this.data.url = img
-                  // 创建html代码
-                  this.makeHtml()
-                  this.$nextTick(()=>{
-                    // 将html代码=>canvas=>img
-                    this.toImg()
+    async handleSearch() {
+      this.iconShow = true
+      if (this.isBlock(this.userName)) {
+        this.iconShow = false
+        this.$message.error('请输入持证人姓名或单位名称！')
+        return
+      }
+      if (this.isBlock(this.certNumber)) {
+        this.iconShow = false
+        this.$message.error('请输入证书编码！')
+        return
+      }
+      if (this.isBlock(this.code)) {
+        this.iconShow = false
+        this.$message.error('请输入验证码！')
+        return
+      }
+      const form = {
+        userName: this.userName,
+        certNumber: this.certNumber
+      }
+      const codeForm = {
+        code: this.code,
+        uuid: this.uuid
+      }
+      try {
+        const codeRes = await checkCode(codeForm)
+        if (codeRes.code === 200) {
+          try {
+            getCert(form).then(res => {
+              if (res.data) {
+                this.iconShow = false
+                this.data = res.data
+                const img = this.realUrl(this.data.url)
+                this.htmlTitle = this.data.name
+                this.data.url = img
+                // 创建html代码
+                this.makeHtml()
+                this.$nextTick(() => {
+                  // 将html代码=>canvas=>img
+                  this.toImg()
+                  console.log(this.screenWidth)
+                  if(this.screenWidth>800){
                     this.dialogVisible = true
-                    // 然后删除掉用完的html代码
-                    let e = document.getElementById('pdfDomm')
-                    e.innerHTML = ""
-                  })
-                }else{
+                  }else{
+                    this.imgShow = 1
+                  }
+                  
+                  // 然后删除掉用完的html代码
+                  const e = document.getElementById('pdfDomm')
+                  e.innerHTML = ''
+                })
+              } else {
+                if(this.screenWidth>800){
                   this.errorDialog = true
+                }else{
+                  this.imgShow = 2
                 }
-              })
-              setTimeout(()=>{
-                if(this.iconShow){
-                  this.iconShow = false
-                }
-              },10000)
-            }catch(error){
-              this.iconShow = false
-              this.getCode()
-            }
+              }
+            })
+            setTimeout(() => {
+              if (this.iconShow) {
+                this.iconShow = false
+              }
+            }, 10000)
+          } catch (error) {
+            this.iconShow = false
+            this.getCode()
           }
-        }catch(err){
-          this.iconShow = false
-          this.getCode()
         }
+      } catch (err) {
+        this.iconShow = false
+        this.getCode()
+      }
     },
-    isBlock(str){
-      if(str===""){
+    isBlock(str) {
+      if (str === '') {
         return true
-      }else {
+      } else {
         return false
       }
     },
-    handleClose(){
+    handleClose() {
       this.iconShow = false
       this.getCode()
       this.dialogVisible = false
+      this.userName= ''
+      this.certNumber=''
+      this.code= ''
     },
-    handleErrorClose(){
+    handleErrorClose() {
       this.iconShow = false
       this.getCode()
       this.errorDialog = false
+      this.userName= ''
+      this.certNumber=''
+      this.code= ''
     },
-    realUrl(val){
+    realUrl(val) {
       return process.env.VUE_APP_BASE_API + val
     },
-    toImg(){
+    toImg() {
       // 将html代码=>canvas=>img
       var htmlID = document.getElementById('pdfDomm')
       const that = this
@@ -237,47 +276,80 @@ export default {
         allowTaint: true,
         // 下面两个用来提高清晰度
         // dpi: window.devicePixelRatio*4, //将分辨率提高到特定的DPI 提高四倍
-        dpi: 300, //将分辨率提高到特定的DPI 提高四倍
-        scale:4, //按比例增加分辨率
+        dpi: 300, // 将分辨率提高到特定的DPI 提高四倍
+        scale: 4, // 按比例增加分辨率
         useCORS: true // 【重要】开启跨域配置
-      }).then(function (canvas) {
-        var pageData = canvas.toDataURL('image/png', 1.0);
+      }).then(function(canvas) {
+        var pageData = canvas.toDataURL('image/png', 1.0)
         that.imgUrl = pageData
       })
     },
-    downloadImg(){
-      const el = document.createElement("a");
+    downloadImg() {
+      const el = document.createElement('a')
       // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
-      el.href = this.$refs.certimg.src;
-      el.download = this.htmlTitle;
+      el.href = this.$refs.certimg.src
+      el.download = this.htmlTitle
       // 创建一个点击事件并对 a 标签进行触发
-      const event = new MouseEvent("click");
+      const event = new MouseEvent('click')
       el.dispatchEvent(event)
     },
-    makeHtml(){
+    makeHtml() {
       // js写html代码
-      let e = document.getElementById('pdfDomm')
-      this.word =  `<div class="proBox" >
+      const e = document.getElementById('pdfDomm')
+      this.word = `<div class="proBox" >
         <img class="proBox-img" src="${window.location.origin}${this.data.url}" >
-        <div class="con" >
-          <span class="con-name heiti">${this.data.name}</span>
-          <span>${this.data.certContent}</span>
+        <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>
+          </p>
+          <p style="margin:0">特发此证。</p>
         </div>
         <span class="foot-term" >${this.data.validTerm}</span>
         <span class="foot-cert">${this.data.certId}</span>
         <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= ''
     }
-  },
-  mounted(){
-    this.getCode()
   }
-};
+}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" >
 .dialog-box{
+  img{
+    width:750px;
+    height:525px
+  }
   p{
     width: 725px;
     margin: auto;
@@ -295,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

@@ -1,73 +1,84 @@
 <template>
-    <div>
-      <div class="main-content">
-        <div class="img-box">
-              <img src="../../../assets/logo/logo2.png" alt="广东省教师继续教育学会">
+  <div>
+    <div class="main-content">
+      <div class="img-box">
+        <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>
+      </div>
+      <div>
+        <div class="label-box">
+          <div class="label-title">
+            <p class="label-title-p">持证人姓名</p>
+            <p class="label-title-p">（或持证单位全称）</p>
           </div>
-        <div style="text-align: center;line-height: 50px;">
-            <span class="main-title" style="margin: 0 10px;font-weight: bold;" >专业能力证书查询</span>
+          <input v-model="userName" type="text" class="label-input">
         </div>
-        <div>
-          <div class="label-box">
-              <div class="label-title">
-                  <p>持证人姓名</p>
-                  <p>（或持证单位全称）</p>
-              </div>
-              <input type="text" v-model="userName" class="label-input" />
-          </div>
-          <div class="label-box">
-              <div class="label-title">
-                  <p>证书编码</p>
-              </div>
-              <input type="text" v-model="certNumber" class="label-input" />
+        <div class="label-box">
+          <div class="label-title">
+            <p>证书编码</p>
           </div>
-          <div class="label-box">
-              <div class="label-title">
-                  <p>验证码<span class="label-must">*</span></p>
-              </div>
-              <input type="text" v-model="code" class="label-input" style="border-color:#acb1b5"/>
-              <div class="captcha-img">
-                  <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-              </div>
+          <input v-model="certNumber" type="text" class="label-input">
+        </div>
+        <div class="label-box">
+          <div class="label-title">
+            <p>验证码<span class="label-must">*</span></p>
           </div>
-          <div class="btn-box">
-              <button class="btn-reset">重置</button>
-              <button class="btn-search" @click="handleSearch" v-bind:disabled="iconShow">
-                查询<i class="el-icon-loading" v-show="iconShow"></i>
-              </button>
+          <input v-model="code" type="text" class="label-input" style="border-color:#acb1b5">
+          <div class="captcha-img">
+            <img :src="codeUrl" class="login-code-img" @click="getCode">
           </div>
         </div>
+        <div class="btn-box">
+          <button class="btn-reset">重置</button>
+          <button class="btn-search" :disabled="iconShow" @click="handleSearch">
+            查询<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 style="position:fixed;top:-1200px;left:-1800px">
-        <div id="pdfDomm" ref="posterWrap">
-          <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: 133px;left: 182px;">
-              <img id="pdfhead" :src="data.headurl" style="height:100%;position: absolute;left: 50%;transform: translate(-50%, -50%);top: 50%;" />
-            </div>
-            <div class="foot-pp z10">
-              <p class="foot-p-name " >{{data.uesrName}}</p>
-              <p class="foot-p-ID ">{{data.userId}}</p>
-              <p class="foot-p-cert ">{{data.certId}}</p>
-              <p class="foot-p-date ">{{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;">
-              <p style="margin:0">
-                持证人参加了<span class="heiti" style="margin: 0 15px;font-size: 19px;">{{data.certName}}</span>，已修完教学计划规定的全部课程，合计<span class="heiti" style="margin: 0 15px;font-size: 20px;">{{data.courseHours}}</span>学时。
-              </p>
-              <p style="margin:0">考核合格，准予结业，特发此证。</p>
-            </div>
+    </div>
+    <div style="position:fixed;">
+      <!-- top:-1200px;left:-1800px -->
+      <div id="pdfDomm" ref="posterWrap">
+        <!-- <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%;">
           </div>
-        </div>
+          <div class="foot-pp z10">
+            <p class="foot-p-name ">{{ data.uesrName }}</p>
+            <p class="foot-p-ID ">{{ data.userId }}</p>
+            <p class="foot-p-cert ">{{ data.certId }}</p>
+            <p class="foot-p-date ">{{ data.issueDate }}</p>
+          </div>
+          <div class="content z10" style="position: absolute;left: 405px;width: 270px;top: 125px;font-size: 17px;line-height: 30px;text-indent: 2em;text-align: justify;text-align-last: left;">
+            <p style="margin:0">
+              持证人参加了<span class="heiti" style="margin: 0 15px;font-size: 17px;">{{ data.certName }}</span>，已修完教学计划规定的全部课程，合计<span class="heiti" style="margin: 0 15px;font-size: 18px;">{{ data.courseHours }}</span>学时。
+            </p>
+            <p style="margin:0">考核合格，准予结业，特发此证。</p>
+          </div>
+        </div> -->
       </div>
-      <el-dialog
+    </div>
+    <my-dialog 
+    :imgShow="imgShow" 
+    :certNumber="certNumber" 
+    :imgUrl="imgUrl" 
+    @mydialogshow="mydialogshow"
+    :htmlTitle = "htmlTitle"
+    ></my-dialog>
+    <el-dialog
       :title="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
-        :visible.sync="dialogVisible"
-        width="fit-content"
-        :before-close="handleClose"
-        class="dialog-box"
-      >
-        <!-- <div id="pdfDom" ref="posterWrap">
+      :visible.sync="dialogVisible"
+      width="fit-content"
+      :before-close="handleClose"
+      class="dialog-box"
+    >
+      <!-- <div id="pdfDom" ref="posterWrap">
           <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: 133px;left: 182px;">
@@ -87,184 +98,210 @@
             </div>
           </div>
         </div> -->
-        <p >经证书系统验证查询，证书信息正确，该证书预览如下，如需下载使用，请点击“下载”按钮。</p>
-        <img :src="imgUrl" width="750px" height="525px" ref="certimg"/>
-        <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>
-          <el-button type="primary" @click="downloadImg">下载</el-button>
-          <!-- getPdf('#pdfDom') -->
-        </span>
-      </el-dialog>
-      <el-dialog
-        :title="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
-        :visible.sync="errorDialog"
-        width="50%"
-        class="errordialog-box"
-        :before-close="handleErrorClose"
-        >
-        <!-- :before-close="handleClose" -->
-        <p>未能查询到该证书，原因可能是证书编号或姓名（单位名称）输入错误， 也可能该证书为伪造证书。请重新输入准确的 证书编号 与 姓名（单位名称）信息后，再查询。谢谢您的关注。</p>
-        <p>如有疑问，请通知持证人与我会联系。</p>
-        <span slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="handleErrorClose" style="width:100px">确 定</el-button>
-        </span>
-      </el-dialog>
-    </div>
+      <p>经证书系统验证查询，证书信息正确，该证书预览如下，如需下载使用，请点击“下载”按钮。</p>
+      <img ref="certimg" :src="imgUrl" width="750px" height="525px">
+      <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>
+        <el-button type="primary" @click="downloadImg">下载</el-button>
+        <!-- getPdf('#pdfDom') -->
+      </span>
+    </el-dialog>
+    <el-dialog
+      :title="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
+      :visible.sync="errorDialog"
+      width="50%"
+      class="errordialog-box"
+      :before-close="handleErrorClose"
+    >
+      <!-- :before-close="handleClose" -->
+      <p>未能查询到该证书，原因可能是证书编号或姓名（单位名称）输入错误， 也可能该证书为伪造证书。请重新输入准确的 证书编号 与 姓名（单位名称）信息后，再查询。谢谢您的关注。</p>
+      <p>如有疑问，请通知持证人与我会联系。</p>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" style="width:100px" @click="handleErrorClose">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-import { getCodeImg,checkCode} from "@/api/login"
-import { getACert } from "@/api/system/grad"
+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 {
-      userName: "",
-      certNumber: "",
-      code: "",
-      codeUrl:"",
-      captchaEnabled:true,
-      uuid:"",
+      userName: '',
+      certNumber: '',
+      code: '',
+      codeUrl: '',
+      captchaEnabled: true,
+      uuid: '',
       dialogVisible: false,
-      iconShow:false,
-      dist:"cert_b_type",
-      pageData: null, //接收html格式代码
-      htmlTitle: "结业证书",
+      iconShow: false,
+      dist: 'cert_b_type',
+      pageData: null, // 接收html格式代码
+      htmlTitle: '结业证书',
       isShow: true,
       isCanvas: false,
       downType: false, // false为 pdf , true为图片
-      data:{
-        certId: "11111111",
-        certName: "222",
+      data: {
+        certId: '11111111',
+        certName: '222',
         certType: 0,
-        courseHours: "222",
-        courseName: "222",
+        courseHours: '222',
+        courseName: '222',
         createBy: null,
         createTime: null,
         id: 3,
-        issueDate: "2022-11-29",
-        level: "22",
-        picture: "/profile/2022/222_A00.jpg",
+        issueDate: '2022-11-29',
+        level: '22',
+        picture: '/profile/2022/222_A00.jpg',
         remark: null,
-        trainPeriod: "222",
+        trainPeriod: '222',
         uesrName: null,
         updateBy: null,
-        updateDate: "2022-12-13T15:29:56.000+08:00",
+        updateDate: '2022-12-13T15:29:56.000+08:00',
         updateTime: null,
-        url: "/profile/upload/2022/12/13/pro1_page-0001_20221213151348A006.jpg",
-        userEmail:"222222",
-        userId: "2222",
-        userPhone: "222"
+        url: '/profile/upload/2022/12/13/pro1_page-0001_20221213151348A006.jpg',
+        userEmail: '222222',
+        userId: '2222',
+        userPhone: '222'
       },
-      imgUrl:'',
-      errorDialog:false,
-      word:''
-    };
+      imgUrl: '',
+      errorDialog: false,
+      word: '',
+      screenWidth:window.screen.availWidth,
+      imgShow:0
+    }
+  },
+  components:{
+    MyDialog      
   },
-  methods:{
+  mounted() {
+    this.getCode()
+    window.addEventListener('resize', this.debounce(this.getWindowInfo, 500))
+  },
+  destroyed(){
+    window.removeEventListener('resize', this.debounce(this.getWindowInfo, 500))
+  },
+  methods: {
     getCode() {
       getCodeImg().then(res => {
         // console.log(res)
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
         if (this.captchaEnabled) {
-          this.codeUrl = "data:image/gif;base64," + res.img;
-          this.uuid = res.uuid;
+          this.codeUrl = 'data:image/gif;base64,' + res.img
+          this.uuid = res.uuid
         }
-      });
+      })
     },
-    async handleSearch(){
-       this.iconShow = true
-        if( this.isBlock(this.userName)){
-          this.iconShow = false
-          this.$message.error("请输入持证人姓名或单位名称！")
-          return;
-        }
-        if( this.isBlock(this.certNumber)){
-          this.iconShow = false
-          this.$message.error("请输入证书编码！")
-          return;
-        }
-        if( this.isBlock(this.code)){
-          this.iconShow = false
-          this.$message.error("请输入验证码！")
-          return;
-        }
-        const form = {
-          userName: this.userName,
-          certNumber: this.certNumber,
-          certType:0
-        }
-        const codeForm = {
-          code: this.code,
-          uuid: this.uuid
-        }
-        try{
-          let codeRes = await checkCode(codeForm)
-          // console.log(codeRes)
-          if(codeRes.code===200){
-            try{
-              getACert(form).then(res=>{
-                if(res.data){
-                  this.iconShow = false
-                  this.data = res.data
-                  // console.log(this.data)
-                  let backimg = this.realUrl(this.data.url)
-                  let headimg = this.realUrl(this.data.picture)
-                  this.htmlTitle = this.data.uesrName
-                  this.data.backurl = backimg
-                  this.data.headurl = headimg
-                  // 创建html代码
-                  // this.makeHtml()
-                  this.$nextTick(()=>{
-                    // 将html代码=>canvas=>img
-                    this.toImg()
+    async handleSearch() {
+      this.iconShow = true
+      if (this.isBlock(this.userName)) {
+        this.iconShow = false
+        this.$message.error('请输入持证人姓名或单位名称！')
+        return
+      }
+      if (this.isBlock(this.certNumber)) {
+        this.iconShow = false
+        this.$message.error('请输入证书编码！')
+        return
+      }
+      if (this.isBlock(this.code)) {
+        this.iconShow = false
+        this.$message.error('请输入验证码！')
+        return
+      }
+      const form = {
+        userName: this.userName,
+        certNumber: this.certNumber,
+        certType: 0
+      }
+      const codeForm = {
+        code: this.code,
+        uuid: this.uuid
+      }
+      try {
+        const codeRes = await checkCode(codeForm)
+        // console.log(codeRes)
+        if (codeRes.code === 200) {
+          try {
+            getACert(form).then(res => {
+              if (res.data) {
+                this.iconShow = false
+                this.data = res.data
+                // console.log(this.data)
+                const backimg = this.realUrl(this.data.url)
+                const headimg = this.realUrl(this.data.picture)
+                this.htmlTitle = this.data.uesrName
+                this.data.backurl = backimg
+                this.data.headurl = headimg
+                // 创建html代码
+                this.makeHtml()
+                this.$nextTick(() => {
+                  // 将html代码=>canvas=>img
+                  this.toImg()
+                  if(this.screenWidth>800){
                     this.dialogVisible = true
-                    // 然后删除掉用完的html代码
-                    let e = document.getElementById('pdfDomm')
-
-                    e.innerHTML = ""
-                  })
-                }else{
+                  }else{
+                    this.imgShow = 1
+                  }
+                  // 然后删除掉用完的html代码
+                  const e = document.getElementById('pdfDomm')
+                  e.innerHTML = ''
+                })
+              } else {
+                if(this.screenWidth>800){
                   this.errorDialog = true
+                }else{
+                  this.imgShow = 2
                 }
-              })
-              setTimeout(()=>{
-                if(this.iconShow){
-                  this.iconShow = false
-                }
-              },10000)
-            }catch(error){
-              this.iconShow = false
-              this.getCode()
-            }
+              }
+            })
+            setTimeout(() => {
+              if (this.iconShow) {
+                this.iconShow = false
+              }
+            }, 10000)
+          } catch (error) {
+            this.iconShow = false
+            this.getCode()
           }
-        }catch(err){
-          this.iconShow = false
-          this.getCode()
         }
+      } catch (err) {
+        this.iconShow = false
+        this.getCode()
+      }
     },
-    isBlock(str){
-      if(str===""){
+    isBlock(str) {
+      if (str === '') {
         return true
-      }else {
+      } else {
         return false
       }
     },
-    handleClose(){
+    handleClose() {
       this.iconShow = false
       this.getCode()
       this.dialogVisible = false
+      this.userName= ''
+      this.certNumber=''
+      this.code= ''
     },
-    handleErrorClose(){
+    handleErrorClose() {
       this.iconShow = false
       this.getCode()
       this.errorDialog = false
+      this.userName= ''
+      this.certNumber=''
+      this.code= ''
     },
-    realUrl(val){
+    realUrl(val) {
       return process.env.VUE_APP_BASE_API + val
     },
-    toImg(){
+    toImg() {
       // 将html代码=>canvas=>img
       var htmlID = document.getElementById('pdfDomm')
       const that = this
@@ -272,29 +309,29 @@ export default {
         allowTaint: true,
         // 下面两个用来提高清晰度
         // dpi: window.devicePixelRatio*4, //将分辨率提高到特定的DPI 提高四倍
-        dpi: 300, //将分辨率提高到特定的DPI 提高四倍
-        scale:4, //按比例增加分辨率
+        dpi: 300, // 将分辨率提高到特定的DPI 提高四倍
+        scale: 4, // 按比例增加分辨率
         useCORS: true // 【重要】开启跨域配置
-      }).then(function (canvas) {
-        var pageData = canvas.toDataURL('image/png', 1.0);
+      }).then(function(canvas) {
+        var pageData = canvas.toDataURL('image/png', 1.0)
         that.imgUrl = pageData
       })
     },
-    downloadImg(){
-      const el = document.createElement("a");
+    downloadImg() {
+      const el = document.createElement('a')
       // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
-      el.href = this.$refs.certimg.src;
-      el.download = this.htmlTitle;
+      el.href = this.$refs.certimg.src
+      el.download = this.htmlTitle
       // 创建一个点击事件并对 a 标签进行触发
-      const event = new MouseEvent("click");
+      const event = new MouseEvent('click')
       el.dispatchEvent(event)
     },
-    makeHtml(){
+    makeHtml() {
       // js写html代码
-      let e = document.getElementById('pdfDomm')
+      const e = document.getElementById('pdfDomm')
       this.word = `<div class="proBox" >
             <img class="proBox-img z01" src="${window.location.origin}${this.data.backurl}" />
-            <div class="con z10" style="width: 64px; height: 83px;overflow: hidden;text-indent: 0;padding-right: 0;top: 133px;left: 182px;">
+            <div class="con z10" style="width: 64px; height: 83px;overflow: hidden;text-indent: 0;padding-right: 0;top: 144px;left: 183px;">
               <img src="${window.location.origin}${this.data.headurl}" style="height:100%;position: absolute;left: 50%;transform: translate(-50%, -50%);top: 50%;" />
             </div>
             <div class="foot-pp z10">
@@ -303,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>
@@ -311,14 +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= ''
     }
-  },
-  mounted(){
-    this.getCode()
   }
-};
+}
 </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,54 +2,71 @@
   <div>
     <div class="main-content">
       <div class="img-box">
-            <img src="../../../assets/logo/logo2.png" alt="广东省教师继续教育学会">
-        </div>
+        <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>
+        <span class="main-title" style="margin: 0 10px;font-weight: bold;">结业证书、学时证明查询</span>
       </div>
       <div>
-          <div class="label-box">
-              <div class="label-title">
-                  <p>持证人姓名</p>
-                  <p>（或持证单位全称）</p>
-              </div>
-              <input type="text" v-model="userName" class="label-input" />
+        <!-- <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 class="label-box">
+          <div class="label-title">
+            <p class="label-title-p">持证人姓名</p>
+            <p class="label-title-p">（或持证单位全称）</p>
           </div>
-          <div class="label-box">
-              <div class="label-title">
-                  <p>证书编码</p>
-              </div>
-              <input type="text" v-model="certNumber" class="label-input" />
+          <input v-model="userName" type="text" class="label-input">
+        </div>
+        <div class="label-box">
+          <div class="label-title">
+            <p>证书编码</p>
           </div>
-          <div class="label-box">
-              <div class="label-title">
-                  <p>验证码<span class="label-must">*</span></p>
-              </div>
-              <input type="text" v-model="code" class="label-input" style="border-color:#acb1b5"/>
-              <div class="captcha-img">
-                  <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-              </div>
+          <input v-model="certNumber" type="text" class="label-input">
+        </div>
+        <div class="label-box">
+          <div class="label-title">
+            <p>验证码<span class="label-must">*</span></p>
           </div>
-          <div class="btn-box">
-              <button class="btn-reset">重置</button>
-              <button class="btn-search" @click="handleSearch" v-bind:disabled="iconShow">
-                查询<i class="el-icon-loading" v-show="iconShow"></i>
-              </button>
+          <input v-model="code" type="text" class="label-input" style="border-color:#acb1b5">
+          <div class="captcha-img">
+            <img :src="codeUrl" class="login-code-img" @click="getCode">
           </div>
+        </div>
+        <div class="btn-box">
+          <button class="btn-reset">重置</button>
+          <button class="btn-search" :disabled="iconShow" @click="handleSearch">
+            查询<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>
-      </div>
+      <!-- -->
+      <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"
-        :visible.sync="dialogVisible"
-        width="fit-content"
-        class="dialog-box"
-      >
-        <!-- <div id="pdfDom" ref="posterWrap">
+      :title="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
+      :before-close="handleClose"
+      :visible.sync="dialogVisible"
+      width="fit-content"
+      class="dialog-box"
+    >
+      <!-- <div id="pdfDom" ref="posterWrap">
           <div class="proBox" >
             <img class="proBox-img" :src="data.backurl" >
             <div class="con train-con" >
@@ -62,182 +79,215 @@
             <span class="foot-date train-foot-date">{{data.issueDate}}</span>
           </div>
         </div> -->
-        <p >经证书系统验证查询，证书信息正确，该证书预览如下，如需下载使用，请点击“下载”按钮。</p>
-        <img :src="imgUrl" width="750px" height="525px" ref="certimg"/>
-        <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>
-          <el-button type="primary" @click="downloadImg">下载</el-button>
-          <!-- getPdf('#pdfDom') -->
-        </span>
+      <p>经证书系统验证查询，证书信息正确，该证书预览如下，如需下载使用，请点击“下载”按钮。</p>
+      <img ref="certimg" :src="imgUrl" width="750px" height="525px">
+      <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>
+        <el-button type="primary" @click="downloadImg">下载</el-button>
+        <!-- getPdf('#pdfDom') -->
+      </span>
     </el-dialog>
     <el-dialog
-        :title="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
-        :visible.sync="errorDialog"
-        width="50%"
-        class="errordialog-box"
-        :before-close="handleErrorClose"
-        >
-        <!-- :before-close="handleClose" -->
-        <p>未能查询到该证书，原因可能是证书编号或姓名（单位名称）输入错误， 也可能该证书为伪造证书。请重新输入准确的 证书编号 与 姓名（单位名称）信息后，再查询。谢谢您的关注。</p>
-        <p>如有疑问，请通知持证人与我会联系。</p>
-        <span slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="handleErrorClose" style="width:100px">确 定</el-button>
-        </span>
-      </el-dialog>
+      :title="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
+      :visible.sync="errorDialog"
+      width="50%"
+      class="errordialog-box"
+      :before-close="handleErrorClose"
+    >
+      <!-- :before-close="handleClose" -->
+      <p>未能查询到该证书，原因可能是证书编号或姓名（单位名称）输入错误， 也可能该证书为伪造证书。请重新输入准确的 证书编号 与 姓名（单位名称）信息后，再查询。谢谢您的关注。</p>
+      <p>如有疑问，请通知持证人与我会联系。</p>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" style="width:100px" @click="handleErrorClose">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getCodeImg,checkCode} from "@/api/login";
-import { getACert } from "@/api/system/grad";
+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 {
-      userName: "",
-      certNumber: "",
-      code: "",
-      codeUrl:"",
-      captchaEnabled:true,
-      uuid:"",
+      radio:'1',
+      userName: '',
+      certNumber: '',
+      code: '',
+      codeUrl: '',
+      captchaEnabled: true,
+      uuid: '',
       dialogVisible: false,
-      iconShow:false,
-      dist:"cert_b_type",
-      pageData: null, //接收html格式代码
-      htmlTitle: "结业证书",
+      iconShow: false,
+      dist: 'cert_b_type',
+      pageData: null, // 接收html格式代码
+      htmlTitle: '结业证书',
       isShow: true,
       isCanvas: false,
       downType: false, // false为 pdf , true为图片
-      data:{
-        certId: "11111111",
-        certName: "222",
+      data: {
+        certId: '11111111',
+        certName: '222',
         certType: 0,
-        courseHours: "222",
-        courseName: "222",
+        courseHours: '222',
+        courseName: '222',
         createBy: null,
         createTime: null,
         id: 3,
-        issueDate: "2022-11-29",
-        level: "22",
-        picture: "/profile/2022/222_A00.jpg",
+        issueDate: '2022-11-29',
+        level: '22',
+        picture: '/profile/2022/222_A00.jpg',
         remark: null,
-        trainPeriod: "222",
+        trainPeriod: '222',
         uesrName: null,
         updateBy: null,
-        updateDate: "2022-12-13T15:29:56.000+08:00",
+        updateDate: '2022-12-13T15:29:56.000+08:00',
         updateTime: null,
-        url: "/profile/upload/2022/12/13/pro1_page-0001_20221213151348A006.jpg",
-        userEmail:"222222",
-        userId: "2222",
-        userPhone: "222"
+        url: '/profile/upload/2022/12/13/pro1_page-0001_20221213151348A006.jpg',
+        userEmail: '222222',
+        userId: '2222',
+        userPhone: '222'
       },
-      imgUrl:'',
-      errorDialog:false,
-      word:''
-    };
+      imgUrl: '',
+      errorDialog: false,
+      word: '',
+      screenWidth:window.screen.availWidth,
+      imgShow:0
+    }
   },
-  methods:{
+  components:{
+    MyDialog      
+  },
+  mounted() {
+    this.getCode()
+    window.addEventListener('resize', this.debounce(this.getWindowInfo, 500))
+  },
+  destroyed(){
+    window.removeEventListener('resize', this.debounce(this.getWindowInfo, 500))
+  },
+  methods: {
     getCode() {
       getCodeImg().then(res => {
         // console.log(res)
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
         if (this.captchaEnabled) {
-          this.codeUrl = "data:image/gif;base64," + res.img;
-          this.uuid = res.uuid;
+          this.codeUrl = 'data:image/gif;base64,' + res.img
+          this.uuid = res.uuid
         }
-      });
+      })
     },
-    async handleSearch(){
-       this.iconShow = true
-        if( this.isBlock(this.userName)){
-          this.iconShow = false
-          this.$message.error("请输入持证人姓名或单位名称！")
-          return;
-        }
-        if( this.isBlock(this.certNumber)){
-          this.iconShow = false
-          this.$message.error("请输入证书编码！")
-          return;
-        }
-        if( this.isBlock(this.code)){
-          this.iconShow = false
-          this.$message.error("请输入验证码！")
-          return;
-        }
-        const form = {
-          userName: this.userName,
-          certNumber: this.certNumber,
-          certType:1
-        }
-        const codeForm = {
-          code: this.code,
-          uuid: this.uuid
-        }
-        try{
-          let codeRes = await checkCode(codeForm)
-          // console.log(codeRes)
-          if(codeRes.code===200){
-            try{
-              getACert(form).then(res=>{
-                if(res.data){
-                  this.iconShow = false
-                  this.data = res.data
-                  // console.log(this.data)
-                  let backimg = this.realUrl(this.data.url)
-                  this.htmlTitle = this.data.uesrName
-                  this.data.backurl = backimg
+    async handleSearch() {
+      this.iconShow = true
+      if (this.isBlock(this.userName)) {
+        this.iconShow = false
+        this.$message.error('请输入持证人姓名或单位名称！')
+        return
+      }
+      if (this.isBlock(this.certNumber)) {
+        this.iconShow = false
+        this.$message.error('请输入证书编码！')
+        return
+      }
+      if (this.isBlock(this.code)) {
+        this.iconShow = false
+        this.$message.error('请输入验证码！')
+        return
+      }
+      const form = {
+        userName: this.userName,
+        certNumber: this.certNumber,
+        certType: 1
+      }
+      const codeForm = {
+        code: this.code,
+        uuid: this.uuid
+      }
+      try {
+        const codeRes = await checkCode(codeForm)
+        // console.log(codeRes)
+        if (codeRes.code === 200) {
+          try {
+            getACert(form).then(res => {
+              if (res.data) {
+                this.iconShow = false
+                this.data = res.data
+                // console.log(this.data)
+                const backimg = this.realUrl(this.data.url)
+                this.htmlTitle = this.data.uesrName
+                this.data.backurl = backimg
+                if(this.data.certType==1){
+                  //结业证书
                   // 创建html代码
                   this.makeHtml()
-                  this.$nextTick(()=>{
-                    // 将html代码=>canvas=>img
-                    this.toImg()
-                    this.dialogVisible = true
-                    // 然后删除掉用完的html代码
-                    let e = document.getElementById('pdfDomm')
-                    e.innerHTML = ""
-                  })
                 }else{
-                  this.errorDialog = true
+                  // 学时证明
+                  this.makeTimeHtml()
                 }
-                
-              })
-              setTimeout(()=>{
-                if(this.iconShow){
-                  this.iconShow = false
+                this.$nextTick(() => {
+                  // 将html代码=>canvas=>img
+                  this.toImg()
+                  if(this.screenWidth>800){
+                    this.dialogVisible = true
+                  }else{
+                    this.imgShow = 1
+                  }
+                  // 然后删除掉用完的html代码
+                  const e = document.getElementById('pdfDomm')
+                  e.innerHTML = ''
+                })
+              } else {
+                if(this.screenWidth>800){
+                  this.errorDialog = true
+                }else{
+                  this.imgShow = 2
                 }
-              },10000)
-            }catch(error){
-              this.iconShow = false
-              this.getCode()
-            }
+              }
+            })
+            setTimeout(() => {
+              if (this.iconShow) {
+                this.iconShow = false
+              }
+            }, 10000)
+          } catch (error) {
+            this.iconShow = false
+            this.getCode()
           }
-        }catch(err){
-          this.iconShow = false
-          this.getCode()
         }
+      } catch (err) {
+        this.iconShow = false
+        this.getCode()
+      }
     },
-    isBlock(str){
-      if(str===""){
+    isBlock(str) {
+      if (str === '') {
         return true
-      }else {
+      } else {
         return false
       }
     },
-    handleClose(){
+    handleClose() {
       this.iconShow = false
       this.getCode()
       this.dialogVisible = false
+      this.userName= ''
+      this.certNumber=''
+      this.code= ''
     },
-    handleErrorClose(){
+    handleErrorClose() {
       this.iconShow = false
       this.getCode()
       this.errorDialog = false
+      this.userName= ''
+      this.certNumber=''
+      this.code= ''
     },
-    realUrl(val){
+    realUrl(val) {
       return process.env.VUE_APP_BASE_API + val
     },
-    toImg(){
+    toImg() {
       // 将html代码=>canvas=>img
       var htmlID = document.getElementById('pdfDomm')
       const that = this
@@ -245,62 +295,395 @@ export default {
         allowTaint: true,
         // 下面两个用来提高清晰度
         // dpi: window.devicePixelRatio*4, //将分辨率提高到特定的DPI 提高四倍
-        dpi: 300, //将分辨率提高到特定的DPI 提高四倍
-        scale:4, //按比例增加分辨率
+        dpi: 300, // 将分辨率提高到特定的DPI 提高四倍
+        scale: 4, // 按比例增加分辨率
         useCORS: true // 【重要】开启跨域配置
-      }).then(function (canvas) {
-        var pageData = canvas.toDataURL('image/png', 1.0);
+      }).then(function(canvas) {
+        var pageData = canvas.toDataURL('image/png', 1.0)
         that.imgUrl = pageData
       })
     },
-    downloadImg(){
-      const el = document.createElement("a");
+    downloadImg() {
+      const el = document.createElement('a')
       // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
-      el.href = this.$refs.certimg.src;
-      el.download = this.htmlTitle;
+      el.href = this.$refs.certimg.src
+      el.download = this.htmlTitle
       // 创建一个点击事件并对 a 标签进行触发
-      const event = new MouseEvent("click");
+      const event = new MouseEvent('click')
       el.dispatchEvent(event)
     },
-    makeHtml(){
+    makeHtml() {
       // js写html代码
-      let e = document.getElementById('pdfDomm')
+      const e = document.getElementById('pdfDomm')
       this.word = `<div class="proBox" >
           <img class="proBox-img" src="${window.location.origin}${this.data.backurl}" >
           <div class="con train-con" >
-            <p>
+            <p style="margin:0">
               <span class="con-name heiti">${this.data.uesrName}</span>于<span class="train-span heiti">${this.data.trainPeriod}</span>
               参加了<span class="train-span heiti">${this.data.certName}</span>学习，已修完教学计划规定的全部课程，计<span class="train-span heiti">${this.data.courseHours}</span>学时，经考核成绩合格，准予结业。
             </p>
+            <p style="margin:0">特发此证。</p>
+          </div>
+          <span class="foot-cert train-foot-cert">${this.data.certId}</span>
+          <span class="foot-date train-foot-date">${this.data.issueDate}</span>
+      </div>`
+      e.innerHTML = this.word
+    },
+    makeTimeHtml() {
+      // js写html代码
+      const e = document.getElementById('pdfDomm')
+      this.word = `<div class="proBox" >
+          <img class="proBox-img" src="${window.location.origin}${this.data.backurl}" >
+          <div class="con train-con" >
+            <p style="margin:0">
+              兹证明<span class="con-name heiti">${this.data.uesrName}</span>同志，身份证号：<span>${this.data.userId}</span>，于<span class="train-span heiti">${this.data.trainPeriod}</span>
+              参加了<span class="train-span heiti">${this.data.certName}</span>学习，已修完教学计划规定的全部课程，计<span class="train-span heiti">${this.data.courseHours}</span>学时，经考核成绩合格，准予结业。
+            </p>
+            <p style="margin:0">特发此证。</p>
           </div>
           <span class="foot-cert train-foot-cert">${this.data.certId}</span>
           <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= ''
     }
-
-  },
-  mounted(){
-    this.getCode()
   }
-};
+}
 </script>
 
-<style>
+<style lang="scss">
 .train-con{
-  top: 125px;
+  top: 140px;
   bottom: 0;
   line-height: 40px;
 }
+.train-con p{
+  text-align: justify;
+  text-align-last: left;
+}
 .train-span{
   margin: 0 10px;
 }
 .train-foot-cert{
-  left: 200px;
-  bottom: 103px;
+  left: 190px;
+  bottom: 130px;
 }
 .train-foot-date{
+  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;
-  bottom: 78px;
+}
+.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,10 +53,18 @@
           <router-link class="link-type" :to="'/register'">立即注册</router-link>
         </div>
       </el-form-item>
+      <!-- <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>
     <!--  底部  -->
     <div class="el-login-footer">
-      <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
+      <!-- <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span> -->
     </div>
   </div>
 </template>
@@ -72,11 +80,14 @@ export default {
     return {
       codeUrl: "",
       loginForm: {
-        username: "admin",
-        password: "admin123",
+        user:"",
+        password:"",
+        // username: "admin",
+        // password: "admin123",
         rememberMe: false,
         code: "",
-        uuid: ""
+        uuid: "",
+
       },
       loginRules: {
         username: [
@@ -92,8 +103,10 @@ export default {
       captchaEnabled: true,
       // 注册开关
       register: false,
-      redirect: undefined
+      redirect: undefined,
+      linkShow:true
     };
+
   },
   watch: {
     $route: {
@@ -141,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) {
@@ -150,6 +163,9 @@ export default {
           });
         }
       });
+    },
+    showLink(){
+      this.linkShow = !this.linkShow
     }
   }
 };
@@ -161,7 +177,7 @@ export default {
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
+  background-image: url("../assets/images/img31.jpg");
   background-size: cover;
 }
 .title {
@@ -173,7 +189,7 @@ export default {
 .login-form {
   border-radius: 6px;
   background: #ffffff;
-  width: 400px;
+  width: 550px;
   padding: 25px 25px 5px 25px;
   .el-input {
     height: 38px;
@@ -216,4 +232,14 @@ export default {
 .login-code-img {
   height: 38px;
 }
+.fast-link{
+  margin-right: 20px;
+  color: #1890ff;
+  text-decoration: underline;
+}
+.fast-link:hover{
+  margin-right: 20px;
+  color: #1063b1;
+  text-decoration: underline;
+}
 </style>

ruoyi-ui/src/views/register.vue

@@ -61,7 +61,7 @@
     </el-form>
     <!--  底部  -->
     <div class="el-register-footer">
-      <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
+      <!-- <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span> -->
     </div>
   </div>
 </template>
@@ -151,7 +151,7 @@ export default {
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
+  background-image: url("../assets/images/img31.jpg");
   background-size: cover;
 }
 .title {

ruoyi-ui/vue.config.js

@@ -7,9 +7,9 @@ function resolve(dir) {
 
 const CompressionPlugin = require('compression-webpack-plugin')
 
-const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
+const name = process.env.VUE_APP_TITLE || '证书管理系统' // 网页标题
 
-const port = process.env.port || process.env.npm_config_port || 80 // 端口
+const port = process.env.port || process.env.npm_config_port || 8089 // 端口
 
 // vue.config.js 配置说明
 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
@@ -35,8 +35,9 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://localhost:8080`,
-        // target: `http://192.168.0.100:8080`,
+        // target: `http://localhost:8080`,
+        // target: `http://192.168.0.107:18590`,
+        target: `http://114.116.114.108:18590`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''