<template>
  <!-- 杉德分账数据导出 -->
  <div class="page flex-col">
    <s-header :name="'杉德分账数据导出'" :noback="false"></s-header>
    <div class="group1 flex-col justify-between">
      <div class="bd2 flex-col">
        <div class="layer1 flex-col">
          <div class="main1 flex-row">
            <span class="word3">账号类型:</span>
            <div class="bd3 flex-col justify-between">
              <div class="group2 flex-row justify-between">
                <span class="word4">对公账号</span>
                <span class="word5">个人账号</span>
              </div>
              <div class="group3 flex-col">
                <div class="mod1 flex-col"></div>
              </div>
            </div>
            <span class="txt3">筛选账户</span>
            <div class="bd4 flex-col"></div>
          </div>
          <div class="main2 flex-col">
            <div class="bd5 flex-col justify-between">
              <div class="outer1 flex-row justify-between">
                <div class="ImageText1 flex-col">
                  <div class="group4 flex-row justify-between">
                    <div class="outer2 flex-col"></div>
                    <div class="TextGroup1 flex-col">
                      <span class="word6">共2条</span>
                    </div>
                  </div>
                </div>
                <div class="ImageText2 flex-col">
                  <div class="layer2 flex-row justify-between">
                    <div class="TextGroup2 flex-col">
                      <span class="info1">导出excel</span>
                    </div>
                    <div class="mod2 flex-col"></div>
                  </div>
                </div>
              </div>
              <img
                class="img1"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a"
              />
            </div>
          </div>
          <div class="main3 flex-row justify-between">
            <span class="word7">结算金额</span>
            <div class="layer3 flex-col"><span class="word8">128</span></div>
          </div>
          <div class="main4 flex-row justify-between">
            <span class="word9">不计算账号</span>
            <div class="bd6 flex-col"><span class="info2">128</span></div>
          </div>
          <div class="main5 flex-col"><span class="txt4">结算处理</span></div>
          <div class="main6 flex-col"></div>
          <span class="word10">广东申泽科技有限公司</span>
          <div class="main7 flex-row justify-between">
            <span class="word11">账号：szkj</span>
            <span class="word12">id：2309876554449876554409</span>
          </div>
          <div class="main8 flex-row">
            <span class="txt5">￥</span> <span class="word13">4688</span>
            <span class="info3">￥</span> <span class="txt6">1200</span>
          </div>
          <div class="main9 flex-row justify-between">
            <span class="txt7">已结算金额</span>
            <span class="info4">待结算金额</span>
          </div>
          <div class="main10 flex-col">
            <span class="word14">上次结算时间：2022-03-30&nbsp;09:30:12</span>
          </div>
          <img
            class="pic1"
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a"
          />
          <span class="txt8">广东申泽科技有限公司</span>
          <div class="main11 flex-row justify-between">
            <span class="word15">账号：szkj</span>
            <span class="word16">id：23098765544465433222</span>
          </div>
          <div class="main12 flex-row">
            <span class="word17">￥</span> <span class="info5">4688</span>
            <span class="word18">￥</span> <span class="word19">1200</span>
          </div>
          <div class="main13 flex-row justify-between">
            <span class="word20">已结算金额</span>
            <span class="txt9">待结算金额</span>
          </div>
          <div class="main14 flex-col">
            <span class="info6">上次结算时间：2022-03-30&nbsp;09:30:12</span>
          </div>
          <img
            class="pic2"
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a"
          />
          <span class="info7">广东申泽科技有限公司</span>
          <div class="main15 flex-row justify-between">
            <span class="word21">账号：szkj</span>
            <span class="word22">id：2309876554441223344444</span>
          </div>
          <div class="main16 flex-row">
            <span class="info8">￥</span> <span class="word23">4688</span>
            <span class="txt10">￥</span> <span class="word24">1200</span>
          </div>
          <div class="main17 flex-row justify-between">
            <span class="txt11">已结算金额</span>
            <span class="word25">待结算金额</span>
          </div>
          <div class="main18 flex-col">
            <span class="word26">上次结算时间：2022-03-30&nbsp;09:30:12</span>
          </div>
        </div>
      </div>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>
<script>
import navBar from '@/components/NavBar';
import sHeader from "@/components/SimpleHeader";

