111

flowstocktrading

2022-11-02 d37bcf2111e02b806f961614c5a87deba4283aba

111

 package.json

@@ -18,6 +18,7 @@
    "clipboard": "^2.0.4",
    "echarts": "^4.5.0",
    "element-ui": "^2.13.0",
    "express": "^4.18.2",
    "hqchart": "^1.1.8763",
    "jquery": "^3.4.1",
    "js-md5": "^0.7.3",

 src/App.vue

@@ -83,7 +83,8 @@
    height: 1rem;
    /deep/.mint-header {
      height: 100%;
      background-color: rgba(20, 45, 55, 0.3);
      background-color: #16171d;
      // background-color: rgba(20, 45, 55, 0.3);
      .is-left {
        .mintui {
          font-size: 20px;
@@ -119,7 +120,8 @@
  }
  &.black-theme {
    // background: #16171d;
    background: rgb(14, 14, 15);
    // background: rgb(14, 14, 15);
    background: rgb(33, 33, 43);
  }
}
.search-right {

 src/page/home/components/GoLogin.vue

@@ -37,10 +37,12 @@
    > div {
        width: 90%;
        height: 100%;
        background: rgb(28,28,30);
        background: rgba(39,39,51,0.85);
        border-radius: .2228rem;
        display: flex;
        align-items: center;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    .left_mess {
        width: 70%;
@@ -71,4 +73,4 @@
    }
}

</style>
</style>

 src/page/home/home.vue

@@ -98,32 +98,39 @@
          </div>
        </div>
      </div>
      <van-skeleton title :row="18" :loading="loading" />
      <div class="news-tab">
        <mt-navbar v-model="news">
          <mt-tab-item id="tab_0">
            <span class="tab-name">新闻</span>
          </mt-tab-item>
          <mt-tab-item id="tab_1">
            <span class="tab-name">经济</span>
            <span class="tab-name">7×24</span>
          </mt-tab-item>
          <mt-tab-item id="tab_2">
            <span class="tab-name">全球</span>
            <span class="tab-name">经济</span>
          </mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="news" :swipeable="true" style="padding-top: 0.5rem;">
          <mt-tab-container-item id="tab_0">
            <div class="news-content">
              <div class="item-out" v-for="(item,inde) in newsContent1" :key="inde" @click="$router.push({path:'/newPage',query:{
              <div class="" v-for="(item,inde) in newsContent1" :key="inde" @click="$router.push({path:'/newPage',query:{
                listid:item.id
              }})">
                <div class="item-times">{{item.addTime | gettime}}</div>
                <div class="titContent" style="-webkit-box-orient: vertical;">{{item.title}}</div>
                <div class="titContent" style="-webkit-box-orient: vertical;font-size: 0.38rem;margin-top: 0.2rem;">
                  {{item.title}}
                </div>
                <div class="block-out">
                  <div class="blocks">{{item.sourceName}}</div>
                </div>
                <div class="neitu"><img :src="item.imgurl" /></div>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="tab_1">
            <div class="news-content">
              <div class="item-out" v-for="(item,inde) in newsContent2" :key="inde" @click="$router.push('/newPage')">
              <div class="item-out" v-for="(item,inde) in newsContent4" :key="inde" @click="$router.push('/newPage')">
                <div class="item-times">{{item.addTime | gettime}}</div>
                <div class="titContent" style="-webkit-box-orient: vertical;">{{item.title}}</div>
              </div>
@@ -131,7 +138,7 @@
          </mt-tab-container-item>
          <mt-tab-container-item id="tab_2">
            <div class="news-content">
              <div class="item-out" v-for="(item,inde) in newsContent3" :key="inde">
              <div class="item-out" v-for="(item,inde) in newsContent2" :key="inde">
                <div class="item-times">{{item.addTime | gettime}}</div>
                <div class="titContent" style="-webkit-box-orient: vertical;">{{item.title}}</div>
              </div>
