ohplay_h5/src/pages/operation/index.vue

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

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