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">
    <view class='{{ showPopup ? "sg-show-popup" : "sg-hide-popup" }}'>
      <view class='hide-popup-btn' bindtap='hidePhotoPopup'>
        <icon type='cancel' color='white'></icon>
      </view>
      <canvas canvas-id="shareCanvas" style="width: {{shareCanvasWidth}}px; height:{{shareCanvasHeight}}px">
      </canvas>
    </view>
    <button class="share-btn" bindtap="handleShare" type='primary'>生成图片发到朋友圈</button>
  </zan-popup>
</view>