'init'

src/views/EquipmentManager/components/TechyContainer.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="techy-container">
+    <template v-if="showCorner">
+      <div class="line top left vertical" />
+      <div class="line top left horizontal" />
+      <div class="line top right vertical" />
+      <div class="line top right horizontal  " />
+      <div class="line bottom right horizontal" />
+      <div class="line bottom right vertical" />
+      <div class="line bottom left vertical" />
+      <div class="line bottom left horizontal" />
+    </template>
+
+    <div class="container-title-wrapper">
+      <span class="container-icon" v-html="icon" />
+      <span class="container-title">{{ title }}</span>
+    </div>
+
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TechyContainer',
+  props: {
+    title: String,
+    icon: String,
+    showCorner: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {}
+  },
+  mounted() {}
+}
+</script>
+
+<style scoped>
+.techy-container {
+  border: 2px solid #52fff1;
+  border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
+  display: inline-block;
+  position: relative;
+  /* padding: 24px; */
+  padding: calc(100vw / 1920 * 22);
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 0px 0px 20px 0px rgba(255,255,255,0.15);
+}
+
+.line {
+  position: absolute;
+  background-color: #52fff1;
+}
+
+.horizontal {
+  /* height: 4px;
+  width: 24px; */
+  /* height: 0.325vh;
+  width: 3vh; */
+  height: calc(100vw / 1920 * 4);
+  width: calc(100vw / 1920 * 30);
+}
+
+.vertical {
+  /* height: 24px;
+  width: 4px; */
+  /* height: 3vh;
+  width: 0.325vh; */
+  height: calc(100vw / 1920 * 30);
+  width: calc(100vw / 1920 * 4);
+}
+
+.top {
+  top: -3px;
+}
+
+.left {
+  left: -3px;
+}
+
+.right {
+  right: -3px;
+}
+
+.bottom {
+  bottom: -3px;
+}
+
+.container-title-wrapper {
+  color: #52fff1;
+  display: flex;
+  align-items: center;
+  /* font-size: 18px;
+  line-height: 1;
+  height: 24px;
+  margin-bottom: 8px; */
+  /* font-size: 1.25vh;
+  line-height: 1;
+  height: 1.5vh;
+  margin-bottom: 1.25vh; */
+  font-size: calc((100vw / 1920) * 16);
+  line-height: 1;
+  height: calc((100vw / 1920) * 20);
+  margin-bottom: 1.25vh;
+}
+
+.container-title {
+  margin-left: 4px;
+}
+</style>