|
|
@@ -13,21 +13,22 @@
|
|
|
<view class="page-view">
|
|
|
<view class="class-item" :id="'item' + index" v-for="(item, index) in tabbar" :key="index">
|
|
|
<view class="item-title">
|
|
|
- <text>{{ item.businessName }}</text>
|
|
|
- </view>
|
|
|
+ <text class="item-businessName">{{ item.businessName }}</text>
|
|
|
+ <text class="item-title-text">{{ item.businessDescribe }}</text>
|
|
|
+
|
|
|
+ </view>
|
|
|
<view class="item-container">
|
|
|
- <view class="thumb-box"
|
|
|
- v-for="(item1, index1) in (item.children?item.children:[item])"
|
|
|
- :key="index1" @click="clickMenu(item,item1)">
|
|
|
- <image class="item-menu-image" :src="item1.businessIcon"></image>
|
|
|
- <view class="item-menu-name">{{ item1.businessName }}</view>
|
|
|
- </view>
|
|
|
+ <view class="thumb-box" v-for="(item1, index1) in (item.children ? item.children : [item])"
|
|
|
+ :key="index1" @click="clickMenu(item, item1)">
|
|
|
+ <image class="item-menu-image" :src="item1.businessIcon"></image>
|
|
|
+ <view class="item-menu-name">{{ item1.businessName }}</view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
- <CustomTabBar page="class"/>
|
|
|
+ <CustomTabBar page="class" />
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -37,7 +38,7 @@ import { getVolunteerInfo } from '@/api/volunteer.js'
|
|
|
import CustomTabBar from '@/components/CustomTabBar/index.vue'
|
|
|
|
|
|
export default {
|
|
|
- components:{CustomTabBar},
|
|
|
+ components: { CustomTabBar },
|
|
|
data() {
|
|
|
return {
|
|
|
scrollTop: 0, //tab标题的滚动条位置
|
|
|
@@ -56,7 +57,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
onReady() {
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
onShow() {
|
|
|
this.getData();
|
|
|
@@ -172,8 +173,8 @@ export default {
|
|
|
}
|
|
|
}, 10)
|
|
|
},
|
|
|
- async clickMenu(service,record) {
|
|
|
- console.log(service,record);
|
|
|
+ async clickMenu(service, record) {
|
|
|
+ console.log(service, record);
|
|
|
const { id } = service;
|
|
|
const key = id;
|
|
|
if (this.userType == '2') {
|
|
|
@@ -186,8 +187,8 @@ export default {
|
|
|
const res = await getVolunteerInfo({
|
|
|
serviceCategory: key
|
|
|
});
|
|
|
- const parmas = { ...service, key,name:service.businessName,record };
|
|
|
-
|
|
|
+ const parmas = { ...service, key, name: service.businessName, record };
|
|
|
+
|
|
|
if (res.code === 200 && res.data) {
|
|
|
//已有注册，跳转详情页面
|
|
|
uni.navigateTo({
|
|
|
@@ -220,7 +221,7 @@ export default {
|
|
|
// });
|
|
|
// }
|
|
|
uni.navigateTo({
|
|
|
- url: `/pages_home/pages/client/details?dataList=${encodeURIComponent(JSON.stringify(res.data))}&id=${record.id}`
|
|
|
+ url: `/pages_home/pages/client/details?dataList=${encodeURIComponent(JSON.stringify(res.data))}&id=${record.id}`
|
|
|
});
|
|
|
|
|
|
}
|
|
|
@@ -239,7 +240,9 @@ export default {
|
|
|
top: 0px;
|
|
|
left: 0px;
|
|
|
right: 0px;
|
|
|
- bottom: 150rpx;
|
|
|
+ // bottom: 150rpx;
|
|
|
+ bottom: 0;
|
|
|
+ // padding-bottom: 150px;
|
|
|
|
|
|
}
|
|
|
|
|
|
@@ -263,65 +266,67 @@ export default {
|
|
|
|
|
|
.u-search-text {
|
|
|
font-size: 26rpx;
|
|
|
- color: $u-tips-color;
|
|
|
- margin-left: 10rpx;
|
|
|
}
|
|
|
|
|
|
.u-tab-view {
|
|
|
- width: 200rpx;
|
|
|
+ width: 188rpx;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.u-tab-item {
|
|
|
- height: 110rpx;
|
|
|
+ height: 100rpx;
|
|
|
background: #f6f6f6;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
+
|
|
|
+ font-family: PingFang SC;
|
|
|
font-size: 26rpx;
|
|
|
- color: #444;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 1;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 42rpx;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: normal;
|
|
|
+ color: #818181;
|
|
|
+ border-left: 4rpx solid #fff;
|
|
|
}
|
|
|
|
|
|
.u-tab-item-active {
|
|
|
position: relative;
|
|
|
- color: rgba(221, 94, 69, 1);
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 600;
|
|
|
background: #fff;
|
|
|
}
|
|
|
|
|
|
.u-tab-item-active::before {
|
|
|
- border-left: 4px solid rgba(221, 94, 69, 1) !important;
|
|
|
+ border-left: 4rpx solid rgba(221, 94, 69, 1) !important;
|
|
|
}
|
|
|
|
|
|
.u-tab-item-active::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
border-left: 4px solid $u-primary;
|
|
|
- height: 32rpx;
|
|
|
- left: 0;
|
|
|
- top: 39rpx;
|
|
|
+ height: 100%;
|
|
|
+ left: -5rpx;
|
|
|
+ top: 0;
|
|
|
}
|
|
|
|
|
|
.u-tab-view {
|
|
|
height: 100%;
|
|
|
+ background: #F6F6F6;
|
|
|
}
|
|
|
|
|
|
+
|
|
|
.right-box {
|
|
|
background-color: rgb(250, 250, 250);
|
|
|
}
|
|
|
|
|
|
.page-view {
|
|
|
- padding: 16rpx;
|
|
|
+ // padding: 16rpx;
|
|
|
}
|
|
|
|
|
|
.class-item {
|
|
|
- margin-bottom: 30rpx;
|
|
|
+ // margin-bottom: 30rpx;
|
|
|
background-color: #fff;
|
|
|
- padding: 16rpx;
|
|
|
+ padding: 34rpx;
|
|
|
border-radius: 8rpx;
|
|
|
}
|
|
|
|
|
|
@@ -330,18 +335,45 @@ export default {
|
|
|
}
|
|
|
|
|
|
.item-title {
|
|
|
- font-size: 26rpx;
|
|
|
- color: $u-main-color;
|
|
|
- font-weight: bold;
|
|
|
- text-align: center;
|
|
|
+ // font-size: 26rpx;
|
|
|
+ // color: $u-main-color;
|
|
|
+ // font-weight: bold;
|
|
|
+ // text-align: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ border-radius: 14rpx;
|
|
|
+background: linear-gradient(180deg, #FFF9F3 0%, rgba(255, 255, 255, 0) 100%);
|
|
|
}
|
|
|
|
|
|
-.item-menu-name {
|
|
|
- font-weight: normal;
|
|
|
- font-size: 28rpx;
|
|
|
- color: $u-main-color;
|
|
|
+.item-businessName {
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 42rpx;
|
|
|
+ letter-spacing: normal;
|
|
|
+ color: #262626;
|
|
|
+}
|
|
|
|
|
|
+.item-title-text {
|
|
|
+ font-family: Yuppy SC;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 42rpx;
|
|
|
+ text-align: right;
|
|
|
+ letter-spacing: normal;
|
|
|
+ color: #E58182;
|
|
|
+}
|
|
|
|
|
|
+.item-menu-name {
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 42rpx;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: normal;
|
|
|
+ color: #5D5D5D;
|
|
|
}
|
|
|
|
|
|
.item-container {
|
|
|
@@ -366,8 +398,8 @@ export default {
|
|
|
}
|
|
|
|
|
|
.item-menu-image {
|
|
|
- width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
+ width: 138rpx;
|
|
|
+ height: 138rpx;
|
|
|
margin-bottom: 12rpx;
|
|
|
}
|
|
|
</style>
|
jiayubo
