完善站点组件的手机端样式

This commit is contained in:
2022-11-01 10:34:19 +08:00
parent e4980cbe46
commit bef8467c76
5 changed files with 71 additions and 22 deletions

View File

@@ -7,7 +7,7 @@
</div>
<div class="item-body">
<div class="item-body-item">
<div class="item-image" style="background-image: url('/static/images/view.jpg');">
<div class="item-image ul-demo-img-bg">
</div>
<div class="item-info">

View File

@@ -4,7 +4,7 @@
</div>
<div class="ul-site-list">
<div class="ul-site-item" v-for="i in 5">
<div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
<div class="ul-site-item-logo ul-demo-img-bg">
</div>
<div class="ul-site-item-info">
<div class="ul-site-item-title">
@@ -16,7 +16,7 @@
</div>
</div>
<div class="ul-site-item">
<div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
<div class="ul-site-item-logo ul-demo-img-bg">
</div>
<div class="ul-site-item-info">
<div class="ul-site-item-title">
@@ -35,19 +35,19 @@
</div>
<div class="ul-site-list">
<div class="ul-site-item card" v-for="i in 5">
<div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
<div class="ul-site-item-logo ul-demo-img-bg">
</div>
<div class="ul-site-item-info">
<div class="ul-site-item-title">
layui奥宏样式
layui奥宏样式
</div>
<div class="ul-site-item-desc">
纯CSS的组件案例样式大全
纯CSS的组件
</div>
</div>
</div>
<div class="ul-site-item card">
<div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
<div class="ul-site-item-logo ul-demo-img-bg">
</div>
<div class="ul-site-item-info">
<div class="ul-site-item-title">
@@ -66,19 +66,19 @@
</div>
<div class="ul-site-list">
<div class="ul-site-item card same-height" v-for="i in 5">
<div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
<div class="ul-site-item-logo ul-demo-img-bg">
</div>
<div class="ul-site-item-info">
<div class="ul-site-item-title">
layui奥宏样式
layui奥宏样式
</div>
<div class="ul-site-item-desc">
纯CSS的组件案例样式大全
纯CSS的组件
</div>
</div>
</div>
<div class="ul-site-item card small-height">
<div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
<div class="ul-site-item card same-height">
<div class="ul-site-item-logo ul-demo-img-bg">
</div>
<div class="ul-site-item-info">
<div class="ul-site-item-title">

View File

@@ -66,12 +66,24 @@
}
@media screen and (max-width:450px) {
.ul-site-item {
width: 49%;
}
.ul-site-item-desc {
font-size : 11px;
margin-top: 3px;
.ul-site-list {
display : flex;
align-items : flex-start;
justify-content: space-between;
.ul-site-item {
width : calc(50% - 10px);
margin-right: 0;
&.card {
width: calc(50% - 30px);
}
}
.ul-site-item-desc {
font-size : 11px;
margin-top: 3px;
}
}
}