|
@@ -4,7 +4,7 @@
|
|
|
<view class="page-header" id="bundle-item-header">
|
|
|
<u-row gutter="16" justify="space-between">
|
|
|
<u-col :span="isGobleSearch ? 9 : 12">
|
|
|
- <u-search placeholder="请输入关键字" v-model="queryWord" @focus="isGobleSearch=true" @custom="searchData" @search="searchData" :action-style="{'color': '#fff', 'font-size': '24rpx', 'background-color': '#ff4546', 'border-radius': '6rpx', 'padding': '6rpx 15rpx'}"></u-search>
|
|
|
+ <u-search placeholder="请输入关键字" v-model="queryWord" @focus="isGobleSearch=true" @custom="searchData" @search="searchData" :action-style="{'color': '#fff', 'font-size': '24rpx', 'background-color': '#e84131', 'border-radius': '6rpx', 'padding': '6rpx 15rpx'}"></u-search>
|
|
|
</u-col>
|
|
|
<u-col span="3" v-show="isGobleSearch">
|
|
|
<view class="close-con">
|
|
@@ -25,8 +25,12 @@
|
|
|
<view class="item-f-con">
|
|
|
<text style="color: red;">¥{{item.price}}</text>
|
|
|
<view class="handle-btns">
|
|
|
- <u-button class="item-btn" shape="circle" size="mini" hover-class="none" @click="intoDetail(item.id)">查详情</u-button>
|
|
|
- <u-button class="item-btn buy-btn" type="primary" shape="circle" size="mini" hover-class="none" :custom-style="customBtnStyle" @click="buyBundle(item)">下 单</u-button>
|
|
|
+ <view class="btn-box">
|
|
|
+ <u-button class="item-btn" shape="circle" size="mini" hover-class="none" :custom-style="customBtnStylePlain" @click="intoDetail(item.id)">查详情</u-button>
|
|
|
+ </view>
|
|
|
+ <view class="btn-box">
|
|
|
+ <u-button class="item-btn buy-btn" type="primary" shape="circle" size="mini" hover-class="none" :custom-style="customBtnStyle" @click="buyBundle(item)">下 单</u-button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -53,9 +57,13 @@
|
|
|
isGobleSearch: false, // 是否全局搜索
|
|
|
clsId: '',
|
|
|
customBtnStyle: { // 自定义按钮样式
|
|
|
- borderColor: '#ff4546',
|
|
|
- backgroundColor: '#ff4546',
|
|
|
- color: '#fff'
|
|
|
+ borderColor: '#e84131',
|
|
|
+ backgroundColor: '#e84131',
|
|
|
+ color: '#fff',
|
|
|
+ width: '100%'
|
|
|
+ },
|
|
|
+ customBtnStylePlain: { // 自定义按钮样式
|
|
|
+ width: '100%'
|
|
|
},
|
|
|
}
|
|
|
},
|
|
@@ -175,18 +183,18 @@
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
.page-header{
|
|
|
- padding: 20upx 30upx;
|
|
|
- border-bottom: 1upx solid #f2f2f2;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ border-bottom: 1rpx solid #f2f2f2;
|
|
|
background: #FFFFFF;
|
|
|
.close-con{
|
|
|
text-align: right;
|
|
|
.close-search{
|
|
|
display: inline-block;
|
|
|
color: #515a6e;
|
|
|
- border: 2upx dashed #dcdee2;
|
|
|
- border-radius: 6upx;
|
|
|
- padding: 12upx 15upx;
|
|
|
- font-size: 24upx;
|
|
|
+ border: 2rpx dashed #dcdee2;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ padding: 12rpx 15rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -197,12 +205,12 @@
|
|
|
.nav-left{
|
|
|
width: 30%;
|
|
|
height: 100vh;
|
|
|
- border-right: 1upx solid #f2f2f2;
|
|
|
+ border-right: 1rpx solid #f2f2f2;
|
|
|
background-color: #fff;
|
|
|
.nav-left-item{
|
|
|
color: #303133;
|
|
|
- border-right: 2upx solid #fff;
|
|
|
- padding: 24upx 20upx;
|
|
|
+ border-right: 2rpx solid #fff;
|
|
|
+ padding: 24rpx 20rpx;
|
|
|
background-color: #fff;
|
|
|
position: relative;
|
|
|
}
|
|
@@ -223,11 +231,11 @@
|
|
|
}
|
|
|
.nav-right{
|
|
|
height: 100vh;
|
|
|
- padding: 20upx;
|
|
|
+ padding: 20rpx;
|
|
|
box-sizing: border-box;
|
|
|
.nav-right-item{
|
|
|
- padding: 20upx 30upx;
|
|
|
- border: 1upx solid #f2f2f2;
|
|
|
+ padding: 40rpx 30rpx;
|
|
|
+ border: 1rpx solid #f2f2f2;
|
|
|
background: #FFFFFF;
|
|
|
margin: 6px 0;
|
|
|
border-radius: 10px;
|
|
@@ -235,19 +243,26 @@
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
.item-name{
|
|
|
- font-size: 28upx;
|
|
|
- margin-bottom: 20upx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
}
|
|
|
.item-f-con{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
+ .handle-btns{
|
|
|
+ .btn-box{
|
|
|
+ display: inline-block;
|
|
|
+ width: 120rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ .item-btn{
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .item-btn{
|
|
|
- display: inline-block;
|
|
|
- margin-left: 20upx;
|
|
|
- width: 112upx;
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
}
|