番禺网站制作/婚恋网站排名前三
一、咨询师信息
1.1 页面结构
在app.json里面的pages里面定义"pages/consultDetails/consultDetails"
1、定义一个view，给其添加id：consultInfoView；
2、在consultInfoView定义4个view，分别承载咨询师头像、名称、等级、证书等；
3、在第四个view里面定义两个view，分别承载已认证和查看证书的文本；给第四个view添加一个id：ccieView，是为了方便我们后续的样式添加；
<!-- 咨询师信息 -->
<view id="consultInfoView"><view><image src="/images/zxs01.jpg"></image></view><view>张婧</view><view>郑州市 国家二级心理咨询师</view><view id="ccieView"><view>已认证</view><view>查看证书</view></view>
</view>1.2 样式实现
1、给consultInfoView设置背景色；
2、给consultInfoView里面的第一个子view设置宽、高、外边距居中、上下外边距、背景色、圆角、文本居中；给第一个子view里面的图片设置大小、圆角、上外边距；
注意：当我们给父元素的第一个子元素设置上外边距的时候，应用到了父元素，这叫上外边距的塌陷，给父元素设置overflow:hidden;
3、给consultInfoView里面的第二个子view上设置文字大小、颜色、文本居中、加粗；
4、给consultInfoView里面的第三个子view上设置文字大小、颜色、文本居中、下边框、上下内边距、宽度、居中；
5、给ccieView设置上下左右内边距、flex布局、上下内边距；
6、给ccieView里面的子view添加背景颜色、文字颜色、圆角、宽高、行高；
/* 咨询师信息样式 */
#consultInfoView{background: #87cefa;/* 解决上外边距的塌陷 */overflow: hidden;color: white;
}#consultInfoView > view:nth-child(1){width: 200rpx;height: 200rpx;margin: 40rpx auto;border-radius: 100rpx;background: #fff;text-align: center;
}#consultInfoView image{width: 160rpx;height: 160rpx;border-radius: 80rpx;margin-top: 20rpx;
}#consultInfoView > view:nth-child(2){font-size: 36rpx;text-align: center;font-weight: bold;
}#consultInfoView > view:nth-child(3){font-size: 30rpx;text-align: center;padding: 28rpx 0;border-bottom: 2rpx solid #fff;width: 690rpx;margin: 0 auto;
}#ccieView {padding: 20rpx 76rpx;display: flex;justify-content: space-between;
}#ccieView > view{width: 200rpx;height: 60rpx;height: 60rpx;background: #29AFF4;text-align: center;line-height: 60rpx;border-radius: 30rpx;
}
二、擅长领域
2.1 页面结构
1、定义一个view，给其添加id：domainView；
2、在domainView定义三个子view，分别来承载不同的文本；
<!-- 擅长领域 -->
<view id="domainView"><view>恋爱关系</view><view>婚姻家庭</view><view>情绪管理</view>
</view>2.2 样式实现
1、给domainView设置上下左右内边距、flex布局、水平排版、背景色；
2、给domainView的三个子view设置背景色、宽、高、文字颜色、文本居中、行高、圆角、字体大小；
/* 擅长领域 */
#domainView{padding: 30rpx 76rpx;display: flex;justify-content: space-between;background: #fff;
}#domainView > view{width: 150rpx;height: 50rpx;line-height: 50rpx;text-align: center;background: #87cefa;color: #fff;font-size: 24rpx;border-radius: 6rpx;
}三、收费标准
3.1 页面结构
1、定义view，给其添加class：consultItemView；
2、在consultItemView里面定义view，给其添加class：titleView，用来承载标题；
3、在consultItemView定义三个子view，给其添加class：chargeItemView；
4、在chargeItemView里面定义三个子view，分别用来承载收费类型、收费金额、咨询人数等文本；
5、在consultItemView定义一个view，用来承载查看更多和右箭头；
<!-- 收费标准 -->
<view class="consultItemView"><!-- 标题 --><view class="titleView">收费标准</view><!-- 收费项 --><view class="chargeItemView"><view>语音咨询</view><view>18人已咨询</view><view><text>500</text>/次（1小时）</view></view><view class="chargeItemView"><view>视频咨询</view><view>18人已咨询</view><view><text>500</text>/次（1小时）</view></view><view class="chargeItemView"><view>倾诉咨询</view><view>18人已咨询</view><view><text>500</text>/次（1小时）</view></view><!-- 查看更多 --><view id="moreView" bindtap="goHotArticlePage"> <text>查看更多</text><view class="arrow"></view></view>
</view>3.2 样式实现
1、给页面设置整体背景色；
2、给consultItemView设置左右内边距和上下外边距、背景颜色；
3、给titleView设置上下内边距、字体大小、粗细、下边框；
4、给chargeItemView设置下边框、上下内边距、相对定位；
5、给chargeItemView里面的三个子view分别设置字体大小、颜色；
6、给chargeItemView第二个子view，设置绝对定位改变其位置；
7、给chargeItemView第三个子view，设置上内边距；给它里面的text设置字体大小和颜色；
/* 收费标准 */
.consultItemView{margin: 24rpx 0;padding: 0 30rpx;background: #fff;
}.titleView{padding: 30rpx 0;font-size: 30rpx;font-weight: bold;border-bottom: 1rpx solid #F1F1F1;
}.chargeItemView{padding: 20rpx 0;border-bottom: 1rpx solid #F1F1F1;position: relative;color: #9F9F9F;
}.chargeItemView > view:nth-child(1){font-size: 30rpx;
}.chargeItemView > view:nth-child(2){font-size: 24rpx;position: absolute;top: 20rpx;right: 30rpx;
}.chargeItemView > view:nth-child(3){font-size: 30rpx;
}.chargeItemView > view:nth-child(3) text{color: #fe3000;font-size: 30rpx;font-weight: bold;padding-top: 20rpx;
}四、回复留言
4.1 页面结构
1、定义view，给其添加class：consultItemView；
2、在consultItemView里面定义view，给其添加class：titleView，用来承载标题；
3、在consultItemView定义三个子view，给其添加class：replyItemView；
4、在replyItemView里面定义两个子view，分别用来承载问、答；
5、在consultItemView定义一个view，用来承载查看更多和右箭头；
<!-- 回复留言 -->
<view class="consultItemView"><!-- 标题 --><view class="titleView">回复留言</view><!-- 收费项 --><view class="replyItemView"><view>问: 家庭矛盾,情绪抑郁,社交恐惧症,自卑,时长心慌不安,巴拉拉巴拉</view><view>答: 这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。</view></view><view class="replyItemView"><view>问: 家庭矛盾,情绪抑郁,社交恐惧症,自卑,时长心慌不安,巴拉拉巴拉</view><view>答: 这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。</view></view><view class="replyItemView"><view>问: 家庭矛盾,情绪抑郁,社交恐惧症,自卑,时长心慌不安,巴拉拉巴拉</view><view>答: 这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。这里是咨询师回答的相关问题,第一,第二,第三。</view></view><!-- 查看更多 --><view id="moreView" bindtap="goHotArticlePage"> <text>查看更多</text><view class="arrow"></view></view>
</view>4.2 样式实现
1、给replyItemView设置下边框、上下内边距；
2、给replyItemView里面的两个子view分别设置字体大小、颜色；
3、给replyItemView里面的第一个子view，设置文本不换行，超出部分隐藏，用省略号替代、宽、高、行高、文本加粗；
4、给replyItemView里面的第二个子view，设置高度、超出部分隐藏，用省略号替代、两行文本显示、多余的内容省略号隐藏、宽、高；
参考文档：https://blog.csdn.net/weixin_33910759/article/details/89760530
注：一行省略和两行省略实现方式不太一样；
/* 回复留言 */
.replyItemView{padding: 30rpx 0;border-bottom: 1rpx solid #F1F1F1;
}.replyItemView > view:nth-child(1){font-size: 30rpx;width: 690rpx;height: 60rpx;line-height: 60rpx;font-weight: bold;/* 超出部分隐藏 */overflow: hidden;/* 文本不换行 */white-space: nowrap;/* 多余文本使用省略号替代 */text-overflow: ellipsis;
}.replyItemView > view:nth-child(2){font-size: 24rpx;color: #9F9F9F;height: 80rpx;line-height: 40rpx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;align-content: center;
}
五、用户评价
用户评价和收费标准结构类似，样式稍微有一定的差异，根据效果图和标注图进行简单的修改即可；
五角星实现：参考文档：https://blog.csdn.net/sxs161028/article/details/107512671
<!-- 用户评价 -->
<view class="consultItemView"><!-- 标题 --><view class="titleView">用户评价</view><!-- 用户评论项 --><view class="reviewItemView"><view class="userNameView">匿名用户<view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star half_star"><view class="icon icon_gray"><view class="icon icon_gray"></view></view></view></view></view><view>昨天</view><view>老师很细心,主要声音好听,长得美!</view></view><view class="reviewItemView"><view class="userNameView">匿名用户<view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star half_star"><view class="icon icon_gray"><view class="icon icon_yellow"></view></view></view></view></view><view>昨天</view><view>老师很细心,主要声音好听,长得美!</view></view><view class="reviewItemView"><view class="userNameView">匿名用户<view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_gray"></view></view><view class="star half_star"><view class="icon icon_gray"><view class="icon icon_gray"></view></view></view></view></view><view>昨天</view><view>老师很细心,主要声音好听,长得美!</view></view><!-- 查看更多 --><view id="moreView" bindtap="goHotArticlePage"><text>查看更多</text><view class="arrow"></view></view>
</view>/* 用户评价 */
.reviewItemView {padding: 20rpx 0;border-bottom: 1rpx solid #F1F1F1;position: relative;
}.reviewItemView>view:nth-child(1) {font-size: 24rpx;color: #9F9F9F;
}.reviewItemView>view:nth-child(2) {font-size: 24rpx;position: absolute;top: 20rpx;right: 30rpx;color: #9F9F9F;
}.reviewItemView>view:nth-child(3) {font-size: 30rpx;padding-top: 20rpx;
}@font-face {font-family: 'FontAwesome';src: url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1') format('woff');
}.userNameView {position: relative;
}.userNameView > view{display:flex;position: absolute;left: 130rpx;top: 6rpx;
}/*五角星之间的间距*/
.star {margin-right: 4rpx;
}/*五角星*/
.star .icon:before {content: '\f005';font-family: FontAwesome;position: absolute;left: 0;top: 0;display: block;overflow: hidden;
}.star .icon {display: block;font-size: 24rpx;text-align: center;width: 24rpx;height: 24rpx;line-height: 24rpx;position: relative;white-space: pre;
}/*灰色五角星*/
.star .icon_gray {color: #DDDDDD;
}/*黄色五角星*/
.star .icon_yellow:before {color: #FED300;
}六、底部区域
6.1 页面结构
1、定义一个view，然后给其添加id：bottomView；
2、在bottomView定义两个子view，分成承载发私信和咨询；
<!-- 底部 -->
<view id="bottomView"><view>发私信</view><view>咨询</view>
</view>6.2 样式实现
1、给bottomView使用flex布局；
2、给bottomView里面的子view设置高度、等比放大、设置背景、设置文字大小颜色；
/* 底部样式 */
#bottomView{display: flex;text-align: center;border-top: 2rpx solid #F1F1F1;
}#bottomView > view{flex-grow: 1;height: 98rpx;font-size: 36rpx;line-height: 98rpx;
}#bottomView > view:nth-child(1){background: #F7F7FA;color: #979798;}#bottomView > view:nth-child(2){background: #87cefa;color: #fff;
}注：点击咨询师列表中咨询师，跳转到对应的咨询师详情页，咨询师详情页就这一个页面，这是该页面中展示不同的动态数据，我们在后面结合数据的时候讲解；