fiee-official-website/src/views/events-calendar/size375/index.vue

<template>
  <div class="events-calendar-page">
    <customDefaultPage>
      <template #content>
        <main class="p-[35px] max-w-[1800px] mx-auto">
          <div class="title mb-[20px]">
            {{ t("events_calendar.title") }}
          </div>
          <div class="search-container">
            <n-date-picker
              v-model:value="state.selectedDateValue"
              type="date"
              class="search-date-picker"
            ></n-date-picker>
            <n-button @click="handleSearch" class="search-button">
              {{ t("events_calendar.search.button") }}
            </n-button>
          </div>
        </main>
      </template>
    </customDefaultPage>
  </div>
</template>

<script setup>
import customDefaultPage from "@/components/customDefaultPage/index.vue";
import { reactive } from "vue";
import { NDatePicker, NButton } from "naive-ui";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const state = reactive({
  selectedDateValue: null, //选中值
});

const handleSearch = () => {
  // 搜索处理逻辑
  // console.log('搜索:', state.selectedDateValue)
};
</script>

<style scoped lang="scss">
.title {
  font-size: 113px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-top: 8px;
}

.search-container {
  margin-bottom: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #f6f7f9;
  border-radius: 8px;
  padding: 8px;
  gap: 16px;
}

.search-date-picker {
  width: 100%;
}

:deep(.n-date-picker) {
  width: 100%;
  .n-input__input {
    padding: 4px 0;
    border-radius: 4px;
  }
}

:deep(.n-button) {
  width: 260px;
  padding: 20px 16px;
  border-radius: 4px;
}
.search-button {
  background: #ff7bac;
  color: #fff;
  &:hover {
    background: #ff7bac;
    color: #fff;
  }
}
</style>