展厅页面、三个小页面、配置tabBar

src/pages.json

@@ -1,22 +1,100 @@
 {
+	"sitemapLocation": "sitemap.json",
 	"pages": [
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "林易婷"
 			}
 		},
 		{
-			"path": "pages/card/card",
+			"path": "pages/index/showWhoCollecMe",
 			"style": {
-				"navigationBarTitleText": "林易婷"
+				"navigationBarTitleText": "谁收藏了我"
+			}
+		},
+		
+		{
+			"path": "pages/chat/chat",
+			"style": {
+				"navigationBarTitleText": "聊天"
+			}
+		},
+		{
+			"path": "pages/find/find",
+			"style": {
+				"navigationBarTitleText": "发现"
+			}
+		},
+		{
+			"path": "pages/more/more",
+			"style": {
+				"navigationBarTitleText": "营销"
+			}
+		},
+		{
+			"path": "pages/mine/mine",
+			"style": {
+				"navigationBarTitleText": "我的"
+			}
+		},
+		{
+			"path": "pages/mine/setSubscription",
+			"style": {
+				"navigationBarTitleText": "服务号提醒设置"
+			}
+		},
+		{
+			"path": "pages/mine/setServiceAutoReply",
+			"style": {
+				"navigationBarTitleText": "客服自动回复设置"
 			}
 		}
+		
+		
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8"
+	},
+	"tabBar": {
+		"color": "#000",
+		"selectedColor": "#50A9FA",
+		"borderStyle": "black",
+		"backgroundColor": "#fff",
+		"list": [
+			{
+				"pagePath": "pages/index/index",
+				"iconPath": "static/images/index_noSelect.png",
+				"selectedIconPath": "static/images/index_selected.png",
+				"text": "名片"
+			},
+			{
+				"pagePath": "pages/chat/chat",
+				"iconPath": "static/images/card_noSelect.png",
+				"selectedIconPath": "static/images/card_noSelect.png",
+				"text": "名片夹"
+			},
+			{
+				"pagePath": "pages/find/find",
+				"iconPath": "static/images/find_noSelect.png",
+				"selectedIconPath": "static/images/find_select.png",
+				"text": "发现"
+			},
+			{
+				"pagePath": "pages/more/more",
+				"iconPath": "static/images/more_noSelect.png",
+				"selectedIconPath": "static/images/more_noSelect.png",
+				"text": "营销工具"
+			},
+			{
+				"pagePath": "pages/mine/mine",
+				"iconPath": "static/images/mine_noSelect.png",
+				"selectedIconPath": "static/images/mine_select.png",
+				"text": "个人中心"
+			}
+		]
 	}
 }

src/pages/card/card.vue

@@ -1,602 +0,0 @@
-<template>
-    <div class="cx-card">
-        <movable-area class="moveMenuBox">
-            <movable-view class="moveMenuCont" :x="tran" :y="vert" @touchend="handleTouchEnd" direction="all" damping="30" friction="5" @change="handleChange">
-                <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>
-                          <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 class="shopModel" v-if="modelSwitchType == 'shop'">
-                      <div class="switchDiv">
-                        <img class="switchPic" src="/static/images/btn_open.png">
-                        <p class="text">启用商城</p>
-                      </div>
-                      <div class="searchDiv">
-                          <img class="searchPic" src="/static/images/search.png">
-                          <input class="input" type="text" placeholder="按姓名、公司或职位搜索">
-                      </div>
-                      <div class="optionBox">
-                        <div class="options">
-                          <p class="text1">好课推荐</p>
-                          <p class="text1">实用教程</p>
-                          <p class="text1">生活美学</p>
-                          <p class="labelText">标签设置</p>
-                        </div>
-                        <div class="separate"></div>
-                        <p class="allOption">全部</p>
-                      </div>
-                      <div class="everyModel">
-
-                        <!-- banner -->
-                        <div class="titleBox">
-                          <p class="text">banner</p>
-                          <img class="arrowPic" src="/static/images/triangleArrow.png">
-                          <img class="morePic" src="/static/images/more.png">
-                        </div>
-
-                        <div class="bannerBox">
-                          <div class="bannerPicBox">
-                            <img class="bannerPic" src="/static/images/bannerImg.png">
-                          </div>
-                        </div>
-
-                        <!-- 背景 -->
-                        <div class="haveBgDiv">
-                          <!-- 精品课程 -->
-                          <div class="titleBox bg">
-                            <p class="text">精品课程</p>
-                            <img class="arrowPic" src="/static/images/triangleArrow.png">
-                            <img class="morePic" src="/static/images/more.png">
-                          </div>
-
-                          <div class="goodsListBox">
-                            <div class="goodsList">
-                              <div class="goodsImgBox">
-                                <img class="goodsPic" src="/static/images/goodsImg.png">
-                                <p class="goodsSign">热门</p>
-                              </div>
-                              <p class="goodsTitle">英语启蒙第一课一拼一读自然英语启蒙第一课拼读</p>
-                              <p class="goodsDescribe">奔逃教材结合了儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材哈哈哈哈哈哈哈哈哈哈哈</p>
-                              <div class="numBox">
-                                <p class="goodsStock">库存:90</p>
-                                <p class="goodsPrice">￥900</p>
-                              </div>
-                            </div>
-
-                            <div class="goodsList">
-                              <div class="goodsImgBox">
-                                <img class="goodsPic" src="/static/images/goodsImg.png">
-                              </div>
-                              <p class="goodsTitle">英语启蒙第一课一拼一读自然英语启蒙第一课拼读</p>
-                              <p class="goodsDescribe">奔逃教材结合了儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材哈哈哈哈哈哈哈哈哈哈哈</p>
-                              <div class="numBox">
-                                <p class="goodsStock">库存：90</p>
-                                <p class="goodsPrice">￥900</p>
-                              </div>
-                            </div>
-
-                            <div class="goodsList">
-                              <div class="goodsImgBox">
-                                <img class="goodsPic" src="/static/images/goodsImg.png">
-                              </div>
-                              <p class="goodsTitle">英语启蒙第一课一拼一读自然英语启蒙第一课拼读</p>
-                              <p class="goodsDescribe">奔逃教材结合了儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材哈哈哈哈哈哈哈哈哈哈哈</p>
-                              <div class="numBox">
-                                <p class="goodsStock">库存：90</p>
-                                <p class="goodsPrice">￥900</p>
-                              </div>
-                            </div>
-
-                            <div class="goodsList">
-                              <div class="goodsImgBox">
-                                <img class="goodsPic" src="/static/images/goodsImg.png">
-                              </div>
-                              <p class="goodsTitle">英语启蒙第一课一拼一读自然英语启蒙第一课拼读</p>
-                              <p class="goodsDescribe">奔逃教材结合了儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材哈哈哈哈哈哈哈哈哈哈哈</p>
-                              <div class="numBox">
-                                <p class="goodsStock">库存：90</p>
-                                <p class="goodsPrice">￥900</p>
-                              </div>
-                            </div>
-
-                            <!-- 查看更多 -->
-                            <div class="showMoreBox">
-                              <p class="title">查看更多</p>
-                            </div>
-                          </div>
-
-                          <!-- 精品课程 -->
-                          <div class="titleBox">
-                            <p class="text">精品课程</p>
-                            <img class="arrowPic" src="/static/images/triangleArrow.png">
-                            <img class="morePic" src="/static/images/more.png">
-                          </div>
-                          
-                          <div class="BoutiqueClass">
-                            <div class="classPicBox">
-                              <img class="classPic" src="/static/images/testPic.jpg">
-                              <p class="commentText">
-                                我想说点什么呢？哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
-                              </p>
-                            </div>
-                          </div>
-
-                          <!-- 最新课程 -->
-                          <div class="titleBox">
-                            <p class="text">最新课程</p>
-                            <img class="arrowPic" src="/static/images/triangleArrow.png">
-                            <img class="morePic" src="/static/images/more.png">
-                          </div>
-
-                          <!-- 最新课程列表 -->
-                          <div class="newClassBox">
-                            <div class="classPicBox">
-                              <img class="classPic" src="/static/images/testPic2.jpg">
-                            </div>
-                            <div class="detailBox">
-                              <p class="title">
-                                英语启蒙第一课一拼一读自然英语启蒙第一课一拼一读
-                              </p>
-                              <p class="describeText">
-                                本套教材结合课儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材一系列适合少儿综合素质培养的教材一系列适合少儿综合素质培养的教材
-                              </p>
-                              <div class="numBox">
-                                <p class="goodsStock">库存:90</p>
-                                <p class="goodsPrice">￥900</p>
-                              </div>
-                            </div>
-                          </div>
-
-                          <div class="newClassBox">
-                            <div class="classPicBox">
-                              <img class="classPic" src="/static/images/testPic2.jpg">
-                            </div>
-                            <div class="detailBox">
-                              <p class="title">
-                                英语启蒙第一课一拼一读自然英语启蒙第一课一拼一读
-                              </p>
-                              <p class="describeText">
-                                本套教材结合课儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材一系列适合少儿综合素质培养的教材一系列适合少儿综合素质培养的教材
-                              </p>
-                              <div class="numBox">
-                                <p class="goodsStock">库存:90</p>
-                                <p class="goodsPrice">￥900</p>
-                              </div>
-                            </div>
-                          </div>
-
-                          <!-- 查看更多 -->
-                          <div class="showMoreBox">
-                            <p class="title">查看更多</p>
-                          </div>
-
-                          <!-- 精品课程 -->
-                          <div class="titleBox">
-                            <p class="text">精品课程</p>
-                            <img class="arrowPic" src="/static/images/triangleArrow.png">
-                            <img class="morePic" src="/static/images/more.png">
-                          </div>
-
-                          <div class="slideSwitch">
-                            <div class="classRecommendBox"> <!--Recommend=>推荐-->
-                              <div class="classRecommendPicBox">
-                                <img class="classRecommendPic" src="/static/images/testBgPic.jpg">
-                                <div class="topBox">
-                                  <p class="text1">好课推荐</p>
-                                  <p class="text2">共50门 | 每日更新</p>
-                                </div>
-                                <div class="bottomBox">
-                                  <p class="text1">1 聪明小天才英语教学，基础班限时打折报名</p>
-                                  <p class="text1">2 聪明小天才英语教学，基础班限时打折报名</p>
-                                  <p class="text1">3 聪明小天才英语教学，基础班限时打折报名</p>
-                                  <p class="text2">查看全部 50门 ></p>
-                                </div>
-                              </div>
-                            </div>
-
-                            <div class="classRecommendBox2"> <!--Recommend=>推荐-->
-                              <div class="classRecommendPicBox">
-                                <img class="classRecommendPic" src="/static/images/testBgPic2.jpg">
-                                <div class="topBox">
-                                  <p class="text1">好课推荐</p>
-                                  <p class="text2">共50门 | 每日更新</p>
-                                </div>
-                                <div class="bottomBox">
-                                  <p class="text1">1 聪明小天才英语教学，基础班限时打折报名</p>
-                                  <p class="text1">2 聪明小天才英语教学，基础班限时打折报名</p>
-                                  <p class="text1">3 聪明小天才英语教学，基础班限时打折报名</p>
-                                  <p class="text2">查看全部 50门 ></p>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-
-                          <!--新增模块-->
-                          <div class="addNewModel">
-                            <p class="text">新增模块</p>
-                          </div>
-
-                        </div>
-
-
-                      </div>
-                    </div>
-
-                    <div v-if="modelSwitchType == 'show'">
-                      展厅内容
-                    </div>
-                  </div>
-                </div>
-            </div>
-        </movable-area>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                modelSwitchType: 'shop',
-                showIndex: 0,
-                tran: 350,    //横轴
-                vert: 500     //纵轴
-            }
-        },
-
-        onLoad() {
-            // let obj=wx.createSelectorQuery();
-            // obj.selectAll('.moveMenuBox').boundingClientRect();
-            // obj.exec(function (rect) {
-            //     console.log(rect);
-            // });
-        },
-
-        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);
-                // console.log(wx.getSystemInfoSync());
-            },
-            handleChange(e) {
-              // console.log(e);
-              this.tran = e.detail.x;
-              this.vert = e.detail.y;
-              if (this.tran <= 188) {
-                  console.log('超过中间线了');
-                  this.tran = 0;
-              } else {
-                  this.tran = 350;
-              }
-              console.log('X:', this.tran);
-              console.log('Y:', this.vert);
-            }
-        }
-    }
-</script>
-
-<style lang="less">
-    
-</style>

