|
|
@@ -0,0 +1,197 @@
|
|
|
+<template>
|
|
|
+ <view class="app-container">
|
|
|
+ <view class="list" style="height: 1116rpx; margin-bottom: 32rpx">
|
|
|
+ <view class="main_pic" style="height: 302rpx;">
|
|
|
+ <img src="../../static/operation/headset.png" style="width: 240rpx; height:240rpx" />
|
|
|
+ </view>
|
|
|
+ <uni-row class="click">
|
|
|
+ <uni-col :span="8" class="left">单击</uni-col>
|
|
|
+ <uni-col :span="16" class="right">
|
|
|
+ <view style="align-items: flex-end; margin-bottom: 20rpx">
|
|
|
+ <img src="../../static/operation/left.png" />
|
|
|
+ </view>
|
|
|
+ <view style="align-items: flex-end; margin-bottom: 20rpx">
|
|
|
+ <img src="../../static/operation/right.png" />
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <img src="../../static/operation/last.png" />
|
|
|
+ <text>上一首</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <img src="../../static/operation/next.png" />
|
|
|
+ <text>下一首</text>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+ <uni-row class="double_click">
|
|
|
+ <uni-col :span="8" class="left">双击</uni-col>
|
|
|
+ <uni-col :span="16" class="right">
|
|
|
+ <view>
|
|
|
+ <img src="../../static/operation/play.png" />
|
|
|
+ <text>播放</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <img src="../../static/operation/stop.png" />
|
|
|
+ <text>暂停</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <img src="../../static/operation/answer.png" />
|
|
|
+ <text>接听</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <img src="../../static/operation/handup.png" />
|
|
|
+ <text>挂断</text>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+ <uni-row class="long_press_2s">
|
|
|
+ <uni-col :span="8" class="left">长按2s</uni-col>
|
|
|
+ <uni-col :span="16" class="right">
|
|
|
+ <img src="../../static/operation/reject.png" />
|
|
|
+ <text>拒接来电</text>
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+ <uni-row class="long_press_3s">
|
|
|
+ <uni-col :span="8" class="left">长按3s</uni-col>
|
|
|
+ <uni-col :span="16" class="right">
|
|
|
+ <img src="../../static/operation/scene.png" />
|
|
|
+ <text>切换场景模式</text>
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+ </view>
|
|
|
+ <view class="list" style="height: 528rpx">
|
|
|
+ <view class="main_pic" style="height: 324rpx;">
|
|
|
+ <img src="../../static/operation/box.png" style="width: 212rpx; height:260rpx" />
|
|
|
+ </view>
|
|
|
+ <uni-row class="long_press_5s">
|
|
|
+ <uni-col :span="8" class="left">长按5s</uni-col>
|
|
|
+ <uni-col :span="16" class="right">
|
|
|
+ <img src="../../static/operation/bluetooth.png" />
|
|
|
+ <text>重置蓝牙</text>
|
|
|
+ <text style="color: rgba(255, 255, 255, 0.4);">(耳机处于仓内)</text>
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scope>
|
|
|
+.list {
|
|
|
+ border: 2rpx solid #2f2f2f;
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ .main_pic {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 2rpx solid #2f2f2f;
|
|
|
+ }
|
|
|
+
|
|
|
+ .click {
|
|
|
+ height: 224rpx;
|
|
|
+ .left {
|
|
|
+ line-height: 224rpx;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ view {
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-content: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .double_click {
|
|
|
+ height: 196rpx;
|
|
|
+ border-bottom: 2rpx solid #2f2f2f;
|
|
|
+ border-top: 2rpx solid #2f2f2f;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ line-height: 196rpx;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ view {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ img {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .long_press_2s {
|
|
|
+ border-bottom: 2rpx solid #2f2f2f;
|
|
|
+ }
|
|
|
+
|
|
|
+ .long_press_2s,
|
|
|
+ .long_press_3s {
|
|
|
+ height: 196rpx;
|
|
|
+ .left {
|
|
|
+ line-height: 196rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .long_press_2s,
|
|
|
+ .long_press_3s,
|
|
|
+ .long_press_5s {
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .long_press_5s {
|
|
|
+ height: 204rpx;
|
|
|
+ .left {
|
|
|
+ line-height: 204rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .left {
|
|
|
+ font-size: 28rpx;
|
|
|
+ height: 100%;
|
|
|
+ text-align: center;
|
|
|
+ background: rgba(255, 255, 255, 0.02);
|
|
|
+ border-right: 2rpx solid #2f2f2f;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ height: 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ text {
|
|
|
+ line-height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
