34 changed files with 2310 additions and 310 deletions
@ -0,0 +1,3 @@ |
|||||
|
import Vue from 'vue' |
||||
|
const bus = new Vue() |
||||
|
export default bus |
||||
@ -0,0 +1,132 @@ |
|||||
|
<template> |
||||
|
|
||||
|
<view class="pages"> |
||||
|
|
||||
|
<view class="top"> |
||||
|
<image src="../../static/baseIcon/orders.png" style="width: 18px;height: 18px;" mode="aspectFill"></image> |
||||
|
<text class="top-name">{{info.name}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="content"> |
||||
|
|
||||
|
<view class="item"> |
||||
|
|
||||
|
<text class="item-text">账户数量</text> |
||||
|
<text class="item-text1">{{info.number}}</text> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
<view class="item"> |
||||
|
|
||||
|
<text class="item-text">截止时间</text> |
||||
|
<text class="item-text1">{{info.date}}</text> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view class="item" style="border-bottom: none;"> |
||||
|
|
||||
|
<text class="item-text">账户余额</text> |
||||
|
<text class="item-text1" >{{info.balance}}</text> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
info: { |
||||
|
sid: "", |
||||
|
name: "", |
||||
|
number: "", |
||||
|
date: "", |
||||
|
balance: "", |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.info = { |
||||
|
sid: option.sid, |
||||
|
name: option.name, |
||||
|
number: option.number, |
||||
|
date: option.date, |
||||
|
balance: option.balance, |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.pages { |
||||
|
|
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
background-color: #fff; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
|
||||
|
.top { |
||||
|
|
||||
|
padding: 20px 25px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
|
||||
|
.top-name { |
||||
|
margin-left: 5px; |
||||
|
font-size: 16px; |
||||
|
color: #000; |
||||
|
font-weight: 600; |
||||
|
font-family: sans-serif; |
||||
|
} |
||||
|
|
||||
|
.top-date { |
||||
|
font-size: 13px; |
||||
|
color: #717171; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
display: flex; |
||||
|
margin-left: 20px; |
||||
|
margin-right: 20px; |
||||
|
flex-direction: column; |
||||
|
border-top: 2px solid #eee; |
||||
|
|
||||
|
.item { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 15px 20px; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
|
||||
|
.item-text{ |
||||
|
font-size: 14px; |
||||
|
color: #191919; |
||||
|
} |
||||
|
|
||||
|
.item-text1{ |
||||
|
font-size: 14px; |
||||
|
color: #717171; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,132 @@ |
|||||
|
<template> |
||||
|
|
||||
|
<view class="pages"> |
||||
|
|
||||
|
<view class="top"> |
||||
|
<image src="../../static/baseIcon/orders.png" style="width: 18px;height: 18px;" mode="aspectFill"></image> |
||||
|
<text class="top-name">{{info.name}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="content"> |
||||
|
|
||||
|
<view class="item"> |
||||
|
|
||||
|
<text class="item-text">客户数量</text> |
||||
|
<text class="item-text1">{{info.customNumber}}</text> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
<view class="item"> |
||||
|
|
||||
|
<text class="item-text">截止时间</text> |
||||
|
<text class="item-text1">{{info.date}}</text> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view class="item" style="border-bottom: none;"> |
||||
|
|
||||
|
<text class="item-text">应收账款</text> |
||||
|
<text class="item-text1" >{{info.accounts}}</text> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
info: { |
||||
|
sid: "", |
||||
|
name: "", |
||||
|
customNumber: "", |
||||
|
date: "", |
||||
|
accounts: "", |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.info = { |
||||
|
sid: option.sid, |
||||
|
name: option.name, |
||||
|
customNumber: option.customNumber, |
||||
|
date: option.date, |
||||
|
accounts: option.accounts, |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.pages { |
||||
|
|
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
background-color: #fff; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
|
||||
|
.top { |
||||
|
|
||||
|
padding: 20px 25px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
|
||||
|
.top-name { |
||||
|
margin-left: 5px; |
||||
|
font-size: 16px; |
||||
|
color: #000; |
||||
|
font-weight: 600; |
||||
|
font-family: sans-serif; |
||||
|
} |
||||
|
|
||||
|
.top-date { |
||||
|
font-size: 13px; |
||||
|
color: #717171; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
display: flex; |
||||
|
margin-left: 20px; |
||||
|
margin-right: 20px; |
||||
|
flex-direction: column; |
||||
|
border-top: 2px solid #eee; |
||||
|
|
||||
|
.item { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 15px 20px; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
|
||||
|
.item-text{ |
||||
|
font-size: 14px; |
||||
|
color: #191919; |
||||
|
} |
||||
|
|
||||
|
.item-text1{ |
||||
|
font-size: 14px; |
||||
|
color: #717171; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,122 @@ |
|||||
|
<template> |
||||
|
|
||||
|
<view class="pages"> |
||||
|
|
||||
|
<view class="top"> |
||||
|
<image src="../../static/baseIcon/orders.png" style="width: 18px;height: 18px;" mode="aspectFill"></image> |
||||
|
<text class="top-name">{{info.name}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="content"> |
||||
|
|
||||
|
<view class="item"> |
||||
|
|
||||
|
<text class="item-text">截止时间</text> |
||||
|
<text class="item-text1">{{info.date}}</text> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view class="item" style="border-bottom: none;"> |
||||
|
|
||||
|
<text class="item-text">预付金额</text> |
||||
|
<text class="item-text1" >{{info.advanceCharge}}</text> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
info: { |
||||
|
sid: "", |
||||
|
name: "", |
||||
|
date: "", |
||||
|
advanceCharge: "", |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.info = { |
||||
|
sid: option.sid, |
||||
|
name: option.name, |
||||
|
date: option.date, |
||||
|
advanceCharge: option.advanceCharge, |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.pages { |
||||
|
|
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
background-color: #fff; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
|
||||
|
.top { |
||||
|
|
||||
|
padding: 20px 25px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
|
||||
|
.top-name { |
||||
|
margin-left: 5px; |
||||
|
font-size: 16px; |
||||
|
color: #000; |
||||
|
font-weight: 600; |
||||
|
font-family: sans-serif; |
||||
|
} |
||||
|
|
||||
|
.top-date { |
||||
|
font-size: 13px; |
||||
|
color: #717171; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
display: flex; |
||||
|
margin-left: 20px; |
||||
|
margin-right: 20px; |
||||
|
flex-direction: column; |
||||
|
border-top: 2px solid #eee; |
||||
|
|
||||
|
.item { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 15px 20px; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
|
||||
|
.item-text{ |
||||
|
font-size: 14px; |
||||
|
color: #191919; |
||||
|
} |
||||
|
|
||||
|
.item-text1{ |
||||
|
font-size: 14px; |
||||
|
color: #717171; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,122 @@ |
|||||
|
<template> |
||||
|
|
||||
|
<view class="pages"> |
||||
|
|
||||
|
<view class="top"> |
||||
|
<image src="../../static/baseIcon/orders.png" style="width: 18px;height: 18px;" mode="aspectFill"></image> |
||||
|
<text class="top-name">{{info.name}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="content"> |
||||
|
|
||||
|
<view class="item"> |
||||
|
|
||||
|
<text class="item-text">截止时间</text> |
||||
|
<text class="item-text1">{{info.date}}</text> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view class="item" style="border-bottom: none;"> |
||||
|
|
||||
|
<text class="item-text">在途货值</text> |
||||
|
<text class="item-text1" >{{info.goodsInTransit}}</text> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
info: { |
||||
|
sid: "", |
||||
|
name: "", |
||||
|
date: "", |
||||
|
goodsInTransit: "", |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.info = { |
||||
|
sid: option.sid, |
||||
|
name: option.name, |
||||
|
date: option.date, |
||||
|
goodsInTransit: option.goodsInTransit, |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.pages { |
||||
|
|
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
background-color: #fff; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
|
||||
|
.top { |
||||
|
|
||||
|
padding: 20px 25px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
|
||||
|
.top-name { |
||||
|
margin-left: 5px; |
||||
|
font-size: 16px; |
||||
|
color: #000; |
||||
|
font-weight: 600; |
||||
|
font-family: sans-serif; |
||||
|
} |
||||
|
|
||||
|
.top-date { |
||||
|
font-size: 13px; |
||||
|
color: #717171; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
display: flex; |
||||
|
margin-left: 20px; |
||||
|
margin-right: 20px; |
||||
|
flex-direction: column; |
||||
|
border-top: 2px solid #eee; |
||||
|
|
||||
|
.item { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 15px 20px; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
|
||||
|
.item-text{ |
||||
|
font-size: 14px; |
||||
|
color: #191919; |
||||
|
} |
||||
|
|
||||
|
.item-text1{ |
||||
|
font-size: 14px; |
||||
|
color: #717171; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,514 @@ |
|||||
|
<template> |
||||
|
|
||||
|
<view class="pages"> |
||||
|
|
||||
|
<view class="top"> |
||||
|
<text class="top-name">{{info.projectName}}</text> |
||||
|
<text class="top-date">{{info.orderDate}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="centre"> |
||||
|
|
||||
|
<view class="centre-top"> |
||||
|
<qiun-data-charts type="ring" :opts="info.opts" :chartData="chartData" /> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
<view class="centre-bom"> |
||||
|
<text class="centre-lift-text">贷款总额：{{info.totalLoanWan==''?'--':info.totalLoanWan}}万元</text> |
||||
|
<view class="centre-lift-view" @click="jump"> |
||||
|
<image src="../../static/baseIcon/download.png" style="width: 16px;height: 16px;" mode="aspectFill"> |
||||
|
</image> |
||||
|
<text class="centre-lift-view-text">报表下载</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<!-- <view class="bom"> |
||||
|
<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;"> |
||||
|
<text style=" font-size: 16px; |
||||
|
color: #6C6C6C;">分项数据</text> |
||||
|
<text style=" font-size: 16px; |
||||
|
color: #6C6C6C;">单位：万元</text> |
||||
|
</view> |
||||
|
<qiun-data-charts ref="myChart" type="bar" @tap=tap($event) :opts="opts2" :chartData="chartData2" /> |
||||
|
|
||||
|
</view> --> |
||||
|
|
||||
|
<view style="margin-top: 30px;padding-bottom: 50px; display: flex;flex-direction: column;"> |
||||
|
|
||||
|
<view class="layout" @click="itemClick('1')"> |
||||
|
|
||||
|
<image src="https://supervise.yxtsoft.com/img/newApp/zhye.png" mode="aspectFill" |
||||
|
style="width: 12px;height: 12px;"> |
||||
|
</image> |
||||
|
|
||||
|
<view class="content"> |
||||
|
<text class="content-text1">账户余额</text> |
||||
|
<text class="content-text2">{{info.accountsBalanceWan }}万元</text> |
||||
|
|
||||
|
</view> |
||||
|
<image src="../../static/baseIcon/zy.png" mode="aspectFill" style="width: 14px;height: 14px;"></image> |
||||
|
</view> |
||||
|
|
||||
|
<view class="layout" @click="itemClick('2')"> |
||||
|
|
||||
|
<image src="https://supervise.yxtsoft.com/img/newApp/yszk.png" mode="aspectFill" |
||||
|
style="width: 12px;height: 12px;"> |
||||
|
</image> |
||||
|
|
||||
|
<view class="content"> |
||||
|
<text class="content-text1">应收账款</text> |
||||
|
<text class="content-text2">{{info.accountsReceivableWan }}万元</text> |
||||
|
|
||||
|
</view> |
||||
|
<image src="../../static/baseIcon/zy.png" mode="aspectFill" style="width: 14px;height: 14px;"></image> |
||||
|
</view> |
||||
|
|
||||
|
<view class="layout" @click="itemClick('3')"> |
||||
|
|
||||
|
<image src="https://supervise.yxtsoft.com/img/newApp/zwkcjz.png" mode="aspectFill" |
||||
|
style="width: 12px;height: 12px;"> |
||||
|
</image> |
||||
|
|
||||
|
<view class="content"> |
||||
|
<text class="content-text1">库存货值</text> |
||||
|
<text class="content-text2">{{info.stockAmountWan }}万元</text> |
||||
|
|
||||
|
</view> |
||||
|
<image src="../../static/baseIcon/zy.png" mode="aspectFill" style="width: 14px;height: 14px;"></image> |
||||
|
</view> |
||||
|
|
||||
|
<view class="layout" @click="itemClick('4')"> |
||||
|
|
||||
|
<image src="https://supervise.yxtsoft.com/img/newApp/zthwjz.png" mode="aspectFill" |
||||
|
style="width: 12px;height: 12px;"> |
||||
|
</image> |
||||
|
|
||||
|
<view class="content"> |
||||
|
<text class="content-text1">在途货值</text> |
||||
|
<text class="content-text2">{{info.transitAmountWan }}万元</text> |
||||
|
|
||||
|
</view> |
||||
|
<image src="../../static/baseIcon/zy.png" mode="aspectFill" style="width: 14px;height: 14px;"></image> |
||||
|
</view> |
||||
|
|
||||
|
<view class="layout" @click="itemClick('5')"> |
||||
|
|
||||
|
<image src="https://supervise.yxtsoft.com/img/newApp/yfk.png" mode="aspectFill" |
||||
|
style="width: 12px;height: 12px;"> |
||||
|
</image> |
||||
|
|
||||
|
<view class="content"> |
||||
|
<text class="content-text1">预付款</text> |
||||
|
<text class="content-text2">{{info.advancePaymentWan }}万元</text> |
||||
|
|
||||
|
</view> |
||||
|
<image src="../../static/baseIcon/zy.png" mode="aspectFill" style="width: 14px;height: 14px;"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
params: { |
||||
|
projectSid: "9a2c1e08-0e0a-4440-bc3d-3adbef082cdb", |
||||
|
orderDate: "2023-08-07", |
||||
|
}, |
||||
|
info: { |
||||
|
projectName: "", |
||||
|
orderDate: "", |
||||
|
reportTime: "", |
||||
|
projectSid: "", |
||||
|
totalLoan: "", |
||||
|
totalLoanWan: "", |
||||
|
accountsBalance: "", |
||||
|
accountsBalanceWan: "", |
||||
|
accountsReceivable: "", |
||||
|
accountsReceivableWan: "", |
||||
|
stockAmount: "", |
||||
|
stockAmountWan: "", |
||||
|
transitAmount: "", |
||||
|
transitAmountWan: "", |
||||
|
advancePayment: "", |
||||
|
advancePaymentWan: "", |
||||
|
pledgeRate: "", |
||||
|
opts: {}, |
||||
|
}, |
||||
|
chartData: {}, |
||||
|
//您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。 |
||||
|
chartData2: {}, |
||||
|
opts2: { |
||||
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", |
||||
|
"#ea7ccc" |
||||
|
], |
||||
|
padding: [5, 30, 10, 10], |
||||
|
enableScroll: false, |
||||
|
legend: { |
||||
|
"show": false, |
||||
|
"position": "right", |
||||
|
"lineHeight": 25, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
boundaryGap: "justify", |
||||
|
disableGrid: false, |
||||
|
min: 0, |
||||
|
axisLine: true, |
||||
|
max: 20000, |
||||
|
triggerEvent: true |
||||
|
}, |
||||
|
yAxis: { |
||||
|
triggerEvent: true |
||||
|
}, |
||||
|
|
||||
|
extra: { |
||||
|
bar: { |
||||
|
type: "stack", |
||||
|
width: 30, |
||||
|
meterBorde: 2, |
||||
|
meterFillColor: "#FFFFFF", |
||||
|
activeBgColor: "#000000", |
||||
|
activeBgOpacity: 0.08, |
||||
|
categoryGap: 2 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
|
||||
|
// this.params = { |
||||
|
// projectSid: option.projectSid, |
||||
|
// orderDate: option.orderDate |
||||
|
// } |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
onShow() { |
||||
|
wx.hideHomeButton() |
||||
|
// setTimeout(() => { |
||||
|
|
||||
|
// }, 1000) |
||||
|
this.getServerData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
init() { |
||||
|
// var chart = this.$echarts.init(this.$refs["myChart"]); |
||||
|
// this.$refs["myChart"].getZr().on('click', params => { |
||||
|
|
||||
|
// let pointInPixel = [params.offsetX, params.offsetY] |
||||
|
|
||||
|
// if (chart.containPixel('grid', pointInPixel)) { |
||||
|
|
||||
|
// let xIndex = chart.convertFromPixel({ |
||||
|
// seriesIndex: 0 |
||||
|
// }, [params.offsetX, params.offsetY])[0] |
||||
|
|
||||
|
// console.log(xIndex) |
||||
|
|
||||
|
// this.select_index = xIndex |
||||
|
|
||||
|
// } |
||||
|
|
||||
|
// }) |
||||
|
}, |
||||
|
getServerData() { |
||||
|
|
||||
|
console.log("this.params", this.params) |
||||
|
|
||||
|
this.$api.getProjectDaily(this.params).then((resp) => { |
||||
|
console.log('1111>>>>>>', resp) |
||||
|
|
||||
|
this.info = resp |
||||
|
|
||||
|
this.info.opts = { |
||||
|
rotate: false, |
||||
|
rotateLock: false, |
||||
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", |
||||
|
"#9A60B4", |
||||
|
"#ea7ccc" |
||||
|
], |
||||
|
dataLabel: false, |
||||
|
enableScroll: false, |
||||
|
legend: { |
||||
|
show: true, |
||||
|
position: "right", |
||||
|
lineHeight: 30 |
||||
|
}, |
||||
|
title: { |
||||
|
name: this.info.pledgeRatePercent+"%", |
||||
|
fontSize: 38, |
||||
|
color: "#F6A42F" |
||||
|
}, |
||||
|
subtitle: { |
||||
|
name: "质押率", |
||||
|
fontSize: 20, |
||||
|
color: "#17B0DF" |
||||
|
}, |
||||
|
extra: { |
||||
|
ring: { |
||||
|
ringWidth: 30, |
||||
|
activeOpacity: 0.1, |
||||
|
activeRadius: 1, |
||||
|
offsetAngle: 0, |
||||
|
labelWidth: 15, |
||||
|
border: true, |
||||
|
borderWidth: 3, |
||||
|
borderColor: "#FFFFFF" |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//模拟从服务器获取数据时的延时 |
||||
|
setTimeout(() => { |
||||
|
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接 |
||||
|
let res = { |
||||
|
series: [{ |
||||
|
data: [{ |
||||
|
"name": "帐户余额", |
||||
|
"value": this.info.accountsBalance, |
||||
|
"labelShow": true, |
||||
|
"labelText": "四班:18人" |
||||
|
}, { |
||||
|
"name": "应收账款", |
||||
|
"value": this.info.accountsReceivable, |
||||
|
"labelShow": true, |
||||
|
"labelText": "四班:18人" |
||||
|
}, { |
||||
|
"name": "库存货值", |
||||
|
"value": this.info.stockAmount, |
||||
|
"labelShow": true, |
||||
|
"labelText": "四班:18人" |
||||
|
}, { |
||||
|
"name": "在途货值", |
||||
|
"value": this.info.transitAmount, |
||||
|
"labelShow": true, |
||||
|
"labelText": "四班:18人" |
||||
|
}, { |
||||
|
"name": "预付款", |
||||
|
"value": this.info.advancePayment, |
||||
|
"labelShow": true, |
||||
|
"labelText": "四班:18人" |
||||
|
}] |
||||
|
}] |
||||
|
}; |
||||
|
this.chartData = JSON.parse(JSON.stringify(res)); |
||||
|
}, 500); |
||||
|
|
||||
|
// //模拟从服务器获取数据时的延时 |
||||
|
// setTimeout(() => { |
||||
|
// //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接 |
||||
|
// let res = { |
||||
|
// categories: ["账户余额", "应收账款", "库存货值", "在途货值", "预付款"], |
||||
|
// series: [{ |
||||
|
// name: "", |
||||
|
// data: [this.info.accountsBalanceWan, this.info |
||||
|
// .accountsReceivableWan, |
||||
|
// this.info.stockAmountWan, this.info.transitAmountWan, |
||||
|
// this |
||||
|
// .info.advancePaymentWan |
||||
|
// ] |
||||
|
// }, |
||||
|
// // { |
||||
|
// // name: "完成量", |
||||
|
// // data: [18,27,21,24,6,28] |
||||
|
// // } |
||||
|
// ] |
||||
|
// }; |
||||
|
// this.chartData2 = JSON.parse(JSON.stringify(res)); |
||||
|
// }, 500); |
||||
|
|
||||
|
}).catch(e => { |
||||
|
console.log('eeeee', e) |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
jump() { |
||||
|
// 下载 |
||||
|
uni.navigateTo({ |
||||
|
url: 'RegulatoryReportingDownload?sid=' + this.info.projectSid + "&name=" + this.info |
||||
|
.projectName + |
||||
|
"&date=" + this.info.orderDate |
||||
|
}); |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
itemClick(index) { |
||||
|
switch (index) { |
||||
|
case "1": |
||||
|
// 账号余额 |
||||
|
uni.navigateTo({ |
||||
|
url: 'AccountBalance?sid=' + this.info.projectSid + "&name=" + this.info.projectName + |
||||
|
"&number=暂无" + |
||||
|
"&date=" + this.info.reportTime + "&balance=" + this.info.accountsBalanceWan |
||||
|
}); |
||||
|
break; |
||||
|
case "2": |
||||
|
|
||||
|
// 应收账款 |
||||
|
uni.navigateTo({ |
||||
|
url: 'Accounts?sid=' + this.info.projectSid + "&name=" + this.info.projectName + |
||||
|
"&customNumber=暂无" + |
||||
|
"&date=" + this.info.reportTime + "&accounts=" + this.info.accountsReceivableWan |
||||
|
}); |
||||
|
break; |
||||
|
case "3": |
||||
|
// 库存汇总 |
||||
|
uni.navigateTo({ |
||||
|
url: 'InventorySummary?projectSid=' + this.info.projectSid + "&orderDate=" + this.info |
||||
|
.orderDate |
||||
|
}); |
||||
|
break; |
||||
|
case "4": |
||||
|
// 在途货物 |
||||
|
uni.navigateTo({ |
||||
|
url: 'GoodsInTransit?sid=' + this.info.projectSid + "&name=" + this.info.projectName + |
||||
|
"&goodsInTransit=" + this.info |
||||
|
.transitAmountWan + |
||||
|
"&date=" + this.info.reportTime |
||||
|
}); |
||||
|
|
||||
|
break; |
||||
|
case "5": |
||||
|
// 预付款 |
||||
|
uni.navigateTo({ |
||||
|
url: 'AdvanceCharge?sid=' + this.info.projectSid + "&name=" + this.info.projectName + |
||||
|
"&advanceCharge=" + this.info |
||||
|
.advancePaymentWan + "&date=" + this.info.reportTime |
||||
|
}); |
||||
|
break; |
||||
|
default: |
||||
|
break; |
||||
|
} |
||||
|
}, |
||||
|
tap(params) { |
||||
|
console.log("params", params) |
||||
|
}, |
||||
|
handleZrClick(params) { |
||||
|
console.log("params", params) |
||||
|
// 图标任意位置点击事件处理 |
||||
|
if (params.topTarget && params.topTarget.parent.anid && params.target === undefined) { |
||||
|
console.log("点击x或y轴") |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
clickBarInBarChart(params) { |
||||
|
console.log("params", params) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.pages { |
||||
|
|
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
|
||||
|
.top { |
||||
|
background-color: #fff; |
||||
|
padding: 20px 25px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.top-name { |
||||
|
font-size: 16px; |
||||
|
color: #000; |
||||
|
font-weight: 600; |
||||
|
font-family: sans-serif; |
||||
|
} |
||||
|
|
||||
|
.top-date { |
||||
|
font-size: 13px; |
||||
|
color: #717171; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.centre { |
||||
|
background-color: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
border-top: 2px solid #eee; |
||||
|
padding: 25px; |
||||
|
|
||||
|
.centre-top {} |
||||
|
|
||||
|
|
||||
|
.centre-bom { |
||||
|
margin-top: 10px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.centre-lift-text { |
||||
|
font-size: 14px; |
||||
|
color: #191919; |
||||
|
font-weight: 550; |
||||
|
font-family: sans-serif; |
||||
|
} |
||||
|
|
||||
|
.centre-lift-view { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-direction: row; |
||||
|
|
||||
|
.centre-lift-view-text { |
||||
|
margin-left: 10px; |
||||
|
font-size: 14px; |
||||
|
color: #018AD2; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.bom { |
||||
|
width: 90%; |
||||
|
margin: 20px; |
||||
|
} |
||||
|
|
||||
|
.layout { |
||||
|
background: #fff; |
||||
|
border-radius: 10px; |
||||
|
padding: 15px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
margin-bottom: 10px; |
||||
|
|
||||
|
.content { |
||||
|
margin-left: 10px; |
||||
|
margin-right: 10px; |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.content-text1 { |
||||
|
font-size: 14px; |
||||
|
color: #191919; |
||||
|
} |
||||
|
|
||||
|
.content-text2 { |
||||
|
font-size: 14px; |
||||
|
color: #6c6c6c; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,194 @@ |
|||||
|
<template> |
||||
|
|
||||
|
<view class="pages"> |
||||
|
|
||||
|
<view class="top"> |
||||
|
<text class="top-name">{{params.name}}</text> |
||||
|
<text class="top-date">{{params.orderDate}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="content"> |
||||
|
<view v-show="list.length==0"> |
||||
|
<view style="display:flex;flex-direction: column;justify-content: center;align-items: center;"> |
||||
|
<image src="../../static/baseIcon/notData.png" mode="aspectFill" |
||||
|
style="width: 150px;height: 150px;"> |
||||
|
</image> |
||||
|
<text style="text-align: center;width: 100%; color: #717171;">暂无数据</text> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view v-for="(item,index) in list" class="list"> |
||||
|
|
||||
|
<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 20px;"> |
||||
|
<text class="item-text">{{item.fileSrcName}}</text> |
||||
|
<text class="item-text" @click="downloadClick(item.fullUrl)">点击下载</text> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
params: { |
||||
|
projectSid: "", |
||||
|
name: "", |
||||
|
orderDate: "", |
||||
|
|
||||
|
}, |
||||
|
list: [ |
||||
|
// { |
||||
|
// sid: "1", |
||||
|
// name: "质物库存汇总表", |
||||
|
// url: "111111111111111", |
||||
|
// }, |
||||
|
// { |
||||
|
// sid: "2", |
||||
|
// name: "销售日报表", |
||||
|
// url: "222222222222", |
||||
|
// }, |
||||
|
// { |
||||
|
// sid: "3", |
||||
|
// name: "在途商品表", |
||||
|
// url: "3333333333", |
||||
|
// } |
||||
|
] |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
console.log('option', option) |
||||
|
this.params = { |
||||
|
projectSid: option.sid, |
||||
|
name: option.name, |
||||
|
orderDate: option.date |
||||
|
} |
||||
|
|
||||
|
this.getServerData() |
||||
|
}, |
||||
|
methods: { |
||||
|
getServerData() { |
||||
|
|
||||
|
this.$api.getProjectDailyFiles(this.params).then((resp) => { |
||||
|
console.log('1111>>>>>>', resp) |
||||
|
|
||||
|
this.list =resp |
||||
|
|
||||
|
}).catch(e => { |
||||
|
console.log('eeeee', e) |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
downloadClick(url) { |
||||
|
if (url == '') { |
||||
|
uni.showToast({ |
||||
|
icon: "none", |
||||
|
title: "下载地址错误，请重新进入页面。", |
||||
|
duration: 5000 |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
|
||||
|
uni.downloadFile({ |
||||
|
url: url, // 网络文档地址 |
||||
|
success: (data) => { |
||||
|
if (data.statusCode === 200) { |
||||
|
uni.saveFile({ |
||||
|
tempFilePath: data.tempFilePath, //临时路径 |
||||
|
success: function(res) { |
||||
|
// 保存路径 |
||||
|
uni.showToast({ |
||||
|
title: "文件已保存：" + res.savedFilePath, |
||||
|
duration: 5000 |
||||
|
}) |
||||
|
setTimeout(() => { |
||||
|
//打开文档查看 |
||||
|
uni.openDocument({ |
||||
|
filePath: res.savedFilePath, |
||||
|
showMenu: true, //右上角是否有可以转发分享的功能 |
||||
|
success: function(res) { |
||||
|
console.log('打开文档成功') |
||||
|
} |
||||
|
}) |
||||
|
}, 3000); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
fail: (err) => { |
||||
|
uni.showToast({ |
||||
|
title: '失败请重新下载' |
||||
|
}); |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.pages { |
||||
|
|
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
background-color: #fff; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
|
||||
|
.top { |
||||
|
padding: 20px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.top-name { |
||||
|
font-size: 16px; |
||||
|
color: #000; |
||||
|
font-weight: 600; |
||||
|
font-family: sans-serif; |
||||
|
} |
||||
|
|
||||
|
.top-date { |
||||
|
font-size: 13px; |
||||
|
color: #717171; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
flex-direction: column; |
||||
|
border-top: 2px solid #eee; |
||||
|
|
||||
|
.list { |
||||
|
display: flex; |
||||
|
margin-left: 30px; |
||||
|
margin-right: 30px; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.item-text { |
||||
|
font-size: 14px; |
||||
|
color: #018AD2; |
||||
|
border-bottom: 1px solid #018AD2; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,327 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<!-- 自定义导航栏 --> |
||||
|
<view class="navBarBox"> |
||||
|
<!-- 状态栏占位 --> |
||||
|
<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view> |
||||
|
<!-- 真正的导航栏内容 --> |
||||
|
<view class="navBar"> |
||||
|
<view>用户须知</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="subscribe"> |
||||
|
<template type="text/wxtag-template"> |
||||
|
<view class="subscribe-icon"> |
||||
|
<image class="subscribe-icon-one" src="/static/static/img/finger_00.png"></image> |
||||
|
<image class="subscribe-icon-two" src="/static/static/img/finger_01.png"></image> |
||||
|
</view> |
||||
|
<view class="subscribe-cont"> |
||||
|
<wx-open-subscribe :template="templateIds[0]" id="subscribe-btn" ref="subscribeBtn"> |
||||
|
<script type="text/wxtag-template" slot="style"> |
||||
|
<style> |
||||
|
.subscribe-txt{ |
||||
|
color: #89663f; |
||||
|
font-weight: bold; |
||||
|
-webkit-animation: subscribeCont 1s linear infinite; |
||||
|
animation: subscribeCont 1s linear infinite; |
||||
|
display: inline-block; |
||||
|
height: 40px; |
||||
|
width: 160px; |
||||
|
text-align: center; |
||||
|
line-height: 40px; |
||||
|
} |
||||
|
@keyframes subscribeCont { |
||||
|
25% { |
||||
|
transform: scale(.98); |
||||
|
} |
||||
|
|
||||
|
50%, |
||||
|
100% { |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
|
||||
|
75% { |
||||
|
transform: scale(1.05); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
</script> |
||||
|
<script type="text/wxtag-template"> |
||||
|
<view class="subscribe-txt">点击消息提醒</view> |
||||
|
</script> |
||||
|
</wx-open-subscribe> |
||||
|
</view> |
||||
|
</template> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// const jweixin = require('jweixin-module'); |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
// 状态栏高度 |
||||
|
statusBarHeight: 0, |
||||
|
templateIds: ['R9LbtDjg9sC-o3xUS2kDcSQ9MS4I67LnacAS8Fsmxp0'] |
||||
|
} |
||||
|
}, |
||||
|
//第一次加载时调用 |
||||
|
created() { |
||||
|
//获取手机状态栏高度 |
||||
|
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; |
||||
|
}, |
||||
|
onReady() { |
||||
|
this.getInfo() |
||||
|
}, |
||||
|
methods: { |
||||
|
getInfo() { |
||||
|
// 这里是后去config得基本信息（跟后端要接口 wx.$api.index.wpaySubscribeH5Info 别看不懂，这是封装的请求接口而已换成你自己的就行了） |
||||
|
wx.$api.index.wpaySubscribeH5Info(location.href.split('#')[0], ['chooseWXPay', ]).then(res1 => { |
||||
|
let w_pay = JSON.parse(res1.data) |
||||
|
this.$jweixin.config({ |
||||
|
debug: false, |
||||
|
appId: w_pay.appId, |
||||
|
timestamp: w_pay.timestamp, |
||||
|
nonceStr: w_pay.nonceStr, |
||||
|
signature: w_pay.signature, |
||||
|
jsApiList: ['wx-open-subscribe', 'wx-open-launch-app', 'launchAppLication'], |
||||
|
openTagList: ['wx-open-subscribe', 'wx-open-launch-app', 'wx-open-subscribe-dialog'] |
||||
|
}) |
||||
|
// config 准备好了那么就开始操作了， |
||||
|
jweixin.ready(() => { |
||||
|
// wx-open-subscribe 原生绑定点击事件 |
||||
|
this.$nextTick(() => { |
||||
|
const btn = this.$refs.subscribeBtn; |
||||
|
btn.addEventListener('success', ({ |
||||
|
detail |
||||
|
}) => { |
||||
|
this.content2 = JSON.parse(detail.subscribeDetails) |
||||
|
for (var i in this.content2) { |
||||
|
if (i === this.templateIds[0] || i === |
||||
|
'EZcWzqrLdU-2Ax6KILdv9uSf6ANbHka7CbYG2KGahPk') { |
||||
|
let status = JSON.parse(this.content2[i]).status |
||||
|
console.log(status) |
||||
|
console.log(this.content2) |
||||
|
if (status === 'accept') { |
||||
|
// 这里跟后端要个接口，绑定； |
||||
|
wx.$api.index.subscribeH5(1).then(res => { |
||||
|
wx.showLoading({ |
||||
|
title: res.data, |
||||
|
icon: 'none', |
||||
|
}) |
||||
|
// 获取卡权益 |
||||
|
// this.indexInfo(); |
||||
|
setTimeout(function() { |
||||
|
wx.hideLoading(); |
||||
|
}, 1000) |
||||
|
}) |
||||
|
} else if (status === 'reject') { |
||||
|
alert('拒绝授权') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
btn.addEventListener('error', (e) => { |
||||
|
alert('授权失败了，请重试') |
||||
|
}); |
||||
|
}) |
||||
|
}) |
||||
|
}).catch(err => { |
||||
|
wx.showToast({ |
||||
|
title: err.message, |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
|
||||
|
.navBarBox { |
||||
|
background: #007AFF; |
||||
|
} |
||||
|
|
||||
|
.navBarBox .statusBar {} |
||||
|
|
||||
|
.navBarBox .navBar { |
||||
|
padding-top: 15px; |
||||
|
padding-bottom: 13px; |
||||
|
display: flex; |
||||
|
font-size: 13px; |
||||
|
flex-direction: row; |
||||
|
color: #ffffff; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* 订阅消息 */ |
||||
|
.subscribe { |
||||
|
color: #89663f; |
||||
|
width: 100%; |
||||
|
padding: 0 100rpx; |
||||
|
display: inline-block; |
||||
|
box-sizing: border-box; |
||||
|
margin-top: 50rpx; |
||||
|
display: flex; |
||||
|
/* -webkit-animation: Tada 3s both infinite; |
||||
|
-moz-animation: Tada 3s both infinite; |
||||
|
-ms-animation: Tada 3s both infinite; |
||||
|
animation: Tada 3s both infinite; */ |
||||
|
} |
||||
|
|
||||
|
.subscribe-icon, |
||||
|
.subscribe-cont { |
||||
|
height: 80rpx; |
||||
|
text-align: center; |
||||
|
line-height: 80rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.subscribe-icon { |
||||
|
width: 150rpx; |
||||
|
padding-left: 30rpx; |
||||
|
box-sizing: border-box; |
||||
|
background: linear-gradient(to right, #f3c988, #f9e0b8); |
||||
|
border-radius: 40rpx 0 0 40rpx; |
||||
|
} |
||||
|
|
||||
|
.subscribe-icon::after { |
||||
|
position: absolute; |
||||
|
content: ''; |
||||
|
right: -50rpx; |
||||
|
top: 0; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
border-bottom: 80rpx solid #f9e0b8; |
||||
|
border-right: 50rpx solid transparent; |
||||
|
z-index: 9; |
||||
|
} |
||||
|
|
||||
|
.subscribe-cont { |
||||
|
width: calc(100% - 150rpx); |
||||
|
background: linear-gradient(to right, #f3c988, #f9e0b8); |
||||
|
border-radius: 0 40rpx 40rpx 0; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.subscribe-cont text { |
||||
|
display: inline-block; |
||||
|
-webkit-animation: subscribeCont 1s linear infinite; |
||||
|
animation: subscribeCont 1s linear infinite; |
||||
|
} |
||||
|
|
||||
|
@keyframes subscribeCont { |
||||
|
25% { |
||||
|
transform: scale(.98); |
||||
|
} |
||||
|
|
||||
|
50%, |
||||
|
100% { |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
|
||||
|
75% { |
||||
|
transform: scale(1.05); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.subscribe-icon image { |
||||
|
width: 54rpx; |
||||
|
height: 54rpx; |
||||
|
margin-top: 14rpx; |
||||
|
} |
||||
|
|
||||
|
@keyframes Tada { |
||||
|
0% { |
||||
|
transform: scale(1); |
||||
|
transform: scale(1) |
||||
|
} |
||||
|
|
||||
|
70%, |
||||
|
73% { |
||||
|
transform: scale(1) rotate(-3deg); |
||||
|
transform: scale(1) rotate(-3deg) |
||||
|
} |
||||
|
|
||||
|
77%, |
||||
|
83%, |
||||
|
90%, |
||||
|
97% { |
||||
|
transform: scale(1) rotate(3deg); |
||||
|
transform: scale(1) rotate(3deg) |
||||
|
} |
||||
|
|
||||
|
80%, |
||||
|
87%, |
||||
|
93% { |
||||
|
transform: scale(1) rotate(-3deg); |
||||
|
transform: scale(1) rotate(-3deg) |
||||
|
} |
||||
|
|
||||
|
100% { |
||||
|
transform: scale(1) rotate(0); |
||||
|
transform: scale(1) rotate(0) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.subscribe-icon-one { |
||||
|
-webkit-animation: bounce-right 1s linear infinite; |
||||
|
animation: bounce-right 1s linear infinite; |
||||
|
} |
||||
|
|
||||
|
@keyframes bounce-right { |
||||
|
25% { |
||||
|
transform: translateX(-3px); |
||||
|
} |
||||
|
|
||||
|
50%, |
||||
|
100% { |
||||
|
transform: translateX(0); |
||||
|
} |
||||
|
|
||||
|
75% { |
||||
|
transform: translateX(3px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.subscribe-icon-two { |
||||
|
-webkit-animation: bounce-two 1s linear infinite; |
||||
|
animation: bounce-two 1s linear infinite; |
||||
|
} |
||||
|
|
||||
|
@keyframes bounce-two { |
||||
|
25% { |
||||
|
opacity: 0; |
||||
|
transform: translateX(-3px); |
||||
|
} |
||||
|
|
||||
|
75% { |
||||
|
opacity: 1; |
||||
|
transform: translateX(3px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
subscribe-btn { |
||||
|
width: 100%; |
||||
|
height: 200rpx; |
||||
|
text-align: center; |
||||
|
line-height: 150rpx; |
||||
|
font-size: 30rpx; |
||||
|
font-weight: 500; |
||||
|
color: #ffffff; |
||||
|
background-color: green; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
After Width: | Height: | Size: 923 B |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
Loading…
Reference in new issue