修改样式,添加字体修改

This commit is contained in:
huangdeliang 2021-03-05 15:44:45 +08:00
parent 4f08bedf61
commit 4c654d8617
4 changed files with 85 additions and 7 deletions

View File

@ -9,8 +9,8 @@ stdiet:
# 实例演示开关 # 实例演示开关
demoEnabled: true demoEnabled: true
# 文件路径 示例( Windows配置D:/ruoyi/uploadPathLinux配置 /home/ruoyi/uploadPath # 文件路径 示例( Windows配置D:/ruoyi/uploadPathLinux配置 /home/ruoyi/uploadPath
#profile: /Users/wonder/Documents/Workspaces/java/ShengtangManage/running/uploadPath profile: /Users/wonder/Documents/Workspaces/java/ShengtangManage/running/uploadPath
profile: D:/ruoyi/uploadPath # profile: D:/ruoyi/uploadPath
# 获取ip地址开关 # 获取ip地址开关
addressEnabled: false addressEnabled: false
# 验证码类型 math 数组计算 char 字符验证 # 验证码类型 math 数组计算 char 字符验证

View File

@ -29,7 +29,8 @@ const oriState = {
endNum: 0, endNum: 0,
reviewStatus: 0, reviewStatus: 0,
templateInfo: undefined, templateInfo: undefined,
copyData: undefined copyData: undefined,
fontSize: 12
}; };
const mutations = { const mutations = {
@ -56,6 +57,9 @@ const mutations = {
} }
} }
}, },
updateFontSize(state, payload) {
state.fontSize = payload.fontSize;
},
addRecipesDishes(state, payload) { addRecipesDishes(state, payload) {
state.recipesData[payload.num].dishes.push(payload.data); state.recipesData[payload.num].dishes.push(payload.data);
}, },

View File

@ -4,6 +4,22 @@
:style="`height: ${collapse ? 30 : 200}px`" :style="`height: ${collapse ? 30 : 200}px`"
> >
<div class="header"> <div class="header">
<span class="font_size_style">
字体大小
<el-select
v-model="mFontSize"
size="mini"
style="width: 80px"
@change="handleOnSizeChange"
>
<el-option
v-for="size in fontSizeOpts"
:key="size.value"
:label="size.label"
:value="size.value"
/>
</el-select>
</span>
<el-button size="mini" v-if="!recipesId" @click="handleOnBack" <el-button size="mini" v-if="!recipesId" @click="handleOnBack"
>返回</el-button >返回</el-button
> >
@ -91,16 +107,32 @@ export default {
PieChart, PieChart,
}, },
data() { data() {
return {}; return {
mFontSize: 12,
fontSizeOpts: [
{ value: 12, label: "12" },
{ value: 14, label: "14" },
{ value: 16, label: "16" },
{ value: 18, label: "18" },
],
};
}, },
updated() { updated() {
// console.log(this.data); // console.log(this.data);
}, },
props: ["collapse", "data"], props: ["collapse", "data"],
computed: { computed: {
...mapState(["recipesId", "reviewStatus", "healthyData"]), ...mapState(["recipesId", "reviewStatus", "healthyData", "fontSize"]),
},
watch: {
fontSize(val) {
this.mFontSize = val;
},
}, },
methods: { methods: {
handleOnSizeChange(fontSize) {
this.updateFontSize({ fontSize });
},
handleCollapseClick() { handleCollapseClick() {
this.$emit("update:collapse", !this.collapse); this.$emit("update:collapse", !this.collapse);
}, },
@ -121,7 +153,7 @@ export default {
this.updateStateData({ recipesData: [] }); this.updateStateData({ recipesData: [] });
}, },
...mapActions(["saveRecipes", "updateReviewStatus"]), ...mapActions(["saveRecipes", "updateReviewStatus"]),
...mapMutations(["updateStateData"]), ...mapMutations(["updateStateData", "updateFontSize"]),
}, },
}; };
</script> </script>
@ -138,6 +170,13 @@ export default {
transition: all 0.3s; transition: all 0.3s;
transform-origin: center center; transform-origin: center center;
} }
.font_size_style {
display: inline-flex;
align-items: center;
font-size: 12px;
margin-right: 12px;
}
} }
.content { .content {

View File

@ -7,6 +7,8 @@
:cell-style="{ padding: '2px 0' }" :cell-style="{ padding: '2px 0' }"
:header-cell-style="{ padding: '4px 0', height: 'unset' }" :header-cell-style="{ padding: '4px 0', height: 'unset' }"
size="mini" size="mini"
header-row-class-name="recipes_header"
:cell-class-name="cellClassName"
:style="`outline: ${currentDay === num ? '1px solid #d96969' : 'none'}`" :style="`outline: ${currentDay === num ? '1px solid #d96969' : 'none'}`"
> >
<el-table-column prop="type" :width="100" align="center"> <el-table-column prop="type" :width="100" align="center">
@ -355,9 +357,17 @@ export default {
return mData; return mData;
}, },
...mapGetters(["typeDict"]), ...mapGetters(["typeDict"]),
...mapState(["currentDay", "copyData"]), ...mapState(["currentDay", "copyData", "fontSize"]),
}, },
methods: { methods: {
cellClassName({ row, column, rowIndex, columnIndex }) {
// console.log({ row, column, rowIndex, columnIndex });
if (!columnIndex) {
return "recipes_first_col";
} else {
return `recipes_cell_${this.fontSize}`;
}
},
handleParentClick(e) { handleParentClick(e) {
// //
this.setCurrentDay({ currentDay: this.num }); this.setCurrentDay({ currentDay: this.num });
@ -496,4 +506,29 @@ export default {
font-size: 12px; font-size: 12px;
padding: 4px 8px; padding: 4px 8px;
} }
.recipes_header {
& > th {
background: #d96969 !important;
color: white !important;
}
}
.recipes_first_col {
background: #d96969 !important;
color: white !important;
}
.recipes_cell_12 {
font-size: 12px;
}
.recipes_cell_14 {
font-size: 14px;
}
.recipes_cell_16 {
font-size: 16px;
}
.recipes_cell_18 {
font-size: 18px;
}
</style> </style>