ohplay_h5/src/pages/operation/index.vue

<template>
  <view class="app-container">
    <view class="earphone">
      <view class="border" flex center style="height: 154px">
        <img src="../../static/operation/earphone.png" style="width: 240rpx; height: 240rpx;" />
      </view>
      <view class="border" flex center style="height: 112px;">
        <view class="bg-gary" flex center>
          单机
        </view>
        <view flex style="width: calc(100% - 206rpx); font-size: 24rpx; text-align:center">
          <view style="width: 50%">
            <img mini src="../../static/operation/left.png" />
            <view flex center>
              <img mini src="../../static/operation/last.png" />
              <text>上一首</text>
            </view>
          </view>
          <view style="width: 50%">
            <img mini src="../../static/operation/right.png" />
            <view flex center>
              <img mini src="../../static/operation/next.png" />
              <text>下一首</text>
            </view>
          </view>
        </view>
      </view>
      <view class="border" flex center style="height: 97px;">
        <view class="bg-gary" flex center>
          双击
        </view>
        <view style="width: calc(100% - 206rpx)">
          <view flex around style="font-size: 24rpx;">
            <view>
              <img mini src="../../static/operation/play.png" />
              <view>播放</view>
            </view>
            <view>
              <img mini src="../../static/operation/stop.png" />
              <view>暂停</view>
            </view>
            <view>
              <img mini src="../../static/operation/pickup.png" />
              <view>接听</view>
            </view>
            <view>
              <img mini src="../../static/operation/hangup.png" />
              <view>挂断</view>
            </view>
          </view>
        </view>
      </view>
      <view class="border" flex center style="height: 97px;">
        <view class="bg-gary" flex center>
          长按2s
        </view>
        <view style="width: calc(100% - 206rpx)">
          <view style="font-size: 24rpx; text-align:center">
            <img mini src="../../static/operation/refuse.png" />
            <view>拒接来电</view>
          </view>
        </view>
      </view>
      <view flex center style="height: 97px;">
        <view class="bg-gary" flex center>
          长按3s
        </view>
        <view style="width: calc(100% - 206rpx)">
          <view style="font-size: 24rpx; text-align:center">
            <img mini src="../../static/operation/scene.png" />
            <view>切换场景模式</view>
          </view>
        </view>
      </view>
    </view>

    <view class="box">
      <view class="border" flex center style="height: 162px">
        <img src="../../static/operation/box.png" style="width: 212rpx; height: 260rpx;" />
      </view>
      <view flex center style="height: 100px;">
        <view class="bg-gary" flex center>
          长按5s
        </view>
        <view style="width: calc(100% - 206rpx)">
          <view style="font-size: 24rpx; text-align:center">
            <img mini src="../../static/operation/bluetooth.png" />
            <view>重置蓝牙</view>
            <view style="color:#FFFFFF66">（耳机处于仓内）</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
.earphone {
  height: 558px;
  border: 2rpx solid #2f2f2f;
}

.box {
  margin-top: 32rpx;
  height: 264px;
  border: 2rpx solid #2f2f2f;
}

.border {
  border-bottom: 2rpx solid #2f2f2f;
}

.bg-gary {
  background-color: #ffffff05;
  font-size: 28rpx;
  width: 206rpx;
  height: 100%;
  text-align: center;
  border-right: 2rpx solid #2f2f2f;
}
</style>