From a9d85817fa59d6ebe5e50fe45633a274196e91f7 Mon Sep 17 00:00:00 2001
From: DESKTOP-CVS3R96\我恁爹 <11>
Date: Thu, 10 Nov 2022 01:37:40 +0800
Subject: [PATCH] 11.10
---
src/page/home/home.vue | 43 ++++++-
src/page/kline/index.vue | 221 +++++++++++++++++++++++++++++++++-----------
2 files changed, 199 insertions(+), 65 deletions(-)
diff --git a/src/page/home/home.vue b/src/page/home/home.vue
index f455061..2f39bad 100644
--- a/src/page/home/home.vue
+++ b/src/page/home/home.vue
@@ -109,7 +109,7 @@
</div>
</van-swipe-item> -->
<van-swipe-item v-for="(item, index) in proData" :key="index">
- <div class="item_cont" :class="idx!=2?'item_conts':''" v-for="(item2, idx) in proData[currentIndex]" :key="idx">
+ <div class="item_cont" :class="idx!=2?'item_conts':''" v-for="(item2, idx) in proData[currentIndex]" :key="idx" @click="goDetail(item2)">
<div class="top_fo">
<div class="title">
{{ item2.name }}
@@ -126,8 +126,8 @@
<div class="bottom_fo">
<div class="title">
<span class="numberid" style="margin-right: 0.12rem;">{{ item2.symbol }}</span>
- <div v-for="(items,index) in item2.pnum.slice(1, 2)">
- <img v-if="index<3" :src="Huo" alt style="width: 0.4rem;height: 0.4rem;" />
+ <div v-for="(items,indexs) in Number(item2.pnum.slice(0, 1))" style="width: 0.4rem;height: 0.4rem;display: flex;">
+ <img v-if="indexs<3" :src="Huo" alt style="width: 0.4rem;height: 0.4rem;" />
</div>
</div>
@@ -139,7 +139,7 @@
<!-- <span class="aikesi">100X</span> -->
<el-tag key="100X"
style="width: 80%;text-align: center;height: 0.45rem!important;line-height: 0.45rem!important;">
- {{ getNum1(item2.random) + 'X' }}
+ {{ getNum1(Number(item2.pnum.slice(0, 1))) + 'X' }}
</el-tag>
</div>
</div>
@@ -304,18 +304,35 @@
//123随机
var num = Math.floor(Math.random() * 3 + 1);
return num;
-
-
},
//构造随机数列表 50 100 200
getNum1(num) {
-
if (num == 1) {
return 50;
} else if (num == 2) {
return 100;
- } else if (num == 3) {
+ } else if (num >= 3) {
return 200;
+ }
+ },
+ goDetail(item) {
+ this.$router.push({
+ path: "/kline",
+ query: {
+ name: item.name,
+ stockplate: item.stock_plate,
+ code: item.symbol.substring(2, item.symbol.length),
+ type: item.stocktype,
+ sok: 0,
+ if_zhishu: '0',
+ }
+ });
+ },
+ filterSH(val) {
+ if (val === "sh") {
+ return 1;
+ } else if (val === "bj" || val === "sz") {
+ return 0;
}
},
goJy(index){
@@ -775,6 +792,9 @@
.numberid {
font-size: 0.28rem;
+ display: flex;
+
+ line-height: 0.5rem;
}
.numbers {
@@ -787,7 +807,8 @@
.point {
font-size: 0.28rem;
-
+ height: 0.5rem;
+ line-height: 0.5rem;
}
.percentage {
@@ -796,6 +817,10 @@
display: flex;
align-items: center;
}
+ .percentage span{
+ height: 0.5rem;
+ line-height: 0.5rem;
+ }
}
.top_fo {
diff --git a/src/page/kline/index.vue b/src/page/kline/index.vue
index 95c396c..668e5ad 100644
--- a/src/page/kline/index.vue
+++ b/src/page/kline/index.vue
@@ -18,25 +18,21 @@
<div class="real_time_detail">
<div class="left_now_price">
<div class="top_now">
- <span
- :class="singDetails.nowPrice - singDetails.preclose_px <0?'price green':'price red'"
- >{{ singDetails.nowPrice }}</span>
+ <span :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'price green' : 'price red'">{{
+ singDetails.nowPrice
+ }}</span>
</div>
<div class="bottom_now">
<div>
<span v-if="singDetails.nowPrice == 0">-</span>
- <span
- v-else
- >{{singDetails.nowPrice-singDetails.preclose_px>0 ?'+':''}}{{(singDetails.nowPrice-singDetails.preclose_px).toFixed(2)}}</span>
+ <span v-else>{{ singDetails.nowPrice - singDetails.preclose_px > 0
+ ? '+' : ''
+ }}{{ (singDetails.nowPrice - singDetails.preclose_px).toFixed(2) }}</span>
</div>
- <div
- class="tew"
- :class="singDetails.nowPrice - singDetails.preclose_px <0?'number green':'number red'"
- >
+ <div class="tew" :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">
<span v-if="singDetails.nowPrice == 0">-</span>
- <span
- v-else
- >({{singDetails.nowPrice-singDetails.preclose_px>0 ?'+':''}} {{singDetails.hcrate?singDetails.hcrate:'0'}}%)</span>
+ <span v-else>({{ singDetails.nowPrice - singDetails.preclose_px > 0 ? '+' : '' }}
+ {{ singDetails.hcrate ? singDetails.hcrate : '0' }}%)</span>
</div>
</div>
</div>
@@ -44,29 +40,29 @@
<div class="tops">
<div class="lefts topes">
<span class="titles">{{ '今开' }}</span>
- <span
- :class="singDetails.nowPrice - singDetails.preclose_px <0?'number green':'number red'"
- >{{ singDetails.open_px }}</span>
+ <span :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
+ singDetails.open_px
+ }}</span>
</div>
<div class="rights topes">
<span class="titles">{{ '最高' }}</span>
- <span
- :class="singDetails.nowPrice - singDetails.preclose_px <0?'number green':'number red'"
- >{{ singDetails.today_max }}</span>
+ <span :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
+ singDetails.today_max
+ }}</span>
</div>
</div>
<div class="bottoms">
<div class="lefts bots">
<span class="titles">{{ '昨收' }}</span>
- <span
- :class="singDetails.nowPrice - singDetails.preclose_px <0?'number green':'number red'"
- >{{ singDetails.preclose_px }}</span>
+ <span :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
+ singDetails.preclose_px
+ }}</span>
</div>
<div class="rights bots">
<span class="titles">{{ '最低' }}</span>
- <span
- :class="singDetails.nowPrice - singDetails.preclose_px <0?'number green':'number red'"
- >{{ singDetails.today_min }}</span>
+ <span :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
+ singDetails.today_min
+ }}</span>
</div>
</div>
</div>
@@ -159,6 +155,8 @@
</div>
<div class="right_sell1">
<span>{{ singDetails.buy4_num }}</span>
+
+
</div>
</div>
<div class="ets">
@@ -177,15 +175,15 @@
<span>{{ '简介' }}</span>
</div>
<div class="jet">
- <span>国家体育总局等八部门日前共同印发了《户外运动产业发展规划(2022-2025年)》。《规划》提出，到2025年，户外运动产业高质量发展成效显著，基本形成供给与需求有效对接、产业与生态协调发展、产品与服务品牌彰显、业态与模式持续创新的发展格局。户外运动场地设施持续增加，普及程度大幅提升，参与人数不断增长，户外运动产业总规模超过3万亿元。</span>
+ <span>{{ jianjie }}</span>
</div>
</div>
<div class="border_bottom"></div>
</div>
<div class="btns">
<div class="lefts">
- <div class="left_ca" @click="handleSc()">
- <img src="../../assets/img/meishoucang.png" alt v-if="scFlag === false" />
+ <div class="left_ca" @click="option()">
+ <img src="../../assets/img/meishoucang.png" alt v-if="isOptionOpt === false" />
<img src="../../assets/img/shoucangle.png" alt v-else />
</div>
<div class="right_xx" @click="handleJj()">
@@ -225,7 +223,10 @@
kLineDetails: {}, // K线图详情数据
singDetails: {},
scFlag: false,
- acseFlag: false
+ acseFlag: false,
+ jianjie: "",
+ optionBtn:false,
+ isOptionOpt:false,
};
},
components: {
@@ -234,10 +235,49 @@
created() {
const { query } = this.$route;
this.kLineDetails = query;
+ this.getOpation();
// this.$Lazyload();
this.getSingDetails();
},
methods: {
+ async option() {
+ if(this.optionBtn){
+ return
+ };
+ this.optionBtn = true;
+ if (this.isOptionOpt) {
+ let data = await api.delOption({ code: this.kLineDetails.code });
+ if (data.status === 0) {
+ this.getOpation();
+ this.optionBtn = false;
+ } else {
+ this.optionBtn = false;
+ console.log(data.msg);
+
+ }
+ } else {
+ let data = await api.addOption({ code: this.kLineDetails.code });
+ if (data.status === 0) {
+ this.getOpation();
+ this.optionBtn = false;
+ } else {
+ console.log(data.msg);
+ this.optionBtn = false;
+ }
+ }
+ },
+ async getOpation () {
+ let opts = {
+ code: this.$route.query.code
+ }
+ let data = await api.isOption(opts)
+ if (data.status === 0) {
+ // 0 --> 未添加
+ this.isOptionOpt = false
+ } else {
+ this.isOptionOpt = true
+ }
+ },
async getSingDetails() {
let opts = {
code: this.kLineDetails.code,
@@ -246,6 +286,11 @@
await api.getSingleStock(opts).then(res => {
if (res.status === 0) {
this.singDetails = res.data.stock;
+ if (res.data.introduction) {
+ this.jianjie = res.data.introduction.result.data.fareArea;
+ } else {
+ this.jianjie = res.data.indexintroduction;
+ }
console.log(this.singDetails);
}
});
@@ -271,46 +316,55 @@
width: 100%;
height: calc(100% - 1.7rem);
overflow: auto;
- > .content {
+
+ >.content {
width: 100%;
height: 100%;
position: relative;
}
}
+
.detail_title {
width: 100%;
height: 3.2rem;
padding: 0 0.3rem;
background: #fff;
+
.top_back {
width: 100%;
height: 1.2rem;
display: flex;
align-items: center;
+
.left_back {
width: 0.8rem;
height: 80%;
display: flex;
align-items: center;
- > img {
+
+ >img {
margin-top: 0.2rem;
width: 0.6rem;
height: 0.6rem;
}
}
+
.right_title {
width: 3rem;
height: 80%;
+
.t_t {
width: 100%;
height: 70%;
display: flex;
align-items: center;
font-size: 0.4615rem;
+
span {
font-weight: 600;
}
}
+
.b_t {
width: 100%;
height: 30%;
@@ -322,20 +376,24 @@
}
}
}
+
.k_line_detail {
width: 100%;
height: 8.3rem;
background: #fff;
border-radius: 0 0 0.3rem 0.3rem;
}
+
.real_time_detail {
width: 100%;
height: 2rem;
display: flex;
justify-content: space-between;
+
.left_now_price {
width: 35%;
height: 100%;
+
.top_now {
width: 100%;
height: 65%;
@@ -344,28 +402,34 @@
align-items: center;
padding-left: 0.1rem;
padding-top: 0.3rem;
+
span {
font-weight: 500;
}
}
+
.bottom_now {
width: 100%;
height: 35%;
display: flex;
padding-left: 0.1rem;
}
+
.tew {
margin-left: 0.2rem;
}
}
+
.right_ets {
width: 65%;
height: 100%;
- > div {
+
+ >div {
width: 100%;
height: 50%;
display: flex;
- > div {
+
+ >div {
width: 50%;
height: 100%;
display: flex;
@@ -375,21 +439,25 @@
}
}
}
+
.topes {
span {
display: inline-block;
padding-top: 0.6rem;
}
}
+
.bots {
span {
display: inline-block;
padding-top: 0.2rem;
}
}
+
.titles {
color: rgb(159, 159, 159);
}
+
.border_bottom {
width: 100%;
height: 0.05rem;
@@ -397,31 +465,37 @@
position: absolute;
top: 3rem;
}
+
.priect_top_bottom {
width: 100%;
background: #fff;
padding: 0.3rem 0.3rem;
margin-top: 0.2rem;
border-radius: 0.3rem 0.3rem 0 0;
+
.t_title {
width: 100%;
height: 15%;
font-size: 0.4546rem;
margin-top: 0.2rem;
+
span {
font-weight: 800;
}
}
+
.charts {
width: 100%;
height: 85%;
display: flex;
justify-content: space-between;
margin-top: 0.6rem;
- > div {
+
+ >div {
width: 49%;
height: 100%;
}
+
.t_ma {
width: 100%;
height: 0.3rem;
@@ -431,40 +505,49 @@
}
}
}
+
.ets {
width: 100%;
height: 0.5rem;
display: flex;
margin-top: 0.08rem;
- > div {
+
+ >div {
width: 50%;
height: 100%;
display: flex;
align-items: center;
}
+
.right_sell1 {
justify-content: flex-end;
}
+
span {
font-weight: 600;
}
}
+
.left_s {
color: #028f52;
}
+
.right_h {
color: #d50000;
}
+
.ob_detail {
width: 100%;
height: 10rem;
background: #fff;
margin-bottom: 1.2821rem;
margin-top: 0.3rem;
+
.ob_content {
width: 100%;
height: 100%;
padding: 0 0.3rem;
+
.ob_title {
width: 100%;
height: 1rem;
@@ -472,17 +555,20 @@
align-items: center;
font-size: 0.5128rem;
}
+
.details {
width: 100%;
height: 1rem;
display: flex;
font-size: 0.3846rem;
+
.left_details {
width: 40%;
height: 100%;
display: flex;
align-items: center;
}
+
.right_details {
width: 60%;
height: 100%;
@@ -493,6 +579,7 @@
}
}
}
+
.btns {
width: 100%;
height: 1.7rem;
@@ -502,37 +589,44 @@
display: flex;
align-items: center;
justify-content: center;
+
.lefts {
width: 25%;
height: 70%;
display: flex;
align-items: center;
- > div {
+
+ >div {
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
+
img {
width: 0.6rem;
height: 0.6rem;
}
}
}
+
.rights {
width: 70%;
height: 70%;
display: flex;
align-items: center;
justify-content: space-around;
- > div {
+
+ >div {
border-radius: 0.15rem;
}
+
.buy_btn {
width: 45%;
height: 100%;
background: rgb(225, 59, 69);
color: #fff;
+
.top_buy {
width: 100%;
height: 45%;
@@ -540,6 +634,7 @@
justify-content: center;
align-items: flex-end;
}
+
.bottom_buy {
width: 100%;
height: 55%;
@@ -550,11 +645,13 @@
padding: 0.1rem 0 0 0;
}
}
+
.sell_btn {
width: 45%;
height: 100%;
background: rgb(68, 155, 84);
color: #fff;
+
.top_sell {
width: 100%;
height: 45%;
@@ -562,6 +659,7 @@
justify-content: center;
align-items: flex-end;
}
+
.bottom_sell {
width: 100%;
height: 55%;
@@ -574,6 +672,7 @@
}
}
}
+
.jianjie {
width: 100%;
height: 5rem;
@@ -582,45 +681,55 @@
border-radius: 0.3rem 0.3rem 0 0;
margin-bottom: 1.7rem;
padding: 0 0.3rem;
+
.top_jj {
width: 100%;
height: 1.3rem;
display: flex;
align-items: center;
font-size: 0.4546rem;
+
span {
font-weight: 800;
}
}
+
.jet {
width: 100%;
+
span {
line-height: 0.5rem;
}
}
}
-@-webkit-keyframes zy{
- 10% {
- transform: rotate(15deg);
- }
- 20% {
- transform: rotate(-10deg);
- }
- 30% {
- transform: rotate(5deg);
- }
- 40% {
- transform: rotate(-5deg);
- }
- 50%,100% {
- transform: rotate(0deg);
- }
+
+ @-webkit-keyframes zy{
+ 10% {
+ transform: rotate(15deg);
+ }
+
+ 20% {
+ transform: rotate(-10deg);
+ }
+
+ 30% {
+ transform: rotate(5deg);
+ }
+
+ 40% {
+ transform: rotate(-5deg);
+ }
+
+ 50%,
+ 100% {
+ transform: rotate(0deg);
+ }
}
.isjj {
animation: zy 2.5s .15s linear infinite;
- animation: zy 2.5s .15s linear infinite;
- animation: zy 2.5s .15s linear infinite;
- animation: zy 2.5s .15s linear infinite;
+ animation: zy 2.5s .15s linear infinite;
+ animation: zy 2.5s .15s linear infinite;
+ animation: zy 2.5s .15s linear infinite;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3