feat:兽药管理开发

sub-government-affairs-service/src/apis/inputSuppliesApi/material.js

@@ -46,4 +46,20 @@ export function addFertilizer(data) {
   });
 }
 // #endregion
+/* ------ 兽药 ------ */
+// #region
+
+export function getAnimalMedicineList(params) {
+  return request('/inputGoods/animalMedicine/page', {
+    params,
+  });
+}
+export function addAnimalMedicine(data) {
+  return request('/inputGoods/animalMedicine/save', {
+    method: 'POST',
+    data,
+  });
+}
+// #endregion
+
 //

sub-government-affairs-service/src/router/modules/inputSupplies/index.js

@@ -34,18 +34,18 @@ const inputSuppliesRoutes = [
             component: () => import('@/views/inputSuppliesManage/material/pesticide/index.vue'),
             meta: { title: '农药管理', icon: 'Document' },
           },
-          // {
+          {
-          //   path: '/sub-government-affairs-service/material/fertilizer',
+            path: '/sub-government-affairs-service/material/fertilizer',
-          //   name: 'input-supplies-fertilizer',
+            name: 'input-supplies-fertilizer',
-          //   component: () => import('@/views/inputSuppliesManage/material/fertilizer/index.vue'),
+            component: () => import('@/views/inputSuppliesManage/material/fertilizer/index.vue'),
-          //   meta: { title: '肥料管理', icon: 'Document' },
+            meta: { title: '肥料管理', icon: 'Document' },
-          // },
+          },
-          // {
+          {
-          //   path: '/sub-government-affairs-service/material/ratPoison',
+            path: '/sub-government-affairs-service/material/ratPoison',
-          //   name: 'input-supplies-ratPoison',
+            name: 'input-supplies-ratPoison',
-          //   component: () => import('@/views/inputSuppliesManage/material/ratPoison/index.vue'),
+            component: () => import('@/views/inputSuppliesManage/material/ratPoison/index.vue'),
-          //   meta: { title: '兽药管理', icon: 'Document' },
+            meta: { title: '兽药管理', icon: 'Document' },
-          // },
+          },
           // {
           //   path: '/sub-government-affairs-service/material/farmMachinery',
           //   name: 'input-supplies-farmMachinery',

sub-government-affairs-service/src/views/inputSuppliesManage/hooks/useBasicInfo.js