src/pages/chat/chat.vue

@@ -0,0 +1,1076 @@
+<template>
+  <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>
+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 lang="less">
+  @width: 56rpx;
+  @height: 56rpx;
+  @margin: 10rpx;
+  body {
+    background-color: #f8f8ff;
+  }
+
+  /*聊天面板（不含底部输入框及功能栏）*/
+  .chatTable {
+    width: 100%;
+    min-height: 1010rpx;
+    padding: 15rpx;
+    margin-bottom: 70rpx;
+    /* border: 1px solid #ff0; */
+    box-sizing: border-box;
+    /* overflow-x: hidden;
+    overflow-y: scroll; */
+    /* position: relative; */
+    .chatTableDiv {
+      margin-bottom: 30rpx;
+      width: 100%;
+      min-height: 40rpx;
+      display: flex;
+      word-break: normal;
+    }
+    .chatTextContent {
+      margin: 0 15rpx 0 15rpx;
+      padding: 15rpx 10rpx;
+      box-sizing: border-box;
+      letter-spacing: 2rpx;
+      max-width: 500rpx;
+      height: auto;
+      font-size: 26rpx;
+      color: #000;
+      border-radius: 20rpx;
+      .emojiImg {
+        width: 40rpx;
+        height: 40rpx;
+      }
+    }
+    .meAvatUrl {
+      width: 72rpx;
+      height: 72rpx;
+      border-radius: 72rpx;
+    }
+    .otherAvatUrl {
+      width: 72rpx;
+      height: 72rpx;
+      border-radius: 72rpx;
+    }
+    .content {
+      width: 200rpx;
+      height: 200rpx;
+      border-radius: 20rpx;
+    }
+    video {
+      max-width: 350rpx;
+      max-height: 150rpx;
+    }
+    .me {
+      margin-right: 10rpx;
+      word-break: break-word;
+      background-color: #00cd66;
+    }
+    .others {
+      margin-left: 10rpx;
+      word-break: break-word;
+      background-color: #fff;
+    }
+    .lefts {
+      justify-content: flex-start;
+    }
+    .rights {
+      justify-content: flex-end;
+    }
+    .mine {
+      /* justify-content: flex-end; */
+      /* display: flex; */
+      
+      img {
+        margin-left: 10rpx;
+      }
+      video {
+        margin-left: 10rpx;
+        width: 200rpx;
+        height: 200rpx;
+        border-radius: 20rpx;
+      }
+      .emojiContent {
+        width: 48rpx;
+        height: 48rpx;
+      }
+      .videoPic {
+        width: 200rpx;
+        height: 200rpx;
+        border-radius: 20rpx;
+      }
+      .breathDiv {
+        width: 200rpx;
+        height: 200rpx;
+        border-radius: 20rpx;
+        background: rgba(0, 0, 0, .8);
+        position: relative;
+        .circularDiv {
+          display: absolute;
+          margin: 25rpx auto;
+          width: 150rpx;
+          height: 150rpx;
+          border-radius: 75rpx;
+          background: transparent;
+          box-shadow: 0 0 20rpx 20rpx #fff;
+
+          animation-name: breath; /*动画名称*/
+          animation-duration: 2s; /*执行时间*/
+          animation-timing-function: linear;  /*匀速执行*/
+          animation-iteration-count: infinite;  /*循环执行*/
+
+          @keyframes breath {
+            from { opacity: 0.1; }  /* 动画开始时的不透明度 */
+            50%  { opacity: 0.5; }  /* 动画50% 时的不透明度 */
+            to   { opacity: 0.1; }  /* 动画结束时的不透明度 */
+          }
+        }
+        .text {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          line-height: 200rpx;
+          text-align: center;
+          color: #fff;
+        }
+      }
+
+    }
+    .audioPlay {
+        width: 150rpx;
+        height: 50rpx;
+        border-radius: 30rpx;
+        background: #00cd66;
+        img {
+          width: 32rpx;
+          height: 32rpx;
+        }
+        .audioTime {
+
+        }
+    }
+    .audioLeft {
+      margin: 8rpx 5rpx 0 10rpx;
+    }
+    .audioRight {
+      margin: 8rpx 5rpx 0 109rpx;
+    }
+    .cancelAudioBox {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 93vh;
+      /* border: 1px solid #f00; */
+      background-color: rgba(220, 220, 220, .7);
+      .cancelAudio {
+        height: 300rpx;
+        margin: auto 0;
+        p {
+          width: 200rpx;
+          height: 200rpx;
+          border-radius: 100rpx;
+          line-height: 200rpx;
+          margin: 73rpx auto;
+          font-size: 24rpx;
+          color: #fff;
+          text-align: center;
+        }
+      }
+      .defaultBg {
+        background-color: rgba(105, 105, 105, .7);
+      }
+      .cancelBg {
+        background-color: rgba(243, 32, 32, 0.7);
+      }
+    }
+  }
+  .shwoBigPicBox {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: #000;
+    p {
+      position: absolute;
+      top: 0;
+      right: 0;
+      text-align: right;
+      font-size: 64rpx;
+      color: #fff;
+      z-index: 999;
+    }
+    img {
+      width: 100%;
+      height: 450rpx;
+      margin: 400rpx auto;
+    }
+    video {
+      width: 100%;
+      height: 100vh;
+    }
+  }
+
+  /*清除浮动*/
+  .clear {
+      clear: both;
+  }
+
+  /*底部功能选项（所有）*/
+  .bottomOperation {
+    width: 100%;
+    min-height: 70rpx;
+    max-height: 250rpx;
+    line-height: 70rpx;
+    z-index: 99;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background-color: #f5f5f5;
+    display: flex;
+    .chatInput {
+      margin-left: 10rpx;
+      .textContent {   
+        width: 500rpx;
+        min-height: 60rpx;
+        max-height: 250rpx;
+        line-height: 50rpx;
+        padding: 6rpx 10rpx;
+        box-sizing: border-box;
+        /* border: 1px solid #f00; */
+        background-color: #fff;
+        margin-top: 10rpx;
+        font-size: 28rpx;
+      }
+    }
+    .audio {
+      margin-left: 5rpx;
+      img {
+        margin-top: @margin;
+        width: @width;
+        height: @height;
+      }
+    }
+    .text {
+      button {
+        margin: 10rpx 0 0 10rpx;
+        width: 500rpx;
+        height: 50rpx;
+        font-size: 25rpx;
+      }
+    }
+    .speakBtn {
+      /* background: linear-gradient(to bottom,#fff, #00cd66); */
+      background: #00cd66;
+    }
+    .btnSpeak {
+      background:  #f8f8ff;
+    }
+    .expSvg {
+      margin-left: 10rpx;
+      img {
+        margin-top: @margin;
+        width: @width;
+        height: @height;
+      }
+    }
+    .showOper {
+      margin-left: 15rpx;
+      img {
+        margin-top: @margin;
+        width: @width;
+        height: @height;
+      }
+    }
+    .sendBtn {
+      margin-left: 15rpx;
+      button {
+        padding: 0;
+        margin-top: 10rpx;
+        width: 90rpx;
+        height: 50rpx;
+        background-color: #00cd66;
+        color: #fff;
+        font-size: 20rpx;
+        text-align: center;
+      }
+    }
+  }
+
+  /*底部 + 功能栏*/
+  .options {
+    /* display: flex;
+    justify-content: center; */
+    padding-left: 10rpx;
+    box-sizing: border-box;
+    img {
+      width: 80rpx;
+      height: 80rpx;
+      margin: 5rpx 10rpx 10rpx 0;
+    }
+    .optionChoose {
+      /* flex: 1; */
+    }
+  }
+  
+  /*表情模态框*/
+  .emojiBox {
+    width: 100%;
+    height: 210rpx;
+    z-index: 999;
+    position: fixed;
+    left: 0;
+    bottom: -50vh;
+    /* white-space: normal; */
+    .emoji {
+      float: left;
+      margin: 10rpx;
+      width: 48rpx;
+      height: 48rpx;
+    }
+    /* .hiddenBox {
+      bottom: -50vh;
+    } */
+    /* .showBox {
+      bottom: 50vh;
+      transition-duration: 1s;
+    } */
+  }
+</style>

