|
|
@@ -0,0 +1,571 @@
|
|
|
+<template>
|
|
|
+ <view class="container supplier clearfix">
|
|
|
+ <view class="supplier-search clearfix">
|
|
|
+ <view class="search-from name">
|
|
|
+ <text class="iconfont icon-sousuo"></text>
|
|
|
+ <input class="input"
|
|
|
+ type="text"
|
|
|
+ confirm-type="search"
|
|
|
+ v-model="searchInputVal"
|
|
|
+ @input="onShowClose"
|
|
|
+ @confirm="initsupplierList()"
|
|
|
+ placeholder="请输入供应商名称"
|
|
|
+ maxlength="16"/>
|
|
|
+ <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
|
|
|
+ </view>
|
|
|
+ <view class="search-btn">
|
|
|
+ <button class="search-btn" type="default" @click.stop="searchsupplierList">搜索</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="supplier-main">
|
|
|
+ <view v-if="isEmpty" class="empty-container">
|
|
|
+ <image class="supplier-empty-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png" mode="aspectFit"></image>
|
|
|
+ <view class="txt">暂无供应商数据</view>
|
|
|
+ </view>
|
|
|
+ <view v-else class="supplier-list">
|
|
|
+ <view class="list clearfix" v-for="(item, index) in supplierList" :key="index">
|
|
|
+ <view class="list-top">
|
|
|
+ <view class="list-top-supplier" @click="goSupplier">
|
|
|
+ <view class="logo"><img :src="item.image" alt=""></view>
|
|
|
+ <view class="main">
|
|
|
+ <view class="name">{{ item.name }}</view>
|
|
|
+ <view class="massgs">
|
|
|
+ <view class="label">满意度:</view>
|
|
|
+ <view class="p-stars">
|
|
|
+ <uni-stars :stars="6" :iconClass="iconClass" :iconColor="iconColor" :fontSize="36" :widthInfo="176"></uni-stars>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="right"><text class="iconfont icon-xiayibu"></text></view>
|
|
|
+ </view>
|
|
|
+ <view class="list-top-msg">
|
|
|
+ <view class="msg-pin clearfix">
|
|
|
+ <view class="label">经营品项:</view>
|
|
|
+ <view class="label-li">
|
|
|
+ <text class="text" v-for="(label, idx) in item.labels" :key="idx">{{ label.text }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="msg-pin clearfix">
|
|
|
+ <view class="label">经营品项:</view>
|
|
|
+ <view class="label-text">广东省深圳市</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-bottom">
|
|
|
+ <view class="pros-item" v-for="(pros, pdx) in item.list" :key="pdx">
|
|
|
+ <image class="pros-item-image" :src="pros.image" mode="scaleToFill"></image>
|
|
|
+ <view class="pros-name">{{ pros.name }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!--加载loadding-->
|
|
|
+ <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
|
|
|
+ <tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
|
|
|
+ <!--加载loadding-->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import authorize from '@/common/config/authorize.js'
|
|
|
+ import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
|
|
|
+ import tuiNomore from "@/components/tui-components/nomore/nomore"
|
|
|
+ import uniStars from '@/components/uni-stars/uni-stars.vue'
|
|
|
+
|
|
|
+ import { getFindAllsupplierList } from "@/api/seller.js"
|
|
|
+ export default {
|
|
|
+ components:{
|
|
|
+ tuiLoadmore,
|
|
|
+ tuiNomore,
|
|
|
+ uniStars
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ iconClass:'icon-aixin',
|
|
|
+ iconColor:'#ff9100',
|
|
|
+ serviceProviderId:'',
|
|
|
+ isShowClose:false,
|
|
|
+ searchInputVal:'',
|
|
|
+ isEmpty:false,
|
|
|
+ nomoreText: '上拉显示更多',
|
|
|
+ pageNum:1,
|
|
|
+ pageSize:10,
|
|
|
+ hasNextPage:false,
|
|
|
+ loadding: false,
|
|
|
+ pullUpOn: true,
|
|
|
+ pullFlag: true,
|
|
|
+ allowDataStatus:true,
|
|
|
+ wrapperHeight:'100%',
|
|
|
+ scrollHeight:'',
|
|
|
+ deleteAddressId:'',
|
|
|
+ currPage:'',//当前页面
|
|
|
+ prevPage:'',//上一个页面
|
|
|
+ tabCurrentIndex:0,
|
|
|
+ listStatus:1,
|
|
|
+ supplierList:[
|
|
|
+ {
|
|
|
+ image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
|
|
|
+ name:'北京恩盛众成国际贸易有限公司',
|
|
|
+ labels:[
|
|
|
+ {text:'仪器护理类'},
|
|
|
+ {text:'仪器护理类'},
|
|
|
+ {text:'仪器护理类'},
|
|
|
+ {text:'仪器护理类'}
|
|
|
+ ],
|
|
|
+ areatext:'广东省深圳市福田区',
|
|
|
+ list:[
|
|
|
+ {
|
|
|
+ image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
|
|
|
+ name:'北京恩盛众成国际贸易有限公司',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
|
|
|
+ name:'北京恩盛众成国际贸易有限公司',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
|
|
|
+ name:'北京恩盛众成国际贸易有限公司',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },{
|
|
|
+ image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
|
|
|
+ name:'北京恩盛众成国际贸易有限公司',
|
|
|
+ labels:[
|
|
|
+ {text:'仪器护理类'},
|
|
|
+ {text:'仪器护理类'},
|
|
|
+ {text:'仪器护理类'},
|
|
|
+ {text:'仪器护理类'}
|
|
|
+ ],
|
|
|
+ areatext:'广东省深圳市福田区',
|
|
|
+ list:[
|
|
|
+ {
|
|
|
+ image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
|
|
|
+ name:'北京恩盛众成国际贸易有限公司',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
|
|
|
+ name:'北京恩盛众成国际贸易有限公司',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
|
|
|
+ name:'北京恩盛众成国际贸易有限公司',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },{
|
|
|
+ image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
|
|
|
+ name:'北京恩盛众成国际贸易有限公司',
|
|
|
+ labels:[
|
|
|
+ {text:'仪器护理类'},
|
|
|
+ {text:'仪器护理类'},
|
|
|
+ {text:'仪器护理类'},
|
|
|
+ {text:'仪器护理类'}
|
|
|
+ ],
|
|
|
+ areatext:'广东省深圳市福田区',
|
|
|
+ list:[
|
|
|
+ {
|
|
|
+ image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
|
|
|
+ name:'北京恩盛众成国际贸易有限公司',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
|
|
|
+ name:'北京恩盛众成国际贸易有限公司',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
|
|
|
+ name:'北京恩盛众成国际贸易有限公司',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },{
|
|
|
+ image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
|
|
|
+ name:'北京恩盛众成国际贸易有限公司',
|
|
|
+ labels:[
|
|
|
+ {text:'仪器护理类'},
|
|
|
+ {text:'仪器护理类'},
|
|
|
+ {text:'仪器护理类'},
|
|
|
+ {text:'仪器护理类'}
|
|
|
+ ],
|
|
|
+ areatext:'广东省深圳市福田区',
|
|
|
+ list:[
|
|
|
+ {
|
|
|
+ image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
|
|
|
+ name:'北京恩盛众成国际贸易有限公司',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
|
|
|
+ name:'北京恩盛众成国际贸易有限公司',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
|
|
|
+ name:'北京恩盛众成国际贸易有限公司',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ isIphoneX:this.$store.state.isIphoneX,
|
|
|
+ show_index:0,//控制显示那个组件
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(){
|
|
|
+ this.setScrollHeight();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setScrollHeight() {
|
|
|
+ // 窗口高度 - 底部距离
|
|
|
+ setTimeout(()=> {
|
|
|
+ const query = wx.createSelectorQuery().in(this);
|
|
|
+ query.selectAll('.add-btn').boundingClientRect();
|
|
|
+ query.exec(res => {
|
|
|
+ if(res[0][0]){
|
|
|
+ let winHeight = this.$api.getWindowHeight(),
|
|
|
+ eleTop = res[0][0].top - 1;
|
|
|
+ this.scrollHeight = eleTop;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, 500)
|
|
|
+ },
|
|
|
+ searchsupplierList(){
|
|
|
+ this.pageNum=1
|
|
|
+ this.initsupplierList()
|
|
|
+ },
|
|
|
+ initsupplierList(){
|
|
|
+ let params = { searchWord:this.searchInputVal,pageNum:1,pageSize:this.pageSize }
|
|
|
+ getFindAllsupplierList(params).then(response =>{
|
|
|
+ let responseData = response.data
|
|
|
+ if(responseData.results&&responseData.results.length > 0){
|
|
|
+ this.isEmpty = false
|
|
|
+ this.hasNextPage = response.data.hasNextPage
|
|
|
+ this.supplierList =responseData.results
|
|
|
+ this.pullFlag = false;
|
|
|
+ setTimeout(()=>{this.pullFlag = true;},500)
|
|
|
+ if(this.hasNextPage){
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ }else{
|
|
|
+ this.pullUpOn = true
|
|
|
+ this.loadding = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.isEmpty = true
|
|
|
+ }
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getOnReachBottomData(){
|
|
|
+ this.pageNum+=1
|
|
|
+ let params = {searchWord:this.searchInputVal,pageNum:this.pageNum,pageSize:this.pageSize }
|
|
|
+ getFindAllsupplierList(params).then(response =>{
|
|
|
+ let responseData = response.data
|
|
|
+ if(responseData.results&&responseData.results.length > 0){
|
|
|
+ this.hasNextPage = response.data.hasNextPage
|
|
|
+ this.supplierList = this.supplierList.concat(responseData.results)
|
|
|
+ this.pullFlag = false;// 防上拉暴滑
|
|
|
+ setTimeout(()=>{this.pullFlag = true;},500)
|
|
|
+ if(this.hasNextPage){
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ }else{
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.loadding = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goOperator(item){
|
|
|
+ this.$api.setStorage('orderUserInfo',item)
|
|
|
+ this.$api.navigateTo('/seller/pages/supplier/addoperator')
|
|
|
+ },
|
|
|
+ onShowClose () {//输入框失去焦点时触发
|
|
|
+ if(this.searchInputVal != ''){
|
|
|
+ this.isShowClose = true
|
|
|
+ }else{
|
|
|
+ this.isShowClose = false
|
|
|
+ this.pageNum=1
|
|
|
+ this.initsupplierList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ delInputText(){//清除输入框内容
|
|
|
+ this.searchInputVal = ''
|
|
|
+ this.isShowClose = false
|
|
|
+ this.pageNum=1
|
|
|
+ this.initsupplierList()
|
|
|
+ },
|
|
|
+ hidePhone(val){
|
|
|
+ let phone
|
|
|
+ if(val==null || val==""){
|
|
|
+ phone = ""
|
|
|
+ }else{
|
|
|
+ phone = this.$reg.hidePhone(val)
|
|
|
+ }
|
|
|
+ return phone
|
|
|
+ },
|
|
|
+ checkData (value){
|
|
|
+ let data;
|
|
|
+ if(value == null || value ==""){
|
|
|
+ data = ''
|
|
|
+ }else{
|
|
|
+ data = value
|
|
|
+ }
|
|
|
+ return data
|
|
|
+ },
|
|
|
+ desensitizationName(val){
|
|
|
+ let name = this.$reg.desensitizationName(val)
|
|
|
+ return name
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if(this.hasNextPage){
|
|
|
+ this.loadding = true
|
|
|
+ this.pullUpOn = true
|
|
|
+ this.getOnReachBottomData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.$api.getStorage().then(response =>{
|
|
|
+ this.serviceProviderId = response.serviceProviderID
|
|
|
+ this.pageNum = 1;
|
|
|
+ this.initsupplierList();
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang='scss'>
|
|
|
+ page {
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ page,.container{
|
|
|
+ /* padding-bottom: 120upx; */
|
|
|
+ background: #F7F7F7;
|
|
|
+ }
|
|
|
+ .container{
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .supplier {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .supplier-search{
|
|
|
+ height: 64rpx;
|
|
|
+ width: 702rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 999;
|
|
|
+ .search-from{
|
|
|
+ width: 582rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ background: #F7F7F7;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ .input{
|
|
|
+ width: 500rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ float: left;
|
|
|
+ line-height: 64rpx;
|
|
|
+ color: $text-color;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+ .icon-sousuo{
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ text-align: center;
|
|
|
+ display: block;
|
|
|
+ font-size: $font-size-38;
|
|
|
+ float: left;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .icon-shanchu1{
|
|
|
+ font-size: $font-size-32;
|
|
|
+ color: #999999;
|
|
|
+ position: absolute;
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ text-align: center;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-btn{
|
|
|
+ width: 120rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ float: left;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .supplier-main{
|
|
|
+ padding-top: 112rpx;
|
|
|
+ }
|
|
|
+ .list{
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ background-color:#FFFFFF ;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .list-top{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ .list-top-msg{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 115rpx;
|
|
|
+ .msg-pin{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ .label{
|
|
|
+ float: left;
|
|
|
+ line-height: 37rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .label-li{
|
|
|
+ width: 476rpx;
|
|
|
+ float: left;
|
|
|
+ line-height: 37rpx;
|
|
|
+ .text{
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 8rpx;
|
|
|
+ height: 33rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ background-color: #86b2fb;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 33rpx;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ text-align: center;
|
|
|
+ margin: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .label-text{
|
|
|
+ line-height: 37rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #999999;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-top-supplier{
|
|
|
+ width: 100%;
|
|
|
+ height: 140rpx;
|
|
|
+ padding: 30rpx 0 10rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .logo{
|
|
|
+ width: 90rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ float: left;
|
|
|
+ border: 1px solid #efefef;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main{
|
|
|
+ width: 470rpx;
|
|
|
+ height: 92rpx;
|
|
|
+ float: left;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ .name{
|
|
|
+ width: 100%;
|
|
|
+ line-height: 46rpx;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ float: right;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .massgs{
|
|
|
+ width: 100%;
|
|
|
+ line-height: 46rpx;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #999999;
|
|
|
+ .label{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .p-stars{
|
|
|
+ float: left;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon-xiayibu{
|
|
|
+ line-height: 154rpx;
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ width: 48rpx;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ color: #b2b2b2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-bottom{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ .pros-item{
|
|
|
+ width: 220rpx;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ &:last-child{
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .pros-item-image{
|
|
|
+ width: 218rpx;
|
|
|
+ height: 218rpx;
|
|
|
+ display: block;
|
|
|
+ float: left;
|
|
|
+ border: 1px solid #EBEBEB;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ }
|
|
|
+ .pros-name{
|
|
|
+ width: 100%;
|
|
|
+ height: 54rpx;
|
|
|
+ line-height: 54rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #666666;
|
|
|
+ white-space: normal;
|
|
|
+ word-break: break-all;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
