corso vuejs
view | history | commit | commitdiff
Cristiano Magro
2024-12-30 ac100de8d8e0fc85e34cde9aec6262259b12f96c
commit | author | age
a61ded 1 <template>
CM 2   <section>
3     <header>
4       <h1>My Friends</h1>
5     </header>
6     <ul>
7       <friend-contact></friend-contact>
8       <friend-contact></friend-contact>
9     </ul>
10   </section>
11 </template>
12
13 <script>
14 export default {
15   data() {
16     return {
17       friends: [
18         {
19           id: "manuel",
20           name: "Manuel Lorenz",
21           phone: "0123 45678 90",
22           email: "manuel@localhost.com",
23         },
24         {
25           id: "julie",
26           name: "Julie Jones",
27           phone: "0987 654421 21",
28           email: "julie@localhost.com",
29         },
30       ],
31     };
32   },
33 };
34 </script>
35
36 <style>
37 * {
38   box-sizing: border-box;
39 }
40 html {
41   font-family: "Jost", sans-serif;
42 }
43 body {
44   margin: 0;
45 }
46 header {
47   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
48   margin: 3rem auto;
49   border-radius: 10px;
50   padding: 1rem;
51   background-color: #58004d;
52   color: white;
53   text-align: center;
54   width: 90%;
55   max-width: 40rem;
56 }
57 #app ul {
58   margin: 0;
59   padding: 0;
60   list-style: none;
61 }
62 #app li {
63   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
64   margin: 1rem auto;
65   border-radius: 10px;
66   padding: 1rem;
67   text-align: center;
68   width: 90%;
69   max-width: 40rem;
70 }
71 #app h2 {
72   font-size: 2rem;
73   border-bottom: 4px solid #ccc;
74   color: #58004d;
75   margin: 0 0 1rem 0;
76 }
77 #app button {
78   font: inherit;
79   cursor: pointer;
80   border: 1px solid #ff0077;
81   background-color: #ff0077;
82   color: white;
83   padding: 0.05rem 1rem;
84   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
85 }
86 #app button:hover,
87 #app button:active {
88   background-color: #ec3169;
89   border-color: #ec3169;
90   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
91 }
92 </style>