ydb-components-material 0.1.102 → 0.1.104

package/lib/components/guide/compoents/materials/situation.js

@@ -0,0 +1,156 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var React = _interopRequireWildcard(require("react"));
+require("./situation.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); }
+// TODO: checkSituation2 and apiConfig are not available in this project
+// import { checkSituation2 } from '@/utils/situation.js'
+// import apiConfig from '@/config/api.cofig'
+
+var Situation = function Situation(_ref) {
+  var eventInfoProp = _ref.eventInfo,
+    stepListProp = _ref.stepList,
+    applicationIdProp = _ref.applicationId,
+    accessTokenProp = _ref.accessToken,
+    acctTypeProp = _ref.acctType,
+    formDataProp = _ref.formData,
+    finalMaterialsProp = _ref.finalMaterials,
+    formFieldNamesProp = _ref.formFieldNames,
+    itemSituationRowUidProp = _ref.itemSituationRowUid,
+    workNoProp = _ref.workNo,
+    declarationAppTokenProp = _ref.declarationAppToken,
+    declarePageProp = _ref.declarePage,
+    taskHandleItemProp = _ref.taskHandleItem,
+    situationResRechangeProp = _ref.situationResRechange;
+  var _React$useState = React.useState('说明：因个人情况不同上交材料不同，可通过情形选择查看必须上传的材料！'),
+    tip = _React$useState[0];
+  var _React$useState2 = React.useState(false),
+    isExpend = _React$useState2[0],
+    setIsExpend = _React$useState2[1];
+  var _React$useState3 = React.useState(''),
+    iframeSrc = _React$useState3[0],
+    setIframeSrc = _React$useState3[1];
+  React.useEffect(function () {
+    initPage();
+    window.addEventListener('message', getMessage);
+    return function () {
+      window.removeEventListener('message', getMessage);
+    };
+  }, []);
+  var initPage = function initPage() {
+    var stepList = stepListProp;
+    if (!stepList) return;
+    var situationPage = stepList.find(function (item) {
+      return item.name === '智能导办';
+    });
+    if (situationPage !== null && situationPage !== void 0 && situationPage.link && declarePageProp) {
+      var applicationId = applicationIdProp;
+      var access_token = accessTokenProp;
+      var acctType = acctTypeProp;
+      var finalLink = declarePageProp + "/preview.html?pageID=" + situationPage.id;
+      var url = finalLink + "&isFirst=1&isReCheck=1&applicationId=" + applicationId + "&access_token=" + access_token + "&acctType=" + acctType;
+      setIframeSrc(url);
+    }
+  };
+  var getMessage = function getMessage(e) {
+    var typeArr = ['getAccessToken', 'getDeclaraToken', 'getApplicationId', 'getTaskHandleItem', 'getFormId', 'getMaterials', 'getFormData', 'getFormFieldNames', 'getItemSituationRowUid', 'getWorkNo'];
+    var _ref2 = e.data || {},
+      type = _ref2.type,
+      data = _ref2.data;
+    if (typeArr.includes(type)) {
+      sendInfoHandle(type, data);
+    } else if (type === 'situationRes') {
+      situationResRechangeProp === null || situationResRechangeProp === void 0 ? void 0 : situationResRechangeProp(data);
+    }
+  };
+  var sendInfoHandle = function sendInfoHandle(type, _data) {
+    var _eventInfo$taskGenera, _eventInfo$taskGenera2;
+    // TODO: postMessage to iframe – implementation depends on iframe availability
+    var applicationId = applicationIdProp;
+    // const taskHandleItem = taskHandleItemProp;
+    var eventInfo = eventInfoProp;
+    var formData = formDataProp;
+    var finalMaterials = finalMaterialsProp;
+    var formFieldNames = formFieldNamesProp;
+    var itemSituationRowUid = itemSituationRowUidProp;
+    var workNo = workNoProp;
+    var sendData = {
+      type: type,
+      data: {}
+    };
+    switch (type) {
+      case 'getAccessToken':
+        sendData.data.accessToken = accessTokenProp;
+        sendData.data.acctType = acctTypeProp;
+        break;
+      case 'getDeclaraToken':
+        sendData.data.declarationAppToken = declarationAppTokenProp;
+        break;
+      case 'getApplicationId':
+        sendData.data.applicationId = applicationId;
+        break;
+      case 'getTaskHandleItem':
+        sendData.data.taskHandleItem = taskHandleItemProp;
+        break;
+      case 'getFormId':
+        if (eventInfo !== null && eventInfo !== void 0 && (_eventInfo$taskGenera = eventInfo.taskGeneralForms) !== null && _eventInfo$taskGenera !== void 0 && (_eventInfo$taskGenera2 = _eventInfo$taskGenera[0]) !== null && _eventInfo$taskGenera2 !== void 0 && _eventInfo$taskGenera2.formId) {
+          sendData.data.formId = eventInfo.taskGeneralForms[0].formId;
+        } else {
+          sendData.data.formId = '12023122617035840604349816';
+          // TODO: uni.$u.toast('没有查到表单id')
+        }
+        break;
+      case 'getMaterials':
+        sendData.data.materials = finalMaterials || (eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.taskGeneralMaterials);
+        break;
+      case 'getFormData':
+        sendData.data.formData = formData;
+        break;
+      case 'getFormFieldNames':
+        sendData.data.formFieldNames = formFieldNames;
+        break;
+      case 'getItemSituationRowUid':
+        sendData.data.itemSituationRowUid = itemSituationRowUid;
+        break;
+      case 'getWorkNo':
+        sendData.data.workNo = workNo;
+        break;
+    }
+    var formIframe = document.getElementById('situationIframe');
+    if (formIframe !== null && formIframe !== void 0 && formIframe.contentWindow) {
+      formIframe.contentWindow.postMessage(sendData, '*');
+    }
+  };
+  var expendChange = function expendChange() {
+    setIsExpend(!isExpend);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "situation-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "situation-tip"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "title-con"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "title"
+  }, "\u5BFC\u529E\u60C5\u5F62\u9009\u62E9"), /*#__PURE__*/React.createElement("div", {
+    className: "btn-con",
+    onClick: expendChange
+  }, /*#__PURE__*/React.createElement("div", null, isExpend ? '收起' : '展开'), /*#__PURE__*/React.createElement("div", {
+    className: "icon"
+  }, /*#__PURE__*/React.createElement("span", null, isExpend ? '▲' : '▼')))), /*#__PURE__*/React.createElement("div", {
+    className: "tip"
+  }, tip)), isExpend && /*#__PURE__*/React.createElement("div", {
+    className: "situation-inner"
+  }, /*#__PURE__*/React.createElement("iframe", {
+    id: "situationIframe",
+    src: iframeSrc,
+    frameBorder: "0",
+    height: "100%",
+    width: "100%",
+    title: "\u60C5\u5F62\u9009\u62E9"
+  })));
+};
+Situation.displayName = 'Situation';
+var _default = exports["default"] = Situation;

