ydb-components-material 0.1.119 → 0.1.120

package/lib/components/guide-pc/components/guideTabs.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-tabs
+    v-model="activeName"
+    stretch
+    @tab-click="handleClick"
+  >
+    <el-tab-pane
+      v-for="item, index in tabList"
+      :key="index"
+      :label="item.name"
+      :name="item.name"
+    />
+  </el-tabs>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeName: '材料清单',
+      tabList: [
+        { name: '材料清单' },
+        { name: '事项信息' },
+        { name: '办事流程' },
+        { name: '受理条件' },
+        { name: '办事大厅' },
+        { name: '成效分析' },
+      ],
+    }
+  },
+  methods: {
+    handleClick({ index }) {
+      console.log(index);
+
+      this.$emit('tabsChange', index)
+    }
+  }
+}
+</script>
+<style>
+</style>
+<style lang="scss" scoped>
+  /deep/.el-tabs__item.is-active{
+    // color: red !important;
+    background: #E2EFFF;
+    padding: 0 !important;
+  }
+</style>

package/lib/components/guide-pc/components/guideTitle.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import './guideTitle.scss';
+export interface GuideTitleProps {
+    title: string;
+}
+declare const GuideTitle: React.FC<GuideTitleProps>;
+export default GuideTitle;

package/lib/components/guide-pc/components/guideTitle.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _titleL = _interopRequireDefault(require("../imgs/titleL.png"));
+var _titleR = _interopRequireDefault(require("../imgs/titleR.png"));
+require("./guideTitle.scss");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var GuideTitle = function GuideTitle(_ref) {
+  var title = _ref.title;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "guideTitle-con"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "titleImg",
+    src: _titleL["default"],
+    alt: ""
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "titleText"
+  }, title), /*#__PURE__*/React.createElement("img", {
+    className: "titleImg",
+    src: _titleR["default"],
+    alt: ""
+  }));
+};
+GuideTitle.displayName = 'GuideTitle';
+var _default = exports["default"] = GuideTitle;

package/lib/components/guide-pc/components/guideTitle.scss

@@ -0,0 +1,15 @@
+.guideTitle-con {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .titleText {
+    font-size: 24px;
+    font-weight: 500;
+    margin: 0 10px;
+  }
+  .titleImg {
+    width: 20px;
+    height: 21px;
+  }
+}

package/lib/components/guide-pc/components/guideTitle.vue