src/pages/find/find.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="cx-find">
+        <p>发现页面</p>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        }
+    }
+}
+</script>
+
+<style lang="less">
+    
+</style>

src/pages/index/index.vue

@@ -1,1076 +1,688 @@
 <template>
-  <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 class="cx-card">
+        <movable-area class="moveMenuBox">
+            <movable-view class="moveMenuCont" v-if="modelSwitchType == 'show'" :x="tran" :y="vert" @touchend="handleTouchEnd" direction="all" damping="30" friction="5" @change="handleChange">
+                <img class="moveMenuPic" src="/static/images/buoy.png">
+            </movable-view>
+            <movable-view class="moveMenuCont" v-if="modelSwitchType == 'card'" :x="tran" :y="vert" @touchend="handleTouchEnd" direction="all" damping="30" friction="5" @change="handleChange">
+                <img class="moveMenuPic" src="/static/images/headPic5.jpg">
+                <p class="text">聊一聊</p>
+            </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/vip.png">
+                              <img class="Authentication" src="/static/images/presonAuthen.png">
+                            </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/vip.png">
+                            </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" @click="showWhoCollecMe()">
+                          <div class="userAvatarBox">
+                            <div class="avatarBox">
+                              <img class="avatar" src="/static/images/headPic1.jpg">
+                              <img class="crown" src="/static/images/vip.png">
+                              <img class="Authentication" src="/static/images/companyAuthen.png">
+                            </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/vip.png">
+                            </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>
+                          <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/like_noSelect.png">
+                          <span class="text">靠谱</span>
+                          <span class="num">10</span>
+                        </div>
+                        <div class="signDetail">
+                          <img class="pic" src="/static/images/like_noSelect.png">
+                          <span class="text">幽默</span>
+                          <span class="num">8</span>
+                        </div>
+                        <div class="signDetail">
+                          <img class="pic" src="/static/images/like_noSelect.png">
+                          <span class="text">颜值爆表</span>
+                          <span class="num">8</span>
+                        </div>
+                        <div class="signDetail">
+                          <img class="pic" src="/static/images/like_noSelect.png">
+                          <span class="text">有实力</span>
+                          <span class="num">10</span>
+                        </div>
+                        <div class="signDetail">
+                          <img class="pic" src="/static/images/like_noSelect.png">
+                          <span class="text">友好</span>
+                          <span class="num">8</span>
+                        </div>
+                        <div class="signDetail">
+                          <img class="pic" src="/static/images/like_noSelect.png">
+                          <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 class="shopModel" v-if="modelSwitchType == 'shop'">
+                      <div class="switchDiv">
+                        <switch class="switchPic" checked color="#53A7FA"></switch>
+                        <p class="text">启用商城</p>
+                      </div>
+                      <div class="searchDiv">
+                          <img class="searchPic" src="/static/images/search.png">
+                          <input class="input" type="text" placeholder="按姓名、公司或职位搜索">
+                      </div>
+                      <div class="optionBox">
+                        <div class="options">
+                          <p class="text1">好课推荐</p>
+                          <p class="text1">实用教程</p>
+                          <p class="text1">生活美学</p>
+                          <p class="labelText">标签设置</p>
+                        </div>
+                        <div class="separate"></div>
+                        <p class="allOption">全部</p>
+                      </div>
+                      <div class="everyModel">
+
+                        <!-- banner -->
+                        <div class="titleBox">
+                          <p class="text">banner</p>
+                          <img class="arrowPic" src="/static/images/triangleArrow.png">
+                          <img class="morePic" src="/static/images/more.png">
+                        </div>
+
+                        <div class="bannerBox">
+                          <div class="bannerPicBox">
+                            <img class="bannerPic" src="/static/images/bannerImg.png">
+                          </div>
+                        </div>
+
+                        <!-- 背景 -->
+                        <div class="haveBgDiv">
+                          <!-- 精品课程 -->
+                          <div class="titleBox bg">
+                            <p class="text">精品课程</p>
+                            <img class="arrowPic" src="/static/images/triangleArrow.png">
+                            <img class="morePic" src="/static/images/more.png">
+                          </div>
+
+                          <div class="goodsListBox">
+                            <div class="goodsList">
+                              <div class="goodsImgBox">
+                                <img class="goodsPic" src="/static/images/goodsImg.png">
+                                <p class="goodsSign">热门</p>
+                              </div>
+                              <p class="goodsTitle">英语启蒙第一课一拼一读自然英语启蒙第一课拼读</p>
+                              <p class="goodsDescribe">奔逃教材结合了儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材哈哈哈哈哈哈哈哈哈哈哈</p>
+                              <div class="numBox">
+                                <p class="goodsStock">库存:90</p>
+                                <p class="goodsPrice">￥900</p>
+                              </div>
+                            </div>
+
+                            <div class="goodsList">
+                              <div class="goodsImgBox">
+                                <img class="goodsPic" src="/static/images/goodsImg.png">
+                              </div>
+                              <p class="goodsTitle">英语启蒙第一课一拼一读自然英语启蒙第一课拼读</p>
+                              <p class="goodsDescribe">奔逃教材结合了儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材哈哈哈哈哈哈哈哈哈哈哈</p>
+                              <div class="numBox">
+                                <p class="goodsStock">库存：90</p>
+                                <p class="goodsPrice">￥900</p>
+                              </div>
+                            </div>
+
+                            <div class="goodsList">
+                              <div class="goodsImgBox">
+                                <img class="goodsPic" src="/static/images/goodsImg.png">
+                              </div>
+                              <p class="goodsTitle">英语启蒙第一课一拼一读自然英语启蒙第一课拼读</p>
+                              <p class="goodsDescribe">奔逃教材结合了儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材哈哈哈哈哈哈哈哈哈哈哈</p>
+                              <div class="numBox">
+                                <p class="goodsStock">库存：90</p>
+                                <p class="goodsPrice">￥900</p>
+                              </div>
+                            </div>
+
+                            <div class="goodsList">
+                              <div class="goodsImgBox">
+                                <img class="goodsPic" src="/static/images/goodsImg.png">
+                              </div>
+                              <p class="goodsTitle">英语启蒙第一课一拼一读自然英语启蒙第一课拼读</p>
+                              <p class="goodsDescribe">奔逃教材结合了儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材哈哈哈哈哈哈哈哈哈哈哈</p>
+                              <div class="numBox">
+                                <p class="goodsStock">库存：90</p>
+                                <p class="goodsPrice">￥900</p>
+                              </div>
+                            </div>
+
+                            <!-- 查看更多 -->
+                            <div class="showMoreBox">
+                              <p class="title">查看更多</p>
+                            </div>
+                          </div>
+
+                          <!-- 精品课程 -->
+                          <div class="titleBox">
+                            <p class="text">精品课程</p>
+                            <img class="arrowPic" src="/static/images/triangleArrow.png">
+                            <img class="morePic" src="/static/images/more.png">
+                          </div>
+                          
+                          <div class="BoutiqueClass">
+                            <div class="classPicBox">
+                              <img class="classPic" src="/static/images/testPic.jpg">
+                              <p class="commentText">
+                                我想说点什么呢？哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
+                              </p>
+                            </div>
+                          </div>
+
+                          <!-- 最新课程 -->
+                          <div class="titleBox">
+                            <p class="text">最新课程</p>
+                            <img class="arrowPic" src="/static/images/triangleArrow.png">
+                            <img class="morePic" src="/static/images/more.png">
+                          </div>
+
+                          <!-- 最新课程列表 -->
+                          <div class="newClassBox">
+                            <div class="classPicBox">
+                              <img class="classPic" src="/static/images/testPic2.jpg">
+                            </div>
+                            <div class="detailBox">
+                              <p class="title">
+                                英语启蒙第一课一拼一读自然英语启蒙第一课一拼一读
+                              </p>
+                              <p class="describeText">
+                                本套教材结合课儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材一系列适合少儿综合素质培养的教材一系列适合少儿综合素质培养的教材
+                              </p>
+                              <div class="numBox">
+                                <p class="goodsStock">库存:90</p>
+                                <p class="goodsPrice">￥900</p>
+                              </div>
+                            </div>
+                          </div>
+
+                          <div class="newClassBox">
+                            <div class="classPicBox">
+                              <img class="classPic" src="/static/images/testPic2.jpg">
+                            </div>
+                            <div class="detailBox">
+                              <p class="title">
+                                英语启蒙第一课一拼一读自然英语启蒙第一课一拼一读
+                              </p>
+                              <p class="describeText">
+                                本套教材结合课儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材一系列适合少儿综合素质培养的教材一系列适合少儿综合素质培养的教材
+                              </p>
+                              <div class="numBox">
+                                <p class="goodsStock">库存:90</p>
+                                <p class="goodsPrice">￥900</p>
+                              </div>
+                            </div>
+                          </div>
+
+                          <!-- 查看更多 -->
+                          <div class="showMoreBox">
+                            <p class="title">查看更多</p>
+                          </div>
+
+                          <!-- 精品课程 -->
+                          <div class="titleBox">
+                            <p class="text">精品课程</p>
+                            <img class="arrowPic" src="/static/images/triangleArrow.png">
+                            <img class="morePic" src="/static/images/more.png">
+                          </div>
+
+                          <div class="slideSwitch">
+                            <div class="classRecommendBox"> <!--Recommend=>推荐-->
+                              <div class="classRecommendPicBox">
+                                <img class="classRecommendPic" src="/static/images/testBgPic.jpg">
+                                <div class="topBox">
+                                  <p class="text1">好课推荐</p>
+                                  <p class="text2">共50门 | 每日更新</p>
+                                </div>
+                                <div class="bottomBox">
+                                  <p class="text1">1 聪明小天才英语教学，基础班限时打折报名</p>
+                                  <p class="text1">2 聪明小天才英语教学，基础班限时打折报名</p>
+                                  <p class="text1">3 聪明小天才英语教学，基础班限时打折报名</p>
+                                  <p class="text2">查看全部 50门 ></p>
+                                </div>
+                              </div>
+                            </div>
+
+                            <div class="classRecommendBox2"> <!--Recommend=>推荐-->
+                              <div class="classRecommendPicBox">
+                                <img class="classRecommendPic" src="/static/images/testBgPic2.jpg">
+                                <div class="topBox">
+                                  <p class="text1">好课推荐</p>
+                                  <p class="text2">共50门 | 每日更新</p>
+                                </div>
+                                <div class="bottomBox">
+                                  <p class="text1">1 聪明小天才英语教学，基础班限时打折报名</p>
+                                  <p class="text1">2 聪明小天才英语教学，基础班限时打折报名</p>
+                                  <p class="text1">3 聪明小天才英语教学，基础班限时打折报名</p>
+                                  <p class="text2">查看全部 50门 ></p>
+                                </div>
+                              </div>
+                            </div>
+
+                            <div class="empty"></div>
+                          </div>
+
+                          <!--新增模块-->
+                          <div class="addNewModel">
+                            <p class="text">新增模块</p>
+                          </div>
+
+                        </div>
+
+                      </div>
+                    </div>
+
+                    <!-- 展厅模块 -->
+                    <div class="showModel" v-if="modelSwitchType == 'show'">
+                      <!-- 展厅开关 -->
+                      <div class="switchDiv">
+                        <switch class="switchPic" color="#53A7FA"></switch>
+                        <p class="text">启用展厅</p>
+                      </div>
+
+                      <!-- 主体 -->
+                      <div class="container">
+                        <div class="region1">
+                          <p class="title">不管是夏天还是冬天，这一款水杯都是您出行必备神器还送迷你小风扇一台</p>
+                          <div class="imgBox">
+                            <img class="contPic" src="/static/images/testPic3.jpg">
+                            <img class="playPic" src="/static/images/play.png">
+                          </div>
+                          <div class="bottomDiv">
+                            <p class="text">2020-02-03 14:00</p>
+                            <img class="morePic" src="/static/images/more.png">
+                          </div>
+                        </div>
+
+                        <div class="region2">
+                          <p class="title">不管是夏天还是冬天，这一款水杯都是您出行必备神器还送迷你小风扇一台</p>
+                          <div class="imgBox">
+                            <img class="contPic" src="/static/images/testPic4.png">
+                          </div>
+                          <div class="bottomDiv">
+                            <p class="text">2020-02-03 14:00</p>
+                            <img class="morePic" src="/static/images/more.png">
+                          </div>
+                        </div>
+
+                        <div class="region3">
+                          <div class="imgBox">
+                            <img class="contPic" src="/static/images/testPic5.png">
+                          </div>
+                          <div class="bottomDiv">
+                            <p class="text">2020-02-03 14:00</p>
+                            <img class="morePic" src="/static/images/more.png">
+                          </div>
+                        </div>
+
+                        <div class="region4">
+                          <p class="title">不管是夏天还是冬天，这一款水杯都是您出行必备神器还送迷你小风扇一台</p>
+                          <div class="imgBox">
+                            <img class="contPic" src="/static/images/testPic4.png">
+                            <img class="contPic" src="/static/images/testPic4.png">
+                            <img class="contPic" src="/static/images/testPic4.png">
+                            <img class="contPic" src="/static/images/testPic4.png">
+                            <img class="contPic" src="/static/images/testPic4.png">
+                            <img class="contPic" src="/static/images/testPic4.png">
+                            <img class="contPic" src="/static/images/testPic4.png">
+                            <img class="contPic" src="/static/images/testPic4.png">
+                          </div>
+                          <div class="bottomDiv">
+                            <p class="text">2020-02-03 14:00</p>
+                            <img class="morePic" src="/static/images/more.png">
+                          </div>
+                        </div>
+
+                        <div class="region5">
+                          <div class="imgBox">
+                            <img class="contPic" src="/static/images/testPic5.png">
+                            <p class="text">晨练的十大好处</p>
+                          </div>
+                          <div class="wordDiv">
+                            <p class="text">不管是夏天还是冬天，这一款水杯都是您出行必备神器还送迷你小风扇一台</p>
+                          </div>
+                          <div class="bottomDiv">
+                            <p class="text">2020-02-03 14:00</p>
+                            <img class="morePic" src="/static/images/more.png">
+                          </div>
+                        </div>
+
+                      </div>
+
+                    </div>
+                  </div>
+                </div>
+            </div>
+        </movable-area>
     </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>
