ydb-components-material 0.1.125 → 0.1.127

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

@@ -17,11 +17,18 @@ var Situation = function Situation(_ref) {
     applicationIdProp = _ref.applicationId,
     accessTokenProp = _ref.accessToken,
     acctTypeProp = _ref.acctType,
+    finalMaterialsProp = _ref.finalMaterials,
     declarationAppTokenProp = _ref.declarationAppToken,
-    taskHandleItemProp = _ref.taskHandleItem;
+    situationPageUrlProp = _ref.situationPageUrl,
+    taskHandleItemProp = _ref.taskHandleItem,
+    situationResRechangeProp = _ref.situationResRechange,
+    previousDataProp = _ref.previousData;
   var _React$useState = React.useState(false),
     isExpend = _React$useState[0],
     setIsExpend = _React$useState[1];
+  var _React$useState2 = React.useState(''),
+    iframeSrc = _React$useState2[0],
+    setIframeSrc = _React$useState2[1];
   var tip = '说明：因个人情况不同上交材料不同，可通过情形选择查看必须上传的材料！';
   React.useEffect(function () {
     initPage();
@@ -29,37 +36,32 @@ var Situation = function Situation(_ref) {
     return function () {
       window.removeEventListener('message', getMessage);
     };
-  }, []);
+    // NOTE: initPage and getMessage intentionally omitted from deps to match guide component pattern
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [eventInfoProp, taskHandleItemProp, situationPageUrlProp, declarationAppTokenProp, finalMaterialsProp, applicationIdProp, accessTokenProp, acctTypeProp, previousDataProp]);
   var initPage = function initPage() {
-    if (!eventInfoProp) return;
-    // TODO: apiConfig.declarePage not available; using placeholder URL
-    // const { declarePage } = apiConfig;
-    // const stepList = uni.getStorageSync('stepList');
-    // const situationPage = stepList.find((item) => item.name === '智能导办-pc');
-    // if (situationPage && situationPage.link) {
-    //   const finalLink = `${declarePage}/preview.html?pageID=${situationPage.id}`;
-    //   const url = `${finalLink}&isFirst=1&isReCheck=1&applicationId=${applicationIdProp}&access_token=${accessTokenProp}&acctType=${acctTypeProp}&isPc=1`;
-    //   setTimeout(() => {
-    //     const iframe = document.getElementById('situationIframe') as HTMLIFrameElement;
-    //     if (iframe) iframe.src = url;
-    //   }, 500);
-    // }
+    if (!situationPageUrlProp) return;
+    var url = situationPageUrlProp + "&isFirst=1&isReCheck=1&isZXBB=1&isPc=1";
+    setIframeSrc(url);
   };
   var getMessage = function getMessage(e) {
-    var typeArr = ['getAccessToken', 'getDeclaraToken', 'getApplicationId', 'getTaskHandleItem', 'getFormId', 'getMaterials', 'getFormData', 'getFormFieldNames', 'getItemSituationRowUid', 'getWorkNo'];
+    var typeArr = ['getAccessToken', 'getDeclaraToken', 'getApplicationId', 'getTaskHandleItem', 'getFormId', 'getMaterials', 'getFormData', 'getFormFieldNames', 'getItemSituationRowUid', 'getWorkNo', 'getPreviousData'];
     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);
       // TODO: checkSituation2 not available
       // uni.setStorageSync('situationRes', data);
       // checkSituation2(true, 'pc');
     }
   };
   var sendInfoHandle = function sendInfoHandle(type, _data) {
-    var _eventInfoProp$taskGe, _eventInfoProp$taskGe2;
+    var _eventInfo$taskGenera, _eventInfo$taskGenera2;
+    var eventInfo = eventInfoProp;
+    var finalMaterials = finalMaterialsProp;
     var sendData = {
       type: type,
       data: {}
@@ -79,16 +81,14 @@ var Situation = function Situation(_ref) {
         sendData.data.taskHandleItem = taskHandleItemProp;
         break;
       case 'getFormId':
-        if (eventInfoProp !== null && eventInfoProp !== void 0 && (_eventInfoProp$taskGe = eventInfoProp.taskGeneralForms) !== null && _eventInfoProp$taskGe !== void 0 && (_eventInfoProp$taskGe2 = _eventInfoProp$taskGe[0]) !== null && _eventInfoProp$taskGe2 !== void 0 && _eventInfoProp$taskGe2.formId) {
-          sendData.data.formId = eventInfoProp.taskGeneralForms[0].formId;
+        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';
         }
         break;
       case 'getMaterials':
-        // const finalMaterials = uni.getStorageSync('finalMaterials');
-        // const { taskGeneralMaterials } = uni.getStorageSync('eventInfo');
-        // sendData.data.materials = finalMaterials || taskGeneralMaterials;
+        sendData.data.materials = finalMaterials || (eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.taskGeneralMaterials);
         break;
       case 'getFormData':
         // sendData.data.formData = uni.getStorageSync('formData');
@@ -102,6 +102,9 @@ var Situation = function Situation(_ref) {
       case 'getWorkNo':
         // sendData.data.workNo = uni.getStorageSync('workNo');
         break;
+      case 'getPreviousData':
+        sendData.data.previousData = previousDataProp;
+        break;
     }
     var formIframe = document.getElementById('situationIframe');
     if (formIframe !== null && formIframe !== void 0 && formIframe.contentWindow) {
@@ -112,31 +115,32 @@ var Situation = function Situation(_ref) {
     setIsExpend(!isExpend);
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "situation-content"
+    className: "pc-situation-content"
   }, /*#__PURE__*/React.createElement(_guideTitle["default"], {
     title: "\u6750\u6599\u6E05\u5355"
   }), /*#__PURE__*/React.createElement("div", {
-    className: "situation-tip " + (isExpend ? 'isActive' : '')
+    className: "pc-situation-tip " + (isExpend ? 'isActive' : '')
   }, /*#__PURE__*/React.createElement("div", {
-    className: "inner-tip",
+    className: "pc-inner-tip",
     style: {
       backgroundImage: "url(" + _situation["default"] + ")"
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "title-con"
+    className: "pc-title-con"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "title"
+    className: "pc-title"
   }, "\u5BFC\u529E\u60C5\u5F62\u9009\u62E9"), /*#__PURE__*/React.createElement("div", {
-    className: "tip"
+    className: "pc-tip"
   }, tip)), /*#__PURE__*/React.createElement("div", {
-    className: "btn-con",
+    className: "pc-btn-con",
     onClick: expendChange
   }, /*#__PURE__*/React.createElement("span", null, isExpend ? '收起' : '展开'), /*#__PURE__*/React.createElement("div", {
-    className: "icon"
+    className: "pc-icon"
   }, isExpend ? '▲' : '▼')))), isExpend && /*#__PURE__*/React.createElement("div", {
-    className: "situation-inner"
+    className: "pc-situation-inner"
   }, /*#__PURE__*/React.createElement("iframe", {
     id: "situationIframe",
+    src: iframeSrc,
     frameBorder: "0",
     height: "100%",
     width: "100%",

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

@@ -1,7 +1,7 @@
-.situation-content {
+.pc-situation-content {
   background: #ffffff;
 
-  .situation-tip {
+  .pc-situation-tip {
     border: 1px solid #C3DCFF;
     border-radius: 8px;
     margin-top: 20px;
@@ -12,7 +12,7 @@
       border-bottom: none;
     }
 
-    .inner-tip {
+    .pc-inner-tip {
       padding: 24px;
       background-repeat: no-repeat;
       background-size: 104px 70px;
@@ -21,13 +21,13 @@
       justify-content: space-between;
       align-items: center;
 
-      .title-con {
+      .pc-title-con {
         display: flex;
         justify-content: flex-start;
         align-items: center;
         gap: 16px;
 
-        .title {
+        .pc-title {
           background: linear-gradient(96deg, #0047A8 0%, #1678FF 98%);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
@@ -36,13 +36,13 @@
           font-weight: 500;
         }
 
-        .tip {
+        .pc-tip {
           font-size: 14px;
           color: #5C7292;
         }
       }
 
-      .btn-con {
+      .pc-btn-con {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -51,7 +51,7 @@
         cursor: pointer;
         gap: 6px;
 
-        .icon {
+        .pc-icon {
           width: 14px;
           height: 14px;
           border-radius: 50%;
@@ -67,7 +67,7 @@
     }
   }
 
-  .situation-inner {
+  .pc-situation-inner {
     background: linear-gradient(180deg, #F7FAFF 1%, #F7FAFF 100%);
     border-radius: 0 0 8px 8px;
     border: 1px solid #C3DCFF;

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

@@ -3,9 +3,6 @@ import './index.scss';
 export interface GuidePcProps {
     /** Called when user clicks "立即办理" or "上一步" */
     onNextStep?: (action: string) => void;
-    /** Whether to disable the prev/next buttons */
-    cantNext?: boolean;
-    hasPrevious?: boolean;
     /** Task handle item code */
     taskHandleItem?: string;
     /** Access token */
@@ -32,6 +29,7 @@ export interface GuidePcProps {
     situationResRechange?: (data: any) => void;
     /** Previous form data from parent */
     previousData?: object;
+    style?: object;
 }
 declare const GuidePc: React.FC<GuidePcProps>;
 export default GuidePc;

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

@@ -4,7 +4,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
 var _dialog = _interopRequireDefault(require("@alifd/next/lib/dialog"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _message = _interopRequireDefault(require("@alifd/next/lib/message"));
@@ -17,9 +16,7 @@ var _processImg = _interopRequireDefault(require("./components/processImg"));
 var _accept = _interopRequireDefault(require("./components/accept"));
 var _places = _interopRequireDefault(require("./components/places"));
 var _result = _interopRequireDefault(require("./components/result"));
-var _comment = _interopRequireDefault(require("../guide/imgs/comment.png"));
-var _share = _interopRequireDefault(require("../guide/imgs/share.png"));
-var _download = _interopRequireDefault(require("../guide/imgs/download.png"));
+var _eventInfo = _interopRequireDefault(require("./components/eventInfo"));
 require("./index.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: API imports not available
@@ -45,12 +42,7 @@ var tabSections = [{
   label: '成效分析'
 }];
 var GuidePc = function GuidePc(_ref) {
-  var _eventInfoProp$taskGe;
   var onNextStep = _ref.onNextStep,
-    _ref$cantNext = _ref.cantNext,
-    cantNext = _ref$cantNext === void 0 ? false : _ref$cantNext,
-    _ref$hasPrevious = _ref.hasPrevious,
-    hasPrevious = _ref$hasPrevious === void 0 ? false : _ref$hasPrevious,
     taskHandleItem = _ref.taskHandleItem,
     accessToken = _ref.accessToken,
     eventInfoProp = _ref.eventInfo,
@@ -63,7 +55,8 @@ var GuidePc = function GuidePc(_ref) {
     baseUrl = _ref.baseUrl,
     download = _ref.download,
     situationResRechange = _ref.situationResRechange,
-    previousData = _ref.previousData;
+    previousData = _ref.previousData,
+    style = _ref.style;
   var _React$useState = React.useState(0),
     tabIndex = _React$useState[0],
     setTabIndex = _React$useState[1];
@@ -276,29 +269,36 @@ var GuidePc = function GuidePc(_ref) {
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: "guidePc-wrapper"
+    className: "pc-guidePc-wrapper",
+    style: style
   }, !canHandle && /*#__PURE__*/React.createElement("div", {
-    className: "guide-empty"
+    className: "pc-guide-empty"
   }, "\u6682\u672A\u67E5\u8BE2\u5230\u76F8\u5173\u4E8B\u9879"), canHandle && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "guidePc-main"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "guidePc-content"
+    className: "pc-guidePc-main"
+  }, /*#__PURE__*/React.createElement(_eventInfo["default"], {
+    eventInfo: eventInfoProp
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "pc-guidePc-content"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "stity"
+    className: "pc-stity"
   }, /*#__PURE__*/React.createElement(_guideTabs["default"], {
     curTab: tabIndex,
     onTabsChange: changeTab
   })), /*#__PURE__*/React.createElement("div", {
-    className: "gap"
+    className: "pc-gap"
   }), /*#__PURE__*/React.createElement("div", {
     id: "section-materials"
-  }, (eventInfoProp === null || eventInfoProp === void 0 ? void 0 : (_eventInfoProp$taskGe = eventInfoProp.taskGeneralExtend) === null || _eventInfoProp$taskGe === void 0 ? void 0 : _eventInfoProp$taskGe.programProcess) && /*#__PURE__*/React.createElement(_situation["default"], {
+  }, situationPageUrl && /*#__PURE__*/React.createElement(_situation["default"], {
     eventInfo: eventInfoProp,
     applicationId: applicationId,
     accessToken: accessToken,
     acctType: acctType,
+    finalMaterials: finalMaterials,
     declarationAppToken: declarationAppToken,
-    taskHandleItem: taskHandleItem
+    situationPageUrl: situationPageUrl,
+    taskHandleItem: taskHandleItem,
+    situationResRechange: situationResRechange,
+    previousData: previousData
   }), /*#__PURE__*/React.createElement(_materialsList["default"], {
     eventInfo: eventInfoProp,
     finalMaterials: finalMaterials,
@@ -307,101 +307,54 @@ var GuidePc = function GuidePc(_ref) {
     download: download
   })), /*#__PURE__*/React.createElement("div", {
     id: "section-basicInfo",
-    className: "content-section"
+    className: "pc-content-section"
   }, /*#__PURE__*/React.createElement(_basicInfo["default"], {
     eventInfo: eventInfoProp
   })), /*#__PURE__*/React.createElement("div", {
     id: "section-process",
-    className: "content-section"
+    className: "pc-content-section"
   }, /*#__PURE__*/React.createElement(_processImg["default"], {
     eventInfo: eventInfoProp,
     baseUrl: baseUrl,
     declarationAppToken: declarationAppToken
   })), /*#__PURE__*/React.createElement("div", {
     id: "section-accept",
-    className: "content-section"
+    className: "pc-content-section"
   }, /*#__PURE__*/React.createElement(_accept["default"], {
     eventInfo: eventInfoProp
   })), /*#__PURE__*/React.createElement("div", {
     id: "section-places",
-    className: "content-section"
+    className: "pc-content-section"
   }, /*#__PURE__*/React.createElement(_places["default"], {
     eventInfo: eventInfoProp
   })), /*#__PURE__*/React.createElement("div", {
     id: "section-result",
-    className: "content-section"
+    className: "pc-content-section"
   }, /*#__PURE__*/React.createElement(_result["default"], {
     eventInfo: eventInfoProp
   })))), /*#__PURE__*/React.createElement("div", {
-    className: "guidePc-bottom"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "bottom-inner"
-  }, userAgreementList.length > 0 && /*#__PURE__*/React.createElement("div", {
-    className: "agreement-row"
-  }, /*#__PURE__*/React.createElement("label", {
-    className: "agreement-checkbox"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    checked: isAgree,
-    onChange: function onChange(e) {
-      return setIsAgree(e.target.checked);
-    }
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "agreement-label-text"
-  }, agreementPrompt)), /*#__PURE__*/React.createElement("div", {
-    className: "agreement-tip-slot"
-  }, userAgreementList.map(function (item, index) {
-    return /*#__PURE__*/React.createElement("span", {
-      key: index,
-      className: "agreement-item",
-      onClick: function onClick() {
-        return showAgree(item);
-      }
-    }, "\u300A", item.agreementName, "\u300B");
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "action-row"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "left-actions"
+    className: "pc-guidePc-bottom"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "action-btn",
+    className: "pc-action-btn",
     onClick: goComment
-  }, /*#__PURE__*/React.createElement("img", {
-    className: "btn-icon",
-    src: _comment["default"],
-    alt: "\u8BC4\u4EF7"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "name"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "pc-name"
   }, "\u8BC4\u4EF7\u6307\u5357")), /*#__PURE__*/React.createElement("div", {
-    className: "action-btn",
+    className: "pc-action-btn",
     onClick: goShare
-  }, /*#__PURE__*/React.createElement("img", {
-    className: "btn-icon",
-    src: _share["default"],
-    alt: "\u5206\u4EAB"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "name"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "pc-name"
   }, "\u5206\u4EAB")), /*#__PURE__*/React.createElement("div", {
-    className: "action-btn",
+    className: "pc-action-btn",
     onClick: goDownload
-  }, /*#__PURE__*/React.createElement("img", {
-    className: "btn-icon",
-    src: _download["default"],
-    alt: "\u4E0B\u8F7D"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "name"
-  }, "\u4E0B\u8F7D"))), /*#__PURE__*/React.createElement("div", {
-    className: "right-actions"
-  }, hasPrevious && /*#__PURE__*/React.createElement(_button["default"], {
-    className: "prev-btn",
-    onClick: prepStep,
-    disabled: cantNext
-  }, "\u4E0A\u4E00\u6B65"), /*#__PURE__*/React.createElement(_button["default"], {
-    type: "primary",
-    className: "next-btn",
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "pc-name"
+  }, "\u4E0B\u8F7D")), /*#__PURE__*/React.createElement("div", {
+    className: "pc-next-btn",
     disabled: !canHandle,
     onClick: handleEvent
-  }, "\u7ACB\u5373\u529E\u7406"))))), showGoUp && /*#__PURE__*/React.createElement("div", {
-    className: "go-up-btn",
+  }, "\u7ACB\u5373\u529E\u7406")), showGoUp && /*#__PURE__*/React.createElement("div", {
+    className: "pc-go-up-btn",
     onClick: goUp
   }, "\u25B2 \u9876\u90E8")), /*#__PURE__*/React.createElement(_dialog["default"], {
     visible: popShow,
@@ -411,7 +364,7 @@ var GuidePc = function GuidePc(_ref) {
     footer: false,
     width: "90%"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "agree-detail",
+    className: "pc-agree-detail",
     dangerouslySetInnerHTML: {
       __html: userAgreement
     }
@@ -430,11 +383,11 @@ var GuidePc = function GuidePc(_ref) {
       return setModalShow(false);
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "agree"
+    className: "pc-agree"
   }, agreementPrompt, userAgreementList.map(function (item, index) {
     return /*#__PURE__*/React.createElement("span", {
       key: index,
-      className: "agreement-sub-item",
+      className: "pc-agreement-sub-item",
       onClick: function onClick() {
         return showAgree(item);
       }

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

@@ -1,9 +1,9 @@
-.guidePc-wrapper {
-  min-height: 100vh;
+.pc-guidePc-wrapper {
   background: #ffffff;
-  position: relative;
+  display: flex;
+  flex-direction: column;
 
-  .guide-empty {
+  .pc-guide-empty {
     text-align: center;
     padding: 100px 0;
     font-size: 16px;
@@ -11,130 +11,70 @@
   }
 }
 
-.guidePc-main {
-  max-width: 1200px;
-  margin: 0 auto;
-  min-height: 80vh;
+.pc-guidePc-main {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 /* ============ Sticky Top Tabs ============ */
-.stity {
+.pc-stity {
   position: sticky;
   top: 0;
   z-index: 9;
   background: #ffffff;
 }
 
-.gap {
+.pc-gap {
   height: 24px;
 }
 
 /* ============ Content Area ============ */
-.guidePc-content {
-  .content-section {
+.pc-guidePc-content {
+  .pc-content-section {
     margin-top: 24px;
   }
 }
 
 /* ============ Bottom Action Bar ============ */
-.guidePc-bottom {
+.pc-guidePc-bottom {
+  flex-shrink: 0;
   border-top: 1px solid #e8e8e8;
   background: #ffffff;
-  padding: 16px 0;
-
-  .bottom-inner {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-
-  .agreement-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 16px;
-    padding: 0 16px;
-
-    .agreement-checkbox {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      cursor: pointer;
-      font-size: 14px;
-      color: #333;
-
-      input[type="checkbox"] {
-        width: 16px;
-        height: 16px;
-        cursor: pointer;
-      }
-    }
+  padding: 16px 24px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
 
-    .agreement-item {
-      color: #1678FF;
-      cursor: pointer;
-      font-size: 14px;
-      margin-left: 4px;
 
-      &:hover {
-        text-decoration: underline;
-      }
-    }
+  .pc-next-btn {
+    width: 96px;
+    height: 40px;
+    border-radius: 4px;
+    opacity: 1;
+    text-align: center;
+    font-size: 14px;
+    line-height: 40px;
+    background: #1678FF;
+    color: #ffffff;
   }
 
-  .action-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 16px;
-
-    .left-actions {
-      display: flex;
-      gap: 24px;
-
-      .action-btn {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        cursor: pointer;
-        color: #666666;
-        font-size: 14px;
-        padding: 6px 12px;
-        border-radius: 6px;
-        transition: all 0.2s;
-
-        &:hover {
-          background: #f0f5ff;
-          color: #1678FF;
-        }
-
-        .btn-icon {
-          width: 18px;
-          height: 18px;
-        }
-      }
-    }
-
-    .right-actions {
-      display: flex;
-      gap: 12px;
-
-      .prev-btn {
-        border-color: #d9d9d9;
-        color: #333;
-      }
-
-      .next-btn {
-        background: linear-gradient(90deg, #1678FF, #76ADFA);
-        border: none;
-        color: #ffffff;
-        font-weight: 500;
-      }
-    }
+  .pc-action-btn {
+    width: 88px;
+    height: 40px;
+    border-radius: 4px;
+    opacity: 1;
+    text-align: center;
+    font-size: 14px;
+    line-height: 40px;
+    background: #F7F8FA;
+    color: #222222;
+    font-size: 14px;
   }
 }
 
 /* ============ Scroll-to-top Button ============ */
-.go-up-btn {
+.pc-go-up-btn {
   position: fixed;
   bottom: 120px;
   right: 40px;
@@ -160,7 +100,7 @@
 }
 
 /* ============ Agreement Modals ============ */
-.agree-detail {
+.pc-agree-detail {
   max-height: 70vh;
   overflow-y: auto;
   padding: 16px;
@@ -168,12 +108,12 @@
   line-height: 1.6;
 }
 
-.agree {
+.pc-agree {
   font-size: 14px;
   line-height: 1.6;
   color: #333;
 
-  .agreement-sub-item {
+  .pc-agreement-sub-item {
     color: #1678FF;
     cursor: pointer;
     margin-left: 4px;