<template>
<div class="main">
<div class="title">全部品牌（ 共{{zcache.page.allItem}}个 ）</div>
<!-- 搜索区 -->
<div class="searchs">
<div class="buttons">
<el-button class="button buttonlight" size="small" @click="addStore">添加品牌</el-button>
<el-button class="button buttondark" size="small" @click="storeDelStoreArr">批量删除</el-button>
</div>
<el-form class="searchzone" :inline="true" :model="data.search" label-width="auto">
<el-form-item label="关键词">
<el-input
size="small"
v-model="zdata.searchPost.keywords"
style="width:160px"
placeholder="请输入关键词"
/>
</el-form-item>
<el-button
class="button buttondark"
size="small"
@click="storeSearch"
style="margin-top:4px;"
>搜索</el-button>
</el-form>
</div>
<!-- 列表区 -->
<div class="lists">
<el-table
stripe
class="list"
ref="multipleTable"
:data="list.main"
tooltip-effect="dark"
style="width: 100%"
@selection-change="listPick"
height="calc(100vh - 360px)"
>
<el-table-column type="selection" width="60"></el-table-column>
<el-table-column prop="adminStall.name" label="品牌名称" align="center"></el-table-column>
<el-table-column prop="adminStall.type" label="品牌类型" align="center" width="120"></el-table-column>
<el-table-column prop="adminStall.principal" label="品牌负责人" align="center" width="120"></el-table-column>
<el-table-column prop="shopName" label="所属柜组" align="center" width="120"></el-table-column>
<el-table-column prop="adminStall.location" label="位置" align="center" width="120"></el-table-column>
<el-table-column prop="adminStall.signNum" label="门牌号" align="center" width="120"></el-table-column>
<el-table-column label="操作" align="center" fixed="right" width="200">
<template slot-scope="scope">
<el-button type="text" @click="storeGetStoreDetail(scope.row.adminStall.id)" class="btn">详情</el-button>
<el-button type="text" @click="storeEditStore(scope.row.adminStall.id)" class="btn">编辑</el-button>
<el-button type="text" @click="storeDelStore(scope.row.adminStall.id)" class="listButtonRed">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pages">
<el-pagination
@current-change="storePageIndexChange"
:current-page="zcache.page.nowPage"
:page-size="zcache.page.pageSize"
layout="total, prev, pager, next, jumper"
:total="zcache.page.allItem"
></el-pagination>
</div>
<add-store ref="addStore"></add-store>
<store-detail ref="storeDetail"></store-detail>
<!-- 对话框区 -->
<div class="ztask-dialogs">
<!-- New -->
<el-dialog
title="新建品牌"
:visible.sync="zcache.status.newDialog"
width="65%"
:before-close="dialogNewClose"
>
<div class="dialogMain">
<!-- <el-form :model="zdata.post" label-width="auto" ref="addStore" :rules="zrule"> -->
<el-form
:model="zdata.newPost"
label-width="auto"
ref="newStore"
style="border: 0px solid red;"
>
<!-- <el-form :model="zdata.post" label-width="auto" ref="createForm" :rules="rules"> -->
<el-form-item label="品牌名称:" prop="storeName">
<el-input
size="small"
v-model="zdata.newPost.storeName"
style="width:240px;"
placeholder="请输入品牌名称"
/>
</el-form-item>
<el-form-item label="品牌类型:" prop="storeType">
<el-select
size="small"
v-model="zdata.newPost.storeTypeId"
placeholder="请选择品牌类型"
style="width:240px"
>
<el-option
v-for="item in zlist.storeType"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="品牌负责人:" prop="people">
<el-select
size="small"
v-model="zdata.newPost.storeBossId"
placeholder="请选择品牌负责人"
style="width:240px"
@change="ztestman"
>
<el-option
v-for="item in zlist.unGroupMan"
:key="item.id"
:label="item.userName"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属柜组:" prop="counter">
<el-select
size="small"
v-model="zdata.newPost.storeFromBarId"
placeholder="请选择所属柜组"
style="width:240px"
>
<el-option
v-for="item in zlist.bar"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="门牌号:" prop="number">
<el-input
size="small"
v-model="zdata.newPost.storeDoorCode"
style="width:240px"
placeholder="请输入门牌号"
/>
</el-form-item>
<el-form-item label="位置:" prop="area">
<el-input
size="small"
v-model="zdata.newPost.storeAddress"
style="width:240px"
placeholder="请输入位置"
/>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogNewCancel">取 消</el-button>
<!-- <el-button type="primary" @click="addStoreSubmit('createForm')" size="small">确 定</el-button> -->
<el-button type="primary" @click="dialogNewSubmit" size="small">确 定</el-button>
</span>
</el-dialog>
<!-- See -->
<el-dialog
title="品牌详情"
:visible.sync="zcache.status.seeDialog"
width="50%"
:before-close="dialogSeeClose"
>
<div class="dialogMain">
<el-form :model="zdata.see" label-width="120px">
<el-row>
<el-col :span="24">
<el-form-item label="品牌名称：">
<el-input
:disabled="true"
v-model="zdata.see.storeName"
autocomplete="off"
placeholder="品牌名称缺失"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="品牌类型：">
<el-input
:disabled="true"
v-model="zdata.see.storeType"
autocomplete="off"
placeholder="品牌类型为空"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="所属柜组：">
<el-input
:disabled="true"
v-model="zdata.see.storeFromBar"
autocomplete="off"
placeholder="柜组信息未知"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="品牌负责人：">
<el-input
:disabled="true"
v-model="zdata.see.storeBossName"
autocomplete="off"
placeholder="品牌负责人未知"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="门牌号：">
<el-input
:disabled="true"
v-model="zdata.see.storeDoorId"
autocomplete="off"
placeholder="门牌号未知"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="位置：">
<el-input
:disabled="true"
v-model="zdata.see.storeAddress"
autocomplete="off"
placeholder="位置未知"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="店员：">
<el-table class="list" :data="zdata.see.storeManList" tooltip-effect="dark">
<el-table-column type="index" width="50" align="center"></el-table-column>
<el-table-column prop="userName" label="品牌名称" align="center"></el-table-column>
<el-table-column prop="userId" label="品牌类型" align="center"></el-table-column>
<el-table-column prop="mobile" label="品牌类型" align="center"></el-table-column>
</el-table>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogSeeClose">关 闭</el-button>
<!-- <el-button size="small" type="primary" @click="dialogSeeSubmitSend('seeForm')">任务下发</el-button> -->
</span>
</el-dialog>
<!-- Edit -->
<el-dialog
title="编辑品牌"
:visible.sync="zcache.status.editDialog"
width="65%"
:before-close="dialogEditClose"
>
<div class="dialogMain">
<!-- <el-form :model="zdata.post" label-width="auto" ref="addStore" :rules="zrule"> -->
<el-form
:model="zdata.editPost"
label-width="auto"
ref="editStore"
style="border: 0px solid red;"
>
<!-- <el-form :model="zdata.post" label-width="auto" ref="createForm" :rules="rules"> -->
<el-form-item label="品牌名称:" prop="storeName">
<el-input
size="small"
v-model="zdata.editPost.storeName"
style="width:240px;"
placeholder="请输入品牌名称"
/>
</el-form-item>
<el-form-item label="品牌类型:" prop="storeType">
<el-select
size="small"
v-model="zdata.editPost.storeTypeId"
placeholder="请选择品牌类型"
style="width:240px"
>
<el-option
v-for="item in zlist.storeType"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="品牌负责人:" prop="people">
<el-select
size="small"
v-model="zdata.editPost.storeBossId"
placeholder="请选择品牌负责人"
style="width:240px"
>
<el-option
v-for="item in zlist.unGroupMan"
:key="item.id"
:label="item.userName"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属柜组:" prop="counter">
<el-select
size="small"
v-model="zdata.editPost.storeFromBarId"
placeholder="请选择所属柜组"
style="width:240px"
>
<el-option
v-for="item in zlist.storeFromBarId"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="门牌号:" prop="number">
<el-input
size="small"
v-model="zdata.editPost.storeDoorCode"
style="width:240px"
placeholder="请输入门牌号"
/>
</el-form-item>
<el-form-item label="位置:" prop="area">
<el-input
size="small"
v-model="zdata.editPost.storeAddress"
style="width:240px"
placeholder="请输入位置"
/>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogEditCancel">取 消</el-button>
<!-- <el-button type="primary" @click="addStoreSubmit('createForm')" size="small">确 定</el-button> -->
<el-button type="primary" @click="dialogEditSubmit" size="small">确 定</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
import AddStore from "./components/addStore";
import StoreDetail from "./components/storeDetail";
import {
ApiStoreGetMainList,
ApiStoreGetStoreDetail,
ApiStoreDelStore,
ApiStoreGetUnGroupManList,
ApiStoreAddStore,
ApiStoreEditStore,
ApiStoreGetBarList,
ApiStoreSearch
} from "@api/in/store";
import axios from "axios";
const zlog = console.log.bind(console);
export default {
components: {
AddStore,
StoreDetail
},
data() {
return {
zcache: {
status: {
newDialog: false,
seeDialog: false,
editDialog: false,
isSearch: false
},
page: {
allItem: 0,
pageSize: 10,
nowPage: 1
}
},
zdata: {
searchPost: {
keywords: ""
},
newPost: {
storeName: "",
storeTypeId: "",
storeBossId: "",
storeFromBarId: "",
storeDoorCode: "",
storeAddress: ""
},
newPostDefault: {
storeName: "",
storeTypeId: "",
storeBossId: "",
storeFromBarId: "",
storeDoorCode: "",
storeAddress: ""
},
see: {
storeName: "storeName",
storeType: "storeType",
storeFromBar: "storeFromBar",
storeBossName: "storeBossName",
storeDoorId: "storeDoorId",
storeAddress: "storeAddress",
storeManList: [
{
userName: "Alice",
userId: "wx0001",
mobile: "110"
},
{
userName: "Bob",
userId: "wx0002",
mobile: "120"
}
]
},
edit: {},
editPost: {
id: "",
storeName: "",
storeTypeId: "",
storeBossId: "",
storeFromBarId: "",
storeDoorCode: "",
storeAddress: ""
},
editPostDefault: {
id: "",
storeName: "",
storeTypeId: "",
storeBossId: "",
storeFromBarId: "",
storeDoorCode: "",
storeAddress: ""
}
},
zlist: {
listPick: [],
storeType: [
{
id: "0",
name: "普通"
},
{
id: "1",
name: "专柜"
}
],
storeBossId: [
{
id: "2001200138020920001",
name: "王月云"
},
{
id: "2001200138020930002",
name: "李强"
}
],
storeFromBarId: [
{
id: "2001201134572130000",
name: "柜组一号"
},
{
id: "2001201135500920000",
name: "柜组二号"
}
],
unGroupMan: [],
bar: []
},
page: {
currentPage: 1,
size: 20,
total: 100
},
list: {
testMain: [
{
id: "1001",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{
id: "1002",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{
id: "1003",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{
id: "1003",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{
id: "1003",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{
id: "1003",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{
id: "1003",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
}
],
main: [],
man: [],
search: {
bar: [
{
id: "1",
name: "全部"
},
{
id: "2",
name: "测试"
}
],
taskType: [
{
id: "1",
name: "全部"
},
{
id: "2",
name: "测试"
}
]
},
listPick: []
},
tableHeight: window.innerHeight * 0.5,
data: {
search: {
bar: "",
taskType: "",
date: "",
keys: ""
},
page: {
nowPageNum: 4
}
},
msgId: "",
detailDialog: false
};
},
watch: {
// addStoreDialog() {
addStoreDialog() {
// if ((this.$refs.addStore.addStoreDialog = false)) {
// this.storeGetMainList();
// }
},
"": {
handler: function() {},
deep: true
}
},
// created() {
// this.storeGetMainList();
// zlog('--->Created!')
// },
mounted() {
// this.storeGetMainList();
this.storeSearch();
this.storeReadyBarList()
this.storeGetUnGroupManList();
},
methods: {
storeReadyBarList(){
ApiStoreGetBarList()
.then(res => {
this.zlist.bar = res.data
})
.catch(err => {
})
},
storeGetUnGroupManList() {
let postData = {};
ApiStoreGetUnGroupManList(postData)
.then(res => {
this.zlist.unGroupMan = res.data;
})
.catch(err => {});
},
storeGetBarList() {},
matchManIdAndManName(inId) {
let manList = this.list.man;
let manName = "未知";
for (let i = 0; i < this.list.man.length; i++) {
let item = manList[i];
if (item != null && item.id != null) {
if (item.id == inId) {
manName = item.userName;
}
}
}
return manName;
},
transManIdToManName() {
let mainList = this.list.main;
let id = "";
let name = "";
for (let i = 0; i < mainList.length; i++) {
if (
this.list.main[i].adminStall.principal &&
this.list.main[i].adminStall.principal != null
) {
id = this.list.main[i].adminStall.principal;
name = this.matchManIdAndManName(id);
this.list.main[i].adminStall.principal = name;
} else {
this.list.main[i].adminStall.principal = "未知";
}
}
},
storeSearch() {
if (this.zdata.searchPost.keywords == "") {
this.zcache.status.isSearch = false;
this.zcache.page.nowPage = 1;
this.storeGetMainList();
} else {
this.zcache.status.isSearch = true;
let postData = {
keyWords: this.zdata.searchPost.keywords,
pageNum: 1
};
ApiStoreSearch(postData)
.then(res => {
// let result = [];
// result.push(res.data.stallInfo);
// this.list.main = result;
// this.list.main = res.data.list;
this.list.main = res.data.pageInfo_adminStalls.list;
this.zcache.page.allItem = Number(
res.data.pageInfo_adminStalls.total
);
this.zcache.page.pageSize = res.data.pageInfo_adminStalls.pageSize;
this.zcache.page.nowPage = res.data.pageInfo_adminStalls.pageNum;
})
.catch(err => {});
}
},
storeGetMainList() {
// zlog("--->In Get API!");
let postData = {
pageNum: this.zcache.page.nowPage
};
ApiStoreGetMainList(postData).then(res => {
// this.list.main = res.data.pageInfo_adminStalls.list[0];
// this.list.man = res.data.pageInfo_principals.list[0];
this.list.main = res.data.pageInfo_adminStalls.list;
this.list.man = res.data.adminStall_principals;
this.transManIdToManName();
this.zcache.page.allItem = Number(res.data.pageInfo_adminStalls.total);
this.zcache.page.pageSize = res.data.pageInfo_adminStalls.pageSize;
this.zcache.page.nowPage = res.data.pageInfo_adminStalls.pageNum;
});
},
storePageIndexChange(inData) {
console.log("--->page: inData =", inData);
this.zcache.page.nowPage = inData;
if (this.zcache.status.isSearch) {
let postData = {
keyWords: this.zdata.searchPost.keywords,
pageNum: inData
};
ApiStoreSearch(postData)
.then(res => {
// let result = [];
// result.push(res.data.stallInfo);
// this.list.main = result;
// this.list.main = res.data.list;
this.list.main = res.data.pageInfo_adminStalls.list;
this.zcache.page.allItem = Number(
res.data.pageInfo_adminStalls.total
);
this.zcache.page.pageSize = res.data.pageInfo_adminStalls.pageSize;
this.zcache.page.nowPage = res.data.pageInfo_adminStalls.pageNum;
})
.catch(err => {});
} else {
this.zcache.page.nowPage = inData;
this.storeGetMainList();
}
},
storeGetStoreDetail(inData) {
let postData = {
isDetail: true,
stallId: inData
};
ApiStoreGetStoreDetail(postData)
.then(res => {
this.zdata.see.storeName = res.data.adminStall.name;
this.zdata.see.storeType = res.data.adminStall.type;
// this.zdata.see.storeFromBar = res.data.adminStall.shopId;
this.zdata.see.storeFromBar = res.data.shopName;
this.zdata.see.storeBossName = res.data.principal.userName;
this.zdata.see.storeDoorId = res.data.adminStall.signNum;
this.zdata.see.storeAddress = res.data.adminStall.location;
this.zdata.see.storeManList = res.data.clerks_unselected;
})
.catch(err => {});
this.zcache.status.seeDialog = true;
},
storeEditStore(inData) {
this.storeGetUnGroupManList();
this.zdata.editPost.id = Number(inData);
let postData = {
isDetail: true,
stallId: inData
};
ApiStoreGetStoreDetail(postData)
.then(res => {
this.zdata.edit = res;
let timeStoreTypeId = "";
if (res.data.adminStall.type == "普通") {
timeStoreTypeId = "0";
} else {
timeStoreTypeId = "1";
}
this.zdata.editPost.storeName = res.data.adminStall.name;
this.zdata.editPost.storeTypeId = timeStoreTypeId;
this.zdata.editPost.storeBossId = res.data.adminStall.principal;
this.zdata.editPost.storeFromBarId = res.data.adminStall.shopId;
this.zdata.editPost.storeDoorCode = res.data.adminStall.signNum;
this.zdata.editPost.storeAddress = res.data.adminStall.location;
})
.catch(err => {});
this.zcache.status.editDialog = true;
},
storeDelStore(inData) {
let delArr = [];
delArr.push(String(inData));
let postData = {
stallIds: delArr
};
ApiStoreDelStore(postData)
.then(res => {
if (res.result == "success") {
this.$message({
message: "删除成功",
type: "success"
});
this.storeGetMainList();
} else {
this.$message({
message: "删除失败！",
type: "error"
});
}
})
.catch(err => {
this.$message({
message: "删除失败！",
type: "error"
});
});
},
listPick(inData) {
this.zlist.listPick = inData;
},
storeDelStoreArr() {
let delArr = this.zlist.listPick;
let delIdsArr = [];
for (let i = 0; i < delArr.length; i++) {
delIdsArr.push(String(delArr[i].id));
}
let postData = {
stallIds: delIdsArr
};
ApiStoreDelStore(postData)
.then(res => {
if (res.result == "success") {
this.$message({
message: "删除成功",
type: "success"
});
this.storeGetMainList();
} else {
this.$message({
message: "删除失败！",
type: "error"
});
}
})
.catch(err => {
this.$message({
message: "删除失败！",
type: "error"
});
});
},
ztestman(inData){
console.log('--->ManList =', this.zlist.unGroupMan)
console.log('--->PickId =', inData, ' type =', typeof(inData))
// this.zdata.newPost.storeBossId = Number(inData)
},
dialogNewClose() {
this.zcache.status.newDialog = false;
this.zdata.newPost = JSON.parse(
JSON.stringify(this.zdata.newPostDefault)
);
},
dialogNewCancel() {
this.zcache.status.newDialog = false;
this.zdata.newPost = JSON.parse(
JSON.stringify(this.zdata.newPostDefault)
);
},
dialogNewSubmit() {
// console.log('--->PostId =', this.zdata.newPost.storeBossId * 1)
let postData = {
name: this.zdata.newPost.storeName,
// stallType: Number(this.zdata.newPost.storeTypeId),
stallType: this.zdata.newPost.storeTypeId,
principal: this.zdata.newPost.storeBossId,
shopId: this.zdata.newPost.storeFromBarId,
signNum: this.zdata.newPost.storeDoorCode,
location: this.zdata.newPost.storeAddress
};
console.log("--->postData =", postData);
ApiStoreAddStore(postData)
.then(res => {
if (res.result == "success") {
this.$message({
message: "添加成功",
type: "success"
});
this.zcache.status.newDialog = false;
this.zdata.newPost = JSON.parse(
JSON.stringify(this.zdata.newPostDefault)
);
this.storeSearch();
}
})
.catch(err => {});
},
dialogEditClose() {
this.zcache.status.editDialog = false;
this.zdata.editPost = JSON.parse(
JSON.stringify(this.zdata.editPostDefault)
);
},
dialogEditCancel() {
this.zcache.status.editDialog = false;
this.zdata.editPost = JSON.parse(
JSON.stringify(this.zdata.editPostDefault)
);
},
dialogEditSubmit() {
let postData = {
stallId: Number(this.zdata.editPost.id),
name: this.zdata.editPost.storeName,
type: String(this.zdata.editPost.storeTypeId),
principal: Number(this.zdata.editPost.storeBossId),
shopId: Number(this.zdata.editPost.storeFromBarId),
signNum: String(this.zdata.editPost.storeDoorCode),
location: this.zdata.editPost.storeAddress
};
ApiStoreEditStore(postData)
.then(res => {
if (res.result == "success") {
this.$message({
message: "编辑成功",
type: "success"
});
this.zdata.editPost = JSON.parse(
JSON.stringify(this.zdata.editPostDefault)
);
this.zcache.status.editDialog = false;
this.storeGetMainList();
} else {
this.$message({
message: "编辑失败！",
type: "error"
});
}
})
.catch(err => {
this.$message({
message: "编辑失败！",
type: "error"
});
});
},
testButtonClick() {},
pagesSizeChange() {},
pagesNowPageChange() {},
setListsHeadStyle({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return "background-color: #0B0F32; border-right: 1px solid white;color: white;";
} else {
return "";
}
},
addStore() {
// this.$refs.addStore.addStoreDialog = true;
this.zcache.status.newDialog = true;
},
handleDetail() {
this.$refs.storeDetail.detailDialog = true;
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
dialogSeeClose() {
this.zcache.status.seeDialog = false;
}
}
};
</script>
<style lang="scss" scoped>
.btn {
font-size: 14px;
font-weight: bold;
color: rgba(102, 102, 102, 1);
}
.main {
position: relative;
background-color: #fff;
box-sizing: border-box;
height: 100%;
padding: 0px 16px 16px;
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 100%;
box-shadow: 0px 2px 4px 0px #ddd;
}
.buttons {
width: 266px;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.buttonlight {
background-color: #e8e9fe;
color: #4e59c7;
border: 1px solid #4e59c7;
box-sizing: border-box;
}
.buttondark {
width: 88px;
height: 32px;
background-color: #4e59c7;
color: #ffffff;
border: 1px solid #4e59c7;
box-sizing: border-box;
}
.searchzone {
height: 40px;
width: auto;
min-width: 654px;
text-align: right;
}
.lists {
height: auto;
min-height: 70%;
width: 100%;
margin-top: 20px;
}
.listButtonRed {
color: #d0021b;
font-weight: bold;
}
.pages {
height: 40px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.title {
height: 48px;
line-height: 48px;
color: rgba(56, 56, 56, 1);
border-bottom: 1px solid #f8f8f8;
margin-bottom: 16px;
}
</style>