<script src="../../../../javascripts/tools.js" async="async">
</script>
<div class="advantage-calculator" id="advantage-calculator" data-source="/data/advantage-calculator.json">
    <div class="box">
        <div class="box__content">
            <h3 class="advantage-calculator__heading">Der hkk-Vorteil: Jetzt Preis und Leistung vergleichen!</h3>
            <form class="form form--inline" v-on:submit.prevent="handleSubmit">
                <div class="form__inner">
                    <div class="form-group form-group--small">
                        <label class="label advantage-calculator__label" for="current-health-insurance">Aktuelle Krankenkasse</label>
                        <div class="form-group__inner">
                            <select class="select select--borderless advantage-calculator__select" id="current-health-insurance" name="current-health-insurance" v-model="selected" v-on:change="handleInsuranceChange" v-bind:class="{ 'select--selected': isInsuranceSelected }">
                <option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
                <option v-for="item in items" v-bind:value="item.name" v-bind:id="asId(item.name)" v-bind:insurance-value="item.value">{{ item.name }}</option>
              </select>
                        </div>
                    </div>
                    <div class="form-group form-group--small">
                        <label class="label advantage-calculator__label" for="gross-income">Mtl. Bruttoeinkommen</label>
                        <div class="form-group__inner">
                            <input class="input input--text input--borderless advantage-calculator__input" id="gross-income" type="text" placeholder="Mtl. Bruttoeinkommen" required="required" name="gross-income" v-on:input="handleIncomeChange" v-bind:value="currentIncomeDisplay"
                            />
                        </div>
                    </div>
                    <div class="form__submit form__submit--nextline form__submit--right">
                        <button class="button button--red" type="submit" v-bind:class="{ 'button--inactive': !isFilled }">Vorteil berechnen</button>
                    </div>
                </div>
            </form>
            <div class="advantage-calculator__body">
                <div class="advantage-calculator__message" v-bind:class="{ 'advantage-calculator__message--visible': isIncomeBelowFlexibleZoneMessageVisible }">Sie haben angegeben, dass Sie nicht mehr als 450,00 € Einkommen im Monat haben. Für Beschäftigte in einem sogenannten Minijob existiert eine besondere Beitragsberechnung. Für weitere Informationen besuchen Sie bitte unsere Seite für Arbeits-
                    und Sozialversicherungsrecht für Minijobber oder kontaktieren Sie unseren Kundenservice.</div>
                <div class="advantage-calculator__message" v-bind:class="{ 'advantage-calculator__message--visible': isIncomeInFlexibleZoneMessageVisible }">Sie haben angegeben, dass Sie nicht mehr als 850,00 € Einkommen im Monat haben. Für Beschäftigte im Niedriglohnbereich existiert eine besondere Beitragsberechnung. Dadurch soll die Beitragsbelastung der Beschäftigten abgemildert werden.
                    Bitte nutzen Sie zur Berechnung der Beiträge den <a href="#">hkk-Gleitzonenrechner</a>.</div>
                <div class="advantage-calculator__result" v-bind:class="{ 'advantage-calculator__result--visible': isResultVisible }">
                    <h3 class="advantage-calculator__title">Beitragsvorteil 2020</h3>
                    <ul class="advantage-calculator__list">
                        <li class="advantage-calculator__list-item"><span class="advantage-calculator__duration">pro Monat</span><span class="advantage-calculator__price">{{ totalMonthlyAsCurrency }}</span></li>
                        <li class="advantage-calculator__list-item"><span class="advantage-calculator__duration">pro Jahr</span><span class="advantage-calculator__price advantage-calculator__price--large">{{ totalYearlyAsCurrency }}</span></li>
                    </ul>
                </div>
            </div>
            <div class="advantage-calculator__service">
                <div class="advantage-calculator__service-info">
                    <p>Preis und Leistung im Vergleich: Die hkk ist 2020 nicht nur zum sechsten Mal die günstigste deutschlandweite Krankenkasse – sie bietet auch überdurchschnittliche Leistungen. Aktuelle Krankenkasse wählen und die Übersichten als PDF
                        herunterladen.</p>
                </div>
                <div class="advantage-calculator__service-links">
                    <ul class="icon-list">
                        <li class="icon-list__item">
                            <a class="icon-block" target="_blank" rel="noopener noreferrer" href="https://example.org">
                                <svg class="icon icon-block__icon icon--download" id="icon-ea98" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-download"></use>
