[+] Routes
This commit is contained in:
+4
-2
@@ -7,6 +7,8 @@
|
||||
<div id="items" class="fbox-v">
|
||||
<router-link class="router-link" ref="others" to="/others">{{ $t('nav.others') }}</router-link>
|
||||
<div class="dot">·</div>
|
||||
<router-link class="router-link" ref="photo" to="/photo">{{ $t('nav.photo') }}</router-link>
|
||||
<div class="dot">·</div>
|
||||
<router-link class="router-link" ref="blog" to="/blog">{{ $t('nav.blog') }}</router-link>
|
||||
<div class="dot">·</div>
|
||||
<router-link class="router-link" ref="life" to="/life">{{ $t('nav.life') }}</router-link>
|
||||
@@ -14,8 +16,7 @@
|
||||
<router-link class="router-link" ref="about" to="/about">{{ $t('nav.about') }}</router-link>
|
||||
<div class="dot">·</div>
|
||||
<router-link class="router-link" ref="home" to="/">
|
||||
<svg focusable="false" data-prefix="fal" data-icon="house-night" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-house-night fa-w-20"><path fill="currentColor" d="M112,224a111.5,111.5,0,0,0,87-41.45,20.51,20.51,0,0,0-19.75-33.08A59.2,59.2,0,0,1,138.84,39.85a20.3,20.3,0,0,0,10.07-21.27,20.26,20.26,0,0,0-16.47-16.7A136,136,0,0,0,112,0a112,112,0,0,0,0,224ZM97.78,33.27a91.21,91.21,0,0,0,54.47,147.9A80,80,0,1,1,97.78,33.27Zm97.15,35.51,39.72,16.56,16.56,39.72a5.33,5.33,0,0,0,9.55,0l16.56-39.72L317,68.78a5.33,5.33,0,0,0,0-9.54L277.32,42.68,260.76,3a5.33,5.33,0,0,0-9.55,0L234.65,42.68,194.93,59.24a5.34,5.34,0,0,0,0,9.54ZM157,379.24l-39.72-16.57L100.76,323a5.34,5.34,0,0,0-9.55,0L74.65,362.67,34.93,379.24a5.34,5.34,0,0,0,0,9.54l39.72,16.56,16.56,39.72a5.33,5.33,0,0,0,9.55,0l16.56-39.72L157,388.78a5.33,5.33,0,0,0,0-9.54Zm179-101.9v85.33A21.39,21.39,0,0,0,357.36,384h85.31A21.39,21.39,0,0,0,464,362.67V277.34A21.4,21.4,0,0,0,442.67,256H357.36A21.4,21.4,0,0,0,336,277.34ZM368,288H432v64H368Zm266.49,8L576,244.75V144a16,16,0,0,0-32,0v72.75L410.53,100a16,16,0,0,0-21.07,0l-224,196a16,16,0,0,0,21.07,24.09L224,287.28V464a48.05,48.05,0,0,0,48,48H528a48.06,48.06,0,0,0,48-48V287.28l37.46,32.78A16,16,0,0,0,634.53,296ZM544,464a16,16,0,0,1-16,16H272a16,16,0,0,1-16-16V264a15.94,15.94,0,0,0-.81-4L400,133.27l144,126Z" class=""></path></svg></router-link>
|
||||
<div class="dot">·</div>
|
||||
<svg focusable="false" data-prefix="fal" data-icon="house-night" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-house-night fa-w-20"><path fill="currentColor" d="M112,224a111.5,111.5,0,0,0,87-41.45,20.51,20.51,0,0,0-19.75-33.08A59.2,59.2,0,0,1,138.84,39.85a20.3,20.3,0,0,0,10.07-21.27,20.26,20.26,0,0,0-16.47-16.7A136,136,0,0,0,112,0a112,112,0,0,0,0,224ZM97.78,33.27a91.21,91.21,0,0,0,54.47,147.9A80,80,0,1,1,97.78,33.27Zm97.15,35.51,39.72,16.56,16.56,39.72a5.33,5.33,0,0,0,9.55,0l16.56-39.72L317,68.78a5.33,5.33,0,0,0,0-9.54L277.32,42.68,260.76,3a5.33,5.33,0,0,0-9.55,0L234.65,42.68,194.93,59.24a5.34,5.34,0,0,0,0,9.54ZM157,379.24l-39.72-16.57L100.76,323a5.34,5.34,0,0,0-9.55,0L74.65,362.67,34.93,379.24a5.34,5.34,0,0,0,0,9.54l39.72,16.56,16.56,39.72a5.33,5.33,0,0,0,9.55,0l16.56-39.72L157,388.78a5.33,5.33,0,0,0,0-9.54Zm179-101.9v85.33A21.39,21.39,0,0,0,357.36,384h85.31A21.39,21.39,0,0,0,464,362.67V277.34A21.4,21.4,0,0,0,442.67,256H357.36A21.4,21.4,0,0,0,336,277.34ZM368,288H432v64H368Zm266.49,8L576,244.75V144a16,16,0,0,0-32,0v72.75L410.53,100a16,16,0,0,0-21.07,0l-224,196a16,16,0,0,0,21.07,24.09L224,287.28V464a48.05,48.05,0,0,0,48,48H528a48.06,48.06,0,0,0,48-48V287.28l37.46,32.78A16,16,0,0,0,634.53,296ZM544,464a16,16,0,0,1-16,16H272a16,16,0,0,1-16-16V264a15.94,15.94,0,0,0-.81-4L400,133.27l144,126Z" class=""></path></svg></router-link>
|
||||
</div>
|
||||
|
||||
<div id="nav-bookmark" ref="bookmark" :style="bookmarkCss"></div>
|
||||
@@ -95,6 +96,7 @@ class App extends Vue
|
||||
|
||||
calculateBookmarkCss(): void
|
||||
{
|
||||
console.log('CalculateBookmarkCss called', this.currentRoute, this.$refs)
|
||||
if (this.currentRoute in this.$refs)
|
||||
this.currentLink = (this.$refs[this.currentRoute] as ComponentPublicInstance).$el
|
||||
else return
|
||||
|
||||
@@ -8,7 +8,8 @@ export const messages = {
|
||||
blog: '记事本',
|
||||
life: '生活',
|
||||
projects: 'Projects',
|
||||
others: '更多'
|
||||
others: '更多',
|
||||
photo: '相册'
|
||||
}
|
||||
},
|
||||
zh: {
|
||||
|
||||
@@ -27,6 +27,12 @@ const routes: Array<RouteRecordRaw> = [
|
||||
component: () => import('../views/Blog.vue'),
|
||||
props: route => (route.query)
|
||||
},
|
||||
{
|
||||
path: '/photo',
|
||||
name: 'Photo',
|
||||
meta: {title: '相册', nav: true},
|
||||
component: () => import('../views/Photo.vue')
|
||||
},
|
||||
{
|
||||
path: '/others',
|
||||
name: 'Others',
|
||||
@@ -51,12 +57,6 @@ const routes: Array<RouteRecordRaw> = [
|
||||
meta: {title: '我做的', navBookmark: 'Others'},
|
||||
component: () => import('../views/others/Projects.vue')
|
||||
},
|
||||
{
|
||||
path: '/photo',
|
||||
name: 'Photo',
|
||||
meta: {title: '摄影', navBookmark: 'Others'},
|
||||
component: () => import('../views/Photo.vue')
|
||||
},
|
||||
]
|
||||
|
||||
export const router = createRouter({
|
||||
|
||||
+4
-4
@@ -24,10 +24,10 @@ export default class Photos extends Vue {
|
||||
|
||||
async created() {
|
||||
this.photos = await (await fetch('https://p.aza.moe/photos')).json()
|
||||
this.photos.sort((a, b) => (b.upload_time < a.upload_time ? 1 : -1))
|
||||
this.photos.sort((a, b) => (a.exif.DateTime < b.exif.DateTime ? 1 : -1))
|
||||
|
||||
let rowProbabilityTable = {
|
||||
1: 0, 2: 0.5, 3: 0.5
|
||||
1: 0, 2: 0.3, 3: 0.5
|
||||
}
|
||||
|
||||
// Generate photo rows: there is a 10% chance that a photo will be the only photo in its row
|
||||
@@ -65,7 +65,7 @@ export default class Photos extends Vue {
|
||||
<template>
|
||||
<div class="title">
|
||||
<div class="font-script-en bold">The Wandering Gallery</div>
|
||||
<!-- <div class="subtitle">Here I post pictures of the wonderful scenes I encounter during my trips.</div>-->
|
||||
<div class="subtitle <sm:hidden">想要把旅行中用相机拍到好看照片时的喜悦分享给照片里出现的路人，所以买了便携照片打印机、搭了这个网页！</div>
|
||||
</div>
|
||||
<div class="outer-grid">
|
||||
<div v-for="row in photoRows" :key="row[0].id" flex justify-center :class="`grid-cols-${row.length}`">
|
||||
@@ -96,7 +96,7 @@ export default class Photos extends Vue {
|
||||
|
||||
.img-container
|
||||
filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3))
|
||||
margin: -15px
|
||||
margin: -0.5rem
|
||||
max-width: 50%
|
||||
|
||||
img.photo
|
||||
|
||||
Reference in New Issue
Block a user