标签管理页面

src/pages.json

@@ -19,6 +19,12 @@
 				"navigationBarTitleText": "名片夹"
 			}
 		},
+		{
+			"path": "pages/cardHolder/labelManage",
+			"style": {
+				"navigationBarTitleText": "标签管理"
+			}
+		},
 		{
 			"path": "pages/index/chat",
 			"style": {

src/pages/cardHolder/cardHolder.vue

@@ -1,94 +1,171 @@
 <template>
   <div class="cx-card-older">
-    <!--头部-->
-    <div class="topDiv">
-      <div class="searchBox">
-        <img class="searchPic" src="/static/images/search.png">
-        <input class="inputs" type="text">
-      </div>
-      <div class="messageDiv">
-        <img class="pic" src="/static/images/headPic1.jpg"> <!--55*55-->
-        <p class="tipText">...</p>
-      </div>
-    </div>
-
-    <!--选择行业-->
-    <div class="chooseIndustry">
-      <p class="text">行业</p>
-      <img class="pic" src="/static/images/triangleArrow.png">
-    </div>
-
-    <!--行业列表-->
-    <div class="industryList">
-      <div class="industrys styles">
-        <p class="text">电影(8)</p>
-      </div>
-      <div class="industrys">
-        <p class="text">互联网(6)</p>
-      </div>
-      <div class="industrys">
-        <p class="text">金融(8)</p>
-      </div>
-      <div class="industrys">
-        <p class="text">金融(8)</p>
+    <!--可移动菜单-->
+    <movable-area class="moveMenuBox">
+      <movable-view class="moveMenuCont" :x="tran" :y="vert" direction="all" damping="30" friction="5" @change="handleChange">
+        <img class="moveMenuPic" src="/static/images/headPic5.jpg">
+        <p class="msgText">80</p>
+        <p class="text">聊一聊</p>
+      </movable-view>
+    
+      <!--头部-->
+      <div class="topDiv">
+        <div class="searchBox">
+          <img class="searchPic" src="/static/images/search.png">
+          <input class="inputs" type="text">
+        </div>
+        <div class="messageDiv">
+          <img class="pic" src="/static/images/headPic1.jpg"> <!--55*55-->
+          <p class="tipText">...</p>
+        </div>
       </div>
-      <div class="industrys">
-        <p class="text">金融(8)</p>
+
+      <!--选择行业-->
+      <div class="chooseIndustry">
+        <p class="text">行业</p>
+        <img class="pic" src="/static/images/triangleArrow.png">
       </div>
-    </div>
-
-    <!--选择标签-->
-    <div class="chooseIndustry">
-      <p class="text">行业</p>
-      <img class="pic" src="/static/images/triangleArrow.png">
-    </div>
-
-    <!--标签列表-->
-    <div class="industryList">
-      <div class="industrys">
-        <p class="text">重要(8)</p>
+
+      <!--行业列表-->
+      <div class="industryList">
+        <div class="industrys styles">
+          <p class="text">电影(8)</p>
+        </div>
+        <div class="industrys">
+          <p class="text">互联网(6)</p>
+        </div>
+        <div class="industrys">
+          <p class="text">金融(8)</p>
+        </div>
+        <div class="industrys">
+          <p class="text">金融(8)</p>
+        </div>
+        <div class="industrys">
+          <p class="text">金融(8)</p>
+        </div>
       </div>
-      <div class="industrys">
-        <p class="text">一般(6)</p>
+
+      <!--选择标签-->
+      <div class="chooseIndustry">
+        <p class="text">行业</p>
+        <img class="pic" src="/static/images/triangleArrow.png">
       </div>
-      <div class="industryManagement">
-        <p class="text">标签管理</p>
+
+      <!--标签列表-->
+      <div class="industryList">
+        <div class="industrys">
+          <p class="text">重要(8)</p>
+        </div>
+        <div class="industrys">
+          <p class="text">一般(6)</p>
+        </div>
+        <div class="industryManagement">
+          <p class="text" @click="labelManage()">标签管理</p>
+        </div>
       </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 class="cardsListBox">
+        <div class="userImgBox">
+          <div class="imgBox">
+            <img class="userHeadImg" src="/static/images/headPic1.jpg">
+            <img class="vipImg" src="/static/images/vip.png">
+          </div>
+        </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 class="separateLine"> </div> <!--分割线-->
+      <!--名片列表-->
+      <div class="cardsListBox">
+        <div class="userImgBox">
+          <div class="imgBox">
+            <img class="userHeadImg" src="/static/images/headPic1.jpg">
+            <img class="vipImg" src="/static/images/vip.png">
+          </div>
+        </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>
+        <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">1.5万</span>
+              </p>
+              <p class="position">导演</p>  <!--职位-->
+            </div>
+          </div>
+          <p class="company">小刚影视传媒集团有限公司</p>
+          <div class="remarksBox">
+            <p class="text">
+              备注：周五下午才有时间面谈周五下午才有 时间面谈周五下午才有时间面谈周五下午才 有时间面谈周五下午才有时间面谈
             </p>
-            <p class="position">销售总监</p>  <!--职位-->
+          </div>
+          <div class="contactMode"> <!--联系方式-->
+            <img class="phone" src="/static/images/phone.png">
+            <img class="chat" src="/static/images/phone.png">
           </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 class="moreBox">
+          <img class="moreImg" src="/static/images/more.png"> <!--三点-->
         </div>
       </div>
-      <div class="moreBox">
-        <img class="moreImg" src="/static/images/more.png"> <!--三点-->
-      </div>
-    </div>
 
+      <!--名片列表-->
+      <div class="cardsListBox bottoms">
+        <div class="userImgBox">
+          <div class="imgBox">
+            <img class="userHeadImg" src="/static/images/headPic1.jpg">
+            <img class="vipImg" src="/static/images/vip.png">
+          </div>
+        </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>
+            </div>
+          </div>
+          <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>
+    </movable-area>
 
   </div>
 </template>
@@ -97,7 +174,28 @@
 export default {
   data() {
     return {
-
+      tran: 350,    //横轴
+      vert: 500     //纵轴
+    }
+  },
+  methods: {
+    handleChange(e) {
+      // console.log(e);
+      this.tran = e.detail.x;
+      this.vert = e.detail.y;
+      if (this.tran <= 188) {
+          console.log('超过中间线了');
+          this.tran = 0;
+      } else {
+          this.tran = 350;
+      }
+      // console.log('X:', this.tran);
+      // console.log('Y:', this.vert);
+    },
+    labelManage() {
+      wx.navigateTo({
+        url: './labelManage'
+      });
     }
   }
 }

src/pages/cardHolder/labelManage.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="cx-labelManage">
+    <movable-area class="moveMenuBox">
+      <movable-view class="moveMenuCont" :x="tran" :y="vert" direction="all" damping="30" friction="5" @change="handleChange">
+        <img class="moveMenuPic" src="/static/images/buoy.png" @click="newLabel()">
+      </movable-view>
+      <div class="labelBox" v-for="(item, index) in labelData" :key="index">
+        <p class="text">{{item.text}}({{item.num}})</p>
+        <div class="optionsSet">
+          <a class="delete text">删除</a>
+          <div class="separate">|</div>
+          <a class="update text">编辑</a>
+          <div class="separate">|</div>
+          <a class="moveDown text" @click="moveUps(index)" v-if="index == labelData.length - 1">上移</a>
+          <a class="moveDown text" @click="moveDowns(index)" v-else>下移</a>
+        </div>
+        <div class="empty">&nbsp; </div>
+      </div>
+      
+    </movable-area>
+
+    <!--新建标签-->
+    <div class="newLabelDiv" v-if="newLabelDivFlag">
+      <div class="newLabelBox">
+        <p class="title">新建标签</p>
+        <input class="newLabelName" v-text="inputText" type="text" placeholder="请输入分组名称，不超过10个字">
+        <div class="confirmBox">
+          <button class="cancel" @click="newLabelCancel()">取消</button>
+          <button class="save" @click="newLabelSave()">保存</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      tran: 350,    //横轴
+      vert: 500,     //纵轴
+      inputText: '',  //输入框
+      newLabelDivFlag: false,  //控制新建标签框展示与隐藏
+      labelData: [
+        {text: '重要 ', num: 8},
+        {text: '朋友 ', num: 19},
+        {text: '家人 ', num: 8},
+        {text: '同事 ', num: 40}
+      ]
+    }
+  },
+  onLoad () {
+
+  },
+  methods: {
+    handleChange(e) {
+      // console.log(e);
+      this.tran = e.detail.x;
+      this.vert = e.detail.y;
+      if (this.tran <= 188) {
+        console.log('超过中间线了');
+        this.tran = 0;
+      } else {
+        this.tran = 350;
+      }
+    },
+    moveUps(index) {
+      this.labelData[index] = this.labelData.splice(index - 1, 1, this.labelData[index])[0];
+    },
+    moveDowns(index) {
+      this.labelData[index] = this.labelData.splice(index + 1, 1, this.labelData[index])[0];
+    },
+    newLabel() {
+      this.newLabelDivFlag = true;
+    },
+    newLabelCancel() {
+      this.inputText = '';
+      this.newLabelDivFlag = false;
+    },
+    newLabelSave() {
+      this.labelData.push({text: this.inputText, num: 5});
+      this.newLabelDivFlag = false;
+      this.inputText = '';
+      console.log(this.labelData);
+    }
+  }
+}
+</script>
+
+<style lang="less">
+
+</style>
+
+