@@ -0,0 +1,43 @@
+<template>
+  <view class="guideTitle-con">
+    <view class="titleImg" :style="{backgroundImage: `url(${titleL})`}" />
+    <view class="titleText">{{ title }}</view>
+    <view class="titleImg"  :style="{backgroundImage: `url(${titleR})`}" />
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  }, 
+  data() {
+    return {
+      titleL: '../static/img/pc/declare/titleL.png',
+      titleR: '../static/img/pc/declare/titleR.png',
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .guideTitle-con{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+    .titleText{
+      font-size: 24px;
+      font-weight: 500;
+      margin: 0 10px;
+    }
+    .titleImg{
+      width: 20px;
+      height: 21px;
+      background-size: 100% 100%;
+    }
+  }
+</style>

package/lib/components/guide-pc/components/materialsList.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import './materialsList.scss';
+export interface MaterialsListProps {
+    eventInfo?: any;
+    finalMaterials?: any[];
+    baseUrl?: string;
+    declarationAppToken?: string;
+    download?: (params: any) => void;
+}
+declare const MaterialsList: React.FC<MaterialsListProps>;
+export default MaterialsList;

package/lib/components/guide-pc/components/materialsList.js

@@ -0,0 +1,392 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _dialog = _interopRequireDefault(require("@alifd/next/lib/dialog"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _message = _interopRequireDefault(require("@alifd/next/lib/message"));
+var React = _interopRequireWildcard(require("react"));
+var _guideTitle = _interopRequireDefault(require("./guideTitle"));
+require("./materialsList.scss");
+var _api = require("../../../api.js");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t3 in e) "default" !== _t3 && {}.hasOwnProperty.call(e, _t3) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t3)) && (i.get || i.set) ? o(f, _t3, i) : f[_t3] = e[_t3]); return f; })(e, t); }
+var MaterialsList = function MaterialsList(_ref) {
+  var eventInfoProp = _ref.eventInfo,
+    finalMaterialsProp = _ref.finalMaterials,
+    baseUrlProp = _ref.baseUrl,
+    declarationAppTokenProp = _ref.declarationAppToken,
+    downloadProp = _ref.download;
+  var _React$useState = React.useState([]),
+    list = _React$useState[0],
+    setList = _React$useState[1];
+  var _React$useState2 = React.useState(false),
+    previewShow = _React$useState2[0],
+    setPreviewShow = _React$useState2[1];
+  var _React$useState3 = React.useState(''),
+    previewIframeUrl = _React$useState3[0],
+    setPreviewIframeUrl = _React$useState3[1];
+  var _React$useState4 = React.useState(false),
+    previewLoading = _React$useState4[0],
+    setPreviewLoading = _React$useState4[1];
+  React.useEffect(function () {
+    initData();
+  }, [finalMaterialsProp, eventInfoProp]);
+  var initData = function initData() {
+    // Use finalMaterials if available (after situation selection), else use original materials
+    var eventInfo = eventInfoProp;
+    var finalMaterials = finalMaterialsProp;
+    var materials = finalMaterials || (eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.taskGeneralMaterials) || [];
+    setList(materials);
+  };
+  var showTip = function showTip(type) {
+    var obj = {
+      '智': '本材料为智能生成材料，系统将根据您填写的信息自动生成申报材料。',
+      '享': '本材料为共享材料，数据由大数据共享获取，无需用户自行准备。',
+      '自': '需要用户自行准备申报材料'
+    };
+    _message["default"].show({
+      type: 'help',
+      content: obj[type] || ''
+    });
+  };
+  var getFileType = function getFileType(file) {
+    if (file.formConvertMaterial) return '智';
+    if (file.noNeedSubmit) return '享';
+    return '自';
+  };
+  var checkPoint = function checkPoint(item) {
+    var keyPoint = item.keyPoint;
+    if (!(keyPoint !== null && keyPoint !== void 0 && keyPoint.fileUrl)) {
+      _message["default"].warning('该审查要点暂时无法查看');
+      return;
+    }
+    // TODO: navigate to keyPoint page
+    // uni.setStorageSync('keyPoint', keyPoint);
+    // uni.navigateTo({ url: `/pagesDeclarePc/keyPoints` });
+    _message["default"].show({
+      type: 'help',
+      content: '审查要点查看功能待实现'
+    });
+  };
+  var goDownLoad = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(fileObj) {
+      var _fileObj$name;
+      var fileId, nameArr, format;
+      return _regenerator["default"].wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            fileId = fileObj.id || fileObj.url;
+            nameArr = ((_fileObj$name = fileObj.name) === null || _fileObj$name === void 0 ? void 0 : _fileObj$name.split('.')) || [];
+            format = nameArr[nameArr.length - 1] || '';
+            downloadProp === null || downloadProp === void 0 ? void 0 : downloadProp({
+              fileId: fileId,
+              format: format
+            });
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function goDownLoad(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var previewFile = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(fileObj) {
+      var fileUrl;
+      return _regenerator["default"].wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 1;
+            return getFileUrl(fileObj.url || fileObj.id);
+          case 1:
+            fileUrl = _context2.sent;
+            if (fileUrl) {
+              preview(fileUrl);
+            }
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function previewFile(_x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var getFileUrl = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(id) {
+      var _urlRes$presignedUrlL, urlRes, _t;
+      return _regenerator["default"].wrap(function (_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            _context3.prev = 0;
+            _context3.next = 1;
+            return (0, _api.getUrlById)({
+              id: id,
+              effectiveTime: 3600000
+            }, {
+              tokenTY: declarationAppTokenProp,
+              baseUrl: baseUrlProp
+            });
+          case 1:
+            urlRes = _context3.sent;
+            if (!((urlRes === null || urlRes === void 0 ? void 0 : (_urlRes$presignedUrlL = urlRes.presignedUrlList) === null || _urlRes$presignedUrlL === void 0 ? void 0 : _urlRes$presignedUrlL.length) > 0)) {
+              _context3.next = 2;
+              break;
+            }
+            return _context3.abrupt("return", urlRes.presignedUrlList[2]);
+          case 2:
+            _context3.next = 4;
+            break;
+          case 3:
+            _context3.prev = 3;
+            _t = _context3["catch"](0);
+            console.error(_t);
+          case 4:
+            return _context3.abrupt("return", null);
+          case 5:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3, null, [[0, 3]]);
+    }));
+    return function getFileUrl(_x3) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  var preview = /*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4(url) {
+      var res, _t2;
+      return _regenerator["default"].wrap(function (_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            setPreviewLoading(true);
+            setPreviewShow(true);
+            _context4.prev = 1;
+            _context4.next = 2;
+            return (0, _api.onlinePreview)({
+              url: url
+            }, {
+              tokenTY: declarationAppTokenProp,
+              baseUrl: baseUrlProp
+            });
+          case 2:
+            res = _context4.sent;
+            setPreviewIframeUrl(res.url);
+            setTimeout(function () {
+              var iframe = document.getElementById('previewIframe');
+              if (iframe) iframe.src = res.url;
+            }, 500);
+            _context4.next = 4;
+            break;
+          case 3:
+            _context4.prev = 3;
+            _t2 = _context4["catch"](1);
+            console.error(_t2);
+          case 4:
+            setPreviewLoading(false);
+          case 5:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4, null, [[1, 3]]);
+    }));
+    return function preview(_x4) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+  var downloadFile = function downloadFile(row) {
+    if (!row.formGuid || row.formGuid === '[]') {
+      _message["default"].warning('暂无法下载');
+      return;
+    }
+    var formGuidArr = JSON.parse(row.formGuid);
+    if (formGuidArr.length > 0) {
+      goDownLoad(formGuidArr[0]);
+    }
+  };
+  var initFormGuid = function initFormGuid(row) {
+    if (!row.formGuid || row.formGuid === '[]') return [];
+    try {
+      return JSON.parse(row.formGuid);
+    } catch (_unused) {
+      return [];
+    }
+  };
+  var initMaterialExample = function initMaterialExample(row) {
+    if (!row.materialExample || row.materialExample === '[]') return [];
+    try {
+      return JSON.parse(row.materialExample);
+    } catch (_unused2) {
+      return [];
+    }
+  };
+  var hasSubMaterials = function hasSubMaterials(item) {
+    return item.subMaterials && item.subMaterials.length > 0;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "materialsList-content"
+  }, /*#__PURE__*/React.createElement(_guideTitle["default"], {
+    title: "\u6750\u6599\u6E05\u5355"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "table-con"
+  }, /*#__PURE__*/React.createElement("table", {
+    className: "material-table"
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+    className: "col-name"
+  }, "\u6750\u6599\u540D\u79F0"), /*#__PURE__*/React.createElement("th", {
+    className: "col-type"
+  }, "\u6750\u6599\u5206\u7C7B"), /*#__PURE__*/React.createElement("th", {
+    className: "col-need"
+  }, "\u6750\u6599\u5FC5\u8981\u6027"), /*#__PURE__*/React.createElement("th", {
+    className: "col-sample"
+  }, "\u6837\u8868"), /*#__PURE__*/React.createElement("th", {
+    className: "col-form"
+  }, "\u7A7A\u767D\u8868\u683C"), /*#__PURE__*/React.createElement("th", {
+    className: "col-check"
+  }, "\u5BA1\u67E5\u8981\u70B9"))), /*#__PURE__*/React.createElement("tbody", null, list.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, /*#__PURE__*/React.createElement("tr", {
+      className: "data-row"
+    }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+      className: "material-name-cell"
+    }, item.materialName)), /*#__PURE__*/React.createElement("td", {
+      className: "center"
+    }, !hasSubMaterials(item) && /*#__PURE__*/React.createElement("div", {
+      className: "type-btns"
+    }, getFileType(item) === '智' && /*#__PURE__*/React.createElement("span", {
+      className: "type-tag type-tag-zhi",
+      onClick: function onClick() {
+        return showTip('智');
+      }
+    }, "\u667A"), getFileType(item) === '享' && /*#__PURE__*/React.createElement("span", {
+      className: "type-tag type-tag-xiang",
+      onClick: function onClick() {
+        return showTip('享');
+      }
+    }, "\u4EAB"), getFileType(item) === '自' && /*#__PURE__*/React.createElement("span", {
+      className: "type-tag type-tag-zi",
+      onClick: function onClick() {
+        return showTip('自');
+      }
+    }, "\u81EA"))), /*#__PURE__*/React.createElement("td", {
+      className: "center"
+    }, item.isNeed === '1' ? '必要' : '非必要'), /*#__PURE__*/React.createElement("td", {
+      className: "center"
+    }, !hasSubMaterials(item) && /*#__PURE__*/React.createElement("div", {
+      className: "link-list"
+    }, initMaterialExample(item).map(function (sub, si) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "link",
+        key: si,
+        onClick: function onClick() {
+          return previewFile(sub);
+        }
+      }, sub.name);
+    }))), /*#__PURE__*/React.createElement("td", {
+      className: "center"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "link-list"
+    }, initFormGuid(item).map(function (sub, si) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "link",
+        key: si,
+        onClick: function onClick() {
+          return goDownLoad(sub);
+        }
+      }, sub.name);
+    }))), /*#__PURE__*/React.createElement("td", {
+      className: "center"
+    }, item.keyPoint && /*#__PURE__*/React.createElement("span", {
+      className: "link",
+      onClick: function onClick() {
+        return checkPoint(item);
+      }
+    }, "\u67E5\u770B"))), hasSubMaterials(item) && item.subMaterials.map(function (sub, si) {
+      return /*#__PURE__*/React.createElement("tr", {
+        className: "data-row sub-row",
+        key: "sub-" + si
+      }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+        className: "material-name-cell sub-name"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "sub-indent"
+      }), sub.materialName)), /*#__PURE__*/React.createElement("td", {
+        className: "center"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "type-btns"
+      }, getFileType(sub) === '智' && /*#__PURE__*/React.createElement("span", {
+        className: "type-tag type-tag-zhi",
+        onClick: function onClick() {
+          return showTip('智');
+        }
+      }, "\u667A"), getFileType(sub) === '享' && /*#__PURE__*/React.createElement("span", {
+        className: "type-tag type-tag-xiang",
+        onClick: function onClick() {
+          return showTip('享');
+        }
+      }, "\u4EAB"), getFileType(sub) === '自' && /*#__PURE__*/React.createElement("span", {
+        className: "type-tag type-tag-zi",
+        onClick: function onClick() {
+          return showTip('自');
+        }
+      }, "\u81EA"))), /*#__PURE__*/React.createElement("td", {
+        className: "center"
+      }, sub.isNeed === '1' ? '必要' : '非必要'), /*#__PURE__*/React.createElement("td", {
+        className: "center"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "link-list"
+      }, initMaterialExample(sub).map(function (s, sii) {
+        return /*#__PURE__*/React.createElement("span", {
+          className: "link",
+          key: sii,
+          onClick: function onClick() {
+            return previewFile(s);
+          }
+        }, s.name);
+      }))), /*#__PURE__*/React.createElement("td", {
+        className: "center"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "link-list"
+      }, initFormGuid(sub).map(function (s, sii) {
+        return /*#__PURE__*/React.createElement("span", {
+          className: "link",
+          key: sii,
+          onClick: function onClick() {
+            return goDownLoad(s);
+          }
+        }, s.name);
+      }))), /*#__PURE__*/React.createElement("td", {
+        className: "center"
+      }, sub.keyPoint && /*#__PURE__*/React.createElement("span", {
+        className: "link",
+        onClick: function onClick() {
+          return checkPoint(sub);
+        }
+      }, "\u67E5\u770B")));
+    }));
+  })))), previewShow && /*#__PURE__*/React.createElement(_dialog["default"], {
+    visible: previewShow,
+    onClose: function onClose() {
+      return setPreviewShow(false);
+    },
+    footer: false,
+    className: "preview-dialog"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "preview-inner"
+  }, previewLoading && /*#__PURE__*/React.createElement("div", {
+    className: "loading-con"
+  }, "\u52A0\u8F7D\u4E2D..."), /*#__PURE__*/React.createElement("iframe", {
+    id: "previewIframe",
+    frameBorder: "0",
+    height: "100%",
+    width: "100%",
+    title: "\u9884\u89C8"
+  }))));
+};
+MaterialsList.displayName = 'MaterialsList';
+var _default = exports["default"] = MaterialsList;

