150 lines
3.0 KiB
Vue
150 lines
3.0 KiB
Vue
|
<script setup lang="ts"></script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="search-suggest-combobox">
|
||
|
|
<div class="input-search">
|
||
|
|
<input placeholder="马嘉祺" />
|
||
|
|
<button>搜索</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="screen-outer">
|
||
|
|
<div class="tb-pick-content-item">
|
||
|
|
<div class="img-wrapper"></div>
|
||
|
|
<div class="info-wrapper">进口安佳淡奶油1L动物奶油新西兰家用生日蛋糕裱花蛋挞液专用烘焙</div>
|
||
|
|
<div class="price-wrapper">
|
||
|
|
<span class="price-unit">¥</span>
|
||
|
|
<span class="price-value">30</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tb-pick-content-item"></div>
|
||
|
|
<div class="tb-pick-content-item"></div>
|
||
|
|
<div class="tb-pick-content-item"></div>
|
||
|
|
<div class="tb-pick-content-item"></div>
|
||
|
|
<div class="tb-pick-content-item"></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.search-suggest-combobox {
|
||
|
|
width: 100%;
|
||
|
|
height: 38px;
|
||
|
|
margin-top: 40px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
.input-search {
|
||
|
|
width: 1004px;
|
||
|
|
height: 38px;
|
||
|
|
border-radius: 8px;
|
||
|
|
border: 2px solid rgb(255, 80, 0);
|
||
|
|
align-items: center;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
background: white;
|
||
|
|
|
||
|
|
input {
|
||
|
|
border: none;
|
||
|
|
background: none;
|
||
|
|
height: 38px;
|
||
|
|
margin-left: 30px;
|
||
|
|
width: 800px;
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
width: 72px;
|
||
|
|
height: 34px;
|
||
|
|
border: none;
|
||
|
|
background: #ff6200;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 700;
|
||
|
|
border-radius: 4px;
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.screen-outer {
|
||
|
|
background: #fff;
|
||
|
|
width: 1552px;
|
||
|
|
margin: 30px auto;
|
||
|
|
border-radius: 18px;
|
||
|
|
padding-top: 16px;
|
||
|
|
padding-bottom: 24px;
|
||
|
|
min-height: 300px;
|
||
|
|
display: flex; /* 添加此行启用Flex布局 */
|
||
|
|
flex-wrap: wrap; /* 允许Flex子项目换行 */
|
||
|
|
box-sizing: border-box; /* 确保padding计算在总宽内 */
|
||
|
|
}
|
||
|
|
|
||
|
|
.tb-pick-content-item {
|
||
|
|
border-radius: 12px;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
box-sizing: border-box;
|
||
|
|
cursor: pointer;
|
||
|
|
margin: 16px 0 16px 16px; /* 调整上边距以适应新的换行布局 */
|
||
|
|
position: relative;
|
||
|
|
transition: all 0.5s;
|
||
|
|
width: 240px;
|
||
|
|
height: 358px;
|
||
|
|
padding: 5px;
|
||
|
|
|
||
|
|
.info-wrapper {
|
||
|
|
height: 48px;
|
||
|
|
margin-top: 8px;
|
||
|
|
overflow: hidden;
|
||
|
|
width: 96%;
|
||
|
|
color: #11192d;
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 500;
|
||
|
|
line-height: 24px;
|
||
|
|
margin-left: 8px;
|
||
|
|
margin-right: 8px;
|
||
|
|
max-height: 48px;
|
||
|
|
word-break: break-all;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tb-pick-content-item:hover {
|
||
|
|
border: 1px solid #ff6200;
|
||
|
|
}
|
||
|
|
|
||
|
|
.img-wrapper {
|
||
|
|
background-image: url('https://img.alicdn.com/bao/uploaded/i1/3937219703/O1CN01FZXnRo2LY1zwkI3j0_!!3937219703-0-C2M.jpg');
|
||
|
|
background-position: 50%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
background-color: #f3f6f8;
|
||
|
|
border-radius: 8px;
|
||
|
|
height: 230px;
|
||
|
|
overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
width: 230px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-wrapper {
|
||
|
|
align-items: flex-end;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
height: 24px;
|
||
|
|
margin-left: 8px;
|
||
|
|
margin-top: 8px;
|
||
|
|
|
||
|
|
.price-unit {
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 14px;
|
||
|
|
margin-bottom: 1px;
|
||
|
|
margin-right: 2px;
|
||
|
|
color: #ff5500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-value {
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: 700;
|
||
|
|
line-height: 24px;
|
||
|
|
color: #ff5500;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|