新上传

package-lock.json

@@ -10183,8 +10183,8 @@
     },
     "ws": {
       "version": "7.2.3",
-      "resolved": "https://registry.npm.taobao.org/ws/download/ws-7.2.3.tgz",
-      "integrity": "sha1-pUEeH7BNXtDv7nbSbVxG2DDDm0Y="
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.2.3.tgz",
+      "integrity": "sha512-HTDl9G9hbkNDk98naoR/cHDws7+EyYMOdL1BmjsZXRUjf7d+MficC4B7HLUPlSiho0vg+CWKrGIt/VJBd1xunQ=="
     },
     "xtend": {
       "version": "4.0.2",

src/app.json

@@ -12,8 +12,8 @@
     "navigationBarTextStyle": "black"
   },
   "usingComponents": {
-    "van-row": "../static/vant/weapp/dist/col",
-    "van-col": "../static/vant/weapp/dist/row",
-    "van-popup": "../static/vant/weapp/dist/popup"
+    "van-row": "../static/vant/weapp/lib/col",
+    "van-col": "../static/vant/weapp/lib/row",
+    "van-popup": "../static/vant/weapp/lib/popup"
   }
 }

src/pages/card/index.vue

@@ -1,113 +1,306 @@
 <template>
     <view class="cx-card">
-        <view>
-            <div class="topPic">
-                <img class="pic" src="/static/images/Computer-Background.jpg">
-            </div>
-            <div class="rightTopPic">
-                <img class="pic" src="/static/images/camera.png">
-                <p class="title">更换图片</p>
-            </div>
-            <div class="contanter">
-                <div class="addCard">
-                    <img class="addPic" src="/static/images/add.svg">
-                    <p class="add">创建名片</p>
+        <!-- <movable-area> -->
+            <view>
+                <div class="topPic">
+                    <img class="pic" src="/static/images/Computer-Background.jpg">
                 </div>
-                <div class="optionBox">
-                    <p class="switchCard">管理/切换名片</p>
-                    <p class="modifyCard">修改名片</p>
-                    <p class="setStyle">设置风格</p>
-                    <div class="clear"></div>
+                <div class="rightTopPic">
+                    <img class="pic" src="/static/images/camera.png">
+                    <p class="title">更换图片</p>
                 </div>
-                <div class="shareCardBox">
-                    <div class="shareCard">
-                        <p class="text">分享名片</p>
+                <div class="contanter">
+                    <div class="addCard">
+                        <img class="addPic" src="/static/images/add.svg">
+                        <p class="add">创建名片</p>
                     </div>
-                    <div class="qrCodeBox">
-                        <img class="qrCode" src="/static/images/qrCode.png">
-                        <p class="text">名片码</p>
+                    <div class="optionBox">
+                        <p class="switchCard">管理/切换名片</p>
+                        <p class="modifyCard">修改名片</p>
+                        <p class="setStyle">设置风格</p>
+                        <div class="clear"></div>
                     </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 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="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 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="avatarBox">
-                                        <img class="avatar" src="/static/images/headPic2.jpg">
+
+                                    <div class="whoLooksCareMe">
+                                        <p class="text">889人看过</p>
+                                        <p class="arrow">></p>
                                     </div>
-                                    <div class="avatarBox">
-                                        <img class="avatar" src="/static/images/headPic3.jpg">
-                                        <img class="crown" src="/static/images/crown.svg">
+                                    <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="avatarBox">
-                                        <img class="avatar" src="/static/images/headPic4.jpg">
+                                    
+                                    <div class="whoLooksCareMe">
+                                        <p class="text">谁收藏了我</p>
+                                        <p class="arrow">></p>
+                                        <div class="clear"></div>
                                     </div>
-                                    <div class="avatarBox">
-                                        <img class="avatar" src="/static/images/headPic5.jpg">
+                                    <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="whoLooksCareMe">
-                                    <p class="text">889人看过</p>
-                                    <p class="arrow">></p>
+                                    <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="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 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="avatarBox">
-                                        <img class="avatar" src="/static/images/headPic2.jpg">
+                                    <div class="teamArticleCont2">
+                                        <p class="text">
+                                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
+                                        </p>
                                     </div>
