liang
/
samehome
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

删除打印信息，K线图参考文件上传

master
[liang] 3 years ago
parent
88d070852e
commit
279789f8ca
2 changed files with 835 additions and 391 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 457
      components/kEchart/index.vue
  2. 769
      pages/markets/kLine.vue

457
components/kEchart/index.vue
View File

@ -0,0 +1,457 @@
<template>
<view class="content">
<!-- #ifdef APP-PLUS || H5 -->
<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts">
</view>
<!-- #endif -->
<!-- #ifndef APP-PLUS || H5 -->
<view>非 APP、H5 环境不支持</view>
<!-- #endif -->
</view>
</template>
<script>
// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)，数量(vol)
function splitData(rawData) {
let raw = JSON.parse(JSON.stringify(rawData))
let categoryData = [];
let values = [];
let volumes = [];
for (let i = 0; i < raw.length; i++) {
categoryData.push(raw[i].splice(0, 1)[0]);
values.push(raw[i]);
// console.log(raw[i],'*****')
// volumes.push([i, raw[i][4], raw[i][0] >= raw[i][1] ? 1 : -1]);
volumes.push([i, raw[i][3], raw[i][0] >= raw[i][1] ? 1 : -1]);
}
return {
categoryData: categoryData,
values: values,
volumes: volumes
};
}
function calculateMA(dayCount, values) {
let result = [];
for (let i = 0, len = values.length; i < len; i++) {
if (i < dayCount) {
result.push('-');
continue;
}
let sum = 0;
for (let j = 0; j < dayCount; j++) {
sum += values[i - j][1];
}
result.push(+(sum / dayCount).toFixed(3));
}
return result;
}
export default {
props: {
kData,
// 初始数据
initData: {
type: Array,
required: true
},
upColor: {
type: String,
default: 'rgb(49,186,160)'
},
downColor: {
type: String,
default: 'rgb(252,95,95)'
},
// 警戒线颜色
markLineColor: {
type: String,
default: '#ffffff'
},
// 警戒线文字颜色
markLineLabelColor: {
type: String,
default: '#ffffff'
},
// 警戒线第二排文字
markLineYTime: {
type: String,
default: '最新价'
},
// 警戒线文字背景颜色
markLineLabelBackgroundColor: {
type: String,
default: '#00b6ff'
},
// Y轴颜色
yAxisSplitLineColor: {
type: String,
default: '#333'
},
// Y轴刻度值颜色
yAxisAxisLabelColor: {
type: String,
default: '#fff'
},
// 背景图
backgroundImageUrl: {
type: String,
default: '#000'
},
},
data() {
return {
option: {},
oldData: {}
}
},
onShow() {
console.log(this.kData);
this.init(this.kData)
},
mounted() {
if (this.initData.length > 0) {
this.init(this.initData)
}
},
methods: {
// 追加数据
addData(oo) {
let isUp = false;
let isUpIndex = true;
for (let i = 0; i < this.oldData.length; i++) {
// console.log(listData[i][0], oo[0],listData[i][0] != oo[0])
if (this.oldData[i][0] == oo[0]) {
isUp = true;
isUpIndex = i;
this.oldData[isUpIndex] = oo
}
}
if (!isUp) {
this.oldData.shift();
this.oldData.push(oo)
}
this.changeOption(this.oldData)
},
// 初始化数据
init(data) {
console.log(data);
this.oldData = JSON.parse(JSON.stringify(data));
this.changeOption(this.oldData)
},
changeOption(res) {
let data = splitData(JSON.parse(JSON.stringify(res)));
this.option = {
// animation: false,
animationEasing: 'elasticOut',
legend: {
show: false,
bottom: 10,
left: 'center',
data: ['Dow-Jones index', 'MA5', 'MA10']
},
tooltip: {
trigger: 'axis',
confine: true,
axisPointer: {
type: 'line',
},
backgroundColor: 'rgba(255, 255, 255, 0.8)',
position: function (pos, params, el, elRect, size) {
let obj = { top: 10 };
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
},
extraCssText: 'width: 170px'
},
axisPointer: {
type: 'line',
lineStyle: {
type: 'solid',
color: '#ffffff'
},
link: { xAxisIndex: 'all' },
label: {
backgroundColor: '#777'
}
},
visualMap: {
show: false,
seriesIndex: 3,
dimension: 2,
pieces: [{
value: 1,
color: this.downColor
}, {
value: -1,
color: this.upColor
}]
},
grid: [
{
top: '4%',
left: '2%',
right: '18%',
height: '65%',
bottom: '0%',
borderWidth: 20
},
{
left: '2%',
right: '18%',
bottom: '5%',
height: '25%'
}
],
graphic: [
{
type: 'image', // 图形元素类型
id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
right: 'center', // 根据父元素进行定位 （居中）
bottom: 'middle', // 根据父元素进行定位 （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
z: 0, // 层叠
bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
style: {
image: this.backgroundImageUrl, // 这里一定要注意、注意，必须是https开头的图片路径地址
width: '100%',
height: '100%'
}
}],
xAxis: [
{
show: false,
type: 'category',
},
{
type: 'category',
gridIndex: 1,
data: data.categoryData,
// scale: true,
// boundaryGap: false,
axisTick: { show: false },
minorTick: { show: false },
axisLine: { onZero: false },
axisLabel: { onZero: false },
// splitNumber: 20,
min: 'dataMin',
max: 'dataMax',
axisPointer: {
label: {
formatter: function (params) {
let seriesValue = (params.seriesData[0] || {}).value;
return params.value
+ (seriesValue != null
? '\n' + echarts.format.addCommas(seriesValue)
: ''
);
}
}
}
}
],
yAxis: [
{
scale: true,
position: 'right',
splitLine: {
show: true,
lineStyle: {
color: this.yAxisSplitLineColor
}
},
axisLabel: {
show: true,
color: this.yAxisAxisLabelColor,
},
minorTick: {
show: true,
splitNumber: 10,
lineStyle: {
color: this.yAxisAxisLabelColor,
}
}
},
{
scale: true,
gridIndex: 1,
splitNumber: 1,
axisLabel: { show: false },
axisLine: { show: false },
axisTick: { show: false },
splitLine: { show: false }
}
],
dataZoom: [
{
type: 'inside',
xAxisIndex: [0, 1],
zoomOnMouseWheel: false,
moveOnMouseMove: false,
moveOnMouseWheel: false,
start: 0,
end: 100,
},
{
show: true,
xAxisIndex: [0, 1],
type: 'inside',
zoomOnMouseWheel: false,
moveOnMouseMove: false,
moveOnMouseWheel: false,
top: '85%',
start: 0,
end: 100,
}
],
series: [
{
name: 'Dow-Jones index',
type: 'candlestick',
data: data.values,
itemStyle: {
color: this.upColor,
color0: this.downColor,
borderColor: null,
borderColor0: null
},
tooltip: {
formatter: function (param) {
param = param[0];
return [
'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
'Open: ' + param.data[0] + '<br/>',
'Close: ' + param.data[1] + '<br/>',
'Lowest: ' + param.data[2] + '<br/>',
'Highest: ' + param.data[3] + '<br/>'
].join('');
}
},
markLine: {
symbol: 'none', //去掉警戒线最后面的箭头
data: [
{
silent: false,//鼠标悬停事件 true没有，false有
yAxis: data.values[data.values.length - 1][1],// 警戒线的标注值，可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分为最大，最小，平均值
lineStyle: { //警戒线的样式 ，虚实 颜色
type: "solid",
color: this.markLineColor,
},
label: {
position: "end",//将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
color: this.markLineLabelColor,
// backgroundColor:"#00b6ff",
fontSize: "12px",
formatter: [
'{a|{c}}',
'{b|' + this.markLineYTime + '}'
].join('\n'),
// formatter:"{c}\n最新价",
rich: {
a: {
padding: 4,
backgroundColor: this.markLineLabelBackgroundColor,
align: 'right',
},
b: {
padding: 4,
backgroundColor: this.markLineLabelBackgroundColor,
align: 'right',
},
}
},
},
]
},
},
{
name: 'MA5',
type: 'line',
symbol: "none",
data: calculateMA(5, data.values),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'MA10',
type: 'line',
symbol: "none",
data: calculateMA(10, data.values),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'Volume',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data: data.volumes
}
]
}
},
onViewClick(options) {
console.log(options)
}
}
}
</script>
<script module="echarts" lang="renderjs">
let myChart
export default {
mounted() {
if (typeof window.echarts === 'function') {
this.initEcharts()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
script.src = 'static/echarts.min.js'
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
}
},
methods: {
initEcharts() {
myChart = echarts.init(document.getElementById('echarts'), null, {renderer: 'svg'})
// 观测更新的数据在 view 层可以直接访问到
myChart.setOption(this.option)
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
if (myChart) {
myChart.setOption(newValue)
}
},
onClick(event, ownerInstance) {
// 调用 service 层的方法
ownerInstance.callMethod('onViewClick', {
test: 'test'
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.echarts {
width: 100%;
height: 482px;
overflow: hidden;
width: 100%;
background-color: #12023e;
}
</style>

769
pages/markets/kLine.vue
View File

@ -26,8 +26,8 @@
</view> </view>
</view> </view>
<!-- K线图 --> <!-- K线图 -->
<view class="kline" id="kline" :kdata="kdata" <view class="kline" id="kline" :kdata="kdata" :change:kdata="klineE.receive"
:change:kdata="klineE.receive" style="height:1000rpx;color:aliceblue "> style="height:1000rpx;color:aliceblue ">
</view> </view>
<!-- 买卖挂牌表 --> <!-- 买卖挂牌表 -->
@ -78,107 +78,94 @@
</view> </view>
</template> </template>
<script> <script>
import ktest from '@/utils/ktest.js' import ktest from '@/utils/ktest.js'
export default { export default {
name: "trade", name: "trade",
components: { ktest }, components: { ktest },
data() { data() {
return { return {
buyList: 7, buyList: 7,
sellList: 9, sellList: 9,
kdata:[] kdata: []
};
},
computed: {
i18n() {
return this.$t("markets");
},
},
onLoad() {
this.kdata = this.splitData(ktest.JSON);
console.log(this.kdata, 1111)
},
onShow() { },
methods: {
into() {
};
}, },
computed: { splitData(rawData) {
i18n() { let categoryData = [];
return this.$t("markets"); let values = [];
}, let volumes = [];
for (let i = 0; i < rawData.length; i++) {
categoryData.push(rawData[i].splice(0, 1)[0]);
values.push(rawData[i]);
volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
}
return {
categoryData: categoryData,
values: values,
volumes: volumes
};
}, },
onLoad() { depthChange(e) {
this.kdata=this.splitData(ktest.JSON); console.log(e);
console.log(this.kdata,1111)
}, },
onShow() {}, goto(page) {
methods: { let url = '';
into(){ switch (page) {
case 'kLine':
}, url = '/pages/markets/kLine'
splitData(rawData) { break;
let categoryData = []; default:
let values = []; break;
let volumes = [];
for (let i = 0; i < rawData.length; i++) {
categoryData.push(rawData[i].splice(0, 1)[0]);
values.push(rawData[i]);
volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
}
return {
categoryData: categoryData,
values: values,
volumes: volumes
};
},
depthChange(e) {
console.log(e);
},
goto(page) {
let url = '';
switch (page) {
case 'kLine':
url = '/pages/markets/kLine'
break;
default:
break;
}
uni.navigateTo({
url,
});
} }
uni.navigateTo({
url,
});
}
}, },
} }
</script> </script>
<script module="klineE" lang="renderjs"> <script module="klineE" lang="renderjs">
let kline let kline
export default { export default {
mounted() { mounted() {
console.log(0); if (typeof window.echarts === 'function') {
console.log(window);
console.log(typeof window.echarts);
// this.initEcharts();
if (typeof window.echarts === 'object') {
//this.initEcharts()
} else if (typeof window.echarts === 'function') {
//this.initEcharts() //this.initEcharts()
} else { } else {
// console.log(1);
// // 动态引入较大类库避免影响页面展示 // // 动态引入较大类库避免影响页面展示
// const script = document.createElement('script'); // const script = document.createElement('script');
// console.log(2);
// //this.kdata=this.splitData(this.kdata); // //this.kdata=this.splitData(this.kdata);
// // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算 // // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
// script.src = './static/echarts.js'; // script.src = './static/echarts.js';
// console.log(3);
// script.onload = this.initEcharts.bind(this); // script.onload = this.initEcharts.bind(this);
// console.log(4);
// document.head.appendChild(script); // document.head.appendChild(script);
// console.log(5);
} }
}, },
methods: { methods: {
receive(newValue, oldValue, ownerVm, vm) { receive(newValue, oldValue, ownerVm, vm) {
console.log('newValue', newValue) console.log('newValue', newValue)
const script = document.createElement('script'); const script = document.createElement('script');
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算 // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
script.src = './static/echarts.js'; script.src = './static/echarts.js';
console.log(3); script.onload = this.upData.bind(this);
script.onload = this.upData.bind(this); document.head.appendChild(script);
console.log(4);
document.head.appendChild(script);
}, },
calculateMA(dayCount, data) { calculateMA(dayCount, data) {
@ -195,184 +182,184 @@
result.push(+(sum / dayCount).toFixed(3)); result.push(+(sum / dayCount).toFixed(3));
} }
return result; return result;
}, },
upData(myChart){ upData(myChart){
const upColor = '#00da3c'; const upColor = '#00da3c';
const downColor = '#ec0000'; const downColor = '#ec0000';
var chartDom = document.getElementById('kline'); var chartDom = document.getElementById('kline');
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option; var option;
myChart.setOption( myChart.setOption(
(option = { (option = {
animation: false, animation: false,
legend: { legend: {
bottom: 10, bottom: 10,
left: 'center', left: 'center',
data: [] data: []
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'cross' type: 'cross'
}, },
borderWidth: 1, borderWidth: 1,
borderColor: '#ccc', borderColor: '#ccc',
padding: 10, padding: 10,
textStyle: { textStyle: {
color: '#ffffff' color: '#ffffff'
}, },
position: function (pos, params, el, elRect, size) { position: function (pos, params, el, elRect, size) {
const obj = { const obj = {
top: 10 top: 10
}; };
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30; obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj; return obj;
} }
// extraCssText: 'width: 170px' // extraCssText: 'width: 170px'
}, },
axisPointer: { axisPointer: {
link: [ link: [
{ {
xAxisIndex: 'all' xAxisIndex: 'all'
} }
], ],
label: { label: {
backgroundColor: '#fff' backgroundColor: '#fff'
} }
}, },
toolbox: { toolbox: {
feature: { feature: {
dataZoom: { dataZoom: {
yAxisIndex: false yAxisIndex: false
}, },
brush: { brush: {
type: ['lineX', 'clear'] type: ['lineX', 'clear']
} }
} }
}, },
brush: { brush: {
xAxisIndex: 'all', xAxisIndex: 'all',
brushLink: 'all', brushLink: 'all',
outOfBrush: { outOfBrush: {
colorAlpha: 0.1 colorAlpha: 0.1
} }
}, },
visualMap: { visualMap: {
show: false, show: false,
seriesIndex: 5, seriesIndex: 5,
dimension: 2, dimension: 2,
pieces: [ pieces: [
{ {
value: 1, value: 1,
color: downColor color: downColor
}, },
{ {
value: -1, value: -1,
color: upColor color: upColor
} }
] ]
}, },
grid: [ grid: [
{ {
left: '10%', left: '10%',
right: '8%', right: '8%',
height: '50%' height: '50%'
}, },
{ {
left: '10%', left: '10%',
right: '8%', right: '8%',
top: '63%', top: '63%',
height: '16%' height: '16%'
} }
], ],
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
data: this.kdata.categoryData, data: this.kdata.categoryData,
boundaryGap: false, boundaryGap: false,
axisLine: { onZero: false }, axisLine: { onZero: false },
splitLine: { show: false }, splitLine: { show: false },
min: 'dataMin', min: 'dataMin',
max: 'dataMax', max: 'dataMax',
axisPointer: { axisPointer: {
z: 100 z: 100
} }
}, },
{ {
type: 'category', type: 'category',
gridIndex: 1, gridIndex: 1,
data: this.kdata.categoryData, data: this.kdata.categoryData,
boundaryGap: false, boundaryGap: false,
axisLine: { onZero: false }, axisLine: { onZero: false },
axisTick: { show: false }, axisTick: { show: false },
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { show: false }, axisLabel: { show: false },
min: 'dataMin', min: 'dataMin',
max: 'dataMax' max: 'dataMax'
} }
], ],
yAxis: [ yAxis: [
{ {
scale: true, scale: true,
splitArea: { splitArea: {
show: true show: true
} }
}, },
{ {
scale: true, scale: true,
gridIndex: 1, gridIndex: 1,
splitNumber: 2, splitNumber: 2,
axisLabel: { show: false }, axisLabel: { show: false },
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
splitLine: { show: false } splitLine: { show: false }
} }
], ],
dataZoom: [ dataZoom: [
{ {
type: 'inside', type: 'inside',
xAxisIndex: [0, 1], xAxisIndex: [0, 1],
start: 98, start: 98,
end: 100 end: 100
}, },
{ {
show: true, show: true,
xAxisIndex: [0, 1], xAxisIndex: [0, 1],
type: 'slider', type: 'slider',
top: '85%', top: '85%',
start: 98, start: 98,
end: 100 end: 100
} }
], ],
series: [ series: [
{ {
name: 'Dow-Jones index', name: 'Dow-Jones index',
type: 'candlestick', type: 'candlestick',
data: this.kdata.values, data: this.kdata.values,
itemStyle: { itemStyle: {
color: upColor, color: upColor,
color0: downColor, color0: downColor,
borderColor: undefined, borderColor: undefined,
borderColor0: undefined borderColor0: undefined
}, },
tooltip: { tooltip: {
formatter: function (param) { formatter: function (param) {
param = param[0]; param = param[0];
return [ return [
'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">', 'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
'Open: ' + param.data[0] + '<br/>', 'Open: ' + param.data[0] + '<br/>',
'Close: ' + param.data[1] + '<br/>', 'Close: ' + param.data[1] + '<br/>',
'Lowest: ' + param.data[2] + '<br/>', 'Lowest: ' + param.data[2] + '<br/>',
'Highest: ' + param.data[3] + '<br/>' 'Highest: ' + param.data[3] + '<br/>'
].join(''); ].join('');
} }
} }
}, },
] ]
}), }),
true true
); );
} }
}, },
watch: { watch: {
@ -386,183 +373,183 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.main { .main {
.header { .header {
background: #000000; background: #000000;
margin-top: 200rpx; margin-top: 200rpx;
padding: 0 32rpx; padding: 0 32rpx;
.top { .top {
height: 80rpx; height: 80rpx;
border-bottom: 2rpx solid #A1A0A8; border-bottom: 2rpx solid #A1A0A8;
.price {
line-height: 80rpx;
font-size: 40rpx;
}
.percent { .price {
vertical-align: text-top; line-height: 80rpx;
margin-left: 20rpx; font-size: 40rpx;
padding: 8rpx 20rpx;
border-radius: 8rpx;
font-size: 24rpx;
background-color: rgba($color: #F26666, $alpha: 0.2);
color: #F26666;
&.rise {
color: #00E8A2;
background-color: rgba($color: #00E8A2, $alpha: 0.2);
}
}
} }
.bottom { .percent {
display: flex; vertical-align: text-top;
margin-left: 20rpx;
padding: 8rpx 20rpx;
border-radius: 8rpx;
font-size: 24rpx; font-size: 24rpx;
background-color: rgba($color: #F26666, $alpha: 0.2);
color: #F26666;
.title { &.rise {
margin-top: 24rpx; color: #00E8A2;
line-height: 32rpx; background-color: rgba($color: #00E8A2, $alpha: 0.2);
} }
}
}
.value { .bottom {
margin: 24rpx 0; display: flex;
color: #A1A0A8; font-size: 24rpx;
}
.left { .title {
flex: 1; margin-top: 24rpx;
text-align: left; line-height: 32rpx;
} }
.center { .value {
flex: 1; margin: 24rpx 0;
text-align: center; color: #A1A0A8;
} }
.right { .left {
flex: 1; flex: 1;
text-align: right; text-align: left;
} }
.center {
flex: 1;
text-align: center;
} }
}
.MarketTrades { .right {
.headTitle { flex: 1;
padding-left: 32rpx; text-align: right;
font-size: 34rpx;
height: 80rpx;
line-height: 80rpx;
} }
.table { }
display: flex; }
font-size: 24rpx;
.box { .MarketTrades {
flex: 1; .headTitle {
overflow: hidden; padding-left: 32rpx;
height: 450rpx; font-size: 34rpx;
height: 80rpx;
line-height: 80rpx;
}
.title { .table {
display: flex; display: flex;
margin-bottom: 16rpx; font-size: 24rpx;
color: #A1A0A8;
.quantity { .box {
flex: 1; flex: 1;
} overflow: hidden;
height: 450rpx;
.price { .title {
flex: 1; display: flex;
text-align: center; margin-bottom: 16rpx;
} color: #A1A0A8;
.quantity {
flex: 1;
} }
.list { .price {
overflow: hidden; flex: 1;
text-align: center;
}
}
.item { .list {
position: relative; overflow: hidden;
width: 100%;
height: 50rpx;
line-height: 50rpx;
display: flex;
.price { .item {
display: block; position: relative;
width: 50%; width: 100%;
text-align: left; height: 50rpx;
z-index: 1; line-height: 50rpx;
display: flex;
} .price {
display: block;
width: 50%;
text-align: left;
z-index: 1;
.num { }
display: block;
width: 50%;
text-align: right;
padding-right: 32rpx;
z-index: 1;
&.buy { .num {
color: #00E8A2; display: block;
} width: 50%;
text-align: right;
padding-right: 32rpx;
z-index: 1;
&.sell { &.buy {
color: #F4506A; color: #00E8A2;
}
} }
.buybg { &.sell {
height: 100%; color: #F4506A;
position: absolute;
top: 0;
left: 0;
z-index: 0;
background: rgba($color: #00E8A2, $alpha: 0.1)
} }
}
.sellbg { .buybg {
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; left: 0;
z-index: 0; z-index: 0;
background: rgba($color: #F4506A, $alpha: 0.1) background: rgba($color: #00E8A2, $alpha: 0.1)
} }
.sellbg {
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 0;
background: rgba($color: #F4506A, $alpha: 0.1)
} }
} }
} }
}
}
} }
}
.btn { .btn {
display: flex; display: flex;
margin: 96rpx 32rpx; margin: 96rpx 32rpx;
.button { .button {
flex: 1; flex: 1;
box-sizing: border-box; box-sizing: border-box;
height: 96rpx; height: 96rpx;
border-radius: 16rpx; border-radius: 16rpx;
font-weight: 700; font-weight: 700;
font-size: 28rpx; font-size: 28rpx;
color: #15141F !important; color: #15141F !important;
&:nth-child(2) { &:nth-child(2) {
margin-left: 14rpx; margin-left: 14rpx;
}
} }
} }
} }
</style>
}
</style>

Write Preview
Loading…
Cancel
Save