Skip to content

R
revised-version-h5
Commit dc6022f5 authored by jiaoyahui's avatar jiaoyahui
Browse files
Options

Merge branch 'master' into dev_jyh

parents 5f5dc49b 8435f583
Hide whitespace changes
Inline Side-by-side
Showing with 1564 additions and 42 deletions
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 Vant from 'vant';
import vant 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
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