|
@@ -1,18 +1,29 @@
|
|
|
<template>
|
|
|
- <view class="detail">
|
|
|
- <view class="detailItem">
|
|
|
- <u-swiper
|
|
|
- :list="list6"
|
|
|
- :autoplay="false"
|
|
|
- indicatorStyle="right: 20px"
|
|
|
- class="swiper"
|
|
|
- >
|
|
|
- <view slot="indicator" class="indicator-num">
|
|
|
- <text class="indicator-num__text"
|
|
|
- >{{ currentNum + 1 }}/{{ list6.length }}</text
|
|
|
- >
|
|
|
- </view>
|
|
|
+ <view class="container">
|
|
|
+ <view class="head-wrap">
|
|
|
+ <u-swiper height="90" radius="0" :list="list6" :autoplay="false" class="swiper">
|
|
|
</u-swiper>
|
|
|
+ <view class="business">
|
|
|
+ <view class="avatar">
|
|
|
+ <u-avatar size="56"></u-avatar>
|
|
|
+ </view>
|
|
|
+ <view class="collect"> 收藏 </view>
|
|
|
+ <view class="name">商家名称</view>
|
|
|
+ <view class="introduce">商家介绍商家介绍</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content-info">
|
|
|
+ <u-cell title="位置" label="xxxxxxx" :border="false"></u-cell>
|
|
|
+ <u-cell title="电话" label="xxxxxxxxxxx" :border="false"></u-cell>
|
|
|
+ <u-cell title="营业时间" label="9:00-24:00" :border="false"></u-cell>
|
|
|
+ <u-cell title="简介" :border="false">
|
|
|
+ <view slot="label" class="u-line-1">
|
|
|
+ xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
|
|
+ </view>
|
|
|
+ </u-cell>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <u-tabs :list="list"></u-tabs>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
@@ -28,6 +39,23 @@ export default {
|
|
|
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
|
|
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
|
|
],
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ name: '全部',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '保养',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '养成',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '维修',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '其他',
|
|
|
+ },
|
|
|
+ ],
|
|
|
};
|
|
|
},
|
|
|
onLoad(option) {
|
|
@@ -44,25 +72,49 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
-.indicator-num {
|
|
|
- padding: 2px 0;
|
|
|
- background-color: rgba(0, 0, 0, 0.35);
|
|
|
- border-radius: 100px;
|
|
|
- width: 35px;
|
|
|
- @include flex;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- &__text {
|
|
|
- color: #ffffff;
|
|
|
- font-size: 12px;
|
|
|
+<style lang="scss" scoped>
|
|
|
+.container {
|
|
|
+ position: relative;
|
|
|
+ .business {
|
|
|
+ width: 100%;
|
|
|
+ height: 180rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ .avatar {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ .collect {
|
|
|
+ position: absolute;
|
|
|
+ right: 40rpx;
|
|
|
+ top: -60rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ border: 2rpx solid #ffffff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 20rpx 0 10rpx 0;
|
|
|
+ }
|
|
|
+ .introduce {
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding: 10rpx 0 20rpx 0;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-.detailItem {
|
|
|
- height: 400rpx;
|
|
|
- background-color: pink;
|
|
|
- .u-swiper__wrapper__item__wrapper__image.data-v-7b038a67 {
|
|
|
- height: 100%;
|
|
|
+ .content-info {
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ ::v-deep .u-cell__body{
|
|
|
+ padding: 4rpx 20rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|