CSS imitiert Fernbedienungstasten

<Klasse anzeigen="Schaltflächengruppe">
  <Ansichtsklasse="outter-circle">
    <view class="innere-teile braun" bindtap="button" data-type="volAdd">
      <text Klasse="drehen">+</text>
    </Ansicht>
    <view class="Innenteile Silber" bindtap="button" data-type="chaAdd">
      <text Klasse="drehen">+</text>
    </Ansicht>
    <view class="innere-teile blau" bindtap="button" data-type="chaDes">
      <text class="drehen">-</text>
    </Ansicht>
    <view class="inner-parts gold" bindtap="button" data-type="volDes">
      <text class="drehen">-</text>
    </Ansicht>

    <view Klasse="innerer Kreis" bindtap="Schaltfläche" Datentyp="ok">
      <text class="ok drehen">ok</text>
    </Ansicht>
  </Ansicht>
</Ansicht>

.Schaltflächengruppe {
  Polsterung oben: 20rpx;
  Breite: 300rpx;
  Höhe: 300rpx;
  Hintergrundfarbe: rosa;
}
.Außenkreis {
  Position: relativ;
  Rand links: 10rpx;
  Breite: 280rpx;
  Höhe: 280rpx;
  Hintergrundfarbe: Hellcyan;
  Randradius: 100 %;
  Überlauf: versteckt;
  Transform-Origin: Mitte;
  transformieren: drehen (45 Grad);
}
.innere-Teile {
  schweben: links;
  Breite: 140rpx;
  Höhe: 140rpx;
  Zeilenhöhe: 140rpx;
  Textausrichtung: zentriert;
}
.silber {
  Hintergrundfarbe: Silber;
}
.Gold {
  Hintergrundfarbe: Gold;
}
.Blau {
  Hintergrundfarbe: blau;
}
.braun {
  Hintergrundfarbe: braun;
}
.innerer Kreis {
  Position: absolut;
  Rand oben: 70rpx;
  Rand links: 70rpx;
  Breite: 140rpx;
  Höhe: 140rpx;
  Zeilenhöhe: 140rpx;
  Textausrichtung: zentriert;
  Randradius: 100 %;
  Hintergrundfarbe: hellblau;
}
.drehen {
  Anzeige: Inline-Block;
  transformieren: drehen (-45 Grad);
}

Schaltfläche: Funktion (e) {
    var buttonType = e.currentTarget.dataset.type
    console.log(Schaltflächentyp)
    Schalter (Tastentyp) {
      Fall 'chaAdd':
        console.log('rückwärts den Kanal')
      brechen
      Fall 'chaDes':
        console.log('Kanal weiterleiten')
      brechen
      Fall 'volAdd':
        console.log('Lautstärke erhöhen')
      brechen
      Fall 'volDes':
        console.log('Lautstärke verringern')
      brechen
      Standard:
        console.log('ok')
    }
  }