Das WeChat-Applet erkennt den Effekt des Wischens nach links zum Löschen von Listenelementen

<Klasse anzeigen="Container">
  <!-- Lieferadresse-->
  <view class="Adresse">
    <Ansichtsklasse="links">
      <Klasse anzeigen="Symbol">
        <image src="../../images/address.png"></image>
      </Ansicht>
      <Ansichtsklasse="txt-wrap">
        <view class="txt">SOLANA Blue Harbor, Bezirk Chaoyang, Peking</view>
      </Ansicht>
    </Ansicht>
    <Ansichtsklasse="rechts">
      <Ansicht Klasse="Zeile"></Ansicht>
      <view class="txt">Bearbeiten</view>
    </Ansicht>
  </Ansicht>
  <Klasse anzeigen="Liste">
    <Ansichtsklasse="Element" wx:für="{{Liste}}" wx:Schlüssel="index">
      <!-- Produktkopfinformationen-->
      <Klasse anzeigen="Kopf">
        <view class="head-icon" bindtap="selectItem" data-index="{{index}}">
          <image src="{{item.flag ? '../../images/select.png' : '../../images/no-select.png'}}"></image>
        </Ansicht>
        <Ansichtsklasse="von">
          <Ansichtsklasse="links">
            <Ansichtsklasse="storeImg">
              <Bild src="../../images/store.png"></Bild>
            </Ansicht>
            <view class="storeName">{{item.storeName}}</view>
            <Ansichtsklasse="Pfeil">
               <image src="../../images/arrow.png"></image>
            </Ansicht>
          </Ansicht>
          <Ansichtsklasse="rechts">
            <view class="freight">Kostenloser Versand</view>
            <view class="coupon">Gutschein</view>
          </Ansicht>
        </Ansicht>
      </Ansicht>
      <!-- Informationen zum Produktinhalt-->
      <Ansichtsklasse="forts">
        <Ansichtsklasse="Wrap"
           bindtouchstart="touchStart"
           bindtouchmove="touchMove"
           Datenindex="{{index}}"
           Stil="links: -{{item.x}}rpx" />
          <Ansichtsklasse="cont-icon">
            <view class="img-wrap" bindtap="selectItem" data-index="{{index}}">
              <image src="{{item.flag ? '../../images/select.png' : '../../images/no-select.png'}}"></image>
            </Ansicht>
            <Klasse anzeigen="img">
              <Bild src="{{item.imgUrl}}"></Bild>
            </Ansicht>
          </Ansicht>
          <Klasse anzeigen="info">
            <view class="name">{{item.name}}</view>
            <Klasse anzeigen="specs-wrap">
              <view class="specs">{{item.specs}}</view>
            </Ansicht>
            <Ansichtsklasse="Rabatt-Wrap">
              <view class="Rabatt">{{Artikel.Rabatt}}</view>
            </Ansicht>
            <Klasse anzeigen="Preis-Wrap">
              <Klasse anzeigen="Preis">
                <text>￥</text>{{Artikelpreis}}<text>,00</text>
              </Ansicht>
              <Ansichtsklasse="num">
                <view class="reduzieren" bindtap="reduzieren" data-index="{{index}}">-</view>
                <Eingabeklasse="inp" 
                       Typ="Nummer"
                       Wert="{{item.num}}"
                       maximale Länge = "4"
                       bindinput="bindNumInput"
                       bindblur="bindNumBlur"
                       Datenindex="{{index}}"/>
                <view class="hinzufügen" bindtap="hinzufügen" data-index="{{index}}">+</view>
              </Ansicht>
            </Ansicht>
          </Ansicht>
          <!-- Wischen Sie nach rechts, um das Produkt zu löschen -->
          <view class="del" bindtap="delete" data-index="{{index}}">Löschen</view>
        </Ansicht>
      </Ansicht>
    </Ansicht>
  </Ansicht>
  <!-- Alles auswählen, Gesamt, Abrechnung -->
  <Ansichtsklasse="gesamt">
    <view class="total-icon" bindtap="alleAuswählen">
      <Klasse anzeigen="img">
        <image src="{{Alles auswählen ? '../../images/select.png' : '../../images/no-select.png'}}"></image>
      </Ansicht>
      <text style="font-size: 26rpx;">Alles auswählen</text>
    </Ansicht>
    <Ansichtsklasse="Settle">
      <Klasse anzeigen="Preis">
        Gesamt <text style="margin: 0 4rpx;">:</text>
        <text style="font-size: 30rpx;font-weight: 800;">¥{{Gesamtpreis}}</text>
      </Ansicht>
      <view class="btn" wx:if="{{totalNum > 0}}">
        Zur Kasse gehen<text style="margin-left: 4rpx;">({{totalNum}})</text>
      </Ansicht>
      <Ansichtsklasse="btn" wx:else>
        Zur Kasse gehen<text style="margin-left: 4rpx;">(0)</text>
      </Ansicht>
    </Ansicht>
  </Ansicht>