</svg>Leistungsübersicht hkk
                            </a>
                        </li>
                        <li class="icon-list__item" v-if="isInsuranceSelected">
                            <a class="icon-block" href="#" v-bind:href="selectedInsurance.serviceOverviewUrl" target="_blank" rel="noopener noreferrer">
                                <svg class="icon icon-block__icon icon--download" id="icon-827e" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-download"></use>
</svg>Leistungsübersicht {{ selectedInsurance.name }}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <footer class="advantage-calculator__footer">
                <ul class="advantage-calculator__footer-list">
                    <li class="advantage-calculator__footer-list-item"><a class="button button--red button--outline" href="#">Infos anfordern</a></li>
                    <li class="advantage-calculator__footer-list-item"><a class="button button--red" href="#">Jetzt wechseln</a></li>
                </ul>
            </footer>
        </div>
    </div>
</div>
-
  //- Service links
  serviceLinks = [
    {
      text: 'Leistungsübersicht hkk',
      icon: 'download',
      link: 'https://example.org',
      attr: {
        target: '_blank',
        rel: 'noopener noreferrer',
      },
    },
    {
      text: 'Leistungsübersicht {{ selectedInsurance.name }}',
      icon: 'download',
      itemAttr: {
        'v-if': 'isInsuranceSelected',
      },
      attr: {
        href: null,
        'v-bind:href': 'selectedInsurance.serviceOverviewUrl',
        target: '_blank',
        rel: 'noopener noreferrer',
      },
    },
  ];

if script
  script(src=`${relativeRoot}javascripts/tools.js`, async)

