271 lines
9.3 KiB
Vue
271 lines
9.3 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="maintopBox">
|
||
<view class="mainTopRight">
|
||
<view class="distanceText">{{ sortType === 1 ? '按距离' : '按票价' }}</view>
|
||
<image class="distanceIcon" src="https://eshangtech.com/caiyunyiImg/sortIcon.png" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mainBottom">
|
||
<scroll-view scroll-y="true" class="scrollView" @scrolltolower="handleScrollBottom">
|
||
<view class="nearbyScenicItem">
|
||
<view class="nearByBottomLeftBox">
|
||
<image class="nearbyImg" src="/static/images/home/defaultIcon.png" />
|
||
</view>
|
||
<view class="nearByBottomRightBox">
|
||
<view class="scenicName">千岛湖中心湖区</view>
|
||
<view class="scenicContent">
|
||
<view class="scenicType">河流湖泊</view>
|
||
<view class="scenicRateBox">
|
||
<view class="scenicRate">
|
||
<uni-rate :size="12" :value="4.6" :touchable="false" active-color="#FF8E00"
|
||
color="#D8D8DA" />
|
||
</view>
|
||
<view class="scenicRateText">4.6</view>
|
||
</view>
|
||
</view>
|
||
<view class="scenicBottom">
|
||
<view class="scenicLeft">
|
||
<image class="scenicIcon" src="https://eshangtech.com/caiyunyiImg/fixedIcon.png" />
|
||
<view class="scenicLabel">距离12km</view>
|
||
</view>
|
||
<view class="scenicRight">
|
||
<view class="scenicRightLabel">门票</view>
|
||
<view class="scenicUnit">¥</view>
|
||
<view class="scenicPrice">185</view>
|
||
<view class="scenicUnit">起</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
sortType: 1,// 1:按距离，2:按票价
|
||
dataList: [],// 表单数据
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.handleGetData();
|
||
},
|
||
methods: {
|
||
handleGetData() {
|
||
|
||
},
|
||
handleChangeSortType() {
|
||
// 这里可以添加排序逻辑
|
||
if (this.sortType === 1) {
|
||
this.sortType = 2;
|
||
} else if (this.sortType === 2) {
|
||
this.sortType = 1;
|
||
}
|
||
},
|
||
// 滑动到底部
|
||
handleScrollBottom() {
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.main {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: #F5F5F5;
|
||
box-sizing: border-box;
|
||
padding: 24rpx 30rpx;
|
||
|
||
.maintopBox {
|
||
width: 100%;
|
||
height: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
|
||
.mainTopRight {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.distanceText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
line-height: 34rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.distanceIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mainBottom {
|
||
width: 100%;
|
||
height: calc(100% - 40rpx - 20rpx);
|
||
margin-top: 20rpx;
|
||
|
||
.scrollView {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.nearbyScenicItem {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
border-radius: 9rpx;
|
||
padding: 16rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
.nearByBottomLeftBox {
|
||
width: 136rpx;
|
||
height: 136rpx;
|
||
box-sizing: border-box;
|
||
padding: 4rpx 0;
|
||
margin-right: 40rpx;
|
||
|
||
.nearbyImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.nearByBottomRightBox {
|
||
width: calc(100% - 176rpx);
|
||
|
||
.scenicName {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 29rpx;
|
||
color: #222222;
|
||
line-height: 42rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
width: 100%;
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.scenicContent {
|
||
width: 100%;
|
||
margin-top: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.scenicType {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #3D7FFF;
|
||
line-height: 32rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
padding: 4rpx 16rpx;
|
||
background: rgba(61, 127, 255, 0.1);
|
||
border-radius: 6rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.scenicRateBox {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.scenicRate {}
|
||
|
||
.scenicRateText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: rgba(0, 0, 0, 0.6);
|
||
line-height: 28rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.scenicBottom {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
|
||
.scenicLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.scenicIcon {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
|
||
.scenicLabel {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: rgba(0, 0, 0, 0.6);
|
||
line-height: 28rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.scenicRight {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
|
||
.scenicRightLabel {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: rgba(0, 0, 0, 0.6);
|
||
line-height: 28rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.scenicUnit {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #F13216;
|
||
line-height: 28rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.scenicPrice {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
color: #F13216;
|
||
line-height: 40rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |