Add other translations

This commit is contained in:
Lorenzo
2025-06-27 00:39:00 +02:00
parent 0b3472d227
commit adc3ab7e0a
12 changed files with 2167 additions and 1929 deletions
@@ -4,317 +4,333 @@ import SuiteValue from "./suite-value.vue";
import SuiteValueEdit from "./suite-value-edit.vue";
import PriceEdit from "./price-edit.vue";
import DurationPriceValue from "/@/views/sys/suite/product/duration-price-value.vue";
import { useI18n } from "vue-i18n";
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
const emit = context.emit;
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }: EditReq) => {
form.id = row.id;
const res = await api.UpdateObj(form);
return res;
};
const delRequest = async ({ row }: DelReq) => {
return await api.DelObj(row.id);
};
const { t } = useI18n();
const emit = context.emit;
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }: EditReq) => {
form.id = row.id;
const res = await api.UpdateObj(form);
return res;
};
const delRequest = async ({ row }: DelReq) => {
return await api.DelObj(row.id);
};
const addRequest = async ({ form }: AddReq) => {
const res = await api.AddObj(form);
return res;
};
const addRequest = async ({ form }: AddReq) => {
const res = await api.AddObj(form);
return res;
};
return {
crudOptions: {
table: {
onRefreshed: () => {
emit("refreshed");
}
},
search: {
show: false
},
request: {
pageRequest,
addRequest,
editRequest,
delRequest
},
pagination: {
show: false,
pageSize: 999999
},
rowHandle: {
minWidth: 200,
fixed: "right"
},
form: {
group: {
groups: {
base: {
header: "基础信息",
columns: ["title", "type", "disabled", "order", "supportBuy", "intro"]
},
content: {
header: "套餐内容",
columns: ["content.maxDomainCount", "content.maxPipelineCount", "content.maxDeployCount", "content.maxMonitorCount"]
},
price: {
header: "价格",
columns: ["durationPrices"]
}
}
}
},
columns: {
// id: {
// title: "ID",
// key: "id",
// type: "number",
// column: {
// width: 100
// },
// form: {
// show: false
// }
// },
title: {
title: "套餐名称",
type: "text",
search: {
show: true
},
form: {
rules: [{ required: true, message: "此项必填" }]
},
column: {
width: 200
}
},
type: {
title: "类型",
type: "dict-select",
editForm: {
component: {
disabled: true
}
},
dict: dict({
data: [
{ label: "套餐", value: "suite" },
{ label: "加量包", value: "addon" }
]
}),
form: {
value: "suite",
rules: [{ required: true, message: "此项必填" }],
helper: "套餐:同一时间只有最新购买的一个生效\n加量包:可购买多个,购买后立即生效,不影响套餐\n套餐和加量包数量可叠加"
},
column: {
width: 80,
align: "center"
},
valueBuilder: ({ row }) => {
if (row.content) {
row.content = JSON.parse(row.content);
}
if (row.durationPrices) {
row.durationPrices = JSON.parse(row.durationPrices);
}
},
valueResolve: ({ form }) => {
if (form.content) {
form.content = JSON.stringify(form.content);
}
if (form.durationPrices) {
form.durationPrices = JSON.stringify(form.durationPrices);
}
}
},
"content.maxDomainCount": {
title: "域名数量",
type: "text",
form: {
key: ["content", "maxDomainCount"],
component: {
name: SuiteValueEdit,
vModel: "modelValue",
unit: "个"
},
rules: [{ required: true, message: "此项必填" }]
},
column: {
width: 100,
component: {
name: SuiteValue,
vModel: "modelValue",
unit: "个"
}
}
},
"content.maxPipelineCount": {
title: "流水线数量",
type: "text",
form: {
key: ["content", "maxPipelineCount"],
component: {
name: SuiteValueEdit,
vModel: "modelValue",
unit: "条"
},
rules: [{ required: true, message: "此项必填" }]
},
column: {
width: 100,
component: {
name: SuiteValue,
vModel: "modelValue",
unit: "条"
}
}
},
"content.maxDeployCount": {
title: "部署次数",
type: "text",
form: {
key: ["content", "maxDeployCount"],
component: {
name: SuiteValueEdit,
vModel: "modelValue",
unit: "次"
},
rules: [{ required: true, message: "此项必填" }]
},
column: {
width: 100,
component: {
name: SuiteValue,
vModel: "modelValue",
unit: "次"
}
}
},
"content.maxMonitorCount": {
title: "证书监控数量",
type: "text",
form: {
key: ["content", "maxMonitorCount"],
component: {
name: SuiteValueEdit,
vModel: "modelValue",
unit: "个"
},
rules: [{ required: true, message: "此项必填" }]
},
column: {
width: 120,
component: {
name: SuiteValue,
vModel: "modelValue",
unit: "个"
}
}
},
durationPrices: {
title: "时长及价格",
type: "text",
form: {
title: "选择时长",
component: {
name: PriceEdit,
vModel: "modelValue",
edit: true,
style: {
minHeight: "120px"
}
},
col: {
span: 24
},
rules: [{ required: true, message: "此项必填" }]
},
column: {
component: {
name: DurationPriceValue,
vModel: "modelValue"
},
width: 350
}
},
supportBuy: {
title: "支持购买",
type: "dict-switch",
dict: dict({
data: [
{ label: "支持购买", value: true, color: "success" },
{ label: "不能购买", value: false, color: "gray" }
]
}),
form: {
value: true
},
column: {
width: 120
}
},
disabled: {
title: "上下架",
type: "dict-radio",
dict: dict({
data: [
{ value: false, label: "上架", color: "green" },
{ value: true, label: "下架", color: "gray" }
]
}),
form: {
value: false
},
column: {
width: 100
}
},
order: {
title: "排序",
type: "number",
form: {
helper: "越小越靠前",
value: 0
},
column: {
width: 100
}
},
intro: {
title: "说明",
type: "textarea",
column: {
width: 200
}
},
createTime: {
title: "创建时间",
type: "datetime",
form: {
show: false
},
column: {
sorter: true,
width: 160,
align: "center"
}
},
updateTime: {
title: "更新时间",
type: "datetime",
form: {
show: false
},
column: {
show: true,
width: 160
}
}
}
}
};
return {
crudOptions: {
table: {
onRefreshed: () => {
emit("refreshed");
}
},
search: {
show: false
},
request: {
pageRequest,
addRequest,
editRequest,
delRequest
},
pagination: {
show: false,
pageSize: 999999
},
rowHandle: {
minWidth: 200,
fixed: "right"
},
form: {
group: {
groups: {
base: {
header: t('certd.basicInfo'),
columns: [
t('certd.titlea'),
t('certd.type'),
t('certd.disabled'),
t('certd.ordera'),
t('certd.supportBuy'),
t('certd.intro')
]
},
content: {
header: t('certd.packageContent'),
columns: [
t('certd.maxDomainCount'),
t('certd.maxPipelineCount'),
t('certd.maxDeployCount'),
t('certd.maxMonitorCount')
]
},
price: {
header: t('certd.price'),
columns: [
t('certd.durationPrices')
]
}
}
}
}
columns: {
// id: {
// title: "ID",
// key: "id",
// type: "number",
// column: {
// width: 100
// },
// form: {
// show: false
// }
// },
title: {
title: t('certd.packageName'),
type: "text",
search: {
show: true
},
form: {
rules: [{ required: true, message: t('certd.requiredField') }]
},
column: {
width: 200
}
},
type: {
title: t('certd.type'),
type: "dict-select",
editForm: {
component: {
disabled: true
}
},
dict: dict({
data: [
{ label: t('certd.suite'), value: "suite" },
{ label: t('certd.addon'), value: "addon" }
]
}),
form: {
value: "suite",
rules: [{ required: true, message: t('certd.requiredField') }],
helper: t('certd.typeHelper')
},
column: {
width: 80,
align: "center"
},
valueBuilder: ({ row }) => {
if (row.content) {
row.content = JSON.parse(row.content);
}
if (row.durationPrices) {
row.durationPrices = JSON.parse(row.durationPrices);
}
},
valueResolve: ({ form }) => {
if (form.content) {
form.content = JSON.stringify(form.content);
}
if (form.durationPrices) {
form.durationPrices = JSON.stringify(form.durationPrices);
}
}
},
"content.maxDomainCount": {
title: t('certd.domainCount'),
type: "text",
form: {
key: ["content", "maxDomainCount"],
component: {
name: SuiteValueEdit,
vModel: "modelValue",
unit: t('certd.unitCount')
},
rules: [{ required: true, message: t('certd.requiredField') }]
},
column: {
width: 100,
component: {
name: SuiteValue,
vModel: "modelValue",
unit: t('certd.unitCount')
}
}
},
"content.maxPipelineCount": {
title: t('certd.pipelineCount'),
type: "text",
form: {
key: ["content", "maxPipelineCount"],
component: {
name: SuiteValueEdit,
vModel: "modelValue",
unit: t('certd.unitPipeline')
},
rules: [{ required: true, message: t('certd.requiredField') }]
},
column: {
width: 100,
component: {
name: SuiteValue,
vModel: "modelValue",
unit: t('certd.unitPipeline')
}
}
},
"content.maxDeployCount": {
title: t('certd.deployCount'),
type: "text",
form: {
key: ["content", "maxDeployCount"],
component: {
name: SuiteValueEdit,
vModel: "modelValue",
unit: t('certd.unitDeploy')
},
rules: [{ required: true, message: t('certd.requiredField') }]
},
column: {
width: 100,
component: {
name: SuiteValue,
vModel: "modelValue",
unit: t('certd.unitDeploy')
}
}
},
"content.maxMonitorCount": {
title: t('certd.monitorCount'),
type: "text",
form: {
key: ["content", "maxMonitorCount"],
component: {
name: SuiteValueEdit,
vModel: "modelValue",
unit: t('certd.unitCount')
},
rules: [{ required: true, message: t('certd.requiredField') }]
},
column: {
width: 120,
component: {
name: SuiteValue,
vModel: "modelValue",
unit: t('certd.unitCount')
}
}
},
durationPrices: {
title: t('certd.durationPriceTitle'),
type: "text",
form: {
title: t('certd.selectDuration'),
component: {
name: PriceEdit,
vModel: "modelValue",
edit: true,
style: {
minHeight: "120px"
}
},
col: {
span: 24
},
rules: [{ required: true, message: t('certd.requiredField') }]
},
column: {
component: {
name: DurationPriceValue,
vModel: "modelValue"
},
width: 350
}
},
supportBuy: {
title: t('certd.supportBuy'),
type: "dict-switch",
dict: dict({
data: [
{ label: t('certd.supportPurchase'), value: true, color: "success" },
{ label: t('certd.cannotPurchase'), value: false, color: "gray" }
]
}),
form: {
value: true
},
column: {
width: 120
}
},
disabled: {
title: t('certd.shelfStatus'),
type: "dict-radio",
dict: dict({
data: [
{ value: false, label: t('certd.onShelf'), color: "green" },
{ value: true, label: t('certd.offShelf'), color: "gray" }
]
}),
form: {
value: false
},
column: {
width: 100
}
},
order: {
title: t('certd.ordera'),
type: "number",
form: {
helper: t('certd.orderHelper'),
value: 0
},
column: {
width: 100
}
},
intro: {
title: t('certd.description'),
type: "textarea",
column: {
width: 200
}
},
createTime: {
title: t('certd.createTime'),
type: "datetime",
form: {
show: false
},
column: {
sorter: true,
width: 160,
align: "center"
}
},
updateTime: {
title: t('certd.updateTime'),
type: "datetime",
form: {
show: false
},
column: {
show: true,
width: 160
}
}
}
}
};
}
@@ -8,392 +8,397 @@ import createCrudOptionsUser from "/@/views/sys/authority/user/crud";
import UserSuiteStatus from "/@/views/certd/suite/mine/user-suite-status.vue";
import SuiteDurationSelector from "../setting/suite-duration-selector.vue";
import dayjs from "dayjs";
import { useI18n } from "vue-i18n";
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
const api = sysUserSuiteApi;
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
return await api.GetList(query);
};
const editRequest = async (req: EditReq) => {
const { form, row } = req;
form.id = row.id;
const res = await api.UpdateObj(form);
return res;
};
const delRequest = async (req: DelReq) => {
const { row } = req;
return await api.DelObj(row.id);
};
const { t } = useI18n();
const api = sysUserSuiteApi;
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
return await api.GetList(query);
};
const editRequest = async (req: EditReq) => {
const { form, row } = req;
form.id = row.id;
const res = await api.UpdateObj(form);
return res;
};
const delRequest = async (req: DelReq) => {
const { row } = req;
return await api.DelObj(row.id);
};
const addRequest = async (req: AddReq) => {
const { form } = req;
const res = await api.PresentSuite(form);
return res;
};
const addRequest = async (req: AddReq) => {
const { form } = req;
const res = await api.PresentSuite(form);
return res;
};
const router = useRouter();
const router = useRouter();
return {
crudOptions: {
request: {
pageRequest,
addRequest,
editRequest,
delRequest
},
form: {
labelCol: {
//固定label宽度
span: null,
style: {
width: "100px"
}
},
col: {
span: 22
},
wrapper: {
width: 600
}
},
actionbar: {
buttons: {
add: { text: "赠送套餐" }
}
},
toolbar: { show: false },
rowHandle: {
width: 200,
fixed: "right",
buttons: {
view: { show: true },
copy: { show: false },
edit: { show: false },
remove: { show: true }
// continue:{
// text:"续期",
// type:"link",
// click(){
// console.log("续期");
// }
// }
}
},
columns: {
id: {
title: "ID",
key: "id",
type: "number",
search: {
show: false
},
column: {
width: 100,
editable: {
disabled: true
}
},
form: {
show: false
}
},
title: {
title: "套餐名称",
type: "text",
search: {
show: true
},
form: {
show: false
},
column: {
width: 200
}
},
userId: {
title: "用户",
type: "table-select",
search: {
show: true
},
dict: dict({
async getNodesByValues(ids: number[]) {
return await api.GetSimpleUserByIds(ids);
},
value: "id",
label: "nickName"
}),
form: {
component: {
crossPage: true,
multiple: false,
select: {
placeholder: "点击选择"
},
createCrudOptions: createCrudOptionsUser
// crudOptionsOverride: crudOptionsOverride
}
}
},
//赠送
presentSuiteId: {
title: "赠送套餐",
type: "dict-select",
column: { show: false },
addForm: {
show: true,
component: {
name: SuiteDurationSelector,
vModel: "modelValue"
},
rules: [
{
validator: async (rule, value) => {
if (value && value.productId) {
return true;
}
throw new Error("请选择套餐");
}
}
]
},
valueResolve({ form, value }) {
if (value && value.productId) {
form.productId = value.productId;
form.duration = value.duration;
}
},
form: { show: false }
},
productType: {
title: "类型",
type: "dict-select",
editForm: {
component: {
disabled: true
}
},
dict: dict({
data: [
{ label: "套餐", value: "suite", color: "green" },
{ label: "加量包", value: "addon", color: "blue" }
]
}),
form: {
show: false
},
column: {
width: 80,
align: "center"
},
valueBuilder: ({ row }) => {
if (row.content) {
row.content = JSON.parse(row.content);
}
},
valueResolve: ({ form }) => {
if (form.content) {
form.content = JSON.stringify(form.content);
}
}
},
"content.maxDomainCount": {
title: "域名数量",
type: "text",
form: {
show: false,
key: ["content", "maxDomainCount"],
component: {
name: SuiteValueEdit,
vModel: "modelValue",
unit: "个"
},
rules: [{ required: true, message: "此项必填" }]
},
column: {
width: 100,
component: {
name: SuiteValue,
vModel: "modelValue",
unit: "个"
},
align: "center"
}
},
"content.maxPipelineCount": {
title: "流水线数量",
type: "text",
form: {
show: false,
key: ["content", "maxPipelineCount"],
component: {
name: SuiteValueEdit,
vModel: "modelValue",
unit: "条"
},
rules: [{ required: true, message: "此项必填" }]
},
column: {
width: 100,
component: {
name: SuiteValue,
vModel: "modelValue",
unit: "条"
},
align: "center"
}
},
"content.maxDeployCount": {
title: "部署次数",
type: "text",
form: {
show: false,
key: ["content", "maxDeployCount"],
component: {
name: SuiteValueEdit,
vModel: "modelValue",
unit: "次"
},
rules: [{ required: true, message: "此项必填" }]
},
column: {
width: 100,
component: {
name: SuiteValue,
vModel: "modelValue",
unit: "次",
used: compute(({ row }) => {
return row.deployCountUsed;
})
},
align: "center"
}
},
"content.maxMonitorCount": {
title: "证书监控数量",
type: "text",
form: {
show: false,
key: ["content", "maxMonitorCount"],
component: {
name: SuiteValueEdit,
vModel: "modelValue",
unit: "个"
},
rules: [{ required: true, message: "此项必填" }]
},
column: {
width: 120,
component: {
name: SuiteValue,
vModel: "modelValue",
unit: "个"
},
align: "center"
}
},
duration: {
title: "时长",
type: "text",
form: { show: false },
column: {
component: {
name: DurationValue,
vModel: "modelValue"
},
width: 100,
align: "center"
}
},
status: {
title: "状态",
type: "text",
form: { show: false },
column: {
width: 100,
align: "center",
component: {
name: UserSuiteStatus,
userSuite: compute(({ row }) => {
return row;
})
},
conditionalRender: {
match() {
return false;
}
}
}
},
activeTime: {
title: "激活时间",
type: "date",
column: {
width: 150
},
form: {
show: false
}
},
expiresTime: {
title: "过期时间",
type: "date",
form: {
show: false
},
column: {
width: 150,
component: {
name: "expires-time-text",
vModel: "value",
mode: "tag",
title: compute(({ value }) => {
return dayjs(value).format("YYYY-MM-DD HH:mm:ss");
})
}
}
},
isPresent: {
title: "是否赠送",
type: "dict-switch",
dict: dict({
data: [
{ label: "是", value: true, color: "success" },
{ label: "否", value: false, color: "blue" }
]
}),
form: {
value: true,
show: false
},
column: {
width: 100,
align: "center"
}
},
createTime: {
title: "创建时间",
type: "datetime",
form: {
show: false
},
column: {
sorter: true,
width: 160,
align: "center"
}
},
updateTime: {
title: "更新时间",
type: "datetime",
form: {
show: false
},
column: {
show: true,
width: 160
}
}
}
}
};
return {
crudOptions: {
request: {
pageRequest,
addRequest,
editRequest,
delRequest
},
form: {
labelCol: {
//固定label宽度
span: null,
style: {
width: "100px"
}
},
col: {
span: 22
},
wrapper: {
width: 600
}
},
actionbar: {
buttons: {
add: { text: t('certd.gift_package') }
}
},
toolbar: { show: false },
rowHandle: {
width: 200,
fixed: "right",
buttons: {
view: { show: true },
copy: { show: false },
edit: { show: false },
remove: { show: true }
// continue:{
// text:"续期",
// type:"link",
// click(){
// console.log("续期");
// }
// }
}
},
columns: {
id: {
title: "ID",
key: "id",
type: "number",
search: {
show: false
},
column: {
width: 100,
editable: {
disabled: true
}
},
form: {
show: false
}
},
title: {
title: t('certd.package_name'),
type: "text",
search: {
show: true
},
form: {
show: false
},
column: {
width: 200
}
},
userId: {
title: t('certd.usera'),
type: "table-select",
search: {
show: true
},
dict: dict({
async getNodesByValues(ids: number[]) {
return await api.GetSimpleUserByIds(ids);
},
value: "id",
label: "nickName"
}),
form: {
component: {
crossPage: true,
multiple: false,
select: {
placeholder: t('certd.click_to_select')
},
createCrudOptions: createCrudOptionsUser
// crudOptionsOverride: crudOptionsOverride
}
}
},
//赠送
presentSuiteId: {
title: t('certd.gift_package'),
type: "dict-select",
column: { show: false },
addForm: {
show: true,
component: {
name: SuiteDurationSelector,
vModel: "modelValue"
},
rules: [
{
validator: async (rule, value) => {
if (value && value.productId) {
return true;
}
throw new Error(t('certd.please_select_package'));
}
}
]
},
valueResolve({ form, value }) {
if (value && value.productId) {
form.productId = value.productId;
form.duration = value.duration;
}
},
form: { show: false }
},
productType: {
title: t('certd.type'),
type: "dict-select",
editForm: {
component: {
disabled: true
}
},
dict: dict({
data: [
{ label: t('certd.package'), value: "suite", color: "green" },
{ label: t('certd.addon_package'), value: "addon", color: "blue" }
]
}),
form: {
show: false
},
column: {
width: 80,
align: "center"
},
valueBuilder: ({ row }) => {
if (row.content) {
row.content = JSON.parse(row.content);
}
},
valueResolve: ({ form }) => {
if (form.content) {
form.content = JSON.stringify(form.content);
}
}
},
"content.maxDomainCount": {
title: t('certd.domain_count'),
type: "text",
form: {
show: false,
key: ["content", "maxDomainCount"],
component: {
name: SuiteValueEdit,
vModel: "modelValue",
unit: t('certd.unit_count')
},
rules: [{ required: true, message: t('certd.field_required') }]
},
column: {
width: 100,
component: {
name: SuiteValue,
vModel: "modelValue",
unit: t('certd.unit_count')
},
align: "center"
}
},
"content.maxPipelineCount": {
title: t('certd.pipeline_count'),
type: "text",
form: {
show: false,
key: ["content", "maxPipelineCount"],
component: {
name: SuiteValueEdit,
vModel: "modelValue",
unit: t('certd.unit_item')
},
rules: [{ required: true, message: t('certd.field_required') }]
},
column: {
width: 100,
component: {
name: SuiteValue,
vModel: "modelValue",
unit: t('certd.unit_item')
},
align: "center"
}
},
"content.maxDeployCount": {
title: t('certd.deploy_count'),
type: "text",
form: {
show: false,
key: ["content", "maxDeployCount"],
component: {
name: SuiteValueEdit,
vModel: "modelValue",
unit: t('certd.unit_times')
},
rules: [{ required: true, message: t('certd.field_required') }]
},
column: {
width: 100,
component: {
name: SuiteValue,
vModel: "modelValue",
unit: t('certd.unit_times'),
used: compute(({ row }) => {
return row.deployCountUsed;
})
},
align: "center"
}
},
"content.maxMonitorCount": {
title: t('certd.monitor_count'),
type: "text",
form: {
show: false,
key: ["content", "maxMonitorCount"],
component: {
name: SuiteValueEdit,
vModel: "modelValue",
unit: t('certd.unit_count')
},
rules: [{ required: true, message: t('certd.field_required') }]
},
column: {
width: 120,
component: {
name: SuiteValue,
vModel: "modelValue",
unit: t('certd.unit_count')
},
align: "center"
}
},
duration: {
title: t('certd.duration'),
type: "text",
form: { show: false },
column: {
component: {
name: DurationValue,
vModel: "modelValue"
},
width: 100,
align: "center"
}
},
status: {
title: t('certd.status'),
type: "text",
form: { show: false },
column: {
width: 100,
align: "center",
component: {
name: UserSuiteStatus,
userSuite: compute(({ row }) => {
return row;
})
},
conditionalRender: {
match() {
return false;
}
}
}
},
activeTime: {
title: t('certd.active_time'),
type: "date",
column: {
width: 150
},
form: {
show: false
}
},
expiresTime: {
title: t('certd.expires_time'),
type: "date",
form: {
show: false
},
column: {
width: 150,
component: {
name: "expires-time-text",
vModel: "value",
mode: "tag",
title: compute(({ value }) => {
return dayjs(value).format("YYYY-MM-DD HH:mm:ss");
})
}
}
},
isPresent: {
title: t('certd.is_present'),
type: "dict-switch",
dict: dict({
data: [
{ label: t('certd.is_present_yes'), value: true, color: "success" },
{ label: t('certd.is_present_no'), value: false, color: "blue" }
]
}),
form: {
value: true,
show: false
},
column: {
width: 100,
align: "center"
}
},
createTime: {
title: t('certd.create_time'),
type: "datetime",
form: {
show: false
},
column: {
sorter: true,
width: 160,
align: "center"
}
},
updateTime: {
title: t('certd.update_time'),
type: "datetime",
form: {
show: false
},
column: {
show: true,
width: 160
}
}
}
}
};
}