From 2f72cf1a3a30b665619e7fcaa2657e225598554e Mon Sep 17 00:00:00 2001
From: flowstocktrading <tsm1258011@proton.me>
Date: Thu, 03 Nov 2022 18:22:54 +0800
Subject: [PATCH] 备份
---
src/assets/foot/positions_selected.png | 0
src/page/list/list.vue | 4
src/page/user/user.vue | 2
src/assets/foot/positions_default.png | 0
src/components/foot.vue | 168 ++++++++++++++++++++++++
src/page/home/home.vue | 42 +++--
config/index.js | 2
src/page/home/components/echart.vue | 87 ++++++++++++
src/assets/foot/home_default.png | 0
src/assets/foot/ic_camera_take.png | 0
src/page/user/order-list2.vue | 2
src/page/user/order-list.vue | 12 -
src/assets/foot/mine_selected.png | 0
src/page/user/order-list4.vue | 2
src/main.js | 3
index.html | 28 ++++
src/assets/foot/trade_selected.png | 0
src/page/user/order-list1.vue | 2
src/page/user/order-list3.vue | 2
src/App.vue | 5
src/assets/foot/trade_default.png | 0
src/page/home/components/GoLogin.vue | 2
src/assets/foot/mine_default.png | 0
src/assets/foot/ic_home_tab_def.png | 0
24 files changed, 329 insertions(+), 34 deletions(-)
diff --git a/config/index.js b/config/index.js
index 28a82c0..55aceb3 100644
--- a/config/index.js
+++ b/config/index.js
@@ -24,7 +24,7 @@
},
// Various Dev Server settings
- host: 'localhost', // can be overwritten by process.env.HOST
+ host: '0.0.0.0', // can be overwritten by process.env.HOST
port: 80, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
errorOverlay: true,
diff --git a/index.html b/index.html
index f5170b4..a1dadc5 100644
--- a/index.html
+++ b/index.html
@@ -41,6 +41,34 @@
}
}
</script>
+ <script>
+ // // 禁用缩放
+ // function addMeta() {
+ // $('head').append('<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />');
+ // }
+ // setTimeout(addMeta, 3000);
+
+ // // 禁用双指放大
+ // document.documentElement.addEventListener('touchstart', function (event) {
+ // if (event.touches.length > 1) {
+ // event.preventDefault();
+ // }
+ // }, {
+ // passive: false
+ // });
+
+ // // 禁用双击放大
+ // var lastTouchEnd = 0;
+ // document.documentElement.addEventListener('touchend', function (event) {
+ // var now = Date.now();
+ // if (now - lastTouchEnd <= 300) {
+ // event.preventDefault();
+ // }
+ // lastTouchEnd = now;
+ // }, {
+ // passive: false
+ // });
+ </script>
</head>
<body style="height: 100%; position: absolute; width: 100%;">
<div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index 565493a..5aeea6b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,11 +18,16 @@
<router-view></router-view>
</transition>
</div>
+ <foot></foot>
</div>
</template>
<script>
+ import foot from "@/components/foot.vue";
export default {
+ components: {
+ foot,
+ },
name: "App",
created() {
let title = this.$route.meta.title || "首页";
diff --git a/src/assets/foot/home_default.png b/src/assets/foot/home_default.png
new file mode 100644
index 0000000..1aeb3d1
--- /dev/null
+++ b/src/assets/foot/home_default.png
Binary files differ
diff --git a/src/assets/foot/ic_camera_take.png b/src/assets/foot/ic_camera_take.png
new file mode 100644
index 0000000..21cd87d
--- /dev/null
+++ b/src/assets/foot/ic_camera_take.png
Binary files differ
diff --git a/src/assets/foot/ic_home_tab_def.png b/src/assets/foot/ic_home_tab_def.png
new file mode 100644
index 0000000..78c378d
--- /dev/null
+++ b/src/assets/foot/ic_home_tab_def.png
Binary files differ
diff --git a/src/assets/foot/mine_default.png b/src/assets/foot/mine_default.png
new file mode 100644
index 0000000..474b0b6
--- /dev/null
+++ b/src/assets/foot/mine_default.png
Binary files differ
diff --git a/src/assets/foot/mine_selected.png b/src/assets/foot/mine_selected.png
new file mode 100644
index 0000000..ff8ee94
--- /dev/null
+++ b/src/assets/foot/mine_selected.png
Binary files differ
diff --git a/src/assets/foot/positions_default.png b/src/assets/foot/positions_default.png
new file mode 100644
index 0000000..523a6f6
--- /dev/null
+++ b/src/assets/foot/positions_default.png
Binary files differ
diff --git a/src/assets/foot/positions_selected.png b/src/assets/foot/positions_selected.png
new file mode 100644
index 0000000..cc3be27
--- /dev/null
+++ b/src/assets/foot/positions_selected.png
Binary files differ
diff --git a/src/assets/foot/trade_default.png b/src/assets/foot/trade_default.png
new file mode 100644
index 0000000..687dc63
--- /dev/null
+++ b/src/assets/foot/trade_default.png
Binary files differ
diff --git a/src/assets/foot/trade_selected.png b/src/assets/foot/trade_selected.png
new file mode 100644
index 0000000..bc998d9
--- /dev/null
+++ b/src/assets/foot/trade_selected.png
Binary files differ
diff --git a/src/components/foot.vue b/src/components/foot.vue
new file mode 100644
index 0000000..814c640
--- /dev/null
+++ b/src/components/foot.vue
@@ -0,0 +1,168 @@
+<template>
+ <div class="footCss">
+ <div :class="touch==1?'footDemos':'footDemo'" @click="goRouter('/home',1)">
+ <div class="homeImgOut" v-show="$store.state.select == '/home'">
+ <div class="homeImg">
+ <img src="~@/assets/foot/ic_home_tab_def.png" />
+ </div>
+ </div>
+ <div v-show="$store.state.select != '/home'" class="footImgDeft">
+ <img src="~@/assets/foot/home_default.png" />
+ </div>
+ <div v-show="$store.state.select != '/home'">首页</div>
+ </div>
+ <div :class="touch==2?'footDemos':'footDemo'" @click="goRouter('/list',2)">
+ <div class="footImgDeft">
+
+ <img v-show="$store.state.select == '/list'" src="~@/assets/foot/trade_selected.png" />
+ <img v-show="$store.state.select != '/list'" src="~@/assets/foot/trade_default.png" />
+ </div>
+ <div :class="$store.state.select == '/list'?'blueFont':''">交易</div>
+ </div>
+ <div :class="touch==3?'footDemos':'footDemo'" @click="goRouter('/orderlist',3)">
+ <div class="footImgDeft">
+ <img v-show="$store.state.select == '/orderlist'" src="~@/assets/foot/positions_selected.png" />
+ <img v-show="$store.state.select != '/orderlist'" src="~@/assets/foot/positions_default.png" />
+ </div>
+ <div :class="$store.state.select == '/orderlist'?'blueFont':''">仓位</div>
+ </div>
+ <div :class="touch==4?'footDemos':'footDemo'" @click="goRouter('/user',4)">
+ <div class="footImgDeft">
+ <img v-show="$store.state.select == '/user'" src="~@/assets/foot/mine_selected.png" />
+ <img v-show="$store.state.select != '/user'" src="~@/assets/foot/mine_default.png" />
+ </div>
+ <div :class="$store.state.select == '/user'?'blueFont':''">我的</div>
+ </div>
+ </div>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ touch: 0,
+ }
+ },
+ mounted() {
+
+ },
+ methods: {
+ goRouter(url, index) {
+ this.touch = index
+ setTimeout(() => {
+ this.touch = 0
+ }, 500)
+ this.$router.push(url)
+ if (navigator.vibrate) {
+ // 支持
+ navigator.vibrate([55]);
+ }
+ }
+ },
+
+ }
+</script>
+
+<style>
+ .footCss {
+ border-top: 0.01rem solid rgba(192, 192, 192, 0.1);
+ background: rgb(33, 33, 43);
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ height: 1.3rem;
+ display: flex;
+ justify-content: space-around;
+ }
+
+ .footDemo {
+ width: 0.8rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ font-size: 0.24rem;
+ }
+
+ .footDemos {
+ width: 0.8rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ font-size: 0.24rem;
+ }
+
+ .footDemos::before {
+ content: '';
+ width: 0.9rem;
+ height: 0.9rem;
+ border-radius: 100%;
+ position: absolute;
+ background-color: rgba(25, 122, 246, 0.14);
+ -webkit-animation: footBlueBg 0.5s linear infinite;
+ animation: footBlueBg 0.5s linear infinite;
+ transition: all 0.5s;
+ }
+
+ @-webkit-keyframes footBlueBg {
+ 0% {
+ -webkit-transform: scale(1.6);
+ transform: scale(1.6);
+ }
+
+ 25% {
+ -webkit-transform: scale(1.3);
+ transform: scale(1.3);
+ }
+
+ 50% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+
+ 75% {
+ background-color: rgba(25, 122, 246, 0.1);
+
+ }
+
+ 100% {
+ background-color: rgba(25, 122, 246, 0);
+ }
+ }
+
+ .footImgDeft {
+ width: 0.56rem;
+ height: 0.56rem;
+ margin-bottom: 0.08rem;
+
+ }
+
+ .footImgDeft img {
+ width: 100%;
+ height: 100%;
+ }
+
+ .homeImgOut {
+ width: 0.9rem;
+ height: 0.9rem;
+ border-radius: 100%;
+ background-color: rgb(25, 122, 246);
+ }
+
+ .homeImg {
+ width: 0.9rem;
+ height: 0.9rem;
+ }
+
+ .homeImg img {
+ width: 100%;
+ height: 100%;
+ }
+
+ .blueFont {
+ color: rgb(25, 122, 246);
+ }
+</style>
diff --git a/src/main.js b/src/main.js
index 38e4f53..e388e41 100644
--- a/src/main.js
+++ b/src/main.js
@@ -25,7 +25,8 @@
import animated from 'animate.css' // npm install animate.css --save安装，在引入
import '../static/css/public2.css'
-
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts;
// import VueTouch from 'vue-touch'
Vue.use(Swipe);
Vue.use(SwipeItem);
diff --git a/src/page/home/components/GoLogin.vue b/src/page/home/components/GoLogin.vue
index bb978ed..259822f 100644
--- a/src/page/home/components/GoLogin.vue
+++ b/src/page/home/components/GoLogin.vue
@@ -62,7 +62,7 @@
> .btn {
width: 1.7949rem;
height: .7692rem;
- background: rgb(54,124,248);
+ background: rgb(25,122,246);
border-radius: .1064rem;
display: flex;
justify-content: center;
diff --git a/src/page/home/components/echart.vue b/src/page/home/components/echart.vue
new file mode 100644
index 0000000..d97e5db
--- /dev/null
+++ b/src/page/home/components/echart.vue
@@ -0,0 +1,87 @@
+<template>
+ <div style="width: 100%;height: 100%;">
+ <div style="width: 100%;height: 100%;" :id="'main'+ids"></div>
+ </div>
+</template>
+<script>
+ import * as echarts from 'echarts';
+ export default{
+ props:{
+ ids:{
+ type:String,
+ default: '0',
+ },
+ colorType:{
+ type:Number,
+ default: 0,
+ }
+ },
+ data () {
+ return {
+ myChart:"",
+ };
+ },
+ methods: {
+ initCharts () {
+ var chartDom = document.getElementById('main'+this.ids);
+ var myChart = echarts.init(chartDom, 'dark');
+ var option;
+ var greenOrRed="";
+ var greenOrReds="";
+ console.log(this.colorType)
+ if(this.colorType>0){
+ greenOrRed='rgba(65,172,117,0.6)'
+ greenOrReds='rgba(65,172,117,0.05)'
+ }else{
+ greenOrRed='rgba(166,10,36,0.6)'
+ greenOrReds='rgba(166,10,36,0.05)'
+ }
+ option = {
+ xAxis: {
+ show:false,
+ type: 'category',
+ boundaryGap: false,
+
+ },
+ yAxis: {
+ show:false,
+ type: 'value'
+ },
+ tooltip: {
+ show: true,
+ extraCssText:'100%;height: 1.5385rem;'
+ },
+ backgroundColor: 'rgba(0,0,0,0)',
+ color: {
+ type: 'linear',
+ x:0,
+ y:0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: greenOrRed // 0% 处的颜色
+ }, {
+ offset: 1, color: greenOrReds // 100% 处的颜色
+ }],
+ globalCoord: false // 缺省为 false
+ },
+ series: [
+ {
+ data: [820, 932, 901, 934, 1000, 900, 1320,820, 932, 901, 934, 1000, 900,],
+ type: 'line',
+ areaStyle: {}
+ }
+ ]
+ };
+
+ option && myChart.setOption(option);
+ }
+ },
+ mounted () {
+ this.initCharts();
+ window.onresize = function() {
+ this.myChart.resize();
+ };
+ }
+ }
+</script>
diff --git a/src/page/home/home.vue b/src/page/home/home.vue
index 3211ae9..e2e03c1 100644
--- a/src/page/home/home.vue
+++ b/src/page/home/home.vue
@@ -39,6 +39,7 @@
</div>
</div>
</div>
+
<!-- 排行入门 -->
<van-skeleton title :row="2" :loading="loading" />
<div class="navs" v-if="!loading">
@@ -68,24 +69,28 @@
<van-swipe class="fo_my-swipe" :autoplay="0" indicator-color="white" @change="onChange">
<van-swipe-item v-for="(item, index) in proData" :key="index" style="margin-top: 20px;">
<div class="item_cont" v-for="(item2, idx) in proData[currentIndex]" :key="idx">
- <div class="top_fo">
- <div class="title">
+ <div class="top_fo" style="width: 80%;">
+ <div class="title" style="width: 30%;">
<span>{{ item2.f14 }}</span>
</div>
- <div class="numbers">
- <span>{{ item2.f2 }}</span>
- </div>
- <div class="percentage" :class="item2.f3 > 0 ? 'gree' : 'redd'">
+ <div class="percentage" :class="item2.f3 > 0 ? 'gree' : 'redd'">
+
<span>{{ item2.f3 > 0 ? `+${item2.f3}%` : `${item2.f3}%` }}</span>
</div>
+ <div class="percentage"></div>
+ <div class="percentage" style="width: 38%;position: absolute;right: 0;" :class="item2.f3 > 0 ? 'gree' : 'redd'">
+ <echart :colorType="item2.f3" :ids="idx+'1'+index"></echart>
+ </div>
</div>
- <div class="bottom_fo">
- <div class="title">
+ <div class="bottom_fo" style="width: 80%;">
+ <div class="title"style="width: 30%;">
<span>{{ item2.f12 }}</span>
<img :src="Huo" alt style="margin-left: 0.12rem;" />
</div>
- <div class="numbers">
- <span>{{ '04:59:57' }}</span>
+ <div class="percentage" >
+ <!-- class="numbers" -->
+ <!-- <span>{{ '04:59:57' }}</span> -->
+ <span>{{ item2.f2 }}</span>
</div>
<div class="percentage">
<span></span>
@@ -150,14 +155,14 @@
<!-- tab -->
<GoToLogin />
- <!-- <foot></foot> -->
</div>
</template>
<script>
- import foot from "@/components/foot/foot";
+
import AllList from "@/page/list/list-all";
import HomeList from "./components/home-list";
+ import Echart from "./components/echart.vue";
import {
Toast
} from "mint-ui";
@@ -179,10 +184,10 @@
export default {
components: {
- foot,
HomeList,
AllList,
GoToLogin,
+ Echart
},
props: {},
data() {
@@ -232,7 +237,7 @@
methods: {
async getNewsList(type) {
let data = await api.queryNewsList(type);
- console.log('xinwen:', data)
+
switch (type) {
case 1:
this.newsContent1 = data.data.list
@@ -252,7 +257,7 @@
}
},
handleBannerClick(ind) {
- console.log(ind);
+ // console.log(ind);
},
ProcessData() {
// 把数据分割成三等份
@@ -263,7 +268,7 @@
onChange(index) {
this.currentIndex = index;
this.proData[index].forEach(item => {
- console.log(item.f14);
+ // console.log(item.f14);
});
},
handleSearchClick() {
@@ -308,6 +313,9 @@
this.getNewsList(1);
this.getNewsList(2);
this.getNewsList(4);
+
+
+
setTimeout(() => {
this.loading = false
}, 1000)
@@ -533,7 +541,7 @@
}
.title {
- width: 50%;
+ width: 20%;
height: 100%;
display: flex;
align-items: center;
diff --git a/src/page/list/list.vue b/src/page/list/list.vue
index 24d948f..f306174 100644
--- a/src/page/list/list.vue
+++ b/src/page/list/list.vue
@@ -58,7 +58,7 @@
</template>
<script>
-import foot from '@/components/foot/foot'
+
// import '@/assets/style/common.less'
import List0 from './list-all'
import List1 from './list-index'
@@ -70,7 +70,7 @@
export default {
components: {
- foot,
+
List0,
List1,
List2,
diff --git a/src/page/user/order-list.vue b/src/page/user/order-list.vue
index 5099dfe..2f8fb23 100644
--- a/src/page/user/order-list.vue
+++ b/src/page/user/order-list.vue
@@ -26,12 +26,11 @@
<List4 :selectedNumber='selected'/>
</mt-tab-container-item>
</mt-tab-container>
- <foot></foot>
</div>
</template>
<script>
-import foot from '@/components/foot/foot'
+
// import '@/assets/style/common.less'
import List1 from './order-list1'
import List2 from './order-list2'
@@ -42,7 +41,6 @@
export default {
components: {
- foot,
List1,
List2,
List3,
@@ -150,7 +148,7 @@
.mint-tab-item {
padding: 0.3rem 0;
background-color: #16171D;
-
+
}
.top-nav-item{
position: relative;
@@ -207,7 +205,7 @@
}
.table-title {
font-size: .24rem;
-
+
}
.table-value {
font-size: .24rem;
@@ -231,7 +229,7 @@
.top-navbar {
background-color: #E9E9E9 !important;
.mint-tab-item {
- background-color: #E9E9E9;
+ background-color: #E9E9E9;
}
.top-nav-item.is-selected {
color : #000;
@@ -249,7 +247,7 @@
.load-all {
background: #fff !important;
}
-
+
}
/deep/.red-theme .order-info-box{
background-color: #fff ;
diff --git a/src/page/user/order-list1.vue b/src/page/user/order-list1.vue
index 7203335..00dfc98 100644
--- a/src/page/user/order-list1.vue
+++ b/src/page/user/order-list1.vue
@@ -25,7 +25,7 @@
<HistoryList :selectedNumber='selectedNumber' :hasChangeSell="hasChangeSell" :handleOptions='handleOptions'/>
</mt-tab-container-item>
</mt-tab-container>
- <foot></foot>
+ <!-- <foot></foot> -->
</div>
</template>
diff --git a/src/page/user/order-list2.vue b/src/page/user/order-list2.vue
index 4064667..6520acb 100644
--- a/src/page/user/order-list2.vue
+++ b/src/page/user/order-list2.vue
@@ -26,7 +26,7 @@
:handleOptions='handleOptions2'/>
</mt-tab-container-item>
</mt-tab-container>
- <foot></foot>
+ <!-- <foot></foot> -->
</div>
</template>
diff --git a/src/page/user/order-list3.vue b/src/page/user/order-list3.vue
index 6d44905..0eb465f 100644
--- a/src/page/user/order-list3.vue
+++ b/src/page/user/order-list3.vue
@@ -19,7 +19,7 @@
<HistoryList :hasChangeSell="hasChangeSell" :handleOptions='handleOptions'/>
</mt-tab-container-item>
</mt-tab-container>
- <foot></foot>
+ <!-- <foot></foot> -->
</div>
</template>
diff --git a/src/page/user/order-list4.vue b/src/page/user/order-list4.vue
index b7b185e..a35f4bc 100644
--- a/src/page/user/order-list4.vue
+++ b/src/page/user/order-list4.vue
@@ -25,7 +25,7 @@
<HistoryList :selectedNumber='selectedNumber' :hasChangeSell="hasChangeSell2" :handleOptions='handleOptions2'/>
</mt-tab-container-item>
</mt-tab-container>
- <foot></foot>
+ <!-- <foot></foot> -->
</div>
</template>
diff --git a/src/page/user/user.vue b/src/page/user/user.vue
index 2671af1..725f2b2 100644
--- a/src/page/user/user.vue
+++ b/src/page/user/user.vue
@@ -387,7 +387,7 @@
<span class="text-center btnok loginout" @click="toRegister">注销登录</span>
</div>
</div>
- <foot></foot>
+ <!-- <foot></foot> -->
</div>
</template>
<script type="text/ecmascript-6">
--
Gitblit v1.9.3