aida_front/src/views/SellerDashboard/BrandProfile/index.vue

<template>
	<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 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">
	.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>