231 lines
8.4 KiB
HTML
231 lines
8.4 KiB
HTML
|
<!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>
|