-                                    <div class="avatarBox">
-                                        <img class="avatar" src="/static/images/headPic3.jpg">
-                                        <img class="crown" src="/static/images/crown.svg">
+                                    <div class="teamArticleCont3">
+                                        <img class="teamArticlePi2" src="/static/images/headPic2.jpg">
+                                        <p class="text">总经理:陈浩</p>
                                     </div>
-                                    <div class="avatarBox">
-                                        <img class="avatar" src="/static/images/headPic4.jpg">
+                                    <div class="teamArticleCont4">
+                                        <p class="text">
+                                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
+                                        </p>
                                     </div>
-                                    <div class="avatarBox">
-                                        <img class="avatar" src="/static/images/headPic5.jpg">
+                                </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="whoLooksCareMe">
-                                    <p class="text">谁收藏了我</p>
-                                    <p class="arrow">></p>
+                                <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="clear"></div>
+
+                                <!--自定义-->
+                                <div class="modelName">
+                                    <div class="titleBox" data-index="4" @click="panel">
+                                        <div class="title">自定义</div>
+                                        <div class="titlePicBox">
+                                            <img class="titlePic" :src="showIndex == 4 ? '/static/images/arrowUp.svg' : '/static/images/arrowDown.svg'">
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="modelBox" v-if="showIndex == 4">
+                                    <div class="customArticle1">
+                                        <img class="customArticlePic1" src="/static/images/spot.svg">
+                                        <p class="text">
+                                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
+                                        </p>
+                                        <div class="clear"></div>
+                                    </div>
+                                    <div class="customArticle2">
+                                        <img class="customArticlePic2" src="/static/images/spot.svg">
+                                        <p class="text">
+                                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
+                                        </p>
+                                        <div class="clear"></div>
+                                    </div>
+                                </div>
+
+                                <!--新增模块-->
+                                <div class="addNewModel">
+                                    <p class="text">新增模块</p>
+                                </div>
+
                             </div>
+
+                        </div>
+
+                        <div v-if="modelSwitchType == 'shop'">
+                            名片内容
+                        </div>
+                        <div v-if="modelSwitchType == 'show'">
+                            展厅内容
                         </div>
                     </div>
-                    <div v-if="modelSwitchType == 'shop'">
-                        名片内容
-                    </div>
-                    <div v-if="modelSwitchType == 'show'">
-                        展厅内容
+
+                    <!--定位小菜单-->
+                    <div class="positionDiv" style="position: fixed; bottom: toprpx; right: left" @touchend="handleTouchEnd">
+                        <img class="positionPic" src="/static/images/moreOptions.svg">
                     </div>
+                    
                 </div>
-            </div>
-        </view>
+            </view>
+
+<!--定位小菜单-->
+            <!-- <movable-view class="positionBox" :x="x" :y="y" @touchend="handleTouchEnd">
+                <img class="positionPic" src="/static/images/moreOptions.svg" direction="all">
+            </movable-view>
+        </movable-area> -->
     </view>
 </template>
 
@@ -115,12 +308,15 @@
     export default {
         data() {
             return {
-                modelSwitchType: 'card'
+                modelSwitchType: 'card',
+                showIndex: 0,
+                top: 80,
+                left: 0
             }
         },
 
         onLoad() {
-
+            console.log
         },
 
         methods: {
@@ -132,7 +328,45 @@
             },
             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;
+                }
+            },
+            // moreOption(e) {
+            //     console.log('点击', e);
+            // },
+            // handleTouchStart(e) {
+            //     console.log('触摸开始', e);
+            // },
+            // handleTouchMove(e) {
+            //     console.log('触摸移动', e);
+            // },
+            handleTouchEnd(e) {
+                console.log('触摸结束', e);
+                this.top = e.mp.changedTouches[0].pageX;
+                this.left = e.mp.changedTouches[0].pageY;
             }
