Skip to content

G
groupPurchase-miniapp
Commit 30526075 authored by 陈宗胤（贵阳日报）'s avatar 陈宗胤（贵阳日报）
Browse files
Options

样式调整

parent 1619d667
Hide whitespace changes
Inline Side-by-side
Showing with 115 additions and 109 deletions
src/Components/index/ShopCard.vue
View file @ 30526075
......@@ -159,6 +159,7 @@ const topFoodDetails = (id) => {
margin-top: 10rpx;
display: flex;
align-items: center;
flex-wrap: wrap;
view {
margin-right: 8rpx;
display: inline-block;
......@@ -168,6 +169,8 @@ const topFoodDetails = (id) => {
font-size: 18rpx;
color: #767676;
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 @ 30526075
......@@ -7,40 +7,40 @@
:title="title"
:showTitle="true"
></search>
<view class="head">
<view class="top" :style="{ backgroundImage: topBg }"></view>
<view class="bootom" :style="{ top }">
<view class="bootom-top">
<view class="option" @tap="locationFiltering(0)">
<text :class="{ rotate: rotate }">全部烧烤烤肉</text>
<wd-icon
:class="{ rotate: rotate }"
name="fill-arrow-down"
size="24rpx"
class="icon"
></wd-icon>
</view>
<view class="option" @tap="locationFiltering(1)">
<text :class="{ rotate: rotate2 }">附近</text>
<wd-icon
:class="{ rotate: rotate2 }"
name="fill-arrow-down"
size="24rpx"
class="icon"
></wd-icon>
</view>
<view class="option" @tap="locationFiltering(2)">
<text :class="{ rotate: rotate3 }">智能排序</text>
<wd-icon
:class="{ rotate: rotate3 }"
name="fill-arrow-down"
size="24rpx"
class="icon"
></wd-icon>
</view>
<!-- <view class="head"> -->
<view class="top" :style="{ backgroundImage: topBg }"></view>
<view class="bootom" :style="{ top }">
<view class="bootom-top">
<view class="option" @tap="locationFiltering(0)">
<text :class="{ rotate: rotate }">全部烧烤烤肉</text>
<wd-icon
:class="{ rotate: rotate }"
name="fill-arrow-down"
size="24rpx"
class="icon"
></wd-icon>
</view>
<view class="option" @tap="locationFiltering(1)">
<text :class="{ rotate: rotate2 }">附近</text>
<wd-icon
:class="{ rotate: rotate2 }"
name="fill-arrow-down"
size="24rpx"
class="icon"
></wd-icon>
</view>
<view class="option" @tap="locationFiltering(2)">
<text :class="{ rotate: rotate3 }">智能排序</text>
<wd-icon
:class="{ rotate: rotate3 }"
name="fill-arrow-down"
size="24rpx"
class="icon"
></wd-icon>
</view>
<!-- 标签 -->
<!-- <view class="bootom-bottom">
</view>
<!-- 标签 -->
<!-- <view class="bootom-bottom">
<view
@tap="choice(index)"
class="item"
......@@ -51,20 +51,20 @@
{{ item }}
</view>
</view> -->
<!-- 美食类别 -->
<Classification v-show="rotate" :category="categoryData" @foodCategory="foodCategory" />
<!-- 附近筛选 -->
<Position
v-show="rotate2"
@nearby="nearby"
@popular="popular"
@region="region"
@refresh="refresh"
/>
<!-- 排序筛选 -->
<Sort v-show="rotate3" @sortParams="sortParams" />
</view>
<!-- 美食类别 -->
<Classification v-show="rotate" :category="categoryData" @foodCategory="foodCategory" />
<!-- 附近筛选 -->
<Position
v-show="rotate2"
@nearby="nearby"
@popular="popular"
@region="region"
@refresh="refresh"
/>
<!-- 排序筛选 -->
<Sort v-show="rotate3" @sortParams="sortParams" />
</view>
<!-- </view> -->
<FoodDetails :cardData="cardData" />
<wd-status-tip image="content" tip="暂无内容" v-if="cardData.length === 0" />
<view
......@@ -282,75 +282,78 @@ onPullDownRefresh(() => {
page {
background: #f3f3f3;
}
.head {
width: 100%;
margin-bottom: 10rpx;
// height: 480rpx;
.top {
height: 356rpx;
// background: url('../../static/index/taste.png');
background-size: 100% 100%;
.icon {
font-size: 28rpx;
margin-top: 70rpx;
margin-left: 40rpx;
color: white;
}
// .head {
// width: 100%;
// margin-bottom: 10rpx;
// height: 480rpx;
.top {
height: 356rpx;
// background: url('../../static/index/taste.png');
background-size: 100% 100%;
.icon {
font-size: 28rpx;
margin-top: 70rpx;
margin-left: 40rpx;
color: white;
}
.bootom {
// height: 124rpx;
height: 80rpx;
}
.bootom {
// 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;
flex-direction: column;
justify-content: space-around;
border-radius: 6rpx;
background: #ffffff;
position: sticky;
.bootom-top {
display: flex;
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;
}
align-items: center;
padding: 0 20rpx;
justify-content: space-between;
.option {
text {
font-size: 24rpx;
color: #343434;
}
}
.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;
.red {
color: #fa5151;
}
.icon {
color: #d8d8d8;
transform: rotate(-180deg);
transition: all 0.3s linear;
}
.light {
color: #ff7c00;
background: #ffdcbb;
.rotate {
transform: rotate(0deg);
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>
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