PianoTime/wechat/pages/index/index.wxml

<!--index.wxml-->
<view class="wrapper flex-auto flex-vertical ">
  <view class="logo">
    <image class="logo-img" src="../../images/img_gqsj_01@2x.png" style="width:208px; height:71px" />
  </view>
  <swiper
    style="height: {{bannerHeight}}px"
    autoplay="true"
    indicator-dots="true"
    indicator-color="#fff"
    indicator-active-color="red"
  >
    <swiper-item class="swiper-item">
     <image src="../../images/img_banner01@2x.png" style="width: 100%; height: {{bannerHeight}}px"/>
     <view class="swiper-item__text">
        <text class="swiper-item__title">钢琴课程</text>
        <text class="swiper-item__subtitle">带您提高音乐素养</text>
        <text class="swiper-item__desc">为您打造一系列定制课程</text>
     </view>
    </swiper-item>
    <swiper-item class="swiper-item">
     <image src="../../images/img_banner01@2x.png" style="width: 100%; height: {{bannerHeight}}px"/>
     <view class="swiper-item__text">
        <text class="swiper-item__title">钢琴课程</text>
        <text class="swiper-item__subtitle">带您提高音乐素养</text>
        <text class="swiper-item__desc">为您打造一系列定制课程</text>
     </view>
    </swiper-item>
  </swiper>
  <view class="time">
    <view class="line"></view>
    <view class="line"></view>
    <view class="line"></view>
    <view class="line"></view>
    <view class="line"></view>
    <view class="time-clock">
      <image class="time-bg" src="../../images/img_shijianbg_01@2x.png" />
      <image class="time-icon" src="../../images/img_shijian_01@2x.png" />
      <text class="time-text">{{clock}}</text>
    </view>
  </view>
  <view class="start flex-auto flex-horizontal">
    <image class="start-bg" src="../../images/btn_kaishi_01@2x.png" />
    <button class="start-btn" bindtap="handleBtnClick">{{isLearning ? '结束' : '开始' }}</button>
  </view>
  <zan-popup show="{{ showPopup }}" bindclose="togglePopup">
    <canvas canvas-id="shareCanvas" style="width: {{shareCanvasWidth}}px; height:{{shareCanvasHeight}}px">
    </canvas>
    <button class="share-btn" size="mini" bindtap="handleShare">生成图片发到朋友圈</button>
  </zan-popup>
</view>