style

lxf

2025-07-02 7a52988eb65d0e50cc56e9da8e0088dfc5f9e416

 src/views/cryptos/AccountChange/index.vue

@@ -3,12 +3,25 @@
  <div id="cryptos">
    <div class="accountChange">
      <assets-head :title="$t('账变记录')" />
      <van-tabs ref="tabs" v-model:active="active" swipeable @change="onChange" sticky>
        <van-tab :title="item.title" v-for="item in selectData" :key="item.title" :name="item.type">
      <!-- <van-tabs ref="tabs" v-model:active="active" swipeable @change="onChange" sticky> -->
        <!-- <van-tab :title="item.title" v-for="item in selectData" :key="item.title" :name="item.type"> -->
          <van-list v-model:loading="loading" :loading-text="$t('加载中...')" :finished="finished"
            :finished-text="list.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="130" class="px-16">
            <div class="flex justify-between items-center record-list" v-for="(item, index) in list" :key="index">
              <div class="flex items-center">
            :finished-text="list.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="130" class="pt-10 px-17" style="background: #fff;">
              <div class="p-15 bg-#f5f7f9 rounded-10 mb-10" v-for="(item, index) in list" :key="index">
                <div class="flex justify-between">
                  <span class="text-13 text-#8c8c8c">金額</span>
                  <span class="text-11 text-green">{{item.amount }}&nbsp;{{ item.wallet_type.toUpperCase() }}</span>
                </div>
                <div class="flex justify-between py-5">
                  <span class="text-13 text-#8c8c8c">分類</span>
                  <span class="text-11">{{category[item.category]}}</span>
                </div>
                <div class="flex justify-between">
                  <span class="text-13 text-#8c8c8c">日期</span>
                  <span class="text-11">{{ item.createTime }}</span>
                </div>
              </div>
              <!-- <div class="flex items-center">
                <img v-if="item.amount > 0" src="@/assets/image/assets-center/in.png" class="w-44 h-44 mr-20" />
                <img v-else src="@/assets/image/assets-center/out.png" class="w-44 h-44 mr-20" />
                <div>
@@ -20,15 +33,14 @@
                <div class="font-32 text-right" :class="item.amount > 0 ? 'text-green' : 'text-red'">{{
                  item.amount }}&nbsp;{{ item.wallet_type.toUpperCase() }}</div>
                <div class="text-grey font-28 mt-14">{{ item.createTimeStr }}</div>
              </div>
            </div>
              </div> -->
            <div class="flex flex-col justify-center pt-50 pb-20 items-center" v-if="!list.length && !loading">
              <img src="@/assets/image/assets-center/no-data.png" alt="" class="w-100 h-100 no-data-img" />
              <p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
        <!-- </van-tab> -->
      <!-- </van-tabs> -->
    </div>
  </div>
</template>
@@ -173,111 +185,8 @@
}
</script>
<style lang="scss" scoped>
@import "@/assets/init.scss";

#cryptos {
  :deep(.van-tabs__wrap) {
    // height: 88px !important;
  }

  :deep(.van-tabs__nav) {
    background: $tab_background;
  }

  :deep(.van-tabs__line) {
    bottom: 10px;
  }

  .accountChange {
    width: 100%;
    box-sizing: border-box;

    :deep(.van-tab--active .van-tab__text) {
      color: $text_color;
    }

    :deep(.van-tab__text) {
      color: $text_color1;
    }
  }
// @import "@/assets/init.scss";
@import "@/assets/css/deepseek_css_20250625_30ff932.css";



  // select样式
  .select-view {
    position: relative;
    width: 320px;
  }

  .select-box {
    width: 100%;
    height: 70px;
    line-height: 70px;
    background-color: $light-grey;
    cursor: pointer;
  }

  .option-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 90px;
    width: 100%;
    background-color: $grey_bg;
    text-align: center;
    box-shadow: 0px 0px 3px 3px $grey_bg;
    border-radius: 4px;
    color: $text-color;
    z-index: 10;
  }

  .option-box>div {
    padding: 30px 0;
  }

  .option-box>div:hover {
    background-color: $grey_bg;
  }

  // 按钮
  .search-btn {
    width: 140px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    border: none;
    outline: none;
  }

  .record-list {
    padding: 38px 30px;
    border-bottom: 1px solid $border_color;
  }

  .mt12 {
    margin-top: 12px;
  }

  .dividing-line {
    height: 10px;
    background-color: $divi_line;

  }

  .mtb30 {
    margin: 30px 0;
  }

  .select-icon {
    position: relative;
    bottom: 8px;
  }

  .accountChange {
    :deep(.van-tab__text) {
      font-size: 30px !important;
    }
  }

}
</style>