From 000b23f4a84dd5cdc40e0c5256ec78204a433e68 Mon Sep 17 00:00:00 2001
From: yuanshan <42023847+piercezzs@users.noreply.github.com>
Date: Sat, 11 Oct 2025 10:40:57 +0800
Subject: [PATCH] fix events-calendar 768

---
 src/views/events-calendar/index.vue          |   2 +-
 src/views/events-calendar/size1440/index.vue |   2 +-
 src/views/events-calendar/size768/index.vue  | 218 +++++++++++++++++++
 3 files changed, 220 insertions(+), 2 deletions(-)
 create mode 100644 src/views/events-calendar/size768/index.vue

diff --git a/src/views/events-calendar/index.vue b/src/views/events-calendar/index.vue
index 5ee0c3e..d9baa07 100644
--- a/src/views/events-calendar/index.vue
+++ b/src/views/events-calendar/index.vue
@@ -5,7 +5,7 @@
 </template>
 <script setup>
 import size375 from "@/views/events-calendar/size375/index.vue";
-import size768 from "@/views/events-calendar/size375/index.vue";
+import size768 from "@/views/events-calendar/size768/index.vue";
 import size1440 from "@/views/events-calendar/size1440/index.vue";
 import size1920 from "@/views/events-calendar/size1920/index.vue";
 import { computed } from "vue";
diff --git a/src/views/events-calendar/size1440/index.vue b/src/views/events-calendar/size1440/index.vue
index 7ff80fe..5a8c9a0 100644
--- a/src/views/events-calendar/size1440/index.vue
+++ b/src/views/events-calendar/size1440/index.vue
@@ -79,7 +79,7 @@
         <!-- 背景图片区域 -->
         <div class="background-image-container">
           <img
-            src="@/assets/image/1920/events-calendar-bg.png"
+            src="@/assets/image/1440/events-calendar-bg.png"
             alt="Events Calendar Background"
             class="background-image"
           />
diff --git a/src/views/events-calendar/size768/index.vue b/src/views/events-calendar/size768/index.vue
new file mode 100644
index 0000000..3ae3f46
--- /dev/null
+++ b/src/views/events-calendar/size768/index.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="events-calendar-page">
+    <main class="page-container">
+      <div class="events-container">
+        <!-- 标题区域 -->
+        <div class="title-section">
+          <div class="title-decoration"></div>
+          <div class="events-title">
+            {{ t("events_calendar.title") }}
+          </div>
+        </div>
+
+        <!-- 搜索区域 -->
+        <div class="search-container">
+          <div class="date-picker-wrapper">
+            <n-date-picker
+              v-model:value="state.selectedDateValue"
+              type="date"
+              class="search-date-picker"
+              placeholder="Select Date"
+            >
+              <template #prefix>
+                <svg
+                  class="calendar-icon"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                >
+                  <g clip-path="url(#clip0_134_3094)">
+                    <path
+                      d="M17.5 3.33398H2.5C2.08333 3.33398 1.66667 3.66732 1.66667 4.08398V17.5007C1.66667 17.9173 2.08333 18.2507 2.5 18.2507H17.5C17.9167 18.2507 18.3333 17.9173 18.3333 17.5007V4.08398C18.3333 3.66732 17.9167 3.33398 17.5 3.33398Z"
+                      stroke="#78777B"
+                      stroke-width="1.25"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    ></path>
+                    <path
+                      d="M13.3333 1.66602V5.00018"
+                      stroke="#78777B"
+                      stroke-width="1.25"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    ></path>
+                    <path
+                      d="M6.66669 1.66602V5.00018"
+                      stroke="#78777B"
+                      stroke-width="1.25"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    ></path>
+                    <path
+                      d="M1.66669 8.33398H18.3334"
+                      stroke="#78777B"
+                      stroke-width="1.25"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    ></path>
+                  </g>
+                  <defs>
+                    <clipPath id="clip0_134_3094">
+                      <rect
+                        width="20"
+                        height="20"
+                        fill="white"
+                        transform="translate(0 0.000976562)"
+                      ></rect>
+                    </clipPath>
+                  </defs>
+                </svg>
+              </template>
+            </n-date-picker>
+          </div>
+          <button @click="handleSearch" class="search-button">
+            {{ t("events_calendar.search.button") }}
+          </button>
+        </div>
+
+        <!-- 背景图片区域 -->
+        <div class="background-image-container">
+          <img
+            src="@/assets/image/768/events-calendar-bg.png"
+            alt="Events Calendar Background"
+            class="background-image"
+          />
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+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">
+.page-container {
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.events-container {
+  width: 650 * 2.5px;
+  margin: 0 auto;
+}
+
+.title-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16 * 2.5px;
+  margin-bottom: 32 * 2.5px;
+  padding: 0 16 * 2.5px;
+}
+
+.title-decoration {
+  width: 58 * 2.5px;
+  height: 7 * 2.5px;
+  background: #ff7bac;
+  margin: auto 0;
+  margin-top: 43 * 2.5px;
+}
+
+.events-title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 32 * 2.5px;
+  line-height: 1.4em;
+  letter-spacing: 0.03em;
+  color: #000000;
+}
+
+.search-container {
+  margin-bottom: 20 * 2.5px;
+  display: flex;
+  align-items: center;
+  gap: 16 * 2.5px;
+  padding: 0 16 * 2.5px;
+}
+
+.date-picker-wrapper {
+  flex: 1;
+  position: relative;
+}
+
+.search-date-picker {
+  width: 100%;
+}
+
+:deep(.n-input) {
+  height: 34 * 2.5px;
+  border-radius: 3 * 2.5px;
+  border: 1 * 2.5px solid #e0e0e6;
+  &:hover {
+    border-color: #ff7bac;
+  }
+}
+:deep(.n-input--focus) {
+  border-color: #ff7bac;
+  box-shadow: 0 0 0 2px rgba(255, 123, 172, 0.2);
+}
+
+.calendar-icon {
+  margin-left: 12 * 2.5px;
+}
+
+.search-button {
+  height: 34 * 2.5px;
+  padding: 7 * 2.5px 12 * 2.5px;
+  color: #fff;
+  background-color: #ff7bac;
+  border: none;
+  border-radius: 3 * 2.5px;
+  cursor: pointer;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.375em;
+  letter-spacing: 0.03em;
+  min-width: 160 * 2.5px;
+
+  &:hover {
+    background-color: #e66f9a;
+  }
+}
+
+.background-image-container {
+  background: #fff;
+  width: 100%;
+  height: 511 * 2.5px;
+  margin-top: 20 * 2.5px;
+  box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
+  border-radius: 16 * 2.5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.background-image {
+  width: 300 * 2.5px;
+  height: 170 * 2.5px;
+  flex-shrink: 0;
+  aspect-ratio: 83/47;
+}
+</style>