vue3-uikit

1
<template>
2
  <div class="card-wrapper">
3
    <!-- Карточка с текстом -->
4
    <div class="card">
5
      <h3 class="card-title"><slot name="title">Simple Card</slot></h3>
6
      <div class="card-content">
7
        <slot>Lorem ipsum dolor sit amet. Donec odio</slot>
8
      </div>
9
    </div>
10

11
    <!-- Карточка с изображением -->
12
    <div class="card card-image">
13
      <img src="https://via.placeholder.com/300x150" alt="Placeholder Image" class="card-img">
14
      <div class="card-content">
15
        <h3 class="card-title"><slot name="title">Card Image</slot></h3>
16
        <slot>Lorem ipsum dolor sit amet. Donec odio</slot>
17
      </div>
18
    </div>
19

20
    <!-- Карточка с кнопкой -->
21
    <div class="card">
22
      <h3 class="card-title"><slot name="title">Card Button</slot></h3>
23
      <div class="card-content">
24
        <slot>Lorem ipsum dolor sit amet. Donec odio</slot>
25
      </div>
26
      <button class="card-button">Click Me</button>
27
    </div>
28

29
    <!-- Карточка пользователя -->
30
    <div class="card card-user">
31
      <img src="https://via.placeholder.com/80" alt="User Avatar" class="card-avatar">
32
      <div class="card-content">
33
        <h3 class="card-title">Agent Smith</h3>
34
        <p>smit@matrix.com</p>
35
        <button class="card-button">Follow</button>
36
      </div>
37
    </div>
38

39
    <!-- Карточка с ценой -->
40
    <div class="card card-price">
41
      <div class="card-content">
42
        <h3 class="card-title">Pro Plan</h3>
43
        <p class="card-price-value">$29/month</p>
44
        <ul class="card-features">
45
          <li><i class="fas fa-check"></i> Feature 1</li>
46
          <li><i class="fas fa-check"></i> Feature 2</li>
47
          <li><i class="fas fa-check"></i> Feature 3</li>
48
        </ul>
49
        <button class="card-button">Choose Plan</button>
50
      </div>
51
    </div>
52
  </div>
53
</template>
54

55
<script>
56
export default {
57
  name: 'Card',
58
};
59
</script>
60

61
<style scoped>
62
.card-wrapper {
63
  display: grid;
64
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
65
  gap: 16px;
66
  margin: 20px;
67
}
68

69
.card {
70
  border: 1px solid #ccc;
71
  border-radius: 8px;
72
  padding: 16px;
73
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
74
  background-color: #fff;
75
  transition: transform 0.2s ease, box-shadow 0.2s ease;
76
  text-align: center;
77
}
78

79
.card:hover {
80
  transform: translateY(-4px);
81
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
82
}
83

84
.card-title {
85
  margin: 0 0 16px;
86
  font-size: 1.5rem;
87
  color: #333;
88
}
89

90
.card-content {
91
  color: #555;
92
  font-size: 1rem;
93
  text-align: center;
94
}
95

96
.card-img {
97
  width: 100%;
98
  border-bottom: 1px solid #ccc;
99
  margin-bottom: 16px;
100
  border-radius: 8px 8px 0 0;
101
}
102

103
.card-button {
104
  margin-top: 16px;
105
  padding: 10px 20px;
106
  background-color: #007bff;
107
  color: #fff;
108
  border: none;
109
  border-radius: 4px;
110
  cursor: pointer;
111
  transition: background-color 0.3s ease;
112
}
113

114
.card-button:hover {
115
  background-color: #0056b3;
116
}
117

118
.card-user {
119
  display: flex;
120
  flex-direction: column;
121
  align-items: center;
122
  justify-content: flex-start;
123
  text-align: left;
124
}
125

126
.card-avatar {
127
  width: 80px;
128
  height: 80px;
129
  border-radius: 50%;
130
}
131

132
.card-user .card-title {
133
  margin: 5px 0 8px;
134
  font-size: 1.2rem;
135
}
136

137
.card-user .card-button {
138
  padding: 8px 16px;
139
  background-color: #28a745;
140
}
141

142
.card-user .card-button:hover {
143
  background-color: #218838;
144
}
145

146
.card-price {
147
  border: 2px solid #007bff;
148
}
149

150
.card-price .card-title {
151
  font-size: 1.4rem;
152
  color: #007bff;
153
}
154

155
.card-price-value {
156
  font-size: 2rem;
157
  color: #007bff;
158
  margin: 16px 0;
159
}
160

161
.card-features {
162
  list-style: none;
163
  padding: 0;
164
  margin: 16px 0 0;
165
}
166

167
.card-features li {
168
  margin: 8px 0;
169
}
170

171
.card-features i {
172
  color: #28a745;
173
  margin-right: 8px;
174
}
175

176
@media (min-width: 600px) {
177
  .card-wrapper {
178
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
179
  }
180
}
181
</style>
182