From 844214f166e9ad2d1c9afd7d56200bc895659435 Mon Sep 17 00:00:00 2001
From: XIGUASSR <623844246@qq.com>
Date: Mon, 07 Nov 2022 04:14:02 +0800
Subject: [PATCH] 最新3333
---
src/assets/img/shoucang.png | 0
src/assets/img/weishoucang.png | 0
config/index.js | 2
src/assets/img/searchs.png | 0
src/assets/img/xiala.png | 0
src/assets/img/shenfen2.png | 0
src/page/list/trading-list.vue | 361 ++++++++++++++++++++++++++++++++++++++------------
7 files changed, 273 insertions(+), 90 deletions(-)
diff --git a/config/index.js b/config/index.js
index 94ec1d9..582994a 100644
--- a/config/index.js
+++ b/config/index.js
@@ -24,7 +24,7 @@
},
// Various Dev Server settings
- host: 'localhost', // can be overwritten by process.env.HOST
+ host: '0.0.0.0', // can be overwritten by process.env.HOST
port: 80, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
errorOverlay: true,
diff --git a/src/assets/img/searchs.png b/src/assets/img/searchs.png
new file mode 100644
index 0000000..2ade859
--- /dev/null
+++ b/src/assets/img/searchs.png
Binary files differ
diff --git a/src/assets/img/shenfen2.png b/src/assets/img/shenfen2.png
new file mode 100644
index 0000000..0e5de55
--- /dev/null
+++ b/src/assets/img/shenfen2.png
Binary files differ
diff --git a/src/assets/img/shoucang.png b/src/assets/img/shoucang.png
new file mode 100644
index 0000000..097572c
--- /dev/null
+++ b/src/assets/img/shoucang.png
Binary files differ
diff --git a/src/assets/img/weishoucang.png b/src/assets/img/weishoucang.png
new file mode 100644
index 0000000..9bea1ca
--- /dev/null
+++ b/src/assets/img/weishoucang.png
Binary files differ
diff --git a/src/assets/img/xiala.png b/src/assets/img/xiala.png
new file mode 100644
index 0000000..5896b81
--- /dev/null
+++ b/src/assets/img/xiala.png
Binary files differ
diff --git a/src/page/list/trading-list.vue b/src/page/list/trading-list.vue
index 0009131..65e2561 100644
--- a/src/page/list/trading-list.vue
+++ b/src/page/list/trading-list.vue
@@ -2,33 +2,17 @@
<div class="tr_list_page">
<div class="content">
<div class="tabs">
- <div class="top_title">
- <div class="tabs_title">
- <div
- class="tb"
- v-for="(item, index) in tabsArr"
- :key="index"
- @click="handleTabsClick(item, index)"
- >
- <span :class="index === tabsIndex ? 'active' : ''">{{ item }}</span>
- </div>
- </div>
- <div class="right_money"></div>
- </div>
<div class="bottom_content" v-if="tabsIndex === 1">
<!-- 搜索框 -->
<div class="search">
<div class="search_content">
<div class="left_search">
<div class="search_img">
- <img src="../../assets/img/search2.png" alt />
+ <img src="../../assets/img/searchs.png" alt />
</div>
<div class="search_input">
<input type="text" class="searchs" placeholder="输入品种名称/代码搜索" />
</div>
- </div>
- <div class="right_search_class">
- <img src="../../assets/img/fenlei2.png" alt />
</div>
</div>
</div>
@@ -46,7 +30,7 @@
</div>
<div class="kai_mess">
<div class="left_identity_img">
- <img src="../../assets/img/shenfen.png" alt />
+ <img src="../../assets/img/shenfen2.png" alt />
</div>
<div class="text">
<span>{{ '开户即可入金交易' }}</span>
@@ -71,6 +55,9 @@
<div class="item" v-for="(item, index) in listArr" :key="index">
<div class="left_title">
<div class="tp">
+ <span class="collection" @click="handleCollectionClick(item)">
+ <span class="shu"></span>
+ </span>
<span class="title_color">{{ item.name }}</span>
</div>
<div class="bt">
@@ -97,6 +84,41 @@
</div>
</div>
</div>
+ <div class="shai" v-if="dialogFlag" @click="openDialog()"></div>
+ <div class="top_title" @click="openDialog()" ref="topTitle">
+ <div>
+ <div class="tabs_title">
+ <div
+ class="tb"
+ v-for="(item, index) in tabsArr"
+ :key="index"
+ @click="handleTabsClick(item, index)"
+ >
+ <span :class="index === tabsIndex ? 'active' : ''">{{ item }}</span>
+ </div>
+ </div>
+ <div class="right_money">
+ <div class="content_money" v-if="tabsIndex === 1">
+ <div class="top_price">
+ <div class="left">
+ <span>{{ '余额' }}</span>
+ </div>
+ <div class="right">
+ <span>{{ '¥ 49,656.79' }}</span>
+ </div>
+ <div class="sanjiao">
+ <img src="../../assets/img/xiala.png" alt />
+ </div>
+ </div>
+ <div class="bottom_balance">
+ <div>
+ <span>{{ '可用余额' }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</template>
@@ -105,9 +127,10 @@
name: "trading",
data() {
return {
- tabsIndex: 0,
+ tabsIndex: 1,
tabsArr: ["自选", "市场"],
tabClassActive: 1,
+ dialogFlag: false,
tabsClassArr: [
{
name: "热门",
@@ -142,90 +165,103 @@
price: 16445.5,
time: "02:59:58",
applies: 5.93,
+ collection: true
},
{
name: "香港50指数",
referred: "HK50",
price: 16445.5,
time: "02:59:58",
- applies: 5.93
+ applies: 5.93,
+ collection: true
},
{
name: "香港50指数",
referred: "HK50",
price: 16445.5,
time: "02:59:58",
- applies: 5.93
+ applies: 5.93,
+ collection: true
},
{
name: "香港50指数",
referred: "HK50",
price: 16445.5,
time: "02:59:58",
- applies: 5.93
+ applies: 5.93,
+ collection: true
},
{
name: "香港50指数",
referred: "HK50",
price: 16445.5,
time: "02:59:58",
- applies: 5.93
+ applies: 5.93,
+ collection: false
},
{
name: "香港50指数",
referred: "HK50",
price: 16445.5,
time: "02:59:58",
- applies: 5.93
+ applies: 5.93,
+ collection: false
},
{
name: "香港50指数",
referred: "HK50",
price: 16445.5,
time: "02:59:58",
- applies: 5.93
+ applies: 5.93,
+ collection: true
},
{
name: "香港50指数",
referred: "HK50",
price: 16445.5,
time: "02:59:58",
- applies: 5.93
+ applies: 5.93,
+ collection: false
},
{
name: "香港50指数",
referred: "HK50",
price: 16445.5,
time: "02:59:58",
- applies: 5.93
+ applies: 5.93,
+ collection: false
},
{
name: "香港50指数",
referred: "HK50",
price: 16445.5,
time: "02:59:58",
- applies: 5.93
+ applies: 5.93,
+ collection: false
},
{
name: "香港50指数",
referred: "HK50",
price: 16445.5,
time: "02:59:58",
- applies: 5.93
+ applies: 5.93,
+ collection: false
},
{
name: "香港50指数",
referred: "HK50",
price: 16445.5,
time: "02:59:58",
- applies: 5.93
+ applies: 5.93,
+ collection: false
},
{
name: "香港50指数",
referred: "HK50",
price: 16445.5,
time: "02:59:58",
- applies: 5.93
+ applies: 5.93,
+ collection: false
}
]
};
@@ -236,6 +272,17 @@
},
handleTabsItem(item, index) {
this.tabsItemIndex = index;
+ },
+ handleCollectionClick(item) {
+ item.collection = !item.collection;
+ },
+ openDialog() {
+ if (!this.dialogFlag) {
+ this.$refs['topTitle'].style.height = '7rem'
+ }else {
+ this.$refs['topTitle'].style.height = '1.2821rem'
+ }
+ this.dialogFlag = !this.dialogFlag;
}
}
};
@@ -249,42 +296,19 @@
> .content {
width: 100%;
height: 100%;
- padding: 0 0.3rem;
}
}
.tabs {
width: 100%;
height: 100%;
- margin-top: 1.1282rem;
- .top_title {
- width: 100%;
- height: 1.2821rem;
- display: flex;
- align-items: center;
- justify-content: space-between;
- > div {
- width: 40%;
- height: 100%;
- display: flex;
- }
- .tb {
- width: 50%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 0.4103rem;
- }
- .active {
- font-size: 0.5003rem;
- font-weight: 800;
- }
- }
+ position: relative;
.search {
width: 100%;
- height: 1.3333rem;
+ height: 1rem;
display: flex;
align-items: center;
+ justify-content: center;
+ padding: 0 0.3rem;
.search_content {
width: 100%;
height: 90%;
@@ -292,10 +316,10 @@
align-items: center;
}
.left_search {
- width: 87%;
+ width: 100%;
height: 100%;
- background: rgb(246, 246, 246);
- border-radius: 0.2rem;
+ background: #f6f6f6;
+ border-radius: 0.15rem;
display: flex;
.search_img {
width: 1rem;
@@ -304,12 +328,13 @@
justify-content: center;
align-items: center;
img {
- width: 0.6rem;
- height: 0.6rem;
+ width: 0.5rem;
+ height: 0.5rem;
}
}
.search_input {
- width: calc(100% - 1rem);
+ width: 100%;
+ overflow: hidden;
height: 100%;
display: flex;
}
@@ -327,13 +352,49 @@
}
}
}
+.top_title {
+ width: 100%;
+ height: 1.2821rem;
+ padding: 0 0.3rem;
+ position: fixed;
+ background: #fff;
+ top: 0;
+ z-index: 9999999;
+ transition: all 1s;
+ >div {
+ width: 100%;
+ height: 1.2821rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ .tabs_title {
+ width: 23%;
+ height: 100%;
+ display: flex;
+ }
+ .tb {
+ width: 50%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 0.4103rem;
+ }
+ .active {
+ font-size: 0.5003rem;
+ font-weight: 800;
+ }
+}
.bottom_content {
width: 100%;
height: calc(100% - 1.2821rem);
+ position: relative;
+ top: 7%;
}
.scroll_tab {
width: 100%;
- height: 1.1538rem;
+ height: 1rem;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
display: -webkit-box;
@@ -341,10 +402,10 @@
> div {
display: inline-block;
- width: 25%;
+ width: 15%;
height: 100%;
display: flex;
- justify-content: center;
+ font-size: 0.4rem;
align-items: center;
span {
display: inline-block;
@@ -355,8 +416,8 @@
}
}
span.active {
- color: rgb(43, 132, 247);
- border-bottom: 1px solid rgb(43, 132, 247);
+ color: rgb(2, 99, 226);
+ border-bottom: 0.07rem solid rgb(2, 99, 226);
font-weight: 800;
transition: all 0.5s;
}
@@ -367,15 +428,17 @@
.kai_mess {
width: 100%;
height: 1.2821rem;
- background: rgb(245, 249, 254);
+ background: #f5f9fe;
display: flex;
justify-content: space-between;
+ position: absolute;
.left_identity_img {
width: 0.9744rem;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
+ margin-left: 0.2rem;
img {
width: 0.6rem;
height: 0.6rem;
@@ -386,10 +449,10 @@
height: 100%;
display: flex;
align-items: center;
- color: #2883f7;
+ color: rgb(2, 99, 226);
font-weight: 800;
font-size: 0.35rem;
- padding-left: 0.4128rem;
+ padding-left: 0.35rem;
}
.right_go {
width: 10%;
@@ -407,9 +470,10 @@
}
.list {
width: 100%;
- height: calc(100% - 1.2821rem - 1rem - 1.1538rem - 1.3333rem);
+ height: calc(100% - 1.2821rem - 1rem - 1.1538rem - 1.3333rem);
overflow-x: auto;
padding-bottom: 1.2821rem;
+ padding: 0 0.3rem;
.list_items {
width: 100%;
> div {
@@ -447,23 +511,25 @@
}
}
.list_title {
- width: 100%;
- height: 1rem;
- color: #ccc;
+ width: 100%;
+ height: 1rem;
+ margin-top: 1.29rem;
+ padding: 0 0.3rem;
+ color: #a1a2a4;
+ display: flex;
+ > div {
display: flex;
- >div {
- display: flex;
- align-items: center;
- }
- .varieties{
- width: 45%;
- }
- .latest_price {
- width: 35%;
- }
- .applies {
- width: 20%;
- }
+ align-items: center;
+ }
+ .varieties {
+ width: 45%;
+ }
+ .latest_price {
+ width: 35%;
+ }
+ .applies {
+ width: 20%;
+ }
}
.price_color {
color: rgb(39, 171, 99);
@@ -475,4 +541,121 @@
font-size: 0.4rem;
font-weight: 600;
}
+.tab_items {
+ font-size: 0.2rem;
+}
+.tab_class {
+ padding: 0 0.3rem;
+}
+.searchs::placeholder {
+ color: #8e8f92;
+}
+.searchs {
+ width: 100%;
+}
+.collection {
+ display: inline-block;
+ width: 0.1rem;
+ height: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 0.1rem;
+ .shu {
+ width: 60%;
+ height: 100%;
+ background: #919191;
+ }
+}
+.right_money {
+ width: 44%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ .content_money {
+ width: 80%;
+ height: 80%;
+ }
+ .top_price {
+ width: 100%;
+ height: 70%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .left {
+ width: 0.8rem;
+ height: 0.4103rem;
+ border-radius: 0.1rem;
+ background: #4d73b1;
+ color: #fff;
+ font-size: 0.3077rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 0.3rem;
+ span {
+ display: inline-block;
+ transform: scale(0.8);
+ font-weight: 600;
+ }
+ }
+ .right {
+ width: calc(100% - 1.2rem);
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ span {
+ font-weight: 600;
+ }
+ }
+ }
+ .bottom_balance {
+ width: 100%;
+ height: 30%;
+ display: flex;
+ justify-content: flex-end;
+ font-size: 0.3077rem;
+ color: #acaeaf;
+ transform: scale(0.9);
+ margin-left: 0.2rem;
+ padding-right: 0.48rem;
+ }
+}
+.sanjiao {
+ width: 0.4rem;
+ height: 0.4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ img {
+ width: 0.4rem;
+ height: 0.4rem;
+ }
+}
+.dialog {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.4);
+ top: 7%;
+ z-index: 9;
+ transition: all 0.5s;
+}
+.dialog.open {
+ top: 7%;
+}
+.shai {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.4);
+ top: 0%;
+ z-index: 10;
+ transition: all 0.5s;
+}
+.shai.open {
+ top: 4%;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3