11.6

DESKTOP-CVS3R96\我恁爹

2022-11-06 4cf29de231ee3503c48e0c1d098dab795091ff46

 src/page/home/home.vue

@@ -12,7 +12,7 @@
            <div class="search_con" @click="handleSearchClick()">
              <img :src="Searchs" alt />
            </div>
            <div class="service_con">
            <div class="service_con" @click="goOnline()">
              <img :src="Service" alt />
            </div>
          </div>
@@ -21,30 +21,38 @@
      <div class="center_tabs">
        <!-- 顶部轮播图 -->
        <div class="banner_top">
          <van-skeleton title :row="1" :loading="loading" />
          <van-skeleton title :row="3" :loading="loading" />
          <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white" v-if="!loading">
            <van-swipe-item v-for="(item, index) in bannerImgsArr" @click="handleBannerClick(index)" :key="index">
              <img :src="item.img" alt />
            <van-swipe-item v-for="(item, index) in bannerList" @click="handleBannerClick(index)" :key="index">
              <img :src="item.bannerUrl" alt />
            </van-swipe-item>
          </van-swipe>
        </div>
        <!-- 公告 -->
        <div class="announcement">
          <div class="an_content">
        <van-skeleton title :row="1" :loading="loading" />
        <div class="announcement" v-if="!loading&&close">
          <div class="an_content" @click="$router.push('/newGg')">
            <div class="an_left_icon">
              <img :src="Announcement" alt />
            </div>
            <div class="an_right_message">
              <span>{{ announcementMess }}</span>
              {{ artList.artTitle }}
            </div>
          </div>
        </div>

        <!-- 排行入门 -->
        <van-skeleton title :row="2" :loading="loading" />
        <div class="navs" v-if="!loading">

        <div class="navs" v-if="!loading&&close">

          <div class="navs_content">
            <div v-for="(item, index) in navsArr" :key="index">
            <div class="chacha" @click="close=false">
              <div>
                <img :src="clear" />
              </div>
            </div>
            <div v-for="(item, index) in navsArr" :key="index" @click="goJy(index)">
              <div>
                <div class="top_img">
                  <div>
@@ -63,11 +71,11 @@
        <div class="focus_on" v-if="!loading">
          <div class="fo_content">
            <div class="top_title">
              <span>{{ '最多关注' }}</span>
              {{ '最多关注' }}
            </div>
            <div class="fo_banner">
              <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;">
                <!-- <van-swipe-item v-for="(item, index)  in proData" :key="index">
                  <div class="item_cont" v-for="(item2, idx) in proData[currentIndex]" :key="idx">
                    <div class="top_fo" style="width: 80%;">
                      <div class="title" style="width: 30%;">
@@ -78,22 +86,56 @@
                        <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 class="percentage" style="width: 38%;position: absolute;right: 0;top: 5%;height: 80%;" :class="item2.f3 > 0 ? 'gree' : 'redd'">
                         <echart :colorType="item2.f3" :ids="idx+'1'+index"></echart> 
                      </div>
                    </div>
                    <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;" />
                        <span style="margin-right: 0.12rem;">{{ item2.f12 }}</span>
                        <img v-for="item in getHuo()" :src="Huo" alt style="width: 0.4rem;height: 0.4rem;" />
                      </div>
                      <div  class="percentage" >
                      <!-- class="numbers" -->
                        <!-- <span>{{ '04:59:57' }}</span> -->
                      
                        <span>{{ item2.f2 }}</span>
                      </div>
                      <div class="percentage">
                        <span></span>
                      </div>
                    </div>
                  </div>
                </van-swipe-item> -->
                <van-swipe-item v-for="(item, index)  in proData" :key="index">
                  <div class="item_cont" :class="idx!=2?'item_conts':''" v-for="(item2, idx) in proData[currentIndex]" :key="idx">
                    <div class="top_fo">
                      <div class="title">
                        {{ item2.indexName }}
                      </div>
                      <div class="numbers">
                        {{ item2.currentPoint }}
                      </div>
                      <div class="percentage" :class="item2.floatRate > 0 ? 'gree' : 'redd'">
                        <span style="font-weight: 500;">{{ item2.floatRate > 0 ? `+${item2.floatRate}%` :
                            `${item2.floatRate}%`
                        }}</span>
                      </div>
                    </div>
                    <div class="bottom_fo">
                      <div class="title">
                        <span class="numberid" style="margin-right: 0.12rem;">{{ item2.indexCode }}</span>

                        <img v-for="items in item2.random" :src="Huo" alt style="width: 0.4rem;height: 0.4rem;" />
                      </div>
                      <div class="numbers" :class="item2.floatPoint > 0 ? 'gree' : 'redd'">
                        <span class="point">{{ item2.floatPoint > 0 ? `+${item2.floatPoint}%` : `${item2.floatPoint}%`
                        }}</span>
                      </div>
                      <div class="percentage">
                        <!-- <span class="aikesi">100X</span> -->
                        <el-tag key="100X"
                          style="width: 80%;text-align: center;height: 0.45rem!important;line-height: 0.45rem!important;">
                          {{ getNum1(item2.random) + 'X' }}
                        </el-tag>
                      </div>
                    </div>
                  </div>
