一、页面效果实现

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

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

12_心理咨询_微信小程序项目实战_数据交互_深入理解小程序
前言我们实现静态页面,只需要稍微懂一点HTML/CSS即可或者零基础都可以,但是如果想要进行数据交互,需要对小程序有一定的理解: 小程序提供了一个简单.高效的应用开发框架和丰富的组件及API,帮助开 ...
01_心理咨询_微信小程序项目实战_项目概述
一.教程导读本套教程以项目为导向,从零构建一整套小程序项目,从静态页面实现,到后台数据mock服务搭建.最后前后台数据交互. 本套教程是模拟线上微信小程序应用:十方智育实现. 本套教程相关素材.代码 ...
15_心理咨询_微信小程序项目实战_数据交互_首页
前置把十方智育的图片资源.视频资源等都放在json-server的public目录下面的指定文件夹中: public json-server的静态资源目录 ...
03_心理咨询_微信小程序项目实战_首页静态效果实现
一.导航栏和tabBar 1.1 全局配置介绍微信小程序端中实现导航栏和tabBar,是通过配置实现的:这是区别于移动端开发的点: 参考文档: https://developers.weixin.q ...
09_心理咨询_微信小程序项目实战_咨询师详情页静态效果实现
一.咨询师信息 1.1 页面结构在app.json里面的pages里面定义"pages/consultDetails/consultDetails" 1.定义一个view,给其添 ...
微信小程序项目实战之天气预报
概述微信小程序项目实战之天气预报详细代码下载:http://www.demodashi.com/demo/10634.html 一.准备工作 1.注册微信小程序 2.注册和风天气账号 3.注册百 ...
微信小程序项目实战之豆瓣天气
概述微信小程序项目实战之豆瓣天气详细代码下载:http://www.demodashi.com/demo/10943.html 一.准备工作 1.注册微信小程序 2.在小程序设置中设置reque ...
微信小程序项目实战：快递查询-李宁-专题视频课程
微信小程序项目实战:快递查询-1303人已学习课程介绍本课程主要介绍了scrollview布局,以及如何通过第三方API获取并处理数据. 课程收益本课程主要介绍了如何实现 ...
微信小程序项目实战：电影购票系统-李宁-专题视频课程
微信小程序项目实战:电影购票系统-1644人已学习课程介绍本课程主要介绍了scrollview布局,导航.从服务端获取数据,以及处理数据的方法. 课程收益本课程的目标是让 ...

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

一、页面效果实现

1.1 页面结构

1.2 样式实现

二、关联跳转

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

最新文章

热门文章