<template>
  <div :class="['card',getThemeVal()]">
    <div class="title">
      <div class="icon">
        <span style="font-size:14px;">外</span>
      </div>
      <div style="margin-left:12px;">外汇投组</div>
    </div>
    <div class="content">
      <div>
        <span class="gray">损益货币</span>
        <span
          style="margin-left:8px"
        >CNY</span>
      </div>
      <div>
        <span class="gray">持仓量</span>
        <span
          style="margin-left:8px"
        >****</span>
      </div>
    </div>
    <!-- <div class="line-graph" /> -->
  </div>
</template>

<script>
import { themeChangeMixin } from '@/mixins/themeChangeMixin';
export default {
  mixins: [themeChangeMixin],
  watch: {
    // theme(val) {
    //   this.chart?.clear();
    // },
  },
  methods: {
    getThemeVal() {
      if (this.theme === 'default') {
        return 'default-bg';
      } else {
        return 'dark-bg';
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.default-bg{
  background-image: url('../../assets/default/default_bg_gray.png');
  background-repeat: no-repeat; /* 防止平铺 */
  background-position: center;   /* 居中显示 */
  background-size: cover;       /* 覆盖整个区域 */
}
.dark-bg{
  background-image: url('../../assets/dark/dark_bg_gray.png');
  background-repeat: no-repeat; /* 防止平铺 */
  background-position: center;   /* 居中显示 */
  background-size: cover;       /* 覆盖整个区域 */
}
.card{
  width: 100%;
  height: 100%;
  padding: 12px;
  overflow:hidden;
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-content: space-between;
  .title{
    width: 100%;
    display:flex;
    flex-wrap:nowrap;
    font-size: 14px;
    padding-bottom:4px;
    border-bottom: 1px solid var(--desktop-border-color-1);
    .icon{
      min-width: 26px;
      min-height: 26px;
      border-radius: 16px;
      background-color: #3389FF;
      color:#fff;
    }
    .icon, div{
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
 .content{
    width: 100%;
    font-size: 12px;
    display:flex;
    justify-content: space-between;
  }
  .line-graph{
    position:absolute;
    width: 112px;
    height: 62px;
    right:12px;
    top:12px;
  }
}
.gray{
  color:var(--desktop-text-color-2)
}
.raise{
  color:#E95652
}
.reduce{
  color:#20C98B
}
</style>
