Eine kurze Diskussion über die Verwendung von Vue zur Fertigstellung des mobilen APK-Projekts

// Vue importieren
Vue von „vue“ importieren
// Importieren Sie die Stammkomponente App.vue
App aus „./App.vue“ importieren
// Router importieren Router aus './router' importieren
Store aus „./store“ importieren
// Axios importieren
Axios von „Axios“ importieren
// ElementUI importieren
importiere ElementUI von „element-ui“
// ElementUI-CSS importieren
importiere 'element-ui/lib/theme-chalk/index.css'
// Vant-Konfiguration js importieren
importiere 'amfe-flexible/index.js'
// Importieren Sie hier die benötigten Vant-Komponenten import {
  Bewerten, Popup, Formular, Feld, GoodsActionButton, GoodsActionIcon, GoodsAction, Sidebar,
  SidebarItem, Bild als VanImage, Skelett, SwipeCell, Col, Row,
  CountDown, Lazyload, SwipeItem, Swipe, Sku, Adressliste, Bereich,
  Adressbearbeitung, Navigationsleiste, Übermittlungsleiste, Kontrollkästchengruppe, Kontrollkästchen, Karte,
  Bild, GridItem, Raster, Zelle, Schalter, Schaltfläche, Suche, Registerkarte, Registerkarten,
  Tabbar, TabbarItem, Icon, DropdownMenü, DropdownItem, Toast, Zellgruppe,
  Overlay, Passworteingabe, Zahlentastatur, Laden, ShareSheet, Dialog, Bildvorschau, Uploader
} von 'vant'
// Vuex importieren
Vue.config.productionTip = falsch
// Hier referenzieren wir die Vant-Komponente Vue.use(Search)
  .use(Bewerten)
  .verwenden(Popup)
  .use(Bildvorschau)
  .verwenden(Uploader)
  .use(Dialog)
  .verwenden(ShareSheet)
  .use(Wird geladen)
  .verwenden(Overlay)
  .use(Passworteingabe)
  .use(Zahlentastatur)
  .use(Formular)
  .use(Zellengruppe)
  .verwenden(Toast)
  .use(Feld)
  .use(WarenAktionsschaltfläche)
  .use(WarenAktionssymbol)
  .use(Warenaktion)
  .use(Seitenleiste)
  .use(SidebarItem)
  .verwenden(VanImage)
  .use(Skelett)
  .verwenden(SwipeCell)
  .verwenden(Spalte)
  .use(Zeile)
  .use(CountDown)
  .verwenden(Lazyload)
  .verwenden(SwipeItem)
  .use(Wischen)
  .Verwenden (Sku)
  .use(Adressliste)
  .use(Bereich)
  .use(AdresseBearbeiten)
  .verwenden(Navigationsleiste)
  .verwenden(SubmitBar)
  .use(Kontrollkästchengruppe)
  .use(Kontrollkästchen)
  .use(Karte)
  .use(Bild)
  .verwenden(GridItem)
  .use(Zelle)
  .use(Grid)
  .use(Schalter)
  .use(Schaltfläche)
  .use(DropdownItem)
  .use(DropdownMenü)
  .use(Symbol)
  .use(Tab)
  .use(Tabs)
  .use(Tabbar)
  .use(TabbarItem)
//Globale Referenz auf die ElementUI-Komponente Vue.use(ElementUI)
// Den Axios-Einhängepunkt festlegen Vue.prototype.$http = axios
// Konfigurieren Sie die Basisadresse von Axios axios.defaults.baseURL = 'http://127.0.0.1:3000/api'
// Legen Sie die im Entwicklungsmodus und Nicht-Entwicklungsmodus referenzierte Hintergrundadresse fest axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'http://127.0.0.1:3000/api' : '/api'

neuer Vue({
  speichern,
  Router,
  rendern: h => h(App)
}).$mount('#app')

