106 lines
2.0 KiB
Vue
106 lines
2.0 KiB
Vue
|
|
<template>
|
|
<div id="app">
|
|
<div class="top">
|
|
<div class="topLeft">
|
|
<div style="color:rgb(56,171,192)">
|
|
2023-02-09
|
|
</div>
|
|
|
|
|
<div>
|
|
2:37:05
|
|
</div>
|
|
</div>
|
|
<div class="topCenter">
|
|
<div class="topText">
|
|
<img src="./assets/images/topText.png"/>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="topRight">
|
|
<div>
|
|
天气 :
|
|
<img src="./assets/weather/sun.png"/>
|
|
多云
|
|
</div>
|
|
<div style="color:rgb(57,173,194)">| 5~25℃</div>
|
|
</div>
|
|
</div>
|
|
<div class="main">
|
|
<router-view />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'App',
|
|
components: {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import "./assets/index.css";
|
|
#app {
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-align: center;
|
|
/* background: url("./assets/images/bj1.png") no-repeat; */
|
|
/* background-size: 100% 100%; */
|
|
background: #040f26;
|
|
}
|
|
body{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.top{
|
|
width: 100%;
|
|
height: 8.6%;
|
|
display: flex;
|
|
jjustify-content: space-evenly;
|
|
.topLeft{
|
|
width: 11%;
|
|
height: 55%;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-content: space-evenly;
|
|
font-size: 20px;
|
|
}
|
|
.topCenter{
|
|
width: 76%;
|
|
height: 100%;
|
|
background: url("./assets/images/topBg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
.topText{
|
|
height: 65%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.topRight{
|
|
width: 12%;
|
|
height: 50%;
|
|
color:#ffffff;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.main{
|
|
height: calc(100% - 8.6%);
|
|
width: 100%;
|
|
position: relative;
|
|
top: -3.8%;
|
|
}
|
|
</style>
|