1
0
This commit is contained in:
syui 2024-03-31 18:35:20 +09:00
parent 611fb5dd7c
commit 5621f87bea
Signed by: syui
GPG Key ID: 5417CFEBAD92DF56
5 changed files with 65 additions and 12 deletions

View File

@ -3,7 +3,7 @@
"version": "0.0.1",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},

View File

@ -11,5 +11,10 @@
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>
<body><div id="app"></div><script src="chunk-vendors.js"></script><script src="app.js"></script></body>
<body>
<div id="app"></div>
<script src="chunk-vendors.js"></script>
<script src="app.js"></script>
</body>
<footer>© syui</footer>
</html>

BIN
public/manga/0.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 312 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 39 KiB

View File

@ -1,11 +1,7 @@
<template>
<div id="app">
{{ loc }}
<a :href="this.url + this.s_a"><button v-on:click="page_run(s_a)">1</button></a>
<a :href="this.url + this.s_b"><button v-on:click="page_run(s_b)">2</button></a>
<a :href="this.url + this.s_c"><button v-on:click="page_run(s_c)">3</button></a>
<a :href="this.url + this.s_d"><button v-on:click="page_run(s_d)">4</button></a>
<a :href="this.url + this.s_e"><button v-on:click="page_run(s_e)">5</button></a>
<hooper :settings="hooperSettings">
<slide v-for="(n,index) of products" :key="n">
<img :src="url + 'manga/'+ (index) +'.webp'" />
@ -15,6 +11,13 @@
<hooper-pagination slot="hooper-addons"></hooper-pagination>
<hooper-progress slot="hooper-addons"></hooper-progress>
</hooper>
<div class="page">
<a :href="this.url + this.s_a"><img :src="url + 'manga/' + this.s_a + '.webp'" v-on:click="page_run(s_a)"></a>
<a :href="this.url + this.s_b"><button v-on:click="page_run(s_b)">2</button></a>
<a :href="this.url + this.s_c"><button v-on:click="page_run(s_c)">3</button></a>
<a :href="this.url + this.s_d"><button v-on:click="page_run(s_d)">4</button></a>
<a :href="this.url + this.s_e"><button v-on:click="page_run(s_e)">5</button></a>
</div>
</div>
</template>
@ -43,7 +46,7 @@ export default {
},
data() {
return {
url: "https://manga.syui.ai/",
url: "/",
s_a: 0,
s_b: 17,
s_c: 41,
@ -67,12 +70,57 @@ export default {
</script>
<style>
.hooper{height:100%}button.hooper-indicator{background-color:#000}img{width:100%}.page_n{text-align:center;height:50px}.hooper-pagination{position:fixed}.hooper-next,.hooper-prev{background-color:rgba(184,207,224,.24)}
.page_n{text-align:center;height:50px}
.hooper-pagination{position:fixed}
.hooper-next,.hooper-prev{background-color:rgba(184,207,224,.24)}
.hooper-indicator{
background-color:#000;
display:none;
}
.hooper{
height:100%;
text-align:center;
}
button {
padding: 10px;
margin: 5px;
background-color: #fff700;
color: #313131;
border: solid 2px;
}
ul.hooper-track {
padding: 0px;
}
img{
width:500px;
}
.page {
text-align:center;
margin:50px 20px 50px 20px;
background-color: rgba(184, 207, 224, .24);
padding: 20px;
}
.page a img {
border: solid 2px #313131;
width:100px;
margin: auto;
display: block;
}
.page a button {
}
footer {
text-align: center;
}
@media screen and (max-width:1000px) {
img{width:100%;}
}
</style>