Änderungen von adresses_index

assets/main.css

@@ -113,28 +113,45 @@ input {
     rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 }
 
-/* items */
-.item {
-  width: 350px;
-  margin: 0 auto 10px auto;
-  padding: 10px 20px;
-  color: white;
-  border-radius: 5px;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
-    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
-}
-
-/* */
-.adresses {
-  background-color: #a5aeb5;
-  cursor: pointer;
-}
-
 /* error message */
 .error {
   background-color: tomato;
 }
 
+/* Adress Table */
+.adress-content {
+  display: block;
+  width: 100%;
+  margin: 20px auto;
+  padding: 10px 45px;
+  background: white no-repeat 15px center;
+  background-size: 15px 15px;
+  font-size: 16px;
+  border: none;
+  border-radius: 5px;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
+    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}
+
+.adresses {
+  border: none;
+  border-radius: 5px;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
+    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}
+
+.adress-th {
+  border-radius: 1px;
+  border-style: groove;
+}
+
+.adress-td {
+  border-radius: 1px;
+  border-style: groove;
+}
+
+
+
 
 
 

pages/adresses/adresses_index.vue

@@ -5,28 +5,14 @@
         Willkommen in der Adressverwaltung
       </h1>
     </div>
-    <div class="content">
+    <div class="adress-content">
-      <input v-model="input" type="text" placeholder="Suche...">
+      Text
-      <div v-for="adresses in filteredList()" :key="adresses" class="adresses">
-        <p>{{ adresses }}</p>
-      </div>
-      <div v-if="input&&!filteredList().length" class="item error">
-        <p>Nicht gefunden</p>
-      </div>
     </div>
   </div>
 </template>
 
-<script setup>
+<script>
-import { ref } from 'vue'
 
-const input = ref('')
-const adresses = ['Hedemann', 'Nietiedt', 'Schoon']
-function filteredList () {
-  return adresses.filter(adresses =>
-    adresses.toLowerCase().includes(input.value.toLowerCase())
-  )
-}
 </script>
 
 <style src="@/assets/main.css"></style>