anpinjingyuan-ui/src/views/index.vue

<template>
  <div class="app-container home">
    <div>
      <div style="display: flex; margin-bottom: 40px">
        <div style="width: 70%">
          <ul class="block">
            <li @click="jump('/purchaseRequest')">
              <div>
                <i
                  class="el-icon-s-custom"
                  style="font-size: 50px; text-align: center"
                ></i>
                <p>采购申请</p>
              </div>
            </li>
            <li @click="jump('/purchaseIssue')">
              <div>
                <i
                  class="el-icon-upload2"
                  style="font-size: 50px; text-align: center"
                ></i>
                <p>销售出库</p>
              </div>
            </li>
            <li @click="jump('/inStock')">
              <div>
                <i
                  class="el-icon-download"
                  style="font-size: 50px; text-align: center"
                ></i>
                <p>入库</p>
              </div>
            </li>
            <li @click="jump('/outStock')">
              <div>
                <i
                  class="el-icon-upload2"
                  style="font-size: 50px; text-align: center"
                ></i>
                <p>出库</p>
              </div>
            </li>
            <li @click="jump('/basicdata/fees')">
              <div>
                <i
                  class="el-icon-connection"
                  style="font-size: 50px; text-align: center"
                ></i>
                <p>新增物资</p>
              </div>
            </li>
            <li @click="jump('/finance/chargeInvoice')">
              <div>
                <i
                  class="el-icon-wallet"
                  style="font-size: 50px; text-align: center"
                ></i>
                <p>发票申请</p>
              </div>
            </li>
            <li @click="jump('/finance/salesInvoice')">
              <div>
                <i
                  class="el-icon-money"
                  style="font-size: 50px; text-align: center"
                ></i>
                <p>销项发票</p>
              </div>
            </li>
            <li @click="jump('')">
              <div>
                <i
                  class="el-icon-s-management"
                  style="font-size: 50px; text-align: center"
                ></i>
                <p>进项发票</p>
              </div>
            </li>
            <li @click="jump('/finance/charge')">
              <div>
                <i
                  class="el-icon-takeaway-box"
                  style="font-size: 50px; text-align: center"
                ></i>
                <p>收款</p>
              </div>
            </li>
            <li @click="jump('/finance/payment')">
              <div>
                <i
                  class="el-icon-s-order"
                  style="font-size: 50px; text-align: center"
                ></i>
                <p>付款</p>
              </div>
            </li>
          </ul>
        </div>
        <div style="width: 30%">
          <div style="width: 100%">
            <div style="display: flex">
              <div id="box" style="width: 100%; height: 350px"></div>
              <el-select
                v-model="select"
                slot="prepend"
                size="mini"
                :select="query()"
                placeholder="点击切换仓库"
                style="position: absolute; width: 8%; right: 1%"
              >
                <div v-for="(item, index) in warehouse" :key="index">
                  <el-option
                    :label="item.fName"
                    :value="item.fWarehouseid"
                  ></el-option>
                </div>
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <div style="display: flex; margin-bottom: 40px">
        <div style="width: 70%">
          <div>
            <div
              style="
                display: flex;
                color: #515a6e;
                font-weight: 600;
                background-color: #f8f8f9;
                height: 42.6px;
                font-size: 13px;
                justify-content: space-between;
                border-bottom: 1px dashed #dfe6ec;
              "
            >
              <div class="home_stock_table">委托方</div>
              <div class="home_stock_table">日期</div>
              <div class="home_stock_table">提单号</div>
              <div class="home_stock_table">业务类型</div>
              <div class="home_stock_table_right">
                <div>操作</div>
                <el-link type="primary" @click="jump('/morePage/stock')"
                >更多>
                </el-link
                >
              </div>
            </div>
            <div v-if="tableData.length > 0">
              <div
                style="
                  display: flex;
                  height: 42.6px;
                  border-bottom: 1px dashed #dfe6ec;
                "
                v-for="(item, index) in tableData"
                :key="index"
              >
                <div class="home_stock_table"><p>{{ item.refno1 }}</p></div>
                <div class="home_stock_table" style="text-align: center">
                  {{ item.sendTime ? item.sendTime.slice(0, 10) : item.sendTime }}
                </div>
                <div class="home_stock_table"><p>{{ item.refno1 }}</p></div>
                <div class="home_stock_table">
                  <span v-if="item.refno2 === 'SJRK'">入库</span>
                  <span v-else-if="item.refno2 === 'SJCK'">出库</span>
                  <span v-else-if="item.refno2 === 'HQZY'">货转</span>
                  <span v-else-if="item.refno2 === 'CKDB'">调拨</span>
                  <span v-else-if="item.refno2 === 'CCF'">仓储费</span>
                  <span v-else-if="item.refno2 === 'HWTG'">货物通关</span>
                  <span v-else-if="item.refno2 === 'ZYF'">作业费</span>
                  <span v-else-if="item.refno2 === 'SF'">收费</span>
                  <span v-else-if="item.refno2 === 'DZ'">对账</span>
                  <span v-else-if="item.refno2 === 'FF'">付费</span>
                  <span v-else-if="item.refno2 === 'JSCCF'">计算仓储费</span>
                  <span v-else-if="item.refno2 === 'KHDZ'">凯和对账</span>
                  <span v-else-if="item.refno2 === 'KHSF'">凯和收费</span>
                  <span v-else-if="item.refno2 === 'KHFF'">凯和付费</span>
                  <span v-else-if="item.refno2 === 'ApplyFP'">凯和开票申请</span>
                  <span v-else-if="item.refno2 === 'KHDD'">凯合订单</span>
                  <span v-else-if="item.refno2 === 'SE'">下单配船</span>
                  <span v-else-if="item.refno2 === 'SQ'">采购申请</span>
                  <span v-else-if="item.refno2 === 'XS'">销售出库</span>
                  <span v-else-if="item.refno2 === 'XMGL'">项目管理</span>
                </div>
                <div class="home_stock_table" @click="approval(item)">
                  查看详情
                </div>
              </div>
            </div>
            <div
              v-else
              style="
                display: flex;
                justify-content: center;
                height: 213px;
                border-bottom: 1px solid #dfe6ec;
              "
            >
              <div style="align-self: center; color: #909399; font-size: 14px">
                暂无数据
              </div>
            </div>
          </div>
        </div>
        <div style="width: 30%">
          <el-table
            :data="tableDataTwo"
            :header-cell-style="{ borderBottom: '1px dashed #dfe6ec' }"
            :cell-style="cellStyle"
            style="margin-left: 20px"
          >
            <el-table-column
              prop="noticeTitle"
              :show-overflow-tooltip="true"
              label="消息中心"
            />
            <el-table-column prop="address" label="操作" width="80">
              <template slot-scope="scope">
                <span
                  @click="querytoDo(scope.row.noticeContent)"
                  style="cursor: pointer"
                >查看详情</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--      <div style="display: flex">-->
      <!--        <div style="width: 70%">-->
      <!--          <div-->
      <!--            id="commoDity"-->
      <!--            style="width: 100%; height: 350px; margin-left: 40px"-->
      <!--          ></div>-->
      <!--        </div>-->
      <!--        <div style="width: 30%">-->
      <!--          <div id="cargoOwner" style="width: 100%; height: 350px"></div>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
    <el-dialog
      title="消息提示"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <span
        v-html="text"
        class="text"
        style="max-width: 100%; height: auto"
      ></span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
        >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { queryHomeInfo } from '@/api/fleet/home'
