增加header阴影 替换banner图片及调整样式

README.md

@@ -2,20 +2,23 @@
 
 > 红山开源工具库致力于集成开发团队及研究团队常用好用的日常工具，做到轻量级、易部署集成，目前项目正在开发ing
 
+![img.png](img.png)
+
 ## Build Setup
 
 ``` bash
 # install dependencies
-npm install
+yarn install
 
 # serve with hot reload at localhost:8080
-npm run dev
+yarn serve
 
 # build for production with minification
-npm run build
+yarn build
+
 
-# build for production and view the bundle analyzer report
-npm run build --report
 ```
 
-For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+
+
+

src/App.vue

@@ -27,20 +27,6 @@ export default {
 
 
 html, body, #app{
-  min-width: 1600px;
-  margin: 0;
-  padding: 0;
-  /*height: 100vh;*/
-  width: 100%;
-  border: 0;
-  font-size: 100%;
-  line-height: 1.2;
-  font: inherit;      /* 所有元素字体一致 */
-  vertical-align: baseline;      /* 行内元素垂直对齐：父级元素基线 */
-  text-align: center;            /* 水平居中 */
 
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-
-  color: #000000;
 }
 </style>

src/assets/font/font.scss

@@ -0,0 +1,8 @@
+@charset "UTF-8";
+// 定义字体
+@font-face {
+  font-family: "Alibaba";
+  src: url("../font/AlibabaPuHuiTi-3-115-Black.ttf");   // 注意这里的路径
+  font-weight: normal;
+  font-style: normal;
+}

src/assets/icon/zq-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="72" height="72" viewBox="0 0 72 72"><defs><clipPath id="master_svg0_3_06727"><rect x="0" y="0" width="72" height="72" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_3_06727)"><g><path d="M56.455505078125,26.951405078125L30.099105078125,53.307805078125L15.535105078125,38.753105078125C13.965875078125,37.183905078125,13.965875078125,34.816005078125,15.535105078125,33.246905078124996C17.113605078124998,31.668305078125,19.472105078125,31.668305078125,21.050605078125,33.246905078124996L30.099105078125,42.295405078125L50.949405078125,21.445305078125C52.527905078125,19.866705078125,54.886405078125,19.866705078125,56.455505078125,21.445305078125C58.034005078125,23.014505078125,58.034005078125,25.372905078125,56.455505078125,26.951405078125ZM36.000005078125,4.522705078125C18.692205078125,4.522705078125,4.522705078125,18.692205078125,4.522705078125,36.000005078125C4.522705078125,53.307805078125,18.692205078125,67.477305078125,36.000005078125,67.477305078125C53.307805078125,67.477305078125,67.477305078125,53.307805078125,67.477305078125,36.000005078125C67.477305078125,18.692205078125,53.307805078125,4.522705078125,36.000005078125,4.522705078125Z" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>

src/layout/DefaultLayout.vue

@@ -1,5 +1,5 @@
 <template>
-
+  <router-view></router-view>
 </template>
 
 <script>
@@ -8,6 +8,23 @@ export default {
 }
 </script>
 
-<style scoped>
+<style >
+html, body, #app{
+  background-color: gray;
+  min-width: 1600px;
+  margin: 0;
+  padding: 0;
+  /*height: 100vh;*/
+  width: 100%;
+  border: 0;
+  font-size: 100%;
+  line-height: 1.2;
+  font: inherit;      /* 所有元素字体一致 */
+  vertical-align: baseline;      /* 行内元素垂直对齐：父级元素基线 */
+  text-align: center;            /* 水平居中 */
 
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+
+  color: #000000;
+}
 </style>

src/layout/PhoneLayout.vue

@@ -0,0 +1,30 @@
+<template>
+  <router-view></router-view>
+</template>
+
+<script>
+export default {
+  name: "PhoneLayout"
+}
+</script>
+
+<style >
+html, body, #app{
+  min-width: 400px;
+  max-width: 1024px;
+  margin: 0;
+  padding: 0;
+  /*height: 100vh;*/
+  width: 100%;
+  border: 0;
+  font-size: 100%;
+  line-height: 1.2;
+  font: inherit;      /* 所有元素字体一致 */
+  vertical-align: baseline;      /* 行内元素垂直对齐：父级元素基线 */
+  text-align: center;            /* 水平居中 */
+
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+
+  color: #000000;
+}
+</style>

