207 lines
10 KiB
HTML
207 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>小辉Java</title>
|
|
<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
|
|
<link rel="bookmark" href="/assets/favicon.ico" type="image/x-icon" />
|
|
<link href="/assets/vuetify-v2.6.9/vuetify-v2.6.9.min.css" rel="stylesheet"/>
|
|
<link href="/assets/vuetify-v2.6.9/materialdesignicons.min.css" rel="stylesheet"/>
|
|
<script src="/assets/vue/vue.min.js"></script>
|
|
<script src="/assets/vuetify-v2.6.9/vuetify-v2.6.9.min.js"></script>
|
|
<script src="/assets/axios/axios.min.js"></script>
|
|
<script src="/assets/moment/moment.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app"></div>
|
|
</body>
|
|
<script type="text/x-template" id="app-template">
|
|
<v-app id="inspire">
|
|
#{ render "common/bar-index.html" . }
|
|
<v-main :class="$vuetify.theme.dark?'':'grey lighten-3'">
|
|
<v-container>
|
|
<v-row>
|
|
<v-col cols="12" xs="12" sm="3" md="3" lg="3" xl="2" offset-xl="1">
|
|
#{ render "blog/introduce.html" . }
|
|
</v-col>
|
|
|
|
<v-col cols="12" xs="12" sm="6" md="6" lg="6" xl="6">
|
|
<v-sheet min-height="100%">
|
|
<v-list three-line class="pt-0 pb-0">
|
|
<template v-for="(item, index) in articleList">
|
|
<!-- <v-subheader v-if="item.header" :key="item.header" v-text="item.header"></v-subheader>-->
|
|
|
|
<v-list-item :key="item.title" :href="`/article/view/${item.id}`">
|
|
<v-list-item-content>
|
|
<v-list-item-title v-html="item.title"></v-list-item-title>
|
|
<v-list-item-subtitle v-html="item.previous"></v-list-item-subtitle>
|
|
<v-list-item-subtitle>
|
|
<div>
|
|
<template v-if="item.tags">
|
|
<v-chip class="float-left" x-small
|
|
v-for="tag in item.tags.split(',')"
|
|
:color="getColor(tag)">
|
|
{{tag}}
|
|
</v-chip>
|
|
</template>
|
|
<span class="float-right"
|
|
style="margin-left: 10px;">
|
|
阅读数:{{item.viewRecord}}
|
|
</span>
|
|
<span class="float-right"
|
|
>
|
|
{{moment(item.publishTime).format('YYYY/MM/DD')}}
|
|
</span>
|
|
</div>
|
|
</v-list-item-subtitle>
|
|
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-divider></v-divider>
|
|
</template>
|
|
</v-list>
|
|
</v-sheet>
|
|
|
|
</v-col>
|
|
|
|
<v-col cols="12" xs="12" sm="3" md="3" lg="3" xl="2">
|
|
<v-sheet min-height="100%" style="width: 100%">
|
|
<v-card>
|
|
<v-card-title class="text-h5">
|
|
正经人的日记
|
|
</v-card-title>
|
|
<v-divider></v-divider>
|
|
<v-list three-line class="pt-0" style="padding-bottom: 0;">
|
|
<template v-for="(item, index) in diaryList">
|
|
<v-list-item>
|
|
<v-list-item-content style="display: block;">
|
|
<v-list-item-title>
|
|
<div>{{moment(item.publishTime).format('YYYY/MM/DD')}}</div>
|
|
<div style="white-space: break-spaces;">{{item.content}}</div>
|
|
</v-list-item-title>
|
|
<v-list-item-subtitle>
|
|
<v-row>
|
|
<template v-if="item.images.length === 1">
|
|
<v-col v-for="id in item.images" :key="id"
|
|
class="d-flex child-flex" cols="12">
|
|
<v-img :src="`/file/${id}`" aspect-ratio="1"
|
|
class="grey lighten-2">
|
|
<template v-slot:placeholder>
|
|
<v-row class="fill-height ma-0" align="center"
|
|
justify="center">
|
|
<v-progress-circular indeterminate
|
|
color="grey lighten-5"></v-progress-circular>
|
|
</v-row>
|
|
</template>
|
|
</v-img>
|
|
</v-col>
|
|
</template>
|
|
<template v-if="item.images.length > 1">
|
|
<v-col v-for="id in item.images" :key="id"
|
|
class="d-flex child-flex" cols="4">
|
|
<v-img :src="`/file/${id}`" aspect-ratio="1"
|
|
class="grey lighten-2">
|
|
<template v-slot:placeholder>
|
|
<v-row class="fill-height ma-0" align="center"
|
|
justify="center">
|
|
<v-progress-circular indeterminate
|
|
color="grey lighten-5"></v-progress-circular>
|
|
</v-row>
|
|
</template>
|
|
</v-img>
|
|
</v-col>
|
|
</template>
|
|
</v-row>
|
|
</v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-divider></v-divider>
|
|
</template>
|
|
</v-list>
|
|
</v-card>
|
|
</v-sheet>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</v-main>
|
|
#{ render "common/footer.html" . }
|
|
</v-app>
|
|
</script>
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
template: '#app-template',
|
|
data: {
|
|
drawer: false,
|
|
articleList: [],
|
|
diaryList: []
|
|
},
|
|
methods: {
|
|
latestArticle() {
|
|
let ths = this;
|
|
|
|
axios.get("/article/latest")
|
|
.then((rsp) => {
|
|
let data = rsp.data.data
|
|
return data
|
|
}).then((data) => {
|
|
ths.articleList = data
|
|
})
|
|
.catch((err) => {
|
|
})
|
|
|
|
},
|
|
|
|
latestDiary() {
|
|
let ths = this
|
|
|
|
axios.get("/diary/latest").then(rsp => {
|
|
let data = rsp.data.data
|
|
return data
|
|
}).then((data) => {
|
|
data.forEach(item => {
|
|
let imgList = []
|
|
let images = item.images.split(",")
|
|
images.forEach(img => {
|
|
if(img){
|
|
imgList.push(img)
|
|
}
|
|
})
|
|
item.images = imgList
|
|
// console.log(imgList);
|
|
});
|
|
// console.log(data);
|
|
ths.diaryList = data
|
|
}).catch(err => {
|
|
})
|
|
|
|
},
|
|
|
|
getColor(key) {
|
|
const map = {
|
|
redis: 'red',
|
|
spring: 'green',
|
|
linux: 'blue-grey',
|
|
java: 'red accent-3',
|
|
database: 'blue accent-3'
|
|
}
|
|
// console.log(map[key.toLowerCase()] || '')
|
|
return map[key.toLowerCase()] || '';
|
|
},
|
|
|
|
},
|
|
mounted() {
|
|
this.latestArticle()
|
|
this.latestDiary()
|
|
console.log(this.$vuetify.theme.dark);
|
|
},
|
|
vuetify: new Vuetify({
|
|
theme: { dark: new Date().getHours() > 20 || new Date().getHours() < 6}
|
|
// theme: { dark: true}
|
|
}),
|
|
})
|
|
</script>
|
|
</html>
|