[]...
This commit is contained in:
@@ -47,7 +47,7 @@
|
||||
<image class="cover" :src="item.cover" mode="aspectFill"></image>
|
||||
<view class="title">{{item.name}}</view>
|
||||
<view style='font-size: 26rpx;color: #999;font-weight: normal;' v-if='item.price.pv>0'>
|
||||
贡献值:<span>{{item.price.pv}}</span><image style="width: 20rpx;" src="/static/icons/crystal-icon.png" mode="widthFix" />
|
||||
贡献值:<span>{{item.price.pv}}</span><image style="width: 28rpx;" src="/static/icons/crystal-icon.png" mode="widthFix" />
|
||||
</view>
|
||||
<view class="price"><text>¥</text>{{item.original_price}}</view>
|
||||
</view>
|
||||
@@ -93,7 +93,16 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- 优选商品 -->
|
||||
<goods-list :list="goods" priceType="CNY" @on-goods="onGoods" />
|
||||
<goods-list :list="goods" priceType="CNY" @on-goods="onGoods">
|
||||
<template #statistics="good">
|
||||
<view class="goods-pv">
|
||||
<block v-if="good.value.price.pv > 0">
|
||||
+ {{good.value.price.pv}}
|
||||
<image class="goods-pv-icon" src="/static/icons/crystal-icon.png" mode="widthFix" />
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
</goods-list>
|
||||
<!-- 分页 -->
|
||||
<uni-load-more :status="pageStatus" :iconSize="16"></uni-load-more>
|
||||
</view>
|
||||
@@ -480,369 +489,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 热易商家
|
||||
.hot-swiper {
|
||||
margin: 0 $margin $margin $margin;
|
||||
height: 240rpx;
|
||||
|
||||
.hot-box {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: ($radius/2);
|
||||
background: white;
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
|
||||
.hot-vip {
|
||||
position: absolute;
|
||||
top: $padding;
|
||||
left: $padding;
|
||||
background-color: #191919;
|
||||
color: #f3c8a8;
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
padding: 0 8rpx;
|
||||
border-radius: 6rpx 6rpx 6rpx 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hot-tool {
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
right: $padding;
|
||||
;
|
||||
|
||||
.hot-deal {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 0 14rpx rgba(260, 60, 80, .9);
|
||||
background: linear-gradient(to bottom, #e1293f, #f85d31);
|
||||
color: #FFFFFF;
|
||||
font-size: 26rpx;
|
||||
border-radius: 50%;
|
||||
padding-top: 25rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 24rpx;
|
||||
|
||||
.hot-deal-number {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
position: absolute;
|
||||
left: $padding;
|
||||
top: $padding;
|
||||
width: calc(198rpx - #{$padding * 2});
|
||||
height: calc(198rpx - #{$padding * 2});
|
||||
}
|
||||
|
||||
.hot-content {
|
||||
padding-left: calc(198rpx - #{$padding});
|
||||
|
||||
.hot-title {
|
||||
font-weight: bold;
|
||||
font-size: $title-size-lg;
|
||||
line-height: 40rpx;
|
||||
height: 40rpx;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.hot-credit {
|
||||
font-size: 24rpx;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
color: #ec652f;
|
||||
border: 2rpx solid #ec652f;
|
||||
line-height: 36rpx;
|
||||
border-radius: 6rpx;
|
||||
padding: 0 6rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.hot-trade,
|
||||
.hot-warrant {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
.hot-trade {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.hot-warrant {
|
||||
display: flex;
|
||||
|
||||
.hot-warrant-text {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.hot-bar {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
margin-top: 4rpx;
|
||||
|
||||
.hot-bar-color {
|
||||
background: #ebebeb;
|
||||
border-left: 2rpx solid transparent;
|
||||
border-right: 2rpx solid transparent;
|
||||
width: calc(100% - 50rpx);
|
||||
border-radius: 60rpx;
|
||||
margin: 6rpx 10rpx 0 0;
|
||||
height: 18rpx;
|
||||
|
||||
.hot-bar-strip {
|
||||
background-color: #ff8562;
|
||||
border: 1px solid #ff8562;
|
||||
border-radius: 10px;
|
||||
box-shadow: 1vw 3vh 10vh rgba(168, 7, 7, 0.8);
|
||||
background-size: 3em 3em;
|
||||
background-image: linear-gradient(-45deg, transparent 0em, transparent 0.8em, #ec3950 0.9em, #ec3950 2.1em, transparent 2.1em, transparent 2.9em, #ec3950 3.1em);
|
||||
height: 14rpx;
|
||||
border-radius: 60rpx;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to bottom, #db152e, rgba(168, 7, 7, 0.6) 15%, transparent 60%, #db152e);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hot-bar-per {
|
||||
font-size: 20rpx;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
transform: scale(.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.credibility {
|
||||
height: calc(108rpx - #{$padding * 2});
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
}
|
||||
|
||||
.trading {
|
||||
line-height: 40rpx;
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $padding;
|
||||
font-size: $title-size-m;
|
||||
background-color: $text-price;
|
||||
color: white;
|
||||
line-height: 50rpx;
|
||||
width: 100rpx;
|
||||
text-align: center;
|
||||
margin-top: -25rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 推荐商家
|
||||
.recommended {
|
||||
white-space: nowrap;
|
||||
|
||||
.item-box {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background: white;
|
||||
width: 370rpx;
|
||||
margin-left: $margin;
|
||||
border-radius: ($radius/2);
|
||||
padding: ($padding + $padding/2) $padding - 10;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
|
||||
&:last-child {
|
||||
margin-right: $margin;
|
||||
}
|
||||
|
||||
.item-cover {
|
||||
background: #eee;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
vertical-align: top;
|
||||
border-radius: $radius / 2;
|
||||
}
|
||||
|
||||
.item-vip {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
;
|
||||
top: 20rpx;
|
||||
background-color: #f3ceb3;
|
||||
font-size: 24rpx;
|
||||
line-height: 38rpx;
|
||||
border-radius: 0 6rpx 6rpx 0;
|
||||
display: flex;
|
||||
|
||||
.item-vip-text {
|
||||
background-color: #191919;
|
||||
color: #f3c8a8;
|
||||
padding: 0 6rpx;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.item-vip-tips {
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-title {
|
||||
margin: 20rpx 0 10rpx;
|
||||
}
|
||||
|
||||
.item-trade {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.item-bar {
|
||||
display: flex;
|
||||
margin: 10rpx 0 20rpx;
|
||||
|
||||
.item-bar-color {
|
||||
background: #ebebeb;
|
||||
border-left: 2rpx solid transparent;
|
||||
border-right: 2rpx solid transparent;
|
||||
width: calc(100% - 50rpx);
|
||||
border-radius: 60rpx;
|
||||
margin: 4rpx 10rpx 0 0;
|
||||
|
||||
.item-bar-strip {
|
||||
background-color: #f3c8a8;
|
||||
border: 2rpx solid #f3c8a8;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 1vw 3vh 10vh rgba(168, 7, 7, 0.8);
|
||||
background-size: 3em 3em;
|
||||
background-image: linear-gradient(-45deg, transparent 0em, transparent 0.8em, #ee883d 0.9em, #ee883d 2.1em, transparent 2.1em, transparent 2.9em, #ee883d 3.1em);
|
||||
animation: warning-animation 1.4s infinite linear;
|
||||
height: 14rpx;
|
||||
border-radius: 60rpx;
|
||||
position: relative;
|
||||
|
||||
.item-bar-per {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -6rpx;
|
||||
height: 100%;
|
||||
font-size: 20rpx;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.4);
|
||||
transform: scale(.8);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to bottom, #ee883d, rgba(168, 7, 7, 0.6) 15%, transparent 60%, #ee883d);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@keyframes warning-animation {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 3em 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-bar-strip-img {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
animation: bounce-up 1.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce-up {
|
||||
25% {
|
||||
transform: translateY(2rpx);
|
||||
}
|
||||
|
||||
50%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateY(-2rpx);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-url {
|
||||
background: linear-gradient(to right, #e1293f, #f85d31);
|
||||
color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
line-height: 52rpx;
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 28rpx;
|
||||
|
||||
.item-credit {
|
||||
font-size: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
background-color: #FFFFFF;
|
||||
color: #e1293f;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
padding: 0 10rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item-credit-img {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin: 12rpx 8rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item-btn {
|
||||
padding-left: 20rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 模块标题
|
||||
.block-title {
|
||||
padding: $padding;
|
||||
@@ -866,4 +512,13 @@
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
// 加水晶
|
||||
.goods-pv{
|
||||
.goods-pv-icon{
|
||||
width: 28rpx;
|
||||
vertical-align: middle;
|
||||
margin-left: 5rpx;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -27,7 +27,16 @@
|
||||
</view>
|
||||
<view class="lists">
|
||||
<!-- 优选商品 -->
|
||||
<goods-list :list="searchArr" priceType="CNY" @on-goods="onGoods" />
|
||||
<goods-list :list="searchArr" priceType="CNY" @on-goods="onGoods">
|
||||
<template #statistics="good">
|
||||
<view class="goods-pv">
|
||||
<block v-if="good.value.price.pv > 0">
|
||||
+ {{good.value.price.pv}}
|
||||
<image class="goods-pv-icon" src="/static/icons/crystal-icon.png" mode="widthFix" />
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
</goods-list>
|
||||
</view>
|
||||
<!-- 分页 -->
|
||||
<uni-load-more :status="pageStatus" :iconSize="16" v-if="searchArr.length > 0" />
|
||||
@@ -300,4 +309,13 @@
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
// 加水晶
|
||||
.goods-pv{
|
||||
.goods-pv-icon{
|
||||
width: 28rpx;
|
||||
vertical-align: middle;
|
||||
margin-left: 5rpx;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -24,7 +24,16 @@
|
||||
|
||||
</view>
|
||||
<view class="lists">
|
||||
<goods-list :list="goods" priceType="CNY" @on-goods="onGoods" />
|
||||
<goods-list :list="goods" priceType="CNY" @on-goods="onGoods">
|
||||
<template #statistics="good">
|
||||
<view class="goods-pv">
|
||||
<block v-if="good.value.price.pv > 0">
|
||||
+ {{good.value.price.pv}}
|
||||
<image class="goods-pv-icon" src="/static/icons/crystal-icon.png" mode="widthFix" />
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
</goods-list>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -208,4 +217,14 @@
|
||||
.lists {
|
||||
padding-top: 70rpx;
|
||||
}
|
||||
|
||||
// 加水晶
|
||||
.goods-pv{
|
||||
.goods-pv-icon{
|
||||
width: 28rpx;
|
||||
vertical-align: middle;
|
||||
margin-left: 5rpx;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<goodsList :list="goods" priceType="CNY" :status='status' toast="暂无产品权证" notag='has'>
|
||||
<template v-slot:statistics="goods">
|
||||
<view>库存{{goods.value.stock}}</view>
|
||||
</template>
|
||||
</template> -->
|
||||
<template v-slot:footer="goods">
|
||||
<view class="footer-btns">
|
||||
<block v-if="status == '0'">
|
||||
@@ -108,6 +108,9 @@
|
||||
status: this.status,
|
||||
page:this.page
|
||||
}).then(res => {
|
||||
|
||||
console.log(res)
|
||||
|
||||
let countArr = new Array
|
||||
for(let key in res.count){
|
||||
countArr.push(key)
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
</view>
|
||||
<!-- 平台累计盈利，通证 -->
|
||||
<view class="chart">
|
||||
<view class="title">累计盈利和通证价值走势图</view>
|
||||
<view class="title">通证价值走势图</view>
|
||||
<view class="chart-f2">
|
||||
<l-f2 ref="chartChange"></l-f2>
|
||||
</view>
|
||||
@@ -356,42 +356,37 @@
|
||||
})
|
||||
},
|
||||
// 绘制图表
|
||||
showCartc(data) {
|
||||
showCartc(dataInfo) {
|
||||
// 图表信息
|
||||
this.$refs.chartChange.init(config => {
|
||||
config.appendPadding = [10, 30, 10, 15]
|
||||
const chart = new F2.Chart(config);
|
||||
chart.source(data, {
|
||||
date: {
|
||||
range: [0, 1],
|
||||
type: 'timeCat',
|
||||
mask: 'MM-DD'
|
||||
},
|
||||
value: {
|
||||
tickCount: 0
|
||||
}
|
||||
});
|
||||
chart.legend({
|
||||
position: 'bottom',
|
||||
offsetY: 0,
|
||||
offsetX: 30
|
||||
});
|
||||
chart.area()
|
||||
.position('date*value')
|
||||
.color('name', ['#5881d3', '#ca66e0'])
|
||||
.shape('smooth')
|
||||
chart.line()
|
||||
.position('date*value')
|
||||
.color('name', ['#5881d3', '#ca66e0'])
|
||||
.shape('smooth', name => {
|
||||
if (name === '预期收益率') {
|
||||
return 'line';
|
||||
}
|
||||
if (name === '实际收益率') {
|
||||
return 'line';
|
||||
}
|
||||
});
|
||||
chart.render();
|
||||
this.$refs.chartChange.init(config => {
|
||||
config.appendPadding = [8, 30, 10, 15]
|
||||
const chart = new F2.Chart(config)
|
||||
chart.source(dataInfo, {
|
||||
date: {
|
||||
type: 'timeCat',
|
||||
mask: 'MM/DD',
|
||||
tickCount: 7,
|
||||
range: [ 0, 1 ]
|
||||
},
|
||||
value: {
|
||||
tickCount: 7,
|
||||
alias: '通证价值'
|
||||
}
|
||||
});
|
||||
chart.tooltip({
|
||||
showCrosshairs: true,
|
||||
crosshairsStyle: {
|
||||
stroke: 'rgba(255, 255, 255, 0.25)',
|
||||
lineWidth: 1
|
||||
},
|
||||
tooltipMarkerStyle: {
|
||||
fill: '#fff'
|
||||
}
|
||||
});
|
||||
chart.line().position('date*value').shape('smooth').color('#ca66e0');
|
||||
chart.point().position('date*value').shape('smooth').color('#ca66e0').style({stroke: '#fff', lineWidth: 1 });
|
||||
chart.area().position('date*value').color('#ca66e0').shape('smooth')
|
||||
chart.render();
|
||||
return chart;
|
||||
})
|
||||
},
|
||||
|
||||
34
pages/index/new_file.js
Normal file
34
pages/index/new_file.js
Normal file
@@ -0,0 +1,34 @@
|
||||
|
||||
config.appendPadding = [10, 30, 10, 15]
|
||||
const chart = new F2.Chart(config);
|
||||
chart.source(data, {
|
||||
date: {
|
||||
range: [0, 1],
|
||||
type: 'timeCat',
|
||||
mask: 'MM-DD'
|
||||
},
|
||||
value: {
|
||||
tickCount: 0
|
||||
}
|
||||
});
|
||||
chart.legend({
|
||||
position: 'bottom',
|
||||
offsetY: 0,
|
||||
offsetX: 30
|
||||
});
|
||||
chart.area()
|
||||
.position('date*value')
|
||||
.color('name', ['#5881d3', '#ca66e0'])
|
||||
.shape('smooth')
|
||||
chart.line()
|
||||
.position('date*value')
|
||||
.color('name', ['#5881d3', '#ca66e0'])
|
||||
.shape('smooth', name => {
|
||||
if (name === '预期收益率') {
|
||||
return 'line';
|
||||
}
|
||||
if (name === '实际收益率') {
|
||||
return 'line';
|
||||
}
|
||||
});
|
||||
chart.render();
|
||||
Reference in New Issue
Block a user