feat: 新增阿里妈妈数黑体字体并更新标签样式

1. 新增阿里妈妈数黑体字体文件及授权说明文档
2. 全局替换标签默认字体为阿里妈妈数黑体
3. 统一调整多个标签页的卷号/原料号字体大小为1em
4. 修复表单输入框的v-model.number类型绑定问题
5. 删除废弃的盐雾试验、力学性能、样品标签预览组件
This commit is contained in:
2026-06-08 09:05:15 +08:00
parent 97e0df7ae1
commit 47b3fb24b7
15 changed files with 65 additions and 372 deletions

View File

@@ -0,0 +1,19 @@
A. 在哪里可以下载阿里妈妈数黑体?
渠道一https://www.iconfont.cn/fonts/detail?cnid=a9fXc2HD9n7s
渠道二fonts.alibabagroup.com
B. 阿里阿里妈妈数黑体简介
基本信息阿里妈妈数黑体为中文简体字库收纳的中文字符包括但不限于GB2312共计6767个汉字英文大小写共52个常用标点符号共206个总计7025个字符。
设计说明:阿里妈妈数黑体字型饱满、体态中正,布白极具现代韵律,落笔厚实而简练;字里行间流露出先锋、前卫和时尚的视觉感受。适用于电商、广告、品牌形象、推广物料等场景。
C. 使用反馈、商业合作等问题请email
alimama-font@list.alibaba-inc.com
——
重要!安装前请先阅读此文档
请先按照下面流程安装文件夹里的字体包。
1. 打开字体文件夹根据不同系统需要选择OTF或TTF版本
2. 字体所包含只有一个字重(双击安装)。

View File

@@ -0,0 +1,15 @@
阿里妈妈数黑体法律声明
1. 阿里妈妈数黑体字体及包含该字体的字库软件,合称“阿里妈妈数黑体”。
2. 阿里妈妈数黑体的知识产权和相关权益归属于淘宝(中国)软件有限公司(以下简称“阿里妈妈”),受《中华人民共和国著作权法》及其他适用法律法规、国际公约、条约的保护。
3. 阿里妈妈授权个人、企业等用户在遵守本声明相关条款的前提下可以下载、安装和使用上述阿里妈妈字体该授权是免费的普通许可用户可基于合法目的用于商业用途或非商业用途但不得以任何违反本声明第4条及法律法规、政策、规章或公序良俗的方式使用。
4. 除本法律声明中明确授权之外阿里妈妈未授予用户关于阿里妈妈数黑体的其他权利。未经阿里妈妈授权任何人不得1对阿里妈妈数黑体进行仿制、转换、翻译、反编译、反向工程、拆分、破解或以其他方式试图从该字库软件获取源代码2删除、覆盖或修改阿里妈妈数黑体法律声明的全部或部分内容3将阿里妈妈数黑体进行单独定价出售、出租、出借、转让、转授权、或采取其他未经阿里妈妈授权的行为4) 发布任何使外界误认其与阿里妈妈或其关联公司存在合作、赞助或背书等商业关联的不实信息。
5. 阿里妈妈授予用户的上述授权不附带任何明示或暗示的保证,不对任何人因从非阿里妈妈官方渠道或指定渠道下载、安装或使用阿里妈妈数黑体而引发的任何直接或间接损失承担责任。
6. 本声明的解释、履行与争议解决适用中华人民共和国的法律。用户与阿里妈妈就阿里妈妈数黑体的使用若发生争议,双方应友好协商,若协商不成,任一方有权向浙江省杭州市有管辖权的人民法院提起诉讼。
反馈与咨询联系方alimama-font@list.alibaba-inc.com

View File

