803 lines
20 KiB
Vue
803 lines
20 KiB
Vue
<template>
|
|
<div class="recipes_com_wrapper" @click="handleParentClick">
|
|
<el-table
|
|
:data="mData"
|
|
border
|
|
:span-method="spanMethod"
|
|
:cell-style="{ padding: '2px 0' }"
|
|
:header-cell-style="{ padding: '4px 0', height: 'unset' }"
|
|
size="mini"
|
|
header-row-class-name="recipes_header"
|
|
:cell-class-name="cellClassName"
|
|
:style="`outline: ${
|
|
currentDay === num && !preview ? '1px solid #d53950' : 'none'
|
|
}`"
|
|
>
|
|
<el-table-column prop="type" :width="80" align="center">
|
|
<template slot="header">
|
|
<el-popover
|
|
placement="right"
|
|
:open-delay="200"
|
|
trigger="hover"
|
|
:title="`第${numDay}天`"
|
|
:disabled="preview"
|
|
>
|
|
<div>
|
|
<el-button
|
|
size="mini"
|
|
type="primary"
|
|
icon="el-icon-position"
|
|
@click="handleOnMenuCopyClick"
|
|
>
|
|
添加快捷
|
|
</el-button>
|
|
<el-button
|
|
size="mini"
|
|
type="primary"
|
|
icon="el-icon-refresh"
|
|
v-if="shouldPasteShow('0')"
|
|
@click="handleOnMenuPasteClick"
|
|
>快捷替换</el-button
|
|
>
|
|
<div
|
|
v-else-if="curShortCutObj && curShortCutObj.type"
|
|
style="margin-top: 8px"
|
|
>
|
|
<el-button
|
|
icon="el-icon-right"
|
|
size="mini"
|
|
type="primary"
|
|
v-for="item in curShortCutObj.type"
|
|
:key="item"
|
|
@click="handleOnShortCutMenuAdd(item)"
|
|
>{{ menuTypeDict[item] }}</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="pointer_style"
|
|
@click="handleOnResetCurrentDay"
|
|
slot="reference"
|
|
>
|
|
<div class="cus_name_hide" :id="`cus_name_${num}`">
|
|
{{ name }}
|
|
</div>
|
|
<div :id="`day_num_${num}`">{{ `第${numDay}天` }}</div>
|
|
</div>
|
|
</el-popover>
|
|
</template>
|
|
<template slot-scope="scope">
|
|
<el-popover
|
|
placement="top"
|
|
trigger="hover"
|
|
:open-delay="200"
|
|
:title="typeFormatter(scope.row)"
|
|
:disabled="preview"
|
|
>
|
|
<div>
|
|
<el-button
|
|
size="mini"
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
@click="handleOnMenuTypeClick(scope.row)"
|
|
>添加菜品
|
|
</el-button>
|
|
<el-button
|
|
size="mini"
|
|
type="primary"
|
|
icon="el-icon-position"
|
|
@click="handleOnShortCutMenuAdd(scope.row.type)"
|
|
v-if="shouldPasteShow(scope.row.type)"
|
|
>快捷添加</el-button
|
|
>
|
|
</div>
|
|
<div
|
|
slot="reference"
|
|
style="font-weight: bold; font-size: 14px; cursor: pointer"
|
|
>
|
|
{{ typeFormatter(scope.row) }}
|
|
</div>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="菜品" prop="name" align="center">
|
|
<template slot="header">
|
|
<div class="pointer_style" @click="handleOnAdd">菜品</div>
|
|
</template>
|
|
<template slot-scope="scope">
|
|
<el-popover
|
|
placement="right"
|
|
:open-delay="200"
|
|
trigger="hover"
|
|
:title="scope.row.name"
|
|
:disabled="preview"
|
|
>
|
|
<div>
|
|
<div style="margin-bottom: 8px">
|
|
<el-button
|
|
type="primary"
|
|
size="mini"
|
|
icon="el-icon-refresh"
|
|
class="fun_button"
|
|
@click="handleOnReplace(scope.row)"
|
|
>
|
|
替换菜品
|
|
</el-button>
|
|
<el-button
|
|
type="danger"
|
|
size="mini"
|
|
icon="el-icon-delete"
|
|
class="fun_button"
|
|
@click="handleOnDelete(scope.row)"
|
|
>
|
|
删除菜品
|
|
</el-button>
|
|
</div>
|
|
<div style="margin-bottom: 8px">
|
|
<el-button
|
|
type="primary"
|
|
size="mini"
|
|
icon="el-icon-position"
|
|
class="fun_button"
|
|
@click="handleOnCopy(scope.row)"
|
|
>
|
|
添加快捷
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
size="mini"
|
|
icon="el-icon-document-copy"
|
|
class="fun_button"
|
|
@click="handleOnSetting(scope.row)"
|
|
>
|
|
修改餐类
|
|
</el-button>
|
|
</div>
|
|
<div>
|
|
<el-button
|
|
type="primary"
|
|
size="mini"
|
|
icon="el-icon-refresh"
|
|
class="fun_button"
|
|
v-if="shouldPasteShow(scope.row.type)"
|
|
@click="handleOnShortCutReplace(scope.row)"
|
|
>
|
|
快捷替换
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="pointer_style" slot="reference">
|
|
{{ scope.row.name }}
|
|
</div>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="食材" prop="igdName" align="center">
|
|
<template slot-scope="scope">
|
|
<span
|
|
v-if="
|
|
(scope.row.nameSpan.colspan === 1 &&
|
|
scope.row.nameSpan.rowspan === 1) ||
|
|
(scope.row.igdType !== '15' && scope.row.igdType !== '14')
|
|
"
|
|
>
|
|
{{ scope.row.igdName }}
|
|
</span>
|
|
<el-popover
|
|
v-else
|
|
placement="right"
|
|
:open-delay="200"
|
|
trigger="hover"
|
|
:title="scope.row.igdName"
|
|
:disabled="preview"
|
|
>
|
|
<el-button
|
|
type="danger"
|
|
size="mini"
|
|
icon="el-icon-delete"
|
|
class="fun_button"
|
|
@click="handleOnIgdDelete(scope.row)"
|
|
>删除</el-button
|
|
>
|
|
<div class="pointer_style" slot="reference">
|
|
{{ scope.row.igdName }}
|
|
</div>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="分量估算" :width="80" align="center">
|
|
<template slot-scope="scope">
|
|
<EditableUnit
|
|
:weight="scope.row.cusWeight"
|
|
:unit="scope.row.cusUnit"
|
|
:disabled="preview"
|
|
@onChange="(val) => handleOnCustomUnitChange(scope.row, val)"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="重量(g)" prop="weight" :width="80" align="center">
|
|
<template slot-scope="scope">
|
|
<EditableText
|
|
:value="scope.row.weight"
|
|
:disabled="preview"
|
|
@onChange="(val) => handleOnWeightChange(scope.row, val)"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="蛋白质/100g"
|
|
prop="proteinRatio"
|
|
:width="60"
|
|
align="center"
|
|
v-if="!preview"
|
|
>
|
|
<template slot="header">
|
|
<div class="pointer_style">
|
|
<div>蛋白质</div>
|
|
<div>/100g</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="脂肪/100g"
|
|
prop="fatRatio"
|
|
:width="60"
|
|
align="center"
|
|
v-if="!preview"
|
|
>
|
|
<template slot="header">
|
|
<div class="pointer_style">
|
|
<div>脂肪</div>
|
|
<div>/100g</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="碳水/100g"
|
|
prop="carbonRatio"
|
|
:width="60"
|
|
align="center"
|
|
v-if="!preview"
|
|
>
|
|
<template slot="header">
|
|
<div class="pointer_style">
|
|
<div>碳水</div>
|
|
<div>/100g</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="蛋白质含量"
|
|
prop="proteinRatio"
|
|
:width="60"
|
|
align="center"
|
|
:formatter="nutriFormatter"
|
|
v-if="!preview"
|
|
>
|
|
<template slot="header">
|
|
<div class="pointer_style">
|
|
<div>蛋白质</div>
|
|
<div>含量</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="脂肪含量"
|
|
prop="fatRatio"
|
|
:width="60"
|
|
align="center"
|
|
:formatter="nutriFormatter"
|
|
v-if="!preview"
|
|
>
|
|
<template slot="header">
|
|
<div class="pointer_style">
|
|
<div>脂肪</div>
|
|
<div>含量</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="碳水含量"
|
|
prop="carbonRatio"
|
|
:width="60"
|
|
align="center"
|
|
:formatter="nutriFormatter"
|
|
v-if="!preview"
|
|
>
|
|
<template slot="header">
|
|
<div class="pointer_style">
|
|
<div>碳水</div>
|
|
<div>含量</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="做法" prop="methods" v-if="!preview" />
|
|
<el-table-column label="备注" prop="remark" v-if="!preview">
|
|
<template slot-scope="scope">
|
|
<div
|
|
v-if="!scope.row.remark"
|
|
class="empty_remark"
|
|
@click="handleOnEditRemark(scope.row)"
|
|
>
|
|
<em class="el-icon-plus" />
|
|
</div>
|
|
<span
|
|
class="pointer_style"
|
|
@click="handleOnEditRemark(scope.row)"
|
|
v-else
|
|
>{{ scope.row.remark }}</span
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 添加菜品抽屉 -->
|
|
<AddDishesDrawer ref="drawerRef" @onConfirm="handleOnDishesConfirm" />
|
|
<!-- 菜品复用菜单 -->
|
|
<DishesSettingDialog
|
|
ref="settingDialogRef"
|
|
@onConfirm="handleOnSettingConfirm"
|
|
/>
|
|
<!-- 备注弹窗 -->
|
|
<RemarkDialog ref="remarkDialogRef" @onConfirm="handleOnRemarkConfirm" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { createNamespacedHelpers } from "vuex";
|
|
const {
|
|
mapActions,
|
|
mapGetters,
|
|
mapState,
|
|
mapMutations,
|
|
} = createNamespacedHelpers("recipes");
|
|
|
|
import EditableText from "./EditableText";
|
|
import EditableUnit from "./EditableUnit";
|
|
import AddDishesDrawer from "./AddDishesDrawer";
|
|
import DishesSettingDialog from "./DishesSettingDialog";
|
|
import VueScrollTo from "vue-scrollto";
|
|
import RemarkDialog from "./RemarkDialog";
|
|
import { processMenuData } from "./utils";
|
|
import { addShortCut } from "@/utils/shortCutUtils";
|
|
import { messageTypes } from "@/utils";
|
|
|
|
export default {
|
|
name: "RecipesCom",
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default: {},
|
|
required: true,
|
|
},
|
|
name: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
num: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
numDay: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
preview: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
components: {
|
|
EditableText,
|
|
EditableUnit,
|
|
AddDishesDrawer,
|
|
DishesSettingDialog,
|
|
RemarkDialog,
|
|
},
|
|
mounted() {
|
|
// console.log(this.data);
|
|
},
|
|
data() {
|
|
return {
|
|
menuTypeDict: {
|
|
1: "早餐",
|
|
2: "早加餐",
|
|
3: "午餐",
|
|
4: "午加餐",
|
|
5: "晚餐",
|
|
6: "晚加餐",
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
notIds() {
|
|
return this.avoidFoodIds.concat(this.notRecIgds);
|
|
},
|
|
mData() {
|
|
if (!this.data.dishes) {
|
|
return [];
|
|
}
|
|
const mData = processMenuData(this.data.dishes);
|
|
// console.log(mData);
|
|
// mData.forEach((obj, idx) =>
|
|
// console.log({
|
|
// num: this.num,
|
|
// type: obj.type,
|
|
// idx: idx + 1,
|
|
// })
|
|
// );
|
|
|
|
return mData;
|
|
},
|
|
...mapGetters(["typeDict"]),
|
|
...mapState([
|
|
"currentDay",
|
|
// "copyData",
|
|
"fontSize",
|
|
// "canCopyMenuTypes",
|
|
"recipesId",
|
|
"notRecIgds",
|
|
"avoidFoodIds",
|
|
"curShortCutObj",
|
|
"healthyData",
|
|
"templateInfo",
|
|
]),
|
|
},
|
|
methods: {
|
|
handleOnShortCutReplace(data) {
|
|
this.updateDishes({
|
|
num: this.num,
|
|
data: {
|
|
...this.curShortCutObj.data,
|
|
type: data.type,
|
|
id: data.id,
|
|
},
|
|
actionType: "replace",
|
|
}).catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
handleOnShortCutMenuAdd(type) {
|
|
const data = {
|
|
...JSON.parse(JSON.stringify(this.curShortCutObj.data)),
|
|
type,
|
|
};
|
|
if (!this.recipesId) {
|
|
// 未生成食谱时拷贝
|
|
data.id = new Date().getTime();
|
|
}
|
|
this.addDishes({
|
|
num: this.num,
|
|
data,
|
|
}).catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
handleOnMenuPasteClick() {
|
|
if (!this.curShortCutObj || !this.curShortCutObj.data.dishes) {
|
|
this.$message.error("快捷对象错误");
|
|
return;
|
|
}
|
|
const { id } = this.data;
|
|
this.replaceMenu({
|
|
num: this.num,
|
|
data: {
|
|
numDay: this.numDay,
|
|
id,
|
|
dishes: this.curShortCutObj.data.dishes.map((obj) => ({
|
|
...obj,
|
|
id: id + obj.id,
|
|
})),
|
|
},
|
|
});
|
|
},
|
|
shouldPasteShow(type) {
|
|
return (
|
|
this.curShortCutObj &&
|
|
this.curShortCutObj.type &&
|
|
this.curShortCutObj.type.includes(type)
|
|
);
|
|
},
|
|
cellClassName({ row, column, rowIndex, columnIndex }) {
|
|
// console.log({ row, column, rowIndex, columnIndex });
|
|
if (!columnIndex) {
|
|
return "recipes_first_col";
|
|
} else {
|
|
return `recipes_cell recipes_cell_${this.fontSize} ${
|
|
columnIndex === 2 && this.notIds.includes(row.igdId)
|
|
? "warning_heightlight"
|
|
: ""
|
|
}`;
|
|
}
|
|
},
|
|
handleParentClick(e) {
|
|
if (this.preview) {
|
|
return;
|
|
}
|
|
// 校验某天
|
|
this.setCurrentDay({ currentDay: this.num });
|
|
},
|
|
spanMethod({ row, column, rowIndex, columnIndex }) {
|
|
if (columnIndex === 0) {
|
|
return row.typeSpan;
|
|
} else if (
|
|
columnIndex === 1 ||
|
|
columnIndex === 11 ||
|
|
columnIndex === 12
|
|
) {
|
|
return row.nameSpan;
|
|
}
|
|
},
|
|
typeFormatter(row) {
|
|
return this.typeDict[row.type];
|
|
},
|
|
nutriFormatter(row, col) {
|
|
return ((row.weight / 100) * row[col.property]).toFixed(1);
|
|
},
|
|
handleOnResetCurrentDay(e) {
|
|
if (this.preview) {
|
|
return;
|
|
}
|
|
e.stopPropagation();
|
|
// 取消高亮
|
|
this.resetCurrentDay({ currentDay: this.num });
|
|
VueScrollTo.scrollTo(`#recipes${this.num}`, 500, {
|
|
container: "#recipes_content",
|
|
});
|
|
},
|
|
handleOnAdd() {
|
|
// console.log(this.num);
|
|
if (this.preview) {
|
|
return;
|
|
}
|
|
this.$refs.drawerRef.showDrawer({});
|
|
},
|
|
handleOnReplace(data) {
|
|
this.$refs.drawerRef.showDrawer({ data, numDay: this.numDay });
|
|
},
|
|
handleOnDelete(data) {
|
|
// console.log(data);
|
|
this.deleteDishes({ num: this.num, id: data.id });
|
|
},
|
|
handleOnCopy(data) {
|
|
// console.log(data);
|
|
this.setCopyData({ num: this.num, id: data.id })
|
|
.then((msg) => {
|
|
this.$message.success(msg);
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
// handleOnPaste(type) {
|
|
// // console.log(this.copyData);
|
|
// if (this.copyData) {
|
|
// const data = {
|
|
// ...JSON.parse(JSON.stringify(this.copyData)),
|
|
// type,
|
|
// };
|
|
// if (!this.recipesId) {
|
|
// // 未生成食谱时拷贝
|
|
// data.id = new Date().getTime();
|
|
// }
|
|
// this.addDishes({
|
|
// num: this.num,
|
|
// data,
|
|
// }).catch((err) => {
|
|
// this.$message.error(err);
|
|
// });
|
|
// }
|
|
// },
|
|
handleOnWeightChange(data, weight) {
|
|
// console.log({ data, weight });
|
|
this.updateDishes({
|
|
num: this.num,
|
|
id: data.id,
|
|
dishesId: data.dishesId,
|
|
igdId: data.igdId,
|
|
weight,
|
|
actionType: "weight",
|
|
}).catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
handleOnCustomUnitChange(data, { cusWeight, cusUnit }) {
|
|
// console.log({ data, cusWeight, cusUnit });
|
|
const { id, dishesId, igdId } = data;
|
|
this.updateDishes({
|
|
num: this.num,
|
|
id,
|
|
dishesId,
|
|
igdId,
|
|
cusWeight,
|
|
cusUnit,
|
|
actionType: "unit",
|
|
}).catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
handleOnDishesConfirm({ type, data }) {
|
|
// console.log(data);
|
|
if (type === "add") {
|
|
this.addDishes({
|
|
num: this.num,
|
|
data,
|
|
}).catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
} else if (type === "replace") {
|
|
this.updateDishes({
|
|
num: this.num,
|
|
data,
|
|
actionType: type,
|
|
}).catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
}
|
|
},
|
|
handleOnSetting(data) {
|
|
this.$refs.settingDialogRef.showDialog({ numDay: this.numDay, data });
|
|
},
|
|
handleOnSettingConfirm({ type, id }) {
|
|
this.updateDishes({
|
|
num: this.num,
|
|
id,
|
|
type,
|
|
actionType: "menuType",
|
|
}).catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
handleOnMenuTypeClick(data) {
|
|
this.$refs.drawerRef.showDrawer({ type: data.type, numDay: this.numDay });
|
|
},
|
|
handleOnIgdDelete(data) {
|
|
// console.log(data);
|
|
const { id, igdId } = data;
|
|
this.updateDishes({
|
|
num: this.num,
|
|
id,
|
|
igdId,
|
|
actionType: "delIgd",
|
|
}).catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
handleOnEditRemark(data) {
|
|
this.$refs.remarkDialogRef.showDialog(data);
|
|
},
|
|
handleOnRemarkConfirm(data) {
|
|
// console.log(data);
|
|
const { id, remark } = data;
|
|
this.updateDishes({
|
|
num: this.num,
|
|
id,
|
|
remark,
|
|
actionType: "remark",
|
|
}).catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
handleOnMenuCopyClick() {
|
|
// console.log({
|
|
// numDay: this.numDay,
|
|
// data: this.data,
|
|
// healthyData: this.healthyData,
|
|
// templateInfo: this.templateInfo,
|
|
// });
|
|
const name = `${
|
|
this.healthyData ? this.healthyData.name : this.templateInfo.name
|
|
}-第${this.numDay}天`;
|
|
addShortCut({
|
|
name,
|
|
id: new Date().getTime(),
|
|
type: ["0"],
|
|
data: this.data,
|
|
}).then(() => {
|
|
this.$message.success("添加成功");
|
|
window.postMessage(
|
|
{
|
|
type: messageTypes.UPDATE_SHORTCUT,
|
|
},
|
|
"*"
|
|
);
|
|
});
|
|
},
|
|
...mapActions([
|
|
"updateDishes",
|
|
"addDishes",
|
|
"deleteDishes",
|
|
"replaceDishes",
|
|
"setCopyData",
|
|
"replaceMenu",
|
|
]),
|
|
...mapMutations(["setCurrentDay", "resetCurrentDay"]),
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.recipes_com_wrapper {
|
|
margin-bottom: 24px;
|
|
padding: 1px;
|
|
|
|
.pointer_style {
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.fun_button {
|
|
font-size: 12px;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.empty_remark {
|
|
cursor: pointer;
|
|
text-align: center;
|
|
em {
|
|
visibility: hidden;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
&:hover {
|
|
color: #1890ff;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
em {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-table .cell {
|
|
line-height: 18px;
|
|
}
|
|
|
|
.recipes_header {
|
|
& > th {
|
|
background: #d53950 !important;
|
|
color: white !important;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.recipes_first_col {
|
|
background: #d53950 !important;
|
|
color: white !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.recipes_cell {
|
|
font-weight: bold;
|
|
color: #595959;
|
|
}
|
|
|
|
.recipes_cell_8 {
|
|
font-size: 8px;
|
|
}
|
|
.recipes_cell_10 {
|
|
font-size: 10px;
|
|
}
|
|
.recipes_cell_12 {
|
|
font-size: 12px;
|
|
}
|
|
.recipes_cell_14 {
|
|
font-size: 14px;
|
|
}
|
|
.recipes_cell_16 {
|
|
font-size: 16px;
|
|
}
|
|
.recipes_cell_18 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.warning_heightlight {
|
|
background: #d66969;
|
|
color: blue;
|
|
}
|
|
|
|
.cus_name_hide {
|
|
display: none;
|
|
}
|
|
</style>
|