export default {
  setup() {
    return {};
  },
  components: { sHeader, navBar },
};
</script>
<style lang="less" scoped>
@import "../../common/style/common.less";
.page {
  background-color: rgba(245, 245, 245, 1);
  position: relative;
  width: 375px;
  height: 906px;
  overflow: hidden;
  .group1 {
    width: 375px;
    height: 906px;
    .bd2 {
      background-color: rgba(255, 255, 255, 1);
      height: 841px;
      margin-top: 1px;
      width: 375px;
      .layer1 {
        width: 375px;
        height: 782px;
        margin-top: 20px;
        .main1 {
          width: 346px;
          height: 21px;
          margin-left: 15px;
          .word3 {
            width: 56px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            margin-top: 8px;
            display: block;
          }
          .bd3 {
            width: 190px;
            height: 21px;
            margin-left: 10px;
            .group2 {
              width: 161px;
              height: 13px;
              margin-left: 13px;
              .word4 {
                width: 56px;
                height: 13px;
                overflow-wrap: break-word;
                color: rgba(77, 106, 221, 1);
                font-size: 14px;
                font-family: PingFangSC-Medium;
                text-align: center;
                white-space: nowrap;
                line-height: 14px;
                display: block;
              }
              .word5 {
                width: 56px;
                height: 13px;
                overflow-wrap: break-word;
                color: rgba(135, 135, 166, 1);
                font-size: 14px;
                text-align: center;
                white-space: nowrap;
                line-height: 14px;
                display: block;
              }
            }
            .group3 {
              background-color: rgba(185, 186, 208, 1);
              z-index: 26;
              position: relative;
              width: 190px;
              height: 1px;
              margin-top: 7px;
              .mod1 {
                background-color: rgba(77, 106, 221, 1);
                border-radius: 1px;
                z-index: 27;
                position: absolute;
                left: 21px;
                top: -1px;
                width: 40px;
                height: 2px;
              }
            }
          }
          .txt3 {
            width: 52px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: center;
            white-space: nowrap;
            line-height: 13px;
            display: block;
            margin: 6px 0 0 28px;
          }
          .bd4 {
            width: 8px;
            height: 4px;
            background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1c99f1cd352b058ad101b7c1eb6d15122e6160c6b02d15b822f6558cdd7064e6)
              100% no-repeat;
            margin: 10px 0 0 2px;
          }
        }
        .main2 {
          background-color: rgba(255, 255, 255, 1);
          height: 54px;
          margin-top: 22px;
          width: 375px;
          .bd5 {
            width: 375px;
            height: 37px;
            margin-top: 17px;
            .outer1 {
              width: 339px;
              height: 19px;
              margin-left: 19px;
              .ImageText1 {
                height: 18px;
                width: 79px;
                .group4 {
                  width: 79px;
                  height: 18px;
                  .outer2 {
                    width: 16px;
                    height: 18px;
                    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6eab9bb59f4e323434f0d4ea3d3c086c0609bf09fb931e0f032488e88a0ebc56) -1px -1px
                      no-repeat;
                  }
                  .TextGroup1 {
                    height: 14px;
                    margin-top: 3px;
                    width: 56px;
                    .word6 {
                      width: 56px;
                      height: 14px;
                      overflow-wrap: break-word;
                      color: rgba(64, 77, 116, 1);
                      font-size: 14px;
                      font-family: PingFangSC-Semibold;
                      text-align: left;
                      white-space: nowrap;
                      line-height: 14px;
                      display: block;
                    }
                  }
                }
              }
              .ImageText2 {
                height: 17px;
                margin-top: 2px;
                width: 64px;
                .layer2 {
                  width: 64px;
                  height: 17px;
                  .TextGroup2 {
                    height: 17px;
                    width: 53px;
                    .info1 {
                      width: 53px;
                      height: 17px;
                      overflow-wrap: break-word;
                      color: rgba(64, 77, 116, 1);
                      font-size: 12px;
                      text-align: center;
                      white-space: nowrap;
                      line-height: 17px;
                      display: block;
                    }
                  }
                  .mod2 {
                    width: 8px;
                    height: 10px;
                    border: 0.5px solid rgba(64, 77, 116, 0.5);
                    background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/9ac7ff8f493743d69dc937dcc0299f82_mergeImage.png)
                      100% no-repeat;
                    margin-top: 4px;
                  }
                }
              }
            }
            .img1 {
              width: 375px;
              height: 2px;
              margin-top: 16px;
            }
          }
        }
        .main3 {
          width: 345px;
          height: 38px;
          margin: 20px 0 0 15px;
          .word7 {
            width: 52px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            margin-top: 13px;
            display: block;
          }
          .layer3 {
            background-color: rgba(255, 255, 255, 1);
            border-radius: 2px;
            height: 38px;
            border: 0.5px solid rgba(185, 186, 208, 1);
            width: 277px;
            .word8 {
              width: 21px;
              height: 13px;
              overflow-wrap: break-word;
              color: rgba(64, 77, 116, 1);
              font-size: 13px;
              text-align: left;
              white-space: nowrap;
              line-height: 13px;
              display: block;
              margin: 13px 0 0 6px;
            }
          }
        }
        .main4 {
          width: 345px;
          height: 38px;
          margin: 15px 0 0 15px;
          .word9 {
            width: 65px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            margin-top: 13px;
            display: block;
          }
          .bd6 {
            background-color: rgba(255, 255, 255, 1);
            border-radius: 2px;
            height: 38px;
            border: 0.5px solid rgba(185, 186, 208, 1);
            width: 273px;
            .info2 {
              width: 21px;
              height: 13px;
              overflow-wrap: break-word;
              color: rgba(64, 77, 116, 1);
              font-size: 13px;
              text-align: left;
              white-space: nowrap;
              line-height: 13px;
              display: block;
              margin: 13px 0 0 6px;
            }
          }
        }
        .main5 {
          border-radius: 17px;
          height: 34px;
          border: 1px solid rgba(77, 106, 221, 1);
          width: 120px;
          margin: 19px 0 0 128px;
          .txt4 {
            width: 60px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(77, 106, 221, 1);
            font-size: 15px;
            font-family: PingFangSC-Medium;
            text-align: center;
            white-space: nowrap;
            line-height: 15px;
            display: block;
            margin: 11px 0 0 30px;
          }
        }
        .main6 {
          background-color: rgba(245, 245, 245, 1);
          width: 375px;
          height: 10px;
          margin-top: 20px;
        }
        .word10 {
          width: 140px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 14px;
          text-align: left;
          white-space: nowrap;
          line-height: 14px;
          display: block;
          margin: 20px 0 0 15px;
        }
        .main7 {
          width: 278px;
          height: 13px;
          margin: 10px 0 0 15px;
          .word11 {
            width: 63px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
          .word12 {
            width: 195px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
        }
        .main8 {
          width: 230px;
          height: 30px;
          margin: 12px 0 0 15px;
          .txt5 {
            width: 14px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(223, 94, 76, 1);
            font-size: 14px;
            font-family: PingFangSC-Semibold;
            text-align: center;
            white-space: nowrap;
            line-height: 20px;
            margin-top: 8px;
            display: block;
          }
          .word13 {
            width: 53px;
            height: 30px;
            overflow-wrap: break-word;
            color: rgba(223, 94, 76, 1);
            font-size: 22px;
            font-family: PingFangSC-Semibold;
            text-align: left;
            white-space: nowrap;
            line-height: 30px;
            display: block;
          }
          .info3 {
            width: 14px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(77, 193, 147, 1);
            font-size: 14px;
            font-family: PingFangSC-Semibold;
            text-align: center;
            white-space: nowrap;
            line-height: 20px;
            display: block;
            margin: 8px 0 0 100px;
          }
          .txt6 {
            width: 49px;
            height: 30px;
            overflow-wrap: break-word;
            color: rgba(77, 193, 147, 1);
            font-size: 22px;
            font-family: PingFangSC-Semibold;
            text-align: left;
            white-space: nowrap;
            line-height: 30px;
            display: block;
          }
        }
        .main9 {
          width: 227px;
          height: 13px;
          margin: 1px 0 0 15px;
          .txt7 {
            width: 60px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
          .info4 {
            width: 60px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
        }
        .main10 {
          background-color: rgba(246, 247, 252, 1);
          border-radius: 1px;
          height: 29px;
          width: 345px;
          margin: 12px 0 0 15px;
          .word14 {
            width: 208px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
            margin: 8px 0 0 10px;
          }
        }
        .pic1 {
          width: 375px;
          height: 2px;
          margin-top: 14px;
        }
        .txt8 {
          width: 140px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 14px;
          text-align: left;
          white-space: nowrap;
          line-height: 14px;
          display: block;
          margin: 20px 0 0 15px;
        }
        .main11 {
          width: 263px;
          height: 13px;
          margin: 10px 0 0 15px;
          .word15 {
            width: 63px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
          .word16 {
            width: 180px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
        }
        .main12 {
          width: 230px;
          height: 30px;
          margin: 12px 0 0 15px;
          .word17 {
            width: 14px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(223, 94, 76, 1);
            font-size: 14px;
            font-family: PingFangSC-Semibold;
            text-align: center;
            white-space: nowrap;
            line-height: 20px;
            margin-top: 8px;
            display: block;
          }
          .info5 {
            width: 53px;
            height: 30px;
            overflow-wrap: break-word;
            color: rgba(223, 94, 76, 1);
            font-size: 22px;
            font-family: PingFangSC-Semibold;
            text-align: left;
            white-space: nowrap;
            line-height: 30px;
            display: block;
          }
          .word18 {
            width: 14px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(77, 193, 147, 1);
            font-size: 14px;
            font-family: PingFangSC-Semibold;
            text-align: center;
            white-space: nowrap;
            line-height: 20px;
            display: block;
            margin: 8px 0 0 100px;
          }
          .word19 {
            width: 49px;
            height: 30px;
            overflow-wrap: break-word;
            color: rgba(77, 193, 147, 1);
            font-size: 22px;
            font-family: PingFangSC-Semibold;
            text-align: left;
            white-space: nowrap;
            line-height: 30px;
            display: block;
          }
        }
        .main13 {
          width: 227px;
          height: 13px;
          margin: 1px 0 0 15px;
          .word20 {
            width: 60px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
          .txt9 {
            width: 60px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
        }
        .main14 {
          background-color: rgba(246, 247, 252, 1);
          border-radius: 1px;
          height: 29px;
          width: 345px;
          margin: 12px 0 0 15px;
          .info6 {
            width: 208px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
            margin: 8px 0 0 10px;
          }
        }
        .pic2 {
          width: 375px;
          height: 2px;
          margin-top: 14px;
        }
        .info7 {
          width: 140px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 14px;
          text-align: left;
          white-space: nowrap;
          line-height: 14px;
          display: block;
          margin: 20px 0 0 15px;
        }
        .main15 {
          width: 276px;
          height: 13px;
          margin: 10px 0 0 15px;
          .word21 {
            width: 63px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
          .word22 {
            width: 193px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
        }
        .main16 {
          width: 230px;
          height: 30px;
          margin: 12px 0 0 15px;
          .info8 {
            width: 14px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(223, 94, 76, 1);
            font-size: 14px;
            font-family: PingFangSC-Semibold;
            text-align: center;
            white-space: nowrap;
            line-height: 20px;
            margin-top: 8px;
            display: block;
          }
          .word23 {
            width: 53px;
            height: 30px;
            overflow-wrap: break-word;
            color: rgba(223, 94, 76, 1);
            font-size: 22px;
            font-family: PingFangSC-Semibold;
            text-align: left;
            white-space: nowrap;
            line-height: 30px;
            display: block;
          }
          .txt10 {
            width: 14px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(77, 193, 147, 1);
            font-size: 14px;
            font-family: PingFangSC-Semibold;
            text-align: center;
            white-space: nowrap;
            line-height: 20px;
            display: block;
            margin: 8px 0 0 100px;
          }
          .word24 {
            width: 49px;
            height: 30px;
            overflow-wrap: break-word;
            color: rgba(77, 193, 147, 1);
            font-size: 22px;
            font-family: PingFangSC-Semibold;
            text-align: left;
            white-space: nowrap;
            line-height: 30px;
            display: block;
          }
        }
        .main17 {
          width: 227px;
          height: 13px;
          margin: 1px 0 0 15px;
          .txt11 {
            width: 60px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
          .word25 {
            width: 60px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
        }
        .main18 {
          background-color: rgba(246, 247, 252, 1);
          border-radius: 1px;
          height: 29px;
          width: 345px;
          margin: 12px 0 0 15px;
          .word26 {
            width: 208px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
            margin: 8px 0 0 10px;
          }
        }
      }
    }
  }
}
</style>