import {
  listCorps,
  information,
  warehouse,
  inquiry
} from '../../src/api/index'
import Cookies from 'js-cookie'

export default {
  name: 'index',
  data() {
    return {
      bookingData: [
        { acc: 'T00345', bcc: '2020-5-12', caa: 'BUGASD', baa: 'ECCC-099897' },
        { acc: 'T00345', bcc: '2020-5-02', caa: 'BUGASD', baa: 'ECCC-099897' },
        { acc: 'T00345', bcc: '2020-5-05', caa: 'BUGASD', baa: 'ECCC-099897' },
        { acc: 'T00345', bcc: '2020-5-09', caa: 'BUGASD', baa: 'ECCC-099897' }
      ],
      editModel: {},
      // 版本号
      version: '3.2.1',
      select: '',
      text: '',
      dialogVisible: false,
      tableData: [],
      chart: [],
      warehouse: [],
      master: [],
      commodity: [],
      commoditytwo: [],
      name: [],
      tableDataTwo: [],
      fleetData: '',
      upperLeftCntrs: {},
      sysType: '',
      upperRights: []
    }
  },
  filters: {
    statusType(val) {
      switch (val) {
        case 10:
          return '车队安排'
          break
        case 20:
          return '司机受理'
          break
        case 30:
          return '司机出车'
          break
        case 40:
          return '提箱'
          break
        case 50:
          return '装卸货'
          break
        case 60:
          return '还卸柜'
          break
        case 70:
          return '费用确认'
          break
        default:
          return '回单'
      }
    }
  },
  created() {
    queryHomeInfo().then((response) => {
      console.log(response)
      this.fleetData = response.data
      if (response.data.upperRight.length > 0) {
        this.upperRights = response.data.upperRight.slice(0, 10)
      }
      this.upperLeftCntrs = response.data.upperLeftCntrs
    })
    this.sysType = Cookies.get('sysType')
    console.log(this.sysType)
    this.getList()
    this.warehouses()
    this.inquiry()
  },
  activated() {
    this.getList()
    this.warehouses()
    this.inquiry()
    this.boxDistribution()
    this.ranking()
  },
  methods: {
    //箱分布图表
    ranking() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById('bookingRanking'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '订舱排名',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ['中国国贸集团', '赛轮集团', '金宇集团', '利群集团', '中华集团', '腾讯集团', '网易公司']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }]
      })
    },
    //箱分布图表
    boxDistribution() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById('distribution'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '箱分布',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ['北京', '上海', '天津', '青岛', '深圳', '西安', '甘肃']
        },
        tooltip: {
          trigger: 'axis'
        },
        yAxis: {
          type: 'value'
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        series: [{
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }]
      })
    },
    goPage(id) {
      this.$router.push({
        path: '/track/cabinet',
        query: { id: id }
      })
    },
    //跳转审批页面
    approval(row) {
      console.log(row.refno2)
      switch (row.refno2) {
        case "XS":
          this.$router.push({
            path: '/purchaseIssue',
            query: {
              data: JSON.stringify(row),
              list: JSON.stringify(
                {
                  type: 'primary',
                  size: 'mini',
                  icon: 'el-icon-edit-outline',
                  name: '审批',
                  disabled: false
                }
              )
            }
          })
          break
        case "SQ":
          this.$router.push({
            path: '/purchaseRequest',
            query: {
              data: JSON.stringify(row),
              list: JSON.stringify(
                {
                  type: 'primary',
                  size: 'mini',
                  icon: 'el-icon-edit-outline',
                  name: '审批',
                  disabled: false
                }
              )
            }
          })
          break
        case 'XMGL':
          this.$router.push({
            path: '/project',
            query: {
              data: JSON.stringify(row),
              list: JSON.stringify(
                {
                  type: 'primary',
                  size: 'mini',
                  icon: 'el-icon-edit-outline',
                  name: '审批',
                  disabled: false
                }
              )
            }
          })
          break
        case 'SJRK': {
          this.$router.push({
            path: '/business/inStock',
            query: { data: JSON.stringify(row) }
          })
          break
        }
        case 'SJCK': {
          this.$router.push({
            path: '/business/outStock',
            query: { data: JSON.stringify(row) }
          })
          break
        }
        case 'HQZY': {
          this.$router.push({
            path: '/business/goodsTransfer',
            query: { data: JSON.stringify(row) }
          })
          break
        }
        case 'CKDB': {
          this.$router.push({
            path: '/business/stockTransfer',
            query: { data: JSON.stringify(row) }
          })
          break
        }
        case 'HWTG': {
          this.$router.push({
            path: '/business/cargoClearance',
            query: { data: JSON.stringify(row) }
          })
          break
        }
        case 'JSCCF': {
          this.$router.push({
            path: '/business/agreement',
            query: { data: JSON.stringify(row) }
          })
          break
        }
        case 'CCF': {
          this.$router.push({
            path: '/agreement/agreementStorage',
            query: { data: JSON.stringify(row) }
          })
          break
        }
        case 'ZYF': {
          this.$router.push({
            path: '/agreement/agreementTask',
            query: { data: JSON.stringify(row) }
          })
          break
        }
        case 'SF': {
          this.$router.push({
            path: '/finance/charge',
            query: { data: JSON.stringify(row) }
          })
          break
        }
        case 'DZ': {
          this.$router.push({
            path: '/finance/contrast',
            query: { data: JSON.stringify(row) }
          })
          break
        }
        case 'FF': {
          this.$router.push({
            path: '/finance/payment',
            query: { data: JSON.stringify(row) }
          })
          break
        }
        case 'ApplyFP': {
          this.$router.push({
            path: '/finance/chargeInvoice',
            query: { data: JSON.stringify(row) }
          })
          break
        }
        case 'KHDZ': {
          this.$router.push({
            path: '/finance/contrast',
            query: { data: JSON.stringify(row) }
          })
          break
        }
        case 'KHSF': {
          this.$router.push({
            path: '/finance/charge',
            query: { data: JSON.stringify(row) }
          })
          break
        }
        case 'KHFF': {
          this.$router.push({
            path: '/finance/payment',
            query: { data: JSON.stringify(row) }
          })
          break
        }
        case 'KHDD': {
          this.$router.push({
            path: '/domesticTrade/orderInformation',
            query: { list: JSON.stringify(row) }
          })
          break
        }
        default: {
          return this.$message.error('未知错误，无状态')
        }
      }
    },
    inquiry() {
      let data = {
        actId: ''
      }
      inquiry(data).then((res) => {
        res.data.map(e => {
          if (e.auditItem) {
            e.auditItem = e.auditItem.slice(0, 10)
          }
        })
        this.tableData = res.data
      })
    },
    querytoDo(res) {
      this.dialogVisible = true
      this.text = res
    },
    handleClose(done) {
      this.dialogVisible = false
    },
    firstinventory(fId) {
      console.log(this.warehouse)
      information(fId).then((response) => {
        console.log(response)
        this.chart = response.data
        if (this.chart.whouseList.length !== 0) {
          for (let index of this.chart.corpsListWhouse) {
            this.master.push({
              name: index.fName,
              value: index.fGrossweightD
            })
            this.name.push(index.fName)
          }
          for (let index of this.chart.goodslistWhouse) {
            this.commodity.push(index.fName)
            this.commoditytwo.push(index.fGrossweightD)
          }
          this.drawLine()
          // this.drawLinetwo();
          // this.commoDity();
        } else {
          this.chart = {
            corpsListWhouse: [
              {
                balance: 0,
                fCorpid: 58,
                fGrossweightD: 0,
                fName: '展示数据',
                fTotalgross: 10000,
                fWarehouseName: '展示数据'
              }
            ],
            goodslistWhouse: [
              {
                balance: 0,
                fGoodsid: 13,
                fGrossweightD: 0,
                fName: '展示商品',
                fTotalgross: 10000,
                fWarehouseName: '展示数据'
              }
            ],
            whouseList: [
              {
                fGrossweightD: 0,
                fName: '展示数据',
                fTotalgross: 10000,
                fWarehouseid: 36
              }
            ]
          }
          for (let index of this.chart.corpsListWhouse) {
            this.master.push({
              name: index.fName,
              value: index.fGrossweightD
            })
            this.name.push(index.fName)
          }
          for (let index of this.chart.goodslistWhouse) {
            this.commodity.push(index.fName)
            this.commoditytwo.push(index.fGrossweightD)
          }

          this.drawLine()
          this.drawLinetwo()
          this.commoDity()
        }
      })
    },
    query() {
      this.master = []
      this.commodity = []
      this.commoditytwo = []
      this.name = []
      if (this.select === '') {
        return this.select
      } else {
        information(this.select).then((response) => {
          this.chart = response.data
          for (let index of this.chart.corpsListWhouse) {
            this.master.push({
              name: index.fName,
              value: index.fGrossweightD
            })
            this.name.push(index.fName)
          }
          for (let index of this.chart.goodslistWhouse) {
            this.commodity.push(index.fName)
            this.commoditytwo.push(index.fGrossweightD)
          }
          this.drawLine()
          // this.drawLinetwo();
          // this.commoDity();
        })
      }
    },
    jump(res) {
      this.$router.push({ path: res,query: { open: true}})
    },
    //设置单元格边框
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return 'border-bottom: 1px dashed rgb(223, 230, 236)'
    },
    //查询消息中心
    getList() {
      this.loading = true
      listCorps(this.queryParams).then((response) => {
        console.log(response)
        if (response.rows.length > 0) {
          this.tableDataTwo = response.rows.slice(0, 10)
        }
      })
    },
    //查询仓库
    warehouses() {
      warehouse().then((response) => {
        this.warehouse = []
        for (let index of response.rows) {
          this.warehouse.push({
            fName: index.fName,
            fWarehouseid: index.fWarehouseid
          })
        }
        console.log(this.warehouse)
        this.firstinventory(this.warehouse[0].fWarehouseid)
      })
    },
    goTarget(href) {
      window.open(href, '_blank')
    },
    //仓库图表
    drawLine() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById('box'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.chart.whouseList[0].fName + '统计',
          subtext: '实时数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['空闲库容', '占用库容']
        },
        series: [
          {
            type: 'pie',
            name: '实时数据',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {
                label: {
                  backgroundColor: '#eee',
                  borderColor: '#777',
                  borderWidth: 1,
                  borderRadius: 4,
                  rich: {
                    title: {
                      color: '#eee',
                      align: 'center'
                    },
                    abg: {
                      backgroundColor: '#333',
                      width: '100%',
                      align: 'right',
                      height: 25,
                      borderRadius: [4, 4, 0, 0]
                    },
                    Sunny: {
                      height: 30,
                      align: 'left'
                    },
                    Cloudy: {
                      height: 30,
                      align: 'left'
                    },
                    Showers: {
                      height: 30,
                      align: 'left'
                    },
                    weatherHead: {
                      color: '#333',
                      height: 24,
                      align: 'left'
                    },
                    hr: {
                      borderColor: '#777',
                      width: '100%',
                      borderWidth: 0.5,
                      height: 0
                    },
                    value: {
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: 'left'
                    },
                    valueHead: {
                      color: '#333',
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: 'center'
                    },
                    rate: {
                      width: 40,
                      align: 'right',
                      padding: [0, 10, 0, 0]
                    },
                    rateHead: {
                      color: '#333',
                      width: 40,
                      align: 'center',
                      padding: [0, 10, 0, 0]
                    }
                  }
                }
              },
              {
                value: this.chart.whouseList[0].fGrossweightD,
                name: '占用库容'
              },
              {
                value: parseFloat(
                  this.chart.whouseList[0].fTotalgross -
                  this.chart.whouseList[0].fGrossweightD
                ).toFixed(1),
                name: '空闲库容'
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    drawLinetwo() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById('cargoOwner'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.chart.whouseList[0].fName + '货权方统计',
          subtext: '实时数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: this.name
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                // show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.master
          }
        ]
      })
    },
    commoDity() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById('commoDity'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.chart.whouseList[0].fName + '商品统计',
          subtext: '实时数据',
          left: 'center'
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.commodity,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '实时状态',
            type: 'bar',
            barWidth: '60%',
            data: this.commoditytwo
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss">
.block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  li:hover {
    background-color: #025184;
  }

  li:nth-child(6),
  li:nth-child(7),
  li:nth-child(8),
  li:nth-child(9),
  li:nth-child(10) {
    background-color: #2f4554;
  }

  li:nth-child(6):hover,
  li:nth-child(7):hover,
  li:nth-child(8):hover,
  li:nth-child(9):hover,
  li:nth-child(10):hover {
    background-color: #2f4454d1;
  }

  li {
    width: 18%;
    height: 150px;
    background-color: #1c84c6;
    margin-left: 10px;
    text-align: center;
    color: #ffffff;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 15px;

    div {
      margin-top: 40px;

      p {
        font-size: 20px;
      }
    }
  }
}