package/lib/components/guide/compoents/materials/situation.scss

@@ -0,0 +1,63 @@
+.situation-content {
+  background: #ffffff !important;
+
+  .situation-tip {
+    border: 1px solid #ffffff;
+    padding: 16px;
+    border-radius: 8px 8px 0 0;
+    background: linear-gradient(180deg, #E1EDFF 0%, #FFFFFF 100%);
+
+    .title-con {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .title {
+        background: linear-gradient(96deg, #0047A8 0%, #1678FF 98%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        font-size: 15px;
+        font-weight: 500;
+      }
+
+      .btn-con {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #1678FF;
+        font-size: 13px;
+        cursor: pointer;
+
+        .icon {
+          width: 14px;
+          height: 14px;
+          border-radius: 50%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border: 1px solid #1678FF;
+          margin-left: 4px;
+          font-size: 8px;
+          color: #1678FF;
+        }
+      }
+    }
+
+    .tip {
+      margin-top: 8px;
+      font-size: 13px;
+      line-height: 20px;
+      color: #5C7292;
+    }
+  }
+
+  .situation-inner {
+    background: #ffffff;
+    border-radius: 0 0 8px 8px;
+    border-top: none;
+    overflow-y: scroll;
+    height: 500px;
+    padding: 10px;
+  }
+}

package/lib/components/guide/compoents/places.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import './places.scss';
+export interface PlacesProps {
+    eventInfo?: any;
+}
+declare const Places: React.FC<PlacesProps>;
+export default Places;

package/lib/components/guide/compoents/places.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var React = _interopRequireWildcard(require("react"));
+require("./places.scss");
+var _empty = _interopRequireDefault(require("../imgs/empty.png"));
+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 Places = function Places(_ref) {
+  var eventInfoProp = _ref.eventInfo;
+  var _React$useState = React.useState({
+      longitude: NaN,
+      latitude: NaN
+    }),
+    local = _React$useState[0],
+    setLocal = _React$useState[1];
+  var _React$useState2 = React.useState([]),
+    list = _React$useState2[0],
+    setList = _React$useState2[1];
+  React.useEffect(function () {
+    initData();
+  }, []);
+  var initData = function initData() {
+    var eventInfo = eventInfoProp;
+    var hallList = (eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.hallList) || [];
+    setList(hallList);
+    if (hallList.length > 0) {
+      clickDotHandle(hallList[0]);
+    }
+  };
+
+  // TODO: uni.getLocation → browser geolocation not implemented
+  // initSelfPos() was using uni.getLocation
+
+  var setCenter = function setCenter(latitude, longitude) {
+    setLocal({
+      latitude: latitude,
+      longitude: longitude
+    });
+  };
+  var clickDotHandle = function clickDotHandle(point) {
+    var latitude = point.latitude,
+      longitude = point.longitude;
+    if (latitude && longitude) {
+      setCenter(latitude, longitude);
+    } else {
+      setCenter(37.81, 112.52);
+    }
+  };
+
+  // TODO: commonMap component not available in React. Map display not implemented.
+  // The original used a <commonMap> uni-app component with mapbox/amap integration.
+  React.useEffect(function () {
+    var hallList = (eventInfoProp === null || eventInfoProp === void 0 ? void 0 : eventInfoProp.hallList) || [];
+    window.onload = function () {
+      // 2. 初始化地图
+      if (!AMap) return;
+      var map = new AMap.Map('mapContainer', {
+        zoom: 14,
+        // 缩放级别
+        // 注意：经纬度格式为 [经度, 纬度]
+        center: [hallList[0].longitude, hallList[0].latitude]
+      });
+      // 3. 添加一个标记点
+      new AMap.Marker({
+        position: [hallList[0].longitude, hallList[0].latitude],
+        map: map
+      });
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "places-content"
+  }, list.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "map-con"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "mapContainer",
+    style: {
+      height: 200,
+      background: '#f0f0f0',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      color: '#999',
+      fontSize: 14
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "list-con"
+  }, list.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "item",
+      key: index,
+      onClick: function onClick() {
+        return clickDotHandle(item);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "name"
+    }, item.hallName), /*#__PURE__*/React.createElement("div", {
+      className: "info"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "icon-placeholder"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "title_"
+    }, "\u5730\u5740\uFF1A"), /*#__PURE__*/React.createElement("div", {
+      className: "desc"
+    }, item.addressDetail)), /*#__PURE__*/React.createElement("div", {
+      className: "info"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "icon-placeholder"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "title_"
+    }, "\u65F6\u95F4\uFF1A"), /*#__PURE__*/React.createElement("div", {
+      className: "desc"
+    }, item.firstStartTime, " - ", item.firstEndTime, " / ", item.secondStartTime, " - ", item.secondEndTime)), /*#__PURE__*/React.createElement("div", {
+      className: "info"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "icon-placeholder"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "title_"
+    }, "\u7535\u8BDD\uFF1A"), /*#__PURE__*/React.createElement("div", {
+      className: "desc"
+    }, item.consultPhone)));
+  }))) : /*#__PURE__*/React.createElement("div", {
+    className: "empty-con"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "empty-img",
+    style: {
+      backgroundImage: "url(" + _empty["default"] + ")"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "empty-text"
+  }, "\u6682\u65E0\u529E\u4E8B\u5927\u5385")));
+};
+Places.displayName = 'Places';
+var _default = exports["default"] = Places;

