digitalItem页面

src/views/digitalItem/merchant-info.vue

@@ -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>