0430号修改

lxf

2025-04-30 b4c4556a5eddf6708ec55b07e3edc15b2217842e

 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;
}