-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);
-          
+    export default {
+        data() {
+            return {
+                modelSwitchType: 'card',
+                showIndex: 0,
+                tran: 350,    //横轴
+                vert: 500     //纵轴
+            }
         },
-        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;
-            }
+        onLoad() {
             
-            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;
+        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;
                 }
-                that.percentage = 0;
-                clearInterval(timeId);
-              }, 500);
+            },
+            handleTouchEnd(e) {
+
+                //方式1：
+                // 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;
+                // }
+
+                //方式2：
+                // 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);
+                // console.log(wx.getSystemInfoSync());
+            },
+            handleChange(e) {
+              // console.log(e);
+              this.tran = e.detail.x;
+              this.vert = e.detail.y;
+              if (this.tran <= 188) {
+                  console.log('超过中间线了');
+                  this.tran = 0;
+              } else {
+                  this.tran = 350;
+              }
+              console.log('X:', this.tran);
+              console.log('Y:', this.vert);
+            },
+            showWhoCollecMe() {
+              wx.navigateTo({
+                url: './showWhoCollecMe'
+            });
             }
-          }, 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 lang="less">
-  @width: 56rpx;
-  @height: 56rpx;
-  @margin: 10rpx;
-  body {
-    background-color: #f8f8ff;
-  }
-
-  /*聊天面板（不含底部输入框及功能栏）*/
-  .chatTable {
-    width: 100%;
-    min-height: 1010rpx;
-    padding: 15rpx;
-    margin-bottom: 70rpx;
-    /* border: 1px solid #ff0; */
-    box-sizing: border-box;
-    /* overflow-x: hidden;
-    overflow-y: scroll; */
-    /* position: relative; */
-    .chatTableDiv {
-      margin-bottom: 30rpx;
-      width: 100%;
-      min-height: 40rpx;
-      display: flex;
-      word-break: normal;
-    }
-    .chatTextContent {
-      margin: 0 15rpx 0 15rpx;
-      padding: 15rpx 10rpx;
-      box-sizing: border-box;
-      letter-spacing: 2rpx;
-      max-width: 500rpx;
-      height: auto;
-      font-size: 26rpx;
-      color: #000;
-      border-radius: 20rpx;
-      .emojiImg {
-        width: 40rpx;
-        height: 40rpx;
-      }
-    }
-    .meAvatUrl {
-      width: 72rpx;
-      height: 72rpx;
-      border-radius: 72rpx;
-    }
-    .otherAvatUrl {
-      width: 72rpx;
-      height: 72rpx;
-      border-radius: 72rpx;
-    }
-    .content {
-      width: 200rpx;
-      height: 200rpx;
-      border-radius: 20rpx;
-    }
-    video {
-      max-width: 350rpx;
-      max-height: 150rpx;
-    }
-    .me {
-      margin-right: 10rpx;
-      word-break: break-word;
-      background-color: #00cd66;
-    }
-    .others {
-      margin-left: 10rpx;
-      word-break: break-word;
-      background-color: #fff;
-    }
-    .lefts {
-      justify-content: flex-start;
-    }
-    .rights {
-      justify-content: flex-end;
-    }
-    .mine {
-      /* justify-content: flex-end; */
-      /* display: flex; */
-      
-      img {
-        margin-left: 10rpx;
-      }
-      video {
-        margin-left: 10rpx;
-        width: 200rpx;
-        height: 200rpx;
-        border-radius: 20rpx;
-      }
-      .emojiContent {
-        width: 48rpx;
-        height: 48rpx;
-      }
-      .videoPic {
-        width: 200rpx;
-        height: 200rpx;
-        border-radius: 20rpx;
-      }
-      .breathDiv {
-        width: 200rpx;
-        height: 200rpx;
-        border-radius: 20rpx;
-        background: rgba(0, 0, 0, .8);
-        position: relative;
-        .circularDiv {
-          display: absolute;
-          margin: 25rpx auto;
-          width: 150rpx;
-          height: 150rpx;
-          border-radius: 75rpx;
-          background: transparent;
-          box-shadow: 0 0 20rpx 20rpx #fff;
-
-          animation-name: breath; /*动画名称*/
-          animation-duration: 2s; /*执行时间*/
-          animation-timing-function: linear;  /*匀速执行*/
-          animation-iteration-count: infinite;  /*循环执行*/
-
-          @keyframes breath {
-            from { opacity: 0.1; }  /* 动画开始时的不透明度 */
-            50%  { opacity: 0.5; }  /* 动画50% 时的不透明度 */
-            to   { opacity: 0.1; }  /* 动画结束时的不透明度 */
-          }
-        }
-        .text {
-          width: 100%;
-          height: 100%;
-          position: absolute;
-          top: 0;
-          left: 0;
-          line-height: 200rpx;
-          text-align: center;
-          color: #fff;
-        }
-      }
-
-    }
-    .audioPlay {
-        width: 150rpx;
-        height: 50rpx;
-        border-radius: 30rpx;
-        background: #00cd66;
-        img {
-          width: 32rpx;
-          height: 32rpx;
-        }
-        .audioTime {
-
-        }
-    }
-    .audioLeft {
-      margin: 8rpx 5rpx 0 10rpx;
-    }
-    .audioRight {
-      margin: 8rpx 5rpx 0 109rpx;
-    }
-    .cancelAudioBox {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 93vh;
-      /* border: 1px solid #f00; */
-      background-color: rgba(220, 220, 220, .7);
-      .cancelAudio {
-        height: 300rpx;
-        margin: auto 0;
-        p {
-          width: 200rpx;
-          height: 200rpx;
-          border-radius: 100rpx;
-          line-height: 200rpx;
-          margin: 73rpx auto;
-          font-size: 24rpx;
-          color: #fff;
-          text-align: center;
-        }
-      }
-      .defaultBg {
-        background-color: rgba(105, 105, 105, .7);
-      }
-      .cancelBg {
-        background-color: rgba(243, 32, 32, 0.7);
-      }
-    }
-  }
-  .shwoBigPicBox {
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    background-color: #000;
-    p {
-      position: absolute;
-      top: 0;
-      right: 0;
-      text-align: right;
-      font-size: 64rpx;
-      color: #fff;
-      z-index: 999;
-    }
-    img {
-      width: 100%;
-      height: 450rpx;
-      margin: 400rpx auto;
-    }
-    video {
-      width: 100%;
-      height: 100vh;
-    }
-  }
-
-  /*清除浮动*/
-  .clear {
-      clear: both;
-  }
-
-  /*底部功能选项（所有）*/
-  .bottomOperation {
-    width: 100%;
-    min-height: 70rpx;
-    max-height: 250rpx;
-    line-height: 70rpx;
-    z-index: 99;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    background-color: #f5f5f5;
-    display: flex;
-    .chatInput {
-      margin-left: 10rpx;
-      .textContent {   
-        width: 500rpx;
-        min-height: 60rpx;
-        max-height: 250rpx;
-        line-height: 50rpx;
-        padding: 6rpx 10rpx;
-        box-sizing: border-box;
-        /* border: 1px solid #f00; */
-        background-color: #fff;
-        margin-top: 10rpx;
-        font-size: 28rpx;
-      }
-    }
-    .audio {
-      margin-left: 5rpx;
-      img {
-        margin-top: @margin;
-        width: @width;
-        height: @height;
-      }
-    }
-    .text {
-      button {
-        margin: 10rpx 0 0 10rpx;
-        width: 500rpx;
-        height: 50rpx;
-        font-size: 25rpx;
-      }
-    }
-    .speakBtn {
-      /* background: linear-gradient(to bottom,#fff, #00cd66); */
-      background: #00cd66;
-    }
-    .btnSpeak {
-      background:  #f8f8ff;
-    }
-    .expSvg {
-      margin-left: 10rpx;
-      img {
-        margin-top: @margin;
-        width: @width;
-        height: @height;
-      }
-    }
-    .showOper {
-      margin-left: 15rpx;
-      img {
-        margin-top: @margin;
-        width: @width;
-        height: @height;
-      }
-    }
-    .sendBtn {
-      margin-left: 15rpx;
-      button {
-        padding: 0;
-        margin-top: 10rpx;
-        width: 90rpx;
-        height: 50rpx;
-        background-color: #00cd66;
-        color: #fff;
-        font-size: 20rpx;
-        text-align: center;
-      }
-    }
-  }
-
-  /*底部 + 功能栏*/
-  .options {
-    /* display: flex;
-    justify-content: center; */
-    padding-left: 10rpx;
-    box-sizing: border-box;
-    img {
-      width: 80rpx;
-      height: 80rpx;
-      margin: 5rpx 10rpx 10rpx 0;
-    }
-    .optionChoose {
-      /* flex: 1; */
-    }
-  }
-  
-  /*表情模态框*/
-  .emojiBox {
-    width: 100%;
-    height: 210rpx;
-    z-index: 999;
-    position: fixed;
-    left: 0;
-    bottom: -50vh;
-    /* white-space: normal; */
-    .emoji {
-      float: left;
-      margin: 10rpx;
-      width: 48rpx;
-      height: 48rpx;
-    }
-    /* .hiddenBox {
-      bottom: -50vh;
-    } */
-    /* .showBox {
-      bottom: 50vh;
-      transition-duration: 1s;
-    } */
-  }
+    
 </style>