@@ -53,31 +53,31 @@
<el-input v-model="item.material" placeholder="请输入材质" :readonly="readonly" size="small" />
</div>
<div class="table-cell">
<el-input v-model.number="item.quantity" placeholder="请输入数量" type="number" :readonly="readonly" size="small"
<el-input v-model="item.quantity" placeholder="请输入数量" :readonly="readonly" size="small"
@change="onQuantityChange(item)" />
</div>
<div class="table-cell">
<el-input v-model.number="item.taxPrice" placeholder="请输入含税单价" type="number" :readonly="readonly" size="small"
<el-input v-model="item.taxPrice" placeholder="请输入含税单价" :readonly="readonly" size="small"
@change="onTaxPriceChange(item)" />
</div>
<div class="table-cell">
<el-input v-model.number="item.taxDivisor" placeholder="税率除数" type="number" :readonly="readonly"
<el-input v-model="item.taxDivisor" placeholder="税率除数" :readonly="readonly"
size="small" />
</div>
<div class="table-cell">
<el-input v-model.number="item.noTaxPrice" placeholder="无税单价" type="number" :readonly="readonly"
<el-input v-model="item.noTaxPrice" placeholder="无税单价" :readonly="readonly"
size="small" />
</div>
<div class="table-cell">
<el-input v-model.number="item.taxTotal" placeholder="含税总额" type="number" :readonly="readonly" size="small" />
<el-input v-model="item.taxTotal" placeholder="含税总额" :readonly="readonly" size="small" />
</div>
<div class="table-cell">
<el-input v-model.number="item.noTaxTotal" placeholder="无税总额" type="number" :readonly="readonly"
<el-input v-model="item.noTaxTotal" placeholder="无税总额" :readonly="readonly"
size="small" />
</div>
<div class="table-cell">
<el-input v-model.number="item.taxAmount" placeholder="税额" type="number" :readonly="readonly" size="small" />
<el-input v-model="item.taxAmount" placeholder="税额" :readonly="readonly" size="small" />
</div>
<div class="table-cell">
<el-input v-model="item.remark" placeholder="请输入备注" :readonly="readonly" size="small" />

View File

@@ -1,121 +0,0 @@
<template>
<div class="label-container">
<div class="company-name">嘉祥科伦普重工有限公司</div>
<div class="label-title">力学性能标签</div>
<table class="info-table">
<tr>
<td class="label-cell">卷号</td>
<td class="value-cell">{{ content.coilNumber || '' }}</td>
<td class="label-cell">屈服</td>
<td class="value-cell">{{ content.yieldStrength || '' }}</td>
</tr>
<tr>
<td class="label-cell">规格</td>
<td class="value-cell">{{ content.specification || '' }}</td>
<td class="label-cell">抗拉</td>
<td class="value-cell">{{ content.tensileStrength || '' }}</td>
</tr>
<tr>
<td class="label-cell">材质</td>
<td class="value-cell">{{ content.material || '' }}</td>
<td class="label-cell">延伸</td>
<td class="value-cell">{{ content.elongation || '' }}</td>
</tr>
<tr>
<td class="label-cell">原料厂家</td>
<td class="value-cell">{{ content.rawMaterialFactory || '' }}</td>
<td class="label-cell">锌层质量</td>
<td class="value-cell">{{ content.platingQuality || '' }}</td>
</tr>
<tr>
<td class="label-cell">备注</td>
<td class="value-cell" colspan="3">{{ content.remark || '' }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'MechanicalPropertyLabel',
props: {
content: {
type: Object,
default: () => ({
coilNumber: '',
yieldStrength: '',
specification: '',
tensileStrength: '',
material: '',
elongation: '',
rawMaterialFactory: '',
platingQuality: '',
remark: ''
})
}
}
}
</script>
<style scoped>
@import './label-common.css';
.label-container {
width: 50em; /* 容器宽度(可根据需求调整) */
min-height: 30em; /* 容器最小高度 */
border: 1px solid #000;
padding: 2px;
box-sizing: border-box;
font-family: var(--label-font);
font-size: 8px;
line-height: 1.2;
display: flex;
flex-direction: column; /* 垂直分布子元素 */
}
.company-name {
text-align: center;
font-weight: bold;
margin-bottom: 1px;
font-size: 2em;
}
.label-title {
text-align: center;
font-weight: bold;
margin-bottom: 2px;
border-bottom: 1px solid #000;
padding-bottom: 1px;
font-size: 2em;
}
.info-table {
width: 100%;
border-collapse: collapse; /* 合并边框 */
font-size: 7px;
flex-grow: 1; /* 拉伸占据剩余垂直空间 */
}
.info-table td {
border: 1px solid #000; /* 表格单元格边框 */
text-align: center;
vertical-align: middle;
font-size: 2em;
width: 25%; /* 4列均分宽度每列占25%,确保 label/value 空间相同 */
}
.label-cell {
font-weight: bold;
/* 去掉背景色:删除原有的 background-color 声明 */
}
.value-cell {
background-color: #fff; /* 可根据需求保留/删除,与原图视觉一致 */
}
.label-footnote {
margin-top: 2px;
text-align: center;
font-size: 7px;
color: #555;
}
</style>

