digitalItem页面
This commit is contained in:
X1627315083@163.com
115
src/views/digitalItem/commodity-list.vue
Normal file
115
src/views/digitalItem/commodity-list.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import img from "@/assets/images/collectionStory/Rectangle.png";
|
||||
//const props = defineProps({
|
||||
//})
|
||||
const emit = defineEmits([
|
||||
'addShopping'
|
||||
])
|
||||
let data = reactive({
|
||||
})
|
||||
const list = ref([
|
||||
{
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},{
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},{
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},{
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},{
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},{
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},{
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},{
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},
|
||||
])
|
||||
const type = ref('All')
|
||||
const addShopping = (item) => {
|
||||
emit('addShopping', item)
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="commodityList">
|
||||
<div class="list">
|
||||
<div class="item" v-for="item in list" :key="item.url">
|
||||
<CommodityItem :url="item.url" :name="item.title" :price="item.price" @addShopping="addShopping(item)"></CommodityItem>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.commodityList{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.list{
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
overflow-y: auto;
|
||||
/* 垂直线（右边框） */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
101
src/views/digitalItem/index.vue
Normal file
101
src/views/digitalItem/index.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import CommodityList from "./commodity-list.vue";
|
||||
import MerchantInfo from "./merchant-info.vue";
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
const addShopping = (item) => {}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="digitalItem">
|
||||
<div class="header-img">
|
||||
<img src="@/assets/images/digitalItem/digital_item_banner.png" alt="">
|
||||
<div class="text">
|
||||
<div class="title">Digital Item</div>
|
||||
<p class="info">Virtual fashion creations collected in your personal archive</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="merchant-info">
|
||||
<MerchantInfo></MerchantInfo>
|
||||
</div>
|
||||
<div class="commodity-list">
|
||||
<CommodityList @addShopping="addShopping"></CommodityList>
|
||||
</div>
|
||||
</div>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.digitalItem{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
.header-img{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
>img{
|
||||
width: 100%;
|
||||
}
|
||||
> .text{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
> .title{
|
||||
font-family: KaiseiOpti-Bold;
|
||||
color: #232323;
|
||||
font-weight: 700;
|
||||
font-size: 4rem;
|
||||
line-height: 2.3rem;
|
||||
letter-spacing: 0%;
|
||||
text-align: center;
|
||||
}
|
||||
> .info{
|
||||
font-family: KaiseiOpti-Regular;
|
||||
color: #585858;
|
||||
font-size: 1.6rem;
|
||||
line-height: 140%;
|
||||
margin-top: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
height: var(--app-view-height);
|
||||
overflow-y: auto;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
&::-webkit-scrollbar{
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
.commodity-list{
|
||||
flex: 1;
|
||||
border-left: 0.5px solid #585858;
|
||||
border-right: 0.5px solid #585858;
|
||||
margin-right: 9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
135
src/views/digitalItem/merchant-info.vue
Normal file
135
src/views/digitalItem/merchant-info.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
const categoriesList = ref([
|
||||
{
|
||||
label: 'All',
|
||||
value: 'All'
|
||||
},
|
||||
{
|
||||
label: 'Outwear',
|
||||
value: 'Outwear'
|
||||
},
|
||||
{
|
||||
label: 'Dress',
|
||||
value: 'Dress'
|
||||
},
|
||||
{
|
||||
label: 'Trousers',
|
||||
value: 'Trousers'
|
||||
},
|
||||
{
|
||||
label: 'Blouse',
|
||||
value: 'Blouse'
|
||||
},
|
||||
{
|
||||
label: 'Skirt',
|
||||
value: 'Skirt'
|
||||
},
|
||||
{
|
||||
label: 'Accessories',
|
||||
value: 'Accessories'
|
||||
},
|
||||
]);
|
||||
const genderList = ref([
|
||||
{
|
||||
label: 'All',
|
||||
value: 'All'
|
||||
},
|
||||
{
|
||||
label: 'Male',
|
||||
value: 'Male'
|
||||
},
|
||||
{
|
||||
label: 'Female',
|
||||
value: 'Female'
|
||||
},
|
||||
])
|
||||
const categories = ref('All')
|
||||
const gender = ref('All')
|
||||
|
||||
const clearFilters = () => {
|
||||
categories.value = 'All'
|
||||
gender.value = 'All'
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="filters">
|
||||
<div class="title">
|
||||
<div class="left">Filters</div>
|
||||
<div class="right" @click="clearFilters">Clear</div>
|
||||
</div>
|
||||
<div class="categories">Categories</div>
|
||||
<div class="line"></div>
|
||||
<div class="multiple">
|
||||
<checked :list="categoriesList" v-model:selected="categories" />
|
||||
</div>
|
||||
<div class="categories">Gender</div>
|
||||
<div class="line"></div>
|
||||
<div class="multiple">
|
||||
<checked :list="genderList" v-model:selected="gender" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.filters{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
.title{
|
||||
margin-bottom: 3rem;
|
||||
display: flex;
|
||||
padding: 0 1.2rem;
|
||||
.left{
|
||||
margin-right: 12.2rem;
|
||||
font-family: "KaiseiOpti-Bold";
|
||||
font-weight: 700;
|
||||
font-size: 2.4rem;
|
||||
line-height: 3.5rem;
|
||||
color: #232323;
|
||||
}
|
||||
.right{
|
||||
text-decoration: underline;
|
||||
font-family: "KaiseiOpti-Regular";
|
||||
font-weight: 400;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
letter-spacing: -0.48px;
|
||||
text-align: right;
|
||||
color: #979797;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.categories{
|
||||
font-family: "KaiseiOpti-Bold";
|
||||
font-weight: 700;
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.3rem;
|
||||
color: #585858;
|
||||
margin-bottom: 1.1rem;
|
||||
padding: 0 1.2rem;
|
||||
}
|
||||
.line{
|
||||
border-top: 0.5px solid #C4C4C4;
|
||||
width: 27.1rem;
|
||||
margin-bottom: 2.2rem;
|
||||
}
|
||||
.multiple{
|
||||
padding: 0 2.3rem;
|
||||
margin-bottom: 2.9rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user