Productos view

2024-09-22 01:31:21 -03:00
parent 39379b67c3
commit 9dff07dc0a
13 changed files with 1602 additions and 103 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,18 @@
 <template>
-  <nav>
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </nav>
-  <router-view />
+  <head>
+    <link rel="stylesheet" href="https://digitalpower.ar/cdn/digitalpower.css">
+  </head>
+  <div class="window-container">
+    <div id="title-bar" noselect></div>
+    <Nav/>
+    <router-view/>
+  </div>
 </template>

 <script setup>
-import { onMounted, ref } from 'vue';
+import {onMounted, ref} from 'vue';
 import {useRouter} from 'vue-router';
+import Nav from "@/components/app/Nav.vue";

 const router = useRouter();

@@ -18,6 +22,16 @@ onMounted(() => {
 </script>

 <style lang="scss">
+:root {
+  --header-height: 150px !important;
+  --app-shadow: rgba(0, 0, 0, 0.45);
+  --navmenu-height: 200px;
+}
+
+body {
+  background: transparent !important;
+}
+
 #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
@@ -38,4 +52,63 @@ nav {
    }
  }
 }
+
+body {
+  margin: 0;
+  padding: 0;
+  padding: 2em;
+  width: 1024px;
+  height: 720px;
+}
+
+.window-container {
+  box-shadow: 0px 0px 20px 0px #0a0a0a;
+  border-radius: 15px;
+  width: 1024px;
+  height: 720px;
+  background: white;
+  overflow-y: auto;
+}
+
+#title-bar {
+  -webkit-app-region: drag;
+  height: 20px;
+  background: var(--primary);
+  color: white;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+}
+
+.select-wrapper::after {
+  content: ">" !important;
+}
+
+@keyframes slideOut {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+.slide-leave-active {
+  transition: opacity var(--duration), transform var(--duration);
+}
+
+.slide-leave-to {
+  animation: slideOut var(--duration) forwards;
+}
+
+[selectedNav="true"] {
+  background: white;
+
+  & > p {
+    color: var(--text-color) !important;
+  }
+}
 </style>