View File

@@ -15,12 +15,12 @@
">
<div style="display: flex; flex: 1; align-items: center;">
<div
style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-sizing: border-box; padding: 3px; word-break: break-all; overflow-wrap: break-word;"
style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; font-size: 1em !important; box-sizing: border-box; padding: 3px; word-break: break-all; overflow-wrap: break-word;"
class="label-cell">
料卷号
</div>
<div
style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-sizing: border-box; padding: 3px; word-break: break-all; overflow-wrap: break-word;"
style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; font-size: 1em !important; box-sizing: border-box; padding: 3px; word-break: break-all; overflow-wrap: break-word;"
class="value-cell enter-coil-no">
{{ content.enterCoilNo || '' }}
</div>

View File

@@ -1,113 +0,0 @@
<template>
<div class="label-container">
<div class="company-name">嘉祥科伦普重工有限公司</div>
<div class="label-title">盐雾试验标签</div>
<table class="info-table">
<tr>
<td class="label-cell">卷号</td>
<td class="value-cell">{{ content.coilNumber || '' }}</td>
<td class="label-cell">开始时间</td>
<td class="value-cell">{{ content.startDate || '' }}</td>
</tr>
<tr>
<td class="label-cell">规格</td>
<td class="value-cell">{{ content.specification || '' }}</td>
<td class="label-cell">结束时间</td>
<td class="value-cell">{{ content.endDate || '' }}</td>
</tr>
<tr>
<td class="label-cell">材质</td>
<td class="value-cell">{{ content.material || '' }}</td>
<td class="label-cell">锌层质量</td>
<td class="value-cell">{{ content.platingQuality || '' }}</td>
</tr>
<tr>
<td class="label-cell">原料厂家</td>
<td class="value-cell" colspan="3">{{ content.rawMaterialFactory || '' }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'SaltSprayTestLabel',
props: {
content: {
type: Object,
default: () => ({
coilNumber: '',
startDate: '',
specification: '',
endDate: '',
material: '',
rawMaterialFactory: '',
platingQuality: ''
})
}
}
}
</script>
<style scoped>
@import './label-common.css';
.label-container {
width: 50em; /* 容器宽度(可根据需求调整) */
min-height: 30em; /* 容器最小高度 */
border: 1px solid #000;
padding: 2px;
box-sizing: border-box;
font-family: var(--label-font);
font-size: 8px;
line-height: 1.2;
display: flex;
flex-direction: column; /* 垂直分布子元素 */
}
.company-name {
text-align: center;
font-weight: bold;
margin-bottom: 1px;
font-size: 2em;
}
.label-title {
text-align: center;
font-weight: bold;
margin-bottom: 2px;
border-bottom: 1px solid #000;
padding-bottom: 1px;
font-size: 2em;
}
.info-table {
width: 100%;
border-collapse: collapse; /* 合并边框 */
font-size: 7px;
flex-grow: 1; /* 拉伸占据剩余垂直空间 */
}
.info-table td {
border: 1px solid #000; /* 表格单元格边框 */
text-align: center;
vertical-align: middle;
font-size: 2em;
width: 25%; /* 4列均分宽度每列占25%,确保 label/value 空间相同 */
}
.label-cell {
font-weight: bold;
/* 去掉背景色:删除原有的 background-color 声明 */
}
.value-cell {
background-color: #fff; /* 可根据需求保留/删除,与原图视觉一致 */
}
.label-footnote {
margin-top: 2px;
text-align: center;
font-size: 7px;
color: #555;
}
</style>

View File

