add pwa app

pages/_lang/index.vue

@@ -129,7 +129,7 @@
 
     <section class="s5">
       <img src="~/assets/img/home/hp-s4-i1.jpg" alt="" class="section-bg">
-      <div class="txt anim-parallax">
+      <div class="txt anim-fadeIn">
         <h2 class="title title-shape">{{ staticData.s4.t1 }} <span>{{ staticData.s4.t2 }}</span></h2>
         <p>{{ staticData.s4.t3 }}</p>
         <a v-if="catalog && catalog.file" :href="catalog.file[$route.params.lang]" target="_blank" class="btn btn-reverse-fill">{{ staticData.s4.link }}</a>
@@ -146,7 +146,7 @@
             <h2 class="title title-shape">{{ staticData.s6.t1 }}</h2>
             <p>{{ staticData.s6.t2 }}</p>
             <nuxt-link :to="{name: 'lang-calculation',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.s6.link1 }}</nuxt-link>
-            <a @click.prevent="notAvailable" :href="calc_app_link" target="_blank" class="btn btn-primary-fill">{{ staticData.s6.link2 }}</a>
+            <a @click.prevent="dialogVisible = true" :href="calc_app_link" target="_blank" class="btn btn-primary-fill">{{ staticData.s6.link2 }}</a>
           </div>
           <div class="col-2 img-side d-none d-lg-block">
             <img src="~/assets/img/home/hp-s6-i1.png" class="anim-fadeIn" alt="">
@@ -154,6 +154,42 @@
         </div>
       </div>
     </section>
+
+    <el-dialog class="install-app-dialog" :title="staticData.s6.link1" :visible.sync="dialogVisible">
+      <div class="install-app-description">
+        <h2>{{ staticData.s6.t3 }}</h2>
+        <p>{{ staticData.s6.t4 }}</p>
+        <div class="imgBox">
+          <img src="~/assets/img/home/android-step-1.jpg" :alt="staticData.s6.link2">
+        </div>
+        <p>{{ staticData.s6.t5 }}</p>
+        <div class="imgBox">
+          <img src="~/assets/img/home/android-step-2.jpg" :alt="staticData.s6.link2">
+        </div>
+        <h2>{{ staticData.s6.t6 }}</h2>
+        <p>{{ staticData.s6.t7 }}</p>
+        <div class="imgBox">
+          <img src="~/assets/img/home/ios-step-1.jpg" :alt="staticData.s6.link2">
+        </div>
+        <p>{{ staticData.s6.t8 }}</p>
+        <div class="imgBox">
+          <img src="~/assets/img/home/ios-step-2.jpg" :alt="staticData.s6.link2">
+        </div>
+        <h2>{{ staticData.s6.t9 }}</h2>
+        <p>{{ staticData.s6.t10 }}</p>
+        <div class="imgBox">
+          <img src="~/assets/img/home/desktop-step-1.jpg" :alt="staticData.s6.link2">
+        </div>
+        <p>{{ staticData.s6.t11 }}</p>
+        <div class="imgBox">
+          <img src="~/assets/img/home/desktop-step-2.jpg" :alt="staticData.s6.link2">
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false">{{ staticData.s6.t12 }}</el-button>
+      </span>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -168,7 +204,8 @@ export default {
       favoriteProducts: null,
       catalog: null,
       calc_app_link: this.$store.state.staticData.calc_app_link,
-      validation: []
+      validation: {},
+      dialogVisible: false
     }
   },
   computed: {