You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
991 lines
24 KiB
991 lines
24 KiB
<template>
|
|
<view class="homePage">
|
|
<view class="nav_area dis-flex-between-center">
|
|
<view class="left-btn" v-html="(userType!=='background')?valueType:''"
|
|
:class="{'haveIcon':userType!=='background','select':showValueType}" @click="selectType"></view>
|
|
<view class="" style="font-size: 18px;color: #101010;" v-html="userType!=='background'?'顶呱刮':'顶呱刮-总平台'"></view>
|
|
<view class="right-btn" @click="changeAudio" v-html="userType!=='background'?'音乐':''"
|
|
:class="(userType!=='background'&&!isPlay)?'playIcon':(userType!=='background'&&isPlay)?'pauseIcon':''">
|
|
<!-- <audio src="../../static/audio/pd-5b7671cee8051387.mp3" poster="" name="" author="" action="" controls></audio> -->
|
|
</view>
|
|
</view>
|
|
<view class="home_1" v-if="userType!=='background'">
|
|
<view class="banner_area">
|
|
<swiper v-if="bannerList.length!=0" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
|
|
<swiper-item v-for="(item, index) in bannerList" :key="index">
|
|
<!-- <image :src="item.image" mode=""></image> -->
|
|
<img v-lazy="item.image" />
|
|
</swiper-item>
|
|
</swiper>
|
|
<view v-else class="loader_image">
|
|
<view class="loader"></view>
|
|
</view>
|
|
</view>
|
|
<view class="notice" @click="toUrl('notice')" v-if="notice.title">
|
|
<text class="notice_t">公告：</text>
|
|
{{notice.title}}
|
|
</view>
|
|
<view class="dis-flex goods_area new" v-if="showValueType">
|
|
<view v-for="(item,index) in goodsList" :key="index" class="type_item">
|
|
<view class="" @click="selectValueType(item)">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="dis-flex goods_area" v-if="0">
|
|
<view v-for="(item,index) in goodsList" :key="index" class="goods_item">
|
|
<view class="" @click="selectValueType(item)">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<view v-for="(item,index) in typeGoodsList" :key="index" class="dis-flex-between-center goods-item ">
|
|
<view v-if="showimg==true" class="loader-cover_image">
|
|
<view class="loader"></view>
|
|
</view>
|
|
<view class="" v-else>
|
|
<!-- <image :src="item.cover_image" mode="aspectFill"></image> -->
|
|
<img v-lazy="item.cover_image" />
|
|
</view>
|
|
<view class="goods-info">
|
|
<view class="skeleton-rect" style="color: #333;font-size: 16px;margin-bottom: 3px;">{{item.title}}</view>
|
|
<view style="margin-bottom: 3px;">面值{{item.price}}元</view>
|
|
<view class="">最高中奖金额{{item.max_awards_amount}}</view>
|
|
</view>
|
|
<view class="goods-btn" @click="toDetailUrl(item)">刮奖</view>
|
|
</view>
|
|
</view>
|
|
<view class="list_area" v-if="0">
|
|
<view class="list_title">中奖记录</view>
|
|
<view class="dis-flex-between-center t-h">
|
|
<view class="" style="flex: 0.4;">ID</view>
|
|
<view class="" style="flex: 0.3;">手机号码</view>
|
|
<view class="" style="flex: 0.3;text-align: right;">中奖金额</view>
|
|
</view>
|
|
<view v-for="(item,index) in recordsList" :key="index" class="t-d dis-flex-between-center">
|
|
<view class="" style="flex: 0.4;">{{item.user_id}}</view>
|
|
<view class="" style="flex: 0.3;">{{item.phone}}</view>
|
|
<view class="black" style="flex: 0.3;text-align: right;"><text class="red">{{item.awards_amount}}</text>元</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="home_2" v-if="userType=='background'">
|
|
<view class="">
|
|
<view class="title">
|
|
待办<text style="color: #999;font-size: 12px;">（更新于：{{needInfo.update_time}}）</text>
|
|
</view>
|
|
<view class="card">
|
|
<view class="">{{needInfo.down_scores_quota.title}}</view>
|
|
<view class="t2">{{needInfo.down_scores_quota.quota}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="title">
|
|
用户统计
|
|
</view>
|
|
<view class="pie_area">
|
|
<!-- #ifdef H5 -->
|
|
<view class="pie_box" id="piechart"></view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view class="pie_box" ref="piechart"></view>
|
|
<!-- #endif -->
|
|
<view class="sum">
|
|
{{userStatistics.sum.num}}
|
|
</view>
|
|
<view class="right">
|
|
<view class="right1">
|
|
<view class="">
|
|
<view class="label" style="font-size: 12px;">代理人数</view>
|
|
<view class="" style="font-weight: bold;padding-left: 20px;">{{userStatistics.agent.num}}</view>
|
|
</view>
|
|
<view class="" style="font-weight: bold;">{{userStatistics.agent.rate}}</view>
|
|
</view>
|
|
<view class="right1">
|
|
<view class="">
|
|
<view class="label" style="font-size: 12px;">用户人数</view>
|
|
<view class="" style="font-weight: bold;padding-left: 20px;">{{userStatistics.user.num}}</view>
|
|
</view>
|
|
<view class="" style="font-weight: bold;">{{userStatistics.user.rate}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="title">
|
|
上下分数据
|
|
</view>
|
|
<view class="chart_tab">
|
|
<view class="item" @click="changeChartIndex(1)" :class="chartIndex==1?'active':''">上分统计</view>
|
|
<view class="item" @click="changeChartIndex(2)" :class="chartIndex==2?'active':''">下分数据</view>
|
|
</view>
|
|
<view class="chart_area">
|
|
<view class="chart">
|
|
<view class="" style="color: #999;font-size: 14px;">
|
|
{{ chartIndex==1?'上分总数':'下分总数' }}：<text style="color: #101010;">{{ UpDownSta.sum_value }}</text>
|
|
</view>
|
|
<!-- #ifdef H5 -->
|
|
<view class="" id="mychart" style="width: 670rpx;height: 250px;"></view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view class="" ref="mychart" style="width: 670rpx;height: 250px;">
|
|
<echarts1 :option="optionData" id="myChart1" style="height: 110vw;margin-left: 2vw;width: 100%;padding: 4vw 0 0 0;"></echarts1>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import API from '@/common/js/api.js'
|
|
import updateTabBar from '@/common/js/updateTabBar.js'
|
|
// #ifdef H5
|
|
import * as echarts from 'echarts';//引入的是npm下载的
|
|
// #endif
|
|
import echarts1 from './echarts.vue';
|
|
|
|
export default {
|
|
data(){
|
|
return {
|
|
userType: 'background',//user|agent|background
|
|
bannerList: [],
|
|
goodsList: [],
|
|
showValueType: false,
|
|
valueType: '面值',
|
|
valueId: '',
|
|
typeGoodsList: [],
|
|
recordsList: [],
|
|
chartIndex: 1,//1上分2下分
|
|
myChart: null,
|
|
pieChart: null,
|
|
innerAudioContext: null,
|
|
isPlay: false,
|
|
nomore: false,
|
|
page: 1,
|
|
needInfo: {
|
|
update_time: '2023/08/30 19:00',
|
|
down_scores_quota: {
|
|
title: '待下分额度',
|
|
quota: ''
|
|
}
|
|
},
|
|
userStatistics: {
|
|
agent: {
|
|
num: '0',
|
|
rate: '0%'
|
|
},
|
|
user: {
|
|
num: '0',
|
|
rate: '0%'
|
|
},
|
|
sum: {
|
|
num: "0人" //总人数
|
|
}
|
|
},
|
|
UpDownSta: {
|
|
"histogram": [
|
|
{"date": "09", //月份
|
|
"value": "20.00" //数据
|
|
},
|
|
], //柱状图
|
|
"sum_value": "20.00" ,//总数据,
|
|
xData: ['1月', '2月', '3月', '4月', '5月'],
|
|
data: [155, 250, 360, 100, 180, 204]
|
|
},
|
|
notice: {
|
|
title: ''
|
|
},
|
|
// 1#ifdef APP-PLUS
|
|
optionData: {
|
|
color: ['#5087EC','#74C0C8'],
|
|
grid: {
|
|
top: '12%',
|
|
bottom: '5%',
|
|
left: '2%',
|
|
right: '4%',
|
|
containLabel: true//防止标签溢出
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
triggerOn: 'mousemove|click'
|
|
},
|
|
xAxis: {
|
|
data: this.UpDownSta&&this.UpDownSta.xData || ['1月', '2月', '3月', '4月', '5月'],
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#aaa",
|
|
width: 2
|
|
}
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color: "#aaa",
|
|
width: 2
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#444'
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
min: 0,
|
|
max: this.interval*5,
|
|
interval: this.interval,
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#ddd"
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#444'
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "#ddd"
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'bar',
|
|
barMaxWidth: 30,
|
|
data: this.UpDownSta&&this.UpDownSta.data || [155, 250, 360, 100, 180, 204]
|
|
}
|
|
]
|
|
},
|
|
// 1#endif
|
|
showSkeleton: true,
|
|
showimg:true
|
|
}
|
|
},
|
|
components: {
|
|
echarts1
|
|
},
|
|
computed: {
|
|
isLogin(){
|
|
return uni.getStorageSync('user_token');
|
|
},
|
|
interval(){
|
|
let yMax = ([...this.UpDownSta.data].sort())[this.UpDownSta.data.length-1];
|
|
if(!yMax){
|
|
yMax = 200;
|
|
}
|
|
let interval = yMax / 5;
|
|
if((interval+'-').indexOf('.')!=-1){
|
|
interval = Math.ceil(interval);
|
|
}
|
|
return interval;
|
|
}
|
|
},
|
|
methods: {
|
|
changeAudio(){
|
|
if(this.userType!=='user' && this.userType!=='agent') return;
|
|
if(this.isPlay){
|
|
this.isPlay = false;
|
|
this.innerAudioContext.pause();
|
|
}else{
|
|
this.isPlay = true;
|
|
this.innerAudioContext.play();
|
|
}
|
|
},
|
|
toUrl(item){
|
|
if(item=='login'){
|
|
uni.navigateTo({
|
|
url: '/pages/login/login'
|
|
// url: '/uni_modules/uni-id-pages/pages/login/login-withpwd'
|
|
})
|
|
}else if(item=='notice'){
|
|
uni.navigateTo({
|
|
url: '/pages/NoticeDetails/NoticeDetails?id='+this.notice.id
|
|
})
|
|
}else if(item=='login'){
|
|
|
|
}else{
|
|
uni.navigateTo({
|
|
url:'/pages/goodslist/goodslist?type='+item.title+'&id='+item.id
|
|
})
|
|
}
|
|
|
|
},
|
|
/* 选择面值 */
|
|
selectType(){
|
|
this.showValueType = !this.showValueType;
|
|
},
|
|
selectValueType(item){
|
|
this.valueId = item.id;
|
|
|
|
if(item.title=='全部面值'){
|
|
this.valueType = '面值';
|
|
}else{
|
|
this.valueType = item.title;
|
|
}
|
|
this.getGoodsList();
|
|
this.showValueType = false;
|
|
},
|
|
/* 某一面值的列表 */
|
|
getGoodsList(){
|
|
let data = {zone_id: this.valueId};
|
|
if(this.valueType=="面值"){
|
|
data = {};
|
|
}
|
|
if(this.typeGoodsList.length==0){
|
|
this.showimg = true
|
|
}
|
|
API.getGoodsList(data, res=>{
|
|
// console.log(res);
|
|
this.typeGoodsList = res.data;
|
|
setTimeout(()=>{
|
|
this.showimg = false
|
|
},300)
|
|
})
|
|
},
|
|
/* */
|
|
toDetailUrl(item){
|
|
uni.navigateTo({
|
|
url:'/pages/scratchCard/scratchCard?id='+item.id+'&type='+this.valueType
|
|
})
|
|
},
|
|
changeChartIndex(type){
|
|
this.chartIndex = type;
|
|
this.getUpDownSta(type);
|
|
setTimeout(()=>{
|
|
this.myChart.clear();
|
|
this.renderChart();
|
|
}, 200)
|
|
},
|
|
renderChart(){
|
|
let option = {
|
|
color: ['#5087EC','#74C0C8'],
|
|
grid: {
|
|
top: '12%',
|
|
bottom: '5%',
|
|
left: '2%',
|
|
right: '4%',
|
|
containLabel: true//防止标签溢出
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
triggerOn: 'mousemove|click'
|
|
},
|
|
xAxis: {
|
|
data: this.UpDownSta.xData,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#aaa",
|
|
width: 2
|
|
}
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color: "#aaa",
|
|
width: 2
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#444'
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
min: 0,
|
|
max: this.interval*5,
|
|
interval: this.interval,
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#ddd"
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#444'
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "#ddd"
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'bar',
|
|
barMaxWidth: 30,
|
|
data: this.UpDownSta.data
|
|
}
|
|
]
|
|
};
|
|
|
|
this.myChart.setOption(option);
|
|
},
|
|
renderPie(){
|
|
let option = {
|
|
color: ['#22c18b','#678CFD'],
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
radius: ['68%', '98%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 4,
|
|
borderColor: '#fff',
|
|
borderWidth: 0
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 40,
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{ value: this.userStatistics.agent.num, name: 'Search Engine' },
|
|
{ value: this.userStatistics.user.num, name: 'Direct' }
|
|
]
|
|
}
|
|
]
|
|
};
|
|
this.pieChart.setOption(option);
|
|
},
|
|
|
|
|
|
/*轮播图*/
|
|
getRotationChart(){
|
|
API.getRotationChart({
|
|
page:1, limit: 10
|
|
}, res=>{
|
|
this.bannerList = res.data.list;
|
|
// console.log(res.data,11111);
|
|
})
|
|
},
|
|
/*专区*/
|
|
getZoneList(){
|
|
API.getZoneList({}, res=>{
|
|
this.goodsList = res.data;
|
|
this.goodsList.push({
|
|
id: '',
|
|
title: '全部面值'
|
|
})
|
|
|
|
// this.valueType = this.goodsList[0].title;
|
|
// this.valueId = this.goodsList[0].id;
|
|
// this.getGoodsList();
|
|
})
|
|
},
|
|
/*记录*/
|
|
getAwardRecords(page=1, limit=20){
|
|
API.getAwardRecords({
|
|
page:page, limit: limit
|
|
}, res=>{
|
|
if(res.data.list.length<10){
|
|
this.nomore = true;
|
|
}
|
|
if(page>1){
|
|
this.recordsList = this.recordsList.concat(res.data.list);
|
|
}else{
|
|
this.recordsList = res.data.list;
|
|
}
|
|
})
|
|
},
|
|
/*总后台待办*/
|
|
getNeedSta(){
|
|
API.request('/adminStatistics/needStatistics', {}, res=>{
|
|
this.needInfo = res.data;
|
|
})
|
|
},
|
|
/*总后台用户统计*/
|
|
getUserSta(){
|
|
API.request('/adminStatistics/userStatistics', {}, res=>{
|
|
this.userStatistics = res.data;
|
|
})
|
|
},
|
|
/*总后台上下分统计数据*/
|
|
getUpDownSta(type=1){
|
|
API.request('/adminStatistics/upAndDownStatistics', {type: type}, res=>{
|
|
this.UpDownSta = {...res.data, xData: [], data: []};
|
|
this.UpDownSta.xData = this.UpDownSta.histogram.map(item=>{
|
|
return +item.date+'月';
|
|
})
|
|
this.UpDownSta.data = this.UpDownSta.histogram.map(item=>{
|
|
return item.value;
|
|
})
|
|
})
|
|
},
|
|
/**/
|
|
getNotice(){
|
|
API.request('/index/getNotice', {}, res=>{
|
|
this.notice = res.data;
|
|
}, fail=>{}, true)
|
|
},
|
|
},
|
|
mounted() {
|
|
if(this.userType!=='background'){
|
|
this.innerAudioContext = uni.createInnerAudioContext();
|
|
// this.innerAudioContext.autoplay = false;
|
|
this.innerAudioContext.loop = true;
|
|
this.innerAudioContext.src = '../../static/audio/bgm.mp3';
|
|
this.innerAudioContext.autoplay = true;//H5端部分浏览器不支持
|
|
this.innerAudioContext.onPlay(() => {
|
|
console.log('开始播放');
|
|
});
|
|
this.innerAudioContext.onPause(() => {
|
|
console.log('暂停播放');
|
|
});
|
|
this.innerAudioContext.onError((res) => {
|
|
console.log(res.errMsg);
|
|
console.log(res.errCode);
|
|
});
|
|
if(!this.isPlay){
|
|
this.isPlay = true;
|
|
this.innerAudioContext.play();//报错原因是chrome新特性,内容大致意思是开发者不能利用手中权限去给用户造成噪音干扰,首次加载页面需要用户和audio/video进行交互
|
|
}
|
|
|
|
}
|
|
// this.userType='background';
|
|
if(this.userType=='background'){
|
|
// console.log(this.$refs, 'this.$refs----');
|
|
// console.log(this.$refs.piechart, 'this.$refs.piechart----');
|
|
}
|
|
|
|
},
|
|
onShow() {
|
|
setTimeout(()=>{
|
|
// debugger;
|
|
if(this.userType!=='background'){
|
|
if(this.userType=='user'){
|
|
updateTabBar.changeUser();
|
|
}else if(this.userType=='agent'){
|
|
updateTabBar.changeAgent();
|
|
}
|
|
this.getZoneList();// 面值列表
|
|
this.getGoodsList();// 彩票列表
|
|
this.getRotationChart();
|
|
this.getAwardRecords();
|
|
this.getNotice();
|
|
}else if(this.userType=='background'){
|
|
this.chartIndex = 1;
|
|
updateTabBar.changebackground();
|
|
this.getNeedSta();
|
|
this.getUserSta();
|
|
this.getUpDownSta();
|
|
|
|
// #ifdef H5
|
|
this.pieChart = echarts.init(document.getElementById('piechart'));
|
|
this.myChart = echarts.init(document.getElementById('mychart'));
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
// this.pieChart = echarts.init(this.$refs.piechart);
|
|
// this.myChart = echarts.init(this.$refs.mychart);
|
|
// #endif
|
|
|
|
setTimeout(()=>{
|
|
this.renderPie();
|
|
this.renderChart();
|
|
}, 200)
|
|
}
|
|
}, 500)
|
|
|
|
},
|
|
onHide() {
|
|
|
|
},
|
|
created() {
|
|
this.userType = uni.getStorageSync('userType');
|
|
},
|
|
onReachBottom() {
|
|
if(this.userType!=='background' && !this.nomore){
|
|
this.page++;
|
|
this.getAwardRecords(this.page, 10);
|
|
}
|
|
},
|
|
onUnload(){
|
|
if(this.userType!=='background' && this.isPlay){
|
|
this.isPlay = false;
|
|
this.innerAudioContext.pause();
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.loader {
|
|
width: 50px;
|
|
--b: 8px;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
padding: 1px;
|
|
background: conic-gradient(#0000 10%,#000000) content-box;
|
|
-webkit-mask:
|
|
repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
|
|
radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
|
|
-webkit-mask-composite: destination-in;
|
|
mask-composite: intersect;
|
|
animation:l4 1s infinite steps(10);
|
|
}
|
|
@keyframes l4 {to{transform: rotate(1turn)}
|
|
}
|
|
.loader-cover_image{
|
|
width: 138px;height: 88px;border-radius: 10px;display: flex;justify-content: center;align-items: center;
|
|
}
|
|
.loader_image{
|
|
width: 700rpx;height: 300rpx;display: flex;justify-content: center;align-items: center;
|
|
}
|
|
|
|
.dis-flex{
|
|
display: flex;
|
|
}
|
|
.dis-flex-between-center{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.homePage{
|
|
padding: 90rpx 12.5px 50px;
|
|
/* #ifdef APP-PLUS */
|
|
padding-top: calc(90rpx + var(--status-bar-height));
|
|
/* #endif */
|
|
}
|
|
.nav_area {
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
z-index: 99;
|
|
background-color: #fff;
|
|
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
|
|
width: 700rpx;
|
|
height: 88rpx;
|
|
padding: 0px 25rpx;
|
|
padding-top: var(--status-bar-height);
|
|
box-sizing: content-box;
|
|
color: #b0b0b0;
|
|
font-size: 14px;
|
|
|
|
.left-btn{
|
|
flex: 0.3;
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
color: #E33837;
|
|
|
|
&.haveIcon::after{
|
|
content: '';
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
display: inline-block;
|
|
// background-image: url("../../static/home/iconPark-me@2x.png");
|
|
background-image: url("../../static/home/fas fa-caret-down@2x.png");
|
|
background-size: contain;
|
|
vertical-align: middle;
|
|
margin-right: 10rpx;
|
|
margin-top: -2px;
|
|
}
|
|
&.haveIcon.select::after{
|
|
content: '';
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
display: inline-block;
|
|
// background-image: url("../../static/home/iconPark-me@2x.png");
|
|
background-image: url("../../static/home/fas fa-caret-down@2x.png");
|
|
background-size: contain;
|
|
vertical-align: middle;
|
|
margin-right: 10rpx;
|
|
margin-top: -2px;
|
|
transform: rotate(-180deg);
|
|
}
|
|
}
|
|
.right-btn{
|
|
flex: 0.3;
|
|
text-align: right;
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
|
|
&.playIcon::after{
|
|
content: '';
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
display: inline-block;
|
|
background-image: url("../../static/home/md-volume_off@2x.png");
|
|
background-size: contain;
|
|
vertical-align: middle;
|
|
margin-left: 10rpx;
|
|
margin-top: -2px;
|
|
}
|
|
&.pauseIcon::after{
|
|
content: '';
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
display: inline-block;
|
|
background-image: url("../../static/home/md-volume_up@2x.png");
|
|
background-size: contain;
|
|
vertical-align: middle;
|
|
margin-left: 10rpx;
|
|
margin-top: -2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.home_1{
|
|
.banner_area{
|
|
padding: 20px 0px;
|
|
swiper{
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
// image{
|
|
// width: 700rpx;
|
|
// height: 300rpx;
|
|
// border-radius: 10px;
|
|
// overflow: hidden;
|
|
// }
|
|
img{
|
|
width: 700rpx;
|
|
height: 300rpx;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.notice{
|
|
color: #f00;
|
|
font-size: 14px;line-height: 14px;margin-bottom: 30rpx;
|
|
display: -webkit-box;//将盒子转换为弹性盒子
|
|
-webkit-box-orient: vertical;//文本显示方式，默认水平
|
|
-webkit-line-clamp: 1;//设置显示多少行
|
|
overflow: hidden;
|
|
|
|
.notice_t{
|
|
// color: #b0b0b0;
|
|
color: #f00;
|
|
}
|
|
}
|
|
.goods_area{
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
width: 700rpx;
|
|
position: fixed;
|
|
top: 88rpx;
|
|
left: 0px;
|
|
z-index: 2;
|
|
background: #fff;
|
|
padding: 20px 12.5px 0px 12.5px;
|
|
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.05);
|
|
|
|
&.new{
|
|
width: 16vw;
|
|
padding: 10px 12.5px 10px 12.5px;
|
|
}
|
|
.type_item{
|
|
color: #E33837;
|
|
font-size: 14px;
|
|
line-height: 34px;
|
|
}
|
|
.goods_item{
|
|
width: 107px;
|
|
height: 54px;
|
|
border: 1px solid #FAAB0E;
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
color: #FAAB0E;
|
|
font-size: 14px;
|
|
line-height: 54px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.goods-item{
|
|
height: 88px;
|
|
// padding: 10px 13px;
|
|
padding: 10px 0px;
|
|
color: #999;
|
|
font-size: 14px;
|
|
|
|
>view{
|
|
height: 88px;
|
|
}
|
|
image{
|
|
width: 138px;
|
|
height: 88px;
|
|
border-radius: 10px;
|
|
}
|
|
img{
|
|
width: 138px;
|
|
height: 88px;
|
|
border-radius: 10px;
|
|
}
|
|
.goods-info{
|
|
display: flex;
|
|
flex-direction: column;
|
|
// justify-content: space-between;
|
|
margin: 0px 5px;
|
|
flex: 1;
|
|
}
|
|
.goods-btn{
|
|
width: 50px;
|
|
height: 30px;
|
|
background-color: #e33838;
|
|
border-radius: 5px;
|
|
font-size: 11px;
|
|
color: #fff;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.list_area{
|
|
font-size: 14px;
|
|
|
|
.list_title{
|
|
font-size: 16px;
|
|
color: #101010;
|
|
font-weight: bold;
|
|
height: 30px;
|
|
}
|
|
.t-h{
|
|
color: #cecece;
|
|
height: 30px;
|
|
}
|
|
.t-d{
|
|
color: #999;
|
|
height: 30px;
|
|
}
|
|
.red{
|
|
color: #e50000;
|
|
}
|
|
.black{
|
|
color: #101010;
|
|
}
|
|
}
|
|
|
|
}
|
|
.home_2{
|
|
padding: 20px 7.5px;
|
|
.title{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
color: #101010;
|
|
font-weight: bold;
|
|
}
|
|
.card{
|
|
width: 670rpx;
|
|
height: 160rpx;
|
|
border-radius: 10px;
|
|
background-image: linear-gradient(to right, #B2E6FF, #57ACFF);
|
|
margin: 10px auto 20px;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
box-sizing: border-box;
|
|
padding: 30rpx 20rpx;
|
|
|
|
.t2{
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
.pie_area{
|
|
display: flex;
|
|
position: relative;
|
|
|
|
.pie_box{
|
|
width: 332rpx;height: 332rpx;
|
|
margin: 0px 20rpx 20rpx -20rpx;
|
|
box-sizing: border-box;
|
|
border: 10px solid #fff;
|
|
}
|
|
.sum{
|
|
position: absolute;top:0px;left:0px;
|
|
width: 332rpx;height: 332rpx;
|
|
line-height: 332rpx;
|
|
margin: 0px 20rpx 20rpx -20rpx;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
.right{
|
|
padding-top: 40rpx;
|
|
}
|
|
.right1{
|
|
width: 304rpx;
|
|
height: 86rpx;
|
|
border-radius: 5px;
|
|
background-color: #fafaff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10rpx 20rpx;
|
|
margin-bottom: 20rpx;
|
|
font-size: 14px;
|
|
}
|
|
.label{
|
|
padding-left: 20px;
|
|
position: relative;
|
|
margin-bottom: 3px;
|
|
}
|
|
.right1:nth-of-type(1) .label::before{
|
|
content: '';
|
|
display: inline-block;
|
|
width: 24rpx;height: 24rpx;
|
|
border-radius: 2px;
|
|
background-color: #22c18b;
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 0px;
|
|
}
|
|
.right1:nth-of-type(2) .label::before{
|
|
content: '';
|
|
display: inline-block;
|
|
width: 24rpx;height: 24rpx;
|
|
border-radius: 2px;
|
|
background-color: #678CFD;
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 0px;
|
|
}
|
|
}
|
|
|
|
.chart_tab{
|
|
width: 380rpx;
|
|
height: 160rpx;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
background-color: #fafaff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 30rpx;
|
|
|
|
.item{
|
|
width: 160rpx;
|
|
height: 120rpx;
|
|
text-align: center;
|
|
line-height: 120rpx;
|
|
color: #101010;
|
|
font-size: 14px;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
}
|
|
.item.active{
|
|
color: #678CFD;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.chart_area{
|
|
|
|
}
|
|
}
|
|
</style>
|
|
|