1 files changed, 104 insertions, 7 deletions
diff --git a/src/views/Operations/Kvm/Kvm.vue b/src/views/Operations/Kvm/Kvm.vue
index 1a41baaf..8c51ace4 100644
--- a/src/views/Operations/Kvm/Kvm.vue
+++ b/src/views/Operations/Kvm/Kvm.vue
@@ -1,24 +1,121 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="xxl pt-0 m-0">
+    <b-button
+      class="btn-primary semi-bold-16px images_add-image-button"
+      @click="$bvModal.show('modal-images')"
+    >
+      {{ $t('pageKvm.addImage') }}</b-button
+    >
     <page-title />
-    <div class="terminal-container">
-      <kvm-console :is-full-window="false" />
+    <div class="images">
+      <div class="images_desc">
+        <span class="regular-12px tretiatry">Подключенные образы:</span>
+      </div>
+      <div class="images-container">
+        <div class="images-container_image">
+          <img src="@/assets/images/console-images.svg" class="images-image" />
+          <span class="semi-bold-12px">Win-11-2022</span>
+          <span class="light-12px">с носителя</span>
+        </div>
+        <div class="images-container_image">
+          <img src="@/assets/images/console-images.svg" class="images-image" />
+          <span class="semi-bold-12px">Win-10-2017</span>
+          <span class="light-12px">с сервера</span>
+        </div>
+        <div class="images-container_image">
+          <img src="@/assets/images/console-images.svg" class="images-image" />
+          <span class="semi-bold-12px">Win-7-2010</span>
+          <span class="light-12px">с сервера</span>
+        </div>
+      </div>
     </div>
+    <div class="console"></div>
+    <!-- <kvm-console :is-full-window="false" /> -->
+    <images-modal />
   </b-container>
 </template>
 
 <script>
 import PageTitle from '@/components/Global/PageTitle';
-import KvmConsole from './KvmConsole';
+import ImagesModal from './ImagesModal';
+// import KvmConsole from './KvmConsole';
 
 export default {
   name: 'Kvm',
-  components: { PageTitle, KvmConsole },
+  components: {
+    PageTitle,
+    ImagesModal,
+    // KvmConsole
+  },
 };
 </script>
+<style lang="scss" scoped>
+.images_add-image-button {
+  position: absolute;
+  top: calc(#{$header-height});
+  right: 0px;
+  border: none;
+  box-shadow: none;
+  background-color: $faint-secondary-primary-5;
+  color: $red-brand-primary;
+  border-radius: 8px;
+  margin: 12px 32px;
+  width: 236px;
+  height: 40px;
+  z-index: 1001;
+  &:active {
+    background-color: $faint-secondary-primary-5-hover !important;
+    color: $red-brand-primary-active !important;
+    border: none;
+  }
+  &:focus {
+    box-shadow: none !important;
+  }
+  &:focus-visible {
+    box-shadow: none !important;
+  }
+}
+
+.images {
+  display: flex;
+  flex-flow: row wrap;
+  height: 144px;
+}
+
+.images_desc {
+  margin: 16px 0 16px 32px;
+  width: 100%;
+}
+
+.images-container {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 0 0 16px 32px;
+}
+
+.images-container_image {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  margin-right: 24px;
+}
+
+.images-image {
+  width: 40px;
+  height: 40px;
+  margin-bottom: 8px;
+}
+
+.semi-bold-12px {
+  color: $text-primary;
+}
 
-<style scoped>
-.terminal-container {
+.console {
+  background-color: black;
   width: 100%;
+  height: 70vh;
 }
 </style>