Muzkcoin_H5/pages/mineview/holdingslist.vue

<template>
<v-page>
  <view class="portfolio-container">
    <!-- 頂部標題 -->
    <view class="header-title">我的持倉</view>

    <!-- 切換 Tab -->
    <view class="tabs">
      <view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">
        加密貨幣
      </view>
      <view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">
        股票
      </view>
    </view>

    <!-- 列表區域 -->
    <view class="list-container">
      <!-- 列表表頭 -->
      <view class="list-header">
        <view class="col name">名稱</view>
        <view class="col price">
          <text>成本價/現價</text>
        </view>
        <view class="col today-return">
          <text>今日收益</text>
        </view>
        <view class="col total-return">
          <text>總收益</text>
        </view>
        <view class="col position">
          <text>倉位</text>
        </view>
      </view>

      <!-- 列表數據行 -->
      <view class="list-row">
        <!-- 名稱 -->
        <view class="col name">
          <text class="symbol-name">BTC/USDT</text>
          <text class="symbol-amount">0.001557</text>
        </view>
        
        <!-- 成本價/現價 -->
        <view class="col price">
          <text class="val-text">71,091.45</text>
          <text class="val-text light-text">71,237.26</text>
        </view>
        
        <!-- 今日收益 -->
        <view class="col today-return">
          <text class="val-text green-text">+0.717668</text>
          <text class="val-text green-text">+0.651248%</text>
        </view>
        
        <!-- 總收益 -->
        <view class="col total-return">
          <text class="val-text green-text">+0.227013</text>
          <text class="val-text green-text">+0.205090%</text>
        </view>
        
        <!-- 倉位 -->
        <view class="col position">
          <text class="val-text">100.00%</text>
        </view>
      </view>
      
    </view>
  </view>
</v-page>
</template>

<script>
export default {
  data() {
    return {
      // 控制 Tab 切換的狀態：0 為加密貨幣，1 為股票
      currentTab: 0
    };
  },
  methods: {
    // 處理點擊 Tab 切換的方法
    switchTab(index) {
      this.currentTab = index;
    }
  }
};
</script>

<style lang="scss" scoped>
/* 基礎容器 */
.portfolio-container {
  padding: 20px 15px;
  // background-color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 標題 */
.header-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--light);
  margin-bottom: 16px;
}

/* Tabs 樣式 */
.tabs {
  display: flex;
  flex-direction: row;
  margin-bottom: 24px;
  gap: 12px;
}

.tab-item {
  padding: 8px 24px;
  border-radius: 8px;
  font-size: 14px;
  color: #666;
  background-color: #EEF0F2; /* 灰色未選中背景 */
  font-weight: 500;
  transition: all 0.2s ease;
}

.tab-item.active {
  background-color: #F8BE12; /* 黃色選中背景 */
  color: #333;
  font-weight: bold;
}

/* 列表容器 */
.list-container {
  width: 100%;
}

/* 表頭樣式 */
.list-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid #EBEBEB;
  
  .col {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

/* 數據行樣式 */
.list-row {
  display: flex;
  flex-direction: row;
  align-items: center; /* 讓名稱和倉位垂直居中 */
  padding: 16px 0;
  border-bottom: 1px solid #EBEBEB;
  
  .col {
    display: flex;
    flex-direction: column; /* 上下排列數值 */
    justify-content: center;
    gap: 6px; /* 上下文字的間距 */
  }
}

/* 定義各列的寬度比例，確保對齊 */
.col {
  box-sizing: border-box;
  padding-right: 4px;
}
.name { width: 22%; }
.price { width: 22%; }
.today-return { width: 23%; }
.total-return { width: 21%; }
.position { width: 12%; text-align: right; align-items: flex-end; }

/* 具體文字樣式 */
.symbol-name {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-col);
}

.symbol-amount {
  font-size: 12px;
  color: #999;
}

.val-text {
  font-size: 13px;
  color: var(--text-col);
  word-break: break-all; /* 防止數字過長撐破容器 */
}

.light-text {
  color: #888; /* 現價的灰色 */
}

.green-text {
  color: #38C976; /* 收益的綠色 */
}
</style>