784 lines
19 KiB
Vue
784 lines
19 KiB
Vue
<template>
|
||
<view>
|
||
<view class="search-wrap" v-if="!info && type == 'member'">
|
||
<view class="header">会员信息</view>
|
||
<view class="search-box">
|
||
<view class="search-title">询问客户信息查询会员</view>
|
||
<view class="search-content">
|
||
<input placeholder="请输入会员信息" v-model="searchText" placeholder-style="font-size:0.16rem;color:#ACACAC;" @confirm="searchMember()" />
|
||
<button class="primary-btn" @click="searchMember">查询</button>
|
||
<button class="default-btn" plain="true" @click="addSwitch">录入</button>
|
||
</view>
|
||
|
||
<view class="search-desc">可查询会员账号、手机号、昵称、会员码(可使用扫码枪)、会员动态码</view>
|
||
<view class="search-tips">使用扫码枪时，光标必须在输入框内，方可进行使用</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="info-wrap" v-if="info && type == 'member'">
|
||
<view class="header">会员信息</view>
|
||
<view class="headimg-content">
|
||
<view class="headimg"><image :src="info.headimg ? $util.img(info.headimg) : $util.img('public/uniapp/default_img/head.png')"></image></view>
|
||
<view class="header-info">
|
||
<view class="name">
|
||
{{ info.nickname }}
|
||
<text v-if="info.member_level">{{ info.member_level_name }}</text>
|
||
</view>
|
||
<view class="header-info-item">
|
||
<view>电话：{{ info.mobile }}</view>
|
||
<view>性别：{{ info.sex == 0 ? '未知' : info.sex == 1 ? '男' : '女' }}</view>
|
||
<view>生日：{{ info.birthday ? $util.timeFormat(info.birthday, 'y-m-d') : '--' }}</view>
|
||
<view>注册时间：{{ info.reg_time | timeFormat }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content-data">
|
||
<view class="content-data-item">
|
||
<view class="item-title">消费券</view>
|
||
<view class="item-value">{{ (parseFloat(info.balance_money) + parseFloat(info.balance)) | moneyFormat }}</view>
|
||
<view class="item-btn" @click="recharge()">充值</view>
|
||
</view>
|
||
<view class="content-data-item">
|
||
<view class="item-title">积分</view>
|
||
<view class="item-value">{{ info.point }}</view>
|
||
<view class="item-btn"></view>
|
||
</view>
|
||
<view class="content-data-item">
|
||
<view class="item-title">优惠券（张）</view>
|
||
<view class="item-value">{{ info.coupon_num }}</view>
|
||
<view class="item-btn" @click="coupon()">查看</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content-data">
|
||
<view class="content-data-item">
|
||
<view class="item-title">总消费金额(元)</view>
|
||
<view class="item-value">{{ info.order_money | moneyFormat }}</view>
|
||
</view>
|
||
<view class="content-data-item">
|
||
<view class="item-title">消费订单数</view>
|
||
<view class="item-value">{{ info.order_num }}</view>
|
||
</view>
|
||
<view class="content-data-item">
|
||
<view class="item-title">平均客单价(元)</view>
|
||
<view class="item-value" v-if="info.order_money > 0 && info.order_num > 0">{{ (info.order_money / info.order_num) | moneyFormat }}</view>
|
||
<view class="item-value" v-else>0.00</view>
|
||
</view>
|
||
<view class="content-data-item">
|
||
<view class="item-title">上次到店时间</view>
|
||
<view class="item-value">{{ info.last_login_time ? $util.timeFormat(info.last_login_time) : '--' }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="coupon-box" v-if="info && type == 'coupon'">
|
||
<i class="iconguanbi1 iconfont " @click="type = 'member'"></i>
|
||
<view class="content-list">
|
||
<view class="content-item" v-for="(item, index) in memberCoupon" v-if="memberCoupon.length > 0">
|
||
<view class="item-title">{{ item.coupon_name }}</view>
|
||
|
||
<view class="item-content" v-if="item.type == 'reward' || item.type == 'random'">
|
||
<text>￥</text>
|
||
{{ item.money }}
|
||
</view>
|
||
<view class="item-content" v-if="item.type == 'discount'">
|
||
{{ item.discount }}
|
||
<text>折</text>
|
||
</view>
|
||
|
||
<view class="item-line"></view>
|
||
<view class="item-bottom">
|
||
<view class="item-desc" v-if="item.type == 'reward' || item.type == 'random'">满{{ item.at_least }}可用</view>
|
||
<view class="item-desc" v-if="item.type == 'discount'">满{{ item.at_least }}可用,最多优惠{{ item.discount_limit }}元</view>
|
||
<view class="item-time">{{ $util.timeFormat(item.start_time) }}至{{ $util.timeFormat(item.end_time) }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="empty" v-if="memberCoupon.length == 0">
|
||
<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
|
||
<view class="tips">暂无优惠券</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-box" v-if="!info && type == 'addmember'">
|
||
<view class="header">录入会员</view>
|
||
<view class="form-content">
|
||
<view>
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="required">*</text>
|
||
手机号：
|
||
</view>
|
||
<view class="form-inline search-wrap"><input type="number" class="form-input" v-model="memberData.mobile" placeholder="请输入会员手机号" /></view>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="required"></text>
|
||
会员名称：
|
||
</view>
|
||
<view class="form-inline search-wrap"><input type="text" class="form-input" v-model="memberData.nickname" placeholder="请输入会员昵称" /></view>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="required"></text>
|
||
性别：
|
||
</view>
|
||
<view class="form-inline search-wrap"><uni-data-checkbox v-model="memberData.sex" selectedColor="#8558FA" :localdata="sex"></uni-data-checkbox></view>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="required"></text>
|
||
生日：
|
||
</view>
|
||
<view class="form-inline">
|
||
<uni-datetime-picker :start="startDate" v-model="memberData.birthday" type="date" :clearIcon="false" @change="changeTime" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="required"></text>
|
||
会员等级：
|
||
</view>
|
||
<view class="form-inline">
|
||
<select-lay
|
||
:zindex="10"
|
||
:value="memberData.member_level"
|
||
name="names"
|
||
placeholder="请选择会员等级"
|
||
:options="memberLevelList"
|
||
@selectitem="selectMemberLevel"
|
||
></select-lay>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="form-label"></view>
|
||
<view class="form-inline">
|
||
<button type="primary" class="primary-btn" @click="addMember">确定录入</button>
|
||
<button type="primary" class="default-btn" @click="type = 'member'">返回搜索</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uniDataCheckbox from '@/components/uni-data-checkbox/uni-data-checkbox.vue';
|
||
export default {
|
||
components: {
|
||
uniDataCheckbox
|
||
},
|
||
name: 'ncMember',
|
||
props: {},
|
||
data() {
|
||
return {
|
||
memberId: 0,
|
||
searchText: '',
|
||
type: 'addmember',
|
||
memberCoupon: [],
|
||
startDate: '1900-1-1',
|
||
sex: [
|
||
{
|
||
text: '未知',
|
||
value: 0
|
||
},
|
||
{
|
||
text: '男',
|
||
value: 1
|
||
},
|
||
{
|
||
text: '女',
|
||
value: 2
|
||
}
|
||
],
|
||
memberData: {
|
||
sex: 0,
|
||
mobile: '',
|
||
nickname: '',
|
||
birthday: '',
|
||
headimg: '',
|
||
email: '',
|
||
memberlabel: [],
|
||
remark: '',
|
||
member_level: 0,
|
||
member_level_name: '',
|
||
member_code: ''
|
||
},
|
||
flag: false,
|
||
memberLevelList: []
|
||
};
|
||
},
|
||
created() {
|
||
this.getMemberLevel();
|
||
},
|
||
methods: {
|
||
selectMemberLevel(index, item) {
|
||
if (index >= 0) {
|
||
this.memberData.member_level = item.value;
|
||
this.memberData.member_level_name = item.label;
|
||
} else {
|
||
this.memberData.member_level = '';
|
||
this.memberData.member_level_name = '';
|
||
}
|
||
this.$forceUpdate();
|
||
},
|
||
// 添加图片
|
||
addImg(i) {
|
||
this.$util.upload(
|
||
1,
|
||
{
|
||
path: 'headimg'
|
||
},
|
||
res => {
|
||
if (res.length > 0) {
|
||
this.memberData.headimg = res[0];
|
||
this.$forceUpdate();
|
||
}
|
||
}
|
||
);
|
||
},
|
||
getMemberLabel() {
|
||
this.memberLabelList = [];
|
||
this.$api.sendRequest({
|
||
url: '/cashier/storeapi/MemberLabel/labellist',
|
||
data: { page: 1, page_size: 0 },
|
||
success: res => {
|
||
if (res.code == 0 && res.data) {
|
||
this.memberLabelList = res.data.list;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
getMemberLevel() {
|
||
this.memberLevelList = [];
|
||
this.$api.sendRequest({
|
||
url: '/cashier/storeapi/memberlevel/lists',
|
||
success: res => {
|
||
if (res.code == 0 && res.data) {
|
||
for (let i in res.data) {
|
||
this.memberLevelList.push({
|
||
label: res.data[i]['level_name'],
|
||
value: res.data[i]['level_id'].toString(),
|
||
disabled: false
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
addSwitch() {
|
||
this.type = 'addmember';
|
||
this.memberData.mobile = this.searchText;
|
||
},
|
||
addMember() {
|
||
if (this.verify()) {
|
||
if (this.flag) return;
|
||
this.flag = true;
|
||
this.$api.sendRequest({
|
||
url: '/cashier/storeapi/member/addMember',
|
||
data: this.memberData,
|
||
success: res => {
|
||
if (res.code == 0 && res.data) {
|
||
this.memberId = res.data;
|
||
this.type = 'member';
|
||
this.getMemberInfo();
|
||
} else {
|
||
this.$util.showToast({
|
||
title: res.message
|
||
});
|
||
}
|
||
this.flag = false;
|
||
}
|
||
});
|
||
}
|
||
},
|
||
verify() {
|
||
if (!this.memberData.mobile) {
|
||
this.$util.showToast({
|
||
title: '请输入会员手机号'
|
||
});
|
||
return false;
|
||
}
|
||
if (!/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/.test(this.memberData.mobile)) {
|
||
this.$util.showToast({
|
||
title: '请输入正确的手机号码'
|
||
});
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
changeTime(e) {
|
||
this.memberData.birthday = e;
|
||
},
|
||
recharge() {
|
||
this.$util.redirectTo('/pages/recharge/index');
|
||
},
|
||
coupon() {
|
||
this.type = 'coupon';
|
||
this.memberCoupon = [];
|
||
this.$api.sendRequest({
|
||
url: '/cashier/storeapi/member/coupon',
|
||
data: {
|
||
member_id: this.info.member_id,
|
||
page: 1,
|
||
page_size: 0
|
||
},
|
||
success: res => {
|
||
if (res.code == 0 && res.data) {
|
||
this.memberCoupon = res.data.list;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
searchMember() {
|
||
if (!/[\S]+/.test(this.searchText)) {
|
||
this.$util.showToast({ title: '请输入搜索内容' });
|
||
return;
|
||
}
|
||
|
||
this.$api.sendRequest({
|
||
url: '/cashier/storeapi/member/searchmember',
|
||
data: {
|
||
search_text: this.searchText
|
||
},
|
||
success: res => {
|
||
if (res.code == 0 && res.data) {
|
||
this.memberId = res.data.member_id;
|
||
this.searchText = '';
|
||
this.getMemberInfo();
|
||
} else {
|
||
this.$util.showToast({ title: '没有查询到对应会员' });
|
||
}
|
||
}
|
||
});
|
||
},
|
||
searchMemberByType(searchText, searchType) {
|
||
this.$api.sendRequest({
|
||
url: '/cashier/storeapi/member/searchmember',
|
||
data: {
|
||
search_text: searchText,
|
||
search_type: searchType
|
||
},
|
||
success: res => {
|
||
if (res.code == 0 && res.data) {
|
||
this.memberId = res.data.member_id;
|
||
this.searchText = '';
|
||
this.getMemberInfo();
|
||
this.type = 'member';
|
||
} else {
|
||
this.$util.showToast({ title: '没有查询到对应会员' });
|
||
}
|
||
}
|
||
});
|
||
},
|
||
getMemberInfo() {
|
||
this.$api.sendRequest({
|
||
url: '/cashier/storeapi/member/info',
|
||
data: {
|
||
member_id: this.memberId
|
||
},
|
||
success: res => {
|
||
if (res.code == 0 && res.data) {
|
||
this.$store.commit('setMemberInfo', res.data);
|
||
} else {
|
||
this.$util.showToast({ title: '未获取到会员信息' });
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
computed: {
|
||
info() {
|
||
if (!this.memberInfo) this.type = 'member';
|
||
return this.memberInfo;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.header {
|
||
height: 0.66rem;
|
||
line-height: 0.66rem;
|
||
text-align: left;
|
||
border-bottom: 0.01rem solid #e6e6e6;
|
||
color: #303133;
|
||
font-size: 0.14rem;
|
||
}
|
||
|
||
.search-wrap {
|
||
.search-box {
|
||
padding-top: 2rem;
|
||
display: flex;
|
||
align-items: center;
|
||
height: calc(100% - 0.86rem);
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
.search-title {
|
||
font-size: 0.18rem;
|
||
color: #303133;
|
||
}
|
||
.search-content {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 0.3rem;
|
||
input {
|
||
height: 0.5rem;
|
||
width: 60%;
|
||
max-width: 5rem;
|
||
background: #ffffff;
|
||
padding-left: 0.2rem;
|
||
border: 0.01rem solid #cccccc;
|
||
box-sizing: border-box;
|
||
font-size: 0.18rem;
|
||
}
|
||
button {
|
||
margin: 0;
|
||
width: 1.2rem;
|
||
height: 0.5rem;
|
||
font-size: 0.18rem;
|
||
text-align: center;
|
||
line-height: 0.5rem;
|
||
margin-right: 0.15rem;
|
||
}
|
||
}
|
||
.search-desc {
|
||
color: #909399;
|
||
font-size: 0.14rem;
|
||
margin-top: 0.3rem;
|
||
}
|
||
.search-tips {
|
||
color: $primary-color;
|
||
font-size: 0.14rem;
|
||
margin-top: 0.15rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-wrap {
|
||
.headimg-content {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 0.2rem;
|
||
.headimg {
|
||
width: 0.7rem;
|
||
height: 0.7rem;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.header-info {
|
||
margin-left: 0.15rem;
|
||
width: calc(100% - 0.85rem);
|
||
.name {
|
||
font-size: 0.16rem;
|
||
color: #303133;
|
||
text {
|
||
background: #ffffff;
|
||
border: 0.01rem solid $primary-color;
|
||
border-radius: 0.02rem;
|
||
font-size: 0.12rem;
|
||
color: $primary-color;
|
||
margin-left: 0.15rem;
|
||
padding: 0.01rem 0.04rem;
|
||
}
|
||
}
|
||
.header-info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 0.1rem;
|
||
justify-content: space-between;
|
||
view {
|
||
text-align: left;
|
||
font-size: 0.14rem;
|
||
color: #303133;
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-data {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-around;
|
||
margin-top: 0.2rem;
|
||
border: 0.01rem solid #e6e6e6;
|
||
padding: 0.25rem 0.3rem;
|
||
.content-data-item {
|
||
width: 25%;
|
||
.item-title {
|
||
font-size: 0.14rem;
|
||
font-weight: 400;
|
||
color: #303133;
|
||
opacity: 0.9;
|
||
}
|
||
.item-value {
|
||
font-size: 0.2rem;
|
||
color: #303133;
|
||
margin-top: 0.1rem;
|
||
}
|
||
.item-btn {
|
||
font-size: 0.14rem;
|
||
color: $primary-color;
|
||
margin-top: 0.05rem;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.table-data-list {
|
||
padding: 0 0.15rem;
|
||
margin-top: 0.2rem;
|
||
}
|
||
}
|
||
|
||
// 优惠券
|
||
.coupon-box {
|
||
position: relative;
|
||
padding-top: 0.3rem;
|
||
.iconfont {
|
||
position: absolute;
|
||
right: 0.2rem;
|
||
top: 0.2rem;
|
||
font-size: 0.24rem;
|
||
cursor: pointer;
|
||
}
|
||
.content-list {
|
||
padding: 0.2rem 0rem;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.content-item {
|
||
width: calc((100% - 0.2rem) / 3);
|
||
position: relative;
|
||
background-color: #fff;
|
||
box-shadow: 0 0 0.15rem rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: baseline;
|
||
border-radius: 0.05rem;
|
||
border: 0.01rem solid #eee !important;
|
||
margin-right: 0.1rem;
|
||
box-sizing: border-box;
|
||
margin-bottom: 0.1rem;
|
||
.item-title {
|
||
color: #000;
|
||
font-size: 0.15rem;
|
||
padding: 0.15rem 0 0 0.15rem;
|
||
}
|
||
.item-content {
|
||
color: #fe2278;
|
||
font-size: 0.24rem;
|
||
padding: 0.15rem 0.1rem;
|
||
width: 100%;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
font-weight: 600;
|
||
}
|
||
.item-line {
|
||
height: 0.01rem;
|
||
width: 100%;
|
||
border-top: 0.01rem dashed rgba(0, 0, 0, 0.2);
|
||
position: relative;
|
||
}
|
||
.item-line:before {
|
||
content: ' ';
|
||
position: absolute;
|
||
top: -0.13rem;
|
||
left: -0.01rem;
|
||
box-sizing: border-box;
|
||
height: 0;
|
||
width: 0;
|
||
border-bottom: solid 0.12rem transparent;
|
||
border-top: solid 0.12rem transparent;
|
||
border-left: solid 0.08rem #f2f2f2;
|
||
}
|
||
.item-line:after {
|
||
content: ' ';
|
||
position: absolute;
|
||
top: -0.13rem;
|
||
right: -0.01rem;
|
||
box-sizing: border-box;
|
||
height: 0;
|
||
width: 0;
|
||
border-bottom: solid 0.12rem transparent;
|
||
border-top: solid 0.12rem transparent;
|
||
border-right: solid 0.08rem #f2f2f2;
|
||
}
|
||
.item-bottom {
|
||
width: 100%;
|
||
padding: 0.05rem 0.15rem;
|
||
color: #999;
|
||
font-size: 0.12rem;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
.content-item:nth-child(3n) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
.empty {
|
||
text-align: center;
|
||
padding-top: 1.2rem;
|
||
margin: 0 auto;
|
||
image {
|
||
width: 2rem;
|
||
}
|
||
|
||
.tips {
|
||
color: #999;
|
||
margin-top: 0.15rem;
|
||
}
|
||
}
|
||
|
||
// 录入会员
|
||
.form-box {
|
||
.form-content {
|
||
margin-top: 0.2rem;
|
||
|
||
.form-item {
|
||
margin-bottom: 0.1rem;
|
||
display: flex;
|
||
.form-label {
|
||
width: 1.3rem;
|
||
text-align: right;
|
||
padding-right: 0.1rem;
|
||
box-sizing: border-box;
|
||
height: 0.32rem;
|
||
line-height: 0.32rem;
|
||
.required {
|
||
color: red;
|
||
margin-right: 0.03rem;
|
||
}
|
||
}
|
||
.form-inline {
|
||
width: 2.4rem;
|
||
line-height: 0.32rem;
|
||
margin-right: 0.1rem;
|
||
box-sizing: border-box;
|
||
.form-input {
|
||
border-width: 0.01rem;
|
||
border-style: solid;
|
||
background-color: #fff;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
border-radius: 0.02rem;
|
||
padding-left: 0.1rem;
|
||
height: 0.32rem;
|
||
line-height: 0.32rem;
|
||
font-size: 0.14rem;
|
||
border-color: #e6e6e6;
|
||
border-radius: 0.02rem;
|
||
}
|
||
.form-textarea {
|
||
border-width: 0.01rem;
|
||
border-style: solid;
|
||
background-color: #fff;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
border-radius: 0.02rem;
|
||
padding-left: 0.1rem;
|
||
line-height: 0.32rem;
|
||
font-size: 0.14rem;
|
||
border-color: #e6e6e6;
|
||
height: 1rem;
|
||
}
|
||
button {
|
||
width: calc(50% - 0.05rem);
|
||
display: inline-block;
|
||
margin-right: 0.1rem;
|
||
&:nth-child(2) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
.upload-box {
|
||
width: 0.7rem;
|
||
height: 0.7rem;
|
||
cursor: pointer;
|
||
.upload-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 0.01rem solid #e6e6e6;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.upload-icon {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 0.01rem solid #e6e6e6;
|
||
align-items: center;
|
||
text-align: center;
|
||
line-height: 1.2;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
color: #999;
|
||
.iconfont {
|
||
font-size: 0.3rem;
|
||
}
|
||
view {
|
||
font-size: 0.12rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.search-wrap {
|
||
position: relative;
|
||
i {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 0.1rem;
|
||
transform: translateY(-50%);
|
||
border-left: 0.01rem solid #e6e6e6;
|
||
line-height: 0.3rem;
|
||
padding-left: 0.1rem;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.label-list {
|
||
width: calc(100% - 1.35rem);
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
.label-item {
|
||
border: 0.01rem solid #e6e6e6;
|
||
padding: 0.07rem 0.1rem;
|
||
line-height: 1;
|
||
margin-right: 0.1rem;
|
||
border-radius: 0.03rem;
|
||
cursor: pointer;
|
||
position: relative;
|
||
margin-bottom: 0.1rem;
|
||
i {
|
||
position: absolute;
|
||
right: -0.01rem;
|
||
bottom: -0.01rem;
|
||
color: $primary-color;
|
||
display: none;
|
||
}
|
||
&.active {
|
||
border-color: $primary-color;
|
||
i {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|