LongjoeUI/src/pages/homenew.vue

<template>
  <div class="home_div">



    <div class="home_maininfo">
      <div class="task_top">
        <div class="task_selection_warp">
          <div class="task_selection">
            <div>时刻</div>
            <div class='task_selection_check' style="margin-left:20px">决策</div>
            <div style="margin-left:20px">报表</div>
          </div>
        </div>

        <div class="home_msg">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiaoxi"></use>
            </svg>
            8月12日公司经营日报已出炉，欢迎查看！</div>
        </div>
      </div>


      <div style="margin:90px 0 70px 0">

        <div class="home_widget_mx">
          <div class="home_widget_mx_title">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shujukanban"></use>
            </svg>
            产销情况
          </div>
          <div class="home_widget_mx_content">
            <img src="../assets/chanxiaotu.jpg" class="img-chanxiao"></img>
            <!-- <div style="font-size: 14px;text-align: center;color: #666;">此处只作展示用，不代表折线图控件最终效果</div> -->
          </div>
        </div>

        <div class="home_widget_mx">
          <div class="home_widget_mx_title">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-icon-test"></use>
            </svg>
            订单情况
          </div>

          <div class="home_widget_mx_content">

            <div class="home_widget_cw_flex">

              <div class="home_widget_cw_left">
                <div class="home_widget_cw_left_title">未发货订单金额(万元)</div>
                <div class="home_widget_cw_left_content">689.34</div>
              </div>

              <div class="home_widget_cw_right">
                <div class="home_widget_cw_left_title">本月接单(万元)</div>
                <div class="home_widget_cw_left_content">200.54</div>
              </div>

            </div>

            <div class="home_widget_cw_flex">
              <div class="home_widget_cw_left">
                <div class="home_widget_cw_left_title">其中已入库金额(万元)</div>
                <div class="home_widget_cw_left_content">689.34</div>
              </div>

              <div class="home_widget_cw_right">
                <div class="home_widget_cw_left_title">本月发货(万元)</div>
                <div class="home_widget_cw_left_content">180.54</div>
              </div>
            </div>
          </div>
        </div>

        <div class="home_widget_mx">

          <div class="home_widget_mx_title">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-caiwuguanli"></use>
            </svg>
            财务状况
          </div>

          <div class="home_widget_mx_content">



            <div class="home_widget_cw_flex bottomline">

              <div class="home_widget_cw_left">
                <div class="home_widget_cw_left_title">成品库存总额(万元)</div>
                <div class="home_widget_cw_left_content">360.88</div>
              </div>
              <div class="home_widget_cw_right">
                <div class="home_widget_cw_right_title">本月入库<span class="home_widget_cw_right_content">333.54</span>(万元)
                </div>
                <div class="home_widget_cw_right_title">本月出库<span class="home_widget_cw_right_content">268.54</span>(万元)
                </div>
              </div>

            </div>

            <!-- <div class="home_widget_cw_flex bottomline">

              <div class="home_widget_cw_left">
                <div class="home_widget_cw_left_title">车间在途总额(万元)</div>
                <div class="home_widget_cw_left_content">222.88</div>
              </div>
              <div class="home_widget_cw_right">
                <div class="home_widget_cw_right_title">本月入库<span class="home_widget_cw_right_content">231.54</span>(万元)</div>
                <div class="home_widget_cw_right_title">本月出库<span class="home_widget_cw_right_content">112.54</span>(万元)</div>
              </div>

            </div> -->

            <div class="home_widget_cw_flex bottomline">

              <div class="home_widget_cw_left">
                <div class="home_widget_cw_left_title">材料库存总额(万元)</div>
                <div class="home_widget_cw_left_content">444.88</div>
              </div>
              <div class="home_widget_cw_right">
                <div class="home_widget_cw_right_title">本月入库<span class="home_widget_cw_right_content">333.54</span>(万元)
                </div>
                <div class="home_widget_cw_right_title">本月出库<span class="home_widget_cw_right_content">321.54</span>(万元)
                </div>
              </div>

            </div>

            <div class="home_widget_cw_flex bottomline">

              <div class="home_widget_cw_left">
                <div class="home_widget_cw_left_title">现金结余(万元)</div>
                <div class="home_widget_cw_left_content">888.88</div>
              </div>
              <div class="home_widget_cw_right">
                <div class="home_widget_cw_right_title">本月收入<span class="home_widget_cw_right_content">777.54</span>(万元)
                </div>
                <div class="home_widget_cw_right_title">本月支出<span class="home_widget_cw_right_content">666.54</span>(万元)
                </div>
              </div>

            </div>

            <div class="home_widget_cw_flex bottomline">

              <div class="home_widget_cw_left">
                <div class="home_widget_cw_left_title">应收结余(万元)</div>
                <div class="home_widget_cw_left_content">555.88</div>
              </div>
              <div class="home_widget_cw_right">
                <div class="home_widget_cw_right_title">本月已收<span class="home_widget_cw_right_content">666.54</span>(万元)
                </div>
                <div class="home_widget_cw_right_title">本月应收<span class="home_widget_cw_right_content">444.54</span>(万元)
                </div>
              </div>

            </div>


            <div class="home_widget_cw_flex">

              <div class="home_widget_cw_left">
                <div class="home_widget_cw_left_title">应付结余(万元)</div>
                <div class="home_widget_cw_left_content">456.88</div>
              </div>
              <div class="home_widget_cw_right">
                <div class="home_widget_cw_right_title">本月已付<span class="home_widget_cw_right_content">543.54</span>(万元)
                </div>
                <div class="home_widget_cw_right_title">本月应付<span class="home_widget_cw_right_content">234.54</span>(万元)
                </div>
              </div>

            </div>

          </div>
        </div>

        <div class="home_widget_mx">
          <div class="home_widget_mx_title">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tubiao-zhuzhuangtu"></use>
            </svg>
            库存状况
          </div>
          <div class="home_widget_mx_content">
            <img src="../assets/zhutu.jpg" class="img-chanxiao"></img>
            <!-- <div style="font-size: 14px;text-align: center;color: #666;">此处只作展示用，不代表柱状图控件最终效果</div> -->
          </div>
        </div>

        <!-- 取消以下设计：收藏报表页面，如果没有收藏，就不显示 -->
        <!-- <div class="home_widget_mx">
          <div class="home_widget_mx_title">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yitihuachuxing"></use>
            </svg>
            收藏报表
          </div>
          <div class="home_report_list_item ">
            <div class="home_report_list_item_icon func_icon_bg_blue">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-paiming"></use>
              </svg>
            </div>

            <div class="home_report_list_item_text home_report_list_item_border">
              <div class="home_report_list_item_name">业务员销售排名统计表</div>
              <div class="home_report_list_item_right">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xing1"></use>
                </svg>
              </div>
            </div>
          </div>


          <div class="home_report_list_item ">
            <div class="home_report_list_item_icon func_icon_bg_blue">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tubiao-zhuzhuangtu"></use>
              </svg>
            </div>

            <div class="home_report_list_item_text home_report_list_item_border">
              <div class="home_report_list_item_name">客户销售排名统计表</div>
              <div class="home_report_list_item_right">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xing1"></use>
                </svg>
              </div>
            </div>
          </div>

          <div class="home_report_list_item ">
            <div class="home_report_list_item_icon func_icon_bg_blue">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-paiming"></use>
              </svg>
            </div>

            <div class="home_report_list_item_text home_report_list_item_border">
              <div class="home_report_list_item_name">产品销售排名统计表</div>
              <div class="home_report_list_item_right">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xing1"></use>
                </svg>
              </div>
            </div>
          </div>


          <div class="home_report_list_item ">
            <div class="home_report_list_item_icon func_icon_bg_red">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-baojia"></use>
              </svg>
            </div>

            <div class="home_report_list_item_text home_report_list_item_border">
              <div class="home_report_list_item_name">销售订单收款统计表</div>
              <div class="home_report_list_item_right">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xing1"></use>
                </svg>
              </div>
            </div>
          </div>

          <div class="home_report_list_item ">
            <div class="home_report_list_item_icon func_icon_bg_red">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-baifenbi"></use>
              </svg>
            </div>

            <div class="home_report_list_item_text ">
              <div class="home_report_list_item_name">销售订单利润率统计表</div>
              <div class="home_report_list_item_right">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xing1"></use>
                </svg>
              </div>
            </div>
          </div>
        </div> -->

        <div class="home_reload">重新载入数据</div>

      </div>



    </div>

    <!-- 底部按钮 -->
    <div class="todolist-tab">
      <div class="todolist-tab-btn todolist-tab-btn-on">
        <div class="todolist-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-home"></use>
          </svg>
        </div>
        首页
      </div>
      <div class="todolist-tab-btn ">
        <div class="todolist-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-format-list-bulleted"></use>
          </svg>
        </div>
        <div class="todolist-tab-count">9</div>
        待办
      </div>


      <div class="todolist-tab-btn">
        <div class="todolist-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-google-drive"></use>
          </svg>
        </div>
        功能
      </div>

      <div class="todolist-tab-btn">
        <div class="todolist-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-email-outline"></use>
          </svg>
        </div>
        <div class="todolist-tab-count">5</div>
        消息
      </div>

      <div class="todolist-tab-btn">
        <div class="todolist-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-account"></use>
          </svg>
        </div>
        我的
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'home',
    methods: {
      gotosaletask() {
        this.$router.push({
          path: "/saletask"
        });
      }
    }

  }

