544 lines
15 KiB
Vue
544 lines
15 KiB
Vue
<template>
|
|
<div
|
|
class="relative w-full has-background-blue-95 rounded-lg is-clipped"
|
|
style="height: 360px"
|
|
>
|
|
<div class="absolute inset-0 w-full h-full opacity-20">
|
|
<div
|
|
class="absolute w-full border-t border-gray-300"
|
|
style="top: 20%"
|
|
></div>
|
|
<div
|
|
class="absolute w-full border-t border-gray-300"
|
|
style="top: 40%"
|
|
></div>
|
|
<div
|
|
class="absolute w-full border-t border-gray-300"
|
|
style="top: 60%"
|
|
></div>
|
|
<div
|
|
class="absolute w-full border-t border-gray-300"
|
|
style="top: 80%"
|
|
></div>
|
|
<div
|
|
class="absolute w-full border-t border-gray-300"
|
|
style="top: 100%"
|
|
></div>
|
|
<div
|
|
class="absolute h-full border-l border-gray-300"
|
|
style="left: 20%"
|
|
></div>
|
|
<div
|
|
class="absolute h-full border-l border-gray-300"
|
|
style="left: 40%"
|
|
></div>
|
|
<div
|
|
class="absolute h-full border-l border-gray-300"
|
|
style="left: 60%"
|
|
></div>
|
|
<div
|
|
class="absolute h-full border-l border-gray-300"
|
|
style="left: 80%"
|
|
></div>
|
|
<div
|
|
class="absolute h-full border-l border-gray-300"
|
|
style="left: 100%"
|
|
></div>
|
|
</div>
|
|
<div>
|
|
<div
|
|
class="absolute transform -translate-x-1/2 -translate-y-full"
|
|
style="left: 33.3333%; top: 40%"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-map-pin w-6 h-6 has-text-orange-50"
|
|
>
|
|
<path
|
|
d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
|
|
></path>
|
|
<circle
|
|
cx="12"
|
|
cy="10"
|
|
r="3"
|
|
></circle>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="absolute transform -translate-x-1/2 -translate-y-full"
|
|
style="left: 56.6667%; top: 60%"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-map-pin w-6 h-6 has-text-green-50"
|
|
>
|
|
<path
|
|
d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
|
|
></path>
|
|
<circle
|
|
cx="12"
|
|
cy="10"
|
|
r="3"
|
|
></circle>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="absolute transform -translate-x-1/2 -translate-y-full"
|
|
style="left: 10%; top: 28%"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-map-pin w-6 h-6 has-text-orange-50"
|
|
>
|
|
<path
|
|
d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
|
|
></path>
|
|
<circle
|
|
cx="12"
|
|
cy="10"
|
|
r="3"
|
|
></circle>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="absolute transform -translate-x-1/2 -translate-y-full"
|
|
style="left: 83.3333%; top: 80%"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-map-pin w-6 h-6 has-text-green-50"
|
|
>
|
|
<path
|
|
d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
|
|
></path>
|
|
<circle
|
|
cx="12"
|
|
cy="10"
|
|
r="3"
|
|
></circle>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="absolute transform -translate-x-1/2 -translate-y-full"
|
|
style="left: 40%; top: 52%"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-map-pin w-6 h-6 has-text-blue-50"
|
|
>
|
|
<path
|
|
d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
|
|
></path>
|
|
<circle
|
|
cx="12"
|
|
cy="10"
|
|
r="3"
|
|
></circle>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="absolute transform -translate-x-1/2 -translate-y-1/2 transition-all duration-3000 ease-linear animate-move-random-1"
|
|
style="left: 39.3933%; top: 56.171%"
|
|
>
|
|
<div class="relative">
|
|
<div
|
|
class="w-10 h-10 rounded-full has-background-blue-50 border-2 border-white is-flex is-justify-content-center is-align-items-center"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="white"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-navigation w-5 h-5 text-white"
|
|
>
|
|
<polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
|
|
</svg>
|
|
</div>
|
|
<div class="absolute -inset-1 rounded-full has-background-blue-60 animate-ping opacity-40"></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="absolute transform -translate-x-1/2 -translate-y-1/2 transition-all duration-3000 ease-linear animate-move-random-2"
|
|
style="left: 22.8854%; top: 33.4304%"
|
|
>
|
|
<div class="relative">
|
|
<div
|
|
class="w-10 h-10 rounded-full has-background-blue-50 border-2 border-white is-flex is-justify-content-center is-align-items-center"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="white"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-navigation w-5 h-5 text-white"
|
|
>
|
|
<polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
|
|
</svg>
|
|
</div>
|
|
<div class="absolute -inset-1 rounded-full has-background-blue-60 animate-ping opacity-40"></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="absolute transform -translate-x-1/2 -translate-y-1/2 transition-all duration-3000 ease-linear"
|
|
style="left: 73.3333%; top: 72%"
|
|
>
|
|
<div class="relative">
|
|
<div
|
|
class="w-10 h-10 rounded-full bg-gray-400 border-2 border-white is-flex is-justify-content-center is-align-items-center"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="white"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-navigation w-5 h-5 text-white"
|
|
>
|
|
<polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="absolute transform -translate-x-1/2 -translate-y-1/2 transition-all duration-3000 ease-linear animate-move-random-3"
|
|
style="left: 37.052%; top: 75.6278%"
|
|
>
|
|
<div class="relative">
|
|
<div
|
|
class="w-10 h-10 rounded-full has-background-blue-50 border-2 border-white is-flex is-justify-content-center is-align-items-center"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="white"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-navigation w-5 h-5 text-white"
|
|
>
|
|
<polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
|
|
</svg>
|
|
</div>
|
|
<div class="absolute -inset-1 rounded-full has-background-blue-60 animate-ping opacity-40"></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="absolute bottom-3 right-3 backdrop-blur px-3 py-1.5 rounded-lg text-xs font-medium has-text-gray-60"
|
|
style="background-color: hsla(0, 100%, 100%, 0.9)"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-map-pin w-4 h-4 inline mr-1"
|
|
>
|
|
<path
|
|
d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
|
|
></path>
|
|
<circle
|
|
cx="12"
|
|
cy="10"
|
|
r="3"
|
|
></circle></svg
|
|
>Hà Nội
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.absolute {
|
|
position: absolute;
|
|
}
|
|
.relative {
|
|
position: relative;
|
|
}
|
|
.-inset-1 {
|
|
inset: calc(var(--spacing) * -1);
|
|
}
|
|
.right-3 {
|
|
right: calc(var(--spacing) * 3);
|
|
}
|
|
.bottom-3 {
|
|
bottom: calc(var(--spacing) * 3);
|
|
}
|
|
.mr-1 {
|
|
margin-right: calc(var(--spacing) * 1);
|
|
}
|
|
.inline {
|
|
display: inline;
|
|
}
|
|
.h-3 {
|
|
height: calc(var(--spacing) * 3);
|
|
}
|
|
.h-5 {
|
|
height: calc(var(--spacing) * 5);
|
|
}
|
|
.h-6 {
|
|
height: calc(var(--spacing) * 6);
|
|
}
|
|
.h-10 {
|
|
height: calc(var(--spacing) * 10);
|
|
}
|
|
.w-3 {
|
|
width: calc(var(--spacing) * 3);
|
|
}
|
|
.w-5 {
|
|
width: calc(var(--spacing) * 5);
|
|
}
|
|
.w-6 {
|
|
width: calc(var(--spacing) * 6);
|
|
}
|
|
.w-10 {
|
|
width: calc(var(--spacing) * 10);
|
|
}
|
|
.w-full {
|
|
width: 100%;
|
|
}
|
|
.-translate-x-1\/2 {
|
|
--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
|
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
}
|
|
.-translate-y-1\/2 {
|
|
--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
|
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
}
|
|
.-translate-y-full {
|
|
--tw-translate-y: -100%;
|
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
}
|
|
.transform {
|
|
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
|
}
|
|
.animate-ping {
|
|
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
}
|
|
@keyframes ping {
|
|
0% {
|
|
opacity: 0.4;
|
|
transform: scale(0.5);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(1.5);
|
|
}
|
|
}
|
|
.animate-move-random-1 {
|
|
animation: move-random-1 30s ease-in-out infinite;
|
|
}
|
|
.animate-move-random-2 {
|
|
animation: move-random-2 60s ease-in-out infinite;
|
|
}
|
|
.animate-move-random-3 {
|
|
animation: move-random-3 50s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes move-random-1 {
|
|
0% {
|
|
transform: translateX(0) translateY(0);
|
|
}
|
|
|
|
33% {
|
|
transform: translateX(30px) translateY(24px);
|
|
}
|
|
|
|
66% {
|
|
transform: translateX(60px) translateY(12px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0) translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes move-random-2 {
|
|
0% {
|
|
transform: translateX(0) translateY(0);
|
|
}
|
|
|
|
23% {
|
|
transform: translateX(-20px) translateY(-36px);
|
|
}
|
|
|
|
46% {
|
|
transform: translateX(0) translateY(22px);
|
|
}
|
|
|
|
75% {
|
|
transform: translateX(30px) translateY(-12px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0) translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes move-random-3 {
|
|
0% {
|
|
transform: translateX(0) translateY(0);
|
|
}
|
|
|
|
10% {
|
|
transform: translateX(-30px) translateY(-15px);
|
|
}
|
|
|
|
30% {
|
|
transform: translateX(-10px) translateY(26px);
|
|
}
|
|
|
|
50% {
|
|
transform: translateX(48px) translateY(-28px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateX(17px) translateY(10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0) translateY(0);
|
|
}
|
|
}
|
|
.border-2 {
|
|
border-style: var(--tw-border-style);
|
|
border-width: 2px;
|
|
}
|
|
.border-white {
|
|
border-color: var(--color-white);
|
|
}
|
|
.bg-gray-400 {
|
|
background-color: var(--color-gray-400);
|
|
}
|
|
.bg-white\/90 {
|
|
background-color: color-mix(in srgb, #fff 90%, transparent);
|
|
@supports (color: color-mix(in lab, red, red)) {
|
|
background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
|
|
}
|
|
}
|
|
.px-3 {
|
|
padding-inline: calc(var(--spacing) * 3);
|
|
}
|
|
.py-1\.5 {
|
|
padding-block: calc(var(--spacing) * 1.5);
|
|
}
|
|
.text-xs {
|
|
font-size: var(--text-xs);
|
|
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
}
|
|
.font-medium {
|
|
--tw-font-weight: var(--font-weight-medium);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
.text-gray-600 {
|
|
color: var(--color-gray-600);
|
|
}
|
|
.text-white {
|
|
color: var(--color-white);
|
|
}
|
|
.opacity-40 {
|
|
opacity: 40%;
|
|
}
|
|
.shadow {
|
|
--tw-shadow:
|
|
0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
box-shadow:
|
|
var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
|
|
var(--tw-shadow);
|
|
}
|
|
.backdrop-blur {
|
|
--tw-backdrop-blur: blur(8px);
|
|
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
|
|
var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
|
|
var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
|
|
var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
|
|
var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
}
|
|
.transition-all {
|
|
transition-property: all;
|
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
}
|
|
.duration-3000 {
|
|
--tw-duration: 3000ms;
|
|
transition-duration: 3000ms;
|
|
}
|
|
.ease-linear {
|
|
--tw-ease: linear;
|
|
transition-timing-function: linear;
|
|
}
|
|
.border-t {
|
|
border-top-style: solid;
|
|
border-top-width: 1px;
|
|
}
|
|
.border-l {
|
|
border-left-style: solid;
|
|
border-left-width: 1px;
|
|
}
|
|
.border-gray-300 {
|
|
border-color: var(--bulma-grey-85);
|
|
}
|
|
</style>
|