Hugging Face's logo

Spaces:
TheFinAI
/
Agent-Market-Arena
Running

App Files Community
Jimin Huang commited on
Commit
b0b85c6
·
1 Parent(s): 1a114d3

Change settings

Browse files
Files changed (1) hide show
  1. src/components/FooterOpen.vue +110 -62
src/components/FooterOpen.vue CHANGED
@@ -1,89 +1,137 @@
1
  <template>
2
- <div class="page-header">
3
- <div class="logos-container">
4
- <span class="collaborators-text">Collaborators:</span>
 
 
 
5
  </div>
 
6
  </div>
 
 
 
 
 
 
 
 
 
 
7
  </template>
8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  <style scoped>
10
- .page-header {
11
- position: fixed;
12
- bottom: 0;
13
- left: 0;
14
- right: 0;
15
- display: flex;
16
- flex-direction: row;
17
- align-items: center;
18
- justify-content: center;
19
- gap: 0.5rem;
20
- padding: 0.75rem 1rem;
21
- background: linear-gradient(135deg, #f8f9fb 0%, #ffffff 100%);
22
- border-top: 1px solid #e5e7eb;
23
- z-index: 100;
24
  }
25
 
26
- .logos-container {
27
- display: flex;
28
- align-items: center;
29
- justify-content: center;
30
- gap: 1rem;
31
- flex-wrap: wrap;
32
- margin: 0;
33
  }
34
 
35
- .collaborators-text {
36
- color: #6b7280;
37
- font-size: 0.95rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  }
39
 
40
  .logo-item {
41
- flex-shrink: 0;
42
- width: 67px;
43
- height: 23px;
44
- display: flex;
45
- align-items: center;
46
- justify-content: center;
47
- padding: 0.15rem;
48
- transition: transform 0.2s ease;
49
  }
50
 
51
  .logo-item:hover {
52
- transform: translateY(-2px);
53
  }
54
 
55
  .logo-image {
56
- max-width: 100%;
57
- max-height: 100%;
58
- object-fit: contain;
59
- filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
60
  }
61
 
62
- /* 响应式设计 */
63
  @media (max-width: 768px) {
64
- .page-header {
65
- padding: 0.5rem 0.75rem;
66
- gap: 0.35rem;
67
- }
68
-
69
- .logos-container {
70
- gap: 0.75rem;
71
- }
72
-
73
- .logo-item {
74
- width: 54px;
75
- height: 20px;
76
- }
77
  }
78
 
79
  @media (max-width: 480px) {
80
- .logos-container {
81
- gap: 0.5rem;
82
- }
83
-
84
- .logo-item {
85
- width: 47px;
86
- height: 17px;
87
- }
 
 
 
 
88
  }
89
  </style>
 
1
  <template>
2
+ <footer class="page-footer">
3
+ <div class="footer-section">
4
+ <span class="footer-label">Presented By:</span>
5
+ <div class="logos-row">
6
+ <div v-for="(logo, i) in presentedBy" :key="'p-' + i" class="logo-item">
7
+ <img :src="logo.src" :alt="logo.name" class="logo-image" />
8
  </div>
9
+ </div>
10
  </div>
11
+
12
+ <div class="footer-section">
13
+ <span class="footer-label">Academic Collaborators:</span>
14
+ <div class="logos-row">
15
+ <div v-for="(logo, i) in collaborators" :key="'c-' + i" class="logo-item">
16
+ <img :src="logo.src" :alt="logo.name" class="logo-image" />
17
+ </div>
18
+ </div>
19
+ </div>
20
+ </footer>
21
  </template>
22
 
23
+ <script>
24
+ export default {
25
+ name: "PageFooter",
26
+ data() {
27
+ return {
28
+ presentedBy: [
29
+ { name: "DeepKin", src: new URL("../assets/images/companies_images/deepkin_logo.png", import.meta.url).href },
30
+ { name: "The Fin AI", src: new URL("../assets/images/companies_images/logofinai.png", import.meta.url).href },
31
+ { name: "NaCTeM", src: new URL("../assets/images/companies_images/nactemlogo.png", import.meta.url).href },
32
+ { name: "PAAL AI", src: new URL("../assets/images/companies_images/paalai_logo.png", import.meta.url).href },
33
+ ],
34
+ collaborators: [
35
+ { name: "Stevens Institute of Technology", src: new URL("../assets/images/universities/stevens.png", import.meta.url).href },
36
+ { name: "University of Florida", src: new URL("../assets/images/universities/florida.png", import.meta.url).href },
37
+ { name: "Columbia University", src: new URL("../assets/images/universities/columbia.png", import.meta.url).href },
38
+ { name: "Harvard University", src: new URL("../assets/images/universities/harvard.png", import.meta.url).href },
39
+ { name: "Université de Montréal", src: new URL("../assets/images/universities/montreal.png", import.meta.url).href },
40
+ ],
41
+ };
42
+ },
43
+ };
44
+ </script>
45
+
46
  <style scoped>
47
+ .page-footer {
48
+ position: fixed;
49
+ bottom: 0;
50
+ left: 0;
51
+ right: 0;
52
+ display: flex;
53
+ flex-direction: column;
54
+ align-items: center;
55
+ gap: 0.75rem;
56
+ padding: 1rem 1.5rem;
57
+ background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
58
+ border-top: 2px solid rgba(0, 0, 0, 0.05);
59
+ z-index: 100;
60
+ backdrop-filter: blur(6px);
61
  }
62
 
63
+ .footer-section {
64
+ text-align: center;
65
+ display: flex;
66
+ flex-direction: column;
67
+ align-items: center;
68
+ gap: 0.4rem;
 
69
  }
70
 
71
+ .footer-label {
72
+ font-weight: 700;
73
+ font-size: 0.9rem;
74
+ text-transform: uppercase;
75
+ letter-spacing: 0.04em;
76
+ background: linear-gradient(90deg, rgb(0, 0, 185), rgb(240, 0, 15));
77
+ -webkit-background-clip: text;
78
+ color: transparent;
79
+ }
80
+
81
+ .logos-row {
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: center;
85
+ gap: 1.25rem;
86
+ flex-wrap: wrap;
87
+ margin-top: 0.25rem;
88
  }
89
 
90
  .logo-item {
91
+ width: 72px;
92
+ height: 26px;
93
+ display: flex;
94
+ align-items: center;
95
+ justify-content: center;
96
+ transition: transform 0.25s ease;
 
 
97
  }
98
 
99
  .logo-item:hover {
100
+ transform: translateY(-2px) scale(1.03);
101
  }
102
 
103
  .logo-image {
104
+ max-width: 100%;
105
+ max-height: 100%;
106
+ object-fit: contain;
107
+ filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
108
  }
109
 
110
+ /* Responsive */
111
  @media (max-width: 768px) {
112
+ .page-footer {
113
+ padding: 0.75rem 1rem;
114
+ gap: 0.5rem;
115
+ }
116
+
117
+ .logo-item {
118
+ width: 60px;
119
+ height: 20px;
120
+ }
 
 
 
 
121
  }
122
 
123
  @media (max-width: 480px) {
124
+ .footer-label {
125
+ font-size: 0.8rem;
126
+ }
127
+
128
+ .logos-row {
129
+ gap: 0.75rem;
130
+ }
131
+
132
+ .logo-item {
133
+ width: 52px;
134
+ height: 18px;
135
+ }
136
  }
137
  </style>