src/main.js

@@ -13,10 +13,15 @@ import moment from "moment"
 import VueClipboard from "vue-clipboard2";
 import JsonViewer from 'vue-json-viewer'
 
+import Axios from "axios"
+import api from './utils/http/index'
 
 
 
 
+Vue.use(api)
+Vue.prototype.$axios = Axios
+
 Vue.prototype.$moment = moment;
 Vue.use(VueClipboard)
 Vue.use(JsonViewer)

src/page/CertificateQuery.vue

@@ -0,0 +1,180 @@
+<template>
+
+  <div id="app">
+    <div class="container">
+      <div class="title">
+        <img class="title-img" src="../assets/logo/no-word-logo.png">
+        <div class="title-font">红山开源证书查询</div>
+      </div>
+
+
+      <!--测试UUID：E29A018E9D46460FBDA73FB07ECDDE90-->
+      <div class="card">
+
+        <div class="card-num">证书编号：{{certificateNum}}</div>
+        <div class="card-title" v-html="certificateName"></div>
+        <img class="card-img" src="../assets/icon/zq-icon.svg">
+      </div>
+
+
+      <div class="zs">
+        <img class="zs-img" :src="certificateImg">
+
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import "../assets/font/font.scss";
+import PageUtils from "@/utils/pageUtils";
+
+
+export default {
+  name: "CertificateQuery",
+  data(){
+    return{
+      certificateNum :'',
+      certificateName : "",
+      certificateImg: "http://192.168.1.198:8020/api/files/rjgb3k-7e1be11c3c888250849b64ba0e06e12.png"
+    }
+  },
+  methods:{
+
+    checkUid(){
+
+      var UUID = this.$route.params.certificateUuid
+      if (!UUID || UUID === null ) {
+        // do something if UUID is empty or null
+        //跳转
+        PageUtils.openPage(this.$router,"/CertificateQueryNotFound")
+      }else {
+        var certificateInfo = {
+          certificateUuid : UUID
+        }
+        this.$api.getCertificateInfoByUUID(certificateInfo).then((res)=>{
+
+          if (res.status === 0) {
+            this.certificateImg = "/api/" + res.data.certificateImg
+            this.certificateNum = res.data.certificateNum
+            this.certificateName = res.data.certificateName
+          }else {
+            //跳转
+            PageUtils.openPage(this.$router,"/CertificateQueryNotFound")
+          }
+        })
+      }
+
+    }
+
+  },
+  mounted() {
+    this.checkUid();
+  }
+}
+</script>
+
+<style scoped>
+.zs-img{
+  width: 368px;
+  border-radius: 25px;
+}
+
+
+.zs{
+  margin-top: 30px;
+
+}
+
+
+
+.card{
+  position: relative;
+  width: 368px;
+  height: 206px;
+  border-radius: 25px;
+  opacity: 1;
+
+
+  background: linear-gradient(62deg, #FE7D41 2%, #FFE253 95%);
+  margin: 20px auto;
+  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.2);
+}
+
+.card-num{
+  position: absolute;
+  left: 20px;
+  top: 23px;
+
+  height: 23px;
+  opacity: 1;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0em;
+
+  font-feature-settings: "kern" on;
+  color: #FFFFFF;
+}
+.card-title{
+  position: absolute;
+  left: 80px;
+  top: 75px;
+  width: 199px;
+  height: 74px;
+  opacity: 1;
+  font-family: Alibaba;
+  max-width:368px;
+  font-size: 24px;
+  font-weight: 900;
+  line-height: normal;
+  text-align: center;
+  letter-spacing: 0em;
+
+  font-feature-settings: "kern" on;
+  color: #FFFFFF;
+}
+
+.card-img{
+  position: absolute;
+  left: 287px;
+  top: 134px;
+  width: 72px;
+  height: 72px;
+  opacity: 1;
+}
+
+.container{
+  background: linear-gradient(180deg, rgba(150, 160, 247, 0.3082) 0%, rgba(185, 192, 250, 0) 100%);
+  height: 100vh;
+  padding-left: 4vw;
+  padding-right: 4vw;
+  padding-top: 3vh;
+}
+
+.title{
+  margin-left: 8px;
+  width: 269px;
+  height: 61px;
+  display: flex;
+  align-items: center;
+}
+
+.title-font{
+  font-size: 24px;
+  font-weight: 900;
+  line-height: normal;
+  margin: 0 auto;
+  letter-spacing: 0em;
+  font-feature-settings: "kern" on;
+  color: #3D3D3D;
+
+}
+.title-img{
+  width: 61px;
+
+}
+
+
+</style>