@@ -1,123 +0,0 @@
<template>
<div class="sample-label-container">
<div class="company-title">嘉祥科伦普重工有限公司</div>
<div class="label-title">样品标签</div>
<table class="info-table">
<tr>
<td class="label-cell">品名</td>
<td class="value-cell" colspan="3">{{ content.productName || '' }}</td>
</tr>
<tr>
<td class="label-cell">执行标准</td>
<td class="value-cell" colspan="3">{{ content.executionStandard || '' }}</td>
</tr>
<tr>
<td class="label-cell">材质</td>
<td class="value-cell">{{ content.material || '' }}</td>
<td class="label-cell">厚度</td>
<td class="value-cell">{{ content.thickness || '' }}</td>
</tr>
<tr>
<td class="label-cell">镀层种类</td>
<td class="value-cell">{{ content.platingType || '' }}</td>
<td class="label-cell">镀层质量</td>
<td class="value-cell">{{ content.platingQuality || '' }}</td>
</tr>
<tr>
<td class="label-cell">表面状态</td>
<td class="value-cell">{{ content.surfaceState || '' }}</td>
<td class="label-cell">表面处理</td>
<td class="value-cell">{{ content.surfaceTreatment || '' }}</td>
</tr>
<tr>
<td class="label-cell">样品日期</td>
<td class="value-cell" colspan="3">{{ content.sampleDate || '' }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'SampleLabelRenderer',
props: {
content: {
type: Object,
default: () => ({
productName: '',
executionStandard: '',
material: '',
thickness: '',
platingType: '',
platingQuality: '',
surfaceState: '',
surfaceTreatment: '',
sampleDate: ''
})
}
}
}
</script>
<style scoped>
@import './label-common.css';
.sample-label-container {
width: 50em;
height: 40em;
border: 1px solid #000;
padding: 2px;
box-sizing: border-box;
font-family: var(--label-font);
font-size: 10px;
line-height: 1.5;
display: flex;
flex-direction: column;
}
.company-title {
text-align: center;
font-weight: bold;
margin-bottom: 2px;
font-size: 11px;
}
.label-title {
text-align: center;
font-weight: bold;
margin-bottom: 3px;
border-bottom: 1px solid #000;
padding-bottom: 1px;
font-size: 11px;
}
.info-table {
width: 100%;
border-collapse: collapse;
flex-grow: 1; /* 让表格占据剩余空间 */
table-layout: fixed; /* 固定表格布局,确保列宽均匀 */
}
.info-table td {
border: 1px solid #000;
padding: 4px 2px;
text-align: center;
vertical-align: middle;
word-break: break-all; /* 处理长文本 */
}
.label-cell {
font-weight: bold;
width: 25%; /* 标签单元格固定占25%宽度 */
background-color: #f9f9f9;
}
/* 调整不同单元格的宽度比例 */
.value-cell {
width: 75%; /* 单标签对应的值占75% */
}
/* 四列布局时每个单元格占25% */
tr:nth-child(n+3) td:not([colspan]) {
width: 25%;
}
</style>

View File

@@ -6,11 +6,11 @@
<!-- 第一行冷卷号热卷号 -->
<div class="grid-cell label-cell">钢卷号</div>
<div class="grid-cell value-cell">
<div class="grid-cell value-cell current-coil-no">
<div class="nob">{{ content.currentCoilNo || '' }}</div>
</div>
<div class="grid-cell label-cell">原料号</div>
<div class="grid-cell value-cell">
<div class="grid-cell value-cell enter-coil-no">
<div class="nob">{{ content.enterCoilNo || '' }}</div>
</div>
@@ -240,6 +240,10 @@ export default {
justify-content: center;
}
.current-coil-no, .enter-coil-no {
font-size: 1em !important;
}
.qrcode-container {
width: 80%;
height: 80%;

View File

@@ -256,12 +256,13 @@ export default {
justify-content: center;
font-weight: 900;
color: #000;
font-family: var(--label-font);
font-size: 1.2em;
}
.current-coil-no, .enter-coil-no {
font-size: 1.1em !important;
font-size: 1em !important;
}

View File

@@ -262,7 +262,7 @@ export default {
}
.current-coil-no, .enter-coil-no {
font-size: 1.1em !important;
font-size: 1em !important;
}

View File

@@ -1,3 +1,14 @@
:root {
--label-font: '黑体', 'Courier New', 'SimSun', serif;
@font-face {
font-family: 'AlimamaShuHeiTi-Bold';
src: url('../../../../../assets/fonts/alimama/AlimamaShuHeiTi-Bold.woff2') format('woff2'),
url('../../../../../assets/fonts/alimama/AlimamaShuHeiTi-Bold.woff') format('woff'),
url('../../../../../assets/fonts/alimama/AlimamaShuHeiTi-Bold.ttf') format('truetype'),
url('../../../../../assets/fonts/alimama/AlimamaShuHeiTi-Bold.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
:root {
--label-font: 'AlimamaShuHeiTi-Bold', '黑体', 'SimSun', serif;
}