1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| <script setup>
| defineProps({
| msg: {
| type: String,
| required: true,
| },
| });
| </script>
|
| <template>
| <div class="greetings">
| <h1 class="green">{{ msg }}</h1>
| <h3>
| You’ve successfully created a project with
| <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
| <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
| </h3>
| </div>
| </template>
|
| <style scoped>
| .greetings {
| margin-bottom: 11px;
| }
| h1 {
| font-weight: 500;
| font-size: 2.6rem;
| position: relative;
| top: -10px;
| }
|
| h3 {
| font-size: 1.2rem;
| }
|
| .greetings h1,
| .greetings h3 {
| text-align: center;
| }
|
| @media (min-width: 1024px) {
| .greetings h1,
| .greetings h3 {
| text-align: left;
| }
| }
| </style>
|
|
