Skip to content

R
revised-version-h5
Commit 0162ee70 authored by mengqr's avatar mengqr
Browse files
Options

页面开发

parent 28917626
Hide whitespace changes
Inline Side-by-side
Showing with 536 additions and 10 deletions
src/views/actualCombat/detail.vue
View file @ 0162ee70
...@@ -16,9 +16,9 @@ ...@@ -16,9 +16,9 @@
<div class="line"></div> <div class="line"></div>
<div class="head-box"> <div class="head-box">
<div class="tab-box"> <!-- <div class="tab-box">
<span>今年收益</span> <span>今年收益</span>
</div> </div> -->
<div class="tab-box"> <div class="tab-box">
<span>月收益</span> <span>月收益</span>
</div> </div>
...@@ -37,9 +37,9 @@ ...@@ -37,9 +37,9 @@
</div> </div>
<div class="head-box-Two"> <div class="head-box-Two">
<!-- <van-button type="primary">按钮</van-button> --> <!-- <van-button type="primary">按钮</van-button> -->
<div class="tab-box-Two"> <!-- <div class="tab-box-Two">
<span>-10.83%</span> <span>-10.83%</span>
</div> </div> -->
<div class="tab-box-Two"> <div class="tab-box-Two">
<span>-10.83%</span> <span>-10.83%</span>
</div> </div>
...@@ -73,6 +73,7 @@ ...@@ -73,6 +73,7 @@
</div> </div>
<div style="font-size: 0.3rem; <div style="font-size: 0.3rem;
height: 1rem; height: 1rem;
color:gray;
margin-top: 0.4rem; margin-top: 0.4rem;
margin-left: 3rem; margin-left: 3rem;
line-height: 1rem;"> line-height: 1rem;">
...@@ -111,9 +112,159 @@ ...@@ -111,9 +112,159 @@
<span class="profitNumber">40.27%</span> <span class="profitNumber">40.27%</span>
</div> </div>
<div class="profitright"> <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>
<!-- <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> </div>
</van-popup>
</div> </div>
</template> </template>
...@@ -123,7 +274,7 @@ ...@@ -123,7 +274,7 @@
</script> </script>
<script> <script>
import { mapState, mapMutations } from "vuex"; import { mapState, mapMutations } from "vuex";
import { Dialog,Button } from 'vant'; import { Dialog,Button,Popup } from 'vant';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
...@@ -148,7 +299,31 @@ export default { ...@@ -148,7 +299,31 @@ export default {
return { return {
num: 0, num: 0,
radio:'1', radio:'1',
radio2:'1',
show:false,
list: [], 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选项，所有绘图数据和样式都在这里设置 echartsOption: { // echarts选项，所有绘图数据和样式都在这里设置
legend: { //图表上方的图例 legend: { //图表上方的图例
data: ['腾讯', '阿里巴巴', '华为', '字节跳动'] data: ['腾讯', '阿里巴巴', '华为', '字节跳动']
...@@ -196,12 +371,33 @@ export default { ...@@ -196,12 +371,33 @@ export default {
type: 'line' type: 'line'
} }
], ],
} },
chart: null,
_thisForChart: null,
_thisForWindow: null,
colorItem: {
"北京": '#ff6161',
"上海": '#e0815b',
"广州": '#ffaf33',
"深圳": '#637be6',
"成都": '#a1b2ff',
// "西安": '#b3daff',
},
}; };
}, },
mounted(){ mounted(){
let myChart = echarts.init(document.getElementById('myChart'), 'light') // 初始化echarts, theme为light let myChart = echarts.init(document.getElementById('myChart'), 'light') // 初始化echarts, theme为light
myChart.setOption(this.echartsOption) // echarts设置选项 myChart.setOption(this.echartsOption) // echarts设置选项
this.$nextTick(() => {
this.initPieChart();
this.addEventListenerToSidebarContainer(this)
this.addEventListenerToWindowResize(this)
});
},
beforeDestroy () {
this.removeEventListenerToSidebarContainer()
this.removeEventListenerToWindowResize()
}, },
methods: { methods: {
...mapMutations("store_modular", ["operation"]), ...mapMutations("store_modular", ["operation"]),
...@@ -222,6 +418,196 @@ let myChart = echarts.init(document.getElementById('myChart'), 'light') // 初 ...@@ -222,6 +418,196 @@ let myChart = echarts.init(document.getElementById('myChart'), 'light') // 初
// }); // });
}, },
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(){ clickRetracement(){
Dialog.alert({ Dialog.alert({
...@@ -316,15 +702,28 @@ color: white; ...@@ -316,15 +702,28 @@ color: white;
display: flex; display: flex;
color: white; color: white;
} }
.tab-box-Two{ .head-boxThree{
height: 1rem;
width: 100%;
display: flex;
color: white;
}
.tab-boxThree{
width: 20%; width: 20%;
height: 100%; height: 100%;
text-align: center; text-align: center;
line-height: 0.4rem; line-height: 0.4rem;
font-size: 0.35rem; font-size: 0.35rem;
} }
.tab-box-Two{
width: 25%;
height: 100%;
text-align: center;
line-height: 0.4rem;
font-size: 0.35rem;
}
.tab-box{ .tab-box{
width: 20%; width: 25%;
height: 100%; height: 100%;
text-align: center; text-align: center;
line-height: 1.2rem; line-height: 1.2rem;
...@@ -422,13 +821,22 @@ background-color:yellowgreen ; ...@@ -422,13 +821,22 @@ background-color:yellowgreen ;
} }
.profitBox{ .profitBox{
width: 94%; width: 94%;
height: 2rem; height: 1.2rem;
font-size: 0.3rem; font-size: 0.3rem;
/* color: white; */ /* color: white; */
margin: 0.7rem auto; margin: 0.7rem auto;
display: flex; display: flex;
background-color:yellowgreen ; background-color:yellowgreen ;
} }
.profitBoxTwo{
width: 94%;
height: 1.2rem;
font-size: 0.3rem;
/* color: white; */
margin: 0 auto;
display: flex;
background-color:yellowgreen ;
}
.profitLeft{ .profitLeft{
width: 50%; width: 50%;
height: 100%; height: 100%;
...@@ -446,5 +854,123 @@ font-size: 0.4rem; ...@@ -446,5 +854,123 @@ font-size: 0.4rem;
.profitNumber{ .profitNumber{
display: block; display: block;
font-size: 0.5rem; 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> </style>
\ No newline at end of file
src/views/actualCombat/index.vue
View file @ 0162ee70
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
</div> </div>
</div> </div>
<div class="bottomthis-box"> <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> <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>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment