From 93ebe9c7ac4e6d3f4fb992e42ae38949cfed50db Mon Sep 17 00:00:00 2001
From: Tcsm <1377977403@qq.com>
Date: 星期二, 09 五月 2023 00:17:08 +0800
Subject: [PATCH] 家根网页面实现点击不同的代数显示不同的头像数量
---
ruoyi-ui/src/views/homeRoot/index.vue | 420 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 415 insertions(+), 5 deletions(-)
diff --git a/ruoyi-ui/src/views/homeRoot/index.vue b/ruoyi-ui/src/views/homeRoot/index.vue
index 4f19834..3ddd6e1 100644
--- a/ruoyi-ui/src/views/homeRoot/index.vue
+++ b/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>
--
Gitblit v1.9.1