Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Sign in / Register
Toggle navigation
R
revised-version-h5
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
孟庆瑞
revised-version-h5
Commits
dc6022f5
Commit
dc6022f5
authored
Sep 07, 2024
by
jiaoyahui
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'master' into dev_jyh
parents
5f5dc49b
8435f583
Show whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
1564 additions
and
42 deletions
+1564
-42
package-lock.json
package-lock.json
+74
-41
main.js
src/main.js
+2
-1
index.js
src/router/router_modular/index.js
+20
-0
abnormalReview.vue
src/views/actualCombat/abnormalReview.vue
+82
-0
detail.vue
src/views/actualCombat/detail.vue
+976
-0
index.vue
src/views/actualCombat/index.vue
+287
-0
record.vue
src/views/actualCombat/record.vue
+123
-0
No files found.
package-lock.json
View file @
dc6022f5
...
...
@@ -2062,6 +2062,49 @@
"webpack-merge"
:
"^5.7.3"
,
"webpack-virtual-modules"
:
"^0.4.2"
,
"whatwg-fetch"
:
"^3.6.2"
},
"dependencies"
:
{
"@vue/vue-loader-v15"
:
{
"version"
:
"npm:vue-loader@15.11.1"
,
"resolved"
:
"https://registry.npmmirror.com/vue-loader/-/vue-loader-15.11.1.tgz"
,
"integrity"
:
"sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q=="
,
"dev"
:
true
,
"requires"
:
{
"@vue/component-compiler-utils"
:
"^3.1.0"
,
"hash-sum"
:
"^1.0.2"
,
"loader-utils"
:
"^1.1.0"
,
"vue-hot-reload-api"
:
"^2.3.0"
,
"vue-style-loader"
:
"^4.1.0"
},
"dependencies"
:
{
"hash-sum"
:
{
"version"
:
"1.0.2"
,
"resolved"
:
"https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz"
,
"integrity"
:
"sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA=="
,
"dev"
:
true
}
}
},
"json5"
:
{
"version"
:
"1.0.2"
,
"resolved"
:
"https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz"
,
"integrity"
:
"sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA=="
,
"dev"
:
true
,
"requires"
:
{
"minimist"
:
"^1.2.0"
}
},
"loader-utils"
:
{
"version"
:
"1.4.2"
,
"resolved"
:
"https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz"
,
"integrity"
:
"sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg=="
,
"dev"
:
true
,
"requires"
:
{
"big.js"
:
"^5.2.2"
,
"emojis-list"
:
"^3.0.0"
,
"json5"
:
"^1.0.1"
}
}
}
},
"@vue/cli-shared-utils"
:
{
...
...
@@ -2263,47 +2306,6 @@
"integrity"
:
"sha512-m9IgiteBpCkFaMNwCOBkFksA7z8QiKc30ooRuoXWUFRDu0mGyNPlFHmbncF0/Kra1RlX8QrmBbRaIxVvikaR0Q=="
,
"dev"
:
true
},
"@vue/vue-loader-v15"
:
{
"version"
:
"npm:vue-loader@15.11.1"
,
"resolved"
:
"https://registry.npmmirror.com/vue-loader/-/vue-loader-15.11.1.tgz"
,
"integrity"
:
"sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q=="
,
"dev"
:
true
,
"requires"
:
{
"@vue/component-compiler-utils"
:
"^3.1.0"
,
"hash-sum"
:
"^1.0.2"
,
"loader-utils"
:
"^1.1.0"
,
"vue-hot-reload-api"
:
"^2.3.0"
,
"vue-style-loader"
:
"^4.1.0"
},
"dependencies"
:
{
"hash-sum"
:
{
"version"
:
"1.0.2"
,
"resolved"
:
"https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz"
,
"integrity"
:
"sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA=="
,
"dev"
:
true
},
"json5"
:
{
"version"
:
"1.0.2"
,
"resolved"
:
"https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz"
,
"integrity"
:
"sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA=="
,
"dev"
:
true
,
"requires"
:
{
"minimist"
:
"^1.2.0"
}
},
"loader-utils"
:
{
"version"
:
"1.4.2"
,
"resolved"
:
"https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz"
,
"integrity"
:
"sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg=="
,
"dev"
:
true
,
"requires"
:
{
"big.js"
:
"^5.2.2"
,
"emojis-list"
:
"^3.0.0"
,
"json5"
:
"^1.0.1"
}
}
}
},
"@vue/web-component-wrapper"
:
{
"version"
:
"1.3.0"
,
"resolved"
:
"https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz"
,
...
...
@@ -3860,6 +3862,22 @@
"integrity"
:
"sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w=="
,
"dev"
:
true
},
"echarts"
:
{
"version"
:
"5.5.1"
,
"resolved"
:
"https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz"
,
"integrity"
:
"sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA=="
,
"requires"
:
{
"tslib"
:
"2.3.0"
,
"zrender"
:
"5.6.0"
},
"dependencies"
:
{
"tslib"
:
{
"version"
:
"2.3.0"
,
"resolved"
:
"https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz"
,
"integrity"
:
"sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
},
"ee-first"
:
{
"version"
:
"1.1.1"
,
"resolved"
:
"https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz"
,
...
...
@@ -8734,6 +8752,21 @@
"dev"
:
true
}
}
},
"zrender"
:
{
"version"
:
"5.6.0"
,
"resolved"
:
"https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz"
,
"integrity"
:
"sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg=="
,
"requires"
:
{
"tslib"
:
"2.3.0"
},
"dependencies"
:
{
"tslib"
:
{
"version"
:
"2.3.0"
,
"resolved"
:
"https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz"
,
"integrity"
:
"sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
}
}
}
src/main.js
View file @
dc6022f5
...
...
@@ -4,7 +4,7 @@ import router from './router'
import
server
from
'./api/test'
;
import
store
from
'./store'
import
'amfe-flexible'
;
import
V
ant
from
'vant'
;
import
v
ant
from
'vant'
;
import
'vant/lib/index.css'
;
import
axios
from
'axios'
;
Vue
.
use
(
Vant
);
...
...
@@ -13,6 +13,7 @@ Vue.prototype.server = server; //引入接口服务
new
Vue
({
axios
,
router
,
server
,
store
,
...
...
src/router/router_modular/index.js
View file @
dc6022f5
...
...
@@ -45,7 +45,27 @@ const router_modular = [
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component
:
()
=>
import
(
/* webpackChunkName: "about" */
'@/views/AboutView.vue'
)
},{
path
:
'/actualCombat'
,
name
:
'actualCombat'
,
component
:
()
=>
import
(
'@/views/actualCombat/index'
)
},
{
path
:
'/abnormalReview'
,
name
:
'abnormalReview'
,
component
:
()
=>
import
(
'@/views/actualCombat/abnormalReview'
)
},
{
path
:
'/record'
,
name
:
'record'
,
component
:
()
=>
import
(
'@/views/actualCombat/record'
)
},
{
path
:
'/detail'
,
name
:
'detail'
,
component
:
()
=>
import
(
'@/views/actualCombat/detail'
)
}
]
export
default
router_modular
\ No newline at end of file
src/views/actualCombat/abnormalReview.vue
0 → 100644
View file @
dc6022f5
<
template
>
<div
class=
"content"
>
<div
class=
"listBox"
>
<div
class=
"left-box"
>
<div
class=
"left-time"
>
<span
style=
"display:block;font-size:0.3rem;color:gray"
>
12-19
</span>
<span
style=
"display:block;font-size:0.3rem;color:gray"
>
09:39
</span>
</div>
<div
class=
"left-line"
>
</div>
</div>
<div
class=
"right-box"
>
<span
style=
"display:block;font-size:0.5rem; font-weight: bold;margin-top:0.2rem"
>
盘中点评
</span>
<!--
<van-text-ellipsis
:content=
"text"
expand-text=
"展开"
collapse-text=
"收起"
/>
-->
<span
ref=
"myDiv"
class=
"overText"
style=
"font-size:0.35rem;margin-top:0.2rem;"
>
盘中点评这是啊飒飒Asia哦撒发达啊沙发沙发破萨满怕是安检门破手机批发爱上方面强迫我反对换个地方恢复鬼画符发是反对鬼地方和梵蒂冈很快就会给客户票佛爱上放大泼妇发票豆腐干地方和广泛的回复
</span>
</div>
</div>
</div>
</
template
>
<
script
>
// import { mapState, mapMutations } from "vuex";
// import testApi from "@/api/test";
export
default
{
computed
:
{
// ...mapState("store_modular", ["name"]),
},
data
()
{
return
{
num
:
0
,
list
:
[],
};
},
methods
:
{
// ...mapMutations("store_modular", ["operation"]),
},
};
</
script
>
<
style
scoped
>
.listBox
{
height
:
3rem
;
width
:
100%
;
display
:
flex
;
/* background-color: bisque; */
}
.left-box
{
width
:
15%
;
text-align
:
center
;
height
:
3rem
;
/* background-color:aqua; */
}
.left-time
{
width
:
100%
;
height
:
30%
;
/* background-color: blueviolet; */
}
.right-box
{
width
:
80%
;
height
:
100%
;
border-bottom
:
1px
solid
gray
;
margin-left
:
2%
;
}
.overText
{
overflow
:
hidden
;
text-overflow
:
ellipsis
;
width
:
100%
;
/*将对象作为弹性伸缩盒子模型显示*/
display
:
-webkit-box
;
/*限制文本行数*/
-webkit-line-clamp
:
4
;
/*子元素的排列方式*/
-webkit-box-orient
:
vertical
;
/*将对象作为弹性伸缩盒子模型显示*/
}
</
style
>
\ No newline at end of file
src/views/actualCombat/detail.vue
0 → 100644
View file @
dc6022f5
<
template
>
<div
class=
"content"
>
<div
class=
"top-box"
>
<div
class=
"typeList"
>
<div
class=
"type-box"
>
<span>
激进型
</span>
</div>
<div
class=
"type-box"
>
<span>
中风险
</span>
</div>
<span
class=
"numberPeople"
>
117人已订阅
</span>
</div>
<span
class=
"profit"
>
总收益
</span>
<span
class=
"percentage"
>
40.27%
</span>
<!-- 线 -->
<div
class=
"line"
></div>
<div
class=
"head-box"
>
<!--
<div
class=
"tab-box"
>
<span>
今年收益
</span>
</div>
-->
<div
class=
"tab-box"
>
<span>
月收益
</span>
</div>
<div
class=
"tab-box"
>
<span>
仓位
</span>
</div>
<div
class=
"tab-box"
>
<span>
最大回撤
</span>
<van-icon
name=
"question-o"
@
click=
"clickRetracement()"
style=
"margin-left:2px"
/>
</div>
<div
class=
"tab-box"
>
<span>
胜率
</span>
<van-icon
name=
"question-o"
@
click=
"clickWinning()"
style=
"margin-left:2px"
/>
</div>
</div>
<div
class=
"head-box-Two"
>
<!--
<van-button
type=
"primary"
>
按钮
</van-button>
-->
<!--
<div
class=
"tab-box-Two"
>
<span>
-10.83%
</span>
</div>
-->
<div
class=
"tab-box-Two"
>
<span>
-10.83%
</span>
</div>
<div
class=
"tab-box-Two"
>
<span>
-10.83%
</span>
</div>
<div
class=
"tab-box-Two"
>
<span>
-10.83%
</span>
</div>
<div
class=
"tab-box-Two"
>
<span>
-10.83%
</span>
</div>
</div>
</div>
<div
class=
"title-box"
>
<span
class=
"title-text"
>
08-14 11:12 | 当⼊选002583⼤涨5.10%
</span>
</div>
<!-- 分析师姓名 -->
<div
class=
"infoBox"
>
<span
class=
"infoName"
>
姓名
</span>
<span
class=
"infoList"
>
简介减价二发生的该方法根据官方回复人很多家庭一款基于
</span>
<div
class=
"infoType"
>
<span
>
#金牌投顾
</span>
</div>
</div>
<div
style=
"width:100%;height:1rem;display:flex"
>
<div
class=
"analyst"
>
<span>
异动点评
</span>
</div>
<div
style=
"font-size: 0.3rem;
height: 1rem;
color:gray;
margin-top: 0.4rem;
margin-left: 3rem;
line-height: 1rem;"
>
<span>
查看更多
</span><van-icon
name=
"arrow"
/>
</div>
</div>
<!-- 点评信息 -->
<div
class=
"reviewInfo"
>
</div>
<div
style=
"width:100%;height:1rem;display:flex"
>
<div
class=
"analystTwo"
>
<span>
收益曲线
</span>
</div>
<div
style=
"font-size: 0.25rem;
height: 1rem;
width: 109%;
margin-top: 0.6rem;
line-height: 1rem;"
>
<van-radio-group
v-model=
"radio"
direction=
"horizontal"
>
<van-radio
name=
"1"
icon-size=
"12px"
checked-color=
"#ee0a24"
>
近一月
</van-radio>
<van-radio
name=
"2"
icon-size=
"12px"
checked-color=
"#ee0a24"
>
近三月
</van-radio>
<van-radio
name=
"3"
icon-size=
"12px"
checked-color=
"#ee0a24"
>
近一年
</van-radio>
<van-radio
name=
"4"
icon-size=
"12px"
checked-color=
"#ee0a24"
>
成立以来
</van-radio>
</van-radio-group>
</div>
</div>
<!-- 折线图 -->
<div
id=
"myChart"
></div>
<div
class=
"analystTwo"
>
<span>
持仓明细
</span>
</div>
<div
class=
"profitBox"
>
<div
class=
"profitLeft"
>
<span
class=
"profitTitle"
>
收益率:
</span>
<span
class=
"profitNumber"
>
40.27%
</span>
</div>
<div
class=
"profitright"
>
<span
class=
"profitTitle"
>
总收益:
</span>
<span
class=
"profitNumberTwo"
>
402697.6
</span>
</div>
</div>
<div
class=
"profitBoxTwo"
style=
"margin-top:-0.3rem"
>
<div
class=
"profitLeft"
>
<span
class=
"profitTitle"
>
初始资金:
</span>
<span
class=
"profitNumber"
>
10000000.00
</span>
</div>
<div
class=
"profitright"
>
<span
class=
"profitTitle"
>
仓位:
</span>
<span
class=
"profitNumberTwo"
>
26.35%
</span>
</div>
</div>
<div
class=
"profitBoxTwo"
style=
"margin-top:0.3rem"
>
<div
class=
"profitLeft"
>
<span
class=
"profitTitle"
>
可用资金:1033097.60
</span>
<!--
<span
class=
"profitNumber"
>
10000000.00
</span>
-->
</div>
<div
class=
"profitright"
>
<span
class=
"profitTitle"
>
股票市值:369600.00
</span>
<!--
<span
class=
"profitNumberTwo"
>
26.35%
</span>
-->
</div>
</div>
<div
class=
"head-box"
style=
"color:gray"
>
<!--
<div
class=
"tab-box"
>
<span>
今年收益
</span>
</div>
-->
<div
class=
"tab-box"
>
<span>
当前持仓
</span>
</div>
<div
class=
"tab-box"
>
<span>
当前价/成本价
</span>
</div>
<div
class=
"tab-box"
>
<span>
浮动收益
</span>
<!--
<van-icon
name=
"question-o"
@
click=
"clickRetracement()"
style=
"margin-left:2px"
/>
-->
</div>
<div
class=
"tab-box"
>
<span>
仓位占比
</span>
<!--
<van-icon
name=
"question-o"
@
click=
"clickWinning()"
style=
"margin-left:2px"
/>
-->
</div>
</div>
<!-- 已售罄 -->
<div
class=
"soldOut"
>
<div
class=
"soltBox"
>
</div>
<div
class=
"soldText"
>
<span>
-1.12%
</span>
</div>
<div
class=
"soldText"
>
<span>
26.35%
</span>
</div>
</div>
<div
class=
"analystTwo"
>
<span>
股票配置
</span>
</div>
<div
id=
"pieChart1"
ref=
"pieChartRef1"
style=
"width: 100%; height: 250px"
></div>
<div
style=
"width:100%;height:1rem;display:flex"
>
<div
class=
"analystTwo"
>
<span>
最新调仓
</span>
</div>
<div
style=
"font-size: 0.3rem;
color:gray;
height: 1rem;
margin-top: 0.4rem;
margin-left: 3rem;
line-height: 1rem;"
>
<span>
交易记录
</span><van-icon
name=
"arrow"
/>
</div>
</div>
<div
class=
"head-boxThree"
style=
"color:gray;margin-top:0.8rem"
>
<!--
<div
class=
"tab-box"
>
<span>
今年收益
</span>
</div>
-->
<div
class=
"tab-boxThree"
>
<span>
买/卖
</span>
</div>
<div
class=
"tab-boxThree"
>
<span>
当前持仓
</span>
</div>
<div
class=
"tab-boxThree"
>
<span>
价格
</span>
<!--
<van-icon
name=
"question-o"
@
click=
"clickRetracement()"
style=
"margin-left:2px"
/>
-->
</div>
<div
class=
"tab-boxThree"
>
<span>
仓位
</span>
<!--
<van-icon
name=
"question-o"
@
click=
"clickWinning()"
style=
"margin-left:2px"
/>
-->
</div>
<div
class=
"tab-boxThree"
>
<span>
时间
</span>
<!--
<van-icon
name=
"question-o"
@
click=
"clickWinning()"
style=
"margin-left:2px"
/>
-->
</div>
</div>
<div
class=
"contect-list"
>
<div
class=
"mai"
>
<span
>
卖
</span>
</div>
<div
class=
"contectSold"
@
click=
"showPopup"
>
</div>
<!--
<div
class=
"contectBox"
>
<span>
300***
</span>
</div>
<div
class=
"contectBox"
>
<span>
*
</span>
</div>
-->
<div
class=
"contectBox"
>
<span>
100%
</span>
</div>
<div
class=
"contectBox"
>
<span
style=
"display:block;height:0.5rem;margin-top:-0.3rem"
>
08/26
</span>
<span>
14:28
</span>
</div>
</div>
<!-- 弹出层 -->
<van-popup
v-model=
"show"
position=
"bottom"
:style=
"
{ height: '70%' }">
<div
class=
"popup-title"
>
<span
style=
"font-size: 0.5rem;
font-weight: bold;"
>
热点精选
</span><span
style=
"font-size: 0.4rem;color:gray;margin-left:0.3rem"
>
智能策略
</span>
<span
style=
"font-size: 0.3rem;color:gray;display:block"
>
热点股票强度深度建模后优选好股票
</span>
</div>
<div
class=
"popup-title"
style=
"margin-bottom:0.5rem"
>
<span
style=
"font-size: 0.4rem;"
>
产品周期
</span>
</div>
<div
style=
"font-size: 0.3rem;
height: 3rem;
width: 90%;
margin: 0 auto;
"
>
<van-radio-group
v-model=
"radio2"
>
<div
class=
"checkBox"
v-for=
"(i,index) in checkList"
>
<van-radio
:name=
"i.id"
icon-size=
"12px"
checked-color=
"#ee0a24"
>
{{
i
.
name
}}
</van-radio><span
class=
"usePoint"
>
{{
i
.
point
}}
</span><span
class=
"usePointTwo"
>
积分
</span>
</div>
<!--
<van-radio
name=
"2"
icon-size=
"12px"
checked-color=
"#ee0a24"
>
单选框 2
</van-radio>
-->
</van-radio-group>
</div>
<div
class=
"checkBoxTwo"
style=
"margin-bottom:0.5rem;color:black"
>
<span
style=
"font-size: 0.4rem;"
>
当前积分
</span><span
class=
"usePointThree"
>
12435
</span><span
class=
"usePointFour"
>
积分
</span>
</div>
<div
class=
"exchange"
>
<span>
立即兑换
</span>
</div>
</van-popup>
</div>
</
template
>
<
script
setup
>
</
script
>
<
script
>
import
{
mapState
,
mapMutations
}
from
"vuex"
;
import
{
Dialog
,
Button
,
Popup
}
from
'vant'
;
import
*
as
echarts
from
'echarts'
;
// showDialog({ message: '提示' });
// import { createApp } from 'vue';
// import { Dialog } from 'vant';
// const app = createApp();
// app.use(Dialog);
// import testApi from "@/api/test";
export
default
{
computed
:
{
...
mapState
(
"store_modular"
,
[
"name"
]),
},
components
:
{
[
Button
.
name
]:
Button
,
[
Dialog
.
name
]:
Dialog
,
},
data
()
{
return
{
num
:
0
,
radio
:
'1'
,
radio2
:
'1'
,
show
:
false
,
list
:
[],
checkList
:[
{
id
:
'1'
,
name
:
'1个月'
,
point
:
'1222'
,
},
{
id
:
'2'
,
name
:
'3个月'
,
point
:
'1222'
,
},
{
id
:
'3'
,
name
:
'6个月'
,
point
:
'1222'
,
},
{
id
:
'4'
,
name
:
'12个月'
,
point
:
'1222'
,
}
],
echartsOption
:
{
// echarts选项,所有绘图数据和样式都在这里设置
legend
:
{
//图表上方的图例
data
:
[
'腾讯'
,
'阿里巴巴'
,
'华为'
,
'字节跳动'
]
},
xAxis
:
{
type
:
'category'
,
data
:
[
'Mon'
,
'Tue'
,
'Wed'
,
'Thu'
,
'Fri'
,
'Sat'
,
'Sun'
],
// x轴数据
// name: '日期', // x轴名称
nameTextStyle
:
{
// x轴名称样式
fontWeight
:
600
,
fontSize
:
18
}
},
yAxis
:
{
type
:
'value'
,
position
:
'right'
,
// name: '市值', // y轴名称
nameTextStyle
:
{
// y轴名称样式
fontWeight
:
600
,
fontSize
:
18
}
},
tooltip
:
{
//鼠标放到图上的数据展示样式
trigger
:
'axis'
},
series
:
[
//每条折线的数据系列
{
name
:
'腾讯'
,
data
:
[
820
,
932
,
901
,
934
,
1290
,
1330
,
1320
],
type
:
'line'
},
{
name
:
'阿里巴巴'
,
data
:
[
620
,
711
,
823
,
934
,
1445
,
1456
,
1178
],
type
:
'line'
},
{
name
:
'华为'
,
data
:
[
612
,
920
,
1140
,
1160
,
1190
,
1234
,
1321
],
type
:
'line'
},
{
name
:
'字节跳动'
,
data
:
[
234
,
320
,
453
,
567
,
789
,
999
,
1200
],
type
:
'line'
}
],
},
chart
:
null
,
_thisForChart
:
null
,
_thisForWindow
:
null
,
colorItem
:
{
"北京"
:
'#ff6161'
,
"上海"
:
'#e0815b'
,
"广州"
:
'#ffaf33'
,
"深圳"
:
'#637be6'
,
"成都"
:
'#a1b2ff'
,
// "西安": '#b3daff',
},
};
},
mounted
(){
let
myChart
=
echarts
.
init
(
document
.
getElementById
(
'myChart'
),
'light'
)
// 初始化echarts, theme为light
myChart
.
setOption
(
this
.
echartsOption
)
// echarts设置选项
this
.
$nextTick
(()
=>
{
this
.
initPieChart
();
this
.
addEventListenerToSidebarContainer
(
this
)
this
.
addEventListenerToWindowResize
(
this
)
});
},
beforeDestroy
()
{
this
.
removeEventListenerToSidebarContainer
()
this
.
removeEventListenerToWindowResize
()
},
methods
:
{
...
mapMutations
(
"store_modular"
,
[
"operation"
]),
getList
()
{
this
.
server
.
getListAPI
({
num
:
this
.
num
})
.
then
((
res
)
=>
(
this
.
list
=
res
.
data
.
data
))
.
catch
((
err
)
=>
console
.
log
(
err
))
.
finally
(()
=>
{
this
.
$toast
.
clear
()});
if
(
this
.
num
==
0
){
this
.
$toast
.
fail
(
"数量不能为0"
);
return
}
// this.$toast.loading({
// message: '加载中...',
// forbidClick: true,
// duration:0
// });
},
showPopup
(){
this
.
show
=
true
},
initPieChart
()
{
let
echartData
=
[
{
name
:
'北京'
,
value
:
'0.99'
,
},
{
name
:
'上海'
,
value
:
'0.29'
,
},
{
name
:
'广州'
,
value
:
'0.44'
,
},
{
name
:
'深圳'
,
value
:
'0.14'
,
},
{
name
:
'成都'
,
value
:
'0.21'
,
},
// {
// name:'西安',
// value: '0.77',
// },
]
var
chartDom
=
document
.
getElementById
(
'pieChart1'
);
this
.
chart
=
echarts
.
init
(
chartDom
);
let
handleEchartData
=
echartData
.
map
((
item3
)
=>
{
return
{
value
:
item3
.
value
,
name
:
item3
.
name
,
itemStyle
:
{
color
:
this
.
colorItem
[
item3
.
name
]
}
}
})
let
option
=
{
// color: ['#EE3F3F','#ff6161','#e0815b','#e0a188','#FFB441','#FFDAA1',],
// tooltip: {
// show: true,
// trigger: 'item',
// backgroundColor: 'rgba( 0, 0, 0,0.7)',
// borderColor: 'rgba( 0, 0, 0,0.7)',
// triggerOn: "click", // 点击事件
// enterable: true, // 鼠标可移入提示框浮层中,默认为false
// position: ['53%','40%'],
// fontSize: 10,
// formatter:function(params, ticket,callback) {
// 实际请求接口,获取对应的数据
// let req_data = {
// name: params.name,
// }
// testApi.getDetail(req_data).then((res) => {
// if (res.data && res.data.length) {
// for(let i = 0; i
<
res
.
data
.
length
;
i
++
)
{
// list.push(
// "
<
div
style
=
'display:flex;align-items:center;justify-content:space-between;transform:scale(0.9)'
><
span
style
=
'padding-right:10px;margin-bottom: -20px;color: #fff;'
>
" + res.data[i].code + "
<
/span>" + "<span style='padding-right:10px;margin-bottom: -20px;color: #fff;'>" + res.data
[
i
]
.name + "</
span
>
"+ "
<
span
style
=
'padding-right:10px;margin-bottom: -20px;color: #fff;'
>
" + "
权重
:
" + res.data[i].WEIGHT + '%' + "
<
/span></
div
>
"
// )
// }
// listItem = list.length < 12 ? "
<
div
style
=
'margin-bottom:8px;padding-bottom:8px;'
>
" + list.join('<br/>') + "
<
/div>" : "<div style='height: 235px;overflow-y: auto;margin-bottom:8px;padding-bottom:8px;'>" + list.join
(
'<br/
>
') + "</div>"
// callback(ticket, listItem)
// } else {
// listItem = "<div>"+ '
数据为空
' + "</div>"
// callback(ticket, listItem)
// }
// })
// return "<span>"+ "数据请求中..." + "</span>"
// }
// },
legend: {
bottom: 0,
textStyle: {
rich: {
name: {},
value: {
align: '
right
',
padding: [0, -80, 0 ,0],
}
}
},
formatter: function(name) {
let value
for (let i = 0; i < echartData.length; i++) {
if (echartData[i].name === name) {
value = echartData[i].value
}
}
var val = value
return [`{name|${name}}` + '
:
' + `{value|${val}%}`]
},
},
series: [
{
name: '',
type: '
pie
',
radius: ['
45
%
', '
65
%
'],
center:['
50
%
' ,'
40
%
'],
avoidLabelOverlap: true,
label: {
show: false,
position: '
center
',
// formatter: function(params) {
// return '
{
name
|
' + params.name + '
}
' + '
\
n
' + '
{
value
|
' + params.data.value + '
%
' + '
}
'
// },
// rich: {
// name: {
// fontSize: 14,
// },
// value: {
// fontSize: 20,
// lineHeight: 30,
// }
// }
},
emphasis: {
label: {
show: true,
lineHeight: 30,
formatter: function(params) {
return '
{
name
|
' + params.name + '
}
' + '
\
n
' + '
{
value
|
' + params.data.value + '
%
' + '
}
'
},
rich: {
name: {
// color: "inherit",
fontSize: 14,
},
value: {
color: "inherit",
// fontSize: 20,
// lineHeight: 30,
}
},
textStyle: {
fontSize: 20,
fontWeight: 700,
},
}
},
labelLine: {
show: false,
length: 7,
length2: 6,
lineStyle: {}
},
data: handleEchartData,
}
]
};
this.chart.setOption(option);
},
// 监听侧边栏导航的宽度发生变化
addEventListenerToSidebarContainer(_this) {
let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];
this._thisForChart = _this;
sidebarContainer &&
sidebarContainer.addEventListener("transitionend", this.sidebarResizeHandler);
},
removeEventListenerToSidebarContainer() {
let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];
this._thisForChart = null
sidebarContainer &&
sidebarContainer.removeEventListener("transitionend", this.sidebarResizeHandler);
},
sidebarResizeHandler(e) {
if (e.propertyName === "width") {
this._thisForChart.chart.resize();
}
},
// window 的尺寸发生变化的时候 会执行图表的resize
addEventListenerToWindowResize(_this) {
this._thisForWindow = _this;
window.addEventListener("resize", this.windowResizeHandler);
},
removeEventListenerToWindowResize(_this) {
this. _thisForWindow = null
window.removeEventListener("resize", this.windowResizeHandler);
},
windowResizeHandler(e) {
this._thisForWindow.chart.resize();
},
//最大回撤
clickRetracement(){
Dialog.alert({
title: '
最大回撤
',
confirmButtonText:'
我知道了
',
message: '
组合近一年以来经历过的一次最大亏损比率。最大亏损越高,说明该产品风险越高。
',
}).then(() => {
// on close
});
},
//胜率
clickWinning(){
Dialog.alert({
title: '
胜率
',
confirmButtonText:'
我知道了
',
message: '
(
组合中历史获利了结的股票数
+
当前持仓浮盈的股票数
)
/
历史曾买入的股票总数。胜率越高
,
说明跟随该产品的盈利的可能性越高。
',
}).then(() => {
// on close
});
}
},
};
</
script
>
<
style
scoped
>
.top-box
{
width
:
100%
;
height
:
7rem
;
padding-top
:
0.3rem
;
background-color
:
rgb
(
226
,
74
,
68
);
/* border-radius: 0 0 3rem 3rem; */
}
.typeList
{
height
:
1rem
;
width
:
100%
;
display
:
flex
;
}
.type-box
{
height
:
0.7rem
;
margin-left
:
0.3rem
;
width
:
2rem
;
border
:
1px
solid
white
;
color
:
white
;
line-height
:
0.7rem
;
font-size
:
0.3rem
;
text-align
:
center
;
border-radius
:
0.1rem
;
}
.numberPeople
{
font-size
:
0.3rem
;
color
:
white
;
margin-left
:
3.5rem
;
margin-top
:
0.2rem
;
}
.profit
{
display
:
block
;
width
:
100%
;
height
:
1.3rem
;
text-align
:
center
;
font-size
:
0.5rem
;
/* font-weight: bold; */
color
:
white
;
margin-top
:
1rem
;
}
.percentage
{
display
:
block
;
width
:
100%
;
height
:
1.5rem
;
text-align
:
center
;
font-size
:
0.7rem
;
font-weight
:
bold
;
color
:
white
;
/* margin-top: 0.1rem; */
}
.line
{
height
:
0.1rem
;
width
:
100%
;
/* background-color: gray; */
border-bottom
:
1px
solid
rgb
(
216
,
216
,
216
);
}
.head-box
{
height
:
1.2rem
;
width
:
100%
;
display
:
flex
;
color
:
white
;
/* background-color: yellow; */
}
.head-box-Two
{
height
:
1rem
;
width
:
100%
;
display
:
flex
;
color
:
white
;
}
.head-boxThree
{
height
:
1rem
;
width
:
100%
;
display
:
flex
;
color
:
white
;
}
.tab-boxThree
{
width
:
20%
;
height
:
100%
;
text-align
:
center
;
line-height
:
0.4rem
;
font-size
:
0.35rem
;
}
.tab-box-Two
{
width
:
25%
;
height
:
100%
;
text-align
:
center
;
line-height
:
0.4rem
;
font-size
:
0.35rem
;
}
.tab-box
{
width
:
25%
;
height
:
100%
;
text-align
:
center
;
line-height
:
1.2rem
;
font-size
:
0.35rem
;
/* background-color: aquamarine; */
}
.title-box
{
height
:
1rem
;
width
:
100%
;
background-color
:
white
;
font-size
:
0.3rem
;
line-height
:
1rem
;
border-radius
:
0.3rem
0.3rem
0
0
;
margin-top
:
-0.2rem
;
}
.title-text
{
margin-left
:
0.5rem
;
}
.infoBox
{
height
:
4rem
;
width
:
90%
;
background-color
:
rgb
(
226
,
74
,
68
);
border-radius
:
0.1rem
;
margin
:
auto
;
}
.infoName
{
width
:
94%
;
height
:
1rem
;
font-size
:
0.5rem
;
color
:
white
;
margin
:
auto
;
display
:
block
;
line-height
:
1rem
;
/* background-color:blueviolet ; */
}
.analyst
{
height
:
0.8rem
;
line-height
:
0.8rem
;
margin-left
:
0.5rem
;
margin-top
:
0.5rem
;
/* margin-top: 0.2rem; */
/* color: white; */
border-left
:
0.1rem
solid
rgb
(
226
,
74
,
68
);
width
:
4rem
;
padding-left
:
0.3rem
;
/* background-color: aqua; */
font-size
:
0.5rem
;
/* font-weight: bold; */
}
.analystTwo
{
height
:
0.8rem
;
line-height
:
0.8rem
;
margin-left
:
0.5rem
;
margin-top
:
0.5rem
;
/* margin-top: 0.2rem; */
/* color: white; */
border-left
:
0.1rem
solid
rgb
(
226
,
74
,
68
);
width
:
4rem
;
padding-left
:
0.3rem
;
/* background-color: aqua; */
font-size
:
0.4rem
;
font-weight
:
bold
;
}
.infoList
{
width
:
94%
;
height
:
2rem
;
font-size
:
0.3rem
;
color
:
white
;
margin
:
auto
;
/* background-color:yellowgreen ; */
display
:
block
;
}
.infoType
{
width
:
94%
;
height
:
1rem
;
font-size
:
0.3rem
;
color
:
white
;
margin
:
auto
;
display
:
flex
;
}
.reviewInfo
{
width
:
94%
;
height
:
4rem
;
font-size
:
0.3rem
;
/* color: white; */
margin
:
0.7rem
auto
;
background-color
:
yellowgreen
;
}
#myChart
{
width
:
90%
;
height
:
5rem
;
margin
:
0
auto
;
margin-top
:
5%
;
}
.profitBox
{
width
:
94%
;
height
:
1.2rem
;
font-size
:
0.3rem
;
/* color: white; */
margin
:
0.7rem
auto
;
display
:
flex
;
background-color
:
yellowgreen
;
}
.profitBoxTwo
{
width
:
94%
;
height
:
1.2rem
;
font-size
:
0.3rem
;
/* color: white; */
margin
:
0
auto
;
display
:
flex
;
background-color
:
yellowgreen
;
}
.profitLeft
{
width
:
50%
;
height
:
100%
;
background-color
:
royalblue
;
}
.profitright
{
width
:
50%
;
height
:
100%
;
background-color
:
yellow
;
}
.profitTitle
{
display
:
block
;
font-size
:
0.4rem
;
}
.profitNumber
{
display
:
block
;
font-size
:
0.5rem
;
margin-top
:
0.1rem
;
color
:
rgb
(
226
,
74
,
68
);
}
.profitNumberTwo
{
display
:
block
;
font-size
:
0.5rem
;
margin-top
:
0.1rem
;
/* color: rgb(226, 74, 68); */
}
.soldOut
{
width
:
94%
;
height
:
1.2rem
;
font-size
:
0.3rem
;
/* color: white; */
margin
:
0
auto
;
display
:
flex
;
/* background-color:yellowgreen ; */
}
.soltBox
{
width
:
50%
;
height
:
100%
;
background-color
:
gray
;
/* text-align: center;
line-height: 1.2rem;
font-size: 0.35rem; */
}
.soldText
{
width
:
25%
;
height
:
100%
;
/* background-color:gray ; */
text-align
:
center
;
line-height
:
1.2rem
;
/* font-size: 0.35rem; */
}
.contect-list
{
display
:
flex
;
height
:
1.5rem
;
width
:
100%
;
/* background-color: yellowgreen; */
font-size
:
0.5rem
;
}
.contectBox
{
width
:
20%
;
height
:
100%
;
text-align
:
center
;
line-height
:
1.5rem
;
}
.contectSold
{
height
:
100%
;
width
:
40%
;
background
:
gray
;
border-radius
:
0.2rem
;
}
.mai
{
display
:
block
;
height
:
1rem
;
width
:
1rem
;
border
:
1px
solid
rgb
(
69
,
137
,
235
);
color
:
rgb
(
69
,
137
,
235
);
text-align
:
center
;
line-height
:
1rem
;
margin
:
auto
;
border-radius
:
50%
;
}
.popup-title
{
width
:
90%
;
margin
:
0
auto
;
}
.checkBox
{
width
:
100%
;
height
:
0.8rem
;
position
:
relative
;
}
.checkBoxTwo
{
width
:
90%
;
height
:
0.8rem
;
margin
:
0
auto
;
position
:
relative
;
line-height
:
0.8rem
;
}
.usePoint
{
position
:
absolute
;
right
:
0.8rem
;
color
:
red
;
font-size
:
0.4rem
;
top
:
0
;
}
.usePointTwo
{
position
:
absolute
;
right
:
0
;
color
:
red
;
font-size
:
0.3rem
;
top
:
0.05rem
;
}
.usePointThree
{
position
:
absolute
;
top
:
0.1rem
;
right
:
0.8rem
;
font-size
:
0.4rem
;
}
.usePointFour
{
position
:
absolute
;
top
:
0.1rem
;
right
:
0
;
font-size
:
0.3rem
;
}
.exchange
{
width
:
5rem
;
height
:
1rem
;
background-color
:
rgb
(
226
,
74
,
68
);
color
:
white
;
line-height
:
1rem
;
border-radius
:
0.2rem
;
text-align
:
center
;
font-size
:
0.4rem
;
margin
:
3rem
auto
;
}
</
style
>
\ No newline at end of file
src/views/actualCombat/index.vue
0 → 100644
View file @
dc6022f5
<
template
>
<div
class=
"content"
>
<div
class=
"top-box"
>
<div
class=
"analyst"
>
<span>
明星分析师
</span>
</div>
<div
class=
"tab-box"
>
<span
:class=
"tabIndex==0?'table-contect':'table-contectHid'"
@
click=
"clickTab('0','总收益')"
>
总收益
</span>
<span
:class=
"tabIndex==1?'table-contect':'table-contectHid'"
@
click=
"clickTab('1','今年收益')"
>
今年收益
</span>
<span
:class=
"tabIndex==2?'table-contect':'table-contectHid'"
@
click=
"clickTab('2','月收益')"
>
月收益
</span>
<span
:class=
"tabIndex==3?'table-contect':'table-contectHid'"
@
click=
"clickTab('3','回撤率')"
>
回撤率
</span>
<span
:class=
"tabIndex==4?'table-contect':'table-contectHid'"
@
click=
"clickTab('4','胜率')"
>
胜率
</span>
<span
:class=
"tabIndex==5?'table-contect':'table-contectHid'"
@
click=
"clickTab('5','仓位')"
>
仓位
</span>
<!--
<van-tabs
type=
"card"
>
<van-tab
title=
"标签 1"
>
内容 1
</van-tab>
<van-tab
title=
"标签 2"
>
内容 2
</van-tab>
<van-tab
title=
"标签 3"
>
内容 3
</van-tab>
</van-tabs>
-->
</div>
<!-- 卡片盒子 -->
<div
class=
"card-box"
>
<div
class=
"left-card"
>
<div
class=
"card-title"
>
<span
style=
"display:block;margin-bottom:0.1rem"
>
{{
tableName
}}
</span>
<span
style=
"display:block;font-size:0.5rem;"
>
34.59%
</span>
</div>
<span
class=
"left-contect"
>
大展宏图2024
</span>
<span
class=
"clickBtn"
>
解锁订阅
</span>
</div>
<div
class=
"center-card"
>
<div
class=
"card-title"
>
<span
style=
"display:block;margin-bottom:0.1rem"
>
{{
tableName
}}
</span>
<span
style=
"display:block;font-size:0.5rem;"
>
34.59%
</span>
</div>
<span
class=
"left-contect"
>
大展宏图2024
</span>
<span
class=
"clickBtn"
>
解锁订阅
</span>
</div>
<div
class=
"rigth-card"
>
<div
class=
"card-title"
>
<span
style=
"display:block;margin-bottom:0.1rem"
>
{{
tableName
}}
</span>
<span
style=
"display:block;font-size:0.5rem;"
>
34.59%
</span>
</div>
<span
class=
"left-contect"
>
大展宏图2024
</span>
<span
class=
"clickBtn"
>
解锁订阅
</span>
</div>
</div>
<!-- 内容盒子 -->
<div
class=
"bottomcontect-box"
>
<div
class=
"topthis-box"
>
<div
class=
"top-left"
>
<span
style=
"display:block;font-size:0.5rem"
>
大展宏图2024
</span>
<span
style=
"display:block;font-size:0.5rem"
>
{{
tableName
}}
:
<span
style=
"color:red"
>
12.20%
</span>
</span>
</div>
<div
class=
"top-right"
>
<span
class=
"clickBtnTwo"
>
解锁订阅
</span>
</div>
</div>
<div
class=
"bottomthis-box"
>
<span
style=
"display:block;font-size:0.4rem;margin-left:0.2rem"
>
仓位 99.90%
</span><span
style=
"display:block;font-size:0.5rem;font-size:0.4rem;margin-left:0.4rem"
>
周收益 99.90%
</span><span
style=
"display:block;font-size:0.5rem;font-size:0.4rem;margin-left:0.4rem"
>
月收益 99.90%
</span>
</div>
</div>
</div>
<!--
<div
style=
"font-size:18px"
>
{{
name
}}
</div>
<div>
<van-button
type=
"primary"
@
click=
"operation('点赞关注')"
>
点我更改信息
</van-button
>
</div>
<div>
<van-field
v-model=
"num"
label=
"数量"
/><van-button
type=
"primary"
@
click=
"getList"
>
发送请求获取笑话
</van-button
>
</div>
<div
style=
"width: 100%"
>
<van-list>
<van-cell
v-for=
"item in list"
:key=
"item"
:title=
"item"
/>
</van-list>
</div>
<van-button
loading
type=
"info"
loading-text=
"加载中..."
/>
-->
</div>
</
template
>
<
script
>
import
{
mapState
,
mapMutations
}
from
"vuex"
;
// import testApi from "@/api/test";
export
default
{
computed
:
{
...
mapState
(
"store_modular"
,
[
"name"
]),
},
data
()
{
return
{
num
:
0
,
list
:
[],
tabIndex
:
0
,
tableName
:
'总收益'
};
},
methods
:
{
...
mapMutations
(
"store_modular"
,
[
"operation"
]),
getList
()
{
this
.
server
.
getListAPI
({
num
:
this
.
num
})
.
then
((
res
)
=>
(
this
.
list
=
res
.
data
.
data
))
.
catch
((
err
)
=>
console
.
log
(
err
))
.
finally
(()
=>
{
this
.
$toast
.
clear
()});
if
(
this
.
num
==
0
){
this
.
$toast
.
fail
(
"数量不能为0"
);
return
}
// this.$toast.loading({
// message: '加载中...',
// forbidClick: true,
// duration:0
// });
},
//点击标签页
clickTab
(
index
,
name
){
this
.
tabIndex
=
index
this
.
tableName
=
name
}
},
};
</
script
>
<
style
scoped
>
.content
{
background-color
:
rgb
(
239
,
239
,
239
);
min-height
:
100vh
;
}
.analyst
{
height
:
0.8rem
;
line-height
:
0.8rem
;
margin-left
:
0.5rem
;
/* margin-top: 0.2rem; */
color
:
white
;
border-left
:
0.1rem
solid
white
;
width
:
4rem
;
padding-left
:
0.3rem
;
/* background-color: aqua; */
font-size
:
0.5rem
;
/* font-weight: bold; */
}
.top-box
{
width
:
100%
;
height
:
7.6rem
;
padding-top
:
0.3rem
;
background-color
:
rgb
(
226
,
74
,
68
);
border-radius
:
0
0
3rem
3rem
;
}
.tab-box
{
margin-top
:
0.7rem
;
display
:
flex
;
}
.table-contect
{
background
:
rgb
(
251
,
230
,
230
);
width
:
16%
;
border-radius
:
0.1rem
;
font-size
:
0.35rem
;
margin-left
:
1%
;
text-align
:
center
;
color
:
rgb
(
226
,
95
,
0
);
height
:
0.8rem
;
line-height
:
0.8rem
;
}
.table-contectHid
{
background
:
rgb
(
226
,
74
,
68
);
width
:
16%
;
border-radius
:
0.1rem
;
font-size
:
0.35rem
;
margin-left
:
1%
;
text-align
:
center
;
color
:
white
;
height
:
0.8rem
;
line-height
:
0.8rem
;
}
.card-box
{
height
:
5rem
;
width
:
90%
;
margin
:
1rem
auto
0
;
display
:
flex
;
/* background-color: yellowgreen; */
}
.left-card
{
width
:
5rem
;
height
:
3.5rem
;
background-color
:
white
;
border-radius
:
0.2rem
;
margin-top
:
1rem
;
position
:
relative
;
}
.center-card
{
width
:
5rem
;
height
:
4.1rem
;
background-color
:
white
;
border-radius
:
0.2rem
;
margin-top
:
0.4rem
;
position
:
relative
;
}
.rigth-card
{
width
:
5rem
;
height
:
3.5rem
;
background-color
:
white
;
border-radius
:
0.2rem
;
margin-top
:
1rem
;
position
:
relative
;
}
.left-contect
{
font-size
:
0.4rem
;
}
.clickBtn
{
width
:
2rem
;
line-height
:
0.7rem
;
border-radius
:
1rem
;
text-align
:
center
;
height
:
0.7rem
;
font-size
:
0.27rem
;
display
:
block
;
background
:
rgb
(
226
,
74
,
68
);
color
:
white
;
position
:
absolute
;
bottom
:
0.1rem
;
left
:
0.5rem
;
}
.clickBtnTwo
{
width
:
2rem
;
line-height
:
0.7rem
;
border-radius
:
1rem
;
text-align
:
center
;
height
:
0.7rem
;
font-size
:
0.27rem
;
display
:
block
;
background
:
rgb
(
226
,
74
,
68
);
color
:
white
;
margin
:
auto
0
;
/* position: absolute;
bottom: 0.1rem;
left: 0.5rem; */
}
.card-title
{
font-size
:
0.4rem
;
position
:
absolute
;
top
:
-1.2rem
;
left
:
1rem
;
color
:
white
;
}
.bottomcontect-box
{
height
:
2.8rem
;
width
:
90%
;
/* background-color: aqua; */
margin
:
0
auto
;
border-bottom
:
1px
solid
gray
;
}
.topthis-box
{
width
:
100%
;
height
:
1.7rem
;
display
:
flex
;
/* background-color: yellow; */
}
.top-left
{
height
:
100%
;
width
:
70%
;
}
.top-right
{
height
:
100%
;
width
:
29%
;
padding-top
:
0.3rem
;
}
.bottomthis-box
{
display
:
flex
;
line-height
:
1rem
;
}
</
style
>
\ No newline at end of file
src/views/actualCombat/record.vue
0 → 100644
View file @
dc6022f5
<
template
>
<div
class=
"content"
>
<div
class=
"head-box"
>
<div
class=
"tab-box"
>
<span>
买/卖
</span>
</div>
<div
class=
"tab-box"
>
<span>
当前持仓
</span>
</div>
<div
class=
"tab-box"
>
<span>
价格
</span>
</div>
<div
class=
"tab-box"
>
<span>
仓位
</span>
</div>
<div
class=
"tab-box"
>
<span>
时间
</span>
</div>
</div>
<!-- 灰线 -->
<div
class=
"line"
>
</div>
<div
class=
"contect-list"
>
<div
class=
"mai"
>
<span
>
卖
</span>
</div>
<div
class=
"contectBox"
>
<span>
300***
</span>
</div>
<div
class=
"contectBox"
>
<span>
*
</span>
</div>
<div
class=
"contectBox"
>
<span>
100%
</span>
</div>
<div
class=
"contectBox"
>
<span
style=
"display:block;height:0.5rem;margin-top:-0.3rem"
>
08/26
</span>
<span>
14:28
</span>
</div>
</div>
<!-- 灰线 -->
<div
class=
"lineTwo"
>
</div>
</div>
</
template
>
<
script
>
// import { mapState, mapMutations } from "vuex";
// import testApi from "@/api/test";
export
default
{
computed
:
{
// ...mapState("store_modular", ["name"]),
},
data
()
{
return
{
num
:
0
,
list
:
[],
};
},
methods
:
{
// ...mapMutations("store_modular", ["operation"]),
},
};
</
script
>
<
style
scoped
>
.head-box
{
height
:
1.2rem
;
width
:
100%
;
display
:
flex
;
background-color
:
yellow
;
}
.tab-box
{
width
:
20%
;
height
:
100%
;
text-align
:
center
;
line-height
:
1.2rem
;
font-size
:
0.35rem
;
background-color
:
aquamarine
;
}
.line
{
width
:
100%
;
height
:
0.3rem
;
background-color
:
rgb
(
246
,
247
,
249
)
;
}
.lineTwo
{
width
:
100%
;
height
:
0.5rem
;
background-color
:
rgb
(
246
,
247
,
249
)
;
}
.contect-list
{
display
:
flex
;
height
:
1.5rem
;
width
:
100%
;
background-color
:
yellowgreen
;
font-size
:
0.5rem
;
}
.contectBox
{
width
:
20%
;
height
:
100%
;
text-align
:
center
;
line-height
:
1.5rem
;
}
.mai
{
display
:
block
;
height
:
1rem
;
width
:
1rem
;
border
:
1px
solid
rgb
(
69
,
137
,
235
);
color
:
rgb
(
69
,
137
,
235
);
text-align
:
center
;
line-height
:
1rem
;
margin
:
auto
;
border-radius
:
50%
;
}
</
style
>
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment