diff --git a/src/assets/img/01.png b/src/assets/img/01.png
new file mode 100644
index 0000000..1bbd5ea
Binary files /dev/null and b/src/assets/img/01.png differ
diff --git a/src/assets/img/Group1618.png b/src/assets/img/Group1618.png
new file mode 100644
index 0000000..84fae34
Binary files /dev/null and b/src/assets/img/Group1618.png differ
diff --git a/src/components/TimeComponent.vue b/src/components/TimeComponent.vue
index 7a18941..5b103d6 100644
--- a/src/components/TimeComponent.vue
+++ b/src/components/TimeComponent.vue
@@ -22,7 +22,7 @@
       <div>
         <p>{{ high }}-{{ low }}</p>
         <div style="display: flex">
-          <p style="flex: 1">剑阁</p>
+          <p style="flex: 1">{{cityName.city}}</p>
           <p>{{ currentWeather.type }}</p>
         </div>
       </div>
@@ -41,6 +41,7 @@ export default {
       currentWeather: {}, //当前天气
       high: "",
       low: "",
+      cityName:{},
     };
   },
   mounted() {
@@ -55,6 +56,7 @@ export default {
         this.currentWeather = response.data.data.yesterday;
         this.high = this.currentWeather.high.slice(3);
         this.low = this.currentWeather.low.slice(3);
+       this.cityName= response.data.data
       })
       .catch(function (error) {
         console.log(error);
diff --git a/src/views/home.vue b/src/views/home.vue
index 841089a..86cf5c6 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -9,48 +9,57 @@
       <TimeComponent />
     </div>
     <!-- 导航栏 -->
-    <nav style="width: 100%; height: 70px">
+    <div style="width: 100%; height: 70px" class="home_nav">
       <ul>
         <li
-          v-for="(item, index) in navData"
-          :class="{ nav_li: active === index }"
-          :key="index"
+          v-for="item in navData"
+          :class="[active === item.index && 'nav_li', `tab_nav_${item.index}`]"
+          :key="item.index"
+          @onFocus="navFocus(item.index)"
+          @right="navRight(item.index, $event)"
+          @left="navLeft(item.index, $event)"
+          @down="navDown(item.index, $event)"
+          v-focusable
         >
           {{ item.name }} 　　　　
         </li>
       </ul>
-    </nav>
+    </div>
 
-    <article class="home_article">
+    <article v-if="active === 0" class="home_article">
       <section style="width: 520px" class="border">
-        <div class="home_slideshow">
-          <swiper>
-            <!-- <swiper-slide v-for="(item, index) in swiperList" :key="index">
-              <div class="swiper-item">
-                <img
-                  class="swiper-image"
-                  :src="item.url"
-                  style="cursor: pointer; width: 520px; height: 393px"
-                />
-              </div>
-            </swiper-slide> -->
-          </swiper>
+        <!-- 轮播图 -->
+        <div
+          class="home_slideshow box_0"
+          @down="moveToIndex(1)"
+          @right="moveToIndex(3)"
+          @up="moveToTop"
+          v-focusable
+        >
+          <img src="../assets/img/Group1618.png" alt="" />
         </div>
         <div class="home_inform">
           <div
-            class="home_informOverall"
+            class="home_informOverall box_1"
             style="
               background: linear-gradient(180deg, #32b3c5 0%, #2f948e 100%);
             "
+            @top="moveToIndex(0)"
+            @right="moveToIndex(2)"
+            v-focusable
           >
             <img src="../assets/img/Frame01.png" alt="" />
             <p style="width: 138px">通知信息</p>
           </div>
           <div
-            class="home_informOverall"
+            class="home_informOverall box_2"
             style="
               background: linear-gradient(180deg, #367fc4 0%, #1c52ad 100%);
             "
+            @click="skip()"
+            @top="moveToIndex(0)"
+            @left="moveToIndex(1)"
+            v-focusable
           >
             <img src="../assets/img/Frame02.png" alt="" />
             <p style="width: 138px">雪亮工程</p>
@@ -59,21 +68,20 @@
       </section>
 
       <section style="width: 304px" class="border">
-        <div class="scenic">
+        <div class="scenic box_3" v-focusable @up="moveToTop">
           <p class="_overall" style="background-color: rgb(0 0 0 / 46%)">
             文化宣传
           </p>
         </div>
-        <div class="publicity">
+        <div class="publicity box_4" v-focusable>
           <p class="_overall" style="background-color: rgb(0 0 0 / 53%)">
             景区风采
           </p>
         </div>
 
-        <div class="box_section" @down="menuDown(item, $event)">
+        <div class="box_section box_5" v-focusable>
           <div
             class="information"
-            v-focusable
             v-for="(item, index) in infoData"
             :key="index"
           >
@@ -97,15 +105,20 @@
         <div style="display: flex">
           <div style="text-align: center; margin-right: 20px">
             <figure
+              class="box_6"
               style="
                 background: linear-gradient(180deg, #e3b233 0%, #e17e22 100%);
               "
+              v-focusable
+              @up="moveToTop"
             >
               <img src="../assets/img/Vector01.png" />
               <figcaption style="color: #ffffff">疫情防控</figcaption>
             </figure>
 
             <figure
+              class="box_7"
+              v-focusable
               style="
                 background: linear-gradient(180deg, #3db542 0%, #178636 100%);
                 margin-top: 20px;
@@ -116,15 +129,15 @@
             </figure>
           </div>
           <div
-            style="
-              width: 218px;
-              height: 364px;
-              border: solid red;
-              border-radius: 10px;
-            "
-          ></div>
+            style="width: 218px; height: 364px; border-radius: 10px"
+            class="right_rotation box_8"
+            v-focusable
+            @up="moveToTop"
+          >
+            <img src="../assets/img/01.png" alt="" />
+          </div>
         </div>
-        <div class="right_section">
+        <div class="right_section box_9" v-focusable>
           <div class="right_sectionBox">
             <div class="right_sectionNest">
               <p>剑阁县推广大豆＋玉米兼容发展 “一地双丰收”模式</p>
@@ -134,27 +147,27 @@
         </div>
       </section>
     </article>
+
+    <div v-if="active === 1">111</div>
   </div>
 </template>
          
 
 
 <script>
-// import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
-// import "swiper/css/swiper.css";
 export default {
   name: "Home",
   data() {
     return {
       active: 0,
       navData: [
-        { name: "首页" },
-        { name: "农民夜校" },
-        { name: "慢直播" },
-        { name: "党建引领" },
-        { name: "资讯服务" },
-        { name: "办事指南" },
-        { name: "我的服务" },
+        { name: "首页", index: 0 },
+        { name: "农民夜校", index: 1 },
+        { name: "慢直播", index: 2 },
+        { name: "党建引领", index: 3 },
+        { name: "资讯服务", index: 4 },
+        { name: "办事指南", index: 5 },
+        { name: "我的服务", index: 6 },
       ],
       infoData: [
         {
@@ -177,34 +190,71 @@ export default {
       ],
     };
   },
-  //   components: {
-  //     Swiper,
-  //     SwiperSlide,
-  //     directive,
-  //   },
+
   created() {
     this.$nextTick(() => {
-      console.log(this.$tv);
       this.$tv.reset();
-      this.$tv.setScrollEl(document.querySelector(".box_section"));
-      //   this.$tv.setScrollEl(this.$tv.getElementByPath('//div[@class="demo"]'));
-      //   this.$tv.requestFocus(this.$refs.fo5);
+      this.$tv.focusClassName = "box_focusable"; // 选中的class
+    //   this.$tv.init({ distanceToCenter: true }); // 焦点居中
+      //   this.$tv.setScrollEl(document.querySelector(".home_nav")); // 设置滚动的div
+      //   this.$tv.setScrollEl(this.$tv.getElementByPath('//div[@class="nav_li"]')); // 初始化div聚焦
     });
   },
+  mounted() {
+    this.$tv.requestFocus(document.querySelector(`.tab_nav_0`));
+  },
 
   destroyed() {
-    // 由于设置的全局的init，为了不影响别的界面交互，销毁的时候，init里面的数据重置成全局的数据
-    this.$tv.resetScrollEl();
-    // this.$tv.distanceToCenter = false;
+    // 组件销毁，重置distanceToCenter的默认值，默认：false
+    this.$tv.init({ distanceToCenter: false });
   },
 
   methods: {
-    menuDown(item) {
-      // console.log(item,event);
-      //在最下面一个menu按下，焦点不动，避免右边内容item自动聚焦
-      //   if (item == 10) {
-      //     this.$tv.requestFocus(event.target);
-      //   }
+    //   点击跳转
+    skip() {
+      this.$router.push({ path: "/homeInfo" });
+    },
+
+    navFocus(index) {
+      //     console.log(index);
+      this.active = index;
+    },
+
+    navRight(index, event) {
+      console.log(index, event);
+      if (index == this.navData.length - 1) {
+        return;
+      }
+      this.active = index;
+      this.$tv.requestFocus(document.querySelector(`.tab_nav_${index + 1}`));
+    //   console.log(this.active);
+    },
+
+    navLeft(index) {
+      if (index <= 0) {
+        return;
+      } else {
+        this.active = index;
+        this.$tv.requestFocus(document.querySelector(`.tab_nav_${index - 1}`));
+      }
+    //   console.log(event.target, "left");
+      console.log(this.active);
+    },
+
+    navDown() {
+      this.$tv.requestFocus(document.querySelector(`.box_0`));
+    },
+
+    // 拿到对应calss
+    moveToIndex(index) {
+      this.$tv.requestFocus(document.querySelector(`.box_${index}`));
+    },
+
+    moveToTop() {
+      this.$tv.requestFocus(
+        this.$tv.requestFocus(document.querySelector(`.tab_nav_0`)),
+        false
+      );
     },
   },
 };
@@ -231,11 +281,18 @@ p {
   align-items: center;
   justify-content: space-between;
 
+  // 边框样式
+  .box_focusable {
+    transform: scale(1.04);
+    box-sizing: border-box;
+    overflow: hidden;
+    border: solid #FFA564;
+  }
+
   // 轮播图
   .home_slideshow {
     width: 520px;
     height: 390px;
-    border: solid red;
     border-radius: 10px;
   }
   // 通知信息
@@ -366,5 +423,12 @@ figure {
     font-size: 14px;
     line-height: 1.6;
   }
+
+  .focus {
+    transform: scale(1.2);
+    border: 2px solid red;
+    box-shadow: 0 0 20px red;
+    font-size: 28px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/homeInfo.vue b/src/views/homeInfo.vue
index 1b098c3..c2b3ae1 100644
--- a/src/views/homeInfo.vue
+++ b/src/views/homeInfo.vue
@@ -13,45 +13,32 @@
       <div class="menu">
         <!-- onFocus:聚焦  up:上  down:下 right:右   v-focusable-->
         <div
+          v-focusable
           @onFocus="menuFocus(i)"
           @up="menuUp(i, $event)"
           @down="menuDown(i, $event)"
           @right="menuRight"
-          v-focusable
-          class="item"
           v-for="i in list"
           :key="i"
+          class="menu_item"
+          ref="menu_item"
         >
-          <div
-            style="
-              display: flex;
-              height: 72px;
-              align-items: center;
-              color: #ffffff;
-            "
-          >
-            <div
-              style="
-                font-size: 12px;
-                border: 1px solid;
-                width: 38px;
-                height: 19px;
-                margin-left: 46px;
-                margin-right: 24px;
-              "
-            >
-              {{ i.state == 0 ? "离线" : "在线" }}
-            </div>
-            <p style="margin-left: 0">{{ i.name }}</p>
+          <div class="status">
+            {{ i.state == 0 ? "离线" : "在线" }}
           </div>
+          <p style="margin-left: 0">{{ i.name }}</p>
         </div>
       </div>
 
-      <div v-focusable class="content" v-for="index in contentCount" :key="index"  @down="contentDown(index, $event)">
+      <div
+        v-focusable
+        class="content"
+        v-for="index in contentCount"
+        :key="index"
+      >
         <div
           @onFocus="contentFocus"
-          @up="contentUp(index, $event)"
-          @down="contentDown(index, $event)"
+          @down="contentDown()"
           @left="contentLeft(index)"
           class="item"
           v-focusable
@@ -59,12 +46,19 @@
           <img
             src="../assets/img/bg01.png"
             alt=""
-            style="width: 865px; height: 480px;"
+            style="width: 865px; height: 480px"
           />
         </div>
-        <div class="contentInfo">
-          {{ currentMenu }}
-          摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄
+        <div
+          ref="contentInfo"
+          class="contentInfo"
+          v-focusable
+          @up="contentUp(index, $event)"
+        >
+          <span>
+            {{ currentMenu }}
+            摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄
+          </span>
         </div>
       </div>
     </div>
@@ -73,9 +67,10 @@
 
 <script>
 export default {
-  name: "Example6",
+  name: "homeInfo",
   data() {
     return {
+      active: 0,
       currentMenu: 0,
       contentCount: 1,
       list: [
@@ -100,15 +95,16 @@ export default {
           state: 1,
         },
       ],
-      state: 0,
     };
   },
   created() {
     this.$nextTick(() => {
+      this.$tv.focusClassName = "focus"; // 选中的class
       this.$tv.requestFocus(
-        this.$tv.getElementByPath(
-          '//div[@class="demo"]/div[@class="menu"]/div[1]'
-        )
+        this.$refs.menu_item
+        // this.$tv.getElementByPath(
+        //   '//div[@class="demo"]/div[@class="menu"]/div[1]'
+        // )
       );
     });
   },
@@ -116,11 +112,13 @@ export default {
     // 为了不影响别的界面交互，销毁的时候，如果有全局的配置属性就重置成全局配置，没有全局配置的属性就重置成系统默认的配置
     this.$tv.reset();
   },
+
   methods: {
     menuFocus(i) {
       //切换滚动元素到menu
       this.currentMenu = i;
       this.$tv.setScrollEl(this.$tv.getElementByPath("//div[@class='menu']"));
+      //   this.$tv.setScrollEl(this.$tv.getElementByPath("//div[@class='menu']/div[@class='item']")); // 初始化div聚焦
     },
 
     contentFocus() {
@@ -147,34 +145,30 @@ export default {
     menuRight() {
       //从menu到内容时固定到内容的第一个元素
       this.$tv.requestFocus(
-        this.$tv.getElementByPath("//div[@class='content']/div[1]"),
-        false
+        this.$tv.getElementByPath("//div[@class='content']/div[1]")
       );
     },
 
-    contentDown(index, event) {
-      if (this.contentCount - index < 3) {
-        //如果是最后一行的内容,按下焦点不许动
-        this.$tv.requestFocus(event.target);
-      }
-      console.log(event);
-    },
-
     contentLeft(i) {
-      if (i % 3 == 1) {
-        //在第一列的内容上按左时，让当前menu的item聚焦
-        this.$tv.requestFocus(
-          this.$tv.getElementByPath(
-            `//div[@class='menu']/div[${this.currentMenu}]`
-          ),
-          false
-        );
+      if (i == 1) {
+        this.$tv.requestFocus(this.$refs.menu_item);
       }
     },
+
     contentUp(index, event) {
-      if (index <= 3) {
-        this.$tv.requestFocus(event.target);
-      }
+      console.log(index, event);
+      //   if (index <= 3) {
+      //     this.$tv.requestFocus(event.target);
+      //   }
+    },
+
+    contentDown() {
+      console.log(index);
+      this.$tv.requestFocus(this.$refs.contentInfo);
+      //   if (this.contentCount - index < 3) {
+      //     //如果是最后一行的内容,按下焦点不许动
+      //     this.$tv.requestFocus(event.target);
+      //   }
     },
   },
 };
@@ -208,7 +202,6 @@ export default {
       display: inline-block;
       box-sizing: border-box;
       vertical-align: top;
-      border: solid red;
       border-radius: 10px;
       margin-bottom: 16px;
       color: aliceblue;
@@ -217,7 +210,7 @@ export default {
     .contentInfo {
       width: 870px;
       height: 92px;
-      background: #ffffff12;
+      //   background: #ffffff12;
       border-radius: 5.7px;
       overflow: auto;
       text-align: justify;
@@ -237,24 +230,40 @@ export default {
     border-right: 1px solid #ffffff63;
     padding-right: 0;
 
-    .item {
+    .menu_item {
       width: 100%;
       height: 72px;
       box-sizing: border-box;
       display: inline-block;
-      //   background: rgba(255, 255, 255, 0.08);
-      //   color: rgb(255, 165, 100);
       margin-bottom: 8px;
+      display: flex;
+      align-items: center;
+      color: #ffffff;
+
+      .status {
+        font-size: 12px;
+        border: 1px solid;
+        width: 38px;
+        height: 19px;
+        margin-left: 46px;
+        margin-right: 24px;
+      }
     }
   }
 }
 
 .focus {
   //   transform: scale(1);
-  font-size: 28px;
+
   div,
   p {
+    font-size: 28px;
     color: #ffa564;
   }
+  img {
+    border: solid red;
+    width: 200px;
+    height: 200px;
+  }
 }
 </style>