parent
55ae673aed
commit
c1e5623908
20 changed files with 1191 additions and 127 deletions
@ -0,0 +1,187 @@ |
||||
<template> |
||||
<view class="page-css"> |
||||
<view class=""> |
||||
<view class="banner-swiper" v-if="swiperList.length > 0"> |
||||
<view class="logo-txt">科研医疗建筑运维平台</view> |
||||
<u-swiper height="444" :list="swiperList" mode="none"></u-swiper> |
||||
</view> |
||||
<view class="work-title">工作台</view> |
||||
<view class="workbench"> |
||||
<view v-for="(item, index) in workList" :key="index" class="workbench-slider"> |
||||
<view class="workbench-item" @click="goPage(item)"> |
||||
<view class="workbench-item-icon"> |
||||
<image :src="item.img" mode="aspectFit" /> |
||||
</view> |
||||
<u-badge class="badge" type="error" :count="item.num" :offset="[0, 0]"></u-badge> |
||||
</view> |
||||
<view class="workbench-name">{{ item.name }}</view> |
||||
</view> |
||||
</view> |
||||
<view class="work-title">实验室巡检</view> |
||||
<view> |
||||
<swiperSlider></swiperSlider> |
||||
</view> |
||||
<view class="work-title">设备报警</view> |
||||
<view> |
||||
<alarm></alarm> |
||||
</view> |
||||
<view class="work-title">维修统计</view> |
||||
<view class="statistics"> |
||||
<eacharts :type="'maintenanceStatistics'"></eacharts> |
||||
<eacharts :type="'maintenanceStatisticsPie'"></eacharts> |
||||
</view> |
||||
</view> |
||||
<betone-tabbar ref="tabbarRef" /> |
||||
<betone-loading ref="BetLoading"></betone-loading> |
||||
<u-modal v-model="show" :content="content" ></u-modal> |
||||
|
||||
</view> |
||||
</template> |
||||
<script> |
||||
import swiperSlider from "./components/swiper.vue"; |
||||
import alarm from "./components/alarm.vue"; |
||||
import eacharts from "./components/eacharts.vue"; |
||||
export default { |
||||
components: { |
||||
swiperSlider, |
||||
alarm, |
||||
eacharts, |
||||
}, |
||||
data() { |
||||
return { |
||||
show:true, |
||||
content:'账号审核中！', |
||||
swiperList: [require("@/static/images/home/lab.png")], |
||||
workList: [ |
||||
{ |
||||
name: "实验室巡检", |
||||
img: require("@/static/images/home/lab_xj.png"), |
||||
num: 10, |
||||
pagePath: '' |
||||
}, |
||||
{ |
||||
name: "报送记录", |
||||
img: require("@/static/images/home/bs_jl.png"), |
||||
num: 0, |
||||
pagePath: '' |
||||
}, |
||||
{ |
||||
name: "设备报警", |
||||
img: require("@/static/images/home/alarm.png"), |
||||
num: 2, |
||||
pagePath: '' |
||||
}, |
||||
{ |
||||
name: "其他", |
||||
img: require("@/static/images/home/full.png"), |
||||
num: 0, |
||||
pagePath: '' |
||||
}, |
||||
], |
||||
}; |
||||
}, |
||||
onShow() { |
||||
this.$nextTick(() => { |
||||
this.$refs.tabbarRef.getPermission(); |
||||
this.$refs.BetLoading.show(); |
||||
setTimeout(() => { |
||||
this.$refs.BetLoading.hide(); |
||||
}, 1000); |
||||
}); |
||||
//工作台 |
||||
this.getworkbench(); |
||||
}, |
||||
methods: { |
||||
getworkbench() { |
||||
console.log(55); |
||||
// this.$u.api.getworkbench().then(res=>{ |
||||
|
||||
// }).catch(err=>{ |
||||
|
||||
// }) |
||||
}, |
||||
goPage(item){ |
||||
uni.navigateTo({ |
||||
url: item.pagePath, |
||||
}); |
||||
} |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.page-css { |
||||
width: 100%; |
||||
// min-height: 100%; |
||||
padding: 0; |
||||
background: rgba(239, 239, 239, 1); |
||||
padding-top: var(--status-bar-height); |
||||
.banner-swiper { |
||||
margin-bottom: 64rpx; |
||||
position: relative; |
||||
|
||||
.logo-txt { |
||||
color: rgba(255, 255, 255, 1); |
||||
font-size: 36rpx; |
||||
position: absolute; |
||||
top: 40rpx; |
||||
left: 20rpx; |
||||
z-index: 10; |
||||
} |
||||
} |
||||
|
||||
.work-title { |
||||
color: rgba(16, 16, 16, 1); |
||||
font-size: 32rpx; |
||||
padding: 0 0 32rpx 36rpx; |
||||
} |
||||
|
||||
.workbench { |
||||
height: 210rpx; |
||||
position: relative; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
margin: 0 40rpx 32rpx; |
||||
|
||||
.workbench-item { |
||||
width: 160rpx; |
||||
height: 148rpx; |
||||
background-color: rgba(58, 98, 215, 0.57); |
||||
border-radius: 8rpx; |
||||
position: relative; |
||||
|
||||
.workbench-item-icon { |
||||
width: 64rpx; |
||||
height: 64rpx; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
bottom: 0; |
||||
right: 0; |
||||
margin: auto; |
||||
|
||||
image { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.workbench-name { |
||||
width: 100%; |
||||
text-align: center; |
||||
font-size: 28rpx; |
||||
color: rgba(16, 16, 16, 1); |
||||
margin-top: 16rpx; |
||||
} |
||||
|
||||
.badge { |
||||
// background-color: blue; |
||||
// color: white; |
||||
} |
||||
} |
||||
|
||||
.statistics_pie { |
||||
width: 100%; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,142 @@ |
||||
<template> |
||||
<view> |
||||
<view v-for="(item, index) in list" :key="index" class="alarm-box"> |
||||
<view class="alarm-left" :style="{ borderColor: item.color }"> |
||||
<i>{{ item.alarmName }}</i> |
||||
<i>{{ item.levelNanme }}</i> |
||||
</view> |
||||
<view class="alarm-center"> |
||||
<text>{{ item.deviceName }}</text> |
||||
<text>品牌:{{ item.brand }}</text> |
||||
<text>型号:{{ item.model }}</text> |
||||
<text>报警时间:{{ item.alarmTime }}</text> |
||||
<view class="alarm-center-btn">一键报送</view> |
||||
</view> |
||||
<view class="alarm-right"></view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
colorList: { |
||||
特别严重: "rgba(189,49,36,1)", |
||||
严重: "rgba(233,157,66,1)", |
||||
}, |
||||
list: [], |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.deviceList() |
||||
}, |
||||
methods: { |
||||
deviceList() { |
||||
// this.$u.api.deviceList().then(res => { |
||||
// if (res.code == 200) { |
||||
let data_ = [ |
||||
{ |
||||
"alarmTime": "2024-11-15", |
||||
"alarmLevel": 1, |
||||
"model": "GDXH-12582", |
||||
"deviceName": "2024-11-11", |
||||
"brand": "品牌A" |
||||
}, |
||||
{ |
||||
"alarmTime": "2024-11-08", |
||||
"alarmLevel": 2, |
||||
"model": "GDXH-88542", |
||||
"deviceName": "2024-11-11", |
||||
"brand": "品牌B" |
||||
} |
||||
] |
||||
data_.forEach(v => { |
||||
if (v.alarmLevel == 1) { |
||||
v.alarmName = '一级' |
||||
v.levelNanme = '超级严重' |
||||
|
||||
} |
||||
if (v.alarmLevel == 2) { |
||||
v.alarmName = '二级' |
||||
v.levelNanme = '严重' |
||||
} |
||||
v.color = this.colorList[v.levelNanme] |
||||
}); |
||||
this.list = data_ |
||||
// } |
||||
// }) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.alarm-box { |
||||
margin: 0 40rpx 32rpx; |
||||
background-color: #ffffff; |
||||
border-radius: 20rpx; |
||||
display: flex; |
||||
flex-direction: row; |
||||
|
||||
.alarm-left { |
||||
width: 160rpx; |
||||
height: 160rpx; |
||||
text-align: center; |
||||
border: 16rpx solid rgba(189, 49, 36, 1); |
||||
border-radius: 50%; |
||||
margin: 36rpx 36rpx 36rpx 48rpx; |
||||
|
||||
i { |
||||
display: block; |
||||
text-align: center; |
||||
|
||||
&:nth-child(1) { |
||||
color: rgba(16, 16, 16, 1); |
||||
font-size: 28rpx; |
||||
padding-top: 30rpx; |
||||
} |
||||
|
||||
&:nth-child(2) { |
||||
color: rgba(190, 190, 190, 1); |
||||
font-size: 26rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.alarm-center { |
||||
flex: 1; |
||||
color: rgba(154, 154, 154, 1); |
||||
font-size: 24rpx; |
||||
position: relative; |
||||
|
||||
text { |
||||
display: block; |
||||
line-height: 40rpx; |
||||
font-size: 24rpx; |
||||
|
||||
&:nth-child(1) { |
||||
color: rgba(0, 0, 0, 1); |
||||
font-size: 28rpx; |
||||
padding: 28rpx 0 8rpx 0; |
||||
} |
||||
|
||||
&:nth-child(2) {} |
||||
} |
||||
|
||||
.alarm-center-btn { |
||||
width: 160rpx; |
||||
height: 60rpx; |
||||
line-height: 40rpx; |
||||
border-radius: 8rpx; |
||||
background-color: rgba(58, 98, 215, 0.16); |
||||
color: rgba(58, 98, 215, 1); |
||||
font-size: 28rpx; |
||||
line-height: 60rpx; |
||||
text-align: center; |
||||
position: absolute; |
||||
top: 28rpx; |
||||
right: 40rpx; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,366 @@ |
||||
<template> |
||||
<view class="eacharts-box"> |
||||
<view class="eacharts-time"> |
||||
<!-- <u-form :model="form" ref="uForm"> |
||||
<u-form-item label="选择时间:" label-width="140" :border-bottom="false"> |
||||
<u-input v-model="form.searchTime" type="select" @click="calendarShow = true" :border="true" |
||||
placeholder="请选择时间" /> |
||||
</u-form-item> |
||||
</u-form> --> |
||||
<u-calendar v-model="calendarShow" :mode="mode" @change="change"></u-calendar> |
||||
</view> |
||||
<!-- eacharts 图表 --> |
||||
<view class="echarts" v-if="type == 'maintenanceStatistics'"> |
||||
<l-echart ref="chartRef" :key="Math.random()"></l-echart> |
||||
</view> |
||||
|
||||
<!-- 饼状图 --> |
||||
<view class="echartsPie" v-if="type == 'maintenanceStatisticsPie'"> |
||||
<view class="pie-item"> |
||||
<view style="height:308rpx"><l-echart ref="chartRefPieLeft" :key="Math.random()"></l-echart></view> |
||||
<text class="pie-title">故障现象分类</text> |
||||
</view> |
||||
<view class="pie-item"> |
||||
<view style="height:308rpx"><l-echart ref="chartRefPieRight" :key="Math.random()"></l-echart></view> |
||||
<text class="pie-title">设备分类</text> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</template> |
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
import lEchart from "@/uni_modules/lime-echart/components/lime-echart/"; |
||||
export default { |
||||
components: { lEchart }, |
||||
props: { |
||||
type: { |
||||
type: String, |
||||
default: "", |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
form: { |
||||
searchTime: "", |
||||
startTime: "", |
||||
endTime: "", |
||||
}, |
||||
calendarShow: false, |
||||
mode: "range", |
||||
upkeepStatInfo: {}, |
||||
pieInfo: {},//饼图数据 |
||||
}; |
||||
}, |
||||
mounted() { |
||||
|
||||
// 维修统计 |
||||
if (this.type == "maintenanceStatistics") { |
||||
this.upkeepStat() |
||||
|
||||
|
||||
} |
||||
if (this.type == "maintenanceStatisticsPie") { |
||||
this.pieStat() |
||||
|
||||
} |
||||
}, |
||||
methods: { |
||||
// 维修统计 |
||||
upkeepStat() { |
||||
let query_ = { |
||||
startTime: this.form.startTime, |
||||
endTime: this.form.endTime, |
||||
} |
||||
// this.$u.api.upkeepStat(query_).then(res => { |
||||
// if (res.code == 200) { |
||||
this.upkeepStatInfo = { |
||||
"total": [ |
||||
10, |
||||
20 |
||||
], |
||||
"unCompleted": [ |
||||
7, |
||||
8 |
||||
], |
||||
"xData": [ |
||||
"报送维修", |
||||
"巡检维修" |
||||
], |
||||
"completed": [ |
||||
3, |
||||
12 |
||||
] |
||||
} |
||||
this.maintenanceInit(); |
||||
// } |
||||
// }) |
||||
}, |
||||
// 饼图数据 |
||||
pieStat() { |
||||
let query_ = { |
||||
startTime: this.form.startTime, |
||||
endTime: this.form.endTime, |
||||
} |
||||
// this.$u.api.pieStat(query_).then(res => { |
||||
// if (res.code == 200) { |
||||
this.pieInfo = {"fault": [ |
||||
{ |
||||
"name": "电气", |
||||
"value": 300 |
||||
}, |
||||
{ |
||||
"name": "空调", |
||||
"value": 248 |
||||
}, |
||||
{ |
||||
"name": "装修类", |
||||
"value": 135 |
||||
}, |
||||
{ |
||||
"name": "智能设备", |
||||
"value": 180 |
||||
}, |
||||
{ |
||||
"name": "暖通、自控", |
||||
"value": 654 |
||||
} |
||||
], |
||||
"device": [ |
||||
{ |
||||
"name": "设备1", |
||||
"value": 580 |
||||
}, |
||||
{ |
||||
"name": "空调", |
||||
"value": 1048 |
||||
}, |
||||
{ |
||||
"name": "通风柜", |
||||
"value": 735 |
||||
} |
||||
]} |
||||
this.maintenancePieLeftInit(); |
||||
this.maintenancePieRightInit(); |
||||
// } |
||||
// }) |
||||
}, |
||||
selectFun() { |
||||
this.calendarShow = true; |
||||
}, |
||||
change(e) { |
||||
this.form.startTime = e.startDate; |
||||
this.form.endTime = e.endDate; |
||||
this.form.searchTime = e.startDate + "-" + e.endDate; |
||||
if (this.type == "maintenanceStatistics") { |
||||
this.upkeepStat() |
||||
} |
||||
if (this.type == "maintenanceStatisticsPie") { |
||||
this.pieStat() |
||||
} |
||||
|
||||
// 查询数据 |
||||
}, |
||||
// 维修统计柱状图 |
||||
maintenanceInit() { |
||||
let opts = { |
||||
tooltip: {}, |
||||
legend: { |
||||
//图例组件 |
||||
data: ["总计", "已完成", "未完成"], |
||||
}, |
||||
xAxis: { |
||||
data: this.upkeepStatInfo.xData, |
||||
}, |
||||
grid: { |
||||
top: "15%", |
||||
left: "10%", |
||||
right: "5%", |
||||
bottom: "15%", |
||||
}, |
||||
yAxis: {}, |
||||
series: [ |
||||
{ |
||||
name: "总计", |
||||
type: "bar", |
||||
data: this.upkeepStatInfo.total, |
||||
barWidth: 30, // 设置柱子宽度 |
||||
barGap: "0", // 设置不同系列之间的间隔为0 |
||||
itemStyle: { |
||||
color: "#2478f2", |
||||
}, |
||||
}, |
||||
{ |
||||
name: "已完成", |
||||
type: "bar", |
||||
data: this.upkeepStatInfo.completed, |
||||
barWidth: 30, // 设置柱子宽度 |
||||
barGap: "0", // 设置不同系列之间的间隔为0 |
||||
itemStyle: { |
||||
color: "#84b7f9", |
||||
}, |
||||
}, |
||||
{ |
||||
name: "未完成", |
||||
type: "bar", |
||||
data: this.upkeepStatInfo.unCompleted, |
||||
barWidth: 30, // 设置柱子宽度 |
||||
barGap: "0", // 设置不同系列之间的间隔为0 |
||||
itemStyle: { |
||||
color: "#5f9cf8", |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
this.$refs.chartRef.init((config) => { |
||||
const { canvas } = config; |
||||
const chart = echarts.init(canvas, null, config); |
||||
chart.setOption(opts); |
||||
// 需要把 chart 返回 |
||||
return chart; |
||||
}); |
||||
}, |
||||
// 故障现象分类 |
||||
maintenancePieLeftInit() { |
||||
let opts = { |
||||
series: [ |
||||
{ |
||||
name: "", |
||||
type: "pie", |
||||
radius: ['40%', '70%'], |
||||
label: { |
||||
// 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等. |
||||
normal: { |
||||
show: true, |
||||
fontSize: 8, // 是否显示标签[ default: false ] |
||||
position: "outside", // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。 |
||||
formatter: "{b}\n {c}", // 标签内容 |
||||
color: '#000' |
||||
}, |
||||
}, |
||||
|
||||
data: this.pieInfo.fault, |
||||
emphasis: { |
||||
itemStyle: { |
||||
shadowBlur: 10, |
||||
shadowOffsetX: 0, |
||||
shadowColor: "rgba(0, 0, 0, 1)", |
||||
}, |
||||
}, |
||||
labelLine: { |
||||
// 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。 |
||||
normal: { |
||||
show: true, // 是否显示视觉引导线。 |
||||
length: 5, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。 |
||||
length2: 5, |
||||
|
||||
// 视觉引导项第二段的长度。 |
||||
lineStyle: { |
||||
// 视觉引导线的样式 |
||||
type: "solid", |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
this.$refs.chartRefPieLeft.init((config) => { |
||||
const { canvas } = config; |
||||
const chart = echarts.init(canvas, null, config); |
||||
chart.setOption(opts); |
||||
// 需要把 chart 返回 |
||||
return chart; |
||||
}); |
||||
}, |
||||
maintenancePieRightInit() { |
||||
let opts = { |
||||
series: [ |
||||
{ |
||||
type: "pie", |
||||
radius: ['40%', '70%'], |
||||
label: { |
||||
// 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等. |
||||
normal: { |
||||
show: true, |
||||
fontSize: 8, // 是否显示标签[ default: false ] |
||||
position: "outside", // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。 |
||||
formatter: "{b}\n {c}", // 标签内容 |
||||
color: '#000' |
||||
}, |
||||
}, |
||||
data: this.pieInfo.device, |
||||
labelLine: { |
||||
// 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。 |
||||
normal: { |
||||
show: true, // 是否显示视觉引导线。 |
||||
length: 5, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。 |
||||
length2: 5, |
||||
// 视觉引导项第二段的长度。 |
||||
lineStyle: { |
||||
// 视觉引导线的样式 |
||||
type: "solid", |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
this.$refs.chartRefPieRight.init((config) => { |
||||
const { canvas } = config; |
||||
const chart = echarts.init(canvas, null, config); |
||||
chart.setOption(opts); |
||||
// 需要把 chart 返回 |
||||
return chart; |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.eacharts-box { |
||||
background: #fff; |
||||
margin: 0 40rpx 32rpx; |
||||
border-radius: 20rpx; |
||||
overflow: hidden; |
||||
|
||||
.eacharts-time { |
||||
margin: 0 136rpx 0 24rpx; |
||||
display: flex; |
||||
flex-direction: row; |
||||
|
||||
text { |
||||
line-height: 60rpx; |
||||
color: rgba(16, 16, 16, 1); |
||||
font-size: 28rpx; |
||||
margin-top: 30rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
} |
||||
|
||||
.echarts { |
||||
width: calc(100% - 64rpx); |
||||
height: 308rpx; |
||||
margin: 0 auto 20rpx; |
||||
} |
||||
|
||||
.echartsPie { |
||||
width: calc(100% - 64rpx); |
||||
min-height: 308rpx; |
||||
margin: 0 auto 0; |
||||
|
||||
.pie-item { |
||||
width: 100%; |
||||
height: 368rpx; |
||||
// float: left; |
||||
} |
||||
} |
||||
|
||||
.pie-title { |
||||
height: 30rpx; |
||||
text-align: center; |
||||
display: block; |
||||
color: rgba(16, 16, 16, 1); |
||||
font-size: 28rpx; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,130 @@ |
||||
<template> |
||||
<view class="notice_bg"> |
||||
<view class="line"></view> |
||||
<swiper autoplay="true" display-multiple-items="1" vertical="true" circular interval="7000" class="bar-swiper"> |
||||
<swiper-item v-for="(item, index) in list" :key="index" class="swiper-item"> |
||||
<view class="title">{{ item.inspectionName }}</view> |
||||
<view class="time">巡检计划时间:{{ item.inspectionTime }}</view> |
||||
<view class="name">巡检人:{{ item.inspectionPerson }}</view> |
||||
<view class="status"> |
||||
<i class="status-name">{{ item.isStart == 1 ? '已开始' : '未开始' }}</i><i>预约时间：{{ item.appointTime }}</i> |
||||
</view> |
||||
<view class="type">{{ item.taskType == 1 ? '周期任务' : '单次任务' }}</view> |
||||
</swiper-item> |
||||
</swiper> |
||||
</view> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
list: [ |
||||
{ |
||||
"inspectionPerson": "张三", |
||||
"taskType": "1", |
||||
"appointTime": "2024-11-15", |
||||
"inspectionTime": "2024-11-11", |
||||
"inspectionName": "水系统检查", |
||||
"isStart": "0" |
||||
}, |
||||
{ |
||||
"inspectionPerson": "李四", |
||||
"taskType": "2", |
||||
"appointTime": "2024-11-15", |
||||
"inspectionTime": "2024-11-11", |
||||
"inspectionName": "设备检查", |
||||
"isStart": "1" |
||||
} |
||||
], |
||||
}; |
||||
}, |
||||
mounted() { |
||||
}, |
||||
methods: { |
||||
// 点击通告栏 |
||||
click(id) { |
||||
// console.log(id, "======>id"); |
||||
}, |
||||
workList() { |
||||
this.$u.api.workList().then(res => { |
||||
if (res.code == 200) { |
||||
this.list = res.data |
||||
} |
||||
|
||||
}) |
||||
} |
||||
}, |
||||
}; |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
.notice_bg { |
||||
margin: 0 40rpx 32rpx; |
||||
background-color: #ffffff; |
||||
border-radius: 20rpx; |
||||
padding: 16rpx 20rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
|
||||
.icon { |
||||
width: 74rpx; |
||||
height: 72rpx; |
||||
} |
||||
|
||||
.bar-swiper { |
||||
font-size: 24rpx; |
||||
font-family: PingFangSC-Regular, PingFang SC; |
||||
font-weight: 400; |
||||
color: rgba(34, 34, 34, 0.5); |
||||
height: 260rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
flex: 1; |
||||
margin-left: 12rpx; |
||||
} |
||||
|
||||
.swiper-item { |
||||
overflow: hidden; |
||||
} |
||||
|
||||
// 内容样式 |
||||
.title { |
||||
font-size: 32rpx; |
||||
color: rgba(16, 16, 16, 1); |
||||
text-align: left; |
||||
margin-top: 22rpx; |
||||
line-height: 38rpx; |
||||
} |
||||
|
||||
.time { |
||||
margin-top: 20rpx; |
||||
margin-bottom: 28rpx; |
||||
} |
||||
|
||||
.time, |
||||
.name { |
||||
font-size: 26rpx; |
||||
color: rgba(108, 108, 108, 1); |
||||
line-height: 38rpx; |
||||
} |
||||
|
||||
.status { |
||||
font-size: 26rpx; |
||||
line-height: 38rpx; |
||||
margin-top: 20rpx; |
||||
|
||||
.status-name { |
||||
color: rgba(58, 98, 215, 1); |
||||
padding-right: 10rpx; |
||||
} |
||||
} |
||||
|
||||
.type { |
||||
position: absolute; |
||||
top: 20rpx; |
||||
right: 20rpx; |
||||
color: rgba(58, 98, 215, 1); |
||||
font-size: 26rpx; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue