一、wxml页面代码如下:
<view class="page-phone">
<view class="header">
<view class="wx-title">奥祥网络</view>
<view class="wx-desc">专注移动互联网开发与营销!</view>
<image src="{{logosrc}}" class="logoimg"></image>
</view>
<view class="content">
<view class="wx-cell">
<view class="icon">
<image src="{{adrimg}}" class="icon-postion"></image>
</view>
<view class="cell-bd" bindtap="getLocation">邢台市中兴绿谷30楼</view>
<view class="cell-fd">
<image src="{{jtimg}}" class="icon-postion"></image>
</view>
</view>
<view class="wx-cell">
<view class="icon">
<image src="{{clockimg}}" class="icon-postion"></image>
</view>
<view class="cell-bd">9:00 - 18:00</view>
</view>
<view class="wx-cell" bindtap="calling">
<view class="icon">
<image src="{{phoneimg}}" class="icon-postion"></image>
</view>
<view class="cell-bd">400-000-0000</view>
<view class="cell-fd">
<image src="{{jtimg}}" class="icon-postion"></image>
</view>
</view>
</view>
<view class="content">
<view class="wx-cell">
<view class="icon">
<image src="{{picimg}}" class="icon-postion"></image>
</view>
<view class="cell-bd">业务图片</view>
</view>
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
</view>
</view>
二、wxss样式页面代码如下:
/**about.wxss**/
.page-phone{
font-family: '微软雅黑';
}
.header{
padding: 41rpx;
position: relative;
}
.wx-title{
font-size: 46rpx;
font-weight: bold;
}
.wx-desc{
font-size: 32rpx;
color: #aaa;
line-height: 67rpx;
}
.logoimg{
width:100rpx;
height:100rpx;
position: absolute;
top:40rpx;
right:40rpx;
}
.content{
padding: 41rpx;
border-top: 1rpx #eeeeee solid;
border-bottom:1rpx #eeeeee solid;
}
.wx-cell{
margin-bottom: 46rpx;
margin-left: 60rpx;
position: relative;
}
.icon{
width: 50rpx;
height:50rpx;
position: absolute;
left:-55rpx;
top:-6rpx;
}
.icon-postion{
width: 50rpx;
height:50rpx;
}
.cell-fd{
width: 50rpx;
height:50px;
position: absolute;
top:-6rpx;
right:0px;
}
.cell-bd{
font-size: 32rpx;
color:#666;
}
三、js页面代码如下:
//about.js
//获取应用实例
var app = getApp()
Page({
data: {
logosrc:'../../image/logo.png',
adrimg:'../../image/icon-address.png',
clockimg: '../../image/icon-clock.png',
phoneimg: '../../image/icon-phone.png',
jtimg: '../../image/icon-jt.png',
picimg: '../../image/icon-pic.png',
imgUrls: [
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495626232647&di=c7c53f96e0f48681471e4626eebe0181&imgtype=0&src=http%3A%2F%2Fwww.sanchiseo.com%2Fuploadfile%2F2015821%2F2015821115728937045.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495626316444&di=ff20f74da6031541a12e0eeadaf156b9&imgtype=0&src=http%3A%2F%2Fsem.g3img.com%2Fsite%2F34016275%2F20160216162430_82108.png',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495626359075&di=3297d75c3742024d15f553547495f3db&imgtype=0&src=http%3A%2F%2Fwww.17emarketing.com%2Fuploads%2Fallimg%2F160627%2F1-16062G54154.png',
],
indicatorDots: false,
autoplay: true,
interval: 5000,
duration: 1000
},
calling: function () {
wx.makePhoneCall({
phoneNumber: '4000019651',
})
},
getLocation: function (){
wx.openLocation({
latitude: 29.53,
longitude: 106.57,
name:"邢台市中兴绿谷",
address:"邢台市中兴绿谷30楼",
scale: 28
})
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
},
onReady: function () {
// 页面渲染完成
},
onShow: function () {
// 页面显示
},
onHide: function () {
// 页面隐藏
},
onUnload: function () {
// 页面关闭
}
})
|