package/lib/components/guide/compoents/places.scss

@@ -0,0 +1,71 @@
+.places-content {
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 12px 12px 0;
+  margin-top: 12px;
+
+  .map-con {
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .list-con {
+    .item {
+      padding: 16px 0;
+      border-bottom: 1px solid #EEEEEE;
+
+      &:last-child {
+        border: none;
+      }
+
+      .name {
+        font-size: 16px;
+        font-weight: 500;
+        color: #333333;
+      }
+
+      .info {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        margin-top: 8px;
+        font-size: 14px;
+        line-height: 24px;
+        color: #666666;
+
+        .icon-placeholder {
+          margin-right: 6px;
+          margin-top: 4px;
+          width: 16px;
+          height: 16px;
+          flex-shrink: 0;
+        }
+
+        .desc {
+          flex: 1;
+        }
+      }
+    }
+  }
+
+  .empty-con {
+    background: #ffffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 50vh;
+
+    .empty-img {
+      width: 189px;
+      height: 120px;
+      background-size: 100% 100%;
+    }
+
+    .empty-text {
+      font-size: 14px;
+      color: #8BB5ED;
+      margin-top: 5px;
+    }
+  }
+}

package/lib/components/guide/compoents/processImg.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import './processImg.scss';
+export interface ProcessImgProps {
+    eventInfo?: any;
+    declarationAppToken?: string;
+    baseUrl?: string;
+}
+declare const ProcessImg: React.FC<ProcessImgProps>;
+export default ProcessImg;

package/lib/components/guide/compoents/processImg.js

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _loading = _interopRequireDefault(require("@alifd/next/lib/loading"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var React = _interopRequireWildcard(require("react"));
+require("./processImg.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 _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+// TODO: getFileUrlApi not available in this project
+// import { getFileUrlApi } from '@/api/business.js'
+
+var ProcessImg = function ProcessImg(_ref) {
+  var eventInfoProp = _ref.eventInfo,
+    declarationAppTokenProp = _ref.declarationAppToken,
+    baseUrlProp = _ref.baseUrl;
+  var _React$useState = React.useState(true),
+    loading = _React$useState[0],
+    setLoading = _React$useState[1];
+  var _React$useState2 = React.useState(''),
+    processImg = _React$useState2[0],
+    setProcessImg = _React$useState2[1];
+  var _React$useState3 = React.useState([]),
+    strategyList = _React$useState3[0],
+    setStrategyList = _React$useState3[1];
+  React.useEffect(function () {
+    initData();
+  }, []);
+  var initData = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var _eventInfo$taskGenera;
+      var eventInfo, imgObj, imgObjParsed, urlRes, strategies, _t;
+      return _regenerator["default"].wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            eventInfo = eventInfoProp;
+            if (eventInfo) {
+              _context.next = 1;
+              break;
+            }
+            return _context.abrupt("return");
+          case 1:
+            // Process image (workflow chart)
+            // TODO: getFileUrlApi needs to be implemented
+            imgObj = (_eventInfo$taskGenera = eventInfo.taskGeneralExtend) === null || _eventInfo$taskGenera === void 0 ? void 0 : _eventInfo$taskGenera.programProcess;
+            _context.prev = 2;
+            imgObjParsed = JSON.parse(imgObj);
+            if (!(imgObjParsed.length > 0 && imgObjParsed[0].id)) {
+              _context.next = 4;
+              break;
+            }
+            _context.next = 3;
+            return (0, _api.getUrlById)({
+              id: imgObjParsed[0].id,
+              effectiveTime: 3600000
+            }, {
+              tokenTY: declarationAppTokenProp,
+              baseUrl: baseUrlProp
+            });
+          case 3:
+            urlRes = _context.sent;
+            setProcessImg(urlRes.presignedUrlList[2]);
+            // TODO: getFileUrl API call not implemented – file ID: ${imgObjParsed[0].id}
+            setLoading(false);
+            _context.next = 5;
+            break;
+          case 4:
+            setLoading(false);
+          case 5:
+            _context.next = 7;
+            break;
+          case 6:
+            _context.prev = 6;
+            _t = _context["catch"](2);
+            setLoading(false);
+          case 7:
+            // Strategy guide list
+            strategies = eventInfo.applicationAffairsStrategy || [];
+            setStrategyList(strategies);
+
+            // TODO: initStrategyList – fetch file URLs for each strategy item
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 6]]);
+    }));
+    return function initData() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  // TODO: uni.previewImage not implemented
+  var preView = function preView() {
+    // uni.previewImage({ urls: [this.processImg] })
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "processImg-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "card"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "title"
+  }, "\u529E\u4E8B\u653B\u7565"), /*#__PURE__*/React.createElement("div", {
+    className: "list-con"
+  }, strategyList.length > 0 ? strategyList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "item",
+      key: index
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "title-con"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "num"
+    }, "0", index + 1), /*#__PURE__*/React.createElement("div", {
+      className: "item-title"
+    }, item.title)), /*#__PURE__*/React.createElement("div", {
+      className: "desc-con"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "desc-info"
+    }, item.introduction, item.fileUrl && item.isImg && /*#__PURE__*/React.createElement("img", {
+      src: item.fileUrl,
+      alt: "",
+      style: {
+        width: '100%'
+      }
+    }), item.fileUrl && !item.isImg && /*#__PURE__*/React.createElement("video", {
+      className: "video-con",
+      src: item.fileUrl,
+      controls: true
+    }))));
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: "empty-text"
+  }, "\u6682\u65E0\u529E\u4E8B\u653B\u7565"))), /*#__PURE__*/React.createElement("div", {
+    className: "card"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "title"
+  }, "\u529E\u4E8B\u6D41\u7A0B"), processImg ? /*#__PURE__*/React.createElement("img", {
+    style: {
+      width: '100%'
+    },
+    src: processImg,
+    alt: "\u529E\u4E8B\u6D41\u7A0B",
+    onClick: preView
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: "empty-content"
+  }, loading ? /*#__PURE__*/React.createElement(_loading["default"], {
+    tip: "\u52A0\u8F7D\u4E2D"
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: "empty-text"
+  }, "\u6682\u65E0\u76F8\u5173\u6750\u6599"))));
+};
+ProcessImg.displayName = 'ProcessImg';
+var _default = exports["default"] = ProcessImg;