</Ansicht>

Seite({
  /**
   * Ausgangsdaten der Seite */
  Daten: {
    Liste: [
      {
        ID: 1, 
        Name: „Apple/Apple 15,4 Zoll 2,2 GHz MacBook Pro 256G Quad-Core i7 Prozessor 256G Laptop Notebook Business Office Student Arbeitszimmer Heimcomputer“,
        imgUrl: '../../images/0.png',
        storeName: 'Wow offizieller Flagship-Store',
        Spezifikationen: „Spot 5788 graue unabhängige Grafikkarte i7/16G/1T/6G der 10. Generation“,
        Rabatt: 'Umtausch bei Einkäufen über 3000',
        Zahl: 1,
        Preis: '11999'
      },
      { 
        ID: 2, 
        Name: „Apple 13-Zoll MacBook Pro 1,4 GHz Quad-Core-Prozessor (Turbo Boost bis zu 3,9 GHz) 256 GB Speicher Touch Bar und Touch ID“,
        imgUrl: '../../images/1.png', 
        storeName: 'Wow offizieller Flagship-Store',
        Spezifikationen: 'Spot 5749 Weiß 10. Generation i7/16G/1T',
        Rabatt: 'Umtausch bei Einkäufen über 3000',
        Zahl: 1,
        Preis: '11245', 
      },
      { 
        ID: 3, 
        Name: „Apple 13-Zoll MacBook Air 1,1 GHz Dual-Core Core i3 Prozessor, Turbo Boost bis zu 3,2 GHz 256 GB Speicher Touch ID“, 
        imgUrl: '../../images/2.png',
        storeName: 'Wow offizieller Flagship-Store',
        Spezifikationen: „Auf Lager: Unabhängige Grafikkarte i7/16G/1T/4G der 9. Generation“,
        Rabatt: 'Umtausch bei Einkäufen über 3000',
        Zahl: 1,
        Preis: '9245'
      },
      { 
        ID: 4, 
        Name: „Apple 13-Zoll MacBook Pro 1,4 GHz Quad-Core-Prozessor (Turbo Boost bis zu 3,9 GHz) 512 GB Speicher Touch Bar und Touch ID“, 
        imgUrl: '../../images/3.png',
        storeName: 'Wow offizieller Flagship-Store',
        Spezifikationen: „i7/500G/integrierte Grafikkarte“,
        Rabatt: 'Umtausch bei Einkäufen über 3000',
        Zahl: 1,
        Preis: '11499'
      },
      { 
        ID: 5, 
        Name: „[Original versiegeltes Produkt] 20 Modelle des Apple 13,3-Zoll MacBook Pro 512G Laptops mit Touch Bar ID Leichter und tragbarer Business-Office-Laptop“, 
        imgUrl: '../../images/4.png',
        storeName: 'Wow offizieller Flagship-Store',
        Spezifikationen: „Spot 5746 weiß i5/8G/500G/integrierte Grafik“,
        Rabatt: 'Umtausch bei Einkäufen über 3000',
        Zahl: 1,
        Preis: '14499'
      }
    ],
    selectAll: false, // Ob alles ausgewählt werden soll totalNum: 0, // Die Gesamtzahl der ausgewählten Artikel totalPrice: 0, // Der Gesamtpreis der ausgewählten Artikel startX: 0, // Die anfängliche X-Achsenkoordinate der Fingerberührung startY: 0 // Die anfängliche Y-Achsenkoordinate der Fingerberührung },

  /**
   * Lebenszyklusfunktion - auf Seitenladen warten*/
  onLoad: Funktion (Optionen) {
    
  },
  /**
   * Lebenszyklusfunktion - Seitenanzeige überwachen*/
  onShow: Funktion () {
    diese.Datenliste.fürJeden((Element)=> {
      item.flag = false // Gibt an, ob das Element basierend auf dem Feld item.x = 0 ausgewählt ist // Die Anfangsposition der relativen Positionierung jedes Listenelements})
  },
  // Wähle ein einzelnes Element aus und berechne den Gesamtpreis des ausgewählten Elements selectItem(e) {
    let index = e.currentTarget.dataset.index
    let flag = diese.Daten.Liste[index].flag
    wenn(flag == false) {
      diese.Daten.Liste[Index].Flag = true
    } anders {
      diese.Datenliste[index].flag = false
    }
    // Bestimmen, ob alle Elemente ausgewählt sind let bool = this.data.list.every((item) => {
      Artikelflagge zurückgeben
    })
    dies.setData({
      Alles auswählen: bool,
      Liste: diese.Daten.Liste
    })
    dies.countPrice()
  },
  // Reduziere die Menge und berechne den Gesamtpreis der ausgewählten Artikel reduce(e) {
    let index = e.currentTarget.dataset.index
    let num = diese.Daten.Liste[index].num
    // Bestimmen Sie, ob die aktuelle Anzahl der Produkte größer als 1 ist. Wenn sie größer als 1 ist, können Sie sie reduzieren, wenn (num > 1) {
      diese.Daten.Liste[Index].num = num - 1
    }
    dies.setData({
      Liste: diese.Daten.Liste
    })
    dies.countPrice()
  },
  // Eingabemenge bindNumInput(e) {
    let val = e.detail.wert
    let index = e.currentTarget.dataset.index
    wenn(Zahl(Wert) == 0) {
      diese.Daten.Liste[Index].Anzahl = 1
    } anders {
      this.data.list[index].num = Zahl(Wert)
    }
  },
  // Fokus verlieren, Gesamtpreis der ausgewählten Artikel berechnen bindNumBlur() {
    dies.setData({
      Liste: diese.Daten.Liste
    })
    dies.countPrice()
  },
  // Erhöhen Sie die Anzahl der Artikel und berechnen Sie den Gesamtpreis der ausgewählten Artikel add(e) {
    let index = e.currentTarget.dataset.index
    let num = diese.Daten.Liste[index].num
    diese.Daten.Liste[Index].Nummer = Nummer + 1
    dies.setData({
      Liste: diese.Daten.Liste
    })
    dies.countPrice()
  },
  // Die Startkoordinaten des Fingers touchStart(e) {
    this.data.startX = e.touches[0].clientX;
    this.data.startY = e.touches[0].clientY;
  },
  // Listenelement verschieben touchMove(e) {
    let index = e.currentTarget.dataset.index
    // Aktuelle Koordinaten abrufen let currentX = e.touches[0].clientX;
    lass currentY = e.touches[0].clientY;
    let x = this.data.startX - currentX; //horizontale Bewegungsdistanz let y = Math.abs(this.data.startY - currentY); //vertikale Bewegungsdistanz, wenn es sich ein wenig nach links bewegt, ist es auch akzeptabel if (x > 35 && y < 110) {
    // Zum Löschen nach links wischen this.data.list[index].x = 110; 
      dies.setData({
        Liste: diese.Daten.Liste
      })
    } sonst wenn (x < -35 && y < 110) {
      //Nach rechts schieben this.data.list[index].x = 0; 
      dies.setData({
        Liste: diese.Daten.Liste
      })
    }
  },
  // Lösche das Listenelement, berechne den Gesamtpreis und alle ausgewählten Status neu delete(e) {
    let index = e.currentTarget.dataset.index
    diese.Daten.Liste.splice(Index, 1)
    dies.setData({
      Liste: diese.Daten.Liste
    })
    dies.countPrice()
  },
  // Alles auswählen allSelect() {
    // Prüfen ob alle ausgewählt sind, wenn ja, alle abwählen, sonst alle auswählen und Gesamtpreis berechnen if(this.data.selectAll) {
      diese.Datenliste.fürJeden((Element)=>{
        item.flag = falsch
      })
      this.data.selectAll = falsch
    } anders {
      diese.Datenliste.fürJeden((Element)=>{
        item.flag = wahr
      })
      diese.Daten.Alles auswählen = true
    }
    dies.setData({
      wähleAlles aus: diese.Daten.wähleAlles aus,
      Liste: diese.Daten.Liste
    })
    dies.countPrice()
  },
  // Berechnen Sie den Gesamtpreis des ausgewählten countPrice() {
    // Bestimmen Sie, ob ausgewählte Elemente vorhanden sind. Wenn ja, berechnen Sie sie. Wenn nein, löschen Sie alle ausgewählten Elemente, den Gesamtpreis und die Anzahl der abgerechneten Elemente. let bool = this.data.list.some((item) => {
      Artikelflagge zurückgeben
    })
    wenn(bool) {
      // Bei jeder Neuberechnung die zuletzt aufgezeichneten Daten löschen this.data.totalNum = 0 
      this.data.totalPrice = 0
      diese.Datenliste.fürJeden((Element)=>{
        wenn(item.flag == true) {
          this.data.totalPrice += (Artikelpreis * Artikelnummer)
          diese.Daten.Gesamtzahl += Artikelzahl
        }
      })
    } anders {
      this.data.totalNum = 0
      this.data.totalPrice = 0
      this.data.selectAll = falsch
    }
    dies.setData({
      Gesamtanzahl: diese.Daten.Gesamtanzahl,
      Gesamtpreis: this.data.totalPrice,
      Alles auswählen: diese.Daten.Alles auswählen
    })
  }
})

