wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

bug630

This commit is contained in:
851673013@qq.com 2022-07-19 09:42:37 +08:00
parent 74168d8a2c
commit caf80caeff
1 changed files with 161 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

321
front/src/views/newHome/components/PopularAbility.vue
View File

@ -153,195 +153,196 @@
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.popular-ability { .popular-ability {
height: 6.8rem; height: 6.8rem;
background: url('~@/assets/newHome/popular-bg.png') no-repeat; background: url('~@/assets/newHome/popular-bg.png') no-repeat;
background-size: 100%; background-size: 100%;
display: flex;
justify-content: center;
.main {
width: 13rem;
margin-top: 0.78rem;
display: flex; display: flex;
flex-direction: column; justify-content: center;
flex-wrap: wrap; .main {
.top { width: 13rem;
font-size: 0.3rem; margin-top: 0.78rem;
color: #fff;
text-align: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; .top {
align-items: center; font-size: 0.3rem;
.line { color: #fff;
width: 0.34rem; text-align: center;
height: 0.03rem;
background-color: #fff;
margin-top: 0.08rem;
}
}
.bottom {
display: flex;
justify-content: space-between;
margin-top: 0.52rem;
.left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
.select { justify-content: center;
cursor: pointer; align-items: center;
.line {
width: 0.34rem;
height: 0.03rem;
background-color: #fff;
margin-top: 0.08rem;
}
}
.bottom {
display: flex;
justify-content: space-between;
margin-top: 0.52rem;
.left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; .select {
justify-content: center; cursor: pointer;
width: 1.05rem;
height: 1.39rem;
background: rgba(255, 255, 255, 0.08);
margin-bottom: 0.01rem;
border-right: 0.02rem solid rgba(233, 233, 233, 0.3);
.img {
width: 0.36rem;
height: 0.36rem;
background-size: 100%;
}
.fwl {
background: url('~@/assets/newHome/fwl-no.png') no-repeat;
background-size: contain;
}
.sgl {
background: url('~@/assets/newHome/sgl-no.png') no-repeat;
background-size: contain;
}
.scl {
background: url('~@/assets/newHome/scl-no.png') no-repeat;
background-size: contain;
}
.text {
color: rgba(255, 255, 255, 0.6);
font-size: 0.14rem;
margin-top: 0.08rem;
}
}
.select:hover {
background: rgba(255, 255, 255, 0.12);
}
.checked {
background: rgba(255, 255, 255, 0.18) !important;
border-right: 0.02rem solid #fff;
}
}
.right {
cursor: pointer;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-left: 0.2rem;
.item {
width: 3.78rem;
height: 2rem;
display: flex;
.item-left {
width: 0.83rem;
height: 100%;
display: flex; display: flex;
justify-content: center; flex-direction: column;
flex-wrap: wrap;
align-items: center; align-items: center;
background: #eef1f8; justify-content: center;
width: 1.05rem;
height: 1.39rem;
background: rgba(255, 255, 255, 0.08);
margin-bottom: 0.01rem;
border-right: 0.02rem solid rgba(233, 233, 233, 0.3);
.img { .img {
width: 0.56rem; width: 0.36rem;
height: 0.56rem; height: 0.36rem;
background-size: 100%; background-size: 100%;
} }
.zj { .fwl {
background: url('~@/assets/newHome/popular-zj.png') no-repeat; background: url('~@/assets/newHome/fwl-no.png') no-repeat;
background-size: contain; background-size: contain;
} }
.yy { .sgl {
background: url('~@/assets/newHome/popular-yy.png') no-repeat; background: url('~@/assets/newHome/sgl-no.png') no-repeat;
background-size: contain; background-size: contain;
} }
.jc { .scl {
background: url('~@/assets/newHome/popular-jc.png') no-repeat; background: url('~@/assets/newHome/scl-no.png') no-repeat;
background-size: contain; background-size: contain;
} }
.sj {
background: url('~@/assets/newHome/popular-sj.png') no-repeat;
background-size: contain;
}
.zs {
background: url('~@/assets/newHome/popular-zs.png') no-repeat;
background-size: contain;
}
}
.item-right {
width: 100%;
height: 100%;
background: #fff;
.fw {
width: 100%;
padding-right: 0.1rem;
padding-top: 0.03rem;
text-align: right;
color: 666;
font-size: 0.14rem;
color: #666;
}
.name {
font-size: 0.18rem;
color: #212121;
text-align: center;
margin-top: 0.05rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.text { .text {
width: 100%; color: rgba(255, 255, 255, 0.6);
padding: 0.24rem 0.3rem;
font-size: 0.14rem; font-size: 0.14rem;
color: #212121; margin-top: 0.08rem;
line-height: 0.24rem;
height: 1rem;
overflow: hidden;
} }
} }
.select:hover {
background: rgba(255, 255, 255, 0.12);
}
.checked {
background: rgba(255, 255, 255, 0.18) !important;
border-right: 0.02rem solid #fff;
}
} }
.item:nth-of-type(4), .right {
.item:nth-of-type(5), cursor: pointer;
.item:nth-of-type(6) { display: flex;
margin-top: 0.2rem; justify-content: space-between;
} flex-wrap: wrap;
.item:hover { margin-left: 0.2rem;
border-radius: 0.02rem; .item {
border: 0.01rem solid #0058e1; width: 3.78rem;
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3); height: 2rem;
display: flex;
.item-left {
width: 0.83rem;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #eef1f8;
.img {
width: 0.56rem;
height: 0.56rem;
background-size: 100%;
}
.zj {
background: url('~@/assets/newHome/popular-zj.png') no-repeat;
background-size: contain;
}
.yy {
background: url('~@/assets/newHome/popular-yy.png') no-repeat;
background-size: contain;
}
.jc {
background: url('~@/assets/newHome/popular-jc.png') no-repeat;
background-size: contain;
}
.sj {
background: url('~@/assets/newHome/popular-sj.png') no-repeat;
background-size: contain;
}
.zs {
background: url('~@/assets/newHome/popular-zs.png') no-repeat;
background-size: contain;
}
}
.item-right {
width: 100%;
height: 100%;
background: #fff;
.fw {
width: 100%;
padding-right: 0.1rem;
padding-top: 0.03rem;
text-align: right;
color: 666;
font-size: 0.14rem;
color: #666;
}
.name {
font-size: 0.18rem;
color: #212121;
text-align: center;
margin-top: 0.05rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.text {
width: 100%;
padding: 0.24rem 0.3rem;
font-size: 0.14rem;
color: #212121;
line-height: 0.24rem;
height: 1rem;
word-break: break-all;
overflow: hidden;
}
}
}
.item:nth-of-type(4),
.item:nth-of-type(5),
.item:nth-of-type(6) {
margin-top: 0.2rem;
}
.item:hover {
border-radius: 0.02rem;
border: 0.01rem solid #0058e1;
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
}
} }
} }
} .bottom-btn {
.bottom-btn { cursor: pointer;
cursor: pointer; text-align: center;
text-align: center; margin-top: 0.24rem;
margin-top: 0.24rem; color: #fff;
color: #fff; width: 1rem;
width: 1rem; height: 0.24rem;
height: 0.24rem; line-height: 0.24rem;
line-height: 0.24rem; margin-left: 6rem;
margin-left: 6rem; span {
span { display: inline-block;
display: inline-block; width: 0.1rem;
width: 0.1rem; height: 0.1rem;
height: 0.1rem; background: url('~@/assets/newHome/gd.png') no-repeat;
background: url('~@/assets/newHome/gd.png') no-repeat; background-size: contain;
background-size: contain; }
}
.bottom-btn:hover {
background: rgba(0, 88, 225, 0.1);
} }
}
.bottom-btn:hover {
background: rgba(0, 88, 225, 0.1);
} }
} }
}
</style> </style>