TP5+VUE+AXIOS 项目构建初试 - - php中文网博客

<template>

<div id="app">

<h3>{{country}}疫情</h3>

<p class="txt">来源：各地官方通报及权威媒体报道</p>

<p class="txt">更新：{{update_time}}</p>

<div class="flexbox">

<div class="item">

<div class="red bold">{{confirmedCount}}</div>

<div class="gray tittle">累计确诊</div>

</div>

<div class="item">

<div class="red bold">{{currentConfirmedCount}}</div>

<div class="gray tittle">现确诊</div>

</div>

<div class="item">

<div class="gray bold">{{deadCount}}</div>

<div class="gray tittle">死亡

</div>

</div>

<div class="item">

<div class="green bold">{{curedCount}}</div>

<div class="gray tittle">治愈</div>

</div>

</div>

</div>

</template>

<script>

export default {

name: 'App',

data () {

return {

country: '美国',

update_time: '',

confirmedCount: 0,

currentConfirmedCount: 0,

deadCount: 0,

curedCount: 0

}

},

created () {

this.$axios.get(this.$host + 'mytestt/index').then(res => {

const data = res.data

this.curedCount = data[0].curedCount

this.deadCount = data[0].deadCount

this.currentConfirmedCount = data[0].currentConfirmedCount

this.confirmedCount = data[0].confirmedCount

this.update_time = data.update_time

this.country = data[0].name

})

.catch(res => {

console.log(res)

})

},

methods: {

}

}

</script>

<style>

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

</style>

<style scoped>

.txt {

font-size: 14px;

color: grey;

}

.flexbox {

margin-bottom: 10px;

width: 100%;

height: 80px;

background-color: lightgray;

border-radius: 5px;

display: flex;

justify-content: center;

align-items: center;

}

.item {

flex-direction: column;

display: flex;

width: 80px;

height: 80px;

margin: 0 50px;

/* border:1px solid red; */

justify-content: center;

align-items: center;

}

.red {

color: #cc0000

}

.green {

color: #42B983;

}

.gray {

color: gray

}

.tittle {

font-size: 14px;

}

.bold {

font-weight: 600;

font-size: 18px;

}

</style>