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.
969 lines
21 KiB
969 lines
21 KiB
<template>
|
|
<view class="v-page">
|
|
<!-- 顶部开始 -->
|
|
|
|
<view class="g-head">
|
|
<view class="flex align-center">
|
|
<view v-if="!avatar" class="cu-avatar xl round bg-white">
|
|
<view class="iconfont icon-people text-gray icon"></view>
|
|
</view>
|
|
<image v-if="avatar" :src="avatar" class=" xl round"></image>
|
|
<view v-if="!name" class="login-tip" @click="handleToLogin">点击登录</view>
|
|
<view v-if="name" class="user-info" @click="handleToInfo">
|
|
<view class="u_title">{{ name }},欢迎登录</view>
|
|
<view class="weather">
|
|
{{ cityWeather }}℃
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 顶部结束 -->
|
|
<!-- 中间开始 -->
|
|
<view class="g-body" style="padding-bottom: 20rpx;">
|
|
<!-- 按钮组 -->
|
|
<view class="body-item button-group">
|
|
<view class="big-button left-big-button" @click.stop="uploadEvent(1)">
|
|
<view class="big-button-inner">
|
|
<image class="big-button-img" src="@/static/images/icons/icon-index01.svg" ></image>
|
|
<view class="button-text">
|
|
<view class="big-font">事件上报</view>
|
|
<view class="font-underline"></view>
|
|
<view class="small-font">及时上报</view>
|
|
</view>
|
|
<view class="button-img"></view>
|
|
</view>
|
|
</view>
|
|
<view class="big-button right-big-button" @click.stop="uploadEvent(2)">
|
|
<view class="big-button-inner">
|
|
<image class="big-button-img" src="@/static/images/icons/icon-index02.svg" ></image>
|
|
<view class="button-text">
|
|
<view class="big-font">我的上报</view>
|
|
<view class="font-underline"></view>
|
|
<view class="small-font">迅速处理</view>
|
|
</view>
|
|
<view class="button-img"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 菜单 -->
|
|
<view class="v-card">
|
|
<view class="v-card-item">
|
|
<view class="v-card-box">
|
|
<common-title :title="'我的应用'"></common-title>
|
|
<uni-grid :column="4" :showBorder="false" @change="changeGrid">
|
|
<uni-grid-item v-for="(item,index) in menu" :index="index" :key="index">
|
|
<view class="grid-item-box">
|
|
<image class="item-img" :src="item.icon"></image>
|
|
<text class="text">{{ item.name }}</text>
|
|
</view>
|
|
</uni-grid-item>
|
|
</uni-grid>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 今日告警统计 -->
|
|
<view class="v-card">
|
|
<view class="v-card-item">
|
|
<view class="v-card-box">
|
|
<common-title :title="'今日告警统计'">
|
|
<template #count class="count-box">
|
|
<span class="event-count big-font">{{ eventCount.value }}</span>件
|
|
</template>
|
|
</common-title>
|
|
<view class="v-index-event">
|
|
<view v-for="(event,index) in sonEvent" class="v-event-item" @click="toSchedulingDetail(index+1)">
|
|
<view class="v-event-box">
|
|
<span class="big-font g-blue">{{ event.value }}</span>
|
|
{{event.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 告警趋势 -->
|
|
<view class="v-card">
|
|
<view class="v-card-item">
|
|
<view class="v-card-box">
|
|
<common-title :title="'告警趋势'"></common-title>
|
|
<view style="overflow-x: scroll;">
|
|
<view class="v-aram-charts" >
|
|
<qiun-data-charts :chartData="chartData" :opts="chartOpts" type="area" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 警情分类统计 -->
|
|
<view class="v-card">
|
|
<view class="v-card-item">
|
|
<view class="v-card-box">
|
|
<common-title :title="'警情分类统计'"></common-title>
|
|
<view class="classification-box">
|
|
<scroll-view :scroll-x="true" :scroll-y="false">
|
|
<view class="classification-item" v-for="(item,index) in classificationData">
|
|
<view class="content-box">
|
|
<span class="big-font normal-font-color">{{ item.value }}</span>
|
|
<span class="normal-font-color">{{ item.name }}</span>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 事件分类统计 -->
|
|
<view class="v-card">
|
|
<view class="v-card-item">
|
|
<view class="v-card-box">
|
|
<common-title :title="'事件分类统计'"></common-title>
|
|
<view class="v-event-classification">
|
|
<view class="top">
|
|
<view class="level-item" v-for="item in eventClassificationData">
|
|
<view class="level-name">{{item.name}}</view>
|
|
<view class="level-value">{{item.value}}</view>
|
|
<view class="level-color">
|
|
{{item.color=='red'?'重大风险':item.color=='orange'?'较大风险':item.color=='yellow'?'一般风险':'低风险'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="v-event-charts">
|
|
<qiun-data-charts type="ring" :opts="chartOpt" :chartData="chartDatas" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 中间结束 -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
log
|
|
} from 'util';
|
|
|
|
import amap from '../../utils/amap-wx.130.js';
|
|
import {
|
|
getAlarmData,
|
|
getAlarmTrendData,
|
|
getAlertCategoryData,
|
|
getEventCategoryData,
|
|
getAlarmStatisticsByWarning,
|
|
getAlartWayData
|
|
} from '@/api/word/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
chartOpts: {},
|
|
chartData: {},
|
|
chartOpt: {},
|
|
chartDatas: {},
|
|
|
|
eventData: [{
|
|
"value": "0",
|
|
"name": "告警统计"
|
|
},
|
|
{
|
|
"value": "0",
|
|
"id":"1",
|
|
"name": "待接警"
|
|
},
|
|
{
|
|
"value": "0",
|
|
"name": "已接警"
|
|
},
|
|
{
|
|
"value": "0",
|
|
"name": "处警"
|
|
},
|
|
{
|
|
"value": "0",
|
|
"name": "结警"
|
|
},
|
|
{
|
|
"value": "0",
|
|
"name": "归档"
|
|
},
|
|
{
|
|
"value": "0",
|
|
"name": "无效告警"
|
|
}
|
|
],
|
|
eventCount: {},
|
|
sonEvent: [],
|
|
|
|
classificationData: [{
|
|
"value": "0",
|
|
"name": "自然灾害"
|
|
},
|
|
{
|
|
"value": "0",
|
|
"name": "事故灾难"
|
|
},
|
|
{
|
|
"value": "0",
|
|
"name": "公共卫生"
|
|
},
|
|
{
|
|
"value": "0",
|
|
"name": "社会安全"
|
|
},
|
|
{
|
|
"value": "0",
|
|
"name": "其他事件"
|
|
}
|
|
],
|
|
|
|
"eventClassificationData": [{
|
|
"value": "0",
|
|
"name": "Ⅰ级",
|
|
"color": "red"
|
|
},
|
|
{
|
|
"value": "1",
|
|
"name": "Ⅱ级",
|
|
"color": "orange"
|
|
},
|
|
{
|
|
"value": "1",
|
|
"name": "Ⅲ级",
|
|
"color": "yellow"
|
|
},
|
|
{
|
|
"value": "0",
|
|
"name": "Ⅳ级",
|
|
"color": "blue"
|
|
}
|
|
],
|
|
|
|
menu: [{
|
|
icon: '../../static/images/icons/icon-index-control.svg',
|
|
name: '指挥调度'
|
|
},
|
|
{
|
|
icon: '../../static/images/icons/icon-index-plan.svg',
|
|
name: '应急预案'
|
|
},
|
|
{
|
|
icon: '../../static/images/icons/icon-index-resources.svg',
|
|
name: '应急资源'
|
|
},
|
|
{
|
|
icon: '../../static/images/icons/icon-index-duty.svg',
|
|
name: '值守人员'
|
|
},
|
|
{
|
|
icon: '../../static/images/icons/icon-index-patrol.svg',
|
|
name: '电子巡更'
|
|
},
|
|
{
|
|
icon: '../../static/images/icons/icon-index-scenic.svg',
|
|
name: '景区管理'
|
|
},
|
|
{
|
|
icon: '../../static/images/icons/icon-index-spot.svg',
|
|
name: '景点管理'
|
|
},
|
|
{
|
|
icon: '../../static/images/icons/icon-index-sort.svg',
|
|
name: '景点分类'
|
|
},
|
|
{
|
|
icon: '../../static/images/icons/icon-index-video.svg',
|
|
name: '视频监控'
|
|
},
|
|
{
|
|
icon: '../../static/images/icons/icon-index-device.svg',
|
|
name: '设备管理'
|
|
},
|
|
{
|
|
icon: '../../static/images/icons/icon-index-ticket.svg',
|
|
name: '票务管理'
|
|
},
|
|
],
|
|
|
|
|
|
|
|
|
|
|
|
current: 0,
|
|
name: this.$store.state.user.name,
|
|
swiperDotIndex: 0,
|
|
cityWeather: '',
|
|
data: [
|
|
]
|
|
};
|
|
},
|
|
created() {
|
|
this.getWeather()
|
|
|
|
|
|
},
|
|
mounted() {
|
|
// this.getServerData()
|
|
// this.getServerDatas()
|
|
//告警统计
|
|
this.getAlarmData()
|
|
//告警趋势
|
|
this.getAlarmTrendData()
|
|
//警情分类统计
|
|
this.getAlertCategoryData()
|
|
//事件分类统计
|
|
this.getEventCategoryData()
|
|
// //时间分类统计 -告警方式
|
|
// this.getAlartWayData()
|
|
|
|
this.getAlarmStatisticsByWarning()
|
|
},
|
|
computed: {
|
|
avatar() {
|
|
return this.$store.state.user.avatar;
|
|
}
|
|
},
|
|
methods: {
|
|
uploadEvent(val) {
|
|
if (val == 1) {
|
|
uni.navigateTo({
|
|
url: '/subPackWork/reportMatter/reportMatter'
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '/subPackWork/myReport/myReport'
|
|
})
|
|
}
|
|
},
|
|
|
|
// 获取天气
|
|
getWeather() {
|
|
let this_ = this
|
|
let myAmapWeather = new amap.AMapWX({
|
|
key: 'cfdc16a230efdb764d5ca2ae154bfa40'
|
|
});
|
|
myAmapWeather.getWeather({
|
|
success: function(data) {
|
|
console.log(data);
|
|
this_.cityWeather = data.liveData.reporttime + ' ' + data.weather.data + ' ' + data
|
|
.liveData.temperature
|
|
},
|
|
fail: function(info) {
|
|
//失败回调
|
|
console.log(info);
|
|
}
|
|
});
|
|
},
|
|
getServerData() {
|
|
//模拟从服务器获取数据时的延时
|
|
setTimeout(() => {
|
|
let res = {
|
|
categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
|
|
series: [{
|
|
name: "目标值",
|
|
data: [35, 36, 31, 33, 13, 34]
|
|
}]
|
|
};
|
|
this.chartData = JSON.parse(JSON.stringify(res));
|
|
this.chartOpts = {
|
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452",
|
|
"#9A60B4", "#ea7ccc"
|
|
],
|
|
padding: [15, 10, 0, 15],
|
|
enableScroll: true,
|
|
legend: {
|
|
show: false,
|
|
},
|
|
xAxis: {
|
|
marginTop:5,
|
|
labelCount:5,
|
|
rotateLabel:true,
|
|
rotateAngle:15,
|
|
disableGrid: true,
|
|
boundaryGap: "justify",
|
|
itemCount: 4,
|
|
scrollShow: true
|
|
},
|
|
yAxis: {
|
|
gridType: "dash",
|
|
dashLength: 2,
|
|
},
|
|
extra: {
|
|
area: {
|
|
type: "curve",
|
|
opacity: 0.8,
|
|
addLine: true,
|
|
width: 2,
|
|
gradient: true,
|
|
activeType: "hollow"
|
|
}
|
|
}
|
|
}
|
|
}, 500);
|
|
},
|
|
getServerDatas() {
|
|
//模拟从服务器获取数据时的延时
|
|
setTimeout(() => {
|
|
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
|
let res = {
|
|
series: [{
|
|
data: [{
|
|
"value": 0,
|
|
"name": "手机固话"
|
|
},
|
|
{
|
|
"value": 0,
|
|
"name": "网络电话"
|
|
},
|
|
{
|
|
"value": 0,
|
|
"name": "物联设备"
|
|
},
|
|
{
|
|
"value": 2,
|
|
"name": "业务系统"
|
|
},
|
|
{
|
|
"value": 0,
|
|
"name": "系统运维"
|
|
}
|
|
]
|
|
}]
|
|
};
|
|
this.chartDatas = JSON.parse(JSON.stringify(res));
|
|
this.chartOpt = {
|
|
rotate: false,
|
|
rotateLock: false,
|
|
color: ["#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
|
"#ea7ccc"
|
|
],
|
|
padding: [5, 5, 5, 5],
|
|
dataLabel: false,
|
|
enableScroll: false,
|
|
title: {
|
|
name: ''
|
|
},
|
|
subtitle: {
|
|
name: "",
|
|
},
|
|
legend: {
|
|
show: true,
|
|
position: "right",
|
|
lineHeight: 25
|
|
},
|
|
extra: {
|
|
ring: {
|
|
ringWidth: 30,
|
|
activeOpacity: 0.5,
|
|
activeRadius: 10,
|
|
offsetAngle: 0,
|
|
labelWidth: 15,
|
|
border: true,
|
|
borderWidth: 3,
|
|
borderColor: "#FFFFFF",
|
|
linearType: "custom"
|
|
}
|
|
}
|
|
}
|
|
}, 500);
|
|
},
|
|
getAlarmStatisticsByWarning(){
|
|
getAlarmStatisticsByWarning().then(res => {
|
|
if (res.code === 200) {
|
|
this.classificationData = res.data
|
|
}
|
|
})
|
|
},
|
|
// 今日告警统计
|
|
getAlarmData() {
|
|
getAlarmData().then(res => {
|
|
if (res.code === 200) {
|
|
this.eventData = res.data
|
|
this.eventCount = this.eventData[0]
|
|
this.sonEvent = this.eventData.splice(1, this.eventData.length - 1)
|
|
}
|
|
})
|
|
},
|
|
//告警趋势
|
|
getAlarmTrendData() {
|
|
let _that = this;
|
|
getAlarmTrendData().then(res => {
|
|
if (res.code === 200) {
|
|
_that.showAlarmtrendLineChart(res.data)
|
|
} else {
|
|
let data = {
|
|
categories: ["08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00",
|
|
"15:00", "16:00", "17:00", "18:00", "19:00", "20:00"
|
|
],
|
|
series: [{
|
|
name: "目标值",
|
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
|
}]
|
|
};
|
|
_that.showAlarmtrendLineChart(data)
|
|
}
|
|
})
|
|
},
|
|
//告警趋势 折线图
|
|
showAlarmtrendLineChart(data) {
|
|
setTimeout(() => {
|
|
this.chartData = JSON.parse(JSON.stringify(data));
|
|
this.chartOpts = {
|
|
rotate: false,
|
|
rotateLock: false,
|
|
color: ["#1890FF", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
|
"#ea7ccc"
|
|
],
|
|
enableScroll: true,
|
|
xAxis: {
|
|
marginTop:5,
|
|
labelCount:5,
|
|
rotateLabel:false,
|
|
rotateAngle:15,
|
|
disableGrid: true,
|
|
boundaryGap: "justify",
|
|
itemCount: 6,
|
|
scrollShow: true
|
|
},
|
|
padding: [5, 20, 5, 20],
|
|
dataLabel: false,
|
|
enableScroll: false,
|
|
title: {
|
|
name: ''
|
|
},
|
|
subtitle: {
|
|
name: "",
|
|
},
|
|
legend: {
|
|
show: true,
|
|
position: "top",
|
|
lineHeight: 25
|
|
},
|
|
extra: {
|
|
ring: {
|
|
ringWidth: 30,
|
|
activeOpacity: 0.5,
|
|
activeRadius: 10,
|
|
offsetAngle: 0,
|
|
labelWidth: 15,
|
|
border: true,
|
|
borderWidth: 3,
|
|
borderColor: "#FFFFFF",
|
|
linearType: "custom"
|
|
}
|
|
}
|
|
}
|
|
}, 500)
|
|
},
|
|
//警情分类统计
|
|
getAlertCategoryData() {
|
|
getAlertCategoryData().then(res => {
|
|
if (res.code === 200) {
|
|
res.data.forEach(item => {
|
|
item.value = parseInt(item.value)
|
|
})
|
|
let data = {
|
|
series: [{
|
|
data: res.data
|
|
}]
|
|
};
|
|
this.showAlartWayRingChart(data)
|
|
}
|
|
})
|
|
},
|
|
// 事件分类统计
|
|
getEventCategoryData() {
|
|
getEventCategoryData().then(res => {
|
|
if (res.code === 200) {
|
|
|
|
this.eventClassificationData = res.data
|
|
}
|
|
})
|
|
},
|
|
// 告警方式
|
|
getAlartWayData() {
|
|
let _that = this;
|
|
getAlartWayData().then(res => {
|
|
if (res.code === 200) {
|
|
console.log(res.data)
|
|
res.data.forEach(item => {
|
|
item.value = parseInt(item.value)
|
|
})
|
|
let data = {
|
|
series: [{
|
|
data: res.data
|
|
}]
|
|
};
|
|
_that.showAlartWayRingChart(data)
|
|
} else {
|
|
let data = {
|
|
series: [{
|
|
data: [{
|
|
"value": 0,
|
|
"name": "手机固话"
|
|
},
|
|
{
|
|
"value": 0,
|
|
"name": "网络电话"
|
|
},
|
|
{
|
|
"value": 0,
|
|
"name": "物联设备"
|
|
},
|
|
{
|
|
"value": 2,
|
|
"name": "业务系统"
|
|
},
|
|
{
|
|
"value": 0,
|
|
"name": "系统运维"
|
|
}
|
|
]
|
|
}]
|
|
};
|
|
_that.showAlartWayRingChart(data)
|
|
}
|
|
|
|
})
|
|
},
|
|
showAlartWayRingChart(data) {
|
|
setTimeout(() => {
|
|
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
|
|
|
this.chartDatas = JSON.parse(JSON.stringify(data));
|
|
this.chartOpt = {
|
|
rotate: false,
|
|
rotateLock: false,
|
|
color: ["#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
|
"#ea7ccc"
|
|
],
|
|
padding: [5, 5, 5, 5],
|
|
dataLabel: false,
|
|
enableScroll: false,
|
|
title: {
|
|
name: ''
|
|
},
|
|
subtitle: {
|
|
name: "",
|
|
},
|
|
legend: {
|
|
show: true,
|
|
position: "right",
|
|
lineHeight: 25
|
|
},
|
|
extra: {
|
|
ring: {
|
|
ringWidth: 30,
|
|
activeOpacity: 0.5,
|
|
activeRadius: 10,
|
|
offsetAngle: 0,
|
|
labelWidth: 15,
|
|
border: true,
|
|
borderWidth: 3,
|
|
borderColor: "#FFFFFF",
|
|
linearType: "custom"
|
|
}
|
|
}
|
|
}
|
|
}, 500);
|
|
},
|
|
clickBannerItem(item) {
|
|
console.info(item);
|
|
},
|
|
changeSwiper(e) {
|
|
this.current = e.detail.current;
|
|
},
|
|
toSchedulingDetail(val){
|
|
uni.navigateTo({
|
|
url:'/subPackWork/commandDispatch/commandDispatch?id='+val
|
|
})
|
|
},
|
|
changeGrid(e) {
|
|
console.log(e)
|
|
switch (e.detail.index) {
|
|
case 0:
|
|
console.log("loin in it")
|
|
//资源统计
|
|
uni.navigateTo({
|
|
url: '/subPackWork/commandDispatch/commandDispatch'
|
|
});
|
|
break;
|
|
case 1:
|
|
uni.navigateTo({
|
|
url: '/subPackWork/emergencyPlan/emergencyPlan'
|
|
});
|
|
break;
|
|
case 2:
|
|
uni.navigateTo({
|
|
url: '/subPackWork/emergencyResources/emergencyResources'
|
|
});
|
|
break;
|
|
case 3:
|
|
uni.navigateTo({
|
|
url: '/subPackWork/attendant/attendant'
|
|
});
|
|
break;
|
|
case 4:
|
|
uni.navigateTo({
|
|
url: '/subPackWork/electronicPatrol/electronicPatrol'
|
|
});
|
|
break;
|
|
case 5:
|
|
uni.navigateTo({
|
|
url: '/subPackWork/scenicAreaManagement/scenicAreaManagement'
|
|
});
|
|
break;
|
|
case 6:
|
|
uni.navigateTo({
|
|
url: '/subPackWork/scenicSpot/scenicSpot'
|
|
});
|
|
break;
|
|
case 7:
|
|
uni.navigateTo({
|
|
url: '/subPackWork/classifiedManagement/classifiedManagement'
|
|
});
|
|
break;
|
|
case 8:
|
|
uni.navigateTo({
|
|
url: '/subPackWork/video/video'
|
|
});
|
|
break;
|
|
case 9:
|
|
uni.navigateTo({
|
|
url: '/subPackWork/equipmentManagement/equipmentManagement'
|
|
})
|
|
break;
|
|
default:
|
|
this.$modal.showToast('模块建设中~');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
//顶部开始
|
|
.xl {
|
|
display: block;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
|
|
.g-head {
|
|
height: 220rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: rgb(54, 127, 255);
|
|
|
|
.align-center {
|
|
margin: 0 auto;
|
|
width: 85%;
|
|
display: flex;
|
|
}
|
|
|
|
.user-info {
|
|
margin-left: 20rpx;
|
|
|
|
.u_title,
|
|
.weather {
|
|
color: rgb(238, 238, 238);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
//顶部结束
|
|
|
|
//中间开始
|
|
.g-body {
|
|
background-color: rgb(246, 250, 255);
|
|
|
|
.body-item {
|
|
background-color: rgb(255, 255, 255);
|
|
margin-top: 20rpx;
|
|
padding-bottom: 20rpx;
|
|
|
|
.big-button {
|
|
width: 330rpx;
|
|
height: 122rpx;
|
|
border-radius: 20rpx;
|
|
background: rgb(255, 255, 255);
|
|
//background: linear-gradient(180deg, rgba(242,150,91,0.1) 0%, rgba(242,150,91,0.2) 50%, rgba(242,150,91,0.1) 100%);
|
|
position: relative;
|
|
top: -36rpx;
|
|
z-index: 9;
|
|
padding-bottom: 0;
|
|
.big-button-img{position: absolute;bottom:0;right: 0;z-index: 9;width: 140rpx; height: 140rpx;}
|
|
.big-button-inner {
|
|
position: relative;
|
|
width: 100;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.button-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-left:30rpx ;
|
|
justify-content: center;
|
|
width: 100%;
|
|
|
|
.big-font {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.small-font {
|
|
position: relative;
|
|
z-index: 99;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.charts-box {
|
|
width: 100%;
|
|
height: 250rpx;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
background: rgb(255, 255, 255);
|
|
margin-top: 0;
|
|
|
|
|
|
.left-big-button {
|
|
border: 2rpx solid rgba(242, 150, 91, 0.9);
|
|
|
|
.big-button-inner {
|
|
background: linear-gradient(90deg, rgba(242, 150, 91, 0.01) 0%, rgba(242, 150, 91, 0.2) 30%, rgba(242, 150, 91, 0.01) 100%);
|
|
|
|
.font-underline {
|
|
height: 10rpx;
|
|
width: 55%;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 5rpx;
|
|
background: linear-gradient(90deg, rgba(242, 150, 91, 0.9) 0%, rgba(242, 150, 91, 0.1) 100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-big-button {
|
|
border: 2rpx solid rgba(113, 169, 245, 0.9);
|
|
|
|
.big-button-inner {
|
|
background: linear-gradient(90deg, rgba(54, 127, 255, 0.01) 0%, rgba(54, 127, 255, 0.2) 30%, rgba(54, 127, 255, 0.01) 100%);
|
|
|
|
.font-underline {
|
|
height: 10rpx;
|
|
width: 55%;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 5rpx;
|
|
background: linear-gradient(90deg, rgba(54, 127, 255, 0.9) 0%, rgba(54, 127, 255, 0.1) 100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.event-count {
|
|
margin-left: 20rpx;
|
|
margin-right: 20rpx;
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
}
|
|
|
|
//中间结束
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* #ifndef APP-NVUE */
|
|
page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
min-height: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
view {
|
|
font-size: 14px;
|
|
line-height: inherit;
|
|
}
|
|
|
|
/* #endif */
|
|
|
|
.text {
|
|
text-align: center;
|
|
font-size: 26 rpx;
|
|
margin-top: 10 rpx;
|
|
}
|
|
|
|
.grid-item-box {
|
|
flex: 1;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 15px 0;
|
|
|
|
.item-img {
|
|
width: 75rpx;
|
|
height: 75rpx;
|
|
}
|
|
}
|
|
|
|
.uni-margin-wrap {
|
|
width: 690 rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.swiper {
|
|
height: 300 rpx;
|
|
}
|
|
|
|
.swiper-box {
|
|
height: 150px;
|
|
}
|
|
|
|
.swiper-item {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
height: 300 rpx;
|
|
line-height: 300 rpx;
|
|
}
|
|
|
|
@media screen and (min-width: 500px) {
|
|
.uni-swiper-dot-box {
|
|
width: 400px;
|
|
/* #ifndef APP-NVUE */
|
|
margin: 0 auto;
|
|
/* #endif */
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.image {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|