src/page/CertificateQueryNotFound.vue

@@ -0,0 +1,80 @@
+<template>
+
+  <div id="app">
+    <div class="container">
+      <div class="title">
+        <img class="title-img" src="../assets/logo/no-word-logo.png">
+        <div class="title-font">红山开源证书查询</div>
+      </div>
+
+      <div class="not-found">
+        <img src="../assets/icon/notfound.svg" class="not-found-img">
+        <div class="not-found-title">您查询的证书不存在<br/>请与证书发放人员确认</div>
+
+
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import "../assets/font/font.scss";
+
+export default {
+  name: "CertificateQueryNotFound"
+}
+</script>
+
+<style scoped>
+
+
+.not-found{
+  margin-top: 160px;
+
+}
+
+.not-found-title{
+  margin-top: -80px;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: normal;
+  text-align: center;
+  letter-spacing: 0em;
+  font-family: Alibaba;
+  font-feature-settings: "kern" on;
+  color: #3D3D3D;
+}
+.container{
+  background: linear-gradient(180deg, rgba(150, 160, 247, 0.3082) 0%, rgba(185, 192, 250, 0) 100%);
+  height: 100vh;
+  padding-left: 4vw;
+  padding-right: 4vw;
+  padding-top: 3vh;
+}
+
+.title{
+  margin-left: 8px;
+  width: 269px;
+  height: 61px;
+  display: flex;
+  align-items: center;
+}
+
+.title-font{
+  font-size: 24px;
+  font-weight: 900;
+  line-height: normal;
+  margin: 0 auto;
+  letter-spacing: 0em;
+  font-feature-settings: "kern" on;
+  color: #3D3D3D;
+
+}
+.title-img{
+  width: 61px;
+
+}
+
+
+</style>

src/page/ToolsHome.vue

@@ -4,7 +4,7 @@
   <div  style="background: #FAFCFF; min-height: 100%;position: relative">
     <div
       style="width: 100%; height: 70px; background-color: white;display: flex;
-     text-align: left;align-items: center; position: fixed;z-index: 999; margin-bottom: 70px">
+     text-align: left;align-items: center; position: fixed;z-index: 999; margin-bottom: 70px;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1)">
       <el-image @click="backOsredm" :src="osredmLogo" style="margin-right: 30px;width: 48px; height: 48px; margin-left: 70px; cursor: pointer;"/>
       <a href="https://www.osredm.com/" style="margin-left: 20px">首页</a>
       <a href="https://www.osredm.com/explore/all" style="margin-left: 40px">开源项目</a>
@@ -16,7 +16,7 @@
 
 
     <div  class="container" >
-      <div class="banner-main" :style="{backgroundImage:'url('+require('../assets/banner-noword.png')+')'}" style=" background-size:cover; ">
+      <div class="banner-main" :style="{backgroundImage:'url('+require('../assets/new-banner.svg')+')'}" style=" background-size:cover; ">
 <!--        <img src="../assets/banner-noword.png" class="banner-img">-->
         <div class="banner-word">
           <img src="../assets/hskylogo.png" style="height: 60px">
