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>
@@ -219,6 +226,7 @@
        newsContent1:[],
        newsContent2:[],
        newsContent3:[],
        newsContent4: [],
      };
    },
    methods: {
@@ -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 {
@@ -635,9 +645,11 @@
   /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;
@@ -649,30 +661,31 @@
       bottom: -.25rem;
     }
  }

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

  .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{
    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{
    color: #999;
    margin-bottom: 0.15rem;
  }

  .titContent{
    position: relative;
    width: 100%;
@@ -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>