1 files changed, 114 insertions, 4 deletions
diff --git a/src/views/Operations/SerialOverLan/SerialOverLan.vue b/src/views/Operations/SerialOverLan/SerialOverLan.vue
index 08a67d84..6f6852cf 100644
--- a/src/views/Operations/SerialOverLan/SerialOverLan.vue
+++ b/src/views/Operations/SerialOverLan/SerialOverLan.vue
@@ -1,23 +1,133 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="xxl pt-0 m-0">
     <page-title />
+    <b-button
+      class="btn-primary semi-bold-16px images_add-image-button"
+      @click="$bvModal.show('modal-images')"
+    >
+      {{ $t('pageKvm.addImage') }}</b-button
+    >
     <page-section class="mb-0">
-      <serial-over-lan-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>
+      <!-- <serial-over-lan-console :is-full-window="false" /> -->
     </page-section>
+    <images-modal />
   </b-container>
 </template>
 
 <script>
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
-import SerialOverLanConsole from './SerialOverLanConsole';
+// import SerialOverLanConsole from './SerialOverLanConsole';
+import ImagesModal from '../Kvm/ImagesModal';
 
 export default {
   name: 'SerialOverLan',
   components: {
     PageSection,
     PageTitle,
-    SerialOverLanConsole,
+    ImagesModal,
+    // SerialOverLanConsole,
   },
 };
 </script>
+<style lang="scss" scoped>
+.images_add-image-button {
+  position: absolute;
+  top: 95px;
+  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;
+}
+
+.console {
+  background-color: black;
+  width: 100%;
+  height: 70vh;
+}
+</style>