thainv-dev: page chi tiết

2024-05-31 12:39:53 +07:00
parent 86bebfd66e
commit 6ff759f22a
15 changed files with 348 additions and 14 deletions
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { isEmpty } from 'lodash';
+const emit = defineEmits(['dropData', 'selectComponent'])
+
+const _props = defineProps<{
+  dataResult?: any[]
+}>()
+
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 3
+}
+</script>
+<template>
+  <div class="breadcrumb">
+    <ul class="breadcrumb__list">
+      <li class="breadcrumb__list__item">
+          <p class="breadcrumb__list__item__title">
+            <nuxt-link to="/">Trang chủ</nuxt-link>
+          </p>
+      </li>
+    </ul>
+
+    <div class="button">
+      <div class="button__increase">
+        <i class="ri-font-size"></i>
+        <i class="ri-add-line"></i>
+      </div>
+      <div class="button__decrease">
+        <i class="ri-font-size"></i>
+        <i class="ri-subtract-line"></i>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.breadcrumb {
+  display: flex;
+  justify-content: space-between;
+
+  &__list {
+    padding: 0px;
+    display: flex;
+    overflow-x: auto;
+    gap: 1.5rem;
+    align-items: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+
+    &__item {
+      display: inline-block;
+      position: relative;
+      &:first-child {
+        color: blue;
+      }
+
+      &:not(:first-child):before {
+        content: "";
+        width: 7px;
+        height: 7px;
+        border-top: 1px solid #bdbdbd;
+        border-right: 1px solid #bdbdbd;
+        transform: rotate(45deg);
+        position: absolute;
+        left: -18px;
+        top: 8px;
+      }
+    }
+  }
+
+  .button {
+    display: flex;
+    gap: 4px;
+
+    &__increase, &__decrease {
+      width: 32px;
+      height: 32px;
+      background-color: rgb(243, 244, 246);
+      border-radius: 50px;
+      position: relative;
+
+      & .ri-font-size {
+        font-size: 17px;
+        position: absolute;
+        top: 50%;
+        left: 40%;
+        transform: translateY(-50%) translateX(-45%);
+      }
+
+      & .ri-add-line, & .ri-subtract-line {
+        position: absolute;
+        right: 2px;
+      }
+    }
+
+  }
+}
+.empty {
+  border-radius: 6px;
+  background: #409eff;
+  width: 40px;
+  min-height: 20px;
+}
+
+
+</style>