បញ្ជីកាត

សម្រាប់បញ្ជីដែលរូបថតជាអ្នកសម្រេច — បន្ទប់ ទំនិញប្រើរួច ការងារ។

មើលជាមុនផ្ទាល់

ប្រភព

HTML CSS

<ul class="dc-clist">
  <li class="dc-clist__item">
    <a class="dc-clist__card" href="#">
      <span class="dc-clist__thumb" aria-hidden="true"></span>
      <span class="dc-clist__body">
        <span class="dc-clist__tag">당일지급</span>
        <span class="dc-clist__title">인천 남동공단 상하차 보조</span>
        <span class="dc-clist__meta">남동구 고잔동 · 오전 7시</span>
        <span class="dc-clist__value">일급 140,000원</span>
      </span>
    </a>
  </li>
  <li class="dc-clist__item">
    <a class="dc-clist__card" href="#">
      <span class="dc-clist__thumb" aria-hidden="true"></span>
      <span class="dc-clist__body">
        <span class="dc-clist__tag">주말만</span>
        <span class="dc-clist__title">시흥 정왕동 아파트 내부 정리</span>
        <span class="dc-clist__meta">시흥시 정왕동 · 오전 8시</span>
        <span class="dc-clist__value">일급 120,000원</span>
      </span>
    </a>
  </li>
  <li class="dc-clist__item">
    <a class="dc-clist__card" href="#">
      <span class="dc-clist__thumb" aria-hidden="true"></span>
      <span class="dc-clist__body">
        <span class="dc-clist__tag">초보가능</span>
        <span class="dc-clist__title">안산 원곡동 식품공장 포장</span>
        <span class="dc-clist__meta">안산시 원곡동 · 오후 2시</span>
        <span class="dc-clist__value">시급 11,500원</span>
      </span>
    </a>
  </li>
</ul>

.dc-clist {
  display: flex; flex-direction: column; gap: var(--dc-3);
  margin: 0; padding: var(--dc-4); list-style: none;
  background: var(--dc-bg);
  font-family: var(--dc-font);
}
.dc-clist__item { min-width: 0; }
.dc-clist__card {
  display: flex; gap: var(--dc-3);
  height: 100%; padding: var(--dc-3);
  background: var(--dc-surface);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-r-md);
  box-shadow: var(--dc-sh-1);
  color: inherit; text-decoration: none;
  transition: border-color var(--dc-fast), transform var(--dc-fast);
}
.dc-clist__card:active { transform: scale(.99); border-color: var(--dc-line-bold); }
.dc-clist__thumb {
  flex: 0 0 92px; align-self: stretch; min-height: 92px;
  border-radius: var(--dc-r-sm);
  background: linear-gradient(135deg, var(--dc-brand-soft), var(--dc-sunken));
}
.dc-clist__body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: var(--dc-1);
}
.dc-clist__tag {
  align-self: flex-start;
  padding: 2px var(--dc-2); border-radius: var(--dc-r-full);
  background: var(--dc-ok-soft); color: var(--dc-ok);
  font-size: 11px; font-weight: 700;
}
.dc-clist__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px; font-weight: 700; line-height: 1.4;
  color: var(--dc-text);
}
.dc-clist__meta {
  font-size: 12px; color: var(--dc-text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-clist__value {
  margin-top: auto; padding-top: var(--dc-1);
  font-size: 14px; font-weight: 700; color: var(--dc-text);
}
.dc-clist--grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dc-clist--grid .dc-clist__card { flex-direction: column; }
.dc-clist--grid .dc-clist__thumb { flex: none; min-height: 0; aspect-ratio: 4 / 3; }
.dc-clist--compact .dc-clist__thumb { flex: 0 0 64px; min-height: 64px; }
.dc-clist--compact .dc-clist__title { -webkit-line-clamp: 1; }

របៀបប្រើ

កាតមួយមានតែបួនយ៉ាង៖ រូបថត ចំណងជើង តម្លៃ ស្លាក
ទុកតម្លៃ (ថ្លៃ ប្រាក់ឈ្នួលថ្ងៃ) នៅកន្លែងដូចគ្នា ដើម្បីអានតាមជួរឈរបាន
កំណត់កម្ពស់ឲ្យឃើញប្រហែលបីកាតក្នុងអេក្រង់មួយ

ចំណុចត្រូវប្រុងប្រយ័ត្ន

ទុកកន្លែងរូបថតជានិច្ច ទោះគ្មានរូប ដើម្បីកុំឲ្យបញ្ជីរញ៉េរញ៉ៃ
ក្នុងក្រឡាចត្រង្គពីរជួរ កាត់ចំណងជើងឲ្យនៅពីរបន្ទាត់

បន្ទាប់

ជួរបញ្ជី ការបង្ហាញព័ត៌មាន កម្មវិធី

បញ្ជីការកំណត់ ការបង្ហាញព័ត៌មាន កម្មវិធី

សារពពុះ ការបង្ហាញព័ត៌មាន កម្មវិធី

ជួរការជូនដំណឹង ការបង្ហាញព័ត៌មាន កម្មវិធី