ai/manga
ai/manga
1
0
Fork 0
Code

fix

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

7
public/index.html
View File

@ -11,5 +11,10 @@
<link rel="shortcut icon" href="/favicon.ico"> <link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head> </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> </html>

BIN
public/manga/0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 312 KiB

BIN
public/manga/0.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 39 KiB

62
src/App.vue
View File

@ -1,11 +1,7 @@
<template> <template>
<div id="app"> <div id="app">
{{ loc }} {{ 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"> <hooper :settings="hooperSettings">
<slide v-for="(n,index) of products" :key="n"> <slide v-for="(n,index) of products" :key="n">
<img :src="url + 'manga/'+ (index) +'.webp'" /> <img :src="url + 'manga/'+ (index) +'.webp'" />
@ -15,6 +11,13 @@
<hooper-pagination slot="hooper-addons"></hooper-pagination> <hooper-pagination slot="hooper-addons"></hooper-pagination>
<hooper-progress slot="hooper-addons"></hooper-progress> <hooper-progress slot="hooper-addons"></hooper-progress>
</hooper> </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> </div>
</template> </template>
@ -43,7 +46,7 @@ export default {
}, },
data() { data() {
return { return {
url: "https://manga.syui.ai/", url: "/",
s_a: 0, s_a: 0,
s_b: 17, s_b: 17,
s_c: 41, s_c: 41,
@ -67,12 +70,57 @@ export default {
</script> </script>
<style> <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 { button {
padding: 10px; padding: 10px;
margin: 5px; margin: 5px;
background-color: #fff700;
color: #313131;
border: solid 2px;
} }
ul.hooper-track { ul.hooper-track {
padding: 0px; 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> </style>