mirror of
https://gitee.com/Donal/ofd.js.git
synced 2024-11-30 02:48:47 +08:00
UI修改
This commit is contained in:
Donal
parent
0c1beb60dd
commit
418eb15eab
@ -17,11 +17,11 @@ export default {
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,108 +1,35 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="display: flex">
|
||||
<div class="upload-icon" @click="uploadFile">
|
||||
<i class="upload-icon">选择文件</i>
|
||||
<input type="file" ref="file" class="hidden" accept=".ofd"
|
||||
@change="fileChanged">
|
||||
</div>
|
||||
|
||||
<button class="upload-icon" @click="demo(1)">
|
||||
<i class="upload-icon">电票</i>
|
||||
</button>
|
||||
|
||||
<div class="upload-icon" @click="demo(2)">
|
||||
<i class="upload-icon">电子公文</i>
|
||||
</div>
|
||||
|
||||
<div class="upload-icon" @click="demo(3)">
|
||||
<i class="upload-icon">骑缝章</i>
|
||||
</div>
|
||||
|
||||
<div class="upload-icon" @click="demo(4)">
|
||||
<i class="upload-icon">多页文档</i>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:10px;display: flex;flex-direction: column;align-items: center;justify-content: center"
|
||||
id="content">
|
||||
</div>
|
||||
|
||||
<div class="SealContainer" id="sealInfoDiv" hidden="hidden" ref="sealInfoDiv">
|
||||
<div class="SealContainer mask" @click="closeSealInfoDialog"></div>
|
||||
<div class="SealContainer-layout">
|
||||
<div class="SealContainer-content">
|
||||
<p class="content-title">签章信息</p>
|
||||
<div class="subcontent">
|
||||
<span class="title">签章人</span>
|
||||
<span class="value" id="spSigner">Signer</span>
|
||||
</div>
|
||||
<div class="subcontent">
|
||||
<span class="title">签章提供者</span>
|
||||
<span class="value" id="spProvider">Provider</span>
|
||||
</div>
|
||||
<div class="subcontent">
|
||||
<span class="title">原文摘要值</span>
|
||||
<span class="value" id="spHashedValue" @click="showMore('原文摘要值', 'spHashedValue')"
|
||||
style="cursor: pointer">HashedValue</span>
|
||||
</div>
|
||||
<div class="subcontent">
|
||||
<span class="title">签名值</span>
|
||||
<span class="value" id="spSignedValue" @click="showMore('签名值', 'spSignedValue')"
|
||||
style="cursor: pointer">SignedValue</span>
|
||||
</div>
|
||||
<div class="subcontent">
|
||||
<span class="title">签名算法</span>
|
||||
<span class="value" id="spSignMethod">SignMethod</span>
|
||||
</div>
|
||||
<div class="subcontent">
|
||||
<span class="title">版本号</span>
|
||||
<span class="value" id="spVersion">Version</span>
|
||||
</div>
|
||||
|
||||
<p class="content-title">印章信息</p>
|
||||
<div class="subcontent">
|
||||
<span class="title">印章标识</span>
|
||||
<span class="value" id="spSealID">SealID</span>
|
||||
</div>
|
||||
<div class="subcontent">
|
||||
<span class="title">印章名称</span>
|
||||
<span class="value" id="spSealName">SealName</span>
|
||||
</div>
|
||||
<div class="subcontent">
|
||||
<span class="title">印章类型</span>
|
||||
<span class="value" id="spSealType">SealType</span>
|
||||
</div>
|
||||
<div class="subcontent">
|
||||
<span class="title">有效时间</span>
|
||||
<span class="value" id="spSealAuthTime">从NotBefore到NotAfter</span>
|
||||
</div>
|
||||
<div class="subcontent">
|
||||
<span class="title">制章日期</span>
|
||||
<span class="value" id="spSealMakeTime">MakeTime</span>
|
||||
</div>
|
||||
<div class="subcontent">
|
||||
<span class="title">印章版本</span>
|
||||
<span class="value" id="spSealVersion">Version</span>
|
||||
</div>
|
||||
<el-container style="width:100vw; height: 100vh;">
|
||||
<el-header style="display: flex; height: 40px; border: 1px solid #e8e8e8; align-items: center;padding-left: 90px">
|
||||
<div class="upload-icon" @click="uploadFile">
|
||||
<div class="upload-icon">打开OFD</div>
|
||||
<input type="file" ref="file" class="hidden" accept=".ofd"
|
||||
@change="fileChanged">
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main style="height: auto;background: #808080;;padding: 0">
|
||||
<div style="position: fixed;width: 88px;height: 100%;background: white;border: 1px solid #e8e8e8;align-items: center;display: flex;flex-direction: column">
|
||||
<div class="text-icon" @click="demo(1)">
|
||||
<p >电子发票</p>
|
||||
</div>
|
||||
|
||||
<div class="text-icon" @click="demo(2)">
|
||||
<p >电子公文</p>
|
||||
</div>
|
||||
|
||||
<div class="text-icon" @click="demo(3)">
|
||||
<p >骑缝章</p>
|
||||
</div>
|
||||
|
||||
<div class="text-icon" @click="demo(4)">
|
||||
<p >多页文档</p>
|
||||
</div>
|
||||
<input style="position:absolute;right:1%;top:1%;" type="button" name="" id="" value="X"
|
||||
@click="closeSealInfoDialog()"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<el-dialog :title="title" :visible.sync="dialogFormVisible">
|
||||
<span style="text-align: left">
|
||||
{{value}}
|
||||
</span>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
|
||||
<div style="padding-top: 20px;margin-left:88px;display: flex;flex-direction: column;align-items: center;justify-content: center;background: #808080;overflow: hidden"
|
||||
id="content">
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -118,7 +45,7 @@ export default {
|
||||
value: null,
|
||||
dialogFormVisible: false,
|
||||
ofdObj: null,
|
||||
screenWidth: document.body.clientWidth,
|
||||
screenWidth: document.body.clientWidth - 88,
|
||||
}
|
||||
},
|
||||
|
||||
@ -131,7 +58,7 @@ export default {
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
// setPageScal(5)
|
||||
that.screenWidth = (document.body.clientWidth);
|
||||
that.screenWidth = (document.body.clientWidth - 88);
|
||||
const divs = renderOfd(that.screenWidth, that.ofdObj);
|
||||
let contentDiv = document.getElementById('content');
|
||||
contentDiv.innerHTML = '';
|
||||
@ -226,21 +153,36 @@ export default {
|
||||
<style scoped>
|
||||
.upload-icon {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 80px;
|
||||
line-height: 36px;
|
||||
height: 28px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
background-color: rgb(59, 95, 232);
|
||||
border-radius: 2px;
|
||||
border-radius: 1px;
|
||||
border-color: #5867dd;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.pageDiv {
|
||||
border: 1px solid rgb(199, 198, 198);
|
||||
.text-icon {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
width: 90%;
|
||||
background-color: rgb(59, 95, 232);
|
||||
border-radius: 1px;
|
||||
border-color: #5867dd;
|
||||
font-weight: 500;
|
||||
font-size: 10px;
|
||||
color: white;
|
||||
margin-top: 20px;
|
||||
|
||||
}
|
||||
|
||||
.hidden {
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
body { margin: 0; }
|
||||
@font-face {
|
||||
font-family: "sSun";
|
||||
src: url("../assets/xbst.ttf");
|
||||
|
||||
@ -52,7 +52,7 @@ export const renderOfd = function (screenWidth, ofd) {
|
||||
const pageId = Object.keys(page)[0];
|
||||
let pageDiv = document.createElement('div');
|
||||
pageDiv.id = pageId;
|
||||
pageDiv.setAttribute('style', `border: 1px solid rgb(199, 198, 198);position: relative;width:${box.w}px;height:${box.h}px`)
|
||||
pageDiv.setAttribute('style', `margin-bottom: 20px;position: relative;width:${box.w}px;height:${box.h}px;background: white;`)
|
||||
renderPage(pageDiv, page, ofd.tpls, ofd.fontResObj, ofd.drawParamResObj, ofd.multiMediaResObj);
|
||||
divArray.push(pageDiv);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user