解决不能进入后台的bug

src/views/book/component/collection.vue

@@ -1,5 +1,139 @@
 <script setup lang="ts"></script>
 
-<template></template>
+<template>
+	<div class="p-outline">
+		<div class="ppcc-x">
+			<div class="img-collection"></div>
+			<div class="info-collection">进口安佳淡奶油1L动物奶油新西兰家用生日蛋糕裱花蛋挞液专用烘焙</div>
+			<div class="price-collection">
+				<span class="price-un">¥</span>
+				<span class="price-price">30</span>
+			</div>
+		</div>
+		<div class="ppcc-x"></div>
+		<div class="ppcc-x"></div>
+		<div class="ppcc-x"></div>
+		<div class="ppcc-x"></div>
+		<div class="ppcc-x"></div>
+	</div>
+</template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.search-suggest-combobox {
+	width: 100%;
+	height: 38px;
+	margin-top: 40px;
+	display: flex;
+	justify-content: center;
+
+	.input-search {
+		width: 1004px;
+		height: 38px;
+		border-radius: 8px;
+		border: 2px solid rgb(255, 80, 0);
+		align-items: center;
+		display: flex;
+		justify-content: space-between;
+		background: white;
+
+		input {
+			border: none;
+			background: none;
+			height: 38px;
+			margin-left: 30px;
+			width: 800px;
+		}
+
+		button {
+			width: 72px;
+			height: 34px;
+			border: none;
+			background: #ff6200;
+			color: #fff;
+			font-size: 16px;
+			font-weight: 700;
+			border-radius: 4px;
+			margin-right: 5px;
+		}
+	}
+}
+
+.p-outline {
+	background: #fff;
+	width: 1552px;
+	margin: 30px auto;
+	border-radius: 18px;
+	padding-top: 16px;
+	padding-bottom: 24px;
+	min-height: 300px;
+	display: flex; /* 添加此行启用Flex布局 */
+	flex-wrap: wrap; /* 允许Flex子项目换行 */
+	box-sizing: border-box; /* 确保padding计算在总宽内 */
+}
+
+.ppcc-x {
+	border-radius: 12px;
+	border: 1px solid transparent;
+	box-sizing: border-box;
+	cursor: pointer;
+	margin: 16px 0 16px 16px; /* 调整上边距以适应新的换行布局 */
+	position: relative;
+	transition: all 0.5s;
+	width: 158px;
+	height: 270px;
+	padding: 5px;
+
+	.info-collection {
+		height: 48px;
+		margin-top: 8px;
+		overflow: hidden;
+		width: 96%;
+		color: #11192d;
+		display: inline-block;
+		font-size: 16px;
+		font-weight: 500;
+		line-height: 24px;
+		margin-left: 8px;
+		margin-right: 8px;
+		max-height: 48px;
+		word-break: break-all;
+	}
+}
+
+.img-collection {
+	background-image: url('https://img.alicdn.com/bao/uploaded/i1/3937219703/O1CN01FZXnRo2LY1zwkI3j0_!!3937219703-0-C2M.jpg');
+	background-position: 50%;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-color: #f3f6f8;
+	border-radius: 8px;
+	height: 148px;
+	overflow: hidden;
+	position: relative;
+	width: 148px;
+}
+
+.price-collection {
+	align-items: flex-end;
+	display: flex;
+	flex-direction: row;
+	height: 24px;
+	margin-left: 8px;
+	margin-top: 8px;
+
+	.price-un {
+		font-size: 14px;
+		line-height: 14px;
+		margin-bottom: 1px;
+		margin-right: 2px;
+		color: #ff5500;
+	}
+
+	.price-price {
+		font-size: 24px;
+		font-weight: 700;
+		line-height: 24px;
+		color: #ff5500;
+	}
+}
+</style>

src/views/book/index.vue

@@ -7,7 +7,6 @@ const router = useRouter()
 const changeValue = ref('/book/index')
 
 const changeRouters = () => {
-	debugger
 	if (changeValue.value == '/book/my') {
 		changeValue.value = '/book/index'
 	} else if (changeValue.value == '/book/index') {
@@ -39,6 +38,9 @@ const changeRouters = () => {
 						</el-icon>
 						收藏夹
 					</li>
+					<li @click="router.push('/login')">
+						<el-icon><Setting /></el-icon>书城管理后台
+					</li>
 				</ul>
 			</div>
 		</div>