src/pages/index/showWhoCollecMe.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="cx-showWhoCollecMe">
+        <div class="options top">
+            <div class="topPicBox">
+                <img class="headPic" src="/static/images/headPic3.jpg">
+                <img class="authenPic" src="/static/images/presonAuthen.png">
+                <img class="vipPic" src="/static/images/vip.png">
+            </div>
+            <div class="textBox">
+                <p class="userName">冯小刚</p>
+                <p class="describe">小刚影视传媒有限公司</p>
+                <p class="time">2020-02-02 14:00</p>
+            </div>
+            <div class="exchangeCardDiv">
+                <p class="text"> ⇋ 交换名片</p>
+            </div>
+        </div>
+
+        <div class="options top">
+            <div class="topPicBox">
+                <img class="headPic" src="/static/images/headPic3.jpg">
+                <!-- <img class="authenPic" src="/static/images/presonAuthen.png"> -->
+                <!-- <img class="vipPic" src="/static/images/vip.png"> -->
+            </div>
+            <div class="textBox">
+                <p class="userName">冯小刚</p>
+                <!-- <p class="describe">小刚影视传媒有限公司</p> -->
+                <p class="time">2020-02-02 14:00</p>
+            </div>
+            <div class="exchangeCardDiv">
+                <p class="text"> ⇋ 交换名片</p>
+            </div>
+        </div>
+
+        <div class="options top">
+            <div class="topPicBox">
+                <img class="headPic" src="/static/images/headPic3.jpg">
+                <!-- <img class="authenPic" src="/static/images/presonAuthen.png"> -->
+                <!-- <img class="vipPic" src="/static/images/vip.png"> -->
+            </div>
+            <div class="textBox">
+                <p class="userName">冯小刚</p>
+                <!-- <p class="describe">小刚影视传媒有限公司</p> -->
+                <p class="time">2020-02-02 14:00</p>
+            </div>
+            <div class="exchangeCardDiv">
+                <p class="text"> ⇋ 交换名片</p>
+            </div>
+        </div>
+
+        <div class="options top">
+            <div class="topPicBox">
+                <img class="headPic" src="/static/images/headPic3.jpg">
+                <img class="authenPic" src="/static/images/presonAuthen.png">
+                <img class="vipPic" src="/static/images/vip.png">
+            </div>
+            <div class="textBox">
+                <p class="userName">冯小刚</p>
+                <!-- <p class="describe">小刚影视传媒有限公司</p> -->
+                <p class="time">2020-02-02 14:00</p>
+            </div>
+            <div class="exchangeCardDiv">
+                <p class="text"> ⇋ 交换名片</p>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        }
+    }
+}
+</script>
+
+<style lang="less">
+
+</style>

