Skip to content

B
buildingAgricultureSharing-miniapp
Commit 2535daaf authored by 张娇（东信）'s avatar 张娇（东信）
Browse files
Options

乡村旅居首页

parent 7bc2a2ed
Hide whitespace changes
Inline Side-by-side
Showing with 444 additions and 3 deletions
src/pages.json
View file @ 2535daaf
...@@ -54,6 +54,12 @@ ...@@ -54,6 +54,12 @@
"navigationBarBackgroundColor": "#ffffff", "navigationBarBackgroundColor": "#ffffff",
"navigationStyle":"" "navigationStyle":""
} }
},
{
"path": "pages/RuralTravel/RuralTravel",
"style": {
"navigationBarTitleText": "乡村旅居"
}
} }
], ],
"globalStyle": { "globalStyle": {
......
src/pages/RuralTravel/RuralTravel.vue 0 → 100644
View file @ 2535daaf
<template>
<view>
<view class="container">
<OtherSearch background="rgba(255, 255, 255, 0.8)" backIcon="black"></OtherSearch>
<view class="bac-img">
<img class="bac" src="/static/rural/bacImg.png" style="width: 750rpx; height: 440rpx" />
</view>
<view style="display: flex; flex-direction: row">
<view class="left-offer">
<text class="left-title">特价专区</text>
<img
class="special-icon"
src="/static/rural/specialOffer.png"
style="width: 29rpx; height: 25rpx"
/>
<img class="spe-img" src="/static/rural/img7.png" style="width: 306rpx; height: 204rpx" />
</view>
<view class="right-offer">
<text class="left-title">日游直播</text>
<img
class="special-icon"
src="/static/rural/dayTOur.png"
style="width: 32rpx; height: 32rpx"
/>
<img class="spe-img" src="/static/rural/img5.png" style="width: 306rpx; height: 204rpx" />
</view>
</view>
<view class="hot-way">
<view class="hot-title">热门路线</view>
<view class="title-des">/ 玩转当地超值体验</view>
<scroll-view
class="scroll-x"
show-scrollbar="false"
scroll-x
:scroll-with-animation="true"
@scroll="scroll"
>
<view class="foodCard" v-for="(item, index) in 5" :key="index">
<!-- <img-->
<!-- class="img-icon"-->
<!-- src="/static/rural/icon.png"-->
<!-- style="width: 118rpx; height: 32rpx"-->
<!-- />-->
<image class="test5" src="/static/rural/img4.png" mode="widthFix" />
</view>
</scroll-view>
<view class="bootom">
<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>
<view class="bootom-top">
<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>
<view class="bootom-top">
<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>
<view class="bootom-top">
<view class="option" @tap="locationFiltering(3)">
<text :class="{ rotate: rotate4 }">筛选</text>
<wd-icon
:class="{ rotate: rotate4 }"
name="fill-arrow-down"
size="24rpx"
class="icon"
></wd-icon>
</view>
</view>
</view>
<view class="list-card">
<view class="card-detail" v-for="(item, index) in cardList" :key="index">
<img class="card-img" :src="item.img" style="width: 248rpx; height: 240rpx" />
<view class="detail-text">
<text class="detail-title">{{ item.title }}</text>
<text class="give">{{ item.give }}</text>
<view class="tag">
<wd-tag
bg-color="#EEEEEE"
round
v-for="(tag, tagIndex) in item.tag"
:key="tagIndex"
>
{{ tag }}
</wd-tag>
</view>
<view class="detail-score">
<text class="score">{{ item.score }}分</text>
<text class="num">月销{{ item.num }}</text>
</view>
<view class="venue">
<text class="place">{{ item.place }}</text>
<text class="price">￥{{ item.price }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import OtherSearch from '../../components/index/OtherSearch.vue';
const rotate = ref(false);
const rotate2 = ref(false);
const rotate3 = ref(false);
const rotate4 = ref(false);
const cardList = ref([
{
img: '/static/rural/img2.png',
title: '红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游',
give: '赠价值59元特产伴手礼一份',
tag: ['可定明日', '无购物', '含保险'],
score: '4.9',
num: '2000',
place: '云岩出发',
price: '299.00',
},
{
img: '/static/rural/img2.png',
title: '红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游',
give: '赠价值59元特产伴手礼一份',
tag: ['可定明日', '无购物', '含保险'],
score: '4.9',
num: '2000',
place: '云岩出发',
price: '299.00',
},
{
img: '/static/rural/img2.png',
title: '红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游',
give: '赠价值59元特产伴手礼一份',
tag: ['可定明日', '无购物', '含保险'],
score: '4.9',
num: '2000',
place: '云岩出发',
price: '299.00',
},
{
img: '/static/rural/img2.png',
title: '红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游',
give: '赠价值59元特产伴手礼一份',
tag: ['可定明日', '无购物', '含保险'],
score: '4.9',
num: '2000',
place: '云岩出发',
price: '299.00',
},
]);
const locationFiltering = (index) => {
switch (index) {
case 0:
rotate.value = !rotate.value;
rotate2.value = false;
rotate3.value = false;
rotate4.value = false;
break;
case 1:
rotate2.value = !rotate2.value;
rotate.value = false;
rotate3.value = false;
rotate4.value = false;
break;
case 2:
rotate3.value = !rotate3.value;
rotate.value = false;
rotate2.value = false;
rotate4.value = false;
break;
case 3:
rotate4.value = !rotate4.value;
rotate.value = false;
rotate2.value = false;
rotate3.value = false;
break;
}
};
</script>
<style lang="scss" scoped>
page {
background-color: #f3f3f3;
}
.container {
position: relative;
left: 0rpx;
top: 0rpx;
width: 750rpx;
height: 440rpx;
}
.bac {
display: flex;
margin-top: -80rpx;
}
.left-offer {
width: 346rpx;
height: 292rpx;
border-radius: 16rpx;
background: linear-gradient(179deg, #f9e3b1 0%, #ffffff 28%);
margin-left: 20rpx;
margin-top: 20rpx;
}
.right-offer {
width: 346rpx;
height: 292rpx;
border-radius: 16rpx;
background: linear-gradient(175deg, #ffd5c4 1%, #ffffff 28%);
margin-left: 20rpx;
margin-top: 20rpx;
}
.left-title {
width: 128rpx;
height: 28rpx;
font-family: Source Han Sans;
font-size: 32rpx;
font-weight: 500;
line-height: 28rpx;
text-align: center;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #3d3d3d;
margin-left: 20rpx;
margin-top: 20rpx;
position: absolute;
}
.special-icon {
margin-left: 150rpx;
margin-top: 20rpx;
}
.spe-img {
margin-top: 14rpx;
margin-left: 20rpx;
}
.hot-way {
width: 710rpx;
height: 1156rpx;
border-radius: 16rpx;
background: #ffffff;
margin-top: 20rpx;
margin-left: 20rpx;
}
.scroll-x {
width: 100%;
border-radius: 0rpx 0rpx 0rpx 0rpx;
overflow: hidden;
padding-top: 26rpx;
white-space: nowrap;
width: 100%;
::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
background-color: transparent;
.foodCard {
width: 270rpx;
height: 168rpx;
border-radius: 16rpx;
margin-left: 20rpx;
display: inline-block;
box-sizing: border-box;
overflow: hidden;
.test5 {
width: 100%;
}
}
}
.hot-title,
.title-des {
width: 336rpx;
height: 28rpx;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
font-weight: 400;
}
.hot-title {
font-size: 32rpx;
line-height: 28rpx;
letter-spacing: 0em;
color: #3d3d3d;
padding-top: 20rpx;
padding-left: 20rpx;
}
.title-des {
font-size: 22rpx;
color: #767676;
margin-top: -24rpx;
margin-left: 160rpx;
}
.bootom {
display: flex;
flex-direction: row;
justify-content: space-around;
border-radius: 6rpx;
background: #ffffff;
position: relative;
margin-top: 20rpx;
.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;
}
}
.light {
color: #ff7c00;
background: #ffdcbb;
}
}
}
.list-card {
width: 710rpx;
height: 240rpx;
}
.card-img {
margin-top: 20rpx;
margin-left: 40rpx;
}
.card-detail {
display: flex;
}
.detail-text {
margin-top: 20rpx;
margin-left: 20rpx;
display: flex;
flex-direction: column;
width: 380rpx;
}
.detail-title,
.give,
.score,
.num,
.place,
.price {
font-family: Source Han Sans;
line-height: normal;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
}
.detail-title {
font-size: 28rpx;
font-weight: 500;
letter-spacing: 0em;
color: #3d3d3d;
}
.give {
font-size: 22rpx;
font-weight: normal;
line-height: 30rpx;
color: #666666;
}
.tag .wd-tag {
margin-right: 10px;
margin-bottom: 5px;
}
.score,
.num,
.place {
font-size: 24rpx;
font-weight: 500;
line-height: 28rpx;
color: #0974f5;
}
.price {
font-size: 28rpx;
font-weight: bold;
line-height: 28rpx;
color: #fa5151;
}
.venue {
display: flex;
justify-content: space-between;
}
.score {
margin-right: 40rpx;
}
::v-deep .wd-tag__text {
font-size: 20rpx;
margin-top: 4rpx;
}
.tag {
margin-top: 10rpx;
width: 400rpx;
}
</style>
src/pages/index/index.vue
View file @ 2535daaf
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<img src="/static/assets/adoption.png" style="width: 96rpx; height: 96rpx" /> <img src="/static/assets/adoption.png" style="width: 96rpx; height: 96rpx" />
<view class="sort-text">认养农业</view> <view class="sort-text">认养农业</view>
</view> </view>
<view class="borderClass"> <view class="borderClass" @tap="toRuralTravel">
<img src="/static/assets/rural.png" style="width: 96rpx; height: 96rpx" /> <img src="/static/assets/rural.png" style="width: 96rpx; height: 96rpx" />
<view class="sort-text">乡村旅居</view> <view class="sort-text">乡村旅居</view>
</view> </view>
...@@ -157,9 +157,15 @@ function toBuilding() { ...@@ -157,9 +157,15 @@ function toBuilding() {
url: '/pages/index/building', url: '/pages/index/building',
}); });
} }
function toRuralTravel() {
// TODO: 跳转到乡村旅居
xma.navigateTo({
url: '/pages/RuralTravel/RuralTravel',
});
}
// 跳转详情页 // 跳转详情页
function toDetail() { function toDetail() {
// TODO: 跳转到筑农严选 // TODO: 跳转到详情页
xma.navigateTo({ xma.navigateTo({
url: '/pages/detail/detail', url: '/pages/detail/detail',
}); });
......
src/pages/index/presale.vue
View file @ 2535daaf
...@@ -145,7 +145,7 @@ import { ref } from 'vue'; ...@@ -145,7 +145,7 @@ import { ref } from 'vue';
const current = ref(0); const current = ref(0);
const light = ref(0); const light = ref(0);
const sortList = ref([ const sortList = ref([
{ img: '/static/presale/img1.png', price: '25', text: '应季好物' }, { img: '/static/presale/bacImg.png', price: '25', text: '应季好物' },
{ img: '/static/presale/img2.png', price: '25', text: '猪肉蛋禽' }, { img: '/static/presale/img2.png', price: '25', text: '猪肉蛋禽' },
{ img: '/static/presale/img3.png', price: '25', text: '米面粮油' }, { img: '/static/presale/img3.png', price: '25', text: '米面粮油' },
{ img: '/static/presale/img4.png', price: '25', text: '预选蔬菜' }, { img: '/static/presale/img4.png', price: '25', text: '预选蔬菜' },
......
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