src/static/less/cx-style.less

@@ -1,33 +1,33 @@
-/*首页*/
+
+/*名片(首页)*/
 .cx-card {
-    // background-color: #F5F5F5;
     /*定位菜单*/
     .moveMenuBox {
-        width: 100%;
-        height: 100%;
+        // width: 100%;
+        // height: 100%;
         .moveMenuCont {
-            position: fixed;
-            z-index: 999;
-            width: 80rpx;
-            height: 80rpx;
+            // position: fixed;
+            // z-index: 999;
+            // width: 80rpx;
+            // height: 80rpx;
             .moveMenuPic {
-                margin-left: 3rpx;
-                width: 74rpx;
-                height: 74rpx;
-                border-radius: 40rpx;
+                // margin-left: 3rpx;
+                // width: 74rpx;
+                // height: 74rpx;
+                // border-radius: 40rpx;
             }
             .text {
-                position: absolute;
-                bottom: 0;
-                left: 0;
-                width: 100%;
-                height: 30rpx;
-                text-align: center;
-                line-height: 30rpx;
-                font-size: 20rpx;
-                color: #fff;
-                border-radius: 15rpx;
-                background-color: #50A8FC;
+                // position: absolute;
+                // bottom: 0;
+                // left: 0;
+                // width: 100%;
+                // height: 30rpx;
+                // text-align: center;
+                // line-height: 30rpx;
+                // font-size: 20rpx;
+                // color: #fff;
+                // border-radius: 15rpx;
+                // background-color: #50A8FC;
             }
         }
         .subject {
@@ -1458,244 +1458,401 @@
 
 /*名片夹*/
 .cx-card-older {
+  .moveMenuBox {
     padding: 0 30rpx;
-  .topDiv {
-    width: 750rpx;
-    height: auto;
-    display: flex;
-      .searchBox {
-        width: 607rpx;
-        height: 60rpx;
+    width: 100%;
+    height: 100%;
+    .topDiv {
+        width: 750rpx;
+        height: auto;
         display: flex;
-        border: 1rpx solid #797979;
-        border-radius: 46.5rpx;
-        margin: 20rpx 30rpx 0 0;
-        .searchPic {
-          margin: 14rpx 20rpx 14rpx 29rpx;
-          width: 32rpx;
-          height: 32rpx;
-        }
-        .inputs {
-          margin-top: 9rpx;
-          padding: 3rpx;
-          box-sizing: border-box;
-          width: 495rpx;
-          height: 42rpx;
-          line-height: 42rpx;
-        }
-      }
-      .messageDiv {
-        margin-top: 20rpx;
-        width: 60rpx;
-        height: 60rpx;
-        position: relative;
-        .pic {
-          width: 100%;
-          height: 100%;
-        }
-        .tipText {
-          position: absolute;
-          top: -10rpx;
-          right: -10rpx;
-          width: 32rpx;
-          height: 32rpx;
-          color: #fff;
-          text-align: center;
-          line-height: 32rpx;
-          border-radius: 16rpx;
-          background-color: #D0021B;
+        .searchBox {
+            width: 607rpx;
+            height: 60rpx;
+            display: flex;
+            border: 1rpx solid #797979;
+            border-radius: 46.5rpx;
+            margin: 20rpx 30rpx 0 0;
+            .searchPic {
+            margin: 14rpx 20rpx 14rpx 29rpx;
+            width: 32rpx;
+            height: 32rpx;
+            }
+            .inputs {
+            margin-top: 9rpx;
+            padding: 3rpx;
+            box-sizing: border-box;
+            width: 495rpx;
+            height: 42rpx;
+            line-height: 42rpx;
+            }
         }
-      }
-  }
-
-  .chooseIndustry {
-      margin-top: 30rpx;
-      width: 750rpx;
-      height: auto;
-      display: flex;
-      .text {
-        width: 47rpx;
-        height: 30rpx;
-        color: #9B9B9B;
-        letter-spacing: 1.35rpx;
-        line-height: 30rpx;
-        font-size: 22rpx;
-      }
-      .pic {
-        width: 19rpx;
-        height: 10rpx;
-        margin: 10rpx 0 10rpx 6rpx;
-      }
-  }
-
-  .industryList {
-      width: 750rpx;
-      height: auto;
-      margin-top: 16rpx;
-      display: flex;
-      .industrys:not(:last-child) {
-          margin-right: 30rpx;
-      }
-      .industrys {
-        //   flex: 1;
-          min-width: 120rpx;
-          max-width: 148rpx;
-          height: 40rpx;
-          display: flex;
-          .text {
+        .messageDiv {
+            margin-top: 20rpx;
+            width: 60rpx;
+            height: 60rpx;
+            position: relative;
+            .pic {
             width: 100%;
             height: 100%;
+            }
+            .tipText {
+            position: absolute;
+            top: -10rpx;
+            right: -10rpx;
+            width: 32rpx;
+            height: 32rpx;
+            color: #fff;
             text-align: center;
-            height: 37rpx;
-            color: #434656;
-            line-height: 37rpx;
-            letter-spacing: 1.6px;
-            font-size: 26rpx;
-          }
-      }
-      .industryManagement {
-          margin-top: 1rpx;
-          margin-left: 14rpx;
-          width: 138rpx;
-          height: 40rpx;
-          line-height: 40rpx;
-          text-align: center;
-          color: #797979;
-          font-size: 26rpx;
-          border: 1rpx solid #797979;
-          border-radius: 33rpx;
-      }
-      .styles {
-        color: #50A8FC;
-        border-radius: 33rpx;
-        border: 1rpx solid #50A8FC;
-      }
-  }
-
-  /*名片列表*/
-  .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;
-      }
+            line-height: 32rpx;
+            border-radius: 16rpx;
+            background-color: #D0021B;
+            }
+        }
     }
-    .separateLine {
-      width: 1rpx;
-      height: 100%;
-      border-left: 1rpx solid #e5e5e5;
+
+    .chooseIndustry {
+        margin-top: 30rpx;
+        width: 750rpx;
+        height: auto;
+        display: flex;
+        .text {
+            width: 47rpx;
+            height: 30rpx;
+            color: #9B9B9B;
+            letter-spacing: 1.35rpx;
+            line-height: 30rpx;
+            font-size: 22rpx;
+        }
+        .pic {
+            width: 19rpx;
+            height: 10rpx;
+            margin: 10rpx 0 10rpx 6rpx;
+        }
     }
-    .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;
+
+    .industryList {
+        margin-bottom: 30rpx;
+        width: 750rpx;
+        height: auto;
+        margin-top: 16rpx;
+        display: flex;
+        .industrys:not(:last-child) {
+            margin-right: 30rpx;
+        }
+        .industrys {
+            //   flex: 1;
+            min-width: 120rpx;
+            max-width: 148rpx;
+            height: 40rpx;
+            display: flex;
+            .text {
+                width: 100%;
+                height: 100%;
+                text-align: center;
+                height: 37rpx;
+                color: #434656;
+                line-height: 37rpx;
+                letter-spacing: 1.6px;
+                font-size: 26rpx;
+            }
+        }
+        .industryManagement {
+            margin-top: 1rpx;
+            margin-left: 14rpx;
+            width: 138rpx;
             height: 40rpx;
-            border-radius: 24rpx;
+            line-height: 40rpx;
+            text-align: center;
+            color: #797979;
+            font-size: 26rpx;
+            border: 1rpx solid #797979;
+            border-radius: 33rpx;
+        }
+        .styles {
+            color: #50A8FC;
+            border-radius: 33rpx;
             border: 1rpx solid #50A8FC;
+        }
+    }
+
+    /*名片列表*/
+    .cardsListBox {
+        margin-top: 30rpx;
+        margin-left: 23rpx;
+        width: 667rpx;
+        min-height: 182rpx;
+        max-height: 350rpx;
+        border-radius: 20rpx;
+        box-shadow:4px 0px 10px 2px rgba(0, 0, 0, 0.12);
+        display: flex;
+        .userImgBox {
+        margin-right: 24rpx;
+        padding-right: 24rpx;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        width: 154rpx;
+        min-height: 182rpx;
+        max-height: 350rpx;
+        border-right: 1rpx solid #e5e5e5;
+        .imgBox {
+            position: relative;
+            margin-left: -23rpx;
+            width: 120rpx;
+            height: 120rpx;
+            border-radius: 69rpx;
+            .userHeadImg {
+            width: 120rpx;
+            height: 120rpx;
+            border-radius: 69rpx;
+            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: 410rpx;
+        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;
-            .likesImg {
-              margin: 8rpx 6rpx 8rpx 13rpx;
-              width: 24rpx;
-              height: 24rpx;
+            .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: 55rpx;
+                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;
+        }
+
+        .remarksBox {
+            margin-top: 20rpx;
+            width: 485rpx;
+            height: 99rpx;
             .text {
-              margin-top: 6rpx;
-              width: 45rpx;
-              height: 28rpx;
-              color: #50A8FC;
-              font-size: 20rpx;
-              letter-spacing: 1.23rpx;
-              line-height: 28rpx;
+                width: 100%;
+                height: 100%;
+                color: #434656;
+                font-size: 24rpx;
+                letter-spacing: 1.48rpx;
+                line-height: 33rpx;
             }
-          }
-          .position {
-            max-width: 300rpx;
-            height: 33rpx;
-            color: #434656;
-            line-height: 33rpx;
-            font-size: 24rpx;
-            letter-spacing: 1.48rpx;
-          }
         }
+        
+        .contactMode {
+            margin: 10rpx 0 20rpx 320rpx;
+            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%;
+        }
+        }
+    }
+    .bottoms {
+        margin-bottom: 80rpx;
+    }
+  }
+}
+
+/*标签管理*/
+.cx-labelManage {
+  .moveMenuBox {
+    .labelBox {
+      width: 750rpx;
+      height: 161rpx;
+      .text {
+        margin: 20rpx 0 0 20rpx;
+        width: 100%;
+        height: 63rpx;
+        color: #434656;
+        line-height: 83rpx;
+        font-size: 30rpx;
       }
-      .company {
+      .optionsSet {
         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;
+        border-top: 1rpx solid #e5e5e5;
+        width: 100%;
+        height: 58rpx;
+        display: flex;
+        .text {
+          margin-top: 12rpx;
+          flex: 1;
+          text-align: center;
+          height: 33rpx;
+          color: #9B9B9B;
+          font-size: 24rpx;
+          line-height: 33rpx;
         }
-        .chat {
-          width: 40rpx;
-          height: 40rpx;
+        .separate {
+        //   margin-top: 12rpx;
+        //   flex: 1;
+        //   width: 1rpx;
+        //   height: 37rpx;
+          color: #e5e5e5;
+        }
+        .delete {
+          
+        }
+        .update {
+
         }
+        .moveDown {
+            
+        }
+      }
+      .empty {
+        width: 750rpx;
+        height: 20rpx;
+        background-color: #f5f5f5;
       }
     }
-    .moreBox {
-      margin-top: 16rpx;
-      width: 42rpx;
-      height: 10rpx;
-      .moreImg {
+  }
+  .newLabelDiv {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    background-color: rgba(67, 70, 86, 0.21);
+    .newLabelBox {
+    margin: 465rpx auto;
+    padding: 30rpx 30rpx 0 30rpx;
+    box-sizing: border-box;
+    width: 670rpx;
+    height: 405rpx;
+    border-radius: 40rpx;
+    background-color: #fff;
+    .title {
         width: 100%;
+        height: 50rpx;
+        color: #434656;
+        font-size: 36rpx;
+        letter-spacing: 2.22rpx;
+        text-align: center;
+        line-height: 50rpx;
+    }
+    .newLabelName {
+        margin-top: 47rpx;
+        padding: 26rpx 81rpx;
+        box-sizing: border-box;
+        width: 610rpx;
+        height: 94rpx;
+        line-height: 42rpx;
+        font-size: 30rpx;
+        letter-spacing: 1.85rpx;
+        border: 1rpx solid #979797;
+        border-radius: 56.5rpx;
+    }
+    .confirmBox {
+        margin-top: 80rpx;
+        width: 100%;
+        height: 74rpx;
+        display: flex;
+        .cancel {
+        margin-right: 10rpx;
+        width: 300rpx;
         height: 100%;
-      }
+        color: #434656;
+        font-size: 30rpx;
+        line-height: 74rpx;
+        letter-spacing: 1.85rpx;
+        text-align: center;
+        border: 1rpx solid #434656;
+        border-radius: 37rpx;
+        }
+        .save {
+        width: 300rpx;
+        height: 100%;
+        color: #fff;
+        text-align: center;
+        line-height: 74rpx;
+        font-size: 30rpx;
+        letter-spacing: 1.85rpx;
+        border-radius: 37rpx;
+        background-color: #50A8FC;
+        }
+    }
     }
   }
-
 }
 
 /*聊一聊*/
@@ -2353,3 +2510,52 @@
     }
 }
 
+/*可移动菜单*/
+.moveMenuBox {
+  width: 750rpx;
+//   margin-bottom: 98rpx;
+  height: 100vh;
+//   background-color: rgba(0, 0, 0, 0.2);
+  .moveMenuCont {
+    position: fixed;
+    z-index: 999;
+    width: 80rpx;
+    height: 80rpx;
+
+    .moveMenuPic {
+      margin-left: 3rpx;
+      width: 74rpx;
+      height: 74rpx;
+      border-radius: 40rpx;
+    }
+
+    .msgText {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 30rpx;
+      height: 30rpx;
+      border-radius: 15rpx;
+      background-color: #D0021B;
+      color: #fff;
+      font-size: 20rpx;
+      line-height: 30rpx;
+      text-align: center;
+    }
+
+    .text {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 30rpx;
+      text-align: center;
+      line-height: 30rpx;
+      font-size: 20rpx;
+      color: #fff;
+      border-radius: 15rpx;
+      background-color: #50A8FC;
+    }
+  }
+}
+