Skip to content

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

暂时修改

parent 86243cfc
Show whitespace changes
Inline Side-by-side
Showing with 424 additions and 47 deletions
package-lock.json
View file @ 28917626
...@@ -2062,6 +2062,49 @@ ...@@ -2062,6 +2062,49 @@
"webpack-merge": "^5.7.3", "webpack-merge": "^5.7.3",
"webpack-virtual-modules": "^0.4.2", "webpack-virtual-modules": "^0.4.2",
"whatwg-fetch": "^3.6.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": { "@vue/cli-shared-utils": {
...@@ -2263,47 +2306,6 @@ ...@@ -2263,47 +2306,6 @@
"integrity": "sha512-m9IgiteBpCkFaMNwCOBkFksA7z8QiKc30ooRuoXWUFRDu0mGyNPlFHmbncF0/Kra1RlX8QrmBbRaIxVvikaR0Q==", "integrity": "sha512-m9IgiteBpCkFaMNwCOBkFksA7z8QiKc30ooRuoXWUFRDu0mGyNPlFHmbncF0/Kra1RlX8QrmBbRaIxVvikaR0Q==",
"dev": true "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": { "@vue/web-component-wrapper": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz", "resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
...@@ -3860,6 +3862,22 @@ ...@@ -3860,6 +3862,22 @@
"integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==", "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
"dev": true "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": { "ee-first": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz", "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
...@@ -8734,6 +8752,21 @@ ...@@ -8734,6 +8752,21 @@
"dev": true "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=="
}
}
} }
} }
} }
package.json
View file @ 28917626
...@@ -12,8 +12,9 @@ ...@@ -12,8 +12,9 @@
"amfe-flexible": "^2.2.1", "amfe-flexible": "^2.2.1",
"axios": "^0.27.2", "axios": "^0.27.2",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"echarts": "^5.5.1",
"postcss-pxtorem": "^6.0.0", "postcss-pxtorem": "^6.0.0",
"vant": "^2.12.48", "vant": "^2.13.2",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vuex": "^3.6.2", "vuex": "^3.6.2",
......
src/main.js
View file @ 28917626
...@@ -4,15 +4,21 @@ import router from './router' ...@@ -4,15 +4,21 @@ import router from './router'
import server from './api/test'; import server from './api/test';
import store from './store' import store from './store'
import 'amfe-flexible'; import 'amfe-flexible';
import Vant from 'vant'; import vant from 'vant';
import 'vant/lib/index.css'; import 'vant/lib/index.css';
import axios from 'axios' import axios from 'axios';
Vue.use(Vant);
// import { createApp } from 'vue';
// const app = createApp();
// app.use(vant);
Vue.use(vant);
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.prototype.server = server; //引入接口服务 Vue.prototype.server = server; //引入接口服务
new Vue({ new Vue({
axios, axios,
router, router,
server, server,
store, store,
......
src/views/actualCombat/detail.vue
View file @ 28917626
...@@ -14,23 +14,195 @@ ...@@ -14,23 +14,195 @@
<span class="percentage">40.27%</span> <span class="percentage">40.27%</span>
<!-- 线 --> <!-- 线 -->
<div class="line"></div> <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>
<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;
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>
<!-- 折线图 -->
<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">
</div>
</div>
</div>
</template> </template>
<script setup>
</script>
<script> <script>
import { mapState, mapMutations } from "vuex"; import { mapState, mapMutations } from "vuex";
import { Dialog,Button } 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"; // import testApi from "@/api/test";
export default { export default {
computed: { computed: {
...mapState("store_modular", ["name"]), ...mapState("store_modular", ["name"]),
}, },
components: {
[Button.name]: Button,
[Dialog.name]: Dialog,
},
data() { data() {
return { return {
num: 0, num: 0,
radio:'1',
list: [], list: [],
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'
}
],
}
}; };
}, },
mounted(){
let myChart = echarts.init(document.getElementById('myChart'), 'light') // 初始化echarts, theme为light
myChart.setOption(this.echartsOption) // echarts设置选项
},
methods: { methods: {
...mapMutations("store_modular", ["operation"]), ...mapMutations("store_modular", ["operation"]),
getList() { getList() {
...@@ -50,6 +222,26 @@ export default { ...@@ -50,6 +222,26 @@ export default {
// }); // });
}, },
//最大回撤
clickRetracement(){
Dialog.alert({
title: '最大回撤',
confirmButtonText:'我知道了',
message: '组合近一年以来经历过的一次最大亏损比率。最大亏损越高，说明该产品风险越高。',
}).then(() => {
// on close
});
},
//胜率
clickWinning(){
Dialog.alert({
title: '胜率',
confirmButtonText:'我知道了',
message: '(组合中历史获利了结的股票数+当前持仓浮盈的股票数)/历史曾买入的股票总数。胜率越高,说明跟随该产品的盈利的可能性越高。',
}).then(() => {
// on close
});
}
}, },
}; };
</script> </script>
...@@ -76,6 +268,7 @@ export default { ...@@ -76,6 +268,7 @@ export default {
line-height: 0.7rem; line-height: 0.7rem;
font-size: 0.3rem; font-size: 0.3rem;
text-align: center; text-align: center;
border-radius: 0.1rem;
} }
.numberPeople{ .numberPeople{
font-size: 0.3rem; font-size: 0.3rem;
...@@ -86,7 +279,7 @@ export default { ...@@ -86,7 +279,7 @@ export default {
.profit{ .profit{
display: block; display: block;
width: 100%; width: 100%;
height: 1.5rem; height: 1.3rem;
text-align: center; text-align: center;
font-size: 0.5rem; font-size: 0.5rem;
/* font-weight: bold; */ /* font-weight: bold; */
...@@ -107,7 +300,151 @@ color: white; ...@@ -107,7 +300,151 @@ color: white;
height: 0.1rem; height: 0.1rem;
width: 100%; width: 100%;
/* background-color: gray; */ /* background-color: gray; */
border-bottom:1px solid 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;
}
.tab-box-Two{
width: 20%;
height: 100%;
text-align: center;
line-height: 0.4rem;
font-size: 0.35rem;
}
.tab-box{
width: 20%;
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: 2rem;
font-size: 0.3rem;
/* color: white; */
margin: 0.7rem 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;
} }
</style> </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