feat: 我的奖品页

mock/project/prize.js

@@ -414,6 +414,7 @@ module.exports = {
                 "projectId": "p8a32cdec"
             },
         ],
+        // "records": [],
         "success": true,
         "nextPage": false,
         "projectTabList": [

src/pages/prizepage/prizepage.jsx

@@ -16,7 +16,7 @@ import API from "../../api";
 import store from "../../store";
 import { _throttle, dateFormatter, getUrlParam, isMiniprogram } from "../../utils/utils";
 import shareStore from "@src/store/share";
-// wzjTODO 换皮
+
 @observer
 class Prizepage extends React.Component {
   constructor(props) {
@@ -267,7 +267,10 @@ class Prizepage extends React.Component {
                 );
               })
             ) : (
-              <span className="empty">暂无数据</span>
+              <div className="empty_wrap">
+                <span className="empty_img"></span>
+                <span className="empty">暂无数据</span>
+              </div>
             )}
           </div>
           <Button className="back md43" onClick={this.back}></Button>

src/pages/prizepage/prizepage.less

@@ -24,7 +24,7 @@
       left: 0px;
       top: 0px;
       position: absolute;
-      .sparkBg("PrizePage/bg2.png");
+      .sparkBg("PrizePage/bg.png");
     }
 
     .all_tab {
@@ -32,7 +32,7 @@
       height: 80px;
       position: absolute;
       left: 40px;
-      top: 367px;
+      top: 347px;
       overflow-x: auto;
       display: flex;
       flex-direction: row;
@@ -41,26 +41,26 @@
 
       .tab_item {
         width: 122px;
-        height: 80px;
+        height: 70px;
         text-align: center;
         left: 0;
         top: 0;
         position: relative;
         margin-right: 40px;
         flex-shrink: 0;
-        font-size: 30px;
+        font-size: 29px;
         color: #fff;
         font-weight: 700;
-        line-height: 80px;
+        line-height: 70px;
         .lineClamp1();
 
         .stick {
           position: absolute;
-          left: 0px;
-          top: 70px;
-          width: 121px;
-          height: 4px;
-          .sparkBg("PrizePage/stick.png");
+          left: 31px;
+          top: 60px;
+          width: 59px;
+          height: 5px;
+          background-color: rgb(255, 255, 254);
         }
 
       }
@@ -73,9 +73,9 @@
 
     .list {
       width: 683px;
-      height: calc(50vh + 300px);
+      height: calc(50vh + 340px);
       left: 31px;
-      top: 483px;
+      top: 443px;
       // bottom: 20px;
       position: absolute;
       overflow-y: scroll;
@@ -98,22 +98,22 @@
         }
 
         .img {
-          width: 110px;
-          height: 110px;
+          width: 112px;
+          height: 112px;
           left: 26px;
-          top: 24px;
+          top: 19px;
           position: absolute;
           // border: 1px solid #e5c362;
-          border-radius: 15px;
+          border-radius: 10px;
         }
 
         .name {
           width: 350px;
           // height: 28px;
           left: 160px;
-          top: 24px;   
+          top: 20px;   
           position: absolute;
-          font-size: 30px;
+          font-size: 26px;
           // line-height: 28px;  
           color: #262626;
           .lineClamp1();
@@ -162,25 +162,42 @@
           .sparkBg("PrizePage/gray_btn.png");
         }
       }
-
-      .empty {
-        width: 100%;
-        height: 30px;
-        line-height: 30px;
-        top: 300px;
+      
+      .empty_wrap {
+        left: 44px;
+        top: 110px;
+        width: 600px;
+        height: 378px;
         position: absolute;
-        left: 0;
-        text-align: center;
-        font-size: 30px;
-        color: #fff5d3;
+        .empty_img {
+          opacity: 0.569;
+          left: 0px;
+          top: 0px;
+          width: 600px;
+          height: 378px;
+          position: absolute;
+          .sparkBg("PrizePage/empty.png");
+        }
+        .empty {
+          width: 100%;
+          font-weight: bold;
+          height: 30px;
+          line-height: 30px;
+          top: 360px;
+          position: absolute;
+          left: 0;
+          text-align: center;
+          font-size: 30px;
+          color: rgb(70, 136, 22);
+        }
       }
     }
 
     .back {
-      left: 29px;
-      top: 262px;
-      width: 58px;
-      height: 58px;
+      left: 31px;
+      top: 243px;
+      width: 56px;
+      height: 56px;
       transform-origin: left center;
       position: absolute;
       .sparkBg("PrizePage/back.png");