جدول اطلاعات محصول/دماوند پلیمر - فراغیب
ظاهر
صفحهای تازه حاوی «<html> <section class="banner-table-section" dir="rtl" lang="fa" aria-labelledby="banner-types-title"> <div class="banner-table-wrap"> <h2 id="banner-types-title" class="banner-table-title">انواع چاپ بنر و کاربرد آنها</h2> <div class="banner-table-responsive"> <table class="banner-table"> <caption>جدول معرفی انواع چاپ بنر، کاربرد و مزایای هر نوع</c...» ایجاد کرد |
بدون خلاصۀ ویرایش |
||
| (۵ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) | |||
| خط ۱: | خط ۱: | ||
<html> | <html> | ||
< | <style> | ||
/* بخش اصلی نگهدارنده */ | |||
.banner-table-section { | |||
margin: 20px 0; | |||
font-family: 'IRANSansXFaNum', Tahoma, sans-serif; | |||
direction: rtl; | |||
} | |||
.banner-table-wrap { | |||
position: relative; | |||
border: 1px solid #e0e0e0; | |||
border-radius: 8px; | |||
overflow: hidden; | |||
} | |||
/* تنظیمات ریسپانسیو برای اسکرول افقی در موبایل */ | |||
.banner-table-responsive { | |||
width: 100%; | |||
overflow-x: auto; | |||
-webkit-overflow-scrolling: touch; | |||
} | |||
.banner-table { | |||
width: 100%; | |||
border-collapse: collapse; | |||
text-align: right; | |||
} | |||
.banner-table th, .banner-table td { | |||
padding: 12px 15px; | |||
border-bottom: 1px solid #eee; | |||
font-size: 14px; | |||
} | |||
.banner-table th { | |||
background-color: #f8f9fa; | |||
} | |||
/* --- بخش جادویی: محدود کردن سطرها --- */ | |||
/* حالت پیشفرض: محدود به ارتفاع ۳ سطر */ | |||
.is-collapsed .banner-table-responsive { | |||
max-height: 280px !important; /* این عدد را بسته به فونت خود میتوانید کمی کم یا زیاد کنید */ | |||
overflow: hidden !important; | |||
} | |||
/* ایجاد افکت محو شدن (Gradient) در حالت بسته */ | |||
.is-collapsed .banner-table-wrap::after { | |||
content: ""; | |||
position: absolute; | |||
bottom: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 70px; | |||
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); | |||
pointer-events: none; | |||
z-index: 10; | |||
} | |||
/* دکمه نمایش بیشتر */ | |||
.toggle-container { | |||
text-align: center; | |||
margin-top: 15px; | |||
} | |||
.btn-more { | |||
background-color: #007bff; | |||
color: #fff; | |||
border: none; | |||
padding: 8px 25px; | |||
border-radius: 5px; | |||
cursor: pointer; | |||
font-size: 14px; | |||
transition: 0.3s; | |||
} | |||
.btn-more:hover { | |||
background-color: #0056b3; | |||
} | |||
</style> | |||
<!-- اضافه کردن کلاس is-collapsed به بخش اصلی برای حالت بسته --> | |||
<section class="banner-table-section is-collapsed" id="mainSection"> | |||
<div class="banner-table-wrap"> | <div class="banner-table-wrap"> | ||
<h2 | <h2 class="banner-table-title" style="text-align:center;">انواع مخازن و کاربرد آنها</h2> | ||
<div class="banner-table-responsive"> | <div class="banner-table-responsive"> | ||
<table class="banner-table"> | <table class="banner-table"> | ||
<thead> | <thead> | ||
<tr> | <tr> | ||
<th scope="col">نام یا مدل مخزن</th> | <th scope="col">نام یا مدل مخزن</th> | ||
<th scope="col">ظرفیت و ابعاد | <th scope="col">ظرفیت و ابعاد</th> | ||
<th scope="col">محل پیشنهادی برای نصب</th> | <th scope="col">محل پیشنهادی برای نصب</th> | ||
</tr> | </tr> | ||
</thead> | </thead> | ||
<tbody> | <tbody> | ||
<tr><td>مخزن آب افقی</td> | |||
<td>بدنه کشیده با قطر کم، تمرکز بر توزیع وزن در طول مسیر، پایداری بالا در سطوح گسترده.</td> | |||
<td>فضاهای طولانی و باریک، حیاطهای مستطیلی، یا مسیرهای انتقال آب در سطح زمین</td> | |||
</tr> | |||
<tr> | <tr> | ||
<td>مخزن آب عمودی</td> | |||
<td>اشغال فضای سطحی بسیار کم، تمرکز بر ارتفاع، فشار هیدرولیکی مناسب در ارتفاعهای بالا</td> | |||
<td>پشتبامها، فضاهای باز با محدودیت عرض، یا کنار دیوارها.</td> | |||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td>مخزن کتابی (کمجا)</td> | |||
<td>عرض بسیار کم و طراحی فشرده، طراحی ارگونومیک برای عبور از فضاهای تنگ، بهینهسازی حداکثری فضا.</td> | |||
<td> | <td>فضای بین دیوار و نرده، کنارههای راهروها، یا کنارههای ساختمان</td> | ||
</tr> | |||
<!-- سطرهای اضافی --> | |||
<tr> | |||
<td>مخزن آب زیر پله</td> | |||
<td>طراحی متناسب با شیب و زوایای نامتقارن، استفاده از فضای مرده (Dead Space) زیر سازه.</td> | |||
<td>: زیر پلهها، زیر پلکانهای بیرونی یا در حیاطهای شیبدار.</td> | |||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td> | <td>مخزن قیفی</td> | ||
<td> | <td>طراحی با قاعده جمعشونده، تخلیه کامل و سریع آب بدون باقی ماندن رسوبات در کف.</td> | ||
<td> | <td>سیستمهای تخلیه صنعتی یا مخازنی که نیاز به تخلیه سریع و کامل دارند.</td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td> | <td>مخزن بیضی</td> | ||
<td> | <td>توزیع یکنواخت فشار در بدنه، کاهش تنشهای مکانیکی در دیوارهها، طراحی ارگونومیک و زیبا.</td> | ||
<td> | <td> فضاهای باغی یا محیطهای با طراحی مدرن که نیاز به ظاهری زیباتر از مخازن استاندار دارند.</td> | ||
</tr> | </tr> | ||
<tr> | |||
<td> | <td>مخزن آسان رو</td> | ||
<td>ویژگیها: ارتفاع زیاد با سطح اشغال شده بسیار کم، طراحی عمودی صلب، مناسب برای ایجاد فشار در ارتفاع.</td> | |||
<td> | <td>محل نصب: فضاهای بسیار باریک و بلند، بالای برجها یا در کنار ستونهای ساختمانی.</td> | ||
</tr> | |||
<tr> | |||
<td> مخزن آب مکعبی</td> | |||
<td>ویژگیها: استفاده حداکثری از حجم در یک قالب مشخص، قابلیت چیدمان کنار هم (Stacking) در صورت نیاز.</td> | |||
<td>محل نصب: گوشههای حیاط، داخل انبارهای کوچک یا فضاهایی با خطوط مستقیم و زاویهدار.</td> | |||
</tr> | |||
<tr> | |||
<td>مخزن نیسانی (شبیه به سبد نیسان)</td> | |||
<td>ویژگیها: طراحی خاص با قابلیت حمل آسان، بدنه مقاوم در برابر ضربه و لرزش، توزیع وزن متمرکز.</td> | |||
<td>محل نصب: کاربردهای متحرک، یا مخازنی که نیاز به جابهجایی یا قرارگیری در نقاط دارای لرزش دارند.</td> | |||
</tr> | |||
<tr> | |||
<td>مخزن کروی</td> | |||
<td>ویژگیها: بهترین توزیع فشار در تمام نقاط بدنه، استحکام بسیار بالا در برابر فشار داخلی، کمترین میزان تلفات متریال.</td> | |||
<td>محل نصب: فضاهای صنعتی یا مخازنی که تحت فشار بالا هستند و نیاز به ایمنی حداکثری دارند.</td> | |||
</tr> | </tr> | ||
<tr> | |||
<td>مخزن انبساط</td> | |||
<td>ویژگیها: طراحی مخصوص مدیریت تغییرات حجم سیال، قابلیت جذب فشار ناشی از تغییر دمای آب، محافظت از سیستم لولهکشی.</td> | |||
<td>محل نصب: در کنار پمپها، سیستمهای گرمایشی/سرمایشی و در مسیرهای اصلی لولهکشی ساختمان.</td> | |||
</tr> | |||
</tbody> | </tbody> | ||
</table> | </table> | ||
</div> | </div> | ||
</div> | |||
<div class="toggle-container"> | |||
<button class="btn-more" onclick="handleToggle()" id="actionBtn">مشاهده بقیه جدول</button> | |||
</div> | </div> | ||
</section> | </section> | ||
<script> | |||
function handleToggle() { | |||
const section = document.getElementById('mainSection'); | |||
const btn = document.getElementById('actionBtn'); | |||
if (section.classList.contains('is-collapsed')) { | |||
// باز کردن | |||
section.classList.remove('is-collapsed'); | |||
btn.innerText = 'نمایش کمتر'; | |||
} else { | |||
// بستن | |||
section.classList.add('is-collapsed'); | |||
btn.innerText = 'مشاهده بقیه جدول'; | |||
// اسکرول به بالای جدول برای تجربه بهتر کاربر | |||
section.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |||
} | |||
} | |||
</script> | |||
</html> | </html> | ||
نسخهٔ کنونی تا ۲۶ ژوئیهٔ ۲۰۲۶، ساعت ۱۵:۲۸