fix events-calendar 768
This commit is contained in:
yuanshan
parent
51d2364e38
commit
000b23f4a8
@ -5,7 +5,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import size375 from "@/views/events-calendar/size375/index.vue";
|
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 size1440 from "@/views/events-calendar/size1440/index.vue";
|
||||||
import size1920 from "@/views/events-calendar/size1920/index.vue";
|
import size1920 from "@/views/events-calendar/size1920/index.vue";
|
||||||
import { computed } from "vue";
|
import { computed } from "vue";
|
||||||
|
|||||||
@ -79,7 +79,7 @@
|
|||||||
<!-- 背景图片区域 -->
|
<!-- 背景图片区域 -->
|
||||||
<div class="background-image-container">
|
<div class="background-image-container">
|
||||||
<img
|
<img
|
||||||
src="@/assets/image/1920/events-calendar-bg.png"
|
src="@/assets/image/1440/events-calendar-bg.png"
|
||||||
alt="Events Calendar Background"
|
alt="Events Calendar Background"
|
||||||
class="background-image"
|
class="background-image"
|
||||||
/>
|
/>
|
||||||
|
|||||||
218
src/views/events-calendar/size768/index.vue
Normal file
218
src/views/events-calendar/size768/index.vue
Normal file
@ -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>
|
||||||
Loading…
Reference in New Issue
Block a user