digital 过滤调整
This commit is contained in:
X1627315083@163.com
@@ -77,42 +77,24 @@ const {} = toRefs(data);
|
||||
.list{
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
// display: grid;
|
||||
// align-content: start;
|
||||
// grid-template-columns: repeat(3, 1fr);
|
||||
overflow: hidden;
|
||||
|
||||
display: grid;
|
||||
align-content: start;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
overflow-y: auto;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
|
||||
border-top: 0.5px solid #585858;
|
||||
padding: .5px 0 0 .5px;
|
||||
/* 垂直线（右边框） */
|
||||
.item{
|
||||
position: relative;
|
||||
padding: 1.2rem;
|
||||
--commodity-marginBottom: 2rem;
|
||||
--commodity-name-fontSize: 2rem;
|
||||
--commodity-name-marginBottom: .8rem;
|
||||
--commodity-price-fontSize: 1.6rem;
|
||||
}
|
||||
.item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
border-right: 0.5px solid #585858;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 水平线（下边框） */
|
||||
.item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-bottom: 0.5px solid #585858;
|
||||
z-index: 1;
|
||||
}
|
||||
/* 移除最后一列的右边框 */
|
||||
.item:nth-child(3n)::before {
|
||||
display: none;
|
||||
border-right: 0.5px solid #585858;
|
||||
margin-right: -1px;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,6 +16,20 @@ const scrollTop = ref(0)
|
||||
const router = useRouter()
|
||||
let data = reactive({
|
||||
})
|
||||
|
||||
const categoriesList = ref([
|
||||
{
|
||||
value:'Best Selling',
|
||||
label:'Best Selling'
|
||||
},{
|
||||
value:'Price: Low to High',
|
||||
label:'Price: Low to High'
|
||||
},{
|
||||
value:'Newest First',
|
||||
label:'Newest First'
|
||||
},
|
||||
])
|
||||
const categories = ref('Newest First')
|
||||
const addShopping = (item) => {}
|
||||
const openDetail = (item) => {
|
||||
scrollTop.value = digitalItemRef.value.scrollTop
|
||||
@@ -42,6 +56,22 @@ const {} = toRefs(data);
|
||||
<p class="info">Virtual fashion creations collected in your personal archive</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filters">
|
||||
<div class="filter-item">
|
||||
<el-select v-model="categories" placeholder="Sort By" :teleported="false">
|
||||
<template #label="{ label }">
|
||||
<span class="header-label">Sort By</span>
|
||||
<span class="header-value">{{ label }}</span>
|
||||
</template>
|
||||
<el-option
|
||||
v-for="item in categoriesList"
|
||||
:key="item.label"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="merchant-info">
|
||||
<MerchantInfo></MerchantInfo>
|
||||
@@ -89,12 +119,67 @@ const {} = toRefs(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
> .filters{
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 9rem;
|
||||
justify-content: flex-end;
|
||||
> .filter-item{
|
||||
:deep(.el-select) {
|
||||
width: 15rem;
|
||||
--el-border-radius-base: 0;
|
||||
--el-select-input-color: rgba(0, 0, 0, 0.5);
|
||||
--el-select-input-font-size: 1rem;
|
||||
.el-select__wrapper {
|
||||
font-size: 1.07rem;
|
||||
padding: 0 0.7rem;
|
||||
line-height: 1;
|
||||
min-height: 0;
|
||||
height: 2.2rem;
|
||||
|
||||
.header-label {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
margin-right: 0.6rem;
|
||||
}
|
||||
.header-value {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
.el-select__popper {
|
||||
--el-popper-border-radius: 0;
|
||||
border: 0.1rem solid #d0d0d0;
|
||||
.el-select-dropdown__list {
|
||||
padding: 0;
|
||||
> .el-select-dropdown__item {
|
||||
margin-bottom: 0.89rem;
|
||||
color: #232323;
|
||||
font-size: 1.069rem;
|
||||
height: 2.68rem;
|
||||
line-height: 2.68rem;
|
||||
padding: 0 1.4rem;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.is-selected {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
> .content{
|
||||
display: flex;
|
||||
height: auto;
|
||||
align-items: flex-start;
|
||||
border-top: 0.5px solid #585858;
|
||||
margin-top: 6rem;
|
||||
.merchant-info{
|
||||
width: 38.5rem;
|
||||
padding-left: 10.2rem;
|
||||
|
||||
@@ -7,10 +7,6 @@ import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
let data = reactive({
|
||||
})
|
||||
const categoriesList = ref([
|
||||
{
|
||||
label: 'All',
|
||||
value: 'All'
|
||||
},
|
||||
{
|
||||
label: 'Outwear',
|
||||
value: 'Outwear'
|
||||
@@ -37,10 +33,6 @@ const categoriesList = ref([
|
||||
},
|
||||
]);
|
||||
const genderList = ref([
|
||||
{
|
||||
label: 'All',
|
||||
value: 'All'
|
||||
},
|
||||
{
|
||||
label: 'Male',
|
||||
value: 'Male'
|
||||
@@ -50,12 +42,12 @@ const genderList = ref([
|
||||
value: 'Female'
|
||||
},
|
||||
])
|
||||
const categories = ref('All')
|
||||
const gender = ref('All')
|
||||
const categories = ref([''])
|
||||
const gender = ref([''])
|
||||
|
||||
const clearFilters = () => {
|
||||
categories.value = 'All'
|
||||
gender.value = 'All'
|
||||
categories.value = ['']
|
||||
gender.value = ['']
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user