#advantage-calculator.advantage-calculator(data-source='/data/advantage-calculator.json')
  .box
    .box__content
      h3.advantage-calculator__heading Der hkk-Vorteil: Jetzt Preis und Leistung vergleichen!
      form.form.form--inline(v-on:submit.prevent='handleSubmit')
        .form__inner
          .form-group.form-group--small
            label.label.advantage-calculator__label(for='current-health-insurance') Aktuelle Krankenkasse
            .form-group__inner
              select#current-health-insurance.select.select--borderless.advantage-calculator__select(name='current-health-insurance', v-model='selected', v-on:change='handleInsuranceChange', v-bind:class='{ \'select--selected\': isInsuranceSelected }')
                option.select__hint(disabled='disabled', selected='selected', value='') Auswählen
                option(v-for='item in items', v-bind:value='item.name', v-bind:id='asId(item.name)', v-bind:insurance-value='item.value') {{ item.name }}

          .form-group.form-group--small
            label.label.advantage-calculator__label(for='gross-income') Mtl. Bruttoeinkommen
            .form-group__inner
              input#gross-income.input.input--text.input--borderless.advantage-calculator__input(type='text', placeholder='Mtl. Bruttoeinkommen', required='required', name='gross-income', v-on:input='handleIncomeChange', v-bind:value='currentIncomeDisplay')

          .form__submit.form__submit--nextline.form__submit--right
            button.button.button--red(type='submit', v-bind:class='{ \'button--inactive\': !isFilled }') Vorteil berechnen

      .advantage-calculator__body
        .advantage-calculator__message(v-bind:class='{ \'advantage-calculator__message--visible\': isIncomeBelowFlexibleZoneMessageVisible }')
          | Sie haben angegeben, dass Sie nicht mehr als 450,00 Einkommen im Monat haben. Für Beschäftigte in einem sogenannten Minijob existiert eine besondere Beitragsberechnung. Für weitere Informationen besuchen Sie bitte unsere Seite für Arbeits- und Sozialversicherungsrecht für Minijobber oder kontaktieren Sie unseren Kundenservice.

        .advantage-calculator__message(v-bind:class='{ \'advantage-calculator__message--visible\': isIncomeInFlexibleZoneMessageVisible }')
          | Sie haben angegeben, dass Sie nicht mehr als 850,00 Einkommen im Monat haben. Für Beschäftigte im Niedriglohnbereich existiert eine besondere Beitragsberechnung. Dadurch soll die Beitragsbelastung der Beschäftigten abgemildert werden. Bitte nutzen Sie zur Berechnung der Beiträge den #[a(href='#') hkk-Gleitzonenrechner].

        .advantage-calculator__result(v-bind:class='{ \'advantage-calculator__result--visible\': isResultVisible }')
          h3.advantage-calculator__title Beitragsvorteil 2020
          ul.advantage-calculator__list
            li.advantage-calculator__list-item
              span.advantage-calculator__duration pro Monat
              span.advantage-calculator__price {{ totalMonthlyAsCurrency }}

            li.advantage-calculator__list-item
              span.advantage-calculator__duration pro Jahr
              span.advantage-calculator__price.advantage-calculator__price--large {{ totalYearlyAsCurrency }}

      .advantage-calculator__service
        .advantage-calculator__service-info
          p Preis und Leistung im Vergleich: Die hkk ist 2020 nicht nur zum sechsten Mal die nstigste deutschlandweite Krankenkasse sie bietet auch überdurchschnittliche Leistungen. Aktuelle Krankenkasse hlen und die Übersichten als PDF herunterladen.

        .advantage-calculator__service-links
          != include('@icon-list', { items: serviceLinks })

      footer.advantage-calculator__footer
        ul.advantage-calculator__footer-list
          li.advantage-calculator__footer-list-item: a.button.button--red.button--outline(href='#') Infos anfordern
          li.advantage-calculator__footer-list-item: a.button.button--red(href='#') Jetzt wechseln
{
  "script": true
}
  • Content:
    $advantage-calculator-list-item-padding: 1.5rem;
    $advantage-calculator-footer-item-margin: 0.5rem;
    
    .advantage-calculator {
      margin-bottom: 7.5rem;
    
      .box {
        position: relative;
      }
    
      .box::after {
        background-color: #fff;
        bottom: 0;
        content: '';
        display: block;
        height: 45px;
        left: 0;
        position: absolute;
        width: 100%;
      }
    
      &__body {
        border-top: 5px solid $color-steelgrey-dark;
        margin-bottom: 2rem;
        margin-top: 3rem;
        padding-top: 1rem;
      }
    
      &__message {
        background-color: $color-turquoise-light;
        border: 1px solid $color-turquoise;
        display: none;
        font-size: 1.3rem;
        margin-top: $advantage-calculator-list-item-padding;
        padding: 1rem;
    
        @include mq($from: m) {
          font-size: 1.5rem;
        }
      }
    
      &__message--visible {
        display: block;
      }
    
      &__message > * {
        margin: 0;
      }
    
      &__message > :not(:last-child) {
        margin-bottom: 0.5em;
      }
    
      &__message a {
        text-decoration: underline;
      }
    
      &__message a:hover {
        text-decoration: none;
      }
    
      &__result {
        display: none;
      }
    
      &__result--visible {
        display: block;
    
        @include mq($from: m) {
          display: flex;
          justify-content: space-between;
          width: 100%;
        }
      }
    
      &__heading {
        color: $color-red;
      }
    
      &__title {
        color: $color-red;
        margin: 0;
        padding-top: $advantage-calculator-list-item-padding;
    
        @include mq($from: m) {
          padding-right: $advantage-calculator-list-item-padding;
        }
      }
    
      &__label,
      &__select,
      &__input {
        color: $color-blue;
      }
    
      &__list {
        list-style: none;
        margin: 0;
        padding: 0;
    
        @include mq($from: m) {
          width: 55%;
        }
      }
    
      &__list-item {
        border-bottom: 1px solid $color-steelgrey;
        padding: $advantage-calculator-list-item-padding 0;
      }
    
      &__duration {
        color: $color-blue;
      }
    
      &__price {
        color: $color-blue;
        float: right;
        font-weight: bold;
      }
    
      &__price--large {
        font-size: 2.5rem;
        line-height: 0.8;
      }
    
      &__service {
        margin-top: 2rem;
      }
    
      &__service-info {
        color: $color-blue;
        font-weight: bold;
        margin-bottom: 1rem;
        max-width: 65ch;
      }
    
      &__service-info > :last-child {
        margin-bottom: 0;
      }
    
      .icon-block[href] {
        color: $color-blue;
        font-weight: normal;
        text-decoration: underline;
      }
    
      .icon-block[href]:hover,
      .icon-block[href]:focus {
        color: $color-red;
      }
    
      &:not(.is-loaded) [v-if='isInsuranceSelected'] {
        display: none;
      }
    
      &__footer {
        padding-bottom: 1.5rem;
        padding-top: 1.5rem;
    
        @include mq($from: m) {
          text-align: right;
        }
      }
    
      &__footer-list {
        list-style: none;
        margin: -$advantage-calculator-footer-item-margin;
        padding: 0;
        position: relative;
        z-index: 1;
      }
    
      &__footer-list-item {
        display: inline-block;
        margin: $advantage-calculator-footer-item-margin;
    
        @include mq($until: m) {
          width: 20rem;
        }
      }
    
      &__footer-list-item .button {
        @include mq($until: m) {
          display: block;
        }
      }
    }
    
  • URL: /components/raw/advantage-calculator/advantage-calculator.scss
  • Filesystem Path: src/components/organisms/advantage-calculator/advantage-calculator.scss
  • Size: 3 KB

There are no notes for this item.