查看“︁模板:生物联赛倒计时”︁的源代码

<includeonly>
<div class="biology-olympiad-countdown">
  <div class="countdown-header">
    <div class="dna-icon">🧬</div>
    <h3>全国中学生生物学联赛倒计时</h3>
  </div>
  
  <div class="countdown-content">
    <div class="countdown-text">
      距离{{{text|全国中学生生物学联赛}}}还有
    </div>
    
    <div class="countdown-timer">
      {{#if: {{{time|}}} | 
        {{#switch: {{{time}}}
          | day = <span class="countdown-number">{{#expr: floor( ( {{#time: U | {{#invoke:BiologyOlympiadDates|getNextDate}} }} - {{#time: U}} ) / 86400 ) }}</span><span class="countdown-unit">天</span>
          | hour = <span class="countdown-number">{{#expr: floor( ( {{#time: U | {{#invoke:BiologyOlympiadDates|getNextDate}} }} - {{#time: U}} ) / 3600 ) }}</span><span class="countdown-unit">小时</span>
          | minute = <span class="countdown-number">{{#expr: floor( ( {{#time: U | {{#invoke:BiologyOlympiadDates|getNextDate}} }} - {{#time: U}} ) / 60 ) }}</span><span class="countdown-unit">分钟</span>
          | second = <span class="countdown-number">{{#expr: ( {{#time: U | {{#invoke:BiologyOlympiadDates|getNextDate}} }} - {{#time: U}} ) }}</span><span class="countdown-unit">秒</span>
        }}
      | <span class="countdown-number">{{#expr: floor( ( {{#time: U | {{#invoke:BiologyOlympiadDates|getNextDate}} }} - {{#time: U}} ) / 86400 ) }}</span><span class="countdown-unit">天</span>
      }}
    </div>
    
    <div class="countdown-date">
      下一届联赛日期: {{#invoke:BiologyOlympiadDates|getNextDate}}
    </div>
  </div>
  
  <div class="countdown-footer">
    <small>全国中学生生物学竞赛委员会</small>
  </div>
</div>

<style>
.biology-olympiad-countdown {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid #81c784;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  max-width: 400px;
  margin: 10px auto;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.biology-olympiad-countdown::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4caf50, #8bc34a, #cddc39);
}

.countdown-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.dna-icon {
  font-size: 28px;
  margin-right: 10px;
}

.countdown-header h3 {
  margin: 0;
  color: #2e7d32;
  font-size: 18px;
  font-weight: 600;
}

.countdown-content {
  margin: 15px 0;
}

.countdown-text {
  color: #388e3c;
  font-size: 16px;
  margin-bottom: 10px;
}

.countdown-timer {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin: 15px 0;
}

.countdown-number {
  font-size: 36px;
  font-weight: bold;
  color: #d32f2f;
  margin: 0 5px;
  animation: pulse 2s infinite;
}

.countdown-unit {
  font-size: 18px;
  color: #555;
  margin-left: 5px;
}

.countdown-date {
  color: #689f38;
  font-size: 14px;
  margin-top: 10px;
  font-style: italic;
}

.countdown-footer {
  border-top: 1px solid #a5d6a7;
  padding-top: 10px;
  margin-top: 15px;
}

.countdown-footer small {
  color: #78909c;
  font-size: 12px;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@media (max-width: 480px) {
  .biology-olympiad-countdown {
    padding: 15px;
    margin: 10px;
  }
  
  .countdown-number {
    font-size: 28px;
  }
  
  .countdown-header h3 {
    font-size: 16px;
  }
}
</style>
</includeonly>

<noinclude>
{{documentation}}
</noinclude>