|
|
@@ -24,23 +24,17 @@
|
|
|
<view class="name" :class="index===activeIndex?'active':''">{{item.name}}</view>
|
|
|
</view>
|
|
|
</view> -->
|
|
|
- <scroll-view
|
|
|
- class="column-list-scroll"
|
|
|
- :class="isExpand?'column-list2':''"
|
|
|
- scroll-x="true"
|
|
|
- :scroll-with-animation="true"
|
|
|
- :show-scrollbar="false"
|
|
|
- :enable-flex="true"
|
|
|
- >
|
|
|
- <view class="column-list" :class="isExpand?'column-list2':''">
|
|
|
- <view class="item" v-for="(item,index) in columnList" :key="index" @click="selectColumn(item)">
|
|
|
- <view class="img-item" :class="index===activeIndex?'active':''">
|
|
|
- <image class="img" src="../../static/images/img.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="name" :class="index===activeIndex?'active':''">{{item.name}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
+ <scroll-view class="column-list-scroll" :class="isExpand?'column-list2':''" scroll-x="true"
|
|
|
+ :scroll-with-animation="true" :show-scrollbar="false" :enable-flex="true">
|
|
|
+ <view class="column-list" :class="isExpand?'column-list2':''">
|
|
|
+ <view class="item" v-for="(item,index) in columnList" :key="index" @click="selectColumn(item)">
|
|
|
+ <view class="img-item" :class="index===activeIndex?'active':''">
|
|
|
+ <image class="img" src="../../static/images/img.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="name" :class="index===activeIndex?'active':''">{{item.name}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
<view class="expand" @click="expand" :class="{'expand2': isExpand}">
|
|
|
<view>{{isExpand ? '收起' : '展开'}}</view>
|
|
|
<image class="expand-icon"
|
|
|
@@ -60,6 +54,28 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="medic">
|
|
|
+ <view class="tab-inner">
|
|
|
+ <view v-for="(item,index) in selectList" :key="index"
|
|
|
+ :class="selectIndex == item.value?'item active':'item'" @click="onSelect(item)">
|
|
|
+ <view class="text">
|
|
|
+ <text>{{ item.name }}</text>
|
|
|
+ <image v-if="item.value==2" class="tab-bg" src="/static/images/shaixuan_moren.png" mode="">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="icon-search">
|
|
|
+ <image @click="showChange(2)" v-if="showType==1" src="../../static/images/demonstrations1.png"
|
|
|
+ mode="">
|
|
|
+ </image>
|
|
|
+ <image @click="showChange(1)" v-if="showType==2" src="../../static/images/demonstrations2.png"
|
|
|
+ mode="">
|
|
|
+ </image>
|
|
|
+ <view class="filter">
|
|
|
+ <text>筛选</text>
|
|
|
+ <image class="ml8" @click="toFilter" src="../../static/images/filter_icon.png" mode="">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<view class="medic-list">
|
|
|
<view v-for="(item,index) in dataList" :key="index" class="item" @click="showDetail(item)">
|
|
|
<view class="img-box">
|
|
|
@@ -121,6 +137,20 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ selectIndex: 0,
|
|
|
+ selectList: [{
|
|
|
+ name: '综合',
|
|
|
+ value: 0
|
|
|
+ }, {
|
|
|
+ name: '销量',
|
|
|
+ value: 1
|
|
|
+ }, {
|
|
|
+ name: '价格',
|
|
|
+ value: 2
|
|
|
+ }, {
|
|
|
+ name: '惊艳度',
|
|
|
+ value: 3
|
|
|
+ }],
|
|
|
isExpand: false, //是否展开
|
|
|
activeIndex: 0,
|
|
|
columnList: [{
|
|
|
@@ -214,6 +244,10 @@
|
|
|
this.getAdv();
|
|
|
},
|
|
|
methods: {
|
|
|
+ onSelect(item) {
|
|
|
+ console.log("item", item)
|
|
|
+ this.selectIndex = item.value
|
|
|
+ },
|
|
|
splitPrice(price) {
|
|
|
const priceStr = parseFloat(price).toFixed(2).toString();
|
|
|
return {
|
|
|
@@ -390,7 +424,7 @@
|
|
|
.icon-search {
|
|
|
width: 28rpx;
|
|
|
height: 28rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
+ margin-left: 42rpx;
|
|
|
}
|
|
|
|
|
|
input {
|
|
|
@@ -402,113 +436,113 @@
|
|
|
}
|
|
|
|
|
|
.column-box {
|
|
|
- display: flex;
|
|
|
- padding-left: 16rpx;
|
|
|
- margin: 16rpx 0 24rpx;
|
|
|
-
|
|
|
- &.column-box2 {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
-
|
|
|
- .column-list-scroll {
|
|
|
- flex: 1;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
-
|
|
|
- &.column-list2 {
|
|
|
- flex-wrap: wrap;
|
|
|
- height: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .column-list {
|
|
|
- display: inline-flex; // 改为行内flex
|
|
|
- align-items: center;
|
|
|
- padding-bottom: 10rpx; // 增加底部padding，防止滚动条遮挡
|
|
|
-
|
|
|
- &.column-list2 {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .item {
|
|
|
- display: inline-flex; // 改为行内flex
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- margin-right: 16rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- flex-shrink: 0; // 防止收缩
|
|
|
-
|
|
|
- .img-item {
|
|
|
- width: 88rpx;
|
|
|
- height: 88rpx;
|
|
|
- flex-shrink: 0;
|
|
|
-
|
|
|
- &.active {
|
|
|
- border: 3rpx solid #02B176;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 44rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 44rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- width: 128rpx;
|
|
|
- height: 44rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #333333;
|
|
|
- text-align: center;
|
|
|
- line-height: 44rpx;
|
|
|
- margin-top: 16rpx;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
-
|
|
|
- &.active {
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- background: #02B176;
|
|
|
- border-radius: 22rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .expand {
|
|
|
- margin: 0 20rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #000000;
|
|
|
- width: 24rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- flex-shrink: 0; // 防止收缩
|
|
|
-
|
|
|
- .expand-icon {
|
|
|
- width: 24rpx;
|
|
|
- height: 24rpx;
|
|
|
- margin-top: 6rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .expand2 {
|
|
|
- margin-top: 8rpx;
|
|
|
- width: 100%;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .expand-icon {
|
|
|
- margin-left: 12rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ padding-left: 16rpx;
|
|
|
+ margin: 16rpx 0 24rpx;
|
|
|
+
|
|
|
+ &.column-box2 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .column-list-scroll {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+
|
|
|
+ &.column-list2 {
|
|
|
+ flex-wrap: wrap;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .column-list {
|
|
|
+ display: inline-flex; // 改为行内flex
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 10rpx; // 增加底部padding，防止滚动条遮挡
|
|
|
+
|
|
|
+ &.column-list2 {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: inline-flex; // 改为行内flex
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ flex-shrink: 0; // 防止收缩
|
|
|
+
|
|
|
+ .img-item {
|
|
|
+ width: 88rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ border: 3rpx solid #02B176;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ width: 128rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 44rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: #02B176;
|
|
|
+ border-radius: 22rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .expand {
|
|
|
+ margin: 0 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #000000;
|
|
|
+ width: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ flex-shrink: 0; // 防止收缩
|
|
|
+
|
|
|
+ .expand-icon {
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ margin-top: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .expand2 {
|
|
|
+ margin-top: 8rpx;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .expand-icon {
|
|
|
+ margin-left: 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -556,6 +590,73 @@
|
|
|
width: calc(100% - 200rpx);
|
|
|
height: 100%;
|
|
|
|
|
|
+ .tab-inner {
|
|
|
+ height: 88upx;
|
|
|
+ line-height: 88upx;
|
|
|
+ display: flex;
|
|
|
+ overflow-x: auto;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666666;
|
|
|
+ margin-left: 24rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ font-size: 24rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 1;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ background: #F5F7FA;
|
|
|
+ border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
+ padding: 12rpx 12rpx 10rpx;
|
|
|
+ margin-right: 20upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #02B176;
|
|
|
+ background: #EBFAF6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-bg {
|
|
|
+ width: 24upx;
|
|
|
+ height: 24upx;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-search {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ image {
|
|
|
+ width: 32upx;
|
|
|
+ height: 32upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
.medic-list {
|
|
|
.item {
|
|
|
box-sizing: border-box;
|
