brand页面交互调整

src/views/brand/brand-item.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+const props = defineProps({
+	item:{
+		type:Object,
+		default:()=>{},
+	},
+})
+const emit = defineEmits([
+	'viewProfile',
+])
+const viewProfile = (item) => {
+	emit('viewProfile', item)
+}
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="item">
+		<div class="left">
+			<div class="portrait">
+				<img :src="item.portrait" alt="">
+			</div>
+			<div class="info">
+				<div class="name">{{ item.name }}</div>
+				<div class="collection">
+					{{ item.collectionsName }} | 
+					{{ item?.collections?.length || 0 }} Collections
+				</div>
+				<div class="view-profile" @click="viewProfile(item)">View Profile</div>
+			</div>
+		</div>
+		<div class="right">
+			<div class="img-list">
+				<div class="img-item" v-for="itemImg in item?.collections?.slice(0,5)" :key="item.id">
+					<img :src="itemImg" alt="">
+				</div>
+			</div>
+			<div class="more">
+				<div class="icon" v-show="item?.collections?.length > 5">
+					<svgIcon name="brand-more" size="24" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.item{
+		display: flex;
+		width: 100%;
+		height: 14rem;
+		justify-content: space-between;
+		border-bottom: 0.5px solid #C4C4C4;
+		> .left{
+			display: flex;
+			.portrait{
+				width: 8rem;
+				height: 8rem;
+				margin-right: 2.4rem;
+				> img{
+					width: 100%;
+					height: 100%;
+					object-fit: cover;
+				}
+			}
+			.info{
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				> .name{
+					font-family: "KaiseiOpti-Bold";
+					font-weight: 700;
+					font-size: 2rem;
+					line-height: 100%;
+				}
+				> .collection{
+					color: #7B7B7B;
+					font-family: "KaiseiOpti-Regular";
+					font-weight: 400;
+					font-size: 1.2rem;
+					line-height: 2.3rem;
+					margin-top: .4rem;
+				}
+				> .view-profile{
+					margin-top: 2.4rem;
+					border-bottom: 2px solid #585858;
+					background: #F9F9F9;
+					font-family: "KaiseiOpti-Regular";
+					font-weight: 400;
+					font-size: 1.4rem;
+					letter-spacing: -0.4px;
+					line-height: 3.4rem;
+					padding: 0 2.55rem;
+					cursor: pointer;
+				}
+			}
+		}
+		> .right{
+			display: flex;
+			> .img-list{
+				display: flex;
+				gap: 3.2rem;
+				> .img-item{
+					width: 9.2rem;
+					height: 12rem;
+					img{
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
+				}
+			}
+			> .more{
+				width: 8rem;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+	}
+</style>