p71924506
/
osredm-small-tools
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Page: 新增证书查询页面（后端调用暂未添加）

This commit is contained in:
unknown 2023-12-13 18:13:14 +08:00
parent 97964bffe8
commit a70c0c0634
12 changed files with 335 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.vue
View File

@ -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>

BIN
src/assets/banner-noword.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 MiB

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
src/assets/font/AlibabaPuHuiTi-3-115-Black.ttf Normal file
View File

Binary file not shown.

8
src/assets/font/font.scss Normal file
View File

@ -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;
}

1
src/assets/icon/notfound.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

1
src/assets/icon/zq-icon.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/zs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

21
src/layout/DefaultLayout.vue
View File

@ -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>

30
src/layout/PhoneLayout.vue Normal file
View File

@ -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>

138
src/page/CertificateQuery.vue Normal file
View File

@ -0,0 +1,138 @@
<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="card">
<div class="card-num">证书编号：2023OSCCIND00001</div>
<div class="card-title">红山开源平台<br>优秀开源贡献个人</div>
<img class="card-img" src="../assets/icon/zq-icon.svg">
</div>
<div class="zs">
<img class="zs-img" src="../assets/zs.png">
</div>
</div>
</div>
</template>
<script>
import "../assets/font/font.scss";
export default {
name: "CertificateQuery"
}
</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>

80
src/page/CertificateQueryNotFound.vue Normal file
View File

@ -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>

89
src/router/index.js
View File

@ -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',
component: () => import("@/page/CssTools"),
name: 'CssTools',
},
{
path: '/cssTools',
component: () => import("@/page/CssTools"),
name: 'CssTools',
},
{
path: '/jsonTools',
component: () => import("@/page/JsonTools"),
name: 'JsonTools',
},
{
path: '/jsonTools',
component: () => import("@/page/JsonTools"),
name: 'JsonTools',
},
{
{
path: '/xmlTools',
component: () => import("@/page/XmlTools"),
name: 'XmlTools',
path: '/xmlTools',
component: () => import("@/page/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',
component: () => import("@/page/HtmlTransfer"),
name: 'HtmlTransfer',
path: '/certificateQuery',
component: () => import("@/layout/PhoneLayout"),
name: 'certificateQuery',
children: [
{
path: '/certificateQuery',
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'