aidlab/Aida_Purchaser_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

brand页面交互调整

Browse Source
This commit is contained in:
X1627315083@163.com
2026-05-11 16:16:59 +08:00
parent 87b071c319
commit b8c844363c
19 changed files with 624 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/views/brandDetail/merchant-info.vue Normal file
View File

@@ -0,0 +1,129 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
//const props = defineProps({
//})
//const emit = defineEmits([
//])
let data = reactive({
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
<div class="merchantInfo">
<div class="profile">
<img src="@/assets/images/collectionStory/Rectangle.png" alt="">
</div>
<div class="info">
<div class="detail">
<div class="name">Lian Su</div>
<div class="title">Roaming Clouds</div>
</div>
<div class="contact">
<div class="title">Contact</div>
<div class="email label">
<div class="icon">
<svg-icon name="brand-email" size="24" />
</div>
<div>lian.su@urieworweoo.com</div>
</div>
<div class="phone label">
<div class="icon">
<svg-icon name="brand-call" size="24" />
</div>
<div>+86 139 4829 7710</div>
</div>
<div class="address label">
<div class="icon">
<svg-icon name="brand-link" size="24" />
</div>
<div>746312432</div>
</div>
<div class="website label">
<div class="icon">
<svg-icon name="brand-link" size="24" />
</div>
<div>https://urieworweoo.com</div>
</div>
</div>
<div class="about">
<div class="title">About</div>
<div class="content">Lian Su’s work weaves understated ethnic influences into contemporary minimalism. She explores materials and silhouettes that bridge heritage and modern sensibilities. Her designs reflect a quiet dialogue between cultural memory and forward-looking innovation.</div>
</div>
</div>
</div>
</template>
<style lang="less" scoped>
.merchantInfo{
width: 100%;
height: auto;
position: relative;
padding-top: 4rem;
padding-bottom: 4rem;
.profile{
width: 20rem;
height: 20rem;
margin-left: 1.8rem;
>img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.info{
display: flex;
flex-direction: column;
gap: 6rem;
margin-top: 4rem;
.title{
font-family: "KaiseiOpti-Bold";
font-weight: 700;
font-size: 3.4rem;
line-height: 3.6rem;
}
> .detail{
.name{
margin-bottom: .8rem;
font-weight: 500;
font-size: 1.8rem;
line-height: 100%;
color: #232323;
}
}
> .contact{
.title{
margin-bottom: 2rem;
}
.label{
display: flex;
gap: 2rem;
margin-bottom: .6rem;
font-family: "KaiseiOpti-Regular";
font-weight: 400;
font-size: 1.4rem;
line-height: 100%;
color: #585858;
&:last-child{
margin-bottom: 0;
}
}
}
> .about{
.title{
margin-bottom: 2rem;
}
.content{
font-family: "KaiseiOpti-Regular";
font-weight: 400;
font-size: 1.6rem;
line-height: 2.3rem;
color: #585858;
}
}
}
}
</style>