<template>
|
<div>
|
<ul class="sport-tabs">
|
<li
|
:class="actives === item.key && 'active'"
|
v-for="item in tabsList"
|
:key="item.key"
|
@click="clickTabs(item)"
|
>
|
{{ item.title }}
|
</li>
|
</ul>
|
|
<div class="sport-content-li">
|
<div class="title-box">
|
<div class="span">SoundHound AI, Inc. Class A Commond StockSOUN</div>
|
<div class="states">买涨</div>
|
</div>
|
<div class="van-rows">
|
<div style="text-align: left">
|
<div class="sport-content-title2">盈虧 (USD)</div>
|
<div class="sport-content-text" style="color: #d04b64">-35.4632</div>
|
</div>
|
<div style="text-align: right">
|
<div class="sport-content-title2">盈虧 (USD)</div>
|
<div class="sport-content-text">-35.4632</div>
|
</div>
|
</div>
|
<div class="van-rows">
|
<div style="text-align: left">
|
<div class="sport-content-title2">最新價(USD)</div>
|
<div class="sport-content-text2">-35.4632</div>
|
</div>
|
<div style="text-align: center">
|
<div class="sport-content-title2">持倉價 (USD)</div>
|
<div class="sport-content-text2">-35.4632</div>
|
</div>
|
<div style="text-align: right">
|
<div class="sport-content-title2">訂單金額 (USD)</div>
|
<div class="sport-content-text2">-35.4632</div>
|
</div>
|
</div>
|
<div class="van-rows">
|
<div style="text-align: left">
|
<div class="sport-content-title2">開倉手續費 (USD)</div>
|
<div class="sport-content-text2">-35.4632</div>
|
</div>
|
<div style="text-align: center">
|
<div class="sport-content-title2">止損價 (USD)</div>
|
<div class="sport-content-text2">-35.4632</div>
|
</div>
|
<div style="text-align: right">
|
<div class="sport-content-title2">止盈價 (USD)</div>
|
<div class="sport-content-text2">-35.4632</div>
|
</div>
|
</div>
|
<div class="van-rows">
|
<div style="text-align: left">
|
<div class="sport-content-title2">持倉時間</div>
|
<div class="sport-content-text2">19-03-24 16:11:22</div>
|
</div>
|
<div style="text-align: right">
|
<div class="sport-content-title2">訂單編號</div>
|
<div class="sport-content-text2">-17108358821839588500127</div>
|
</div>
|
</div>
|
<div class="but-box">
|
<div class="but">平仓</div>
|
<div class="but buts">止盈止损</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
actives: "1",
|
tabsList: [
|
{
|
title: "持倉",
|
key: "1",
|
},
|
{
|
title: "掛單",
|
key: "2",
|
},
|
{
|
title: "撤單",
|
key: "3",
|
},
|
{
|
title: "平倉",
|
key: "4",
|
},
|
],
|
};
|
},
|
methods: {
|
clickTabs(e) {
|
console.log(e);
|
this.actives = e.key;
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.sport-tabs {
|
// font-family: PingFang SC;
|
font-family: "DINPro";
|
width: 100%;
|
height: 0.90667rem;
|
margin-top: 0.42667rem;
|
display: flex;
|
align-items: center;
|
box-sizing: border-box;
|
justify-content: space-around;
|
border-bottom: 0.16rem solid #f7f7fa;
|
position: sticky;
|
top: 0;
|
z-index: 99;
|
background-color: #fff;
|
li {
|
height: 0.90667rem;
|
line-height: 0.90667rem;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 0.37333rem;
|
text-align: center;
|
color: #14181f;
|
box-sizing: border-box;
|
}
|
.active {
|
color: #0066ed;
|
border-bottom: 0.08rem solid #0066ed;
|
}
|
}
|
.sport-content-li {
|
width: 100%;
|
height: 7.52rem;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
padding: 0.26667rem 0.37333rem;
|
border-bottom: 0.02667rem solid #f0f2f3;
|
box-sizing: border-box;
|
}
|
.title-box {
|
display: flex;
|
font-style: normal;
|
font-weight: 500;
|
font-size: 0.37333rem;
|
color: #14181f;
|
display: flex;
|
align-items: center;
|
|
.span {
|
}
|
.states {
|
display: inline-flex;
|
justify-content: center;
|
padding: 0.05333rem 0.16rem;
|
align-items: center;
|
align-content: flex-start;
|
font-size: 0.26667rem;
|
height: 0.48rem;
|
margin-left: 0.10667rem;
|
line-height: 0.26667rem;
|
text-align: center;
|
color: #03ad8f;
|
border-radius: 0.05333rem;
|
background: rgba(3, 173, 143, 0.15);
|
flex-shrink: 0;
|
font-weight: 900;
|
}
|
}
|
.van-rows {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
.sport-content-title2 {
|
font-style: normal;
|
font-weight: 400;
|
font-size: 0.29333rem;
|
color: #8c9fad;
|
// text-align: left;
|
}
|
.sport-content-text {
|
font-style: normal;
|
font-weight: 500;
|
font-size: 0.48rem;
|
color: #14181f;
|
font-family: "PingFang SC";
|
// line-height: 18px;
|
// text-align: right;
|
}
|
.sport-content-text2 {
|
font-family: "PingFang SC";
|
font-style: normal;
|
font-weight: 500;
|
font-size: 0.34667rem;
|
color: #14181f;
|
word-break: break-word;
|
// line-height: 18px;
|
}
|
}
|
.but-box {
|
display: flex;
|
justify-content: space-around;
|
.but {
|
text-align: center;
|
|
min-width: 2.13333rem;
|
height: 0.69333rem;
|
line-height: 0.69333rem;
|
background: #e6f2ff;
|
border-radius: 0.10667rem;
|
list-style: none;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 0.29333rem;
|
color: #0067ed;
|
border: none;
|
}
|
.buts {
|
min-width: 2.13333rem;
|
height: 0.69333rem;
|
line-height: 0.69333rem;
|
background: #fff;
|
border-radius: 0.10667rem;
|
list-style: none;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 0.29333rem;
|
border: 0.01333rem solid #e4eaed;
|
color: #14181f;
|
}
|
}
|
</style>
|
