基础框架
|
|
@ -0,0 +1,130 @@
|
|||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: #9c7cfa;
|
||||
}
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
/* 头部导航 */
|
||||
.header-box {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0px 3px 2px #807ef3;
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
padding: 0 80px;
|
||||
}
|
||||
.header-box .logo-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 10%;
|
||||
}
|
||||
.header-box .logo {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.logo div {
|
||||
color: #b7cc56;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.header-box .title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #9c7cfa;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
.title-item {
|
||||
margin: 20px;
|
||||
}
|
||||
/* 天气 */
|
||||
.weather-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.weather-three {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 内容主体 start */
|
||||
.main {
|
||||
margin: 45px 0;
|
||||
padding: 0 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.main-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
width: 320px;
|
||||
}
|
||||
.left-one {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
background: url(../img/home/框.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.left-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 20px;
|
||||
color: #7557cc;
|
||||
}
|
||||
.left-title {
|
||||
color: #ffe78f;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-size: 35px;
|
||||
line-height: 64px;
|
||||
margin: 0 60px;
|
||||
}
|
||||
.left-last {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.left-last > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.line {border-bottom: 2px dashed #9C7CFA;margin: 10px 0;}
|
||||
.main-center {
|
||||
margin: 0 20px;
|
||||
width: 60%;
|
||||
}
|
||||
.center-img-box {
|
||||
background: url(../img/home/-s-班级动态.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 40px 60px 150px 60px;
|
||||
}
|
||||
.main-right {
|
||||
display: inline-block;
|
||||
width: 320px;
|
||||
flex-shrink: 0;
|
||||
background: url(../img/home/班级运行情况底框.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/* 内容主体 end */
|
||||
.footer {
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
After Width: | Height: | Size: 488 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 380 B |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 465 B |
|
After Width: | Height: | Size: 459 B |
|
After Width: | Height: | Size: 531 B |
|
After Width: | Height: | Size: 684 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 473 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 530 B |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 851 B |
|
After Width: | Height: | Size: 661 B |
|
After Width: | Height: | Size: 7.9 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 471 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 454 B |
|
After Width: | Height: | Size: 328 B |
|
After Width: | Height: | Size: 439 B |
|
After Width: | Height: | Size: 495 B |
|
After Width: | Height: | Size: 518 B |
|
After Width: | Height: | Size: 512 B |
|
After Width: | Height: | Size: 496 B |
|
After Width: | Height: | Size: 413 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1,230 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title></title>
|
||||
<!-- <script src="https://unpkg.com/vue@next"></script> -->
|
||||
<link rel="stylesheet" type="text/css" href="css/electron.css"/>
|
||||
<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="header-box">
|
||||
<div class="logo-box">
|
||||
<img src="img/home/logo底.png" >
|
||||
<div class="logo">
|
||||
<img src="img/home/logo.png" >
|
||||
<div>都江堰市机关幼儿园</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title-box">
|
||||
<div class="title-item" v-for="(item,index) in titleArr" :key="index">{{item}}</div>
|
||||
</div>
|
||||
<div class="weather-box">
|
||||
<img src="img/weather/1.png" >
|
||||
<div>
|
||||
<div>{{date}}</div>
|
||||
<div class="weather-three">
|
||||
<div>{{temperature}}</div>
|
||||
<div>{{time}}</div>
|
||||
<div>{{week}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div><img src="img/home/icon-设置.png" ></div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="main-left">
|
||||
<div class="left-one">
|
||||
<div class="left-content">
|
||||
<div class="left-title">班级详情</div>
|
||||
<div style="text-align: center;font-size: 16px;font-weight: bold;">中二班</div>
|
||||
<div class="line"></div>
|
||||
<div>
|
||||
<div>老师：罗敏 宋春雪 王愉</div>
|
||||
<div>班级人数：21</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="left-last">
|
||||
<div>
|
||||
<div>0</div>
|
||||
<div>实到</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>0</div>
|
||||
<div>未到</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>0</div>
|
||||
<div>请假</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-one">
|
||||
<div class="left-content">
|
||||
<div class="left-title">宝宝食谱</div>
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<div>早餐</div>
|
||||
<div>午餐</div>
|
||||
<div>晚餐</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="left-last">
|
||||
<div>
|
||||
<img src="" >
|
||||
</div>
|
||||
<div>白米饭、土豆粉蒸肉、肉末豆腐、农家菜汤</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-one">
|
||||
<div class="left-content">
|
||||
<div class="left-title">通知公告</div>
|
||||
<div style="text-align: center;font-size: 16px;font-weight: bold;">中二班</div>
|
||||
<div class="line"></div>
|
||||
<div>
|
||||
<div>老师：罗敏 宋春雪 王愉</div>
|
||||
<div>班级人数：21</div>
|
||||
</div>
|
||||
<div class="" style="display: flex;justify-content: space-between;margin: 10px 0;">
|
||||
<div>2021-11-15</div>
|
||||
<div>
|
||||
<img src="" >15
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-center">
|
||||
<div class="center-img-box">
|
||||
<div style="color: #7253cb;font-size: 20px;text-align: center;">班级动态</div>
|
||||
<div style="overflow: hidden;width: 100%;height: 490px;">
|
||||
<img src="img/seconds/tu-01.png" style="margin-top: 58px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: center;">
|
||||
<div style="background-color: rgba(0,0,0,.3);color: #FFFFFF;border-radius: 50px;position: relative;width: 130px;height: 40px;display: flex;justify-content: center;align-items: center;">
|
||||
<img src="img/home/icon-通知.png" style="width: 40px;height: 30px;" >
|
||||
<div style="position: absolute;right: -2px;top: -5px;width: 20px;height: 20px;background-color: #ff9393;border-radius: 50%;text-align: center;line-height: 20px;">1</div>
|
||||
</div>
|
||||
<div style="background-color: rgba(0,0,0,.3);color: #FFFFFF;border-radius: 50px;position: relative;width: 130px;height: 40px;display: flex;justify-content: center;align-items: center;margin: 0 50px;">
|
||||
<div style="font-weight: bold;">宝宝提醒</div>
|
||||
<div style="position: absolute;right: -2px;top: -5px;width: 20px;height: 20px;background-color: #ff9393;border-radius: 50%;text-align: center;line-height: 20px;">1</div>
|
||||
</div>
|
||||
<div style="background-color: rgba(0,0,0,.3);color: #FFFFFF;border-radius: 50px;position: relative;width: 130px;height: 40px;display: flex;justify-content: center;align-items: center;">
|
||||
<div style="font-weight: bold;">生日提醒</div>
|
||||
<div style="position: absolute;right: -2px;top: -5px;width: 20px;height: 20px;background-color: #ff9393;border-radius: 50%;text-align: center;line-height: 20px;">1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-right">
|
||||
<div>
|
||||
<div>
|
||||
<div class="left-title">今日活动</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<img src="img/home/-s-首页底纹.png" style="width: 100%;" >
|
||||
</div>
|
||||
<!-- <div style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: #FFFFFF;padding: 20px;border-radius: 10px;">
|
||||
<div>
|
||||
<div>班排设备ID：*******</div>
|
||||
<div style="display: flex;align-items: center;">网络链接状态：网络监测（{{onLine?'已连接':'已断开'}}）<img v-if="onLine" src="img/home/icon-链接.png" style="width: 20px;" ></div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
班牌显示模式：
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div style="background-color: #dbdce3;width: 15px;height: 15px;border-radius: 100%;display: flex;justify-content: center;align-items: center;">
|
||||
<span style="display: block;background-color: #000;width: 4px;height: 4px;border-radius: 100%;"></span>
|
||||
</div>
|
||||
欢迎模式
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div style="background-color: #dbdce3;width: 15px;height: 15px;border-radius: 100%;display: flex;justify-content: center;align-items: center;">
|
||||
<span style="display: block;background-color: #000;width: 4px;height: 4px;border-radius: 100%;"></span>
|
||||
</div>
|
||||
班牌模式
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div style="background-color: #dbdce3;width: 15px;height: 15px;border-radius: 100%;display: flex;justify-content: center;align-items: center;">
|
||||
<span style="display: block;background-color: #000;width: 4px;height: 4px;border-radius: 100%;"></span>
|
||||
</div>
|
||||
大数据模式
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
控制操作：
|
||||
<div>刷新</div>
|
||||
<div>返回首页</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script>
|
||||
const App = {
|
||||
data() {
|
||||
return {
|
||||
titleArr:['首页','幼儿园介绍','宝宝活动','出勤详情','宝宝相册','疫情管理'],
|
||||
onLine:navigator.onLine,
|
||||
list:[],
|
||||
city:'',
|
||||
date:'',//2021-12-19
|
||||
week:'',//星期几
|
||||
temperature:'',//天气温度
|
||||
time:'',//当前时间
|
||||
timer:null
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 网络状态
|
||||
updateOnlineStatus(e) {
|
||||
const {type} = e;
|
||||
this.onLine = type === 'online';
|
||||
},
|
||||
// 天气近况
|
||||
weatherEv(){
|
||||
this.dateEv();
|
||||
this.timer = setInterval(()=>{this.dateEv();},1000)
|
||||
var that = this;
|
||||
axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+'成都').then((res)=>{
|
||||
let weatherList = res.data.data.forecast;
|
||||
console.log(weatherList);
|
||||
// 星期几
|
||||
this.week = weatherList[0].date.slice(weatherList[0].date.indexOf('日')+1);
|
||||
// 当天气温
|
||||
this.temperature = `${weatherList[0].low.slice(2,-1)}-${weatherList[0].high.slice(2)}`
|
||||
}).catch((err)=>{
|
||||
console.log(err);
|
||||
})
|
||||
},
|
||||
// 当前时间
|
||||
dateEv(){
|
||||
let date = new Date();
|
||||
// 年
|
||||
let year = date.getFullYear();
|
||||
// 月
|
||||
let month = date.getMonth() + 1;
|
||||
// 日
|
||||
let day = date.getDate();
|
||||
this.date = `${year}-${month}-${day}`;
|
||||
// 时
|
||||
let hour = date.getHours();
|
||||
// 分
|
||||
let minute = date.getMinutes();
|
||||
// 当前时间
|
||||
this.time = `${hour < 10 ? '0'+hour : hour}:${minute < 10 ? '0'+minute : minute}`;
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.weatherEv();
|
||||
window.addEventListener('online',this.updateOnlineStatus);//网络由异常到正常时触发
|
||||
window.addEventListener('offline',this.updateOnlineStatus);//网络由正常到异常时触发
|
||||
}
|
||||
};
|
||||
Vue.createApp(App).mount('#app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||