<Vorlage>
  <div id="app">
    <Router-Ansicht />
    <div Klasse="nach"></div>
    <von-tabbar
      v-Modell="aktiv"
      behoben
      Grenze
      aktiv-color="#bb54f6"
      Route
      v-show="istShowNav"
    >
      <van-tabbar-item class="iconfont icon-rhome-fill" zu="/home">
        Startseite</van-tabbar-item>
      <von-tabbar-item
        Klasse = "iconfont icon-leimupinleifenleileibie2"
        zu="/Kategorie"
      >
        Kategorie</van-tabbar-item>
      <van-tabbar-item class="iconfont icon-u138" to="/finden">
        Entdecken</van-tabbar-item>
      <van-tabbar-item class="iconfont icon-qicheqianlian-" zu="/shopping">
        Warenkorb</van-tabbar-item>
      <van-tabbar-item class="iconfont icon-wodedangxuan" to="/meinBenutzer">
        Meine</van-tabbar-item>
    </van-tabbar>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Daten () {
    zurückkehren {
      aktiv: 0,
      isShowNav: wahr,
      Showlist: ['Home', 'Shopping', 'Suchen', 'Kategorie', 'MeinBenutzer']
    }
  },
  betrachten:
    $route (nach, von) {
      wenn (diese.Showlist.includes(to.name)) {
        this.isShowNav = true
      } sonst wenn (zu.name === '') {
        this.isShowNav = falsch
      } anders {
        this.isShowNav = falsch
      }
    }
  }
}
</Skript>
<Stil>
#app {
  Breite: 100 %;
  Höhe: 100%;
  Schriftfamilie: Avenir, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
}
html,
Körper {
  Breite: 100 %;
  Höhe: 100%;
}
</Stil>

