|
|
|
@@ -0,0 +1,97 @@ |
|
|
|
<!DOCTYPE html> |
|
|
|
<html> |
|
|
|
<head> |
|
|
|
<meta charset="utf-8"> |
|
|
|
<title>垃圾分类查询助手</title> |
|
|
|
<style> |
|
|
|
.search, .result { |
|
|
|
width: 720px; |
|
|
|
margin: 50px auto; |
|
|
|
} |
|
|
|
.search > input { |
|
|
|
width: 520px; |
|
|
|
border: none; |
|
|
|
outline: none; |
|
|
|
text-align: center; |
|
|
|
font-size: 36px; |
|
|
|
line-height: 36px; |
|
|
|
border-bottom: 1px solid gray; |
|
|
|
margin: 0 20px; |
|
|
|
} |
|
|
|
.search button { |
|
|
|
background-color: red; |
|
|
|
color: white; |
|
|
|
font-size: 28px; |
|
|
|
border: none; |
|
|
|
outline: none; |
|
|
|
width: 120px; |
|
|
|
} |
|
|
|
.result > p, .result > div { |
|
|
|
width: 640px; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
.result > p, .result span { |
|
|
|
text-align: left; |
|
|
|
font-size: 28px; |
|
|
|
} |
|
|
|
.result img { |
|
|
|
vertical-align: middle; |
|
|
|
} |
|
|
|
.explain { |
|
|
|
font-size: 12px; |
|
|
|
color: darkgray; |
|
|
|
} |
|
|
|
.result .pre { |
|
|
|
font-size: 16px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
<div id="app"> |
|
|
|
<div class="search"> |
|
|
|
<input type="text" placeholder="请输入垃圾名字" v-model.trim="word" @keydown.enter="search()"> |
|
|
|
<button @click="search()">查询</button> |
|
|
|
</div> |
|
|
|
<div class="result"> |
|
|
|
<p v-if="searched && !results">没有对应的查询结果</p> |
|
|
|
<div v-for="result in results"> |
|
|
|
<p> |
|
|
|
<img :src="'images/' + pictures[result.type]" width="56" :alt="types[result.type]"> |
|
|
|
|
|
|
|
<span>{{ result.name }}</span> |
|
|
|
|
|
|
|
<span class="pre" v-if="result.aipre == 1">（预测结果）</span> |
|
|
|
</p> |
|
|
|
<p class="explain">说明：{{ result.explain }}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> |
|
|
|
<script> |
|
|
|
new Vue({ |
|
|
|
el: '#app', |
|
|
|
data: { |
|
|
|
word: '', |
|
|
|
searched: false, |
|
|
|
types: ['可回收物', '有害垃圾', '厨余垃圾', '其他垃圾'], |
|
|
|
pictures: ['recyclable.png', 'harmful-waste.png', 'kitchen-waste.png', 'other-waste.png'], |
|
|
|
results: [] |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
search() { |
|
|
|
if (this.word.trim().length > 0) { |
|
|
|
let key = 'e8c5524dd2a365f20908ced735f8e480' |
|
|
|
let url = `http://api.tianapi.com/txapi/lajifenlei/?key=${key}&word=${this.word}` |
|
|
|
fetch(url) |
|
|
|
.then(resp => resp.json()) |
|
|
|
.then(json => { |
|
|
|
this.searched = true |
|
|
|
this.results = json.newslist |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
</script> |
|
|
|
</body> |
|
|
|
</html> |
15115443481
高级云脑研发工程师
高级云脑研发工程师