XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改首页瀑布流样式

Browse Source
This commit is contained in:
A1300399510
2024-11-12 14:03:52 +08:00
parent b4e510f9cf
commit 2fdea2976c
8 changed files with 61 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/views/HomeView.vue
View File

@@ -111,16 +111,14 @@
<div class="waterfall-box s-w-100" ref="list" v-show="waterfallList.length > 0">
<div class="waterfall-first-box item dis-f al-item jus-x" style="flex-wrap: wrap;">
<div v-for="(item, i) in indexData.data.tabs" :key="i" class="info-box dis-f al-item jus-x" :class="[i == 0 ? 'first' : i == 1 ? 'second' : i == 2 ? 'third' : '']" style="flex-wrap: wrap;" @click="housingPage(item.path)">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/person.png" alt="" v-if="i == 0" class="img" />
<img src="../assets/homeImage/intermediary.png" alt="" v-if="i == 1" class="img" />
<img src="../assets/homeImage/brand.png" alt="" v-if="i == 2" class="img" />
<img src="../assets/homeImage/seek.png" alt="" v-if="i == 3" class="img" />
</div>
<div class="text-center s-w-100">
{{ item.name }}
</div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/person.png" alt="" v-if="i == 0" class="img" />
<img src="../assets/homeImage/intermediary.png" alt="" v-if="i == 1" class="img" />
<img src="../assets/homeImage/brand.png" alt="" v-if="i == 2" class="img" />
<img src="../assets/homeImage/seek.png" alt="" v-if="i == 3" class="img" />
</div>
<div class="text-center s-w-100">
{{ item.name }}
</div>
</div>
</div>
@@ -474,11 +472,13 @@ img {
}
.list-li {
// margin-top: 15px;
cursor: pointer;
width: 50%;
background-color: rgba(246, 246, 246, 1);
border-right: 1px solid rgba(246, 246, 246, 1);
height: 30px;
// border: ;
&:not(:nth-last-child(-n + 2)) {
margin-bottom: 10px;
@@ -678,7 +678,7 @@ img {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 20px;
font-size: 17px;
color: #555555;
height: 48px;
line-height: 48px;
@@ -708,7 +708,7 @@ img {
width: 1px;
background: #d7d7d7;
height: 21px;
margin: 0 30px;
margin: 0 16px;
}
.waterfall-box {
@@ -717,8 +717,8 @@ img {
justify-content: space-between;
.waterfall-first-box {
width: 284px;
height: 284px;
width: 224px;
height: 224px;
background-color: rgba(255, 255, 255, 1);
border-radius: 16px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
@@ -727,6 +727,9 @@ img {
flex-wrap: wrap;
margin-bottom: 20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
.first {
border-right: 1px dashed #ebebeb;
border-bottom: 1px dashed #ebebeb;
@@ -741,14 +744,16 @@ img {
}
.info-box {
width: 142px;
height: 142px;
// width: 142px;
// height: 142px;
height: 100%;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #555555;
cursor: pointer;
flex-direction: column;
.text-center {
text-align: center;
@@ -761,8 +766,8 @@ img {
}
.img-box {
width: 56px;
height: 56px;
width: 48px;
height: 48px;
border-radius: 16px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
@@ -772,8 +777,8 @@ img {
}
.img {
width: 30px;
height: 30px;
width: 24px;
height: 24px;
}
}
}