名片夹页面(未完成)

src/pages.json

@@ -1,5 +1,5 @@
 {
-	"sitemapLocation": "sitemap.json",
+	// "sitemapLocation": "sitemap.json",
 	"pages": [
 		{
 			"path": "pages/index/index",
@@ -13,9 +13,14 @@
 				"navigationBarTitleText": "谁收藏了我"
 			}
 		},
-		
 		{
-			"path": "pages/chat/chat",
+			"path": "pages/cardHolder/cardHolder",
+			"style": {
+				"navigationBarTitleText": "名片夹"
+			}
+		},
+		{
+			"path": "pages/index/chat",
 			"style": {
 				"navigationBarTitleText": "聊天"
 			}
@@ -64,6 +69,8 @@
 		"selectedColor": "#50A9FA",
 		"borderStyle": "black",
 		"backgroundColor": "#fff",
+		"width": "750rpx",
+		"height": "98rpx",
 		"list": [
 			{
 				"pagePath": "pages/index/index",
@@ -72,9 +79,9 @@
 				"text": "名片"
 			},
 			{
-				"pagePath": "pages/chat/chat",
+				"pagePath": "pages/cardHolder/cardHolder",
 				"iconPath": "static/images/card_noSelect.png",
-				"selectedIconPath": "static/images/card_noSelect.png",
+				"selectedIconPath": "static/images/card_selected.png",
 				"text": "名片夹"
 			},
 			{

src/pages/cardHolder/cardHolder.vue

@@ -0,0 +1,76 @@
+<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>
+      </div>
+      <div class="industrys">
+        <p class="text">金融(8)</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">
+        <p class="text">重要(8)</p>
+      </div>
+      <div class="industrys">
+        <p class="text">一般(6)</p>
+      </div>
+      <div class="industryManagement">
+        <p class="text">标签管理</p>
+      </div>
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  }
+}
+
+</script>
+
+<style lang="less">
+  
+</style>

src/pages/find/find.vue

@@ -40,66 +40,73 @@ export default {
     //   console.log(`Key: ${key}, Value:  ${value}`);
     // }
 
+    //判断当前环境：开发环境/生产环境
+    // if (process.env.NODE_ENV === 'development') {
+    //   console.log('开发环境');
+    // } else {
+    //   console.log('生产环境');
+    // }
+
   },
 
   methods: {
-        // autoPlay() {
-        //     let that = this;
-        //     for(let i=0; i<this.imgArr.length; i++) {
-        //         this.imgArr[i] = this.nowIndex;
-        //     };
-        //     if (this.nowIndex == 0) {
-        //        this.timeObj = setInterval(() => {
-        //             that.nowIndex++;
-        //         }, 2500);
-        //     };
-        //     if (this.nowIndex == this.imgArr.length) {
-        //        clearInterval(this.timeObj);
-        //        this.nowIndex = 0;
-        //     };
-        // }
+    // autoPlay() {
+    //     let that = this;
+    //     for(let i=0; i<this.imgArr.length; i++) {
+    //         this.imgArr[i] = this.nowIndex;
+    //     };
+    //     if (this.nowIndex == 0) {
+    //        this.timeObj = setInterval(() => {
+    //             that.nowIndex++;
+    //         }, 2500);
+    //     };
+    //     if (this.nowIndex == this.imgArr.length) {
+    //        clearInterval(this.timeObj);
+    //        this.nowIndex = 0;
+    //     };
+    // }
   }
 }
 </script>
 
 <style lang="less">
-    .cx-find {
-        .bannerBox {
-            margin: 10rpx 5%;
-            position: relative;
-            width: 90%;
-            height: 350rpx;
-            .imgBox {
-                width: 100%;
-                height: 100%;
-                .bannerImg {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-            .circleBox {
-                position: absolute;
-                bottom: 0;
-                left: 0;
-                margin-left: 162rpx;
-                width: 350rpx;
-                height: 12rpx;
-                display: flex;
-                p {
-                    margin-left: 8rpx;
-                    justify-content: center;
-                    margin-top: 1rpx;
-                    float: left;
-                    width: 40rpx;
-                    height: 10rpx;
-                }
-            }
-        }
-        .bannerCircle {
-            background: rgba(0, 0, 0, .3);
+  .cx-find {
+    .bannerBox {
+      margin: 10rpx 5%;
+      position: relative;
+      width: 90%;
+      height: 350rpx;
+      .imgBox {
+        width: 100%;
+        height: 100%;
+        .bannerImg {
+          width: 100%;
+          height: 100%;
         }
-        .selected {
-            background: rgba(208, 2, 27, .7);
+      }
+      .circleBox {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        margin-left: 162rpx;
+        width: 350rpx;
+        height: 12rpx;
+        display: flex;
+        p {
+          margin-left: 8rpx;
+          justify-content: center;
+          margin-top: 1rpx;
+          float: left;
+          width: 40rpx;
+          height: 10rpx;
         }
+      }
     }
+    .bannerCircle {
+      background: rgba(0, 0, 0, .3);
+    }
+    .selected {
+      background: rgba(208, 2, 27, .7);
+    }
+  }
 </style>

src/pages/chat/chat.vue → src/pages/index/chat.vue

@@ -1,6 +1,5 @@
 <template>
-  <view>
-
+  <div class="cx-chat">
     <div class="chatTable" @click="chatTable">
 
       <div class="mine chatTableDiv" v-for="(item, index) in chatRecord" :key="index" :class="item.sendId == 1 ? 'rights' : 'lefts'">
@@ -128,7 +127,7 @@
       <video :src="bigVideoUrl" v-if="picOrVideoFlag" autoplay = true></video>
     </div>
     
-  </view>
+  </div>
 </template>
 
 <script>
@@ -732,345 +731,8 @@ export default {
     }
   }
 }
-
 </script>
 
 <style lang="less">
-  @width: 56rpx;
-  @height: 56rpx;
-  @margin: 10rpx;
-  body {
-    background-color: #f8f8ff;
-  }
-
-  /*聊天面板（不含底部输入框及功能栏）*/
-  .chatTable {
-    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;
-    }
-    .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;
-      }
-    }
-    .meAvatUrl {
-      width: 72rpx;
-      height: 72rpx;
-      border-radius: 72rpx;
-    }
-    .otherAvatUrl {
-      width: 72rpx;
-      height: 72rpx;
-      border-radius: 72rpx;
-    }
-    .content {
-      width: 200rpx;
-      height: 200rpx;
-      border-radius: 20rpx;
-    }
-    video {
-      max-width: 350rpx;
-      max-height: 150rpx;
-    }
-    .me {
-      margin-right: 10rpx;
-      word-break: break-word;
-      background-color: #00cd66;
-    }
-    .others {
-      margin-left: 10rpx;
-      word-break: break-word;
-      background-color: #fff;
-    }
-    .lefts {
-      justify-content: flex-start;
-    }
-    .rights {
-      justify-content: flex-end;
-    }
-    .mine {
-      /* justify-content: flex-end; */
-      /* display: flex; */
-      
-      img {
-        margin-left: 10rpx;
-      }
-      video {
-        margin-left: 10rpx;
-        width: 200rpx;
-        height: 200rpx;
-        border-radius: 20rpx;
-      }
-      .emojiContent {
-        width: 48rpx;
-        height: 48rpx;
-      }
-      .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; }  /* 动画开始时的不透明度 */
-            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;
-        }
-      }
-
-    }
-    .audioPlay {
-        width: 150rpx;
-        height: 50rpx;
-        border-radius: 30rpx;
-        background: #00cd66;
-        img {
-          width: 32rpx;
-          height: 32rpx;
-        }
-        .audioTime {
-
-        }
-    }
-    .audioLeft {
-      margin: 8rpx 5rpx 0 10rpx;
-    }
-    .audioRight {
-      margin: 8rpx 5rpx 0 109rpx;
-    }
-    .cancelAudioBox {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 93vh;
-      /* border: 1px solid #f00; */
-      background-color: rgba(220, 220, 220, .7);
-      .cancelAudio {
-        height: 300rpx;
-        margin: auto 0;
-        p {
-          width: 200rpx;
-          height: 200rpx;
-          border-radius: 100rpx;
-          line-height: 200rpx;
-          margin: 73rpx auto;
-          font-size: 24rpx;
-          color: #fff;
-          text-align: center;
-        }
-      }
-      .defaultBg {
-        background-color: rgba(105, 105, 105, .7);
-      }
-      .cancelBg {
-        background-color: rgba(243, 32, 32, 0.7);
-      }
-    }
-  }
-  .shwoBigPicBox {
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    background-color: #000;
-    p {
-      position: absolute;
-      top: 0;
-      right: 0;
-      text-align: right;
-      font-size: 64rpx;
-      color: #fff;
-      z-index: 999;
-    }
-    img {
-      width: 100%;
-      height: 450rpx;
-      margin: 400rpx auto;
-    }
-    video {
-      width: 100%;
-      height: 100vh;
-    }
-  }
-
-  /*清除浮动*/
-  .clear {
-      clear: both;
-  }
-
-  /*底部功能选项（所有）*/
-  .bottomOperation {
-    width: 100%;
-    min-height: 70rpx;
-    max-height: 250rpx;
-    line-height: 70rpx;
-    z-index: 99;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    background-color: #f5f5f5;
-    display: flex;
-    .chatInput {
-      margin-left: 10rpx;
-      .textContent {   
-        width: 500rpx;
-        min-height: 60rpx;
-        max-height: 250rpx;
-        line-height: 50rpx;
-        padding: 6rpx 10rpx;
-        box-sizing: border-box;
-        /* border: 1px solid #f00; */
-        background-color: #fff;
-        margin-top: 10rpx;
-        font-size: 28rpx;
-      }
-    }
-    .audio {
-      margin-left: 5rpx;
-      img {
-        margin-top: @margin;
-        width: @width;
-        height: @height;
-      }
-    }
-    .text {
-      button {
-        margin: 10rpx 0 0 10rpx;
-        width: 500rpx;
-        height: 50rpx;
-        font-size: 25rpx;
-      }
-    }
-    .speakBtn {
-      /* background: linear-gradient(to bottom,#fff, #00cd66); */
-      background: #00cd66;
-    }
-    .btnSpeak {
-      background:  #f8f8ff;
-    }
-    .expSvg {
-      margin-left: 10rpx;
-      img {
-        margin-top: @margin;
-        width: @width;
-        height: @height;
-      }
-    }
-    .showOper {
-      margin-left: 15rpx;
-      img {
-        margin-top: @margin;
-        width: @width;
-        height: @height;
-      }
-    }
-    .sendBtn {
-      margin-left: 15rpx;
-      button {
-        padding: 0;
-        margin-top: 10rpx;
-        width: 90rpx;
-        height: 50rpx;
-        background-color: #00cd66;
-        color: #fff;
-        font-size: 20rpx;
-        text-align: center;
-      }
-    }
-  }
-
-  /*底部 + 功能栏*/
-  .options {
-    /* display: flex;
-    justify-content: center; */
-    padding-left: 10rpx;
-    box-sizing: border-box;
-    img {
-      width: 80rpx;
-      height: 80rpx;
-      margin: 5rpx 10rpx 10rpx 0;
-    }
-    .optionChoose {
-      /* flex: 1; */
-    }
-  }
-  
-  /*表情模态框*/
-  .emojiBox {
-    width: 100%;
-    height: 210rpx;
-    z-index: 999;
-    position: fixed;
-    left: 0;
-    bottom: -50vh;
-    /* white-space: normal; */
-    .emoji {
-      float: left;
-      margin: 10rpx;
-      width: 48rpx;
-      height: 48rpx;
-    }
-    /* .hiddenBox {
-      bottom: -50vh;
-    } */
-    /* .showBox {
-      bottom: 50vh;
-      transition-duration: 1s;
-    } */
-  }
+    
 </style>

