Skip to content

Commit a6fe95a

Browse files
TiAmo-codeTiAmo-code
committed
1 parent b7f0939 commit a6fe95a

6 files changed

Lines changed: 515 additions & 2 deletions

File tree

‎src/assets/css/emotion/emotion-mobile.less‎

Lines changed: 278 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,278 @@
1+
@black5: rgba(28, 28, 28, 0.05);
2+
@black5-dark: rgba(255, 255, 255, 0.05);
3+
@black20: rgba(28, 28, 28, 0.2);
4+
@black20-dark: rgba(255, 255, 255, 0.2);
5+
@black40: rgba(28, 28, 28, 0.4);
6+
@black40-dark: rgba(255, 255, 255, 0.4);
7+
@black80: rgba(28, 28, 28, 0.8);
8+
@black80-dark: rgba(255, 255, 255, 0.8);
9+
10+
@brand2: #24292e;
11+
@brand3: #fedaa3;
12+
@brand4: #fff;
13+
@brand4-dark: #282828;
14+
15+
.v-emotion {
16+
height: 100vh;
17+
display: flex;
18+
flex-direction: column;
19+
background-color: #f5f5f5;
20+
&::before {
21+
content: "";
22+
display: block;
23+
position: fixed;
24+
z-index: 1;
25+
top: 0;
26+
left: 0;
27+
right: 0;
28+
height: 4.75rem;
29+
background: linear-gradient(180deg, #fafafa 0%, rgba(250, 250, 250, 0) 100%);
30+
}
31+
.m-chat-container {
32+
flex: 1;
33+
overflow-y: auto;
34+
padding: 1.25rem;
35+
padding-bottom: 0;
36+
.m-chat-list {
37+
.m-chat-item {
38+
padding: 1.25rem 0;
39+
.m-message {
40+
display: flex;
41+
align-items: flex-start;
42+
43+
.m-avatar {
44+
.u-avatar {
45+
width: 2.5rem;
46+
height: 2.5rem;
47+
border-radius: 50%;
48+
flex-shrink: 0;
49+
background-size: cover;
50+
background-position: center;
51+
}
52+
}
53+
54+
.m-content {
55+
flex: 1;
56+
padding-left: 0.75rem;
57+
max-width: calc(100% - 2.5rem);
58+
box-sizing: border-box;
59+
60+
.m-header {
61+
display: flex;
62+
align-items: center;
63+
64+
.u-author {
65+
font-size: 0.75rem;
66+
line-height: 1.125rem;
67+
color: @black40;
68+
}
69+
}
70+
71+
.m-body {
72+
position: relative;
73+
margin-top: 0.5rem;
74+
.u-img {
75+
border-radius: 0.5rem;
76+
display: block;
77+
max-width: 12.5rem;
78+
}
79+
}
80+
}
81+
}
82+
}
83+
.u-chat-date {
84+
color: @black20;
85+
font-size: 0.875rem;
86+
line-height: 1.25rem;
87+
text-align: center;
88+
padding: 0.5rem 0;
89+
}
90+
}
91+
}
92+
.m-send {
93+
background-color: @brand4;
94+
padding: 0.75rem;
95+
padding-bottom: calc(2.5rem + env(safe-area-inset-bottom));
96+
.m-robot {
97+
display: flex;
98+
align-items: center;
99+
justify-content: center;
100+
gap: 0.5rem;
101+
background-color: @black5;
102+
border-radius: 0.75rem;
103+
padding: 0.5rem 0;
104+
.u-icon {
105+
width: 1.125rem;
106+
fill: #1c1c1c;
107+
fill-opacity: 0.4;
108+
}
109+
.u-tip {
110+
color: @black40;
111+
font-size: 0.875rem;
112+
font-weight: bold;
113+
}
114+
}
115+
.m-input-container {
116+
display: flex;
117+
align-items: center;
118+
119+
.c-comment-emotion {
120+
line-height: 1;
121+
padding: 0 0.75rem;
122+
}
123+
.u-btn {
124+
flex-shrink: 0;
125+
background-color: @brand3;
126+
border-radius: 0.75rem;
127+
text-align: center;
128+
padding: 0.25rem 0.75rem;
129+
color: @brand2;
130+
font-size: 0.75rem;
131+
transition: 0.2s all;
132+
133+
&.disabled {
134+
opacity: 0.7;
135+
}
136+
}
137+
}
138+
.m-emotion-container {
139+
max-height: 0;
140+
overflow: hidden;
141+
transition: 0.2s all;
142+
&.show {
143+
max-height: 300px;
144+
}
145+
}
146+
}
147+
.m-filter-drawer {
148+
background-color: #24292e;
149+
box-shadow: none;
150+
border-radius: 1.25rem 1.25rem 0 0;
151+
padding: 1.25rem 0.75rem calc(2.5rem + env(safe-area-inset-bottom));
152+
height: auto !important;
153+
.el-drawer__header {
154+
display: none;
155+
}
156+
157+
.normal {
158+
background-color: rgba(255, 255, 255, 0.1);
159+
color: rgba(255, 255, 255, 0.4);
160+
border-radius: 0.5rem;
161+
font-weight: bold;
162+
font-size: 1rem;
163+
}
164+
.active {
165+
background-color: @brand3 !important;
166+
color: @brand2 !important;
167+
}
168+
.m-filter-all {
169+
line-height: 3.75rem;
170+
text-align: center;
171+
.normal();
172+
}
173+
.m-filter-group {
174+
display: flex;
175+
gap: 0.75rem;
176+
flex-wrap: wrap;
177+
max-height: 10rem;
178+
overflow-y: scroll;
179+
margin-top: 1.25rem;
180+
.m-filter-item {
181+
.normal();
182+
padding: 1rem 0;
183+
width: calc(25% - 0.563rem);
184+
display: flex;
185+
flex-direction: column;
186+
gap: 0.5rem;
187+
align-items: center;
188+
.u-icon {
189+
width: 3.75rem;
190+
}
191+
}
192+
}
193+
.m-filter-btn {
194+
display: flex;
195+
gap: 1.25rem;
196+
line-height: 3rem;
197+
text-align: center;
198+
margin-top: 1.25rem;
199+
position: relative;
200+
&::after {
201+
content: "";
202+
position: absolute;
203+
left: 0;
204+
top: 0;
205+
transform: translateY(-100%);
206+
width: 100%;
207+
height: 4.75rem;
208+
background: linear-gradient(180deg, rgba(36, 41, 46, 0) 0%, #24292e 73.94%);
209+
pointer-events: none;
210+
}
211+
.m-filter-btn-reset {
212+
.normal();
213+
width: 4rem;
214+
border-radius: 0.75rem;
215+
}
216+
.m-filter-btn-confirm {
217+
border-radius: 0.75rem;
218+
flex: 1;
219+
background-color: @brand3;
220+
font-weight: bold;
221+
font-size: 1rem;
222+
color: @brand2;
223+
}
224+
}
225+
}
226+
}
227+
@media (prefers-color-scheme: dark) {
228+
.v-emotion {
229+
background-color: #181818;
230+
&::before {
231+
background: linear-gradient(180deg, #1c1c1c 0%, rgba(24, 24, 24, 0) 100%);
232+
}
233+
.m-chat-container {
234+
.m-chat-list {
235+
.m-chat-item {
236+
.m-message {
237+
.m-content {
238+
.m-header {
239+
.u-author {
240+
color: @black40-dark;
241+
}
242+
}
243+
}
244+
}
245+
}
246+
.u-chat-date {
247+
color: @black20-dark;
248+
}
249+
250+
.u-ent-time {
251+
color: @black40-dark;
252+
}
253+
}
254+
}
255+
.m-send {
256+
background-color: @brand4-dark;
257+
.m-robot {
258+
background-color: @black5-dark;
259+
.u-icon {
260+
fill: #ffffff;
261+
}
262+
.u-tip {
263+
color: @black40-dark;
264+
}
265+
}
266+
267+
.m-input-container {
268+
.u-input {
269+
.el-textarea__inner {
270+
background-color: @black5-dark;
271+
border: none;
272+
color: white;
273+
}
274+
}
275+
}
276+
}
277+
}
278+
}

‎src/assets/img/emotion/filter_icon.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/assets/img/emotion/filter_light_icon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/router/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ const Namespace = () => import("../views/Namespace.vue");
1818
const Joke = () => import("../views/Joke/Joke.vue");
1919
const JokeMobile = () => import("../views/Joke/Joke-mobile.vue");
2020

21-
const Emotion = () => import("../views/Emotion.vue");
21+
const Emotion = () => import("../views/emotion/Emotion.vue");
22+
const EmotionMobile = () => import("../views/emotion/Emotion-mobile.vue");
2223
const Collection = () => import("../views/Collection.vue");
2324
const Community = () => import("../views/Community.vue");
2425
const CommunitySingle = () => import("../views/CommunitySingle.vue");
@@ -42,7 +43,7 @@ const routes = [
4243
},
4344
{ name: "joke", path: "/joke/:id?", component: isMiniProgram() ? JokeMobile : Joke },
4445

45-
{ name: "emotion", path: "/emotion/:id?", component: Emotion },
46+
{ name: "emotion", path: "/emotion/:id?", component: isMiniProgram() ? EmotionMobile : Emotion },
4647
{ name: "collection", path: "/collection", component: Collection },
4748
{
4849
name: "collection-single",

0 commit comments

Comments
 (0)