danak/danak-console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

service responsive

Browse Source
This commit is contained in:
hamid zarghami
2025-01-19 11:09:48 +03:30
parent acc28d483c
commit bc6a10d585
3 changed files with 52 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+8
View File
@@ -118,3 +118,11 @@ tbody tr {
.rc-rate-star {
margin-right: 3px !important; /* فاصله بین ستاره‌ها */
}
.overflowX {
overflow-x: scroll;
scrollbar-width: none;
}
.overflowX::-webkit-scrollbar {
display: none;
}
src/pages/service/DetailService.tsx
+15 -15
View File
@@ -16,44 +16,44 @@ const DetailService: FC = () => {
return (
<div className='w-full flex gap-6 mt-4'>
<div className='flex-1'>
<div className='flex-1 max-w-full'>
<ServiceHeader />
<div className='mt-8 flex justify-between items-center gap-8'>
<div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
<div className='text-description text-xs'>
<div className='mt-8 flex overflowX justify-between items-center xl:gap-8 gap-5'>
<div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
<div className='text-description xl:text-xs text-[11px]'>
{t('service.company_develop')}
</div>
<div className='mt-3 text-sm'>
{t('service.company_danak')}
</div>
</div>
<div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
<div className='text-description text-xs'>
<div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
<div className='text-description xl:text-xs text-[11px]'>
{t('service.user_count')}
</div>
<div className='mt-3 text-sm'>
+۵۰۰
</div>
</div>
<div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
<div className='text-description text-xs'>
<div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
<div className='text-description xl:text-xs text-[11px]'>
{t('service.year_make')}
</div>
<div className='mt-3 text-sm'>
۱۴۰۰
</div>
</div>
<div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
<div className='text-description text-xs'>
<div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
<div className='text-description xl:text-xs text-[11px]'>
{t('service.lang_app')}
</div>
<div className='mt-3 text-sm'>
{t('service.persian')}
</div>
</div>
<div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
<div className='text-description text-xs'>
<div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
<div className='text-description xl:text-xs text-[11px]'>
{t('service.score')}
</div>
<div className='mt-3 dltr flex gap-1 text-sm'>
@@ -78,8 +78,8 @@ const DetailService: FC = () => {
</p>
</div>
<div className='mt-8 flex gap-8 items-start'>
<div className='bg-white p-6 rounded-3xl w-[360px]'>
<div className='mt-8 flex xl:flex-row flex-col gap-8 items-start'>
<div className='bg-white p-6 rounded-3xl xl:w-[360px] w-full'>
<div>
{t('service.submit_comment')}
</div>
@@ -125,7 +125,7 @@ const DetailService: FC = () => {
</div>
</div>
</div>
<div className='flex-1 bg-white p-6 rounded-3xl'>
<div className='flex-1 max-w-full bg-white p-6 rounded-3xl'>
<div className='text-sm'>
{t('service.users_comments')}
</div>
src/pages/service/components/ServiceHeader.tsx
+29 -9
View File
@@ -11,20 +11,20 @@ const ServiceHeader: FC = () => {
const [planSelected, setPlanSelected] = useState<'year' | '3month' | 'month'>('year')
return (
<div className='w-full p-6 bg-white rounded-3xl flex justify-between'>
<div className='flex gap-8'>
<div className='size-[70px] bg-blue-400 rounded-xl'></div>
<div className='w-full p-6 bg-white rounded-3xl flex xl:flex-row flex-col xl:justify-between'>
<div className='flex xl:gap-8 gap-4'>
<div className='xl:size-[70px] size-[50px] bg-blue-400 rounded-xl'></div>
<div>
<div>
دی منو
</div>
<div className='text-xs mt-3 text-[#4E505A]'>
<div className='text-xs xl:mt-3 mt-1.5 text-[#4E505A]'>
منوی رستوران
</div>
<p className='text-description mt-1 text-[11px]'>
دی منو، راهی ساده و هوشمند برای مدیریت منو شما!
</p>
<div className='flex gap-5 mt-5'>
<div className='hidden xl:flex gap-5 mt-5'>
<RadioGroup
items={[
{
@@ -47,14 +47,34 @@ const ServiceHeader: FC = () => {
</div>
</div>
<div className='flex flex-col justify-between items-end'>
<div className='size-9 bg-description rounded-xl flex justify-center items-center'>
<div className='flex flex-col justify-between xl:items-end'>
<div className='xl:hidden flex gap-5 mt-5'>
<RadioGroup
items={[
{
label: t('service.year'),
value: 'year'
},
{
label: t('service.month3'),
value: '3month'
},
{
label: t('service.month'),
value: 'month'
}
]}
onChange={setPlanSelected}
selected={planSelected}
/>
</div>
<div className='size-9 hidden bg-description rounded-xl xl:flex justify-center items-center'>
<img src={ShareIcon} className='w-4' />
</div>
<div className='flex gap-4 items-center'>
<div className='flex gap-4 mt-5 xl:mt-0 items-center justify-between xl:justify-normal'>
<div className='text-xs whitespace-nowrap'>2,000,000 تومان {t('service.year')}</div>
<Button
className='bg-description text-xs h-8 bg-opacity-20 text-black px-4'
className='bg-description xl:max-w-full max-w-[100px] text-xs h-8 bg-opacity-20 text-black px-4'
>
<div className='flex gap-1 items-center'>
<div>