111

flowstocktrading

2022-11-02 d37bcf2111e02b806f961614c5a87deba4283aba

 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>