商品首页完善

This commit is contained in:
陈淳
2022-10-25 10:59:51 +08:00
parent ac70fc37f6
commit fd9f3d04d9
4 changed files with 55 additions and 39 deletions

View File

@@ -1,42 +1,48 @@
<template>
<template >
<div class="back">
<van-row class="top-div"> <van-col span="3"><van-icon name="circle" size="2rem" /></van-col>
<van-col span="18"> <router-link to="/shopSearch"><van-cell-group inset>
<van-field label="搜索" placeholder="搜索" />
</van-cell-group> </router-link></van-col>
<van-col span="3"><van-icon name="circle" size="2rem" /></van-col></van-row>
<div class="head-div">
<van-swipe
height="100"
class="my-swipe"
:autoplay="3000"
indicator-color="white"
>
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
</van-swipe>
<div class="head-div">
<van-swipe
height="100"
class="my-swipe"
:autoplay="3000"
indicator-color="white"
>
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
</van-swipe>
</div>
<van-row class="body-row">
<van-col span="24"> <van-grid :column-num="4">
<van-grid-item
v-for="value in 8"
:key="value"
icon="photo-o"
text="文字"
/>
</van-grid> </van-col>
<van-col span="24"> <AppCard /></van-col>
<van-col span="24"></van-col>
<router-link to="/shopSearch">点击前往搜索</router-link>
<br />
<van-col span="24">
<van-grid :column-num="4">
<van-grid-item
v-for="value in 8"
:key="value"
icon="photo-o"
text="文字"
/>
</van-grid>
</van-col>
<van-col span="24"> <AppCard /></van-col>
<van-col span="24"> <AppCard /></van-col>
<van-col span="24"> <AppCard /></van-col>
</van-row>
</div>
</template>
<script setup lang="ts">
import AppCard from "@/components/AppCard.vue";
</script>
<style>
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
@@ -47,7 +53,6 @@ import AppCard from "@/components/AppCard.vue";
.body-row {
padding: 1rem;
padding-top: 0.2rem;
background-color: #f4f4f4;
margin-top: 1rem;
}
.van-swipe {
@@ -55,14 +60,20 @@ import AppCard from "@/components/AppCard.vue";
margin-left: 1rem;
margin-right: 1rem; */
}
.head-div
{
background-color: #f4f4f4;
padding: 1rem;
padding-bottom: 0;
.head-div {
padding: 1rem;
padding-bottom: 0;
}
.van-col
{
.body-row .van-col {
margin-bottom: 2rem;
}
.top-div
{
padding: 1rem;
padding-bottom: 0;
}
.back{
background-color: #f4f4f4;
}
</style>