Skip to content

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

首页更新

parent 5cdeb3b5
Show whitespace changes
Inline Side-by-side
Showing with 206 additions and 19 deletions
src/Components/index/Position.vue 0 → 100644
View file @ e20a5037
<template>
<view class="pop-upNotification">
<view class="left-classification">
<view @tap="choice(0)" class="option" :class="light2 === 0 ? 'light2' : ''">推荐</view>
<view @tap="choice(1)" class="option" :class="light2 === 1 ? 'light2' : ''">行政区</view>
</view>
<view class="right-details">
<text class="nearby-title">我的附近</text>
<view class="nearby-card">
<view @tap="choice2(0)" class="label" :class="light3 === 0 ? 'light3' : ''">附近</view>
<view @tap="choice2(1)" class="label" :class="light3 === 1 ? 'light3' : ''">500m</view>
<view @tap="choice2(2)" class="label" :class="light3 === 2 ? 'light3' : ''">1km</view>
<view @tap="choice2(3)" class="label" :class="light3 === 3 ? 'light3' : ''">3km</view>
<view @tap="choice2(4)" class="label" :class="light3 === 4 ? 'light3' : ''">5km</view>
<view @tap="choice2(5)" class="label" :class="light3 === 5 ? 'light3' : ''">10km</view>
</view>
<text class="nearby-title margin">热门地点</text>
<ul class="ul">
<li>花果园购物中心</li>
<li>世纪金源购物中心</li>
<li>鸿通城</li>
<li>花果园中环广场</li>
<li>万科大都会</li>
<li>喷水池</li>
<li>喷水池</li>
</ul>
</view>
</view>
</template>
<script setup>
import {} from 'vue';
const light2 = ref(0);
const light3 = ref(0);
const choice = (index) => {
light2.value = index;
};
const choice2 = (index) => {
light3.value = index;
};
</script>
<style lang="scss" scoped>
.pop-upNotification {
position: absolute;
top: 100%;
width: 710rpx;
height: 780rpx;
border-radius: 0rpx 0rpx 16rpx 16rpx;
background: #ffffff;
box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
margin: 0 auto;
z-index: 99;
display: flex;
.left-classification {
width: 176rpx;
background: #f1f1f1;
height: 100%;
.option {
text-align: center;
width: 100%;
height: 80rpx;
line-height: 80rpx;
font-size: 28rpx;
font-weight: 500;
color: #3d3d3d;
}
.light2 {
background: #fff;
color: #fa5151;
}
}
.right-details {
width: calc(100% - 176rpx);
height: 100%;
.nearby-title {
font-size: 24rpx;
color: #3d3d3d;
font-weight: 500;
font-family: Source Han Sans;
margin-left: 40rpx;
}
.margin {
display: block;
margin-top: 40rpx;
}
.nearby-card {
margin-top: 20rpx;
margin-left: 60rpx;
width: 448rpx;
height: 120rpx;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.label {
width: 136rpx;
height: 48rpx;
border-radius: 6rpx;
background: #f1f1f1;
font-size: 22rpx;
color: #abaaaa;
line-height: 48rpx;
text-align: center;
box-sizing: border-box;
}
.light3 {
background: #fcdbdb;
color: #fa5151;
}
}
.ul {
padding-left: 60rpx;
li {
list-style-type: none;
font-size: 22rpx;
color: #3d3d3d;
margin-top: 20rpx;
}
}
}
}
</style>
src/pages/index/index.vue
View file @ e20a5037
......@@ -25,16 +25,28 @@
<view class="redEnvelope">
<view class="title">今日福利</view>
<view class="box-red">
<view class="redBagBox"></view>
<view class="redBagBox"></view>
<view class="redBagBox"></view>
<view class="redBagBox"></view>
<view class="redBagBox" v-for="(item, index) in 4" :key="index">
<text class="textO">无门槛补贴</text>
<text class="textW">￥10</text>
<text class="textT">无门槛</text>
<view class="textF">领取</view>
</view>
</view>
<image class="discount" src="../../static/index/discount.png" mode="widthFix" />
</view>
<!-- 贵阳老味道 -->
<view class="guiyang"></view>
<!-- 附件美食 -->
<!-- <view class="guiyang"></view> -->
<wd-swiper
:list="swiperList"
autoplay
v-model:current="current"
@click="handleClick"
@change="onChange"
customClass="guiyang"
height="68"
imageMode="scaleToFill"
></wd-swiper>
<!-- 附近人气美食 -->
<view class="nearby">
<view class="nearby-top">
<view class="left">
......@@ -68,15 +80,22 @@
<text @tap="choice(4)" class="text" :class="light === 4 ? 'light' : ''">奶茶</text>
</view>
<view class="recommend-bottom">
<view class="box">
<view class="box" @tap="locationFiltering">
<text class="text">位置距离</text>
<wd-icon name="fill-arrow-down" size="22rpx" class="icon"></wd-icon>
<wd-icon
name="fill-arrow-down"
size="22rpx"
class="icon"
:class="rotate ? 'rotate' : ''"
></wd-icon>
</view>
<view class="box">
<text class="text2">排序筛选</text>
<wd-icon name="fill-arrow-down" size="22rpx" class="icon2"></wd-icon>
</view>
</view>
<!-- 位置定位 -->
<Position v-show="rotate" />
</view>
<!-- 美食卡片 -->
<FoodDetails :cardData="cardData" />
......@@ -98,12 +117,13 @@ import Search from '../../components/index/Search.vue';
import FoodDetails from '../../components/index/FoodDetails.vue';
import ShopCard from '../../components/index/ShopCard.vue';
import Marketing from '../../components/index/Marketing.vue';
import Position from '../../components/index/Position.vue';
const title = ref('小程序平台');
const { countInfo, addCount } = useCountStore();
onMounted(() => {});
const light = ref(0);
const rotate = ref(false);
const classificationT = reactive([
{ img: 'hotPot', text: '火锅' },
{ img: 'barbecue', text: '烧烤烤肉' },
......@@ -128,16 +148,28 @@ const cardData = reactive([
text: '测试',
},
]);
const current = ref(0);
const swiperList = ref(['../../static/index/guiyang.png', '../../static/index/guiyang.png']);
const choice = (index) => {
light.value = index;
};
function toUIComponentsDoc() {
window.open('https://wot-design-uni.netlify.app/component/button.html');
}
const locationFiltering = () => {
console.log('打印', 1111);
rotate.value = !rotate.value;
};
const handleClick = (e) => {
console.log(e);
};
const onChange = (e) => {
console.log(e);
};
// function toUIComponentsDoc() {
// window.open('https://wot-design-uni.netlify.app/component/button.html');
// }
function onHandleClick() {
addCount();
}
// function onHandleClick() {
// addCount();
// }
</script>
<style lang="scss" scoped>
......@@ -238,6 +270,35 @@ page {
height: 104rpx;
background: url('../../static/index/redBag.png') no-repeat;
background-size: 100% 100%;
display: flex;
flex-direction: column;
align-items: center;
// justify-content: space-evenly;
.textO {
font-size: 12rpx;
color: #fa5151;
margin-top: 5rpx;
}
.textW {
font-size: 24rpx;
color: #fa5151;
font-weight: 600;
font-family: Alimama FangYuanTi VF;
}
.textT {
font-size: 12rpx;
color: #fa5151;
}
.textF {
width: 56rpx;
height: 20rpx;
background: linear-gradient(180deg, #ffe7d1 0%, #ffc893 100%, #f1ba84 100%);
border-radius: 10rpx;
font-size: 12rpx;
color: #fa5151;
text-align: center;
margin-top: 10rpx;
}
}
}
.discount {
......@@ -250,11 +311,8 @@ page {
}
.guiyang {
width: 710rpx;
height: 136rpx;
margin: 0 auto;
margin-top: 10rpx;
background: url('../../static/index/guiyang.png') no-repeat;
background-size: 100% 100%;
}
.nearby {
width: 710rpx;
......@@ -345,6 +403,7 @@ page {
box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
margin: 0 auto;
margin-top: 10rpx;
position: relative;
.tabs {
padding-top: 20rpx;
.text {
......@@ -392,7 +451,12 @@ page {
color: #908f8f;
}
.icon {
// transform: rotate(180deg);
transform: rotate(-180deg);
transition: all 0.3s linear;
}
.rotate {
transform: rotate(0deg);
transition: all 0.3s linear;
}
.icon2 {
transform: rotate(180deg);
......
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