aida_front/src/views/AwardPage/index.vue

<template>
  <div class="award-page">
    <div class="header flex align-center space-between">
      <div class="header-left">
        <img src="@/assets/images/award/code_create_logo.png" class="logo" />
      </div>
      <div class="header-right flex align-center">
        <div class="text">Submit your Application</div>
        <img src="@/assets/images/award/arrow.png" alt="" class="arrow" />
      </div>
    </div>
    <div class="banner"></div>
    <div class="blocks-list flex">
      <div
        class="block-item flex flex-col flex-center"
        v-for="item in blocksList"
        :key="item.number"
      >
        <div class="number">{{ item.number }}</div>
        <div class="label">{{ item.label }}</div>
        <div class="line"></div>
      </div>
      <div class="block-item flex flex-col flex-center">
        <div class="number">
          <img src="@/assets/images/award/∞.png" alt="" class="infinity" />
        </div>
        <div class="label">Possibilites</div>
      </div>
    </div>
    <div class="bloom flex flex-col align-center">
      <div class="title">Bloom Your Creativity</div>
      <img src="@/assets/images/award/bloom_logo.png" class="logo" />
      <div class="season">Theme of 2026</div>
      <div class="desc">
        Where imagination meets innovation, creativity blooms. This theme celebrates AI as
        a catalyst for fashion design, allowing your vision to flourish beyond traditional
        boundaries. Let your ideas blossom into extraordinary designs that merge human
        artistry with artificial intelligence.
      </div>
    </div>
    <div class="design-container">
      <div class="design-title limit">Design Without Borders</div>
      <div class="limit">
        <img src="@/assets/images/award/bloom_logo.png" class="logo" />
      </div>
      <div class="global limit">Global Opportunity</div>
      <div class="desc">
        Open to visionary designers across the globe. From Seoul to Singapore, New York to
        Shanghai, we're seeking the next generation of fashion innovators who dare to
        reimagine the future of design.
      </div>
    </div>
    <div class="timeline-container flex flex-col align-center">
      <!-- <img src="@/assets/images/award/timeline_line.png" class="timeline" /> -->
      <div class="timeline-title">Competition Timeline</div>
      <img src="@/assets/images/award/bloom_logo.png" alt="" class="logo" />
      <div class="desc">Shaping the Future</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const blocksList = ref([
  {
    number: '100',
    label: 'Semi-finalists'
  },
  {
    number: '20',
    label: 'Finalists'
  },
  {
    number: '3',
    label: 'Winners'
  }
])
</script>

<style lang="less" scoped>
.award-page {
  overflow: auto;
  height: 100vh;
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-center {
  justify-content: center;
  align-items: center;
}
.align-center {
  align-items: center;
}
.space-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.header {
  height: 8rem;
  background-color: #232323;
  padding-left: 21.5rem;
  padding-right: 8.6rem;
  .header-left {
    .logo {
      width: 13rem;
      height: 5rem;
    }
  }
  .header-right {
    column-gap: 1rem;
    .text {
      font-size: 1.6rem;
      color: #fff;
    }
    .arrow {
      width: 2.4rem;
      height: 2.4rem;
    }
  }
}
.logo {
  width: 2.4rem;
  height: 2.4rem;
}
.banner {
  height: 100rem;
  background-color: violet;
}
.blocks-list {
  height: 31.4rem;
  background: linear-gradient(98.55deg, #232323 18.22%, #898989 101.1%);

  .block-item {
    flex: 1;
    height: 100%;
    color: #fff;
    position: relative;
    .number {
      font-size: 6rem;
      font-family: 'Poppins';
    }
    .label {
      font-size: 2.8rem;
      font-family: 'Arial';
      letter-spacing: 0.05em;
    }
    .line {
      position: absolute;
      bottom: 50%;
      right: 0;
      transform: translate(0, 50%);
      width: 0.1rem;
      height: 27.4rem;
      background-color: #8d8d8d;
    }
  }
}
.bloom {
  height: 97rem;
  padding-top: 12.8rem;
  font-family: 'Poppins';
  background: url('@/assets/images/award/bloom_bg.png') no-repeat;
  background-size: 100% 100%;
  .title {
    font-size: 4rem;
    color: #232323;
    margin-bottom: 2.4rem;
  }
  .logo {
    margin-bottom: 2.2rem;
  }
  .season {
    font-size: 3rem;
    color: #c7342c;
    margin-bottom: 6.6rem;
  }
  .desc {
    font-family: 'Arial';
    font-size: 2.8rem;
    color: #585858;
    text-align: center;
    padding: 0 21.5rem;
    line-height: 4.5rem;
    margin-bottom: 12.3rem;
  }
}
.design-container {
  height: 97rem;
  background: url('@/assets/images/award/design_bg.png') no-repeat;
  background-size: 100% 100%;
  padding-left: 21.5rem;
  padding-top: 16rem;
  .limit {
    width: 48.4rem;
    text-align: center;
  }
  .design-title {
    color: #fff;
    font-size: 4rem;
    font-weight: 600;
    font-family: 'Poppins';
    font-style: SemiBold;
    vertical-align: middle;
    text-transform: capitalize;
  }
  .logo {
    margin-top: 2.4rem;
    margin-bottom: 2.1rem;
  }
  .global {
    font-family: 'Poppins';
    font-size: 3rem;
    color: #f95750;
    margin-bottom: 19.8rem;
  }
  .desc {
    font-family: 'Arial';
    font-weight: 400;
    font-size: 2.8rem;
    color: #e0e0e0;
    width: 54rem;
  }
}
.timeline-container {
  height: 97rem;
  background: url('@/assets/images/award/timeline_bg.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  padding-top: 12.8rem;
  // .timeline {
  //   width: 148.7rem;
  //   height: 27.58rem;
  // }
  .logo {
    margin: 2.4rem 0 2.2rem 0;
  }
  .desc {
    font-family: 'Arial';
    font-size: 3rem;
    font-weight: 400;
    color: #b10000;
  }
}
</style>