Browse Source

显示优化

live_lh
lenghui 7 months ago
parent
commit
a383e058d1
  1. 38
      vueHomilyLink/src/assets/main.css
  2. 30
      vueHomilyLink/src/views/LiveView.vue

38
vueHomilyLink/src/assets/main.css

@ -1,35 +1,9 @@
@import './base.css';
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
font-weight: normal;
}
a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
}
@media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
html,body{
margin:0px;
height: 100%;
}
#app{
height: 100%;
}

30
vueHomilyLink/src/views/LiveView.vue

@ -24,10 +24,9 @@
</div>
</div>
</div>
</div>
<!-- 卡片 -->
<div class="card-container">
<!-- 卡片 -->
<div class="card">
<div class="cover-image" style="position:relative;">
<img src="../assets/live.jpg" alt="节目1">
@ -51,10 +50,8 @@
</div>
</div>
</div>
</div>
<!-- 卡片 -->
<div class="card-container">
<!-- 卡片 -->
<div class="card">
<div class="cover-image" style="position:relative;">
<img src="../assets/live.jpg" alt="节目1">
@ -78,10 +75,8 @@
</div>
</div>
</div>
</div>
<!-- 卡片 -->
<div class="card-container">
<!-- 卡片 -->
<div class="card">
<div class="cover-image" style="position:relative;">
<img src="../assets/live.jpg" alt="节目1">
@ -105,10 +100,8 @@
</div>
</div>
</div>
</div>
<!-- 卡片 -->
<div class="card-container">
<!-- 卡片 -->
<div class="card">
<div class="cover-image" style="position:relative;">
<img src="../assets/live.jpg" alt="节目1">
@ -136,7 +129,7 @@
</template>
<style scoped>
body {
.card-container {
/*居中显示*/
margin-left: auto;
margin-right: auto;
@ -149,17 +142,6 @@ body {
background-color: #f4f4f4;
display: flex;
align-items: center;
/* 垂直居中整个页面内容 */
}
.card-container {
display: flex;
flex-wrap: wrap;
/*超出自动换行*/
justify-content: center;
/* 卡片水平居中 */
padding: 0px;
}
.card {

Loading…
Cancel
Save