Compare commits
merge into: wangwei:master
wangwei:15115443481-patch-1
wangwei:master
wangwei:wangwei-patch-1
pull from: wangwei:15115443481-patch-1
wangwei:15115443481-patch-1
wangwei:master
wangwei:wangwei-patch-1
5 Commits
5 Commits
2 changed files with 97 additions and 0 deletions
Unified View
Diff Options
-
+97 -0index-2.html
-
BIN全题型--导出试卷测试1111.zip
+ 97
- 0
index-2.html
View File
| @@ -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> | |||||