08_心理咨询_微信小程序项目实战_关于我们页面静态效果实现

一、页面效果实现

1.1 页面结构

        在app.json里面的pages里面定义"pages/aboutUs/aboutUs"

        1、定义一个view，给其添加id：qrCodeView，然后在其中定义图片和文字；

        2、定义一个view，给其添加id：companyView；

        3、在companyView里面定义5个子view，分别来承载公司名称、地址、电话、邮箱、简介，给这5个子view添加class=companyItemView；

        4、在companyItemView里面分别定义两个view，用来承载标题和文字；

        5、在第四个view和第五个view中间添加图片；

<!-- 二维码区域 -->
<view id="qrCodeView">
  <image src="/images/@2x_2weima.png"></image>
  <text>微信扫一扫关注我们</text>
</view>

<!-- 公司信息区域 -->
<view id="companyView">
  <view class="companyItemView">
    <view>公司名称</view>
    <view>河南十方心理咨询有限公司</view>
  </view>
  <view class="companyItemView">
    <view>公司地址</view>
    <view>河南自贸试验区郑州片区绿地新都会2号楼A座1007</view>
  </view>
  <view class="companyItemView">
    <view>联系电话</view>
    <view>0371-68105666</view>
  </view>
  <view class="companyItemView">
    <view>客服邮箱</view>
    <view>shifangxinli@163.com</view>
  </view>

  <image src="/images/@2x_about.png"></image>
  
  <view class="companyItemView">
    <view>公司简介</view>
    <view>河南十方心理咨询有限公司成立于2017年5月23日， 是第一批有能力搭建社会心理服务体系的机构；是对企业全面实施EAP整体项目的专业供应商； 是为个体和企业提供个性化“心理测评”服务的心理健康机构；是对个体、团体进行心理咨询的心理服务机构； 是首个注重并开展青少年素质培养的心理教育机构。我们以“培育健康的人格素质” 为首要任务，一切以来访者的的个人成长和客户的收获为中心，在众多经验丰富的心理咨询专家的共同努力下，获得了社会。</view>
  </view>
</view>

1.2 样式实现

        1、给qrCodeView添加宽度、上下左右外边距；
    
        2、给qrCodeView里面的图片设置宽、高、下外边距(和文字拉开距离)；给文字设置大小、居中即可；

        3、给companyView设置左右内边距；

        4、给companyItemView设置下外边距；

        5、给companyView里面的图片设置下外边距、宽、高；

        6、给companyItemView里面的子view设置文字大小和颜色；第一个子view添加下外边距/下内边距；

/* 二维码区域样式 */
#qrCodeView{
  width: 300rpx;
  margin: 20rpx auto 60rpx;
  font-size: 26rpx;
  text-align: center;
}

#qrCodeView > image{
  width: 300rpx;
  height: 300rpx;
  padding-bottom: 10rpx;
}


/* 公司信息区域 */
#companyView{
  padding: 0 40rpx;
}

.companyItemView{
  padding-bottom: 30rpx;
}

#companyView > image{
  width: 670rpx;
  height: 500rpx;
  margin-bottom: 40rpx;
}

.companyItemView > view:nth-child(1){
  font-size: 30rpx;
  color: #87cefa;
  padding-bottom: 20rpx;
}

.companyItemView > view:nth-child(2){
  font-size: 26rpx;
  color: #888;
}

二、关联跳转

        在我的页面中，把关于我们的view改为navigator，然后设置跳转路径和方式；

        注：把我的页面的每一项的view都换成navigator；然后样式稍微变更一下

<navigator url="/pages/aboutUs/aboutUs" open-type="navigate">
    <text>关于我们</text>
    <view class="arrow"></view>
</navigator>

...

.userItemListView > navigator{
  height: 88rpx;
  line-height: 88rpx;
  border-bottom: 1rpx solid #F1F1F1;
  position: relative;
}

/* 移除最后一个元素的下边框 */
.userItemListView > navigator:last-child{
  border: none;
}