<template>
|
<div class="wrapper">
|
<div class="page_content">
|
<div class="top_logo">
|
<div class="left_logo">
|
<div class="img_logo">
|
<img :src="Logo" alt />
|
</div>
|
</div>
|
<div class="right_search">
|
<div>
|
<div class="search_con" @click="handleSearchClick()">
|
<img :src="Searchs" alt />
|
</div>
|
<div class="service_con">
|
<img :src="Service" alt />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="center_tabs">
|
<!-- 顶部轮播图 -->
|
<div class="banner_top">
|
<van-skeleton title :row="1" :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>
|
</van-swipe>
|
</div>
|
<!-- 公告 -->
|
<div class="announcement">
|
<div class="an_content">
|
<div class="an_left_icon">
|
<img :src="Announcement" alt />
|
</div>
|
<div class="an_right_message">
|
<span>{{ announcementMess }}</span>
|
</div>
|
</div>
|
</div>
|
<!-- 排行入门 -->
|
<van-skeleton title :row="2" :loading="loading" />
|
<div class="navs" v-if="!loading">
|
<div class="navs_content">
|
<div v-for="(item, index) in navsArr" :key="index">
|
<div>
|
<div class="top_img">
|
<div>
|
<img :src="item.img" alt />
|
</div>
|
</div>
|
<div class="bottom_navs">
|
<span>{{ item.title }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 最多关注 -->
|
<van-skeleton title :row="6" :loading="loading" class="focus_skeleton" />
|
<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;">
|
<div class="item_cont" v-for="(item2, idx) in proData[currentIndex]" :key="idx">
|
<div class="top_fo">
|
<div class="title">
|
<span>{{ item2.f14 }}</span>
|
</div>
|
<div class="numbers">
|
<span>{{ item2.f2 }}</span>
|
</div>
|
<div class="percentage" :class="item2.f3 > 0 ? 'gree' : 'redd'">
|
<span>{{ item2.f3 > 0 ? `+${item2.f3}%` : `${item2.f3}%` }}</span>
|
</div>
|
</div>
|
<div class="bottom_fo">
|
<div class="title">
|
<span>{{ item2.f12 }}</span>
|
<img :src="Huo" alt style="margin-left: 0.12rem;" />
|
</div>
|
<div class="numbers">
|
<span>{{ '04:59:57' }}</span>
|
</div>
|
<div class="percentage">
|
<span></span>
|
</div>
|
</div>
|
</div>
|
</van-swipe-item>
|
</van-swipe>
|
</div>
|
</div>
|
</div>
|
</div>
|
<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>
|
</mt-tab-item>
|
<mt-tab-item id="tab_2">
|
<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:{
|
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_1">
|
<div class="news-content">
|
<div class="item-out" v-for="(item,inde) in newsContent2" :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>
|
</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 newsContent3" :key="inde">
|
<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>
|
</div>
|
</div>
|
<!-- 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 {
|
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';
|
|
export default {
|
components: {
|
foot,
|
HomeList,
|
AllList,
|
GoToLogin,
|
},
|
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:[],
|
};
|
},
|
methods: {
|
async getNewsList(type) {
|
let data = await api.queryNewsList(type);
|
console.log('xinwen:',data)
|
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 => {
|
console.log(item.f14);
|
});
|
},
|
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.getNewsList(1);
|
this.getNewsList(2);
|
this.getNewsList(3);
|
setTimeout(() => {
|
this.loading = false
|
}, 1000)
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.wrapper {
|
width: 100%;
|
height: 100%;
|
background: #010101;
|
// overflow: hidden;
|
padding-top: .3128rem;
|
|
.page_content {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.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%;
|
}
|
}
|
|
.right_search {
|
justify-content: flex-end;
|
|
>div {
|
width: 1.2821rem;
|
height: 0.4615rem;
|
display: flex;
|
justify-content: space-between;
|
margin-right: 0.4615rem;
|
|
>div {
|
width: 0.4615rem;
|
height: 0.4615rem;
|
|
>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: rgb(28, 28, 30);
|
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: rgb(28, 28, 30);
|
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 {
|
display: flex;
|
justify-content: space-between;
|
|
span {
|
display: inline-block;
|
}
|
|
.title {
|
width: 50%;
|
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);
|
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 {
|
color: #fff;
|
font-size: 0.5128rem;
|
line-height: 3.8462rem;
|
text-align: center;
|
overflow: hidden;
|
}
|
|
.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: #1c1c1e;
|
border-radius: 0.4rem 0.4rem 0 0;
|
padding-top: 0.3rem;
|
/deep/.mint-navbar {
|
background: #1c1c1e;
|
}
|
|
/deep/.mint-tab-container {}
|
|
/deep/.mint-tab-item {
|
background: #1c1c1e;
|
}
|
|
/deep/.mint-tab-item-label {
|
color: #fff;
|
font-size: .26rem;
|
|
}
|
|
/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{
|
position: relative;
|
padding: 0.4rem;
|
}
|
.item-out{
|
position: relative;
|
border-left: 0.01rem solid rgba(200,210,210,0.5);
|
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%;
|
color: #fff;
|
font-size: .35rem;
|
line-height: .46rem;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
-webkit-line-clamp: 2;
|
display: -webkit-box;
|
}
|
</style>
|
