initial

apps/pay/components/invoice-form/instructions.vue

@@ -0,0 +1,61 @@
+<template>
+  <div :class="cn.b()">
+    <div :class="cn.e('header')">
+      <p :class="cn.e('title')">
+        Инструкция для оплаты
+      </p>
+
+      <UiIconExclamationFilled :class="cn.e('icon')" />
+    </div>
+
+    <p :class="cn.e('text')">
+      Для оплаты скопируйте адрес в Ваш кошелек <br>
+      или отсканируйте QR-код в приложении.
+      <br><br>
+      Далее введите в кошельке необходимую сумму <br>
+      и подтвердите в этой форме зачисление.
+    </p>
+  </div>
+</template>
+
+<script setup>
+const cn = useClassname('invoice-form-instructions')
+</script>
+
+<style lang="scss">
+.invoice-form-instructions {
+  $self: &;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: $clr-grey-100;
+  border-radius: 12px;
+  width: 100%;
+  text-align: left;
+  padding: 8px 16px;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+  }
+
+  &__title {
+    @include txt-i-b;
+
+    color: $clr-black;
+  }
+
+  &__icon {
+    color: $clr-grey-500;
+  }
+
+  &__text {
+    @include txt-r-m;
+
+    color: $clr-grey-600;
+  }
+}
+</style>