ydb-components-material 0.1.88 → 0.1.90

package/lib/components/file-list/index.js

@@ -3,9 +3,11 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports["default"] = void 0;
+var _balloon = _interopRequireDefault(require("@alifd/next/lib/balloon"));
 var _react = _interopRequireDefault(require("react"));
 var _item = _interopRequireDefault(require("./item"));
 require("./index.scss");
+var Tooltip = _balloon["default"].Tooltip;
 var MATERIAL_TYPE = {
   1: '原件',
   2: '复印件',
@@ -115,6 +117,8 @@ var FileList = function FileList(_ref) {
     if (subIndex !== undefined) {
       // value为空，说明删除了
       if (!value) {
+        oneLevelItem.subMaterials[subIndex].isSmart = false;
+        oneLevelItem.subMaterials[subIndex].isShareFile = false;
         // 如果当前文件list中只有一个文件，还得补个空的
         if (oneLevelItem.subMaterials[subIndex].fileList.length === 1) {
           oneLevelItem.subMaterials[subIndex].fileList = [{
@@ -135,6 +139,8 @@ var FileList = function FileList(_ref) {
       }
     } else {
       if (!value) {
+        oneLevelItem.isSmart = false;
+        oneLevelItem.isShareFile = false;
         oneLevelItem.fileList.splice(fileIndex, 1);
         if (oneLevelItem.fileList.length === 0) {
           oneLevelItem.fileList.push({
@@ -155,22 +161,54 @@ var FileList = function FileList(_ref) {
     console.log('fileList--------res', fileList);
     valChange(fileList);
   };
+  var trigger = function trigger(child) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tag",
+      style: {
+        backgroundColor: child.isSmart ? '#1678FF' : child.isShareFile ? '#15BC83' : '#9570F7'
+      }
+    }, child.isSmart ? '智' : child.isShareFile ? '享' : '自');
+  };
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "file_list",
     style: style
   }, fileList.map(function (item, index) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "file_level_one"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "file_level_one_title"
     }, /*#__PURE__*/_react["default"].createElement("p", {
       className: "name_level_one"
-    }, convertNumbersToChinese(index + 1), item.materialName), item.subMaterials && item.subMaterials.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
+    }, convertNumbersToChinese(index + 1), item.materialName), !(item.subMaterials && item.subMaterials.length > 0) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "required"
+    }, "*"), /*#__PURE__*/_react["default"].createElement(_balloon["default"], {
+      v2: true,
+      trigger: trigger(item),
+      triggerType: "click",
+      align: "t",
+      arrowPointToCenter: true,
+      title: "",
+      delay: 20
+    }, item.isSmart ? '本材料为智能生成材料，系统将根据您填写的信息自动生成申报材料。' : item.isShareFile ? '本材料为共享材料，数据由大数据共享获取，无需用户自行准备。' : '需要用户自行准备申报材料'))), item.subMaterials && item.subMaterials.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
       className: "file_level_two"
     }, item.subMaterials.map(function (child, subIndex) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "file_level_two_item"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "file_level_two_title"
       }, /*#__PURE__*/_react["default"].createElement("p", {
         className: "name_level_two"
-      }, subIndex + 1, "\u3001", child.materialName), /*#__PURE__*/_react["default"].createElement("p", {
+      }, subIndex + 1, "\u3001", child.materialName), /*#__PURE__*/_react["default"].createElement("span", {
+        className: "required"
+      }, "*"), /*#__PURE__*/_react["default"].createElement(_balloon["default"], {
+        v2: true,
+        trigger: trigger(child),
+        triggerType: "click",
+        arrowPointToCenter: true,
+        align: "t",
+        title: "",
+        delay: 20
+      }, child.isSmart ? '本材料为智能生成材料，系统将根据您填写的信息自动生成申报材料。' : child.isShareFile ? '本材料为共享材料，数据由大数据共享获取，无需用户自行准备。' : '需要用户自行准备申报材料')), /*#__PURE__*/_react["default"].createElement("p", {
         className: "tip"
       }, getTipTextForSubMaterial(item, index, subIndex)), child.fileList.map(function (file, i) {
         return /*#__PURE__*/_react["default"].createElement(_item["default"], {

package/lib/components/file-list/index.scss

@@ -11,12 +11,31 @@
       margin-top: 8px;
     }
 
+    .required {
+      color: red;
+      margin-right: 8px;
+      margin-left: 2px;
+    }
+
+    .tag {
+      border-radius: 4px;
+      padding: 0 4px;
+      font-size: 12px;
+      color: #FFFFFF;
+    }
+
     .name_level_one {
       font-size: 15px;
       font-weight: 500;
       color: #333333;
+      margin-bottom: 0;
+    }
+
+    .file_level_one_title {
       padding-bottom: 16px;
       border-bottom: 1px solid #EEEEEE;
+      display: flex;
+      align-items: center;
     }
 
     .file_level_two {
@@ -24,12 +43,18 @@
 
       .file_level_two_item {
         margin-bottom: 16px;
+
+        .file_level_two_title {
+          display: flex;
+          align-items: center;
+        }
       }
 
       .name_level_two {
         font-size: 14px;
         font-weight: 500;
         color: #323232;
+        margin-bottom: 0;
       }
     }
   }

package/lib/components/file-list/item.js

@@ -15,6 +15,7 @@ var _preview = _interopRequireDefault(require("./icon/preview.svg"));
 var _preview_pc = _interopRequireDefault(require("./icon/preview_pc.svg"));
 var _download = _interopRequireDefault(require("./icon/download.svg"));
 var _download_pc = _interopRequireDefault(require("./icon/download_pc.svg"));
+var _file = _interopRequireDefault(require("./icon/file.svg"));
 var _icon_warning = _interopRequireDefault(require("./icon/icon_warning.svg"));
 var _icon_errorMsg = _interopRequireDefault(require("./icon/icon_errorMsg.svg"));
 var _upload = _interopRequireDefault(require("./icon/upload.svg"));
@@ -22,7 +23,7 @@ var _close = _interopRequireDefault(require("./icon/close.svg"));
 var _sign = _interopRequireDefault(require("./sign"));
 var _seal = _interopRequireDefault(require("./seal"));
 var _api = require("../../api");
-var _file = require("./file.js");
+var _file2 = require("./file.js");
 var _checkPoint = _interopRequireDefault(require("./checkPoint"));
 require("./item.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); }
@@ -52,7 +53,8 @@ var FileItem = function FileItem(_ref) {
     fileUrl = file.fileUrl,
     fileId = file.fileId,
     isSigned = file.isSigned,
-    isSealed = file.isSealed;
+    isSealed = file.isSealed,
+    fileType = file.fileType;
   var signatureEnable = fileConfig.signatureEnable,
     signEnable = fileConfig.signEnable,
     isInValid = fileConfig.isInValid,
@@ -123,8 +125,8 @@ var FileItem = function FileItem(_ref) {
         return;
       }
       if (spec) {
-        var type = (0, _file.getFileExtension)(fileData.name);
-        if (!(0, _file.initFormat)(spec).includes(type)) {
+        var type = (0, _file2.getFileExtension)(fileData.name);
+        if (!(0, _file2.initFormat)(spec).includes(type)) {
           _message["default"].notice("\u6587\u4EF6 \"" + fileData.name + "\" \u683C\u5F0F\u4E0D\u6B63\u786E");
           return;
         }
@@ -293,7 +295,7 @@ var FileItem = function FileItem(_ref) {
     var fileName = file.fileName,
       fileType = file.fileType;
     console.log('fileType', fileType);
-    var type = (0, _file.getFileExtension)(fileName);
+    var type = (0, _file2.getFileExtension)(fileName);
     if (type !== 'pdf') {
       _message["default"].notice('只有pdf文件才能使用电子签章');
       return;
@@ -415,7 +417,7 @@ var FileItem = function FileItem(_ref) {
             arr = selectedMaterial.fileName.split('.'); //
             fileFormat = arr[arr.length - 1]; // 获取当前材料库材料的文件类型
             console.log(fileFormat, '材料库当前选择的文件格式');
-            formatFinal = (0, _file.initFormat)(spec); // 限制的文件类型
+            formatFinal = (0, _file2.initFormat)(spec); // 限制的文件类型
             console.log(formatFinal, '限制的格式最后');
             if (formatFinal.includes(fileFormat)) {
               _context4.next = 1;
@@ -473,7 +475,7 @@ var FileItem = function FileItem(_ref) {
     var fileName = file.fileName,
       fileId = file.fileId;
     if (disabled) return;
-    var format = (0, _file.getFileExtension)(fileName);
+    var format = (0, _file2.getFileExtension)(fileName);
     download({
       fileId: fileId,
       format: format
@@ -491,13 +493,57 @@ var FileItem = function FileItem(_ref) {
       }, 0);
     }
   }, [userInfo, isShowLib, tokenTY]);
-  var getPdfUrl = /*#__PURE__*/function () {
-    var _ref6 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5(id) {
-      var urlRes, res;
+  var extractImageUrls = /*#__PURE__*/function () {
+    var _ref6 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5(previewUrl) {
+      var response, htmlText, parser, doc, imgElements, srcList;
       return _regenerator["default"].wrap(function (_context5) {
         while (1) switch (_context5.prev = _context5.next) {
           case 0:
             _context5.next = 1;
+            return fetch(previewUrl);
+          case 1:
+            response = _context5.sent;
+            _context5.next = 2;
+            return response.text();
+          case 2:
+            htmlText = _context5.sent;
+            parser = new DOMParser();
+            doc = parser.parseFromString(htmlText, 'text/html');
+            imgElements = doc.querySelectorAll('img');
+            srcList = Array.from(imgElements).map(function (img) {
+              return img.getAttribute('data-src');
+            });
+            return _context5.abrupt("return", srcList);
+          case 3:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5);
+    }));
+    return function extractImageUrls(_x3) {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+  var getViewUrl = /*#__PURE__*/function () {
+    var _ref7 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6(id) {
+      var type, urlRes, res, list;
+      return _regenerator["default"].wrap(function (_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            type = (0, _file2.getFileExtension)(fileName);
+            if (!['png', 'jpg', 'jpeg'].includes(type)) {
+              _context6.next = 1;
+              break;
+            }
+            return _context6.abrupt("return", fileUrl);
+          case 1:
+            if (!(type !== 'pdf')) {
+              _context6.next = 2;
+              break;
+            }
+            return _context6.abrupt("return", '');
+          case 2:
+            _context6.next = 3;
             return (0, _api.getUrlById)({
               id: id,
               effectiveTime: 3600000
@@ -509,14 +555,14 @@ var FileItem = function FileItem(_ref) {
               isPC: isPC,
               accessToken: accessToken
             });
-          case 1:
-            urlRes = _context5.sent;
+          case 3:
+            urlRes = _context6.sent;
             if (!(urlRes.presignedUrlList && urlRes.presignedUrlList.length > 0)) {
-              _context5.next = 3;
+              _context6.next = 6;
               break;
             }
             console.log('urlRes', urlRes);
-            _context5.next = 2;
+            _context6.next = 4;
             return (0, _api.onlinePreview)({
               url: urlRes.presignedUrlList[2]
             }, {
@@ -527,26 +573,28 @@ var FileItem = function FileItem(_ref) {
               isPC: isPC,
               accessToken: accessToken
             });
-          case 2:
-            res = _context5.sent;
-            return _context5.abrupt("return", res.url);
-          case 3:
+          case 4:
+            res = _context6.sent;
+            _context6.next = 5;
+            return extractImageUrls(res.url);
+          case 5:
+            list = _context6.sent;
+            console.log('list---', list);
+            return _context6.abrupt("return", list[0]);
+          case 6:
           case "end":
-            return _context5.stop();
+            return _context6.stop();
         }
-      }, _callee5);
+      }, _callee6);
     }));
-    return function getPdfUrl(_x3) {
-      return _ref6.apply(this, arguments);
+    return function getViewUrl(_x4) {
+      return _ref7.apply(this, arguments);
     };
   }();
   (0, _react.useEffect)(function () {
     if (fileId) {
-      getPdfUrl(fileId).then(function (url) {
-        (0, _file.pdfToImageUrl)(url).then(function (res) {
-          console.log('imgUrl', res);
-          setThumbnail(res);
-        });
+      getViewUrl(fileId).then(function (url) {
+        setThumbnail(url);
       });
     }
   }, [fileId]);
@@ -563,7 +611,11 @@ var FileItem = function FileItem(_ref) {
     className: "filed"
   }, /*#__PURE__*/_react["default"].createElement("img", {
     className: "small_img",
-    src: thumbnail,
+    style: !thumbnail ? {
+      width: '30px',
+      height: '30px'
+    } : {},
+    src: thumbnail || _file["default"],
     alt: ""
   }), !disabled && /*#__PURE__*/_react["default"].createElement("img", {
     className: "del",

package/lib/components/file-list-preview/checkPoint.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import './checkPoint.scss';
+export default function CheckPoint(props: any): JSX.Element;

package/lib/components/file-list-preview/checkPoint.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = CheckPoint;
+var _message = _interopRequireDefault(require("@alifd/next/lib/message"));
+var _react = require("react");
+var _icons = require("@ant-design/icons");
+require("./checkPoint.scss");
+function CheckPoint(props) {
+  var _resultData$at, _resultData$at2;
+  var checkPointData = props.checkPointData,
+    handleClose = props.handleClose;
+  var _useState = (0, _react.useState)(0),
+    resIndex = _useState[0],
+    setResIndex = _useState[1];
+  var _useState2 = (0, _react.useState)(null),
+    resIndexData = _useState2[0],
+    setResIndexData = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    resultData = _useState3[0],
+    setResultData = _useState3[1];
+  var _useState4 = (0, _react.useState)(0),
+    pageHeight = _useState4[0],
+    setPageHeight = _useState4[1];
+  var imgRef = (0, _react.useRef)();
+  var initData = function initData() {
+    var fileUrl = checkPointData.fileUrl,
+      _checkPointData$annot = checkPointData.annotations,
+      annotations = _checkPointData$annot === void 0 ? [] : _checkPointData$annot;
+    setTimeout(function () {
+      var iframe = document.getElementById('file_check_point');
+      iframe.src = fileUrl + "#toolbar=0";
+    }, 500);
+    setResIndexData(annotations[0]);
+    // 其中的page可能是乱序的，所以先排序一下
+    setResultData(annotations.sort(function (a, b) {
+      return a.page - b.page;
+    }));
+    var clientWidth = document.documentElement.clientWidth;
+    var _annotations$ = annotations[0],
+      scrollWidth = _annotations$.scrollWidth,
+      scrollHeight = _annotations$.scrollHeight;
+    var scale = clientWidth / scrollWidth;
+    setPageHeight(scrollHeight * scale);
+  };
+
+  // 获取标识的位置和大小 [方法]
+  var getTipDotStyle = function getTipDotStyle(item) {
+    var width = item.width,
+      height = item.height,
+      x = item.x,
+      y = item.y,
+      scrollWidth = item.scrollWidth,
+      scrollHeight = item.scrollHeight,
+      page = item.page;
+    console.log(width, height, x, y);
+    var img = imgRef.current;
+    console.log(img, 'refs');
+    var clientWidth = document.documentElement.clientWidth;
+    console.log('clientWidth-----', clientWidth);
+
+    // 算出一个系数，来动态生成下面的边框样式
+    var scale = clientWidth / scrollWidth;
+
+    // console.log('原始宽高', sourceImgWidth, sourceImgHeight);
+    console.log('原始宽高', scrollWidth, scrollHeight);
+    console.log('缩放系数', scale, scale);
+    return {
+      width: width * scale + 'px',
+      height: height * scale + 'px',
+      left: x * scale + 'px',
+      top: (page - 1) * pageHeight + y * scale + 'px'
+    };
+  };
+
+  // 上一项(prev),下一项(next) [按钮]
+  var handleSwitch = function handleSwitch(state) {
+    if (state === 'next' && resIndex === resultData.length - 1) return _message["default"].notice('没有下一项了');
+    if (state === 'prev' && resIndex === 0) return _message["default"].notice('没有上一项了');
+    if (state === 'next') {
+      setResIndex(resIndex + 1);
+      setResIndexData(resultData[resIndex + 1]);
+    }
+    if (state === 'prev') {
+      setResIndex(resIndex - 1);
+      setResIndexData(resultData[resIndex - 1]);
+    }
+  };
+  var checkOneDot = function checkOneDot(item, index) {
+    setResIndex(index);
+    setResIndexData(item);
+  };
+  (0, _react.useEffect)(function () {
+    if (checkPointData) {
+      initData();
+    }
+  }, [checkPointData]);
+  return /*#__PURE__*/_react.React.createElement("div", null, /*#__PURE__*/_react.React.createElement("div", {
+    className: "keyPoint-container"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    className: "tipDot-content",
+    style: {
+      height: ((_resultData$at = resultData.at(-1)) === null || _resultData$at === void 0 ? void 0 : _resultData$at.page) * pageHeight + 'px'
+    }
+  }, resultData.map(function (item, index) {
+    return /*#__PURE__*/_react.React.createElement("div", {
+      className: "tip-item " + (index === resIndex ? 'active' : ''),
+      key: index,
+      onClick: function onClick() {
+        return checkOneDot(item, index);
+      },
+      style: getTipDotStyle(item)
+    }, /*#__PURE__*/_react.React.createElement("div", {
+      className: "num " + (index === resIndex ? 'active' : '')
+    }, index + 1));
+  })), resIndexData && /*#__PURE__*/_react.React.createElement("div", {
+    className: "result-outter"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    className: "result-card"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    className: "result-title"
+  }, resIndex + 1, "\u3001", resIndexData.text), /*#__PURE__*/_react.React.createElement("div", {
+    className: "result-info"
+  }, /*#__PURE__*/_react.React.createElement(_icons.CheckCircleFilled, {
+    color: "#15bc83",
+    size: "20",
+    style: {
+      color: '#15bc83',
+      fontSize: '20px'
+    }
+  }), /*#__PURE__*/_react.React.createElement("div", {
+    className: "result-text"
+  }, resIndexData.reviewNotes)))), /*#__PURE__*/_react.React.createElement("div", {
+    className: "bottom-btn"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    className: "btn"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    onClick: handleClose
+  }, "\u8FD4\u56DE")), /*#__PURE__*/_react.React.createElement("div", {
+    className: "btn"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    onClick: function onClick() {
+      return handleSwitch('prev');
+    }
+  }, "\u4E0A\u4E00\u9879")), /*#__PURE__*/_react.React.createElement("div", {
+    className: "btn btn-blue"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    onClick: function onClick() {
+      return handleSwitch('next');
+    }
+  }, "\u4E0B\u4E00\u9879"))), /*#__PURE__*/_react.React.createElement("iframe", {
+    ref: imgRef,
+    id: "file_check_point",
+    frameBorder: "0",
+    height: "100%",
+    width: "100%",
+    style: {
+      height: ((_resultData$at2 = resultData.at(-1)) === null || _resultData$at2 === void 0 ? void 0 : _resultData$at2.page) * pageHeight + 'px'
+    }
+  })));
+}

package/lib/components/file-list-preview/checkPoint.scss

@@ -0,0 +1,120 @@
+.keyPoint-container {
+	// position: sticky;
+	height: 100vh;
+  // margin-top: -56px;
+	width: 100vw;
+  position: fixed;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  background: #919191;
+  overflow-y: scroll;
+  #file_check_point {
+    overflow: visible !important;
+    overflow-clip-margin: unset !important;
+  }
+  .tipDot-content{
+    // height: 100vh;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    // overflow: scroll;
+    .tip-item{
+      position: absolute;
+      border-radius: 2px;
+      border: 1px solid #15BC83;
+      background: rgba(21, 188, 131, 0.1);
+      &.active {
+        background: rgba(247, 98, 93, 0.1);
+        border: 1px solid #F7625D;
+      }
+      .num{
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        font-size: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #ffffff;
+        margin-left: -20px;
+        background: #15BC83;
+        &.active {
+          background: #F7625D;
+        }
+      }
+    }
+
+  }
+	.result-outter {
+		box-sizing: border-box;
+		padding: 0 24px;
+		// border: 1px solid red;
+		position: fixed;
+		width: 100%;
+		bottom: 65px;
+		left: 0;
+		.result-card {
+			border-radius: 10px;
+			padding: 16px;
+      background: #ffffff;
+      border: 1px solid #ddd;
+      box-shadow: 0px 4px 10px 0px rgba(177, 188, 200, 0.25);
+			.result-title {
+				color: #333;
+				font-size: 14px;
+				margin-bottom: 8px;
+			}
+			.result-info{
+				font-size: 14px;
+				margin-bottom: 10px;
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+				gap: 5px;
+				// 提示类型: error/judge/pass
+				.result-text{
+				}
+			}
+		}
+
+	}
+	.bottom-btn {
+		box-sizing: border-box;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		background-color: #fff;
+		padding: 11px 0;
+		display: flex;
+		box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.1);
+		z-index: 200;
+		.btn {
+			margin: 0 10px;
+			flex: 1;
+      color: #323233;
+      background-color: #fff;
+      border-color: #ebedf0;
+      border-width: 1px;
+      border-style: solid;
+      border-radius: 100px;
+      padding: 0 12px;
+      font-size: 14px;
+      height: 40px;
+      position: relative;
+      align-items: center;
+      justify-content: center;
+      display: flex;
+      flex-direction: row;
+      box-sizing: border-box;
+      flex-direction: row;
+		}
+    .btn-blue {
+      color: white;
+      border-width: 0px;
+      background-image: linear-gradient(rgb(22, 120, 255), rgb(118, 173, 250));
+    }
+	}
+}