crm_extend/src/pages/payment-record2/index.vue

<template>
  <div class="page-payment-record">
    <div
      v-if="loading"
      v-loading="true"
      style="
        width: 100vw;
        height: 100vh;
        z-index: 999;
        position: fixed;
        top: 0;
        left: 0;
      "
      class=""
      element-loading-text="Loading..."
      element-loading-background="rgba(0, 0, 0, 0.3)"
    ></div>
    <div class="main-content">
      <navPaymentRecord></navPaymentRecord>
      <div class="flex justify-between">
        <div class="flex btn-wrap">
          <el-button
            :disabled="multipleSelection.length < 1"
            type="danger"
            @click="onDelete"
          >
            Delete
          </el-button>

          <el-button @click="downloadSample">Download XLSX sample</el-button>

          <el-button
            type="primary"
            @click="dialogVisible = true"
          >
            Upload Statement
          </el-button>
          <el-button
            :disabled="!tableData.length && !tableData.length"
            @click="addRow"
          >
            Add New Line
          </el-button>
          <el-button
            :disabled="tableData.length < 1 && tableData.length < 1"
            type="primary"
            @click="tryCreateStatement"
          >
            Save
          </el-button>
          <!-- <el-button @click="spliteDomesticTrackingAndPO">test</el-button> -->
        </div>
        <div class="logo-area">
          <img
            :src="getLogoPath()"
            alt=""
          />
        </div>
      </div>

      <div class="po-table">
        <el-table
          :data="computedTableData"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            fixed
            type="selection"
            width="55"
          />
          <el-table-column
            prop="payment_type"
            label="Payment Type"
            width="120"
            align="center"
          />
          <el-table-column
            prop="statement_name"
            label="Statement Name"
            min-width="150"
            align="center"
          />
          <el-table-column
            prop="po_number"
            label="PO Number"
            align="center"
            width="200"
            label-class-name="red-font"
          >
            <template #default="scope">
              {{
                [
                  scope.row.PO_Number,
                  scope.row.PO_Number2,
                  scope.row.PO_Number3,
                ]
                  .filter((i) => !!i)
                  .join('; ')
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="Total"
            label="Total"
            align="center"
            width="110"
            label-class-name="red-font"
          />
          <el-table-column
            prop="Billable_Weight"
            label="Billable Weight"
            align="center"
            width="150"
            label-class-name="red-font"
          />
          <el-table-column
            prop="Tracking_Number"
            label="Tracking Number"
            align="center"
            width="150"
            label-class-name="red-font"
          />
          <el-table-column
            prop="Sender"
            label="Sender"
            align="center"
            width="110"
          />
          <el-table-column
            prop="ATTN"
            label="ATTN"
            align="center"
            width="110"
          />
          <el-table-column
            prop="From_Address"
            label="From Address"
            align="center"
            width="150"
          />
          <el-table-column
            prop="To_Address"
            label="To Address"
            align="center"
            width="150"
          />
          <el-table-column
            prop="Issue_Date"
            label="Issue Date"
            align="center"
            width="110"
          />
          <el-table-column
            prop="Weight"
            label="Weight"
            align="center"
            width="110"
          />
          <el-table-column
            prop="Volume"
            label="Volume"
            align="center"
            width="110"
          />
          <el-table-column
            prop="Fee_Type"
            label="Fee Type (运费/保费 etc...)"
            align="center"
            width="150"
          />
          <el-table-column
            prop="Package_Type"
            label="Package Type (次日达/顺丰特快 etc...)"
            align="center"
            width="180"
          />
          <el-table-column
            prop="Director"
            label="Director"
            align="center"
            width="110"
          />
          <el-table-column
            fixed="right"
            label="Action"
            width="80px"
          >
            <template #default="scope">
              <el-button
                size="small"
                type="warning"
                @click="editRow(scope.row, scope.$index)"
              >
                Edit
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <br />
        <div
          class="flex justify-between"
          style="align-items: flex-end"
        >
          <el-pagination
            v-model:currentPage="currentPage"
            v-model:pageSize="pageSize"
            layout="prev, pager, next, jumper, sizes"
            :page-sizes="[5, 10, 15, 20, 40, 100]"
            :total="tableData.length"
            @current-change="multipleSelection = []"
            @size-change="multipleSelection = []"
          />
          <div class="total-data">
            <div class="flex">
              <div>Total line:</div>
              <div>{{ tableData.length }}</div>
            </div>
            <div class="flex">
              <div class="">Sum Total:</div>
              <div class="">{{ computedSum }}</div>
            </div>
            <div class="flex">
              <div class="">Currency:</div>
              <div>
                {{ tableData[0]?.Currency || '0' }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="copyright">
        Copyright of Promocollection - Version 1.02 Released on 30/07/2024
      </div>
    </div>
    <dialog-upload
      v-model:visible="dialogVisible"
      v-model:currencyList="currencyList"
      @update-table-data="updateTableData"
    ></dialog-upload>

    <edit-item
      v-model:visible="dialogEditRowVisible"
      v-model:currencyList="currencyList"
      v-model:currentEditRow="computedCurrentEditRow"
      v-model:editMode="editMode"
      v-model:disableFlag="currentDisableFlag"
      :statement-list="computedStatementList"
      :locked-currency="tableData.length ? tableData[0].Currency : 'CNY'"
      @edit="onEditRow"
      @add="onAddRow"
    ></edit-item>
  </div>
</template>
<script lang="ts">
export default defineComponent({
  name: 'PaymentRecord2',
})
</script>

<script lang="ts" setup>
import { defineComponent, ref, computed } from 'vue'
import {
  ElButton,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElMessage,
  ElNotification,
} from 'element-plus'
import { useRoute } from 'vue-router'
import dialogUpload from './components/upload.vue'
import editItem from './components/edit.vue'
import { IUser } from '@/interface'
import { IPoItem } from './inteface'
import request from '@/utils/axios'
import utils from '@/utils/index'
import * as XLSX from 'xlsx'
import navPaymentRecord from '@/pages/payment-record/components/nav.vue'

const loading = ref(false)

const getLogoPath = function () {
  return new URL('/assets/logo@2x.png', import.meta.url).href
}

const multipleSelection = ref<IPoItem[]>([])

const handleSelectionChange = (val: IPoItem[]) => {
  multipleSelection.value = val
}
const onDelete = function () {
  const target = multipleSelection.value
  if (tableData.value.length) {
    tableData.value = tableData.value.filter((i) => {
      return !target.includes(i)
    })
  }
}

const sheetData = [
  {
    PO_Number: '',
    PO_Number2: '',
    PO_Number3: '',
    Total: '',
    Billable_Weight: '',
    Tracking_Number: '',
    Sender: '',
    ATTN: '',
    From_Address: '',
    To_Address: '',
    Issue_Date: '',
    Weight: '',
    Volume: '',
    Fee_Type: '',
    Package_Type: '',
    Director: '',
  },
]
const downloadSample = function () {
  const sheet1 = XLSX.utils.json_to_sheet(sheetData)
  const wb = XLSX.utils.book_new()
  sheet1['!cols'] = [
    { wpx: 100 },
    { wpx: 100 },
    { wpx: 100 },
    { wpx: 100 },
    { wpx: 100 },
    { wpx: 100 },
    { wpx: 150 },
    { wpx: 150 },
    { wpx: 100 },
    { wpx: 100 },
    { wpx: 100 },
    { wpx: 100 },
    { wpx: 100 },
    { wpx: 100 },
    { wpx: 100 },
    { wpx: 100 },
  ]
  XLSX.utils.book_append_sheet(wb, sheet1, 'sheet1')

  XLSX.writeFile(wb, '国内运费模版.xlsx')
}

const computedSum = computed(() => {
  return utils.toFixed(
    tableData.value.reduce((total, current) => {
      total = total + Number(current.Total)
      return total
    }, 0),
    1000,
  )
})

const tableData = ref([
  // Object.assign(
  //   {},
  //   {
  //     PO_Number: 'PO13097',
  //     PO_Number2: '',
  //     PO_Number3: '',
  //     Total: 12,
  //     Billable_Weight: 2,
  //     Tracking_Number: 'tracking number',
  //     Sender: 'sender',
  //     ATTN: 'attn',
  //     From_Address: 'from addr',
  //     To_Address: 'to addr',
  //     Issue_Date: '2024-07-20',
  //     Weight: 3,
  //     Volume: 4,
  //     Fee_Type: 'fee type',
  //     Package_Type: 'package type',
  //     Director: 'director',
  //   },
  //   {
  //     Currency: 'CNY',
  //     statement_name: '华信强0319测试上传月结单',
  //     payment_type: '国内运费',
  //     Weight_Unit: 'Kg',
  //   },
  // ),
] as IPoItem[])

const fileContainer = ref(null as any)
const updateTableData = (p: { data: IPoItem[]; mode: string }, file: any) => {
  // console.log(p, 'p')
  tableData.value = p.data as IPoItem[]
  currentPage.value = 1
  fileContainer.value = file
}

const currentDisableFlag = computed(() => {
  return tableData.value.length > 0
})

const currentPage = ref(1)
const pageSize = ref(15)
// 手动分页. 可能会有很多条数据
const computedTableData = computed(() => {
  return tableData.value.length < pageSize.value
    ? tableData.value
    : tableData.value.slice(
        (currentPage.value - 1) * pageSize.value,
        tableData.value.length > currentPage.value * pageSize.value
          ? currentPage.value * pageSize.value
          : tableData.value.length,
      )
})
const computedStatementList = computed(() => {
  const result: any[] = []

  if (tableData.value.length) {
    tableData.value.forEach((i) => {
      if (i.statement_name?.length && !result.includes(i.statement_name)) {
        result.push(i.statement_name)
      }
    })
  }
  return result.map((i, index) => {
    // statement调整成点击保存再创建了, 而不是之前的在上传对话框创建, 所以逻辑变动, 这里拿不到id, 只能拿name凑合.
    return {
      value: i,
      label: i,
    }
  })
})
const dialogEditRowVisible = ref(false)
const currentEditIndex = ref(-1) // -1新增, 其余则为当前页的行号
const editMode = ref(1) // 1新增 2编辑

const computedCurrentEditRow = computed(() => {
  if (currentEditIndex.value > -1) {
    return tableData.value[
      (currentPage.value - 1) * pageSize.value + currentEditIndex.value
    ]
  }
  return {}
})
const addRow = function () {
  if (tableData.value.length) {
    // console.log('国内快递')
    editMode.value = 1
    currentEditIndex.value = -1
    dialogEditRowVisible.value = true
  }
}

const editRow = function (row: IPoItem, index: number) {
  editMode.value = 2
  currentEditIndex.value = index
  if (tableData.value.length) {
    dialogEditRowVisible.value = true
  }
}

const onAddRow = function (data: IPoItem) {
  if (tableData.value.length) {
    tableData.value.push(data as IPoItem)
    dialogEditRowVisible.value = false
  }
}
const onEditRow = function (data: IPoItem) {
  if (tableData.value.length) {
    dialogEditRowVisible.value = false
    tableData.value.splice(
      (currentPage.value - 1) * pageSize.value + currentEditIndex.value,
      1,
      data as IPoItem,
    )
  }
}
const tryCreateStatement = function () {
  if (
    ![
      'Finance Manager',
      'CEO',
      'Account Payable',
      'Logistics Operator',
      'Cashier',
    ].includes(userInfo.value.role.name)
  ) {
    ElMessage.error('当前用户没有处理的权限')
    return
  }
  if (tableData.value.length) {
    createStatement()
  }
}
const statementID = ref('')
// const statementID = ref('4791186000143466085')
// 上传原文件保存副本. 业务要求.
const uploadStatementFile = function () {
  const fileForm = new FormData()
  fileForm.append('id', statementID.value)
  fileForm.append('file', fileContainer.value)
  request
    .post('/payment_request/uploadOriginalFile', fileForm, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    })
    .then((res: any) => {
      if (res.data.code === 1) {
        ElNotification({
          duration: 0,
          title: '上传原始表格成功',
          type: 'success',
          message: '上传原始表格成功',
        })
      }
    })
}

// 带后缀2的全部是国内运费的相关处理逻辑. 因为两个模式相同和不相同的逻辑基本参半, 干脆直接揉在一起写了
const createStatement = function () {
  loading.value = true
  request
    .post('/payment_request/createStatementData', [
      {
        Total_Amount: computedSum.value,
        Payment_Type: tableData.value[0].payment_type,
        Currency: tableData.value[0].Currency,
        Name: tableData.value[0].statement_name,
        Owner: {
          name: userInfo.value.full_name,
          id: userInfo.value.id,
        },
      },
    ])
    .then((response) => {
      if (response.data.code !== 1) {
        ElMessage.error('创建statement出错')
        return
      }
      statementID.value = response.data.result.data[0].details.id

      splitPaymentRequestRecordForm() // 重写splitForm, 参数几乎完全不同
      uploadStatementFile() // 这步操作直接解开注释就行. 逻辑参数通用
    })
    .catch(() => {
      loading.value = false
    })
}
const splitPaymentRequestRecordForm = function () {
  const formData = tableData.value.reduce((t, i) => {
    const temp: any = {
      Tracking_Number: i.Tracking_Number,
      Requested_Module: 'Domestic_Package',
      Fee_type: i.Fee_Type,
      Unit_Price: 0,
      Quantity: '',
      Sample_Fee: 0,
      Setup_Service_Fee: 0,
      Total: i.Total || 0,
      Currency: i.Currency,
      Description: '',
      SKU: '',
      Unit_Price_Non_Currency: '',
      Payment_Type: i.payment_type,
      Statement: { name: i.statement_name, id: statementID.value },
      Request_Type: '月结申请',
      Name: '/',
      Owner: {
        name: userInfo.value.full_name,
        id: userInfo.value.id,
      },
      Payment_Status: 'Pending Verify',
      Batch_number: new Date().getTime().toString(),
    }

    if (i.PO_Number) {
      t.push(Object.assign({ PO_id: i.PO_Number }, temp))
    }
    if (i.PO_Number2) {
      t.push(Object.assign({ PO_id: i.PO_Number2 }, temp))
    }
    if (i.PO_Number3) {
      t.push(Object.assign({ PO_id: i.PO_Number3 }, temp))
    }
    return t
  }, [] as any[])
  // console.log(formData, 'form data 2')
  let size = 100
  const dataList = utils.splitArray(formData, size)
  const pool = []
  for (let i = 0; i < dataList.length; i++) {
    pool.push(
      createPaymentRequestRecord(
        dataList[i],
        i,
        size,
        i === dataList.length - 1 ? formData.length : 0,
      ),
    )
  }
  loading.value = true
  Promise.all(pool).finally(() => {
    splitDomesticTracking()
  })
}

const createPaymentRequestRecord = function (
  data: any[],
  currentPage = 0,
  pageSize = 1,
  finalValue: number,
) {
  return new Promise((resolve, reject) => {
    request
      .post('/payment_request/createPaymentRequestRecord', data)
      .then((response) => {
        if (response.data.code !== 1) {
          ElNotification({
            type: 'error',
            duration: 0,
            title: '创建异常',
            message: `第 ${currentPage * pageSize + 1} ~ ${
              finalValue || (currentPage + 1) * pageSize
            } 行数据创建异常`,
          })
          reject(0)
          return
        }
        const res = response.data.result
        if (Array.isArray(res.data)) {
          const temp = res.data.map((i: any, index: number) => {
            return {
              status: i.status,
              index,
            }
          })

          const temp2 = temp.filter((i: any) => i.status !== 'success')

          if (temp2.length) {
            ElNotification({
              type: 'error',
              duration: 0,
              title: '创建异常',
              message: `第 ${temp2
                .map((i: any) => i.index + 1 + currentPage * pageSize)
                .join(',')} 行数据创建异常`,
            })
            reject(0)
          } else {
            ElNotification({
              duration: 0,
              title: '创建成功',
              type: 'success',
              message: `第 ${currentPage * pageSize + 1} ~ ${
                finalValue || (currentPage + 1) * pageSize
              } 行数据创建成功`,
            })
            resolve(1)
          }
        }
      })
  })
}

const splitDomesticTracking = function () {
  const formData = tableData.value.reduce((t, i, index) => {
    const temp: any = {
      ...i,
      Billable_Weight: i.Billable_Weight || 0,
      Total: i.Total || 0,
      Weight: i.Weight || 0,
      Volume: i.Volume || 0,
      Statement: { name: i.statement_name, id: statementID.value },
      Name: `${i.Issue_Date} - ${i.Tracking_Number}`,
      From: i.From_Address,
      To: i.To_Address,
      Amount: i.Total,
      Weight_Unit: i.Weight_Unit,
      Owner: {
        name: userInfo.value.full_name,
        id: userInfo.value.id,
      },
    }
    // 删除不必要的参数字段. 以下几个数据有其他表示的名称
    delete temp.PO_Number
    delete temp.PO_Number2
    delete temp.PO_Number3
    delete temp.statement_name
    delete temp.payment_type
    delete temp.From_Address
    delete temp.To_Address
    delete temp.Total

    if (i.PO_Number) {
      t.push(Object.assign({ PO_id: i.PO_Number }, temp))
    }
    if (i.PO_Number2) {
      t.push(Object.assign({ PO_id: i.PO_Number2 }, temp))
    }
    if (i.PO_Number3) {
      t.push(Object.assign({ PO_id: i.PO_Number3 }, temp))
    }

    return t
  }, [] as any[])
  // console.log(formData, 'domestic tracking formdata')
  let size = 100
  const dataList = utils.splitArray(formData, size)
  const pool = []
  for (let i = 0; i < dataList.length; i++) {
    pool.push(
      createDomesticTrackingForm(
        dataList[i],
        i,
        size,
        i === dataList.length - 1 ? formData.length : 0,
      ),
    )
  }
  loading.value = true
  Promise.all(pool).finally(() => {
    spliteDomesticTrackingAndPO()
  })
}

const createDomesticTrackingForm = function (
  data: any[],
  currentPage = 0,
  pageSize = 1,
  finalValue: number,
) {
  return new Promise((resolve, reject) => {
    request
      .post('/payment_request/createDomesticTracking', data)
      .then((response) => {
        if (response.data.code !== 1) {
          ElNotification({
            type: 'error',
            duration: 0,
            title: 'DomesticTracking创建异常',
            message: `第 ${currentPage * pageSize + 1} ~ ${
              finalValue || (currentPage + 1) * pageSize
            } 行数据创建异常`,
          })
          reject(0)
          return
        }
        const res = response.data.result
        if (Array.isArray(res.data)) {
          const temp = res.data.map((i: any, index: number) => {
            return {
              status: i.status,
              index,
            }
          })

          const temp2 = temp.filter((i: any) => i.status !== 'success')

          if (temp2.length) {
            ElNotification({
              type: 'error',
              duration: 0,
              title: 'DomesticTracking创建异常',
              message: `第 ${temp2
                .map((i: any) => i.index + 1 + currentPage * pageSize)
                .join(',')} 行数据创建异常`,
            })
            reject(0)
          } else {
            ElNotification({
              duration: 0,
              title: 'DomesticTracking创建成功',
              type: 'success',
              message: `第 ${currentPage * pageSize + 1} ~ ${
                finalValue || (currentPage + 1) * pageSize
              } 行数据创建成功`,
            })
            resolve(1)
          }
        }
      })
  })
}

const spliteDomesticTrackingAndPO = function () {
  const formData: any[] = tableData.value.reduce((t, i, index) => {
    const temp: any = {
      Tracking_Number: i.Tracking_Number,
      // 这两个是固定的玩意, 暂定.
      Purchase_Order: {
        id: '4791186000155027611',
        name: 'PO11277 - 底层逻辑记录，不可删除 - 底层逻辑记录，不可删除',
      },
      Related_Domestic_Tracking: {
        id: '4791186000183903233',
        name: '底层逻辑记录，不可删除',
      },
    }
    if (i.PO_Number) {
      t.push(
        Object.assign(
          { PO_id: i.PO_Number, Name: `${i.Tracking_Number}-${i.PO_Number}` },
          temp,
        ),
      )
    }
    if (i.PO_Number2) {
      t.push(
        Object.assign(
          { PO_id: i.PO_Number2, Name: `${i.Tracking_Number}-${i.PO_Number2}` },
          temp,
        ),
      )
    }
    if (i.PO_Number3) {
      t.push(
        Object.assign(
          { PO_id: i.PO_Number3, Name: `${i.Tracking_Number}-${i.PO_Number3}` },
          temp,
        ),
      )
    }
    return t
  }, [] as any[])
  // console.log(formData, 'form DomesticTrackingAndPO 2')
  let size = 100
  const dataList = utils.splitArray(formData, size)
  const pool = []
  for (let i = 0; i < dataList.length; i++) {
    pool.push(
      createDomesticTrackingAndPOForm(
        dataList[i],
        i,
        size,
        i === dataList.length - 1 ? formData.length : 0,
      ),
    )
  }
  loading.value = true
  Promise.all(pool)
    .then(() => {
      tableData.value = []
      statementID.value = ''
    })
    .finally(() => {
      loading.value = false
    })
}

const createDomesticTrackingAndPOForm = function (
  data: any[],
  currentPage = 0,
  pageSize = 1,
  finalValue: number,
) {
  return new Promise((resolve, reject) => {
    request
      .post('/payment_request/createDomesticPkgandPO', data)
      .then((response) => {
        if (response.data.code !== 1) {
          ElNotification({
            type: 'error',
            duration: 0,
            title: 'DomesticPkg_and_PO创建异常',
            message: `第 ${currentPage * pageSize + 1} ~ ${
              finalValue || (currentPage + 1) * pageSize
            } 行数据创建异常`,
          })
          reject(0)
          return
        }
        const res = response.data.result
        if (Array.isArray(res.data)) {
          const temp = res.data.map((i: any, index: number) => {
            return {
              status: i.status,
              index,
            }
          })

          const temp2 = temp.filter((i: any) => i.status !== 'success')

          if (temp2.length) {
            ElNotification({
              type: 'error',
              duration: 0,
              title: 'DomesticPkg_and_PO创建异常',
              message: `第 ${temp2
                .map((i: any) => i.index + 1 + currentPage * pageSize)
                .join(',')} 行数据创建异常`,
            })
            reject(0)
          } else {
            ElNotification({
              duration: 0,
              title: 'DomesticPkg_and_PO创建成功',
              type: 'success',
              message: `第 ${currentPage * pageSize + 1} ~ ${
                finalValue || (currentPage + 1) * pageSize
              } 行数据创建成功`,
            })
            resolve(1)
          }
        }
      })
  })
}

const dialogVisible = ref(false)

const currencyList = ref([
  {
    label: 'CNY',
    value: 'CNY',
  },
  {
    label: 'USD',
    value: 'USD',
  },
  {
    label: 'HKD',
    value: 'HKD',
  },
  {
    label: 'AUD',
    value: 'AUD',
  },
  {
    label: 'GBP',
    value: 'GBP',
  },
  {
    label: 'NZD',
    value: 'NZD',
  },
  {
    label: 'EUR',
    value: 'EUR',
  },
])

const route = useRoute()

const userInfo = ref({} as IUser)
loading.value = true
request
  .post('/common/getUsersData', { id: route.query.user })
  .then((response) => {
    const res = response.data
    if (res.code !== 1) return

    if (res.result.users && res.result.users.length) {
      userInfo.value = res.result.users[0]
    } else if (res.result.id) {
      userInfo.value = res.result || {}
    } else if (Array.isArray(res.result) && res.result.length) {
      userInfo.value = res.result[0] || {}
    } else {
      ElMessage.error('获取当前用户身份异常, 请联系管理员')
    }
  })
  .finally(() => {
    loading.value = false
  })
</script>

<style lang="scss">
.page-payment-record {
  .red-font {
    color: red;
  }
}
</style>
<style lang="scss" scoped>
.main-content {
  background-color: #fff;
  padding: 12px 40px;
  width: 1900px;
  min-width: 1200px;
  min-height: 100vh;
  margin: 0 auto;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.4) inset,
    0 0.5em 1em rgba(0, 0, 0, 0.6);
}
.btn-wrap {
  width: 1600px;
  min-width: 1200px;
  padding: 12px 0;
  margin: 0 auto;
}
.logo-area {
  img {
    height: 60px;
  }
}
.po-table {
  width: 100%;
  min-height: 80vh;
  margin: 0 auto;
}
.total-data {
  width: 150px;
  line-height: 22px;
}
.copyright {
  text-align: right;
  color: #ccc;
  font-family: Fun, sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-style: italic;
}
</style>