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 @@
<div class="line"></div>
<div class="head-box">
<div class="tab-box">
<!-- <div class="tab-box">
<span>今年收益</span>
</div>
</div> -->
<div class="tab-box">
<span>月收益</span>
</div>
......@@ -37,9 +37,9 @@
</div>
<div class="head-box-Two">
<!-- <van-button type="primary">按钮</van-button> -->
<div class="tab-box-Two">
<!-- <div class="tab-box-Two">
<span>-10.83%</span>
</div>
</div> -->
<div class="tab-box-Two">
<span>-10.83%</span>
</div>
......@@ -73,6 +73,7 @@
</div>
<div style="font-size: 0.3rem;
height: 1rem;
color:gray;
margin-top: 0.4rem;
margin-left: 3rem;
line-height: 1rem;">
......@@ -111,9 +112,159 @@
<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>
......@@ -123,7 +274,7 @@
</script>
<script>
import { mapState, mapMutations } from "vuex";
import { Dialog,Button } from 'vant';
import { Dialog,Button,Popup } from 'vant';
import * as echarts from 'echarts';
......@@ -148,7 +299,31 @@ export default {
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: ['腾讯', '阿里巴巴', '华为', '字节跳动']
......@@ -196,12 +371,33 @@ export default {
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"]),
......@@ -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(){
Dialog.alert({
......@@ -316,15 +702,28 @@ color: white;
display: flex;
color: white;
}
.tab-box-Two{
.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: 20%;
width: 25%;
height: 100%;
text-align: center;
line-height: 1.2rem;
......@@ -422,13 +821,22 @@ background-color:yellowgreen ;
}
.profitBox{
width: 94%;
height: 2rem;
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%;
......@@ -446,5 +854,123 @@ 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
View file @ 0162ee70
......@@ -62,7 +62,7 @@
</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>
<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>
......
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