Skip to content

Commit fbfa72a

Browse files
xuanzhi33xuanzhi33
committed
style: Update appearance
1 parent bbcb9f0 commit fbfa72a

File tree

1 file changed

+157
-92
lines changed

1 file changed

+157
-92
lines changed

‎src/App.vue

Lines changed: 157 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -42,15 +42,15 @@ const { t } = useI18n({
4242
travellings: "开往",
4343
links: "传送门",
4444
filter: "筛选",
45-
actions: "操作",
45+
actions: "管理",
4646
status: "状态",
4747
tag: "标签"
4848
},
4949
en: {
5050
memberList: 'Member List',
5151
searchPlaceholder: 'Type name/link/ID to search...',
52-
applyJoin: 'Apply to Join',
53-
officialSite: 'Official Website',
52+
applyJoin: 'Join',
53+
officialSite: 'Docs',
5454
travelling: 'Travelling',
5555
refresh: 'Refresh',
5656
allSites: 'All Sites',
@@ -79,7 +79,7 @@ const { t } = useI18n({
7979
travellings: "Travellings",
8080
links: "Links",
8181
filter: "Filter",
82-
actions: "Actions",
82+
actions: "Manage",
8383
status: "Status",
8484
tag: "Tag"
8585
}
@@ -167,106 +167,102 @@ const isChangelog = ref(false);
167167
<div class="container mt-4 mb-4">
168168
<div class="main p-3">
169169
<div class="row">
170-
<div class="col-lg-6">
170+
<div class="col-md-6">
171171
<!-- <h3 id="mainTitle">{{ t('memberList') }}</h3> -->
172172
<h1 class="main-title">
173173
{{ t('travellings') }}
174174
<span class="sub-title">· {{ t('memberList') }}</span>
175175
</h1>
176176
</div>
177-
<div class="col-lg-6">
178-
<input type="search" class="form-control" :placeholder="t('searchPlaceholder')" v-model="search" />
177+
<div class="col-md-6 links">
178+
<a class="links-item" href="https://www.travellings.cn/docs/join" target="_blank">
179+
<i class="fa fa-fw fa-user-plus"></i> {{ t('applyJoin') }}</a>
180+
<a class="links-item" href="https://www.travellings.cn/">
181+
<i class="fa fa-fw fa-home"></i> {{ t('officialSite') }}</a>
182+
<a class="links-item" href="https://www.travellings.cn/go.html" target="_blank">
183+
<i class="fa fa-fw fa-subway"></i> {{ t('travelling') }}
184+
<i class="fa fa-angle-right"></i>
185+
</a>
179186
</div>
180187
</div>
181188

182-
<div class="mt-3 action-btns row">
189+
<div class="mt-3 row">
183190

184-
<div class="col-lg-4 col-12 mb-2 mb-lg-0">
185-
<div class="menu-card">
186-
<div class="menu-card-title">
187-
<i class="fa fa-fw fa-cog"></i>
188-
{{ t('actions') }}
189-
</div>
190-
<div class="menu-card-items">
191-
<a class="menu-card-item" href="#" @click.prevent="refresh">
192-
<i class="fa fa-fw fa-refresh"></i> {{ t('refresh') }}
193-
</a>
194-
<Transition>
195-
<a class="menu-card-item" href="javascript:;" v-if="isAdmin" @click="isSyncing = true">
196-
<i class="fa fa-fw fa-plus"></i> {{ t('fastAdd') }}
197-
</a>
198-
</Transition>
199-
<Transition>
200-
<a class="menu-card-item" href="javascript:;" v-tooltip="t('logoutTip')" v-if="isAdmin" @click="logout">
201-
<i class="fa fa-fw fa-user"></i> {{ username }} ({{ t('admin') }})
202-
</a>
203-
</Transition>
204-
<Transition>
205-
<a class="menu-card-item" href="javascript:;" v-tooltip="t('logoutTip')" v-if="isNormalUser"
206-
@click="logout">
207-
<i class="fa fa-fw fa-user"></i> {{ username }} ({{ t('normalUser') }})
208-
</a>
209-
</Transition>
210-
</div>
211-
</div>
191+
<div class="col-lg-8">
192+
<input type="search" class="form-control" :placeholder="t('searchPlaceholder')" v-model="search" />
212193
</div>
213194

214-
<div class="col-lg-4 col-6">
215-
<div class="menu-card">
216-
<div class="menu-card-title">
217-
<i class="fa fa-fw fa-link"></i>
218-
{{ t('links') }}
219-
</div>
220-
<div class="menu-card-items">
221-
<a class="menu-card-item" href="https://www.travellings.cn/docs/join" target="_blank">
222-
<i class="fa fa-fw fa-user-plus"></i> {{ t('applyJoin') }}</a>
223-
<a class="menu-card-item" href="https://www.travellings.cn/">
224-
<i class="fa fa-fw fa-home"></i> {{ t('officialSite') }}</a>
225-
<a class="menu-card-item" href="https://www.travellings.cn/go.html" target="_blank">
226-
<i class="fa fa-fw fa-subway"></i> {{ t('travelling') }}</a>
195+
<div class="col-lg-4 action-btns mt-2 mt-lg-0">
196+
<div class="action-btn-container">
197+
<div class="menu-card filter-card">
198+
<div class="menu-card-title">
199+
<i class="fa fa-fw fa-cog"></i>
200+
{{ t('actions') }}
201+
</div>
202+
<div class="menu-card-items">
203+
<a class="menu-card-item" href="#" @click.prevent="refresh">
204+
<i class="fa fa-fw fa-refresh"></i> {{ t('refresh') }}
205+
</a>
206+
<Transition>
207+
<a class="menu-card-item" href="javascript:;" v-if="isAdmin" @click="isSyncing = true">
208+
<i class="fa fa-fw fa-plus"></i> {{ t('fastAdd') }}
209+
</a>
210+
</Transition>
211+
<Transition>
212+
<a class="menu-card-item" href="javascript:;" v-tooltip="t('logoutTip')" v-if="isAdmin"
213+
@click="logout">
214+
<i class="fa fa-fw fa-user"></i> {{ username }} ({{ t('admin') }})
215+
</a>
216+
</Transition>
217+
<Transition>
218+
<a class="menu-card-item" href="javascript:;" v-tooltip="t('logoutTip')" v-if="isNormalUser"
219+
@click="logout">
220+
<i class="fa fa-fw fa-user"></i> {{ username }} ({{ t('normalUser') }})
221+
</a>
222+
</Transition>
223+
</div>
227224
</div>
228225
</div>
229-
</div>
230-
231-
<div class="col-lg-4 col-6">
232-
<div class="menu-card">
233-
<div class="menu-card-title">
234-
<i class="fa fa-fw fa-filter"></i>
235-
{{ t('filter') }}
236-
</div>
237-
<div class="menu-card-items">
238-
<label for="filter-tag">
239-
<i class="fa fa-fw fa-tags"></i>
240-
{{ t('tag') }}
241-
</label>
242-
243-
<select id="filter-tag" class="menu-card-item" v-tooltip="t('filterTip')" v-model="tag">
244-
<option value="go">{{ t('allTags') }}</option>
245-
<option value="blog">{{ t('blog') }}</option>
246-
<option value="normal">{{ t('normalSite') }}</option>
247-
<option value="tech">{{ t('techSite') }}</option>
248-
<option value="site">{{ t('siteSharing') }}</option>
249-
<option value="life">{{ t('life') }}</option>
250-
<option value="hybrid">{{ t('hybrid') }}</option>
251-
<option value="go-only">{{ t('uncategorized') }}</option>
252-
</select>
253-
254-
<label for="filter-status">
255-
<i class="fa fa-fw fa-info-circle"></i>
256-
{{ t('status') }}
257-
</label>
258-
259-
<select id="filter-status" class="menu-card-item" v-tooltip="t('filterTip')" v-model="status">
260-
<option value="ALL">{{ t('allSites') }}</option>
261-
<option value="RUN">RUN</option>
262-
<option value="OTHER">{{ t('notRun') }}</option>
263-
<option value="LOST">LOST</option>
264-
<option value="ERROR">ERROR</option>
265-
<option value="TIMEOUT">TIMEOUT</option>
266-
<option value="4XX">4XX</option>
267-
<option value="5XX">5XX</option>
268-
<option value="WAIT">WAIT</option>
269-
</select>
226+
<div class="action-btn-container">
227+
<div class="menu-card filter-card">
228+
<div class="menu-card-title">
229+
<i class="fa fa-fw fa-filter"></i>
230+
{{ t('filter') }}
231+
</div>
232+
<div class="menu-card-items">
233+
<label for="filter-tag">
234+
<i class="fa fa-fw fa-tags"></i>
235+
{{ t('tag') }}
236+
</label>
237+
238+
<select id="filter-tag" class="menu-card-item" v-tooltip="t('filterTip')" v-model="tag">
239+
<option value="go">{{ t('allTags') }}</option>
240+
<option value="blog">{{ t('blog') }}</option>
241+
<option value="normal">{{ t('normalSite') }}</option>
242+
<option value="tech">{{ t('techSite') }}</option>
243+
<option value="site">{{ t('siteSharing') }}</option>
244+
<option value="life">{{ t('life') }}</option>
245+
<option value="hybrid">{{ t('hybrid') }}</option>
246+
<option value="go-only">{{ t('uncategorized') }}</option>
247+
</select>
248+
249+
<label for="filter-status">
250+
<i class="fa fa-fw fa-info-circle"></i>
251+
{{ t('status') }}
252+
</label>
253+
254+
<select id="filter-status" class="menu-card-item" v-tooltip="t('filterTip')" v-model="status">
255+
<option value="ALL">{{ t('allSites') }}</option>
256+
<option value="RUN">RUN</option>
257+
<option value="OTHER">{{ t('notRun') }}</option>
258+
<option value="LOST">LOST</option>
259+
<option value="ERROR">ERROR</option>
260+
<option value="TIMEOUT">TIMEOUT</option>
261+
<option value="4XX">4XX</option>
262+
<option value="5XX">5XX</option>
263+
<option value="WAIT">WAIT</option>
264+
</select>
265+
</div>
270266
</div>
271267
</div>
272268
</div>
@@ -340,6 +336,10 @@ const isChangelog = ref(false);
340336
width: 100%;
341337
outline: none;
342338
339+
white-space: nowrap;
340+
overflow: hidden;
341+
text-overflow: ellipsis;
342+
343343
transition: all 0.3s;
344344
}
345345
@@ -354,9 +354,10 @@ const isChangelog = ref(false);
354354
}
355355
356356
.menu-card-items label {
357+
margin-top: 5px;
357358
margin-bottom: -3px;
358359
display: block;
359-
360+
360361
font-size: 0.8rem;
361362
color: gray;
362363
}
@@ -369,13 +370,77 @@ const isChangelog = ref(false);
369370
}
370371
}
371372
372-
@media (max-width: 768px) {
373+
/* @media (max-width: 768px) {
373374
.action-btns .col-6:nth-last-child(2) {
374375
padding-right: 5px;
375376
}
376377
.action-btns .col-6:last-child {
377378
padding-left: 5px;
378379
}
379380
381+
} */
382+
383+
.links {
384+
display: flex;
385+
justify-content: flex-end;
386+
387+
align-items: center;
388+
}
389+
390+
.links-item {
391+
margin-left: 10px;
392+
text-decoration: none;
393+
transition: all 0.3s;
394+
}
395+
396+
@media (max-width: 768px) {
397+
.links {
398+
justify-content: flex-start;
399+
margin-top: 10px;
400+
}
401+
}
402+
403+
.filter-card {
404+
cursor: pointer;
405+
position: absolute;
406+
right: 0;
407+
width: 100%;
408+
height: 38px;
409+
overflow: hidden;
410+
411+
transition: all 0.3s;
412+
}
413+
414+
.filter-card:hover {
415+
width: 240px;
416+
height: 160px;
417+
418+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
419+
z-index: 100;
420+
}
421+
422+
@media (max-width: 768px) {
423+
.filter-card:hover {
424+
width: 100%;
425+
}
426+
}
427+
428+
.menu-card-title {
429+
margin-bottom: 10px;
430+
text-align: center;
431+
}
432+
433+
.action-btns {
434+
display: flex;
435+
}
436+
437+
.action-btn-container {
438+
position: relative;
439+
height: 38px;
440+
flex: 1;
441+
}
442+
443+
.action-btn-container:last-child {
444+
margin-left: 10px;
380445
}
381446
</style>

0 commit comments

Comments
 (0)