@@ -216,16 +223,17 @@
          }
        ],
        news: "tab_0",
        newsContent1:[],
        newsContent2:[],
        newsContent3:[],
        newsContent1: [],
        newsContent2: [],
        newsContent3: [],
        newsContent4: [],
      };
    },
    methods: {
      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
            break;
@@ -262,12 +270,12 @@
        this.loading = !this.loading;
      }
    },
    filters:{
    filters: {
      gettime(time) {
        if (!time) {
          return "";
        }
        var nd = new Date(time );
        var nd = new Date(time);
        var y = nd.getFullYear();
        var mm = nd.getMonth() + 1;
        var d = nd.getDate();
@@ -299,7 +307,7 @@
    mounted() {
      this.getNewsList(1);
      this.getNewsList(2);
      this.getNewsList(3);
      this.getNewsList(4);
      setTimeout(() => {
        this.loading = false
      }, 1000)
@@ -310,7 +318,8 @@
  .wrapper {
    width: 100%;
    height: 100%;
    background: #010101;
    background: rgb(33, 33, 43);
    // background: #010101;
    // overflow: hidden;
    padding-top: .3128rem;

@@ -428,7 +437,7 @@
      >.navs_content {
        width: 95%;
        height: 100%;
        background: rgb(28, 28, 30);
        background: #272733;
        border-radius: 0.2564rem;
        display: flex;

@@ -483,7 +492,7 @@
      .fo_content {
        width: 95%;
        height: 100%;
        background: rgb(28, 28, 30);
        background: #272733;
        padding: 0 0.2564rem;
        border-radius: 0.2564rem;

@@ -613,17 +622,18 @@
    right: 0;
    margin: auto;
    margin-top: 0.2rem;
    background: #1c1c1e;
    background: #272733;
    border-radius: 0.4rem 0.4rem 0 0;
    padding-top: 0.3rem;

    /deep/.mint-navbar {
      background: #1c1c1e;
      background: #272733;
    }

    /deep/.mint-tab-container {}

    /deep/.mint-tab-item {
      background: #1c1c1e;
      background: #272733;
    }

    /deep/.mint-tab-item-label {
@@ -632,48 +642,51 @@

    }

   /deep/.is-selected .tab-name{
     position: relative;
   }
   /deep/.mint-navbar .mint-tab-item.is-selected {
     border-bottom:none;
   }
   /deep/.is-selected .tab-name:after{
       position: absolute;
       display: block;
       content: '';
       height: .07rem;
       background-color: #1381A4;
       width: 100%;
       left: 0;
       bottom: -.25rem;
     }
    /deep/.is-selected .tab-name {
      position: relative;
    }

    /deep/.mint-navbar .mint-tab-item.is-selected {
      border-bottom: none;
    }

    /deep/.is-selected .tab-name:after {
      position: absolute;
      display: block;
      content: '';
      height: .07rem;
      background-color: #1381A4;
      width: 100%;
      left: 0;
      bottom: -.25rem;
    }
  }
  .news-content{

  .news-content {
    position: relative;
    padding: 0.4rem;
    padding: 0.3rem;
  }
  .item-out{

  .item-out {
    position: relative;
    border-left: 0.01rem solid rgba(200,210,210,0.5);
    border-left: 0.01rem solid rgba(192, 192, 192, 0.1);
    padding: 0 0.25rem 1rem 0.25rem;
  }
  .item-out::before{

  .item-out::before {
    content: "●";
    position: absolute;
    top: -0.1rem;
    left: -0.108rem;
    margin: auto;
    // width: 0.15rem;
    // height: 0.15rem;
    // border-radius: 100%;
    // background-color: #ccc;
  }
  .item-times{

  .item-times {
    color: #999;
    margin-bottom: 0.15rem;
  }
  .titContent{

  .titContent {
    position: relative;
    width: 100%;
    color: #fff;
@@ -684,4 +697,29 @@
    -webkit-line-clamp: 2;
    display: -webkit-box;
  }

  .neitu {
    width: 100%;
    border-radius: 0.05rem;
    margin-top: 0.3rem;
    margin-bottom: 0.8rem;
  }

  .neitu img {
    width: 100%;
    border-radius: 0.05rem;
  }

  .block-out {
    margin-top: 0.2rem;
  }

  .blocks {
    width: auto;
    font-size: 0.32rem;
    padding: 0.08rem 0.15rem 0.08rem 0.15rem;
    display: inline-block;
    border: 0.0513rem solid #41AC75;
    color: #41AC75;
  }
</style>

 src/page/list/list.vue

@@ -1,21 +1,22 @@
<template>
  <div :class="`wrapper ${$state.theme === 'red' ? 'red-theme' : 'black-theme'}`">
  <div :class="`wrapper ${$state.theme === 'red' ? 'red-theme' : 'black-theme'}`" style="background-color: #21212b;">
    <div>
      <div @click="list_type=!list_type">1</div>
    </div>
    <!-- <mt-header v-if="selected == '2'" fixed  title="">
        <router-link to="/" slot="left">
        </router-link>
        <mt-button slot="right" icon="search" @click="toSearch"></mt-button>
    </mt-header> -->
    <mt-navbar class="top-navbar" v-model="selected" :style="selected != '2'?'':''" :fixed="selected != '2'?true:false">
      <!-- <mt-tab-item id="0">全部</mt-tab-item> -->

   <!-- <mt-navbar class="top-navbar" v-model="selected" :style="selected != '2'?'':''" :fixed="selected != '2'?true:false">

      <mt-tab-item v-if="this.$store.state.settingForm.indexDisplay" id="1">指数</mt-tab-item>
      <mt-tab-item v-if="this.$store.state.settingForm.stockDisplay" id="2">沪深</mt-tab-item>
      <mt-tab-item v-if="this.$store.state.settingForm.kcStockDisplay" id="3">科创</mt-tab-item>
      <mt-tab-item v-if="this.$store.state.settingForm.futuresDisplay" id="4">期货</mt-tab-item>
    </mt-navbar>
    <mt-tab-container class="order-list" v-model="selected">
      <!-- <mt-tab-container-item id="0">
          <List0 :changeNavOptions='changeNavOptions'/>
      </mt-tab-container-item> -->
    </mt-navbar> -->
    <!-- <mt-tab-container class="order-list" v-model="selected">
      <mt-tab-container-item v-if="this.$store.state.settingForm.indexDisplay" id="1">
        <List1 :selectedNumber='selected'/>
      </mt-tab-container-item>
@@ -28,8 +29,31 @@
      <mt-tab-container-item v-if="this.$store.state.settingForm.futuresDisplay" id="4">
        <List4 :selectedNumber='selected'/>
      </mt-tab-container-item>
    </mt-tab-container>
    <foot></foot>
    </mt-tab-container> -->
    <!-- <foot></foot> -->
    <div style="background-color: #21212b;">
      <div class="list-title">
        <div class="list-left">代码</div>
        <div class="list-conter">最in假</div>
        <div class="list-right">涨跌幅</div>
      </div>
      <div class="list-content" v-for="item in 20">
        <div class="list-left">
          <div class="taini">
            <span class="circular">●</span>
            太腻<span v-show="list_type" class="minCaption">(太腻)</span>
          </div>
          <div v-show="!list_type" class="list-code">1101</div>
        </div>
        <div class="list-conter">
          <div class="down">30.25</div>
          <div v-show="!list_type" class="list-code">最低:30.25</div>
        </div>
        <div class="list-right">
          <div class="chgTextRed">-0.82%</div>
        </div>
      </div>
    </div>
  </div>
</template>

@@ -51,12 +75,15 @@
    List1,
    List2,
    List3,
    List4
    List4,
  },
  props: {},
  data () {
    return {
      selected: '' // 选中
      selected: '', // 选中
      count: 1000,
      loading: false,
      list_type:false,
    }
  },
  watch: {},
@@ -259,4 +286,75 @@
      }
    }
  }
  .list-title{
    display: flex;
    width: calc(100vw - 32px);
    margin-left: 0;
    margin-right: 0;
    margin: 0 auto;
    color: #8b8896;
    border-bottom: #000 0.01rem solid;
    align-items: center;
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
  }
  .taini{
    color: #f1f0f5;
    font-size: 0.38rem;
  }
  .circular{
    color: rgb(169,169,169);
    font-size: 0.4rem;
  }
  .list-left{
    width: 39.44986%;
  }
  .down{
    font-size: 0.38rem;
        color: #ef534f;
  }
  .list-code{
    padding-left: 0.35rem;
    margin-top: 0.2rem;
    transition: all 0.2s;
  }
  .list-content{
    display: flex;
    width: calc(100vw - 32px);
    margin-left: 0;
    margin-right: 0;
    margin: 0 auto;
    color: #8b8896;
    border-bottom: #000 0.01rem solid;
    align-items: center;
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
    transition: all 0.2s;
    background-color: #21212b;
  }

  .list-conter{
    width: 21.90556%;
    text-align: right;
  }
  .list-right{
    width:  38.64456%;
    text-align: right;
  }
  .chgTextRed{
    float: right;
    font-size: 0.38rem;
    width: 50%;
    border-radius: 2px;
    color: #fff!important;
    text-align: center;
    height: 0.65rem;
    line-height: 0.65rem;
    background-color: #ef534f;
  }
  .minCaption{
    color: #8b8896;
    font-size: 0.16rem;
    transition: all 0.2s;
  }
</style>