From 92dd4aaaa7fb67c4d65df18e0e69cbc6775575d3 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Wed, 23 Apr 2025 19:19:13 +0800
Subject: [PATCH] feat 沙特添加石油黄金
---
src/page/list/detail.vue | 381 ++++++++++++++++++++++++++++-------------------------
1 files changed, 202 insertions(+), 179 deletions(-)
diff --git a/src/page/list/detail.vue b/src/page/list/detail.vue
index 5da29fb..c5f7d07 100644
--- a/src/page/list/detail.vue
+++ b/src/page/list/detail.vue
@@ -1,5 +1,7 @@
<template>
- <div :class="`wrapper ${$state.theme === 'red' ? 'red-theme' : 'black-theme'}`">
+ <div
+ :class="`wrapper ${$state.theme === 'red' ? 'red-theme' : 'black-theme'}`"
+ >
<!-- <div class="header">
<mt-header :title="detail.name+' ('+detail.code+')'">
<router-link to="/list" slot="left">
@@ -23,56 +25,102 @@
</div>
</div>
</div>
- <div class="page-part detail-part ">
- <!-- 明细 -->
- <div class="clearfix">
- <div class="pull-left col-xs-7">
- <p :class="detail.nowPrice - detail.preclose_px <0?'price green':'price red'">
- {{detail.nowPrice}}</p>
- <p :class="detail.nowPrice - detail.preclose_px <0?'gain green':'gain red'">
- {{detail.hcrate}}%</p>
- </div>
- <div class="pull-right col-xs-5">
- <ul class="price-detail text-center">
- <li>
- <p class="title">昨收</p>
- <p :class="detail.nowPrice - detail.preclose_px <0?'number green':'number red'">
- {{detail.preclose_px}}</p>
- </li>
- <li>
- <p class="title">今开</p>
- <p :class="detail.nowPrice - detail.preclose_px <0?'number green':'number red'">
- {{detail.open_px}}</p>
- </li>
- <li>
- <p class="title">最高</p>
- <p :class="detail.nowPrice - detail.preclose_px <0?'number green':'number red'">
- {{detail.today_max}}</p>
- </li>
- <li>
- <p class="title">最低</p>
- <p :class="detail.nowPrice - detail.preclose_px <0?'number green':'number red'">
- {{detail.today_min}}</p>
- </li>
- </ul>
- </div>
- </div>
- <div class="row detail-list">
- <div class="col-xs-4">
- <p class="title">成交量</p>
- <p class="number">{{(Number(detail.business_amount)/100/10000).toFixed(2)}}万</p>
- </div>
- <div class="col-xs-6">
- <p class="title">成交额</p>
- <p class="number">{{(Number(detail.business_balance)/100000000).toFixed(2)}}亿</p>
- </div>
- </div>
- </div>
+ <div class="page-part detail-part ">
+ <!-- 明细 -->
+ <div class="clearfix">
+ <div class="pull-left col-xs-7">
+ <p
+ :class="
+ detail.nowPrice - detail.preclose_px < 0
+ ? 'price green'
+ : 'price red'
+ "
+ >
+ {{ detail.nowPrice }}
+ </p>
+ <p
+ :class="
+ detail.nowPrice - detail.preclose_px < 0
+ ? 'gain green'
+ : 'gain red'
+ "
+ >
+ {{ detail.hcrate }}%
+ </p>
+ </div>
+ <div class="pull-right col-xs-5">
+ <ul class="price-detail text-center">
+ <li>
+ <p class="title">昨收</p>
+ <p
+ :class="
+ detail.nowPrice - detail.preclose_px < 0
+ ? 'number green'
+ : 'number red'
+ "
+ >
+ {{ detail.preclose_px }}
+ </p>
+ </li>
+ <li>
+ <p class="title">今开</p>
+ <p
+ :class="
+ detail.nowPrice - detail.preclose_px < 0
+ ? 'number green'
+ : 'number red'
+ "
+ >
+ {{ detail.open_px }}
+ </p>
+ </li>
+ <li>
+ <p class="title">最高</p>
+ <p
+ :class="
+ detail.nowPrice - detail.preclose_px < 0
+ ? 'number green'
+ : 'number red'
+ "
+ >
+ {{ detail.today_max }}
+ </p>
+ </li>
+ <li>
+ <p class="title">最低</p>
+ <p
+ :class="
+ detail.nowPrice - detail.preclose_px < 0
+ ? 'number green'
+ : 'number red'
+ "
+ >
+ {{ detail.today_min }}
+ </p>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row detail-list">
+ <div class="col-xs-4">
+ <p class="title">成交量</p>
+ <p class="number">
+ {{ (Number(detail.business_amount) / 100 / 10000).toFixed(2) }}万
+ </p>
+ </div>
+ <div class="col-xs-6">
+ <p class="title">成交额</p>
+ <p class="number">
+ {{ (Number(detail.business_balance) / 100000000).toFixed(2) }}亿
+ </p>
+ </div>
+ </div>
+ </div>
<!-- <stockHq /> -->
- <div class="page-part box-part">
- <!-- 图 -->
- <imgBox :code="$route.query.code" :imgList='detail'/>
- </div>
+ <div class="page-part box-part">
+ <!-- 图 -->
+ <imgBox :code="$route.query.code" :imgList="detail" />
+ </div>
<!-- tab -->
<div class="news-tab">
<mt-navbar v-model="news">
@@ -101,90 +149,65 @@
<mt-tab-container v-model="news" :swipeable="true">
<mt-tab-container-item id="tab_0">
<div class="news-content">
- <div
- class="news-item"
- v-for="item of newsContent1"
- :key="item.id"
- >
- <p
- class="news-title"
- style="-webkit-box-orient: vertical;"
- >{{item.title}}</p>
+ <div class="news-item" v-for="item of newsContent1" :key="item.id">
+ <p class="news-title" style="-webkit-box-orient: vertical;">
+ {{ item.title }}
+ </p>
<span class="news-status">
<i class="glyphicon glyphicon-eye-open"></i>
- 浏览量：{{item.views}}
+ 浏览量：{{ item.views }}
</span>
</div>
</div>
</mt-tab-container-item>
<mt-tab-container-item id="tab_1">
<div class="news-content">
- <div
- class="news-item"
- v-for="item of newsContent2"
- :key="item.id"
- >
- <p
- class="news-title"
- style="-webkit-box-orient: vertical;"
- >{{item.title}}</p>
+ <div class="news-item" v-for="item of newsContent2" :key="item.id">
+ <p class="news-title" style="-webkit-box-orient: vertical;">
+ {{ item.title }}
+ </p>
<span class="news-status">
<i class="glyphicon glyphicon-eye-open"></i>
- 浏览量：{{item.views}}
+ 浏览量：{{ item.views }}
</span>
</div>
</div>
</mt-tab-container-item>
<mt-tab-container-item id="tab_2">
<div class="news-content">
- <div
- class="news-item"
- v-for="item of newsContent3"
- :key="item.id"
- >
- <p
- class="news-title"
- style="-webkit-box-orient: vertical;"
- >{{item.title}}</p>
+ <div class="news-item" v-for="item of newsContent3" :key="item.id">
+ <p class="news-title" style="-webkit-box-orient: vertical;">
+ {{ item.title }}
+ </p>
<span class="news-status">
<i class="glyphicon glyphicon-eye-open"></i>
- 浏览量：{{item.views}}
+ 浏览量：{{ item.views }}
</span>
</div>
</div>
</mt-tab-container-item>
<mt-tab-container-item id="tab_3">
<div class="news-content">
- <div
- class="news-item"
- v-for="item of newsContent4"
- :key="item.id"
- >
- <p
- class="news-title"
- style="-webkit-box-orient: vertical;"
- >{{item.title}}</p>
+ <div class="news-item" v-for="item of newsContent4" :key="item.id">
+ <p class="news-title" style="-webkit-box-orient: vertical;">
+ {{ item.title }}
+ </p>
<span class="news-status">
<i class="glyphicon glyphicon-eye-open"></i>
- 浏览量：{{item.views}}
+ 浏览量：{{ item.views }}
</span>
</div>
</div>
</mt-tab-container-item>
<mt-tab-container-item id="tab_4">
<div class="news-content">
- <div
- class="news-item"
- v-for="item of newsContent5"
- :key="item.id"
- >
- <p
- class="news-title"
- style="-webkit-box-orient: vertical;"
- >{{item.title}}</p>
+ <div class="news-item" v-for="item of newsContent5" :key="item.id">
+ <p class="news-title" style="-webkit-box-orient: vertical;">
+ {{ item.title }}
+ </p>
<span class="news-status">
<i class="glyphicon glyphicon-eye-open"></i>
- 浏览量：{{item.views}}
+ 浏览量：{{ item.views }}
</span>
</div>
</div>
@@ -193,15 +216,15 @@
</div>
<div class="btn-list">
<div class="btn btn1" @click="addOptions">
- <img :src="btnIcon1" alt="">
+ <img :src="btnIcon1" alt="" />
自选
</div>
<div class="btn btn2" @click="handleTwoBuyClick">
- <img :src="btnIcon2" alt="">
+ <img :src="btnIcon2" alt="" />
两融交易
</div>
<div class="btn btn3" @click="handleSubBuyClick">
- <img :src="btnIcon3" alt="">
+ <img :src="btnIcon3" alt="" />
分仓交易
</div>
</div>
@@ -214,7 +237,7 @@
import stockHq from "./compontent/stock/stockHq";
import { Toast } from "mint-ui";
import * as api from "@/axios/api";
-import foot from '@/components/foot/foot'
+import foot from "@/components/foot/foot";
export default {
components: {
@@ -258,23 +281,23 @@
sell2_num: "5100",
sell3_num: "2500",
sell4_num: "40200",
- sell5_num: "11500",
+ sell5_num: "11500"
}, // 详情
buyList: [
{ price: 33.5, price2: 14323.5 },
{ price: 33.5, price2: 14323.5 },
{ price: 33.5, price2: 14323.5 },
{ price: 33.5, price2: 14323.5 },
- { price: 33.5, price2: 14323.5 },
+ { price: 33.5, price2: 14323.5 }
],
isOptionOpt: false, // 是否已经添加自选
timer: null,
loading: false,
// 新闻
- news:'tab_0',
- btnIcon1: require('../../../static/img/detail/zixuan-icon.png'),
- btnIcon2: require('../../../static/img/detail/liangrong-icon.png'),
- btnIcon3: require('../../../static/img/detail/fencang-icon.png'),
+ news: "tab_0",
+ btnIcon1: require("../../../static/img/detail/zixuan-icon.png"),
+ btnIcon2: require("../../../static/img/detail/liangrong-icon.png"),
+ btnIcon3: require("../../../static/img/detail/fencang-icon.png"),
newsContent1: [], // 财经要闻
newsContent2: [], // 经济数据
newsContent3: [], // 全球股市
@@ -293,11 +316,11 @@
clearInterval(this.timer);
},
mounted() {
- this.getNewsList(1)
- this.getNewsList(2)
- this.getNewsList(3)
- this.getNewsList(4)
- this.getNewsList(5)
+ this.getNewsList(1);
+ this.getNewsList(2);
+ this.getNewsList(3);
+ this.getNewsList(4);
+ this.getNewsList(5);
this.getDetail();
if (this.$store.state.userInfo.phone) {
// 判断是否登录
@@ -311,42 +334,42 @@
// 两融交易
handleTwoBuyClick() {
this.$router.push({
- path: '/twoBuy',
+ path: "/twoBuy",
query: {
code: this.detail.code
}
- })
+ });
},
// 分仓交易
handleSubBuyClick() {
this.$router.push({
- path: '/subWarehouseBuy',
+ path: "/subWarehouseBuy",
query: {
code: this.detail.code
}
- })
+ });
},
toSearch() {
this.$router.push("/searchlist");
},
async getNewsList(type) {
let data = await api.queryNewsList(type);
- console.log('xinwen:',data)
- switch(type) {
+ console.log("xinwen:", data);
+ switch (type) {
case 1:
- this.newsContent1 = data.data.list
+ this.newsContent1 = data.data.list;
break;
case 2:
- this.newsContent2 = data.data.list
+ this.newsContent2 = data.data.list;
break;
case 3:
- this.newsContent3 = data.data.list
+ this.newsContent3 = data.data.list;
break;
case 4:
- this.newsContent4 = data.data.list
+ this.newsContent4 = data.data.list;
break;
case 5:
- this.newsContent5 = data.data.list
+ this.newsContent5 = data.data.list;
break;
}
},
@@ -369,7 +392,7 @@
},
async getOpation() {
let opts = {
- code: this.$route.query.code,
+ code: this.$route.query.code
};
let data = await api.isOption(opts);
if (data.status === 0) {
@@ -381,8 +404,8 @@
},
async getDetail() {
let opts = {
- code: this.$route.query.code,
- stockType: this.$route.query.stock_type,
+ code: this.$route.query.code || this.$route.query.name,
+ stockType: this.$route.query.stock_type
};
let data = await api.getSingleStock(opts);
this.loading = false;
@@ -424,11 +447,11 @@
name: this.detail.name,
code: this.detail.code,
hcrate: this.detail.hcrate,
- nowPrice: this.detail.nowPrice,
- },
+ nowPrice: this.detail.nowPrice
+ }
});
- },
- },
+ }
+ }
};
</script>
<style lang="less" scoped>
@@ -554,7 +577,7 @@
}
}
}
-.btn-list{
+.btn-list {
display: flex;
align-items: center;
justify-content: space-between;
@@ -564,108 +587,108 @@
position: fixed;
bottom: 0;
background-color: #16171d;
- .btn{
+ .btn {
width: 2.4rem;
height: 0.76rem;
border-radius: 1rem;
display: flex;
justify-content: center;
align-items: center;
- font-size:0.29rem;
- font-family:Microsoft YaHei;
- font-weight:400;
- color:rgba(255,255,255,1);
- img{
+ font-size: 0.29rem;
+ font-family: Microsoft YaHei;
+ font-weight: 400;
+ color: rgba(255, 255, 255, 1);
+ img {
width: 0.28rem;
margin-right: 0.1rem;
}
- &.btn1{
+ &.btn1 {
width: 1.85rem;
- background-color: #D63535;
+ background-color: #d63535;
}
- &.btn2{
- background-color: #7266BA;
+ &.btn2 {
+ background-color: #7266ba;
}
- &.btn3{
- background-color: #148EB4;
+ &.btn3 {
+ background-color: #148eb4;
}
}
}
-.red-theme{
- .exchangeData{
+.red-theme {
+ .exchangeData {
background-color: white;
- .overall-item{
- h4{
+ .overall-item {
+ h4 {
color: #656565;
}
- span{
+ span {
color: #212121;
}
}
}
- .news-tab{
- /deep/.mint-navbar{
+ .news-tab {
+ /deep/.mint-navbar {
background: white;
- .mint-tab-item{
+ .mint-tab-item {
background: white;
- .mint-tab-item-label{
+ .mint-tab-item-label {
color: #000000;
}
- &.is-selected{
- .mint-tab-item-label{
- color: #BB1815;
- .tab-name{
- &::after{
- background-color: #BB1815;
+ &.is-selected {
+ .mint-tab-item-label {
+ color: #bb1815;
+ .tab-name {
+ &::after {
+ background-color: #bb1815;
}
}
}
}
}
}
- .mint-tab-container{
+ .mint-tab-container {
background: white;
- .news-title{
+ .news-title {
color: #656565;
}
- .news-status{
- border-color: #DFDFDF;
+ .news-status {
+ border-color: #dfdfdf;
}
}
}
- .btn-list{
+ .btn-list {
background-color: #e9e9e9;
- .btn{
- &.btn1{
- background-color: #D63535;
+ .btn {
+ &.btn1 {
+ background-color: #d63535;
}
- &.btn2{
- background-color: #7266BA;
+ &.btn2 {
+ background-color: #7266ba;
}
- &.btn3{
- background-color: #138EB4;
+ &.btn3 {
+ background-color: #138eb4;
}
}
}
}
-.flex{
+.flex {
display: flex;
}
-.justify-between{
+.justify-between {
justify-content: space-between;
}
-.flex-wrap{
+.flex-wrap {
flex-wrap: wrap;
}
-.align-center{
+.align-center {
align-items: center;
}
-.detailName{
+.detailName {
font-size: 0.48rem;
color: #000;
font-weight: 700;
}
-.detailCode{
+.detailCode {
font-size: 0.16rem;
color: #bbb;
}
--
Gitblit v1.9.3