111

src/views/SellerDashboard/BrandProfile/index.vue

@@ -1,13 +1,112 @@
 <template>
-	<div class="brand-profile-index">brand-profile-index</div>
+	<div class="brand-profile-index">
+		<div class="header">
+			<div class="bg">
+				<img v-if="banner" :src="banner" />
+				<div v-else class="null">
+					<span class="icon"><svg-icon name="seller-picture" size="60" /></span>
+					<span class="tip">Your brand banner has not been set up yet.</span>
+				</div>
+				<button>Change Brand Banner</button>
+			</div>
+			<!-- 头像 -->
+			<div class="avatar">
+				<img v-if="avatar" :src="avatar" />
+				<div v-else class="null">
+					<svg-icon name="seller-user" size="48" />
+				</div>
+				<span class="icon">
+					<svg-icon name="seller-camera" size="24" />
+				</span>
+			</div>
+		</div>
+		<brand-info />
+	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
+	import { ref } from "vue"
+	import BrandInfo from "./brand-info.vue"
+	const banner = ref("http://118.31.39.42:3000/falls/5bd8065cbb396eb5a8ef0a142605139358734e57.png")
+	const avatar = ref("http://118.31.39.42:3000/falls/20251024140128_10355_1.jpg")
 </script>
 <style scoped lang="less">
-	.seller-dashboard-index {
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
+	.brand-profile-index {
+		flex: 1;
+		overflow-y: auto;
+		padding: 0 8rem;
+		margin: 0 7rem;
+		> .header {
+			position: relative;
+			margin-bottom: 6rem;
+			> .bg {
+				position: relative;
+				> img {
+					width: 100%;
+					height: auto;
+					border-radius: 1.2rem;
+				}
+				> .null {
+					width: 100%;
+					height: 23rem;
+					border-radius: 1.2rem;
+					border: 1px dashed #b0b0b0;
+					background: #f9f9f9;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					> .tip {
+						margin-top: 1.2rem;
+						font-family: pingfang_medium;
+						font-size: 1.6rem;
+						color: rgba(153, 153, 153, 0.6);
+					}
+				}
+				> button {
+					position: absolute;
+					bottom: 1.6rem;
+					right: 1.6rem;
+					padding: 0 2.7rem;
+					border-radius: 4rem;
+					height: 4.5rem;
+					border: none;
+					background-color: #fff;
+					box-shadow: 0.2rem 0.2rem 1.2rem 0 rgba(0, 0, 0, 0.1);
+					font-family: pingfang_medium;
+					font-size: 1.6rem;
+					cursor: pointer;
+					color: #000;
+					&:active {
+						opacity: 0.8;
+					}
+				}
+			}
+			> .avatar {
+				position: absolute;
+				left: 6rem;
+				bottom: -4rem;
+				> img,
+				> .null {
+					width: 12rem;
+					height: 12rem;
+					border-radius: 1.2rem;
+					border: 0.15rem solid #919191;
+				}
+				> .null {
+					background-color: #f2f1f1;
+				}
+				> .icon {
+					position: absolute;
+					width: 5rem;
+					height: 5rem;
+					border-radius: 50%;
+					background: rgba(146, 146, 146, 0.96);
+					right: -1.6rem;
+					bottom: -1.6rem;
+					cursor: pointer;
+				}
+			}
+		}
 	}
 </style>