1
0
card/src/App.vue

133 lines
2.8 KiB
Vue
Raw Normal View History

2023-03-31 19:51:52 +00:00
<template>
<div id="app">
<form @submit.prevent="submit">
<input v-model="id" placeholder="id" value="id">
<input type="submit">
</form>
<div v-if="cards" class="bluesky-card">
<h3>{{ user.data.username }} card list</h3>
<span v-for="ii in cards.data">
<img :src='"https://at.syui.ai/card/card_" + ii.card + ".png"'/>{{ ii.cp }}
</span>
</div>
<div v-if="record" class="bluesky-record">
<li v-for="i in record.data">
<p><span class="text">id : {{ i.id }}</span></p>
<p><span class="text">{{ i.username }}</span></p>
</li>
</div>
</div>
</template>
<script>
import axios from 'axios'
let default_id = "syui.syui.ai";
export default {
name: "App",
metaInfo: {
title: "syui.ai",
},
data () {
return {
card: null,
cards: null,
id: null,
record: null,
url: null,
user: null,
}
},
mounted() {
axios.get("https://cors-card.herokuapp.com/https://api.syui.ai/users",{ crossdomain: true })
.then(response => (this.record = response))
.catch(error => console.log(error));
},
methods: {
submit() {
let url = "https://cors-card.herokuapp.com/https://api.syui.ai/users/" + this.id + "/card";
axios
.get(url,{ crossdomain: true })
.then(response => (this.cards = response));
axios
.get("https://cors-card.herokuapp.com/https://api.syui.ai/users/" + this.id,{ crossdomain: true })
.then(response => (this.user = response));
},
draw(id) {
let url = "https://cors-card.herokuapp.com/https://api.syui.ai/users/" + id + "/card";
axios
.get(url,{ crossdomain: true })
.then(response => (this.cards = response));
}
},
}
</script>
<style>
div#app {
list-style: none;
margin: 100px;
}
.bluesky-avatar img {
width: 55px;
}
span.time {
color: blue;
}
span.name {
font-weight: 700;
background-color: #a3c3ff1a;
padding:10px;
}
span.text {
font-weight: 400;
font-size: 19px;
}
.bluesky-record li {
border-bottom: solid 1px #ccc;
}
.bluesky-record p {
padding:0 20px 0;
}
.bluesky-record {
border: solid 1px #ccc;
border-radius: 10px;
margin: 50px 100px 0 0;
}
a {
color: #00A4E1;
font-weight: '700';
}
footer#footer {
text-align: center;
}
span.text {
word-break: break-all;
}
p.tl-avatar img {
width: 20px;
}
img {
width: 50px;
margin:10px;
}
code {
font-size: 15px;
/*color: #3f89ff;*/
padding: 5px 5px 5px 5px;
background-color: #d4deee2b;
}
li {
list-style-type: none;
}
@media screen and (max-width:1000px) {
div#app{list-style:none;margin:0px}.bluesky-avatar img{width:55px}span.time{color:#00f}span.name{background-color:rgba(163,195,255,.10196078431372549);padding:10px}.bluesky-record li{border-bottom:1px solid #ccc}.bluesky-record p{padding:0 20px 0}.bluesky-record{border:1px solid #ccc;border-radius:10px;margin:0px 0px 0 0}a{color:#3f89ff}footer#footer{text-align:center}
span.text {
word-break: break-all;
}
}
</style>