diff --git a/App.vue b/App.vue
index 6114a62..70c97dc 100644
--- a/App.vue
+++ b/App.vue
@@ -30,11 +30,13 @@
 <style lang="scss">
 	/*每个页面公共css */
 	@import '@/uni_modules/uni-scss/index.scss';
-  @import "@/uni_modules/uview-ui/index.scss";
+  	@import "@/uni_modules/uview-ui/index.scss";
 	/* #ifndef APP-NVUE */
 	@import '@/static/customicons.css';
 	// 设置整个项目的背景色
-	page {
+	page{
+		width: 100%;
+		height: 100%;
 		// background: linear-gradient(-180deg, #64acf0 0%, #ffffff 62%,#EEF3F6 70%);
 	}
 
diff --git a/main.js b/main.js
index 75e50ad..722d53d 100644
--- a/main.js
+++ b/main.js
@@ -9,8 +9,8 @@ import {
 
 Vue.config.productionTip = false
 uni.$http = $http
-// $http.baseUrl = 'http://local.gunshiiot.com:18083'
 $http.baseUrl = 'http://36.139.207.50:18083'
+// $http.baseUrl = 'http://223.75.53.124:8002/chibirsvr/sys'
 // 请求拦截器
 $http.beforeRequest = function(options) {
 	// uni.showLoading({
diff --git a/pages.json b/pages.json
index 2916b29..a59c961 100644
--- a/pages.json
+++ b/pages.json
@@ -145,6 +145,14 @@
       },
       "onMessage": "handleMessage"
     },
+    {
+      "path": "pages/videoPage/index",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      },
+      "onMessage": "handleMessage"
+    },
     {
       "path": "pages/rainDetail/rainDetail",
       "style": {
@@ -252,12 +260,6 @@
         "selectedIconPath": "static/tabs/home2.png",
         "text": "首页"
       },
-      {
-        "pagePath": "pages/addressBook/addressBook",
-        "iconPath": "/static/tabs/phone_icon@2x.png",
-        "selectedIconPath": "static/tabs/phone_icon@2x2.png",
-        "text": "通讯录"
-      },
       {
         "pagePath": "pages/mypage/mypage",
         "iconPath": "/static/images/my2_icon@2x.png",
diff --git a/pages/homeIndex/forecast24.vue b/pages/homeIndex/forecast24.vue
new file mode 100644
index 0000000..be3cc27
--- /dev/null
+++ b/pages/homeIndex/forecast24.vue
@@ -0,0 +1,296 @@
+<template>
+    <view class="info_24">
+        <div class="heart">
+        <p class="title">
+            <span class="line"></span><span class="h4">24小时天气预报</span>
+        </p>
+        </div>
+        <div class="chartChange fl">
+        <div class="chart_tit" @click="changeTable">
+            <image
+            style="vertical-align: middle"
+            src="../../static/tabs/chartcolumn@2x.png"
+            mode="aspectFit"
+            ></image>
+            <span>图表</span>
+        </div>
+        </div>
+
+        <div class="imgs" style="height: 100%; text-align: center">
+        <!--  24h天气预报图像-->
+        <image
+            v-if="!changeBool && imgList.img24h"
+            :src="imgList.img24h.url"
+            mode="aspectFit"
+            @click="previewImage(imgList.img24h.url)"
+        ></image>
+        <!-- 表格-->
+        <div v-else class="tableBox">
+            <div v-if="!loading" class="table_div">
+                <div class="table_cur">
+                    <table style="width: 100%">
+                        <tr>
+                            <th style="width: 50px; color: #59a7ff">序号</th>
+                            <th style="width: 70%; color: #59a7ff">水库</th>
+                            <th style="width: 50%; color: #59a7ff">24小时降雨量(mm)</th>
+                        </tr>
+                        <div
+                            style="max-height: 260px; overflow-y: auto"
+                            v-if="tableData.data"
+                        >
+                            <tr
+                            v-for="(item, index) in tableData.data.data"
+                            :key="index"
+                            >
+                            <td style="width: 62px">{{ index + 1 }}</td>
+                            <td style="width: 70%">
+                                {{ item.name }}
+                            </td>
+                            <td style="width: 50%">{{ item.drp }}</td>
+                            </tr>
+                        </div>
+                    </table>
+                </div>
+            </div>
+            <div v-else style="color: #b8b8b8; width: 100%; margin: 130px auto;">加载中...</div>
+        </div>
+        </div>
+    </view>
+</template>
+
+<script>
+
+
+import moment from "moment";
+export default {
+    data() {
+        return {
+            changeBool: false,
+            imgList: {},
+            tableData: [],
+            loading:false,
+            tm:null,
+        };
+    },
+    methods: {
+        async getWeatherArea(tm) {
+            this.loading = true
+            try {
+                const res = await uni.$http.post("/gunshiApp/xfflood/weather/area", { tm });
+                console.log(res);
+                this.tableData = res;
+                this.loading = false
+            } catch (e) {
+                uni.$showMsg();
+            }
+        },
+        async getImgs() {
+          uni.request({
+            url: "http://223.75.53.124:8005/grb/latest",
+            success: (res) => {
+              const myTm = res.data.data.tm;
+              if (myTm) {
+                uni.request({
+                  url: "http://223.75.53.124:8005/grb/rainimglist",
+                  data: {
+                    tm: moment(myTm).format("YYYYMMDDHH"),
+                  },
+                  success: (res) => {
+                    this.imgList = res.data.data;
+                    let tm = moment().add(1, "days").format("MM月DD日");
+                    let tm2 = moment().format("MM月DD日");
+                    this.imgData = [`${tm2}08时`, `${tm}08时`];
+                  },
+                });
+              }
+            },
+          });
+        },
+        changeTable(val) {
+          this.changeBool = !this.changeBool;
+          if (val && this.tm) {
+            this.getWeatherArea(this.tm);
+          }
+        },
+        previewImage(item) {
+          uni.previewImage({
+            urls: [item],
+            longPressActions: {
+              itemList: ["发送给朋友", "保存图片", "收藏"],
+              success: function (data) {
+                console.log(
+                  "选中了第" +
+                    (data.tapIndex + 1) +
+                    "个按钮,第" +
+                    (data.index + 1) +
+                    "张图片"
+                );
+              },
+              fail: function (err) {
+                console.log(err.errMsg);
+              },
+            },
+          });
+        },
+        getDataTime() {
+            let d1 = moment().format("YYYYMMDD");
+            let h1 = moment().format("HH") >= 20 ? "20" : "08";
+            this.tm = d1 + h1;
+        },
+    },
+    // 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
+    created() {
+        this.getImgs();
+        this.getDataTime();
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+/* 24小时 */
+.chartChange {
+  text-align: center;
+  margin: 16rpx 0;
+}
+.chart_tit {
+  width: 129rpx;
+  height: 43rpx;
+  background: #d3e1ff;
+  border-radius: 20rpx;
+  color: #3380ff;
+}
+
+.chart_tit image {
+  margin-right: 10rpx;
+  width: 36rpx;
+  height: 30rpx;
+}
+
+.table_h {
+  display: flex;
+  text-align: center;
+  height: 24px;
+  /* position: absolute;
+    top: 0;
+    right: 0; */
+}
+.info_24 {
+  padding: 15px;
+  background-color: #fff;
+  margin-bottom: 12rpx;
+  box-shadow: 0px 0px 5px #eee;
+}
+.heart {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.fl {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title .line {
+  border: 2px solid #3380ff;
+  border-radius: 3rpx;
+  margin-right: 20rpx;
+}
+.title .h4 {
+  font-weight: 400;
+  font-size: 32rpx;
+  color: #121b3d;
+}
+.time {
+  font-weight: 400;
+  font-size: 24rpx;
+  color: #a2a2a2;
+}
+
+.g1 {
+  color: #545556;
+}
+.ye {
+  color: #ff1717;
+  /* font-weight: 600; */
+}
+.b1 {
+  color: #3380ff;
+  padding: 0 2px;
+}
+
+.uni-group {
+  display: flex;
+  align-items: center;
+}
+
+/* 表格 */
+.tableBox {
+  width: 100%;
+  position: relative;
+}
+
+.leftTab {
+  width: 80px;
+  /* border-bottom: 1px solid #ccc; */
+}
+.rightTab {
+  width: 80px;
+  /* border: 1px solid #ccc;
+    border-radius: 0 3px 3px 0;
+    border-left: 0; */
+}
+.activetextTypeTab,
+.activetextTypeTab:hover {
+  border-bottom: 3rpx solid #2286f6;
+  color: #026be0;
+}
+.table_div {
+  widows: 100%;
+  height: 100%;
+  max-width: calc(100% - 0px);
+  max-height: calc(100vh - 24px);
+  flex: 1;
+  // padding-top: 30px;
+  overflow-x: scroll;
+}
+/*table样式*/
+.table_cur {
+  width: 100%;
+  empty-cells: show;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+.table_cur tr {
+  display: flex;
+  line-height: 56rpx;
+}
+.table_cur th {
+  height: 56rpx;
+  color: #2f4056;
+  background: #f5f6f8;
+  font-size: 14px;
+  font-weight: bold;
+  padding: 0 10px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  text-align: center !important;
+}
+
+.table_cur td {
+  height: 56rpx;
+  border-bottom: 1px solid #e5e9f2;
+  font-size: 14px;
+  color: #2f4056;
+  padding: 0 10px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  text-align: center !important;
+}
+/*table样式 end*/
+.noData {
+  width: 100px;
+}
+
+</style>
+  
\ No newline at end of file
diff --git a/pages/homeIndex/headerUser.vue b/pages/homeIndex/headerUser.vue
new file mode 100644
index 0000000..d80ecb5
--- /dev/null
+++ b/pages/homeIndex/headerUser.vue
@@ -0,0 +1,103 @@
+<template>
+    <view class="info">
+        <div class="left">
+            <div class="icon">
+            <image
+                style="width: 100%; height: 100%; border-radius: 50%"
+                :src="default_src"
+                mode="aspectFill"
+            ></image>
+            </div>
+            <div class="info_name">
+            <div v-if="userList.data">{{ userList.data.userName }}</div>
+            <div v-if="userList.data">
+                {{ userList.data.orgList[0].orgName || "" }}
+            </div>
+            </div>
+        </div>
+        <div class="right">
+            <div>{{ monthDay }}</div>
+            <div>{{ dataType[dayOfWeek] }}</div>
+        </div>
+    </view>
+</template>
+
+<script>
+const dataType = {
+  Monday: "星期一",
+  Tuesday: "星期二",
+  Wednesday: "星期三",
+  Thursday: "星期四",
+  Friday: "星期五",
+  Saturday: "星期六",
+  Sunday: "星期天",
+};
+
+import moment from "moment";
+export default {
+    data() {
+        return {
+            monthDay: "",
+            dayOfWeek:"",
+            dataType,
+            default_src: uni.getStorageSync("avatar"),
+            userList: {},
+        };
+    },
+    methods: {
+        async getSwiperList() {
+            try {
+                const res = await uni.$http.get("/gunshiApp/xfflood/getLoginInfo");
+                console.log("--c-", res.data);
+                this.userList = res.data;
+
+                console.log("--cb-", this.userList);
+            } catch (e) {
+                uni.$showMsg();
+            }
+        },
+        getDataTime() {
+            this.monthDay = moment().format("MM月DD日");
+            this.dayOfWeek = moment().format("dddd");
+        },
+    },
+    // 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
+    created() {
+        this.getSwiperList();
+        this.getDataTime();
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.info {
+  height: 100rpx;
+  background-color: #007afd;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  color: #fff;
+}
+.left {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #fff;
+  text-align: center;
+  color: #007afd;
+  line-height: 50px;
+}
+.info_name {
+  margin-left: 16rpx;
+}
+.right {
+  text-align: center;
+}
+</style>
+  
\ No newline at end of file
diff --git a/pages/homeIndex/index.vue b/pages/homeIndex/index.vue
index bb785b0..d3eef51 100644
--- a/pages/homeIndex/index.vue
+++ b/pages/homeIndex/index.vue
@@ -1,354 +1,50 @@
 <template>
-  <view class="container">
-    <!-- 个人信息 -->
-    <view class="info">
-      <div class="left">
-        <div class="icon">
-          <image
-            style="width: 100%; height: 100%; border-radius: 50%"
-            :src="default_src"
-            mode="aspectFill"
-          ></image>
-        </div>
-        <div class="info_name">
-          <div v-if="userList.data">{{ userList.data.userName }}</div>
-          <div v-if="userList.data">
-            {{ userList.data.orgList[0].orgName || "" }}
-          </div>
-        </div>
-      </div>
-      <div class="right">
-        <div>{{ monthDay }}</div>
-        <div>{{ dataType[dayOfWeek] }}</div>
-      </div>
-    </view>
-    <!-- nav -->
-    <view class="navBar">
-      <div class="navList" v-for="(item, index) in getNavList" :key="index">
-        <div @click="myNavigateTo(item.url, item.value)">
-          <div class="navIcon">
+    <view class="container">
+        <!-- 滚动 -->
+        <view class="scrollBox">
+            <!-- 个人信息 -->
+            <HeaderUser />
+            <!-- 菜单 -->
+            <view class="navBar">
+                <div class="navList" v-for="(item, index) in menu" :key="index">
+                    <div class="navItem" @click="myNavigateTo(item.url, item.value)">
+                        <div class="navIcon">
+                            <image
+                                style="width: 100%; height: 100%"
+                                :src="item.icon"
+                                mode="aspectFit"
+                            ></image>
+                        </div>
+                        <div class="navTxt">{{ item.value }}</div>
+                    </div>
+                </div>
+            </view>
+            <SkWarn />
+            <SkMaxDrp/>
+            <Forecast24 />
+        </view>
+
+
+        <!-- 底部 -->
+        <view
+            class="info_24"
+            :style="{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                padding: '5px 0',
+                margin: '0',
+                zIndex:'1',
+                boxShadow: '0px 0px 1px #eee',
+            }"
+            >
             <image
-              style="width: 100%; height: 100%"
-              :src="item.icon"
-              mode="aspectFit"
+                :style="{ width: '20px', height: '20px', marginRight: '10px' }"
+                src="../../static/logoc.png"
             ></image>
-            <div
-              class="readStatus"
-              v-show="
-                (readStatus && item.key == 3) ||
-                (dispatchStatus && item.key == 5 && limit == 0) ||
-                (limit == 1 && readYjStatus && item.key == 5)
-              "
-            ></div>
-          </div>
-          <div class="navTxt">{{ item.value }}</div>
-        </div>
-      </div>
+            <div>技术支持: 湖北鲧石物联科技有限公司</div>
+        </view>
     </view>
-    <view class="warn" v-if="warnings.length > 0">
-      <warn-swiper :warnings="warnings" ></warn-swiper>
-    </view>
-    <view class="warn">
-      <image
-        style="
-          width: 18rpx;
-          height: 22rpx;
-          margin-right: 16rpx;
-          vertical-align: middle;
-        "
-        src="../../static/tabs/ld.png"
-        mode="aspectFit"
-      ></image
-      ><span style="color: #000">当前防汛应急响应：</span>
-      <span style="color: #59a7ff">{{
-        !level || !yjStatus ? "无" : level
-      }}</span>
-    </view>
-
-    <!-- 24小时综述 -->
-    <view v-show="limit == 1">
-      <view class="info_24">
-        <div class="heart">
-          <p class="title">
-            <span class="line"></span><span class="h4">24小时综述</span>
-          </p>
-          <div class="time">{{ ydate }}至{{ date }}</div>
-        </div>
-        <div class="info_con" v-if="list.data">
-          <span class="g1">{{ list.data.yesterday }}</span
-          >至<span class="g1">{{ list.data.today }}</span
-          >24小时中共有<span class="ye">{{ list.data.stationNum }}</span
-          >个降雨测站(山洪测站<span class="ye">{{
-            list.data.shStationNum
-          }}</span
-          >个)，其中最大降雨测站为<span class="ye">{{
-            list.data.maxRain ? list.data.maxRain.stnm : "-"
-          }}</span
-          >，降雨量<span class="ye">{{
-            list.data.maxRain ? list.data.maxRain.drp : "-"
-          }}</span
-          >mm，
-          <template v-if="list.data.cntDrp10 != 0"
-            ><span class="b1">10mm</span>以下测站数为<span class="ye">{{
-              list.data.cntDrp10
-            }}</span
-            >个。</template
-          ><template v-if="list.data.cntDrp25 != 0"
-            ><span class="b1">10mm至25mm</span>测站数为<span class="ye">{{
-              list.data.cntDrp25
-            }}</span
-            >个。</template
-          >
-          <template v-if="list.data.cntDrp50 != 0">
-            <span class="b1">25mm至50mm</span>测站数为<span class="ye">{{
-              list.data.cntDrp50
-            }}</span
-            >个。
-          </template>
-          <template v-if="list.data.cntDrp100 != 0">
-            <span class="b1">50mm至100mm</span>测站数为<span class="ye">{{
-              list.data.cntDrp100
-            }}</span
-            >个。
-          </template>
-          <template v-if="list.data.cntDrp250 != 0">
-            <span class="b1">100mm至250mm</span>测站数为<span class="ye">{{
-              list.data.cntDrp250
-            }}</span
-            >个。
-          </template>
-          <template v-if="list.data.cntDrpg250 != 0"
-            ><span class="b1">250mm以上</span>测站数为<span class="ye">{{
-              list.data.cntDrpg250
-            }}</span
-            >个。</template
-          >
-        </div>
-      </view>
-      <view class="info_24">
-        <div class="heart">
-          <p class="title">
-            <span class="line"></span><span class="h4">24小时天气预报</span>
-          </p>
-          <div>
-            <!-- <span class="time">{{ imgData[0] }}至{{ imgData[1] }}</span> -->
-            <!-- <image
-              style="width: 16px; height: 16px; vertical-align: middle"
-              src="../../static/tabs/panelTitle.png"
-              mode="aspectFit"
-              @click="changeTable"
-            ></image> -->
-          </div>
-        </div>
-
-        <div class="chartChange fl">
-          <div class="chart_tit" @click="changeTable">
-            <image
-              style="vertical-align: middle"
-              src="../../static/tabs/chartcolumn@2x.png"
-              mode="aspectFit"
-            ></image>
-            <span>图表</span>
-          </div>
-          <div v-if="changeBool" class="table_h">
-            <div
-              class="leftTab"
-              :class="{ activetextTypeTab: showTextTypeTab == 1 }"
-              @click="tabChange(1)"
-            >
-              水库降雨
-            </div>
-            <div
-              class="rightTab"
-              :class="{ activetextTypeTab: showTextTypeTab == 2 }"
-              @click="tabChange(2)"
-            >
-              区域降雨
-            </div>
-          </div>
-        </div>
-
-        <div class="imgs" style="height: 100%; text-align: center">
-          <!--  24h天气预报图像-->
-          <image
-            v-if="!changeBool && imgList.img24h"
-            :src="imgList.img24h.url"
-            mode="aspectFit"
-            @click="previewImage(imgList.img24h.url)"
-          ></image>
-          <!-- 表格-->
-          <div v-else class="tableBox">
-            <div class="table_div">
-              <div class="table_cur">
-                <table style="width: 100%; margin-top: -10%">
-                  <tr>
-                    <th style="width: 50px; color: #59a7ff">序号</th>
-
-                    <th
-                      v-if="showTextTypeTab == 1"
-                      style="width: 70%; color: #59a7ff"
-                    >
-                      水库
-                    </th>
-                    <th v-else style="width: 70%; color: #59a7ff">区域</th>
-
-                    <th style="width: 50%; color: #59a7ff">降雨量(mm)</th>
-                  </tr>
-                  <div
-                    style="max-height: 260px; overflow-y: auto"
-                    v-if="tableData.data"
-                  >
-                    <tr
-                      v-for="(item, index) in tableData.data.data"
-                      :key="index"
-                    >
-                      <td style="width: 62px">{{ index + 1 }}</td>
-                      <td style="width: 70%">
-                        {{ item.name }}
-                      </td>
-                      <td style="width: 50%">{{ item.drp }}</td>
-                    </tr>
-                  </div>
-
-                  <!-- <tr>
-                    <td style="width: 62px">1</td>
-                    <td style="width: 70%">水库水库</td>
-                    <td style="width: 50%">11</td>
-                  </tr> -->
-                </table>
-              </div>
-            </div>
-          </div>
-        </div>
-      </view>
-      <view class="info_24">
-        <div class="heart">
-          <p class="title">
-            <span class="line"></span><span class="h4">短时天气预报</span>
-          </p>
-          <!-- <div class="time" v-if="imgHourstm.length > 0">
-            {{ imgHourstm[0] }}至{{ imgHourstm[1] }}
-          </div> -->
-        </div>
-        <div class="imgs" style="height: 100%; text-align: center">
-          <image
-            v-if="imgHoursList.url != ''"
-            :src="imgHoursList.url"
-            mode="aspectFit"
-            @click="previewImage(imgHoursList.url)"
-          ></image>
-          <image
-            v-if="imgHoursList.url == ''"
-            class="noData"
-            src="../../static/tabs//noData1.png"
-            mode="aspectFit"
-          ></image>
-        </div>
-      </view>
-    </view>
-    <view v-show="limit == 0">
-      <view class="info_24">
-        <div class="heart">
-          <p class="title">
-            <span class="line"></span><span class="h4">雨情</span>
-          </p>
-          <div class="time" style="width: 50%; color: #000" v-if="timeList">
-            <uni-data-select
-              v-model="value1"
-              :localdata="timeList"
-              @change="changeTime"
-              :clear="false"
-            >
-            </uni-data-select>
-          </div>
-        </div>
-        <div
-          class="info_icon"
-          style="height: 260px; width: 100%"
-          v-if="chartData.chartData"
-        >
-          <qiun-data-charts
-            :chartData="chartData.chartData"
-            :echartsApp="true"
-            :eopts="chartData.eopts"
-          />
-        </div>
-      </view>
-      <view class="info_24">
-        <div class="heart" style="margin-bottom: 10px">
-          <p class="title">
-            <span class="line"></span><span class="h4">水情</span>
-          </p>
-          <div class="time" style="width: 50%; color: #000">
-            <u-subsection
-              :list="subList"
-              :current="current"
-              @change="subChange"
-              mode="subsection"
-            ></u-subsection>
-          </div>
-        </div>
-        <div class="info_icon" v-if="current == 0">
-          <div
-            v-for="(item, i) in hdList"
-            :key="i"
-            @click="jumpHdDetail(item)"
-            style="
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              margin-bottom: 10px;
-            "
-          >
-            <div>
-              <div style="font-size: 32rpx">{{ item.stnm }}</div>
-              <div style="font-size: 24rpx">实时水位：{{ item.z }}m</div>
-            </div>
-            <div style="color: #91939b">监测时间：{{ item.tm }}</div>
-          </div>
-          <div v-if="!hdList.length" style="text-align: center">暂无内容</div>
-        </div>
-        <div class="info_icon" v-else>
-          <div
-            v-for="(item, i) in skList"
-            :key="i"
-            style="
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              margin-bottom: 10px;
-            "
-            @click="jumpSkDetail(item)"
-          >
-            <div>
-              <div style="font-size: 32rpx">{{ item.stnm }}</div>
-              <div style="font-size: 24rpx">
-                实时水位：{{ item.normWatLev }}m
-              </div>
-            </div>
-            <div style="color: #91939b">监测时间：{{ item.tm }}</div>
-          </div>
-          <div v-if="!skList.length" style="text-align: center">暂无内容</div>
-        </div>
-      </view>
-    </view>
-    <view
-      class="info_24"
-      :style="{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: '5px 0',
-        margin: '0',
-      }"
-    >
-      <image
-        :style="{ width: '20px', height: '20px', marginRight: '10px' }"
-        src="../../static/logoc.png"
-      ></image>
-      <div>技术支持: 湖北鲧石物联科技有限公司</div>
-    </view>
-  </view>
 </template>
 
 <script>
@@ -361,683 +57,189 @@ const dataType = {
   Saturday: "星期六",
   Sunday: "星期天",
 };
+import HeaderUser from './headerUser.vue'
+import Forecast24 from './forecast24.vue'
+import SkWarn from './skWarn.vue'
+import SkMaxDrp from './skMaxDrp.vue'
 
 import moment from "moment";
-import { level } from "../../pages/utils/dicType";
-import { disType } from "../utils/dicType.js";
-import drpOption from "./chartOption.js";
-import { restm } from "../utils/tool";
-import WarnSwiper from "./warnSwiper";
-
 export default {
-  components: {
-    WarnSwiper,
-  },
-  data() {
-    return {
-      monthDay: "",
-      dayOfWeek: "",
-      dataType,
-      userList: {},
-      changeBool: false,
-      tableData: [],
-      loading: false,
-      list: {},
-      date: "",
-      ydate: "",
-      showTextTypeTab: 1,
-      tableData: {},
-      tm: "",
-      level: "",
-      yjStatus: 0,
-      warnings: [
-      ],
-      limit: disType(uni.getStorageSync("value").adcd),
-      timeList: [
-        { text: "昨天08:00~当前时间", value: 1 },
-        { text: "今天08:00~当前时间", value: 2 },
-        { text: "昨天08:00~今天08:00", value: 3 },
-        { text: "最近1小时", value: 4 },
-        { text: "最近3小时", value: 5 },
-        { text: "最近6小时", value: 6 },
-        { text: "最近12小时", value: 7 },
-        { text: "最近24小时", value: 8 },
-      ],
-      value1: 3,
-      rainChartData: [],
-      formData: {
-        stm: moment()
-          .subtract(1, "days")
-          .startOf("day")
-          .set({ hour: 8, minute: 0 }),
-        etm: moment().startOf("day").set({ hour: 8, minute: 0 }),
-      },
-      rainChartData: [],
-      chartData: {},
-      subList: ["河道水情", "水库水情"],
-      current: 0,
-      hdList: [],
-      skList: [],
-      readStatus: false, //工灾情状态
-      readYjStatus: false, //预警状态
-      dispatchStatus: false, //调令状态
-      default_src: uni.getStorageSync("avatar"),
-      imgList: {},
-      imgtm: moment().format("YYYYMMDD"),
-      imgData: [],
-      imgHours: "",
-      imgHourstm: [],
-      imgHoursList: { url: "" },
-      interval: null,
-      numPic: 0,
-      allStatus: false,
-      warnStm:Number(moment(new Date()).add(-1,'days')),
-			warnEtm:Number(new Date()),
-    };
-  },
-  onPullDownRefresh() {
-    this.getSwiperList();
-    this.getOverview();
-    this.getDataTime();
-    this.getResponseLevel();
-    this.getDispatchStatus();
-    this.getReadStatus();
-    this.shWarnList();
-    if (this.limit == 1) {
-      this.getYjRead();
-      // this.getInterval()
-      this.getImgs();
-      this.getHoursImg();
-    }
-    setTimeout(function () {
-      uni.stopPullDownRefresh();
-    }, 1000);
-  },
-  computed: {
-    getNavList() {
-      const adcd = uni.getStorageSync("value").adcd;
-      let lever = 0;
-      if (adcd.endsWith("000000000")) {
-        //县
-        return [
-          {
-            value: "雨情",
-            key: 1,
-            icon: "../../static/tabs/xingzhuang2.png",
-            url: "/pages/rain/rain",
-          },
-          {
-            value: "水情",
-            key: 2,
-            icon: "../../static/tabs/water2.png",
-            url: "/pages/water/water",
-          },
-          {
-            value: "工情灾情",
-            key: 3,
-            icon: "../../static/tabs/gongqing2.png",
-            url: "/pages/gqzq/index",
-          },
-          {
-            value: "信息上报",
-            key: 4,
-            icon: "../../static/tabs/xinxi_icon@2x2.png",
-            url: "/pages/xxsb/index",
-          },
-          {
-            value: "预警",
-            key: 5,
-            icon: "../../static/tabs/yujing_icon@2x2.png",
-            url: "/pages/forewarning/forewarning",
-          },
-        ];
-      } else {
-        //乡镇
-        return [
-          {
-            value: "雨情",
-            key: 1,
-            icon: "../../static/tabs/xingzhuang2.png",
-            url: "/pages/rain/rain",
-          },
-          {
-            value: "水情",
-            key: 2,
-            icon: "../../static/tabs/water2.png",
-            url: "/pages/water/water",
-          },
-          // {
-          //   value: '工情灾情',
-          //   key: 3,
-          //   icon: '../../static/tabs/gongqing2.png',
-          //   url: '/pages/gqzq/index'
-          // },
-          {
-            value: "调令反馈",
-            key: 5,
-            icon: "../../static/tabs/yujing_icon@2x2.png",
-            url: "/pages/orderFeedback/orderFeedback",
-          },
-          {
-            value: "信息上报",
-            key: 4,
-            icon: "../../static/tabs/xinxi_icon@2x2.png",
-            url: "/pages/xxsb/index",
-          },
-        ];
-      }
+    components: {
+        // WarnSwiper,
+        HeaderUser,
+        Forecast24,
+        SkWarn,
+        SkMaxDrp,
     },
-  },
-  watch: {
-    rainChartData(newValue) {
-      this.chartData = { ...drpOption(newValue) };
-    },
-    limit: {
-      handler(newValue) {
-        if (!newValue) {
-          this.getRainList();
-        }
-      },
-      immediate: true,
-    },
-    current: {
-      handler(newValue) {
-        if (newValue == 0) {
-          this.getHdList();
-        } else {
-          this.getSkList();
-        }
-      },
-      immediate: true,
-    },
-    allStatus: {
-      handler(newValue) {
-        const newArr = this.getNavList();
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    // 山洪预警走马灯
-   async shWarnList(){
-    try{
-					const params = {
-						stm:moment(this.warnStm).format('YYYY-MM-DD HH:mm:ss'),
-						etm:moment(this.warnEtm).format('YYYY-MM-DD HH:mm:ss'),
-						warnstatusids:['0','30'],
-						warngradeids:['6','5']
-					}
-					const res = await uni.$http.post('/gunshiApp/xfflood/current/situation/app/flood/warn',params)
-					 if(res.data?.data?.length > 0){
-            this.warnings = res.data.data.map(item => ({
-            ...item,
-            id:item.warnid,
-            content:item.warnnm + "(" + item.warnstm + ")"
-          }))
-           }
-				}catch(e){
-          console.log(e);
-        }
-   },
-    previewImage(item) {
-      uni.previewImage({
-        urls: [item],
-        longPressActions: {
-          itemList: ["发送给朋友", "保存图片", "收藏"],
-          success: function (data) {
-            console.log(
-              "选中了第" +
-                (data.tapIndex + 1) +
-                "个按钮,第" +
-                (data.index + 1) +
-                "张图片"
-            );
-          },
-          fail: function (err) {
-            console.log(err.errMsg);
-          },
-        },
-      });
-    },
-    async getImgs() {
-      let h = moment().format("HH");
-      let m = moment().format("mm");
-      uni.request({
-        url: "http://223.75.53.124:8005/grb/latest",
-        success: (res) => {
-          const myTm = res.data.data.tm;
-          if (myTm) {
-            uni.request({
-              url: "http://223.75.53.124:8005/grb/rainimglist",
-              data: {
-                tm: moment(myTm).format("YYYYMMDDHH"),
-              },
-              success: (res) => {
-                console.log(res.data.data);
-                this.imgList = res.data.data;
-
-                // let inx = restm(h)
-
-                // this.imgHours = res.data.data.imgHours[inx]
-
-                let tm = moment().add(1, "days").format("MM月DD日");
-                let tm2 = moment().format("MM月DD日");
-                this.imgData = [`${tm2}08时`, `${tm}08时`];
-                // this.imgHourstm = [`${tm2}${h + 1}时`, `${tm2}${h + 2}时`]
-              },
-            });
-          }
-        },
-      });
-    },
-    getTmData() {
-      let hn = this.numPic > 0 ? this.numPic : 1;
-      let h = moment().subtract(hn, "hours").format();
-      let m = moment().format("mm");
-      console.log("hhh--", h, m, this.numPic);
-      let tms = null,
-        mm = null;
-      let h1 = Number(h) - 1;
-      if (h1 < 9) {
-        h1 = Number(h) - this.numPic;
-      }
-      if (h1 < 10) {
-        h1 = `0${h1}`;
-      }
-      if (m > 30) {
-        h1 = Number(h) - 1;
-        let m1 = h > 10 ? h : `0${h}`;
-        tms = `${this.imgtm}${m1}30`;
-        mm = "30";
-      } else if (m < 10) {
-        tms = `${this.imgtm}${h1}`;
-        mm = "00";
-      } else {
-        tms = `${this.imgtm}${h1}30`;
-        mm = "30";
-      }
-    },
-    async getHoursImg() {
-      let h = moment().format("HH");
-      let m = moment().format("mm");
-      console.log("hhh--", h, m, this.numPic);
-      let tms = null,
-        mm = null;
-      let h1 = Number(h) - 1;
-
-      if (h1 < 10) {
-        let t = Number(h1) - Number(this.numPic);
-        h1 = `0${t}`;
-      }
-      if (m > 30) {
-        h1 = Number(h) - 1;
-        let t3 = Number(h) - this.numPic;
-        if (this.numPic <= 0) {
-          let m3 = h1 > 10 ? h1 : `0${h1}`;
-          tms = `${this.imgtm}${m3}30`;
-        } else {
-          t3 = t3 < 10 ? `0${t3}` : t3;
-          tms = `${this.imgtm}${t3}30`;
-        }
-        mm = "30";
-      } else if (m < 10) {
-        tms = `${this.imgtm}${h1}00`;
-        mm = "00";
-      } else {
-        tms = `${this.imgtm}${h1}30`;
-        mm = "30";
-      }
-
-      console.log("小时", h1);
-      console.log("需要参数", tms);
-
-      uni.request({
-        url: "http://223.75.53.124:8005/radar/latest",
-        success: (res) => {
-          let tm = moment(res.data.data.tm);
-          let subfix = "?rainFile=" + res.data.data.rainFile;
-          let url = `http://shqxjs.cloudowr.cn/yj_folder/rain/radar/${tm.format(
-            "YYYYMM"
-          )}/${tm.format("DD")}/${tm.format(
-            "YYYYMMDDHHmm"
-          )}+00.02.jpg${subfix}`;
-          console.log(222222222227, url);
-
-          console.log("pic---", tms, res.data.data);
-          this.imgHoursList = { url: url };
-          let m = moment().format("MM月DD日");
-
-          console.log("am222", this.imgHoursList);
-          let m1 = Number(h1) + 2;
-          this.imgHourstm = [`${m}${h1}时${mm}分`, `${m}${m1}时${mm}分`];
-
-          if (url == null) {
-            this.numPic++;
-            setTimeout(() => {
-              this.getHoursImg();
-            }, 10 * 1000);
-          } else {
-            this.numPic = 0;
-            return;
-          }
-        },
-      });
-    },
-
-    // async getInterval () {
-    //   this.interval = setInterval(() => {
-    //     this.getHoursImg()
-    //   }, 60 * 1000)
-    // },
-    async getYjRead() {
-      try {
-        const { data } = await uni.$http.get(
-          "/gunshiApp/xfflood/current/situation/flag"
-        );
-        if (data.code == 200) {
-          this.readYjStatus = data.data;
-        }
-      } catch (error) {
-        uni.$showMsg();
-      }
-    },
-    async getReadStatus() {
-      try {
-        const { data } = await uni.$http.get(
-          "/gunshiApp/xfflood/xfProjectRun/has/read"
-        );
-        if (data.code == 200) {
-          this.readStatus = Object.values(data.data).some(
-            (item) => item == true
-          );
-        }
-      } catch (error) {
-        uni.$showMsg();
-      }
-    },
-    async getDispatchStatus() {
-      try {
-        const res = await uni.$http.post(
-          "/gunshiApp/xfflood/xfEmerDispatchR/app/list",
-          { status: 1, dispatchTypeList: ["0", "1"] }
-        );
-        if (res.data.code == 200) {
-          this.dispatchStatus = res.data.data.length > 0 ? true : false;
-        }
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    async setInsert(menu2) {
-      try {
-        const params = {
-          createId: uni.getStorageSync("value").userId,
-          loginType: 1,
-          menu1: "首页",
-          menu2: menu2 || "首页",
+    data() {
+        return {
+            monthDay: "",
+            dataType,
+            default_src: uni.getStorageSync("avatar"),
+            tableData: [],
+            changeBool: false,
+            imgList: {},
+            menu:[
+                {
+                    value: "视频监视",
+                    key: 1,
+                    icon: "../../static/tabs/spjk.png",
+                    url: "/pages/videoPage/index",
+                },
+                {
+                    value: "雨水情监测",
+                    key: 2,
+                    icon: "../../static/tabs/yq.png",
+                    url: "/pages/water/water",
+                },
+                {
+                    value: "安全监测",
+                    key: 3,
+                    icon: "../../static/tabs/aqjc.png",
+                    url: "/pages/gqzq/index",
+                }
+            ],
+            userList: {},
+        
         };
+    },
+    onPullDownRefresh() {
+      // this.getImgs();
+    },
+    computed: {
+    },
+    watch: {
+    },
+    methods: {
+        async getSwiperList() {
+            try {
+                const res = await uni.$http.get("/gunshiApp/xfflood/getLoginInfo");
+                console.log("--1-", res.data);
+                this.userList = res.data;
 
-        const { data } = await uni.$http.post(
-          "/gunshiApp/xfflood/visitMenuLog/insert",
-          params
-        );
-        console.log("用户行为", params, data);
-      } catch (error) {}
-    },
-    jumpHdDetail(params) {
-      uni.navigateTo({
-        url: `/pages/hdDetail/hdDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&wrz=${params.wrz}&grz=${params.grz}`,
-      });
-    },
-    jumpSkDetail(params) {
-      uni.navigateTo({
-        url: `/pages/skDetail/skDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&afsltdz=${params.afsltdz}&flLowLimLev=${params.flLowLimLev}&desFloodLev=${params.desFloodLev}&calFloodLev=${params.calFloodLev}&resCode=${params.resCode}`,
-      });
-    },
-    async getSkList() {
-      try {
-        const { data } = await uni.$http.post(
-          "/gunshiApp/xfflood/reservoir/water/list",
-          {
-            sources: ["SW", "SK"],
-            adcd: uni.getStorageSync("value").adcd,
+                console.log("--1-", this.userList);
+            } catch (e) {
+                uni.$showMsg();
+            }
+        },
+        getDataTime() {
+            this.monthDay = moment().format("MM月DD日");
+            this.dayOfWeek = moment().format("dddd");
+            this.date = moment().format("MM月DD日HH时");
+            this.ydate = moment().subtract(1, "days").format("MM月DD日HH时");
+            console.log("moment11", this.date, this.ydate);
+            let d1 = moment().format("YYYYMMDD");
+            let h1 = moment().format("HH") >= 20 ? "20" : "08";
+
+            this.tm = d1 + h1;
+        },
+        myNavigateTo(url, menu2) {
+            uni.navigateTo({
+                url: url, // 跳转到对应路径的页面
+            });
+            this.setInsert(menu2);
+        },
+        // 区域 /weather/area
+        async getWeatherArea() {
+          try {
+            const res = await uni.$http.post("/gunshiApp/xfflood/weather/area", {
+              tm: this.tm,
+            });
+            console.log("--44-", res);
+            this.tableData = res;
+            // this.userList = res.data
+
+            // console.log('--333-', this.tableData)
+          } catch (e) {
+            uni.$showMsg();
           }
-        );
-        if (data.code == 200) {
-          this.skList = data.data;
-        }
-      } catch (error) {
-        uni.$showMsg();
-      }
-    },
-    async getHdList() {
-      try {
-        const { data } = await uni.$http.post(
-          "/gunshiApp/xfflood/river/water/list",
-          {
-            sources: ["SH", "SW"],
-            adcd: uni.getStorageSync("value").adcd,
+        },
+        async getImgs() {
+          let h = moment().format("HH");
+          let m = moment().format("mm");
+          uni.request({
+            url: "http://223.75.53.124:8005/grb/latest",
+            success: (res) => {
+              const myTm = res.data.data.tm;
+              if (myTm) {
+                uni.request({
+                  url: "http://223.75.53.124:8005/grb/rainimglist",
+                  data: {
+                    tm: moment(myTm).format("YYYYMMDDHH"),
+                  },
+                  success: (res) => {
+                    console.log(res.data.data);
+                    this.imgList = res.data.data;
+
+                    // let inx = restm(h)
+
+                    // this.imgHours = res.data.data.imgHours[inx]
+
+                    let tm = moment().add(1, "days").format("MM月DD日");
+                    let tm2 = moment().format("MM月DD日");
+                    this.imgData = [`${tm2}08时`, `${tm}08时`];
+                    // this.imgHourstm = [`${tm2}${h + 1}时`, `${tm2}${h + 2}时`]
+                  },
+                });
+              }
+            },
+          });
+        },
+        previewImage(item) {
+          uni.previewImage({
+            urls: [item],
+            longPressActions: {
+              itemList: ["发送给朋友", "保存图片", "收藏"],
+              success: function (data) {
+                console.log(
+                  "选中了第" +
+                    (data.tapIndex + 1) +
+                    "个按钮,第" +
+                    (data.index + 1) +
+                    "张图片"
+                );
+              },
+              fail: function (err) {
+                console.log(err.errMsg);
+              },
+            },
+          });
+        },
+        changeTable(val) {
+          this.changeBool = !this.changeBool;
+          if (val) {
+            this.getWeatherArea();
           }
-        );
-        if (data.code == 200) {
-          this.hdList = data.data;
-        }
-      } catch (error) {
-        uni.$showMsg();
-      }
+          console.log("this.changeBool", this.changeBool);
+        },
     },
-    subChange(e) {
-      this.current = e;
+    onLoad() {
+        this.getSwiperList();
+        this.getDataTime();
     },
-    async getRainList() {
-      try {
-        const { data } = await uni.$http.post(
-          "/gunshiApp/xfflood/real/rain/home/list",
-          {
-            start: this.formData.stm.format("YYYY-MM-DD HH:mm:ss"),
-            end: this.formData.etm.format("YYYY-MM-DD HH:00:00"),
-          }
-        );
-        if (data.code == 200) {
-          console.log("rainChartData0,", data);
-          this.rainChartData = data.data;
-        }
-      } catch (error) {
-        uni.$showMsg();
-      }
-    },
-    changeTime(params) {
-      let tmValue = [];
-      if (params === 1) {
-        tmValue = [
-          moment()
-            .subtract(1, "days")
-            .startOf("day")
-            .set({ hour: 8, minute: 0 }),
-          moment(),
-        ];
-      } else if (params === 2) {
-        tmValue = [
-          moment().startOf("day").set({ hour: 8, minute: 0 }),
-          moment(),
-        ];
-      } else if (params === 3) {
-        tmValue = [
-          moment()
-            .subtract(1, "days")
-            .startOf("day")
-            .set({ hour: 8, minute: 0 }),
-          moment().startOf("day").set({ hour: 8, minute: 0 }),
-        ];
-      } else if (params === 4) {
-        tmValue = [moment().subtract(1, "hours"), moment()];
-      } else if (params === 5) {
-        tmValue = [moment().subtract(3, "hours"), moment()];
-      } else if (params === 6) {
-        tmValue = [moment().subtract(6, "hours"), moment()];
-      } else if (params === 7) {
-        tmValue = [moment().subtract(12, "hours"), moment()];
-      } else if (params === 8) {
-        tmValue = [moment().subtract(24, "hours"), moment()];
-      }
-      this.formData.stm = tmValue[0];
-      this.formData.etm = tmValue[1];
-      this.getRainList();
-    },
-    todetail(val) {
-      console.log("val", val);
-      if (val == 1) {
-        uni.navigateTo({
-          url: "/pages/rain/index",
-        });
-      }
-      if (val == 3) {
-        uni.navigateTo({
-          url: "/pages/gqzq/index",
-        });
-      }
-    },
-    tabChange(val) {
-      this.showTextTypeTab = val;
-      if (val == 1) {
-        this.getWeather();
-      } else {
-        this.getWeatherArea();
-      }
-    },
-    changeTable(val) {
-      this.changeBool = !this.changeBool;
-      if (val) {
-        this.getWeather();
-      }
-      console.log("this.changeBool", this.changeBool);
-    },
-    // 区域 /weather/area
-    async getWeatherArea() {
-      try {
-        const res = await uni.$http.post("/gunshiApp/xfflood/weather/area", {
-          tm: this.tm,
-        });
-        console.log("--44-", res);
-        this.tableData = res;
-        // this.userList = res.data
-
-        // console.log('--333-', this.tableData)
-      } catch (e) {
-        uni.$showMsg();
-      }
-    },
-    // 水库 /weather/res
-    async getWeather() {
-      try {
-        const res = await uni.$http.post("/gunshiApp/xfflood/weather/res", {
-          tm: this.tm,
-        });
-        console.log("--3-", res);
-        this.tableData = res;
-        // this.userList = res.data
-
-        console.log("--333-", this.tableData);
-      } catch (e) {
-        uni.$showMsg();
-      }
-    },
-    async getSwiperList() {
-      try {
-        const res = await uni.$http.get("/gunshiApp/xfflood/getLoginInfo");
-        console.log("--1-", res.data);
-        this.userList = res.data;
-
-        console.log("--1-", this.userList);
-      } catch (e) {
-        uni.$showMsg();
-      }
-    },
-    async getOverview() {
-      try {
-        let res = await uni.$http.get("/gunshiApp/xfflood/real/rain/overview");
-        console.log("--2-", res);
-        this.list = res.data;
-
-        console.log("--2-", res);
-      } catch (e) {
-        uni.$showMsg();
-      }
-    },
-
-    getDataTime() {
-      this.monthDay = moment().format("MM月DD日");
-      this.dayOfWeek = moment().format("dddd");
-      this.date = moment().format("MM月DD日HH时");
-      this.ydate = moment().subtract(1, "days").format("MM月DD日HH时");
-      console.log("moment11", this.date, this.ydate);
-      let d1 = moment().format("YYYYMMDD");
-      let h1 = moment().format("HH") >= 20 ? "20" : "08";
-
-      this.tm = d1 + h1;
-    },
-    async getResponseLevel() {
-      try {
-        const { data } = await uni.$http.post(
-          "/gunshiApp/xfflood/xfEmerRespR/page",
-          {
-            pageSo: { pageSize: 10, pageNumber: 1 },
-            year: moment().format("YYYY"),
-          }
-        );
-        if (data.code == 200) {
-          if (data.data.records.length > 0) {
-            console.log("1111111data", data);
-            this.level = level(data.data.records[0].level);
-            this.yjStatus = data.data.records[0].status;
-          } else {
-            this.level = "无";
-          }
-        }
-      } catch (e) {
-        uni.$showMsg();
-      }
-    },
-    myNavigateTo(url, menu2) {
-      uni.navigateTo({
-        url: url, // 跳转到对应路径的页面
-      });
-      this.setInsert(menu2);
-    },
-    // 响应级别
-  },
-  onLoad() {
-    this.getSwiperList();
-    this.getOverview();
-    this.getDataTime();
-    this.getResponseLevel();
-  },
-
-  onShow() {
-    this.getReadStatus();
-    this.shWarnList();
-    this.getResponseLevel();
-    this.getDispatchStatus();
-    this.setInsert();
-    if (this.limit == 1) {
-      this.getYjRead();
-      // this.getInterval()
+    onShow() {
       this.getImgs();
-      this.getHoursImg();
-    }
-  },
-  // onUnload () {
-  //   clearInterval(this.interval)
-  //   this.interval = null
-  // }
+    },
 };
 </script>
 
 <style lang="scss" scoped>
 .container {
-  font-size: 14px;
-  line-height: 24px;
-  background-color: #f3f5f8;
+    height: 100%;
+    overflow: hidden;
+    font-size: 14px;
+    line-height: 24px;
+    background-color: #f3f5f8;
+    display: flex;
+    flex-direction: column;
+    align-content: space-between
+}
+.scrollBox{
+    flex: 1;
+    overflow-y: scroll;
+}
+.footerBox{
+    
 }
 .info {
   height: 100rpx;
@@ -1069,25 +271,33 @@ export default {
   text-align: center;
 }
 .navBar {
-  height: 100%;
-  background-color: #fff;
-  margin-bottom: 12rpx;
-  /* background-color: pink; */
-}
-.navBar {
-  padding: 20px;
+  margin-bottom: 10px;
+  background: #ffffff;
+  padding: 20px 0;
+  box-shadow: 0px 0px 5px #eee;
   /* text-align: center; */
   display: flex;
-  justify-content: space-between;
+  justify-content: start;
   align-items: center;
 }
 .navList {
+//   margin-right: 25px;
   text-align: center;
 }
+.navItem{
+    width: 90px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
 .navIcon {
   position: relative;
-  width: 50px;
-  height: 50px;
+  width: 30px;
+  height: 30px;
+
+  padding: 10px;
+  background-color: #437cf2;
+  border-radius: 10px;
   /* border-radius: 10px;
     background-color: #007afd; */
   display: flex;
@@ -1138,12 +348,11 @@ export default {
     top: 0;
     right: 0; */
 }
-
-/* info_24 */
 .info_24 {
   padding: 15px;
   background-color: #fff;
   margin-bottom: 12rpx;
+  box-shadow: 0px 0px 5px #eee;
 }
 .heart {
   display: flex;
@@ -1216,7 +425,7 @@ export default {
   max-width: calc(100% - 0px);
   max-height: calc(100vh - 24px);
   flex: 1;
-  padding-top: 30px;
+  // padding-top: 30px;
   overflow-x: scroll;
 }
 /*table样式*/
@@ -1257,3 +466,4 @@ export default {
   width: 100px;
 }
 </style>
+  
\ No newline at end of file
diff --git a/pages/homeIndex/indexOld.vue b/pages/homeIndex/indexOld.vue
new file mode 100644
index 0000000..38927db
--- /dev/null
+++ b/pages/homeIndex/indexOld.vue
@@ -0,0 +1,1264 @@
+<template>
+  <view class="container">
+    <!-- 个人信息 -->
+    <view class="info">
+      <div class="left">
+        <div class="icon">
+          <image
+            style="width: 100%; height: 100%; border-radius: 50%"
+            :src="default_src"
+            mode="aspectFill"
+          ></image>
+        </div>
+        <div class="info_name">
+          <div v-if="userList.data">{{ userList.data.userName }}</div>
+          <div v-if="userList.data">
+            {{ userList.data.orgList[0].orgName || "" }}
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div>{{ monthDay }}</div>
+        <div>{{ dataType[dayOfWeek] }}</div>
+      </div>
+    </view>
+    <!-- nav -->
+    <view class="navBar">
+      <div class="navList" v-for="(item, index) in getNavList" :key="index">
+        <div @click="myNavigateTo(item.url, item.value)">
+          <div class="navIcon">
+            <image
+              style="width: 100%; height: 100%"
+              :src="item.icon"
+              mode="aspectFit"
+            ></image>
+            <div
+              class="readStatus"
+              v-show="
+                (readStatus && item.key == 3) ||
+                (dispatchStatus && item.key == 5 && limit == 0) ||
+                (limit == 1 && readYjStatus && item.key == 5)
+              "
+            ></div>
+          </div>
+          <div class="navTxt">{{ item.value }}</div>
+        </div>
+      </div>
+    </view>
+    <view class="warn" v-if="warnings.length > 0">
+      <warn-swiper :warnings="warnings" ></warn-swiper>
+    </view>
+    <view class="warn">
+      <image
+        style="
+          width: 18rpx;
+          height: 22rpx;
+          margin-right: 16rpx;
+          vertical-align: middle;
+        "
+        src="../../static/tabs/ld.png"
+        mode="aspectFit"
+      ></image
+      ><span style="color: #000">当前防汛应急响应：</span>
+      <span style="color: #59a7ff">{{
+        !level || !yjStatus ? "无" : level
+      }}</span>
+    </view>
+
+    <!-- 24小时综述 -->
+    <view v-show="limit == 1">
+      <view class="info_24">
+        <div class="heart">
+          <p class="title">
+            <span class="line"></span><span class="h4">24小时综述</span>
+          </p>
+          <div class="time">{{ ydate }}至{{ date }}</div>
+        </div>
+        <div class="info_con" v-if="list.data">
+          <span class="g1">{{ list.data.yesterday }}</span
+          >至<span class="g1">{{ list.data.today }}</span
+          >24小时中共有<span class="ye">{{ list.data.stationNum }}</span
+          >个降雨测站(山洪测站<span class="ye">{{
+            list.data.shStationNum
+          }}</span
+          >个)，其中最大降雨测站为<span class="ye">{{
+            list.data.maxRain ? list.data.maxRain.stnm : "-"
+          }}</span
+          >，降雨量<span class="ye">{{
+            list.data.maxRain ? list.data.maxRain.drp : "-"
+          }}</span
+          >mm，
+          <template v-if="list.data.cntDrp10 != 0"
+            ><span class="b1">10mm</span>以下测站数为<span class="ye">{{
+              list.data.cntDrp10
+            }}</span
+            >个。</template
+          ><template v-if="list.data.cntDrp25 != 0"
+            ><span class="b1">10mm至25mm</span>测站数为<span class="ye">{{
+              list.data.cntDrp25
+            }}</span
+            >个。</template
+          >
+          <template v-if="list.data.cntDrp50 != 0">
+            <span class="b1">25mm至50mm</span>测站数为<span class="ye">{{
+              list.data.cntDrp50
+            }}</span
+            >个。
+          </template>
+          <template v-if="list.data.cntDrp100 != 0">
+            <span class="b1">50mm至100mm</span>测站数为<span class="ye">{{
+              list.data.cntDrp100
+            }}</span
+            >个。
+          </template>
+          <template v-if="list.data.cntDrp250 != 0">
+            <span class="b1">100mm至250mm</span>测站数为<span class="ye">{{
+              list.data.cntDrp250
+            }}</span
+            >个。
+          </template>
+          <template v-if="list.data.cntDrpg250 != 0"
+            ><span class="b1">250mm以上</span>测站数为<span class="ye">{{
+              list.data.cntDrpg250
+            }}</span
+            >个。</template
+          >
+        </div>
+      </view>
+
+      
+      <view class="info_24">
+        <div class="heart">
+          <p class="title">
+            <span class="line"></span><span class="h4">24小时天气预报</span>
+          </p>
+          <div>
+            <!-- <span class="time">{{ imgData[0] }}至{{ imgData[1] }}</span> -->
+            <!-- <image
+              style="width: 16px; height: 16px; vertical-align: middle"
+              src="../../static/tabs/panelTitle.png"
+              mode="aspectFit"
+              @click="changeTable"
+            ></image> -->
+          </div>
+        </div>
+
+        <div class="chartChange fl">
+          <div class="chart_tit" @click="changeTable">
+            <image
+              style="vertical-align: middle"
+              src="../../static/tabs/chartcolumn@2x.png"
+              mode="aspectFit"
+            ></image>
+            <span>图表</span>
+          </div>
+          <div v-if="changeBool" class="table_h">
+            <div
+              class="leftTab"
+              :class="{ activetextTypeTab: showTextTypeTab == 1 }"
+              @click="tabChange(1)"
+            >
+              水库降雨
+            </div>
+            <div
+              class="rightTab"
+              :class="{ activetextTypeTab: showTextTypeTab == 2 }"
+              @click="tabChange(2)"
+            >
+              区域降雨
+            </div>
+          </div>
+        </div>
+
+        <div class="imgs" style="height: 100%; text-align: center">
+          <!--  24h天气预报图像-->
+          <image
+            v-if="!changeBool && imgList.img24h"
+            :src="imgList.img24h.url"
+            mode="aspectFit"
+            @click="previewImage(imgList.img24h.url)"
+          ></image>
+          <!-- 表格-->
+          <div v-else class="tableBox">
+            <div class="table_div">
+              <div class="table_cur">
+                <table style="width: 100%; margin-top: -10%">
+                  <tr>
+                    <th style="width: 50px; color: #59a7ff">序号</th>
+
+                    <th
+                      v-if="showTextTypeTab == 1"
+                      style="width: 70%; color: #59a7ff"
+                    >
+                      水库
+                    </th>
+                    <th v-else style="width: 70%; color: #59a7ff">区域</th>
+
+                    <th style="width: 50%; color: #59a7ff">降雨量(mm)</th>
+                  </tr>
+                  <div
+                    style="max-height: 260px; overflow-y: auto"
+                    v-if="tableData.data"
+                  >
+                    <tr
+                      v-for="(item, index) in tableData.data.data"
+                      :key="index"
+                    >
+                      <td style="width: 62px">{{ index + 1 }}</td>
+                      <td style="width: 70%">
+                        {{ item.name }}
+                      </td>
+                      <td style="width: 50%">{{ item.drp }}</td>
+                    </tr>
+                  </div>
+
+                  <!-- <tr>
+                    <td style="width: 62px">1</td>
+                    <td style="width: 70%">水库水库</td>
+                    <td style="width: 50%">11</td>
+                  </tr> -->
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </view>
+
+
+
+      <view class="info_24">
+        <div class="heart">
+          <p class="title">
+            <span class="line"></span><span class="h4">短时天气预报</span>
+          </p>
+          <!-- <div class="time" v-if="imgHourstm.length > 0">
+            {{ imgHourstm[0] }}至{{ imgHourstm[1] }}
+          </div> -->
+        </div>
+        <div class="imgs" style="height: 100%; text-align: center">
+          <image
+            v-if="imgHoursList.url != ''"
+            :src="imgHoursList.url"
+            mode="aspectFit"
+            @click="previewImage(imgHoursList.url)"
+          ></image>
+          <image
+            v-if="imgHoursList.url == ''"
+            class="noData"
+            src="../../static/tabs//noData1.png"
+            mode="aspectFit"
+          ></image>
+        </div>
+      </view>
+    </view>
+    <view v-show="limit == 0">
+      <view class="info_24">
+        <div class="heart">
+          <p class="title">
+            <span class="line"></span><span class="h4">雨情</span>
+          </p>
+          <div class="time" style="width: 50%; color: #000" v-if="timeList">
+            <uni-data-select
+              v-model="value1"
+              :localdata="timeList"
+              @change="changeTime"
+              :clear="false"
+            >
+            </uni-data-select>
+          </div>
+        </div>
+        <div
+          class="info_icon"
+          style="height: 260px; width: 100%"
+          v-if="chartData.chartData"
+        >
+          <qiun-data-charts
+            :chartData="chartData.chartData"
+            :echartsApp="true"
+            :eopts="chartData.eopts"
+          />
+        </div>
+      </view>
+      <view class="info_24">
+        <div class="heart" style="margin-bottom: 10px">
+          <p class="title">
+            <span class="line"></span><span class="h4">水情</span>
+          </p>
+          <div class="time" style="width: 50%; color: #000">
+            <u-subsection
+              :list="subList"
+              :current="current"
+              @change="subChange"
+              mode="subsection"
+            ></u-subsection>
+          </div>
+        </div>
+        <div class="info_icon" v-if="current == 0">
+          <div
+            v-for="(item, i) in hdList"
+            :key="i"
+            @click="jumpHdDetail(item)"
+            style="
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-bottom: 10px;
+            "
+          >
+            <div>
+              <div style="font-size: 32rpx">{{ item.stnm }}</div>
+              <div style="font-size: 24rpx">实时水位：{{ item.z }}m</div>
+            </div>
+            <div style="color: #91939b">监测时间：{{ item.tm }}</div>
+          </div>
+          <div v-if="!hdList.length" style="text-align: center">暂无内容</div>
+        </div>
+        <div class="info_icon" v-else>
+          <div
+            v-for="(item, i) in skList"
+            :key="i"
+            style="
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-bottom: 10px;
+            "
+            @click="jumpSkDetail(item)"
+          >
+            <div>
+              <div style="font-size: 32rpx">{{ item.stnm }}</div>
+              <div style="font-size: 24rpx">
+                实时水位：{{ item.normWatLev }}m
+              </div>
+            </div>
+            <div style="color: #91939b">监测时间：{{ item.tm }}</div>
+          </div>
+          <div v-if="!skList.length" style="text-align: center">暂无内容</div>
+        </div>
+      </view>
+    </view>
+    <view
+      class="info_24"
+      :style="{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: '5px 0',
+        margin: '0',
+      }"
+    >
+      <image
+        :style="{ width: '20px', height: '20px', marginRight: '10px' }"
+        src="../../static/logoc.png"
+      ></image>
+      <div>技术支持: 湖北鲧石物联科技有限公司</div>
+    </view>
+  </view>
+</template>
+
+<script>
+const dataType = {
+  Monday: "星期一",
+  Tuesday: "星期二",
+  Wednesday: "星期三",
+  Thursday: "星期四",
+  Friday: "星期五",
+  Saturday: "星期六",
+  Sunday: "星期天",
+};
+
+import moment from "moment";
+import { level } from "../../pages/utils/dicType";
+import { disType } from "../utils/dicType.js";
+import drpOption from "./chartOption.js";
+import { restm } from "../utils/tool";
+import WarnSwiper from "./warnSwiper";
+
+export default {
+  components: {
+    WarnSwiper,
+  },
+  data() {
+    return {
+      monthDay: "",
+      dayOfWeek: "",
+      dataType,
+      userList: {},
+      changeBool: false,
+      tableData: [],
+      loading: false,
+      list: {},
+      date: "",
+      ydate: "",
+      showTextTypeTab: 1,
+      tableData: {},
+      tm: "",
+      level: "",
+      yjStatus: 0,
+      warnings: [
+      ],
+      limit: disType(uni.getStorageSync("value").adcd),
+      timeList: [
+        { text: "昨天08:00~当前时间", value: 1 },
+        { text: "今天08:00~当前时间", value: 2 },
+        { text: "昨天08:00~今天08:00", value: 3 },
+        { text: "最近1小时", value: 4 },
+        { text: "最近3小时", value: 5 },
+        { text: "最近6小时", value: 6 },
+        { text: "最近12小时", value: 7 },
+        { text: "最近24小时", value: 8 },
+      ],
+      value1: 3,
+      rainChartData: [],
+      formData: {
+        stm: moment()
+          .subtract(1, "days")
+          .startOf("day")
+          .set({ hour: 8, minute: 0 }),
+        etm: moment().startOf("day").set({ hour: 8, minute: 0 }),
+      },
+      rainChartData: [],
+      chartData: {},
+      subList: ["河道水情", "水库水情"],
+      current: 0,
+      hdList: [],
+      skList: [],
+      readStatus: false, //工灾情状态
+      readYjStatus: false, //预警状态
+      dispatchStatus: false, //调令状态
+      default_src: uni.getStorageSync("avatar"),
+      imgList: {},
+      imgtm: moment().format("YYYYMMDD"),
+      imgData: [],
+      imgHours: "",
+      imgHourstm: [],
+      imgHoursList: { url: "" },
+      interval: null,
+      numPic: 0,
+      allStatus: false,
+      warnStm:Number(moment(new Date()).add(-1,'days')),
+			warnEtm:Number(new Date()),
+    };
+  },
+  onPullDownRefresh() {
+    this.getSwiperList();
+    this.getOverview();
+    this.getDataTime();
+    this.getResponseLevel();
+    this.getDispatchStatus();
+    this.getReadStatus();
+    this.shWarnList();
+    if (this.limit == 1) {
+      this.getYjRead();
+      // this.getInterval()
+      this.getImgs();
+      this.getHoursImg();
+    }
+    setTimeout(function () {
+      uni.stopPullDownRefresh();
+    }, 1000);
+  },
+  computed: {
+    getNavList() {
+      const adcd = uni.getStorageSync("value").adcd;
+      let lever = 0;
+      if (adcd.endsWith("000000000")) {
+        //县
+        return [
+          {
+            value: "雨情",
+            key: 1,
+            icon: "../../static/tabs/xingzhuang2.png",
+            url: "/pages/rain/rain",
+          },
+          {
+            value: "水情",
+            key: 2,
+            icon: "../../static/tabs/water2.png",
+            url: "/pages/water/water",
+          },
+          {
+            value: "工情灾情",
+            key: 3,
+            icon: "../../static/tabs/gongqing2.png",
+            url: "/pages/gqzq/index",
+          },
+          {
+            value: "信息上报",
+            key: 4,
+            icon: "../../static/tabs/xinxi_icon@2x2.png",
+            url: "/pages/xxsb/index",
+          },
+          {
+            value: "预警",
+            key: 5,
+            icon: "../../static/tabs/yujing_icon@2x2.png",
+            url: "/pages/forewarning/forewarning",
+          },
+        ];
+      } else {
+        //乡镇
+        return [
+          {
+            value: "雨情",
+            key: 1,
+            icon: "../../static/tabs/xingzhuang2.png",
+            url: "/pages/rain/rain",
+          },
+          {
+            value: "水情",
+            key: 2,
+            icon: "../../static/tabs/water2.png",
+            url: "/pages/water/water",
+          },
+          // {
+          //   value: '工情灾情',
+          //   key: 3,
+          //   icon: '../../static/tabs/gongqing2.png',
+          //   url: '/pages/gqzq/index'
+          // },
+          {
+            value: "调令反馈",
+            key: 5,
+            icon: "../../static/tabs/yujing_icon@2x2.png",
+            url: "/pages/orderFeedback/orderFeedback",
+          },
+          {
+            value: "信息上报",
+            key: 4,
+            icon: "../../static/tabs/xinxi_icon@2x2.png",
+            url: "/pages/xxsb/index",
+          },
+        ];
+      }
+    },
+  },
+  watch: {
+    rainChartData(newValue) {
+      this.chartData = { ...drpOption(newValue) };
+    },
+    limit: {
+      handler(newValue) {
+        if (!newValue) {
+          this.getRainList();
+        }
+      },
+      immediate: true,
+    },
+    current: {
+      handler(newValue) {
+        if (newValue == 0) {
+          this.getHdList();
+        } else {
+          this.getSkList();
+        }
+      },
+      immediate: true,
+    },
+    allStatus: {
+      handler(newValue) {
+        const newArr = this.getNavList();
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    // 山洪预警走马灯
+   async shWarnList(){
+    try{
+					const params = {
+						stm:moment(this.warnStm).format('YYYY-MM-DD HH:mm:ss'),
+						etm:moment(this.warnEtm).format('YYYY-MM-DD HH:mm:ss'),
+						warnstatusids:['0','30'],
+						warngradeids:['6','5']
+					}
+					const res = await uni.$http.post('/gunshiApp/xfflood/current/situation/app/flood/warn',params)
+					 if(res.data?.data?.length > 0){
+            this.warnings = res.data.data.map(item => ({
+            ...item,
+            id:item.warnid,
+            content:item.warnnm + "(" + item.warnstm + ")"
+          }))
+           }
+				}catch(e){
+          console.log(e);
+        }
+   },
+    previewImage(item) {
+      uni.previewImage({
+        urls: [item],
+        longPressActions: {
+          itemList: ["发送给朋友", "保存图片", "收藏"],
+          success: function (data) {
+            console.log(
+              "选中了第" +
+                (data.tapIndex + 1) +
+                "个按钮,第" +
+                (data.index + 1) +
+                "张图片"
+            );
+          },
+          fail: function (err) {
+            console.log(err.errMsg);
+          },
+        },
+      });
+    },
+    async getImgs() {
+      let h = moment().format("HH");
+      let m = moment().format("mm");
+      uni.request({
+        url: "http://223.75.53.124:8005/grb/latest",
+        success: (res) => {
+          const myTm = res.data.data.tm;
+          if (myTm) {
+            uni.request({
+              url: "http://223.75.53.124:8005/grb/rainimglist",
+              data: {
+                tm: moment(myTm).format("YYYYMMDDHH"),
+              },
+              success: (res) => {
+                console.log(res.data.data);
+                this.imgList = res.data.data;
+
+                // let inx = restm(h)
+
+                // this.imgHours = res.data.data.imgHours[inx]
+
+                let tm = moment().add(1, "days").format("MM月DD日");
+                let tm2 = moment().format("MM月DD日");
+                this.imgData = [`${tm2}08时`, `${tm}08时`];
+                // this.imgHourstm = [`${tm2}${h + 1}时`, `${tm2}${h + 2}时`]
+              },
+            });
+          }
+        },
+      });
+    },
+    getTmData() {
+      let hn = this.numPic > 0 ? this.numPic : 1;
+      let h = moment().subtract(hn, "hours").format();
+      let m = moment().format("mm");
+      console.log("hhh--", h, m, this.numPic);
+      let tms = null,
+        mm = null;
+      let h1 = Number(h) - 1;
+      if (h1 < 9) {
+        h1 = Number(h) - this.numPic;
+      }
+      if (h1 < 10) {
+        h1 = `0${h1}`;
+      }
+      if (m > 30) {
+        h1 = Number(h) - 1;
+        let m1 = h > 10 ? h : `0${h}`;
+        tms = `${this.imgtm}${m1}30`;
+        mm = "30";
+      } else if (m < 10) {
+        tms = `${this.imgtm}${h1}`;
+        mm = "00";
+      } else {
+        tms = `${this.imgtm}${h1}30`;
+        mm = "30";
+      }
+    },
+    async getHoursImg() {
+      let h = moment().format("HH");
+      let m = moment().format("mm");
+      console.log("hhh--", h, m, this.numPic);
+      let tms = null,
+        mm = null;
+      let h1 = Number(h) - 1;
+
+      if (h1 < 10) {
+        let t = Number(h1) - Number(this.numPic);
+        h1 = `0${t}`;
+      }
+      if (m > 30) {
+        h1 = Number(h) - 1;
+        let t3 = Number(h) - this.numPic;
+        if (this.numPic <= 0) {
+          let m3 = h1 > 10 ? h1 : `0${h1}`;
+          tms = `${this.imgtm}${m3}30`;
+        } else {
+          t3 = t3 < 10 ? `0${t3}` : t3;
+          tms = `${this.imgtm}${t3}30`;
+        }
+        mm = "30";
+      } else if (m < 10) {
+        tms = `${this.imgtm}${h1}00`;
+        mm = "00";
+      } else {
+        tms = `${this.imgtm}${h1}30`;
+        mm = "30";
+      }
+
+      console.log("小时", h1);
+      console.log("需要参数", tms);
+
+      uni.request({
+        url: "http://223.75.53.124:8005/radar/latest",
+        success: (res) => {
+          let tm = moment(res.data.data.tm);
+          let subfix = "?rainFile=" + res.data.data.rainFile;
+          let url = `http://shqxjs.cloudowr.cn/yj_folder/rain/radar/${tm.format(
+            "YYYYMM"
+          )}/${tm.format("DD")}/${tm.format(
+            "YYYYMMDDHHmm"
+          )}+00.02.jpg${subfix}`;
+          console.log(222222222227, url);
+
+          console.log("pic---", tms, res.data.data);
+          this.imgHoursList = { url: url };
+          let m = moment().format("MM月DD日");
+
+          console.log("am222", this.imgHoursList);
+          let m1 = Number(h1) + 2;
+          this.imgHourstm = [`${m}${h1}时${mm}分`, `${m}${m1}时${mm}分`];
+
+          if (url == null) {
+            this.numPic++;
+            setTimeout(() => {
+              this.getHoursImg();
+            }, 10 * 1000);
+          } else {
+            this.numPic = 0;
+            return;
+          }
+        },
+      });
+    },
+
+    // async getInterval () {
+    //   this.interval = setInterval(() => {
+    //     this.getHoursImg()
+    //   }, 60 * 1000)
+    // },
+    async getYjRead() {
+      try {
+        const { data } = await uni.$http.get(
+          "/gunshiApp/xfflood/current/situation/flag"
+        );
+        if (data.code == 200) {
+          this.readYjStatus = data.data;
+        }
+      } catch (error) {
+        uni.$showMsg();
+      }
+    },
+    async getReadStatus() {
+      try {
+        const { data } = await uni.$http.get(
+          "/gunshiApp/xfflood/xfProjectRun/has/read"
+        );
+        if (data.code == 200) {
+          this.readStatus = Object.values(data.data).some(
+            (item) => item == true
+          );
+        }
+      } catch (error) {
+        uni.$showMsg();
+      }
+    },
+    async getDispatchStatus() {
+      try {
+        const res = await uni.$http.post(
+          "/gunshiApp/xfflood/xfEmerDispatchR/app/list",
+          { status: 1, dispatchTypeList: ["0", "1"] }
+        );
+        if (res.data.code == 200) {
+          this.dispatchStatus = res.data.data.length > 0 ? true : false;
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async setInsert(menu2) {
+      try {
+        const params = {
+          createId: uni.getStorageSync("value").userId,
+          loginType: 1,
+          menu1: "首页",
+          menu2: menu2 || "首页",
+        };
+
+        const { data } = await uni.$http.post(
+          "/gunshiApp/xfflood/visitMenuLog/insert",
+          params
+        );
+        console.log("用户行为", params, data);
+      } catch (error) {}
+    },
+    jumpHdDetail(params) {
+      uni.navigateTo({
+        url: `/pages/hdDetail/hdDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&wrz=${params.wrz}&grz=${params.grz}`,
+      });
+    },
+    jumpSkDetail(params) {
+      uni.navigateTo({
+        url: `/pages/skDetail/skDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&afsltdz=${params.afsltdz}&flLowLimLev=${params.flLowLimLev}&desFloodLev=${params.desFloodLev}&calFloodLev=${params.calFloodLev}&resCode=${params.resCode}`,
+      });
+    },
+    async getSkList() {
+      try {
+        const { data } = await uni.$http.post(
+          "/gunshiApp/xfflood/reservoir/water/list",
+          {
+            sources: ["SW", "SK"],
+            adcd: uni.getStorageSync("value").adcd,
+          }
+        );
+        if (data.code == 200) {
+          this.skList = data.data;
+        }
+      } catch (error) {
+        uni.$showMsg();
+      }
+    },
+    async getHdList() {
+      try {
+        const { data } = await uni.$http.post(
+          "/gunshiApp/xfflood/river/water/list",
+          {
+            sources: ["SH", "SW"],
+            adcd: uni.getStorageSync("value").adcd,
+          }
+        );
+        if (data.code == 200) {
+          this.hdList = data.data;
+        }
+      } catch (error) {
+        uni.$showMsg();
+      }
+    },
+    subChange(e) {
+      this.current = e;
+    },
+    async getRainList() {
+      try {
+        const { data } = await uni.$http.post(
+          "/gunshiApp/xfflood/real/rain/home/list",
+          {
+            start: this.formData.stm.format("YYYY-MM-DD HH:mm:ss"),
+            end: this.formData.etm.format("YYYY-MM-DD HH:00:00"),
+          }
+        );
+        if (data.code == 200) {
+          console.log("rainChartData0,", data);
+          this.rainChartData = data.data;
+        }
+      } catch (error) {
+        uni.$showMsg();
+      }
+    },
+    changeTime(params) {
+      let tmValue = [];
+      if (params === 1) {
+        tmValue = [
+          moment()
+            .subtract(1, "days")
+            .startOf("day")
+            .set({ hour: 8, minute: 0 }),
+          moment(),
+        ];
+      } else if (params === 2) {
+        tmValue = [
+          moment().startOf("day").set({ hour: 8, minute: 0 }),
+          moment(),
+        ];
+      } else if (params === 3) {
+        tmValue = [
+          moment()
+            .subtract(1, "days")
+            .startOf("day")
+            .set({ hour: 8, minute: 0 }),
+          moment().startOf("day").set({ hour: 8, minute: 0 }),
+        ];
+      } else if (params === 4) {
+        tmValue = [moment().subtract(1, "hours"), moment()];
+      } else if (params === 5) {
+        tmValue = [moment().subtract(3, "hours"), moment()];
+      } else if (params === 6) {
+        tmValue = [moment().subtract(6, "hours"), moment()];
+      } else if (params === 7) {
+        tmValue = [moment().subtract(12, "hours"), moment()];
+      } else if (params === 8) {
+        tmValue = [moment().subtract(24, "hours"), moment()];
+      }
+      this.formData.stm = tmValue[0];
+      this.formData.etm = tmValue[1];
+      this.getRainList();
+    },
+    todetail(val) {
+      console.log("val", val);
+      if (val == 1) {
+        uni.navigateTo({
+          url: "/pages/rain/index",
+        });
+      }
+      if (val == 3) {
+        uni.navigateTo({
+          url: "/pages/gqzq/index",
+        });
+      }
+    },
+    tabChange(val) {
+      this.showTextTypeTab = val;
+      if (val == 1) {
+        this.getWeather();
+      } else {
+        this.getWeatherArea();
+      }
+    },
+    changeTable(val) {
+      this.changeBool = !this.changeBool;
+      if (val) {
+        this.getWeather();
+      }
+      console.log("this.changeBool", this.changeBool);
+    },
+    // 区域 /weather/area
+    async getWeatherArea() {
+      try {
+        const res = await uni.$http.post("/gunshiApp/xfflood/weather/area", {
+          tm: this.tm,
+        });
+        console.log("--44-", res);
+        this.tableData = res;
+        // this.userList = res.data
+
+        // console.log('--333-', this.tableData)
+      } catch (e) {
+        uni.$showMsg();
+      }
+    },
+    // 水库 /weather/res
+    async getWeather() {
+      try {
+        const res = await uni.$http.post("/gunshiApp/xfflood/weather/res", {
+          tm: this.tm,
+        });
+        console.log("--3-", res);
+        this.tableData = res;
+        // this.userList = res.data
+
+        console.log("--333-", this.tableData);
+      } catch (e) {
+        uni.$showMsg();
+      }
+    },
+    async getSwiperList() {
+      try {
+        const res = await uni.$http.get("/gunshiApp/xfflood/getLoginInfo");
+        console.log("--1-", res.data);
+        this.userList = res.data;
+
+        console.log("--1-", this.userList);
+      } catch (e) {
+        uni.$showMsg();
+      }
+    },
+    async getOverview() {
+      try {
+        let res = await uni.$http.get("/gunshiApp/xfflood/real/rain/overview");
+        console.log("--2-", res);
+        this.list = res.data;
+
+        console.log("--2-", res);
+      } catch (e) {
+        uni.$showMsg();
+      }
+    },
+
+    getDataTime() {
+      this.monthDay = moment().format("MM月DD日");
+      this.dayOfWeek = moment().format("dddd");
+      this.date = moment().format("MM月DD日HH时");
+      this.ydate = moment().subtract(1, "days").format("MM月DD日HH时");
+      console.log("moment11", this.date, this.ydate);
+      let d1 = moment().format("YYYYMMDD");
+      let h1 = moment().format("HH") >= 20 ? "20" : "08";
+
+      this.tm = d1 + h1;
+    },
+    async getResponseLevel() {
+      try {
+        const { data } = await uni.$http.post(
+          "/gunshiApp/xfflood/xfEmerRespR/page",
+          {
+            pageSo: { pageSize: 10, pageNumber: 1 },
+            year: moment().format("YYYY"),
+          }
+        );
+        if (data.code == 200) {
+          if (data.data.records.length > 0) {
+            console.log("1111111data", data);
+            this.level = level(data.data.records[0].level);
+            this.yjStatus = data.data.records[0].status;
+          } else {
+            this.level = "无";
+          }
+        }
+      } catch (e) {
+        uni.$showMsg();
+      }
+    },
+    myNavigateTo(url, menu2) {
+      uni.navigateTo({
+        url: url, // 跳转到对应路径的页面
+      });
+      this.setInsert(menu2);
+    },
+    // 响应级别
+  },
+  onLoad() {
+    this.getSwiperList();
+    this.getOverview();
+    this.getDataTime();
+    this.getResponseLevel();
+  },
+
+  onShow() {
+    this.getReadStatus();
+    this.shWarnList();
+    this.getResponseLevel();
+    this.getDispatchStatus();
+    this.setInsert();
+    if (this.limit == 1) {
+      this.getYjRead();
+      // this.getInterval()
+      this.getImgs();
+      this.getHoursImg();
+    }
+  },
+  // onUnload () {
+  //   clearInterval(this.interval)
+  //   this.interval = null
+  // }
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  font-size: 14px;
+  line-height: 24px;
+  background-color: #f3f5f8;
+}
+.info {
+  height: 100rpx;
+  background-color: #007afd;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  color: #fff;
+}
+.left {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #fff;
+  text-align: center;
+  color: #007afd;
+  line-height: 50px;
+}
+.info_name {
+  margin-left: 16rpx;
+}
+.right {
+  text-align: center;
+}
+.navBar {
+  height: 100%;
+  background-color: #fff;
+  margin-bottom: 12rpx;
+  /* background-color: pink; */
+}
+.navBar {
+  padding: 20px;
+  /* text-align: center; */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.navList {
+  text-align: center;
+}
+.navIcon {
+  position: relative;
+  width: 50px;
+  height: 50px;
+  /* border-radius: 10px;
+    background-color: #007afd; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.readStatus {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #de2433;
+}
+.warn {
+  background-color: #fff;
+  color: #de2433;
+  padding: 18rpx 20rpx;
+  text-align: left;
+  margin-bottom: 12rpx;
+}
+
+/* 24小时 */
+.chartChange {
+  text-align: center;
+  margin: 16rpx 0;
+}
+.chart_tit {
+  width: 129rpx;
+  height: 43rpx;
+  background: #d3e1ff;
+  border-radius: 20rpx;
+  color: #3380ff;
+}
+
+.chart_tit image {
+  margin-right: 10rpx;
+  width: 36rpx;
+  height: 30rpx;
+}
+
+.table_h {
+  display: flex;
+  text-align: center;
+  height: 24px;
+  /* position: absolute;
+    top: 0;
+    right: 0; */
+}
+
+/* info_24 */
+.info_24 {
+  padding: 15px;
+  background-color: #fff;
+  margin-bottom: 12rpx;
+}
+.heart {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.fl {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title .line {
+  border: 2px solid #3380ff;
+  border-radius: 3rpx;
+  margin-right: 20rpx;
+}
+.title .h4 {
+  font-weight: 400;
+  font-size: 32rpx;
+  color: #121b3d;
+}
+.time {
+  font-weight: 400;
+  font-size: 24rpx;
+  color: #a2a2a2;
+}
+
+.g1 {
+  color: #545556;
+}
+.ye {
+  color: #ff1717;
+  /* font-weight: 600; */
+}
+.b1 {
+  color: #3380ff;
+  padding: 0 2px;
+}
+
+.uni-group {
+  display: flex;
+  align-items: center;
+}
+
+/* 表格 */
+.tableBox {
+  width: 100%;
+  position: relative;
+}
+
+.leftTab {
+  width: 80px;
+  /* border-bottom: 1px solid #ccc; */
+}
+.rightTab {
+  width: 80px;
+  /* border: 1px solid #ccc;
+    border-radius: 0 3px 3px 0;
+    border-left: 0; */
+}
+.activetextTypeTab,
+.activetextTypeTab:hover {
+  border-bottom: 3rpx solid #2286f6;
+  color: #026be0;
+}
+.table_div {
+  widows: 100%;
+  height: 100%;
+  max-width: calc(100% - 0px);
+  max-height: calc(100vh - 24px);
+  flex: 1;
+  padding-top: 30px;
+  overflow-x: scroll;
+}
+/*table样式*/
+.table_cur {
+  width: 100%;
+  empty-cells: show;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+.table_cur tr {
+  display: flex;
+  line-height: 56rpx;
+}
+.table_cur th {
+  height: 56rpx;
+  color: #2f4056;
+  background: #f5f6f8;
+  font-size: 14px;
+  font-weight: bold;
+  padding: 0 10px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  text-align: center !important;
+}
+
+.table_cur td {
+  height: 56rpx;
+  border-bottom: 1px solid #e5e9f2;
+  font-size: 14px;
+  color: #2f4056;
+  padding: 0 10px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  text-align: center !important;
+}
+/*table样式 end*/
+.noData {
+  width: 100px;
+}
+</style>
diff --git a/pages/homeIndex/skMaxDrp.vue b/pages/homeIndex/skMaxDrp.vue
new file mode 100644
index 0000000..bea32e5
--- /dev/null
+++ b/pages/homeIndex/skMaxDrp.vue
@@ -0,0 +1,329 @@
+<template>
+    <view class="info_24">
+        <div class="heart">
+        <p class="title">
+            <span class="line"></span><span class="h4">今日雨量</span>
+        </p>
+        </div>
+        <div class="chartChange fl">
+        <div class="chart_tit" @click="changeTable">
+            <image
+            style="vertical-align: middle"
+            src="../../static/tabs/chartcolumn@2x.png"
+            mode="aspectFit"
+            ></image>
+            <span>图表</span>
+        </div>
+        </div>
+
+        <div class="imgs" style="height: 100%; text-align: center">
+        <!--  24h天气预报图像-->
+        <qiun-data-charts v-if="!changeBool"  type="pie" :opts="opts" :chartData="echartsOptios" />
+        <!-- 表格-->
+        <div v-else class="tableBox">
+            <div v-if="!loading" class="table_div">
+                <div class="table_cur">
+                    <table style="width: 100%">
+                        <tr>
+                            <th style="width: 50px; color: #59a7ff">序号</th>
+                            <th style="width: 30%; color: #59a7ff">水库</th>
+                            <th style="width: 80%; color: #59a7ff">监测点</th>
+                            <th style="width: 30%; color: #59a7ff">今日雨量(mm)</th>
+                        </tr>
+                        <div style="max-height: 260px; overflow-y: auto" v-if="tableData">
+                            <tr v-for="(item, index) in tableData" :key="index">
+                              <td style="width: 50px">{{ index + 1 }}</td>
+                              <td style="width: 30%">{{ item.reservoir }}</td>
+                              <td style="width: 80%">{{ item.station }}</td>
+                              <td style="width: 30%">{{ item.rainfall }}</td>
+                            </tr>
+                        </div>
+                    </table>
+                </div>
+            </div>
+            <div v-else style="color: #b8b8b8; width: 100%; margin: 130px auto;">加载中...</div>
+        </div>
+        </div>
+    </view>
+</template>
+
+<script>
+
+
+import moment from "moment";
+export default {
+    data() {
+        return {
+            changeBool: false,
+            tableData: [],
+            loading:false,
+            tm:null,
+            opts:{
+                update: true,
+                color: ["#678ef2","#7dd5a9","#616f8f","#edbf45","#6c5ff0","#83c6e8","#8c61b4"],
+                padding: [20,30,20,0],
+                enableScroll: false,
+                extra: {
+                  pie: {
+                    activeOpacity: 0.5,
+                    activeRadius: 10,
+                    offsetAngle: 0,
+                    labelWidth: 15,
+                    border: false,
+                    borderWidth: 3,
+                    borderColor: "#FFFFFF"
+                  }
+                },
+                legend: {
+                  show: true,
+                  position: "right",
+                  lineHeight: 25
+                },
+            },
+        };
+    },
+    computed: {
+        echartsOptios() {
+          const groups = {
+            '0mm': [],
+            '0.1~10mm': [],
+            '10~25mm': [],
+            '25~50mm': [],
+            '50~100mm': [],
+            '100~250mm': [],
+            '≥250mm': []
+          };
+          this.tableData.forEach(item => {
+            const r = item.rainfall;
+            if (r === 0) groups['0mm'].push(item);
+            else if (r > 0 && r < 10) groups['0.1~10mm'].push(item);
+            else if (r >= 10 && r < 25) groups['10~25mm'].push(item);
+            else if (r >= 25 && r < 50) groups['25~50mm'].push(item);
+            else if (r >= 50 && r < 100) groups['50~100mm'].push(item);
+            else if (r >= 100 && r < 250) groups['100~250mm'].push(item);
+            else groups['≥250mm'].push(item);
+          });
+          const chartData = []
+          for(let key in groups){
+            chartData.push({
+              name:key,
+              value:groups[key].length,
+              labelText:groups[key].length
+            })
+          }
+
+            let res = {
+                series: [
+                  { data: chartData }
+                ]
+            };
+            return JSON.parse(JSON.stringify(res));
+        },
+    },
+    methods: {
+        async getData() {
+            this.loading = true
+            try {
+                // const res = await uni.$http.post("/gunshiApp/xfflood/weather/area", { tm });
+                this.tableData = [
+                  { id: 1, reservoir: '思姑井水库', station: '思姑井水库雨量站', rainfall: 0.0 },
+                  { id: 2, reservoir: '四清水库', station: '四清水库雨量站', rainfall: 3.2 },
+                  { id: 3, reservoir: '曾家塘水库', station: '曾家塘水库雨量站', rainfall: 0.0 },
+                  { id: 4, reservoir: '双塘水库', station: '双塘水库雨量站', rainfall: 3.1 },
+                  { id: 5, reservoir: '东风水库', station: '东风水库雨量站', rainfall: 0.0 },
+                  { id: 6, reservoir: '红旗水库', station: '红旗水库雨量站', rainfall: 12.5 },
+                  { id: 7, reservoir: '胜利水库', station: '胜利水库雨量站', rainfall: 0.0 },
+                  { id: 8, reservoir: '团结水库', station: '团结水库雨量站', rainfall: 0.0 },
+                  { id: 9, reservoir: '跃进水库', station: '跃进水库雨量站', rainfall: 8.7 },
+                  { id: 10, reservoir: '光明水库', station: '光明水库雨量站', rainfall: 0.0 },
+                  { id: 11, reservoir: '五一水库', station: '五一水库雨量站', rainfall: 25.3 },
+                  { id: 12, reservoir: '向阳水库', station: '向阳水库雨量站', rainfall: 0.0 },
+                  { id: 13, reservoir: '永丰水库', station: '永丰水库雨量站', rainfall: 1.5 },
+                  { id: 14, reservoir: '新生水库', station: '新生水库雨量站', rainfall: 0.0 },
+                  { id: 15, reservoir: '和平水库', station: '和平水库雨量站', rainfall: 42.0 },
+                  { id: 16, reservoir: '红星水库', station: '红星水库雨量站', rainfall: 0.0 },
+                  { id: 17, reservoir: '卫星水库', station: '卫星水库雨量站', rainfall: 6.8 },
+                  { id: 18, reservoir: '先锋水库', station: '先锋水库雨量站', rainfall: 0.0 },
+                  { id: 19, reservoir: '东风二库', station: '东风二库雨量站', rainfall: 98.4 },
+                  { id: 20, reservoir: '红旗二库', station: '红旗二库雨量站', rainfall: 0.0 },
+                  { id: 21, reservoir: '长岭水库', station: '长岭水库雨量站', rainfall: 0.0 },
+                  { id: 22, reservoir: '青松水库', station: '青松水库雨量站', rainfall: 15.2 },
+                  { id: 23, reservoir: '翠屏水库', station: '翠屏水库雨量站', rainfall: 0.0 },
+                  { id: 24, reservoir: '碧云水库', station: '碧云水库雨量站', rainfall: 3.8 },
+                  { id: 25, reservoir: '龙潭水库', station: '龙潭水库雨量站', rainfall: 0.0 },
+                  { id: 26, reservoir: '凤鸣水库', station: '凤鸣水库雨量站', rainfall: 156.7 },
+                  { id: 27, reservoir: '鹤翔水库', station: '鹤翔水库雨量站', rainfall: 0.0 },
+                  { id: 28, reservoir: '鹭影水库', station: '鹭影水库雨量站', rainfall: 0.0 },
+                  { id: 29, reservoir: '麒麟水库', station: '麒麟水库雨量站', rainfall: 289.3 },
+                  { id: 30, reservoir: '玄武水库', station: '玄武水库雨量站', rainfall: 0.0 }
+                ];
+                this.loading = false
+            } catch (e) {
+                uni.$showMsg();
+            }
+        },
+        changeTable(val) {
+          this.changeBool = !this.changeBool;
+        },
+        getDataTime() {
+            let d1 = moment().format("YYYYMMDD");
+            let h1 = moment().format("HH") >= 20 ? "20" : "08";
+            this.tm = d1 + h1;
+        },
+    },
+    // 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
+    created() {
+        this.getDataTime();
+        this.getData()
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+/* 24小时 */
+.chartChange {
+  text-align: center;
+  margin: 16rpx 0;
+}
+.chart_tit {
+  width: 129rpx;
+  height: 43rpx;
+  background: #d3e1ff;
+  border-radius: 20rpx;
+  color: #3380ff;
+}
+
+.chart_tit image {
+  margin-right: 10rpx;
+  width: 36rpx;
+  height: 30rpx;
+}
+
+.table_h {
+  display: flex;
+  text-align: center;
+  height: 24px;
+  /* position: absolute;
+    top: 0;
+    right: 0; */
+}
+.info_24 {
+  padding: 15px;
+  background-color: #fff;
+  margin-bottom: 12rpx;
+  box-shadow: 0px 0px 5px #eee;
+}
+.heart {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.fl {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title .line {
+  border: 2px solid #3380ff;
+  border-radius: 3rpx;
+  margin-right: 20rpx;
+}
+.title .h4 {
+  font-weight: 400;
+  font-size: 32rpx;
+  color: #121b3d;
+}
+.time {
+  font-weight: 400;
+  font-size: 24rpx;
+  color: #a2a2a2;
+}
+
+.g1 {
+  color: #545556;
+}
+.ye {
+  color: #ff1717;
+  /* font-weight: 600; */
+}
+.b1 {
+  color: #3380ff;
+  padding: 0 2px;
+}
+
+.uni-group {
+  display: flex;
+  align-items: center;
+}
+
+/* 表格 */
+.tableBox {
+  width: 100%;
+  position: relative;
+}
+
+.leftTab {
+  width: 80px;
+  /* border-bottom: 1px solid #ccc; */
+}
+.rightTab {
+  width: 80px;
+  /* border: 1px solid #ccc;
+    border-radius: 0 3px 3px 0;
+    border-left: 0; */
+}
+.activetextTypeTab,
+.activetextTypeTab:hover {
+  border-bottom: 3rpx solid #2286f6;
+  color: #026be0;
+}
+.table_div {
+  widows: 100%;
+  height: 100%;
+  max-width: calc(100% - 0px);
+  max-height: calc(100vh - 24px);
+  flex: 1;
+  // padding-top: 30px;
+  overflow-x: scroll;
+}
+/*table样式*/
+.table_cur {
+  width: 100%;
+  empty-cells: show;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+.table_cur tr {
+  display: flex;
+  line-height: 56rpx;
+}
+.table_cur th {
+  height: 56rpx;
+  color: #2f4056;
+  background: #f5f6f8;
+  font-size: 14px;
+  font-weight: bold;
+  padding: 0 10px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  text-align: center !important;
+}
+
+.table_cur td {
+  height: 56rpx;
+  border-bottom: 1px solid #e5e9f2;
+  font-size: 14px;
+  color: #2f4056;
+  padding: 0 10px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  text-align: center !important;
+}
+/*table样式 end*/
+.noData {
+  width: 100px;
+}
+
+</style>
+  
\ No newline at end of file
diff --git a/pages/homeIndex/skWarn.vue b/pages/homeIndex/skWarn.vue
new file mode 100644
index 0000000..fa612a1
--- /dev/null
+++ b/pages/homeIndex/skWarn.vue
@@ -0,0 +1,192 @@
+<template>
+    <view class="info_24">
+        <div class="heart">
+            <p class="title">
+                <span class="line"></span><span class="h4">实时汛情</span>
+            </p>
+            <div>{{ tm }}</div>
+        </div>
+        <div class="chartChange fl">
+            <div class="tabItem tabLf" :class="{ bgBlue: tabKey === 1 }" @click="tabChange(1)">
+                <div class="tabNum">131</div>
+                <div class="tabText">水库</div>
+            </div>
+            <!-- <div class="borderLine"></div> -->
+            <div class="tabItem tabRf" :class="{ bgYellow: tabKey === 2 }" @click="tabChange(2)">
+                <div class="tabNum">9</div>
+                <div class="tabText">超汛限</div>
+            </div>
+        </div>
+        <qiun-data-charts  type="column" :opts="opts" :chartData="echartsOptios" />
+    </view>
+</template>
+
+<script>
+
+
+import moment from "moment";
+export default {
+    data() {
+        return {
+            tm:null,
+            tabOptions:['水库', '超汛限水库'],
+            tabKey:1,
+            opts:{
+                update: true,
+                color: ["#6e93f2","#efa161"],
+                padding: [15,15,0,5],
+                enableScroll: false,
+                legend: {
+                    show:false,
+                },
+                xAxis: {
+                    disableGrid: true
+                },
+                yAxis: {
+                    showTitle: true,
+                    data: [
+                        {
+                            position: "left",
+                            title: "座",
+                            titleOffsetX: -10,   // 向左偏移 10px
+                            titleOffsetY: -5,     // 向上偏移 5px
+                            min: 0,
+                        }
+                    ]
+                },
+                extra: {
+                    column: {
+                        type: "group",
+                        width: 30,
+                        activeBgColor: "#000000",
+                        activeBgOpacity: 0.08
+                    }
+                }
+            },
+            data: [],
+            loading:false,
+            tm:null,
+        };
+    },
+    computed: {
+        echartsOptios() {
+            let res = {
+                categories: this.data.map(i=>i.type),
+                series: [
+                    {
+                        name: "水库",
+                        show: this.tabKey===1?true:false,
+                        data: this.data.map(i=>i.sk)
+                    },
+                    {
+                        name: "超汛限水库",
+                        show: this.tabKey===2?true:false,
+                        data: this.data.map(i=>i.cxx)
+                    }
+                ]
+            };
+            return JSON.parse(JSON.stringify(res));
+        },
+    },
+    methods: {
+        async getData() {
+            this.loading = true
+            try {
+                // const res = await uni.$http.post("/gunshiApp/xfflood/weather/area", { tm });
+                this.data = [
+                    { type:'大(1)型',sk:4,cxx:0 },
+                    { type:'大(2)型',sk:2,cxx:1 },
+                    { type:'中型',sk:7,cxx:0 },
+                    { type:'小(1)型',sk:31,cxx:3 },
+                    { type:'小(2)型',sk:22,cxx:1 },
+                ];
+                this.loading = false
+            } catch (e) {
+                uni.$showMsg();
+            }
+        },
+        tabChange(val) {
+            this.tabKey = val
+        },
+        getDataTime() {
+            this.tm = moment().format("YYYY-MM-DD HH");
+        },
+    },
+    // 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
+    created() {
+        this.getDataTime();
+        this.getData()
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.info_24 {
+  padding: 15px;
+  background-color: #fff;
+  margin-bottom: 12rpx;
+  box-shadow: 0px 0px 5px #eee;
+}
+.heart {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.fl {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.title .line {
+  border: 2px solid #3380ff;
+  border-radius: 3rpx;
+  margin-right: 20rpx;
+}
+.title .h4 {
+  font-weight: 400;
+  font-size: 32rpx;
+  color: #121b3d;
+}
+.chartChange {
+  text-align: center;
+  margin: 16rpx 0;
+}
+.tabItem{
+    width: 200px;
+    padding: 5px 0;
+    border: 1px solid #eee;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.tabLf{
+    border-right: 0;
+}
+.tabRf{
+    border-left: 0;
+}
+.bgBlue{
+    border: 1px solid #6e93f2;
+    color: #6e93f2;
+}
+.bgYellow{
+    border: 1px solid #efa161;
+    color: #efa161;
+}
+.tabNum{
+    padding: 3px 0;
+    font-size: 14px;
+    line-height: 14px;
+    font-weight: 800;
+}
+.tabText{
+    padding: 3px 0;
+    font-size: 14px;
+    line-height: 14px;
+    font-weight: 600;
+}
+
+</style>
+  
\ No newline at end of file
diff --git a/pages/login/login.vue b/pages/login/login.vue
index a8de855..73f4978 100644
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -1,11 +1,11 @@
 <template>
   <view class="container">
     <div class="img">
-      <image
+      <!-- <image
         style="width: 100%; height: 100%"
         src="../../static/images/u8.png"
         mode="scaleToFill"
-      ></image>
+      ></image> -->
     </div>
     <uni-forms :modelValue="formData" class="form">
       <uni-forms-item>
@@ -128,6 +128,7 @@ export default {
 
       //MD5加密
       const encryptData = data => {
+        console.log('777777',data);
         const encryptedData = CryptoJS.MD5(data).toString()
         return encryptedData
       }
@@ -168,42 +169,14 @@ export default {
               console.log('-----value------', res.data.data)
             })
 
-            //获取userId并获取头像
-            uni.$http
-              .get('/gunshiApp/xfflood/my/info/getByUserId')
-              .then(res => {
-                console.log('-----avatar1------', res.data)
-                if (res.data.data) {
-                  let url =
-                    '/gunshiApp/xfflood/bzProjectManipulationRecord/file/get/'
-                  url = url + res.data.data.fileId
-                  uni.$http.get(url).then(res => {
-                    uni.setStorageSync(
-                      'avatar',
-                      'http://223.75.53.141:9102/test.by-lyf.tmp' +
-                        res.data.data.filePath
-                    )
-                    console.log(
-                      '-----avatar------',
-                      uni.getStorageSync('avatar')
-                    )
-                  })
-                } else {
-                  uni.setStorageSync('avatar', '../../static/tabs/touxiang.png')
-                }
-				
-				
-				
-				// uni.showLoading({title:'努力登录中...', mask:true});
-				//登录成功后跳转界
-				setTimeout(function () {
-				  uni.hideLoading()
-				  uni.reLaunch({
-				    url: '/pages/homeIndex/index'
-				  })
-				}, 1000)
-				clearTimeout()
+            uni.setStorageSync('avatar', '../../static/tabs/touxiang.png')
+            setTimeout(function () {
+              uni.hideLoading()
+              uni.reLaunch({
+                url: '/pages/homeIndex/index'
               })
+            }, 1000)
+            clearTimeout()
           }
         } else if (res.data.code === 400) {
           //登录失败后弹出信息
@@ -221,7 +194,7 @@ export default {
     }
   },
    onLoad() {
-      this.init();
+      // this.init();
     }
 }
 </script>
@@ -235,6 +208,12 @@ export default {
   height: 100vh;
   align-items: center;
   background-color: #f3f5f8;
+
+  background-image: url('/static/images/loginBg.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+
 }
 .img {
   width: 100vw;
@@ -248,6 +227,11 @@ export default {
   height: 8vh;
   align-items: center;
   justify-content: center;
+  
+  color: #ffffff;
+}
+.custom-input-bg{
+  background-color: red!important;
 }
 .button {
 }
diff --git a/pages/modifyPassword/modifyPassword.vue b/pages/modifyPassword/modifyPassword.vue
index 7da4b10..622c68f 100644
--- a/pages/modifyPassword/modifyPassword.vue
+++ b/pages/modifyPassword/modifyPassword.vue
@@ -9,7 +9,7 @@
 			</div>
 		</div>
 		<div class="info">
-			<uni-forms :modelValue="formData" >
+			<uni-forms :modelValue="formData" style="width: 100%;height: 100%;">
 				<uni-forms-item label="原密码" :required="true" class="form">
 					<uni-easyinput type="password" v-model="formData.oldSecretKey" placeholder="请输入原密码" class="password"/>
 				</uni-forms-item>
@@ -85,11 +85,21 @@
 </script>
 
 <style>
+	.container{
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	.info{
+		display: flex;
+		flex:1;
+	}
 	.userinfo{
 		border-radius: 5px;
 		display: flex;
 		flex-direction: row;
-		margin-top: 5vh;
+		margin-top: 4vh;
 		margin-left: 2vw;
 		margin-bottom: 2vh;
 		align-items: center;
@@ -116,7 +126,8 @@
 		height: 50px;
 		width: 95%;
 		/* background-color: red; */
-		margin-left: 1vw;
+		/* margin-left: 2vw; */
+		margin: 0 11px;
 		align-items: center;
 	}
 	.password{
@@ -128,12 +139,15 @@
 		display: flex;
 		justify-content: center;
 		flex-direction: column-reverse;
-		margin-top: 50vh;
-		width: 92%;
+		/* margin-top: 50vh; */
+		width: 90%;
+		margin: 0 5%;
 		height: 6vh;
 		font-size: 20px;
 		color: white;
 		background-color: #007afd;
+		position: absolute;
+		bottom: 20px;
 	}
 	
 
diff --git a/pages/mypage/mypage.vue b/pages/mypage/mypage.vue
index c810d64..dc7e1dd 100644
--- a/pages/mypage/mypage.vue
+++ b/pages/mypage/mypage.vue
@@ -47,7 +47,7 @@
 <script>
 	
 	const func = [
-		{img: '../../static/images/info.png', name: '个人信息', url:'/pages/personInfo/personInfo'},
+		// {img: '../../static/images/info.png', name: '个人信息', url:'/pages/personInfo/personInfo'},
 		{img: '../../static/images/password.png', name: '修改密码', url:'/pages/modifyPassword/modifyPassword'},
 	]
 	
@@ -66,7 +66,7 @@
 			}
 		},
 		onShow() {
-			this.setInsert()
+			// this.setInsert()
 		},
 		mounted() {
 			this.default_src = uni.getStorageSync('avatar')
@@ -225,9 +225,11 @@
 		margin-right: 10px;
 	}
 	.null{
-		height: 45vh;
+		/* height: 45vh; */
+		flex: 1;
 	}
 	.button{
+		margin-bottom: 65px;
 		border-radius: 10px;
 		display: flex;
 		justify-content: center;
diff --git a/pages/toolBar.vue b/pages/toolBar.vue
new file mode 100644
index 0000000..f93cd48
--- /dev/null
+++ b/pages/toolBar.vue
@@ -0,0 +1,253 @@
+<template>
+    <u-popup :show="this.popupOpen" mode="right"  @close="closeBtn" >
+        <view style="padding: 30px 20px; ">
+            <text style="font-weight: bold;">溢洪道是否有闸</text>
+            <view class="searchBox">
+                <u-button 
+                    v-for="(item, index) in gateTypeOptions"
+                    class="itemBtn"
+                    :class="{ itemActive: formData.isGate === item.value }"
+                    size="small"
+                    :plain="true"
+                    :key="item.value" 
+                    :text="item.name"
+                    @click="formData.isGate = item.value"
+                ></u-button>
+            </view>
+            <text style="font-weight: bold;">是否病险</text>
+            <view class="searchBox">
+                <u-button 
+                    v-for="(item, index) in isDangerOptions"
+                    class="itemBtn"
+                    :class="{ itemActive: formData.isDanger === item.value }"
+                    size="small"
+                    :plain="true"
+                    :key="item.value" 
+                    :text="item.name"
+                    @click="formData.isDanger = item.value"
+                ></u-button>
+            </view>
+            <text style="font-weight: bold;">设备使用状态</text>
+            <view class="searchBox">
+                <u-button 
+                    v-for="(item, index) in equipmentStatusOptions"
+                    class="itemBtn"
+                    :class="{ itemActive: formData.equipmentStatus === item.value }"
+                    size="small"
+                    :plain="true"
+                    :key="item.value" 
+                    :text="item.name"
+                    @click="formData.equipmentStatus = item.value"
+                ></u-button>
+            </view>
+            <text style="font-weight: bold;">是否视频</text>
+            <view class="searchBox">
+                <u-button 
+                    v-for="(item, index) in isVideoOptions"
+                    class="itemBtn"
+                    :class="{ itemActive: formData.isVideo === item.value }"
+                    size="small"
+                    :plain="true"
+                    :key="item.value" 
+                    :text="item.name"
+                    @click="formData.isVideo = item.value"
+                ></u-button>
+            </view>
+            <text style="font-weight: bold;">水位状态</text>
+            <view class="searchBox">
+                <u-button 
+                    class="itemBtn2"
+                    :class="{ itemActive: formData.waterStageCxx }"
+                    size="small"
+                    :plain="true"
+                    text="超汛限水位"
+                    @click="formData.waterStageCxx = !formData.waterStageCxx"
+                ></u-button>
+                <u-button 
+                    class="itemBtn2"
+                    :class="{ itemActive: formData.underSsw }"
+                    size="small"
+                    :plain="true"
+                    text="低于死水位"
+                    @click="formData.underSsw = !formData.underSsw"
+                ></u-button>
+
+                <u-button 
+                    class="itemBtn2"
+                    :class="{ itemActive: formData.waterStageCjh }"
+                    size="small"
+                    :plain="true"
+                    text="超校核水位"
+                    @click="formData.waterStageCjh = !formData.waterStageCjh"
+                ></u-button>
+                <u-button 
+                    class="itemBtn2"
+                    :class="{ itemActive: formData.waterStageCsj }"
+                    size="small"
+                    :plain="true"
+                    text="超设计水位"
+                    @click="formData.waterStageCsj = !formData.waterStageCsj"
+                ></u-button>
+
+                <u-button 
+                    class="itemBtn2"
+                    :class="{ itemActive: formData.underJh }"
+                    size="small"
+                    :plain="true"
+                    text="低于校核水位"
+                    @click="formData.underJh = !formData.underJh"
+                ></u-button>
+                <u-button 
+                    class="itemBtn2"
+                    :class="{ itemActive: formData.underSj }"
+                    size="small"
+                    :plain="true"
+                    text="低于设计水位"
+                    @click="formData.underSj = !formData.underSj"
+                ></u-button>
+            </view>
+        </view>
+
+        <view class="footerBox">
+            <u-button text="重置" class="bottom-btn1" @click="reset"></u-button>
+            <u-button text="确认" color="#d9001b" class="bottom-btn2"  @click="submitForm"></u-button>
+        </view>
+    </u-popup>
+</template>
+
+<script>
+export default {
+    name: 'ToolBar',
+    props:{
+        popupOpen:Boolean,
+    },
+    data() {
+        return {
+            gateTypeOptions:[
+                { name: '全部',value: '0' },
+                { name: '有闸',value: '1' },
+                { name: '无闸',value: '2' },
+                { name: '其他',value: '3' },
+            ],
+            isDangerOptions:[
+                { name: '全部',value: '0' },
+                { name: '是',value: '1' },
+                { name: '否',value: '2' },
+            ],
+            equipmentStatusOptions:[
+                { name: '全部',value: '0' },
+                { name: '正常',value: '1' },
+                { name: '维护中',value: '2' },
+                { name: '弃用',value: '3' },
+            ],
+            isVideoOptions:[
+                { name: '全部',value: '0' },
+                { name: '有',value: '1' },
+                { name: '无',value: '2' },
+            ],
+
+            formData:{
+                isGate:'0',//溢洪道是否有闸
+                isDanger:'0',//是否病险
+                equipmentStatus:'0',//设备使用状态
+                isVideo:'0',//是否视频
+                isVideo:'0',//是否视频
+                waterStageCxx:false,//超汛限
+                waterStageCjh:false,//超校核
+                waterStageCsj:false,//超设计
+                underJh:false,//低于校核
+                underSsw:false,//低于死水位
+                underSj:false,//低于设计
+            }
+        };
+    },
+    computed: {
+        
+    },
+    methods: {
+        submitForm() {
+            // 将子组件的 formData 传递给父组件
+            this.$emit('form-submit', this.formData);
+        },
+        closeBtn() {
+            this.$emit('form-submit', null);
+            this.reset()
+        },
+        reset(){
+            this.formData = {
+                isGate:'0',//溢洪道是否有闸
+                isDanger:'0',//是否病险
+                equipmentStatus:'0',//设备使用状态
+                isVideo:'0',//是否视频
+                isVideo:'0',//是否视频
+                waterStageCxx:false,//超汛限
+                waterStageCjh:false,//超校核
+                waterStageCsj:false,//超设计
+                underJh:false,//低于校核
+                underSsw:false,//低于死水位
+                underSj:false,//低于设计
+            }
+        }
+    },
+    // 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
+    created() {
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+.searchBox{
+    margin: 10px 0 20px 0;
+    width: 300px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    .itemBtn{
+        margin: 0 10px 0 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 50px;
+        height: 26px;
+        border: 1px solid #eee;
+        color: #82848a;
+    }
+    .itemBtn2{
+        margin: 0 10px 10px 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 120px;
+        height: 26px;
+        border: 1px solid #eee;
+        color: #82848a;
+    }
+    .itemActive{
+        background: #3c9cff;
+        border-color: #3c9cff;
+        color: #ffffff;
+    }
+}
+.footerBox{
+    display: flex;
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+}
+.bottom-btn1{
+    width: 80px;
+    height: 32px;
+    margin-right: 10px;
+}
+.bottom-btn2{
+    width: 80px;
+    height: 32px;
+}
+</style>
+  
\ No newline at end of file
diff --git a/pages/videoPage/index.vue b/pages/videoPage/index.vue
new file mode 100644
index 0000000..08e7ed7
--- /dev/null
+++ b/pages/videoPage/index.vue
@@ -0,0 +1,213 @@
+<template>
+    <view class="page">
+        <view class="container">
+            <u-status-bar ></u-status-bar>
+            <view class="nav-bar">
+                <u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
+                <view style="font-size:18px">视频监控</view>
+                <view style="margin-right:10px;margin-top: 5px;">
+                    <image @click="popupOpen = true" src="../../static/images/filter.png" style="width: 20px; height: 20px"></image>
+                    <image src="../../static/images/star.svg" style="width: 19px; height: 19px;position: absolute;right: 37px;top: 11px;"></image>
+                </view>
+            </view>
+            <view class="search-box">
+                <view class="search-item">
+                    <view style="display:flex; justify-content: space-between; width: 18%;">
+                        <view @click="handleClick" class="search-item-text">{{ getSkTypeName }}</view>
+                        <u-icon name="arrow-down-fill" color="#000" size="16" v-show="switchIcon"></u-icon>
+                        <u-icon name="arrow-up-fill" color="#000" size="16" v-show="!switchIcon"></u-icon>
+                    </view>
+                    <view class="rain-input" style="width: 82%;">
+                        <u-input
+                            placeholder="请输入站点"
+                            prefixIcon="search"
+                            prefixIconStyle="font-size: 22px;color: #909399"
+                            @change="changeForm"
+                            :value="searchVal"
+                        ></u-input>
+                    </view>
+                </view>
+            </view>
+            <div class="scrollBox">
+                <div 
+                    class="itemBox"
+                    v-for="(item, index) in skData" 
+                    :key="index"
+                >
+                    <itemBox :data="item"/>
+                </div>
+            </div>
+        </view>
+        <ToolBar :popupOpen="popupOpen" @form-submit="handleFormSubmit"/>
+        <u-picker
+            :show="show" 
+            ref="uPicker" 
+            :columns="columns" 
+            keyName="label"
+            @confirm="confirm" 
+            @cancel="cancel"
+        >
+        </u-picker>
+    </view>
+</template>
+
+<script>
+import moment from "moment";
+import ToolBar from "../toolBar"
+import itemBox from "./itemBox.vue"
+const skTypeOptions = [
+    { label:'全部',value:0 },
+    { label:'大(1)型',value:1 },
+    { label:'大(2)型',value:2 },
+    { label:'中型',value:3 },
+    { label:'小(1)型',value:4 },
+    { label:'小(2)型',value:5 },
+]
+const skTypeObj = {
+    0:'全部',
+    1:'大(1)型',
+    2:'大(2)型',
+    3:'中型',
+    4:'小(1)型',
+    5:'小(2)型',
+}
+
+export default {
+    components: {
+        ToolBar,
+        itemBox
+    },
+    data() {
+        return {
+            skData:[],
+            popupOpen:false, //抽屉打开
+            show: false,
+            switchIcon:true,
+            skType:0,//水库类型
+            searchVal:'',//搜索文字
+            columns:[
+                skTypeOptions
+            ],
+        };
+    },
+    computed: {
+        getSkTypeName() {
+            return skTypeObj[this.skType]
+        },
+    },
+    methods: {
+        async getSkData(){
+            // const res = await uni.$http.get("/gunshiApp/xfflood/getLoginInfo");
+            this.skData = [
+                {name:'AA水库',danger:true, isStar:false,videoList:[{name:'摄像头1'},{name:'摄像头2'}]},
+                {name:'AB水库',danger:true, isStar:true,videoList:[{name:'摄像头1'},{name:'摄像头2'},{name:'摄像头3'},{name:'摄像头4'},{name:'摄像头7'},]},
+                {name:'BB水库',danger:false, isStar:true,videoList:[{name:'摄像头1'}]},
+                {name:'BB水库',danger:false, isStar:true,videoList:[{name:'摄像头1'}]},
+                {name:'BB水库',danger:false, isStar:true,videoList:[{name:'摄像头1'}]},
+                {name:'BB水库',danger:false, isStar:true,videoList:[{name:'摄像头1'}]},
+                {name:'BB水库',danger:false, isStar:true,videoList:[{name:'摄像头1'}]},
+            ];
+
+            console.log("--1-", this.userList);
+        },
+        backTo(){
+             uni.navigateBack({delta:1})
+        },
+        handleClick(e){
+            //  if(this.selecetItem1.basName && this.selecetItem1.basName != "全部"){
+            //    e.stopPropagation();
+            //    return
+            //  }
+             this.show = true;
+             this.switchIcon = !this.switchIcon
+        },
+        changeForm(e){
+            this.searchVal = e
+        },
+        confirm(e) {
+            console.log('confirm', e)
+            this.show = false
+            this.switchIcon=true;
+            this.skType = e.value[0].value
+        },
+        cancel(e) {
+            this.show = false
+        },
+        handleFormSubmit(data) {
+            console.log('接收到子组件的 formData：', data);
+            this.popupOpen = false;
+        }
+    },
+    // 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
+    created() {
+        this.getSkData()
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.page{
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+.container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+.nav-bar{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 44px;
+    border-bottom: 1px solid #dfdfdf;
+}
+.search-box{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 70px;
+    .search-item{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 90%;
+        padding: 5px;
+        height: 30px;
+        background-color: #ececec;
+        border-radius: 5px;
+
+        .search-item-text{
+            display: flex;
+            flex: 1;
+            justify-content: center;
+            align-items: center;
+        }
+        .rain-input{
+            .u-border{
+                border-color: #ececec !important;
+            }
+        }
+    }
+}
+.scrollBox{
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow-y: auto;
+    background: #eee;
+    padding: 5px;
+
+    .itemBox{
+        background: #ffffff;
+        border-radius: 3px;
+        margin-bottom: 5px;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/pages/videoPage/itemBox.vue b/pages/videoPage/itemBox.vue
new file mode 100644
index 0000000..eec796d
--- /dev/null
+++ b/pages/videoPage/itemBox.vue
@@ -0,0 +1,163 @@
+<template>
+    <div class="itemBox">
+        <div class="itemBoxHead">
+            <u-icon name="file-text"></u-icon>
+            <div class="text" :class="{ danger: this.data.danger }">
+                {{ this.data.name + (this.data.danger?'「汛」':'')}}
+            </div>
+            <image v-if="this.data.isStar" src="../../static/images/star.svg" class="starImg"></image>
+            <image v-else src="../../static/images/star2.svg" class="starImg"></image>
+            <div class="rl" @click="myNavigateTo">
+                更多
+                <u-icon name="arrow-right-double" size="16"></u-icon>
+            </div>
+        </div>
+        <div class="itemBoxBody">
+            <view class="image-wrapper">
+                <image src="../../static/images/skImg.png" class="skImg"></image>
+            </view>
+            <view class="image-wrapper-rl">
+                <div class="videoList">
+                    <div v-for="item in this.data.videoList" class="videoListItem">
+                        <image src="../../static/images/video.svg" class="videoImg"></image>
+                        <div style="flex:1">{{ item.name }}</div>
+                        <image src="../../static/images/videoPlay.svg" class="videoPlayImg"></image>
+                    </div>
+                </div>
+            </view>
+        </div>
+    </div>
+</template>
+
+<script>
+import moment from "moment";
+
+export default {
+    components: {
+    },
+    props:{
+        data:Object,
+    },
+    data() {
+        return {
+            
+        };
+    },
+    computed: {
+        
+    },
+    methods: {
+        myNavigateTo() {
+            uni.navigateTo({
+                url: '/pages/rain/rain', // 跳转到对应路径的页面
+            });
+        },
+    },
+    // 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
+    created() {
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.itemBox{
+    padding: 5px;
+    .itemBoxHead{
+        display: flex;
+        align-items: center;
+        position: relative;
+        font-size: 14px;
+        height: 30px;
+        // padding: 10px 0;
+        .text{
+            margin: 0 5px;
+        }
+        .danger{
+            color: #F59823;
+        }
+        .starImg{
+            width: 14px;
+            height: 14px;
+        }
+        .rl{
+            position: absolute;
+            font-size: 12px;
+            padding: 0 5px;
+            right: 0px;
+            top: 3px;
+            display: flex;
+            align-items: center;
+        }
+        .rl:active {
+            background-color: #eee;  /* 变深色 */
+            transform: scale(0.97);     /* 轻微缩小 */
+            opacity: 0.8;
+        }
+        
+    }
+    .itemBoxBody{
+        display: flex;
+        flex-direction: row;
+        align-items: start;
+        justify-content: center;
+        padding: 5px 10px;
+        .image-wrapper{
+            width: 35%;               /* 父元素宽度的30% */
+            position: relative;
+            /* 关键：padding-top 百分比相对于父元素宽度，100% 表示高度 = 宽度 */
+            padding-top: 35%;
+            .skImg{
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;   
+            }
+        }
+        .image-wrapper-rl{
+            display: flex;
+            flex: 1;
+            position: relative;
+            padding-top: 35%;
+            margin-right: 10px;
+
+            .videoList{
+                position: absolute;
+                top: 0;
+                left: 10px;
+                width: 100%;
+                height: 100%;   
+                overflow-y: auto;
+                // display: flex;
+                // flex-direction: column;
+                // justify-content: start;
+
+                .videoListItem{
+                    display: flex;
+                    align-items: center;
+                    border-bottom: 1px solid #eee;
+                    height: 28px;
+
+                    .videoImg{
+                        width: 16px;
+                        height: 12px;
+                        margin-right: 5px;
+                    }
+                    .videoPlayImg{
+                        width: 12px;
+                        height: 12px;
+                        margin-right: 5px;
+                    }
+                    .videoPlayImg:active {
+                        background-color: #eee;  /* 变深色 */
+                        transform: scale(0.97);     /* 轻微缩小 */
+                        opacity: 0.8;
+                    }
+                }
+            }
+        }
+    }
+}
+
+</style>
+  
\ No newline at end of file
diff --git a/static/images/loginBg.png b/static/images/loginBg.png
new file mode 100644
index 0000000..a21e72d
Binary files /dev/null and b/static/images/loginBg.png differ
diff --git a/static/images/skImg.png b/static/images/skImg.png
new file mode 100644
index 0000000..a962727
Binary files /dev/null and b/static/images/skImg.png differ
diff --git a/static/images/star.svg b/static/images/star.svg
new file mode 100644
index 0000000..25ad172
--- /dev/null
+++ b/static/images/star.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <mask fill="white" id="clip14">
+      <path d="M 14.17 18.83  L 10.487 16.803  C 9.963 16.514  9.11 16.516  8.589 16.803  L 4.907 18.83  C 3.86 19.407  3.173 18.88  3.373 17.662  L 4.076 13.369  C 4.176 12.757  3.911 11.909  3.489 11.479  L 0.511 8.437  C -0.337 7.572  -0.069 6.725  1.097 6.547  L 5.213 5.922  C 5.799 5.832  6.488 5.306  6.749 4.753  L 8.59 0.848  C 9.114 -0.263  9.966 -0.259  10.487 0.848  L 12.327 4.754  C 12.59 5.31  13.282 5.834  13.864 5.923  L 17.98 6.549  C 19.152 6.727  19.41 7.576  18.567 8.438  L 15.588 11.478  C 15.164 11.911  14.902 12.761  15.001 13.369  L 15.704 17.662  C 15.904 18.884  15.213 19.404  14.17 18.83  Z " fill-rule="evenodd" />
+    </mask>
+  </defs>
+  <g transform="matrix(1 0 0 1 -355 -122 )">
+    <path d="M 14.17 18.83  L 10.487 16.803  C 9.963 16.514  9.11 16.516  8.589 16.803  L 4.907 18.83  C 3.86 19.407  3.173 18.88  3.373 17.662  L 4.076 13.369  C 4.176 12.757  3.911 11.909  3.489 11.479  L 0.511 8.437  C -0.337 7.572  -0.069 6.725  1.097 6.547  L 5.213 5.922  C 5.799 5.832  6.488 5.306  6.749 4.753  L 8.59 0.848  C 9.114 -0.263  9.966 -0.259  10.487 0.848  L 12.327 4.754  C 12.59 5.31  13.282 5.834  13.864 5.923  L 17.98 6.549  C 19.152 6.727  19.41 7.576  18.567 8.438  L 15.588 11.478  C 15.164 11.911  14.902 12.761  15.001 13.369  L 15.704 17.662  C 15.904 18.884  15.213 19.404  14.17 18.83  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 355 122 )" />
+    <path d="M 14.17 18.83  L 10.487 16.803  C 9.963 16.514  9.11 16.516  8.589 16.803  L 4.907 18.83  C 3.86 19.407  3.173 18.88  3.373 17.662  L 4.076 13.369  C 4.176 12.757  3.911 11.909  3.489 11.479  L 0.511 8.437  C -0.337 7.572  -0.069 6.725  1.097 6.547  L 5.213 5.922  C 5.799 5.832  6.488 5.306  6.749 4.753  L 8.59 0.848  C 9.114 -0.263  9.966 -0.259  10.487 0.848  L 12.327 4.754  C 12.59 5.31  13.282 5.834  13.864 5.923  L 17.98 6.549  C 19.152 6.727  19.41 7.576  18.567 8.438  L 15.588 11.478  C 15.164 11.911  14.902 12.761  15.001 13.369  L 15.704 17.662  C 15.904 18.884  15.213 19.404  14.17 18.83  Z " stroke-width="2" stroke="#000000" fill="none" transform="matrix(1 0 0 1 355 122 )" mask="url(#clip14)" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/static/images/star2.svg b/static/images/star2.svg
new file mode 100644
index 0000000..b377574
--- /dev/null
+++ b/static/images/star2.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -148 -15 )">
+    <path d="M 11.336 15.064  L 8.3896 13.4424  C 7.9704 13.2112  7.288 13.2128  6.8712 13.4424  L 3.9256 15.064  C 3.088 15.5256  2.5384 15.104  2.6984 14.1296  L 3.2608 10.6952  C 3.3408 10.2056  3.1288 9.5272  2.7912 9.1832  L 0.4088 6.7496  C -0.2696 6.0576  -0.0552 5.38  0.8776 5.2376  L 4.1704 4.7376  C 4.6392 4.6656  5.1904 4.2448  5.3992 3.8024  L 6.872 0.6784  C 7.2912 -0.2104  7.9728 -0.2072  8.3896 0.6784  L 9.8616 3.8032  C 10.072 4.248  10.6256 4.6672  11.0912 4.7384  L 14.384 5.2392  C 15.3216 5.3816  15.528 6.0608  14.8536 6.7504  L 12.4704 9.1824  C 12.1312 9.5288  11.9216 10.2088  12.0008 10.6952  L 12.5632 14.1296  C 12.7232 15.1072  12.1704 15.5232  11.336 15.064  Z " fill-rule="nonzero" fill="#259dff" stroke="none" transform="matrix(1 0 0 1 148 15 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/static/images/video.htm b/static/images/video.htm
new file mode 100644
index 0000000..ea59c31
--- /dev/null
+++ b/static/images/video.htm
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!-- saved from url=(0073)https://axhub.im/ax9/7ef76f1f850e434b/#g=1&id=0ia3le&p=%E9%A6%96%E9%A1%B5 -->
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style data-rc-order="prepend" rc-util-key="@ant-design-icons">
+.anticon {
+  display: inline-flex;
+  alignItems: center;
+  color: inherit;
+  font-style: normal;
+  line-height: 0;
+  text-align: center;
+  text-transform: none;
+  vertical-align: -0.125em;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.anticon > * {
+  line-height: 1;
+}
+
+.anticon svg {
+  display: inline-block;
+}
+
+.anticon::before {
+  display: none;
+}
+
+.anticon .anticon-icon {
+  display: block;
+}
+
+.anticon[tabindex] {
+  cursor: pointer;
+}
+
+.anticon-spin::before,
+.anticon-spin {
+  display: inline-block;
+  -webkit-animation: loadingCircle 1s infinite linear;
+  animation: loadingCircle 1s infinite linear;
+}
+
+@-webkit-keyframes loadingCircle {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loadingCircle {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+</style><title>首页</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover"><meta name="apple-mobile-web-app-capable" content="yes"><link href="./video_files/reset.css" rel="Stylesheet"><link href="./video_files/default.css" rel="Stylesheet"><link rel="shortcut icon" href="https://axhub.im/ax9/7ef76f1f850e434b/resources/images/favicon_play.ico"><script src="./video_files/hm.js"></script><script type="text/javascript">0==location.href.toString().indexOf("file://localhost/")&&(location.href=location.href.toString().replace("file://localhost/","file:///"))</script><link href="./video_files/vendor.9832c183.chunk.css" rel="stylesheet"><link href="./video_files/ax9files.138974fb.css" rel="stylesheet"><script type="text/javascript" async="" src="./video_files/document.js"></script><script type="text/javascript" src="./video_files/sitemap.js"></script><script type="text/javascript" src="./video_files/page_notes.js"></script><script type="text/javascript" src="./video_files/debug.js"></script><link type="text/css" rel="stylesheet" href="./video_files/sitemap.css"><link type="text/css" rel="stylesheet" href="./video_files/page_notes.css"><link type="text/css" rel="stylesheet" href="./video_files/debug.css"><style type="text/css">.pluginNameHeader{display:none}</style></head><body scroll="no" class="hashover" style="overflow:hidden"><div id="topPanel"><div id="interfaceControlFrame" style="opacity: 1;"><div id="interfaceControlFrameLeft"><div id="interfaceControlFrameMinimizeContainer"><a title="Collapse" id="interfaceControlFrameMinimizeButton"><div id="minimizeArrow" class="minimizeButtonHover minimizeIcon"></div><div id="minimizeX" class="minimizeButton minimizeIcon"></div></a></div><div id="axhubSearch"></div><div id="interfaceControlFrameCloseContainer"><a title="Close" id="interfaceControlFrameCloseButton">CLOSE</a></div><div id="sitemapControlFrameContainer" title="Project Pages" class="selected"><div id="projectControlFrameHeaderContainer"><ul id="projectControlFrameHeader"><li id="sitemapHostBtn"><a pluginid="sitemapHost" title="Project Pages" class="selected">&nbsp;</a></li></ul></div><div id="interfacePageNameContainer"><div id="interfacePageNameButton" class="pageNameHeader">首页</div><div id="interfacePageCount" class="pageCountHeader">(2 of 5)</div></div></div><div id="interfaceAdaptiveViewsContainer" title="Adaptive Views" style="display: none;"><div id="interfaceAdaptiveViewsIconButton">&nbsp;</div><div id="interfaceAdaptiveViewsButton" class="adaptiveViewHeader"> (960 x any)</div><div id="adaptiveViewsDropdown" class="caret"></div></div></div><div id="interfaceControlFrameContainer"><div id="handoffControlFrameHeaderContainer"><ul id="handoffControlFrameHeader"></ul></div><div id="interfaceControlFrameLogoContainer"><div id="previewNotice"></div></div></div><div id="interfaceControlFrameRight"><div id="publishContainer"><a id="publishButton">Share Prototype</a></div><div id="inspectControlFrameHeaderContainer"><div id="AxhubMenu"><div><ul><li class="axhub-plugin"><span class="i-icon i-icon-map-draw"><svg width="20" height="20" viewBox="0 0 48 48" fill="none"><path d="M17 12L4 6V36L17 42L31 36L44 42V12L31 6L17 12Z" fill="none" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M31 6V36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 12V42" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.5 9L17 12L31 6L37.5 9" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.5 39L17 42L31 36L37.5 39" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></svg></span></li><li class="axhub-plugin"><span class="i-icon i-icon-dark-mode"><svg width="20" height="20" viewBox="0 0 48 48" fill="none"><path d="M24.0033 4L29.2737 9.27038H38.7296V18.7263L44 23.9967L38.7296 29.2737V38.7296H29.2737L24.0033 44L18.7264 38.7296H9.27036V29.2737L4 23.9967L9.27036 18.7263V9.27038H18.7264L24.0033 4Z" fill="none" stroke="#333" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27 17C27 25 22 26 17 26C17 30 23.5 34 29 30C34.5 26 31 17 27 17Z" fill="none" stroke="#333" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path></svg></span></li><li class="axhub-plugins"><span role="img" aria-label="appstore" tabindex="-1" class="anticon anticon-appstore ant-dropdown-trigger"><svg viewBox="64 64 896 896" focusable="false" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span></li><li class="tips"><a><span role="img" aria-label="info-circle" class="anticon anticon-info-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path></svg></span></a></li></ul></div></div><ul id="inspectControlFrameHeader"><li id="overflowBtn"><a id="overflowMenuButton" title="View Options"></a></li><li id="pageNotesHostBtn"><a pluginid="pageNotesHost" title="Documentation"><span></span></a></li></ul></div><div id="separatorContainer" class="hasLeft"><div class="separator"></div></div><div id="overflowMadeWith"><a href="https://www.axure.com/" id="axureLogo" target="_blank"></a></div></div></div></div><div id="popupContainer"><div id="interfaceAdaptiveViewsListContainer" style="display: none;"><div class="adaptiveViewOption" val="auto"><div class="adapViewRadioButton selectedRadioButton"><div class="selectedRadioButtonFill" style="display: block;"></div></div>Adaptive</div><div class="adaptiveViewOption currentAdaptiveView" val="default" data-dim="0x0"><div class="adapViewRadioButton"><div class="selectedRadioButtonFill" style="display: none;"></div></div> (any x any)</div></div><div id="accountLoginContainer"></div><div id="overflowMenuContainer"><div id="showNotesOption" class="showOption" style="order: 3"><div class="overflowOptionCheckbox selected"></div>Show Note Markers</div><div id="showHotspotsOption" class="showOption" style="order: 1"><div class="overflowOptionCheckbox"></div>Show Hotspots</div><div id="interfaceScaleListContainer"><div class="vpScaleOption" val="0"><div class="scaleRadioButton selectedRadioButton"><div class="selectedRadioButtonFill" style="display: block;"></div></div>Default Scale</div><div class="vpScaleOption" val="1"><div class="scaleRadioButton"><div class="selectedRadioButtonFill" style="display: none;"></div></div>Scale to Width</div><div class="vpScaleOption" val="2"><div class="scaleRadioButton"><div class="selectedRadioButtonFill" style="display: none;"></div></div>Scale to Fit</div></div></div></div><div id="outerContainer" style="height: 1249px; width: 1180px;"><div id="sitemapHost" class="leftPanel" style="width: 220px;"><div id="sitemapHeader" '="" class="sitemapHeader"><div id="sitemapToolbar" class="sitemapToolbar"><div id="searchDiv"><span id="searchIcon" class="sitemapToolbarButton"></span><input id="searchBox" type="text" class="searchBoxHint"></div><div class="leftArrow sitemapToolbarButton"></div><div class="rightArrow sitemapToolbarButton"></div></div></div><div id="axProjectName" style="font-size: 14px; color: rgb(68, 68, 68); font-weight: bold; margin: 13px 9px 5px;">咸丰安饮</div><div class="sitemapPluginNameHeader pluginNameHeader">Pages</div><div id="sitemapTreeContainer"><ul class="sitemapTree" style="clear:both;"><li class="sitemapNode sitemapLeafNode"><div><div class="sitemapPageLinkContainer" style="margin-left:19px"><a class="sitemapPageLink" nodeurl="登录.html"><span class="sitemapPageIcon"></span><span class="sitemapPageName">登录</span></a></div></div></li><li class="sitemapNode sitemapLeafNode"><div class="sitemapHighlight"><div class="sitemapPageLinkContainer" style="margin-left:19px"><a class="sitemapPageLink" nodeurl="首页.html"><span class="sitemapPageIcon"></span><span class="sitemapPageName">首页</span></a></div></div></li><li class="sitemapNode sitemapLeafNode"><div class=""><div class="sitemapPageLinkContainer" style="margin-left:19px"><a class="sitemapPageLink" nodeurl="视频监视.html"><span class="sitemapPageIcon"></span><span class="sitemapPageName">视频监视</span></a></div></div></li><li class="sitemapNode sitemapLeafNode"><div class=""><div class="sitemapPageLinkContainer" style="margin-left:19px"><a class="sitemapPageLink" nodeurl="雨水情监测.html"><span class="sitemapPageIcon"></span><span class="sitemapPageName">雨水情监测</span></a></div></div></li><li class="sitemapNode sitemapLeafNode"><div class=""><div class="sitemapPageLinkContainer" style="margin-left:19px"><a class="sitemapPageLink" nodeurl="安全监测.html"><span class="sitemapPageIcon"></span><span class="sitemapPageName">安全监测</span></a></div></div></li></ul></div><div id="changePageInstructions" class="pageSwapInstructions">Use  <span class="backKeys"></span>  and  <span class="forwardKeys"></span>  keys<br>to move between pages</div></div><div id="clippingBounds" style="height: 1249px; left: 219.996px; width: 960.004px; opacity: 1;"><div id="notesOverlay">&nbsp;</div><div id="clippingBoundsScrollContainer"></div></div><div id="mHideSidebar"></div><div id="lsplitbar" class="splitbar" style="left: 215.996px; display: block;"></div><div id="mainPanel" style="height: 1249px; opacity: 1;"><div id="mainPanelContainer" style="position: relative; width: 100%; height: 1249px;" data-page-dimensions-type="auto" data-scale-n="0"><div id="clipFrameScroll" style="position: relative; width: 100%; height: 1249px; background-color: rgb(255, 255, 255);"><iframe id="mainFrame" name="mainFrame" width="100%" height="100%" src="./video_files/saved_resource.html" frameborder="0" style="display: block; position: absolute; width: 100%; height: 1249px;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></div></div></div><div id="rsplitbar" class="splitbar"></div><div id="pageNotesHost" class="rightPanel" style="display: none;"><div id="pageNotesHeader"><div id="pageNotesToolbar" style="height: 12px;"></div></div><div id="pageNotesScrollContainer"><div id="pageNotesContainer"><div id="pageNotesEmptyState" class="emptyStateContainer"><div class="emptyStateTitle">No notes for this page.</div><div class="emptyStateContent">Notes added in Axure RP will appear here.</div><div class="dottedDivider"></div></div><span id="pageNotesContent"></span></div></div></div></div><div id="maximizePanelContainer" class="maximizePanelContainer" style="display: none;"><div id="maximizePanelOver"><div id="maximizePanel" title="Expand" class="maximizePanelOver"><div id="maximizeButton" class="maximizeButton maximizeIcon"></div></div></div></div><div id="mobileControlFrameContainer"></div><script src="./video_files/jquery-3.2.1.min.js"></script><script src="./video_files/jquery.nicescroll.min.js"></script><script src="./video_files/axutils.js"></script><script src="./video_files/messagecenter.js"></script><script src="./video_files/axplayer.js"></script><script src="./video_files/init.js"></script><script src="./video_files/vendor.65e697af.js"></script><script src="./video_files/ax9files.85dfa6a0.js"></script><script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?067efbd2fb022ae62c9c21cdf79d3aea";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script></body></html>
\ No newline at end of file
diff --git a/static/images/video.svg b/static/images/video.svg
new file mode 100644
index 0000000..35919b1
--- /dev/null
+++ b/static/images/video.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="9px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -144 -54 )">
+    <path d="M 14 1.23913043478261  C 14 0.788898301768375  13.6082491561019 0.423913043478261  13.125 0.423913043478261  L 12.7369375 0.423913043478261  C 12.50725 0.423913043478261  12.28675 0.508288043478261  12.1226875 0.658695652173913  L 10.9375 1.74782608695652  L 10.9375 1.23913043478261  C 10.9375 0.563782235261258  10.3498737341529 0.0163043478260874  9.625 0.016304347826087  L 1.3125 0.016304347826087  C 0.588875 0.016304347826087  0 0.564538043478261  0 1.23913043478261  L 0 7.76086956521739  C 0 8.43621776473874  0.587626265847084 8.98369565217391  1.3125 8.98369565217391  L 9.625 8.98369565217391  C 10.3495 8.98369565217391  10.9375 8.43586956521739  10.9375 7.76086956521739  L 10.9375 7.26317934782609  L 12.1226875 8.3523097826087  C 12.28675 8.50271739130435  12.50725 8.58709239130435  12.7369375 8.58709239130435  L 13.125 8.58709239130435  C 13.6082491561019 8.58709239130435  14 8.22210713301423  14 7.771875  L 14 1.23913043478261  Z M 9.625 8.16847826086957  L 1.3125 8.16847826086957  C 1.071 8.16847826086957  0.875 7.98546195652174  0.875 7.76086956521739  L 0.875 1.23913043478261  C 0.875 1.01401436827549  1.07087542194903 0.831521739130435  1.3125 0.831521739130435  L 9.625 0.831521739130435  C 9.8660625 0.831521739130435  10.0625 1.01413043478261  10.0625 1.23913043478261  L 10.0625 7.76086956521739  C 10.0625 7.98546195652174  9.8660625 8.16847826086957  9.625 8.16847826086957  Z M 13.125 1.23913043478261  L 13.125 7.771875  L 12.6875 7.771875  L 10.9375 6.14144021739131  L 10.9375 6.1304347826087  L 10.5 5.72282608695652  L 10.5 3.27717391304348  L 12.6875 1.23913043478261  L 13.125 1.23913043478261  Z " fill-rule="nonzero" fill="#409eff" stroke="none" transform="matrix(1 0 0 1 144 54 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/static/images/videoPlay.svg b/static/images/videoPlay.svg
new file mode 100644
index 0000000..1b670e5
--- /dev/null
+++ b/static/images/videoPlay.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -344 -50 )">
+    <path d="M 7.99999715909091 15.9545397727273  C 3.60696843039773 15.9545397727273  0.0454545454545455 12.3930258877841  0.0454545454545455 7.99999715909091  C 0.0454545454545455 3.60696843039773  3.60696843039773 0.0454545454545455  7.99999715909091 0.0454545454545455  C 12.3930258877841 0.0454545454545455  15.9545397727273 3.60696843039773  15.9545397727273 7.99999715909091  C 15.9545397727273 12.3930258877841  12.3930258877841 15.9545397727273  7.99999715909091 15.9545397727273  Z M 11.8542382102273 7.48825491832386  L 6.27492201704545 4.408786328125  C 5.76371008522727 4.1271955078125  5.34848295454545 4.37007421875  5.34848295454545 4.95340733309659  L 5.34848295454545 11.0460566761364  C 5.34848295454545 11.6251473721591  5.76317977627841 11.8727988103693  6.27492201704545 11.5906776988636  L 11.8542382102273 8.51120909090909  C 12.3643895419034 8.22908797940341  12.3654501420455 7.77090633877841  11.8542382102273 7.48825491832386  Z " fill-rule="nonzero" fill="#037bfb" stroke="none" transform="matrix(1 0 0 1 344 50 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/static/tabs/aqjc.png b/static/tabs/aqjc.png
new file mode 100644
index 0000000..b6d0330
Binary files /dev/null and b/static/tabs/aqjc.png differ
diff --git a/static/tabs/spjk.png b/static/tabs/spjk.png
new file mode 100644
index 0000000..cc84f39
Binary files /dev/null and b/static/tabs/spjk.png differ
diff --git a/static/tabs/yq.png b/static/tabs/yq.png
new file mode 100644
index 0000000..076c512
Binary files /dev/null and b/static/tabs/yq.png differ