<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-001-9651</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>

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

//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 () {
    // 页面关闭
  }
})