From e74a7c7afc56cf229058091fe2ae143cf0bdb3ca Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Thu, 22 May 2025 15:03:27 +0800
Subject: [PATCH] style
---
src/views/market/market.vue | 722 +++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 569 insertions(+), 153 deletions(-)
diff --git a/src/views/market/market.vue b/src/views/market/market.vue
index c017d8f..1514195 100644
--- a/src/views/market/market.vue
+++ b/src/views/market/market.vue
@@ -4,55 +4,25 @@
<div class="css-tq0shg">
<main class="css-1wr4jig">
<div class="css-1pysja1">
- <div class="css-6nqu2s">
+ <div class="css-6nqu2s" style="background-color: #000">
<!-- 标题 -->
- <div class="css-b22026">
- <div class="css-1vs5d4i">
- <div class="css-o32gok">
+ <!-- <div class="css-b22026">
+ <div class="css-1vs5d4i"> -->
+ <!-- <div class="css-o32gok">
{{ $t("message.hangqing.hangqing") }}
- </div>
- <!-- 右上角 -->
- <div class="css-ykl0r1">
- <div id="market_sector_overview" class="css-8puzml">
- <div class="css-search-1">
- <div class="css-search-2">
- <div class="css-search-3">
- <div class="bn-input-prefix css-search-4">
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- fill="none"
- class="css-search-5"
- >
- <path
- fill-rule="evenodd"
- clip-rule="evenodd"
- d="M11 6a5 5 0 110 10 5 5 0 010-10zm0-3a8 8 0 017.021 11.838l3.07 3.07-1.59 1.591-1.591 1.591-3.07-3.07A8 8 0 1111 3z"
- fill="currentColor"
- ></path>
- </svg>
- </div>
- <input
- id="financial_main_search"
- v-model="searchValue"
- @input="onInputSearch"
- :placeholder="$t('message.hangqing.sousuo')"
- class="css-search-6"
- />
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
+ </div> -->
+ <!-- 右上角 -->
+ <!-- <div class="css-ykl0r1"> -->
- <div
+ <!-- </div> -->
+ <!-- </div>
+ </div> -->
+
+ <!-- <div
class="content-view-box item-box-bamarket"
style="height: auto"
>
<div class="item-box-bamarket-1" style="height: auto">
- <!-- 新四个框 -->
<div class="flex-container flex justify-between" scoped>
<div
class="flex-item"
@@ -78,7 +48,6 @@
</div>
</el-image>
<div class="flex-title mt-1">
- <!-- {{ getName(item) }}/USDT -->
{{ item.name }}
</div>
</div>
@@ -121,37 +90,32 @@
}}
</div>
</div>
- <!-- <div style="background-color:blueviolet; width: 30px;height: 100px;"></div> -->
</div>
</div>
</div>
- </div>
+ </div> -->
<!-- 列表 -->
<div
class="content-view-box"
- style="background-color: white; height: auto"
+ style="background-color: #000; height: auto; padding-top: 40px"
>
<div
class=""
- style="
- background-color: white;
- min-height: 1040px;
- height: auto;
- "
+ style="background-color: #000; min-height: 1040px; height: auto"
>
<div
class="flex-container-1 flex-container-1-pos"
- style="background-color: white"
+ style="background-color: #000"
scoped
>
<!-- 行情列表 -->
<div
class="box1"
- style="display: block; background-color: white"
+ style="display: block; background-color: #000; width: 100%"
>
<!-- tab -->
- <div class="css-1vii3zc" style="background-color: #ffffff">
+ <div class="css-1vii3zc" style="background-color: #000">
<div id="box1001" class="tab-box">
<div
class="tab-item"
@@ -164,15 +128,346 @@
{{ item.name }}
</div>
</div>
+ <div id="market_sector_overview" class="css-8puzml">
+ <div class="css-search-1">
+ <div
+ class="css-search-2"
+ style="background-color: #fff;border-radius: 7px;"
+ >
+ <div class="css-search-3" style="color: #fff">
+ <div class="bn-input-prefix css-search-4">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 24 24"
+ fill="none"
+ class="css-search-5"
+ style="color: #ccc"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M11 6a5 5 0 110 10 5 5 0 010-10zm0-3a8 8 0 017.021 11.838l3.07 3.07-1.59 1.591-1.591 1.591-3.07-3.07A8 8 0 1111 3z"
+ fill="currentColor"
+ ></path>
+ </svg>
+ </div>
+ <input
+ id="financial_main_search"
+ v-model="searchValue"
+ @input="onInputSearch"
+ :placeholder="$t('message.hangqing.sousuo')"
+ class="css-search-6"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
</div>
- <div class="css-72ldqd" style="display: block">
+ <div
+ class="css-72ldqd"
+ style="display: block; background-color: #000"
+ >
<!-- 标题 -->
<div class="css-qbmpwo">
<div class="css-vurnku" style="min-width: 696px">
+ <ul class="list">
+ <li
+ v-for="(item, index) in searchList"
+ :key="index"
+ >
+ <div class="top">
+ <div class="top_left">
+ <img
+ :src="handleSymbolImg(item.symbol)"
+ alt=""
+ /><span class="name">{{ item.name }}</span>
+ </div>
+ <div class="top_right">
+ <span class="fluctuation"
+ >{{ item.change_ratio }}%</span
+ >
+ </div>
+ </div>
+ <div class="chart">
+ <div data-v-6ae20f79="" class="container">
+ <svg
+ data-v-6ae20f79=""
+ class="vtc"
+ xmlns="http://www.w3.org/2000/svg"
+ width="100%"
+ height="100%"
+ >
+ <g class="grid">
+ <g class="vertical">
+ <line
+ class="line"
+ x1="5"
+ x2="5"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="14.089439655172415"
+ x2="14.089439655172415"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="23.17887931034483"
+ x2="23.17887931034483"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="32.268318965517246"
+ x2="32.268318965517246"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="41.35775862068966"
+ x2="41.35775862068966"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="50.44719827586207"
+ x2="50.44719827586207"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="59.53663793103449"
+ x2="59.53663793103449"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="68.6260775862069"
+ x2="68.6260775862069"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="77.71551724137932"
+ x2="77.71551724137932"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="86.80495689655173"
+ x2="86.80495689655173"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="95.89439655172414"
+ x2="95.89439655172414"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="104.98383620689656"
+ x2="104.98383620689656"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="114.07327586206898"
+ x2="114.07327586206898"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="123.1627155172414"
+ x2="123.1627155172414"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="132.2521551724138"
+ x2="132.2521551724138"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="141.34159482758622"
+ x2="141.34159482758622"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="150.43103448275863"
+ x2="150.43103448275863"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="159.52047413793105"
+ x2="159.52047413793105"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="168.60991379310346"
+ x2="168.60991379310346"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="177.69935344827587"
+ x2="177.69935344827587"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="186.78879310344828"
+ x2="186.78879310344828"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="195.8782327586207"
+ x2="195.8782327586207"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="204.9676724137931"
+ x2="204.9676724137931"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="214.05711206896552"
+ x2="214.05711206896552"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="223.14655172413796"
+ x2="223.14655172413796"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="232.23599137931038"
+ x2="232.23599137931038"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="241.3254310344828"
+ x2="241.3254310344828"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="250.4148706896552"
+ x2="250.4148706896552"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="259.5043103448276"
+ x2="259.5043103448276"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ <line
+ class="line"
+ x1="268.59375"
+ x2="268.59375"
+ y1="5"
+ y2="59"
+ stroke="rgba(0,0,0,0.1)"
+ ></line>
+ </g>
+ </g>
+ <g class="curve">
+ <path
+ class="stroke"
+ :d="svgPathList[index]"
+ fill="none"
+ stroke="black"
+ ></path>
+ </g>
+ </svg>
+ </div>
+ </div>
+ <div class="bott">
+ <span class="price">{{ item.close }}</span>
+ <span
+ class="tradeBtn"
+ @click="goDetail(item.symbol, item)"
+ >
+ {{ $t("message.hangqing.jiaoyi") }}
+ </span>
+ </div>
+ </li>
+ </ul>
+
<!-- 标题 -->
- <div class="css-13euu76">
- <!-- 名称 -->
- <div
+ <!-- <div class="css-13euu76"> -->
+ <!-- 名称 -->
+ <!-- <div
data-area="left"
class="css-1e8pqe6"
style="width: 110px; flex: 110 1 0%"
@@ -190,9 +485,9 @@
{{ $t("message.hangqing.mingcheng") }}
</div>
</div>
- </div>
- <!-- 价格 -->
- <div
+ </div> -->
+ <!-- 价格 -->
+ <!-- <div
data-area="left"
class="css-1e8pqe6"
style="width: 60px; flex: 60 1 0%"
@@ -210,9 +505,9 @@
{{ $t("message.hangqing.jiage") }}
</div>
</div>
- </div>
- <!-- 24H涨跌 -->
- <div
+ </div> -->
+ <!-- 24H涨跌 -->
+ <!-- <div
data-area="right"
class="css-1e8pqe6"
style="width: 55px; flex: 55 1 0%"
@@ -230,10 +525,10 @@
{{ $t("message.hangqing.24hzhangfu") }}
</div>
</div>
- </div>
+ </div> -->
- <!-- 24H交易量 -->
- <div
+ <!-- 24H交易量 -->
+ <!-- <div
data-area="right"
class="css-1e8pqe6"
style="width: 90px; flex: 90 1 0%"
@@ -251,9 +546,9 @@
{{ $t("message.hangqing.24hjiaoyiliang") }}
</div>
</div>
- </div>
- <!-- 交易按钮 -->
- <div
+ </div> -->
+ <!-- 交易按钮 -->
+ <!-- <div
data-area="right"
class="css-1e8pqe6"
style="width: 80px; flex: 80 1 0%"
@@ -267,9 +562,9 @@
"
></div>
</div>
- </div>
+ </div> -->
<!-- 内容 -->
- <div class="css-1vuj9rf" style="min-height: 830px">
+ <!-- <div class="css-1vuj9rf" style="min-height: 830px">
<div
v-for="(item, index) in searchList"
:key="index"
@@ -282,9 +577,9 @@
<div
class="css-leyy1t"
style="cursor: pointer; text-decoration: none"
- >
- <!-- 名称 -->
- <div
+ > -->
+ <!-- 名称 -->
+ <!-- <div
data-area="left"
class="css-14yoi5o"
style="width: 110px; flex: 110 1 0%"
@@ -313,8 +608,6 @@
/>
</div>
<div class="">
- <!-- :src="handleSymbolImg(item.symbol)" -->
- <!-- :src="`${ConfigURL.HOST_URL}/symbol/${item.symbol}.png`" -->
<el-image
:src="handleSymbolImg(item.symbol)"
class="el-img-style"
@@ -336,9 +629,9 @@
{{ item.name }}
</div>
</div>
- </div>
- <!-- 价格 -->
- <div
+ </div> -->
+ <!-- 价格 -->
+ <!-- <div
data-area="left"
class="css-ydcgk2"
style="width: 60px; flex: 60 1 0%"
@@ -353,9 +646,9 @@
>
${{ item.close }}
</div>
- </div>
- <!-- 24H涨跌 -->
- <div
+ </div> -->
+ <!-- 24H涨跌 -->
+ <!-- <div
data-area="right"
class="css-18yakpx"
style="width: 55px; flex: 55 1 0%"
@@ -368,10 +661,10 @@
>
{{ item.change_ratio }}%
</div>
- </div>
+ </div> -->
- <!-- 24H交易量 -->
- <div
+ <!-- 24H交易量 -->
+ <!-- <div
data-area="right"
title="29,773.07M"
class="css-102bt5g"
@@ -382,9 +675,9 @@
"
>
{{ fixData(item.amount) }}
- </div>
- <!-- 交易按钮 -->
- <div
+ </div> -->
+ <!-- 交易按钮 -->
+ <!-- <div
data-area="right"
class="css-4cffwv"
style="width: 80px; flex: 80 1 0%"
@@ -395,15 +688,15 @@
>
{{ $t("message.hangqing.jiaoyi") }}
</button>
- </div>
- </div>
+ </div> -->
+ <!-- </div>
</div>
- </div>
- </div>
+ </div>
+ </div> -->
</div>
</div>
<!-- 分页器 -->
- <div class="css-1ttcc5">
+ <!-- <div class="css-1ttcc5">
<div class="css-b0tuh4">
<button
data-bn-type="button"
@@ -460,16 +753,16 @@
</svg>
</button>
</div>
- </div>
+ </div> -->
</div>
</div>
<!-- 榜单 -->
- <div
+ <!-- <div
class="box2"
- style="display: block; background-color: white"
- >
- <!-- tab -->
- <div class="css-1vii3zc">
+ style="display: block; background-color: #000"
+ > -->
+ <!-- tab -->
+ <!-- <div class="css-1vii3zc">
<div id="box1002" class="tab-box">
<div
class="tab-item"
@@ -482,15 +775,15 @@
{{ item.name }}
</div>
</div>
- </div>
+ </div> -->
- <div class="css-72ldqd" style="display: block">
- <!-- 标题 -->
- <div class="css-qbmpwo">
+ <!-- <div class="css-72ldqd" style="display: block"> -->
+ <!-- 标题 -->
+ <!-- <div class="css-qbmpwo">
<div class="css-vurnku" style="min-width: 350px">
- <div class="css-13euu76">
- <!-- 名称 -->
- <div
+ <div class="css-13euu76"> -->
+ <!-- 名称 -->
+ <!-- <div
data-area="left"
class="css-1e8pqe6"
style="width: 110px; flex: 110 1 0%"
@@ -506,9 +799,9 @@
{{ $t("message.hangqing.mingcheng") }}
</div>
</div>
- </div>
- <!-- 价格 -->
- <div
+ </div> -->
+ <!-- 价格 -->
+ <!-- <div
data-area="left"
class="css-1e8pqe6"
style="width: 60px; flex: 60 1 0%"
@@ -526,9 +819,9 @@
{{ $t("message.hangqing.jiage") }}
</div>
</div>
- </div>
- <!-- 涨跌 或交易额-->
- <div
+ </div> -->
+ <!-- 涨跌 或交易额-->
+ <!-- <div
data-area="right"
class="css-1e8pqe6"
style="width: 55px; flex: 55 1 0%"
@@ -550,9 +843,9 @@
</div>
</div>
</div>
- </div>
- <!-- 内容 -->
- <div class="css-1vuj9rf" style="min-height: 830px">
+ </div> -->
+ <!-- 内容 -->
+ <!-- <div class="css-1vuj9rf" style="min-height: 830px">
<div
direction="ltr"
class="css-vlibs4"
@@ -562,9 +855,9 @@
<div
class="css-leyy1t"
style="cursor: pointer; text-decoration: none"
- >
- <!-- 名称 -->
- <div
+ > -->
+ <!-- 名称 -->
+ <!-- <div
data-area="left"
class="css-14yoi5o"
style="width: 110px; flex: 110 1 0%"
@@ -593,13 +886,12 @@
</div>
<div class="css-y492if">
<div class="css-1wp9rgv">
- <!-- {{ getName(item) }} -->
{{ item.name }}
</div>
</div>
- </div>
- <!-- 价格 -->
- <div
+ </div> -->
+ <!-- 价格 -->
+ <!-- <div
data-area="left"
class="css-ydcgk2"
style="width: 60px; flex: 60 1 0%"
@@ -612,9 +904,9 @@
>
${{ item.close }}
</div>
- </div>
- <!-- 涨跌 或交易额-->
- <div
+ </div> -->
+ <!-- 涨跌 或交易额-->
+ <!-- <div
data-area="right"
class="css-18yakpx"
style="width: 55px; flex: 55 1 0%"
@@ -634,15 +926,15 @@
>
{{ `${item.change_ratio}%` }}
</div>
- </div>
- </div>
+ </div> -->
+ <!-- </div>
</div>
</div>
</div>
- </div>
- <!-- 分页器 -->
- </div>
- </div>
+ </div> -->
+ <!-- 分页器 -->
+ <!-- </div>
+ </div> -->
</div>
</div>
</div>
@@ -679,21 +971,21 @@
name: this.$t("message.user.suoyoubizhong"),
type: "US-stocks",
},
- {
- id: 2,
- name: this.$t("message.user.bibihangqing"),
- type: "cryptos",
- },
- {
- id: 3,
- name: this.$t("message.user.yongxuheyue"),
- type: "indices",
- },
- {
- id: 4,
- name: this.$t("message.user.jiaogeheyue"),
- type: "forex",
- },
+ // {
+ // id: 2,
+ // name: this.$t("message.user.bibihangqing"),
+ // type: "cryptos",
+ // },
+ // {
+ // id: 3,
+ // name: this.$t("message.user.yongxuheyue"),
+ // type: "indices",
+ // },
+ // {
+ // id: 4,
+ // name: this.$t("message.user.jiaogeheyue"),
+ // type: "forex",
+ // },
],
marketListType: "", //市场选择类型 美股 外汇，虚拟币...
jsonArray: [], //所有行情
@@ -733,6 +1025,8 @@
searchList: [],
collectNameList: [],
timer: null,
+ searchList: [],
+ svgPathList: [], // 新增的 svgPathList 数组
};
},
mounted() {
@@ -744,6 +1038,44 @@
},
methods: {
handleSymbolImg,
+ // 生成随机K线path
+ generateRandomPath() {
+ const points = 32; // svg线数量一致
+ let path = "";
+ let xStep = 9.089;
+ let x = 5;
+ let y = Math.random() * 40 + 10;
+ const maxJump = Math.random() * 100 + 50;
+ path += `M ${x},${y}`;
+ for (let i = 1; i < points; i++) {
+ x += xStep;
+ // 每次y跳动范围为 -maxJump/2 ~ +maxJump/2
+ y = Math.max(5, Math.min(59, y + (Math.random() - 0.5) * maxJump));
+ path += ` C ${x},${y} ${x},${y} ${x},${y}`;
+ }
+ return path;
+ },
+ // 生成所有K线
+ generateAllSvgPaths() {
+ this.svgPathList = this.searchList.map(() => this.generateRandomPath());
+ },
+ // 修改onInputSearch和fliterTypeData等筛选后调用
+ onInputSearch() {
+ if (this.searchValue != "") {
+ this.searchList = this.activeList.filter((val) => {
+ return (
+ val.symbol.toUpperCase().indexOf(this.searchValue.toUpperCase()) !=
+ -1
+ );
+ });
+ this.OnclickPage(1);
+ } else {
+ this.getPageSize();
+ this.searchList = this.activeList;
+ }
+ this.generateAllSvgPaths(); // 新增
+ },
+
// 获取所有symbol
getSymbol() {
API.url("wap/api/item!list.action", {}).then((res) => {
@@ -757,9 +1089,9 @@
},
// 轮训获取symbol的行情
getTimeTimer() {
- this.timer = setInterval(() => {
- this.getList(this.allSymbol);
- }, 1000);
+ // this.timer = setInterval(() => {
+ this.getList(this.allSymbol);
+ // }, 1000);
},
getList(symbol) {
let t = this;
@@ -808,6 +1140,7 @@
}
this.getPageSize();
this.onInputSearch();
+ this.generateAllSvgPaths(); // 新增
// 右边榜单的数据
let rankDataList = [...this.activeList].sort(
this.compare(this.rankItem.type, this.rankItem.sort)
@@ -976,13 +1309,20 @@
@import url("../../assets/market/bamarket.css");
.tab-item {
- padding-top: 20px !important;
- padding-bottom: 10px !important;
+ /* padding-top: 20px !important; */
+ padding-bottom: 30px !important;
+ color: #b1b1b1;
+ /* padding: 10px 0 !important; */
+ height: 20px;
+ line-height: 20px;
cursor: pointer;
}
.tab-active {
- border-bottom: 4px solid #1d91ff;
+ color: #fff;
+ border-bottom: 3px solid rgb(255, 211, 2);
+ border-radius: 5px;
+ font-weight: 700;
}
.flex-item {
min-width: 386px;
@@ -992,4 +1332,80 @@
.flex-price {
font-weight: 600;
}
+
+.list {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ li {
+ flex: 0 0 24%;
+ min-height: 100px;
+ color: #fff;
+ margin-bottom: 20px;
+ background: rgb(33, 33, 33);
+ border-radius: 10px;
+ padding-bottom: 20px;
+ cursor: pointer;
+ .top {
+ display: flex;
+ align-items: center;
+ padding: 0 16px;
+ justify-content: space-between;
+ }
+ .top_left {
+ display: flex;
+ align-items: center;
+ padding: 16px 0;
+ img {
+ width: 40px;
+ height: 40px;
+ }
+ .name {
+ font-size: 20px;
+ color: #fff;
+ margin-left: 8px;
+ }
+ }
+ .top_right {
+ .fluctuation {
+ font-size: 19px;
+ }
+ }
+ .chart {
+ height: 64px;
+ width: 100%;
+ }
+ .bott {
+ margin-top: 16px;
+ display: flex;
+ align-items: center;
+ padding: 0 16px;
+ justify-content: space-between;
+ font-size: 19px;
+ .tradeBtn {
+ /* height: 20px; */
+ padding: 8px 16px;
+ font-size: 14px;
+ color: #fff;
+ background-image: linear-gradient(
+ 90deg,
+ rgb(247, 179, 40),
+ rgb(17, 38, 57)
+ );
+ border-radius: 30px;
+ }
+ }
+ }
+}
+
+.container {
+ width: 100%;
+ height: 100%;
+}
+.stroke {
+ stroke: #13ce66e6;
+}
+.css-search-6::placeholder {
+ color: #ccc !important;
+}
</style>
--
Gitblit v1.9.3