|
@@ -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>
|