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 { .rc-rate-star {
margin-right: 3px !important; /* فاصله بین ستاره‌ها */ 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 ( return (
<div className='w-full flex gap-6 mt-4'> <div className='w-full flex gap-6 mt-4'>
<div className='flex-1'> <div className='flex-1 max-w-full'>
<ServiceHeader /> <ServiceHeader />
<div className='mt-8 flex justify-between items-center gap-8'> <div className='mt-8 flex overflowX justify-between items-center xl:gap-8 gap-5'>
<div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'> <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 text-xs'> <div className='text-description xl:text-xs text-[11px]'>
{t('service.company_develop')} {t('service.company_develop')}
</div> </div>
<div className='mt-3 text-sm'> <div className='mt-3 text-sm'>
{t('service.company_danak')} {t('service.company_danak')}
</div> </div>
</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='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 text-xs'> <div className='text-description xl:text-xs text-[11px]'>
{t('service.user_count')} {t('service.user_count')}
</div> </div>
<div className='mt-3 text-sm'> <div className='mt-3 text-sm'>
+۵۰۰ +۵۰۰
</div> </div>
</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='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 text-xs'> <div className='text-description xl:text-xs text-[11px]'>
{t('service.year_make')} {t('service.year_make')}
</div> </div>
<div className='mt-3 text-sm'> <div className='mt-3 text-sm'>
۱۴۰۰ ۱۴۰۰
</div> </div>
</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='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 text-xs'> <div className='text-description xl:text-xs text-[11px]'>
{t('service.lang_app')} {t('service.lang_app')}
</div> </div>
<div className='mt-3 text-sm'> <div className='mt-3 text-sm'>
{t('service.persian')} {t('service.persian')}
</div> </div>
</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='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 text-xs'> <div className='text-description xl:text-xs text-[11px]'>
{t('service.score')} {t('service.score')}
</div> </div>
<div className='mt-3 dltr flex gap-1 text-sm'> <div className='mt-3 dltr flex gap-1 text-sm'>
@@ -78,8 +78,8 @@ const DetailService: FC = () => {
</p> </p>
</div> </div>
<div className='mt-8 flex gap-8 items-start'> <div className='mt-8 flex xl:flex-row flex-col gap-8 items-start'>
<div className='bg-white p-6 rounded-3xl w-[360px]'> <div className='bg-white p-6 rounded-3xl xl:w-[360px] w-full'>
<div> <div>
{t('service.submit_comment')} {t('service.submit_comment')}
</div> </div>
@@ -125,7 +125,7 @@ const DetailService: FC = () => {
</div> </div>
</div> </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'> <div className='text-sm'>
{t('service.users_comments')} {t('service.users_comments')}
</div> </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') const [planSelected, setPlanSelected] = useState<'year' | '3month' | 'month'>('year')
return ( return (
<div className='w-full p-6 bg-white rounded-3xl flex justify-between'> <div className='w-full p-6 bg-white rounded-3xl flex xl:flex-row flex-col xl:justify-between'>
<div className='flex gap-8'> <div className='flex xl:gap-8 gap-4'>
<div className='size-[70px] bg-blue-400 rounded-xl'></div> <div className='xl:size-[70px] size-[50px] bg-blue-400 rounded-xl'></div>
<div> <div>
<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> </div>
<p className='text-description mt-1 text-[11px]'> <p className='text-description mt-1 text-[11px]'>
دی منو، راهی ساده و هوشمند برای مدیریت منو شما! دی منو، راهی ساده و هوشمند برای مدیریت منو شما!
</p> </p>
<div className='flex gap-5 mt-5'> <div className='hidden xl:flex gap-5 mt-5'>
<RadioGroup <RadioGroup
items={[ items={[
{ {
@@ -47,14 +47,34 @@ const ServiceHeader: FC = () => {
</div> </div>
</div> </div>
<div className='flex flex-col justify-between items-end'> <div className='flex flex-col justify-between xl:items-end'>
<div className='size-9 bg-description rounded-xl flex justify-center items-center'> <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' /> <img src={ShareIcon} className='w-4' />
</div> </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> <div className='text-xs whitespace-nowrap'>2,000,000 تومان {t('service.year')}</div>
<Button <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 className='flex gap-1 items-center'>
<div> <div>