From 2f72cf1a3a30b665619e7fcaa2657e225598554e Mon Sep 17 00:00:00 2001
From: flowstocktrading <tsm1258011@proton.me>
Date: Thu, 03 Nov 2022 18:22:54 +0800
Subject: [PATCH] 备份
---
src/page/home/home.vue | 172 ++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 109 insertions(+), 63 deletions(-)
diff --git a/src/page/home/home.vue b/src/page/home/home.vue
index 52ac70f..e2e03c1 100644
--- a/src/page/home/home.vue
+++ b/src/page/home/home.vue
@@ -39,6 +39,7 @@
</div>
</div>
</div>
+
<!-- 排行入门 -->
<van-skeleton title :row="2" :loading="loading" />
<div class="navs" v-if="!loading">
@@ -68,24 +69,28 @@
<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">
+ <div class="top_fo" style="width: 80%;">
+ <div class="title" style="width: 30%;">
<span>{{ item2.f14 }}</span>
</div>
- <div class="numbers">
- <span>{{ item2.f2 }}</span>
- </div>
- <div class="percentage" :class="item2.f3 > 0 ? 'gree' : 'redd'">
+ <div class="percentage" :class="item2.f3 > 0 ? 'gree' : 'redd'">
+
<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>
</div>
- <div class="bottom_fo">
- <div class="title">
+ <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;" />
</div>
- <div class="numbers">
- <span>{{ '04:59:57' }}</span>
+ <div class="percentage" >
+ <!-- class="numbers" -->
+ <!-- <span>{{ '04:59:57' }}</span> -->
+ <span>{{ item2.f2 }}</span>
</div>
<div class="percentage">
<span></span>
@@ -98,32 +103,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 +143,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>
@@ -143,14 +155,14 @@
<!-- 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 Echart from "./components/echart.vue";
import {
Toast
} from "mint-ui";
@@ -172,10 +184,10 @@
export default {
components: {
- foot,
HomeList,
AllList,
GoToLogin,
+ Echart
},
props: {},
data() {
@@ -216,16 +228,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) {
+
+ switch (type) {
case 1:
this.newsContent1 = data.data.list
break;
@@ -244,7 +257,7 @@
}
},
handleBannerClick(ind) {
- console.log(ind);
+ // console.log(ind);
},
ProcessData() {
// 把数据分割成三等份
@@ -255,19 +268,19 @@
onChange(index) {
this.currentIndex = index;
this.proData[index].forEach(item => {
- console.log(item.f14);
+ // console.log(item.f14);
});
},
handleSearchClick() {
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 +312,10 @@
mounted() {
this.getNewsList(1);
this.getNewsList(2);
- this.getNewsList(3);
+ this.getNewsList(4);
+
+
+
setTimeout(() => {
this.loading = false
}, 1000)
@@ -310,7 +326,8 @@
.wrapper {
width: 100%;
height: 100%;
- background: #010101;
+ background: rgb(33, 33, 43);
+ // background: #010101;
// overflow: hidden;
padding-top: .3128rem;
@@ -428,7 +445,7 @@
>.navs_content {
width: 95%;
height: 100%;
- background: rgb(28, 28, 30);
+ background: #272733;
border-radius: 0.2564rem;
display: flex;
@@ -483,7 +500,7 @@
.fo_content {
width: 95%;
height: 100%;
- background: rgb(28, 28, 30);
+ background: #272733;
padding: 0 0.2564rem;
border-radius: 0.2564rem;
@@ -524,7 +541,7 @@
}
.title {
- width: 50%;
+ width: 20%;
height: 100%;
display: flex;
align-items: center;
@@ -613,17 +630,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 +650,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 +705,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>
--
Gitblit v1.9.3