页面型，单选
图片.png
import Taro, { Component } from "@tarojs/taro";
import { View, ScrollView, Text } from "@tarojs/components";
import { AtIcon, AtActionSheet } from "taro-ui";
import "./index.less";
import api from "../../../utils/network/request";
import user from "../../../utils/auth/user";
export default class Index extends Taro.Component {
config = {
navigationBarTitleText: "选择经营类目",
navigationBarBackgroundColor: "#EAC880"
};
state = {
treeData: [],
fisrtIndex: -1,
selectList: [], // 选中的item
selectListIds: [], // 选中的ids
visbled: false,
dataLists: []
};
componentWillMount() {
if (this.$router.params.isChange) {
const value = Taro.getStorageSync("boIndustry_choose_list");
console.log(value);
this.setState({
selectListIds: [value[0].id, value[0].pid],
selectList: value
});
}
api.request({
url: "/public/simpleIndustries",
data: {
access_token: user.getToken()
},
success: res => {
this.setState({ treeData: res.data.result });
},
error: error => {}
});
}
componentDidMount() {}
componentDidShow() {
this.setState({
boIndustryChooseOpen: true
});
}
componentDidHide() {}
options = {
addGlobalClass: false
};
// 行业类目
// 关闭事件
handleBoIndustryChooseClose = chooseData => {
Taro.setStorageSync("boIndustry_choose_list", chooseData);
if (this.$router.params.isChange == 1) {
Taro.navigateBack({
detail: 1
});
} else {
const type = Taro.getStorageSync("bo_type");
if (type == 3) {
Taro.navigateTo({
url: "/opportunity/pages/pull_supply/pull_supply"
});
}
if (type == 1 || type == 2) {
Taro.navigateTo({
url: `/opportunity/pages/pullBuyNeed/index?typeFlag=${type}`
});
}
}
this.setState({ boIndustryChooseOpen: false });
};
onClickItem = (item, index) => {
const {
treeData,
fisrtIndex,
selectList,
selectListIds,
dataLists
} = this.state;
if (!item.pid) {
this.setState({
fisrtIndex: index
});
} else {
this.setState({
selectList: [item],
selectListIds: [item.id]
});
}
};
onClickTab = () => {
const { selectList, treeData, fisrtIndex, selectListIds } = this.state;
this.setState({
fisrtIndex: -1
});
if (selectList.length == 0) {
this.setState({
fisrtIndex: -1
});
} else {
console.log(selectList[0], treeData[fisrtIndex].id);
if (selectList[0].pid == treeData[fisrtIndex].id) {
this.setState({
fisrtIndex: -1,
selectListIds: [...selectListIds, treeData[fisrtIndex].id]
});
}
}
};
render() {
const {
treeData,
fisrtIndex,
selectListIds,
selectList,
visbled,
dataLists,
noSelectId = []
} = this.state;
console.log(selectListIds);
const type = Taro.getStorageSync("bo_type");
return (
{/* 上部分 */}
请选择经营类目
已选择：
{selectList.map((item, index) => (
{item.name}
))}
{fisrtIndex !== -1 && (
this.onClickTab()} className="title">
{treeData[fisrtIndex].name}
)}
请选择
{/* 中部分 */}
{(fisrtIndex !== -1 ? treeData[fisrtIndex].child : treeData).map(
(item, index) => (
this.onClickItem(item, index)}
>
{item.name}
)
)}
{/* 下部分 */}
{
this.setState({
fisrtIndex: -1,
selectList: [], // 选中的item
selectListIds: [] // 选中的ids
});
}}
>
重置
{
if (selectList.length == 0) {
Taro.showToast({
title: `请选择`,
icon: "none",
duration: 2000
});
return;
}
this.handleBoIndustryChooseClose(selectList);
}}
>
确定
);
}
}
.modalIntr {
width : 100%;
height : 100vh;
border-radius : 12px 12px 0px 0px;
display : flex;
flex-direction : column;
justify-content: space-between;
.modalIntrTitle {
width : 100%;
font-size : 36px;
font-weight : bold;
color : rgba(51, 51, 51, 1);
display : flex;
justify-content: space-between;
box-sizing : border-box;
padding-top : 40px;
padding-left : 35px;
padding-right : 25px;
}
.tab {
display : flex;
padding-left: 35px;
}
.selectTab {
border-bottom: 5px solid #FFB100;
}
.title {
font-size : 30px;
font-weight : bold;
color : rgba(51, 51, 51, 1);
margin-right: 65px;
}
// 中
.modalIntrTop {
box-sizing: border-box;
.modalIntrContaner {
width : 100%;
display : flex;
flex-direction: column;
.treeList {
display : flex;
flex-wrap : wrap;
margin-top : 8px;
padding : 0 15px;
padding-right: 35px;
.treeItem {
padding : 14px 20px;
background : rgba(244, 245, 246, 1);
border-radius: 6px;
margin-top : 20px;
margin-left : 20px;
font-size : 26px;
color : rgba(51, 51, 51, 1);
box-sizing : border-box;
}
.SelectTreeItem {
color : #FFB100;
border : 1px solid #FFB100;
background: #fff;
padding : 14px 20px;
}
}
}
}
// 下
.modalIntrBottom {
// height : 10vh;
padding : 30px 25px;
width : 100%;
display : flex;
justify-content: space-between;
font-size : 30px;
font-weight : 550;
box-sizing : border-box;
.resetBtn {
width : 335px;
height : 80px;
border-radius : 41px;
border : 2px solid rgba(255, 177, 0, 1);
color : rgba(255, 177, 0, 1);
display : flex;
justify-content : center;
align-items : center;
// margin-right : 30px;
}
.yesBtn {
width : 335px;
height : 80px;
background : rgba(255, 177, 0, 1);
color : #FFF;
border-radius : 41px;
display : flex;
justify-content: center;
align-items : center;
}
}
}
.selectList {
display : flex;
flex-wrap : nowrap;
align-items : center;
font-size : 26px;
color : rgba(51, 51, 51, 1);
padding-left : 35px;
padding-right: 25px;
margin-top : 30px;
margin-bottom: 30px;
.selectLists {
display: flex;
width : 100vw;
}
.selectListItem {
height : 46px;
background : rgba(255, 177, 0, 0.15);
border-radius : 23px;
// opacity : 0.15;
display : flex;
justify-content : center;
align-items : center;
font-size : 26px;
font-weight : bold;
color : rgba(255, 177, 0, 1);
padding : 0 20px;
margin-right : 20px;
white-space : nowrap;
}
.selectListItemIcon {
margin-left: 10px;
}
}
.indexPages {
width : 100%;
height: 100%;
}
.indexPagese {
width : 100%;
height : 100%;
display : flex;
flex-wrap : nowrap;
align-items: center;
.indexPageses {
display : flex;
flex-wrap: nowrap;
.box {
padding : 10px 20px;
height : 56px;
background : rgba(255, 177, 0, 0.15);
border-radius: 6px;
font-size : 26px;
color : #FEBB15;
box-sizing : border-box;
margin-right : 30px;
white-space : nowrap;
}
}
.boxAdd {
display : flex;
align-items : center;
width : 48px;
height : 48px;
box-sizing : border-box;
background-color: #FFB100;
border-radius : 50%;
justify-content : center;
min-width : 48px;
padding-bottom : 5px;
margin-left : 16px;
}
}
.placehoder {
font-size: 28px;
color : #ccc;
}
图片.png
调用：
import SelectIntr from "../../components/AllSelectIntr/index";
0 ? "padding:0" : ""}
>
选择经营类目
{industryChooseList.map((item, index) => (
{item.name}
{industryChooseList.length - 1 === index ? null : "、"}
))}
{!industryChooseList.length && (
{
this.setState({
industryChooseList: e,
industryChooseOpen: false
});
}}
dataList={industryChooseList}
visbled={industryChooseOpen}
onClose={e => this.setState({ industryChooseOpen: false })}
limit={3}
/>
import Taro, { Component } from "@tarojs/taro";
import { View, ScrollView, Text } from "@tarojs/components";
import { AtIcon, AtActionSheet } from "taro-ui";
import "./index.less";
import api from "../../utils/network/request";
import user from "../../utils/auth/user";
/*
行业选择器
limit 数量
onOk 确定
placehoder // 提示语
需要包裹的View设置宽
*/
export default class Index extends Component {
state = {
treeData: [],
fisrtIndex: -1,
selectList: [], // 选中的item
selectListIds: [], // 选中的ids
visbled: false,
dataLists: []
};
componentDidMount() {
api.request({
url: "/public/simpleIndustries",
data: {
access_token: user.getToken()
},
success: res => {
this.setState({ treeData: res.data.result });
},
error: error => {}
});
}
componentWillReceiveProps(next) {
if (next.visbled) {
const dataListids = next.dataList;
const value = [];
dataListids.map(item => {
value.push(item.id);
if (item.pid && value.indexOf(item.pid) == -1) {
value.push(item.pid);
}
});
this.setState({
visbled: true,
selectList: next.dataList,
selectListIds: value
});
}
}
onClickItem = (item, index) => {
const { treeData, fisrtIndex, selectList, selectListIds } = this.state;
const data = selectList;
const dataIds = selectListIds;
// 删除
if (index == -1) {
const value = [];
const newData = data.filter(items => items.id != item.id);
newData.map(items => {
value.push(items.id);
if (items.pid && value.indexOf(items.pid) == -1) {
value.push(items.pid);
}
});
this.setState({
selectList: newData,
selectListIds: value
});
} else {
if (
selectList.length == this.props.limit &&
selectListIds.indexOf(item.id) == -1
) {
Taro.showToast({
title: `最多选择${this.props.limit}项`,
icon: "none",
duration: 2000
});
return;
}
if (item.child && item.child.length !== 0) {
this.setState({
fisrtIndex: index
});
return;
}
const newData = [];
data.map(items => {
if (items.id !== item.pid) {
newData.push(items);
}
});
this.setState({
selectList: [...newData, item],
selectListIds: [...dataIds, item.id]
});
}
};
onClickTab = () => {
const { treeData, fisrtIndex, selectListIds, selectList } = this.state;
let go = 0;
selectList.map(item => {
if (item.pid == treeData[fisrtIndex].id) go = 1;
});
this.setState({
selectList: go == 1 ? selectList : [...selectList, treeData[fisrtIndex]],
selectListIds:
selectListIds.indexOf(treeData[fisrtIndex].id) == -1
? [...selectListIds, treeData[fisrtIndex].id]
: selectListIds,
fisrtIndex: -1
});
};
render() {
const {
treeData,
fisrtIndex,
selectListIds,
selectList,
visbled
} = this.state;
return (
{
this.props.onClose();
this.setState({
fisrtIndex: -1,
selectList: [], // 选中的item
selectListIds: [], // 选中的ids
visbled: false
});
}}
>
{/* 上部分 */}
请选择经营类目(
{selectList.length} /
{this.props.limit - dataLists.length})
{
this.props.onClose();
this.setState({
fisrtIndex: -1,
selectList: [], // 选中的item
selectListIds: [], // 选中的ids
visbled: false
});
}}
/>
已选择：
{selectList.map((item, index) => (
this.onClickItem(item, -1)}
style={{ zIndex: 999 }}
>
{item.name}
))}
{fisrtIndex !== -1 && (
this.onClickTab()} className="title">
{treeData[fisrtIndex].name}
)}
请选择
{/* 中部分 */}
{(fisrtIndex !== -1
? treeData[fisrtIndex].child
: treeData
).map((item, index) => (
this.onClickItem(
item,
selectListIds.indexOf(item.id) == -1 || item.child
? index
: -1
)
}
>
{item.name}
))}
{/* 下部分 */}
{
this.setState({
fisrtIndex: -1,
selectList: [], // 选中的item
selectListIds: [] // 选中的ids
});
}}
>
重置
{
if (selectList.length == 0) {
if (fisrtIndex == -1) {
this.props.onChange([]);
this.setState({
fisrtIndex: -1,
selectList: [], // 选中的item
selectListIds: [], // 选中的ids
visbled: false
});
} else {
this.props.onChange([treeData[fisrtIndex]]);
this.setState({
fisrtIndex: -1,
selectList: [], // 选中的item
selectListIds: [], // 选中的ids
visbled: false
});
}
return;
}
if (fisrtIndex == -1) {
this.props.onChange(selectList);
} else {
let gp = 0;
selectList.map(item => {
if (item.pid == treeData[fisrtIndex].id) gp = 1;
});
this.props.onChange(
gp == 1 ? selectList : [...selectList, treeData[fisrtIndex]]
);
}
this.setState({
fisrtIndex: -1,
selectList: [], // 选中的item
selectListIds: [], // 选中的ids
visbled: false
});
}}
>
确定
);
}
}
.modalIntr {
width : 100%;
height : 90vh;
border-radius : 12px 12px 0px 0px;
display : flex;
flex-direction : column;
justify-content: space-between;
.modalIntrTitle {
width : 100%;
font-size : 36px;
font-weight : bold;
color : rgba(51, 51, 51, 1);
display : flex;
justify-content: space-between;
box-sizing : border-box;
padding-top : 40px;
padding-left : 35px;
padding-right : 25px;
}
.tab {
display : flex;
padding-left: 35px;
}
.selectTab {
border-bottom: 5px solid #FFB100;
}
.title {
font-size : 30px;
font-weight : blod;
color : rgba(51, 51, 51, 1);
margin-right: 65px;
}
// 中
.modalIntrTop {
box-sizing: border-box;
.modalIntrContaner {
width : 100%;
display : flex;
flex-direction: column;
.treeList {
display : flex;
flex-wrap : wrap;
margin-top : 8px;
padding : 0 15px;
padding-right: 35px;
.treeItem {
padding : 14px 20px;
background : rgba(244, 245, 246, 1);
border-radius: 6px;
margin-top : 20px;
margin-left : 20px;
font-size : 26px;
color : rgba(51, 51, 51, 1);
box-sizing : border-box;
}
.SelectTreeItem {
color : #FFB100;
border : 1px solid #FFB100;
background: #fff;
padding : 14px 20px;
}
}
}
}
// 下
.modalIntrBottom {
// height : 10vh;
padding : 30px 25px;
width : 100%;
display : flex;
justify-content: space-between;
font-size : 30px;
font-weight : 550;
box-sizing : border-box;
.resetBtn {
width : 335px;
height : 80px;
border-radius : 41px;
border : 2px solid rgba(255, 177, 0, 1);
color : rgba(255, 177, 0, 1);
display : flex;
justify-content : center;
align-items : center;
// margin-right : 30px;
}
.yesBtn {
width : 335px;
height : 80px;
background : rgba(255, 177, 0, 1);
color : #FFF;
border-radius : 41px;
display : flex;
justify-content: center;
align-items : center;
}
}
}
.selectList {
display : flex;
flex-wrap : nowrap;
align-items : center;
font-size : 26px;
color : rgba(51, 51, 51, 1);
padding-left : 35px;
padding-right: 25px;
margin-top : 30px;
margin-bottom: 30px;
.selectLists {
display: flex;
width : 80vw;
}
.selectListItem {
height : 46px;
background : rgba(255, 177, 0, 0.15);
border-radius : 23px;
// opacity : 0.15;
display : flex;
justify-content : center;
align-items : center;
font-size : 26px;
font-weight : bold;
color : rgba(255, 177, 0, 1);
padding : 0 20px;
margin-right : 20px;
white-space : nowrap;
}
.selectListItemIcon {
margin-left: 10px;
}
}
.indexPages {
width : 100%;
height: 100%;
}
.indexPagese {
width : 100%;
height : 100%;
display : flex;
flex-wrap : nowrap;
align-items: center;
.indexPageses {
display : flex;
flex-wrap: nowrap;
.box {
padding : 10px 20px;
height : 56px;
background : rgba(255, 177, 0, 0.15);
border-radius: 6px;
font-size : 26px;
color : #FEBB15;
box-sizing : border-box;
margin-right : 30px;
white-space : nowrap;
}
}
.boxAdd {
display : flex;
align-items : center;
width : 48px;
height : 48px;
box-sizing : border-box;
background-color: #FFB100;
border-radius : 50%;
justify-content : center;
min-width : 48px;
padding-bottom : 5px;
margin-left : 16px;
}
}
.placehoder {
font-size: 28px;
color : #ccc;
}
图片.png
调用：
import SelectIntr from "../../../../components/SelectIntr/index";
1 ? "width:82%" : "width:91%"
}>
{
this.setState({
industry_choose_list: e
});
}}
onAdd={e => {
this.setState({
industry_choose_list: [...industry_choose_list, ...e]
});
}}
placehoder="请选择经营类目"
limit={999}
dataList={industry_choose_list}
/>
import Taro, { Component } from "@tarojs/taro";
import { View, ScrollView, Text } from "@tarojs/components";
import { AtIcon, AtActionSheet } from "taro-ui";
import "./index.less";
import api from "../../utils/network/request";
import user from "../../utils/auth/user";
/*
行业选择器
limit 数量
onOk 确定
placehoder // 提示语
需要包裹的View设置宽
*/
export default class Index extends Component {
state = {
treeData: [],
fisrtIndex: -1,
selectList: [], // 选中的item
selectListIds: [], // 选中的ids
visbled: false,
dataLists: []
};
componentDidMount() {
this.setState({
dataLists: this.props.dataList
});
api.request({
url: "/public/simpleIndustries",
data: {
access_token: user.getToken()
},
success: res => {
this.setState({ treeData: res.data.result });
},
error: error => {}
});
}
componentWillReceiveProps(next) {
const { treeData } = this.state;
this.setState({
dataLists: next.dataList
});
// const value = [];
// next.dataList.map(item => {
// value.push(item.id);
// });
// const dataList = [];
// const newDataList = treeData;
// newDataList.map(item => {
// item.child = item.child
// });
// for (const i in treeData) {
// if (value.indexOf(treeData[i].id) !== -1) {
// dataList.push(treeData[i]);
// } else {
// const child = treeData[i].child || [];
// for (const c in child) {
// if (value.indexOf(child[c].id) !== -1) {
// dataList.push(child[c]);
// }
// }
// }
// }
// next.dataList.map(item => {
// if (item.pid && value.indexOf(item.pid) == -1) {
// value.push(item.pid);
// }
// });
// this.setState({
// selectListIds: value,
// selectList: dataList
// });
}
onClickItem = (item, index) => {
const {
treeData,
fisrtIndex,
selectList,
selectListIds,
dataLists
} = this.state;
if (
selectListIds.indexOf(item.id) == -1 &&
item.child == undefined &&
this.props.limit - dataLists.length == selectList.length
) {
Taro.showToast({
title: `最多选择${this.props.limit - dataLists.length}个`,
icon: "none",
duration: 2000
});
return;
}
if (
index !== -1 &&
treeData[index].child &&
treeData[index].child.length !== 0 &&
fisrtIndex == -1
) {
if (selectList.length !== 0 && selectList[0].pid !== item.id) {
this.setState({
selectList: [],
selectListIds: []
});
}
this.setState({
fisrtIndex: index
});
} else {
const value = selectList;
this.setState({
selectList:
selectListIds.indexOf(item.id) == -1
? [...selectList, item]
: value.filter(items => items.id != item.id),
selectListIds:
selectListIds.indexOf(item.id) == -1
? [...selectListIds, item.id]
: selectListIds.filter(items => items != item.id)
});
}
};
onClickTab = () => {
const { treeData, fisrtIndex, selectListIds, selectList } = this.state;
if (selectListIds.indexOf(treeData[fisrtIndex].id) == -1) {
this.setState({
selectListIds: [treeData[fisrtIndex].id, ...selectListIds],
selectList:
selectList.length == 0
? [treeData[fisrtIndex], ...selectList]
: selectList
});
}
this.setState({
fisrtIndex: -1
});
};
onClickViesble = () => {
const { dataLists } = this.state;
const selectListIds = [];
if (dataLists.length == this.props.limit) {
Taro.showToast({
title: `最多选择${this.props.limit}个`,
icon: "none",
duration: 2000
});
return;
}
dataLists.map(item => {
if (selectListIds.indexOf(item.id) == -1) {
selectListIds.push(item.id);
// if (item.pid && selectListIds.indexOf(item.pid) == -1) {
// selectListIds.push(item.pid);
// }
}
});
this.setState({
visbled: true,
selectListIds
});
this.props.onOpen();
};
render() {
const {
treeData,
fisrtIndex,
selectListIds,
selectList,
visbled,
dataLists
} = this.state;
let noSelectId = [];
dataLists.map(item => noSelectId.push(item.id));
return (
{/* 展位部分 */}
this.onClickViesble()}
style={{ display: dataLists.length == 0 ? "flex" : "none" }}
className="placehoder"
>
{this.props.placehoder}
{dataLists.map(item => (
{
const value = dataLists;
this.props.onChange(
value.filter(items => items.id !== item.id)
);
}}
key={item.id}
className="box"
>
{item.name}
))}
this.onClickViesble()}>
{
this.props.onClose();
this.setState({
fisrtIndex: -1,
selectList: [], // 选中的item
selectListIds: [], // 选中的ids
visbled: false
});
}}
>
{/* 上部分 */}
请选择经营类目(
{selectList.length} /
{this.props.limit - dataLists.length})
{
this.setState({
fisrtIndex: -1,
selectList: [], // 选中的item
selectListIds: [], // 选中的ids
visbled: false
});
this.props.onClose();
}}
/>
已选择：
{selectList.map((item, index) => (
this.onClickItem(item, -1)}
style={{ zIndex: 999 }}
>
{item.name}
))}
{fisrtIndex !== -1 && (
this.onClickTab()} className="title">
{treeData[fisrtIndex].name}
)}
请选择
{/* 中部分 */}
{(fisrtIndex !== -1
? treeData[fisrtIndex].child
: treeData
).map((item, index) => (
this.onClickItem(item, index)}
>
{item.name}
))}
{/* 下部分 */}
{
this.setState({
fisrtIndex: -1,
selectList: [], // 选中的item
selectListIds: [] // 选中的ids
});
}}
>
重置
{
if (selectList.length == 0) {
if (fisrtIndex == -1) {
Taro.showToast({
title: `请选择`,
icon: "none",
duration: 2000
});
} else {
this.props.onAdd([treeData[fisrtIndex]]);
this.setState({
fisrtIndex: -1,
selectList: [], // 选中的item
selectListIds: [], // 选中的ids
visbled: false
});
}
return;
}
this.props.onAdd(selectList);
this.setState({
fisrtIndex: -1,
selectList: [], // 选中的item
selectListIds: [], // 选中的ids
visbled: false
});
}}
>
确定
);
}
}
.modalIntr {
width : 100%;
border-radius : 12px 12px 0px 0px;
display : flex;
flex-direction : column;
justify-content: space-between;
.modalIntrTitle {
width : 100%;
font-size : 36px;
font-weight : bold;
color : rgba(51, 51, 51, 1);
display : flex;
justify-content: space-between;
box-sizing : border-box;
margin-top : 30px;
padding-left : 35px;
padding-right : 25px;
}
.tab {
display : flex;
padding-left: 35px;
}
.selectTab {
border-bottom: 5px solid #FFB100;
}
.title {
font-size : 30px;
font-weight : bold;
color : rgba(51, 51, 51, 1);
margin-right: 65px;
}
// 中
.modalIntrTop {
box-sizing: border-box;
.modalIntrContaner {
margin-top: 30px;
overflow-y: scroll;
width : 100%;
display : flex;
flex-direction: column;
.treeList {
display : flex;
flex-wrap : wrap;
padding : 0 15px;
.treeItem {
padding : 14px 20px;
background : rgba(244, 245, 246, 1);
border-radius: 6px;
margin-top : 20px;
margin-left : 20px;
font-size : 26px;
color : rgba(51, 51, 51, 1);
box-sizing : border-box;
}
.SelectTreeItem {
color : #FFB100;
border : 1px solid #FFB100;
background: #fff;
padding : 14px 20px;
}
}
}
}
// 下
.modalIntrBottom {
padding : 30px 25px;
width : 100%;
display : flex;
justify-content: space-between;
font-size : 30px;
font-weight : 550;
box-sizing : border-box;
.resetBtn {
width : 335px;
height : 80px;
border-radius : 41px;
border : 2px solid rgba(255, 177, 0, 1);
color : rgba(255, 177, 0, 1);
display : flex;
justify-content : center;
align-items : center;
}
.yesBtn {
width : 335px;
height : 80px;
background : rgba(255, 177, 0, 1);
color : #FFF;
border-radius : 41px;
display : flex;
justify-content: center;
align-items : center;
}
}
}
.selectList {
display : flex;
flex-wrap : nowrap;
align-items : center;
font-size : 26px;
color : rgba(51, 51, 51, 1);
padding-left : 35px;
padding-right: 25px;
margin-top : 30px;
margin-bottom: 30px;
.selectLists {
display: flex;
width : 100vw;
}
.selectListItem {
height : 46px;
background : rgba(255, 177, 0, 0.15);
border-radius : 23px;
display : flex;
justify-content : center;
align-items : center;
font-size : 26px;
font-weight : bold;
color : rgba(255, 177, 0, 1);
padding : 0 20px;
margin-right : 20px;
white-space : nowrap;
}
.selectListItemIcon {
margin-left: 10px;
}
}
.indexPagese {
display : flex;
flex-wrap : nowrap;
align-items: center;
.indexPageses {
display : flex;
flex-wrap: nowrap;
.box {
padding : 10px 20px;
height : 56px;
background : rgba(255, 177, 0, 0.15);
border-radius: 6px;
font-size : 26px;
color : #FEBB15;
box-sizing : border-box;
margin-right : 30px;
white-space : nowrap;
}
}
.boxAdd {
display : flex;
align-items : center;
width : 48px;
height : 48px;
line-height: 48px;
box-sizing : border-box;
background-color: #FFB100;
border-radius : 50%;
justify-content : center;
min-width : 48px;
padding-bottom : 5px;
margin-left : 16px;
}
}
.placehoder {
font-size: 28px;
color : #ccc;
}