fixed codestartpage UI

src/components/FAQ2.vue

@@ -0,0 +1,53 @@
+<template>
+    <div :class="[$style.faqList, $style[$mq]]">
+      <QuesAns
+        v-for="(item, i) in faqItems"
+        :key="i"
+        :item="item"
+        ref="faqs"
+        :index="i"
+        @onToggleQuestion="closeOtherQuestions"
+      >
+        <slot :name="i">
+          <p :inner-html.prop="item.answer | anchor"></p>
+        </slot>
+      </QuesAns>
+    </div>
+  </template>
+
+  <script>
+  const QuesAns = () => import("@components/QuesAns2");
+
+  export default {
+    components: {
+      QuesAns
+    },
+    props: {
+      faqItems: {
+        type: Array,
+        required: true
+      }
+    },
+    methods: {
+      closeOtherQuestions(index, isOpen) {
+        let { faqs } = this.$refs;
+        faqs.forEach((faq, i) => {
+          if (i != index) faq.open = false;
+        });
+      }
+    }
+  };
+  </script>
+
+  <style module lang="stylus">
+  .faqList {
+    width: 100%;
+  }
+
+  @media screen and (max-width: 769px) {
+    .wrapper {
+      width: 90%;
+    }
+  }
+  </style>
+

src/components/LookBack2.vue

@@ -0,0 +1,88 @@
+<template>
+    <div :class="[$style.lookback, $style[$mq]]">
+      <GridLayout :itemWidth="computedWidth">
+        <div
+          :class="$style.stat"
+          v-for="(stat, i) in this.stats"
+          :key="i"
+          :slot="`item${i}`"
+        >
+          <div :class="$style.clip">
+            <img :src="stat.image" :class="$style.img" />
+          </div>
+          <div :class="$style.name">{{ stat.name }}</div>
+          <div :class="$style.value">{{ stat.value }}</div>
+        </div>
+      </GridLayout>
+    </div>
+  </template>
+  <script>
+  const GridLayout = () => import("./layouts/GridLayout");
+
+  export default {
+    props: {
+      stats: {
+        type: Array,
+      },
+    },
+    components: {
+      GridLayout,
+    },
+    computed: {
+      computedWidth() {
+        if (this.$mq == "lg") return "160px";
+        return "220px";
+      },
+    },
+  };
+  </script>
+
+  <style module lang="stylus">
+  .lookback {
+
+    .stat {
+      width: 200px;
+      height: 200px;
+
+      &:nth-child(odd) {
+        &::before {
+          content: '';
+          width: 100px;
+        }
+      }
+
+      .clip {
+        border-radius: 30px;
+        box-shadow: var(--icon-shadow);
+        background: white;
+        width: 160px;
+        height: 160px;
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: 25px;
+        padding: 10px;
+        background-color: #66FF66;
+      }
+
+      .img {
+        width: 70%;
+        height: 70%;
+        position: relative;
+        top: 10%;
+        left: 15%;
+      }
+
+      .name, .value {
+        font-family: 'Quicksand';
+        font-weight: 700;
+        margin-left: auto;
+        margin-right: auto;
+        text-align: center;
+        color: var(--text-color);
+        line-height: 28px;
+        $font-size: 25px;
+      }
+    }
+  }
+  </style>
+

src/components/QuesAns2.vue

@@ -0,0 +1,128 @@
+<template>
+    <div :class="[$style.faqItem, $style[$mq]]">
+      <div :class="$style.question" @click="toggleQues">
+        <p>
+          {{ item.question }}
+          <i
+            class="fa fa-chevron-down"
+            :style="chevronRotateStyle"
+            aria-hidden="true"
+          ></i>
+        </p>
+      </div>
+      <div :class="$style.answer" :style="answerHeightStyle" ref="answer">
+        <slot></slot>
+      </div>
+    </div>
+  </template>
+
+  <script>
+  export default {
+    data() {
+      return {
+        open: false,
+        openProgress: 0,
+        maxHeight: -1,
+      };
+    },
+
+    props: {
+      item: {
+        required: true,
+        type: Object,
+      },
+      index: {
+        required: true,
+        type: Number,
+      },
+    },
+
+    methods: {
+      toggleQues: function() {
+        this.open = !this.open;
+        this.$emit("onToggleQuestion", this.index, this.open);
+      },
+      initHeight() {
+        const { answer } = this.$refs;
+        if (answer.offsetHeight > 0) {
+          this.maxHeight = answer.offsetHeight + 10;
+          clearInterval(this.heightInterval);
+        }
+      },
+    },
+
+    computed: {
+      height() {
+        return this.openProgress * this.maxHeight;
+      },
+      angle() {
+        return this.openProgress * 180;
+      },
+      answerHeightStyle() {
+        return this.maxHeight >= 0 ? { height: ` ${this.height}px` } : {};
+      },
+      chevronRotateStyle() {
+        return { transform: `rotate(${this.angle}deg)` };
+      },
+    },
+
+    watch: {
+      open: function(val) {
+        TweenLite.to(this.$data, 0.4, { openProgress: val ? 1 : 0 });
+      },
+    },
+    mounted() {
+      this.heightInterval = setInterval(this.initHeight.bind(this), 200);
+    },
+    destroyed() {
+      clearInterval(this.heightInterval);
+    },
+  };
+  </script>
+
+  <style lang="stylus" module>
+  @require '~@styles/anims';
+
+  .faqItem {
+    position: relative;
+    width: 100%;
+    text-align: left;
+    clear: both;
+    border-bottom: 2px solid #66FF66;
+
+    a {
+      color: #66FF66;
+    }
+
+    .question {
+      cursor: pointer;
+      font-family: 'Roboto Slab';
+      font-weight: bold;
+      user-select: none;
+
+      i {
+        position: absolute;
+        right: 0px;
+      }
+
+      ^[0].xs, ^[0].sm {
+        p {
+          $font-size: 14px;
+        }
+      }
+    }
+
+    .answer {
+      $font-size: 18px;
+      overflow: hidden;
+      width: 100%;
+      clear: both;
+      font-family: 'Quicksand';
+
+      ^[0].xs, ^[0].sm {
+        $font-size: 13px;
+      }
+    }
+  }
+  </style>
+