You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
331 lines
7.7 KiB
331 lines
7.7 KiB
3 years ago
|
<template>
|
||
|
|
<div class="container_box">
|
||
|
|
<div class="top_con">
|
||
|
|
<div class="left_con">
|
||
|
|
<div class="left_txt">
|
||
|
|
<div class="time_text">{{ time }}</div>
|
||
|
|
<div class="bittom_left">
|
||
|
|
<div class="week_txt">
|
||
|
|
<span>{{ date }}</span
|
||
|
|
><span style="margin-left: 0.1rem">{{ week }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="uodate_time">数据更新时间:<span class="time_txt">2023/01/17</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="center_con">
|
||
|
|
<div class="con_title">莒县物流服务中心</div>
|
||
|
|
</div>
|
||
|
|
<div class="right_con">
|
||
|
|
<div class="right_txt">
|
||
|
|
<div class="left">
|
||
|
|
<img src="~@/assets/img/pos.png" alt="" />
|
||
|
|
<div class="pos_text">日照市莒县</div>
|
||
|
|
</div>
|
||
|
|
<div class="bottom_right">
|
||
|
|
<img src="~@/assets/img/weather.png" alt="" />
|
||
|
|
<div>
|
||
|
|
<span>{{ temp }}℃</span>
|
||
|
|
<span>{{ weather }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="left_box">
|
||
|
|
<div class="left_top">
|
||
|
|
<div class="top_title">
|
||
|
|
<div class="left_tit">
|
||
|
|
<span class="txt_name">收件量</span>
|
||
|
|
<span class="name">RECEIVING</span>
|
||
|
|
</div>
|
||
|
|
<div class="right_tit">
|
||
|
|
<div class="title_txt">收</div>
|
||
|
|
<div class="title_txt">发</div>
|
||
|
|
<div class="title_txt">到</div>
|
||
|
|
<div class="title_txt">派</div>
|
||
|
|
<div class="title_txt">签</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="left_bottom"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { queryWeath } from "@/api/base";
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
day: "",
|
||
|
|
time: "",
|
||
|
|
date: "",
|
||
|
|
week: "",
|
||
|
|
temp: "",
|
||
|
|
weather: "",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.getTime();
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
queryWeath().then((res) => {
|
||
|
|
this.temp = res.result.now.temp;
|
||
|
|
this.weather = res.result.now.text;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
fn(str) {
|
||
|
|
let num = null;
|
||
|
|
str >= 10 ? (num = str) : (num = "0" + str);
|
||
|
|
return num;
|
||
|
|
},
|
||
|
|
getWeek(e) {
|
||
|
|
let arr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
|
||
|
|
this.week = arr[e];
|
||
|
|
},
|
||
|
|
getTime() {
|
||
|
|
//获取当前时间
|
||
|
|
this.timer = setInterval(() => {
|
||
|
|
var date = new Date();
|
||
|
|
var year = date.getFullYear(); //当前年份
|
||
|
|
var month = date.getMonth(); //当前月份
|
||
|
|
var data = date.getDate(); //天
|
||
|
|
var hours = date.getHours(); //小时
|
||
|
|
var minute = date.getMinutes(); //分
|
||
|
|
var second = date.getSeconds(); //秒
|
||
|
|
this.day = date.getDay(); //获取当前星期几
|
||
|
|
this.getWeek(this.day);
|
||
|
|
this.time = this.fn(hours) + ":" + this.fn(minute) + ":" + this.fn(second);
|
||
|
|
this.date = year + "/" + (month + 1) + "/" + data;
|
||
|
|
}, 1000);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import "~@/assets/font/font.css";
|
||
|
|
.container_box {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: absolute;
|
||
|
|
background: url(~@/assets/img/background.jpg);
|
||
|
|
background-size: 100% 100%;
|
||
|
|
position: relative;
|
||
|
|
z-index: 9;
|
||
|
|
|
||
|
|
.top_con {
|
||
|
|
width: 100%;
|
||
|
|
height: 10%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
|
||
|
|
.left_con {
|
||
|
|
width: 20%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
height: 100%;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.left_txt {
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
flex-direction: column;
|
||
|
|
height: 55%;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.time_text {
|
||
|
|
display: flex;
|
||
|
|
margin-left: 0.38rem;
|
||
|
|
font-size: 0.34rem;
|
||
|
|
font-family: "04B";
|
||
|
|
color: #ffffff;
|
||
|
|
box-shadow: -4px 5px 10px 0px rgb(64 49 49 / 56%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.bittom_left {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.week_txt {
|
||
|
|
font-size: 0.14rem;
|
||
|
|
letter-spacing: 0px;
|
||
|
|
color: #ffffff;
|
||
|
|
margin-left: 0.38rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.uodate_time {
|
||
|
|
font-family: "FZSK";
|
||
|
|
font-size: 0.14rem;
|
||
|
|
font-weight: normal;
|
||
|
|
font-stretch: normal;
|
||
|
|
letter-spacing: 0px;
|
||
|
|
color: #ffffff;
|
||
|
|
box-shadow: -1px 2px 3px 0px rgb(64 49 49 / 60%);
|
||
|
|
opacity: 0.8;
|
||
|
|
color: #fff;
|
||
|
|
.time_txt {
|
||
|
|
font-size: 0.16rem;
|
||
|
|
font-family: "04B";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.center_con {
|
||
|
|
width: 60%;
|
||
|
|
height: 80%;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
.con_title {
|
||
|
|
font-family: "FZSK";
|
||
|
|
font-size: 0.44rem;
|
||
|
|
font-weight: normal;
|
||
|
|
font-style: italic;
|
||
|
|
font-stretch: normal;
|
||
|
|
letter-spacing: 0px;
|
||
|
|
color: #ffffff;
|
||
|
|
// box-shadow: -0.04rem 0.05rem 0.1rem 0px
|
||
|
|
// rgba(64, 49, 49, 0.56);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.right_con {
|
||
|
|
width: 17%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-left: 3%;
|
||
|
|
|
||
|
|
.right_txt {
|
||
|
|
width: 100%;
|
||
|
|
height: 53%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.left {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-end;
|
||
|
|
img {
|
||
|
|
width: 0.13rem;
|
||
|
|
height: 0.16rem;
|
||
|
|
margin-right: 0.1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pos_text {
|
||
|
|
font-family: "FZSK";
|
||
|
|
font-size: 0.16rem;
|
||
|
|
color: #ddecff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom_right {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-right: 0.38rem;
|
||
|
|
img {
|
||
|
|
width: 0.8rem;
|
||
|
|
height: 0.8rem;
|
||
|
|
}
|
||
|
|
div {
|
||
|
|
height: 100%;
|
||
|
|
font-family: "FZSK";
|
||
|
|
font-size: 0.16rem;
|
||
|
|
color: #ffffff;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
div {
|
||
|
|
font-size: 0.16rem;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.left_box {
|
||
|
|
width: 24%;
|
||
|
|
height: 80%;
|
||
|
|
position: absolute;
|
||
|
|
top: 14%;
|
||
|
|
left: 3%;
|
||
|
|
|
||
|
|
.left_top {
|
||
|
|
width: 100%;
|
||
|
|
height: 55%;
|
||
|
|
|
||
|
|
.top_title {
|
||
|
|
width: 100%;
|
||
|
|
height: 10%;
|
||
|
|
background: url(~@/assets/img/tit_bag.png);
|
||
|
|
background-size: 100% 100%;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.left_tit {
|
||
|
|
width: 50%;
|
||
|
|
height: 100%;
|
||
|
|
font-size: 0.1rem;
|
||
|
|
color: #fff;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.txt_name {
|
||
|
|
margin: 0 0.1rem 0 0.6rem;
|
||
|
|
font-family: "FZSK";
|
||
|
|
font-size: 0.22rem;
|
||
|
|
letter-spacing: 0px;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.name {
|
||
|
|
font-family: "FZSK";
|
||
|
|
color: #ffffff;
|
||
|
|
box-shadow: -4px 5px 10px 0px rgba(39, 8, 8, 0.81);
|
||
|
|
opacity: 0.6;
|
||
|
|
margin-bottom: 0.1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.right_tit {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-right: 0.18rem;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.title_txt {
|
||
|
|
width: 0.4rem;
|
||
|
|
height: 0.3rem;
|
||
|
|
margin: 0 0.03rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
content: "";
|
||
|
|
width: 0.4rem;
|
||
|
|
height: 0.3rem;
|
||
|
|
position: absolute;
|
||
|
|
border: solid 1px #127cff;
|
||
|
|
top: 50%;
|
||
|
|
transform: skew(-10deg) translateY(-50%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
div {
|
||
|
|
font-size: 0.18rem;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|