@@ -23,9 +23,6 @@ export function useBasicInfo(set = {}) {
   /* 不包含顶级 */
   const materialTwoLevel = reactive({});
 
-  /* ------ 农药 ------ */
-  // #region
-  const pesticideTypes = reactive({});
   const goodsUnitOptions = reactive([
     { value: '1', label: 'ml/瓶' },
     { value: '2', label: 'mg/盒' },
@@ -36,7 +33,6 @@ export function useBasicInfo(set = {}) {
     { value: '2', label: '/平方米' },
     { value: '3', label: '/株' },
   ]);
-  // #endregion
 
   // #endregion
   /* ------  ------ */
@@ -85,10 +81,14 @@ export function useBasicInfo(set = {}) {
   }
   /* 获取标签的名字 */
   function targetName(arr, ids, _name) {
-    let _ids = JSON.parse(JSON.stringify(ids));
     let name = '';
-    if (!arr || !arr.length || _ids.length < 1) {
+    if (!arr || !arr.length || ids.length < 1) {
-      return;
+      return name;
+    }
+    let _ids = JSON.parse(JSON.stringify(ids));
+    if (typeof ids == 'string') {
+      let obj = arr.find((v) => v.value == _ids) || { value: '', label: '', children: [] };
+      name = obj.label;
     } else {
       let obj = arr.find((v) => v.value == _ids[0]) || { value: '', label: '', children: [] };
       name = _name + (_name ? '/' : '') + obj.label;
@@ -128,18 +128,39 @@ export function useBasicInfo(set = {}) {
     }, 200);
   }
   /* t： 1规格 2用量 */
-  function handleNumUnit(num, unit, t) {
+  function handleNumUnit(_info = {}) {
     let text = '';
-    if (num && unit) {
+    if (!_info.type || !_info.type < -1) return text;
-      if (t == 1) {
+    const info = Object.assign(
-        text = `${num}${(goodsUnitOptions.find((_v) => _v.value == unit) || { label: '' }).label}`;
+      {
-      } else {
+        num1: '',
-        console.log('goodsUnitOptions --- ', (useDosageUnit.find((_v) => _v.value == unit) || { label: '' }).label);
+        unit1: '',
-        text = `${num}${(useDosageUnit.find((_v) => _v.value == unit) || { label: '' }).label}`;
+        num2: '',
-      }
+        unit2: '',
+        type: -2,
+      },
+      _info
+    );
+    if (info.type == -1) {
+      let u1 = (goodsUnitOptions.find((_v) => _v.value == info.unit1) || { label: '' }).label;
+      let u2 = (useDosageUnit.find((_v) => _v.value == info.unit2) || { label: '' }).label;
+      text = `${info.num2}${u1.split('/')[1]}${u2}`;
+    } else if (info.type == 1) {
+      text = `${info.num1}${(goodsUnitOptions.find((_v) => _v.value == info.unit1) || { label: '' }).label}`;
+    } else if (info.type == 2) {
+      text = `${info.num2}${(useDosageUnit.find((_v) => _v.value == info.unit2) || { label: '' }).label}`;
     }
     return text;
   }
+  function handleShowName(text = '') {
+    if (!text || !text.includes('|')) return false;
+    let names = JSON.parse(text.split('|')[1]);
+    let _t = '';
+    names.forEach((v, i) => {
+      _t += (i == 0 ? '' : '，') + v;
+    });
+    return _t;
+  }
   // #endregion
   onMounted(getmaterialType);
 
@@ -153,6 +174,7 @@ export function useBasicInfo(set = {}) {
     getmaterialType,
     targetName,
     filterTypes,
+    handleShowName,
     handleNumUnit,
   };
 }

sub-government-affairs-service/src/views/inputSuppliesManage/material/fertilizer/index.vue

@@ -10,14 +10,21 @@
       :data="data"
       :table-loading="_loading"
       :option="option"
+      :before-close="handleCloseDialog"
+      @search-change="
+        (form, done) => {
+          getData(1);
+          done();
+        }
+      "
+      @refresh-change="getData"
+      @search-reset="getData(1)"
       @current-change="getData"
       @size-change="getData(1)"
       @row-save="handleRowSave"
     >
       <template #menu="{ row }">
-        aa
+        <el-button @click="handleInfo(row)">详情</el-button>
-        <!-- <el-button type="primary" @click="handleEdit(row)">上传报告</el-button> -->
-        <!-- <el-button @click="handleInfo(row)">详情</el-button> -->
       </template>
       <template #photoUrl-form="{ type }">
         <Attrs v-model:attrs="attrs" :type="type == 'add' ? 'add' : 'view'" :limit="2" />
@@ -42,9 +49,10 @@ import { useBasicInfo } from '@/views/inputSuppliesManage/hooks/useBasicInfo';
 import inputSuppliesApi from '@/apis/inputSuppliesApi';
 import Attrs from '@/views/inputSuppliesManage/common/Attrs.vue';
 import NumberSelect from '@/views/inputSuppliesManage/common/NumberSelect.vue';
+import { ElMessage } from 'element-plus';
 
 const { getFertilizreList, addFertilizer } = inputSuppliesApi;
-const { loadFinish, materialTypes, materialTwoLevel, targetName, goodsUnitOptions, useDosageUnit, handleNumUnit } = useBasicInfo();
+const { loadFinish, materialTypes, materialTwoLevel, targetName, goodsUnitOptions, useDosageUnit, handleShowName, handleNumUnit } = useBasicInfo();
 
 onMounted(getData);
 watch(
@@ -117,15 +125,19 @@ const option = ref({
       label: '经销商',
     },
     {
-      prop: 'classifyName',
+      prop: '_classifyId',
       label: '分类',
       type: 'cascader',
       clearable: false,
       dicData: () => [],
       rules: customRules({ msg: '请选择肥料分类' }),
+      expandTrigger: 'click',
+      render: ({ row }) => {
+        return row.classifyName;
+      },
     },
     {
-      prop: 'mainComponents',
+      prop: 'mainComponent',
       label: '化学成分',
       rules: customRules({ msg: '请输入化学成分' }),
     },
@@ -142,8 +154,8 @@ const option = ref({
     {
       hide: true,
       prop: '_suggest',
-      label: '建议用量',
+      label: '建议用量1',
-      viewDisplay: true,
+      viewDisplay: false,
     },
     {
       prop: 'productSpecification',
@@ -158,10 +170,22 @@ const option = ref({
       editDisplay: false,
     },
     {
+      hide: true,
       prop: '_produceDosage',
       label: '剂型',
       type: 'cascader',
       dicData: [],
+      viewDisplay: false,
+      expandTrigger: 'click',
+    },
+    {
+      prop: 'produceDosage',
+      label: '剂型',
+      addDisplay: false,
+      editDisplay: false,
+      render: ({ row }) => {
+        return row.produceDosage;
+      },
     },
     {
       prop: 'expiryDate',
@@ -206,26 +230,25 @@ async function getData(reset) {
   };
   _type.value != '0' && (params.classifyId = _type.value);
   let res = await getFertilizreList(params);
-  console.log('params --- ', params, res);
   _loading.value = false;
   if (res.code == 200) {
     data.value = res.data.records.map((v) => {
-      console.log('v', v);
+      v.productSpecification = handleNumUnit({ num1: v.productSpecification, unit1: v.productUnit, type: 1 });
-      v.productSpecification = handleNumUnit(v.productSpecification, v.productUnit, 1);
+      v.suggest = handleNumUnit({ unit1: v.productUnit, num2: v.suggestDosage, unit2: v.suggestUnit, type: -1 });
-      v.suggest = handleNumUnit(v.suggestDosage, v.suggestUnit, 2);
+      v.produceDosage = handleShowName(v.produceDosage);
       return v;
     });
     pageData.value.total = res.data.total;
   }
 }
-function handleRowSave(form, done, loading) {
+async function handleRowSave(form, done, loading) {
-  console.log('form', form);
   let data = {
     fertilizeName: form.fertilizeName,
     manufacturer: form.manufacturer,
     distributor: form.distributor,
-    classifyId: form.classifyName,
+    classifyId: form._classifyId[0],
-    mainComponents: form.mainComponents,
+    classifyName: targetName(option.value.column[5].dicData, form._classifyId, ''),
+    mainComponent: form.mainComponent,
     productSpecification: productSpecification.value.num,
     productUnit: productSpecification.value.type,
     suggestDosage: useDosage.value.num,
@@ -241,14 +264,46 @@ function handleRowSave(form, done, loading) {
   if (form._produceDosage.length) {
     let names = [];
     form._produceDosage.forEach((item) => {
-      names.push(targetName(option.value.column, item, ''));
+      names.push(targetName(option.value.column[12].dicData, item, ''));
     });
     data.produceDosage = JSON.stringify(form._produceDosage) + '|' + JSON.stringify(names);
   }
-  console.log('data', data);
+  let res = await addFertilizer(data);
   loading();
+  if (res.code == 200) {
+    ElMessage.success('添加成功');
+    resetOtherInfo();
+    getData();
+    done();
+  }
+}
+function handleInfo(row) {
+  if (row.photoUrl) {
+    attrs.value = row.photoUrl.split(',').map((v, i) => {
+      return { url: v, uid: `photo_${i}_${Date.now()}` };
+    });
+  }
+  crud.value.rowView(row);
+  for (let i = 0; i < option.value.column.length; i++) {
+    option.value.column[i].span = 24;
+    if (option.value.column[i].prop == 'photoUrl') {
+      return;
+    }
+  }
+}
+function resetOtherInfo() {
+  attrs.value = [];
+  productSpecification.value = { num: 1, type: '1' };
+  useDosage.value = { num: 1, type: '1' };
+}
+function handleCloseDialog(done) {
+  resetOtherInfo();
+  done();
+  for (let i = 0; i < option.value.column.length; i++) {
+    delete option.value.column[i].span;
+    if (option.value.column[i].prop == 'photoUrl') return;
+  }
 }
-
 // #endregion
 </script>
 

sub-government-affairs-service/src/views/inputSuppliesManage/material/pesticide/index.vue

@@ -57,7 +57,7 @@
 </template>
 
 <script setup>
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch } from 'vue';
 import TypeMenu from '../../common/TypeMenu.vue';
 import { CRUD_OPTIONS, customRules } from '@/config';
 import { useBasicInfo } from '@/views/inputSuppliesManage/hooks/useBasicInfo';
@@ -66,9 +66,10 @@ import NumberSelect from '@/views/inputSuppliesManage/common/NumberSelect.vue';
 import inputSuppliesApi from '@/apis/inputSuppliesApi';
 import { ElMessage } from 'element-plus';
 
-const { defaultGet, loadFinish, materialTypes, materialTwoLevel, goodsUnitOptions, useDosageUnit, targetName, filterTypes } = useBasicInfo({
+const { defaultGet, loadFinish, materialTypes, materialTwoLevel, goodsUnitOptions, useDosageUnit, handleNumUnit, handleShowName, targetName } =
-  moduleType: '1',
+  useBasicInfo({
-});
+    moduleType: '1',
+  });
 const { getPesticideList, addPesticide, pesticideReportSave } = inputSuppliesApi;
 
 /* --------------- data --------------- */
@@ -171,13 +172,13 @@ const option = ref({
     {
       prop: 'manufacturer',
       label: '生产厂家',
-      width: '120',
+      width: '220',
       editDisplay: false,
       rules: customRules({ msg: '请输入生产厂家' }),
     },
     {
       prop: 'distributor',
-      width: '120',
+      width: '220',
       label: '经销商',
       editDisplay: false,
     },
@@ -189,14 +190,14 @@ const option = ref({
     },
     {
       prop: 'toxicityLevel',
-      width: '100',
+      width: '140',
       label: '毒性',
       editDisplay: false,
       value: '无毒',
     },
     {
       prop: 'dosage',
-      width: '100',
+      width: '140',
       label: '建议用量',
       editDisplay: false,
     },
@@ -239,6 +240,7 @@ const option = ref({
       viewDisplay: false,
       editDisplay: false,
       rules: customRules({ msg: '请选择防治对象' }),
+      expandTrigger: 'click',
     },
     {
       hide: true,
@@ -252,6 +254,7 @@ const option = ref({
       viewDisplay: false,
       editDisplay: false,
       rules: customRules({ msg: '请选择主要成分' }),
+      expandTrigger: 'click',
     },
     {
       hide: true,
@@ -265,6 +268,7 @@ const option = ref({
       viewDisplay: false,
       editDisplay: false,
       rules: customRules({ msg: '加工剂型' }),
+      expandTrigger: 'click',
     },
     {
       hide: true,
@@ -437,8 +441,8 @@ async function getData(reset) {
   if (res && res.code === 200) {
     data.value = res.data.records;
     data.value.forEach((v) => {
-      v.productSpecification = `${v.productSpecification}${goodsUnitOptions.find((_v) => _v.value == v.productUnit).label}`;
+      v.productSpecification = handleNumUnit({ num1: v.productSpecification, unit1: v.productUnit, type: 1 });
-      v.dosage = `${v.suggestDosage}${useDosageUnit.find((_v) => _v.value == v.suggestUnit).label}`;
+      v.dosage = handleNumUnit({ unit1: v.productUnit, num2: v.suggestDosage, unit2: v.suggestUnit, type: -1 });
       v.targetPests = handleShowName(v.targetPests);
       v.mainComponent = handleShowName(v.mainComponent);
       v.produceDosage = handleShowName(v.produceDosage);
@@ -584,15 +588,6 @@ async function handleRowUpdate(form, index, done, loading) {
     done();
   }
 }
-function handleShowName(text = '') {
-  if (!text || !text.includes('|')) return false;
-  let names = JSON.parse(text.split('|')[1]);
-  let _t = '';
-  names.forEach((v, i) => {
-    _t += (i == 0 ? '' : '，') + v;
-  });
-  return _t;
-}
 // #endregion
 </script>
 

sub-government-affairs-service/src/views/inputSuppliesManage/material/ratPoison/index.vue

@@ -1,21 +1,312 @@
 <template>
   <section class="custom-page">
-    <section>兽药</section>
+    <h2>兽药基本信息</h2>
+    <TypeMenu v-if="materialTypes['3'].length > 1" v-model:type="_type" :types="materialTypes['3']" />
+    <br />
+    <avue-crud
+      ref="crud"
+      v-model:page="pageData"
+      v-model:search="searchCondition"
+      :table-loading="_loading"
+      :data="data"
+      :option="option"
+      :before-close="handleCloseDialog"
+      @search-change="
+        (form, done) => {
+          getData(1);
+          done();
+        }
+      "
+      @search-reset="getData(1)"
+      @refresh-change="getData"
+      @current-change="getData"
+      @size-change="getData(1)"
+      @row-save="handleRowSave"
+    >
+      <template #menu="{ row }">
+        <el-button @click="handleInfo(row)">详情</el-button>
+      </template>
+      <template #photoUrl-form="{ type }">
+        <Attrs v-model:attrs="attrs" :type="type == 'add' ? 'add' : 'view'" :limit="2" />
+      </template>
+      <template #productSpecification-form="{ value, type }">
+        <NumberSelect v-if="type == 'add'" v-model:value="productSpecification" :options="goodsUnitOptions" />
+        <span v-if="type == 'view'">{{ value }}</span>
+      </template>
+    </avue-crud>
   </section>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
+import TypeMenu from '../../common/TypeMenu.vue';
+import { CRUD_OPTIONS, customRules } from '@/config';
+import { useBasicInfo } from '@/views/inputSuppliesManage/hooks/useBasicInfo';
+import Attrs from '@/views/inputSuppliesManage/common/Attrs.vue';
+import NumberSelect from '@/views/inputSuppliesManage/common/NumberSelect.vue';
+import inputSuppliesApi from '@/apis/inputSuppliesApi';
+import { ElMessage } from 'element-plus';
+
+const { defaultGet, loadFinish, materialTypes, materialTwoLevel, goodsUnitOptions, handleNumUnit, handleShowName, targetName } = useBasicInfo();
+const { getAnimalMedicineList, addAnimalMedicine } = inputSuppliesApi;
 
 /* --------------- data --------------- */
 // #region
+const _type = ref('0');
+watch(
+  () => _type.value,
+  () => getData(1),
+  {
+    deep: true,
+  }
+);
+const searchCondition = ref({
+  keywords: '',
+});
+const crud = ref();
+const _loading = ref(true);
+const data = ref([]);
+const pageData = ref({
+  total: 0,
+  currentPage: 1,
+  size: 10,
+});
+
+const option = ref({
+  ...CRUD_OPTIONS,
+  selection: false,
+  labelWidth: 124,
+  editBtn: false,
+  delBtn: false,
+  menuWidth: 220,
+  dialogWidth: '50%',
+  column: [
+    {
+      hide: true,
+      label: '关键字',
+      prop: 'keywords',
+      search: true,
+      addDisplay: false,
+      editDisplay: false,
+      viewDisplay: false,
+      searchPlaceholder: '输入药品名称',
+    },
+    {
+      prop: 'animalName',
+      label: '名称',
+      width: '120',
+      editDisplay: false,
+      rules: customRules({ msg: '请输入药品名称' }),
+    },
+    {
+      prop: 'manufacturer',
+      label: '厂家',
+      rules: customRules({ msg: '请输入厂家名称' }),
+    },
+    {
+      hide: true,
+      prop: 'photoUrl',
+      label: '兽药图片',
+      editDisplay: false,
+    },
+    {
+      prop: 'distributor',
+      label: '经销商',
+    },
+    {
+      prop: 'mainComponent',
+      width: '200',
+      label: '主要成分',
+    },
+    {
+      prop: '_classifyId',
+      label: '分类',
+      type: 'cascader',
+      viewDisplay: false,
+      rules: customRules({ msg: '请选择分类' }),
+      expandTrigger: 'click',
+      render: ({ row }) => row.classifyName,
+    },
+    {
+      prop: 'productSpecification',
+      width: '100',
+      label: '产品规格',
+      editDisplay: false,
+    },
+    {
+      prop: 'produceDosage',
+      width: '200',
+      label: '加工剂型',
+      addDisplay: false,
+      editDisplay: false,
+    },
+    {
+      hide: true,
+      prop: '_produceDosage',
+      label: '加工剂型',
+      type: 'cascader',
+      dicData: [],
+      value: [],
+      viewDisplay: false,
+      editDisplay: false,
+      expandTrigger: 'click',
+      rules: customRules({ msg: '加工剂型' }),
+    },
+    {
+      prop: 'adaptAnimal',
+      label: '适用动物',
+    },
+    {
+      prop: 'expiryDate',
+      label: '保质期',
+    },
+    {
+      hide: true,
+      prop: 'purpose',
+      label: '作用与用途',
+      type: 'textarea',
+      span: 24,
+    },
+    {
+      hide: true,
+      prop: 'usageMethod',
+      label: '使用方法',
+      type: 'textarea',
+      span: 24,
+    },
+    {
+      hide: true,
+      prop: 'precautions',
+      label: '注意事项',
+      type: 'textarea',
+      span: 24,
+    },
+  ],
+});
+const _allTypes = ref([]);
+const _suggest = ref([]);
+watch(
+  () => loadFinish.value,
+  () => {
+    if (loadFinish.value) {
+      option.value.column.forEach((v) => {
+        if (v.prop === '_classifyId') {
+          _allTypes.value = materialTypes['3'].filter((v, i) => i > 0) ?? [];
+          v.dicData = _allTypes.value;
+        }
+        if (v.prop === '_produceDosage') {
+          _suggest.value = materialTwoLevel?.['1']?.['3'] ?? [];
+          v.dicData = _suggest.value;
+        }
+      });
+    }
+  }
+);
+const attrs = ref([]);
+const productSpecification = ref({
+  num: 1,
+  type: '1',
+});
 
 // #endregion
 
 /* --------------- methods --------------- */
 // #region
 
+defaultGet(getData);
+async function getData(reset) {
+  _loading.value = true;
+  reset == 1 && (pageData.value.currentPage = 1);
+  let params = {
+    current: pageData.value.currentPage,
+    size: pageData.value.size,
+    animalName: searchCondition.value.keywords,
+  };
+  _type.value != '0' && (params.classifyId = _type.value);
+  let res = await getAnimalMedicineList(params);
+  _loading.value = false;
+  if (res && res.code === 200) {
+    data.value = res.data.records;
+    data.value.forEach((v) => {
+      v.productSpecification = handleNumUnit({ num1: v.productSpecification, unit1: v.productUnit, type: 1 });
+      v.produceDosage = handleShowName(v.produceDosage);
+    });
+    pageData.value.total = res.data.total;
+  }
+}
+function handleCloseDialog(done) {
+  delete option.value.column[3].span;
+  resetOtherInfo();
+  done();
+}
+
+async function handleRowSave(form, done, loading) {
+  let data = {
+    animalName: form.animalName,
+    manufacturer: form.manufacturer,
+    distributor: form.distributor,
+    mainComponent: form.mainComponent,
+    classifyId: JSON.stringify(form._classifyId),
+    classifyName: targetName(_allTypes.value, form._classifyId, ''),
+    productSpecification: productSpecification.value.num,
+    productUnit: productSpecification.value.type,
+    adaptAnimal: form.adaptAnimal,
+    purpose: form.purpose,
+    usageMethod: form.usageMethod,
+    precautions: form.precautions,
+    expiryDate: form.expiryDate,
+  };
+  if (form._produceDosage.length) {
+    let names = [];
+    form._produceDosage.forEach((item) => {
+      names.push(targetName(_suggest.value, item, ''));
+    });
+    data.produceDosage = JSON.stringify(form._produceDosage) + '|' + JSON.stringify(names);
+  }
+  if (attrs.value.length) {
+    data.photoUrl = attrs.value.map((v) => v.url).join();
+  }
+  let res = await addAnimalMedicine(data);
+  loading();
+  if (res.code == 200) {
+    ElMessage.success('保存成功');
+    getData();
+    resetOtherInfo();
+    done();
+  }
+}
+function resetOtherInfo() {
+  let obj = { num: 1, type: '1' };
+  attrs.value = [];
+  productSpecification.value = obj;
+}
+
+function handleInfo(row) {
+  handleAttrs(row);
+  option.value.column[3].span = 24;
+  crud.value.rowView(row);
+}
+/* 处理展示附件 */
+function handleAttrs(row = {}) {
+  if (!row) {
+    return;
+  }
+  if (row.photoUrl) {
+    attrs.value = row.photoUrl.split(',').map((v, i) => {
+      return {
+        url: v,
+        uid: `photo_${i}_${Date.now()}`,
+      };
+    });
+  }
+}
 // #endregion
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+h2 {
+  font-size: 24px;
+  font-weight: bold;
+  font-family: '黑体';
+}
+</style>