名片夹

src/pages/cardHolder/cardHolder.vue

@@ -56,6 +56,39 @@
       </div>
     </div>
 
+    <!--名片列表-->
+    <div class="cardsListBox">
+      <div class="userImgBox">
+        <img class="userHeadImg" src="/static/images/headPic1.jpg">
+        <img class="vipImg" src="/static/images/vip.png">
+      </div>
+
+      <div class="separateLine"> </div> <!--分割线-->
+
+      <div class="cardContBox">
+        <p class="userName">爱新觉罗冯小甘哈哈哈哈</p>
+        <div class="userNameBox">
+          <div class="positionBox">
+            <p class="likesBox">
+              <img class="likesImg" src="/static/images/like_selected.png">
+              <span class="text">1015</span>
+            </p>
+            <p class="position">销售总监</p>  <!--职位-->
+          </div>
+        </div>
+        <p class="company">小刚影视传媒集团有限公司</p>
+        <div class="contactMode"> <!--联系方式-->
+          <img class="phone" src="/static/images/phone.png">
+          <img class="chat" src="/static/images/phone.png">
+        </div>
+      </div>
+      <div class="moreBox">
+        <img class="moreImg" src="/static/images/more.png"> <!--三点-->
+      </div>
+    </div>
+
+
+
 
   </div>
 </template>

src/static/less/cx-style.less

@@ -1507,6 +1507,7 @@
         }
       }
   }
+
   .chooseIndustry {
       margin-top: 30rpx;
       width: 750rpx;
@@ -1526,6 +1527,7 @@
         margin: 10rpx 0 10rpx 6rpx;
       }
   }
+
   .industryList {
       width: 750rpx;
       height: auto;
@@ -1570,182 +1572,301 @@
       }
   }
 
