You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

881 lines
29 KiB
Vue

3 years ago
<template>
<div class>
<a-breadcrumb class="newBreadcrumb mt0 mb16">
<a-breadcrumb-item href>
<router-link :to="{name:'merchantBack'}">
<a-icon type="home" />
</router-link>
</a-breadcrumb-item>
3 years ago
<a-breadcrumb-item>
<span @click="cancelAdd" v-if="secondBreadcrumb" style="cursor:pointer"></span>
<span v-else></span>
</a-breadcrumb-item>
<a-breadcrumb-item v-if="secondBreadcrumb">{{secondBreadcrumb}}</a-breadcrumb-item>
3 years ago
</a-breadcrumb>
3 years ago
<!-- <div v-if="secondBreadcrumb">
/
{{secondBreadcrumb}}
</div>-->
3 years ago
<div class="contentbody bodyContainer">
3 years ago
<div class="fsa pb16">
<div class="f20 fw500">{{secondBreadcrumb || '角色管理'}}</div>
<a-button class="addmemeber f14" @click="addRole('add')" v-if="secondBreadcrumb == ''">
<i class="iconfont icon-fangda"></i> 添加角色
3 years ago
</a-button>
</div>
3 years ago
<div v-if="secondBreadcrumb == ''">
<a-table :columns="columns" :data-source="roleList" :scroll="{y:480}" :pagination="false" @change="onChange" :loading="{spinning: isspinning,tip: '加载中',wrapperClassName: 'spinstyle'}" :rowKey="(record) => record.id" :locale="tablenodata">
<!-- <a slot="index" slot-scope="record, text, index">{{ index + 1 }}</a> -->
<div slot="setting" class="setting" slot-scope="text, record" style="color: #1890FF">
<a @click="secondBreadcrumb = '角色详情'">详情</a>
<a class="delete">编辑</a>
<a>删除</a>
</div>
</a-table>
<div class="pagecontainer mt16 fss">
<a-pagination :current="+pagination.pageNum" :default-current="1" :defaultPageSize="8" :total="pagination.total" @change="onChange" />
<div class="ant-pagination-options-quick-jumper f14 ml12">
<span>{{ pagination.total }}</span>跳至
<input ref="pageinput" type="text" @keyup.enter="inputpageChange" @blur="inputpageChange" />
</div>
3 years ago
</div>
3 years ago
</div>
<div v-else-if="secondBreadcrumb == '' || secondBreadcrumb == ''">
<div>
<a-form :form="roleForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" @submit.event="addSubmit">
<!-- 角色信息 -->
<div class="fw500 mb16 f16">角色信息</div>
<a-form-item class="addItem" label="角色名称:">
<a-input placeholder="请输入角色名称" v-decorator="[ 'aliasName', { rules: [{ required: true, message: '' }] }, ]" />
</a-form-item>
<a-form-item class="addItem" label="角色描述:">
<a-input placeholder="请输入角色描述" v-decorator="[ 'desp', { rules: [{ required: true, message: '' }] }, ]" />
</a-form-item>
<a-divider />
<!-- 功能权限 -->
<div class="fw500 mb16 f16">功能权限</div>
<a-form-item>
<div class>
<a-select default-value="lucy" class="mr8 ml8" style="width:360px" placeholder="请选择分组" v-decorator="['agencyTeamId',{ rules: [{ required: false, message: '请选择分组' }] },]" dropdownClassName="groupSelectDrop">
<a-select-option :value="item.roleName" v-for="(item,index) in roleList">{{item.roleName}}</a-select-option>
<!-- <div slot="dropdownRender" slot-scope="menu">
<div v-for="(item,index) in roleList" @click="choiceGroup(item)" class="groupSelectSub fsa" :key="index">
<div>{{item.roleName}}</div>
</div>
</div>-->
</a-select>
</div>
</a-form-item>
<div v-for="(item, key) in authorityList">
<a-checkbox :checked="item.checked" @change="checkboxChange(item,key)">{{item.label}}</a-checkbox>
<br />
<div class="ml24 mt16">
<a-checkbox v-for="(subItem, subIndex) in item.children" :checked="subItem.checked" :disabled="!item.checked" @change="checkboxChange(subItem,key,subIndex)">{{subItem.label}}</a-checkbox>
</div>
<a-divider />
</div>
<a-form-item>
<a-button type class="mr16" @click="cancelAdd"></a-button>
<a-button type="primary" html-type="submit">保存</a-button>
</a-form-item>
</a-form>
3 years ago
</div>
</div>
3 years ago
<div v-if="secondBreadcrumb == '角色详情' "></div>
3 years ago
</div>
</div>
</template>
<script>
export default {
// 组件名称
3 years ago
name: 'RoleManagement',
3 years ago
// 局部注册的组件
components: {},
// 组件参数 接收来自父组件的数据
props: {},
// 组件状态值
data() {
return {
3 years ago
tablenodata: {
// 空状态文本内容
emptyText: () => (
<div>
<div>
<img src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png" style="width:105px;height:90px;marginTop:20px" />
</div>
<div style="marginBottom:20px">暂无数据</div>
</div>
),
},
secondBreadcrumb: '',
roleForm: this.$form.createForm(this),
roleList: [1, 2, 3, 4],
3 years ago
pagination: {
pageNum: 1,
pageSize: 8,
total: null, //分页配置
status: 0,
keys: null,
// searchTag: 1,
},
isspinning: false,
roleList: [
{
roleDesp: '',
roleCreateTime: '2023-10-20 14:27:17',
classify: 0,
aliasName: '',
userNum: 21,
labelId: 672,
pName: '',
roleId: 145,
roleName: '稻田内测用户',
sort: 1,
roleType: 1,
labelName: '稻田内测用户',
},
{
roleDesp: '',
roleCreateTime: '2023-10-12 09:34:33',
classify: 0,
aliasName: '',
userNum: 2,
labelId: 670,
pName: '工厂职位,工单列表',
roleId: 144,
roleName: '询单客服',
sort: 2,
roleType: 1,
labelName: '询单客服',
},
{
roleDesp: '',
roleCreateTime: '2023-09-22 11:46:25',
classify: 1,
aliasName: '',
userNum: 2,
labelId: 667,
pName: '',
roleId: 143,
roleName: '管理角色',
sort: 3,
roleType: 1,
labelName: '管理角色',
},
{
roleDesp: '',
roleCreateTime: '2023-09-06 20:05:46',
classify: 1,
aliasName: '',
userNum: 1,
labelId: 662,
pName: '品牌列表,职位要求,职位特色,企业列表,总包列表,工单列表,工厂职位,工单列表,项目相册,更新助手,职位分类,逾期工单,热推职位',
roleId: 142,
roleName: '跟单客服',
sort: 4,
roleType: 1,
labelName: '跟单客服',
},
{
roleDesp: '',
roleCreateTime: '2023-08-19 18:30:20',
classify: 1,
aliasName: '',
userNum: 0,
labelId: 658,
pName: '品牌列表,职位要求,职位特色,工作台,分析页,龙虎榜,用户列表,企业列表,总包列表,后台内容,代理列表,代理线索,矩阵官网,伯才官网,一手单官网,工单列表,工厂职位,老乡列表,项目页,工厂职位,代理列表,工单列表,项目通告,项目通知,位置管理,项目相册,官网表单,账单管理,数据大屏,更新助手,项目概况,职位分类,内容管理,呼叫数据,逾期工单,热推职位,频道管理,轮播配置,活动页面,图片模板,图片模板',
roleId: 141,
roleName: '新管理员',
sort: 5,
roleType: 1,
labelName: '新管理员',
},
{
roleDesp: '',
roleCreateTime: '2023-08-11 10:48:15',
classify: 1,
aliasName: '',
userNum: 0,
labelId: 656,
pName: '品牌列表,职位要求,职位特色,工作台,企业列表,总包列表,后台内容,代理列表,代理线索,矩阵官网,伯才官网,一手单官网,工单列表,工厂职位,工单列表,项目相册,官网表单,数据看板,更新助手,项目概况,职位分类,内容管理,呼叫数据,逾期工单,热推职位,频道管理,轮播配置,活动页面,图片模板,图片模板',
roleId: 140,
roleName: '开发测试',
sort: 6,
roleType: 1,
labelName: '开发测试',
},
{
roleDesp: '',
roleCreateTime: '2023-07-31 16:03:23',
classify: 0,
aliasName: '',
userNum: 8,
labelId: 655,
pName: '代理列表',
roleId: 139,
roleName: '电话客服',
sort: 7,
roleType: 1,
labelName: '渠道拓展',
},
{
roleDesp: '',
roleCreateTime: '2023-01-29 13:53:17',
classify: 0,
aliasName: '',
userNum: 18,
labelId: 636,
pName: '',
roleId: 138,
roleName: '成员通用',
sort: 8,
roleType: 1,
labelName: '成员通用',
},
{
roleDesp: '交付中心主管',
roleCreateTime: '2020-06-09 16:26:25',
classify: 1,
aliasName: '',
userNum: 6,
labelId: 408,
pName: '品牌列表,职位要求,职位特色,工作台,分析页,龙虎榜,企业列表,总包列表,代理列表,工单列表,工厂职位,老乡列表,项目页,工厂职位,代理列表,工单列表,项目通告,项目通知,位置管理,项目相册,数据看板,数据大屏,更新助手,项目概况,职位分类,热推职位',
roleId: 106,
roleName: '项目主管',
sort: 9,
roleType: 1,
labelName: '项目主管',
},
{
roleDesp: '',
roleCreateTime: '2022-04-27 10:40:43',
classify: 1,
aliasName: '',
userNum: 5,
labelId: 616,
pName: '代理列表,工单列表,平台数据,渠道运营,代理数据,数据看板',
roleId: 136,
roleName: '渠道主管',
sort: 10,
roleType: 1,
labelName: '渠道主管',
},
{
roleDesp: '',
roleCreateTime: '2022-02-24 19:58:45',
classify: 0,
aliasName: '',
userNum: 12,
labelId: 612,
pName: '工厂职位,代理列表,工单列表',
roleId: 135,
roleName: '客户经理',
sort: 11,
roleType: 1,
labelName: '客户经理',
},
{
roleDesp: '',
roleCreateTime: '2020-08-30 10:12:30',
classify: 1,
aliasName: '',
userNum: 1,
labelId: 452,
pName: '品牌列表,职位要求,职位特色,劳动合同,业务合同,合同模板,合同企业,工资条,工作台,分析页,龙虎榜,复盘,用户列表,成员列表,企业列表,总包列表,代理列表,代理线索,工单列表,工厂职位,老乡列表,代理列表,项目相册,账单管理,数据看板,数据大屏,更新助手,内容管理,呼叫数据,逾期工单',
roleId: 117,
roleName: '财务',
sort: 12,
roleType: 1,
labelName: '财务',
},
{
roleDesp: '',
roleCreateTime: '2022-06-10 14:12:00',
classify: 0,
aliasName: '',
userNum: 0,
labelId: 622,
pName: '短信验证码,修改用户操作次数,校验姓名、身份证号,校验姓名、银行卡号',
roleId: 137,
roleName: '开发角色01',
sort: 13,
roleType: 1,
labelName: '开发角色01',
},
{
roleDesp: '',
roleCreateTime: '2021-12-27 19:36:07',
classify: 0,
aliasName: '',
userNum: 1,
labelId: 607,
pName: '品牌列表,工作台,项目列表【旧】,工单管理-襄县渠道管理代理列表1.0,推广明细,企业列表,总包列表,代理入口',
roleId: 133,
roleName: '门店店长',
sort: 14,
roleType: 1,
labelName: '门店店长',
},
{
roleDesp: '',
roleCreateTime: '2021-10-26 13:56:05',
classify: 0,
aliasName: '',
userNum: 10,
labelId: 588,
pName: '品牌列表,职位要求,职位特色,企业列表,总包列表,工厂职位,工单列表,项目相册,更新助手,职位分类',
roleId: 132,
roleName: '项目经理',
sort: 15,
roleType: 1,
labelName: '项目经理',
},
{
roleDesp: '安置专员角色',
roleCreateTime: '2021-10-14 09:37:00',
classify: 0,
aliasName: '',
userNum: 2,
labelId: 586,
pName: '',
roleId: 130,
roleName: '安置专员',
sort: 16,
roleType: 1,
labelName: '安置专员',
},
{
roleDesp: '',
roleCreateTime: '2021-10-13 16:20:01',
classify: 0,
aliasName: '',
userNum: 2,
labelId: 585,
pName: '简历采集,推荐工作,跟进入职,跟进离职,需求维护,需求列表,需求地图,品牌列表,职位要求,职位特色,工作台,在职维护,项目列表【旧】,企业列表,总包列表,后台内容,代理列表,工单列表,工厂职位',
roleId: 129,
roleName: '产品经理',
sort: 17,
roleType: 1,
labelName: '产品经理',
},
{
roleDesp: '白名单的角色,扫码、报名后,只要绑定了代理一定会触发推广事件和佣金,且佣金免审核自动发送到余额',
roleCreateTime: '2021-10-07 17:20:01',
classify: 0,
aliasName: '',
userNum: 3,
labelId: 584,
pName: '',
roleId: 128,
roleName: '代理佣金白名单',
sort: 18,
roleType: 1,
labelName: '代理佣金白名单',
},
{
roleDesp: '线下代理点拓展',
roleCreateTime: '2021-08-31 15:23:45',
classify: 0,
aliasName: '',
userNum: 2,
labelId: 582,
pName: '工作台项目列表【旧】渠道管理代理列表1.0,推广明细,企业列表,代理入口',
roleId: 126,
roleName: '招工经理',
sort: 19,
roleType: 1,
labelName: '招工经理',
},
{
roleDesp: '设计',
roleCreateTime: '2021-08-18 18:00:44',
classify: 1,
aliasName: '',
userNum: 3,
labelId: 580,
pName: '品牌列表,工作台,企业列表,项目相册,更新助手',
roleId: 125,
roleName: '平面设计',
sort: 20,
roleType: 1,
labelName: '平面设计',
},
{
roleDesp: '试用期',
roleCreateTime: '2021-05-12 10:27:09',
classify: 0,
aliasName: '',
userNum: 0,
labelId: 561,
pName: '工厂职位',
roleId: 124,
roleName: '试用',
sort: 21,
roleType: 1,
labelName: '试用',
},
{
roleDesp: '注册用户,无后台权限',
roleCreateTime: '2017-04-18 14:16:41',
classify: 0,
aliasName: '',
userNum: 7225,
labelId: 1,
pName: '',
roleId: 45,
roleName: 'A',
sort: 22,
roleType: 1,
labelName: 'A',
},
{
roleDesp: '',
roleCreateTime: '2020-11-18 20:12:40',
classify: 0,
aliasName: '',
userNum: 3,
labelId: 479,
pName: '工作台',
roleId: 122,
roleName: '新人',
sort: 23,
roleType: 1,
labelName: '新人',
},
{
roleDesp: '原”在线客服“、”流量专员“',
roleCreateTime: '2019-11-15 18:04:13',
classify: 0,
aliasName: '简历专员',
userNum: 4,
labelId: 433,
pName: '简历采集,需求列表,需求地图,复盘',
roleId: 102,
roleName: '简历专员',
sort: 24,
roleType: 1,
labelName: '简历专员',
},
{
roleDesp: '',
roleCreateTime: '2018-02-03 10:10:05',
classify: 0,
aliasName: '',
userNum: 7,
labelId: 207,
pName: '推荐工作,需求列表,需求地图,我的统计,复盘',
roleId: 87,
roleName: '职业顾问',
sort: 25,
roleType: 1,
labelName: '职业顾问',
},
{
roleDesp: '',
roleCreateTime: '2017-10-27 22:08:21',
classify: 0,
aliasName: '',
userNum: 5,
labelId: 165,
pName: '跟进入职,旧在职维护,跟进离职,需求维护,需求列表,需求地图,工资核对,品牌列表,劳动合同,服务交付,工作台,在职维护,复盘,项目列表【旧】',
roleId: 84,
roleName: '项目执行',
sort: 26,
roleType: 1,
labelName: '项目执行',
},
{
roleDesp: '',
roleCreateTime: '2020-11-03 18:25:54',
classify: 0,
aliasName: '',
userNum: 3,
labelId: 468,
pName: '劳动合同,工资条,服务交付,工作台,在职维护,在职维护',
roleId: 119,
roleName: '服务专员',
sort: 27,
roleType: 1,
labelName: '服务专员',
},
{
roleDesp: 'BD负责商务拓展',
roleCreateTime: '2017-04-15 22:01:27',
classify: 0,
aliasName: '',
userNum: 5,
labelId: 27,
pName: '工单列表,更新助手,项目概况',
roleId: 41,
roleName: '项目客服',
sort: 28,
roleType: 1,
labelName: '项目客服',
},
{
roleDesp: '',
roleCreateTime: '2020-03-12 10:13:18',
classify: 0,
aliasName: '',
userNum: 1,
labelId: 355,
pName: '需求列表需求地图业务管理分发管理业务日历简历中心渠道来源1.0,简历生产,服务交付,工作台,龙虎榜,简历公海,在职维护,匹配失败,旧服务工单,复盘,工单时间,服务工单,等待分发,彩蛋配置',
roleId: 104,
roleName: '平台运营',
sort: 29,
roleType: 1,
labelName: '平台运营',
},
{
roleDesp: '',
roleCreateTime: '2020-11-16 19:39:20',
classify: 1,
aliasName: '',
userNum: 2,
labelId: 477,
pName: '品牌列表,职位要求,职位特色,企业列表,工厂职位,项目相册,更新助手,职位分类,内容管理,热推职位,频道管理,轮播配置,活动页面,图片模板',
roleId: 121,
roleName: '内容运营',
sort: 30,
roleType: 1,
labelName: '内容运营',
},
{
roleDesp: '',
roleCreateTime: '2020-09-14 18:34:47',
classify: 0,
aliasName: '',
userNum: 4,
labelId: 458,
pName: '用户列表,成员列表,后台内容',
roleId: 118,
roleName: '公司人事',
sort: 31,
roleType: 1,
labelName: '公司人事',
},
{
roleDesp: '超级管理员',
roleCreateTime: '2017-04-13 15:27:02',
classify: 1,
aliasName: '',
userNum: 10,
labelId: 12,
pName: '简历采集推荐工作跟进入职旧在职维护跟进离职需求维护需求列表需求地图工资核对我的统计业务管理分发管理业务日历跟进入职在职管理离职管理简历中心渠道来源1.0简历生产角色管理菜单品牌列表职位要求职位特色劳动合同业务合同合同模板合同企业工资条职业顾问提成来源列表系统操作日志短信验证码修改用户操作次数校验姓名、身份证号校验姓名、银行卡号修改用户身份证照片修改用户OpenID修改模板对应的企业修改人员对应的企业合同生成PDF测试服务交付工作台龙虎榜简历公海在职维护匹配失败旧服务工单复盘线索管理线索挖掘休眠线索工单时间在职维护旧需求列表服务工单等待分发彩蛋配置项目收款结算花名库配置项',
roleId: 11,
roleName: 'admin',
sort: 32,
roleType: 0,
labelName: 'admin',
},
],
3 years ago
middleauthor: null,
authorityList: {
dtzw: {
id: 1,
label: '稻田职位',
checked: false,
children: [
{
id: 1,
label: '查看职位列表',
checked: false,
},
{
id: 2,
label: '职位详情页',
checked: false,
},
{
id: 3,
label: '报名',
checked: false,
},
],
},
wdbm: {
id: 2,
label: '我的报名',
checked: false,
children: [
{
id: 1,
label: '查看报名信息',
checked: false,
},
{
id: 2,
label: '修改报名详情',
checked: false,
},
],
},
wdlx: {
id: 3,
label: '我的老乡',
checked: false,
children: [
{
id: 1,
label: '查看老乡信息',
checked: false,
},
{
id: 2,
label: '修改老乡详情',
checked: false,
},
],
},
tdsj: {
id: 4,
label: '团队数据',
checked: false,
children: [
{
id: 1,
label: '查看数据',
checked: false,
},
],
},
xx: {
id: 5,
label: '消息',
checked: false,
children: [
{
id: 1,
label: '系统消息',
checked: false,
},
{
id: 2,
label: '团队消息',
checked: false,
},
],
},
sjht: {
id: 6,
label: '商家后台',
checked: false,
children: [
{
id: 1,
label: '我的团队',
checked: false,
},
{
id: 2,
label: '新增成员',
checked: false,
},
{
id: 3,
label: '修改成员信息',
checked: false,
},
{
id: 4,
label: '删除成员',
checked: false,
},
{
id: 5,
label: '伯才TV',
checked: false,
},
{
id: 6,
label: '数据大屏',
checked: false,
},
],
},
},
3 years ago
}
},
// 计算属性
computed: {
columns() {
const columns = [
{
title: '排序',
dataIndex: 'index',
key: 'index',
customRender: (text, row, index) => {
if (row.children) {
return ''
} else {
return index + 1
}
},
// ellipsis: true,
width: 60,
},
{
title: '角色',
dataIndex: 'roleName',
key: 'roleName',
scopedSlots: { customRender: 'roleName' },
ellipsis: true,
width: 120,
},
// {
// title: '角色',
// dataIndex: 'role',
// key: 'role',
// width: 100,
// ellipsis: true,
// },
{
title: '权限',
dataIndex: 'pName',
key: 'pName',
// width: 100,
// filters: this.groupList,
// customRender: (text, row, index) => {
// let text1
// this.groupList.forEach((item) => {
// if (item.id == text) {
// text1 = item.teamName
// }
// })
// return text1
// },
ellipsis: true,
},
// {
// title: '权限',
// dataIndex: 'permission',
// key: 'permission',
// ellipsis: true,
// },
{
title: '操作',
dataIndex: 'setting',
key: 'setting',
// sorter: (a, b) => a.userApplyOrder.localeCompare(b.userApplyOrder),
scopedSlots: { customRender: 'setting' },
ellipsis: true,
// sortOrder: sortedInfo.columnKey == "userApplyOrder" && sortedInfo.order,
// ellipsis: true,
width: 140,
},
]
return columns
},
},
// 侦听器
watch: {},
// 生命周期钩子 注:没用到的钩子请自行删除
/**
* 组件实例创建完成属性已绑定但DOM还未生成$ el属性还不存在
*/
3 years ago
beforeCreate() {},
3 years ago
created() {
this.$emit('setTitle', '角色管理')
3 years ago
this.middleauthor = JSON.parse(JSON.stringify(this.authorityList))
console.log(this.middleauthor)
3 years ago
},
/**
* el 被新创建的 vm.el 替换并挂载到实例上去之后调用该钩子
* 如果 root 实例挂载了一个文档内元素 mounted 被调用时 vm.el 也在文档内
*/
mounted() {},
// 组件方法
3 years ago
methods: {
checkboxChange(e, key, index) {
// console.log(e)
// console.log(key)
// console.log(index)
// console.log(this.authorityList[key]);
// console.log(this.authorityList[key][index]);
if (e.children) {
this.authorityList[key].checked = !this.authorityList[key].checked
} else {
this.authorityList[key].children[index].checked = !this.authorityList[key].children[index].checked
}
console.log(this.authorityList)
},
inputpageChange(e) {
const pagenumcount = this.pagination.total / this.pagination.pageSize
console.log(pagenumcount)
if (e.target.value) {
if (e.target.value > pagenumcount) {
this.pagination.pageNum = Math.ceil(pagenumcount)
} else {
this.pagination.pageNum = e.target.value
}
} else {
this.pagination.pageNum = 1
}
// this.getJobList();
this.getMemberList()
console.log(e)
},
choiceGroup() {},
onChange(e, e1, e2) {
console.log(e)
console.log(e1)
console.log(e2)
if (typeof e == 'number') {
this.pagination.pageNum = e
this.getMemberList()
}
},
addRole() {
this.secondBreadcrumb = '添加角色'
this.$forceUpdate()
},
/**
* 角色信息表单提交
*/
addSubmit() {
this.roleForm.validateFields(async (err) => {
console.log(err)
})
},
/**
* 取消编辑或者新增角色
*/
cancelAdd() {
this.secondBreadcrumb = ''
this.authorityList = JSON.parse(JSON.stringify(this.middleauthor))
},
},
3 years ago
}
</script>
<style scoped lang="less">
.addmemeber {
border: 0;
padding: 0 12px;
height: 32px;
line-height: 32px;
color: #fff;
background: #1890ff;
border-radius: 4px;
i {
font-size: 12px;
}
}
3 years ago
.addItem {
width: 468px;
}
.ant-divider {
margin: 16px 0 22px 0;
}
.delete {
border-left: 1px solid #979797;
border-right: 1px solid #979797;
padding: 0 9px;
margin: 0 9px;
}
3 years ago
</style>