changes

app/components/media/Picture.vue

@@ -1,39 +1,55 @@
 <template>
-  <div>
+  <div class="is-flex is-gap-1">
     <div
-      class="image-container"
       v-if="picture"
+      class="image is-128x128 relative"
     >
-      <img
-        :src="picture"
-        style="max-height: 250px !important"
-      />
-      <div class="image-label">
-        <span
-          class="is-clickable"
-          @click="remove()"
+      <NuxtImg :src="picture" />
+      <div class="absolute top-2 right-2">
+        <button
+          class="button is-small is-light is-danger"
+          @click="remove"
         >
-          <SvgIcon v-bind="{ name: 'bin.svg', type: 'danger', size: 30 }"></SvgIcon>
-        </span>
+          <span class="icon">
+            <Icon
+              name="material-symbols:delete-outline-rounded"
+              :size="20"
+            />
+          </span>
+        </button>
       </div>
     </div>
     <div
-      style="width: 130px; border-style: dashed; border-width: 1px"
       v-else
+      @click="openImage()"
+      class="size-35 rounded-md is-clickable is-flex is-justify-content-center is-align-items-center"
+      style="border: 1px dashed var(--bulma-grey-light)"
     >
-      <a @click="openImage()"><SvgIcon v-bind="{ name: 'image.svg', type: 'grey', size: 120 }"></SvgIcon></a>
+      <Icon
+        name="material-symbols:add-photo-alternate-outline-rounded"
+        :size="50"
+        class="has-text-grey-light"
+      />
     </div>
-    <div class="mt-2">
-      <a @click="openCamera()">
-        <SvgIcon v-bind="{ name: 'camera.svg', type: 'dark', size: 28 }"></SvgIcon>
-      </a>
+    <div>
+      <button
+        class="button is-medium is-light is-primary"
+        @click="openCamera()"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:photo-camera-outline-rounded"
+            :size="24"
+          />
+        </span>
+      </button>
     </div>
     <Modal
       @close="showmodal = undefined"
       v-bind="showmodal"
       v-if="showmodal"
       @selectimage="selectImage"
-    ></Modal>
+    />
   </div>
 </template>
 <script>
@@ -58,8 +74,8 @@ export default {
     },
     selectImage(files) {
       this.showmodal = undefined;
-      let v = files;
-      this.picture = `${this.$path()}download/?name=${v.file__file || v.file}&type=file`;
+      const v = files;
+      this.picture = `${this.$getpath()}download/?name=${v.file__file || v.file}&type=file`;
       v.image = this.$copy(this.picture);
       this.vfile = v;
       this.$emit("picture", v);
@@ -71,8 +87,8 @@ export default {
     openCamera() {
       this.showmodal = {
         component: "media/Camera",
-        title: "Chụp ảnh",
-        width: "650px",
+        width: "700px",
+        height: "auto",
       };
     },
   },