.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.home-fleet {
  display: flex;

  .home-left {
    width: 40%;
    padding: 0 10px;
  }

  .home-right {
    width: 60%;
    padding: 0 10px;
  }

  .content-top {
    display: flex;

    .content-top-left {
      display: flex;
      width: 50%;
      height: 100px;
      border-bottom: 1px solid #e6ebf5;
      border-right: 1px solid #e6ebf5;
      padding: 10px;
      justify-content: space-between;
    }

    .content-top-right {
      display: flex;
      width: 50%;
      height: 100px;
      border-bottom: 1px solid #e6ebf5;
      padding: 10px;
      justify-content: space-between;
    }
  }

  .content-bottom {
    display: flex;
    height: 81px;
    border-bottom: 1px solid #e6ebf5;
    padding: 10px;
    justify-content: space-between;
  }

  .content-bottom:last-child {
    border-bottom: 0px;
  }

  .upper-right {
    padding: 10px 0;
    height: 260px;
  }

  .upper-right2 {
    padding: 10px 0;
    height: 104px;
  }
}

.single_line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media screen and (max-width: 920px) {
  .home-fleet {
    display: flex;
    flex-direction: column;

    .home-left {
      width: 100%;
    }

    .home-right {
      width: 100%;
    }
  }
}
</style>
<style lang="scss">
.text img {
  max-width: 100%;
  height: auto;
}

.home_stock_table {
  display: flex;
  width: 20%;
  justify-content: center;
  align-self: center;

  p {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
}

.home_stock_table:hover {
  color: #1c84c6;
  cursor: pointer
}

.home_stock_table_right {
  display: flex;
  width: 20%;
  justify-content: space-around;
  align-self: center;
}
</style>