<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>
|
<van-list
|
v-model="loading"
|
:finished="finished"
|
:finished-text="$t('hj43')"
|
:loading-text="$t('hj430')"
|
@load="onLoad"
|
>
|
<div
|
v-if="actives === 0"
|
class="sport-content-li"
|
:style="actives === 1 ? 'height:5.52rem' : 'height:7.52rem'"
|
v-for="(item, index) in dataList"
|
:key="index"
|
@click="$router.push(`/Stockdetail?codes=${item.positionSn}`)"
|
>
|
<div @click.stop="pushRouter(item)">
|
<div class="title-box" style="justify-content: space-between;">
|
<div
|
class="span"
|
:style="item.isListed == false ? 'color:red;' : ''"
|
>
|
{{ item.stockName }}
|
</div>
|
<div
|
class="states"
|
:class="item.orderDirection === '买跌' ? 'states-red' : ''"
|
>
|
{{ $t(item.orderDirection) }}
|
</div>
|
</div>
|
{{ item.stockSpell }}
|
</div>
|
<van-row>
|
<van-col span="8">
|
<div style="text-align: left">
|
<div class="sport-content-title2">
|
{{ $t("盈虧") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div
|
class="sport-content-text2"
|
:style="
|
item.profitAndLoseParent.charAt(0) == '-'
|
? 'color:#cc1b1b;'
|
: 'color:#3e9976;'
|
"
|
>
|
{{ item.profitAndLose }}
|
</div>
|
</div>
|
</van-col>
|
<van-col span="8">
|
<div style="text-align: center">
|
<div class="sport-content-title2">
|
{{ $t("hj141") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div
|
class="sport-content-text2"
|
:style="
|
item.profitAndLoseParent.charAt(0) == '-'
|
? 'color:#cc1b1b;'
|
: 'color:#3e9976;'
|
"
|
>
|
{{ item.profitAndLoseParent }}
|
</div>
|
</div>
|
</van-col>
|
<van-col span="8">
|
<div style="text-align: right">
|
<div class="sport-content-title2">{{ $t("倉位(股)") }}</div>
|
<div class="sport-content-text2">{{ item.orderNum }}</div>
|
</div></van-col
|
>
|
</van-row>
|
<van-row>
|
<van-col span="8">
|
<div style="text-align: left">
|
<div class="sport-content-title2">
|
{{ $t("hj40") }}({{ activeObj.symbolCode }})
|
</div>
|
<div class="sport-content-text2">
|
{{ item.now_price }}
|
</div>
|
</div>
|
</van-col>
|
<van-col span="8">
|
<div style="text-align: center">
|
<div class="sport-content-title2">
|
{{ $t("持倉價") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div class="sport-content-text2">
|
{{ item.buyOrderPrice }}
|
</div>
|
</div>
|
</van-col>
|
<van-col span="8">
|
<div style="text-align: right">
|
<div class="sport-content-title2">
|
{{ $t("訂單金額") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div class="sport-content-text2">
|
{{ item.orderTotalPrice }}
|
</div>
|
</div>
|
</van-col>
|
</van-row>
|
<!-- <van-row>
|
<van-col span="12">
|
<div style="text-align: left">
|
<div class="sport-content-title2">
|
{{ $t("hj44") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div class="sport-content-text2">
|
{{ item.orderFee }}
|
</div>
|
</div>
|
</van-col>
|
<van-col span="12">
|
<div style="text-align: right">
|
<div class="sport-content-title2">
|
{{ $t("待补金额") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div class="sport-content-text2">
|
{{ item.amountToBeCovered }}
|
</div>
|
</div>
|
</van-col> -->
|
<!-- <van-col span="8">
|
<div style="text-align: center">
|
<div class="sport-content-title2">
|
{{ $t("止損價") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div class="sport-content-text2">
|
{{ item.stopTargetPrice }}
|
</div>
|
</div>
|
</van-col>
|
<van-col span="8">
|
<div style="text-align: right">
|
<div class="sport-content-title2">
|
{{ $t("止盈價") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div class="sport-content-text2">
|
{{ item.profitTargetPrice }}
|
</div>
|
</div>
|
</van-col> -->
|
<!-- </van-row> -->
|
<van-row>
|
<van-col span="12">
|
<div style="text-align: left">
|
<div class="sport-content-title2">{{ $t("持倉時間") }}</div>
|
<div class="sport-content-text2">
|
{{ $moment(item.buyOrderTime).format("DD-MM-YYYY hh:mm:ss A") }}
|
</div>
|
</div>
|
</van-col>
|
<van-col span="12">
|
<div style="text-align: right">
|
<div class="sport-content-title2">{{ $t("訂單編號") }}</div>
|
<div class="sport-content-text2">{{ item.buyOrderId }}</div>
|
</div>
|
</van-col>
|
</van-row>
|
|
<div class="but-box" v-if="actives === 0" @click.stop="close(item)">
|
<div class="but">{{ $t("平仓") }}</div>
|
<!-- <div class="but buts">止盈止损</div> -->
|
</div>
|
</div>
|
|
<div
|
v-if="actives === 1"
|
class="sport-content-li"
|
:style="actives === 1 ? 'height:5.52rem' : 'height:7.52rem'"
|
v-for="(item, index) in newdataList"
|
:key="index"
|
@click="$router.push(`/Stockdetail?codes=${item.positionSn}`)"
|
>
|
<div @click.stop="pushRouter(item)">
|
<div class="title-box" style="justify-content: space-between;">
|
<div class="span">{{ item.stockName }}</div>
|
<div
|
class="states"
|
:class="item.orderDirection === '买跌' ? 'states-red' : ''"
|
>
|
{{ $t(item.orderDirection) }}
|
</div>
|
</div>
|
{{ item.stockSpell }}
|
</div>
|
<van-row>
|
<van-col span="8">
|
<div style="text-align: left">
|
<div class="sport-content-title2">
|
{{ $t("盈虧") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div
|
class="sport-content-text2"
|
:style="
|
item.profitAndLoseParent.charAt(0) == '-'
|
? 'color:#cc1b1b;'
|
: 'color:#3e9976;'
|
"
|
>
|
{{ item.profitAndLose }}
|
</div>
|
</div>
|
</van-col>
|
<van-col span="8">
|
<div style="text-align: center">
|
<div class="sport-content-title2">
|
{{ $t("hj141") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div
|
class="sport-content-text2"
|
:style="
|
item.profitAndLoseParent.charAt(0) == '-'
|
? 'color:#cc1b1b;'
|
: 'color:#3e9976;'
|
"
|
>
|
{{ item.profitAndLoseParent }}
|
</div>
|
</div>
|
</van-col>
|
<van-col span="8">
|
<div style="text-align: right">
|
<div class="sport-content-title2">{{ $t("倉位(股)") }}</div>
|
<div class="sport-content-text2">{{ item.orderNum }}</div>
|
</div></van-col
|
>
|
</van-row>
|
<van-row>
|
<van-col span="8">
|
<div style="text-align: left">
|
<div class="sport-content-title2">
|
{{ $t("hj40") }}({{ activeObj.symbolCode }})
|
</div>
|
<div class="sport-content-text2">
|
{{ item.now_price }}
|
</div>
|
</div>
|
</van-col>
|
<van-col span="8">
|
<div style="text-align: center">
|
<div class="sport-content-title2">
|
{{ $t("持倉價") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div class="sport-content-text2">
|
{{ item.buyOrderPrice }}
|
</div>
|
</div>
|
</van-col>
|
<van-col span="8">
|
<div style="text-align: right">
|
<div class="sport-content-title2">
|
{{ $t("訂單金額") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div class="sport-content-text2">
|
{{ item.orderTotalPrice }}
|
</div>
|
</div>
|
</van-col>
|
</van-row>
|
<van-row>
|
<van-col span="8">
|
<div style="text-align: left">
|
<div class="sport-content-title2">
|
{{ $t("hj44") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div class="sport-content-text2">
|
{{ item.orderFee }}
|
</div>
|
</div>
|
</van-col>
|
<!-- <van-col span="8">
|
<div style="text-align: center">
|
<div class="sport-content-title2">
|
{{ $t("止損價") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div class="sport-content-text2">
|
{{ item.stopTargetPrice }}
|
</div>
|
</div>
|
</van-col>
|
<van-col span="8">
|
<div style="text-align: right">
|
<div class="sport-content-title2">
|
{{ $t("止盈價") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div class="sport-content-text2">
|
{{ item.profitTargetPrice }}
|
</div>
|
</div>
|
</van-col> -->
|
</van-row>
|
<van-row>
|
<van-col span="12">
|
<div style="text-align: left">
|
<div class="sport-content-title2">{{ $t("持倉時間") }}</div>
|
<div class="sport-content-text2">
|
{{ $moment(item.buyOrderTime).format("DD-MM-YYYY hh:mm:ss A") }}
|
</div>
|
</div>
|
</van-col>
|
<van-col span="12">
|
<div style="text-align: right">
|
<div class="sport-content-title2">{{ $t("訂單編號") }}</div>
|
<div class="sport-content-text2">{{ item.buyOrderId }}</div>
|
</div>
|
</van-col>
|
</van-row>
|
|
<div class="but-box" v-if="actives === 0" @click.stop="close(item)">
|
<div class="but">{{ $t("平仓") }}</div>
|
<!-- <div class="but buts">止盈止损</div> -->
|
</div>
|
</div>
|
|
<van-popover
|
v-if="actives === 2"
|
v-model="pendingShow"
|
trigger="click"
|
:actions="pendingOptions"
|
@select="handleStatusChange"
|
>
|
<template #reference>
|
<van-button type="primary">{{
|
pendingOptions[pendingStatus].text
|
}}</van-button>
|
</template>
|
</van-popover>
|
<div
|
v-if="actives === 2"
|
class="sport-content-li"
|
:style="actives === 1 ? 'height:5.52rem' : 'height:7.52rem'"
|
v-for="(item, index) in dataList"
|
:key="index"
|
@click="$router.push(`/Stockdetail?codes=${item.positionSn}`)"
|
>
|
<div @click.stop="pushRouter(item)">
|
<div class="title-box" style="justify-content: space-between;">
|
<div
|
class="span"
|
:style="item.isListed == false ? 'color:red;' : ''"
|
>
|
{{ item.stockName }}
|
</div>
|
<div
|
class="states"
|
:class="item.orderDirection === '买跌' ? 'states-red' : ''"
|
>
|
{{ $t(item.orderDirection) }}
|
</div>
|
</div>
|
{{ item.stockSpell }}
|
</div>
|
<!-- <van-row> -->
|
<!-- <van-col span="8"> -->
|
<!-- <div style="text-align: left">
|
<div class="sport-content-title2">
|
{{ $t("盈虧") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div
|
class="sport-content-text2"
|
:style="
|
item.profitAndLoseParent.charAt(0) == '-'
|
? 'color:#cc1b1b;'
|
: 'color:#3e9976;'
|
"
|
>
|
{{ item.profitAndLose }}
|
</div> -->
|
<!-- </div> -->
|
<!-- </van-col> -->
|
<!-- <van-col span="8"> -->
|
<!-- <div style="text-align: center"> -->
|
<!-- <div class="sport-content-title2">
|
{{ $t("hj141") }} ({{ activeObj.symbolCode }})
|
</div> -->
|
<!-- <div
|
class="sport-content-text2"
|
:style="
|
item.profitAndLoseParent.charAt(0) == '-'
|
? 'color:#cc1b1b;'
|
: 'color:#3e9976;'
|
"
|
>
|
{{ item.profitAndLoseParent }}
|
</div> -->
|
<!-- </div> -->
|
<!-- </van-col> -->
|
<!-- <van-col span="8">
|
<div style="text-align: right">
|
<div class="sport-content-title2">{{ $t("倉位(股)") }}</div>
|
<div class="sport-content-text2">{{ item.orderNum }}</div>
|
</div></van-col
|
> -->
|
<!-- </van-row> -->
|
<van-row>
|
<van-col span="8">
|
<van-col span="8">
|
<div style="text-align: right">
|
<div class="sport-content-title2">{{ $t("倉位(股)") }}</div>
|
<div class="sport-content-text2">{{ item.orderNum }}</div>
|
</div></van-col
|
>
|
<!-- <div style="text-align: left"> -->
|
<!-- <div class="sport-content-title2">
|
{{ $t("hj40") }}({{ activeObj.symbolCode }})
|
</div> -->
|
<!-- <div class="sport-content-text2">
|
{{ item.now_price }}
|
</div> -->
|
<!-- </div> -->
|
</van-col>
|
<van-col span="8">
|
<div style="text-align: center">
|
<div class="sport-content-title2">
|
{{ $t("持倉價") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div class="sport-content-text2">
|
{{ item.sellOrderPrice || item.buyOrderPrice }}
|
</div>
|
</div>
|
</van-col>
|
<van-col span="8">
|
<div style="text-align: right">
|
<div class="sport-content-title2">
|
{{ $t("訂單金額") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div class="sport-content-text2">
|
{{ item.orderTotalPrice }}
|
</div>
|
</div>
|
</van-col>
|
</van-row>
|
<!-- <van-row> -->
|
<!-- <van-col span="12">
|
<div style="text-align: left">
|
<div class="sport-content-title2">
|
{{ $t("hj44") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div class="sport-content-text2">
|
{{ item.orderFee }}
|
</div>
|
</div>
|
</van-col>
|
<van-col span="12">
|
<div style="text-align: right">
|
<div class="sport-content-title2">
|
{{ $t("待补金额") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div class="sport-content-text2">
|
{{ item.amountToBeCovered }}
|
</div>
|
</div>
|
</van-col> -->
|
<!-- <van-col span="8">
|
<div style="text-align: center">
|
<div class="sport-content-title2">
|
{{ $t("止損價") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div class="sport-content-text2">
|
{{ item.stopTargetPrice }}
|
</div>
|
</div>
|
</van-col>
|
<van-col span="8">
|
<div style="text-align: right">
|
<div class="sport-content-title2">
|
{{ $t("止盈價") }} ({{ activeObj.symbolCode }})
|
</div>
|
<div class="sport-content-text2">
|
{{ item.profitTargetPrice }}
|
</div>
|
</div>
|
</van-col> -->
|
<!-- </van-row> -->
|
<van-row>
|
<van-col span="12">
|
<div style="text-align: left">
|
<div class="sport-content-title2">{{ $t("持倉時間") }}</div>
|
<div class="sport-content-text2">
|
{{ $moment(item.buyOrderTime).format("DD-MM-YYYY hh:mm:ss A") }}
|
</div>
|
</div>
|
</van-col>
|
<van-col span="12">
|
<div style="text-align: right">
|
<div class="sport-content-title2">{{ $t("訂單編號") }}</div>
|
<div class="sport-content-text2">{{ item.buyOrderId }}</div>
|
</div>
|
</van-col>
|
</van-row>
|
|
<div
|
class="but-box"
|
v-if="actives === 2 && pendingStatus === 1"
|
@click.stop="close(item)"
|
>
|
<div class="but">{{ $t("hj126") }}</div>
|
<!-- <div class="but buts">止盈止损</div> -->
|
</div>
|
</div>
|
</van-list>
|
|
<!-- <van-popup v-model="show" position="top" :style="{ height: '30%' }" /> -->
|
|
<Dialog ref="closeDialog" :title="$t('确认平仓')" :confirm="confirm">
|
<template v-slot:center>
|
<div>
|
<div class="hang">
|
<div class="left">{{ $t("hj39") }}</div>
|
<div class="right">{{ closeSell.stockName }}</div>
|
</div>
|
<div class="hang">
|
<div class="left">{{ $t("買漲/買跌") }}</div>
|
<div class="right">{{ $t(closeSell.orderDirection) }}</div>
|
</div>
|
<div class="hang">
|
<div class="left">{{ $t("倉位(股)") }}</div>
|
<!-- <div class="right" style="color: rgb(3, 173, 143)">
|
{{ closeSell.orderNum }}
|
</div> -->
|
<input
|
class="input_box"
|
type="number"
|
:max="closeSell.orderNum"
|
:placeholder="$t('hj262')"
|
v-model="ordernum"
|
/>
|
</div>
|
<div class="hang">
|
<div class="left">{{ $t("類型") }}</div>
|
<div class="right">{{ $t("市價") }}</div>
|
</div>
|
</div>
|
</template>
|
</Dialog>
|
</div>
|
</template>
|
|
<script>
|
import Dialog from "@/components/Dialog";
|
import { getchicang, sell, revocation } from "../../../axios/api";
|
import { Notify, Dialog as VanDialog } from "vant";
|
export default {
|
components: { Dialog },
|
props: {
|
activeObj: {
|
type: Object,
|
default: {}
|
}
|
},
|
mounted() {
|
this.getList();
|
},
|
data() {
|
return {
|
pendingShow: false,
|
pendingStatus: 1, // 默认选中挂单中
|
pendingOptions: [
|
{ text: "挂单成功", value: 0 },
|
{ text: "挂单中", value: 1 },
|
{ text: "撤销", value: 2 }
|
],
|
pageNum: 1,
|
pageSize: 150,
|
loading: true,
|
finished: false,
|
closeSell: {},
|
show: false,
|
actives: 0,
|
ordernum: "",
|
dataList: [],
|
newdataList: [],
|
timer: null,
|
tabsList: [
|
{
|
title: this.$t("持倉"),
|
key: 0
|
},
|
{
|
title: this.$t("平倉"),
|
key: 1
|
},
|
{
|
title: this.$t("hj109"),
|
key: 2
|
}
|
]
|
};
|
},
|
created() {
|
this.dsq();
|
},
|
beforeDestroy() {
|
clearInterval(this.timer); // 在组件销毁前清除定时器
|
},
|
methods: {
|
handleStatusChange(value) {
|
// 状态改变时的处理逻辑
|
console.log("当前状态:", value);
|
this.pendingStatus = value.value;
|
// 这里可以添加获取对应状态数据的逻辑
|
this.getList();
|
},
|
dsq() {
|
// this.dataList = [];
|
this.timer = setInterval(() => {
|
this.getList();
|
}, 1000);
|
},
|
pushRouter(item) {
|
const obj = {
|
pid: item.stockCode || "",
|
type: item.stockGid || ""
|
};
|
window.localStorage.setItem("kLine", JSON.stringify(obj));
|
// return;
|
var codes = item.stockCode;
|
var names = item.stockName;
|
|
this.$router.push({
|
path: "/kline",
|
query: {
|
name: names,
|
code: codes,
|
if_us: "",
|
if_zhishu: 0,
|
sok: "",
|
type: item.stockGid
|
}
|
});
|
},
|
onLoad() {
|
// this.pageNum++;
|
this.loading = true;
|
},
|
async confirm() {
|
this.$refs.closeDialog.show = false;
|
const res = await sell({
|
positionSn: this.closeSell.positionSn,
|
number: this.ordernum
|
});
|
if (res.status === 0) {
|
this.dataList = [];
|
this.pageNum = 1;
|
this.finished = false;
|
Notify({ type: "success", message: res.msg });
|
this.getList();
|
this.$emit("closingPosition");
|
} else {
|
Notify({ type: "danger", message: res.msg });
|
}
|
},
|
// 获取仓位列表
|
async getLists(laber) {
|
if (laber) {
|
this.dataList = [];
|
this.pageNum = 1;
|
this.finished = false;
|
}
|
const _laber = laber || this.activeObj.laber;
|
let opt = {
|
state: this.actives,
|
stockType: _laber,
|
pendingStatus: this.pendingStatus, // 1 挂单中 2撤销 0挂单成功
|
pageNum: 1,
|
pageSize: 30
|
};
|
if (_laber === "USD") {
|
opt.stockCode = "HJYY";
|
}
|
|
const res = await getchicang(opt);
|
|
this.loading = false;
|
if (res.status === 0) {
|
this.newdataList = res.data.list;
|
this.finished = true;
|
} else {
|
this.loading = false;
|
this.finished = true;
|
}
|
},
|
// 获取仓位列表
|
async getList(laber) {
|
if (laber) {
|
this.dataList = [];
|
this.pageNum = 1;
|
this.finished = false;
|
}
|
const _laber = laber || this.activeObj.laber;
|
let opt = {
|
state: this.actives,
|
stockType: _laber,
|
pendingStatus: this.pendingStatus, // 1 挂单中 2撤销 0挂单成功
|
pageNum: 1,
|
pageSize: 30
|
};
|
if (_laber === "USD") {
|
opt.stockCode = "HJYY";
|
}
|
const res = await getchicang(opt);
|
|
this.loading = false;
|
if (res.status === 0) {
|
this.dataList = [];
|
this.dataList = res.data.list;
|
this.finished = true;
|
} else {
|
this.loading = false;
|
this.finished = true;
|
}
|
},
|
close(item) {
|
console.log("item: ", item);
|
if (this.actives == 2) {
|
VanDialog.confirm({
|
title: this.$t("确认撤销"),
|
message: this.$t("确定要撤销此挂单吗？"),
|
confirmButtonText: this.$t("确定"),
|
cancelButtonText: this.$t("取消")
|
})
|
.then(async () => {
|
// 用户点击确认后的逻辑
|
const res = await revocation({
|
id: item.id
|
});
|
if (res.status === 0) {
|
Notify({ type: "success", message: res.msg });
|
this.getList(); // 刷新列表
|
} else {
|
Notify({ type: "danger", message: res.msg });
|
}
|
})
|
.catch(() => {
|
// 用户点击取消
|
console.log("取消撤销");
|
});
|
} else {
|
this.closeSell = item;
|
this.$refs.closeDialog.show = true;
|
this.ordernum = "";
|
}
|
},
|
|
clickTabs(e) {
|
this.pageNum = 1;
|
this.finished = false;
|
this.actives = e.key;
|
this.newdataList = [];
|
this.dataList = [];
|
|
if (e.key == 2) {
|
}
|
if (e.key == 1) {
|
clearInterval(this.timer); // 在组件销毁前清除定时器
|
// clearTimeout(this.timer);
|
// setTimeout(()=>{
|
// clearInterval(this.timer); // 在组件销毁前清除定时器
|
// },3000)
|
this.getLists();
|
// this.startPolling();
|
// this.dsq()
|
} else {
|
clearInterval(this.timer); // 在组件销毁前清除定时器
|
this.dsq();
|
}
|
this.$forceUpdate(); // 强制Vue重新渲染
|
|
// this.getList()
|
// if(e.key !=this.actives){
|
|
// }else{
|
// this.actives = e.key;
|
// this.dsq()
|
// }
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.input_box {
|
text-align: right;
|
font-size: 16px;
|
|
padding: 0 4px;
|
}
|
/deep/ .van-dropdown-menu {
|
width: 120px;
|
margin-right: 10px;
|
.van-dropdown-menu__title--active,
|
.van-dropdown-item__option--active,
|
.van-dropdown-item__option--active .van-dropdown-item__icon,
|
.van-dropdown-item {
|
color: #1989fa !important;
|
}
|
|
.van-dropdown-item--active {
|
color: #1989fa !important;
|
font-weight: bold;
|
}
|
}
|
|
.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;
|
}
|
|
.states-red {
|
background: rgba(208, 75, 100, 0.15);
|
color: rgb(208, 75, 100);
|
}
|
}
|
|
.sport-content-title2 {
|
font-style: normal;
|
font-weight: 400;
|
font-size: 0.29333rem;
|
color: #8c9fad;
|
// text-align: left;
|
}
|
.sport-content-text {
|
margin-top: 5px;
|
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 {
|
margin-top: 5px;
|
// 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;
|
}
|
}
|
.hang {
|
display: flex;
|
justify-content: space-between;
|
.left {
|
font-style: normal;
|
font-weight: 500;
|
font-size: 0.34667rem;
|
color: #8c9fad;
|
}
|
.right {
|
font-style: normal;
|
font-weight: 500;
|
font-size: 0.34667rem;
|
color: #14181f;
|
text-align: right;
|
}
|
}
|
</style>
|
