UI修改

src/App.vue

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

src/components/HelloWorld.vue

@@ -1,108 +1,35 @@
 <template>
-  <div>
-    <div style="display: flex">
+  <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">
-        <i class="upload-icon">选择文件</i>
+          <div class="upload-icon">打开OFD</div>
           <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>
+    </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="upload-icon" @click="demo(3)">
-        <i class="upload-icon">骑缝章</i>
+        <div class="text-icon" @click="demo(2)">
+          <p >电子公文</p>
         </div>
 
-      <div class="upload-icon" @click="demo(4)">
-        <i class="upload-icon">多页文档</i>
+        <div class="text-icon" @click="demo(3)">
+          <p >骑缝章</p>
+        </div>
+
+        <div class="text-icon" @click="demo(4)">
+          <p >多页文档</p>
         </div>
       </div>
-    <div style="margin-top:10px;display: flex;flex-direction: column;align-items: center;justify-content: center"
+      <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>
-
-    <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>
-        </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>
-    </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 {

src/styles/index.css

@@ -1,3 +1,4 @@
+body { margin: 0; }
 @font-face {
     font-family: "sSun";
     src: url("../assets/xbst.ttf");

src/utils/ofd/ofd.js

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