|
|
|
@ -9,12 +9,12 @@ |
|
|
|
<p class="title">{{ item.title }}</p> |
|
|
|
<div class="img_box"> |
|
|
|
<img :src="item.picUrl" class="img" /> |
|
|
|
<div class="bottom_text"> |
|
|
|
<p>工业设计</p> |
|
|
|
<p>软硬件研发</p> |
|
|
|
<p>样机制作</p> |
|
|
|
<p>量产</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="bottom_text"> |
|
|
|
<p>工业设计</p> |
|
|
|
<p>软硬件研发</p> |
|
|
|
<p>样机制作</p> |
|
|
|
<p>量产</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -46,32 +46,30 @@ const toDetail = (productId, classify) => { |
|
|
|
<style lang="scss" scoped> |
|
|
|
.line_cards { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
|
grid-template-rows: repeat(5, 1fr); |
|
|
|
grid-template-columns: repeat(1, 1fr); |
|
|
|
grid-template-rows: repeat(10, 1fr); |
|
|
|
column-gap: 7px; |
|
|
|
padding: 0 7px; |
|
|
|
box-sizing: border-box; |
|
|
|
row-gap: 7px; |
|
|
|
.card { |
|
|
|
background: #ffffff; |
|
|
|
border-radius: 3px; |
|
|
|
border-radius: 16px; |
|
|
|
flex: 1; |
|
|
|
box-sizing: border-box; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
padding: 11px 7px 7px 7px; |
|
|
|
padding: 14px; |
|
|
|
.title { |
|
|
|
width: 150px; |
|
|
|
overflow: hidden; |
|
|
|
white-space: nowrap; |
|
|
|
text-overflow: ellipsis; |
|
|
|
font-size: 8px; |
|
|
|
height: 16px; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: 400; |
|
|
|
color: #2f2f2f; |
|
|
|
padding-left: 2px; |
|
|
|
margin-bottom: 6px; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: bold; |
|
|
|
line-height: normal; |
|
|
|
letter-spacing: 0em; |
|
|
|
font-feature-settings: 'kern' on; |
|
|
|
color: #191919; |
|
|
|
padding-left: 8px; |
|
|
|
margin-bottom: 12px; |
|
|
|
} |
|
|
|
.img_box { |
|
|
|
width: 100%; |
|
|
|
@ -80,23 +78,34 @@ const toDetail = (productId, classify) => { |
|
|
|
.img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
border-radius: 8px; |
|
|
|
object-fit: cover; |
|
|
|
} |
|
|
|
.bottom_text { |
|
|
|
position: absolute; |
|
|
|
left: -50%; |
|
|
|
bottom: -7px; |
|
|
|
background: rgba(0, 0, 0, 0.2); |
|
|
|
} |
|
|
|
.bottom_text { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(4, 1fr); |
|
|
|
align-items: center; |
|
|
|
margin-top: 12px; |
|
|
|
column-gap: 6px; |
|
|
|
p { |
|
|
|
width: 100%; |
|
|
|
padding: 3px 6px; |
|
|
|
white-space: nowrap; |
|
|
|
border-radius: 555px; |
|
|
|
opacity: 1; |
|
|
|
box-sizing: border-box; |
|
|
|
border: 2px solid #7c7c7c; |
|
|
|
display: flex; |
|
|
|
padding: 5px 0; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-evenly; |
|
|
|
font-size: 16px; |
|
|
|
justify-content: center; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: 400; |
|
|
|
color: #ffffff; |
|
|
|
width: 200%; |
|
|
|
transform: scale(0.5); |
|
|
|
font-size: 11px; |
|
|
|
font-weight: 500; |
|
|
|
line-height: normal; |
|
|
|
letter-spacing: 0.08em; |
|
|
|
font-feature-settings: 'kern' on; |
|
|
|
color: #5e5e5e; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
maochaoying
2 years ago