src/pages/mine/mine.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="cx-mine">
+        <!--头部DIV-->
+        <div class="topDiv">
+            <div class="topPicBox">
+                <img class="headPic" src="/static/images/headPic2.jpg">
+                <img class="headwear" src="/static/images/vip.png">
+            </div>
+            <div class="userInfoDiv">
+                <p class="userName">康娟</p>
+                <p class="vipExprise">VIP有效期至2019-11-25</p>
+            </div>
+            <div class="vipRenew">
+                <p class="text">VIP续费</p>
+            </div>
+        </div>
+
+        <div class="options" @click="subscription()">
+            <img class="optionPic" src="/static/images/clock.png">
+            <p class="text">服务号提醒服务</p>
+            <p class="more">></p>
+        </div>
+
+        <div class="options" @click="customerService()">
+            <img class="optionPic" src="/static/images/service.png">
+            <p class="text">客服自动回复设置</p>
+            <p class="more">></p>
+        </div>
+        
+        <div class="options">
+            <img class="optionPic" src="/static/images/help.png">
+            <p class="text">帮助与反馈</p>
+            <p class="more">></p>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        }
+    },
+
+    onLoad() {
+
+    },
+
+    methods: {
+        subscription() {
+            wx.navigateTo({
+                url: './setSubscription'
+            });
+        },
+        customerService() {
+            wx.navigateTo({
+                url: './setServiceAutoReply'
+            });
+        }
+    }
+
+}
+</script>
+
+<style lang="less">
+
+</style>
+

src/pages/mine/setServiceAutoReply.vue

@@ -0,0 +1,30 @@
+<!--客服自动回复设置页面-->
+<template>
+    <div class="cx-service">
+        <div class="topDiv">
+            <p class="text">自动回复</p>
+            <switch class="pic" checked color="#53A7FA"></switch>
+        </div>
+
+        <div class="textBoxDiv">
+            <textarea class="textBox" v-model="replyCont"></textarea>
+        </div>
+
+        <div class="save">保存</div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            replyCont: '您好，欢迎您进入我的名片，有什么可以帮到 您呢？可以随时与我联系沟通，谢谢！'
+        }
+    }
+}
+</script>
+
+<style lang="less">
+
+</style>
+

src/pages/mine/setSubscription.vue

@@ -0,0 +1,35 @@
+
+<!--服务号设置页面-->
+<template>
+    <div class="cx-subscription">
+        <div class="options top">
+            <p class="text">名片被浏览提醒</p>
+            <switch class="btnPic" checked color="#53A7FA"></switch>
+        </div>
+
+        <div class="options">
+            <p class="text">名片被收藏提醒</p>
+            <switch class="btnPic" color="#53A7FA"></switch>
+        </div>
+
+        <div class="options">
+            <p class="text">名片交换提醒</p>
+            <switch class="btnPic" color="#53A7FA"></switch>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        }
+    }
+}
+</script>
+
+<style lang="less">
+
+</style>
+

src/pages/more/more.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="cx-more">
+        <p>营销工具页面</p>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        }
+    }
+}
+</script>
+
+<style lang="less">
+    
+</style>
+

src/static/less/cx-style.less

