flex布局写的移动端app,智能家居管理系统app前端页面.资源-CSDN文库

共37个文件

png：28个

html：3个

css：3个

ajax

javascript

需积分: 2 130 浏览量 2022-04-07 14:19:26 上传评论 2 收藏 291KB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

loT-App.zip （37个子文件）

loT-App

css

reset.css 2KB

common.css 2KB

index.css 2KB

images

furnishing_2.png 43KB

down_1_icon.png 963B

home-n.png 3KB

furnishing_4.png 5KB

sy.png 7KB

close_2_icon.png 1KB

add_icon.png 695B

furnishing_6.png 8KB

right.png 4KB

yy.png 6KB

shebei-n.png 7KB

xy.png 4KB

furnishing_1.png 76KB

sz.png 8KB

ly.png 6KB

furnishing_3.png 7KB

shebei-a.png 7KB

hc.png 3KB

furnishing_5.png 4KB

equr_n_icon.png 1KB

wode-a.png 6KB

bz.png 9KB

close_1_icon.png 1KB

down_2_icon.png 573B

qt.png 9KB

gx.png 7KB

wode-n.png 6KB

home-a.png 3KB

data

data.json 1KB

index.html 9KB

jquery.min.js 94KB

template-web.js 17KB

device.html 5KB

mine.html 4KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./css/reset.css" /> <link rel="stylesheet" href="./css/common.css" /> <link rel="stylesheet" href="./css/index.css" /> </head> <body> <div class="index-content"> <header class="index-header white"> <div class="flex ai-center"> <h5 class="f-40">辛辛和红红的家</h5> <img class="down-icon ml-12" src="./images/down_2_icon.png" alt="" /> </div> <p class="f-26 show-btn mt-12">6台设备</p> <button class="add-btn"> <img src="./images/add_icon.png" alt="" /> </button> </header> <nav class="index-nav f-28 c-gray f-weight"> <p class="nav-active">全部</p> <p>卧室</p> <p>2号卧室</p> <p>厨房</p> <p>客厅</p> <p>卫生间</p> <img src="./images/down_1_icon.png" alt="" /> </nav> <div class="block-list flex fl-wrap">  </div> </div>  <div class="footer fl-ar"> <a href="#" ><img src="./images/home-a.png" alt="" /> <p class="blue-1">首页</p> </a> <a href="./device.html" ><img src="./images/shebei-n.png" alt="" /> <p>设备</p> </a> <a href="./mine.html" ><img src="./images/wode-n.png" alt="" /> <p>我的</p> </a> </div> <script src="./js/jquery.min.js"></script> <script src="./js/template-web.js"></script>  <script id="tpl" type="text/html">  {{each data}} <div class="block-icon" wz="{{$value.wz}}"> <div class="flex f-weight j-s-b"> <p class="f-28 black-1">{{$value.title}}</p> <p class="f-24 gray-90">{{$value.pos}}</p> </div> <div class="flex j-s-b ai-center mt-30"> <img class="source" src="{{$value.source}}" alt="" /> {{if $value.info}} <div class="f-weight"> <p class="f-50"> {{$value.info.PM2dot5}} <span class="blue-1 f-26">{{$value.info.level}}</span> </p> <p class="f-24 gray-90">PM2.5/h</p> </div> {{else}} <div class="close-btn {{$value.status?'is-open':''}}"> <img src="{{$value.status?'./images/close_1_icon.png':'./images/close_2_icon.png'}}" alt="" /> </div> {{/if}} </div> </div> {{/each}} </script>  <script> $.ajax({ //记得开启服务器 //接口地址 url: "./data/data.json", method: "GET", success: function (res) { // console.log(res);//检查是否请求成功 render(res); }, }); function render(res) { var html = template("tpl", res); $(".block-list").html(html); } </script>  <script> $(".index-nav").on("click", function () { var tab_list = document.querySelector(".index-nav "); var lis = tab_list.querySelectorAll(".index-nav p"); var items = document.querySelectorAll(".block-icon"); //for循环绑定事件 for (var i = 0; i < lis.length; i++) { //给小p设置索引号 lis[i].setAttribute("data-index", i); //以data-开头的均为自定义属性，自己设置也要规范书写 lis[i].onclick = function () { //1.点击某个，当前这个底色变蓝色，排他思想 for (var i = 0; i < lis.length; i++) { //干掉所有人，清除p的class类 lis[i].className = ""; } //留下自己 this.className = "nav-active"; //2.显示下面内容模块 var index = this.getAttribute("data-index"); //得到当前点击的index号 //干掉所有人 console.log(index); for (var i = 0; i < items.length; i++) { items[i].style.display = "none"; } //留下我自己 if (index == 0) { for (var i = 0; i < items.length; i++) { items[i].style.display = "block"; } } else { for (var i = 0; i < items.length; i++) { var wz = items[i].getAttribute("wz"); console.log(wz); if (wz == index) { items[i].style.display = "block"; } } } }; } }); // 设备开关 $(".block-list").on("mousemove", fu