<Vorlage>
  <div Klasse="Startseite">
    <div Klasse="Header">
      <van-suche
        v-Modell="Wert"
        Show-Aktion
        Form="rund"
        Hintergrund="">890bf2"
        Platzhalter="Bitte geben Sie den Suchbegriff ein"
        @search="Suche"
      >
        <Vorlage #Aktion>
          <i
            Klasse = "Iconfont-Symbol-xiaoxi"
            Stil="Schriftgröße: 30px; Farbe: weiß"
          ></i>
        </Vorlage>
      </van-search>
      <van-tabs
        v-Modell="Aktive"
        Hintergrund="">890bf2"
        Titel-inaktiv-Farbe="weiß"
        Titel-Aktiv-Farbe="weiß"
        Farbe = "fff"
      >
        <van-tab title="Bevorzugt" :width="500">
          <!-- Karussell-->
          <van-swipe :autoplay="3000" class="my-swipe1">
            <van-swipe-item v-for="(Bild, Index) in Bildern" :key="Index">
              <img v-lazy="Bild" />
            </van-swipe-item>
          </van-swipe>
          <!-- Zehnerraster-Abschnitt-->
          <van-grid :column-num="5">
            <van-grid-item v-for="Wert im Raster" :key="value.id">
              <div @click="xxx(Wert.Name)">
                <i :class="value.icon" style="Schriftgröße: 35px; Farbe: rot"> </i>
              </div>
              <b style="Schriftgröße: 16px">{{ Wert.Name }}</b>
            </van-grid-item>
          </van-grid>
          <!-- Flash-Sale-Teil -->
          <div Klasse="Versorgung">
            <div Klasse="seckill">
              <van-count-down :time="Zeit" style="Schriftgröße: 14px; Farbe: rot">
                <Vorlage #default="Zeitdaten">
                  <span>Zeit bis zum Ende des Flash-Sales:</span>
                  <span class="block">{{ Zeitdaten.Stunden }}</span>
                  <span class="Doppelpunkt">:</span>
                  <span class="block">{{ ZeitDaten.Minuten }}</span>
                  <span class="Doppelpunkt">:</span>
                  <span class="block">{{ ZeitDaten.Sekunden }}</span>
                </Vorlage>
              </van-countdown>
            </div>
            <div Klasse="Shop">
              <ul>
                <li
                  v-for="Artikel im Versorgungsshop"
                  :Schlüssel="Artikel-ID"
                  @click="detailshop(artikel.id)"
                >
                  <img :src="item.shop_img" alt="" />
                </li>
              </ul>
            </div>
          </div>
          <!-- Produkte -->
          <div Klasse="andererShop">
            <ul>
              <li
                v-for="Artikel in anderemShop"
                :Schlüssel="Artikel-ID"
                @click="detailshop(artikel.id)"
              >
                <a href="JavaScript:;"><img :src="item.shop_img" alt="" /></a>
                <a href="JavaScript:;" style="Farbe: #000"
                  ><p>
                    {{ item.shop_title }}
                  </p></a
                >
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="Mobil">
          <van-grid :column-num="4">
            <van-grid-item
              v-for="Wert im Telefonbild"
              :Schlüssel="Wert.id"
              Symbol="Foto-o"
              text="Text"
            >
              <img :src="value.src" alt="" style="Breite: 50px; Höhe: 30px" />
              <span style="font-size: 12px">{{ Wert.Titel }}</span>
            </van-grid-item>
          </van-grid>
          <div Klasse="anderesTelefon">
            <ul>
              <li
                v-for="Element im anderen Telefon"
                :Schlüssel="Artikel-ID"
                @click="detailshop(artikel.id)"
              >
                <img :src="item.shop_img" alt="" />
                <p>
                  {{ item.shop_title }}
                </p>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="Sport">
          <van-grid :column-num="5">
            <van-grid-item
              v-for="Wert in Bewegungsbild"
              :Schlüssel="Wert.id"
              Symbol="Foto-o"
              text="Text"
            >
              <img :src="value.src" alt="" style="Breite: 50px; Höhe: 30px" />
              <span style="font-size: 12px">{{ Wert.Titel }}</span>
            </van-grid-item>
          </van-grid>
          <div Klasse="andereBewegung">
            <ul>
              <li
                v-for="Element in anderer Bewegung"
                :Schlüssel="Artikel-ID"
                @click="detailshop(artikel.id)"
              >
                <img :src="item.shop_img" alt="" />
                <p>
                  {{ item.shop_title }}
                </p>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="Schönheit">
          <van-grid :column-num="5">
            <van-grid-item
              v-for="Wert in Makeupimg"
              :Schlüssel="Wert.id"
              Symbol="Foto-o"
              text="Text"
            >
              <img :src="value.src" alt="" style="Breite: 50px; Höhe: 30px" />
              <span style="font-size: 12px">{{ Wert.Titel }}</span>
            </van-grid-item>
          </van-grid>
          <div Klasse="anderesMakeup">
            <ul>
              <li
                @click="detailshop(artikel.id)"
                v-for="Artikel in anderemMakeup"
                :Schlüssel="Artikel-ID"
              >
                <img :src="item.shop_img" alt="" />
                <p>
                  {{ item.shop_title }}
                </p>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="Herrenschuhe">
          <van-grid :column-num="5">
            <van-grid-item
              v-for="Wert in Menshopimg"
              :Schlüssel="Wert.id"
              Symbol="Foto-o"
              text="Text"
            >
              <img :src="value.src" alt="" style="Breite: 50px; Höhe: 30px" />
              <span style="font-size: 12px">{{ Wert.Titel }}</span>
            </van-grid-item>
          </van-grid>
          <div Klasse="andererMenschenshop">
            <ul>
              <li
                @click="detailshop(artikel.id)"
                v-for="Artikel in anderemMenshop"
                :Schlüssel="Artikel-ID"
              >
                <img :src="item.shop_img" alt="" />
                <p>
                  {{ item.shop_title }}
                </p>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="Damenschuhe">
          <van-grid :column-num="5">
            <van-grid-item
              v-for="Wert in WoMenshopimg"
              :Schlüssel="Wert.id"
              Symbol="Foto-o"
              text="Text"
            >
              <img :src="value.src" alt="" style="Breite: 50px; Höhe: 30px" />
              <span style="font-size: 12px">{{ Wert.Titel }}</span>
            </van-grid-item>
          </van-grid>
          <div Klasse="andererDamenshop">
            <ul>
              <li
                v-for="Artikel in anderemDamenshop"
                :Schlüssel="Artikel-ID"
                @click="detailshop(artikel.id)"
              >
                <img :src="item.shop_img" alt="" />
                <p>
                  {{ item.shop_title }}
                </p>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="Möbel und Heim">
          <van-grid :column-num="5">
            <van-grid-item
              v-for="Wert in FurnishingImg"
              :Schlüssel="Wert.id"
              Symbol="Foto-o"
              text="Text"
            >
              <img :src="value.src" alt="" style="Breite: 50px; Höhe: 30px" />
              <span style="font-size: 12px">{{ Wert.Titel }}</span>
            </van-grid-item>
          </van-grid>
          <div Klasse="andereEinrichtung">
            <ul>
              <li
                v-for="Artikel in anderer Einrichtung"
                :Schlüssel="Artikel-ID"
                @click="detailshop(artikel.id)"
              >
                <img :src="item.shop_img" alt="" />
                <p>
                  {{ item.shop_title }}
                </p>
              </li>
            </ul>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Daten () {
    zurückkehren {
      Wert: '',
      Aktive: 0,
      Zeit: '',
      // Karussellbilder Bilder: [
        'http://m.360buyimg.com/mobilecms/s700x280_jfs/t1/165251/27/8980/194778/60409b0aE6d2ff3df/ca0c808809dbbfa8.jpg!q70.jpg.dpg',
        'http://imgcps.jd.com/ling4/10027168852797/54mb5LuU6KOk5Zyw5pa554m56Imy/6ZKc5oOg55av5oqi/p-5c17126882acdd181dd53cf1/018cd345/cr_1125x445_0_171/s1125x690/q70.jpg',
        „http://m.360buyimg.com/mobilecms/s700x280_jfs/t1/163716/23/16055/97374/6066f2cfEe720735f/3f4d05450bc1f7fc.jpg!q70.jpg.dpg“
      ],
      // Netz: [
        { id: 1, icon: 'iconfont icon-shouji', name: 'Mobiltelefon' },
        { id: 2, icon: 'iconfont icon-bingxiang', name: 'Kühlschrank' },
        { id: 3, Symbol: 'iconfont icon-xiyiji', Name: 'Waschmaschine' },
        { ID: 4, Symbol: 'Iconfont Icon-Dianshi', Name: 'TV' },
        { ID: 5, Symbol: 'Iconfont-Symbol-youyanjiB', Name: 'Rancho Hood',
        { id: 6, Symbol: 'iconfont icon-reshuiqi', Name: 'Warmwasserbereiter' },
        { ID: 7, Symbol: 'Iconfont Icon-Jiaju', Name: 'Homepage',
        { id: 8, icon: 'iconfont icon-dianfanbao', name: 'Reiskocher' },
        { id: 9, icon: 'iconfont icon-deng', name: 'Schreibtischlampe' },
        { ID: 10, Symbol: ‚Iconfont Icon-Chufangyongpin-Ranqizao‘, Name: ‚Gasherd‘ }
      ],
      // Blitzverkaufsprodukte liefernShop: [],
      // Weitere Produkte otherShop: [],
      // Mobile Seite phoneimg: [],
      // Andere Mobiltelefonprodukte otherPhone: [],
      // Bewegungsseite motionimg: [],
      // Weitere Sportprodukte othermotion: [],
      // Make-up-Seite Makeupimg: [],
      // Andere Schönheitsprodukte otherMakeup: [],
      // Herrenschuhseite Menshopimg: [],
      // Andere Herrenschuhe otherMenshop: [],
      // DamenschuhseiteWoMenshopimg: [],
      // Andere Damenschuhe otherWoMenshop: [],
      // Startseite FurnishingImg: [],
      // Weitere Produkte für das Zuhause otherFurnishing: []
    }
  },
  erstellt () {
    dies.CountDown()
    dies.loadershop()
  },
  Methoden: {
    // Suche nach Produkten search (value) {
      dies.$router.push({ Name: 'SchCont', Parameter: { Wert } })
    },
    // Countdown () {
      var meinDate = neues Date()
      var Stunde = 24 - myDate.getHours()
      diese.Zeit = Stunde * 60 * 60 * 1000
    },
    // Produktinformationen abrufen async loadershop () {
      // Alle Produkte abrufen und dem gewünschten Seitenmodul zuordnen const Allshop = await this.$http.get('list?id=100')
      dieser.andererShop = Allshop.data.data
      // Holen Sie sich das Mobiltelefonprodukt und weisen Sie es dem Mobilseitenmodul zu. const phone = await this.$http.get('details?id=2')
      dieses.anderesTelefon = Telefon.Daten.Daten
      // Sportprodukte abrufen und dem Sportseitenmodul zuweisen const play = await this.$http.get('details?id=3')
      dies.anderemotion = spiele.daten.daten
      // Schönheitsprodukte abrufen und dem Beauty-Seitenmodul zuweisen const Makeup = await this.$http.get('details?id=4')
      dies.anderesMakeup = Makeup.data.data
      // Herrenschuhe holen und dem Seitenmodul für Herrenschuhe zuordnen const Menshop = await this.$http.get('details?id=5')
      dieser.andererMenshop = Menshop.data.data
      // Holen Sie sich Damenschuhe und weisen Sie sie dem Seitenmodul für Damenschuhe zu. const WoMenshop = await this.$http.get('details?id=6')
      dieser.andererWoMenshop = WoMenshop.data.data
      // Holen Sie sich Wohnmöbelprodukte und weisen Sie sie dem Wohnmöbelseitenmodul zu. const Furnishing = await this.$http.get('details?id=7')
      this.otherFurnishing = Einrichtung.data.data
      // Holen Sie sich die Flash-Sale-Produkte und weisen Sie sie dem Flash-Sale-Modul zu. const miaosha = await this.$http.get('list_m')
      dieser.supplyShop = miaosha.data.data
    },
    // Zur Detailseite wechseln detailshop (id) {
      this.$router.push({ name: 'Details', params: { id: id, urls: '/home' } })
    },
    // Springe zu den bevorzugten Rasterdetails xxx (id) {
      dies.$router.push({ Name: 'SchCont', Parameter: { Wert: ID } })
    }
  }
}
</Skript>
<style lang="less" scoped>
.heim {
  Breite: 100 %;
  Höhe: 100%;
  .header {
    .van-tabs {
      Rand oben: -5px;
    }
  }
}