Seite {
  Hintergrund: #f2f2f2;
}
.container {
  Breite: 100 %;
  Polsterung unten: 90rpx;
  Box-Größe: Rahmenbox;
  Überlauf-y: scrollen;
}
.Adresse {
  Breite: 100 %;
  Höhe: 80rpx;
  Hintergrund: #fff;
  Rahmen unten links – Radius: 20rpx;
  Rahmen unten rechts – Radius: 20rpx;
  Polsterung: 0 30rpx;
  Box-Größe: Rahmenbox;
  Schriftgröße: 28rpx;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Abstand dazwischen;
  Rand unten: 20rpx;
}
.Adresse .links {
  biegen: 1;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
}
.Adresse .links .Symbol {
  Breite: 32rpx;
  Höhe: 35rpx;
  Rand rechts: 8rpx;
}
.Adresse .links .Symbol Bild {
  Breite: 100 %;
  Höhe: 100%;
}
.Adresse .links .txt-wrap {
  Breite: 0;
  biegen: 1;
}
.Adresse .links .txt-wrap .txt {
  Überlauf: versteckt;
  Textüberlauf: Auslassungspunkte;
  Leerzeichen: Nowrap;
  Polsterung rechts: 10rpx;
  Box-Größe: Rahmenbox;
}
.Adresse .rechts {
  Breite: 80rpx;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
}
.Adresse .rechts .Zeile {
  Breite: 0px;
  Höhe: 26rpx;
  Rahmen links: 4rpx durchgezogen #bfbfbf;
}
.Adresse .rechts .txt {
  biegen: 1;
  Textausrichtung: rechts;
}

