Vue Uniapp realisiert den Segmentierungseffekt

<Ansichtsklasse="AnzahlZeit">
 <text class="title">Rabatte und Essenszeiten</text>
 <Klasse anzeigen="wrap">
  <view class="box" v-for="(item,index) in discountList" :Schlüssel="index" @click="toggleItem(index)">
   <Ansichtsklasse="selBox" :style="[itemStyle(index)]">
    <Klasse anzeigen="AnzahlBox">
     <text class="Anzahl">{{item.count}}</text>
     <text>Falten</text>
       </Ansicht>
    <text class="Zeit">{{item.time}}</text>
   </Ansicht> 
   <text class="countPrice" :style="[priceStyle(index)]">Nach Abzug des Rabatts beträgt der Durchschnittspreis pro Person ￥100</text>
  </Ansicht>
 </Ansicht>
</Ansicht>

Standard exportieren {
  Daten() {
   zurückkehren {
    sieFarbe:diese.Enum.Them.base,
    Rabattliste:[{
     "Anzahl": 6,9,
     "Zeit": "12:00–13:00"
    },{
     "Anzahl": 6,7,
     "Zeit": "14:00–16:00"
    },{
     "Anzahl": 6,5,
     "Zeit": "20:00–22:00"
    }],
    aktuellerIndex:0
   }
  },
  berechnet:{
   Artikelstil () {
    Rückgabeindex => {
     lass Stil = {}
     wenn(index === dieser.aktuellerIndex){
      Stil.Hintergrundfarbe = diese.SieFarbe;
      Stil.border = `1px durchgezogen ${this.themColor}`;
      Stil.Farbe = "#fff";
     }
     //Wenn der zweite ausgewählt ist, werden der erste rechte Rand und der dritte linke Rand auf „keine“ gesetzt.
     wenn(dieser.aktuellerIndex === 1){
      wenn(index === dieser.aktuellerIndex - 1){
       style.borderRight = "keine !wichtig"
      }
      wenn(index === dieser.aktuellerIndex + 1){
       style.borderLeft = "keine !wichtig"
      }
     }
     Rückgabestil
    }
   },
   Preisstil(){
    Rückgabeindex => {
     lass Stil = {}
     wenn(index === dieser.aktuellerIndex){
      Stil.Farbe = diese.SieFarbe
     }
     Rückgabestil
    }
   }
  },
  Methoden: {
   Umschalten des Elements (idx) {
    dieser.aktuellerIndex = idx
   }
  }
 }

.Zeitangabe{
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  .Titel{
   Schriftgröße: $uni-font-size-bl;
   Rand: 20 Rpx 0;
  }
  .wickeln{
   Anzeige: Flex;
   .Kasten{
    @include flex(Spalte,Mitte,Mitte);
    Breite: 33%;
    &:n-tes-Kind(2){
     & > .selBox{
      Rand links: keiner;
      Rand rechts: keiner;
     }
    }
    .selBox{
     @include flex(Spalte,Mitte,Mitte);
     Breite: 100 %;
     Höhe: 150rpx;
     Rand: 1px durchgezogen $uni-border-color;
     .countBox{
      Schriftgröße: $uni-font-size-lg;
      Schriftstärke: fett;
      Rand unten: 10rpx;
      .zählen{
       Schriftgröße: $uni-font-size-bl;
      }
     }
     .Zeit{
      Schriftgröße: $uni-font-size-l;
     }
    }
    .AnzahlPreis{
     Rand oben: 10rpx;
     Schriftgröße: $uni-font-size-l;
    }
   }
  }
 }