package/lib/components/guide/compoents/processImg.scss

@@ -0,0 +1,88 @@
+.processImg-content {
+  margin-top: 12px;
+
+  .card {
+    background: #FFFFFF;
+    border-radius: 8px;
+    width: 100%;
+    margin-bottom: 15px;
+    padding: 16px 14px;
+    box-sizing: border-box;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+      color: #333333;
+      margin-bottom: 16px;
+    }
+  }
+
+  .list-con {
+    .item {
+      margin: 10px 0;
+
+      .title-con {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        .num {
+          background: linear-gradient(90deg, #73AEFF 0%, #1678FF 100%);
+          color: #ffffff;
+          font-size: 13px;
+          padding: 0 7px;
+          border-radius: 2px;
+          transform: skew(-10deg);
+        }
+
+        .item-title {
+          font-size: 15px;
+          font-weight: 500;
+          color: #333333;
+          margin-left: 10px;
+
+          &::after {
+            content: '';
+            display: block;
+            width: 68px;
+            height: 8px;
+            margin-top: -7px;
+            background: linear-gradient(90deg, #D9E9FF 0%, #FFFFFF 98%);
+          }
+        }
+      }
+
+      .desc-con {
+        border-left: 1px dashed #1678FF;
+        margin-left: 14px;
+        margin-top: 10px;
+        padding-left: 22px;
+
+        .desc-info {
+          background: #F5F9FF;
+          padding: 12px;
+          font-size: 13px;
+          line-height: 22px;
+          color: #333333;
+          border-radius: 8px;
+
+          .video-con {
+            width: 100%;
+            margin-top: 10px;
+          }
+        }
+      }
+
+      &:last-child .desc-con {
+        border: none;
+      }
+    }
+  }
+
+  .empty-content {
+    height: 400px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}