+  /*名片列表*/
+  .cardsListBox {
+    width: 667rpx;
+    height: auto;
+    border-radius: 20rpx;
+    box-shadow:4px 0px 10px 2px rgba(0, 0, 0, 0.12);
+    display: flex;
+    .userImgBox {
+      position: relative;
+      margin: 55rpx 53rpx 55rpx -23rpx;
+      width: 128rpx;
+      height: 128rpx;
+      border-radius: 69rpx;
+      .userHeadImg {
+        width: 120rpx;
+        height: 120rpx;
+        border-radius: 60rpx;
+        border: 4rpx solid #50A8FC;
+      }
+      .vipImg {
+        position: absolute;
+        top: -18rpx;
+        right: -18rpx;
+        width: 48rpx;
+        height: 48rpx;
+      }
+    }
+    .separateLine {
+      width: 1rpx;
+      height: 100%;
+      border-left: 1rpx solid #e5e5e5;
+    }
+    .cardContBox {
+      margin-top: 20rpx;
+      width: 440rpx;
+      height: auto;
+      .userName {
+        max-width: 351rpx;
+        height: 42rpx;
+        color: #434656;
+        letter-spacing: 1.85rpx;
+        line-height: 42rpx;
+        font-size: 30rpx;
+      }
+      .userNameBox {
+        margin-right: 94rpx;
+        width: 100%;
+        height: 42rpx;
+        .positionBox {
+          margin-top: 10rpx;
+          width: 100%;
+          height: auto;
+          display: flex;
+          .likesBox {
+            margin-right: 10rpx;
+            width: 110rpx;
+            height: 40rpx;
+            border-radius: 24rpx;
+            border: 1rpx solid #50A8FC;
+            display: flex;
+            .likesImg {
+              margin: 8rpx 6rpx 8rpx 13rpx;
+              width: 24rpx;
+              height: 24rpx;
+            }
+            .text {
+              margin-top: 6rpx;
+              width: 45rpx;
+              height: 28rpx;
+              color: #50A8FC;
+              font-size: 20rpx;
+              letter-spacing: 1.23rpx;
+              line-height: 28rpx;
+            }
+          }
+          .position {
+            max-width: 300rpx;
+            height: 33rpx;
+            color: #434656;
+            line-height: 33rpx;
+            font-size: 24rpx;
+            letter-spacing: 1.48rpx;
+          }
+        }
+      }
+      .company {
+        margin-top: 20rpx;
+        width: auto;
+        max-width: 450rpx;
+        height: 28rpx;
+        line-height: 28rpx;
+        color: #9B9B9B;
+        font-size: 20rpx;
+        letter-spacing: 1.23rpx;
+      }
+      
+      .contactMode {
+          margin-top: 10rpx;
+          margin-left: 350rpx;
+          display: flex;
+          width: 140rpx;
+          height: 40rpx;
+        .phone {
+          margin-right: 60rpx;
+          width: 40rpx;
+          height: 40rpx;
+        }
+        .chat {
+          width: 40rpx;
+          height: 40rpx;
+        }
+      }
+    }
+    .moreBox {
+      margin-top: 16rpx;
+      width: 42rpx;
+      height: 10rpx;
+      .moreImg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
 }
 
 /*聊一聊*/
 .cx-chat {
-    @width: 56rpx;
-    @height: 56rpx;
-    @margin: 10rpx;
+  @width: 56rpx;
+  @height: 56rpx;
+  @margin: 10rpx;
 
     body {
-        background-color: #f8f8ff;
+      background-color: #f8f8ff;
     }
 
     /*聊天面板（不含底部输入框及功能栏）*/
     .chatTable {
+      width: 100%;
+      min-height: 1010rpx;
+      padding: 15rpx;
+      margin-bottom: 70rpx;
+      box-sizing: border-box;
+      .chatTableDiv {
+        margin-bottom: 30rpx;
         width: 100%;
-        min-height: 1010rpx;
-        padding: 15rpx;
-        margin-bottom: 70rpx;
-        /* border: 1px solid #ff0; */
-        box-sizing: border-box;
-
-        /* overflow-x: hidden;
-    overflow-y: scroll; */
-        /* position: relative; */
-        .chatTableDiv {
-            margin-bottom: 30rpx;
-            width: 100%;
-            min-height: 40rpx;
-            display: flex;
-            word-break: normal;
-        }
+        min-height: 40rpx;
+        display: flex;
+        word-break: normal;
+      }
 
-        .chatTextContent {
-            margin: 0 15rpx 0 15rpx;
-            padding: 15rpx 10rpx;
-            box-sizing: border-box;
-            letter-spacing: 2rpx;
-            max-width: 500rpx;
-            height: auto;
-            font-size: 26rpx;
-            color: #000;
-            border-radius: 20rpx;
+      .chatTextContent {
+        margin: 0 15rpx 0 15rpx;
+        padding: 15rpx 10rpx;
+        box-sizing: border-box;
+        letter-spacing: 2rpx;
+        max-width: 500rpx;
+        height: auto;
+        font-size: 26rpx;
+        color: #000;
+        border-radius: 20rpx;
 
-            .emojiImg {
-                width: 40rpx;
-                height: 40rpx;
-            }
+        .emojiImg {
+          width: 40rpx;
+          height: 40rpx;
         }
+      }
 
-        .meAvatUrl {
-            width: 72rpx;
-            height: 72rpx;
-            border-radius: 72rpx;
-        }
+      .meAvatUrl {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 72rpx;
+      }
 
-        .otherAvatUrl {
-            width: 72rpx;
-            height: 72rpx;
-            border-radius: 72rpx;
-        }
+      .otherAvatUrl {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 72rpx;
+      }
 
-        .content {
-            width: 200rpx;
-            height: 200rpx;
-            border-radius: 20rpx;
-        }
+    .content {
+      width: 200rpx;
+      height: 200rpx;
+      border-radius: 20rpx;
+    }
 
-        video {
-            max-width: 350rpx;
-            max-height: 150rpx;
-        }
+    video {
+      max-width: 350rpx;
+      max-height: 150rpx;
+    }
 
-        .me {
-            margin-right: 10rpx;
-            word-break: break-word;
-            background-color: #00cd66;
-        }
+    .me {
+      margin-right: 10rpx;
+      word-break: break-word;
+      background-color: #00cd66;
+    }
 
-        .others {
-            margin-left: 10rpx;
-            word-break: break-word;
-            background-color: #fff;
-        }
+    .others {
+      margin-left: 10rpx;
+      word-break: break-word;
+      background-color: #fff;
+    }
 
-        .lefts {
-            justify-content: flex-start;
-        }
+    .lefts {
+      justify-content: flex-start;
+    }
 
-        .rights {
-            justify-content: flex-end;
-        }
+    .rights {
+      justify-content: flex-end;
+    }
 
-        .mine {
-            /* justify-content: flex-end; */
-            /* display: flex; */
+    .mine {
+      /* justify-content: flex-end; */
+    /* display: flex; */
 
-            img {
-                margin-left: 10rpx;
-            }
+      img {
+        margin-left: 10rpx;
+      }
 
-            video {
-                margin-left: 10rpx;
-                width: 200rpx;
-                height: 200rpx;
-                border-radius: 20rpx;
-            }
+      video {
+        margin-left: 10rpx;
+        width: 200rpx;
+        height: 200rpx;
+        border-radius: 20rpx;
+      }
 
-            .emojiContent {
-                width: 48rpx;
-                height: 48rpx;
-            }
+        .emojiContent {
+            width: 48rpx;
+            height: 48rpx;
+        }
 
-            .videoPic {
-                width: 200rpx;
-                height: 200rpx;
-                border-radius: 20rpx;
-            }
+        .videoPic {
+            width: 200rpx;
+            height: 200rpx;
+            border-radius: 20rpx;
+        }
 
-            .breathDiv {
-                width: 200rpx;
-                height: 200rpx;
-                border-radius: 20rpx;
-                background: rgba(0, 0, 0, .8);
-                position: relative;
-
-                .circularDiv {
-                    display: absolute;
-                    margin: 25rpx auto;
-                    width: 150rpx;
-                    height: 150rpx;
-                    border-radius: 75rpx;
-                    background: transparent;
-                    box-shadow: 0 0 20rpx 20rpx #fff;
-
-                    animation-name: breath;
-                    /*动画名称*/
-                    animation-duration: 2s;
-                    /*执行时间*/
-                    animation-timing-function: linear;
-                    /*匀速执行*/
-                    animation-iteration-count: infinite;
-                    /*循环执行*/
-
-                    @keyframes breath {
-                        from {
-                            opacity: 0.1;
-                        }
+        .breathDiv {
+            width: 200rpx;
+            height: 200rpx;
+            border-radius: 20rpx;
+            background: rgba(0, 0, 0, .8);
+            position: relative;
 
-                        /* 动画开始时的不透明度 */
-                        50% {
-                            opacity: 0.5;
-                        }
+            .circularDiv {
+                display: absolute;
+                margin: 25rpx auto;
+                width: 150rpx;
+                height: 150rpx;
+                border-radius: 75rpx;
+                background: transparent;
+                box-shadow: 0 0 20rpx 20rpx #fff;
+
+                animation-name: breath;
+                /*动画名称*/
+                animation-duration: 2s;
+                /*执行时间*/
+                animation-timing-function: linear;
+                /*匀速执行*/
+                animation-iteration-count: infinite;
+                /*循环执行*/
+
+                @keyframes breath {
+                    from {
+                        opacity: 0.1;
+                    }
 
-                        /* 动画50% 时的不透明度 */
-                        to {
-                            opacity: 0.1;
-                        }
+                    /* 动画开始时的不透明度 */
+                    50% {
+                        opacity: 0.5;
+                    }
 
-                        /* 动画结束时的不透明度 */
+                    /* 动画50% 时的不透明度 */
+                    to {
+                        opacity: 0.1;
                     }
-                }
 
-                .text {
-                    width: 100%;
-                    height: 100%;
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    line-height: 200rpx;
-                    text-align: center;
-                    color: #fff;
+                    /* 动画结束时的不透明度 */
                 }
             }
 
+            .text {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                line-height: 200rpx;
+                text-align: center;
+                color: #fff;
+            }
         }
 
+    }
+
         .audioPlay {
             width: 150rpx;
             height: 50rpx;