Skip to content

Commit 3839b49

Browse files
crystallee-aicrystallee-ai
committed
feat: modification of display method
1 parent 28174c3 commit 3839b49

8 files changed

+559
-878
lines changed

Diff for: ‎components.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ declare module 'vue' {
1212
AModal: typeof import('ant-design-vue/es')['Modal']
1313
ASegmented: typeof import('ant-design-vue/es')['Segmented']
1414
BibTeX: typeof import('./src/components/BibTeX.vue')['default']
15+
DatasetDownload: typeof import('./src/components/DatasetDownload.vue')['default']
1516
FrameworkSection: typeof import('./src/components/FrameworkSection.vue')['default']
1617
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
1718
IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']

Diff for: ‎src/components/AbstractSection.vue

+15-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<section class="abstract">
33
<div>
4-
<h3>{{ title }}</h3>
4+
<h2>{{ title }}</h2>
55
<div v-if="figure" class="figure">
66
<img :src="figure">
77
</div>
@@ -29,8 +29,15 @@ const video = (props.video || "").startsWith("assets") ? new URL(`../${props.vid
2929

3030
<style lang="scss" scoped>
3131
.abstract {
32+
h2 {
33+
// font-family: 'Caveat', cursive;
34+
// font-size: 2.5rem;
35+
margin-top: 0px;
36+
margin-bottom: 70px;
37+
}
3238
div {
33-
max-width: 960px;
39+
max-width: 1400px;
40+
margin-top: 50px;
3441
@apply w-full mt-2;
3542
}
3643
@@ -41,9 +48,15 @@ const video = (props.video || "").startsWith("assets") ? new URL(`../${props.vid
4148
@apply mr-2;
4249
}
4350
}
51+
.figure {
52+
margin-top: 10px;
53+
max-width: 1400px;
54+
margin: 1rem 0;
55+
}
4456
}
4557
4658
.figure {
59+
max-width: 1200px;
4760
margin: 1rem 0;
4861
}
4962

Diff for: ‎src/components/DatasetDownload.vue

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<template>
2+
<section class="dataset-download">
3+
<div>
4+
<h2 class="title">{{ title }}</h2>
5+
6+
7+
<div class="download-section">
8+
<div v-for="(item, index) in datasets" :key="index" class="download-item">
9+
<button class="download-button" @click="handleDownload">
10+
{{ item.name }}
11+
</button>
12+
13+
<span class="download-details">{{ item.details }}</span>
14+
</div>
15+
</div>
16+
17+
<div v-if="updates" class="update-section">
18+
<h3>🔥 Warning ({{ updates.date }})</h3>
19+
<p>
20+
{{ updates.notes }}
21+
<a :href="updates.links.license">Our license</a>.
22+
</p>
23+
<p>
24+
{{ updates.description }}
25+
<a :href="updates.links.details">Fill out the form</a>.
26+
</p>
27+
</div>
28+
29+
</div>
30+
</section>
31+
</template>
32+
33+
<script setup lang="ts">
34+
interface Dataset {
35+
name: string;
36+
details: string;
37+
}
38+
39+
interface Updates {
40+
date: string;
41+
description: string;
42+
links: {
43+
details: string;
44+
license: string;
45+
};
46+
notes: string;
47+
}
48+
49+
interface Props {
50+
title?: string;
51+
datasets?: Dataset[];
52+
updates?: Updates;
53+
}
54+
55+
const { props } = defineProps<{ props: Props }>();
56+
const title = props.title || "Dataset Download";
57+
const datasets = props.datasets || [];
58+
const updates = props.updates || null;
59+
60+
const handleDownload = () => {
61+
window.location.href = 'https://forms.gle/moqec5Qod7mz9pfD6';
62+
};
63+
</script>
64+
65+
<style lang="scss" scoped>
66+
.dataset-download {
67+
text-align: center; /* Ensures entire section is centered */
68+
69+
.title {
70+
margin-bottom: 80px;
71+
// font-family: 'Caveat', cursive;
72+
// font-size: 2.5rem;
73+
margin: 5;
74+
}
75+
76+
.update-section {
77+
margin-top: 30px;
78+
text-align: left;
79+
padding: 20px;
80+
background-color: #f9f9f9;
81+
border: 1px solid #ccc;
82+
border-radius: 5px;
83+
max-width: 1400px;
84+
85+
h3 {
86+
color: #e63946;
87+
}
88+
89+
a {
90+
color: #007BFF;
91+
text-decoration: none;
92+
font-size: 16px;
93+
94+
&:hover {
95+
text-decoration: underline;
96+
}
97+
}
98+
}
99+
100+
.download-section {
101+
display: flex;
102+
flex-direction: column;
103+
align-items: center;
104+
max-width: 1400px;
105+
}
106+
107+
.download-item {
108+
margin-bottom: 15px;
109+
display: flex;
110+
align-items: center;
111+
justify-content: center;
112+
max-width: 1200px;
113+
114+
.download-button {
115+
font-size: 24px;
116+
padding: 10px 20px;
117+
margin-right: 10px;
118+
background-color: #333;
119+
color: #fff;
120+
border: none;
121+
cursor: pointer;
122+
123+
&:hover {
124+
background-color: #555;
125+
}
126+
}
127+
128+
.download-details {
129+
font-size: 24px;
130+
color: #333;
131+
}
132+
133+
}
134+
135+
136+
}
137+
</style>
138+

Diff for: ‎src/components/ImageStack.vue

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<section class="image-stack">
3-
<h3>{{ title }}</h3>
3+
<h2>{{ title }}</h2>
44
<div>
55
<img
66
v-for="(image, index) in images"
@@ -28,15 +28,24 @@ const images = props.imageList || []
2828
</script>
2929

3030
<style lang="scss" scoped>
31+
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');
32+
33+
34+
h2 {
35+
// font-family: 'Caveat', cursive;
36+
margin-top: 0px; /* 减小与视频网格的间距 */
37+
margin-bottom: 0px; /* 减小与视频网格的间距 */
38+
}
39+
3140
.image-stack {
3241
div {
33-
max-width: 960px;
42+
max-width: 1400px;
3443
@apply w-full mt-2;
3544
}
3645
}
3746
3847
img {
39-
margin: 1rem 0;
48+
margin: 2rem 0;
4049
}
4150
4251
</style>

0 commit comments

Comments
 (0)