1

ui/src/components/hot/Hot1.vue

@@ -0,0 +1,95 @@
+<!--商品-->
+<template>
+	<el-row>
+		<el-col :span="24">
+			<div class="containa">
+				<el-space wrap>
+				<div v-for="(i, index) in 10" :key="i">
+
+					<el-image style="width: 232px;height: 300px" v-if="index === 0 || index === 5" src="https://img2.epetbar.com/common/upload/commonfile/2020/03/20/0104650_205628.jpg" fit="fill" />
+
+					<el-card
+						v-else
+						class="box-card"
+						@click="to()"
+						shadow="hover" >
+						<!--					图片-->
+						<el-image  src="https://img2.epetbar.com/common/upload/commonfile/2020/03/20/0104650_205628.jpg" fit="fill" />
+						<!--					标题-->
+						<div class="item-title ">澳大利亚原装进口自然馈赠Natures Gift 牛肉配方成犬粮 18kg</div>
+						<!--					价格&& 评分-->
+						<div class="price-box">
+							<span class="price-now ft16 " style="line-height: 1">¥998.00</span>
+							<span class="ft14 c999 price-old" style="line-height: 1">¥1098.00</span>
+						</div>
+					</el-card>
+				</div>
+				</el-space>
+
+			</div>
+		</el-col>
+	</el-row>
+
+</template>
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+const router = useRouter()
+// const props = defineProps({
+// 	isPage: {
+// 		type: Boolean,
+// 		default: false,
+// 	},
+// })
+
+const to = () => {
+	router.push("/front/info")
+}
+</script>
+<style scoped>
+
+.containa{
+	padding-top: 10px;
+	margin-bottom: 10px;
+}
+.box-card{
+	cursor: pointer;
+	width: 232px;
+	height: 300px
+}
+:deep(.el-image){
+	display: block;
+	width: 170px;
+	height: 180px;
+	margin: 0 auto;
+	margin-bottom: 20px;
+}
+.item-title{
+	color: #333;
+	font-size: 14px;
+	width: 164px;
+	margin: 0 auto 8px auto;
+	line-height: 1;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+.price-box{
+	text-align: center;
+	font-size: 16px;
+}
+.price-now{
+	color: #FF0000;
+	padding-right: 10px;
+}
+.ft16 {
+	font-size: 16px;
+}
+.ft14 {
+	font-size: 14px;
+}
+
+.pagination-container{
+	padding-top: 10px;
+}
+
+</style>

ui/src/pages/index.vue

@@ -17,12 +17,14 @@
 <!--	推荐商品列表-->
 	<item></item>
 
+	<hot1></hot1>
 
 </template>
 <script setup lang="ts">
 
 import Carousel from '~/components/front/carousel.vue'
 import Item from '~/components/front/item.vue'
+import Hot1 from '~/components/hot/Hot1.vue'
 </script>
 
 <style scoped>