Merge branch 'main' of http://42.192.7.176:3000/suojin/physical_distribution into main
xuechunyuan
3 years ago
commit
b43616cf14
11 changed files with 388 additions and 4 deletions
Binary file not shown.
@ -0,0 +1,35 @@ |
||||
@font-face { |
||||
|
||||
font-family: 'ALHY'; |
||||
|
||||
src: url('../font/阿里汉仪智能黑体.TTF'); |
||||
|
||||
font-weight: normal; |
||||
|
||||
font-style: normal; |
||||
|
||||
} |
||||
|
||||
@font-face { |
||||
|
||||
font-family: 'FZSK'; |
||||
|
||||
src: url('../font/方正尚酷简体.TTF'); |
||||
|
||||
font-weight: normal; |
||||
|
||||
font-style: normal; |
||||
|
||||
} |
||||
|
||||
@font-face { |
||||
|
||||
font-family: '04B'; |
||||
|
||||
src: url('../font/04B_0.TTF'); |
||||
|
||||
font-weight: normal; |
||||
|
||||
font-style: normal; |
||||
|
||||
} |
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 885 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 68 KiB |
@ -0,0 +1,330 @@ |
||||
<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> |
||||
Loading…
Reference in new issue