组队开宝箱

src/components/activity/newyear-2019/treasure-box/team.js

@@ -34,7 +34,7 @@ export default class TeamInfo extends Component {
           prize_info,
           is_my_team,
           info,
-          member,
+          member: this.format(member)
         })
       } else {
         Toast.info(msg);
@@ -42,6 +42,18 @@ export default class TeamInfo extends Component {
     })
   }
 
+  format = (list) => {
+    let len = list.length;
+    for(let i=0;i<5-len;i++) {
+      list.push({
+        head_img: '',
+        user_name: '',
+        nobody: true,
+      })
+    }
+    return list;
+  }
+
   render() {
     const { prize_info: { name, stage_no }, is_my_team, info: {removable, total}, member } = this.state;
     // 显示文案控制
@@ -62,7 +74,18 @@ export default class TeamInfo extends Component {
               member && member.length > 0 && (
                 member.map((item, index) => {
                   return <li key={index} className='member__item'>
+                    <div className='avatar__container'>
+                      {
+                        item.nobody ? (
                           <img className='head__image' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/default-member-avatar.png" alt=""/>
+                        ) : (
+                          <img className='head__image' src={item.head_img} alt=""/>
+                        )
+                      }
+                      
+                      <div className='shadow'></div>
+                    </div>
+                    <div className={`member__join ${item.nobody ? '' : 'join'}`}></div>
                   </li>
                 })
               )

src/components/activity/newyear-2019/treasure-box/team.scss

@@ -15,20 +15,59 @@
     .member__list {
       height: 50px;
       width: 224px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      margin-right: 12px;
 
       .member__item {
-
         width: 44px;
+        height: 50px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         align-items: center;
-
-        .head__image {
-          border: 1px solid #FFF;
-          border-radius: 50%;
+        margin-left: 1px;
+        &:first-child {
+          margin-left: 0;
+          .member__join{
+            border-radius: 2px 0 0 2px;
+          }
+        }
+        &:last-child {
+          .member__join{
+            border-radius: 0 2px 2px 0;
+          }
+        }
+        .avatar__container {
           width: 27px;
           height: 27px;
+          position: relative;
+          border: 1px solid #fff;
+          border-radius: 50%;
+          .head__image {
+            border-radius: 50%;
+            width: 100%;
+            height: 100%;
+          }
+          .shadow {
+            width: 24px;
+            height: 3px;
+            background: #1a3528;
+            border-radius: 50%;
+            position: absolute;
+            bottom: -6px;
+          }
+        }
+        .member__join {
+          width: 40px;
+          height: 5px;
+          background: rgba(0, 88, 51, 1);
+          box-shadow: 1px 1px 2px 0px rgba(3, 52, 91, 0.35);
+        }
+        .join {
+          background:rgba(255,221,29,1);
+          box-shadow:1px 2px 2px 0px rgba(253,253,253,0.46) inset, 1px 2px 2px 0px rgba(253,253,253,0.46) inset;
         }
       }
     }
@@ -38,7 +77,7 @@
       height: 100%;
       display: flex;
       flex-direction: column;
-      justify-content: space-between;
+      justify-content: flex-start;
       align-items: center;
       position: relative;
       img {
@@ -46,11 +85,14 @@
         height: 50px;
       }
       .box__text {
-        width: 100%;
-        line-height: 12px;
-        font-size: 12px;
+        width: 1000px;
+        font-size: 100px;
+        transform: scale(0.1) ;
         text-decoration: underline;
         color: rgba(255, 227, 0, 1);
+        position: absolute;
+        bottom: -72px;
+        text-align: center;
       }
       .position__arrow {
         width: 18px;