VUE框架CLI组件天气界面静态实现------VUE框架

<template>
	<div class="card">
		<Search></Search>
		<Weather></Weather>
	</div>
</template>
 
<script>
import Weather from "./components/Weather.vue";
import Search from "./components/Search.vue";
export default {
	name : "App",
	components : {Search,Weather}
}
</script>
 
<style lang="css">
/*公共样式*/
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
 
body {
    background : #222;
}
 
.card {
    width: 70%;
    max-width: 470px;
    background: linear-gradient(135deg, #00feba, #5b548a);
    color: #fff;
    margin: 100px auto 0;
    border-radius: 20px;
    padding: 40px 35px;
    text-align: center;
}
</style>

<template>
    <div class="weather">
        <img src="../assets/images/rain.png" class="weather-icon">
        <h1 class="temp">22°c</h1>
        <h2 class="city">北京</h2>
        <div class="details">
            <div class="col">
                <img src="../assets/images/humidity.png" />
                <div>
                    <p class="humidity">50%</p>
                    <p>湿度</p>
                </div>
            </div>
            <div class="col">
                <img src="../assets/images/wind.png">
                <div>
                    <p class="wind">15米/秒</p>
                    <p>风速</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name : "Weather"
}
</script>
 
<style lang="css" scoped>
/*天气样式*/
.weather-icon {
    width: 170px;
    margin-top: 30px;
}
 
.weather h1 {
    font-size: 80px;
    font-weight: 500;
}
 
.weather h2 {
    font-size: 45px;
    font-weight: 400;
    margin-top: -10px;
}
 
.details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-top: 50px;
}
 
.col {
    display: flex;
    align-items: center;
    text-align: left;
}
 
.col img {
    width: 40px;
    margin-right: 10px;
}
 
.humidity, .wind {
    font-size: 28px;
    margin-top: -6px;
}
</style>

<template>
    <div class="search">
        <input type="text" placeholder="请输入城市名字" spellcheck="false"/>
        <button><img src="../assets/images/search.png"/></button>
    </div>
</template>
 
<script>
export default {
    name : "Search"
}
</script>
 
<style lang="css" scoped>
/*搜索框样式*/
.search {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
 
.search input {
    border: 0;
    outline: 0;
    background: #ebfffc;
    color: #555;
    padding: 10px 25px;
    height: 60px;
    border-radius: 30px;
    flex: 1;
    margin-right: 16px;
    font-size: 18px;
}
 
.search button{
    border: 0;
    outline: 0;
    background: #ebfffc;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    cursor: pointer;
}
 
.search button img {
    width: 16px;
}
</style>