</script>

<style>
  body {
    margin: 0;
    padding: 0;
    background-color: #f7f7f7;
    font-family: "微软雅黑";
  }

  .home_div {
    background-color: #f7f7f7;
    padding: 0 0 10px 0;
  }

  .home_reload {
    font-size: 16px;
    color: #aaa;
    padding: 10px;
    background-color: white;
    margin: 8px 10px 15px 10px;
    box-shadow: 1px 2px 10px #ccc;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
  }

  .home_title {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: rgb(34, 131, 210);
    /* position: fixed; */
    color: white;
  }

  .home_title_search {
    background-color: rgb(30, 115, 187);
    margin: 10px;
    padding: 5px 5px 5px 20px;
    /* font-size: 14px;
    line-height: 20px; */
    flex: 0 0 78%;
    border-radius: 15px;
  }

  .home_title_setting {
    font-size: 20px;
    position: absolute;
    right: 4%;
  }

  .home_msg {
    /* padding: 10px 20px; */
    padding: 4px 5px 4px 20px;
    background-color: #fffeef;
    font-size: 15px;
    color: #666;
    box-shadow: 1px 1px 6px #ccc;
  }

  .home_icon_area {
    padding: 5px 10px 10px;
    display: flex;
    background-color: rgb(34, 131, 210);
  }

  .home_icon_area_mx {
    text-align: center;
    /* margin-right: 0px; */
    flex: 0 0 25%;
  }

  .home_icon_area_use {
    font-size: 35px;
    color: white;
  }

  .home_icon_text {
    color: white;
    font-size: 15px;
  }

  .home_widget_mx {
    /* height: 420px; */
    background-color: white;
    margin: 8px 10px 15px 10px;
    box-shadow: 1px 2px 10px #ccc;
    border-radius: 10px;
    overflow: hidden;
    padding-bottom: 10px;
  }

  .home_widget_mx_title {
    background-color: rgb(245, 245, 245);
    font-size: 15px;
    font-weight: bold;
    color: rgb(139, 139, 139);
    padding: 6px 15px;

  }

  .img-chanxiao {
    width: 100%
  }

  .bottomline {
    border-bottom: 1px solid #eee;
  }



  .home_widget_cw_flex {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    /* border-bottom: 1px solid #eee; */
  }

  .home_widget_cw_left {
    margin-left: 20px;
    margin-top: 5px;
    flex: 0 0 45%;
    /* border-right: 1px solid #eee; */
  }

  .home_widget_cw_left_title {
    font-size: 13px;
    /* color: #888; */
    color: rgb(153, 153, 153);
  }

  .home_widget_cw_left_content {
    font-size: 25px;
    font-weight: bold;
    /* color: rgb(228, 35, 35); */
    color: rgb(255, 128, 26);
  }

  .home_widget_cw_right {
    margin-left: 10px;
    margin-top: 5px;
  }

  .home_widget_cw_right_title {
    font-size: 13px;
    line-height: 25px;
    color: rgb(153, 153, 153);
  }

  .home_widget_cw_right_content {
    margin-left: 5px;
    color: #555;
    font-weight: bold;
  }

  .home_func_msg {
    background-color: #feffda;
    font-size: 15px;
    color: #666;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #eee;
  }

  /* 底部栏 */
  .todolist-tab {
    color: #666;
    display: flex;
    position: fixed;
    bottom: 0;
    background-color: #ffffff;
    width: 100%;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 5px 0 2px 0;
    box-shadow: 0 -1px 3px #f1f1f1
  }

  .todolist-tab-btn {
    font-size: 13px;
    width: 25%;
    text-align: center
  }

  .todolist-tab-btn-on {
    color: #46a4da
  }

  .todolist-tab-icon {
    font-size: 23px;
  }

  .todolist-tab-count {
    position: absolute;
    margin-left: 14%;
    bottom: 30px;
    font-size: 12px;
    line-height: 12px;
    width: 12px;
    font-weight: bold;
    color: #fff;
    border-radius: 50%;
    padding: 3px;
    text-align: center;
    background-color: #fc4f4f
  }


  .task_selection_warp {
    background-color: #fff;
    width: 100%;
    border-bottom: 1px solid #f5f5f5;
  }

  .task_selection {
    display: flex;
    margin: 10px 20px;
    font-size: 15px;
    font-weight: bold;
  }

  .task_selection div {
    padding-bottom: 3px;
  }

  .task_selection_check {
    color: #fd7526;
    border-bottom: 2px solid #fd7526;
  }


  .home_report_list_item {
    display: flex;
    color: #606060;
    font-size: 15px;
    font-weight: bold;
    line-height: 50px;
    align-items: center;
  }

  .home_report_list_item_icon {
    flex: 0 0 35px;
    /* width: 35px;
    height: 35px; */
    margin: 0 0 0 10px;
    font-size: 20px;
    line-height: 35px;

    color: #fff;
    border-radius: 50%;
    text-align: center;
  }

  .home_report_list_item_border {
    border-bottom: 1px solid #f6f6f6;
  }

  .home_report_list_item_text {
    display: flex;
    width: 100%;
    margin: 0 15px 0 15px;
  }

  .home_report_list_item_name {
    flex: 0 0 90%
  }

  .home_report_list_item_right {
    color: #9b9b9b;
    font-size: 28px;
    /* position: absolute;
    right: 8%; */
  }


  .func_icon_bg_blue {
    background-color: #00aaee;
  }

  .func_icon_bg_green {
    background-color: #47cc47;
  }

  .func_icon_bg_orange {
    background-color: #ff9800;
  }

  .func_icon_bg_red {
    background-color: #ff6f61;
  }

  .task_top {
    z-index: 9999;
    width: 100%;
    position: fixed;
    background-color: #fff;
    font-size: 15px;
    top: 0;
  }

</style>