diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-24 09:43:34 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-24 09:43:34 +0300 |
commit | 6facd12596ec8b55bab4be04b473de65e1f22018 (patch) | |
tree | 9e82b684a4945431b9d798e2e52293477212ec51 /src/views/Operations/Kvm/Kvm.vue | |
parent | 5c7a1dd3d6a22e02b983a01be39b654b8eaa6ad1 (diff) | |
download | webui-vue-6facd12596ec8b55bab4be04b473de65e1f22018.tar.xz |
Add depend: highcarts. Pages: power, analytical motherboard, memory, fans, event logs, Fix styles, add global components.
Diffstat (limited to 'src/views/Operations/Kvm/Kvm.vue')
-rw-r--r-- | src/views/Operations/Kvm/Kvm.vue | 111 |
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> |