@@ -110,42 +152,52 @@
            <span class="tab-name">新闻</span>
          </mt-tab-item>
          <mt-tab-item id="tab_1">
            <span class="tab-name">7×24</span>
            <span class="tab-name">经济</span>
          </mt-tab-item>
          <mt-tab-item id="tab_2">
            <span class="tab-name">经济</span>
            <span class="tab-name">7×24</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="" 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="" 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;font-size: 0.38rem;margin-top: 0.2rem;">
                  {{item.title}}
                  {{ item.title }}
                </div>
                <div class="block-out">
                  <div class="blocks">{{item.sourceName}}</div>
                  <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">
          <mt-tab-container-item id="tab_1" >
            <div class="news-content">
              <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 class="item-out" v-for="(item, inde) in newsContent4" :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>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="tab_2">
            <div class="news-content">
              <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 class="item-out" v-for="(item, inde) in newsContent2" :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>
            </div>
          </mt-tab-container-item>
@@ -154,580 +206,738 @@
    </div>
    <!-- tab -->

    <GoToLogin />
    <GoToLogin v-show="isGoTo" />
  </div>
</template>

<script>

  import AllList from "@/page/list/list-all";
  import HomeList from "./components/home-list";
    import Echart from "./components/echart.vue";
  import {
    Toast
  } from "mint-ui";
  import * as api from "@/axios/api";
  import Logo from "@/assets/img/logo.png";
  import Searchs from "@/assets/img/search.png";
  import Service from "@/assets/img/service.png";
  import Announcement from "@/assets/img/announcement.png";
  import Tops from "@/assets/img/tops.png";
  import Rumen from "@/assets/img/rumen.png";
  import Xuexi from "@/assets/img/xuexi.png";
  import Guanyu from "@/assets/img/guanyu.png";
  import Huo from "@/assets/img/huo.png";
  import banner1 from "@/assets/img/b1.png";
  import banner2 from "@/assets/img/b2.png";
  import banner3 from "@/assets/img/b3.png";
  import indexData from "./data.json";
  import GoToLogin from '@/page/home/components/GoLogin.vue';