.van-tabbar {
  .van-tabbar-item {
    Anzeige: Flex;
    Flex-Richtung: Spalte;
  }
}
//Diashow.my-swipe1 {
  Breite: 300px;
  Höhe: 150px;
  Rand links: 35px;
  Rand oben: 20px;
  img {
    Breite: 300px;
    Höhe: 150px;
  }
  Kastenschatten: 0px 1px 3px 3px rgba (34, 25, 25, 0,2);
}

// Zehn Grids.van-grid {
  Rand oben: 10px;
  Kastenschatten: 0px 1px 3px 3px rgba (34, 25, 25, 0,2);
}

//Zweiter Verkauf.Angebot {
  Breite: 100 %;
  Höhe: 120px;
  Rand oben: 10px;
  Kastenschatten: 0px 1px 3px 3px rgba (34, 25, 25, 0,2);
  .Geschäft {
    ul {
      Listenstil: keiner;
      li {
        schweben: links;
        Rand links: 13px;
        img {
          Rand oben: 10px;
          Breite: 80px;
        }
      }
    }
  }
}

// Andere Produkte.otherShop {
  Rand oben: 20px;
  ul {
    Anzeige: Flex;
    Inhalt ausrichten: Abstand herum;
    Elemente ausrichten: zentrieren;
    Flex-Wrap: Umwickeln;
    Polsterung unten: 40px;
    li {
      Breite: 170px;
      Höhe: 220px;
      Schriftgröße: 14px;
      P {
        Breite: 170px;
        overflow: hidden; //Überschüssiger Text wird ausgeblendet white-space: nowrap; //Überlauf umbricht Text-Overflow: ellipsis; //Überlauf wird mit Auslassungspunkten angezeigt}
      img {
        Breite: 150px;
      }
    }
  }
}

