耳机操作手势

src/pages/operation/index.vue

@@ -0,0 +1,131 @@
+<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>