|
|
@@ -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;
|
