61 lines
1.0 KiB
Vue
61 lines
1.0 KiB
Vue
<template>
|
|
<div class="page-container">
|
|
<UserMenu />
|
|
|
|
<div class="random-image-page">
|
|
<img v-if="currentImage" :src="currentImage" class="image" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from "vue";
|
|
import UserMenu from "../components/UserMenu.vue";
|
|
|
|
const images = [
|
|
"/image/nekoA.jpg",
|
|
"/image/nekoB.jpg",
|
|
"/image/nekoC.jpg",
|
|
"/image/nekoD.jpg",
|
|
"/image/nekoE.jpg",
|
|
"/image/nekoF.jpg",
|
|
"/image/nekoG.jpg",
|
|
"/image/nekoH.jpg",
|
|
];
|
|
|
|
const currentImage = ref(null);
|
|
|
|
const changeImage = () => {
|
|
const index = Math.floor(Math.random() * images.length);
|
|
currentImage.value = images[index];
|
|
};
|
|
|
|
onMounted(() => {
|
|
changeImage();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import "@/assets/common.css";
|
|
|
|
.page-container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.random-image-page {
|
|
text-align: center;
|
|
padding: 30px;
|
|
}
|
|
|
|
.image {
|
|
max-width: auto;
|
|
max-height: auto;
|
|
margin-bottom: 20px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
|
}
|
|
</style>
|