sport_mobile/.svn/pristine/8a/8a367efaf6d7aff1e52299b37e7d91bc709c10c0.svn-base

<template>
  <div>
    <div class="abstract">
      <div class="abstract-title pdg20">摘要</div>
      <div class="abstract-date pdg20 row item-center">
        <div class="row item-center">
          <p style="color:#666;">开始日期</p>
          <input type="date">
        </div>
        <div class="row item-center" style="margin:0 .2rem;">
          <p style="color:#666;">结束日期</p>
          <input type="date">
        </div>
        <button>查询</button>
        <button>打印</button>
      </div>
      <div class="abstract-options row">
        <div class="row center" @click="options(1)" :class="optionsActive==1?'active':''">今日</div>
        <div class="row center" @click="options(2)" :class="optionsActive==2?'active':''">昨日</div>
        <div class="row center" @click="options(3)" :class="optionsActive==3?'active':''">过去30天</div>
      </div>
      <div class="abstract-box">
        <div style="border-left:.01rem solid #ccc;border-top:.01rem solid #ccc;border-right:.01rem solid #ccc;">
          <p class="title row center">查询日期范围线存款/提款额：</p>
          <ul class="list row">
            <li>存款:</li>
            <li>$0</li>
            <li>提款:</li>
            <li>$0</li>
          </ul>
        </div>
        <div style="border-left:.01rem solid #ccc;border-top:.01rem solid #ccc;border-right:.01rem solid #ccc;">
          <div class="title row average item-center">
            <div>交易类型</div>
            <div>支出</div>
            <div>收入</div>
          </div>
          <ul class="list row">
            <li>存款:</li>
            <li>$0</li>
            <li>提款:</li>
          </ul>
          <div class="title row item-center ">
            <div class="row rightAlignment" style="padding-right:.2rem;">查询日期范围总额 :</div>
            <div class="row rightAlignment" style="padding-right:.2rem;">$10.00</div>
            <div class="row rightAlignment" style="padding-right:.2rem;">$27.5</div>
          </div>
           <div class="title row item-center" style="background:#F76649;color:#fff">
            <div class="row rightAlignment" style="padding-right:.2rem;"></div>
            <div class="row rightAlignment" style="padding-right:.2rem;">盈余</div>
            <div class="row rightAlignment" style="padding-right:.2rem;">$27.5</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "abstract",
  data() {
    return {
      optionsActive: 3,
    };
  },
  methods: {
    options(num) {
      this.optionsActive = num;
    }
  }
};
</script>

<style scoped>
.pdg20 {
  padding: 0 0.2rem;
}
.abstract-title {
  font-size: 0.18rem;
  color: #fff;
  height: 0.5rem;
  background: #999;
  line-height: 0.5rem;
}
.abstract-date {
  height: 0.8rem;
  font-size: 0.14rem;
}
input {
  width: 1.7rem;
  height: 0.4rem;
  font-size: 0.14rem;
  color: #666;
  border: 0.01rem solid #ddd;
  border-radius: 0.05rem;
  margin-left: 0.1rem;
  cursor: pointer;
}
input[type="date"]::-webkit-inner-spin-button {
  visibility: hidden;
}
input[type="date"]::-webkit-clear-button {
  display: none;
}
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  background-color: #eee;
}
input[type="date"]::-webkit-datetime-edit {
  /* content: '起始时间'; */
  padding-left: 0.1rem;
}
button {
  background: #999;
  border: none;
  width: 0.6rem;
  height: 0.4rem;
  border-radius: 0.05rem;
  color: #fff;
  margin-left: 0.2rem;
  cursor: pointer;
}
.abstract-options {
  height: 0.4rem;
  border-bottom: 0.01rem solid #999;
}
.abstract-options div {
  width: 1rem;
  height: 0.4rem;
  color: #fff;
  background: #ccc;
  margin-left: 0.01rem;
  border-radius: 5px 5px 0px 0px;
  cursor: pointer;
}
.abstract-options div.active {
  background: #666;
}
.abstract-box {
  min-height: 2.8rem;
  max-height: 6.6rem;
  overflow-x: hidden;
  overflow-y: auto;
}
.abstract-box > div {
  margin-top: 0.2rem;
}
.abstract-box .title {
  height: 0.4rem;
  background: #ddd;
  color: #333;
}
.abstract-box .title div {
  width: 50%;
    text-align: center;
    line-height: .4rem;
}
.abstract-box .list li {
  width: 50%;
  height: 0.4rem;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 0.01rem solid #ccc;
   border-left: .01rem solid #ccc;
  border-bottom: 0.01rem solid #ccc;
}
.abstract-box .list li:nth-child(1){
  border-left: none;
    
}
.abstract-box .list li:nth-child(odd) {
  color: #666;
  
}
.abstract-box .list li:nth-child(even) {
  color: #f76649;
}
</style>