新上传

package-lock.json

@@ -2139,6 +2139,12 @@
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
       "dev": true
     },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npm.taobao.org/asap/download/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+      "optional": true
+    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npm.taobao.org/asn1/download/asn1-0.2.4.tgz",
@@ -2473,8 +2479,7 @@
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npm.taobao.org/big.js/download/big.js-5.2.2.tgz",
-      "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=",
-      "dev": true
+      "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg="
     },
     "binary-extensions": {
       "version": "1.13.1",
@@ -4333,8 +4338,7 @@
     "emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/emojis-list/download/emojis-list-3.0.0.tgz",
-      "integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang=",
-      "dev": true
+      "integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang="
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -4390,7 +4394,6 @@
       "version": "0.1.7",
       "resolved": "https://registry.npm.taobao.org/errno/download/errno-0.1.7.tgz",
       "integrity": "sha1-RoTXF3mtOa8Xfj8AeZb3xnyFJhg=",
-      "dev": true,
       "requires": {
         "prr": "~1.0.1"
       }
@@ -5735,8 +5738,7 @@
     "graceful-fs": {
       "version": "4.2.3",
       "resolved": "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.3.tgz",
-      "integrity": "sha1-ShL/G2A3bvCYYsIJPt2Qgyi+hCM=",
-      "dev": true
+      "integrity": "sha1-ShL/G2A3bvCYYsIJPt2Qgyi+hCM="
     },
     "gzip-size": {
       "version": "5.1.1",
@@ -6174,6 +6176,12 @@
       "integrity": "sha1-Cpf7h2mG6AgcYxFg+PnziRV/AEM=",
       "dev": true
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npm.taobao.org/image-size/download/image-size-0.5.5.tgz",
+      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
+      "optional": true
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/import-cwd/download/import-cwd-2.1.0.tgz",
@@ -6725,7 +6733,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/json5/download/json5-1.0.1.tgz?cache=0&sync_timestamp=1584388298930&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjson5%2Fdownload%2Fjson5-1.0.1.tgz",
       "integrity": "sha1-d5+wAYYE+oVOrL9iUhgNg1Q+Pb4=",
-      "dev": true,
       "requires": {
         "minimist": "^1.2.0"
       }
@@ -6790,6 +6797,53 @@
         "invert-kv": "^2.0.0"
       }
     },
+    "less": {
+      "version": "3.11.1",
+      "resolved": "https://registry.npm.taobao.org/less/download/less-3.11.1.tgz?cache=0&sync_timestamp=1581400737293&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fless%2Fdownload%2Fless-3.11.1.tgz",
+      "integrity": "sha1-xr8I454CQE/mswej3/+v3FW9NuI=",
+      "requires": {
+        "clone": "^2.1.2",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "mime": "^1.4.1",
+        "mkdirp": "^0.5.0",
+        "promise": "^7.1.1",
+        "request": "^2.83.0",
+        "source-map": "~0.6.0",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npm.taobao.org/clone/download/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
+        },
+        "mime": {
+          "version": "1.6.0",
+          "resolved": "https://registry.npm.taobao.org/mime/download/mime-1.6.0.tgz",
+          "integrity": "sha1-Ms2eXGRVO9WNGaVor0Uqz/BJgbE=",
+          "optional": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npm.taobao.org/less-loader/download/less-loader-5.0.0.tgz",
+      "integrity": "sha1-SY3eOmxsT4h0WO6e0/CGoSrRtGY=",
+      "requires": {
+        "clone": "^2.1.1",
+        "loader-utils": "^1.1.0",
+        "pify": "^4.0.1"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npm.taobao.org/clone/download/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
+        }
+      }
+    },
     "levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npm.taobao.org/levn/download/levn-0.3.0.tgz",
@@ -6816,7 +6870,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-1.4.0.tgz?cache=0&sync_timestamp=1584445207623&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Floader-utils%2Fdownload%2Floader-utils-1.4.0.tgz",
       "integrity": "sha1-xXm140yzSxp07cbB+za/o3HVphM=",
