1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933 |
- <template>
- <view class="content">
- <view class="status_bar"></view>
- <view class="top-nav">
- <uni-icons class="back" type="back" size="25" @click="back"></uni-icons>
- <view class="right" :class="index==2?'nav-active':''" @click="navClick(2)">
- 新季
- </view>
- <view class="left" :class="index==1?'nav-active':''" @click="navClick(1)">
- 全部
- </view>
- </view>
- <view class="content1 content-item">
- <view class="title">
- 收支核算
- </view>
- <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
- :show="isSHowContent1">
- <u-line color="#EEEEEE" />
- <view class="row1 mtb40">
- <view class="left">
- <view class="">
- {{ym1Change}}
- </view>
- <view class="" style="font-size: 12px; color:#9E9E9E; margin-top: 10rpx;">
- 单位:万元
- </view>
- </view>
- <view class="right" v-if="index!=2">
- <text class="text" :class="textIndex==1?'text-active':''" @click="accounting(1)">
- 按月
- </text>
- <text class="text" :class="textIndex==2?'text-active':''" @click="accounting(2)">按年</text>
- </view>
- </view>
- <view class="row2" @click='godetail(2)'>
- <view class="text">
- 收入(万元)
- </view>
- <view class="price">
- {{sr?Number(sr).toFixed(2):0}}
- </view>
- </view>
- <view class="row3" @click='godetail(2)'>
- <view class="left">
- <view class="text">
- 支出(万元)
- </view>
- <view class="number">
- {{zc?Number(zc).toFixed(2):0}}
- </view>
- </view>
- <view class="center">
- </view>
- <view class="right">
- <view class="text">
- 差额(万元)
- </view>
- <view class="number">
- {{Number(sr-zc).toFixed(2)}}
- </view>
- </view>
- </view>
- <view class="row5 flex alc">
- <view class="left">
- <text class="point-left flex alc"></text>收入(万元):<text
- class="text-left">{{Number(sr).toFixed(2)}}</text>
- <!-- <text class="point-left flex alc"></text>收入(万元):<text class="text-left">2000.00</text> -->
- </view>
- <view class="right">
- <text class="point-right"></text>支出(万元):<text
- class="text-right">{{Number(zc).toFixed(2)}}</text>
- <!-- <text class="point-left flex alc"></text>收入(万元):<text class="text-left">2000.00</text> -->
- </view>
- </view>
- <view class="row4">
- <qiun-data-charts type="area" :opts="opts" :chartData="chartData" :ontouch="true"
- @getIndex="getIndex" />
- </view>
- </uni-transition>
- <view class="zd flex alc" @click="foldClcik('fade',1)">
- {{this.isSHowContent1?'点击收起':'点击展开'}}
- <image v-if="this.isSHowContent1" src="../../static/sq.png" mode="widthFix"
- style="width: 30rpx;margin-left: 10rpx;"></image>
- <image v-else src="../../static/zk.png" mode="widthFix" style="width: 30rpx;margin-left: 10rpx;">
- </image>
- </view>
- </view>
- <view class="content2 content-item">
- <view class="title">
- 合同数据
- </view>
- <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
- :show="isSHowContent2">
- <u-line color="#EEEEEE" />
- <view class="row1 flex jcsb" style="margin-top: 40rpx;">
- <view class="left title-lv2">
- 数量统计
- </view>
- <view @click='godetail(0)' class="right-btn" style="position: relative;z-index: 999;">
- 合同明细
- </view>
- </view>
- <!-- <view class="row2 flex jcse">
- <view class="left flex alc">
- <view class="color1"></view>
- <text class="text">{{index==1?'过去12个月累计签订数量':'本季累计签订合同数量'}}</text>
- </view>
- <view class="right flex alc">
- <view class="color2"></view>
- <text class="text">{{index==1?'当前执行中数量':'本季执行中数量'}}</text>
- </view>
- </view> -->
- <view class="row3">
- <qiun-data-charts type="bar" :opts="opts2" :chartData="chartData1" />
- </view>
- <view class="row4 flex jcsb mtb40">
- <view class="left title-lv2">
- 利润核算
- </view>
- <view @click='godetail(1)' class="right-btn">
- 利润明细
- </view>
- </view>
- <view class="row5">
- <view class="left flex">
- <view class="" v-if="index==1">
- <u-icon name="arrow-left" size="26" style="margin-right: 10rpx;" color="#969696"
- @click="yearClick('1')">
- </u-icon>
- <text @click="showYear=true">{{year}}年</text>
- <u-icon name="arrow-right" size="26" style="margin-left: 10rpx;"
- :color="nowYear!=year?'#969696':'#DBDBDB'" @click="yearClick('2')" v-if="nowYear!=year">
- </u-icon>
- <u-icon name="arrow-right" size="26" style="margin-left: 10rpx;"
- :color="nowYear!=year?'#969696':'#DBDBDB'" v-if="nowYear==year">
- </u-icon>
- </view>
- <view class="" v-else>
- 新季利润
- </view>
- </view>
- <view class="right">
- 单位:元
- </view>
- </view>
- <view class="row6" v-if="isHaveData3">
- <qiun-data-charts type="column" :opts="opts3" :chartData="chartData3" />
- </view>
- </uni-transition>
- <view class="zd flex alc" @click="foldClcik('fade',2)">
- {{this.isSHowContent2?'点击收起':'点击展开'}}
- <image v-if="this.isSHowContent2" src="../../static/sq.png" mode="widthFix"
- style="width: 30rpx;margin-left: 10rpx;"></image>
- <image v-else src="../../static/zk.png" mode="widthFix" style="width: 30rpx;margin-left: 10rpx;">
- </image>
- </view>
- </view>
- <view class="content3 content-item">
- <view class="title flex jcsb">
- <view class="">
- 仓储数据
- </view>
- <view @click='goToPage(5)' class="right-btn">
- 库存明细
- </view>
- </view>
- <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
- :show="isSHowContent3">
- <u-line color="#EEEEEE" />
- <view class="row1 flex jcsb mtb40">
- <view class="left title-lv2">
- 库存储量
- </view>
- <view class="right">
- 单位:吨
- </view>
- </view>
- <view class="btn">
- <view class="btn-in" :class='btnIndex==2?"btn-active":""' @click="changeWeight(2)">
- 实际重量
- </view>
- <view class="btn-in" :class='btnIndex==1?"btn-active":""' @click="changeWeight(1)">
- 折算纯重
- </view>
- </view>
- <view class="row2">
- <view class="" v-for="(item,index) in clList">
- <view class="name">
- {{item.name}}
- </view>
- <view class="bottom flex alc jcsb">
- <u-line-progress :percent="item.percent" :active-color="color4(index)" :show-percent='false'
- class='left' height='12'>
- </u-line-progress>
- <view class="weight">
- {{item.weight}}
- </view>
- </view>
- </view>
- <!-- <qiun-data-charts type="bar" :opts="opts4" :chartData="chartData4" :ontouch="true" /> -->
- </view>
- <view class="row3">
- <view class="list-item flex jcsb" v-for="(item,index) in InventoryList">
- <view class="flex alc">
- <image :src="item.src" mode="widthFix" style="width: 40rpx;margin-right: 20rpx;"></image>
- <text style="color:#707575;">{{item.name}}</text>
- </view>
- <view class="number">
- {{item.number}}
- </view>
- </view>
- </view>
- <view class="row5 flex jcsb mtb40">
- <view class="left title-lv2">
- 当期货值
- </view>
- <view class="right">
- 单位:万元
- </view>
- </view>
- <view class="row6">
- <qiun-data-charts type="column" :opts="opts5" :chartData="chartData5" :ontouch="true" />
- </view>
- <view class="row7">
- <view class="left title-lv2" style="margin: 30rpx;">
- 平均成本
- </view>
- <view class="list-item" v-for="item in averageCostList">
- <view class="flex jcsb alc">
- <view class="left" style="color: #7A7A7A;">
- {{item.name}}
- </view>
- <view class="">
- {{Number(item.result).toFixed(0)}}
- </view>
- </view>
- </view>
- </view>
- </uni-transition>
- <view class="zd flex alc" @click="foldClcik('fade',3)">
- {{this.isSHowContent3?'点击收起':'点击展开'}}
- <image v-if="this.isSHowContent3" src="../../static/sq.png" mode="widthFix"
- style="width: 30rpx;margin-left: 10rpx;"></image>
- <image v-else src="../../static/zk.png" mode="widthFix" style="width: 30rpx;margin-left: 10rpx;">
- </image>
- </view>
- </view>
- <view class="content4 content-item">
- <view class="title flex jcsb">
- <view class="">
- 今日入库
- </view>
- <view @click='godetail(3)' class="right-btn">
- 入库明细
- </view>
- </view>
- <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
- :show="isSHowContent4">
- <u-line color="#EEEEEE" />
- <view class="" style="color: #9E9E9E;margin: 30rpx 0 0 30rpx; font-size: 12px;">
- 单位:吨
- </view>
- <view class="flex alc">
- <view class="" style="width:40%;height: 160px;">
- <qiun-data-charts type="ring" :opts="opts6" :chartData="chartData6" class='opts6' />
- </view>
- <view class="zt-right">
- <view class="flex jcsb alc" v-for="item in rkList" style="font-weight: 700;">
- <view class="left">
- <text :style="item.style"></text>{{item.name}}
- </view>
- <view class="right">
- {{Number(item.value).toFixed(2)}}
- </view>
- </view>
- </view>
- </view>
- </uni-transition>
- <view class="zd flex alc" @click="foldClcik('fade',4)">
- {{this.isSHowContent4?'点击收起':'点击展开'}}
- <image v-if="this.isSHowContent4" src="../../static/sq.png" mode="widthFix"
- style="width: 30rpx;margin-left: 10rpx;"></image>
- <image v-else src="../../static/zk.png" mode="widthFix" style="width: 30rpx;margin-left: 10rpx;">
- </image>
- </view>
- </view>
- <view class="content5 content-item">
- <view class="title">
- 在途数据
- </view>
- <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
- :show="isSHowContent5">
- <u-line color="#EEEEEE" />
- <view class="row1 days-nav">
- <view class="item" :class="carIndex==index?'item-active':''" v-for="(item, index) in dayList"
- @click="clickNav(index)">
- {{item}}
- </view>
- </view>
- <view class="flex alc">
- <view class="" style="width:40%;height: 160px;">
- <qiun-data-charts type="ring" :opts="opts7" :chartData="chartData7" />
- </view>
- <view class="zt-right">
- <view class="flex jcsb alc" v-for="item in ztList" style="font-weight: 700;">
- <view class="left">
- <text :style="item.style"></text>{{item.name}}
- </view>
- <view class="right">
- {{item.value}}
- </view>
- </view>
- </view>
- </view>
- </uni-transition>
- <view class="zd flex alc" @click="foldClcik('fade',5)">
- {{this.isSHowContent5?'点击收起':'点击展开'}}
- <image v-if="this.isSHowContent5" src="../../static/sq.png" mode="widthFix"
- style="width: 30rpx;margin-left: 10rpx;"></image>
- <image v-else src="../../static/zk.png" mode="widthFix" style="width: 30rpx;margin-left: 10rpx;">
- </image>
- </view>
- </view>
- <view class="content6 content-item">
- <view class="title">
- 用户增长
- </view>
- <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
- :show="isSHowContent6">
- <u-line color="#EEEEEE" />
- <view class="row1 flex jcsb" style="padding:0 12rpx 0 5rpx;">
- <view class="left">
- app注册
- </view>
- <view class="right">
- <text>合计:</text>
- <text style="color: #EC6666;">{{appTotal}}</text>
- <text>人</text>
- </view>
- </view>
- <view class="row2">
- <qiun-data-charts type="area" :opts="opts8" :chartData="chartData8" />
- </view>
- <view class="row1 flex jcsb" style="margin-top: 90rpx;padding:0 12rpx 0 5rpx;">
- <view class="left">
- 粮脉入驻
- </view>
- <view class="right">
- <text>合计:</text>
- <text style="color: #22C572;">{{lmTotal}}</text>
- <text>人</text>
- </view>
- </view>
- <view class="row2">
- <qiun-data-charts type="area" :opts="opts9" :chartData="chartData9" />
- </view>
- </uni-transition>
- <view class="zd flex alc" @click="foldClcik('fade',6)">
- {{this.isSHowContent6?'点击收起':'点击展开'}}
- <image v-if="this.isSHowContent6" src="../../static/sq.png" mode="widthFix"
- style="width: 30rpx;margin-left: 10rpx;"></image>
- <image v-else src="../../static/zk.png" mode="widthFix" style="width: 30rpx;margin-left: 10rpx;">
- </image>
- </view>
- </view>
- <u-picker v-model="showYear" mode="selector" :range="selector" :default-selector="[2]"></u-picker>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- btnIndex: "2",
- rkList: [],
- ztList: [],
- ztColor: ['#38CA80', '#8D9EE9', '#FFBB6E'],
- color: ['#FFBB6E', '#8D9EE9', '#FF8B95', '#38CA80', '#FFDD85', "#1890FF", "#91CB74", "#FAC858", "#EE6666",
- "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
- "#ea7ccc"
- ],
- clList: [],
- isHaveData3: true,
- val: 1000,
- carIndex: 0,
- appTotal: '',
- lmTotal: '',
- ym1: '',
- ym1Change: '',
- sr: '',
- zc: '',
- seachYear: '',
- seachMoth: '2022-10-10',
- dayList: ['1天', '7天', '30天'],
- averageCostList: [{
- name: '玉米',
- number: '2000.00'
- },
- {
- name: '玉米(潮粮)',
- number: '2000.00'
- },
- {
- name: '高粱',
- number: '2000.00'
- },
- {
- name: '高粱(潮粮)',
- number: '2000.00'
- },
- {
- name: '小麦',
- number: '2000.00'
- },
- {
- name: '大豆',
- number: '2000.00'
- },
- ],
- InventoryList: [{
- name: '合计储量',
- number: '1000.00',
- src: '../../static/img/cl.png'
- }, {
- name: '采购待执行',
- number: '1000.00',
- src: '../../static/img/cg.png'
- },
- {
- name: '销待执行售',
- number: '1000.00',
- src: '../../static/img/xs.png'
- },
- {
- name: '头寸',
- number: '1000.00',
- src: '../../static/img/tc.png'
- },
- ],
- year: 2022,
- selector: [2020, 2021, 2022],
- showYear: false,
- iconName1: 'arrow-up',
- iconName2: 'arrow-up',
- iconName3: 'arrow-up',
- iconName4: 'arrow-up',
- iconName5: 'arrow-up',
- iconName6: 'arrow-up',
- styles: {},
- modeClass: 'fade',
- isSHowContent1: true,
- isSHowContent2: true,
- isSHowContent3: true,
- isSHowContent4: true,
- isSHowContent5: true,
- isSHowContent6: true,
- chartData: {},
- chartData1: {},
- chartData3: {},
- chartData4: {},
- chartData5: {},
- chartData6: {},
- chartData7: {},
- chartData8: {},
- chartData9: {},
- opts: {
- enableScroll: true,
- color: ["#E84A55", "#22C572"],
- padding: [15, 15, 0, 15],
- dataPointShapeType: "hollow",
- legend: {
- show: false
- },
- xAxis: {
- gridType: "dash",
- disableGrid: true,
- itemCount: 6,
- },
- yAxis: {
- // gridType: "dash",
- gridType: 'solid',
- gridColor: "#E9E9E9",
- splitNumber: 5,
- data: [{
- // disabled: true,
- axisLine: false,
- fontColor: "#BEBEBE",
- textAlign: 'right'
- }],
- },
- extra: {
- area: {
- type: "straight",
- opacity: 0.3,
- addLine: true,
- width: 2,
- gradient: true
- },
- tooltip: {
- showBox: false,
- showArrow: true,
- showCategory: false,
- borderWidth: 0,
- borderRadius: 0,
- borderColor: "#000000",
- borderOpacity: 0.7,
- bgColor: "#000000",
- bgOpacity: 0.7,
- gridType: "dash",
- dashLength: 4,
- gridColor: "#E9E9E9",
- fontColor: "#FFFFFF",
- splitLine: true,
- horizentalLine: false,
- xAxisLabel: false,
- yAxisLabel: false,
- labelBgColor: "#FFFFFF",
- labelBgOpacity: 0.7,
- labelFontColor: "#666666"
- }
- },
- },
- opts2: {
- color: ["#D2F3E2", "#22C572"],
- padding: [15, 20, 0, 5],
- legend: {
- fontSize: 12,
- position: 'top',
- itemGap: 20,
- padding: 20
- },
- xAxis: {
- boundaryGap: "justify",
- disableGrid: false,
- axisLine: false,
- gridType: "dash",
- dashLength: 10,
- },
- extra: {
- // tooltip: {
- // showBox: false,
- // },
- bar: {
- type: "group",
- width: 10,
- meterBorde: 1,
- meterFillColor: "#FFFFFF",
- activeBgColor: "#000000",
- activeBgOpacity: 0.08,
- // linearType: "custom",
- barBorderCircle: true,
- seriesGap: 2,
- categoryGap: 6
- }
- }
- },
- opts3: {
- color: ["#8D9EE9"],
- padding: [15, 15, 0, 5],
- legend: {
- show: false
- },
- xAxis: {
- disableGrid: true,
- gridType: "dash",
- },
- yAxis: {
- gridType: "dash",
- data: [{
- min: 0,
- fontColor: '#BEBEBE',
- textAlign: 'right'
- }]
- },
- extra: {
- column: {
- type: "group",
- width: 15,
- activeBgColor: "#000000",
- activeBgOpacity: 0.08,
- linearType: "custom",
- seriesGap: 5,
- linearOpacity: 0.5,
- barBorderCircle: true,
- customColor: [
- "#8D9EE9",
- "#8D9EE9"
- ]
- }
- }
- },
- opts4: {
- enableScroll: true,
- color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
- "#ea7ccc"
- ],
- padding: [15, 30, 0, 5],
- legend: {
- show: false,
- },
- xAxis: {
- boundaryGap: "justify",
- disableGrid: false,
- axisLine: false,
- itemCount: 4,
- },
- yAxis: {
- },
- extra: {
- bar: {
- type: "group",
- width: 15,
- meterBorde: 1,
- meterFillColor: "#FFFFFF",
- activeBgColor: "#000000",
- activeBgOpacity: 0.08,
- // linearType: "custom",
- barBorderCircle: true,
- seriesGap: 2,
- categoryGap: 6
- }
- }
- },
- opts5: {
- enableScroll: true,
- color: ["#8D9EE9"],
- padding: [15, 15, 0, 5],
- legend: {
- show: false,
- },
- xAxis: {
- disableGrid: true,
- itemCount: 4,
- gridType: "dash",
- },
- yAxis: {
- gridType: "dash",
- data: [{
- min: 0,
- fontColor: "#BEBEBE",
- axisLine: false
- }]
- },
- extra: {
- column: {
- type: "group",
- width: 15,
- activeBgColor: "#000000",
- activeBgOpacity: 0.08,
- // linearType: "custom",
- seriesGap: 5,
- // linearOpacity: 0.5,
- barBorderCircle: true,
- customColor: [
- "#8D9EE9",
- "#8D9EE9"
- ]
- }
- }
- },
- opts6: {
- dataLabel: false,
- rotate: false,
- rotateLock: false,
- color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
- "#ea7ccc"
- ],
- legend: {
- show: false,
- position: "right",
- lineHeight: 25
- },
- title: {
- name: "",
- fontSize: 15,
- color: "#666666"
- },
- subtitle: {
- name: "",
- fontSize: 25,
- color: "#7cb5ec"
- },
- extra: {
- ring: {
- ringWidth: 10,
- activeOpacity: 0.5,
- activeRadius: 10,
- offsetAngle: 0,
- labelWidth: 15,
- border: false,
- borderWidth: 3,
- borderColor: "#FFFFFF"
- }
- }
- },
- opts7: {
- dataLabel: false,
- rotate: false,
- rotateLock: false,
- color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
- "#ea7ccc"
- ],
- legend: {
- show: false,
- position: "right",
- lineHeight: 25
- },
- title: {
- name: "",
- fontSize: 15,
- color: "#666666"
- },
- subtitle: {
- name: "",
- fontSize: 25,
- color: "#7cb5ec"
- },
- extra: {
- ring: {
- ringWidth: 10,
- activeOpacity: 0.5,
- activeRadius: 10,
- offsetAngle: 0,
- labelWidth: 15,
- border: false,
- borderWidth: 3,
- borderColor: "#FFFFFF"
- }
- }
- },
- opts8: {
- color: ["#EC6666"],
- padding: [15, 15, 0, 15],
- legend: {
- show: false,
- },
- xAxis: {
- disableGrid: true
- },
- yAxis: {
- gridType: "dash",
- dashLength: 2,
- data: [{
- // disabled: true,
- axisLine: false,
- fontColor: "#BEBEBE",
- }],
- },
- extra: {
- area: {
- type: "curve",
- opacity: 0.2,
- addLine: true,
- width: 2,
- gradient: true
- },
- tooltip: {
- showBox: false,
- showArrow: true,
- showCategory: false,
- borderWidth: 0,
- borderRadius: 0,
- borderColor: "#000000",
- borderOpacity: 0.7,
- bgColor: "#000000",
- bgOpacity: 0.7,
- gridType: "dash",
- dashLength: 4,
- gridColor: "#E9E9E9",
- fontColor: "#FFFFFF",
- splitLine: true,
- horizentalLine: false,
- xAxisLabel: false,
- yAxisLabel: false,
- labelBgColor: "#FFFFFF",
- labelBgOpacity: 0.7,
- labelFontColor: "#666666"
- }
- }
- },
- opts9: {
- color: ["#22C572"],
- padding: [15, 15, 0, 15],
- legend: {
- show: false,
- },
- xAxis: {
- disableGrid: true
- },
- yAxis: {
- gridType: "dash",
- dashLength: 2,
- data: [{
- // disabled: true,
- axisLine: false,
- fontColor: "#BEBEBE",
- }],
- },
- extra: {
- area: {
- type: "curve",
- opacity: 0.2,
- addLine: true,
- width: 2,
- gradient: true
- },
- tooltip: {
- showBox: false,
- showArrow: true,
- showCategory: false,
- borderWidth: 0,
- borderRadius: 0,
- borderColor: "#000000",
- borderOpacity: 0.7,
- bgColor: "#000000",
- bgOpacity: 0.7,
- gridType: "dash",
- dashLength: 4,
- gridColor: "#E9E9E9",
- fontColor: "#FFFFFF",
- splitLine: true,
- horizentalLine: false,
- xAxisLabel: false,
- yAxisLabel: false,
- labelBgColor: "#FFFFFF",
- labelBgOpacity: 0.7,
- labelFontColor: "#666666"
- }
- }
- },
- textIndex: 1,
- index: 2,
- background: {
- backgroundColor: '#2E303A',
- backgroundColor: 'red',
- },
- nowYear: ''
- }
- },
- onLoad: function(option) {
- this.nowYear = new Date().getFullYear()
- },
- destroyed() {
- },
- onUnload() {
- },
- onReady() {
- this.getServerData();
- },
- methods: {
- changeWeight(index) {
- this.btnIndex = index
- this.makeDate4(this.chartList, index)
- },
- color4(index) {
- console.log(index)
- index = index + 1
- switch (index) {
- case 1:
- return '#FFBB6E'
- case 2:
- return '#8D9EE9'
- case 3:
- return '#FF8B95'
- case 4:
- return '#38CA80'
- case 5:
- return '#FFDD85'
- case 6:
- return '#FFBB6E'
- case 7:
- return '#FFBB6E'
- case 8:
- return '#FFBB6E'
- case 9:
- return '#FFBB6E'
- case 10:
- return '#FFBB6E'
- }
- },
- goToPage(index) {
- uni.navigateTo({
- url: '/pages/user/contractLook/inventoryCost?searchMonth=' + this.seachMoth
- })
- },
- clickNav(index) {
- this.carIndex = index
- let _data = ""
- if (index == 0) {
- _data = 1
- } else if (index == 1) {
- _data = 7
- } else {
- _data = 30
- }
- this.$api.doRequest('get', '/biInfoController/getTranCountWai', {
- seachMoth: _data,
- }).then(res => {
- console.log(res.data)
- this.selectMakeDate7(res.data.data[0])
- })
- },
- yearClick(type) {
- if (type == 1) {
- this.year--
- } else {
- this.year++
- }
- this.$api.doRequest('get', '/biInfoController/profitAccount', {
- compId: uni.getStorageSync('pcUserInfo').compId,
- seachYear: this.year,
- // biViewInfoList: {weight:''}
- }).then(res => {
- console.log("利润切换", res.data.data[0])
- // this.makeDate3(res.data[0])
- this.chartData3.series = [];
- let _categorieslr = []
- let _countlr = []
- if (res.data.data[0].biViewInfoList.length > 0) {
- for (let i = 0; i < res.data.data[0].biViewInfoList.length; i++) {
- _categorieslr.push(res.data.data[0].biViewInfoList[i].name)
- _countlr.push(res.data.data[0].biViewInfoList[i].weight ? res.data.data[0]
- .biViewInfoList[
- i].weight :
- 0)
- //利润核算
- }
- }
- let res3 = {
- categories: _categorieslr,
- series: [{
- name: "利润金额",
- data: _countlr
- }]
- };
- this.chartData3 = JSON.parse(JSON.stringify(res3));
- })
- },
- godetail(status) {
- var url = ''
- switch (status) {
- case 0:
- url = '/pages/dataReport/contractdetails/contractdetails'
- break;
- case 1:
- url = '/pages/dataReport/breakdownofprofit'
- break;
- case 2:
- url = '/pages/dataReport/costbreakdown?data=' + this.ym1 + '&type=' + this.index
- break;
- case 3:
- url = '/pages/dataReport/Inventoryentrydetails'
- break;
- }
- uni.navigateTo({
- url: url
- })
- },
- foldClcik(type, index) {
- switch (index) {
- case 1:
- this.isSHowContent1 = !this.isSHowContent1
- this.iconName1 = this.isSHowContent1 ? "arrow-up" : 'arrow-down'
- break;
- case 2:
- this.isSHowContent2 = !this.isSHowContent2
- this.iconName2 = this.isSHowContent2 ? "arrow-up" : 'arrow-down'
- break;
- case 3:
- this.isSHowContent3 = !this.isSHowContent3
- this.iconName3 = this.isSHowContent3 ? "arrow-up" : 'arrow-down'
- break;
- case 4:
- this.isSHowContent4 = !this.isSHowContent4
- this.iconName4 = this.isSHowContent4 ? "arrow-up" : 'arrow-down'
- break;
- case 5:
- this.isSHowContent5 = !this.isSHowContent5
- this.iconName5 = this.isSHowContent5 ? "arrow-up" : 'arrow-down'
- break;
- case 6:
- this.isSHowContent6 = !this.isSHowContent6
- this.iconName6 = this.isSHowContent6 ? "arrow-up" : 'arrow-down'
- break;
- }
- this.modeClass = type
- },
- getIndex(e) {
- console.log(e)
- // 点击图表
- if (this.textIndex == 1) {
- this.ym1 = this.chartList[0].biViewInfoList[e.currentIndex.index].name
- this.ym1Change = this.chartList[0].biViewInfoList[e.currentIndex.index].name.replace(/-/g, ".");
- this.sr = this.chartList[0].biViewInfoList[e.currentIndex.index].weight
- this.zc = this.chartList[2].biViewInfoList[e.currentIndex.index].weight
- } else {
- this.ym1 = this.chartList[1].biViewInfoList[e.currentIndex.index].name
- this.ym1Change = this.chartList[1].biViewInfoList[e.currentIndex.index].name.replace(/-/g, ".");
- this.sr = this.chartList[1].biViewInfoList[e.currentIndex.index].weight
- this.zc = this.chartList[3].biViewInfoList[e.currentIndex.index].weight
- }
- },
- makeYData(max) {
- if (max <= 100) {
- return Math.ceil(max * 1.05 / 20) * 20
- } else if (max <= 1000) {
- return Math.ceil(max * 1.05 / 100) * 100
- } else if (max > 1000) {
- console.log(111)
- return Math.ceil(max * 1.05 / 500) * 500
- }
- // Math.ceil(_max * 1.05 / 500) * 500
- },
- makeDate1(val) {
- console.log("val", val)
- // 按月1
- let _categories = []
- let _price1 = []
- let _price2 = []
- this.chartData.series = [];
- // 设置x轴数据
- let _ySRPriceMax = 0
- let _yZCPriceMax = 0
- let _max = 0
- if (this.textIndex == 1) {
- if (val[0].biViewInfoList && val[0].biViewInfoList.length > 0) {
- for (let i = 0; i < val[0].biViewInfoList.length; i++) {
- val[0].biViewInfoList[i].weight = Number(val[0].biViewInfoList[i].weight).toFixed(2)
- _price1.push(val[0].biViewInfoList[i].weight)
- }
- //月收入最大值
- _ySRPriceMax = Math.max(..._price1)
- for (let i = 0; i < val[2].biViewInfoList.length; i++) {
- val[2].biViewInfoList[i].weight = Number(val[2].biViewInfoList[i].weight).toFixed(2)
- _price2.push(val[2].biViewInfoList[i].weight)
- _categories.push(new Date(val[2].biViewInfoList[i].name).getMonth() + 1)
- }
- //月收入最大值
- _yZCPriceMax = Math.max(..._price2)
- // 判断收入支出最大值构建y坐标轴刻度
- _max = _ySRPriceMax > _yZCPriceMax ? _ySRPriceMax : _yZCPriceMax
- this.ym1 = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].name
- this.ym1Change = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].name.replace(/-/g, ".");
- this.sr = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].weight
- this.zc = val[2].biViewInfoList[val[2].biViewInfoList.length - 1].weight
- }
- } else {
- if (val[1].biViewInfoList && val[1].biViewInfoList.length > 0) {
- this.ym1Change = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].name.replace(/-/g, ".");
- this.ym1 = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].name
- this.sr = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].weight
- this.zc = val[3].biViewInfoList[val[3].biViewInfoList.length - 1].weight
- for (let i = 0; i < val[1].biViewInfoList.length; i++) {
- _categories.push(val[1].biViewInfoList[i].name)
- _price1.push(val[1].biViewInfoList[i].weight)
- }
- for (let i = 0; i < val[3].biViewInfoList.length; i++) {
- _price2.push(val[3].biViewInfoList[i].weight)
- }
- }
- _max = _price1 > _price2 ? _price1 : _price2
- }
- let res = {
- categories: _categories,
- series: [{
- name: "收入",
- data: _price1,
- textColor: "transparent"
- }, {
- name: "支出",
- data: _price2,
- textColor: "transparent"
- }
- ]
- };
- // this.opts.yAxis.data[0].max = Math.ceil(_max / 1000) * 1000
- // 处理y轴最大值
- console.log("max1", _max)
- let _newMax = this.makeYData(_max)
- console.log('max1', _newMax)
- // this.opts.yAxis.data[0].max = Math.ceil(_max * 1.05 / 500) * 500
- this.opts.yAxis.data[0].max = _newMax
- this.chartData = JSON.parse(JSON.stringify(res));
- },
- makeDate2(val) {
- let _categories = []
- let _count1 = []
- let _count2 = []
- let _xMax1 = 0
- let _xMax2 = 0
- let _max = 0
- if (val[4].biViewInfoList && val[4].biViewInfoList.length > 0) {
- for (let i = 0; i < val[4].biViewInfoList.length; i++) {
- _categories.push(val[4].biViewInfoList[i].name.substring(0, 2))
- _count1.push(Number(val[4].biViewInfoList[i].weight).toFixed(0))
- _count2.push(val[4].biViewInfoList[i].count ? Number(val[4].biViewInfoList[i].count).toFixed(0) :
- 0)
- }
- }
- _xMax1 = Math.max(..._count1)
- _xMax2 = Math.max(..._count2)
- _max = _xMax1 > _xMax2 ? _xMax1 : _xMax2
- console.log(_xMax1)
- console.log(_xMax2)
- // this.opts2.xAxis.max = Math.ceil(_max / 100) * 100
- let _newMax = this.makeYData(_max)
- console.log('max2', _newMax)
- this.opts2.xAxis.max = _newMax
- let res1 = {
- categories: _categories,
- series: [{
- name: this.index == 1 ? '过去12个月累计签订数量' : '本季累计签订合同数量',
- data: _count1,
- legendShape: "circle",
- textColor: "transparent"
- },
- {
- name: this.index == 1 ? '当前执行中数量' : '本季执行中数量',
- data: _count2,
- legendShape: "circle",
- textColor: "transparent"
- }
- ]
- };
- this.chartData1 = JSON.parse(JSON.stringify(res1));
- },
- makeDate3(val) {
- let _max = 0
- let _categorieslr = []
- let _countlr = []
- if (val[5].biViewInfoList.length > 0) {
- for (let i = 0; i < val[5].biViewInfoList.length; i++) {
- _categorieslr.push(val[5].biViewInfoList[i].name.substring(0, 2))
- _countlr.push(val[5].biViewInfoList[i].weight ? val[5].biViewInfoList[i].weight : 0)
- }
- _max = Math.max(..._countlr)
- } else {
- this.isHaveData3 = false
- }
- let _newMax = this.makeYData(_max)
- console.log('max3', _newMax)
- this.opts3.yAxis.data[0].max = _newMax
- //利润核算
- let res3 = {
- categories: _categorieslr,
- series: [{
- name: "利润金额",
- data: _countlr
- }]
- };
- this.chartData3 = JSON.parse(JSON.stringify(res3));
- },
- makeDate4(val, type) {
- let _data = []
- // 合计储量
- let _count = 0
- this.clList = []
- if (type == 1) {
- _data = val[14].biViewInfoList
- } else {
- _data = val[8].biViewInfoList
- }
- let _categorieslr = []
- let _countlr = []
- // this.clList =
- let _weightList = []
- let _maxWeight = ''
- if (_data && _data.length > 0) {
- for (let i = 0; i < _data.length; i++) {
- _weightList.push(Number(_data.weight).toFixed(0) ? Number(_data[i]
- .weight).toFixed(0) : 0)
- }
- _maxWeight = Math.max(..._weightList) + Math.max(..._weightList) * 0.05
- for (let i = 0; i < _data.length; i++) {
- console.log("_data", _data)
- _count += _data[i].weight
- let _obj = {
- percent: Number(_data[i].weight).toFixed(0) / _maxWeight * 100,
- name: _data[i].name,
- weight: Number(_data[i].weight).toFixed(0)
- }
- console.log("库存储量", _obj)
- this.clList.push(_obj)
- }
- }
- let _tc = Number(_count) + Number(val[6].biViewInfoList[1].count) - Number(
- val[6].biViewInfoList[2].count)
- this.InventoryList = [{
- name: '合计储量',
- number: Number(_count).toFixed(3),
- src: '../../static/img/cl.png'
- }, {
- name: '采购待执行',
- number: Number(val[6].biViewInfoList[1].count).toFixed(3),
- src: '../../static/img/cg.png'
- },
- {
- name: '销待执行售',
- number: Number(val[6].biViewInfoList[2].count).toFixed(3),
- src: '../../static/img/xs.png'
- },
- {
- name: '头寸',
- number: Number(_tc).toFixed(3),
- src: '../../static/img/tc.png'
- },
- ]
- },
- makeDate5(val) {
- let _max = 0
- let _categorieslr = []
- let _count = []
- let count = []
- if (val[7].biViewInfoList && val[9].biViewInfoList.length > 0) {
- for (let i = 0; i < val[9].biViewInfoList.length; i++) {
- let _obj = {
- value: Number(val[9].biViewInfoList[i].weight ? val[9].biViewInfoList[i].weight : 0)
- .toFixed(
- 0),
- color: this.color[i]
- }
- _categorieslr.push(val[9].biViewInfoList[i].name)
- _count.push(_obj)
- count.push(Number(val[9].biViewInfoList[i].weight ? val[9].biViewInfoList[i].weight : 0))
- }
- _max = Math.max(...count)
- }
- let _newMax = this.makeYData(_max)
- console.log('max5', _newMax)
- this.opts5.yAxis.data[0].max = _newMax
- // data: [{
- // value: 10000,
- // color: "#FFBB6E"
- // },
- // {
- // value: 40000,
- // color: "#8D9EE9"
- // }, {
- // value: 70000,
- // color: "#FF8B95"
- // }, {
- // value: 90000,
- // color: "#38CA80"
- // },
- // {
- // value: 100000,
- // color: "#FFDD85"
- // }
- // ]
- let res5 = {
- categories: _categorieslr,
- series: [{
- name: "货值(万元)",
- data: _count
- }]
- };
- this.chartData5 = JSON.parse(JSON.stringify(res5));
- this.averageCostList = val[9].biViewInfoList
- },
- makeDate6(val) {
- let _data = []
- if (val[10].biViewInfoList && val[10].biViewInfoList.length > 0) {
- for (let i = 0; i < val[10].biViewInfoList.length; i++) {
- let _obj = {
- name: val[10].biViewInfoList[i].name,
- value: val[10].biViewInfoList[i].weight,
- color: this.color[i],
- style: {
- 'background': this.color[i],
- 'border-radius': '50%',
- 'width': '20rpx',
- 'height': '20rpx',
- 'display': 'inline-block',
- 'margin-right': '10rpx'
- },
- }
- _data.push(_obj)
- this.rkList = _data
- }
- }
- let res6 = {
- width: 200,
- series: [{
- data: _data
- }]
- };
- this.chartData6 = JSON.parse(JSON.stringify(res6));
- },
- selectMakeDate7(val) {
- console.log(11)
- console.log(val)
- this.chartData7.series = [];
- let _data = []
- this.ztList = []
- for (let i = 0; i < val.biViewInfoList.length; i++) {
- let _obj = {
- name: val.biViewInfoList[i].name,
- value: Number(val.biViewInfoList[i].count),
- color: this.ztColor[i],
- style: {
- 'background': this.ztColor[i],
- 'border-radius': '50%',
- 'width': '20rpx',
- 'height': '20rpx',
- 'display': 'inline-block',
- 'margin-right': '10rpx'
- },
- }
- _data.push(_obj)
- this.ztList = _data
- }
- console.log(_data)
- let res7 = {
- series: [{
- data: _data
- }]
- };
- this.chartData7 = JSON.parse(JSON.stringify(res7));
- },
- makeDate7(val) {
- let _data = []
- this.ztList = []
- if (val[11].biViewInfoList && val[11].biViewInfoList.length) {
- for (let i = 0; i < val[11].biViewInfoList.length; i++) {
- let _obj = {
- name: val[11].biViewInfoList[i].name,
- value: Number(val[11].biViewInfoList[i].count),
- color: this.ztColor[i],
- style: {
- 'background': this.ztColor[i],
- 'border-radius': '50%',
- 'width': '20rpx',
- 'height': '20rpx',
- 'display': 'inline-block',
- 'margin-right': '10rpx'
- },
- }
- _data.push(_obj)
- this.ztList = _data
- }
- }
- console.log(_data)
- let res7 = {
- series: [{
- data: _data
- }]
- };
- this.chartData7 = JSON.parse(JSON.stringify(res7));
- },
- makeDate8(val) {
- let _categories = []
- let _data = []
- let _categories1 = []
- let _data1 = []
- this.appTotal = val[12].count
- this.lmTotal = val[13].count
- let _max1 = 0
- let _max2 = 0
- if (val[12].biViewInfoList && val[12].biViewInfoList.length) {
- for (let i = 0; i < val[12].biViewInfoList.length; i++) {
- _categories.push(new Date(val[12].biViewInfoList[i].name).getMonth() + 1 + '月')
- _data.push(val[12].biViewInfoList[i].weight)
- }
- }
- _max1 = Math.max(..._data)
- if (val[13].biViewInfoList && val[13].biViewInfoList.length > 0) {
- for (let i = 0; i < val[13].biViewInfoList.length; i++) {
- _categories1.push(new Date(val[13].biViewInfoList[i].name).getMonth() + 1 + '月')
- _data1.push(val[13].biViewInfoList[i].weight)
- }
- }
- _max2 = Math.max(..._data1)
- let _newMax1 = this.makeYData(_max1)
- console.log('max8', _newMax1)
- this.opts8.yAxis.data[0].max = _newMax1
- let _newMax2 = this.makeYData(_max2)
- console.log('max9', _newMax2)
- this.opts9.yAxis.data[0].max = _newMax2
- let res8 = {
- categories: _categories,
- series: [{
- name: "成交量A",
- data: _data,
- // textColor: "transparent"
- }]
- }
- let res9 = {
- categories: _categories1,
- series: [{
- name: "成交量A",
- data: _data1,
- // textColor: "transparent"
- }]
- }
- this.chartData8 = JSON.parse(JSON.stringify(res8))
- this.chartData9 = JSON.parse(JSON.stringify(res9))
- },
- isShowChart(val, index) {
- if (val.length == 0) {
- return false
- switch (index) {
- case 3:
- this.isHaveData3 = false
- }
- }
- return true
- },
- getServerData() {
- uni.showLoading({
- title: "加载中",
- mask: true
- })
- this.$api.doRequest('get', '/biInfoController/selectPhoneBiInfo?compId=' + uni.getStorageSync(
- 'pcUserInfo')
- .compId + '&seachMoth=' + this.seachMoth + '&seachYear=' + this.seachYear).then(
- res => {
- console.log("数据报表", res)
- uni.hideLoading()
- this.chartList = res.data.data
- // 收支核算数据处理
- this.makeDate1(res.data.data)
- //合同数据
- this.makeDate2(res.data.data)
- //利润核算
- this.makeDate3(res.data.data)
- //库存储量
- this.makeDate4(res.data.data)
- //当期货值
- this.makeDate5(res.data.data)
- //今日入库
- this.makeDate6(res.data.data)
- //在途数据
- this.makeDate7(res.data.data)
- //APP注册
- this.makeDate8(res.data.data)
- // uni.hideLoading()
- })
- },
- back() {
- uni.navigateBack()
- },
- navClick(val) {
- this.clList = []
- this.index = val
- if (val == 1) {
- this.seachMoth = ''
- } else {
- this.seachMoth = '2022-10-10'
- }
- this.getServerData();
- },
- accounting(val) {
- this.textIndex = val
- if (val == 1) {
- console.log("按月")
- } else {
- console.log("按年")
- }
- this.makeDate1(this.chartList)
- }
- }
- }
- </script>
- <style scoped lang="scss">
- .flex {
- display: flex;
- }
- .alc {
- align-items: center;
- }
- .jcse {
- justify-content: space-evenly;
- }
- .jcsb {
- justify-content: space-between;
- }
- .mtb40 {
- margin: 40rpx 0;
- }
- .title-lv2 {
- font-weight: bold;
- color: #333333;
- }
- .status_bar {
- height: var(--status-bar-height);
- width: 100%;
- }
- .top-nav {
- display: flex;
- align-items: center;
- justify-content: space-evenly;
- position: fixed;
- top: 0;
- width: 100%;
- z-index: 1;
- }
- .back {
- position: absolute;
- left: 20rpx;
- top: 25%;
- bottom: 0;
- margin: auto;
- }
- .zd {
- color: #969696;
- margin-top: 20rpx;
- justify-content: center;
- }
- .top-nav {
- font-size: 36rpx;
- background: white;
- padding: 20rpx;
- }
- .nav-active {
- font-weight: 700;
- position: relative;
- }
- .nav-active:after {
- content: "";
- position: absolute;
- bottom: -20rpx;
- left: 0;
- right: 0;
- margin: auto;
- height: 10rpx;
- width: 60%;
- background: #262626;
- border-radius: 40rpx;
- }
- .content-item {
- background: white;
- margin: 20rpx 25rpx 0 25rpx;
- border-radius: 20rpx;
- padding: 20rpx;
- box-sizing: border-box;
- }
- .title {
- margin-bottom: 22rpx;
- font-size: 32rpx;
- font-weight: 700;
- color: #343434;
- }
- .right-btn {
- width: 120rpx;
- height: 42rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- background: #F1F1F1;
- border-radius: 30px;
- font-size: 22rpx;
- color: #707575;
- }
- .content1 {
- margin-top: 100rpx;
- .content1-wrap {}
- .row1 {
- display: flex;
- justify-content: space-between;
- align-items: center;
- .left {
- color: #868686;
- }
- .text {
- margin-left: 38rpx;
- color: #2E303A;
- height: 60rpx;
- display: inline-block;
- line-height: 60rpx;
- padding: 0 26rpx;
- }
- .text-active {
- // margin-left: 38rpx;
- color: #FFF;
- background: #2E303A;
- // padding: 1rpx 26rpx;
- height: 60rpx;
- display: inline-block;
- line-height: 60rpx;
- padding: 0 26rpx;
- border-radius: 10rpx;
- }
- }
- .row2 {
- display: flex;
- flex-direction: column;
- align-items: center;
- .text {
- color: #636363;
- margin-bottom: 10rpx
- }
- .price {
- font-size: 56rpx;
- font-weight: 700;
- color: #D79C58;
- }
- }
- .row3 {
- display: flex;
- justify-content: space-between;
- margin-top: 27rpx;
- align-items: center;
- .center {
- width: 2px;
- height: 61rpx;
- border: 2rpx solid #EEEEEE;
- }
- .left,
- .right {
- // background: green;
- width: calc(50% - 1px);
- text-align: center;
- .text {
- color: #636363
- }
- .number {
- margin-top: 12rpx;
- font-size: 34rpx;
- font-weight: 700;
- color: #343434;
- }
- }
- }
- .row4 {
- margin-top: 20rpx;
- }
- .row5 {
- background: #F6F6F6;
- border-radius: 8px;
- padding: 16rpx 0;
- box-sizing: border-box;
- margin: 20rpx 0;
- .left,
- .right {
- width: 50%;
- text-align: center;
- }
- .point-left {
- width: 11rpx;
- height: 11rpx;
- background: #E84A55;
- display: inline-block;
- border-radius: 50%;
- margin: 6rpx;
- }
- .point-right {
- width: 11rpx;
- height: 11rpx;
- background: #22C572;
- display: inline-block;
- border-radius: 50%;
- margin: 6rpx;
- }
- .text-left {
- color: #E84A55;
- font-weight: 700;
- }
- .text-right {
- color: #22C572;
- font-weight: 700;
- }
- }
- }
- .content2 {
- .row1 {}
- .row2 {
- color: #707575;
- font-size: 22rpx;
- .color1 {
- width: 16rpx;
- height: 12rpx;
- background: #D2F3E2;
- border-radius: 7rpx;
- margin-right: 10rpx;
- }
- .color2 {
- width: 16rpx;
- height: 12rpx;
- background: #2CC778;
- border-radius: 7rpx;
- margin-right: 10rpx;
- }
- }
- .row3 {
- position: relative;
- top: -40rpx;
- }
- .row5 {
- display: flex;
- justify-content: space-between;
- color: #9E9E9E;
- margin-bottom: 20rpx;
- .left {}
- }
- }
- .content3 {
- .btn {
- display: flex;
- font-size: 24rpx;
- background: #F5F6FA;
- padding: 8rpx;
- border-radius: 10rpx;
- width: 332rpx;
- .btn-in {
- text-align: center;
- width: 400rpx;
- padding: 10rpx 0;
- }
- .btn-active {
- padding: 10rpx 0;
- text-align: center;
- width: 400rpx;
- background: #fff;
- font-weight: 700;
- border-radius: 12rpx;
- }
- }
- .right {
- color: #9E9E9E;
- }
- .row2 {
- .name {
- color: #7A7A7A;
- margin: 17rpx 0;
- }
- .bottom {
- display: flex;
- }
- .left {
- width: 80%;
- }
- .weight {
- margin-left: 20rpx;
- }
- }
- .row3 {
- padding: 31rpx 25rpx 51rpx 25rpx;
- border-radius: 15rpx;
- margin-top: 31rpx;
- background: #FAFAFA;
- .list-item {
- margin-top: 20rpx;
- .number {
- font-weight: 700;
- }
- }
- }
- .row7 {
- .list-item {
- font-size: 24rpx;
- display: inline-block;
- padding: 20rpx;
- box-sizing: border-box;
- background: #FAFAFA;
- width: calc(50% - 40rpx);
- margin: 20rpx;
- border-radius: 8rpx;
- }
- }
- }
- .content4 {
- .row1 {
- display: flex;
- .opts6 uni-canvas {
- width: 200px;
- }
- }
- }
- .content5 {
- .days-nav {
- display: flex;
- justify-content: space-evenly;
- }
- }
- .zt-right {
- flex-direction: column;
- justify-content: space-evenly;
- height: 100px;
- display: flex;
- width: 100%;
- }
- .content6 {
- .row1 {
- margin: 20rpx 0;
- }
- .left {
- // font-weight: 700;
- // margin
- }
- }
- .days-nav {
- margin: 20rpx;
- background: #F5F6FA;
- border-radius: 8rpx;
- padding: 4rpx 0;
- .item {
- width: 33%;
- display: flex;
- justify-content: center;
- padding: 6px 0;
- }
- .item-active {
- background: #fff;
- }
- }
- </style>
|