style

lxf

2025-07-09 2eb4dd6f50b75c9ec844d08eded5365cd79e4207

 src/views/position/newindex.vue

@@ -6,20 +6,20 @@
      <div class="px-17"></div>
      
      <div class="status_bar absolute top-0 left-0 w-full h-44 flex items-center justify-center z--1">
        <div class="p-3 bg-#EEE rounded-full flex text-12 font-medium">
        <div class="p-3 bg-#EEE rounded-full flex text-15 font-medium">
          <span 
          class="block h-24 w-84.5 text-center leading-24 rounded-full cursor-pointer"
          :class="activeTab === 'position' ? 'bg-#3640f0 text-white' : ''"
          @click="switchTab('position')"
        >
          持倉
          {{ t('持仓') }}
        </span>
        <span 
          class="block h-24 w-84.5 text-center leading-24 rounded-full cursor-pointer"
          :class="activeTab === 'history' ? 'bg-#3640f0 text-white' : ''"
          @click="switchTab('history')"
        >
          歷史
          {{ t('历史') }}
        </span>
        </div>
      </div>
@@ -35,40 +35,40 @@
        class="py-20 px-15 rounded-15 bg-#f5f7f9 mb-10"
      >
        <div class="flex justify-between pb-10" style="border-bottom: 0.5px solid rgb(218, 218, 218);">
          <span class="font-medium text-15">{{ order.pair }}</span>
          <span class="font-medium text-18">{{ order.pair }}</span>
          <div class="text-end">
            <span class="font-medium">{{ order.price }}<br></span>
            <span class="text-11 font-medium" :class="order.type === 'sell' ? 'text-red' : 'text-blue'">
              {{ order.type === 'sell' ? '拋售' : '購買' }}
            <span class="font-medium text-14">{{ order.price }}<br></span>
            <span class="text-14 font-medium" :class="order.type === 'sell' ? 'text-red' : 'text-blue'">
              {{ order.type === 'sell' ? t('卖出') : t('购买') }}
            </span>
          </div>
        </div>
        
        <div class="mt-10 text-11 text-#8c8c8c">
        <div class="mt-10 text-14 text-#8c8c8c">
          <div class="flex justify-between">
            <div class="flex-1 flex justify-between">
              <span>金額</span>
              <span>{{t('金额')}}</span>
              <span class="text-black">{{ order.amount }}</span>
            </div>
            <div class="flex-1 flex justify-between ml-30">
              <span>時長</span>
              <span>{{t('时间')}}</span>
              <span class="text-black">{{ order.duration }}</span>
            </div>
          </div>
          
          <div class="flex" v-if="activeTab === 'history'">
          <div class="flex text-14" v-if="activeTab === 'history'">
            <div class="flex justify-between mt-10 flex-1">
              <span>結算價格</span>
              <span>{{t('结算价格')}}</span>
              <span :class="order.profit >= 0 ? 'text-green' : 'text-red'">{{ order.settlePrice }}</span>
            </div>
            <div class="flex justify-between mt-10 flex-1 ml-30">
              <span>服務費</span>
              <span>{{t('服务费')}}</span>
              <span :class="order.profit >= 0 ? 'text-green' : 'text-red'">{{ order.fee }}</span>
            </div>
          </div>
          
          <div class="flex justify-between mt-10">
            <span>下單時間</span>
          <div class="flex justify-between mt-10 text-14">
            <span>{{t('订单时间')}}</span>
            <span class="text-black">{{ order.time }}</span>
          </div>
        </div>
@@ -76,7 +76,7 @@


      
      <div class="text-center py-20" style="color: rgb(167, 166, 166);">已全部載入···</div>
      <div class="text-center py-20 text-12" style="color: rgb(167, 166, 166);">{{ t('加载完毕') }}...</div>
    </div>
  </div>
</template>
@@ -104,39 +104,39 @@
const route = useRoute()

const orders = ref([
  {
    pair: 'USD/CNH',
    price: '7.31271',
    type: 'sell',
    amount: '10000',
    duration: '300s',
    settlePrice: '7.31225',
    fee: '300',
    profit: 1,
    time: '2024-12-23 15:56:57'
  },
  {
    pair: 'USD/CNH',
    price: '7.29718',
    type: 'sell',
    amount: '5000',
    duration: '300s',
    settlePrice: '7.29675',
    fee: '150',
    profit: 1,
    time: '2024-12-19 00:17:05'
  },
  {
    pair: 'USD/HKD',
    price: '7.76941',
    type: 'buy',
    amount: '10000',
    duration: '300s',
    settlePrice: '7.76899',
    fee: '-300',
    profit: -1,
    time: '2024-12-18 09:25:02'
  }
  // {
  //   pair: 'USD/CNH',
  //   price: '7.31271',
  //   type: 'sell',
  //   amount: '10000',
  //   duration: '300s',
  //   settlePrice: '7.31225',
  //   fee: '300',
  //   profit: 1,
  //   time: '2024-12-23 15:56:57'
  // },
  // {
  //   pair: 'USD/CNH',
  //   price: '7.29718',
  //   type: 'sell',
  //   amount: '5000',
  //   duration: '300s',
  //   settlePrice: '7.29675',
  //   fee: '150',
  //   profit: 1,
  //   time: '2024-12-19 00:17:05'
  // },
  // {
  //   pair: 'USD/HKD',
  //   price: '7.76941',
  //   type: 'buy',
  //   amount: '10000',
  //   duration: '300s',
  //   settlePrice: '7.76899',
  //   fee: '-300',
  //   profit: -1,
  //   time: '2024-12-18 09:25:02'
  // }
])
const activeTab = ref('position')
const switchTab = (tab) => {
@@ -154,7 +154,7 @@
    symbolType: 'forex'
  }
  contractOrder(obj).then((res) => {
    list.value = res.data
    orders.value = res.data
    // 处理历史订单数据...
  })
}