//Andere Mobiltelefonprodukte.otherPhone {
  Rand oben: 20px;
  ul {
    Anzeige: Flex;
    Inhalt ausrichten: Abstand herum;
    Elemente ausrichten: zentrieren;
    Flex-Wrap: Umwickeln;
    Polsterung unten: 40px;
    li {
      Breite: 170px;
      Höhe: 220px;
      Schriftgröße: 14px;
      P {
        Breite: 170px;
        overflow: hidden; //Überlaufender Text wird ausgeblendet white-space: nowrap; //Überlauf wird nicht umbrochen text-overflow: ellipsis; //Überlauf wird mit Auslassungspunkten angezeigt text-indent: 2em;
      }
      img {
        Breite: 150px;
      }
    }
  }
}

//Andere Sportprodukte.othermotion {
  Rand oben: 20px;
  ul {
    Anzeige: Flex;
    Inhalt ausrichten: Abstand herum;
    Elemente ausrichten: zentrieren;
    Flex-Wrap: Umwickeln;
    Polsterung unten: 40px;
    li {
      Breite: 170px;
      Höhe: 220px;
      Schriftgröße: 14px;
      P {
        Breite: 170px;
        overflow: hidden; //Überlaufender Text wird ausgeblendet white-space: nowrap; //Überlauf wird nicht umbrochen text-overflow: ellipsis; //Überlauf wird mit Auslassungspunkten angezeigt text-indent: 2em;
      }
      img {
        Breite: 150px;
      }
    }
  }
}

