133 lines
2.5 KiB
Vue
133 lines
2.5 KiB
Vue
<template>
|
|
<view class="container safe-area-inset-bottom">
|
|
<MessageNotification />
|
|
<!-- 搜索 -->
|
|
<view class="search">
|
|
<u-search placeholder="输入商品名称" bg-color="#F5f5f5" color="#999999" border-color="#F5f5f5"
|
|
:show-action="false" maxlength="21" height="66" :clearabled="true" shape="round" v-model="keyword"
|
|
@search="toSearch">
|
|
</u-search>
|
|
</view>
|
|
|
|
<!-- 商品列表 -->
|
|
<view class="list">
|
|
<view class="img">
|
|
<image src="https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/xk-client-wx/static/empty/order.png" mode=""></image>
|
|
</view>
|
|
<view class="it">
|
|
<view class="it_name">【太极】藿香正气口服液 </view>
|
|
<view class="it_info">清热解毒,抗炎消肿,呼吸道感染</view>
|
|
<view class="it_price">
|
|
<text>￥10.9</text>
|
|
<image src="https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/xk-client-wx/static/home/gwc.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
keyword: "",
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods: {
|
|
// 搜索
|
|
toSearch() {
|
|
// this.getList()
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
width: 750rpx;
|
|
max-height: 100%;
|
|
min-height: 100vh;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
background: #F5F5F5;
|
|
|
|
.search {
|
|
width: 750rpx;
|
|
height: 98rpx;
|
|
margin: 0 auto;
|
|
padding: 16rpx 30rpx;
|
|
background: #fff;
|
|
|
|
.u-search {
|
|
width: 686rpx;
|
|
height: 66rpx;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
width: 710rpx;
|
|
height: 236rpx;
|
|
background: #FFFFFF;
|
|
margin: 32rpx auto 20rpx;
|
|
|
|
.img {
|
|
width: 248rpx;
|
|
height: 236rpx;
|
|
margin-right: 10rpx;
|
|
|
|
image {
|
|
width: 248rpx;
|
|
height: 236rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
.it {
|
|
flex: 1;
|
|
padding: 16rpx 30rpx;
|
|
font-family: PingFang SC-Bold, PingFang SC;
|
|
|
|
.it_name {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #232323;
|
|
}
|
|
|
|
.it_info {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
margin: 20rpx 0 48rpx 0;
|
|
}
|
|
|
|
.it_price {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
text {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #F93030;
|
|
}
|
|
|
|
image {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
border-radius: 50%;
|
|
background: #4491E9;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|