ai/manga
ai/manga
1
0
Fork 0
Code

fix

Browse Source
This commit is contained in:
syui 2024-03-31 21:47:38 +09:00
parent 0cc42fe96f
commit 78fa570f7f
Signed by: syui
GPG Key ID: 5417CFEBAD92DF56
5 changed files with 165 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -12,7 +12,6 @@
"core-js": "^3.6.4", "core-js": "^3.6.4",
"hooper": "^0.3.4", "hooper": "^0.3.4",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-loading-template": "^1.3.2",
"vue-meta": "^2.4.0", "vue-meta": "^2.4.0",
"vue-template-compiler": "^2.6.14" "vue-template-compiler": "^2.6.14"
}, },

2
public/index.html
View File

@ -2,6 +2,8 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>yui | manga</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link href="app.css" rel="preload" as="style"><link href="app.js" rel="preload" as="script"><link href="chunk-vendors.js" rel="preload" as="script"><link href="app.css" rel="stylesheet"> <title>yui | manga</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link href="app.css" rel="preload" as="style"><link href="app.js" rel="preload" as="script"><link href="chunk-vendors.js" rel="preload" as="script"><link href="app.css" rel="stylesheet">
<link rel="stylesheet" href="https://yui.syui.ai/bower_components/icomoon/css/icomoon.css" />
<link rel="stylesheet" href="https://yui.syui.ai/bower_components/font-awesome/css/all.min.css" />
<meta name="twitter:card" content="summary"> <meta name="twitter:card" content="summary">
<meta property="og:url" content="https://manga.syui.ai"> <meta property="og:url" content="https://manga.syui.ai">
<meta property="og:title" content="yui"> <meta property="og:title" content="yui">

147
src/App.vue
View File