@@ -1,4 +1,4 @@
-
+/*首页*/
 .cx-card {
     // background-color: #F5F5F5;
     /*定位菜单*/
@@ -8,15 +8,28 @@
         .moveMenuCont {
             position: fixed;
             z-index: 999;
-            width: 50rpx;
-            height: 50rpx;
-
+            width: 80rpx;
+            height: 80rpx;
             .moveMenuPic {
+                margin-left: 3rpx;
+                width: 74rpx;
+                height: 74rpx;
+                border-radius: 40rpx;
+            }
+            .text {
+                position: absolute;
+                bottom: 0;
+                left: 0;
                 width: 100%;
-                height: 100%;
+                height: 30rpx;
+                text-align: center;
+                line-height: 30rpx;
+                font-size: 20rpx;
+                color: #fff;
+                border-radius: 15rpx;
+                background-color: #50A8FC;
             }
         }
-
         .subject {
             .topPic {
                 width: 750rpx;
@@ -226,9 +239,9 @@
 
                                         .crown {
                                             position: absolute;
-                                            top: 0;
+                                            top: -15rpx;
                                             right: 0;
-                                            transform: rotate(45deg);
+                                            // transform: rotate(45deg); //旋转
                                             width: 28rpx;
                                             height: 28rpx;
                                         }
@@ -311,11 +324,12 @@
                             .signDetail {
                                 margin-top: 30rpx;
                                 padding: 9rpx 24rpx 8rpx 32rpx;
+                                box-sizing: border-box;
                                 width: auto;
                                 height: 54rpx;
                                 border: 1px solid #979797;
                                 border-radius: 48rpx;
-
+                                display: flex;
                                 .pic {
                                     width: 32rpx;
                                     height: 32rpx;
@@ -323,9 +337,8 @@
 
                                 .text {
                                     margin-left: 16rpx;
-                                    display: inline;
-                                    min-width: 54rpx;
-                                    min-width: 108rpx;
+                                    width: auto;
+                                    // min-width: 108rpx;
                                     height: 37rpx;
                                     font-size: 26rpx;
                                     line-height: 37rpx;
@@ -334,9 +347,8 @@
 
                                 .num {
                                     margin-left: 16rpx;
-                                    display: inline;
-                                    min-width: 16rpx;
-                                    max-width: 29rpx;
+                                    width: auto;
+                                    // max-width: 29rpx;
                                     height: 37rpx;
                                     font-size: 26rpx;
                                     line-height: 37rpx;
@@ -764,6 +776,7 @@
                             .haveBgDiv {
                                 width: 100%;
                                 height: auto;
+                                padding-bottom: 100rpx;
                                 background-color: #f5f5f5;
                                 .titleBox {
                                     padding: 60rpx 0 0 30rpx;
@@ -998,11 +1011,7 @@
                                     width: auto;
                                     height: 430rpx;
                                     overflow: auto;
-                                    // overflow-y: hidden;
                                     display: flex;
-                                    // padding: 0 30rpx 10rpx 30rpx;
-                                    // padding-right: 30rpx;
-                                    // box-sizing: border-box;
                                     &::-webkit-scrollbar {
                                         display: none;
                                     }
@@ -1011,7 +1020,7 @@
                                         .classRecommendPicBox {
                                             position: relative;
                                             width: 420rpx;
-                                            height: 388rpx;
+                                            height: 387rpx;
                                             border-radius: 20rpx;
                                             .classRecommendPic {
                                                 width: 100%;
@@ -1144,9 +1153,15 @@
                                             }
                                         }
                                     }
+                                    .empty {
+                                        height: 387rpx;
+                                        width: 1rpx;
+                                        border: 1rpx solid #f5f5f5;
+                                    }
                                 }
                                 .addNewModel {
-                                    margin: 100rpx auto;
+                                    margin-top: 100rpx;
+                                    margin-left: 30%;
                                     padding: 16rpx 86rpx;
                                     box-sizing: border-box;
                                     width: 300rpx;
@@ -1165,6 +1180,262 @@
                             }
                         }
                     }
+                    .showModel {
+                        .switchDiv {
+                            width: 100%;
+                            height: 102rpx;
+                            margin: 50rpx 0 0 20rpx;
+                            display: flex;
+                            .switchPic {
+                                width: 130rpx;
+                                height: 80rpx;
+                            }
+                            .text {
+                                margin: 24rpx 0 36rpx 30rpx;
+                                width: 120rpx;
+                                height: 42rpx;
+                                line-height: 42rpx;
+                                font-size: 30rpx;
+                                color: #434656;
+                            }
+                        }
+                        .container {
+                            margin-top: 36rpx;
+                            width: 100%;
+                            height: auto;
+                            background: #F5F5F5;
+                            .region1 {
+                                width: 100%;
+                                height: auto;
+                                padding: 0 30rpx;
+                                box-sizing: border-box;
+                                background-color: #fff;
+                                .title {
+                                    width: 690rpx;
+                                    height: 84rpx;
+                                    line-height: 42rpx;
+                                    color: #434656;
+                                    font-size: 30rpx;
+                                }
+                                .imgBox {
+                                    margin-top: 30rpx;
+                                    position: relative;
+                                    width: 690rpx;
+                                    height: 388rpx;
+                                    .contPic {
+                                        width: 100%;
+                                        height: 100%;
+                                    }
+                                    .playPic {
+                                        position: absolute;
+                                        top: 139rpx;
+                                        left: 290rpx;
+                                        width: 110rpx;
+                                        height: 110rpx;
+                                    }
+                                }
+                                .bottomDiv {
+                                    margin-top: 30rpx;
+                                    width: 100%;
+                                    height: 28rpx;
+                                    display: flex;
+                                    .text {
+                                        margin-right: 470rpx;
+                                        width: 177rpx;
+                                        height: 28rpx;
+                                        line-height: 28rpx;
+                                        color: #9B9B9B;
+                                        font-size: 20rpx;
+                                    }
+                                    .morePic {
+                                        width: 42rpx;
+                                        height: 10rpx;
+                                    }
+                                }
+                            }
+                            .region2 {
+                                margin-top: 20rpx;
+                                width: 100%;
+                                height: auto;
+                                padding: 30rpx;
+                                box-sizing: border-box;
+                                background-color: #fff;
+                                .title {
+                                    width: 690rpx;
+                                    height: 84rpx;
+                                    line-height: 42rpx;
+                                    color: #434656;
+                                    font-size: 30rpx;
+                                }
+                                .imgBox {
+                                    width: 388rpx;
+                                    height: 388rpx;
+                                    .contPic {
+                                        width: 100%;
+                                        height: 100%;
+                                    }
+                                }
+                                .bottomDiv {
+                                    margin-top: 30rpx;
+                                    width: 100%;
+                                    height: 28rpx;
+                                    display: flex;
+                                    .text {
+                                        margin-right: 470rpx;
+                                        width: 177rpx;
+                                        height: 28rpx;
+                                        line-height: 28rpx;
+                                        color: #9B9B9B;
+                                        font-size: 20rpx;
+                                    }
+                                    .morePic {
+                                        width: 42rpx;
+                                        height: 10rpx;
+                                    }
+                                }
+                            }
+                            .region3 {
+                                margin-top: 20rpx;
+                                width: 100%;
+                                height: auto;
+                                padding: 30rpx;
+                                box-sizing: border-box;
+                                background-color: #fff;
+                                .imgBox {
+                                    width: 100%;
+                                    height: 100%;
+                                    .contPic {
+                                        width: 270rpx;
+                                        height: 388rpx;
+                                    }
+                                }
+                                .bottomDiv {
+                                    margin-top: 30rpx;
+                                    width: 100%;
+                                    height: 28rpx;
+                                    display: flex;
+                                    .text {
+                                        margin-right: 470rpx;
+                                        width: 177rpx;
+                                        height: 28rpx;
+                                        line-height: 28rpx;
+                                        color: #9B9B9B;
+                                        font-size: 20rpx;
+                                    }
+                                    .morePic {
+                                        width: 42rpx;
+                                        height: 10rpx;
+                                    }
+                                }
+                            }
+                            .region4 {
+                                margin-top: 20rpx;
+                                width: 100%;
+                                height: auto;
+                                padding: 30rpx 0 30rpx 30rpx;
+                                box-sizing: border-box;
+                                background-color: #fff;
+                                .title {
+                                    width: 690rpx;
+                                    height: 84rpx;
+                                    line-height: 42rpx;
+                                    color: #434656;
+                                    font-size: 30rpx;
+                                }
+                                .imgBox {
+                                    margin-top: 10rpx;
+                                    width: 100%;
+                                    height: 375rpx;
+                                    display: flex;
+                                    flex-wrap: wrap;
+                                    .contPic:not(:last-child) {
+                                        margin-right: 10rpx;
+                                    }
+                                    .contPic {
+                                        margin-top: 20rpx;
+                                        width: 165rpx;
+                                        height: 165rpx;
+                                    }
+                                }
+
+                                .bottomDiv {
+                                    margin-top: 30rpx;
+                                    width: 100%;
+                                    height: 28rpx;
+                                    display: flex;
+
+                                    .text {
+                                        margin-right: 470rpx;
+                                        width: 177rpx;
+                                        height: 28rpx;
+                                        line-height: 28rpx;
+                                        color: #9B9B9B;
+                                        font-size: 20rpx;
+                                    }
+
+                                    .morePic {
+                                        width: 42rpx;
+                                        height: 10rpx;
+                                    }
+                                }
+                            }
+                            .region5 {
+                                margin-top: 20rpx;
+                                width: 100%;
+                                height: auto;
+                                padding: 30rpx;
+                                box-sizing: border-box;
+                                background-color: #fff;
+                                .imgBox {
+                                    width: 690rpx;
+                                    height: 140rpx;
+                                    background-color: #F0F2F5;
+                                    display: flex;
+                                    .contPic {
+                                        margin: 20rpx;
+                                        width: 100rpx;
+                                        height: 100rpx;
+                                    }
+                                    .text {
+                                        margin: 49rpx 0;
+                                        width: 210rpx;
+                                        height: 42rpx;
+                                        line-height: 42rpx;
+                                        color: #434656;
+                                        font-size: 30rpx;
+                                    }
+                                }
+                                .wordDiv {
+                                    margin: 20rpx 0;
+                                    width: 690rpx;
+                                    height: 84rpx;
+                                    .text {
+                                        line-height: 42rpx;
+                                        color: #9B9B9B;
+                                        font-size: 30rpx;
+                                    }
+                                }
+                                .bottomDiv {
+                                    margin-top: 30rpx;
+                                    width: 100%;
+                                    height: 28rpx;
+                                    display: flex;
+                                    .text {
+                                        margin-right: 470rpx;
+                                        width: 177rpx;
+                                        height: 28rpx;
+                                        line-height: 28rpx;
+                                        color: #9B9B9B;
+                                        font-size: 20rpx;
+                                    }
+                                    .morePic {
+                                        width: 42rpx;
+                                        height: 10rpx;
+                                    }
+                                }
+                            }
+                        }
+                    }
                 }
             }
 
@@ -1183,4 +1454,260 @@
             }
         }
     }
