login.vue的代码

<template>
      <div id="header" style="background-color: #fff;" @touchmove.prevent @mousewheel.prevent>

            <!-- 下面放个占位 -->
            <div class="bconten_width">
                  <div class="contnet_width_content">
                        <ul class="header_ul">

                        </ul>
                  </div>
            </div>
            <!-- 上面放个占位 -->

            <!--   下面是2个组件的引入  -->
            <div class="twocomdiv" style="background-color: #ffffff;">
                  <!--    下面是最新     -->
                  <div v-if="myindex==0">
                        <AAA></AAA>
                  </div>


            </div>


            <!--   下面是占位  -->
            <div style="width: 100vw;height: 60rem;"></div>
      </div>
</template>
 
<script>
      import AAA from './firstitem'

      export default {
            name: 'homeLayoutHeader',
            components: {
                  AAA,

            },
            created() {
                  // this.$router.go(0)
            },
            data() {
                  return {
                        myindex: 0,

                        dropDownActive: '',
                        active: 0
                  }
            },
            methods: {
                  mouserOver(v, tp) {
                        //鼠标移动上去的事件
                        this.dropDownActive = tp

                        this.active = v
                        this.myindex = v
                        console.log('打印一下,控制器', this.myindex)
                        this.liList.map((item, index) => {
                              if (v === index) {
                                    item.img = 'up'
                              } else {
                                    item.img = 'down'
                              }
                        })
                  },
                  contentmouseleave() {},
                  productContentMouseover(value) {},
                  planContentMouseover(value) {}
            }
      }
</script>
 
<style scoped>
      .twocomdiv {
            background-color: #ffffff;
            width: 100vw;
            height: 100vh;
            margin-top: 60px;
      }

      #header {
            width: 100vw;
            height: 100vh;
      }

      * {
            margin: 0;
            padding: 0;
      }

      .bconten_width {
            height: 110px;
            width: 100vw;
            margin: 0 auto;
            box-sizing: border-box;
            background-color: #fff;

      }

      .conten_width {
            height: 110px;
            width: 100vw;
            margin: 0 auto;
            box-sizing: border-box;
            background-color: #fff;
            position: fixed;
            top: 0px;
            left: 0px;
            z-index: 99999;
      }

      .contnet_width_content {
            height: 80px;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
      }

      .header_ul {
            display: flex;
            width: 50vw;
            height: 30px;
            justify-content: space-between;
            transform: translateX(0px);
            font-size: 30px;
      }

      .header_ul li {
            padding-bottom: 50px;
            cursor: pointer;
            padding-left: 2px;
      }

      .chosed {
            border-bottom: 5px solid red;
            position: relative;
            left: -5px;
      }
</style>