|
|
@@ -101,7 +101,6 @@
|
|
|
<div class="whoLooksCareMe">
|
|
|
<p class="text">谁收藏了我</p>
|
|
|
<p class="arrow">></p>
|
|
|
- <div class="clear"></div>
|
|
|
</div>
|
|
|
<div class="clear"></div>
|
|
|
</div>
|
|
|
@@ -289,9 +288,222 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div v-if="modelSwitchType == 'shop'">
|
|
|
- 名片内容
|
|
|
+ <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>
|
|
|
@@ -306,7 +518,7 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- modelSwitchType: 'card',
|
|
|
+ modelSwitchType: 'shop',
|
|
|
showIndex: 0,
|
|
|
tran: 350, //横轴
|
|
|
vert: 500 //纵轴
|
|
|
@@ -369,7 +581,7 @@
|
|
|
// console.log(wx.getSystemInfoSync());
|
|
|
},
|
|
|
handleChange(e) {
|
|
|
- console.log(e);
|
|
|
+ // console.log(e);
|
|
|
this.tran = e.detail.x;
|
|
|
this.vert = e.detail.y;
|
|
|
if (this.tran <= 188) {
|
|
|
@@ -386,570 +598,5 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
- .cx-card {
|
|
|
- /*定位菜单*/
|
|
|
- .moveMenuBox {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- .moveMenuCont {
|
|
|
- position: fixed;
|
|
|
- z-index: 999;
|
|
|
- width: 50rpx;
|
|
|
- height: 50rpx;
|
|
|
- .moveMenuPic {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .subject {
|
|
|
- .topPic {
|
|
|
- width: 750rpx;
|
|
|
- height: 550rpx;
|
|
|
- .pic {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .rightTopPic {
|
|
|
- position: absolute;
|
|
|
- top: 30rpx;
|
|
|
- right: 40rpx;
|
|
|
- width: 120rpx;
|
|
|
- height: 130rpx;
|
|
|
- .pic {
|
|
|
- margin-left: 20rpx;
|
|
|
- width: 80rpx;
|
|
|
- height: 60rpx;
|
|
|
- }
|
|
|
- .title {
|
|
|
- width: 120rpx;
|
|
|
- height: 42rpx;
|
|
|
- line-height: 42rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- .contanter {
|
|
|
- .addCard {
|
|
|
- position: relative;
|
|
|
- top: -160rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- width: 710rpx;
|
|
|
- height: 430rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- background-color: #fff;
|
|
|
- box-shadow: 0 0 8rpx 8rpx rgba(0, 0, 0, 0.2);
|
|
|
- .addPic {
|
|
|
- margin: 132rpx 305rpx 20rpx 305rpx;
|
|
|
- width: 100rpx;
|
|
|
- height: 100rpx;
|
|
|
- }
|
|
|
- .add {
|
|
|
- text-align: center;
|
|
|
- color: #434656;
|
|
|
- }
|
|
|
- }
|
|
|
- .optionBox {
|
|
|
- margin: -100rpx 0 67rpx 20rpx;
|
|
|
- padding-left: 20rpx;
|
|
|
- width: 710rpx;
|
|
|
- height: auto;
|
|
|
- .switchCard {
|
|
|
- width: 195rpx;
|
|
|
- height: 42rpx;
|
|
|
- line-height: 42rpx;
|
|
|
- color: #50A8FC;
|
|
|
- font-size: 30rpx;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- .modifyCard {
|
|
|
- width: 120rpx;
|
|
|
- height: 42rpx;
|
|
|
- margin-left: 195rpx;
|
|
|
- color: #50A8FC;
|
|
|
- font-size: 30rpx;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- .setStyle {
|
|
|
- width: 120rpx;
|
|
|
- height: 42rpx;
|
|
|
- margin-left: 40rpx;
|
|
|
- color: #50A8FC;
|
|
|
- font-size: 30rpx;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
- .shareCardBox {
|
|
|
- margin-left: 20rpx;
|
|
|
- width: 100%;
|
|
|
- .shareCard {
|
|
|
- margin-left: 47rpx;
|
|
|
- width: 530rpx;
|
|
|
- height: 96rpx;
|
|
|
- background: #50A8FC;
|
|
|
- border-radius: 43rpx;
|
|
|
- box-shadow: 0 6rpx 10rpx 0 rgba(4, 62, 119, 0.36);
|
|
|
- float: left;
|
|
|
- .text {
|
|
|
- margin: 23rpx auto;
|
|
|
- width: 144rpx;
|
|
|
- height: 50rpx;
|
|
|
- line-height: 50rpx;
|
|
|
- font-size: 36rpx;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- .qrCodeBox {
|
|
|
- margin-left: 30rpx;
|
|
|
- width: 85rpx;
|
|
|
- height: 105rpx;
|
|
|
- float: left;
|
|
|
- .qrCode {
|
|
|
- width: 54rpx;
|
|
|
- height: 54rpx;
|
|
|
- margin-left: 12rpx;
|
|
|
- }
|
|
|
- .text {
|
|
|
- width: 80rpx;
|
|
|
- height: 37rpx;
|
|
|
- line-height: 37rpx;
|
|
|
- color: #434656;
|
|
|
- font-size: 26rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .modelSwitchBox {
|
|
|
- .optionsBox {
|
|
|
- margin-top: 80rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- padding: 0 75rpx;
|
|
|
- display: flex;
|
|
|
- .card {
|
|
|
- width: 60rpx;
|
|
|
- height: 42rpx;
|
|
|
- line-height: 42rpx;
|
|
|
- margin-right: 75rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- .division {
|
|
|
- margin-right: 95rpx;
|
|
|
- justify-content: center;
|
|
|
- color: #979797;
|
|
|
- }
|
|
|
- .shop {
|
|
|
- width: 60rpx;
|
|
|
- height: 42rpx;
|
|
|
- line-height: 42rpx;
|
|
|
- margin-right: 75rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- .show {
|
|
|
- width: 60rpx;
|
|
|
- height: 42rpx;
|
|
|
- line-height: 42rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- }
|
|
|
- .cardModel {
|
|
|
- width: 100%;
|
|
|
- margin-top: 31rpx;
|
|
|
- .looksCareBox {
|
|
|
- margin-left: 20rpx;
|
|
|
- width: 100%;
|
|
|
- padding: 0 20rpx 0 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- .looksCare {
|
|
|
- margin-top: 31rpx;
|
|
|
- .userAvatarBox {
|
|
|
- display: flex;
|
|
|
- float: left;
|
|
|
- .avatarBox:not(:last-child) {
|
|
|
- margin-right: 14rpx;
|
|
|
- }
|
|
|
- .avatarBox {
|
|
|
- position: relative;
|
|
|
- justify-content: center;
|
|
|
- width: 85rpx;
|
|
|
- height: 85rpx;
|
|
|
- .avatar {
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- border-radius: 40rpx;
|
|
|
- }
|
|
|
- .crown {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- transform:rotate(45deg);
|
|
|
- width: 28rpx;
|
|
|
- height: 28rpx;
|
|
|
- }
|
|
|
- .Authentication {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
- width: 28rpx;
|
|
|
- height: 28rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .whoLooksCareMe {
|
|
|
- margin: 22rpx 0 22rpx 12rpx;
|
|
|
- float: left;
|
|
|
- width: 150rpx;
|
|
|
- height: 37rpx;
|
|
|
- /* display: flex;
|
|
|
- flex-flow: row wrap; */
|
|
|
- .text {
|
|
|
- display: inline-block;
|
|
|
- /* float: left; */
|
|
|
- width: 130rpx;
|
|
|
- height: 37rpx;
|
|
|
- line-height: 37rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #434656;
|
|
|
- }
|
|
|
- .arrow {
|
|
|
- display: inline-block;
|
|
|
- /* float: left; */
|
|
|
- width: 16rpx;
|
|
|
- height: 26rpx;
|
|
|
- line-height: 26rpx;
|
|
|
- margin-left: 6rpx;
|
|
|
- font-size: 34rpx;
|
|
|
- color: #C7C7CC;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .divisionDiv {
|
|
|
- margin: 40rpx 0;
|
|
|
- padding: 0 143rpx;
|
|
|
- .left {
|
|
|
- color: #979797;
|
|
|
- font-size: 26rpx;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- .text {
|
|
|
- margin: 0 20rpx;
|
|
|
- width: 104rpx;
|
|
|
- height: 37rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- line-height: 37rpx;
|
|
|
- color: #434656;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- .right {
|
|
|
- color: #979797;
|
|
|
- font-size: 26rpx;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- }
|
|
|
- .sign {
|
|
|
- margin-left: 30rpx;
|
|
|
- display: flex;
|
|
|
- flex-flow: row wrap;
|
|
|
- .signDetail:not(:last-child) {
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
- .signDetail {
|
|
|
- margin-top: 30rpx;
|
|
|
- padding: 9rpx 24rpx 8rpx 32rpx;
|
|
|
- width: auto;
|
|
|
- height: 54rpx;
|
|
|
- border: 1px solid #979797;
|
|
|
- border-radius: 48rpx;
|
|
|
- .pic {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- }
|
|
|
- .text {
|
|
|
- margin-left: 16rpx;
|
|
|
- display: inline;
|
|
|
- min-width: 54rpx;
|
|
|
- min-width: 108rpx;
|
|
|
- height: 37rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- line-height: 37rpx;
|
|
|
- color: #434656;
|
|
|
- }
|
|
|
- .num {
|
|
|
- margin-left: 16rpx;
|
|
|
- display: inline;
|
|
|
- min-width: 16rpx;
|
|
|
- max-width: 29rpx;
|
|
|
- height: 37rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- line-height: 37rpx;
|
|
|
- color: #434656;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .mainContent {
|
|
|
- margin-top: 80rpx;
|
|
|
- .modelName {
|
|
|
- .titleBox {
|
|
|
- margin-top: 30rpx;
|
|
|
- padding: 15rpx 40rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 100%;
|
|
|
- height: 90rpx;
|
|
|
- border-radius: 50rpx;
|
|
|
- box-shadow: -10rpx 0 10rpx 2rpx rgba(0, 0, 0, .5),
|
|
|
- 0 -10rpx 10rpx 2rpx rgba(0, 0, 0, .5);
|
|
|
- .title {
|
|
|
- margin-right: 6rpx;
|
|
|
- width: 144rpx;
|
|
|
- height: 50rpx;
|
|
|
- line-height: 50rpx;
|
|
|
- color: #434656;
|
|
|
- font-size: 36rpx;
|
|
|
- display: inline;
|
|
|
- }
|
|
|
- .titlePicBox {
|
|
|
- display: inline;
|
|
|
- .titlePic {
|
|
|
- width: 29rpx;
|
|
|
- height: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .contDetail {
|
|
|
- margin: 30rpx 0;
|
|
|
- height: 62rpx;
|
|
|
- .audioCont {
|
|
|
- .spot {
|
|
|
- float: left;
|
|
|
- .spotPic{
|
|
|
- margin: 16rpx 20rpx 16rpx 0;
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .vioceBox {
|
|
|
- width: 261rpx;
|
|
|
- height: 62rpx;
|
|
|
- background-color: #50A8FC;
|
|
|
- border-radius: 20rpx;
|
|
|
- float: left;
|
|
|
- .viocePic {
|
|
|
- float: left;
|
|
|
- margin: 13rpx 18rpx 12rpx 20rpx;
|
|
|
- width: 34rpx;
|
|
|
- height: 47rpx;
|
|
|
- }
|
|
|
- .text {
|
|
|
- float: left;
|
|
|
- margin: 10rpx 0;
|
|
|
- width: 62rpx;
|
|
|
- height: 42rpx;
|
|
|
- color: #fff;
|
|
|
- line-height: 42rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .modelBox {
|
|
|
- padding: 30rpx 40rpx;
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- .articleBox1 {
|
|
|
- margin-bottom: 30rpx;
|
|
|
- .articlePic1 {
|
|
|
- width: 670rpx;
|
|
|
- height: 377rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .articleCont1 {
|
|
|
- margin-bottom: 30rpx;
|
|
|
- .text {
|
|
|
- width: 660rpx;
|
|
|
- /* height: 210rpx; */
|
|
|
- line-height: 42rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #434656;
|
|
|
- }
|
|
|
- }
|
|
|
- .articleBox2{
|
|
|
- margin-bottom: 30rpx;
|
|
|
- .articlePic2 {
|
|
|
- float: left;
|
|
|
- margin-right: 30rpx;
|
|
|
- width: 320rpx;
|
|
|
- height: 320rpx;
|
|
|
- }
|
|
|
- .articlePic3 {
|
|
|
- float: left;
|
|
|
- width: 320rpx;
|
|
|
- height: 320rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .articleCont2 {
|
|
|
- margin-bottom: 30rpx;
|
|
|
- .text {
|
|
|
- width: 660rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- /* height: 210rpx; */
|
|
|
- color: #434656;
|
|
|
- line-height: 42rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .articleCont3 {
|
|
|
- margin-bottom: 30rpx;
|
|
|
- .articlePic4 {
|
|
|
- float: left;
|
|
|
- margin-right: 30rpx;
|
|
|
- width: 160rpx;
|
|
|
- height: 160rpx;
|
|
|
- }
|
|
|
- .text {
|
|
|
- float: left;
|
|
|
- width: 480rpx;
|
|
|
- /* height: 168rpx; */
|
|
|
- line-height: 42rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #434656;
|
|
|
- }
|
|
|
- }
|
|
|
- .teamArticleCont1 {
|
|
|
- margin-top: 30rpx;
|
|
|
- .teamArticlePic1 {
|
|
|
- margin-left: 270rpx;
|
|
|
- width: 160rpx;
|
|
|
- height: 160rpx;
|
|
|
- border-radius: 80rpx;
|
|
|
- border: 2rpx solid #50A8FC;
|
|
|
- }
|
|
|
- .text {
|
|
|
- margin: 20rpx auto;
|
|
|
- width: 216rpx;
|
|
|
- height: 50rpx;
|
|
|
- line-height: 50rpx;
|
|
|
- font-size: 36rpx;
|
|
|
- color: #50A8FC;
|
|
|
- }
|
|
|
- }
|
|
|
- .teamArticleCont2 {
|
|
|
- margin-top: 10rpx;
|
|
|
- .text {
|
|
|
- width: 683rpx;
|
|
|
- height: 111rpx;
|
|
|
- color: #434656;
|
|
|
- line-height: 37rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .teamArticleCont3 {
|
|
|
- margin-top: 60rpx;
|
|
|
- .teamArticlePi2 {
|
|
|
- margin-left: 270rpx;
|
|
|
- width: 160rpx;
|
|
|
- height: 160rpx;
|
|
|
- border-radius: 80rpx;
|
|
|
- border: 2rpx solid #50A8FC;
|
|
|
- }
|
|
|
- .text {
|
|
|
- margin: 20rpx auto;
|
|
|
- width: 216rpx;
|
|
|
- height: 50rpx;
|
|
|
- line-height: 50rpx;
|
|
|
- font-size: 36rpx;
|
|
|
- color: #50A8FC;
|
|
|
- }
|
|
|
- }
|
|
|
- .teamArticleCont4{
|
|
|
- margin-top: 10rpx;
|
|
|
- .text {
|
|
|
- width: 683rpx;
|
|
|
- height: 111rpx;
|
|
|
- color: #434656;
|
|
|
- line-height: 37rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .eventArticleBox {
|
|
|
- margin-top: 30rpx;
|
|
|
- .eventArticlePic1 {
|
|
|
- margin-right: 30rpx;
|
|
|
- width: 320rpx;
|
|
|
- height: 427rpx;
|
|
|
- }
|
|
|
- .eventArticlePic2 {
|
|
|
- width: 320rpx;
|
|
|
- height: 427rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .customArticle1 {
|
|
|
- width: 100%;
|
|
|
- margin-top: 20rpx;
|
|
|
- .customArticlePic1 {
|
|
|
- margin-right: 20rpx;
|
|
|
- float: left;
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- }
|
|
|
- .text {
|
|
|
- float: left;
|
|
|
- width: 620rpx;
|
|
|
- color: #434656;
|
|
|
- font-size: 30rpx;
|
|
|
- line-height: 42rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .customArticle2 {
|
|
|
- .customArticlePic2 {
|
|
|
- margin-right: 20rpx;
|
|
|
- float: left;
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- }
|
|
|
- .text {
|
|
|
- float: left;
|
|
|
- width: 620rpx;
|
|
|
- color: #434656;
|
|
|
- font-size: 30rpx;
|
|
|
- line-height: 42rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .addNewModel {
|
|
|
- margin: 120rpx auto;
|
|
|
- padding: 16rpx 86rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 300rpx;
|
|
|
- height: 74rpx;
|
|
|
- border-radius: 37rpx;
|
|
|
- background-color: #50A8FC;
|
|
|
- .text {
|
|
|
- width: 128rpx;
|
|
|
- height: 42rpx;
|
|
|
- color: #fff;
|
|
|
- line-height: 42rpx;
|
|
|
- letter-spacing: 1.85rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .clear {
|
|
|
- clear: both;
|
|
|
- }
|
|
|
- .blueCss {
|
|
|
- color: #50A8FC;
|
|
|
- text-align: center;
|
|
|
- border-bottom: 2.5px solid #50A8FC;
|
|
|
- }
|
|
|
- .defaultCss {
|
|
|
- color: #434656;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
</style>
|
