Changsha_tupu/gyxtp/src/components/UseAll/leftInfo.vue

<template>

  <div class="leftInfo" id="info">
    <div class="titleInfo">
      <div class="show1" v-if="leftNum==0 && zhedie==0">
        <div class="menuInfo">
          <img style="width: 100%;height: 100%;" src="../../assets/img2/menuXuan.png">
          <div style="width: 80%;position: absolute;left: 1vw;top: 0.5vw;">
            <img style="width: 72%;object-fit: contain;" src="../../assets/img2/menu12.png">
            <div style="font-size:0.8vw;color: #ffffff;">知识概览</div>
          </div>
        </div>
<!--        <div class="menuInfo" @click="goIndex">-->
<!--          <div style="width: 80%;position: absolute;left: 1vw;top: 0.5vw;">-->
<!--            <img style="width: 72%;object-fit: contain;" src="../../assets/img2/menu2.png">-->
<!--            <div style="font-size:0.8vw;color: #0776ff;">知识检索</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="menuInfo" @click="goCreate">-->
<!--          <div style="width: 80%;position: absolute;left: 1vw;top: 0.5vw;">-->
<!--            <img style="width: 72%;object-fit: contain;" src="../../assets/img2/menu2.png">-->
<!--            <div style="font-size:0.8vw;color: #0776ff;">自动构建</div>-->
<!--          </div>-->
<!--        </div>-->
        <div class="menuInfo" @click="goSmall">
          <div style="width: 80%;position: absolute;left: 1vw;top: 0.5vw;">
            <img style="width: 72%;object-fit: contain;" src="../../assets/img2/menu2.png">
            <div style="font-size:0.8vw;color: #0776ff;">数据溯源</div>
          </div>
        </div>

      </div>
      <div class="show2" v-if="leftNum==1 && zhedie==0">
        <div class="menuInfo" @click="goGraph">
          <div style="width: 80%;position: absolute;left: 1vw;top: 0.5vw;">
            <img style="width: 72%;object-fit: contain;" src="../../assets/img2/menu1.png">
            <div style="font-size:0.8vw;color: #0776ff;">知识概览</div>
          </div>
        </div>
<!--        <div class="menuInfo" @click="goIndex">-->
<!--          <img style="width: 100%;height: 100%;" src="../../assets/img2/menuXuan.png">-->
<!--          <div style="width: 80%;position: absolute;left: 1vw;top: 0.5vw;">-->
<!--            <img style="width: 72%;object-fit: contain;" src="../../assets/img2/menu22.png">-->
<!--            <div style="font-size:0.8vw;color: #ffffff;">知识检索</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="menuInfo" @click="goCreate">-->
<!--          <div style="width: 80%;position: absolute;left: 1vw;top: 0.5vw;">-->
<!--            <img style="width: 72%;object-fit: contain;" src="../../assets/img2/menu2.png">-->
<!--            <div style="font-size:0.8vw;color: #0776ff;">自动构建</div>-->
<!--          </div>-->
<!--        </div>-->
        <div class="menuInfo" @click="goSmall">
          <div style="width: 80%;position: absolute;left: 1vw;top: 0.5vw;">
            <img style="width: 72%;object-fit: contain;" src="../../assets/img2/menu2.png">
            <div style="font-size:0.8vw;color: #0776ff;">数据溯源</div>
          </div>
        </div>
      </div>
      <div class="show3" v-if="leftNum==2 && zhedie==0">
        <div class="menuInfo" @click="goGraph">
          <div style="width: 80%;position: absolute;left: 1vw;top: 0.5vw;">
            <img style="width: 72%;object-fit: contain;" src="../../assets/img2/menu1.png">
            <div style="font-size:0.8vw;color: #0776ff;">知识概览</div>
          </div>
        </div>
<!--        <div class="menuInfo" @click="goIndex">-->
<!--          <div style="width: 80%;position: absolute;left: 1vw;top: 0.5vw;">-->
<!--            <img style="width: 72%;object-fit: contain;" src="../../assets/img2/menu2.png">-->
<!--            <div style="font-size:0.8vw;color: #0776ff;">知识检索</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="menuInfo" @click="goCreate">-->