@ -1,16 +1,21 @@
<template> <template>
<div id="app"> <div id="app">
{{ loc }} {{ loc }}
<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'" /> <div v-if="loading" class="loading">
<i class="fa-solid fa-spinner fa-spin-pulse"></i>
</div>
<img :src="url + 'manga/'+ (index) +'.webp'" @load="load" />
<div class="page_n">{{ n }}</div> <div class="page_n">{{ n }}</div>
</slide> </slide>
<hooper-navigation slot="hooper-addons"></hooper-navigation> <hooper-navigation slot="hooper-addons"></hooper-navigation>
<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"> <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_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_b"><button v-on:click="page_run(s_b)">2</button></a>
@ -18,12 +23,71 @@
<a :href="this.url + this.s_d"><button v-on:click="page_run(s_d)">4</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> <a :href="this.url + this.s_e"><button v-on:click="page_run(s_e)">5</button></a>
</div> </div>
-->
<div class="page">
<div class="page_data">
<table>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">n</th>
<th scope="col">body</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<a :href="this.url + this.s_a"><img :src="url + 'manga/' + this.s_a + '.webp'" v-on:click="page_run(s_a)"></a>
</th>
<td>0</td>
<td>アイがガララ星に移り住んでからのお話</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="row">
<a :href="this.url + this.s_b"><img :src="url + 'manga/' + this.s_b + '.webp'" v-on:click="page_run(s_a)"></a>
</th>
<td>1</td>
<td>テスト</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="page_title">
<div class="page_data">
<table>
<thead>
<tr>
<th scope="col"><span class="icon-ai"></span></th>
<th scope="col">title</th>
<th scope="col">body</th>
<th scope="col">author</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<a href="https://yui.syui.ai"><img src="https://syui.ai/ai.png" v-on:click="page_run(s_a)"></a>
</th>
<td>yui</td>
<td>不思議な力を持った女の子の物語</td>
<td>syui</td>
</tr>
</tbody>
</table>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import { import {
Hooper, Hooper,
Slide, Slide,
Progress as HooperProgress, Progress as HooperProgress,
Pagination as HooperPagination, Pagination as HooperPagination,
@ -31,6 +95,7 @@ import {
} from 'hooper'; } from 'hooper';
import 'hooper/dist/hooper.css'; import 'hooper/dist/hooper.css';
var page = 107; var page = 107;
var loc = window.location.pathname.split('/').slice(-1)[0]; var loc = window.location.pathname.split('/').slice(-1)[0];
//let loc = window.location.pathname.split('/').slice(0)[3]; //let loc = window.location.pathname.split('/').slice(0)[3];
@ -38,7 +103,7 @@ var loc = window.location.pathname.split('/').slice(-1)[0];
export default { export default {
name: 'App', name: 'App',
components: { components: {
Hooper, Hooper,
Slide, Slide,
HooperProgress, HooperProgress,
HooperPagination, HooperPagination,
@ -46,6 +111,7 @@ export default {
}, },
data() { data() {
return { return {
loading: true,
url: "/", url: "/",
s_a: 0, s_a: 0,
s_b: 17, s_b: 17,
@ -64,12 +130,19 @@ export default {
page_run(s) { page_run(s) {
this.loc = s; this.loc = s;
this.hooperSettings.initialSlide = s; this.hooperSettings.initialSlide = s;
},
load() {
this.loading = false;
} }
} }
}; };
</script> </script>
<style> <style>
body {
margin: 0px;
}
.page_n{text-align:center;height:50px} .page_n{text-align:center;height:50px}
.hooper-pagination{position:fixed} .hooper-pagination{position:fixed}
.hooper-next,.hooper-prev{background-color:rgba(184,207,224,.24)} .hooper-next,.hooper-prev{background-color:rgba(184,207,224,.24)}
@ -83,6 +156,14 @@ export default {
text-align:center; text-align:center;
} }
.hooper-progress {
height: 12px;
}
.hooper-progress-inner {
background-color: #dcd500;
}
button { button {
padding: 10px; padding: 10px;
margin: 5px; margin: 5px;
@ -95,15 +176,16 @@ ul.hooper-track {
padding: 0px; padding: 0px;
} }
img{ .hooper-list img {
width:500px; width:500px;
border: solid 3px #313131;
margin: 20px;
} }
.page { .page {
text-align:center; text-align:center;
margin:50px 20px 50px 20px;
background-color: rgba(184, 207, 224, .24); background-color: rgba(184, 207, 224, .24);
padding: 20px; padding: 50px 0 50px 0;
} }
.page a img { .page a img {
@ -113,14 +195,61 @@ img{
display: block; display: block;
} }
.page a button { .page_title {
text-align:center;
background-color: #313131;
padding: 100px 0 50px 0;
}
.page_title a img {
width:100px;
margin: auto;
display: block;
}
.page_title head, td, tr, th {
padding:10px;
background: #fff;
border: solid 1px #fff;
}
table {
text-align: center;
margin-left: auto;
margin-right: auto;
}
thead, td, tr, th {
padding:10px;
background: #fff;
border: solid 1px #fff;
} }
footer { footer {
text-align: center; text-align: center;
background: #313131;
color: #fff;
padding:50px 0 30px 0;
}
.loading {
text-align: center;
font-size: 30px;
margin-top:100px;
} }
@media screen and (max-width:1000px) { @media screen and (max-width:1000px) {
img{width:100%;} img{ width:100%; }
.page_title a img {
width:100%;
}
.page a img {
width:100%;
}
.hooper-list img {
border: solid 0px #fff;
margin:20px 0 0 0;
width:100%;
}
} }
</style> </style>

1
src/main.js
View File

@ -7,4 +7,3 @@ new Vue({
render: h => h(App) render: h => h(App)
}).$mount('#app') }).$mount('#app')

53
yarn.lock
View File

@ -37,6 +37,30 @@
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.4.tgz#a770e98fd785c231af9d93f6459d36770993fb32" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.4.tgz#a770e98fd785c231af9d93f6459d36770993fb32"
integrity sha512-VLLsx06XkEYqBtE5YGPwfSGwfrjnyPP5oiGty3S8pQLFDFLaS8VwWSIxkTXpcvr5zeYLE6+MBNl2npl/YnfofA== integrity sha512-VLLsx06XkEYqBtE5YGPwfSGwfrjnyPP5oiGty3S8pQLFDFLaS8VwWSIxkTXpcvr5zeYLE6+MBNl2npl/YnfofA==
"@fortawesome/fontawesome-common-types@6.5.1":
version "6.5.1"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz#fdb1ec4952b689f5f7aa0bffe46180bb35490032"
integrity sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==
"@fortawesome/fontawesome-svg-core@^6.5.1":
version "6.5.1"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz#9d56d46bddad78a7ebb2043a97957039fcebcf0a"
integrity sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==
dependencies:
"@fortawesome/fontawesome-common-types" "6.5.1"
"@fortawesome/free-solid-svg-icons@^6.5.1":
version "6.5.1"
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz#737b8d787debe88b400ab7528f47be333031274a"
integrity sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==
dependencies:
"@fortawesome/fontawesome-common-types" "6.5.1"
"@fortawesome/vue-fontawesome@^3.0.6":
version "3.0.6"
resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.6.tgz#c5e627475c10869a091280610c96411d18206f3a"
integrity sha512-akrL7lTroyNpPkoHtvK2UpsMzJr6jXdHaQ0YdcwqDsB8jdwlpNHZYijpOUd9KJsARr+VB3WXY4EyObepqJ4ytQ==
"@hapi/address@2.x.x": "@hapi/address@2.x.x":
version "2.1.4" version "2.1.4"
resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5" resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@ -5436,11 +5460,6 @@ readdirp@~3.6.0:
dependencies: dependencies:
picomatch "^2.2.1" picomatch "^2.2.1"
reflect-metadata@^0.1.10:
version "0.1.13"
resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.13.tgz#67ae3ca57c972a2aa1642b10fe363fe32d49dc08"
integrity sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==
regex-not@^1.0.0, regex-not@^1.0.2: regex-not@^1.0.0, regex-not@^1.0.2:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c" resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
@ -6654,11 +6673,6 @@ vm-browserify@^1.0.1:
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0" resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ== integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
vue-class-component@^6.0.0, vue-class-component@^6.1.0:
version "6.3.2"
resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-6.3.2.tgz#e6037e84d1df2af3bde4f455e50ca1b9eec02be6"
integrity sha512-cH208IoM+jgZyEf/g7mnFyofwPDJTM/QvBNhYMjqGB8fCsRyTf68rH2ISw/G20tJv+5mIThQ3upKwoL4jLTr1A==
vue-hot-reload-api@^2.3.0: vue-hot-reload-api@^2.3.0:
version "2.3.4" version "2.3.4"
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2" resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
@ -6684,15 +6698,6 @@ vue-loader@^15.9.2:
vue-hot-reload-api "^2.3.0" vue-hot-reload-api "^2.3.0"
vue-style-loader "^4.1.0" vue-style-loader "^4.1.0"
vue-loading-template@^1.3.2:
version "1.3.2"
resolved "https://registry.yarnpkg.com/vue-loading-template/-/vue-loading-template-1.3.2.tgz#2f7bd7ae5735c47029e8f1ed774ed45970897775"
integrity sha512-p02Q0cIkGlYSd2B++9JkRnSi4vzbIy3Pd7HOPncFCT5sgXin0clJFCvO8+KqF3JYP+coR8BjMqFEjOJY20jKYA==
dependencies:
vue "^2.5.16"
vue-class-component "^6.0.0"
vue-property-decorator "^6.0.0"
vue-meta@^2.4.0: vue-meta@^2.4.0:
version "2.4.0" version "2.4.0"
resolved "https://registry.yarnpkg.com/vue-meta/-/vue-meta-2.4.0.tgz#a419fb4b4135ce965dab32ec641d1989c2ee4845" resolved "https://registry.yarnpkg.com/vue-meta/-/vue-meta-2.4.0.tgz#a419fb4b4135ce965dab32ec641d1989c2ee4845"
@ -6700,14 +6705,6 @@ vue-meta@^2.4.0:
dependencies: dependencies:
deepmerge "^4.2.2" deepmerge "^4.2.2"
vue-property-decorator@^6.0.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-6.1.0.tgz#ef97bcc1bfe794ec060133ca04a5aca02e808828"
integrity sha512-NM4PYPOkOIO7SFtWiQqVrbp+ORzd7CJXcIz0X710PNW9pxGfbil0/x/ULFympzIUoHXBKN2dqoOQzh6oeMzpTQ==
dependencies:
reflect-metadata "^0.1.10"
vue-class-component "^6.1.0"
vue-style-loader@^4.1.0, vue-style-loader@^4.1.2: vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
version "4.1.3" version "4.1.3"
resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35" resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"
@ -6729,7 +6726,7 @@ vue-template-es2015-compiler@^1.9.0:
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825" resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw== integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
vue@^2.5.16, vue@^2.6.11: vue@^2.6.11:
version "2.7.14" version "2.7.14"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.14.tgz#3743dcd248fd3a34d421ae456b864a0246bafb17" resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.14.tgz#3743dcd248fd3a34d421ae456b864a0246bafb17"
integrity sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ== integrity sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==