Skip to content

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

团购首页

parent e020eb5c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 291 additions and 2 deletions
src/Components/index/FoodDetails.vue 0 → 100644
View file @ 3ed46f29
<template>
<view class="card" v-for="(item, index) in cardData" :key="index">
<image class="img" src="../../static/index/test1.png" mode="widthFix" />
<view class="right">
<text class="text">王将速食超市（可店内用餐）</text>
<view class="twoBxo">
<text class="one-text">5.0推荐</text>
<text class="two-text">￥30/人</text>
<text class="three-text">销量1265</text>
<text class="four-text">1.2km</text>
</view>
<view class="threeBox">
<image class="img2" src="../../static/index/test2.png" mode="widthFix" />
<text class="one-text">“味道浓郁，食材新鲜，童年的老味道”</text>
</view>
<view class="labelBox">
<view>卤味爱好者最佳选择</view>
<view>免费wifi</view>
<view>服务态度很好</view>
</view>
<view class="groupPurchasePrice">
<image class="img" src="../../static/index/groupBuying.png" mode="widthFix" />
<text class="one-text">￥19</text>
<view class="two-text">7.8折</view>
<text class="three-text">￥29.8</text>
<text class="four-text">深夜加班续命套餐</text>
</view>
<view class="groupPurchasePrice">
<image class="img" src="../../static/index/groupBuying.png" mode="widthFix" />
<text class="one-text">￥39</text>
<view class="two-text">8.8折</view>
<text class="three-text">￥59.8</text>
<text class="four-text">游戏通宵补血套餐</text>
</view>
</view>
</view>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
cardData: {
type: Array,
},
});
</script>
<style lang="scss" scoped>
.card {
width: 710rpx;
height: 316rpx;
border-radius: 0rpx 0rpx 16rpx 16rpx;
background: #fdfdfd;
margin: 0 auto;
margin-bottom: 2rpx;
display: flex;
padding: 22rpx 0;
padding-left: 20rpx;
box-sizing: border-box;
.img {
width: 144rpx;
}
.right {
margin-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.text {
font-size: 28rpx;
font-weight: bold;
color: #3d3d3d;
}
.twoBxo {
display: flex;
align-items: center;
.one-text {
font-size: 22rpx;
font-weight: bold;
color: #ff5353;
}
.two-text {
font-size: 20rpx;
color: #abaaaa;
font-weight: 500;
margin-left: 20rpx;
}
.three-text {
font-size: 20rpx;
color: #abaaaa;
font-weight: 500;
margin-left: 8rpx;
}
.four-text {
font-size: 20rpx;
color: #908f8f;
font-weight: 500;
margin-left: 182rpx;
}
}
.threeBox {
display: flex;
align-items: center;
.img2 {
width: 40rpx;
}
.one-text {
font-size: 22rpx;
color: #3d3d3d;
font-weight: 500;
margin-left: 8rpx;
}
}
.labelBox {
display: flex;
align-items: center;
view {
margin-right: 8rpx;
display: inline-block;
height: 36rpx;
padding: 0 8rpx;
line-height: 36rpx;
font-size: 18rpx;
color: #abaaaa;
background-color: rgba(243, 243, 243, 1);
}
}
.groupPurchasePrice {
display: flex;
align-items: center;
.img {
width: 32rpx;
}
.one-text {
font-size: 28rpx;
font-weight: 500;
color: #fa5151;
}
.two-text {
margin-left: 4rpx;
display: inline-block;
height: 24rpx;
padding: 0 8rpx;
line-height: 24rpx;
font-size: 18rpx;
color: #fa5151;
background: #fcdbdb;
}
.three-text {
margin-left: 4rpx;
font-size: 20rpx;
color: #abaaaa;
font-weight: 300;
text-decoration: line-through;
}
.four-text {
margin-left: 4rpx;
font-size: 22rpx;
color: #3d3d3d;
}
}
}
}
</style>
src/Components/index/ShopCard.vue 0 → 100644
View file @ 3ed46f29
<template>
<view class="card">
<view class="head">
<view class="containerBox">
<image class="img" src="../../static/index/test1.png" mode="widthFix" />
<view class="right">
<text class="text">老门框卤煮总店（百年老店）</text>
<view class="twoBxo">
<text class="one-text">5.0推荐</text>
<text class="two-text">￥30/人</text>
<text class="three-text">销量1265</text>
<text class="four-text">1.2km</text>
</view>
<view class="threeBox">
<image class="img2" src="../../static/index/test2.png" mode="widthFix" />
<text class="one-text">“味道浓郁，食材新鲜，童年的老味道”</text>
</view>
<view class="labelBox">
<view>卤味爱好者最佳选择</view>
<view>免费wifi</view>
<view>服务态度很好</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import {} from 'vue';
</script>
<style lang="scss" scoped>
.card {
width: 710rpx;
height: 536rpx;
border-radius: 16rpx;
background: #fdfdfd;
margin: 0 auto;
margin-top: 10rpx;
.head {
width: 100%;
height: 200rpx;
background: url('../../static/index/test3.png') no-repeat;
background-size: 100% 100%;
position: relative;
.containerBox {
display: flex;
position: absolute;
bottom: -35rpx;
left: 20rpx;
.img {
width: 144rpx;
}
.right {
margin-left: 20rpx;
display: flex;
flex-direction: column;
.text {
font-size: 28rpx;
font-weight: bold;
color: rgba(255, 255, 255, 1);
}
.twoBxo {
display: flex;
align-items: center;
margin-top: 10rpx;
.one-text {
font-size: 22rpx;
font-weight: bold;
color: #fa5151;
}
.two-text {
font-size: 20rpx;
color: #ffffff;
font-weight: 500;
margin-left: 20rpx;
}
.three-text {
font-size: 20rpx;
color: #ffffff;
font-weight: 500;
margin-left: 8rpx;
}
.four-text {
font-size: 20rpx;
color: #ffffff;
font-weight: 500;
margin-left: 182rpx;
}
}
.threeBox {
display: flex;
align-items: center;
margin-top: 10rpx;
.img2 {
width: 40rpx;
}
.one-text {
font-size: 22rpx;
color: #ffffff;
font-weight: 500;
margin-left: 8rpx;
}
}
.labelBox {
margin-top: 10rpx;
display: flex;
align-items: center;
view {
margin-right: 8rpx;
display: inline-block;
height: 36rpx;
padding: 0 8rpx;
line-height: 36rpx;
font-size: 18rpx;
color: #767676;
background: linear-gradient(90deg, #fcdbdb 0%, rgba(255, 255, 255, 0) 98%);
}
}
}
}
}
}
</style>
src/components/index/Search.vue
View file @ 3ed46f29
......@@ -3,14 +3,14 @@
<image
@tap="test2"
class="arrow"
src="../../static/arrow.png"
src="../../static/index/arrow.png"
mode="aspectFit|aspectFill|widthFix"
/>
<slot></slot>
<view class="searchBox">
<image
class="magnifyingGlass"
src="../../static/magnifyingGlass.png"
src="../../static/index/magnifyingGlass.png"
mode="aspectFit|aspectFill|widthFix"
/>
<input type="text" :value="test" class="text" />
......@@ -61,6 +61,7 @@ function onHandleClick() {
display: flex;
align-items: center;
padding-left: 20rpx;
box-sizing: border-box;
.arrow {
width: 15rpx;
height: 24rpx;
......
src/pages/index/index.vue
View file @ 3ed46f29
This diff is collapsed.
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