Fix：4866 【商城小程序】康养类目下，应显示管理后台配置的养生圣地类目及数据（参考图2）
This commit is contained in:
LinCyJang
+262
-397
@@ -23,265 +23,246 @@
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="v12-justify-center v12-mt-3" v-if="hasRankData">
|
||||
<!-- <view class="v12-justify-center v12-mt-3" v-if="hasRankData">
|
||||
<image
|
||||
class="title-img"
|
||||
:src="webUrl + '/orderIcon/rankTitle.png'"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
</view>
|
||||
<view class="rank-wrap v12-mt-3" v-if="hasRankData">
|
||||
<view class="rank-items-wrap">
|
||||
<view class="bee-rank" v-for="(k, i) in rank" :key="i">
|
||||
<image
|
||||
:src="k.backgroundImage"
|
||||
class="bg-img"
|
||||
style="width: inherit"
|
||||
mode="scaleToFill"
|
||||
></image>
|
||||
<view class="rank-title-wrap">
|
||||
<view class="rank-title v12-font-34 v12-font-bold one-t">{{
|
||||
k.title
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="v12-px-2">
|
||||
</view> -->
|
||||
<!-- <vi
|
||||
<view
|
||||
class="rank-item v12-justify-start v12-align-center v12-mb-4"
|
||||
v-for="(item, index) in k.products"
|
||||
@click="toGoods(item.productId)"
|
||||
:key="index"
|
||||
>
|
||||
<view
|
||||
class="rank-tag"
|
||||
:class="{ 'rank2-bg': index === 1, 'rank3-bg': index === 2 }"
|
||||
>
|
||||
<view
|
||||
class="rank-2"
|
||||
:class="{
|
||||
'rank2-2-bg': index === 1,
|
||||
'rank3-3-bg': index === 2,
|
||||
}"
|
||||
>
|
||||
<view
|
||||
class="rank-item v12-justify-start v12-align-center v12-mb-4"
|
||||
v-for="(item, index) in k.products"
|
||||
@click="toGoods(item.productId)"
|
||||
:key="index"
|
||||
class="rank-3"
|
||||
:class="{
|
||||
'rank2-4-bg': index === 1,
|
||||
'rank3-4-bg': index === 2,
|
||||
}"
|
||||
>
|
||||
<view
|
||||
class="rank-tag"
|
||||
:class="{ 'rank2-bg': index === 1, 'rank3-bg': index === 2 }"
|
||||
class="rank-4"
|
||||
:class="{
|
||||
'rank2-bg': index === 1,
|
||||
'rank3-bg': index === 2,
|
||||
}"
|
||||
>{{ index + 1 }}</view
|
||||
>
|
||||
<view
|
||||
class="rank-2"
|
||||
:class="{
|
||||
'rank2-2-bg': index === 1,
|
||||
'rank3-3-bg': index === 2,
|
||||
}"
|
||||
>
|
||||
<view
|
||||
class="rank-3"
|
||||
:class="{
|
||||
'rank2-4-bg': index === 1,
|
||||
'rank3-4-bg': index === 2,
|
||||
}"
|
||||
>
|
||||
<view
|
||||
class="rank-4"
|
||||
:class="{
|
||||
'rank2-bg': index === 1,
|
||||
'rank3-bg': index === 2,
|
||||
}"
|
||||
>{{ index + 1 }}</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rank-img">
|
||||
<image
|
||||
:src="item.productImage"
|
||||
mode="widthFix"
|
||||
class="rank-img"
|
||||
></image>
|
||||
</view>
|
||||
<view class="v12-ml-2">
|
||||
<view
|
||||
class="v12-font-bold v12-font-24 one-t"
|
||||
style="width: 160rpx"
|
||||
>{{ item.productTitle }}</view
|
||||
>
|
||||
<view class="v12-font-22 more-t">{{ item.productDesc }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="recommend-wrap v12-mt-3">
|
||||
<view class="recommend-title v12-px-3">
|
||||
<text class="v12-dark-text v12-font-36 v12-font-bold">食补推荐</text>
|
||||
<view class="slider"></view>
|
||||
</view>
|
||||
<view class="recommends v12-mt-3">
|
||||
<view
|
||||
class="recommend-item"
|
||||
v-for="(item, index) in recommendItems"
|
||||
:key="index"
|
||||
@click="toGoods(item.productId)"
|
||||
>
|
||||
<view>
|
||||
<view class="recommend-img">
|
||||
<image
|
||||
class="recommend-img"
|
||||
:src="item.image"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<view class="name-wrap v12-white-text v12-text-center more-t">{{
|
||||
item.title
|
||||
}}</view>
|
||||
</view>
|
||||
<view
|
||||
class="v12-px-2 v12-font-bold v12-font-28 more-t v12-my-2"
|
||||
>{{ item.productName }}</view
|
||||
>
|
||||
</view>
|
||||
<view
|
||||
class="v12-justify-between v12-primary-text v12-font-bold v12-px-2 v12-pb-2"
|
||||
>
|
||||
<view class="">
|
||||
<text class="v12-font-32">￥</text>
|
||||
<text class="v12-font-36">{{ item.price }}</text>
|
||||
</view>
|
||||
<view class="cart-img" @click.stop="addToCart(item, 'productId')">
|
||||
<image
|
||||
class="cart-img"
|
||||
:src="webUrl + '/orderIcon/组 355.png'"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="recommendItems.length === 0">
|
||||
<view class="no-data-wrap v12-justify-center v12-mt-6">
|
||||
<view class="rank-img">
|
||||
<image
|
||||
:src="webUrl + '/orderIcon/微信图片_20241009220552.png'"
|
||||
:src="item.productImage"
|
||||
mode="widthFix"
|
||||
class="rank-img"
|
||||
></image>
|
||||
</view>
|
||||
<view class="v12-ml-2">
|
||||
<view
|
||||
class="v12-font-bold v12-font-24 one-t"
|
||||
style="width: 160rpx"
|
||||
>{{ item.productTitle }}</view
|
||||
>
|
||||
<view class="v12-font-22 more-t">{{ item.productDesc }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="v12-justify-between v12-align-center v12-px-3 v12-mt-3 tabs-wrap">
|
||||
<view
|
||||
class="tab v12-font-34 v12-dark-text v12-mr-5"
|
||||
v-for="(tab, index) in tabs"
|
||||
@click="handleTab(index,tab)"
|
||||
:class="{'activeTab' : index === actived}"
|
||||
:key="index">
|
||||
<text>{{ tab.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="v12-justify-between sanctup-items v12-mt-3">
|
||||
<view v-for="(item, index) in items" :key="index" class="v12-pa-1" @click="toStore(item)">
|
||||
<view class="img">
|
||||
<video
|
||||
class="img"
|
||||
:src="item.cover"
|
||||
:play-btn-position="'center'"
|
||||
:show-fullscreen-btn="false"
|
||||
:show-center-play-btn="false"
|
||||
:show-play-btn="false"
|
||||
:controls="false"
|
||||
:poster="item.cover + '?vframe/jpg/offset/1'"
|
||||
v-if="item.coverType === 2">
|
||||
</video>
|
||||
<image v-else class="img" :src="item.cover"></image>
|
||||
<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 v-if="item.intro" class="v12-font-bold v12-font-28 v12-mt-1 more-t desc-txt">{{ item.intro }}</view>
|
||||
<view class="v12-justify-start v12-align-center v12-my-1">
|
||||
<view class="atr">
|
||||
<image class="atr" :src="item.avatar"></image>
|
||||
</view>
|
||||
<view class="v12-font-26 v12-ml-2 v12-dark-text one-t">{{ item.name }}</view>
|
||||
</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>
|
||||
<ProductWindow
|
||||
ref="attrWindow"
|
||||
:attr="attr"
|
||||
:cartNum="cart_num"
|
||||
:showOk="true"
|
||||
@changeFun="changeFun"
|
||||
@ok="handleOk"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { getRank, getFoods, getRecipe, getWellnessTopImage } from "@/api/health";
|
||||
import ProductWindow from '@/components/ProductWindow'
|
||||
import goCartMixin from '@/mixins/goCartMixins'
|
||||
import { getCategory,getWellnessPlace } from '@/api/health'
|
||||
import { getJiaLouList } from '@/api/qianxian'
|
||||
import { getWellnessTopImage } from '@/api/health'
|
||||
export default {
|
||||
components: {
|
||||
ProductWindow
|
||||
},
|
||||
mixins: [goCartMixin],
|
||||
computed: {
|
||||
hasRankData() {
|
||||
if (!Array.isArray(this.rank)) return false;
|
||||
const hasText = (v) => typeof v === "string" && v.trim() !== "";
|
||||
const hasValue = (v) => v !== null && v !== undefined && v !== "";
|
||||
return this.rank.some((item) => {
|
||||
if (!item) return false;
|
||||
if (hasText(item.title) || hasText(item.backgroundImage)) {
|
||||
return true;
|
||||
}
|
||||
if (Array.isArray(item.products)) {
|
||||
return item.products.some((p) => {
|
||||
if (!p) return false;
|
||||
return (
|
||||
hasText(p.productTitle) ||
|
||||
hasText(p.productDesc) ||
|
||||
hasValue(p.productImage) ||
|
||||
hasValue(p.productId)
|
||||
);
|
||||
});
|
||||
}
|
||||
return false;
|
||||
});
|
||||
},
|
||||
travelButtonSrc() {
|
||||
const config = this.topImageConfig || {};
|
||||
return config.travelButtonImage || config.travelButtonImageFocus || "";
|
||||
},
|
||||
wellnessButtonSrc() {
|
||||
const config = this.topImageConfig || {};
|
||||
return config.wellnessButtonImageFocus || config.wellnessButtonImage || "";
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
recommendItems: [],
|
||||
cityId: "",
|
||||
cityName: "",
|
||||
rank: [],
|
||||
tabs: [],
|
||||
items: [],
|
||||
traveItems: [],
|
||||
actived: 0,
|
||||
cityId: '',
|
||||
cityName: '',
|
||||
categoryId: null,
|
||||
topImageConfig: {}
|
||||
};
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
travelButtonSrc() {
|
||||
const config = this.topImageConfig || {}
|
||||
return config.travelButtonImage || config.travelButtonImage || ''
|
||||
},
|
||||
wellnessButtonSrc() {
|
||||
const config = this.topImageConfig || {}
|
||||
return config.wellnessButtonImageFocus || config.wellnessButtonImage || ''
|
||||
}
|
||||
},
|
||||
onLoad(opts) {
|
||||
this.cityId = opts.city;
|
||||
this.cityName = decodeURIComponent(opts.cityName);
|
||||
this.getRank();
|
||||
this.getList();
|
||||
this.getTopImage();
|
||||
console.log(opts);
|
||||
|
||||
this.cityId = opts.city
|
||||
this.cityName = decodeURIComponent(decodeURIComponent(opts.cityName))
|
||||
getCategory().then(res => {
|
||||
this.tabs = res.data
|
||||
this.categoryId = res.data[0].id
|
||||
this.getList()
|
||||
})
|
||||
this.getTop()
|
||||
this.getTopImage()
|
||||
},
|
||||
onUnload() {
|
||||
// uni.navigateBack({
|
||||
// delta: 0
|
||||
// })
|
||||
},
|
||||
methods: {
|
||||
toGoods(id) {
|
||||
this.$yrouter.push({
|
||||
path: "/pages/shop/GoodsCon/index",
|
||||
query: {
|
||||
id: id,
|
||||
},
|
||||
});
|
||||
handleTab(index, tab) {
|
||||
this.actived = index
|
||||
this.categoryId = tab.id
|
||||
this.getList()
|
||||
},
|
||||
toSanctun() {
|
||||
uni.redirectTo({
|
||||
url:
|
||||
"/pkg_product/views/healthSanctum?city=" +
|
||||
this.cityId +
|
||||
"&cityName=" +
|
||||
this.cityName,
|
||||
});
|
||||
url: '/pkg_product/views/healthSanctum?city=' + this.cityId + '&cityName=' + this.cityName
|
||||
})
|
||||
},
|
||||
getRank() {
|
||||
let params = {
|
||||
goodCityId: this.cityId,
|
||||
};
|
||||
getRank(params).then((res) => {
|
||||
this.rank = res.data;
|
||||
});
|
||||
toFoods() {
|
||||
uni.redirectTo({
|
||||
url: '/pkg_product/views/healthFoods?city=' + this.cityId + '&cityName=' + this.cityName
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
const params = {
|
||||
// countyId: this.cityId,
|
||||
goodCityId: this.cityId,
|
||||
wellnessPlaceCateId : this.categoryId,
|
||||
shopType: 'wellnessCate',
|
||||
page: 1,
|
||||
limit: 9999,
|
||||
};
|
||||
getFoods(params).then((res) => {
|
||||
this.recommendItems = res.data.records;
|
||||
});
|
||||
limit: 9999
|
||||
}
|
||||
getJiaLouList(params).then(res => {
|
||||
// console.log(res);
|
||||
this.items = res.data.records
|
||||
})
|
||||
},
|
||||
search() {
|
||||
this.getList();
|
||||
uni.navigateTo({
|
||||
url: '/pkg_product/views/healthSearch?city=' + this.cityId + '&cityName=' + this.cityName
|
||||
})
|
||||
},
|
||||
getTop() {
|
||||
const params = {
|
||||
goodCityId: this.cityId,
|
||||
shopType: 'wellnessTop',
|
||||
page: 1,
|
||||
limit: 9999
|
||||
}
|
||||
getJiaLouList(params).then(res => {
|
||||
// console.log(res);
|
||||
this.traveItems = res.data.records
|
||||
})
|
||||
},
|
||||
toStore(item) {
|
||||
if(item.dataType === 'wellnessPlace'){
|
||||
this.$yrouter.push({
|
||||
path: '/pagesInn/inn/innHome',
|
||||
query: {
|
||||
id: item.hotelId
|
||||
}
|
||||
})
|
||||
}else{
|
||||
uni.navigateTo({ url: '/pkg_product/views/sojoumStore?id=' + item.id })
|
||||
}
|
||||
},
|
||||
getTopImage() {
|
||||
getWellnessTopImage().then((res) => {
|
||||
this.topImageConfig = res.data || {};
|
||||
});
|
||||
const cached = uni.getStorageSync('wellnessTopImageConfig')
|
||||
if (cached) {
|
||||
this.topImageConfig = cached
|
||||
}
|
||||
getWellnessTopImage().then(res => {
|
||||
this.topImageConfig = res.data || {}
|
||||
uni.setStorageSync('wellnessTopImageConfig', this.topImageConfig)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.banner-wrap {
|
||||
.banner-wrap{
|
||||
position: relative;
|
||||
margin-left: -20rpx;
|
||||
margin-right: -20rpx;
|
||||
}
|
||||
.banner-img {
|
||||
.banner-img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
will-change: transform;
|
||||
}
|
||||
.banner-tabs {
|
||||
.banner-tabs{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@@ -289,208 +270,41 @@ export default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.tab-btn {
|
||||
.tab-btn{
|
||||
width: 200rpx;
|
||||
will-change: transform;
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
.arrow-icon {
|
||||
.tabs-wrap{
|
||||
white-space: nowrap;
|
||||
overflow: scroll;
|
||||
.tab:last-child{
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
.map-icon{
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
.arrow-icon{
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
}
|
||||
.icon {
|
||||
.icon{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
.rank2-bg {
|
||||
background-color: #ecdad6 !important;
|
||||
}
|
||||
.rank3-bg {
|
||||
background-color: #dae3f3 !important;
|
||||
}
|
||||
.rank3-3-bg {
|
||||
background-color: #c8c8c8 !important;
|
||||
}
|
||||
.rank2-2-bg {
|
||||
background-color: #d3b9b2 !important;
|
||||
}
|
||||
.rank2-4-bg {
|
||||
background-color: #ad8578 !important;
|
||||
}
|
||||
.rank3-4-bg {
|
||||
background-color: #a5a5a5 !important;
|
||||
}
|
||||
.rank-2 {
|
||||
width: 40rpx; /* 宽度 */
|
||||
height: 45rpx; /* 高度，根据正六边形的几何特性计算 */
|
||||
background-color: #ddc76f; /* 背景颜色 */
|
||||
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.rank-3 {
|
||||
width: 30rpx; /* 宽度 */
|
||||
height: 35rpx; /* 高度，根据正六边形的几何特性计算 */
|
||||
background-color: #ad9161; /* 背景颜色 */
|
||||
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.rank-4 {
|
||||
width: 25rpx; /* 宽度 */
|
||||
height: 28rpx; /* 高度，根据正六边形的几何特性计算 */
|
||||
background-color: #fff3c2; /* 背景颜色 */
|
||||
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.ys-btn {
|
||||
background: #e2d7c3;
|
||||
}
|
||||
.cart-img {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.bg-img {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
}
|
||||
.recommends {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-column-gap: 20rpx;
|
||||
grid-row-gap: 20rpx;
|
||||
}
|
||||
.recommend-img {
|
||||
width: 344rpx;
|
||||
height: 344rpx;
|
||||
background: #333;
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.name-wrap {
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
width: 100%;
|
||||
padding: 8px 0;
|
||||
bottom: 0;
|
||||
height: 70rpx;
|
||||
}
|
||||
.recommend-item {
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.recommend-title {
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
}
|
||||
.slider {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 6rpx;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#c52733 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
border-radius: 6rpx;
|
||||
bottom: 5rpx;
|
||||
}
|
||||
.rank-wrap {
|
||||
background: #e2bc8d;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.rank-tag {
|
||||
width: 50rpx; /* 宽度 */
|
||||
height: 55rpx; /* 高度，根据正六边形的几何特性计算 */
|
||||
background-color: #fbeeb7; /* 背景颜色 */
|
||||
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: 20rpx;
|
||||
line-height: 55rpx;
|
||||
top: -22.5rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.rank-img {
|
||||
min-width: 104rpx;
|
||||
width: 104rpx;
|
||||
height: 104rpx;
|
||||
background: #666;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.bee-rank,
|
||||
.drug-rank {
|
||||
width: 100%;
|
||||
background: #999;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.rank-title-wrap {
|
||||
height: 140rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.rank-title {
|
||||
width: 200rpx;
|
||||
padding: 10rpx 5rpx;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#ffffff 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
z-index: 999;
|
||||
}
|
||||
.rank-items-wrap {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-column-gap: 20rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.rank-item {
|
||||
width: 100%;
|
||||
height: 116rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 0 10rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.title-img {
|
||||
width: 404rpx;
|
||||
}
|
||||
.health-foods {
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.flex-1 {
|
||||
.flex-1{
|
||||
flex: 1;
|
||||
}
|
||||
.swap {
|
||||
.swap{
|
||||
overflow: auto;
|
||||
}
|
||||
.trave-item-wrap {
|
||||
.trave-item-wrap{
|
||||
position: relative;
|
||||
}
|
||||
.trave-btn {
|
||||
.trave-btn{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@@ -498,20 +312,71 @@ export default {
|
||||
bottom: 30rpx;
|
||||
text-align: center;
|
||||
width: 212rpx;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
background: rgba(255,255,255,0.7);
|
||||
border-radius: 60rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
.trave-item{
|
||||
width: 382rpx;
|
||||
height: 272rpx;
|
||||
background: rgba(230,178,178,0.39);
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
.desc-txt {
|
||||
height: 78rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.address{
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
bottom: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.trave-item {
|
||||
width: 382rpx;
|
||||
height: 272rpx;
|
||||
background: rgba(230, 178, 178, 0.39);
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
.sanctup-items{
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
}
|
||||
.atr{
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.img{
|
||||
width: 320rpx;
|
||||
height: 320rpx;
|
||||
// background: #707070;
|
||||
border-radius: 16rpx;
|
||||
position: relative;
|
||||
}
|
||||
.sanctum-wrap{
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
padding: 20rpx ;
|
||||
}
|
||||
.tab{
|
||||
position: relative;
|
||||
}
|
||||
.slider{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 6rpx;
|
||||
background: linear-gradient(to right, #C52733 0%, rgba(255,255,255,0) 100%);
|
||||
border-radius: 6rpx;
|
||||
bottom: 5rpx;
|
||||
}
|
||||
.activeTab{
|
||||
font-size: 34rpx;
|
||||
background: #C52733;
|
||||
color: #fff !important;
|
||||
border-radius: 100rpx;
|
||||
padding: 4rpx 20rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -203,8 +203,13 @@ export default {
|
||||
}
|
||||
},
|
||||
getTopImage() {
|
||||
const cached = uni.getStorageSync('wellnessTopImageConfig')
|
||||
if (cached) {
|
||||
this.topImageConfig = cached
|
||||
}
|
||||
getWellnessTopImage().then(res => {
|
||||
this.topImageConfig = res.data || {}
|
||||
uni.setStorageSync('wellnessTopImageConfig', this.topImageConfig)
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -231,6 +236,9 @@ export default {
|
||||
}
|
||||
.tab-btn{
|
||||
width: 200rpx;
|
||||
will-change: transform;
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
.tabs-wrap{
|
||||
white-space: nowrap;
|
||||
|
||||
Reference in New Issue
Block a user