fix

src/views/collectionStory/detail/index.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import img from "@/assets/images/collectionStory/Rectangle.png";
+import coreConcept from "./coreConcept.vue";
+import inspiration from "./inspiration.vue";
+import feelingWithAiDA from "./feelingWithAiDA.vue";
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+const list = ref([
+	{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},
+])
+onMounted(()=>{
+})
+onUnmounted(()=>{
+}) 
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="detail">
+		<div class="left">
+			<div class="personal">
+				<img :src="img" alt="">
+				<div class="name">
+					<span>Lian Su</span>
+					<div class="icon">
+						<SvgIcon name="share" size="24" />
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="center">
+			<coreConcept ></coreConcept>
+			<div class="line"></div>
+			<inspiration ></inspiration>
+			<div class="line"></div>
+			<feelingWithAiDA ></feelingWithAiDA>
+		</div>
+		<div class="right">
+			
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.detail{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		display: flex;
+		> div{
+			height: 100%;
+		}
+		> .left{
+			width: 23rem;
+			padding-top: 6.3rem;
+			padding-left: 3rem;
+			> .personal{
+				display: flex;
+				flex-direction: column;
+				> img{
+					width: 10rem;
+					height: 10rem;
+					object-fit: cover;
+					margin-bottom: 1.1rem;
+				}
+				> .name{
+					display: flex;
+					gap: .4rem;
+					align-items: center;
+					> span{
+						font-family: 'KaiseiOpti-Bold';
+						font-weight: 700;
+						font-size: 1.8rem;
+						line-height: 100%;
+						vertical-align: bottom;
+					}
+				}
+			}
+			
+		}
+		> .center{
+			flex: 1;
+			border-left: 0.5px solid #585858;
+			border-right: 0.5px solid #585858;
+			overflow-y: auto;
+			height: 100%;
+			.line{
+				border: 0.5px solid #58585899;
+				width: 100%;
+			}
+			&::-webkit-scrollbar{
+				display: none;
+			}
+		}
+		> .right{
+			width: 25.4rem;
+			padding-top: 6rem;
+		}
+	}
+</style>