Skip to content

Commit 9f79c9a

Browse files
TiAmo-codeTiAmo-code
committed
feat : 骚话小程序端
1 parent 9caf6f8 commit 9f79c9a

7 files changed

Lines changed: 426 additions & 6 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"build": "vue-cli-service build",
66
"debug": "env DEV_SERVER=true vue-cli-service serve --mode staging",
77
"dev": "env DEV_SERVER=true vue-cli-service serve --mode development",
8+
"dev_win": "cross-env NODE_ENV=development vue-cli-service serve --mode development",
89
"inspect": "vue inspect > output.js",
910
"lint": "vue-cli-service lint",
1011
"preview": "env BUILD_MODE=preview vue-cli-service build",

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

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
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+
@brand4: #fff;
11+
@brand4-dark: #282828;
12+
13+
.v-joke {
14+
height: 100vh;
15+
display: flex;
16+
flex-direction: column;
17+
background-color: #f5f5f5;
18+
19+
.m-chat-container {
20+
flex: 1;
21+
overflow-y: auto;
22+
padding: 1.25rem;
23+
padding-bottom: 0;
24+
.m-chat-list {
25+
.m-chat-item {
26+
padding: 1.25rem 0;
27+
.m-message {
28+
display: flex;
29+
align-items: flex-start;
30+
31+
.m-avatar {
32+
.u-avatar {
33+
width: 2.5rem;
34+
height: 2.5rem;
35+
border-radius: 50%;
36+
flex-shrink: 0;
37+
background-size: cover;
38+
background-position: center;
39+
}
40+
}
41+
42+
.m-content {
43+
flex: 1;
44+
padding-left: 0.75rem;
45+
max-width: calc(100% - 2.5rem);
46+
box-sizing: border-box;
47+
48+
.m-header {
49+
display: flex;
50+
align-items: center;
51+
52+
.u-author {
53+
font-size: 0.75rem;
54+
line-height: 1.125rem;
55+
color: @black40;
56+
}
57+
}
58+
59+
.m-body {
60+
background: @brand4;
61+
border-radius: 0.5rem;
62+
padding: 0.75rem;
63+
position: relative;
64+
margin-top: 0.5rem;
65+
66+
.u-text {
67+
font-size: 0.875rem;
68+
line-height: 1.25rem;
69+
color: @black80;
70+
word-wrap: break-word;
71+
}
72+
}
73+
}
74+
}
75+
}
76+
.u-chat-date {
77+
color: @black20;
78+
font-size: 0.875rem;
79+
line-height: 1.25rem;
80+
text-align: center;
81+
padding: 0.5rem 0;
82+
}
83+
84+
.u-ent-time {
85+
text-align: center;
86+
color: @black40;
87+
font-size: 0.75rem;
88+
line-height: 1.125rem;
89+
padding-bottom: 1rem;
90+
}
91+
}
92+
}
93+
.m-send {
94+
background-color: @brand4;
95+
padding: 0.75rem;
96+
padding-bottom: calc(2.5rem + env(safe-area-inset-bottom));
97+
.m-robot {
98+
display: flex;
99+
align-items: center;
100+
justify-content: center;
101+
gap: 0.5rem;
102+
background-color: @black5;
103+
border-radius: 0.75rem;
104+
padding: 0.5rem 0;
105+
.u-icon {
106+
width: 1.125rem;
107+
fill: #1c1c1c;
108+
fill-opacity: 0.4;
109+
}
110+
.u-tip {
111+
color: @black40;
112+
font-size: 0.875rem;
113+
font-weight: bold;
114+
}
115+
}
116+
}
117+
.m-joke-copy-drawer {
118+
background-color: #24292e;
119+
box-shadow: none;
120+
border-radius: 1.25rem 1.25rem 0 0;
121+
padding: 1.25rem 0.75rem calc(2.5rem + env(safe-area-inset-bottom));
122+
height: auto !important;
123+
.el-drawer__header {
124+
display: none;
125+
}
126+
.m-copy-tip {
127+
display: flex;
128+
flex-direction: column;
129+
align-items: center;
130+
.u-icon {
131+
width: 7.5rem;
132+
}
133+
.u-text {
134+
color: rgba(255, 255, 255, 0.4);
135+
font-size: 0.875rem;
136+
font-weight: bold;
137+
line-height: 1.25rem;
138+
}
139+
}
140+
.u-content {
141+
margin-top: 1.25rem;
142+
border-radius: 0.5rem;
143+
background: rgba(255, 255, 255, 0.2);
144+
padding: 0.75rem;
145+
color: rgba(255, 255, 255, 0.8);
146+
font-size: 0.875rem;
147+
line-height: 1.25rem;
148+
}
149+
.u-btn {
150+
margin-top: 1.25rem;
151+
background-color: #fedaa3;
152+
border-radius: 0.75rem;
153+
text-align: center;
154+
padding: 0.75rem 0;
155+
color: #24292e;
156+
font-weight: bold;
157+
line-height: 1.5rem;
158+
font-size: 1rem;
159+
}
160+
}
161+
}
162+
@media (prefers-color-scheme: dark) {
163+
.v-joke {
164+
background-color: #181818;
165+
.m-chat-container {
166+
.m-chat-list {
167+
.m-chat-item {
168+
.m-message {
169+
.m-content {
170+
.m-header {
171+
.u-author {
172+
color: @black40-dark;
173+
}
174+
}
175+
.m-body {
176+
background: @brand4-dark;
177+
.u-text {
178+
color: @black80-dark;
179+
}
180+
}
181+
}
182+
}
183+
}
184+
.u-chat-date {
185+
color: @black20-dark;
186+
}
187+
188+
.u-ent-time {
189+
color: @black40-dark;
190+
}
191+
}
192+
}
193+
.m-send {
194+
background-color: @brand4-dark;
195+
.m-robot {
196+
background-color: @black5-dark;
197+
.u-icon {
198+
fill: white;
199+
color: white;
200+
}
201+
.u-tip {
202+
color: @black40-dark;
203+
}
204+
}
205+
}
206+
}
207+
}