//Andere Schönheitsprodukte.otherMakeup {
  Rand oben: 20px;
  ul {
    Anzeige: Flex;
    Inhalt ausrichten: Abstand herum;
    Elemente ausrichten: zentrieren;
    Flex-Wrap: Umwickeln;
    Polsterung unten: 40px;
    li {
      Breite: 170px;
      Höhe: 220px;
      Schriftgröße: 14px;
      P {
        Breite: 170px;
        overflow: hidden; //Überlaufender Text wird ausgeblendet white-space: nowrap; //Überlauf wird nicht umbrochen text-overflow: ellipsis; //Überlauf wird mit Auslassungspunkten angezeigt text-indent: 2em;
      }
      img {
        Breite: 150px;
      }
    }
  }
}

//Andere Herrenschuhe.otherMenshop {
  Rand oben: 20px;
  ul {
    Anzeige: Flex;
    Inhalt ausrichten: Abstand herum;
    Elemente ausrichten: zentrieren;
    Flex-Wrap: Umwickeln;
    Polsterung unten: 40px;
    li {
      Breite: 170px;
      Höhe: 220px;
      Schriftgröße: 14px;
      P {
        Breite: 170px;
        overflow: hidden; //Überlaufender Text wird ausgeblendet white-space: nowrap; //Überlauf wird nicht umbrochen text-overflow: ellipsis; //Überlauf wird mit Auslassungspunkten angezeigt text-indent: 2em;
      }
      img {
        Breite: 150px;
      }
    }
  }
}

//Andere Damenschuhe.otherWoMenshop {
  Rand oben: 20px;
  ul {
    Anzeige: Flex;
    Inhalt ausrichten: Abstand herum;
    Elemente ausrichten: zentrieren;
    Flex-Wrap: Umwickeln;
    Polsterung unten: 40px;
    li {
      Breite: 170px;
      Höhe: 220px;
      Schriftgröße: 14px;
      P {
        Breite: 170px;
        overflow: hidden; //Überlaufender Text wird ausgeblendet white-space: nowrap; //Überlauf wird nicht umbrochen text-overflow: ellipsis; //Überlauf wird mit Auslassungspunkten angezeigt text-indent: 2em;
      }
      img {
        Breite: 150px;
      }
    }
  }
}

// Andere Produkte für das Zuhause.andereEinrichtung {
  Rand oben: 20px;
  ul {
    Anzeige: Flex;
    Inhalt ausrichten: Abstand herum;
    Elemente ausrichten: zentrieren;
    Flex-Wrap: Umwickeln;
    Polsterung unten: 40px;
    li {
      Breite: 170px;
      Höhe: 220px;
      Schriftgröße: 14px;
      P {
        Breite: 170px;
        overflow: hidden; //Überlaufender Text wird ausgeblendet white-space: nowrap; //Überlauf wird nicht umbrochen text-overflow: ellipsis; //Überlauf wird mit Auslassungspunkten angezeigt text-indent: 2em;
      }
      img {
        Breite: 150px;
      }
    }
  }
}
</Stil>