+            
+            // handleTouchEnd(e) {
+            //     console.log(e.mp.changedTouches[0].pageY);
+            //     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.x = xNumLeft;
+            //         this.y = yNum;
+            //     } else {
+            //         this.x = xNumRight;
+            //         this.y = yNum;
+            //     }
+            // }
         }
     }
 </script>
@@ -142,6 +376,7 @@
         .topPic {
             width: 750rpx;
             height: 550rpx;
+            /* z-index: 9; */
             .pic {
                 width: 100%;
                 height: 100%;
@@ -167,10 +402,12 @@
             }
         }
         .contanter {
-            padding: 0 20rpx;
             .addCard {
                 position: relative;
                 top: -160rpx;
+                /* margin-top: -160rpx; */
+                /* z-index: 99; */
+                margin-left: 20rpx;
                 width: 710rpx;
                 height: 430rpx;
                 border-radius: 20rpx;
@@ -187,8 +424,7 @@
                 }
             }
             .optionBox {
-                margin-top: -100rpx;
-                margin-bottom: 67rpx;
+                margin: -100rpx 0 67rpx 20rpx;
                 padding-left: 20rpx;
                 width: 710rpx;
                 height: auto;
@@ -218,7 +454,8 @@
                 }
             }
             .shareCardBox {
-                width: 100%;;
+                margin-left: 20rpx;
+                width: 100%;
                 .shareCard {
                     margin-left: 47rpx;
                     width: 530rpx;
@@ -265,7 +502,7 @@
                     padding: 0 75rpx;
                     display: flex;
                     .card {
-                        width: 80rpx;
+                        width: 60rpx;
                         height: 42rpx;
                         line-height: 42rpx;
                         margin-right: 75rpx;
@@ -278,7 +515,7 @@
                         color: #979797;
                     }
                     .shop {
-                        width: 80rpx;
+                        width: 60rpx;
                         height: 42rpx;
                         line-height: 42rpx;
                         margin-right: 75rpx;
@@ -286,7 +523,7 @@
                         justify-content: center;
                     }
                     .show {
-                        width: 80rpx;
+                        width: 60rpx;
                         height: 42rpx;
                         line-height: 42rpx;
                         font-size: 30rpx;
@@ -297,81 +534,426 @@
                     width: 100%;
                     margin-top: 31rpx;
                     .looksCareBox {
+                        margin-left: 20rpx;
                         width: 100%;
-                        padding: 0 20rpx 0 40rpx;
-                    }
-                }
-                .looksCareBox {
-                    .looksCare {
-                        margin-top: 31rpx;
-                        .userAvatarBox:not(:last-child) {
-                            margin-right: 18rpx;
-                        }
-                        .userAvatarBox {
-                            display: flex;
-                            float: left;
-                            .avatarBox {
-                                position: relative;
-                                justify-content: center;
-                                width: 85rpx;
-                                height: 85rpx;
-                                .avatar {
-                                    width: 80rpx;
-                                    height: 80rpx;
-                                    border-radius: 40rpx;
+                        padding: 0 20rpx 0 20rpx;
+                        box-sizing: border-box;
+                        .looksCare {
+                            margin-top: 31rpx;
+                            /* .userAvatarBox:not(:last-child) {
+                                margin-right: 18rpx;
+                            } */
+                            .userAvatarBox {
+                                display: flex;
+                                float: left;
+                                .avatarBox:not(:last-child) {
+                                    margin-right: 14rpx;
                                 }
-                                .crown {
-                                    position: absolute;
-                                    top: 0;
-                                    right: 0;
-                                    width: 28rpx;
-                                    height: 28rpx;
+                                .avatarBox {
+                                    position: relative;
+                                    justify-content: center;
+                                    width: 85rpx;
+                                    height: 85rpx;
+                                    .avatar {
+                                        width: 80rpx;
+                                        height: 80rpx;
+                                        border-radius: 40rpx;
+                                    }
+                                    .crown {
+                                        position: absolute;
+                                        top: 0;
+                                        right: 0;
+                                        transform:rotate(45deg);
+                                        width: 28rpx;
+                                        height: 28rpx;
+                                    }
+                                    .Authentication {
+                                        position: absolute;
+                                        bottom: 0;
+                                        right: 0;
+                                        width: 28rpx;
+                                        height: 28rpx;
+                                    }
                                 }
-                                .Authentication {
-                                    position: absolute;
-                                    bottom: 0;
-                                    right: 0;
-                                    width: 28rpx;
-                                    height: 28rpx;
+                            }
+                            .whoLooksCareMe {
+                                margin: 22rpx 0 22rpx 12rpx;
+                                float: left;
+                                width: 150rpx;
+                                height: 37rpx;
+                                /* display: flex;
+                                flex-flow: row wrap; */
+                                .text {
+                                    display: inline-block;
+                                    /* float: left; */
+                                    width: 130rpx;
+                                    height: 37rpx;
+                                    line-height: 37rpx;
+                                    font-size: 26rpx;
+                                    color: #434656;
+                                }
+                                .arrow {
+                                    display: inline-block;
+                                    /* float: left; */
+                                    width: 16rpx;
+                                    height: 26rpx;
+                                    line-height: 26rpx;
+                                    margin-left: 6rpx;
+                                    font-size: 34rpx;
+                                    color: #C7C7CC;
                                 }
                             }
                         }
-                        .whoLooksCareMe {
-                            margin: 22rpx 0 22rpx 26rpx;
-                            float: left;
-                            width: 150rpx;
+                    }
+                    .divisionDiv {
+                        margin: 40rpx 0;
+                        padding: 0 143rpx;
+                        .left {
+                            color: #979797;
+                            font-size: 26rpx;
+                            display: inline-block;
+                        }
+                        .text {
+                            margin: 0 20rpx;
+                            width: 104rpx;
                             height: 37rpx;
+                            font-size: 26rpx;
+                            line-height: 37rpx;
+                            color: #434656;
+                            display: inline-block;
+                        }
+                        .right {
+                            color: #979797;
+                            font-size: 26rpx;
+                            display: inline-block;
+                        }
+                    }
+                    .sign {
+                        margin-left: 30rpx;
+                        display: flex;
+                        flex-flow: row wrap;
+                        .signDetail:not(:last-child) {
+                            margin-right: 20rpx;
+                        }
+                        .signDetail {
+                            margin-top: 30rpx;
+                            padding: 9rpx 24rpx 8rpx 32rpx;
+                            width: auto;
+                            height: 54rpx;
+                            border: 1px solid #979797;
+                            border-radius: 48rpx;
+                            .pic {
+                                width: 32rpx;
+                                height: 32rpx;
+                            }
                             .text {
+                                margin-left: 16rpx;
                                 display: inline;
-                                width: 130rpx;
+                                min-width: 54rpx;
+                                min-width: 108rpx;
                                 height: 37rpx;
-                                line-height: 37rpx;
                                 font-size: 26rpx;
+                                line-height: 37rpx;
                                 color: #434656;
                             }
-                            .arrow {
+                            .num {
+                                margin-left: 16rpx;
                                 display: inline;
-                                width: 16rpx;
-                                height: 26rpx;
-                                line-height: 26rpx;
-                                margin-left: 6rpx;
-                                font-size: 34rpx;
-                                color: #C7C7CC;
+                                min-width: 16rpx;
+                                max-width: 29rpx;
+                                height: 37rpx;
+                                font-size: 26rpx;
+                                line-height: 37rpx;
+                                color: #434656;
+                            }
+                        }
+                    }
+                    .mainContent {
+                        margin-top: 80rpx;
+                        .modelName {
+                            .titleBox {
+                                margin-top: 30rpx;
+                                padding: 15rpx 40rpx;
+                                box-sizing: border-box;
+                                width: 100%;
+                                height: 90rpx;
+                                border-radius: 50rpx;
+                                box-shadow: -10rpx 0 10rpx 2rpx rgba(0, 0, 0, .5),
+                                            0 -10rpx 10rpx 2rpx rgba(0, 0, 0, .5);
+                                .title {
+                                    margin-right: 6rpx;
+                                    width: 144rpx;
+                                    height: 50rpx;
+                                    line-height: 50rpx;
+                                    color: #434656;
+                                    font-size: 36rpx;
+                                    display: inline;
+                                }
+                                .titlePicBox {
+                                    display: inline;
+                                    .titlePic {
+                                        width: 29rpx;
+                                        height: 20rpx;
+                                    }
+                                }
+                                /* .more {
+                                    border: 1px solid #f00;
+                                    margin-left: 80rpx;
+                                    display: inline;
+                                    .morePic {
+                                        width: 70rpx;
+                                        height: 38x;
+                                    }
+                                } */
+                            }
+                        }
+                        .contDetail {
+                            margin: 30rpx 0;
+                            height: 62rpx;
+                            .audioCont {
+                                .spot {
+                                    float: left;
+                                    .spotPic{
+                                        margin: 16rpx 20rpx 16rpx 0;
+                                        width: 30rpx;
+                                        height: 30rpx;
+                                    }
+                                }
+                                .vioceBox {
+                                    width: 261rpx;
+                                    height: 62rpx;
+                                    background-color: #50A8FC;
+                                    border-radius: 20rpx;
+                                    float: left;
+                                    .viocePic {
+                                        float: left;
+                                        margin: 13rpx 18rpx 12rpx 20rpx;
+                                        width: 34rpx;
+                                        height: 47rpx;
+                                    }
+                                    .text {
+                                        float: left;
+                                        margin: 10rpx 0;
+                                        width: 62rpx;
+                                        height: 42rpx;
+                                        color: #fff;
+                                        line-height: 42rpx;
+                                    }
+                                }
+                            }
+                        }
+                        .modelBox {
+                            padding: 30rpx 40rpx;
+                            width: 100%;
+                            height: auto;
+                            .articleBox1 {
+                                margin-bottom: 30rpx;
+                                .articlePic1 {
+                                    width: 670rpx;
+                                    height: 377rpx;
+                                }
+                            }
+                            .articleCont1 {
+                                margin-bottom: 30rpx;
+                                .text {
+                                    width: 660rpx;
+                                    /* height: 210rpx; */
+                                    line-height: 42rpx;
+                                    font-size: 30rpx;
+                                    color: #434656;
+                                }
+                            }
+                            .articleBox2{
+                                margin-bottom: 30rpx;
+                                .articlePic2 {
+                                    float: left;
+                                    margin-right: 30rpx;
+                                    width: 320rpx;
+                                    height: 320rpx;
+                                }
+                                .articlePic3 {
+                                    float: left;
+                                    width: 320rpx;
+                                    height: 320rpx;
+                                }
+                            }
+                            .articleCont2 {
+                                margin-bottom: 30rpx;
+                                .text {
+                                    width: 660rpx;
+                                    font-size: 30rpx;
+                                    /* height: 210rpx; */
+                                    color: #434656;
+                                    line-height: 42rpx;
+                                }
+                            }
+                            .articleCont3 {
+                                margin-bottom: 30rpx;
+                                .articlePic4 {
+                                    float: left;
+                                    margin-right: 30rpx;
+                                    width: 160rpx;
+                                    height: 160rpx;
+                                }
+                                .text {
+                                    float: left;
+                                    width: 480rpx;
+                                    /* height: 168rpx; */
+                                    line-height: 42rpx;
+                                    font-size: 30rpx;
+                                    color: #434656;
+                                }
+                            }
+                            .teamArticleCont1 {
+                                margin-top: 30rpx;
+                                .teamArticlePic1 {
+                                    margin-left: 270rpx;
+                                    width: 160rpx;
+                                    height: 160rpx;
+                                    border-radius: 80rpx;
+                                    border: 2rpx solid #50A8FC;
+                                }
+                                .text {
+                                    margin: 20rpx auto;
+                                    width: 216rpx;
+                                    height: 50rpx;
+                                    line-height: 50rpx;
+                                    font-size: 36rpx;
+                                    color: #50A8FC;
+                                }
+                            }
+                            .teamArticleCont2 {
+                                margin-top: 10rpx;
+                                .text {
+                                    width: 683rpx;
+                                    height: 111rpx;
+                                    color: #434656;
+                                    line-height: 37rpx;
+                                    font-size: 26rpx;
+                                }
+                            }
+                            .teamArticleCont3 {
+                                margin-top: 60rpx;
+                                .teamArticlePi2 {
+                                    margin-left: 270rpx;
+                                    width: 160rpx;
+                                    height: 160rpx;
+                                    border-radius: 80rpx;
+                                    border: 2rpx solid #50A8FC;
+                                }
+                                .text {
+                                    margin: 20rpx auto;
+                                    width: 216rpx;
+                                    height: 50rpx;
+                                    line-height: 50rpx;
+                                    font-size: 36rpx;
+                                    color: #50A8FC;
+                                }
+                            }
+                            .teamArticleCont4{
+                                margin-top: 10rpx;
+                                .text {
+                                    width: 683rpx;
+                                    height: 111rpx;
+                                    color: #434656;
+                                    line-height: 37rpx;
+                                    font-size: 26rpx;
+                                }
+                            }
+                            .eventArticleBox {
+                                margin-top: 30rpx;
+                                .eventArticlePic1 {
+                                    margin-right: 30rpx;
+                                    width: 320rpx;
+                                    height: 427rpx;
+                                }
+                                .eventArticlePic2 {
+                                    width: 320rpx;
+                                    height: 427rpx;
+                                }
+                            }
+                            .customArticle1 {
+                                width: 100%;
+                                margin-top: 20rpx;
+                                .customArticlePic1 {
+                                    margin-right: 20rpx;
+                                    float: left;
+                                    width: 30rpx;
+                                    height: 30rpx;
+                                }
+                                .text {
+                                    float: left;
+                                    width: 620rpx;
+                                    color: #434656;
+                                    font-size: 30rpx;
+                                    line-height: 42rpx;
+                                }
+                            }
+                            .customArticle2 {
+                                .customArticlePic2 {
+                                    margin-right: 20rpx;
+                                    float: left;
+                                    width: 30rpx;
+                                    height: 30rpx;
+                                }
+                                .text {
+                                    float: left;
+                                    width: 620rpx;
+                                    color: #434656;
+                                    font-size: 30rpx;
+                                    line-height: 42rpx;
+                                }
+                            }
+                        }
+                        .addNewModel {
+                            margin: 120rpx auto;
+                            padding: 16rpx 86rpx;
+                            box-sizing: border-box;
+                            width: 300rpx;
+                            height: 74rpx;
+                            border-radius: 37rpx;
+                            background-color: #50A8FC;
+                            .text {
+                                width: 128rpx;
+                                height: 42rpx;
+                                color: #fff;
+                                line-height: 42rpx;
+                                letter-spacing: 1.85rpx;
+                                font-size: 30rpx;
                             }
                         }
                     }
                 }
             }
 
+/*定位菜单*/
+            .positionDiv {
+                position: fixed;
+                bottom: 80rpx;
+                right: 0;
+                .positionPic {
+                    width: 60rpx;
+                    height: 60rpx;
+                }
+            }
+            
         }
+        /* .positionBox {
+            position: fixed;
+            .positionPic {
+                width: 60rpx;
+                height: 60rpx;
+            }
+        } */
+        
 
         .clear {
             clear: both;
         }
         .blueCss {
             color: #50A8FC;
-            border-bottom: 2px solid #50A8FC;
-
+            text-align: center;
+            border-bottom: 2.5px solid #50A8FC;
         }
         .defaultCss {
             color: #434656;

static/images/arrowDown.svg

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

static/images/arrowUp.svg

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

static/images/clickPraise.svg

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

static/images/moreOperation.svg

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

static/images/moreOptions.svg

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

static/images/spot.svg

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