ODF预览组件更新

server/src/main/resources/static/ofd/css/cnofd.css

@@ -0,0 +1,214 @@
+.horizontalToolbarSeparator {
+	display: inline-block;
+	margin: 0 10px -2px;
+	width: 1px;
+	height: 15px;
+	background-color: rgba(255,255,255,.5);
+	-webkit-box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
+	        box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
+}
+.btn-icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 28px;
+  padding-left: 10px;
+  padding-right: 10px;
+  //background-color: rgb(59, 95, 232);
+  border-radius: 1px;
+  border-color: #44AAFF;
+  font-weight: 500;
+  font-size: 14px;
+  color: white;
+  margin: 1px;
+}
+.btn-icon :active {
+  color: rgb(0, 245, 255);
+}
+.btn-icon :hover {
+  color: rgb(0, 245, 255);
+}
+.text-icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 28px;
+  width: 90%;
+  background-color: rgb(59, 95, 232);
+  border-radius: 1px;
+  border-color: #44AAFF;
+  font-weight: 500;
+  font-size: 10px;
+  color: white;
+  margin-top: 20px;
+}
+
+.select-icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 28px;
+  padding-left: 10px;
+  padding-right: 10px;
+  border-radius: 1px;
+  border-color: #44AAFF;
+  font-weight: 500;
+  font-size: 14px;
+  color: #44AAFF;
+  margin: 1px;    
+}
+
+.hidden {
+  display: none !important;
+}
+
+.left-section {
+  position: fixed;
+  width: 0px;
+  height: 100%;
+  background:#F5F5F5;
+  border: 1px solid #e8e8e8;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column
+}
+.main-section {
+  padding-top: 0px;
+  margin-left: 0px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  background: #F2F2F2;
+  overflow: hidden;
+  position: relative;
+}
+.main-section-font {
+  background: white;
+  margin-left: 88px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+
+@media (max-width: 767px) {
+.left-section {
+    position: fixed;
+    width: 0px;
+    height: 100%;
+    background:#F5F5F5;
+    border: 1px solid #e8e8e8;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    display: none;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+}
+.main-section {
+    padding-top: 0px;
+    margin-left:0px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    background: #808080;
+    overflow: hidden
+}
+.main-section-font {
+    background: white;
+    margin-left: 0px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+}
+}
+
+
+#app {
+  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;
+}
+
+body { margin: 0; }
+
+@font-face {
+    font-family: "simsun";
+    src: url(./fonts/simsun.woff);
+}
+
+@font-face {
+    font-family: "simkai";
+    src: url(./fonts/simkai.woff);
+}
+
+@font-face {
+    font-family: "simhei";
+    src: url(./fonts/simhei.woff);
+}
+
+.gray {
+    -webkit-filter: grayscale(100%);
+    -moz-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    filter: grayscale(100%);
+    -webkit-filter: gray;
+            filter: gray;
+}
+

server/src/main/resources/static/ofd/css/element-ui.css

@@ -0,0 +1,133 @@
+@charset "UTF-8";
+
+@font-face {
+	font-family:element-icons;src:url(fonts/element-icons.woff) format("woff"),url(fonts/element-icons.ttf) format("truetype");font-weight:400;font-display:"auto";font-style:normal
+}[class*=" el-icon-"],[class^=el-icon-] {
+	font-family: element-icons!important;
+	speak: none;
+	font-style: normal;
+	font-weight: 400;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+	vertical-align: baseline;
+	display: inline-block;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale
+}
+
+.el-dialog {
+	position: relative;
+	margin: 0 auto 50px;
+	background: #FFF;
+	border-radius: 2px;
+	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3);
+	box-shadow: 0 1px 3px rgba(0,0,0,.3);
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	width: 50%
+}
+
+.el-dialog.is-fullscreen {
+	width: 100%;
+	margin-top: 0;
+	margin-bottom: 0;
+	height: 100%;
+	overflow: auto
+}
+
+.el-dialog__wrapper {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	overflow: auto;
+	margin: 0
+}
+
+.el-dialog__header {
+	padding: 20px 20px 10px
+}
+
+.el-dialog__headerbtn {
+	position: absolute;
+	top: 20px;
+	right: 20px;
+	padding: 0;
+	background: 0 0;
+	border: none;
+	outline: 0;
+	cursor: pointer;
+	font-size: 16px
+}
+
+.el-dialog__headerbtn .el-dialog__close {
+	color: #909399
+}
+
+.el-dialog__headerbtn:focus .el-dialog__close,.el-dialog__headerbtn:hover .el-dialog__close {
+	color: #409EFF
+}
+
+.el-dialog__title {
+	line-height: 24px;
+	font-size: 18px;
+	color: #303133
+}
+
+.el-dialog__body {
+	padding: 30px 20px;
+	color: #606266;
+	font-size: 14px;
+	word-break: break-all
+}
+
+.el-dialog__footer {
+	padding: 10px 20px 20px;
+	text-align: right;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box
+}
+
+.el-autocomplete-suggestion.is-loading .el-icon-loading {
+	vertical-align: middle
+}
+
+.el-container {
+	display: flex;
+	-webkit-box-orient: horizontal;
+	-webkit-box-direction: normal;
+	-ms-flex-direction: row;
+	flex-direction: row;
+	-webkit-box-flex: 1;
+	-ms-flex: 1;
+	flex: 1;
+	-ms-flex-preferred-size: auto;
+	flex-basis: auto;
+	box-sizing: border-box;
+	min-width: 0
+}
+
+.el-container.is-vertical {
+	-ms-flex-direction: column;
+	flex-direction: column
+}
+
+.el-header {
+	padding: 0 20px;
+	box-sizing: border-box;
+	-ms-flex-negative: 0;
+	flex-shrink: 0
+}
+
+.el-main {
+	display: block;
+	-webkit-box-flex: 1;
+	-ms-flex: 1;
+	flex: 1;
+	-ms-flex-preferred-size: auto;
+	flex-basis: auto;
+	overflow: auto;
+	box-sizing: border-box
+}