.Liste {
  Breite: 100 %;
}
.Liste .Artikel {
  Breite: 100 %;
  Randradius: 20rpx;
  Polsterung: 30rpx 0;
  Box-Größe: Rahmenbox;
  Hintergrund: #ffffff;
  Rand unten: 20rpx;
}

/* Produktkopfinformationen*/
.Liste .Artikel .Kopf {
  Breite: 100 %;
  Schriftgröße: 26rpx;
  Polsterung: 0 30rpx;
  Box-Größe: Rahmenbox;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Rand unten: 20rpx;
}
/* Symbol „Produkt ausgewählt“*/
.Liste .Element .Kopf .Kopf-Symbol {
  Breite: 40rpx;
  Höhe: 40rpx;
  Rand rechts: 26rpx;
  Randradius: 100 %;
  Box-Shadow: 0 0 10rpx hellgrau;
}
.Liste .Element .Kopf .Kopf-Symbol Bild {
  Breite: 100 %;
  Höhe: 100%;
}
.Liste .Artikel .Kopf .von {
  biegen: 1;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Abstand dazwischen;
}
.Liste .Artikel .Kopf .von .links {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
}
.list .item .head .von .left .storeImg {
  Breite: 26rpx;
  Höhe: 26rpx;
  Rand oben: -4rpx;
  Rand rechts: 8rpx;
}
.list .item .head .von .left .storeImg Bild {
  Breite: 100 %;
  Höhe: 100%;
}
/* Name des Shops */
.list .item .head .von .left .storeName {
  biegen: 1;
  Rand rechts: 14rpx;
}
/* Pfeil nach rechts */
.list .item .head .von .links .pfeil {
  Breite: 8rpx;
  Höhe: 34rpx;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
}
.list .item .head .von .links .arrow image {
  Breite: 100 %;
  Höhe: 16rpx;
.Liste .Artikel .Kopf .von .rechts {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Flex-Ende;
}
/* Kostenloser Versand*/
.list .item .head .von .rechts .freight {
  Schriftgröße: 22rpx;
  Farbe: #1e1e1e;
}
/* Gutschein */
.list .item .head .von .rechts .coupon {
  Schriftgröße: 24rpx;
  Polsterung: 4rpx 14rpx;
  Hintergrund: #ffeded;
  Randradius: 20rpx;
  Rand links: 16rpx;
  Farbe: #ffaa7f;
}

/* Produktinformationen */
.Liste .Artikel .cont {
  Breite: 100 %;
  Überlauf: versteckt;
  Schriftgröße: 26rpx;
}
.Liste .Element .cont .wrap {
  Breite: 100 %;
  Polsterung: 0 30rpx;
  Box-Größe: Rahmenbox;
  Anzeige: Flex;
  Inhalt ausrichten: Flex-Start;
  Übergang: alle 0,2 s;
  Position: relativ;
  oben: 0;
  links: 0;
}
/* Schaltfläche zum Löschen des Produkt-Slicks */
.Liste .Element .cont .wrap .del {
  Breite: 110rpx;
  Höhe: 100%;
  Hintergrund: #ffaa7f;
  Schriftgröße: 24rpx;
  Farbe: #fff;
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  Position: absolut;
  oben: 0;
  rechts: -110rpx;
}
.Liste .Element .cont .wrap .cont-Symbol {
  Anzeige: Flex;
  Rand rechts: 26rpx;
}
/* Symbol für ausgewähltes oder nicht ausgewähltes Produkt*/
.Liste .Element .cont .wrap .cont-icon .img-wrap {
  Breite: 40rpx;
  Höhe: 40rpx;
  Rand rechts: 26rpx;
  Randradius: 100 %;
  Box-Shadow: 0 0 10rpx hellgrau;
  Position: relativ;
  oben: 72rpx;
  links: 0;
}
.list .item .cont .wrap .cont-icon .img-wrap Bild {
  Breite: 100 %;
  Höhe: 100%;
}
/* Produktbild*/
.Liste .Element .cont .wrap .cont-icon .img {
  Breite: 190rpx;
  Höhe: 190rpx;
  Rahmenradius: 10rpx;
  Box-Shadow: 0 0 10rpx hellgrau;
  Überlauf: versteckt;
}
.list .item .cont .wrap .cont-icon .img Bild {
  Breite: 100 %;
  Höhe: 100%;
}
.Liste .Artikel .cont .wrap .info {
  biegen: 1;
  Breite: 0;
}
/* Produktname*/
.Liste .Element .cont .wrap .info .name {
  Überlauf: versteckt;
  Textüberlauf: Auslassungspunkte;
  Anzeige: -webkit-box;
  -Webkit-Leitungsklemme: 2;
  -webkit-box-orient: vertikal;
  Rand unten: 10rpx;
}
/* Produktspezifikationen */
.list .item .cont .wrap .info .specs-wrap {
  Breite: 100 %;
  Schriftgröße: 24rpx;
  Polsterung rechts: 12rpx;
  Rahmenradius: 18rpx;
  Box-Größe: Rahmenbox;
  Rand unten: 8rpx;
  Überlauf: versteckt;
  Textüberlauf: Auslassungspunkte;
  Leerzeichen: Nowrap;
}
.list .item .cont .wrap .info .specs-wrap .specs {
  Anzeige: Inline-Block;
  Hintergrund: #f2f2f2;
  Rahmenradius: 18rpx;
  Polsterung: 4rpx 16rpx 4rpx 16rpx;
  Box-Größe: Rahmenbox;
}
/* Produktrabatt*/
.list .item .wrap .wrap .cont .info .discount-wrap {
  Breite: 100 %;
  Schriftgröße: 24rpx;
}
.list .item .cont .wrap .info .discount-wrap .discount {
  Anzeige: Inline-Block;
  Hintergrund: #f2f2f2;
  Rahmenradius: 18rpx;
  Polsterung: 4rpx 20rpx 4rpx 16rpx;
  Box-Größe: Rahmenbox;
}
/* Produktpreis*/
.Liste .Artikel .cont .wrap .info .price-wrap {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Abstand dazwischen;
  Rand oben: 8rpx;
}
.list .item .cont .wrap .info .price-wrap .price {
  Schriftgröße: 36rpx;
  Schriftstärke: 700;
  Farbe: #ffaa7f;
}
.list .item .cont .wrap .info .price-wrap .price text {
  Schriftgröße: 24rpx;
}
/* Produktmenge */
.Liste .Artikel .cont .wrap .info .price-wrap .num {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Flex-Ende;
}
.list .item .cont .wrap .info .price-wrap .num .reduce {
  Breite: 40rpx;
  Schriftstärke: 800;
  Farbe: #262626;
  Textausrichtung: zentriert;
  Zeilenhöhe: 40rpx;
}
.list .item .cont .wrap .info .price-wrap .num .inp {
  Breite: 80rpx;
  Höhe: 40rpx;
  Mindesthöhe: 40rpx;
  Textausrichtung: zentriert;
  Hintergrund: #f2f2f2;
  Rand: 0 2rpx;
}
.list .item .cont .wrap .info .price-wrap .num .add {
  Breite: 40rpx;
  Schriftstärke: 800;
  Farbe: #262626;
  Textausrichtung: zentriert;
  Zeilenhöhe: 40rpx;
}

/*Alles auswählen, Gesamt, Abrechnung*/
.gesamt {
  Breite: 100 %;
  Höhe: 90rpx;
  Hintergrund: #fff;
  Polsterung: 0 20rpx 0 30rpx;
  Box-Größe: Rahmenbox;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Abstand dazwischen;
  Position: fest;
  links: 0;
  unten: 0;
  Z-Index: 99;
}
.gesamt .gesamt-Symbol {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Flex-Start;
}
.total .total-Symbol .img {
  Breite: 40rpx;
  Höhe: 40rpx;
  Rand rechts: 14rpx;
  Randradius: 100 %;
  Box-Shadow: 0 0 10rpx hellgrau;
}
.total .total-icon Bild {
  Breite: 100 %;
  Höhe: 100%;
}
.gesamt .setzen {
  Schriftgröße: 24rpx;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Flex-Ende;
}
.Gesamt .Abwicklung .Preis {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Rand rechts: 16rpx;
}
.total .begleichen .btn {
  Höhe: 60rpx;
  Hintergrund: #ffaa7f;
  Randradius: 30rpx;
  Polsterung: 0 30rpx;
  Box-Größe: Rahmenbox;
  Schriftgröße: 24rpx;
  Farbe: #fff;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
}