From d37bcf2111e02b806f961614c5a87deba4283aba Mon Sep 17 00:00:00 2001
From: flowstocktrading <tsm1258011@proton.me>
Date: Wed, 02 Nov 2022 20:14:01 +0800
Subject: [PATCH] 111
---
src/page/list/list.vue | 122 ++++++++++++++++++++++--
src/page/home/home.vue | 132 +++++++++++++++++---------
package.json | 1
src/App.vue | 6
src/page/home/components/GoLogin.vue | 6
5 files changed, 204 insertions(+), 63 deletions(-)
diff --git a/package.json b/package.json
index 57c8de8..d9731b1 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
"clipboard": "^2.0.4",
"echarts": "^4.5.0",
"element-ui": "^2.13.0",
+ "express": "^4.18.2",
"hqchart": "^1.1.8763",
"jquery": "^3.4.1",
"js-md5": "^0.7.3",
diff --git a/src/App.vue b/src/App.vue
index 5c49152..51d7db5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -83,7 +83,8 @@
height: 1rem;
/deep/.mint-header {
height: 100%;
- background-color: rgba(20, 45, 55, 0.3);
+ background-color: #16171d;
+ // background-color: rgba(20, 45, 55, 0.3);
.is-left {
.mintui {
font-size: 20px;
@@ -119,7 +120,8 @@
}
&.black-theme {
// background: #16171d;
- background: rgb(14, 14, 15);
+ // background: rgb(14, 14, 15);
+ background: rgb(33, 33, 43);
}
}
.search-right {
diff --git a/src/page/home/components/GoLogin.vue b/src/page/home/components/GoLogin.vue
index f9d2deb..bb978ed 100644
--- a/src/page/home/components/GoLogin.vue
+++ b/src/page/home/components/GoLogin.vue
@@ -37,10 +37,12 @@
> div {
width: 90%;
height: 100%;
- background: rgb(28,28,30);
+ background: rgba(39,39,51,0.85);
border-radius: .2228rem;
display: flex;
align-items: center;
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
}
.left_mess {
width: 70%;
@@ -71,4 +73,4 @@
}
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/page/home/home.vue b/src/page/home/home.vue
index 52ac70f..3211ae9 100644
--- a/src/page/home/home.vue
+++ b/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>
@@ -216,16 +223,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) {
+ console.log('xinwen:', data)
+ switch (type) {
case 1:
this.newsContent1 = data.data.list
break;
@@ -262,12 +270,12 @@
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 +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 {
@@ -632,48 +642,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 +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>
diff --git a/src/page/list/list.vue b/src/page/list/list.vue
index aa70d4b..24d948f 100644
--- a/src/page/list/list.vue
+++ b/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>
--
Gitblit v1.9.3