174 lines
8.0 KiB
HTML
174 lines
8.0 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" . }
|
|
#{ render "common/drawer.html" . }
|
|
|
|
<v-dialog v-model="dialog">
|
|
<div style="text-align: center">
|
|
<img :src="dialogImg" style="max-width: 100%"/>
|
|
</div>
|
|
</v-dialog>
|
|
<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 diaryList">
|
|
<!-- <v-subheader v-if="item.header" :key="item.header" v-text="item.header"></v-subheader> -->
|
|
<v-list-item>
|
|
<!-- <v-list-item-avatar>
|
|
<v-img src="/assets/images/yage.jpg"></v-img>
|
|
</v-list-item-avatar> -->
|
|
|
|
<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="6">
|
|
<v-img :src="`/file/${id}`" aspect-ratio="1" class="grey lighten-2" @click="zoomImg(id)">
|
|
<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" @click="zoomImg(id)">
|
|
<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-col v-for="id in item.images" :key="id" class="d-flex child-flex" cols="4">
|
|
<v-img :src="`/file/${r'${id}'}`" aspect-ratio="1" class="grey lighten-2" @click="zoomImg(id)">
|
|
<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> -->
|
|
</v-row>
|
|
</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%">
|
|
|
|
</v-sheet>
|
|
</v-col>
|
|
|
|
|
|
</v-row>
|
|
</v-container>
|
|
#{ render "common/footer.html" . }
|
|
|
|
</v-main>
|
|
</v-app>
|
|
|
|
</script>
|
|
|
|
<style scope>
|
|
.v-dialog {
|
|
box-shadow: unset;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
template: '#app-template',
|
|
data: {
|
|
drawer: false,
|
|
dialog: false,
|
|
dialogImg: null,
|
|
diaryList: [],
|
|
imgList: []
|
|
},
|
|
methods: {
|
|
zoomImg(id) {
|
|
this.dialog = true
|
|
this.dialogImg = '/file/' + id
|
|
},
|
|
|
|
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 => {
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
mounted() {
|
|
this.latestDiary();
|
|
|
|
},
|
|
vuetify: new Vuetify({
|
|
theme: { dark: new Date().getHours() > 20 || new Date().getHours() < 6}
|
|
}),
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
</html> |