liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat：康养页面细节调整（已完成）

Browse Source
This commit is contained in:
modendeveloper
2024-10-09 23:58:37 +08:00
parent b397ba232f
commit 8c2e785ea0
5 changed files with 161 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg_product/views/healthSanctum.vue
+53 -11
View File
@@ -5,20 +5,30 @@
<view class="v12-radius-100 v12-grey v12-dark-text v12-px-5 v12-py-2 v12-font-28 v12-font-bold" @click="toFoods">养生食材</view>
</view>
<view class="v12-justify-between v12-align-center v12-mt-5">
<image
:src="webUrl + '/orderIcon/map_dark.png'"
mode="widthFix"
class="icon"
/>
<view class="v12-font-28 v12-secondary-dark-text v12-mr-3">{{ cityName }}</view>
<view class="flex-1">
<u-search :showAction="false" v-model="keyword" @search="search"></u-search>
<u-search searchIconColor="#C52733" :showAction="false" v-model="keyword" @search="search"></u-search>
</view>
</view>
<view class="v12-justify-between swap">
<view v-for="(item, index) in traveItems" :key="index" class="trave-item-wrap v12-mr-3 v12-mt-3">
<view class="trave-item">
<image class="trave-item" :src="item.cover" mode="widthFix" v-if="item.coverType === 1"></image>
<video class="trave-item" :src="item.cover" :show-fullscreen-btn="false" v-if="item.coverType === 2"></video>
<swiper v-if="traveItems.length > 0" class="v12-justify-between swap" autoplay circular next-margin="300rpx" duration="10000" interval="3000" >
<swiper-item v-for="(item, index) in traveItems" :key="index" >
<view class="trave-item v12-mr-3 v12-mt-3">
<view class="trave-item">
<image class="trave-item" :src="item.cover" v-if="item.coverType === 1"></image>
<video class="trave-item" :src="item.cover" :show-fullscreen-btn="false" v-if="item.coverType === 2"></video>
</view>
<view class="trave-btn" @click="toStore(item.hotelId)">
<text>旅居预约</text>
<image :src="webUrl + '/orderIcon/arrow.png'" class="arrow-icon v12-ml-1"></image>
</view>
</view>
<view class="trave-btn" @click="toStore(item.hotelId)">旅居预约</view>
</view>
</view>
</swiper-item>
</swiper>
<view class="v12-justify-between v12-align-center v12-px-3 v12-mt-3">
<view
class="tab v12-font-bold v12-font-34 v12-dark-text "
@@ -40,7 +50,13 @@
:show-fullscreen-btn="false"
v-if="item.coverType === 2">
</video>
<view class="v12-white-text v12-font-weight-300 address">{{ item.areaName }}</view>
<view class="v12-white-text address">
<image
class="map-icon v12-mr-1"
:src="webUrl + '/orderIcon/map_white.png'"
></image>
<text class="v12-font-28">{{ item.areaName }}</text>
</view>
</view>
<view class="v12-font-bold v12-font-28 v12-mt-1 more-t" style="min-height: 76rpx; " @click="toStore(item.hotelId)">{{ item.address }}</view>
<view class="v12-justify-start v12-align-center v12-my-1" @click="toStore(item.hotelId)">
@@ -51,6 +67,11 @@
</view>
</view>
</view>
<view v-if="items.length === 0" class="v12-justify-center v12-mt-6">
<view class="no-data-wrap">
<image :src="webUrl + '/orderIcon/微信图片_20241009220552.png'" mode="widthFix"></image>
</view>
</view>
</view>
</template>
<script>
@@ -58,6 +79,7 @@ import { getCategory,getWellnessPlace } from '@/api/health'
export default {
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
tabs: [],
items: [],
traveItems: [],
@@ -129,6 +151,19 @@ export default {
}
</script>
<style lang="less" scoped>
.map-icon{
width: 28rpx;
height: 28rpx;
}
.arrow-icon{
width: 25rpx;
height: 25rpx;
}
.icon{
width: 30rpx;
height: 30rpx;
}
.flex-1{
flex: 1;
}
@@ -150,6 +185,9 @@ export default {
border-radius: 60rpx;
font-size: 28rpx;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
padding: 10rpx 20rpx;
}
.trave-item{
@@ -157,11 +195,15 @@ export default {
height: 272rpx;
background: rgba(230,178,178,0.39);
border-radius: 20rpx;
position: relative;
}
.address{
position: absolute;
left: 30rpx;
bottom: 30rpx;
display: flex;
align-items: center;
justify-content: center;
}
.sanctup-items{
display: grid;
@@ -180,7 +222,7 @@ export default {
position: relative;
}
.sanctum-wrap{
height: 100vh;
min-height: 100vh;
background-color: #fff;
padding: 20rpx ;
}