feat：性能优化
This commit is contained in:
@@ -0,0 +1,737 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<TopSafe></TopSafe>
|
||||
<Header :isMid="true" >
|
||||
<template v-slot:mid>
|
||||
<view class="top-view">
|
||||
<view class="top-box-view flex-c" :style="{
|
||||
background:topSelect == index ? '#7934F6' : 'rgba(0,0,0,0)'
|
||||
}"
|
||||
v-for="(item,index) in topList" :key="index" @click="onTop(index)">
|
||||
<text class="text-28 " :style="{
|
||||
color:topSelect == index ? '#fff' : '#333'
|
||||
}">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</Header>
|
||||
<view class="top-line"></view>
|
||||
<scroll-view scroll-y="true" class="contract-view" v-if="topSelect == 0">
|
||||
<view class="top-head">
|
||||
<text class="text-32 text-gray text-bold">股权分布</text>
|
||||
<text class="text-28 text-fu">51%的股权回馈消费者（免费赠予）。<text v-if="currentUserData?.isNewUser">股权以积分形式发放</text></text>
|
||||
</view>
|
||||
<view class="tu-view">
|
||||
<!-- <view class="tu-box"> -->
|
||||
<qiun-data-charts
|
||||
type="ring"
|
||||
canvasId="four_one"
|
||||
:canvas2d="isCanvas2d"
|
||||
:resshow="delayload"
|
||||
:opts="oneOps"
|
||||
:inScrollView="true"
|
||||
:chartData="oneData"/>
|
||||
|
||||
</view>
|
||||
<view class="top-line" v-if="currentUserData?.isNewUser"></view>
|
||||
<view class="top-head" v-if="currentUserData?.isNewUser">
|
||||
<text class="text-32 text-gray text-bold">股权赠予计划</text>
|
||||
<text class="text-28 text-fu">51%的股权分五期赠送，前4期每期10%，第五期11%其他分配则为：投资机构，基金会，活动激励，运营团队，推广奖励的集合。</text>
|
||||
</view>
|
||||
<view class="tu-view" v-if="currentUserData?.isNewUser">
|
||||
<qiun-data-charts
|
||||
type="ring"
|
||||
canvasId="four_two"
|
||||
:canvas2d="isCanvas2d"
|
||||
:resshow="delayload"
|
||||
:opts="twoOps"
|
||||
:inScrollView="true"
|
||||
:chartData="twoData"/>
|
||||
</view>
|
||||
<view class="bottom-view" v-if="currentUserData?.isNewUser">
|
||||
<text class="text-32 text-gray text-bold">免费赠予详细规则</text>
|
||||
<view class="bottom-head">
|
||||
<view class="head-one">
|
||||
<text class="text-24 text-fu">期数</text>
|
||||
</view>
|
||||
<view class="head-two">
|
||||
<text class="text-24 text-fu">赠予规则</text>
|
||||
</view>
|
||||
<view class="head-three">
|
||||
<text class="text-24 text-fu">开启下一期规则</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-value-view">
|
||||
<view class="bottom-value-view-row" v-for="(item,index) in oneList" :key="index">
|
||||
<view class="head-one-one" :style="{'border-radius':index == 4 ? '0 0 0 16rpx' : 0,}">
|
||||
<text class="text-24 text-fu">{{item.one}}</text>
|
||||
</view>
|
||||
<view class="head-two-two">
|
||||
<text class="text-24 text-fu">{{item.two}}</text>
|
||||
</view>
|
||||
<view class="head-three-three"
|
||||
:style="{'border-radius':index == 4 ? '0 0 16rpx 0' : 0,'border-left-color':index == 0 ? '#eaeaea' : 'rgba(0,0,0,0)'}">
|
||||
<text class="text-24 text-fu">{{item.three}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view scroll-y="true" class="contract-view" v-if="topSelect == 1 && curData">
|
||||
<view class="two-top-tab-view">
|
||||
<view v-for="(item,index) in twoTopList" @click="onTwoTop(index)" :key="index" class="two-top-list">
|
||||
<text class="text-28 " :style="{
|
||||
color:index == curTopTwo ? '#7934f6' : '#666'
|
||||
}">{{item}}</text>
|
||||
<view class="two-top-line" v-if="index == curTopTwo"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="top-head-1">
|
||||
<text class="text-32 text-gray text-bold">总营收</text>
|
||||
<text class="text-48 text-gray text-bold">￥
|
||||
<text class="text-64 text-gray ">{{curData.totalProfitSharing || 0}}</text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="top-head-1" v-if="curTopTwo == 1">
|
||||
<text class="text-32 text-gray text-bold">利润</text>
|
||||
<text class="text-48 text-gray text-bold">￥
|
||||
<text class="text-64 text-gray ">{{curData.profitAmount || 0}}</text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="top-line"></view>
|
||||
<view class="top-head">
|
||||
<text class="text-32 text-gray text-bold">商城分配数据</text>
|
||||
</view>
|
||||
<view class="tu-view">
|
||||
<qiun-data-charts
|
||||
v-if="threeData.series.length"
|
||||
type="ring"
|
||||
canvasId="four_three"
|
||||
:canvas2d="isCanvas2d"
|
||||
:resshow="delayload"
|
||||
:opts="threeOps"
|
||||
:inScrollView="true"
|
||||
:chartData="threeData"/>
|
||||
</view>
|
||||
<view class="bottom-view">
|
||||
<text class="text-32 text-gray text-bold">分配明细数据</text>
|
||||
<view class="bottom-head">
|
||||
<view class="head-one" style="width:278rpx">
|
||||
<text class="text-24 text-fu">名称</text>
|
||||
</view>
|
||||
<view class="head-two" style="width:234rpx">
|
||||
<text class="text-24 text-fu">金额</text>
|
||||
</view>
|
||||
<view class="head-three">
|
||||
<text class="text-24 text-fu">占比</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-value-view">
|
||||
<view class="bottom-value-view-row" v-for="(item,index) in threeData.series" :key="index">
|
||||
<view class="head-one-one" style="width:278rpx" :style="{'border-radius':index == 4 ? '0 0 0 16rpx' : 0,}">
|
||||
<text class="text-24 text-fu">{{item.name}}</text>
|
||||
<u-icon v-if="item.tips" name="question-circle" style="margin-left:12rpx;" color="#333" size="14" @click="onTips(item.tips)" ></u-icon>
|
||||
</view>
|
||||
<view class="head-two-two" style="width:234rpx">
|
||||
<text class="text-24 text-fu">{{item.amount}}</text>
|
||||
</view>
|
||||
<view class="head-three-three"
|
||||
:style="{'border-radius':index == 4 ? '0 0 16rpx 0' : 0}">
|
||||
<text class="text-24 text-fu">{{item.data}}%</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="top-line" style="margin-top:20rpx;"></view>
|
||||
<view class="top-head">
|
||||
<text class="text-32 text-gray text-bold">商城营收数据</text>
|
||||
</view>
|
||||
<view class="tab-view-one">
|
||||
<view v-for="(item,index) in tabOne" :key="index" @click="onOne(index)" :style="{
|
||||
background:index == curOne ? 'rgba(121, 52, 246, 0.1)' : '#F5F5F5'
|
||||
}">
|
||||
<text class="text-24 text-zi" :style="{color:index == curOne ? '#7934F6' : '#999'}">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tu-view-one" style="margin-top:32rpx">
|
||||
<!-- <view class="charts-box">
|
||||
<qiun-data-charts
|
||||
type="line"
|
||||
canvasId="scrolllineid"
|
||||
:opts="{enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true}}"
|
||||
:chartData="fourData"
|
||||
:ontouch="true"
|
||||
:canvas2d="true"
|
||||
/>
|
||||
</view> -->
|
||||
<qiun-data-charts
|
||||
type="area" :ontouch="true" :canvas2d="isCanvas2d" canvasId="scrolllineid"
|
||||
:inScrollView="true"
|
||||
:opts="fourOps" :chartData="fourData"/>
|
||||
</view>
|
||||
<view class="tab-view-two">
|
||||
<view class="tab-view-two-two" v-for="(item,index) in tabTwo" :key="index" @click="onTwo(index)" >
|
||||
<text class="text-32 text-zi" style="font-weight: 500;" :style="{color:index == curTwo ? '#7934F6' : '#999'}">{{item}}</text>
|
||||
<view class="line-view" v-if="index == curTwo"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="top-head">
|
||||
<text class="text-32 text-gray text-bold">已分配总额：{{fiveTotal}}</text>
|
||||
</view>
|
||||
<view class="tu-view-one" style="margin:32rpx 0">
|
||||
<qiun-data-charts type="area" :ontouch="true" :canvas2d="isCanvas2d" canvasId="scrolllineid1"
|
||||
:inScrollView="true"
|
||||
:opts="fourOps" :chartData="fiveData"/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from '@/components/common/header.vue';
|
||||
import TopSafe from '@/components/common/top-safe.nvue'
|
||||
import { getProfitSharingData } from '@/api/finance.js'
|
||||
import qiunDataCharts from "@/pages/rwa_package/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
|
||||
|
||||
import { getUserInfo } from '@/api/auth.js';
|
||||
export default {
|
||||
components: { Header,TopSafe,qiunDataCharts },
|
||||
data() {
|
||||
return {
|
||||
isCanvas2d: false,
|
||||
topSelect:0,
|
||||
twoTopList:['优选区','平价区'],
|
||||
curTopTwo:0,
|
||||
topList:[
|
||||
'股权架构','营收数据'
|
||||
],
|
||||
tabOne:['每日','每月'],
|
||||
curOne:0,
|
||||
tabTwo:['数字积分','利润共享计划'],
|
||||
// tabTwo:["利润共享计划"],
|
||||
curTwo:0,
|
||||
delayload: false,
|
||||
oneList:[
|
||||
{one:'第一期',two:'商城优选区消费1:1获得贡献值，每消费1元获得1贡献值，次日根据当日商城营收占比获得数字积分直推用户消费10:1获得贡献值，直推用户优选区每消费10元您将获得1积分',three:'4000万数字积分分配完成则开启第2期'},
|
||||
{one:'第二期',two:'待定，敬请期待',three:''},
|
||||
{one:'第三期',two:'待定，敬请期待',three:''},
|
||||
{one:'第四期',two:'待定，敬请期待',three:''},
|
||||
{one:'第五期',two:'待定，敬请期待',three:''},
|
||||
],
|
||||
oneOps:{
|
||||
label:{show:false},
|
||||
legend:{show:false},
|
||||
title:{name: '100%',fontSize:16,color:'#333',},
|
||||
subtitle: {name: '股权分布',fontSize:12,color:'#666',},
|
||||
extra: {
|
||||
ring: {
|
||||
ringWidth: 60,
|
||||
},
|
||||
}
|
||||
},
|
||||
oneData:{
|
||||
series:[
|
||||
{"name": "免费赠予消费者","data": 51,"color":"#7934F6",top:'108rpx',left:'32rpx'},
|
||||
{"name": "投资机构","data": 9,"color":"#AF39C4",top:0,right:'32rpx'},
|
||||
{"name": "基金会","data": 10,"color":"#0370FF",top:'108rpx',right:'32rpx'},
|
||||
{"name": "活动激励","data": 10,"color":"#00A6CC",top:'208rpx',right:'32rpx'},
|
||||
{"name": "运营团队","data": 10,"color":"#FFA700",top:'314rpx',right:'32rpx'},
|
||||
{"name": "推广奖励","data": 10,"color":"#00A776",top:'402rpx',right:'32rpx'},
|
||||
]
|
||||
},
|
||||
twoOps:{
|
||||
legend:{show:false},
|
||||
title:{name: '100%',fontSize:16,color:'#333',},
|
||||
subtitle: {name: '五期分配比例',fontSize:12,color:'#666',},
|
||||
|
||||
extra: {
|
||||
ring: {
|
||||
ringWidth: 60,
|
||||
},
|
||||
}
|
||||
},
|
||||
twoData:{
|
||||
series:[
|
||||
{"name": "其他分配集合","data": 49,"color":"#7934F6"},
|
||||
{"name": "第一期","data": 10,"color":"#AF39C4"},
|
||||
{"name": "第二期","data": 10,"color":"#0370FF"},
|
||||
{"name": "第三期","data": 10,"color":"#00A6CC"},
|
||||
{"name": "第四期","data": 10,"color":"#FFA700"},
|
||||
{"name": "第五期","data": 11,"color":"#00A776"},
|
||||
|
||||
]
|
||||
},
|
||||
threeData:{
|
||||
series:[]
|
||||
},
|
||||
threeOps:{
|
||||
legend:{show:false},
|
||||
title:{name: '100%',fontSize:16,color:'#333',},
|
||||
subtitle: {name: '分配分布',fontSize:12,color:'#666',},
|
||||
|
||||
extra: {
|
||||
ring: {
|
||||
ringWidth: 60,
|
||||
},
|
||||
}
|
||||
},
|
||||
fourData:{
|
||||
categories: [1,2,3,4,2,3,4,2,3,4,2,3,4,2,3,4,2,3,4,2,3,4,2,3,4],
|
||||
series: [{
|
||||
|
||||
name: "",
|
||||
data:['1','2','3','4','5','2','3','4','5','2','3','4','5','2','3','4','5','2','3','4','5','2','3','4','5']
|
||||
}]
|
||||
},
|
||||
fiveData:{
|
||||
categories: [1,2,3,4],
|
||||
series: [{
|
||||
|
||||
name: "",
|
||||
data:[]
|
||||
}],
|
||||
},
|
||||
fourOps:{
|
||||
color: ["#7632FF","#7632FF","#B039C2"],
|
||||
padding: [15,15,0,15],
|
||||
enableScroll: true,
|
||||
legend: {show:false},
|
||||
xAxis: {
|
||||
scrollShow:true,
|
||||
itemCount:4,
|
||||
disableGrid: true,
|
||||
scrollAlign:'right'
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
dashLength: 2,
|
||||
},
|
||||
extra: {
|
||||
area: {
|
||||
type: "straight",
|
||||
opacity: 0.2,
|
||||
addLine: true,
|
||||
width: 2,
|
||||
gradient: false,
|
||||
activeType: "hollow"
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
curData:null,
|
||||
fiveTotal:0,
|
||||
currentUserData:{}
|
||||
};
|
||||
},
|
||||
onReady(){
|
||||
// this.initTwo();
|
||||
this.getUserInfo();
|
||||
},
|
||||
onLoad() {
|
||||
// setTimeout(()=>{
|
||||
// this.init()
|
||||
// },500)
|
||||
this.profitSharingData();
|
||||
},
|
||||
methods: {
|
||||
// 查询用户等级
|
||||
async getUserInfo() {
|
||||
const result = await getUserInfo();
|
||||
if (result && result.bizcode === 100) {
|
||||
|
||||
this.currentUserData = result.data || {};
|
||||
if(!this.currentUserData?.isNewUser){
|
||||
this.tabTwo = this.tabTwo.filter((item) => item !== '数字积分');
|
||||
}
|
||||
}
|
||||
},
|
||||
onTwoTop(index){
|
||||
if(this.curTopTwo !== index){
|
||||
this.curTopTwo = index;
|
||||
this.profitSharingData();
|
||||
}
|
||||
},
|
||||
onTips(text){
|
||||
this.$refs.uToastRef.show({
|
||||
message: text,
|
||||
});
|
||||
},
|
||||
onTop(index){
|
||||
if(this.topSelect !== index){
|
||||
this.topSelect = index;
|
||||
}
|
||||
},
|
||||
onOne(index){
|
||||
if(this.curOne !== index){
|
||||
this.curOne = index;
|
||||
this.getFour();
|
||||
}
|
||||
},
|
||||
onTwo(index){
|
||||
if(!this.currentUserData?.isNewUser){
|
||||
this.curTwo = 1;
|
||||
this.getFive();
|
||||
}else{
|
||||
if(this.curTwo !== index){
|
||||
this.curTwo = index;
|
||||
this.getFive();
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
getFive(){
|
||||
this.fiveData.categories = [];
|
||||
this.fiveData.series[0].data = [];
|
||||
this.fiveData.series[0].name = '';
|
||||
if(this.curTwo == 0){
|
||||
this.fiveTotal = this.curData.profitSharingTbcBonus.tbcTotal;
|
||||
let arr = this.curData.profitSharingTbcBonus.tbcList;
|
||||
if(arr){
|
||||
arr.forEach((item,index)=>{
|
||||
this.fiveData.categories.push(item.key);
|
||||
this.fiveData.series[0].data.push(item.amount);
|
||||
})
|
||||
}
|
||||
|
||||
}else{
|
||||
this.fiveTotal = this.curData.profitSharingTbcBonus.bonusTotal;
|
||||
let arr = this.curData.profitSharingTbcBonus.bonusList;
|
||||
let max = 0;
|
||||
if(arr){
|
||||
arr.forEach((item,index)=>{
|
||||
if(max < item.amount){
|
||||
max = item.amount;
|
||||
}
|
||||
this.fiveData.categories.push(item.key);
|
||||
this.fiveData.series[0].data.push(item.amount);
|
||||
})
|
||||
}
|
||||
|
||||
if(max != 0){
|
||||
max = max / 1000;
|
||||
}
|
||||
// this.fourOps.yAxis.data.max =
|
||||
}
|
||||
},
|
||||
getFour(){
|
||||
this.fourData.categories = [];
|
||||
this.fourData.series[0].data = [];
|
||||
this.fourData.series[0].name = '';
|
||||
if(this.curOne == 0){
|
||||
console.log('dayList',this.curData.profitSharingStat.dayList)
|
||||
let arr = this.curData.profitSharingStat.dayList;
|
||||
if(arr){
|
||||
arr.forEach((item,index)=>{
|
||||
this.fourData.categories.push(item.key);
|
||||
this.fourData.series[0].data.push(item.amount);
|
||||
})
|
||||
}
|
||||
|
||||
}else{
|
||||
let arr = this.curData.profitSharingStat.monthList;
|
||||
if(arr){
|
||||
arr.forEach((item,index)=>{
|
||||
this.fourData.categories.push(item.key);
|
||||
this.fourData.series[0].data.push(item.amount);
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
profitSharingData(){
|
||||
getProfitSharingData({type:this.curTopTwo + 1}).then(res=>{
|
||||
if (res.bizcode == 100) {
|
||||
this.curData = res.data;
|
||||
if(this.curData){
|
||||
this.threeData.series = [];
|
||||
for(let key in this.curData.profitSharingDetail){
|
||||
let arr = this.curData.profitSharingDetail[key]['name'].split('(');
|
||||
console.log('arr',arr)
|
||||
this.curData.profitSharingDetail[key]['name'] = arr[0];
|
||||
if(arr.length > 1){
|
||||
let str = arr[1];
|
||||
str = str.slice(0, str.length - 1);
|
||||
this.curData.profitSharingDetail[key]['tips'] = str;
|
||||
}else{
|
||||
this.curData.profitSharingDetail[key]['tips'] = '';
|
||||
}
|
||||
|
||||
this.curData.profitSharingDetail[key]['data'] = this.curData.profitSharingDetail[key]['percent'];
|
||||
this.threeData.series.push(this.curData.profitSharingDetail[key])
|
||||
}
|
||||
|
||||
this.getFour();
|
||||
this.getFive();
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.top-view{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height:72rpx;
|
||||
background-color: #eee;
|
||||
border-radius: 36rpx;
|
||||
.top-box-view{
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
height:100%;
|
||||
border-radius: 36rpx;
|
||||
|
||||
}
|
||||
}
|
||||
.top-line{
|
||||
width:100%;
|
||||
height:12rpx;
|
||||
min-height:12rpx;
|
||||
display: flex;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
.two-top-tab-view{
|
||||
width:100%;
|
||||
height:88rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
min-height:88rpx;
|
||||
border-bottom:1rpx solid #D0D7DE;
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx 32rpx 0;
|
||||
.two-top-list{
|
||||
height:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-right:64rpx;
|
||||
.two-top-line{
|
||||
width:48rpx;
|
||||
height:4rpx;
|
||||
display: flex;
|
||||
background: #7934F6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contract-view{
|
||||
width:100%;
|
||||
height:calc(100% - 88rpx - 12rpx - var(--status-bar-height));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
.top-head-1{
|
||||
width:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 40rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tab-view-two{
|
||||
width:100%;
|
||||
height:54rpx;
|
||||
min-height:54rpx;
|
||||
margin-top:32rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding:0 32rpx;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1rpx solid #eaeaea;
|
||||
.tab-view-two-two{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
margin-right:48rpx;
|
||||
height:54rpx;
|
||||
min-height:54rpx;
|
||||
.line-view{
|
||||
width:48rpx;
|
||||
height:4rpx;
|
||||
min-height:4rpx;
|
||||
background-color: #7934F6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-view-one{
|
||||
width:100%;
|
||||
height:48rpx;
|
||||
min-height:48rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding:0 32rpx;
|
||||
box-sizing: border-box;
|
||||
view{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding:0 32rpx;
|
||||
box-sizing: border-box;
|
||||
height:48rpx;
|
||||
border-radius: 24rpx;
|
||||
margin-right:24rpx;
|
||||
}
|
||||
}
|
||||
.top-head{
|
||||
width:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 36rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
.tu-view-one{
|
||||
display: flex;
|
||||
width:100%;
|
||||
min-height:400rpx;
|
||||
padding: 0 32rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.tu-view{
|
||||
display: flex;
|
||||
width:100%;
|
||||
min-height:calc(100vw - 64rpx);
|
||||
padding: 0 32rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.tu-box{
|
||||
width:calc(100% - 100rpx);
|
||||
min-height:calc(100% - 200rpx);
|
||||
}
|
||||
.zi-box{
|
||||
position: absolute;
|
||||
left:32rpx;
|
||||
top:0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.bottom-view{
|
||||
width:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom:20rpx;
|
||||
.bottom-value-view{
|
||||
width:100%;
|
||||
border-radius: 0 0 16rpx 16rpx;
|
||||
flex-direction: column;
|
||||
// border-bottom:1rpx solid #eaeaea;
|
||||
// border-left:1rpx solid #eaeaea;
|
||||
// border-right:1rpx solid #eaeaea;
|
||||
display: flex;
|
||||
.bottom-value-view-row{
|
||||
width:100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.head-one-one{
|
||||
width:134rpx;
|
||||
height:100%;
|
||||
border-right:1rpx solid #eaeaea;
|
||||
border-left:1rpx solid #eaeaea;
|
||||
border-bottom:1rpx solid #eaeaea;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx;
|
||||
}
|
||||
.head-two-two{
|
||||
width:318rpx;
|
||||
height:100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
border-bottom:1rpx solid #eaeaea;
|
||||
padding: 20rpx;
|
||||
}
|
||||
.head-three-three{
|
||||
flex:1;
|
||||
padding: 20rpx;
|
||||
height:100%;
|
||||
border-left:1rpx solid #eaeaea;
|
||||
border-right:1rpx solid #eaeaea;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom:1rpx solid #eaeaea;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.bottom-head{
|
||||
width:100%;
|
||||
margin-top:28rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height:80rpx;
|
||||
min-height:80rpx;
|
||||
align-items: cneter;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
background-color: #F8F8F8;
|
||||
border:1rpx solid #F8F8F8;
|
||||
.head-one{
|
||||
width:134rpx;
|
||||
height:100%;
|
||||
border-right:1rpx solid #eaeaea;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.head-two{
|
||||
width:318rpx;
|
||||
max-height:318rpx;
|
||||
height:100%;
|
||||
border-right:1rpx solid #eaeaea;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.head-three{
|
||||
flex:1;
|
||||
height:100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user