Identification/pages/order/order.vue

<template>
  <view style="font-size: 16px">
    <canvasNavbar></canvasNavbar>
    <view class="flex box">
      <view class="boxSon">
        <view class="flex m20">
          <view class="sphere">A</view>
          <view class="sphere">B</view>
          <view class="sphere">C</view>
          <view class="sphere">D</view>
        </view>
        <view class="canvasBox">
          <view></view>
          <view class="floating">
            <text style="color:#939393">灯光增益</text>
            <uni-number-box v-model="vModelValue" @change="changeValue" style="margin: 0 5rpx"/>
          </view>
        </view>
      </view>
      <view class="boxSon bg">
        <view class="m20">

        </view>
        <view class="m20 flex">
          <view class="roundBig">
            <view class="roundSmall">
              <span>位置</span>
            </view>
            <view class="direction">
            <span class="rotate45">
              <uni-icons type="up" color="#fff" size="30"></uni-icons>
            </span>
            </view>
            <view class="direction">
            <span class="rotate45">
              <uni-icons type="right" color="#fff" size="30"></uni-icons>
            </span>
            </view>
            <view class="direction">
            <span class="rotate45">
              <uni-icons type="left" color="#fff" size="30"></uni-icons>
            </span>
            </view>
            <view class="direction">
            <span class="rotate45">
              <uni-icons type="down" color="#fff" size="30"></uni-icons>
            </span>
            </view>
          </view>
          <view class="roundBig">
            <view class="roundSmall">
              <span>50</span>
            </view>
            <view class="direction">
              <span class="rotate45">高 +</span>
            </view>
            <view class="direction">
              <span class="rotate45">宽 +</span>
            </view>
            <view class="direction">
              <span class="rotate45">宽 -</span>
            </view>
            <view class="direction">
              <span class="rotate45">高 -</span>
            </view>
          </view>
        </view>
        <view class="m20 flex1">
          <view class="button1">更新位置</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import UniNumberBox from "../../uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue";
import UniDataCheckbox from "../../uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue";
import canvasNavbar from '../../components/canvasNavbar.vue'
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

export default {
  components: {UniIcons, UniNumberBox, UniDataCheckbox, canvasNavbar},
  data() {
    return {
      checkbox1: [],
      vModelValue: 0,
      hobby: [{
        text: '光控计数',
        value: 0
      }, {
        text: '推头复位',
        value: 1
      }],
    };
  },
  methods: {
    changeValue() {
      console.log(this.vModelValue)
    },
  }
}
</script>

<style lang="scss">
.box {
  margin-top: 20px;
}

.M40 {
  margin-top: 40px;
}

.flex {
  padding: 0 20px;
  display: flex;
  justify-content: space-between
}

.flex1 {
  display: flex;
  justify-content: center;
}

.boxSon {
  width: 50%;
  height: 75vh;
}

.bg {
  margin-left: 20px;
  background-color: #cccccc;
}

.comButton {
  margin-right: 20rpx;
}

.sphere {
  width: 60px;
  height: 60px;
  line-height: 56px;
  border-radius: 30px;
  text-align: center;
  font-size: 20px;
  border: 1px solid #ccc;
}

.sphere:hover {
  background-color: #2b85e4;
  color: white;
}

.canvasBox {
  position: relative;
  height: 75%;
  background-color: black;
}

.floating {
  position: absolute;
  right: 5%;
  bottom: 5%;
  display: flex;
  align-items: center
}

.m20 {
  margin: 20px 0;

}

.roundBig {
  width: 160px;
  height: 160px;
  position: relative;
  background-color: #ea2424;
  border-radius: 80px;
  display: flex;
  flex-wrap: wrap;
  transform: rotate(45deg);
  overflow: hidden;
}

.roundSmall {
  background-color: white;
  border-radius: 35px;
  font-size: 22px;
  width: 70px;
  height: 70px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%) rotate(-45deg);
}

.direction {
  width: 50%;
  height: 50%;
  background-color: #516c77;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.direction:active {
  background-color: #92a6af;
}

.rotate45 {
  transform: rotate(-45deg);
  color: white;
}

.button {
  display: inline-block;
  background-color: #516c77;
  color: white;
  line-height: 30px;
  height: 30px;
  width: 80px;
  text-align: center;
  margin: 0 10px;
  border-radius: 5px;
}
.button:active{
  background-color: #92a6af;
}

.button1{
  display: inline-block;
  background-color: white;
  color: black;
  line-height: 40px;
  height: 40px;
  width: 90px;
  text-align: center;
  margin: 0 10px;
  border-radius: 5px;
}
.button1:active{
  background-color: #2b82ed;
  color: white;
}

</style>