package/lib/components/guide-pc/components/materialsList.scss

@@ -0,0 +1,139 @@
+.materialsList-content {
+  padding-top: 20px;
+
+  .table-con {
+    margin-top: 20px;
+    overflow-x: auto;
+  }
+
+  .material-table {
+    width: 100%;
+    border-collapse: collapse;
+    border: 1px solid #e8e8e8;
+    font-size: 14px;
+    color: #222222;
+
+    thead {
+      th {
+        background: #f7f8fa;
+        padding: 12px 16px;
+        text-align: left;
+        font-weight: 500;
+        color: #333333;
+        border-bottom: 1px solid #e8e8e8;
+        border-right: 1px solid #e8e8e8;
+        white-space: nowrap;
+
+        &:last-child {
+          border-right: none;
+        }
+      }
+    }
+
+    tbody {
+      td {
+        padding: 12px 16px;
+        border-bottom: 1px solid #e8e8e8;
+        border-right: 1px solid #e8e8e8;
+        vertical-align: middle;
+
+        &:last-child {
+          border-right: none;
+        }
+      }
+    }
+
+    .col-name { width: 110px; }
+    .col-type { width: 100px; text-align: center; }
+    .col-need { width: 100px; text-align: center; }
+    .col-sample { width: 120px; text-align: center; }
+    .col-form { width: 120px; text-align: center; }
+    .col-check { width: 100px; text-align: center; }
+
+    .center {
+      text-align: center;
+    }
+
+    .data-row {
+      &:nth-child(even) {
+        background: #f7f8fa;
+      }
+
+      &.sub-row {
+        td {
+          padding-left: 16px;
+          background: #fafbfc;
+        }
+      }
+    }
+
+    .material-name-cell {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      &.sub-name {
+        .sub-indent {
+          display: inline-block;
+          width: 20px;
+          flex-shrink: 0;
+          &::before {
+            content: '└─';
+            color: #ccc;
+          }
+        }
+      }
+    }
+
+    .type-btns {
+      display: flex;
+      justify-content: center;
+      gap: 4px;
+    }
+
+    .type-tag {
+      display: inline-flex;
+      width: 20px;
+      height: 18px;
+      border-radius: 4px;
+      font-size: 12px;
+      justify-content: center;
+      align-items: center;
+      color: #ffffff;
+      cursor: pointer;
+
+      &-zhi { background: #1678FF; }
+      &-zi { background: #9570F7; }
+      &-xiang { background: #15BC83; }
+    }
+
+    .link-list {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .link {
+      color: #1678FF;
+      cursor: pointer;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .preview-dialog {
+    .preview-inner {
+      height: 800px;
+      width: 100%;
+
+      .loading-con {
+        text-align: center;
+        padding: 40px;
+        color: #999;
+      }
+    }
+  }
+}