Skip to content

G
groupPurchase-miniapp
Commit 7626514e authored by 张娇（东信）'s avatar 张娇（东信）
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents 58c42087 7832a1d9
Hide whitespace changes
Inline Side-by-side
Showing with 115 additions and 109 deletions
src/Components/index/ShopCard.vue
View file @ 7626514e
...@@ -159,6 +159,7 @@ const topFoodDetails = (id) => { ...@@ -159,6 +159,7 @@ const topFoodDetails = (id) => {
margin-top: 10rpx; margin-top: 10rpx;
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap;
view { view {
margin-right: 8rpx; margin-right: 8rpx;
display: inline-block; display: inline-block;
...@@ -168,6 +169,8 @@ const topFoodDetails = (id) => { ...@@ -168,6 +169,8 @@ const topFoodDetails = (id) => {
font-size: 18rpx; font-size: 18rpx;
color: #767676; color: #767676;
background: linear-gradient(90deg, #fcdbdb 0%, rgba(255, 255, 255, 0) 98%); background: linear-gradient(90deg, #fcdbdb 0%, rgba(255, 255, 255, 0) 98%);
margin-bottom: 5rpx;
flex-shrink: 0;
} }
} }
} }
......
src/pages/index/listFood.vue
View file @ 7626514e
...@@ -7,40 +7,40 @@ ...@@ -7,40 +7,40 @@
:title="title" :title="title"
:showTitle="true" :showTitle="true"
></search> ></search>
<view class="head"> <!-- <view class="head"> -->
<view class="top" :style="{ backgroundImage: topBg }"></view> <view class="top" :style="{ backgroundImage: topBg }"></view>
<view class="bootom" :style="{ top }"> <view class="bootom" :style="{ top }">
<view class="bootom-top"> <view class="bootom-top">
<view class="option" @tap="locationFiltering(0)"> <view class="option" @tap="locationFiltering(0)">
<text :class="{ rotate: rotate }">全部烧烤烤肉</text> <text :class="{ rotate: rotate }">全部烧烤烤肉</text>
<wd-icon <wd-icon
:class="{ rotate: rotate }" :class="{ rotate: rotate }"
name="fill-arrow-down" name="fill-arrow-down"
size="24rpx" size="24rpx"
class="icon" class="icon"
></wd-icon> ></wd-icon>
</view> </view>
<view class="option" @tap="locationFiltering(1)"> <view class="option" @tap="locationFiltering(1)">
<text :class="{ rotate: rotate2 }">附近</text> <text :class="{ rotate: rotate2 }">附近</text>
<wd-icon <wd-icon
:class="{ rotate: rotate2 }" :class="{ rotate: rotate2 }"
name="fill-arrow-down" name="fill-arrow-down"
size="24rpx" size="24rpx"
class="icon" class="icon"
></wd-icon> ></wd-icon>
</view> </view>
<view class="option" @tap="locationFiltering(2)"> <view class="option" @tap="locationFiltering(2)">
<text :class="{ rotate: rotate3 }">智能排序</text> <text :class="{ rotate: rotate3 }">智能排序</text>
<wd-icon <wd-icon
:class="{ rotate: rotate3 }" :class="{ rotate: rotate3 }"
name="fill-arrow-down" name="fill-arrow-down"
size="24rpx" size="24rpx"
class="icon" class="icon"
></wd-icon> ></wd-icon>
</view>
</view> </view>
<!-- 标签 --> </view>
<!-- <view class="bootom-bottom"> <!-- 标签 -->
<!-- <view class="bootom-bottom">
<view <view
@tap="choice(index)" @tap="choice(index)"
class="item" class="item"
...@@ -51,20 +51,20 @@ ...@@ -51,20 +51,20 @@
{{ item }} {{ item }}
</view> </view>
</view> --> </view> -->
<!-- 美食类别 --> <!-- 美食类别 -->
<Classification v-show="rotate" :category="categoryData" @foodCategory="foodCategory" /> <Classification v-show="rotate" :category="categoryData" @foodCategory="foodCategory" />
<!-- 附近筛选 --> <!-- 附近筛选 -->
<Position <Position
v-show="rotate2" v-show="rotate2"
@nearby="nearby" @nearby="nearby"
@popular="popular" @popular="popular"
@region="region" @region="region"
@refresh="refresh" @refresh="refresh"
/> />
<!-- 排序筛选 --> <!-- 排序筛选 -->
<Sort v-show="rotate3" @sortParams="sortParams" /> <Sort v-show="rotate3" @sortParams="sortParams" />
</view>
</view> </view>
<!-- </view> -->
<FoodDetails :cardData="cardData" /> <FoodDetails :cardData="cardData" />
<wd-status-tip image="content" tip="暂无内容" v-if="cardData.length === 0" /> <wd-status-tip image="content" tip="暂无内容" v-if="cardData.length === 0" />
<view <view
...@@ -282,75 +282,78 @@ onPullDownRefresh(() => { ...@@ -282,75 +282,78 @@ onPullDownRefresh(() => {
page { page {
background: #f3f3f3; background: #f3f3f3;
} }
.head { // .head {
width: 100%; // width: 100%;
margin-bottom: 10rpx; // margin-bottom: 10rpx;
// height: 480rpx; // height: 480rpx;
.top { .top {
height: 356rpx; height: 356rpx;
// background: url('../../static/index/taste.png'); // background: url('../../static/index/taste.png');
background-size: 100% 100%; background-size: 100% 100%;
.icon { .icon {
font-size: 28rpx; font-size: 28rpx;
margin-top: 70rpx; margin-top: 70rpx;
margin-left: 40rpx; margin-left: 40rpx;
color: white; color: white;
}
} }
.bootom { }
// height: 124rpx; .bootom {
height: 80rpx; // height: 124rpx;
height: 80rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
border-radius: 6rpx;
background: #ffffff;
position: sticky;
margin-bottom: 10rpx;
z-index: 9999;
// top: 100px;
.bootom-top {
display: flex; display: flex;
flex-direction: column; align-items: center;
justify-content: space-around; padding: 0 20rpx;
border-radius: 6rpx; justify-content: space-between;
background: #ffffff; .option {
position: sticky; text {
.bootom-top { font-size: 24rpx;
display: flex; color: #343434;
align-items: center;
padding: 0 20rpx;
justify-content: space-between;
.option {
text {
font-size: 24rpx;
color: #343434;
}
.red {
color: #fa5151;
}
.icon {
color: #d8d8d8;
transform: rotate(-180deg);
transition: all 0.3s linear;
}
.rotate {
transform: rotate(0deg);
transition: all 0.3s linear;
color: #fa5151;
}
} }
} .red {
.bootom-bottom { color: #fa5151;
display: flex; }
align-items: center; .icon {
padding-left: 40rpx; color: #d8d8d8;
.item { transform: rotate(-180deg);
height: 36rpx; transition: all 0.3s linear;
width: 96rpx;
border-radius: 6rpx;
font-size: 20rpx;
text-align: center;
line-height: 36rpx;
color: #abaaaa;
background: #eeeeee;
margin-right: 20rpx;
} }
.light { .rotate {
color: #ff7c00; transform: rotate(0deg);
background: #ffdcbb; transition: all 0.3s linear;
color: #fa5151;
} }
} }
} }
.bootom-bottom {
display: flex;
align-items: center;
padding-left: 40rpx;
.item {
height: 36rpx;
width: 96rpx;
border-radius: 6rpx;
font-size: 20rpx;
text-align: center;
line-height: 36rpx;
color: #abaaaa;
background: #eeeeee;
margin-right: 20rpx;
}
.light {
color: #ff7c00;
background: #ffdcbb;
}
}
} }
// }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment