complete layout contact

pages/home-page/contact/index.vue

@@ -37,7 +37,7 @@
           <h4 class="font-weight-light">
             Your email address will not be published. Required fields are marked *
           </h4>
-          <v-textarea outlined auto-grow placeholder="Comment*"/>
+          <v-textarea outlined auto-grow placeholder="Comment*" />
           <v-row>
             <v-col><v-text-field outlined placeholder="Name" /></v-col>
             <v-col><v-text-field outlined placeholder="Email" /></v-col>
@@ -48,6 +48,55 @@
         </v-row>
       </v-row>
     </v-container>
+    <v-container>
+      <div class="d-flex justify-center align-center mt-12">
+        <h2 class="sub-title font-weight-bold">
+          Our Store
+        </h2>
+      </div>
+      <v-row class="pt-5 pb-5">
+        <v-col
+          v-for="(item, i) in items"
+          :key="i"
+          cols="12"
+          md="3"
+        >
+          <v-hover
+            v-slot="{ hover }"
+            :elevation="hover ? 12 : 2"
+            :class="{ 'on-hover': hover }"
+          >
+            <v-card
+              :elevation="hover ? 16 : 2"
+              :class="{ 'on-hover': hover }"
+              class="mx-auto pa-0 ma-3"
+              max-width="280"
+              :style="{ borderRadius: '10px' }"
+              link
+            >
+              <div>
+                <v-img
+                  :src="item.images"
+                  height="250px"
+                  cover
+                  :style="{ borderRadius: '10px', position: 'relative' }"
+                />
+              </div>
+              <div class="content-card">
+                <v-card-title class="card-title justify-center align-center">
+                  {{ item.title }}
+                </v-card-title>
+
+                <v-card-subtitle v-if="hover" class="card-subtitle d-flex justify-center align-center">
+                  {{ item.subtitle }} <br>
+                  {{ item.subtitle2 }}
+                </v-card-subtitle>
+              </div>
+            </v-card>
+          </v-hover>
+        </v-col>
+      </v-row>
+    </v-container>
   </div>
 </template>
 
@@ -55,7 +104,40 @@
 import ContactBreadCrumb from '@/components/ContactBreadCrumb'
 export default {
   components: { ContactBreadCrumb },
-  layout: 'user'
+  layout: 'user',
+  data: () => {
+    return {
+      items: [
+        {
+          images: 'https://d-themes.com/wordpress/riode/elements/wp-content/uploads/sites/3/2020/09/store-1.jpg',
+          title: 'Ha Noi',
+          subtitle: 'mail:catea792@gmail.com',
+          subtitle2: 'phone:0965615899'
+        },
+        {
+          images: 'https://d-themes.com/wordpress/riode/elements/wp-content/uploads/sites/3/2020/09/store-2.jpg',
+          title: 'Da Nang',
+          subtitle: 'mail:catea792@gmail.com',
+          subtitle2: 'phone:0965615899'
+        },
+        {
+          images: 'https://d-themes.com/wordpress/riode/elements/wp-content/uploads/sites/3/2020/09/store-3.jpg',
+          title: 'Ho Chi Minh',
+          subtitle: 'mail:catea792@gmail.com',
+          subtitle2: 'phone:0965615899'
+        },
+        {
+          images: 'https://d-themes.com/wordpress/riode/elements/wp-content/uploads/sites/3/2020/09/store-4.jpg',
+          title: 'Binh Duong',
+          subtitle: 'mail:catea792@gmail.com',
+          subtitle2: 'phone:0965615899'
+        }
+      ],
+      comment: '',
+      name: '',
+      email: ''
+    }
+  }
 }
 // eslint-disable-next-line eol-last
 </script>
@@ -85,4 +167,29 @@ export default {
   background-color:black !important;
   color: #ffffff
 }
+.content-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  color: #fff;
+  transition: padding 0.3s ease-out,background-color 0.3s,opacity 0.3s;
+  border-radius:10px;
+}
+.card-title {
+  color: #ffffff;
+  font-weight: bold;
+}
+.card-subtitle {
+  color: #ffffff;
+  font-weight: bold;
+}
+.v-card:hover .content-card {
+  background-color: var(--rio-primary-color-op-90,rgba(34,119,204,.9));
+}
+
 </style>