1404/11/04- first

src/components/BasicInfoModal/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <!--  <BasicModal
+    v-model:visible="props.visible"
+    width="30rem"
+    :title="props.title"
+    @close="emits('close')"
+  >
+    <div :class="[prefixCls]" class="bg-[#F6F6F4] flex justify-between p-3">
+      <div>
+        <div class="font-bold">{{ props.name }}</div>
+        <div class="text-primary-type">{{ props.type }}</div>
+        &lt;!&ndash;        <div class="text-xl">fggh</div>&ndash;&gt;
+      </div>
+      <div>
+        <div>{{ props.date }}</div>
+        <div class="text-left">{{ props.time }}</div>
+      </div>
+    </div>
+
+    <div></div>
+  </BasicModal>-->
+  <a-modal
+    v-model:visible="localValue"
+    :title="props.title"
+    centered
+    width="80%"
+    @cancel="emits('close')"
+    @close="emits('close')"
+    footer
+  >
+    <div class="overflow-y-auto max-h-[70vh] mt-10">
+      <div :class="[prefixCls]" class="bg-blue-50 rounded flex justify-between p-3">
+        <div>
+          <div class="font-bold">{{ props.name }}</div>
+          <div class="text-primary-type mt-1">{{ props.type }}</div>
+        </div>
+        <div>
+          <div>{{ props.date }}</div>
+          <div class="text-left">{{ props.time }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="bg-[#CACED8] w-full h-[1px] my-8" />
+    <div class="text-[#949DB0]">{{ props.itemsTitle }}</div>
+    <div class="grid md:grid-cols-4 mt-5 gap-5 p-5">
+      <div v-for="val in props.items">
+        <div class="text-[#949DB0]">{{ val.key }}</div>
+        <div class="font-bold">{{ val.value }}</div>
+      </div>
+      <div class="md:col-span-5" v-if="props.description">
+        <div class="text-[#949DB0]">توضیحات</div>
+        <div class="font-bold">{{ props.description ?? '-' }}</div>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+//define emits
+import { usePrefix } from '@core/composable/usePrefix'
+import type { KeyVal } from '@/components/BasicInfoModal/model/Info'
+import { onMounted } from 'vue'
+
+//props
+interface Prop {
+  visible?: boolean
+  title?: string
+  name?: string
+  date?: string
+  time?: string
+  type?: string | number
+  itemsTitle?: string
+  description?: string
+  items?: KeyVal[]
+}
+
+//emits
+const emits = defineEmits(['update:visible', 'close'])
+
+const localValue = computed({
+  get() {
+    return props.visible
+  },
+
+  set(value) {
+    emits('update:visible', value)
+  }
+})
+
+//set type color
+const props = defineProps<Prop>()
+
+//style
+const { prefixCls } = usePrefix('info-modal')
+</script>
+
+<style lang="less">
+@prefix: ~'@{prefixCls}-info-modal';
+
+.@{prefix} {
+  .text-primary-type {
+    color: @primary-color;
+  }
+}
+</style>

src/components/BasicInfoModal/model/Info.ts

@@ -0,0 +1,16 @@
+export interface Info {
+  title?: string
+  date?: string
+  time?: string
+  type?: string | number
+  typeColor?: string
+  mobile?: number
+  name?: string
+  itemsTitle?: string
+  items?: Array<KeyVal>
+  description?: string
+}
+export interface KeyVal {
+  key: string
+  value?: string | number
+}