新增人员管理页面

subpkg/personnel/personnel.vue

@@ -4,12 +4,81 @@
     <view class="personnel_list">
       <view class="personnel_item">
         <view class="type">
-          <image src="../../static/icons/err.png"></image>
+          <image src="../../static/icons/err_w.png"></image>
+          <!-- <image src="../../static/icons/ok_w.png"></image> -->
           <text>未签约</text>
         </view>
         <view class="top">
-          <view class="left"></view>
+          <view class="left">
-          <view class="right"></view>
+            <u--image class="u_avatar" :showLoading="true" src="../../static/img/public/man.png" width="112.28rpx" height="112.28rpx" shape="circle"></u--image>
+          </view>
+          <view class="right">
+            <view class="info_top">
+              <view class="info_name">人员名称</view>
+              <view>隶属乡镇公司名称</view>
+            </view>
+            <view class="info_bottom">
+              <view class="item phone">
+                <uni-icons type="phone" color="#999999FF"></uni-icons>
+                13546841564
+              </view>
+              <view class="item">
+                <uni-icons type="location" color="#999999FF"></uni-icons>
+                通滩镇
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="center">
+          <view class="top">小组服务团队：<text class="green">管理人</text></view>
+          <view class="bottom">
+            <view><image src="../../static/icons/ok.png"></image>身份证</view>
+            <view><image src="../../static/icons/ok.png"></image>驾驶证</view>
+            <view><image src="../../static/icons/err.png"></image>银行卡</view>
+          </view>
+        </view>
+        <u-line color="#999999FF"></u-line>
+        <view class="bottom" style="margin-top: 28rpx;">
+          <button class="look">查看</button>
+        </view>
+      </view>
+      <view class="personnel_item">
+        <view class="type type_blue">
+          <image src="../../static/icons/ok_w.png"></image>
+          <text>已签约</text>
+        </view>
+        <view class="top">
+          <view class="left">
+            <u--image class="u_avatar" :showLoading="true" src="../../static/img/public/man.png" width="112.28rpx" height="112.28rpx" shape="circle"></u--image>
+          </view>
+          <view class="right">
+            <view class="info_top">
+              <view class="info_name">人员名称</view>
+              <view>隶属乡镇公司名称</view>
+            </view>
+            <view class="info_bottom">
+              <view class="item phone">
+                <uni-icons type="phone" color="#999999FF"></uni-icons>
+                13546841564
+              </view>
+              <view class="item">
+                <uni-icons type="location" color="#999999FF"></uni-icons>
+                通滩镇
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="center">
+          <view class="top">小组服务团队：<text class="green">管理人</text></view>
+          <view class="bottom">
+            <view><image src="../../static/icons/ok.png"></image>身份证</view>
+            <view><image src="../../static/icons/ok.png"></image>驾驶证</view>
+            <view><image src="../../static/icons/err.png"></image>银行卡</view>
+          </view>
+        </view>
+        <u-line color="#999999FF"></u-line>
+        <view class="bottom" style="margin-top: 28rpx;">
+          <button class="look">查看</button>
         </view>
       </view>
     </view>
@@ -61,12 +130,13 @@ export default {
     padding-top: 32rpx;
     .personnel_item{
       width: 694rpx;
-      height: 407rpx;
+      // height: 407rpx;
       background: #FFFFFF;
       border-radius: 14rpx 14rpx 14rpx 14rpx;
       margin-bottom: 32rpx;
       overflow: hidden;
       position: relative;
+      padding: 28rpx;
       .type{
         width: 137rpx;
         height: 53rpx;
@@ -88,9 +158,95 @@ export default {
           margin-right: 9rpx;
         }
       }
+      .type_blue{
+        background-color: #3274f9;
+      }
       .top{
         // background-color: #3274F9;
-        
+        display: flex;
+        .right{
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          margin-left: 28rpx;
+          font-size: 25rpx;
+          font-weight: 400;
+          color: #999999;
+          .info_top{
+            display: flex;
+            align-items: flex-end;
+            font-size: 25rpx;
+            font-weight: 400;
+            color: #3274F9;
+            .info_name{
+              font-size: 32rpx;
+              font-weight: 400;
+              color: #333333;
+              margin-right: 18rpx;
+            }
+          }
+          .info_bottom{
+            display: flex;
+            .item{
+              display: flex;
+              align-items: center;
+            }
+            .phone{
+              margin-right: 28rpx;
+            }
+            .location{
+              flex: 1;
+              white-space: nowrap; /* 不换行 */
+              overflow: hidden; /* 将超出文本隐藏 */
+              text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */
+            }
+          }
+        }
+      }
+      .center{
+        padding: 28rpx 0;
+        .top{
+          font-size: 28rpx;
+          font-weight: 400;
+          color: #666666FF;
+          margin-bottom: 20rpx;
+          .green{
+            color: #34A853FF;
+          }
+          .yellow{
+            color: #F9AA32FF;
+          }
+        }
+        .bottom{
+          display: flex;
+          justify-content: space-around;
+          font-size: 25rpx;
+          font-weight: 400;
+          color: #999999;
+          image{
+            width: 18rpx;
+            height: 18rpx;
+            margin-right: 9rpx;
+          }
+        }
+      }
+      .bottom{
+        display: flex;
+        justify-content: right;
+        .look{
+          width: 158rpx;
+          height: 53rpx;
+          background: #FFFFFF;
+          border-radius: 26rpx 26rpx 26rpx 26rpx;
+          opacity: 1;
+          border: 2rpx solid #3274F9;
+          font-size: 28rpx;
+          font-weight: 400;
+          color: #3274F9;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
       }
     }
   }