-      "dev": true,
       "requires": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -7160,8 +7213,7 @@
     "minimist": {
       "version": "1.2.5",
       "resolved": "https://registry.npm.taobao.org/minimist/download/minimist-1.2.5.tgz",
-      "integrity": "sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI=",
-      "dev": true
+      "integrity": "sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI="
     },
     "minipass": {
       "version": "3.1.1",
@@ -7256,7 +7308,6 @@
       "version": "0.5.4",
       "resolved": "https://registry.npm.taobao.org/mkdirp/download/mkdirp-0.5.4.tgz?cache=0&sync_timestamp=1584986102665&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmkdirp%2Fdownload%2Fmkdirp-0.5.4.tgz",
       "integrity": "sha1-/QFQSmeX7Fyb6B/0PSBJYe1kpRI=",
-      "dev": true,
       "requires": {
         "minimist": "^1.2.5"
       }
@@ -7947,8 +7998,7 @@
     "pify": {
       "version": "4.0.1",
       "resolved": "https://registry.npm.taobao.org/pify/download/pify-4.0.1.tgz",
-      "integrity": "sha1-SyzSXFDVmHNcUCkiJP2MbfQeMjE=",
-      "dev": true
+      "integrity": "sha1-SyzSXFDVmHNcUCkiJP2MbfQeMjE="
     },
     "pinkie": {
       "version": "2.0.4",
@@ -8596,6 +8646,15 @@
       "integrity": "sha1-eCDZsWEgzFXKmud5JoCufbptf+I=",
       "dev": true
     },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npm.taobao.org/promise/download/promise-7.3.1.tgz",
+      "integrity": "sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=",
+      "optional": true,
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/promise-inflight/download/promise-inflight-1.0.1.tgz",
@@ -8615,8 +8674,7 @@
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/prr/download/prr-1.0.1.tgz",
-      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
-      "dev": true
+      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
     },
     "pseudomap": {
       "version": "1.0.2",
@@ -9668,8 +9726,7 @@
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
-      "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
-      "dev": true
+      "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM="
     },
     "source-map-resolve": {
       "version": "0.5.3",
@@ -10283,8 +10340,7 @@
     "tslib": {
       "version": "1.11.1",
       "resolved": "https://registry.npm.taobao.org/tslib/download/tslib-1.11.1.tgz",
-      "integrity": "sha1-6xXRKIJ/vuKEFUnhcfRe0zisfjU=",
-      "dev": true
+      "integrity": "sha1-6xXRKIJ/vuKEFUnhcfRe0zisfjU="
     },
     "tty-browserify": {
       "version": "0.0.0",

package.json

@@ -34,6 +34,8 @@
     "@dcloudio/uni-mp-weixin": "^2.0.0-26520200314001",
     "@dcloudio/uni-stat": "^2.0.0-26520200314001",
     "flyio": "^0.6.2",
+    "less": "^3.11.1",
+    "less-loader": "^5.0.0",
     "regenerator-runtime": "^0.12.1",
     "vue": "^2.6.11",
     "vuex": "^3.0.1"

src/pages.json

@@ -1,10 +1,16 @@
 {
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+	"pages": [
 		{
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": "uni-app"
 			}
+		},
+		{
+			"path": "pages/card/card",
+			"style": {
+				"navigationBarTitleText": "林易婷"
+			}
 		}
 	],
 	"globalStyle": {

src/pages/card/card.vue

@@ -0,0 +1,938 @@
+<template>
+    <div class="cx-card">
+        <movable-area class="moveMenuBox">
+            <movable-view class="moveMenuCont" :x="tran" :y="vert" @touchend="handleTouchEnd" direction="all">
+                <img class="moveMenuPic" src="/static/images/moreOptions.svg">
+            </movable-view>
+            <div class="subject">
+                <div class="topPic">
+                  <img class="pic" src="/static/images/Computer-Background.jpg">
+                </div>
+                <div class="rightTopPic">
+                  <img class="pic" src="/static/images/camera.png" @click="console.log(1111)">
+                  <p class="title">更换图片</p>
+                </div>
+                <div class="contanter">
+                  <div class="addCard">
+                    <img class="addPic" src="/static/images/add.svg">
+                    <p class="add">创建名片</p>
+                  </div>
+                  <div class="optionBox">
+                    <p class="switchCard">管理/切换名片</p>
+                    <p class="modifyCard">修改名片</p>
+                    <p class="setStyle">设置风格</p>
+                    <div class="clear"></div>
+                  </div>
+                  <div class="shareCardBox">
+                    <div class="shareCard">
+                      <p class="text">分享名片</p>
+                    </div>
+                    <div class="qrCodeBox">
+                      <img class="qrCode" src="/static/images/qrCode.png">
+                      <p class="text">名片码</p>
+                    </div>
+                    <div class="clear"></div>
+                  </div>
+                  <div class="modelSwitchBox">
+                    <div class="optionsBox">
+                      <p class="card" :class="modelSwitchType == 'card' ? 'blueCss' : 'defaultCss'" @click="card()">名片
+                      </p>
+                      <div class="division">|</div>
+                      <p class="shop" :class="modelSwitchType == 'shop' ? 'blueCss' : 'defaultCss'" @click="shop()">商城
+                      </p>
+                      <div class="division">|</div>
+                      <p class="show" :class="modelSwitchType == 'show' ? 'blueCss' : 'defaultCss'" @click="show()">展厅
+                      </p>
+                    </div>
+
+                    <div class="cardModel" v-if="modelSwitchType == 'card'">
+                      <div class="looksCareBox">
+                        <div class="looksCare">
+                          <div class="userAvatarBox">
+                            <div class="avatarBox">
+                              <img class="avatar" src="/static/images/headPic1.jpg">
+                              <img class="crown" src="/static/images/crown.svg">
+                              <img class="Authentication" src="/static/images/presonAuthentication.svg">
+                            </div>
+                            <div class="avatarBox">
+                              <img class="avatar" src="/static/images/headPic2.jpg">
+                            </div>
+                            <div class="avatarBox">
+                              <img class="avatar" src="/static/images/headPic3.jpg">
+                              <img class="crown" src="/static/images/crown.svg">
+                            </div>
+                            <div class="avatarBox">
+                              <img class="avatar" src="/static/images/headPic4.jpg">
+                            </div>
+                            <div class="avatarBox">
+                              <img class="avatar" src="/static/images/headPic5.jpg">
+                            </div>
+                          </div>
+
+                          <div class="whoLooksCareMe">
+                            <p class="text">889人看过</p>
+                            <p class="arrow">></p>
+                          </div>
+                          <div class="clear"></div>
+
+                        </div>
+                        <div class="looksCare">
+                          <div class="userAvatarBox">
+                            <div class="avatarBox">
+                              <img class="avatar" src="/static/images/headPic1.jpg">
+                              <img class="crown" src="/static/images/crown.svg">
+                              <img class="Authentication" src="/static/images/enterpriseAuthentication.svg">
+                            </div>
+                            <div class="avatarBox">
+                              <img class="avatar" src="/static/images/headPic2.jpg">
+                            </div>
+                            <div class="avatarBox">
+                              <img class="avatar" src="/static/images/headPic3.jpg">
+                              <img class="crown" src="/static/images/crown.svg">
+                            </div>
+                            <div class="avatarBox">
+                              <img class="avatar" src="/static/images/headPic4.jpg">
+                            </div>
+                            <div class="avatarBox">
+                              <img class="avatar" src="/static/images/headPic5.jpg">
+                            </div>
+                          </div>
+
+                          <div class="whoLooksCareMe">
+                            <p class="text">谁收藏了我</p>
+                            <p class="arrow">></p>
+                            <div class="clear"></div>
+                          </div>
+                          <div class="clear"></div>
+                        </div>
+                      </div>
+
+                      <!--我的印象-->
+                      <div class="divisionDiv">
+                        <p class="left">—————</p>
+                        <p class="text">我的印象</p>
+                        <p class="right">—————</p>
+                      </div>
+
+                      <div class="sign">
+                        <div class="signDetail">
+                          <img class="pic" src="/static/images/clickPraise.svg">
+                          <span class="text">靠谱</span>
+                          <span class="num">10</span>
+                        </div>
+                        <div class="signDetail">
+                          <img class="pic" src="/static/images/clickPraise.svg">
+                          <span class="text">幽默</span>
+                          <span class="num">8</span>
+                        </div>
+                        <div class="signDetail">
+                          <img class="pic" src="/static/images/clickPraise.svg">
+                          <span class="text">颜值爆表</span>
+                          <span class="num">8</span>
+                        </div>
+                        <div class="signDetail">
+                          <img class="pic" src="/static/images/clickPraise.svg">
+                          <span class="text">有实力</span>
+                          <span class="num">10</span>
+                        </div>
+                        <div class="signDetail">
+                          <img class="pic" src="/static/images/clickPraise.svg">
+                          <span class="text">友好</span>
+                          <span class="num">8</span>
+                        </div>
+                        <div class="signDetail">
+                          <img class="pic" src="/static/images/clickPraise.svg">
+                          <p class="text">真诚</p>
+                          <p class="num">8</p>
+                        </div>
+                      </div>
+
+                      <!--名片模块主体内容-->
+                      <div class="mainContent">
+                        <div class="modelName">
+                          <div class="titleBox" data-index="1" @click="panel">
+                            <div class="title">公司简介</div>
+                            <div class="titlePicBox">
+                              <img class="titlePic"
+                                :src="showIndex == 1 ? '/static/images/arrowUp.svg' : '/static/images/arrowDown.svg'">
+                            </div>
+                            <!-- <div class="more" v-if="showIndex == 1">
+                                        <img class="morePic" src="/static/images/moreOperation.svg">
+                                    </div> -->
+                          </div>
+                        </div>
+                        <div class="modelBox" v-if="showIndex == 1">
+                          <div class="contDetail">
+                            <div class="audioCont">
+                              <div class="spot">
+                                <img class="spotPic" src="/static/images/spot.svg">
+                              </div>
+                              <div class="vioceBox">
+                                <img class="viocePic" src="/static/images/vioces.svg">
+                                <p class="text">4:00</p>
+                                <div class="clear"></div>
+                              </div>
+                              <div class="clear"></div>
+                            </div>
+                          </div>
+
+                          <div class="articleBox1">
+                            <img class="articlePic1" src="/static/images/testPic.png">
+                          </div>
+
+                          <div class="articleCont1">
+                            <p class="text">
+                              文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
+                            </p>
+                          </div>
+
+                          <div class="articleBox2">
+                            <img class="articlePic2" src="/static/images/testPic2.png">
+                            <img class="articlePic3" src="/static/images/testPic3.png">
+                          </div>
+
+                          <div class="articleCont2">
+                            <p class="text">
+                              文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
+                            </p>
+                          </div>
+
+                          <div class="articleCont3">
+                            <img class="articlePic4" src="/static/images/testPic3.png">
+                            <p class="text">
+                              文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
+                            </p>
+                          </div>
+                        </div>
+
+                        <div class="modelName">
+                          <div class="titleBox" data-index="2" @click="panel">
+                            <div class="title">团队成员</div>
+                            <div class="titlePicBox">
+                              <img class="titlePic"
+                                :src="showIndex == 2 ? '/static/images/arrowUp.svg' : '/static/images/arrowDown.svg'">
+                            </div>
+                            <!-- <div class="more" v-if="showIndex == 1">
+                                        <img class="morePic" src="/static/images/moreOperation.svg">
+                                    </div> -->
+                          </div>
+                        </div>
+                        <div class="modelBox" v-if="showIndex == 2">
+                          <div class="teamArticleCont1">
+                            <img class="teamArticlePic1" src="/static/images/headPic2.jpg">
+                            <p class="text">总经理:陈浩</p>
+                          </div>
+                          <div class="teamArticleCont2">
+                            <p class="text">
+                              文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
+                            </p>
+                          </div>
+                          <div class="teamArticleCont3">
+                            <img class="teamArticlePi2" src="/static/images/headPic2.jpg">
+                            <p class="text">总经理:陈浩</p>
+                          </div>
+                          <div class="teamArticleCont4">
+                            <p class="text">
+                              文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
+                            </p>
+                          </div>
+                        </div>
+
+                        <div class="modelName">
+                          <div class="titleBox" data-index="3" @click="panel">
+                            <div class="title">大事件</div>
+                            <div class="titlePicBox">
+                              <img class="titlePic"
+                                :src="showIndex == 3 ? '/static/images/arrowUp.svg' : '/static/images/arrowDown.svg'">
+                            </div>
+                          </div>
+                        </div>
+                        <div class="modelBox" v-if="showIndex == 3">
+                          <div class="eventArticleBox">
+                            <img class="eventArticlePic1" src="/static/images/testPic2.png">
+                            <img class="eventArticlePic2" src="/static/images/testPic3.png">
+                          </div>
+                        </div>
+
+                        <!--自定义-->
+                        <div class="modelName">
+                          <div class="titleBox" data-index="4" @click="panel">
+                            <div class="title">自定义</div>
+                            <div class="titlePicBox">
+                              <img class="titlePic"
+                                :src="showIndex == 4 ? '/static/images/arrowUp.svg' : '/static/images/arrowDown.svg'">
+                            </div>
+                          </div>
+                        </div>
+                        <div class="modelBox" v-if="showIndex == 4">
+                          <div class="customArticle1">
+                            <img class="customArticlePic1" src="/static/images/spot.svg">
+                            <p class="text">
+                              文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
+                            </p>
+                            <div class="clear"></div>
+                          </div>
+                          <div class="customArticle2">
+                            <img class="customArticlePic2" src="/static/images/spot.svg">
+                            <p class="text">
+                              文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
+                            </p>
+                            <div class="clear"></div>
+                          </div>
+                        </div>
+
+                        <!--新增模块-->
+                        <div class="addNewModel">
+                          <p class="text">新增模块</p>
+                        </div>
+
+                      </div>
+                    </div>
+
+                    <div v-if="modelSwitchType == 'shop'">
+                      名片内容
+                    </div>
+                    <div v-if="modelSwitchType == 'show'">
+                      展厅内容
+                    </div>
+                  </div>
+                </div>
+            </div>
+        </movable-area>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                modelSwitchType: 'card',
+                showIndex: 0,
+                tran: 350,    //横轴
+                vert: 500     //纵轴
+            }
+        },
+
+        onLoad() {
+            
+        },
+
+        methods: {
+            card() {
+                this.modelSwitchType = 'card';
+            },
+            shop() {
+                this.modelSwitchType = 'shop';
+            },
+            show() {
+                this.modelSwitchType = 'show';
+            },
+            panel(e) {
+                console.log(e);
+                if (e.currentTarget.dataset.index != this.showIndex) {
+                    this.showIndex = e.currentTarget.dataset.index;
+                } else {
+                    this.showIndex = 0;
+                }
+            },
+            handleTouchEnd(e) {
+
+                // let xNumLeft = 20 / 750 * wx.getSystemInfoSync().windowWidth;
+                // let xNumRight = 680 / 750 * wx.getSystemInfoSync().windowWidth;
+                // let x = e.mp.changedTouches[0].pageX;
+                // let average = 375 / 750 * wx.getSystemInfoSync().windowWidth;
+                // let yNum = e.mp.changedTouches[0].pageY;
+
+                // if (x <= average) {
+                //     this.tran = 0;
+                //     this.vert = yNum;
+                // } else {
+                //     this.tran = 700;
+                //     this.vert = yNum;
+                // }
+
+                this.tran = e.mp.changedTouches[0].pageX;
+                this.vert = e.mp.changedTouches[0].pageY - 15;
+
+                if (this.tran <= 188) {
+                    console.log('超过中间线了');
+                    this.tran = 0;
+                } else {
+                    this.tran = 350;
+                }
+                console.log('X: ', this.tran);
+                console.log('Y: ', this.vert);
+            }
+        }
+    }
+</script>
+
+<style lang="less">
+    .cx-card {
+         /*定位菜单*/
+        .moveMenuBox {
+            width: 100%;
+            height: 100%;
+            .moveMenuCont {
+                position: fixed;
+                z-index: 999;
+                width: 50rpx;
+                height: 50rpx;
+                background: rgba(0, 0, 0, .2);
+                .moveMenuPic {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+            .subject {
+                .topPic {
+                    width: 750rpx;
+                    height: 550rpx;
+                    .pic {
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+                .rightTopPic {
+                    position: absolute;
+                    top: 30rpx;
+                    right: 40rpx;
+                    width: 120rpx;
+                    height: 130rpx;
+                    .pic {
+                        margin-left: 20rpx;
+                        width: 80rpx;
+                        height: 60rpx;
+                    }
+                    .title {
+                        width: 120rpx;
+                        height: 42rpx;
+                        line-height: 42rpx;
+                        font-size: 30rpx;
+                        color: #fff;
+                    }
+                }
+                .contanter {
+                    .addCard {
+                        position: relative;
+                        top: -160rpx;
+                        margin-left: 20rpx;
+                        width: 710rpx;
+                        height: 430rpx;
+                        border-radius: 20rpx;
+                        background-color: #fff;
+                        box-shadow: 0 0 8rpx 8rpx rgba(0, 0, 0, 0.2);
+                        .addPic {
+                            margin: 132rpx 305rpx 20rpx 305rpx;
+                            width: 100rpx;
+                            height: 100rpx;
+                        }
+                        .add {
+                            text-align: center;
+                            color: #434656;
+                        }
+                    }
+                    .optionBox {
+                        margin: -100rpx 0 67rpx 20rpx;
+                        padding-left: 20rpx;
+                        width: 710rpx;
+                        height: auto;
+                        .switchCard {
+                            width: 195rpx;
+                            height: 42rpx;
+                            line-height: 42rpx;
+                            color: #50A8FC;
+                            font-size: 30rpx;
+                            float: left;
+                        }
+                        .modifyCard {
+                            width: 120rpx;
+                            height: 42rpx;
+                            margin-left: 195rpx;
+                            color: #50A8FC;
+                            font-size: 30rpx;
+                            float: left;
+                        }
+                        .setStyle {
+                            width: 120rpx;
+                            height: 42rpx;
+                            margin-left: 40rpx;
+                            color: #50A8FC;
+                            font-size: 30rpx;
+                            float: left;
+                        }
+                    }
+                    .shareCardBox {
+                        margin-left: 20rpx;
+                        width: 100%;
+                        .shareCard {
+                            margin-left: 47rpx;
+                            width: 530rpx;
+                            height: 96rpx;
+                            background: #50A8FC;
+                            border-radius: 43rpx;
+                            box-shadow: 0 6rpx 10rpx 0 rgba(4, 62, 119, 0.36);
+                            float: left;
+                            .text {
+                                margin: 23rpx auto;
+                                width: 144rpx;
+                                height: 50rpx;
+                                line-height: 50rpx;
+                                font-size: 36rpx;
+                                color: #fff;
+                            }
+                        }
+                        .qrCodeBox {
+                            margin-left: 30rpx;
+                            width: 85rpx;
+                            height: 105rpx;
+                            float: left;
+                            .qrCode {
+                                width: 54rpx;
+                                height: 54rpx;
+                                margin-left: 12rpx;
+                            }
+                            .text {
+                                width: 80rpx;
+                                height: 37rpx;
+                                line-height: 37rpx;
+                                color: #434656;
+                                font-size: 26rpx;
+                            }
+                        }
+                    }
+                    .modelSwitchBox {
+                        .optionsBox {
+                            margin-top: 80rpx;
+                            margin-left: 20rpx;
+                            padding: 0 75rpx;
+                            display: flex;
+                            .card {
+                                width: 60rpx;
+                                height: 42rpx;
+                                line-height: 42rpx;
+                                margin-right: 75rpx;
+                                font-size: 30rpx;
+                                justify-content: center;
+                            }
+                            .division {
+                                margin-right: 95rpx;
+                                justify-content: center;
+                                color: #979797;
+                            }
+                            .shop {
+                                width: 60rpx;
+                                height: 42rpx;
+                                line-height: 42rpx;
+                                margin-right: 75rpx;
+                                font-size: 30rpx;
+                                justify-content: center;
+                            }
+                            .show {
+                                width: 60rpx;
+                                height: 42rpx;
+                                line-height: 42rpx;
+                                font-size: 30rpx;
+                                justify-content: center;
+                            }
+                        }
+                        .cardModel {
+                            width: 100%;
+                            margin-top: 31rpx;
+                            .looksCareBox {
+                                margin-left: 20rpx;
+                                width: 100%;
+                                padding: 0 20rpx 0 20rpx;
+                                box-sizing: border-box;
+                                .looksCare {
+                                    margin-top: 31rpx;
+                                    .userAvatarBox {
+                                        display: flex;
+                                        float: left;
+                                        .avatarBox:not(:last-child) {
+                                            margin-right: 14rpx;
+                                        }
+                                        .avatarBox {
+                                            position: relative;
+                                            justify-content: center;
+                                            width: 85rpx;
+                                            height: 85rpx;
+                                            .avatar {
+                                                width: 80rpx;
+                                                height: 80rpx;
+                                                border-radius: 40rpx;
+                                            }
+                                            .crown {
+                                                position: absolute;
+                                                top: 0;
+                                                right: 0;
+                                                transform:rotate(45deg);
+                                                width: 28rpx;
+                                                height: 28rpx;
+                                            }
+                                            .Authentication {
+                                                position: absolute;
+                                                bottom: 0;
+                                                right: 0;
+                                                width: 28rpx;
+                                                height: 28rpx;
+                                            }
+                                        }
+                                    }
+                                    .whoLooksCareMe {
+                                        margin: 22rpx 0 22rpx 12rpx;
+                                        float: left;
+                                        width: 150rpx;
+                                        height: 37rpx;
+                                        /* display: flex;
+                                        flex-flow: row wrap; */
+                                        .text {
+                                            display: inline-block;
+                                            /* float: left; */
+                                            width: 130rpx;
+                                            height: 37rpx;
+                                            line-height: 37rpx;
+                                            font-size: 26rpx;
+                                            color: #434656;
+                                        }
+                                        .arrow {
+                                            display: inline-block;
+                                            /* float: left; */
+                                            width: 16rpx;
+                                            height: 26rpx;
+                                            line-height: 26rpx;
+                                            margin-left: 6rpx;
+                                            font-size: 34rpx;
+                                            color: #C7C7CC;
+                                        }
+                                    }
+                                }
+                            }
+                            .divisionDiv {
+                                margin: 40rpx 0;
+                                padding: 0 143rpx;
+                                .left {
+                                    color: #979797;
+                                    font-size: 26rpx;
+                                    display: inline-block;
+                                }
+                                .text {
+                                    margin: 0 20rpx;
+                                    width: 104rpx;
+                                    height: 37rpx;
+                                    font-size: 26rpx;
+                                    line-height: 37rpx;
+                                    color: #434656;
+                                    display: inline-block;
+                                }
+                                .right {
+                                    color: #979797;
+                                    font-size: 26rpx;
+                                    display: inline-block;
+                                }
+                            }
+                            .sign {
+                                margin-left: 30rpx;
+                                display: flex;
+                                flex-flow: row wrap;
+                                .signDetail:not(:last-child) {
+                                    margin-right: 20rpx;
+                                }
+                                .signDetail {
+                                    margin-top: 30rpx;
+                                    padding: 9rpx 24rpx 8rpx 32rpx;
+                                    width: auto;
+                                    height: 54rpx;
+                                    border: 1px solid #979797;
+                                    border-radius: 48rpx;
+                                    .pic {
+                                        width: 32rpx;
+                                        height: 32rpx;
+                                    }
+                                    .text {
+                                        margin-left: 16rpx;
+                                        display: inline;
+                                        min-width: 54rpx;
+                                        min-width: 108rpx;
+                                        height: 37rpx;
+                                        font-size: 26rpx;
+                                        line-height: 37rpx;
+                                        color: #434656;
+                                    }
+                                    .num {
+                                        margin-left: 16rpx;
+                                        display: inline;
+                                        min-width: 16rpx;
+                                        max-width: 29rpx;
+                                        height: 37rpx;
+                                        font-size: 26rpx;
+                                        line-height: 37rpx;
+                                        color: #434656;
+                                    }
+                                }
+                            }
+                            .mainContent {
+                                margin-top: 80rpx;
+                                .modelName {
+                                    .titleBox {
+                                        margin-top: 30rpx;
+                                        padding: 15rpx 40rpx;
+                                        box-sizing: border-box;
+                                        width: 100%;
+                                        height: 90rpx;
+                                        border-radius: 50rpx;
+                                        box-shadow: -10rpx 0 10rpx 2rpx rgba(0, 0, 0, .5),
+                                                    0 -10rpx 10rpx 2rpx rgba(0, 0, 0, .5);
+                                        .title {
+                                            margin-right: 6rpx;
+                                            width: 144rpx;
+                                            height: 50rpx;
+                                            line-height: 50rpx;
+                                            color: #434656;
+                                            font-size: 36rpx;
+                                            display: inline;
+                                        }
+                                        .titlePicBox {
+                                            display: inline;
+                                            .titlePic {
+                                                width: 29rpx;
+                                                height: 20rpx;
+                                            }
+                                        }
+                                    }
+                                }
+                                .contDetail {
+                                    margin: 30rpx 0;
+                                    height: 62rpx;
+                                    .audioCont {
+                                        .spot {
+                                            float: left;
+                                            .spotPic{
+                                                margin: 16rpx 20rpx 16rpx 0;
+                                                width: 30rpx;
+                                                height: 30rpx;
+                                            }
+                                        }
+                                        .vioceBox {
+                                            width: 261rpx;
+                                            height: 62rpx;
+                                            background-color: #50A8FC;
+                                            border-radius: 20rpx;
+                                            float: left;
+                                            .viocePic {
+                                                float: left;
+                                                margin: 13rpx 18rpx 12rpx 20rpx;
+                                                width: 34rpx;
+                                                height: 47rpx;
+                                            }
+                                            .text {
+                                                float: left;
+                                                margin: 10rpx 0;
+                                                width: 62rpx;
+                                                height: 42rpx;
+                                                color: #fff;
+                                                line-height: 42rpx;
+                                            }
+                                        }
+                                    }
+                                }
+                                .modelBox {
+                                    padding: 30rpx 40rpx;
+                                    width: 100%;
+                                    height: auto;
+                                    .articleBox1 {
+                                        margin-bottom: 30rpx;
+                                        .articlePic1 {
+                                            width: 670rpx;
+                                            height: 377rpx;
+                                        }
+                                    }
+                                    .articleCont1 {
+                                        margin-bottom: 30rpx;
+                                        .text {
+                                            width: 660rpx;
+                                            /* height: 210rpx; */
+                                            line-height: 42rpx;
+                                            font-size: 30rpx;
+                                            color: #434656;
+                                        }
+                                    }
+                                    .articleBox2{
+                                        margin-bottom: 30rpx;
+                                        .articlePic2 {
+                                            float: left;
+                                            margin-right: 30rpx;
+                                            width: 320rpx;
+                                            height: 320rpx;
+                                        }
+                                        .articlePic3 {
+                                            float: left;
+                                            width: 320rpx;
+                                            height: 320rpx;
+                                        }
+                                    }
+                                    .articleCont2 {
+                                        margin-bottom: 30rpx;
+                                        .text {
+                                            width: 660rpx;
+                                            font-size: 30rpx;
+                                            /* height: 210rpx; */
+                                            color: #434656;
+                                            line-height: 42rpx;
+                                        }
+                                    }
+                                    .articleCont3 {
+                                        margin-bottom: 30rpx;
+                                        .articlePic4 {
+                                            float: left;
+                                            margin-right: 30rpx;
+                                            width: 160rpx;
+                                            height: 160rpx;
+                                        }
+                                        .text {
+                                            float: left;
+                                            width: 480rpx;
+                                            /* height: 168rpx; */
+                                            line-height: 42rpx;
+                                            font-size: 30rpx;
+                                            color: #434656;
+                                        }
+                                    }
+                                    .teamArticleCont1 {
+                                        margin-top: 30rpx;
+                                        .teamArticlePic1 {
+                                            margin-left: 270rpx;
+                                            width: 160rpx;
+                                            height: 160rpx;
+                                            border-radius: 80rpx;
+                                            border: 2rpx solid #50A8FC;
+                                        }
+                                        .text {
+                                            margin: 20rpx auto;
+                                            width: 216rpx;
+                                            height: 50rpx;
+                                            line-height: 50rpx;
+                                            font-size: 36rpx;
+                                            color: #50A8FC;
+                                        }
+                                    }
+                                    .teamArticleCont2 {
+                                        margin-top: 10rpx;
+                                        .text {
+                                            width: 683rpx;
+                                            height: 111rpx;
+                                            color: #434656;
+                                            line-height: 37rpx;
+                                            font-size: 26rpx;
+                                        }
+                                    }
+                                    .teamArticleCont3 {
+                                        margin-top: 60rpx;
+                                        .teamArticlePi2 {
+                                            margin-left: 270rpx;
+                                            width: 160rpx;
+                                            height: 160rpx;
+                                            border-radius: 80rpx;
+                                            border: 2rpx solid #50A8FC;
+                                        }
+                                        .text {
+                                            margin: 20rpx auto;
+                                            width: 216rpx;
+                                            height: 50rpx;
+                                            line-height: 50rpx;
+                                            font-size: 36rpx;
+                                            color: #50A8FC;
+                                        }
+                                    }
+                                    .teamArticleCont4{
+                                        margin-top: 10rpx;
+                                        .text {
+                                            width: 683rpx;
+                                            height: 111rpx;
+                                            color: #434656;
+                                            line-height: 37rpx;
+                                            font-size: 26rpx;
+                                        }
+                                    }
+                                    .eventArticleBox {
+                                        margin-top: 30rpx;
+                                        .eventArticlePic1 {
+                                            margin-right: 30rpx;
+                                            width: 320rpx;
+                                            height: 427rpx;
+                                        }
+                                        .eventArticlePic2 {
+                                            width: 320rpx;
+                                            height: 427rpx;
+                                        }
+                                    }
+                                    .customArticle1 {
+                                        width: 100%;
+                                        margin-top: 20rpx;
+                                        .customArticlePic1 {
+                                            margin-right: 20rpx;
+                                            float: left;
+                                            width: 30rpx;
+                                            height: 30rpx;
+                                        }
+                                        .text {
+                                            float: left;
+                                            width: 620rpx;
+                                            color: #434656;
+                                            font-size: 30rpx;
+                                            line-height: 42rpx;
+                                        }
+                                    }
+                                    .customArticle2 {
+                                        .customArticlePic2 {
+                                            margin-right: 20rpx;
+                                            float: left;
+                                            width: 30rpx;
+                                            height: 30rpx;
+                                        }
+                                        .text {
+                                            float: left;
+                                            width: 620rpx;
+                                            color: #434656;
+                                            font-size: 30rpx;
+                                            line-height: 42rpx;
+                                        }
+                                    }
+                                }
+                                .addNewModel {
+                                    margin: 120rpx auto;
+                                    padding: 16rpx 86rpx;
+                                    box-sizing: border-box;
+                                    width: 300rpx;
+                                    height: 74rpx;
+                                    border-radius: 37rpx;
+                                    background-color: #50A8FC;
+                                    .text {
+                                        width: 128rpx;
+                                        height: 42rpx;
+                                        color: #fff;
+                                        line-height: 42rpx;
+                                        letter-spacing: 1.85rpx;
+                                        font-size: 30rpx;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .clear {
+                    clear: both;
+                }
+                .blueCss {
+                    color: #50A8FC;
+                    text-align: center;
+                    border-bottom: 2.5px solid #50A8FC;
+                }
+                .defaultCss {
+                    color: #434656;
+                }
+            }
+        }
+    }
+</style>

src/pages/index/index.vue

@@ -1,42 +1,1076 @@
 <template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view>
-			<text class="title">{{title}}</text>
-		</view>
-	</view>
+  <view>
+
+    <div class="chatTable" @click="chatTable">
+
+      <div class="mine chatTableDiv" v-for="(item, index) in chatRecord" :key="index" :class="item.sendId == 1 ? 'rights' : 'lefts'">
+        
+          <!--头像(other)-->
+          <img v-if="item.sendId == 2" class="meAvatUrl" src="/static/images/avart2.jpg">
+
+          <!--文本/表情聊天内容-->
+          <p class="chatTextContent" v-if="item.type == 0" :class="item.sendId == 1 ? 'me' : 'others'" v-html="item.content"></p>
+
+          <!--图片聊天内容-->
+          <image class="content" v-if="item.type == 1 && !chatRecord[chatRecord.length - 1].isUploadPercFlag" :src="item.content" @click="showBigPic(item.content)" mdoe="aspectFill"></image>
+          
+          <!--上传图片/视频时的百分比模态框-->
+          <div class="breathDiv" v-if="picTempArr.length && picTempArr[0].isUploadPercFlag">
+            <div class="circularDiv"></div>
+            <div class="text" v-text="picTempArr[0].percentage">%</div>
+          </div>
+
+          <!--视频聊天内容-->
+          <img v-if="item.type == 2 && !item.isUploadPercFlag" class="videoPic" src="/static/images/user.png" @click="playVideo(item.content)">
+          <!-- <video :id="index" :src="item.content" @click="playVideo(index)"></video> -->
+
+          <!--表情聊天内容-->
+          <!-- <img class="emojiContent" v-else-if="item.type == 4" :src="item.content"> -->
+
+          <!--语音聊天内容-->
+          <div v-if="item.type == 3" class="audioPlay chatTableDiv" @click="playAudio(index)">
+            <img :src="item.isPlay === false ? '/static/images/voiceLeft.svg' : '/static/images/vioce.gif'">
+            <a class="audioTime">{{item.time}}"</a>
+          </div>
+
+          <!--头像(self)-->
+          <img v-if="item.sendId == 1" class="meAvatUrl" src="/static/images/avart.jpg">
+      </div>
+
+      <!-- <web-view v-if="ffff" src="https://mp.weixin.qq.com"></web-view> -->
+
+      <!--发送语音时拖动取消-->
+      <div class="cancelAudioBox chatTableDiv" v-if="cancelAudioBoxFlag">
+        <div class="cancelAudio chatTableDiv">
+          <p class="ppp" :class="clientMoveBottomFlag == false ? 'defaultBg' : 'cancelBg'" 
+              v-text="clientMoveBottomFlag == false ? '正在录音' : '拖动到此处取消'"></p>
+        </div>
+      </div>
+      <p class="clear"></p>
+
+      <!-- <div class="other" v-for="(item, index) in chatRecord" :key="index" v-if="item.sendId == 2">
+        <img class="otherAvatUrl" src="/static/images/avart.jpg" alt="">
+        <p v-if="item.type == 0">{{item.content}}</p>
+        <img class="content" v-else-if="item.type == 1" :src="item.content" alt="">
+        <video v-else :src="item.content"></video>
+      </div> -->
+
+    </div>
+
+    <!--底部功能栏-->
+    <view class="bottomOperation">
+      <!--语音/文字 切换-->
+      <div class="audio" @click="changeVT">
+        <img :src="flag?'/static/images/vioces.svg':'/static/images/keyboard.svg'">
+      </div>
+      <!--聊天输入框-->
+      <div class="chatInput" v-if="flag">
+        <!-- <input type="text" v-model="inputContent"> -->
+        <textarea class="textContent" v-model.lazy="inputContent" auto-height = true maxlength = 500 adjust-position = true @input="handleInput" @blur="handleBlur" @focus="handleFocus"></textarea>
+      </div>
+      <!-- 按住说话 -->
+      <div class="text" v-else catchtouchmove = "true">
+        <button :class="changeBg ? 'speakBtn' : 'btnSpeak'" v-text="changeBg ? '按住说话' : '松开结束'" @touchstart = "handleTouchStart" @touchend = "handleTouchEnd" @tap = "handleTap" @touchmove = "handleTouchMove" @longpress = "handleLongPress"
+        ></button>
+      </div>
+
+      <!--表情小图标-->
+      <div class="expSvg">
+        <img @click="showEmoji" src="/static/images/expression.svg">
+      </div>
+
+      <!--发送按钮-->
+      <div class="sendBtn" v-if="sendBtnFlag">
+        <button type="button" @click="conn">发送</button>
+      </div>
+
+      <!--功能展示按钮 + -->
+      <div class="showOper" v-if="sendBtnFlag == false">
+        <img src="/static/images/add.svg" @click="showPopup">
+      </div>
+      <p class="clear"></p>
+    </view>
+
+    <!--功能栏(发送图片、视频)-->
+    <van-popup class="options" :show="show" 
+        position="bottom" 
+        custom-style="height: 20%;" 
+        @click="showPopup"
+        close-icon-position="top-right">
+      <van-row class="optionChoose">
+        <van-col span="10">
+          <img @click="chooseImg" src="/static/images/album.svg">
+          <!-- <span>图片</span> -->
+        </van-col>
+      </van-row>
+      <van-row class="optionChoose">
+        <van-col span="10">
+          <img @click="chooseVideo()" src="/static/images/video.svg">
+          <!-- <span>视频</span> -->
+        </van-col>
+      </van-row>
+    </van-popup>
+
+    <!--表情模态框-->
+    <van-popup :show="shows" position="bottom" class="emojiBox" @close="onClose">
+      <img class="emoji" v-for="(item, index) in emojiData" :key="item.id" :src="item.url" :alt="item.key" @click="emoji(item.key)">
+      <p class="clear"></p>
+    </van-popup>
+
+    <!-- <div class="emojiBox" v-if="emojiFlag" :class="emojiFlag ? 'showBox' : ''">
+      <img class="emoji" v-for="(item, index) in emojiData" :key="item.id" :src="item.url" :alt="item.key">
+    </div> -->
+
+    <!--显示大图/视频div遮罩-->
+    <div class="shwoBigPicBox" v-if="showBigPicVideoFlag">
+      <p @click="closeBigPicBox">&times;</p>
+      <img :src="bigPicUrl" v-if="!picOrVideoFlag">
+      <video :src="bigVideoUrl" v-if="picOrVideoFlag" autoplay = true></video>
+    </div>
+    
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				title: 'Hello'
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-
-		}
-	}
+let socketOpen = false
+let socketMsgQueue = []
+export default {
+  data () {
+    return {
+      inputContent: '',             //聊天输入框内容
+      storageEmojiAndText: '',      //存储聊天框内的表情和文字
+      changeBg: true,               //控制按住说话按钮的背景颜色
+      audioTime: '',                //录音时间
+      percentage: 0,                //上传视频/图片的圆形百分比进度数据
+      percentageData: true,         //控制上传图片/视频的百分比数据状态
+      uploadPercFlag: false,        //控制上传图片/视频时的百分比div状态 false: 隐藏
+      sendBtnFlag: false,           //监听输入框输入事件，有值则将 + 换成发送
+      flag: true,                   //控制聊天框与语音按钮的切换 true: 聊天框
+      active: false,                //vant-weapp组件的模态框状态
+      show: false,                  //控制功能栏弹出层的状态 true: 显示
+      shows: false,                 //控制表情栏弹出层的状态 true: 显示
+      tapOrLongTouchFlag: true,     //控制触摸后立即离开或者长按事件的状态 true: tap
+      upLoadVideoFlag: false,       //控制发送视频的封面图片显示  false: 未上传成功，不显示图片
+      clientMoveBottomFlag: false,  //控制按住说话时拖动取消div的背景颜色  true: 小于365,红色
+      cancelAudioBoxFlag: false,    //控制按住说话时拖动取消div的状态  true: 显示
+      htmlContent: '',              //富文本 将内容以富文本形式转出来
+      cursorPosition: 0,            //失去焦点时获取当前光标位置
+      clientBottom: 0,              //距底部距离 用于做新消息页面滚动
+      contentObj: {},               //遍历聊天内容后接收到的
+      recorderManager: '',          //实例化录音API
+      audioContext: {},             //实例化音频播放
+      videoContent: {},             //实例化视频播放
+      audioIndex: '',               //播放音频的下标
+      videoIndex: '',               //播放视频的下标
+      showBigPicVideoFlag: false,   //控制查看大图的div遮罩状态 false: 不显示
+      bigPicUrl: '',                //查看大图的div里的img的src
+      bigVideoUrl: '',              //放大播放视频div里的video的src
+      picOrVideoFlag: false,        //控制放大显示的是图片还是视频 false: 图片
+      picTempArr: [],               //上传图片时的临时数组
+      videoTempArr: [],             //上传视频时的临时数组
+      picTempArrIndex: 0,           //上传图片时临时数组里当前上传完成图片的下标
+      videoTempArrIndex: 0,         //上传视频时临时数组里当前上传完成图片的下标
+      timeId: {},                   //计时器空对象
+      ffff: false,
+      chatRecord: [
+        {sendId: 1, recId: 2, time: new Date().getTime() - 259200000, type: 0, content: 'aaa'},
+        {sendId: 2, recId: 1, time: new Date().getTime() - 259200000, type: 0, content: 'aaa'},
+        {sendId: 1, recId: 2, time: new Date().getTime() - 172800000, type: 1, content: 'http://tmp/wxb2618bf5f12d1373.o6zAJs3syaLOOgzmR2SYaZuZzmZQ.PfYM9IOpTRnEf016ae07c32bc81968ac020bbc0cbc40.jpg', isPlay: false},
+        {sendId: 2, recId: 1, time: new Date().getTime() - 172800000, type: 1, content: 'http://tmp/wxb2618bf5f12d1373.o6zAJs3syaLOOgzmR2SYaZuZzmZQ.PfYM9IOpTRnEf016ae07c32bc81968ac020bbc0cbc40.jpg', isPlay: false},
+        {sendId: 1, recId: 2, time: new Date().getTime() - 86400000, type: 2, content: 'http://tmp/wxb2618bf5f12d1373.o6zAJs3syaLOOgzmR2SYaZuZzmZQ.czvrjoLNm7Lb582e093f070750769dd04145e8c020bd.mp4', isPlay: false},
+        {sendId: 2, recId: 1, time: new Date().getTime() - 86400000, type: 2, content: 'http://tmp/wxb2618bf5f12d1373.o6zAJs3syaLOOgzmR2SYaZuZzmZQ.czvrjoLNm7Lb582e093f070750769dd04145e8c020bd.mp4', isPlay: false}
+      ],  //暂存聊天内容 sendId: 发送人ID，recId: 接收人ID，type: 0=>文本, 1=>图片, 2=>视频 , 3=>音频, 4=>表情
+      emojiData: [
+        {id: 0, key: '[发呆]', url: '/static/images/emoji/bl_1.png'},
+        {id: 1, key: '[微笑]', url: '/static/images/emoji/bl_2.png'},
+        {id: 2, key: '[呲牙]', url: '/static/images/emoji/bl_3.png'},
+        {id: 3, key: '[亮眼]', url: '/static/images/emoji/bl_4.png'},
+        {id: 4, key: '[惊愕]', url: '/static/images/emoji/bl_5.png'},
+        {id: 5, key: '[鄙视]', url: '/static/images/emoji/bl_6.png'},
+        {id: 6, key: '[色色]', url: '/static/images/emoji/bl_7.png'},
+        {id: 7, key: '[委屈]', url: '/static/images/emoji/bl_8.png'},
+        {id: 8, key: '[大哭]', url: '/static/images/emoji/bl_9.png'},
+        {id: 9, key: '[害羞]', url: '/static/images/emoji/bl_10.png'},
+        {id: 10, key: '[黑线]', url: '/static/images/emoji/bl_11.png'},
+        {id: 11, key: '[疑问]', url: '/static/images/emoji/bl_12.png'},
+        {id: 12, key: '[鬼脸]', url: '/static/images/emoji/bl_13.png'},
+        {id: 13, key: '[哭笑]', url: '/static/images/emoji/bl_14.png'},
+        {id: 14, key: '[单眼]', url: '/static/images/emoji/bl_15.png'}, //备注待确认
+        {id: 15, key: '[偷笑]', url: '/static/images/emoji/bl_16.png'},
+        {id: 16, key: '[大笑]', url: '/static/images/emoji/bl_17.png'},
+        {id: 17, key: '[黑头]', url: '/static/images/emoji/bl_18.png'}, //备注待确认
+        {id: 18, key: '[服了]', url: '/static/images/emoji/bl_19.png'}, //备注待确认
+        {id: 19, key: '[丑脸]', url: '/static/images/emoji/bl_20.png'}, //备注待确认
+        {id: 20, key: '[冷漠]', url: '/static/images/emoji/bl_21.png'}, //备注待确认
+        {id: 21, key: '[抠鼻]', url: '/static/images/emoji/bl_22.png'},
+        {id: 22, key: '[哈哈]', url: '/static/images/emoji/bl_23.png'}, //备注待确认
+        {id: 23, key: '[骂]', url: '/static/images/emoji/bl_24.png'},
+        {id: 24, key: '[捂脸]', url: '/static/images/emoji/bl_25.png'},
+        {id: 25, key: '[呆滞]', url: '/static/images/emoji/bl_26.png'}, //备注待确认
+        {id: 26, key: '[平静]', url: '/static/images/emoji/bl_27.png'}, //备注待确认
+        {id: 27, key: '[猥琐]', url: '/static/images/emoji/bl_28.png'},
+        {id: 28, key: '[吃瓜]', url: '/static/images/emoji/bl_29.png'},
+        {id: 29, key: '[加油]', url: '/static/images/emoji/bl_30.png'},
+        {id: 30, key: '[牛逼]', url: '/static/images/emoji/bl_31.png'}, //备注待确认
+        {id: 31, key: '[汗]', url: '/static/images/emoji/bl_32.png'},
+        {id: 32, key: '[流涕]', url: '/static/images/emoji/bl_33.png'},
+        {id: 33, key: '[出魂]', url: '/static/images/emoji/bl_34.png'},
+        {id: 34, key: '[哭]', url: '/static/images/emoji/bl_35.png'},
+        {id: 35, key: '[傲慢]', url: '/static/images/emoji/bl_36.png'},
+        {id: 36, key: '[苦脸]', url: '/static/images/emoji/bl_37.png'},
+        {id: 37, key: '[心慌]', url: '/static/images/emoji/bl_38.png'}, //备注待确认
+        {id: 38, key: '[口罩]', url: '/static/images/emoji/bl_39.png'},
+        {id: 39, key: '[呕吐]', url: '/static/images/emoji/bl_40.png'},
+        {id: 40, key: '[嘘]', url: '/static/images/emoji/bl_41.png'},
+        {id: 41, key: '[思考]', url: '/static/images/emoji/bl_42.png'}, //备注待确认
+        {id: 42, key: '[拜拜]', url: '/static/images/emoji/bl_43.png'},
+        {id: 43, key: '[白眼]', url: '/static/images/emoji/bl_44.png'},
+        {id: 44, key: '[哈欠]', url: '/static/images/emoji/bl_45.png'},
+        {id: 45, key: '[阴险]', url: '/static/images/emoji/bl_46.png'}, //备注待确认
+        {id: 46, key: '[奋斗]', url: '/static/images/emoji/bl_47.png'},
+        {id: 47, key: '[酷]', url: '/static/images/emoji/bl_48.png'},
+        {id: 48, key: '[撇嘴]', url: '/static/images/emoji/bl_49.png'},
+        {id: 49, key: '[难过]', url: '/static/images/emoji/bl_50.png'},
+        {id: 50, key: '[生气]', url: '/static/images/emoji/bl_51.png'}, //备注待确认
+        {id: 51, key: '[发怒]', url: '/static/images/emoji/bl_52.png'},
+        {id: 52, key: '[赞]', url: '/static/images/emoji/bl_53.png'},
+        {id: 53, key: '[强壮]', url: '/static/images/emoji/bl_54.png'},
+        {id: 54, key: '[合掌]', url: '/static/images/emoji/bl_55.png'},
+        {id: 55, key: '[抱拳]', url: '/static/images/emoji/bl_56.png'},
+        {id: 56, key: '[手指]', url: '/static/images/emoji/bl_57.png'},
+        {id: 57, key: '[拥抱]', url: '/static/images/emoji/bl_58.png'},
+        {id: 58, key: '[摊掌]', url: '/static/images/emoji/bl_59.png'},
+        {id: 59, key: '[下跪]', url: '/static/images/emoji/bl_60.png'},
+        {id: 60, key: '[爱心]', url: '/static/images/emoji/bl_61.png'}
+      ]  //自定义表情内容      
+    }
+  },
+
+  onLoad() {
+    //注册音频播放实例
+    this.audioContext = wx.createInnerAudioContext()
+
+    //webSocket初始设置
+    let socketOpen = false
+    let socketMsgQueue = []
+    let that = this;
+
+    //连接webSocket
+    wx.connectSocket({
+      url: 'ws://127.0.0.1:3002',
+      success(res){
+        console.log('res');
+      }
+    })
+
+    //打开webSocket服务
+    wx.onSocketOpen(function(res) {
+      console.log('open')
+      socketOpen = true
+      for (let i = 0; i < socketMsgQueue.length; i++){
+        sendSocketMessage(socketMsgQueue[i])
+      }
+      socketMsgQueue = []
+    })
+
+    //向服务端发送消息
+    function sendSocketMessage(msg) {
+        if (socketOpen) {
+          wx.sendSocketMessage({
+            data:msg
+          })
+        } else {
+          socketMsgQueue.push(msg)
+        }
+    }
+
+    //接收服务端返回的消息
+    wx.onSocketMessage(function(res){
+      // console.log(res);
+      that.otherMsg = res.data;
+      let _time = new Date().getTime(),
+          _content = res.data,
+          _type = 0;
+      that.chatRecord.push({sendId: 2, recId: 1, time: _time, type: _type, content: _content});
+    })
+  },
+
+  methods: {
+    //发送按钮
+    conn() {
+      let that = this;
+
+      setTimeout(function() {
+        wx.sendSocketMessage({
+          data: that.inputContent
+        })
+
+        let reg = /\[([\u4e00-\u9fa5])*]/;
+        if(reg.test(that.inputContent)) {
+
+          let regText = that.inputContent.match(/\[([\u4e00-\u9fa5])*]/g);
+            regText.forEach(function(item, index) {
+              that.emojiData.forEach(function(val, keys) {
+                if(item === val.key) {
+                  that.inputContent = that.inputContent.replace(item, `<img class="emojiImg" src="${val.url}">`);
+                }
+              })
+            })
+        }
+
+        let _time = new Date().getTime(),
+            _content = that.inputContent,
+            _type = 0;
+        that.chatRecord.push({sendId: 1, recId: 2, time: _time, type: _type, content: _content});
+
+        that.inputContent = '';
+        that.sendBtnFlag = false;
+
+        let query = wx.createSelectorQuery()
+        query.select('.chatTable').boundingClientRect()
+        query.exec(function (res) {
+          wx.pageScrollTo({
+            scrollTop: res[0].bottom,
+            duration: 500
+          })
+        })
+      }, 200)
+
+      this.cursorPosition = 0;
+
+    },
+
+    //语音/文字切换
+    changeVT() {
+      this.flag = !this.flag;
+    },
+
+    //语音功能触摸开始事件
+    handleTouchStart(e) {
+      this.recorderManager = wx.getRecorderManager()
+      this.changeBg = !this.changeBg;
+      this.cancelAudioBoxFlag = true;
+      this.clientMoveBottomFlag = false;
+      console.log('开始');
+      // console.log(e.touches[0].clientX, e.touches[0].clientY);
+      let options = {
+        duration: 10000,
+        format: 'aac'
+      }
+      
+      if(!this.tapOrLongTouchFlag) {
+        this.recorderManager.start(options)
+        this.recorderManager.onStart((res) => {
+          console.log(res)
+        })
+      } else {
+        console.log('点击点击')
+      }
+    },
+
+    //语音功能触摸移动事件
+    handleTouchMove(e) {
+      if(e.clientY < 355) {
+        this.clientMoveBottomFlag = true
+      } else {
+        this.clientMoveBottomFlag = false
+      }
+      this.clientBottom = e.clientY
+    },
+
+    //语音功能触摸结束事件
+    handleTouchEnd(e) {
+      let that = this;
+      this.changeBg = !this.changeBg;
+      this.cancelAudioBoxFlag = false;
+      // this.endTime = e.timeStamp;
+      console.log('结束');
+      this.recorderManager.stop()
+      this.recorderManager.onStop((res) => {
+        //路径
+        console.log(this.clientBottom)
+        
+        let _time = new Date().getTime(),
+            _content = res.tempFilePath,
+            _type = 3;
+            
+        that.audioTime = parseInt((res.duration) / 1000);
+
+        if (res.duration < 1200) {
+          console.log('您的时间短');
+        } else if(this.clientBottom !== 0 && this.clientBottom < 355) {
+          console.log('已取消');
+          this.clientMoveBottomFlag = false;
+        } else {
+          that.chatRecord.push({sendId: 1, recId: 1, time: _time, type: _type, content: _content, time: that.audioTime, isPlay: false});
+        }
+        that.audioTime = ''
+        this.clientBottom = 0;
+      })
+    },
+
+    //语音功能快速点击判断事件（true: 用户快速点击了）
+    handleTap() {
+      this.tapOrLongTouchFlag = true;
+      console.log('触摸后立即离开');
+    },
+
+    //触摸后超过350ms后离开
+    handleLongPress() {
+      console.log('超过350ms了~');
+      this.tapOrLongTouchFlag = false;
+    },
+
+    //vant-weapp组件弹出层状态控制（底部功能栏 => + ）
+    showPopup() {
+      this.active = !this.active;
+      this.show = !this.show;
+    },
+
+    //发送图片
+    chooseImg() {
+      let that = this;
+
+      console.log('img');
+      wx.chooseImage({
+        count: 9,
+        sizeType: ['original', 'compressed'],
+        sourceType: ['album', 'camera'],
+        success (res) {
+
+          clearInterval(that.timeId);
+
+          let time = new Date().getTime(),
+              type = 1,
+              isUploadPercFlags = true;
+
+          res.tempFilePaths.forEach(item => {
+            that.picTempArr.push({sendId: 1, recId: 2, time: time, type: type, content: item, percentage: 0, isOverUpload: false, isUploadPercFlag: isUploadPercFlags});
+            console.log('临时数组: ', that.picTempArr);
+          });
+
+          let timer = 20;
+          
+          that.asyncObj();
+          that.loopImplement(timer);
+          
+        },
+        fail(err) {
+          console.log('上传图片失败!');
+        }
+      })
+    },
+
+    asyncObj () {
+      setTimeout(() => {
+        this.picTempArr[0].isOverUpload = true;
+      }, 5000);
+    },
+
+    loopImplement(time) {
+      this.timeId = setInterval(() => {
+        if (this.picTempArr[0].percentage < 99) {
+          this.picTempArr[0].percentage = this.picTempArr[0].percentage + 1;
+        }
+        if (!this.picTempArr[0].isOverUpload) {
+            this.picTempArr[0].isUploadPercFlag = true;
+        }
+        if (this.picTempArr.length && this.picTempArr[0].percentage === 100) {
+          this.chatRecord.push(this.picTempArr[0]);
+          console.log('22', this.chatRecord);
+          this.picTempArr.splice(0, 1);
+          clearInterval(this.timeId);
+          if (!this.picTempArr.length) return;
+          this.loopImplement(time);
+          this.asyncObj();
+        } else {
+          if (this.picTempArr[0].isOverUpload) {
+            this.picTempArr[0].percentage = 100;
+            this.picTempArr[0].isUploadPercFlag = false;
+          }
+        }
+      }, time);
+    },
+
+    //发送视频
+    chooseVideo() {
+      let that = this
+      console.log('video')
+      wx.chooseVideo({
+        sourceType: ['album','camera'],
+        maxDuration: 60,
+        camera: 'back',
+        success(res) {
+          console.log(res)
+
+          var time = new Date().getTime(),
+              content = res.tempFilePath,
+              type = 2,
+              isUploadPercFlags = true;
+              
+          wx.showLoading({
+            title: '上传中'
+          });
+
+          setTimeout(function () {
+            wx.hideLoading();
+            that.upLoadVideoFlag = true;
+            that.chatRecord.push({sendId: 1, recId: 2, time: time, type: type, content: content, isPlay: false, isUploadPercFlag: isUploadPercFlags});
+          }, 500);
+
+          let timer = 20;
+          let a = 0
+          setTimeout(() => {
+            a = 1
+          }, 5000);
+          let timeId = setInterval(function() {
+
+            if (that.percentage < 99) {
+              that.percentage = that.percentage + 1;
+            }
+            
+            let flag = true;
+
+            if (a === 1) {
+              that.percentage = 100;
+              setTimeout(() => { 
+                if (that.chatRecord[that.chatRecord.length - 2].isUploadPercFlag) {
+                  flag = false;
+                  that.chatRecord[that.chatRecord.length - 2].isUploadPercFlag = false;
+                  flag = true;
+                } else if(!that.chatRecord[that.chatRecord.length - 2].isUploadPercFlag && flag){
+                  that.chatRecord[that.chatRecord.length - 1].isUploadPercFlag = false;
+                }
+                that.percentage = 0;
+                clearInterval(timeId);
+              }, 500);
+            }
+          }, timer);
+
+        },
+        fail(err) {
+          console.log('上传视频失败!')
+        }
+      })
+    },
+
+    handleFocus(e) {
+      // console.log(e)
+    },
+    
+    //监听聊天输入框输入事件
+    handleInput(e) {
+      // console.log(e);
+      this.inputContent = e.mp.detail.value;
+    },
+
+    //监听失去焦点时的状态
+    handleBlur(e) {
+      this.inputContent = e.mp.detail.value;
+      // console.log('失去焦点啦~', e)
+      this.cursorPosition = e.mp.detail.cursor;
+      // console.log(e.mp.detail.cursor)
+    },
+
+    //音频播放
+    playAudio(index) {
+      let that = this
+      if ((this.audioIndex || this.audioIndex === 0) && this.audioIndex !== index) {
+        this.audioContext.stop()
+        this.chatRecord[this.audioIndex].isPlay = false
+      }
+      if(!this.chatRecord[index].isPlay) {
+        console.log(this.chatRecord[index].content)
+        this.audioIndex = index
+        this.audioContext.src = this.chatRecord[index].content
+        this.audioContext.play()
+        this.audioContext.onPlay((res) => {
+          console.log('播放开始')
+        })
+        
+        this.audioContext.onEnded((res) => {
+          console.log('播放结束')
+          that.chatRecord[index].isPlay = false
+        })
+        this.chatRecord[index].isPlay = true
+
+      } else {
+        this.audioContext.stop()
+        this.audioContext.onStop((res) => {
+          console.log('播放停止')
+          that.chatRecord[index].isPlay = false
+        })
+        this.chatRecord[index].isPlay = false
+      }
+    },
+
+    //视频播放
+    playVideo(url) {
+      let that = this;
+
+      this.bigVideoUrl = url;
+      console.log(url);
+      this.showBigPicVideoFlag = true;
+      if (url.substr((url.length-3), url.length) != 'mp4') {
+        this.picOrVideoFlag = false
+      }
+      this.picOrVideoFlag = true
+      
+      //注册视频播放实例
+      this.videoContent = wx.createVideoContext('index');
+
+      // this.videoContent._videoId = index;
+
+      // if ((this.videoIndex || this.videoIndex === 0) && this.videoIndex !== index) {
+      //   this.videoContent.stop()
+      //   this.chatRecord[this.videoIndex].isPlay = false
+      // }
+      
+      if(this.upLoadVideoFlag) {
+        //全屏
+        this.videoContent.requestFullScreen({direction: 0})
+
+        // if(!this.chatRecord[index].isPlay) {
+
+          // this.videoIndex = index;
+          // this.videoContent.src = this.chatRecord[index].content
+          this.videoContent.src = url
+
+          setTimeout(function() {
+            that.videoContent.play();
+          }, 1500)
+
+          // this.chatRecord[index].isPlay = true;
+        // } else {
+          this.videoContent.stop();
+        //   this.chatRecord[index].isPlay = false;
+        // }
+      }
+    },
+
+    //停止语音播放
+    stopAudio() {
+      this.audioContext.stop()
+    },
+
+    //点击空白处关闭表情模态框
+    chatTable() {
+      this.emojiFlag = false;
+    },
+
+    //展示表情模态框
+    showEmoji() {
+      // console.log('emoji')
+      // this.emojiFlag = true;
+      this.active = !this.active;
+      this.shows = !this.shows;
+    },
+
+    //关闭底部功能栏模态框 => +
+    onClose() {
+      this.shows = !this.shows;
+    },
+
+    //发送表情
+    emoji(key) {
+
+      let that = this;
+      // if(this.inputContent === '') {
+      //     this.inputContent = key + '&&&'
+      // } else if(this.inputContent !== '' && (this.inputContent.lastIndexOf('&&&') !== this.inputContent.length - 3 || this.inputContent.lastIndexOf('&&&') == -1)) {
+      //   console.log(111)
+      //   this.inputContent = this.inputContent + '&&&' + key + '&&&';
+      // } else if(this.inputContent !== '' && this.inputContent.lastIndexOf('&&&') === this.inputContent.length - 3){
+      //   console.log(222)
+      //   this.inputContent = this.inputContent + key + '&&&';
+      // }
+
+
+      if(this.inputContent == '') {
+        this.inputContent = key;
+      } else if(this.cursorPosition !== this.inputContent.length){
+        let beforeText = this.inputContent.substr(0, this.cursorPosition),
+            afterText  = this.inputContent.substr(this.cursorPosition);
+        this.inputContent = beforeText + key + afterText;
+      } else {
+        this.inputContent = this.inputContent + key;
+      }
+
+      // return this.inputContent
+
+      this.shows = false;
+
+    },
+
+    //展示放大图片/视频的div
+    showBigPic(url) {
+      // console.log(this.chatRecord[index].content)
+      this.showBigPicVideoFlag = true;
+      // this.bigPicUrl = this.chatRecord[index].content
+      this.bigPicUrl = url;
+    },
+
+    //关闭放大图片/视频的div
+    closeBigPicBox() {
+      this.showBigPicVideoFlag = false;
+      this.picOrVideoFlag = false;
+      this.bigPicUrl = '';
+      this.bigVideoUrl = '';
+    }
+  },
+
+  watch: {
+    inputContent: {
+      handler(newVal, oldVal) {
+        this.inputContent = newVal;
+        if(this.inputContent == '') {
+          this.sendBtnFlag = false
+        } else {
+          this.sendBtnFlag = true
+        }
+      }
+    }
+  }
+}
+
 </script>
 
-<style>
-	.content {
-		text-align: center;
-		height: 400upx;
-	}
-
-	.logo {
-		height: 200upx;
-		width: 200upx;
-		margin-top: 200upx;
-	}
-
-	.title {
-		font-size: 36upx;
-		color: #8f8f94;
-	}
+<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/static/images/add.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1583983492646" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3059" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M900.7 432.2H548.4V109.3c0-20.2-16.5-36.7-36.7-36.7-20.2 0-36.7 16.5-36.7 36.7v322.9H122.8c-20.2 0-36.7 16.5-36.7 36.7 0 20.2 16.5 36.7 36.7 36.7h352.3v381.6c0 20.2 16.5 36.7 36.7 36.7 20.2 0 36.7-16.5 36.7-36.7V505.6h352.3c20.2 0 36.7-16.5 36.7-36.7-0.1-20.2-16.6-36.7-36.8-36.7z" fill="" p-id="3060"></path></svg>

src/static/images/album.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1584006901845" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1948" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M832 874.666667H192a64 64 0 0 1-64-64V213.333333a64 64 0 0 1 64-64h640a64 64 0 0 1 64 64v597.333334a64 64 0 0 1-64 64zM192 192a21.333333 21.333333 0 0 0-21.333333 21.333333v597.333334a21.333333 21.333333 0 0 0 21.333333 21.333333h640a21.333333 21.333333 0 0 0 21.333333-21.333333V213.333333a21.333333 21.333333 0 0 0-21.333333-21.333333z" p-id="1949"></path><path d="M157.013333 702.72l-15.36-39.893333 457.813334-174.506667 286.293333 176.213333-22.186667 36.266667-268.373333-165.12-438.186667 167.04zM320 405.333333a64 64 0 1 1 64-64 64 64 0 0 1-64 64z m0-85.333333a21.333333 21.333333 0 1 0 21.333333 21.333333 21.333333 21.333333 0 0 0-21.333333-21.333333z" p-id="1950"></path></svg>

src/static/images/arrowDown.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1585285668671" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3609" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 588.8L266.666667 343.466667c-14.933333-14.933333-40.533333-14.933333-55.466667 0l-4.266667 4.266666c-14.933333 14.933333-14.933333 40.533333 0 57.6l275.2 275.2c8.533333 8.533333 19.2 12.8 29.866667 10.666667 10.666667 0 21.333333-4.266667 29.866667-10.666667L817.066667 405.333333c14.933333-14.933333 14.933333-40.533333 0-55.466666l-4.266667-4.266667c-14.933333-14.933333-40.533333-14.933333-55.466667 0L512 588.8z" p-id="3610" fill="#8a8a8a"></path></svg>

src/static/images/arrowUp.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1585285592028" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3209" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 435.2L266.666667 680.533333c-14.933333 14.933333-40.533333 14.933333-55.466667 0l-4.266667-4.266666C192 661.333333 192 635.733333 206.933333 618.666667l275.2-275.2c8.533333-8.533333 19.2-12.8 29.866667-10.666667 10.666667 0 21.333333 4.266667 29.866667 10.666667L817.066667 618.666667c14.933333 14.933333 14.933333 40.533333 0 55.466666l-4.266667 4.266667c-14.933333 14.933333-40.533333 14.933333-55.466667 0L512 435.2z" p-id="3210" fill="#8a8a8a"></path></svg>

src/static/images/clickPraise.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1585276059543" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1845" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M325.973333 833.28h-38.826666a106.666667 106.666667 0 0 1-106.666667-106.666667V441.173333a106.666667 106.666667 0 0 1 106.666667-106.666666h38.826666a21.333333 21.333333 0 0 1 21.333334 21.333333v456.106667a21.333333 21.333333 0 0 1-21.333334 21.333333z m-38.826666-456.106667a64 64 0 0 0-64 64v285.44a64 64 0 0 0 64 64h17.493333V377.173333z" fill="#333333" p-id="1846"></path><path d="M758.613333 832H325.973333a21.333333 21.333333 0 0 1-21.333333-21.333333V355.84a21.333333 21.333333 0 0 1 21.333333-21.333333h8.96l99.413334-158.933334A85.333333 85.333333 0 0 1 595.84 213.333333v121.6h166.826667a100.906667 100.906667 0 0 1 75.52 34.346667 104.96 104.96 0 0 1 25.386666 82.986667l-43.946666 325.973333A62.08 62.08 0 0 1 758.613333 832z m-411.306666-42.666667h411.306666a19.413333 19.413333 0 0 0 18.773334-17.28L821.333333 448a62.293333 62.293333 0 0 0-15.146666-49.28 57.386667 57.386667 0 0 0-42.666667-19.84h-188.586667a21.333333 21.333333 0 0 1-21.333333-21.333333V213.333333a42.666667 42.666667 0 0 0-80.64-17.493333l-1.28 2.346667-106.666667 170.666666a21.333333 21.333333 0 0 1-17.493333 10.026667z" fill="#333333" p-id="1847"></path></svg>

src/static/images/enterpriseAuthentication.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1585211884747" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8487" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M0 512C0 229.234759 229.234759 0 512 0s512 229.234759 512 512-229.234759 512-512 512S0 794.765241 0 512z m419.310345 194.630621a35.310345 35.310345 0 0 0 49.399172 1.271172l335.518897-311.931586a35.310345 35.310345 0 0 0-48.075035-51.729655l-309.124413 289.544827-145.125518-149.645241a35.310345 35.310345 0 1 0-50.688 49.169655l168.112552 173.320828z" p-id="8488" fill="#1296db"></path></svg>

src/static/images/expression.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1583984548300" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2229" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 992C247.3 992 32 776.7 32 512S247.3 32 512 32s480 215.3 480 480-215.3 480-480 480z m0-896C282.6 96 96 282.6 96 512s186.6 416 416 416 416-186.6 416-416S741.4 96 512 96z" fill="#333333" p-id="2230"></path><path d="M512 800c-78 0-151.1-30.7-205.7-86.5C253.2 659.4 224 587.8 224 512c0-17.7 14.3-32 32-32h512c17.7 0 32 14.3 32 32 0 75.8-29.2 147.4-82.3 201.5C663.1 769.3 590 800 512 800zM352 668.8c42.5 43.4 99.3 67.2 160 67.2s117.5-23.9 160-67.2c33.7-34.4 55-77.9 61.7-124.8H290.3c6.6 46.9 28 90.3 61.7 124.8zM368 416c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zM656 416c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z" fill="#333333" p-id="2231"></path></svg>

src/static/images/moreOperation.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1585287415820" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3848" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M221 592c-44.183 0-80-35.817-80-80s35.817-80 80-80 80 35.817 80 80-35.817 80-80 80z m291 0c-44.183 0-80-35.817-80-80s35.817-80 80-80 80 35.817 80 80-35.817 80-80 80z m291 0c-44.183 0-80-35.817-80-80s35.817-80 80-80 80 35.817 80 80-35.817 80-80 80z" p-id="3849"></path></svg>

src/static/images/moreOptions.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1585297156678" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M895.362889 128.853858H135.997131c-41.735766 0-75.936241 22.935003-75.936242 71.33372 0 48.39671 34.200476 71.331714 75.936242 71.331714h759.365758c41.735766 0 75.936241-22.935003 75.936241-71.331714-0.103691-48.513111-34.199807-71.333721-75.936241-71.33372z m0 319.491875H135.997131c-41.735766 0-75.936241 22.935003-75.936242 71.33372s34.200476 71.333721 75.936242 71.333721h759.365758c41.735766 0 75.936241-22.935003 75.936241-71.333721-0.103691-48.51378-34.199807-71.333721-75.936241-71.33372z m0 311.626113H135.997131c-41.735766 0-75.936241 22.933665-75.936242 71.331713 0 48.392696 34.200476 71.333721 75.936242 71.333721h759.365758c41.735766 0 75.936241-22.941024 75.936241-71.333721-0.103691-48.519132-34.199807-71.331714-75.936241-71.331713z m0 0" p-id="5405"></path></svg>

src/static/images/presonAuthentication.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1585211884747" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8487" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M0 512C0 229.234759 229.234759 0 512 0s512 229.234759 512 512-229.234759 512-512 512S0 794.765241 0 512z m419.310345 194.630621a35.310345 35.310345 0 0 0 49.399172 1.271172l335.518897-311.931586a35.310345 35.310345 0 0 0-48.075035-51.729655l-309.124413 289.544827-145.125518-149.645241a35.310345 35.310345 0 1 0-50.688 49.169655l168.112552 173.320828z" p-id="8488" fill="#f4ea2a"></path></svg>

src/static/images/spot.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1585289339094" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4609" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1.792 513.107c0 282.352 228.897 511.248 511.248 511.248s511.248-228.897 511.248-511.248c0-282.352-228.897-511.248-511.248-511.248-282.352 0-511.248 228.897-511.248 511.248z" p-id="4610" fill="#1296db"></path></svg>

src/static/images/video.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1584006968964" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2787" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M950.4 259.2c-22.4-9.6-48-3.2-64 12.8l-118.4 96V320c0-54.4-41.6-96-96-96H128c-54.4 0-96 41.6-96 96v384c0 54.4 41.6 96 96 96h544c54.4 0 96-41.6 96-96v-51.2l118.4 96c19.2 16 41.6 22.4 64 12.8 25.6-9.6 41.6-35.2 41.6-67.2V326.4c0-28.8-16-54.4-41.6-67.2zM704 704c0 19.2-12.8 32-32 32H128c-19.2 0-32-12.8-32-32V320c0-19.2 12.8-32 32-32h544c19.2 0 32 12.8 32 32v384z m224-6.4v3.2l-160-131.2v-118.4l160-131.2V697.6z" p-id="2788"></path></svg>

src/static/images/vioces.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1583988826598" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2630" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M674.80640791 77.12605038A46.00840342 46.00840342 0 0 0 608.62993701 77.12605038a46.00840342 46.00840342 0 0 0 0 63.02521056 520.58823487 520.58823487 0 0 1 0 735.50420156 47.26890791 47.26890791 0 0 0 0 66.80672227 47.26890791 47.26890791 0 0 0 66.80672226 0A614.49579844 614.49579844 0 0 0 674.80640791 77.12605038z" p-id="2631"></path><path d="M467.45346641 242.88235332a47.26890791 47.26890791 0 0 0-63.02520967 0 46.63865566 46.63865566 0 0 0 0 63.02520967 299.36974747 299.36974747 0 0 1 0 422.26890732 47.26890791 47.26890791 0 0 0 0 63.02521055 46.63865566 46.63865566 0 0 0 63.02520967 0 393.90756329 393.90756329 0 0 0 0-548.31932753zM190.14254229 457.79831914a78.15126094 78.15126094 0 0 0 0 110.92436982 78.7815123 78.7815123 0 1 0 0-110.92436982z" p-id="2632"></path></svg>