家根网页面实现点击不同的代数显示不同的头像数量

Tcsm

2023-05-09 93ebe9c7ac4e6d3f4fb992e42ae38949cfed50db

 ruoyi-ui/src/views/homeRoot/index.vue

@@ -7,7 +7,9 @@
          <img src="../../assets/images/Frame.png">
        </span>
        <el-dropdown-menu slot="dropdown" >
          <el-dropdown-item v-for="item in dropdownList" :key="item.src" @click.native="getInfo(item.src)">{{ item.name }}
          <el-dropdown-item v-for="item in dropdownList" :key="item.src" @click.native="getInfo(item.src)" >
<!--            {{ item.name }}-->
            <span v-on:click="getFunc(item.name)">{{ item.name }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
@@ -18,7 +20,7 @@
        <!-- 背景大图-->
        <img v-if="imageSrc" :src="imageSrc" alt="" class="background"/>
        <!-- 用户头像-->
        <div v-model="rootList.url" prop="url">
        <div v-model="rootList.url" >
          <el-avatar shape="circle" class="avater_1_1">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
@@ -59,7 +61,114 @@
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>

          <el-avatar shape="circle" class="avater_3_1" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_2" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_3" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_4" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_5" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_6" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_7" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_8" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_9" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_10" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_11" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_12" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_13" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_14" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_15" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_16" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_17" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_18" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_19" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_20" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_3_21" v-if="isShow_3">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_4_1" v-if="isShow_4">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_4_2" v-if="isShow_4">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_4_3" v-if="isShow_4">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_4_4" v-if="isShow_4">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_4_5" v-if="isShow_4">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>
          <el-avatar shape="circle" class="avater_4_6" v-if="isShow_4">
            <el-img :src="'http://47.93.189.255:8080'+ rootList.url"
            ></el-img>
          </el-avatar>

        </div>
      </div>
@@ -134,6 +243,42 @@
    {
      this.imageSrc = require('../../assets/images/'+src)
    },
    getFunc(name){
      switch (name) {
        case '显示至第二代':
          this.generation_2()
          break
        case '显示至第三代':
          this.generation_3()
          break
        case '显示全部':
          this.generation_4()
          break
        default:
          this.generation_1()
          break
      }
    },
    generation_1(){
      this.isShow_2=false
      this.isShow_3=false
      this.isShow_4=false
    },
    generation_2(){
      this.isShow_2=true
      this.isShow_3=false
      this.isShow_4=false
    },
    generation_3(){
      this.isShow_2=true
      this.isShow_3=true
      this.isShow_4=false
    },
    generation_4(){
      this.isShow_2=true
      this.isShow_3=true
      this.isShow_4=true
    },
    getList() {
      this.loading = true;
      // console.log(this.queryParams)
@@ -148,9 +293,7 @@
        }
      );
    },
    handleEdit_1(){

    }
  }
}
</script>
@@ -271,4 +414,271 @@
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_1{
  position: absolute;
  top: 82%;
  left: 36%;
  transform: translate(-50%, -50%);
  width: 47px;
  height: 47px;
  opacity: 1;
}
.avater_3_2{
  position: absolute;
  top: 80%;
  left: 24%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 41px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_3{
  position: absolute;
  top: 65%;
  left: 20%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 53px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_4{
  position: absolute;
  top: 62%;
  left: 30%;
  transform: translate(-50%, -50%);
  width: 37px;
  height: 38px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_5{
  position: absolute;
  top: 48%;
  left: 29%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 43px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_6{
  position: absolute;
  top: 31%;
  left: 23%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 47px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_7{
  position: absolute;
  top: 37%;
  left: 31%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 47px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_8{
  position: absolute;
  top: 22%;
  left: 34%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 58px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_9{
  position: absolute;
  top: 39%;
  left: 38%;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 35px;
  opacity: 1;
}
.avater_3_10{
  position: absolute;
  top: 42%;
  left: 43%;
  transform: translate(-50%, -50%);
  width: 41px;
  height: 42px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_11{
  position: absolute;
  top: 28%;
  left: 45%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 33px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_12{
  position: absolute;
  top: 18%;
  left: 51%;
  transform: translate(-50%, -50%);
  width: 49px;
  height: 50px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_13{
  position: absolute;
  top: 37%;
  left: 51%;
  transform: translate(-50%, -50%);
  width: 41px;
  height: 42px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_14{
  position: absolute;
  top: 33%;
  left: 57%;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 35px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_15{
  position: absolute;
  top: 35%;
  left: 64%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 39px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_16{
  position: absolute;
  top: 18%;
  left: 69%;
  transform: translate(-50%, -50%);
  width: 49px;
  height: 51px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_17{
  position: absolute;
  top: 56%;
  left: 71%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 33px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_18{
  position: absolute;
  top: 46%;
  left: 76%;
  transform: translate(-50%, -50%);
  width: 43px;
  height: 43px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_19{
  position: absolute;
  top:62%;
  left: 79%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 39px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_20{
  position: absolute;
  top: 73%;
  left: 74%;
  transform: translate(-50%, -50%);
  width: 33px;
  height: 33px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_3_21{
  position: absolute;
  top: 81%;
  left: 65%;
  transform: translate(-50%, -50%);
  width: 37px;
  height: 38px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_4_1{
  position: absolute;
  top: 50%;
  left: 21%;
  transform: translate(-50%, -50%);
  width: 51px;
  height: 52px;
  opacity: 1;
}
.avater_4_2{
  position: absolute;
  top: 23%;
  left: 40%;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 35px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_4_3{
  position: absolute;
  top: 11%;
  left: 46%;
  transform: translate(-50%, -50%);
  width: 47px;
  height: 47px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_4_4{
  position: absolute;
  top: 17%;
  left: 57%;
  transform: translate(-50%, -50%);
  width: 39px;
  height: 39px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_4_5{
  position: absolute;
  top: 23%;
  left: 61%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
.avater_4_6{
  position: absolute;
  top: 32%;
  left: 73%;
  transform: translate(-50%, -50%);
  width: 41px;
  height: 43px;
  border-radius: 133px 133px 133px 133px;
  opacity: 1;
}
</style>