个人中心的修改

package-lock.json

@@ -83,6 +83,7 @@
         "react-dom": "^17.0.1",
         "react-froala-wysiwyg": "^4.0.15",
         "react-grid-layout": "^1.3.4",
+        "react-infinite-scroll-component": "^6.1.0",
         "react-infinite-scroller": "^1.2.6",
         "react-json-view": "^1.21.3",
         "react-masonry-css": "^1.0.16",
@@ -16881,6 +16882,25 @@
         "node": ">=6"
       }
     },
+    "node_modules/react-infinite-scroll-component": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz",
+      "integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==",
+      "dependencies": {
+        "throttle-debounce": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0"
+      }
+    },
+    "node_modules/react-infinite-scroll-component/node_modules/throttle-debounce": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/react-infinite-scroller": {
       "version": "1.2.6",
       "license": "MIT",
@@ -30645,6 +30665,21 @@
         }
       }
     },
+    "react-infinite-scroll-component": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz",
+      "integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==",
+      "requires": {
+        "throttle-debounce": "^2.1.0"
+      },
+      "dependencies": {
+        "throttle-debounce": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+          "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ=="
+        }
+      }
+    },
     "react-infinite-scroller": {
       "version": "1.2.6",
       "requires": {

package.json

@@ -77,6 +77,7 @@
     "react-dom": "^17.0.1",
     "react-froala-wysiwyg": "^4.0.15",
     "react-grid-layout": "^1.3.4",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-infinite-scroller": "^1.2.6",
     "react-json-view": "^1.21.3",
     "react-masonry-css": "^1.0.16",

src/Activity/components/ActivityCard.tsx

@@ -13,6 +13,7 @@ import ActivityBtnComponent, { IStateStringType } from './ActivityBtn.component'
 import { INewPermissionType } from 'Material/components/NoPermission'
 import { INewestItem } from 'Newest/Newest.service'
 import { IMyActivityItem } from 'Personal/Personal.service'
+import YiDongModel from 'Material/components/YiDongModel'
 import styles from '../css/ActivityCard.module.scss'
 
 export interface IActivityCard {
@@ -64,6 +65,7 @@ const ActivityCard: React.FC<IActivityCard> = props => {
     }
   })
   const handleToDetail = (item: IActivityTypeListItem | IActivitySpecialListItem | INewestItem | IMyActivityItem) => {
+    // todo 易懂活动，无研选权限需要购买畅读卡
     if (
       item?.AuthInfo?.HasPermission &&
       item?.AuthInfo?.HasPermission !== INewPermissionType.OK &&
@@ -188,7 +190,7 @@ const ActivityCard: React.FC<IActivityCard> = props => {
       {btnGrous === 'smcard' && (
         <div
           className={`${styles['one-act-wrapper']} ${styles['newest-activity-wrapper']} ${className ? className : ''}`}
-          style={{ border: hasBorder ? '1px solid #EBEBEB' : 'none' }}
+          style={{ border: hasBorder ? '1px solid #DEE4EE' : 'none' }}
           onClick={handleToDetail.bind(this, item)}
         >
           <div className="newest-activity-title">

src/Activity/css/ActivityCard.module.scss

@@ -1,7 +1,6 @@
 .one-act-wrapper {
   border-radius: 8px;
   padding: 0 20px 10px 20px;
-  margin-bottom: 20px;
   background: #fff;
   cursor: pointer;
   &:hover {

src/Community/AuthorInfo.tsx

@@ -154,7 +154,7 @@ const AuthorInfo: React.FC<IAuthorInfoProps> = props => {
                   <ArticleCard
                     key={item.ArticleId}
                     articleItem={item}
-                    className="i-article-white-bg"
+                    className="i-article-white-bg m-b-md"
                     jumpType="theme"
                     onCollect={refresh}
                   />

src/Community/ThemeInfo.tsx

@@ -134,7 +134,7 @@ const ThemeInfo: React.FC<IThemeInfoProps> = props => {
                     articleItem={item}
                     afterShow={'subject'}
                     onCollect={refresh}
-                    className="i-article-white-bg"
+                    className="i-article-white-bg m-b-md"
                   />
                 )}
               />

src/Indepth/css/ArticleCard.module.scss

@@ -1,7 +1,7 @@
 .article-card-wrapper {
   display: flex;
   padding: 20px;
-  margin-bottom: 20px;
+  // margin-bottom: 20px;
   background: #ffffff;
   border: 1px solid #ebebeb;
   border-radius: 8px;

src/Material/components/YiDongModel.tsx

@@ -32,13 +32,6 @@ const YiDongModel: React.FC<IYiDongModelProps> = props => {
   const [loading, setLoading] = useState(false)
   const [imageUrl, setImageUrl] = useState<string>()
 
-  const uploadButton = (
-    <div>
-      {loading ? <LoadingOutlined /> : <PlusOutlined />}
-      <div style={{ marginTop: 8 }}>上传名片</div>
-    </div>
-  )
-
   const { run } = useRequest(MaterialService.postApplyTry, {
     manual: true,
     onSuccess: res => {
@@ -47,60 +40,6 @@ const YiDongModel: React.FC<IYiDongModelProps> = props => {
       setImageUrl(undefined)
     }
   })
-  const { run: uploadImg } = useRequest(MaterialService.postUploadImage, {
-    manual: true,
-    onSuccess: res => {
-      message.info(res.data.Msg)
-      setImageUrl(res.data?.Data?.ResourceUrl)
-      setLoading(false)
-    }
-  })
-  useEffect(() => {
-    return () => {
-      form.resetFields()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [form])
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleFinish = (value: any) => {
-    if (!imageUrl) {
-      message.error('请上传名片')
-      return
-    }
-    // 上传名片时，ApplyMethod为2，否则为1
-    run({
-      ApplyMethod: 2,
-      BusinessCardUrl: imageUrl,
-      CompanyName: value.CompanyName,
-      DetailId: detailID,
-      RealName: value.RealName,
-      TryType: tryType
-    })
-  }
-  const uploadProps: UploadProps = {
-    name: 'file',
-    multiple: false,
-    listType: 'picture-card',
-    showUploadList: false,
-    withCredentials: true,
-    customRequest: option => {
-      uploadImg(option.file)
-    },
-    onChange: (info: UploadChangeParam<UploadFile>) => {
-      if (info.file.status === 'uploading') {
-        setLoading(true)
-        return
-      }
-    }
-  }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const normFile = (e: any) => {
-    if (Array.isArray(e)) {
-      return e
-    }
-    return e && e.fileList
-  }
   const handleToClose = () => {
     // 关闭前把名片给清除了
     setImageUrl(undefined)

src/Personal/Personal.service.ts

@@ -141,11 +141,24 @@ export interface IProductInteriorDetail {
   IsShow: boolean // 是否展示
 }
 export interface IBodySlice {
-  ChartPermissionId: 0 //行业id
-  SourceId: 0 //资源ID
-  Type: 1 //类型：1普通文本，2：文章、3：活动、4：产业
+  ChartPermissionId: number //行业id
+  SourceId: number //资源ID
+  Type: number //类型：1普通文本，2：文章、3：活动、4：产业
   Body: string //内容
 }
+export interface IOrderListItem {
+  CreateTime: string //创建时间
+  EndDate: string //结束日期
+  LabelKeywordImgLink: string //标签关键词ico
+  OrderCode: string //订单编号
+  OrderMoney: number //订单总价
+  OrderStatus: number //订单状态,0:已取消、1:待支付、2:已支付、3:退款成功、4：退款处理中、5：退款异常、6：退款关闭
+  OrderStatusText: string //订单状态描述
+  Source: string //来源\n报告 ：article\n活动 ：activity
+  SourceId: number //文章ID
+  SourceTitle: string //来源名称，活动或者报告标题
+  StartDate: string //开始日期
+}
 
 export const PersonalService = {
   getMyActivityList: (
@@ -224,6 +237,16 @@ export const PersonalService = {
       url: `/config/aboutUs`,
       method: 'get'
     }),
+  getOrderList: (
+    PageSize: number,
+    CurrentIndex: number,
+    OrderType: number
+  ): INewResponse<{ List: IOrderListItem[]; Paging: IPaging }> =>
+    NewAxiosInstanceFunc({
+      url: `/order/user/orderList`,
+      method: 'get',
+      params: { PageSize, CurrentIndex, OrderType } // 订单类型 1：畅读卡订单，2：单场付费订单
+    }),
 
   // getActivityPermissionList: (): INewResponse<{ List: IPermissionItem[]; CheckList: number[] }> =>
   //   NewAxiosInstanceFunc({

src/Personal/PersonalIndex.tsx

@@ -7,10 +7,13 @@ import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface'
 
 import { default as EditSvg } from 'assets/edit.svg'
 import { default as CameraSvg } from 'assets/camera.svg'
+import VipDay from 'assets/vipday.png'
+import VipMonth from 'assets/vipmonth.png'
 
 import ValidateLogin2p from 'components/ValidateLogin2p'
 import { useLogin2p } from 'Login2p/Login2pContext'
 import ActivityComponent from './components/Activity.component'
+import OrderComponent from './components/Order.component'
 import CollectionComponent from './components/Collection.component'
 import FootPrintComponent from './components/FootPrint.component'
 import CommentComponent from './components/Comment.component'
@@ -30,7 +33,8 @@ enum IMyMenuType {
   Comment = 4,
   Question = 5,
   ProductInterior = 6,
-  Advise = 7
+  Advise = 7,
+  Order = 8
 }
 
 const beforeUpload = (file: RcFile) => {
@@ -48,11 +52,12 @@ const beforeUpload = (file: RcFile) => {
 /**个人中心 */
 const PersonalIndex: React.FC = () => {
   const login2p = useLogin2p()
-  const [actMenu, setActMenu] = useState<number>(IMyMenuType.Schedule)
+  const [actMenu, setActMenu] = useState<number>(IMyMenuType.Order)
   const [visibleApply, setVisibleApply] = useState(false)
 
   const [menuOption, setMenuOption] = useState<{ key: IMyMenuType; name: string }[]>([
     { key: IMyMenuType.Schedule, name: '活动日程' },
+    { key: IMyMenuType.Order, name: '支付订单' },
     { key: IMyMenuType.Collection, name: '我的收藏' },
     { key: IMyMenuType.Footprint, name: '我的足迹' },
     { key: IMyMenuType.Question, name: '活动提问' },
@@ -162,7 +167,7 @@ const PersonalIndex: React.FC = () => {
   }
 
   return (
-    <div className={`page-max-width ${styles['personal-page']}`}>
+    <div className={`${styles['personal-page']}`}>
       <ValidateLogin2p>
         <div className="personal-left-wrapper">
           <div className="personal-head">
@@ -218,7 +223,10 @@ const PersonalIndex: React.FC = () => {
               <img src={EditSvg} alt="图标" className="edit-icon" />
             </span>
           </div>
-
+          <div className="vip-card-wrapper">
+            <img src={VipDay} alt="vip" className="vip-card-img" />
+            <span className="vip-timetext">有效期至2024.03.03 12:12:12</span>
+          </div>
           <div className="personal-menu-wrapper">
             {menuOption.map(item => (
               <div
@@ -231,9 +239,10 @@ const PersonalIndex: React.FC = () => {
             ))}
           </div>
         </div>
-        <div className="personal-right-wrapper">
+        <div className="personal-right-wrapper" id="scrollableDiv">
           <div className="personal-component-wrapper">
             {actMenu === IMyMenuType.Schedule && <ActivityComponent />}
+            {actMenu === IMyMenuType.Order && <OrderComponent />}
             {actMenu === IMyMenuType.Collection && <CollectionComponent />}
             {actMenu === IMyMenuType.Footprint && <FootPrintComponent />}
             {actMenu === IMyMenuType.Comment && <CommentComponent />}

src/Personal/components/Activity.component.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import useRequest from '@ahooksjs/use-request/es'
-import InfiniteScroll from 'react-infinite-scroller'
+import InfiniteScroll from 'react-infinite-scroll-component'
 
 import { List, message, Modal, Spin } from 'antd'
 
@@ -78,9 +78,15 @@ const ActivityComponent: React.FC = () => {
   return (
     <Spin spinning={listLoading}>
       <AudioFix audioDetail={audioItem as IAudioDetail} visible={audioVisible} onClose={handleCloseAudio} />
-      <InfiniteScroll initialLoad={false} pageStart={0} loadMore={handleGetMore} hasMore={hasMore} useWindow>
+      <InfiniteScroll
+        dataLength={listData?.length || 0}
+        next={handleGetMore}
+        hasMore={hasMore}
+        loader={null}
+        scrollableTarget="scrollableDiv"
+      >
         <List
-          grid={{ gutter: 24, xs: 1, sm: 1, md: 1, lg: 2, xl: 2, xxl: 3 }}
+          grid={{ gutter: 10, xs: 1, sm: 1, md: 1, lg: 2, xl: 2, xxl: 3 }}
           className={styles['my-activity-wrapper']}
           dataSource={listData || []}
           renderItem={(item: IMyActivityItem, index) => (
@@ -96,6 +102,7 @@ const ActivityComponent: React.FC = () => {
                   className={styles['my-activity-box']}
                   btnGrous="smcard"
                   selfChange={true}
+                  hasBorder={true}
                   onOpenVideoOrAudio={handleOpenVideoOrAudio}
                 />
               ) : (

src/Personal/components/Collection.component.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import useRequest from '@ahooksjs/use-request/es'
-import InfiniteScroll from 'react-infinite-scroller'
+import InfiniteScroll from 'react-infinite-scroll-component'
 
 import { List, Spin } from 'antd'
 
@@ -41,6 +41,7 @@ const CollectionComponent: React.FC = () => {
   }
 
   const handleGetMore = () => {
+    console.log(listLoading, hasMore)
     if (listLoading || !hasMore) return
     setCurrentPage(currentPage + 1)
     run(pageSize, currentPage + 1)
@@ -48,9 +49,14 @@ const CollectionComponent: React.FC = () => {
   return (
     <Spin spinning={listLoading}>
       <div className={`${styles['collection-wrapper']}`}>
-        <InfiniteScroll initialLoad={false} pageStart={0} loadMore={handleGetMore} hasMore={hasMore} useWindow>
+        <InfiniteScroll
+          dataLength={listData?.length || 0}
+          next={handleGetMore}
+          hasMore={hasMore}
+          loader={null}
+          scrollableTarget="scrollableDiv"
+        >
           <List
-            className="padding-b-md"
             dataSource={listData || []}
             renderItem={(item: IMyCollectionItem) => (
               <ArticleCard
@@ -58,6 +64,7 @@ const CollectionComponent: React.FC = () => {
                 articleItem={item}
                 jumpType="theme"
                 sizeType="smcard"
+                className="m-b-sm"
                 onCollect={handleCancelCollection}
               />
             )}

src/Personal/components/Comment.component.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import useRequest from '@ahooksjs/use-request/es'
-import InfiniteScroll from 'react-infinite-scroller'
+import InfiniteScroll from 'react-infinite-scroll-component'
 
 import { List, Spin } from 'antd'
 
@@ -61,9 +61,14 @@ const CommentComponent: React.FC = () => {
   return (
     <Spin spinning={listLoading}>
       <div className={`${styles['collection-wrapper']}`}>
-        <InfiniteScroll initialLoad={false} pageStart={0} loadMore={handleGetMore} hasMore={hasMore} useWindow>
+        <InfiniteScroll
+          dataLength={listData?.length || 0}
+          next={handleGetMore}
+          hasMore={hasMore}
+          loader={null}
+          scrollableTarget="scrollableDiv"
+        >
           <List
-            className="padding-b-md"
             dataSource={listData || []}
             renderItem={(item: IMyCommentItem) => (
               <div className={`${styles['my-message-item']} `}>

src/Personal/components/FootPrint.component.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import useRequest from '@ahooksjs/use-request/es'
-import InfiniteScroll from 'react-infinite-scroller'
+import InfiniteScroll from 'react-infinite-scroll-component'
 
 import { List, Spin } from 'antd'
 
@@ -50,9 +50,14 @@ const FootPrintComponent: React.FC = () => {
   return (
     <Spin spinning={listLoading}>
       <div className={`${styles['collection-wrapper']}`}>
-        <InfiniteScroll initialLoad={false} pageStart={0} loadMore={handleGetMore} hasMore={hasMore} useWindow>
+        <InfiniteScroll
+          dataLength={listData?.length || 0}
+          next={handleGetMore}
+          hasMore={hasMore}
+          loader={null}
+          scrollableTarget="scrollableDiv"
+        >
           <List
-            className="padding-b-md"
             dataSource={listData || []}
             renderItem={(item: IMyCollectionItem, index) => (
               <ArticleCard
@@ -60,6 +65,7 @@ const FootPrintComponent: React.FC = () => {
                 articleItem={item}
                 jumpType="theme"
                 sizeType="smcard"
+                className="m-b-sm"
                 onCollect={handleCancelCollection}
               />
             )}

src/Personal/components/Order.component.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from 'react'
+import useRequest from '@ahooksjs/use-request/es'
+import InfiniteScroll from 'react-infinite-scroll-component'
+
+import { List, Spin } from 'antd'
+
+import { IMyCollectionItem, IOrderListItem, PersonalService } from 'Personal/Personal.service'
+import ArticleCard from 'Indepth/components/ArticleCard'
+import styles from '../css/PersonalIndex.module.scss'
+
+/**支付订单 */
+const OrderComponent: React.FC = () => {
+  const pageSize = 10
+  const [currentPage, setCurrentPage] = useState<number>(1)
+  const [hasMore, setHasMore] = useState<boolean>(false) // 列表加载更多
+  const [listData, setListData] = useState<IOrderListItem[]>([])
+  const [orderType, setOrderType] = useState<number>(1) // 订单类型 1：畅读卡订单，2：单场付费订单
+
+  // 报告
+  const { loading: listLoading, run: getOrderList } = useRequest(PersonalService.getOrderList, {
+    manual: true,
+    formatResult: response => response.data.Data,
+    onSuccess: res => {
+      setListData([...listData, ...(res?.List || [])])
+      setHasMore(res ? !res?.Paging?.IsEnd : false)
+    }
+  })
+
+  useEffect(() => {
+    setListData([])
+    getOrderList(pageSize, currentPage, orderType)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // 切换tab
+  const handleCancelCollection = (articleID: number) => {
+    // const findIndex = listData.findIndex(item => item.ArticleId === articleID)
+    // if (findIndex === -1) return
+    // const newList = JSON.parse(JSON.stringify(listData))
+    // newList.splice(findIndex, 1)
+    // setListData(newList)
+  }
+
+  const handleGetMore = () => {
+    console.log(listLoading, hasMore)
+    if (listLoading || !hasMore) return
+    setCurrentPage(currentPage + 1)
+    getOrderList(pageSize, currentPage + 1, orderType)
+  }
+  const orderTypeList = [
+    { key: 1, value: '畅读卡订单' },
+    { key: 2, value: '单场付费订单' }
+  ]
+  const handleChangeOrderType = (type: number) => {
+    setOrderType(type)
+    setListData([])
+    setCurrentPage(1)
+    getOrderList(pageSize, 1, type)
+  }
+  const handleToDetail = (item: IOrderListItem) => {
+    // todo
+  }
+  return (
+    <Spin spinning={listLoading}>
+      <div className={`${styles['collection-wrapper']}`}>
+        <div className={styles['order-tab-wrapper']}>
+          {orderTypeList.map(item => (
+            <div
+              key={item.key}
+              className={`order-tab-item ${orderType === item.key ? 'order-tab-act' : ''}`}
+              onClick={handleChangeOrderType.bind(this, item.key)}
+            >
+              {item.value}
+            </div>
+          ))}
+        </div>
+        <InfiniteScroll
+          dataLength={listData?.length || 0}
+          next={handleGetMore}
+          hasMore={hasMore}
+          loader={null}
+          scrollableTarget="scrollableDiv"
+        >
+          <List
+            dataSource={listData || []}
+            renderItem={(item: IOrderListItem) => (
+              <div className={styles['order-list-item']}>
+                <div className="order-item-title g-flex g-flex-between g-flex-v-center">
+                  <div className="order-name">
+                    {orderType === 1 ? (
+                      '畅读卡'
+                    ) : (
+                      <img src={item.LabelKeywordImgLink} alt="图标" className="order-name-img" />
+                    )}
+                  </div>
+                  <div className="order-status">{item.OrderStatusText}</div>
+                </div>
+                <div
+                  className={`order-content ${orderType === 2 ? 'order-buy-title' : ''}`}
+                  onClick={handleToDetail.bind(this, item)}
+                >
+                  {orderType === 1 ? `有效期：${item.StartDate}~${item.EndDate}` : item.SourceTitle}
+                </div>
+                <div className="order-bottom-line g-flex g-flex-between g-flex-v-center">
+                  <div className="order-price">¥{item.OrderMoney}</div>
+                  <div className="order-paytime">{item.CreateTime}</div>
+                </div>
+              </div>
+            )}
+          />
+        </InfiniteScroll>
+      </div>
+    </Spin>
+  )
+}
+
+export default OrderComponent

src/Personal/components/ProductInterior.component.tsx

@@ -41,7 +41,6 @@ const ProductInteriorComponent: React.FC = () => {
     <Spin spinning={loading}>
       <div className={`personal-box-wrapper ${styles['collection-wrapper']}`}>
         <List
-          className="padding-b-md"
           dataSource={data?.List || []}
           renderItem={(item: IProductInteriorItem, index) => (
             <div

src/Personal/components/Question.component.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import useRequest from '@ahooksjs/use-request/es'
-import InfiniteScroll from 'react-infinite-scroller'
+import InfiniteScroll from 'react-infinite-scroll-component'
 
 import { List, Spin } from 'antd'
 
@@ -56,7 +56,13 @@ const QuestionComponent: React.FC = () => {
   return (
     <Spin spinning={listLoading}>
       <div className={`${styles['collection-wrapper']}`}>
-        <InfiniteScroll initialLoad={false} pageStart={0} loadMore={handleGetMore} hasMore={hasMore} useWindow>
+        <InfiniteScroll
+          dataLength={listData?.length || 0}
+          next={handleGetMore}
+          hasMore={hasMore}
+          loader={null}
+          scrollableTarget="scrollableDiv"
+        >
           <List
             className="padding-b-md"
             dataSource={listData || []}

src/Personal/css/PersonalIndex.module.scss

@@ -2,7 +2,12 @@
   color: #333333;
   display: flex;
   align-items: flex-start;
-  padding-top: 16px;
+  box-shadow: 0px 2px 11px 0px #0000001A;
+  border-radius: 16px;
+  max-width: 1650px;
+  height: 909px;
+  margin: 0 auto;
+  overflow: hidden;  
   :global {
     .personal-box-wrapper {
       box-sizing: border-box;
@@ -10,20 +15,15 @@
       border-radius: 8px;
     }
     .personal-left-wrapper {
-      width: 283px;
-      padding: 20px 40px;
-      margin-right: 30px;
+      width: 299px;
       box-sizing: border-box;
-      background: #ffffff;
-      position: -webkit-sticky;
-      position: sticky;
-      top: 90px;
-      // z-index: 100;
+      padding-bottom: 45px;
+      border: 1px solid red;
       .personal-head {
         width: 120px;
         height: 120px;
         border-radius: 50%;
-        margin-bottom: 13px;
+        margin: 20px auto 13px auto;
         overflow: hidden;
         cursor: pointer;
         position: relative;
@@ -52,6 +52,7 @@
         padding-top: 25px;
       }
       .person-content {
+        text-align: center;
         .person-name {
           font-size: 24px;
           font-weight: bold;
@@ -67,7 +68,7 @@
       }
       .person-power-wraper {
         line-height: 14px;
-        margin-top: 30px;
+        margin-top: 13px;
         color: #999999;
         .person-haspower {
           display: flex;
@@ -103,8 +104,9 @@
         }
       }
       .personal-phone-line {
-        margin: 30px 0;
+        margin: 20px 0;
         line-height: 20px;
+        text-align: center;
         .phone-label {
           margin-right: 20px;
         }
@@ -118,31 +120,57 @@
           height: 16px;
         }
       }
+      .vip-card-wrapper{
+        width: 222px;
+        height: 87px;
+        margin: 0 auto;
+        position: relative;
+        .vip-card-img{
+          width: 100%;
+          height: 100%;
+        }
+        .vip-timetext{
+          color:#F1A84A;
+          position: absolute;
+          bottom: 15px;
+          left: 18px;
+        }
+      }
       .personal-menu-wrapper {
+        margin-top: 25px;
         .personal-menu-item {
-          padding: 10px 20px;
-          border-radius: 4px;
+          padding: 15px 20px;
           font-size: 18px;
-          line-height: 25px;
-          background: #f6f6f6;
-          margin-bottom: 30px;
-          cursor: pointer;
-          &:last-child {
-            margin-bottom: 0;
-          }
+          cursor: pointer;          
           &:hover {
-            background: #faa12f;
-            color: #ffffff;
+            background: #ffffff;
+            color: #F1A84A;
           }
         }
         .personal-act-menu {
-          background: #faa12f;
-          color: #ffffff;
+          background: #ffffff;
+          color: #F1A84A;
+          position: relative;
+          &::before{
+            content: '';
+            height: 100%;
+            width: 4px;
+            background: #FAA12F;
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
         }
       }
     }
     .personal-right-wrapper {
+      border: 1px solid blue;
       flex: 1;
+      background: #ffffff;
+      padding:20px;
+      height: 100%;
+      min-height: 100%;
+      overflow: auto;
     }
     .personal-menu {
       margin: 20px 0 10px 0;
@@ -235,16 +263,19 @@
   }
 }
 .my-activity-wrapper {
-  margin-right: -12px;
+  overflow: hidden;
 }
 .my-activity-card {
   // width: 424px;
   // display: inline-block;
-  margin-right: 20px;
+  // margin-right: 10px;
+  padding: 0 5px;
+  margin-bottom: 10px;
   vertical-align: top;
 }
 .my-activity-box {
   min-height: 280px;
+  // border: 1px solid #DEE4EE;
 }
 .personal-menu-wrapper {
   border-bottom: 1px solid #ebebeb;
@@ -453,6 +484,7 @@
   margin-bottom: 10px;
   background: #ffffff;
   border-radius: 8px;
+  border: 1px solid #DEE4EE;
   :global {
     .my-message-time {
       color: #666666;
@@ -474,3 +506,75 @@
     }
   }
 }
+.order-list-item{
+  // padding: 20px;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  background: #ffffff;
+  border-radius: 8px;
+  border: 1px solid #DEE4EE;
+  :global{
+    .order-item-title{
+      font-size: 12px;
+      line-height: 25px;
+      padding-right:20px;
+      .order-name{
+        width: 341px;
+        background: linear-gradient(90deg, #FFF1E4 0%, #FFFFFF 99.73%);
+        color:#F1A84A;
+        padding-left: 10px;
+        border-radius: 8px 0 0 0;
+        .order-name-img{
+          height: 25px;
+          width: auto;
+        }
+      }
+      .order-status{
+        color:#999999;
+      }
+    }
+    .order-content{
+      padding: 20px;
+    }
+    .order-buy-title{
+      cursor: pointer;
+      &:hover{
+        color:#F1A84A
+      }
+    }
+    .order-bottom-line{
+      padding: 0 20px;
+      line-height: 22px;
+      margin-bottom: 12px;
+      .order-price{
+        color:#F1A84A;
+      }
+    }
+  }
+}
+.order-tab-wrapper{
+  border-bottom: 1px solid #E7E7E7;
+  display: flex;
+  margin-bottom: 10px;
+  :global{
+    .order-tab-item{
+      line-height: 22px;
+      padding: 13px 16px;
+      cursor: pointer;
+    }
+    .order-tab-act{
+      color:#F1A84A;
+      position: relative;
+      &::after{
+        content: '';
+        width: 100%;
+        height: 3px;
+        background: #F1A84A;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+      }
+    }
+  }
+}