wangwei
/
新的项目测试

<!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]">
                    &nbsp;&nbsp;
                    <span>{{ result.name }}</span>
                    &nbsp;&nbsp;
                    <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>