111

flowstocktrading

2022-11-02 d37bcf2111e02b806f961614c5a87deba4283aba

 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>