tutorial / mini-app

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'onCompassChange'}}"/>

  <view class="page-body">
    <view class="page-section page-section_center">
      <text class="page-body-text">旋转手机即可获取方位信息</text>
      <view class="direction">
        <view class="bg-compass-line"></view>
        <image class="bg-compass" src="compass.png" style="transform: rotate({{direction}}deg)"></image>
        <view class="direction-value">
          <text>{{direction}}</text>
          <text class="direction-degree">o</text>
        </view>
      </view>
    </view>
  </view>

  <template is="foot" />
</view>