上传文件至 src/views
This commit is contained in:
60
src/views/SystemAdmin.vue
Normal file
60
src/views/SystemAdmin.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<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>
|
Reference in New Issue
Block a user