| @ -0,0 +1,146 @@ | |||
| <template> | |||
| <!-- 遗产路径 --> | |||
| <view class="heritagePath"> | |||
| <navbar title="遗产路径" leftClick @leftClick="$utils.navigateBack" /> | |||
| <view class="heritagePath-img"> | |||
| <image src="../static/situation/four.png" mode="aspectFill"> | |||
| </view> | |||
| <view class="heritagePath-button"> | |||
| <view @click="isShow = 0" :class="{ fontColor:isShow == 0}">路径定制</view> | |||
| <view @click="isShow = 1" :class="{ fontColor:isShow == 1}">推荐路径</view> | |||
| </view> | |||
| <view class="heritagePath-card" v-for="(item,index) in 10" :key="index"> | |||
| <view class="heritagePath-card-box"> | |||
| <view class="heritagePath-card-pic"> | |||
| <view class="heritagePath-card-img"> | |||
| <image src="../static/situation/four.png" mode="aspectFill" /> | |||
| </view> | |||
| <view class="heritagePath-card-imgs"> | |||
| <view> | |||
| <image src="../static/situation/four.png" mode="aspectFill" /> | |||
| </view> | |||
| <view> | |||
| <image src="../static/situation/four.png" mode="aspectFill" /> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view class="heritagePath-card-font"> | |||
| <view class="heritagePath-card-font-one"> | |||
| <view style="font-size: 28rpx; font-weight: 600;">景德镇一日游</view> | |||
| <view style="font-size: 20rpx; color: #999999;" v-if="isShow == 0">¥300起</view> | |||
| </view> | |||
| <view class="heritagePath-card-font-button" v-if="isShow == 0">线上预订</view> | |||
| </view> | |||
| <view style="height: 40rpx;" /> | |||
| </view> | |||
| </view> | |||
| <tabber/> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data() { | |||
| return { | |||
| isShow: 0 | |||
| } | |||
| }, | |||
| methods: { | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .heritagePath { | |||
| .heritagePath-img { | |||
| height: 400rpx; | |||
| image { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| } | |||
| .heritagePath-button { | |||
| display: flex; | |||
| padding: 30rpx 0; | |||
| font-size: 28rpx; | |||
| background-color: #fff; | |||
| view { | |||
| padding: 10rpx 40rpx; | |||
| background-color: #F8E2E2; | |||
| border-radius: 28rpx; | |||
| margin-left: 40rpx; | |||
| color: #C83741; | |||
| } | |||
| .fontColor { | |||
| background-color: #C83741; | |||
| color: #fff; | |||
| } | |||
| } | |||
| .heritagePath-card { | |||
| width: 96%; | |||
| margin-left: 2%; | |||
| margin-top: 20rpx; | |||
| background-color: #fff; | |||
| border-radius: 16rpx; | |||
| .heritagePath-card-box { | |||
| padding-top: 20rpx; | |||
| width: 94%; | |||
| margin-left: 3%; | |||
| .heritagePath-card-pic { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| .heritagePath-card-img { | |||
| height: 320rpx; | |||
| width: 400rpx; | |||
| flex-shrink: 0; | |||
| } | |||
| .heritagePath-card-imgs { | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: space-between; | |||
| view { | |||
| height: 156rpx; | |||
| width: 260rpx; | |||
| flex-shrink: 0; | |||
| } | |||
| } | |||
| image { | |||
| height: 100%; | |||
| width: 100%; | |||
| } | |||
| } | |||
| .heritagePath-card-font { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| margin-top: 20rpx; | |||
| .heritagePath-card-font-button { | |||
| padding: 8rpx 40rpx; | |||
| font-size: 28rpx; | |||
| color: #FFFFFF; | |||
| background-color: #C83741; | |||
| border-radius: 40rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||