-}
+}
+
+/*个人中心*/
+.cx-mine {
+    .topDiv {
+        padding-top: 30rpx;
+        padding-left: 40rpx;
+        box-sizing: border-box;
+        display: flex;
+        width: 100%;
+        height: 210rpx;
+        background:linear-gradient(180deg, rgba(136, 211, 254, 1) 0%, rgba(80, 168, 252, 1) 100%);
+        .topPicBox {
+            position: relative;
+            margin-right: 30rpx;
+            width: 120rpx;
+            height: 120rpx;
+            .headPic {
+                margin: 10rpx;
+                width: 100rpx;
+                height: 100rpx;
+                border-radius: 50rpx;
+            }
+            .headwear {
+                position: absolute;
+                top: 0;
+                right: 0;
+                width: 40rpx;
+                height: 40rpx;
+            }
+        }
+        .userInfoDiv {
+            margin-top: 15rpx;
+            width: auto;
+            height: 90rpx;
+            .userName {
+                width: 72rpx;
+                height: 50rpx;
+                line-height: 50rpx;
+                color: #fff;
+                font-size: 36rpx;
+            }
+            .vipExprise {
+                margin-top: 4rpx;
+                width: 270rpx;
+                height: 33rpx;
+                line-height: 33rpx;
+                color: #fff;
+                font-size: 24rpx;
+            }
+        }
+        .vipRenew {
+            margin-top: 20rpx;
+            margin-left: 77rpx;
+            width: 190rpx;
+            height: 54rpx;
+            border-radius: 27rpx;
+            background-color: #fff;
+            .text {
+                margin: 6rpx 36rpx 6rpx 37rpx;
+                width: 117rpx;
+                height: 42rpx;
+                color: #50A8FC;
+                line-height: 42rpx;
+                font-size: 30rpx;
+            }
+        }
+    }
+    .options {
+        width: 100%;
+        height: 88rpx;
+        display: flex;
+        border-bottom: 1rpx solid #E5E5E5;
+        .optionPic {
+            margin: 28rpx 30rpx;
+            width: 48rpx;
+            height: 32rpx;
+        }
+        .text {
+            margin-top: 23rpx;
+            width: 320rpx;
+            height: 42rpx;
+            color: #434656;
+            font-size: 30rpx;
+            line-height: 42rpx;
+        }
+        .more {
+            margin: 31rpx 30rpx 31rpx 352rpx;
+            width: 13rpx;
+            height: 26rpx;
+            line-height: 26rpx;
+            font-size: 40rpx;
+            color: #C7C7CC;
+        }
+    }
+
+}
+
+/*服务号提醒设置页面(个人中心)*/
+.cx-subscription {
+    .top {
+        border-top: 1rpx solid #E5E5E5;
+    }
+    .options {
+        width: 100%;
+        height: 88rpx;
+        border-bottom: 1rpx solid #E5E5E5;
+        display: flex;
+        .text {
+            margin: 24rpx 378rpx 22rpx 30rpx;
+            width: 210rpx;
+            height: 42rpx;
+            line-height: 42rpx;
+            color: #434656;
+            font-size: 30rpx;
+        }
+        .btnPic {
+            margin-top: 13rpx;
+            width: 102rpx;
+            height: 62rpx;
+        }
+    }
+}
+
+
+/*客服自动回复设置(个人中心)*/
+.cx-service {
+    .topDiv {
+        width: 100%;
+        height: 88rpx;
+        display: flex;
+        border-top: 1rpx solid #E5E5E5;
+        border-bottom: 1rpx solid #E5E5E5;
+        .text {
+            margin: 24rpx 468rpx 22rpx 30rpx;
+            width: 120rpx;
+            height: 42rpx;
+            line-height: 42rpx;
+            color: #434656;
+            font-size: 30rpx;
+        }
+        .pic{
+            margin-top: 12rpx;
+            width: 102rpx;
+            height: 62rpx;
+        }
+    }
+    .textBoxDiv {
+        width: 100%;
+        height: auto;
+        .textBox {
+            padding: 30rpx 40rpx;
+            box-sizing: border-box;
+            margin: 50rpx 40rpx;
+            width: 670rpx;
+            height: 360rpx;
+            font-size: 30rpx;
+            line-height: 42rpx;
+            color: #434656;
+            border-radius: 20rpx;
+            border: 1rpx solid #979797;
+        }
+    }
+    .save {
+        margin: 90rpx 110rpx;
+        padding: 23rpx 229rpx;
+        box-sizing: border-box;
+        width: 530rpx;
+        height: 96rpx;
+        border-radius: 48rpx;
+        background-color: #50A8FC;
+        color: #fff;
+        line-height: 50rpx;
+        font-size: 36rpx;
+        box-shadow: 0 6rpx 10rpx 0 rgba(4, 62, 119, 0.36);
+    }
+}
+
+/*谁收藏了我页面(名片)*/
+.cx-showWhoCollecMe {
+    .top {
+        border-top: 1px solid #E5E5E5;
+    }
+    .options {
+        width: 100%;
+        height: 154rpx;
+        display: flex;
+        border-bottom: 1px solid #E5E5E5;
+        .topPicBox {
+            position: relative;
+            margin: 26rpx 20rpx 28rpx 30rpx;
+            width: 100rpx;
+            height: 100rpx;
+            .headPic{
+                width: 100%;
+                height: 100%;
+                border-radius: 50rpx;
+            }
+            .authenPic {
+                position: absolute;
+                bottom: 0;
+                right: 0;
+                width: 28rpx;
+                height: 28rpx;
+            }
+            .vipPic {
+                position: absolute;
+                top: -17rpx;
+                right: -15rpx;
+                width: 41rpx;
+                height: 41rpx;
+            }
+        }
+        .textBox {
+            margin-top: 20rpx;
+            margin-right: 109rpx;
+            width: 250rpx;
+            height: 112rpx;
+            .userName{
+                width: 90rpx;
+                height: 42rpx;
+                line-height: 42rpx;
+                color: #434656;
+                font-size: 30rpx;
+            }
+            .describe {
+                width: 250rpx;
+                height: 33rpx;
+                color: #9B9B9B;
+                line-height: 33rpx;
+                font-size: 24rpx;
+            }
+            .time {
+                width: 177rpx;
+                height: 28rpx;
+                color: #9B9B9B;
+                line-height: 28rpx;
+                font-size: 20rpx;
+            }
+        }
+        .exchangeCardDiv {
+            margin-top: 52rpx;
+            .text {
+                padding: 5rpx 26rpx;
+                box-sizing: border-box;
+                width: 201rpx;
+                height: 50rpx;
+                line-height: 40rpx;
+                color: #fff;
+                border-radius: 25rpx;
+                font-size: 28rpx;
+                background-color: #50A8FC;
+            }
+        }
+    }
+}
+