<!--          <img style="width: 100%;height: 100%;" src="../../assets/img2/menuXuan.png">-->
<!--          <div style="width: 80%;position: absolute;left: 1vw;top: 0.5vw;">-->
<!--            <img style="width: 72%;object-fit: contain;" src="../../assets/img2/menu22.png">-->
<!--            <div style="font-size:0.8vw;color: #ffffff;">自动构建</div>-->
<!--          </div>-->
<!--        </div>-->
        <div class="menuInfo" @click="goSmall">
          <div style="width: 80%;position: absolute;left: 1vw;top: 0.5vw;">
            <img style="width: 72%;object-fit: contain;" src="../../assets/img2/menu2.png">
            <div style="font-size:0.8vw;color: #0776ff;">数据溯源</div>
          </div>
        </div>
      </div>
      <div class="show4" v-if="leftNum==3 && zhedie==0">
        <div class="menuInfo" @click="goGraph">
          <div style="width: 80%;position: absolute;left: 1vw;top: 0.5vw;">
            <img style="width: 72%;object-fit: contain;" src="../../assets/img2/menu1.png">
            <div style="font-size:0.8vw;color: #0776ff;">知识概览</div>
          </div>
        </div>
<!--        <div class="menuInfo" @click="goIndex">-->
<!--          <div style="width: 80%;position: absolute;left: 1vw;top: 0.5vw;">-->
<!--            <img style="width: 72%;object-fit: contain;" src="../../assets/img2/menu2.png">-->
<!--            <div style="font-size:0.8vw;color: #0776ff;">知识检索</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="menuInfo" @click="goCreate">-->

<!--          <img style="width: 100%;height: 100%;" src="../../assets/img2/menuXuan.png">-->
<!--          <div style="width: 80%;position: absolute;left: 1vw;top: 0.5vw;">-->
<!--            <img style="width: 72%;object-fit: contain;" src="../../assets/img2/menu22.png">-->
<!--            <div style="font-size:0.8vw;color: #ffffff;">自动构建</div>-->
<!--          </div>-->
<!--        </div>-->
        <div class="menuInfo" @click="goSmall">
          <img style="width: 100%;height: 100%;" src="../../assets/img2/menuXuan.png">
          <div style="width: 80%;position: absolute;left: 1vw;top: 0.5vw;">
            <img style="width: 72%;object-fit: contain;" src="../../assets/img2/menu22.png">
            <div style="font-size:0.8vw;color: #ffffff;">数据溯源</div>
          </div>
        </div>
<!--        <div class="menuInfo" @click="goSmall">-->
<!--          <div style="width: 80%;position: absolute;left: 1vw;top: 0.5vw;">-->
<!--            <img style="width: 72%;object-fit: contain;" src="../../assets/img2/menu2.png">-->
<!--            <div style="font-size:0.8vw;color: #ffffff;">小图谱</div>-->
<!--          </div>-->
<!--        </div>-->
      </div>
    </div>
  </div>




</template>

<script>
export default {
  name: "leftInfo",
  data(){
    return{

    }
  },
  props:{
    leftNum:Number,
    zhedie:Number,
  },
  methods:{
    goGraph() {
      this.$router.push('/graphPage');
    },
    goIndex() {
      this.$router.push('/index');
    },

    goCreate() {
      this.$router.push('/create');
    },
    goSmall(){
      this.$router.push('/small');
    },
  }
}
</script>

<style scoped>
.leftInfo{
  width: 100%;
  height: 100%;
  background-color: #e4effd;
}
.titleInfo{
  height: 35vw;
  margin-top: 5vw;
  width: 100%;

}
.show1{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  /*background-color: red;*/
  justify-content: space-between;
}
.show2{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  /*background-color: red;*/
  justify-content: space-between;
}
.show3{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  /*background-color: red;*/
  justify-content: space-between;
}
.show4{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  /*background-color: red;*/
  justify-content: space-between;
}
.show5{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  /*background-color: red;*/
  justify-content: space-between;
}




.menuInfo{
  width: 100%;
  height: 5vw;
  position: relative;
  margin-bottom: 1vw;

}
.jianTou{
  width: 1.5vw;
  height: 1.5vw;
  margin-top: 2vw;
  margin-left: 1.5vw;
}
.leftInfo{
  cursor: pointer;
}


</style>