备份

flowstocktrading

2022-11-03 2f72cf1a3a30b665619e7fcaa2657e225598554e

 src/page/home/home.vue

@@ -39,6 +39,7 @@
            </div>
          </div>
        </div>

        <!-- 排行入门 -->
        <van-skeleton title :row="2" :loading="loading" />
        <div class="navs" v-if="!loading">
@@ -68,24 +69,28 @@
              <van-swipe class="fo_my-swipe" :autoplay="0" indicator-color="white" @change="onChange">
                <van-swipe-item v-for="(item, index)  in proData" :key="index" style="margin-top: 20px;">
                  <div class="item_cont" v-for="(item2, idx) in proData[currentIndex]" :key="idx">
                    <div class="top_fo">
                      <div class="title">
                    <div class="top_fo" style="width: 80%;">
                      <div class="title" style="width: 30%;">
                        <span>{{ item2.f14 }}</span>
                      </div>
                      <div class="numbers">
                        <span>{{ item2.f2 }}</span>
                      </div>
                      <div class="percentage" :class="item2.f3 > 0 ? 'gree' : 'redd'">
                      <div class="percentage"  :class="item2.f3 > 0 ? 'gree' : 'redd'">

                        <span>{{ item2.f3 > 0 ? `+${item2.f3}%` : `${item2.f3}%` }}</span>
                      </div>
                      <div class="percentage"></div>
                      <div class="percentage" style="width: 38%;position: absolute;right: 0;" :class="item2.f3 > 0 ? 'gree' : 'redd'">
                        <echart :colorType="item2.f3" :ids="idx+'1'+index"></echart>
                      </div>
                    </div>
                    <div class="bottom_fo">
                      <div class="title">
                    <div class="bottom_fo" style="width: 80%;">
                      <div class="title"style="width: 30%;">
                        <span>{{ item2.f12 }}</span>
                        <img :src="Huo" alt style="margin-left: 0.12rem;" />
                      </div>
                      <div class="numbers">
                        <span>{{ '04:59:57' }}</span>
                      <div  class="percentage" >
                      <!-- class="numbers" -->
                        <!-- <span>{{ '04:59:57' }}</span> -->
                        <span>{{ item2.f2 }}</span>
                      </div>
                      <div class="percentage">
                        <span></span>
@@ -98,32 +103,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 +143,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>
@@ -143,14 +155,14 @@
    <!-- tab -->

    <GoToLogin />
    <!-- <foot></foot> -->
  </div>
</template>

<script>
  import foot from "@/components/foot/foot";

  import AllList from "@/page/list/list-all";
  import HomeList from "./components/home-list";
    import Echart from "./components/echart.vue";
  import {
    Toast
  } from "mint-ui";
@@ -172,10 +184,10 @@

  export default {
    components: {
      foot,
      HomeList,
      AllList,
      GoToLogin,
      Echart
    },
    props: {},
    data() {
@@ -216,16 +228,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) {
        
        switch (type) {
          case 1:
            this.newsContent1 = data.data.list
            break;
@@ -244,7 +257,7 @@
        }
      },
      handleBannerClick(ind) {
        console.log(ind);
        // console.log(ind);
      },
      ProcessData() {
        // 把数据分割成三等份
@@ -255,19 +268,19 @@
      onChange(index) {
        this.currentIndex = index;
        this.proData[index].forEach(item => {
          console.log(item.f14);
          // console.log(item.f14);
        });
      },
      handleSearchClick() {
        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 +312,10 @@
    mounted() {
      this.getNewsList(1);
      this.getNewsList(2);
      this.getNewsList(3);
      this.getNewsList(4);



      setTimeout(() => {
        this.loading = false
      }, 1000)
@@ -310,7 +326,8 @@
  .wrapper {
    width: 100%;
    height: 100%;
    background: #010101;
    background: rgb(33, 33, 43);
    // background: #010101;
    // overflow: hidden;
    padding-top: .3128rem;

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

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

@@ -524,7 +541,7 @@
        }

        .title {
          width: 50%;
          width: 20%;
          height: 100%;
          display: flex;
          align-items: center;
@@ -613,17 +630,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 +650,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 +705,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>