@@ -237,8 +237,11 @@ export default {
 
 .banner-main{
   position: relative;
-  width: 100%;
+  width: 95%;
   height: 450px;
+  margin-top: 100px;
+
+  border-radius: 20px;
 }
 .banner-img{
 
@@ -251,7 +254,7 @@ export default {
   position: absolute;
   color: white;
   font-weight: 700;
-  top: 20%;
+  top: 15%;
   left: 0;
   right: 0;
 }

src/router/index.js

@@ -6,48 +6,75 @@ Vue.use(VueRouter)
 let routes = [
   {
     path: '/',
-    component: () => import("@/page/ToolsHome"),
+    component: () => import("@/layout/DefaultLayout"),
     name: 'ToolsHome',
-  },
+    redirect: '/ToolsHome',
+    children:[
+      {
+        path: '/',
+        component: () => import("@/page/ToolsHome"),
+        name: 'ToolsHome',
+      },
 
-  {
+      {
-    path: '/cssTools',
+        path: '/cssTools',
-    component: () => import("@/page/CssTools"),
+        component: () => import("@/page/CssTools"),
-    name: 'CssTools',
+        name: 'CssTools',
-  },
+      },
 
-  {
+      {
-    path: '/jsonTools',
+        path: '/jsonTools',
-    component: () => import("@/page/JsonTools"),
+        component: () => import("@/page/JsonTools"),
-    name: 'JsonTools',
+        name: 'JsonTools',
-  },
+      },
 
-  {
+      {
 
-    path: '/xmlTools',
+        path: '/xmlTools',
-    component: () => import("@/page/XmlTools"),
+        component: () => import("@/page/XmlTools"),
-    name: 'XmlTools',
+        name: 'XmlTools',
+      },
+
+
+      {
+        path: '/htmlTransfer',
+        component: () => import("@/page/HtmlTransfer"),
+        name: 'HtmlTransfer',
+      },
+
+      {
+        path: '/uuidTools',
+        component: () => import("@/page/UUIDTools"),
+        name: 'UUIDTools',
+      },
+      {
+        path: '/encryptionTool',
+        component: () => import("@/page/EncryptionTool"),
+        name: 'encryptionTool',
+      },
+
+    ]
   },
 
 
   {
-    path: '/htmlTransfer',
+    path: '/certificateQuery/:certificateUuid',
-    component: () => import("@/page/HtmlTransfer"),
+    component: () => import("@/layout/PhoneLayout"),
-    name: 'HtmlTransfer',
+    name: 'certificateQuery',
+    children: [
+      {
+        path: '/certificateQuery/:certificateUuid',
+        component: () => import("@/page/CertificateQuery"),
+        name: 'certificateQuery',
+      },
+      {
+        path: '/CertificateQueryNotFound',
+        component: () => import("@/page/CertificateQueryNotFound"),
+        name: 'CertificateQueryNotFound',
+      },
+    ]
   },
 
-  {
-    path: '/uuidTools',
-    component: () => import("@/page/UUIDTools"),
-    name: 'UUIDTools',
-  },
-  {
-    path: '/encryptionTool',
-    component: () => import("@/page/EncryptionTool"),
-    name: 'encryptionTool',
-  },
-
-
   //   path: '/404',
   //   component:() => import("@/components/404"),
   //   name: '404'

src/utils/http/api.js

@@ -0,0 +1,166 @@
+import axios from 'axios' // 注意先安装哦
+import config from './config' // 倒入默认配置
+// import qs from 'qs' // 序列化请求数据，视服务端的要求
+import router from '../../router'
+import { Message } from 'element-ui'
+
+
+export default function $axios (options) {
+    return new Promise((resolve, reject) => {
+        const instance = axios.create({
+                baseURL: config.baseURL,
+                headers: {},
+            // eslint-disable-next-line no-unused-vars
+                transformResponse: [function (data) {
+                }]
+            }
+        );
+
+        // request 拦截器
+        instance.interceptors.request.use(
+            config => {
+                // Tip: 1
+                // 请求开始的时候可以结合 vuex 开启全屏的 loading 动画
+
+                // Tip: 2
+                // 带上 token , 可以结合 vuex 或者重 localStorage
+                // let token = localStorage.getItem("systemToken")
+                // if (token) {
+                //     config.headers.accessToken = token
+                // }else {
+                //     router.push('/login')
+                // }
+                // if (store.getters.token) {
+                //     config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
+                // } else {
+                //     // 重定向到登录页面
+                // }
+
+                // Tip: 3
+                // 根据请求方法，序列化传来的参数，根据后端需求是否序列化
+                if (config.method.toLocaleLowerCase() === 'post'
+                    || config.method.toLocaleLowerCase() === 'put'
+                    || config.method.toLocaleLowerCase() === 'delete') {
+
+                    // config.data = qs.stringify(config.data)
+                }
+                return config;
+            },
+            error => {
+                // 请求错误时做些事(接口错误、超时等)
+                // Tip: 4
+                // 关闭loadding
+                console.log('request:', error);
+
+                //  1.判断请求超时
+                if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
+                    console.log('根据你设置的timeout/真的请求超时 判断请求现在超时了，你可以在这里加入超时的处理方案')
+                    // return service.request(originalRequest);//例如再重复请求一次
+                }
+                //  2.需要重定向到错误页面
+                const errorInfo = error.response
+                console.log(errorInfo)
+                if (errorInfo) {
+                    // error =errorInfo.data//页面那边catch的时候就能拿到详细的错误信息,看最下边的Promise.reject
+                    const errorStatus = errorInfo.status; // 404 403 500 ... 等
+                    router.push({
+                        path: `/error/${errorStatus}`
+                    })
+                }
+                return Promise.reject(error) // 在调用的那边可以拿到(catch)你想返回的错误信息
+            }
+        );
+
+        // response 拦截器
+        instance.interceptors.response.use(
+            response => {
+                let data;
+                // IE9时response.data是undefined，因此需要使用response.request.responseText(Stringify后的字符串)
+                if(response.data == undefined){
+                    data = JSON.parse(response.request.responseText)
+                } else{
+                    data = response.data
+                }
+                // 根据返回的code值来做不同的处理（和后端约定）
+                switch (data.code) {
+                    case '':
+                        break;
+                    default:
+                }
+                // 若不是正确的返回code，且已经登录，就抛出错误
+                // const err = new Error(data.description)
+
+                // err.data = data
+                // err.response = response
+
+                // throw err
+                return data;
+            },
+            err => {
+                if (err && err.response) {
+                    switch (err.response.status) {
+                        case 400:
+                            err.message = '请求错误';
+                            break;
+
+                        case 401:
+                            err.message = '未授权，请登录';
+                            break;
+
+                        case 403:
+                            err.message = '拒绝访问';
+                            break;
+
+                        case 404:
+                            err.message = `请求地址出错: ${err.response.config.url}`;
+                            break;
+
+                        case 408:
+                            err.message = '请求超时';
+                            break;
+
+                        case 500:
+                            err.message = '服务器内部错误';
+                            break;
+
+                        case 501:
+                            err.message = '服务未实现';
+                            break;
+
+                        case 502:
+                            err.message = '网关错误';
+                            break;
+
+                        case 503:
+                            err.message = '服务不可用';
+                            break;
+
+                        case 504:
+                            err.message = '网关超时';
+                            break;
+
+                        case 505:
+                            err.message = 'HTTP版本不受支持';
+                            break;
+
+                        default:
+                    }
+                }
+                console.error(err);
+                // 此处我使用的是 element UI 的提示组件
+                Message.error(`ERROR: ${err}`);
+                return Promise.reject(err); // 返回接口返回的错误信息
+            }
+        );
+
+        //请求处理
+        instance(options)
+            .then((res) => {
+                resolve(res);
+                return false
+            })
+            .catch((error) => {
+                reject(error);
+            })
+    })
+}

src/utils/http/config.js

@@ -0,0 +1,17 @@
+export default {
+    method: 'post',
+    // 基础url前缀
+    baseURL: '/api',
+    // 请求头信息
+    headers: {
+        'Content-Type':'application/json;charset=UTF-8'
+    },
+    // 参数
+    data: {},
+    // 设置超时时间
+    timeout: 100000,
+    // 携带凭证
+    withCredentials: false,
+    // 返回数据类型
+    responseType: 'json'
+}

src/utils/http/index.js

@@ -0,0 +1,17 @@
+// 导入定义的统一接口
+import apiList from './interface'
+
+const install = Vue => {
+    if (install.installed)  return;
+
+    install.installed = true;
+    Object.defineProperties(Vue.prototype, {
+        // 注意哦，此处挂载在 Vue 原型的 $api 对象上
+        $api: {
+            get() {
+                return apiList
+            }
+        }
+    })
+};
+export default install

src/utils/http/interface.js

@@ -0,0 +1,25 @@
+// 导入 api
+import axios from './api'
+
+/* 将所有接口统一起来便于维护
+ * 如果项目很大可以将 url 独立成文件，接口分成不同的模块
+ * 此处的数据依然来自 Easy Mock
+ */
+
+export const getCertificateInfoByUUID = data => {
+  return axios({
+
+    url: '/certificate/search',
+    method: 'post',
+    data
+  })
+};
+
+
+
+
+// 默认全部倒出
+// 根据需要进行
+export default {
+  getCertificateInfoByUUID
+}

vue.config.js

@@ -14,7 +14,7 @@ module.exports = {
 		port:8020,
 		proxy: {
 			'/api': {
-				target: 'http://localhost:8010',
+				target: 'http://localhost:8001',
 				changeOrigin: true,
 				pathRewrite: {
 					'^/api': ''