‎src/assets/img/joke/copy-icon.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/assets/img/joke/robot-icon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/router/index.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
*/
77
import Vue from "vue";
88
import VueRouter from "vue-router";
9+
import { isMiniProgram } from "@jx3box/jx3box-common/js/utils";
910

1011
// 解决重复点击路由报错的BUG
1112
const originalPush = VueRouter.prototype.push;
@@ -14,7 +15,9 @@ VueRouter.prototype.push = function push(location) {
1415
};
1516

1617
const Namespace = () => import("../views/Namespace.vue");
17-
const Joke = () => import("../views/Joke.vue");
18+
const Joke = () => import("../views/Joke/Joke.vue");
19+
const JokeMobile = () => import("../views/Joke/Joke-mobile.vue");
20+
1821
const Emotion = () => import("../views/Emotion.vue");
1922
const Collection = () => import("../views/Collection.vue");
2023
const Community = () => import("../views/Community.vue");
@@ -24,11 +27,11 @@ const Single = () => import("../views/Single.vue");
2427
Vue.use(VueRouter);
2528

2629
const routes = [
27-
{ name: "index", path: "/", redirect: { name: "community" },},
28-
{ name: "bbs", path: "/bbs", redirect: { name: "community" }, },
30+
{ name: "index", path: "/", redirect: { name: "community" } },
31+
{ name: "bbs", path: "/bbs", redirect: { name: "community" } },
2932
{ name: "single", path: "/bbs/:id", component: Single },
3033
{ name: "community", path: "/community", component: Community },
31-
{ path: "/community_topic/:id", redirect: "/community/:id"},
34+
{ path: "/community_topic/:id", redirect: "/community/:id" },
3235
{ path: "/community/topic/:id", redirect: "/community/:id" },
3336
{ name: "community-single", path: "/community/:id", component: CommunitySingle },
3437
{ name: "namespace", path: "/namespace", component: Namespace },
@@ -37,7 +40,8 @@ const routes = [
3740
path: "/namespace/:id",
3841
component: () => import("@/components/namespace/namespace_single.vue"),
3942
},
40-
{ name: "joke", path: "/joke/:id?", component: Joke },
43+
{ name: "joke", path: "/joke/:id?", component: isMiniProgram() ? JokeMobile : Joke },
44+
4145
{ name: "emotion", path: "/emotion/:id?", component: Emotion },
4246
{ name: "collection", path: "/collection", component: Collection },
4347
{

0 commit comments

Comments
 (0)