src/pages/index/index.vue

@@ -609,7 +609,7 @@
         },
 
         onLoad() {
-            
+            console.log(wx.getMenuButtonBoundingClientRect());
         },
 
         methods: {

src/static/less/cx-style.less

@@ -1456,6 +1456,527 @@
     }
 }
 
+/*名片夹*/
+.cx-card-older {
+    padding: 0 30rpx;
+  .topDiv {
+    width: 750rpx;
+    height: auto;
+    display: flex;
+      .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;
+        }
+      }
+      .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;
+        }
+      }
+  }
+  .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 {
+            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;
+          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;
+      }
+  }
+
+}
+
+/*聊一聊*/
+.cx-chat {
+    @width: 56rpx;
+    @height: 56rpx;
+    @margin: 10rpx;
+
+    body {
+        background-color: #f8f8ff;
+    }
+
+    /*聊天面板（不含底部输入框及功能栏）*/
+    .chatTable {
+        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;
+        }
+
+        .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;
+            }
+        }
+
+        .meAvatUrl {
+            width: 72rpx;
+            height: 72rpx;
+            border-radius: 72rpx;
+        }
+
+        .otherAvatUrl {
+            width: 72rpx;
+            height: 72rpx;
+            border-radius: 72rpx;
+        }
+
+        .content {
+            width: 200rpx;
+            height: 200rpx;
+            border-radius: 20rpx;
+        }
+
+        video {
+            max-width: 350rpx;
+            max-height: 150rpx;
+        }
+
+        .me {
+            margin-right: 10rpx;
+            word-break: break-word;
+            background-color: #00cd66;
+        }
+
+        .others {
+            margin-left: 10rpx;
+            word-break: break-word;
+            background-color: #fff;
+        }
+
+        .lefts {
+            justify-content: flex-start;
+        }
+
+        .rights {
+            justify-content: flex-end;
+        }
+
+        .mine {
+            /* justify-content: flex-end; */
+            /* display: flex; */
+
+            img {
+                margin-left: 10rpx;
+            }
+
+            video {
+                margin-left: 10rpx;
+                width: 200rpx;
+                height: 200rpx;
+                border-radius: 20rpx;
+            }
+
+            .emojiContent {
+                width: 48rpx;
+                height: 48rpx;
+            }
+
+            .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;
+                        }
+
+                        /* 动画开始时的不透明度 */
+                        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;
+                }
+            }
+
+        }
+
+        .audioPlay {
+            width: 150rpx;
+            height: 50rpx;
+            border-radius: 30rpx;
+            background: #00cd66;
+
+            img {
+                width: 32rpx;
+                height: 32rpx;
+            }
+
+            .audioTime {}
+        }
+
+        .audioLeft {
+            margin: 8rpx 5rpx 0 10rpx;
+        }
+
+        .audioRight {
+            margin: 8rpx 5rpx 0 109rpx;
+        }
+
+        .cancelAudioBox {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 93vh;
+            /* border: 1px solid #f00; */
+            background-color: rgba(220, 220, 220, .7);
+
+            .cancelAudio {
+                height: 300rpx;
+                margin: auto 0;
+
+                p {
+                    width: 200rpx;
+                    height: 200rpx;
+                    border-radius: 100rpx;
+                    line-height: 200rpx;
+                    margin: 73rpx auto;
+                    font-size: 24rpx;
+                    color: #fff;
+                    text-align: center;
+                }
+            }
+
+            .defaultBg {
+                background-color: rgba(105, 105, 105, .7);
+            }
+
+            .cancelBg {
+                background-color: rgba(243, 32, 32, 0.7);
+            }
+        }
+    }
+
+    .shwoBigPicBox {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100vh;
+        background-color: #000;
+
+        p {
+            position: absolute;
+            top: 0;
+            right: 0;
+            text-align: right;
+            font-size: 64rpx;
+            color: #fff;
+            z-index: 999;
+        }
+
+        img {
+            width: 100%;
+            height: 450rpx;
+            margin: 400rpx auto;
+        }
+
+        video {
+            width: 100%;
+            height: 100vh;
+        }
+    }
+
+    /*清除浮动*/
+    .clear {
+        clear: both;
+    }
+
+    /*底部功能选项（所有）*/
+    .bottomOperation {
+        width: 100%;
+        min-height: 70rpx;
+        max-height: 250rpx;
+        line-height: 70rpx;
+        z-index: 99;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        background-color: #f5f5f5;
+        display: flex;
+
+        .chatInput {
+            margin-left: 10rpx;
+
+            .textContent {
+                width: 500rpx;
+                min-height: 60rpx;
+                max-height: 250rpx;
+                line-height: 50rpx;
+                padding: 6rpx 10rpx;
+                box-sizing: border-box;
+                /* border: 1px solid #f00; */
+                background-color: #fff;
+                margin-top: 10rpx;
+                font-size: 28rpx;
+            }
+        }
+
+        .audio {
+            margin-left: 5rpx;
+
+            img {
+                margin-top: @margin;
+                width: @width;
+                height: @height;
+            }
+        }
+
+        .text {
+            button {
+                margin: 10rpx 0 0 10rpx;
+                width: 500rpx;
+                height: 50rpx;
+                font-size: 25rpx;
+            }
+        }
+
+        .speakBtn {
+            /* background: linear-gradient(to bottom,#fff, #00cd66); */
+            background: #00cd66;
+        }
+
+        .btnSpeak {
+            background: #f8f8ff;
+        }
+
+        .expSvg {
+            margin-left: 10rpx;
+
+            img {
+                margin-top: @margin;
+                width: @width;
+                height: @height;
+            }
+        }
+
+        .showOper {
+            margin-left: 15rpx;
+
+            img {
+                margin-top: @margin;
+                width: @width;
+                height: @height;
+            }
+        }
+
+        .sendBtn {
+            margin-left: 15rpx;
+
+            button {
+                padding: 0;
+                margin-top: 10rpx;
+                width: 90rpx;
+                height: 50rpx;
+                background-color: #00cd66;
+                color: #fff;
+                font-size: 20rpx;
+                text-align: center;
+            }
+        }
+    }
+
+    /*底部 + 功能栏*/
+    .options {
+        /* display: flex;
+    justify-content: center; */
+        padding-left: 10rpx;
+        box-sizing: border-box;
+
+        img {
+            width: 80rpx;
+            height: 80rpx;
+            margin: 5rpx 10rpx 10rpx 0;
+        }
+
+        .optionChoose {
+            /* flex: 1; */
+        }
+    }
+
+    /*表情模态框*/
+    .emojiBox {
+        width: 100%;
+        height: 210rpx;
+        z-index: 999;
+        position: fixed;
+        left: 0;
+        bottom: -50vh;
+
+        /* white-space: normal; */
+        .emoji {
+            float: left;
+            margin: 10rpx;
+            width: 48rpx;
+            height: 48rpx;
+        }
+
+        /* .hiddenBox {
+      bottom: -50vh;
+    } */
+        /* .showBox {
+      bottom: 50vh;
+      transition-duration: 1s;
+    } */
+    }
+}
+
 /*个人中心*/
 .cx-mine {
     .topDiv {