import AllList from "@/page/list/list-all";
import HomeList from "./components/home-list";
import Echart from "./components/echart.vue";
import {
  Toast
} from "mint-ui";
import * as api from "@/axios/api";
import Logo from "@/assets/img/icon_home_logo.png";
import Searchs from "@/assets/home/search.png";
import Service from "@/assets/home/icon_talk.png";
import clear from "@/assets/home/close.png";
import Announcement from "@/assets/img/black_laba.png";
import Tops from "@/assets/home/1.png";
import Rumen from "@/assets/home/2.png";
import Xuexi from "@/assets/home/3.png";
import Guanyu from "@/assets/home/4.png";
import Huo from "@/assets/home/huo.png";
import banner1 from "@/assets/img/b1.png";
import banner2 from "@/assets/img/b2.png";
import banner3 from "@/assets/img/b3.png";
// import indexData from "./data.json";
import GoToLogin from '@/page/home/components/GoLogin.vue';

  export default {
    components: {
      HomeList,
      AllList,
      GoToLogin,
      Echart
export default {
  components: {
    HomeList,
    AllList,
    GoToLogin,
    Echart
  },
  props: {},
  data() {
    return {
      Logo,
      Searchs,
      Service,
      clear,
      Announcement,
      indexData: [],
      Huo,
      is_login: false,
      loading: true,
      close:true,
      proData: [], // 分割好的数据
      currentIndex: 0,
      bannerImgsArr: [{
        img: banner1
      }, {
        img: banner2
      }, {
        img: banner3
      }],
      announcementMess: "20202/10 - 交易时间安排",
      navsArr: [{
        img: Tops,
        title: "行情"
      },
      {
        img: Rumen,
        title: "持仓"
      },
      {
        img: Xuexi,
        title: "新股"
      },
      {
        img: Guanyu,
        title: "我的"
      }
      ],
      artList:[],
      news: "tab_0",
      newsContent1: [],
      newsContent2: [],
      newsContent3: [],
      newsContent4: [],
      onlineService: "",
      isGoTo: false,
      bannerList:[]
    };
  },
  methods: {

    getHuo() {
      //123随机
      var num = Math.floor(Math.random() * 3 + 1);
      return num;


    },
    props: {},
    data() {
      return {
        Logo,
        Searchs,
        Service,
        Announcement,
        indexData,
        Huo,
        is_login: false,
        loading: true,
        proData: [], // 分割好的数据
        currentIndex: 0,
        bannerImgsArr: [{
          img: banner1
        }, {
          img: banner2
        }, {
          img: banner3
        }],
        announcementMess: "20202/10 - 交易时间安排",
        navsArr: [{
            img: Tops,
            title: "涨跌排行"
          },
          {
            img: Rumen,
            title: "快速入门"
          },
          {
            img: Xuexi,
            title: "进阶学习"
          },
          {
            img: Guanyu,
            title: "关于 Mitrade"
          }
        ],
        news: "tab_0",
        newsContent1: [],
        newsContent2: [],
        newsContent3: [],
        newsContent4: [],
      };
    //构造随机数列表  50 100 200
    getNum1(num) {
    
      if (num == 1) {
        return 50;
      } else if (num == 2) {
        return 100;
      } else if (num == 3) {
        return 200;
      }
    },
    methods: {
      async getNewsList(type) {
        let data = await api.queryNewsList(type);
        
        switch (type) {
    goJy(index){
      switch (index) {
        case 0:
          this.$router.push('/list');
          break;
          case 1:
            this.newsContent1 = data.data.list
            break;
          this.$router.push('/orderlist');
          break;
          case 2:
            this.newsContent2 = data.data.list
            break;
          //this.$router.push();
          break;
          case 3:
            this.newsContent3 = data.data.list
            break;
          case 4:
            this.newsContent4 = data.data.list
            break;
          case 5:
            this.newsContent5 = data.data.list
            break;
        }
      },
      handleBannerClick(ind) {
        // console.log(ind);
      },
      ProcessData() {
        // 把数据分割成三等份
        for (var i = 0; i < this.indexData.data.diff.length; i += 3) {
          this.proData.push(this.indexData.data.diff.slice(i, i + 3));
        }
      },
      onChange(index) {
        this.currentIndex = index;
        this.proData[index].forEach(item => {
          // console.log(item.f14);
        });
      },
      handleSearchClick() {
        this.loading = !this.loading;
          this.$router.push('/user');
          break;
      
        default:
          break;
      }
    },
    filters: {
      gettime(time) {
        if (!time) {
          return "";
        }
        var nd = new Date(time);
        var y = nd.getFullYear();
        var mm = nd.getMonth() + 1;
        var d = nd.getDate();
        var h = nd.getHours();
        var m = nd.getMinutes();
        var c = nd.getSeconds();
        if (mm < 10) {
          mm = "0" + mm;
        }
        if (d < 10) {
          d = "0" + d;
        }
        if (h < 10) {
          h = "0" + h;
        }
        if (m < 10) {
          m = "0" + m;
        }
        if (c < 10) {
          c = "0" + c;
        }
        //17:35:2922-06-2022
        return y + "-" + mm + "-" + d + " " + h + ":" + m + ":" + c;
    async getBanner () {
      // 获取显示的banner
      let result = await api.getBannerByPlat({ platType: 'm' })
      if (result.status === 0) {
        this.bannerList = result.data
      } else {
        Toast(result.msg)
      }
    },
    created() {
      this.ProcessData();
    goOnline() {
      window.location.href = this.onlineService;

    },
    mounted() {
      this.getNewsList(1);
      this.getNewsList(2);
      this.getNewsList(4);
    async getArtList(){
      let data = await api.getArtList();
      if(data.status == 0){
        this.artList = data.data.list[0];
      }
    },
    async getInfoSite() {

      let data = await api.getInfoSite()
      if (data.status === 0) {
        this.onlineService = data.data.onlineService
      } else {
        Toast(data.msg)
      }
    },
    async getStock() {
      let data = await api.getIndexMarket();
      for (var i = 0; i < data.data.length; i += 3) {
        this.proData.push(data.data.slice(i, i + 3));
      }

    },
    async getNewsList(type) {
      let data = await api.queryNewsList(type);

      setTimeout(() => {
        this.loading = false
      }, 1000)
      switch (type) {
        case 1:
          this.newsContent1 = data.data.list
          break;
        case 2:
          this.newsContent2 = data.data.list
          break;
        case 3:
          this.newsContent3 = data.data.list
          break;
        case 4:
          this.newsContent4 = data.data.list
          break;
        case 5:
          this.newsContent5 = data.data.list
          break;
      }
    },
    handleBannerClick(ind) {
      // console.log(ind);
    },
    ProcessData() {
      // 把数据分割成三等份
      // for (var i = 0; i < this.indexData.data.diff.length; i += 3) {
      //   this.proData.push(this.indexData.data.diff.slice(i, i + 3));
      // }
    },
    onChange(index) {
      this.currentIndex = index;
      this.proData[index].forEach(item => {

      });

    },
    handleSearchClick() {
      this.loading = !this.loading;
    }
  };
  },
  filters: {
    gettime(time) {
      if (!time) {
        return "";
      }
      var nd = new Date(time);
      var y = nd.getFullYear();
      var mm = nd.getMonth() + 1;
      var d = nd.getDate();
      var h = nd.getHours();
      var m = nd.getMinutes();
      var c = nd.getSeconds();
      if (mm < 10) {
        mm = "0" + mm;
      }
      if (d < 10) {
        d = "0" + d;
      }
      if (h < 10) {
        h = "0" + h;
      }
      if (m < 10) {
        m = "0" + m;
      }
      if (c < 10) {
        c = "0" + c;
      }
      //17:35:2922-06-2022
      return y + "-" + mm + "-" + d + " " + h + ":" + m + ":" + c;
    }
  },
  created() {
    this.ProcessData();
  },
  mounted() {
    this.getInfoSite();
    this.getNewsList(1);
    this.getNewsList(2);
    this.getNewsList(4);
    this.getStock();
    this.getArtList();
    this.getBanner()

    setInterval(() => {
      this.isGoTo = !this.isGoTo
    }, 10000);

    setTimeout(() => {
      this.loading = false
    }, 2000)

  }
};
</script>
<style lang="less" scoped>
  .wrapper {
.wrapper {
  width: 100%;
  height: 100%;


  padding-top: .3128rem;

  .page_content {
    width: 100%;
    height: 100%;
    background: rgb(33, 33, 43);
    // background: #010101;
    // overflow: hidden;
    padding-top: .3128rem;
  }
}

    .page_content {
.top_logo {
  width: 100%;
  height: 0.7949rem;
  display: flex;

  >div {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .img_logo {
    width: 3.3077rem;
    height: 0.6154rem;
    margin-left: 0.3846rem;

    >img {
      width: 100%;
      height: 100%;
    }
  }

  .top_logo {
    width: 100%;
    height: 0.7949rem;
    display: flex;
  .right_search {
    justify-content: flex-end;

    >div {
      width: 50%;
      height: 100%;
      width: 1.6221rem;
      height: 0.4615rem;
      display: flex;
      align-items: center;
    }

    .img_logo {
      width: 3.3077rem;
      height: 0.6154rem;
      margin-left: 0.3846rem;

      >img {
        width: 100%;
        height: 100%;
      }
    }

    .right_search {
      justify-content: flex-end;
      justify-content: space-between;
      margin-right: 0.4615rem;

      >div {
        width: 1.2821rem;
        width: 0.4615rem;
        height: 0.4615rem;

        >img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.center_tabs {
  width: 100%;
  height: auto;
  margin-top: 0.2308rem;

  >.banner_top {
    width: 100%;

    img {
      width: 100%;
      height: 100%;
    }

    .van-swipe-item {
      height: 3.0615rem;
      padding: 0 0.264rem;
      border-radius: 0.3rem;
    }

    .van-swipe-item img {
      border-radius: 0.3rem;
    }
  }

  >.announcement {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.2rem 0 0.2rem 0;

    >.an_content {
      width: 95%;
      height: 0.559rem;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .an_left_icon {
        width: 5%;
        height: 70%;
        display: flex;
        align-items: center;

        >img {
          width: 100%;
          height: 100%;
        }
      }

      .an_right_message {
        width: 93%;
        height: 100%;
        display: flex;
        align-items: center;
        align-content: center;
        font-size: 0.29rem;
      }
    }
  }

  .navs {
    width: 100%;
    height: 2.6154rem;

    display: flex;
    justify-content: center;


    >.navs_content {
      position: relative;
      overflow: hidden;
      width: 95%;
      height: 100%;
      border-radius: 0.2564rem;
      display: flex;

      >.chacha {
        width: 1rem;
        height: 1rem;
        border-radius: 100%;
        background-color: rgb(210, 210, 212);
        display: flex;
        justify-content: space-between;
        margin-right: 0.4615rem;
        align-items: center;
        position: absolute;
        right: -0.4rem;
        top: -0.4rem;

        >div {
          width: 0.4615rem;
          height: 0.4615rem;
          width: 0.3554rem;
          height: 0.3554rem;
          margin-top: 0.3rem;
          margin-left: 0.15rem;

          >img {
            width: 100%;
            height: 100%;
          }
        }

      }
    }
  }

  .center_tabs {
    width: 100%;
    height: 14.2308rem;
    margin-top: 0.2308rem;

    >.banner_top {
      width: 100%;

      img {
        width: 100%;
        height: 100%;
      }

      .van-swipe-item {
        height: 3.4615rem;
        padding: 0 0.264rem;
      }
    }

    >.announcement {
      width: 100%;
      height: 0.9487rem;
      display: flex;
      justify-content: center;
      align-items: center;

      >.an_content {
        width: 95%;
        height: 0.559rem;
        display: flex;
        justify-content: space-between;

        .an_left_icon {
          width: 5%;
          height: 100%;
          display: flex;
          align-items: center;

          >img {
            width: 80%;
            height: 80%;
          }
        }

        .an_right_message {
          width: 93%;
          height: 100%;
          display: flex;
          align-items: center;
        }
      }
    }

    .navs {
      width: 100%;
      height: 2.6154rem;
      display: flex;
      justify-content: center;

      >.navs_content {
        width: 95%;
        height: 100%;
        background: #272733;
        border-radius: 0.2564rem;
        display: flex;

        >div {
          width: 25%;
          height: 100%;
          display: flex;
          align-items: center;

          >div {
            width: 100%;
            height: 60%;

            >.top_img {
              width: 100%;
              height: 70%;
              display: flex;
              align-items: center;
              justify-content: center;

              >div {
                width: 0.9718rem;
                height: 0.9718rem;

                >img {
                  width: 100%;
                  height: 100%;
                }
              }
            }

            >.bottom_navs {
              width: 100%;
              height: 30%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }

    .focus_on {
      width: 100%;
      height: 6.9231rem;
      margin-top: 0.2564rem;
      display: flex;
      align-items: center;
      justify-content: center;

      .fo_content {
        width: 95%;
        height: 100%;
        background: #272733;
        padding: 0 0.2564rem;
        border-radius: 0.2564rem;

        .top_title {
          width: 100%;
          height: 1.0821rem;
          display: flex;
          font-size: 0.3846rem;
          align-items: center;
        }
      }

      .fo_banner {
        width: 100%;
        height: calc(100% - 1.0821rem - 0.2564rem);
      }
    }

    .item_cont {
      width: 100%;
      height: 1.5385rem;
      border-bottom: 1px solid #ccc;
      position: relative;
      border: none;

      >div {
        width: 100%;
        height: 50%;
      }

      .top_fo,
      .bottom_fo {
        width: 25%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          display: inline-block;
        >div {
          width: 100%;
          height: 60%;

          >.top_img {
            width: 100%;
            height: 70%;
            display: flex;
            align-items: center;
            justify-content: center;

            >div {
              width: 0.9718rem;
              height: 0.9718rem;

              >img {
                width: 100%;
                height: 100%;
              }
            }
          }

          >.bottom_navs {
            width: 100%;
            height: 30%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.33rem;
            margin-top: 0.15rem;
          }
        }

        .title {
          width: 20%;
          height: 100%;
          display: flex;
          align-items: center;
        }

        .numbers {
          width: 20%;
          height: 100%;
          display: flex;
          align-items: center;
        }

        .percentage {
          width: 20%;
          height: 100%;
          display: flex;
          align-items: center;
        }
      }

      .top_fo {
        font-size: 0.3846rem !important;
      }

      .bottom_fo {
        font-size: 0.1846rem;
        color: #999898;
      }

      .percentage.gree {
        color: green;
      }

      .percentage.redd {
        color: red;
      }
    }
  }

  .item_cont::after {
    content: "";
    position: absolute;
    bottom: 0;
    background: rgb(59, 59, 59);
  .focus_on {
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
    height: 6.4231rem;
    margin-top: 0.2564rem;
    display: flex;
    align-items: center;
    justify-content: center;

  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 0.5128rem;
    line-height: 3.8462rem;
    text-align: center;
    overflow: hidden;
  }
    .fo_content {
      width: 95%;
      height: 100%;
      padding: 0 0.2564rem;
      border-radius: 0.2564rem;
      padding-top: 0.2rem;

  .fo_my-swipe .van-swipe-item {
    color: #fff;
    font-size: 0.5128rem;
    line-height: 3.8462rem;
    overflow: hidden;
  }

  .fo_my-swipe {
    width: 100%;
    height: 100%;
  }

  .focus_skeleton {
    margin-top: 1rem;
  }

  .van-skeleton__row,
  .van-skeleton__title {
    height: .7rem;
  }

  .news-tab {
    width: 95%;
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 0.2rem;
    background: #272733;
    border-radius: 0.4rem 0.4rem 0 0;
    padding-top: 0.3rem;

    /deep/.mint-navbar {
      background: #272733;
      .top_title {
        width: 100%;
        height: 0.8821rem;
        display: flex;
        font-size: 0.4rem;
        font-weight: 800;
        align-items: center;
      }
    }

    /deep/.mint-tab-container {}

    /deep/.mint-tab-item {
      background: #272733;
    /deep/.van-swipe__indicators {
      bottom: 0.1rem;
    }

    /deep/.mint-tab-item-label {
      color: #fff;
      font-size: .26rem;

    /deep/.van-swipe__indicator {
      background-color: #2d8cf0 !important;
      opacity: 1;
    }

    /deep/.is-selected .tab-name {
      position: relative;
    /deep/.van-swipe__indicator--active {
      width: 0.35rem !important;
      border-radius: 0.23rem;
      background-color:  #aec7ec!important;
    }

    /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;
    .fo_banner {
      width: 100%;
      left: 0;
      bottom: -.25rem;
      height: calc(100% - .8821rem - 0.3rem);
    }
  }

  .news-content {
  .item_cont {
    width: 100%;
    height: 1.5385rem;
    border-bottom: 0.5px solid #ececec;
    position: relative;
    padding: 0.3rem;
    border: none;
    display: flex;
    flex-wrap: wrap;
    align-content: center;

    >div {
      width: 100%;
      height: 30%;
    }

    .top_fo,
    .bottom_fo {
      display: flex;
      justify-content: space-between;

      span {
        display: inline-block;
      }

      .title {
        width: 20%;
        height: 100%;
        display: flex;
        align-items: center;
        font-weight: 500;

      }

      .aikesi {
        width: auto;
        height: 0.3rem;
        background: #dbe3f0;
        color: #546daf;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
        font-size: 0.15rem;
        line-height: 0.3rem;
        margin-right: 0.1rem;
      }

      .numberid {
        font-size: 0.28rem;
      }

      .numbers {
        width: 20%;
        height: 100%;
        display: flex;
        align-items: center;

      }

      .point {
        font-size: 0.28rem;

      }

      .percentage {
        width: 20%;
        height: 100%;
        display: flex;
        align-items: center;
      }
    }

    .top_fo {
      font-size: 0.3846rem !important;
    }

    .bottom_fo {
      margin-top: 0.1rem;
      font-size: 0.1846rem;
      color: #999898;
    }

    .percentage.gree {
      color: green !important;
    }

    .percentage.redd {
      color: red !important;
    }
  }
}

.item_conts::after {
  content: "";
  position: absolute;
  bottom: 0;
  background: #ececec;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.my-swipe .van-swipe-item {

  font-size: 0.5128rem;
  line-height: 3.8462rem;
  text-align: center;
  overflow: hidden;
}

.fo_my-swipe .van-swipe-item {

  font-size: 0.5128rem;
  line-height: 3.8462rem;
  overflow: hidden;
}

.fo_my-swipe {
  width: 100%;
  height: 100%;
}

.focus_skeleton {
  margin-top: 1rem;
}

.van-skeleton__row,
.van-skeleton__title {
  height: .7rem;
}

.news-tab {
  width: 95%;
  position: relative;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 0.2rem;
  border-radius: 0.4rem 0.4rem 0 0;
  padding-top: 0.3rem;





  /deep/.is-selected .tab-name {
    position: relative;
  }

  .item-out {
    position: relative;
    border-left: 0.01rem solid rgba(192, 192, 192, 0.1);
    padding: 0 0.25rem 1rem 0.25rem;
  /deep/.mint-navbar .mint-tab-item.is-selected {
    border: 0 !important;
    border-bottom: none;
  }

  .item-out::before {
    content: "●";
  /deep/.is-selected .tab-name:after {
    position: absolute;
    top: -0.1rem;
    left: -0.108rem;
    margin: auto;
  }

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

  .titContent {
    position: relative;
    display: block;
    content: '';
    height: .07rem;
    background-color: #1381A4;
    width: 100%;
    color: #fff;
    font-size: .35rem;
    line-height: .46rem;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    left: 0;
    bottom: -.25rem;
  }
}

  .neitu {
    width: 100%;
    border-radius: 0.05rem;
    margin-top: 0.3rem;
    margin-bottom: 0.8rem;
  }
.news-content {
  position: relative;
  padding: 0.3rem;
}

  .neitu img {
    width: 100%;
    border-radius: 0.05rem;
  }
.item-out {
  position: relative;
  border-left: 0.01rem solid rgba(192, 192, 192, 0.8);
  padding: 0 0.25rem 1rem 0.25rem;
}

  .block-out {
    margin-top: 0.2rem;
  }
.item-out::before {
  content: "●";
  position: absolute;
  top: -0.1rem;
  left: -0.128rem;
  margin: auto;
}

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

.titContent {
  position: relative;
  width: 100%;
  font-size: .35rem;
  line-height: .46rem;
  overflow: hidden;
  text-overflow: ellipsis;
  -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>