|
@@ -5,23 +5,24 @@
|
|
|
v-model="searchForm.keyword"></u-search>
|
|
|
<!-- tabs -->
|
|
|
<view class="tabs-container">
|
|
|
- <scroll-view scroll-x="true" style="width:100%;" :scroll-with-animation="true" :show-scrollbar="true">
|
|
|
- <u-tabs style="flex: 1;"
|
|
|
- :list="tabsList"
|
|
|
- :is-scroll="true"
|
|
|
- font-size="28"
|
|
|
- :bold="false"
|
|
|
- inactive-color="#000000"
|
|
|
- active-color="#ffffff"
|
|
|
- :bar-style="{'background-color': '#2979ff'}"
|
|
|
- :active-item-style="{'background-color': '#2979ff', 'border-radius':'30rpx'}"
|
|
|
- :gutter="35"
|
|
|
- height="45"
|
|
|
- v-model="currentTab"
|
|
|
- :show-bar="false"
|
|
|
- duration="0"
|
|
|
- @change="changeTab"></u-tabs>
|
|
|
- </scroll-view>
|
|
|
+ <u-tabs
|
|
|
+ :list="tabsList"
|
|
|
+ :is-scroll="true"
|
|
|
+ font-size="32"
|
|
|
+ :bold="false"
|
|
|
+ inactive-color="#000000"
|
|
|
+ active-color="#ffffff"
|
|
|
+ :bar-style="{'background-color': '#2979ff'}"
|
|
|
+ :active-item-style="{'background-color': '#2979ff', 'border-radius':'30rpx'}"
|
|
|
+ :gutter="40"
|
|
|
+ height="55"
|
|
|
+ v-model="currentTab"
|
|
|
+ :show-bar="false"
|
|
|
+ duration="0"
|
|
|
+ @change="changeTab"></u-tabs>
|
|
|
+ <!-- <scroll-view scroll-x="true" style="width:100%;" :scroll-with-animation="true" :show-scrollbar="true">
|
|
|
+
|
|
|
+ </scroll-view> -->
|
|
|
<!-- <u-icon name="list" style="flex: 0 0 auto;padding-left: 20rpx;"></u-icon> -->
|
|
|
</view>
|
|
|
</view>
|
|
@@ -29,7 +30,7 @@
|
|
|
|
|
|
<!-- 列表 -->
|
|
|
<view class="course-list">
|
|
|
- <view v-for="(course,index) in filterCourses" :key="course.id">
|
|
|
+ <view v-for="(course,index) in filterCourses" :key="course.id" class="course-list-item">
|
|
|
<view class="course-item">
|
|
|
<view class="course-item-image">
|
|
|
<image class="course-image" :src="course.thumImg ? course.thumImg
|
|
@@ -373,8 +374,8 @@
|
|
|
})
|
|
|
</script>
|
|
|
<style>
|
|
|
- ::v-deep(.u-tab-item){
|
|
|
- margin-right: 40rpx;
|
|
|
+ ::v-deep(.u-scroll-box .u-tab-item) {
|
|
|
+ margin-right: 20rpx;
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
@@ -394,18 +395,23 @@
|
|
|
}
|
|
|
|
|
|
.tabs-container {
|
|
|
- padding: 20rpx 0 10rpx;
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
+ padding: 40rpx 0 35rpx;
|
|
|
+ // display: flex;
|
|
|
+ // width: 100%;
|
|
|
/* 确保宽度足够 */
|
|
|
- overflow-x: auto;
|
|
|
+ // overflow-x: auto;
|
|
|
/* 横向滚动 */
|
|
|
- -webkit-overflow-scrolling: touch;
|
|
|
+ // -webkit-overflow-scrolling: touch;
|
|
|
/* 在iOS上启用流畅滚动 */
|
|
|
}
|
|
|
-
|
|
|
+ .course-list-item{
|
|
|
+ padding: 20rpx 0;
|
|
|
+ &:first-child{
|
|
|
+ padding: 0 0 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
.course-item {
|
|
|
- margin: 20rpx 0;
|
|
|
+ // margin: 20rpx 0;
|
|
|
display: flex;
|
|
|
overflow: hidden;
|
|
|
|