You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
825 lines
21 KiB
Vue
825 lines
21 KiB
Vue
<template>
|
|
<v-scale-screen width="1920" height="1080" :fullScreen="false">
|
|
<div class="app-container home" style="">
|
|
<div class="head">
|
|
<div class="head-content">
|
|
<div class="title">烘房状态监控看板</div>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="itemtop">
|
|
<div class="left">
|
|
<!-- <div class="box">
|
|
<div class="name name1">烘房运行数量:</div>
|
|
<div class="number">
|
|
<div class="number1">00</div>
|
|
</div>
|
|
<div class="unit">台</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="name">烘房自动模式数量:</div>
|
|
<div class="number">
|
|
<div class="number1">00</div>
|
|
</div>
|
|
<div class="unit">台</div>
|
|
</div> -->
|
|
<div class="box" :key="item.title" v-for="item in digitalFlopData">
|
|
<div class="name">{{ item.title }}:</div>
|
|
<div class="number">
|
|
<div class="number1">{{ item.number.number }}</div>
|
|
</div>
|
|
<div class="unit">{{ item.unit }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="itembottom">
|
|
<div class="left">
|
|
<div id="cards">
|
|
<div
|
|
class="card-item fleft clearfix"
|
|
v-for="(card, index) in dataPropdata"
|
|
:key="index"
|
|
:class="[[index + 1] % 7 == 0 ? 'isactive' : 'active1']"
|
|
>
|
|
<div class="card-header">
|
|
<span class="card-header-left">烘房{{ card.i }}</span>
|
|
</div>
|
|
<div class="card-box"></div>
|
|
<div class="card-footer">
|
|
<div class="card-footer-item">
|
|
<div class="footer-detail">
|
|
<span
|
|
:style="{
|
|
fontSize: '22px',
|
|
fontWeight: 'bold',
|
|
color: '#FDA45D',
|
|
textAlign: 'right',
|
|
}"
|
|
>
|
|
{{ getTagModel(card.status) }}
|
|
</span>
|
|
</div>
|
|
<div class="footer-title">烘房模式</div>
|
|
</div>
|
|
<div class="card-footer-item">
|
|
<div class="footer-detail">
|
|
<span
|
|
:style="{
|
|
fontSize: '22px',
|
|
fontWeight: 'bold',
|
|
color: '#93FE66',
|
|
textAlign: 'right',
|
|
}"
|
|
>
|
|
{{ getTagText(card.dollyNumber) }}
|
|
</span>
|
|
</div>
|
|
<div class="footer-title">门前数量</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="card-footer-item">
|
|
<div class="footer-detail">
|
|
<span
|
|
style="
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #fda45d;
|
|
text-align: right;
|
|
"
|
|
>{{ card.temperature }}
|
|
<span
|
|
style="
|
|
font-weight: normal;
|
|
font-size: 18px;
|
|
color: #ffffff;
|
|
"
|
|
>℃</span
|
|
></span
|
|
>
|
|
</div>
|
|
<div class="footer-title">烘房温度</div>
|
|
</div>
|
|
<div class="card-footer-item">
|
|
<div class="footer-detail">
|
|
<span
|
|
style="
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #93fe66;
|
|
text-align: right;
|
|
"
|
|
>{{ card.waitmin
|
|
}}<span
|
|
style="
|
|
font-weight: normal;
|
|
font-size: 18px;
|
|
color: #ffffff;
|
|
"
|
|
>min</span
|
|
></span
|
|
>
|
|
</div>
|
|
<div class="footer-title">保持时长</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="item"></div> -->
|
|
<!-- <div class="item"></div> -->
|
|
</div>
|
|
</v-scale-screen>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
dryRoomDataCarousel,
|
|
getDryingRoomList,
|
|
} from "@/api/kanban/dryingroom";
|
|
import * as echarts from "echarts";
|
|
import moment from "moment";
|
|
// import Echarts3D from "./echarts3d.vue";
|
|
// import Echarts3D2 from "./echarts3d2.vue";
|
|
export default {
|
|
name: "Index",
|
|
components: {},
|
|
data() {
|
|
return {
|
|
gettimedata: "",
|
|
selectxt: null,
|
|
selectxtclasses: null,
|
|
getLineList: [],
|
|
classesList: [],
|
|
number1: 0,
|
|
number2: 0,
|
|
number3: 0,
|
|
number4: 0,
|
|
nameList: [
|
|
"成型机一",
|
|
"成型机二",
|
|
"成型机三",
|
|
"成型机四",
|
|
"成型机五",
|
|
"成型机六",
|
|
"成型机五",
|
|
"成型机六",
|
|
],
|
|
valueList: [1639, 1422, 1306, 1131, 1040, 732, 1040, 732],
|
|
optionDatalist1: [],
|
|
optionDatalist2: [],
|
|
optionDatalist3: [],
|
|
optionDatalist4: [],
|
|
colorlist: ["#005aff", "#f8b551"],
|
|
datetime: null,
|
|
time1: null,
|
|
time2: null,
|
|
getlist: [],
|
|
repairlist: [],
|
|
equipmentlist: [],
|
|
equipmentrepairlist: [],
|
|
equipmentstabilizelist: [],
|
|
equipmentinfo: [],
|
|
RefreshTime: null,
|
|
dictlist: [],
|
|
StartArray: [],
|
|
dataPropceshidata: [],
|
|
dataPropdata: [],
|
|
cards: {
|
|
data1: [],
|
|
data2: [],
|
|
},
|
|
cardss: [],
|
|
digitalFlopData: [],
|
|
dryingRoomList: [],
|
|
cxjZCNumber: 0,
|
|
};
|
|
},
|
|
created() {},
|
|
destroyed() {
|
|
clearInterval(this.time1);
|
|
this.time1 = null;
|
|
clearInterval(this.time2);
|
|
this.time2 = null;
|
|
},
|
|
mounted() {
|
|
// this.datetime = moment().subtract(2, "day").format("yyyy-MM-DD");
|
|
//console.log('zhuanhuahou',this.dateRangeone)
|
|
const { createData } = this;
|
|
createData();
|
|
this.createData1();
|
|
this.time2 = setInterval(() => {
|
|
this.createData1();
|
|
}, 5000);
|
|
this.gettime();
|
|
},
|
|
methods: {
|
|
back() {
|
|
this.$router.push({ path: "/index" });
|
|
},
|
|
getTagText(value) {
|
|
// 根据值返回要显示的文字
|
|
if (value === "0") {
|
|
return "无车";
|
|
} else if (value === "1") {
|
|
return "有车";
|
|
}
|
|
},
|
|
|
|
getTextColor(value) {
|
|
if (value === "0") {
|
|
return "#26fcd8";
|
|
} else if (value === "1") {
|
|
return "#ea6027";
|
|
}
|
|
},
|
|
|
|
getTagModel(value) {
|
|
// 根据值返回要显示的文字
|
|
if (value === "0") {
|
|
return "手动";
|
|
} else if (value === "1") {
|
|
return "自动";
|
|
}
|
|
},
|
|
gettime() {
|
|
this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
|
|
this.time1 = setInterval(() => {
|
|
this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
|
|
}, 1000);
|
|
},
|
|
selectline() {
|
|
const _this = this;
|
|
this.optionDatalist1 = [];
|
|
this.optionDatalist2 = [];
|
|
this.optionDatalist3 = [];
|
|
this.optionDatalist4 = [];
|
|
},
|
|
createData() {
|
|
this.cards.data1 = new Array(8).fill(0).map((foo, i) => ({
|
|
i: i + 1,
|
|
}));
|
|
this.cards.data2 = new Array(8).fill(0).map((foo, i) => ({
|
|
i: i + 9,
|
|
}));
|
|
this.cards.data3 = new Array(5).fill(0).map((foo, i) => ({
|
|
i: i === 0 ? 17 : i === 1 ? 18 : i === 2 ? 61 : i === 3 ? 62 : 63,
|
|
}));
|
|
// console.log(this.cards.data1)
|
|
dryRoomDataCarousel({ factory: 999 }).then((response) => {
|
|
if (response.data) {
|
|
this.dataPropdata = response.data.dryingroomList;
|
|
// console.log(response);
|
|
this.cards.data1 = this.cards.data1.map((card) => {
|
|
const matchingIndex = response.data.dryingroomList.find(
|
|
(index) => index.i === card.i
|
|
);
|
|
if (matchingIndex) {
|
|
return {
|
|
...card,
|
|
title: "烘房" + matchingIndex.i,
|
|
model: matchingIndex.status,
|
|
dollyNumber: matchingIndex.dollyNumber,
|
|
waitmin: matchingIndex.waitmin,
|
|
temperature: matchingIndex.temperature,
|
|
};
|
|
} else {
|
|
return card;
|
|
}
|
|
});
|
|
this.cards.data2 = this.cards.data2.map((card) => {
|
|
const matchingIndex = response.data.dryingroomList.find(
|
|
(index) => index.i === card.i
|
|
);
|
|
if (matchingIndex) {
|
|
return {
|
|
...card,
|
|
title: "烘房" + matchingIndex.i,
|
|
model: matchingIndex.status,
|
|
dollyNumber: matchingIndex.dollyNumber,
|
|
waitmin: matchingIndex.waitmin,
|
|
temperature: matchingIndex.temperature,
|
|
};
|
|
} else {
|
|
return card;
|
|
}
|
|
});
|
|
this.cards.data3 = this.cards.data3.map((card) => {
|
|
const matchingIndex = response.data.dryingroomList.find(
|
|
(index) => index.i === card.i
|
|
);
|
|
if (matchingIndex) {
|
|
return {
|
|
...card,
|
|
title: "烘房" + matchingIndex.i,
|
|
model: matchingIndex.status,
|
|
dollyNumber: matchingIndex.dollyNumber,
|
|
waitmin: matchingIndex.waitmin,
|
|
temperature: matchingIndex.temperature,
|
|
};
|
|
} else {
|
|
return card;
|
|
}
|
|
});
|
|
this.cardss = this.cardss.map((card) => {
|
|
const matchingIndex = response.data.dryingroomList.find(
|
|
(index) => index.i === card.i
|
|
);
|
|
if (matchingIndex) {
|
|
return {
|
|
...card,
|
|
title: "烘房" + matchingIndex.i,
|
|
model: matchingIndex.status,
|
|
dollyNumber: matchingIndex.dollyNumber,
|
|
waitmin: matchingIndex.waitmin,
|
|
temperature: matchingIndex.temperature,
|
|
};
|
|
} else {
|
|
return card;
|
|
}
|
|
});
|
|
console.log(this.cardss, this.cards, "wwwwwwww", this.dataPropdata);
|
|
}
|
|
});
|
|
},
|
|
createData1() {
|
|
const that = this;
|
|
getDryingRoomList({
|
|
factory: 999,
|
|
}).then((response) => {
|
|
if (response.data) {
|
|
// console.log(response)
|
|
this.cxjZCNumber = response.data.cxzc;
|
|
this.cxjYCNumber = response.data.cxyc;
|
|
this.dryingRoomList = response.data.result;
|
|
this.digitalFlopData = [
|
|
{
|
|
title: "成型机运行",
|
|
number: {
|
|
number: this.cxjZCNumber,
|
|
content: "{nt}",
|
|
textAlign: "right",
|
|
style: {
|
|
fill: "#4d99fc",
|
|
fontWeight: "bold",
|
|
},
|
|
},
|
|
|
|
unit: "台",
|
|
},
|
|
{
|
|
title: "烘房运行(自动)",
|
|
number: {
|
|
number: response.data.hfauto,
|
|
content: "{nt}",
|
|
textAlign: "right",
|
|
style: {
|
|
fill: "#4d99fc",
|
|
fontWeight: "bold",
|
|
},
|
|
},
|
|
|
|
unit: "座",
|
|
},
|
|
{
|
|
title: "收坯机台运行",
|
|
number: {
|
|
number: response.data.spzc,
|
|
content: "{nt}",
|
|
textAlign: "right",
|
|
style: {
|
|
fill: "#4d99fc",
|
|
fontWeight: "bold",
|
|
},
|
|
},
|
|
unit: "台",
|
|
},
|
|
{
|
|
title: "成型缓存区数量",
|
|
number: {
|
|
number: response.data.hcnumber,
|
|
content: "{nt}",
|
|
textAlign: "right",
|
|
style: {
|
|
fill: "#4d99fc",
|
|
fontWeight: "bold",
|
|
},
|
|
},
|
|
unit: "个",
|
|
},
|
|
];
|
|
}
|
|
});
|
|
},
|
|
|
|
handleScroll(event) {
|
|
//请求烘房数据接口
|
|
this.createData();
|
|
// if (event==0){
|
|
// const that = this;
|
|
//
|
|
// }
|
|
// 获取滚动事件的相关信息
|
|
|
|
// console.log(scrollTop);
|
|
// 根据需要处理滚动事件的逻辑
|
|
// ...
|
|
},
|
|
//左侧第一个选择类型下拉框 回调函数
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
padding: 0px 24px;
|
|
}
|
|
|
|
.home {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: url("../../../assets/images/bg1.jpg") no-repeat;
|
|
background-size: 100% 100%;
|
|
background-color: #050711;
|
|
|
|
.head {
|
|
width: 100%;
|
|
height: 74px;
|
|
position: relative;
|
|
|
|
.head-content {
|
|
height: 74px;
|
|
background-image: url("../../../assets/images/bg-head.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
|
|
.title {
|
|
font-size: 42px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.head-logo {
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 1px;
|
|
|
|
img {
|
|
height: 38px;
|
|
// width: ;
|
|
}
|
|
}
|
|
|
|
.back {
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 5px;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
margin-top: 63px;
|
|
|
|
.itemtop {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.left {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
display: flex;
|
|
.box {
|
|
width: 437px;
|
|
height: 92px;
|
|
background: url("../../../assets/images/bg2.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 0px 21px 0px 25px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
.name {
|
|
min-width: 225px;
|
|
letter-spacing: 0px;
|
|
color: #ffffff;
|
|
font-size: 26px;
|
|
}
|
|
.name1 {
|
|
min-width: 220px;
|
|
letter-spacing: 25px;
|
|
}
|
|
.number {
|
|
min-width: 120px;
|
|
height: 50px;
|
|
border: 2px solid #274583;
|
|
border-radius: 5px;
|
|
padding: 1px;
|
|
box-sizing: border-box;
|
|
.number1 {
|
|
text-align: center;
|
|
height: 100%;
|
|
line-height: 43px;
|
|
color: #ffa95b;
|
|
border-radius: 7px;
|
|
font-size: 32px;
|
|
letter-spacing: 3px;
|
|
background-color: #294584;
|
|
}
|
|
}
|
|
.unit {
|
|
color: #b7b9c1;
|
|
margin-left: 20px;
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.itembottom {
|
|
margin-top: 19px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
.left {
|
|
// width: 100%;
|
|
// justify-content: space-between;
|
|
// display: flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.titlebox {
|
|
width: 431px;
|
|
height: 38px;
|
|
background: url("../../../assets/images/bg-title.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
// text-align: center;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
line-height: 38px;
|
|
letter-spacing: 2px;
|
|
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
|
|
padding-left: 60px;
|
|
// .titlename{
|
|
// position: relative;
|
|
// left: 24px;
|
|
// }
|
|
}
|
|
|
|
.factory {
|
|
display: flex;
|
|
align-items: center;
|
|
// justify-content: space-around;
|
|
}
|
|
|
|
.selectborder {
|
|
background-color: transparent;
|
|
border-radius: 4px;
|
|
// border: 2px solid #27408c;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
width: 350px;
|
|
margin-left: 50px;
|
|
}
|
|
|
|
.selectborder1 {
|
|
background-color: transparent;
|
|
border-radius: 4px;
|
|
// border: 2px solid #27408c;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
width: 88px;
|
|
margin-left: 25px;
|
|
}
|
|
|
|
.selectborder select {
|
|
/*清除select的边框样式*/
|
|
border: none;
|
|
/*清除select聚焦时候的边框颜色*/
|
|
outline: none;
|
|
background-color: transparent;
|
|
/*将select的宽高等于div的宽高*/
|
|
width: 100%;
|
|
height: 50px;
|
|
/*隐藏select的下拉图标*/
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
font-size: 25px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 42px;
|
|
}
|
|
|
|
.selectborder option {
|
|
/*清除select的边框样式*/
|
|
border: none;
|
|
/*清除select聚焦时候的边框颜色*/
|
|
outline: none;
|
|
background-color: transparent;
|
|
/*将select的宽高等于div的宽高*/
|
|
width: 100%;
|
|
height: 50px;
|
|
/*隐藏select的下拉图标*/
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
padding-left: 20px;
|
|
font-size: 25px;
|
|
font-weight: 500;
|
|
color: #3fa2ff;
|
|
border-radius: 0%;
|
|
}
|
|
|
|
.selectborder1 option {
|
|
/*清除select的边框样式*/
|
|
border: none;
|
|
/*清除select聚焦时候的边框颜色*/
|
|
outline: none;
|
|
background-color: transparent;
|
|
/*将select的宽高等于div的宽高*/
|
|
width: 200px;
|
|
height: 50px;
|
|
/*隐藏select的下拉图标*/
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
padding-left: 20px;
|
|
font-size: 25px;
|
|
font-weight: 500;
|
|
color: #3fa2ff;
|
|
border-radius: 0%;
|
|
}
|
|
|
|
.selectborder:after {
|
|
content: "";
|
|
width: 24px;
|
|
height: 24px;
|
|
background: url(../../../assets/images/xiala.png) no-repeat center;
|
|
/*通过定位将图标放在合适的位置*/
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 25%;
|
|
/*给自定义的图标实现点击下来功能*/
|
|
pointer-events: none;
|
|
}
|
|
|
|
.selectborder1:after {
|
|
content: "";
|
|
width: 24px;
|
|
height: 24px;
|
|
background: url(../../../assets/images/xiala.png) no-repeat center;
|
|
/*通过定位将图标放在合适的位置*/
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 25%;
|
|
/*给自定义的图标实现点击下来功能*/
|
|
pointer-events: none;
|
|
}
|
|
|
|
::v-deep .el-button--primary {
|
|
color: #ffffff;
|
|
background-color: #325e82;
|
|
border-color: #0a0f19;
|
|
}
|
|
|
|
.active1 {
|
|
background-color: #0d1b2f;
|
|
}
|
|
|
|
.active2 {
|
|
// background-color: #04060E;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 3px;
|
|
height: 0px;
|
|
background-color: #0c0642;
|
|
}
|
|
|
|
/*定义滚动条轨道 内阴影+圆角*/
|
|
::-webkit-scrollbar-track {
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
border-radius: 8px;
|
|
background-color: #07356a;
|
|
}
|
|
|
|
/*定义滑块 内阴影+圆角*/
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 8px;
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
background-color: #0091ff;
|
|
}
|
|
#cards {
|
|
.card-item {
|
|
width: 254px;
|
|
height: 262px;
|
|
background: url("../../../assets/images/bg3.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 10px;
|
|
margin-right: 15px;
|
|
margin-bottom: 20px;
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
}
|
|
|
|
.card-header {
|
|
width: 180px;
|
|
height: 20%;
|
|
margin: auto;
|
|
align-items: center;
|
|
text-align: center;
|
|
color: #f6f3f9;
|
|
font-size: 24px;
|
|
margin-top: 10px;
|
|
|
|
.card-header-left {
|
|
display: inline-block;
|
|
min-width: 100px;
|
|
background-color: #0b3765;
|
|
box-shadow: 0px 3px 18px 12px #0b3765;
|
|
}
|
|
}
|
|
|
|
.ring-charts {
|
|
height: 55%;
|
|
}
|
|
|
|
.card-footer {
|
|
height: 25%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.card-footer-item {
|
|
box-sizing: border-box;
|
|
width: 40%;
|
|
text-align: center;
|
|
.footer-title {
|
|
font-size: 22px;
|
|
margin-bottom: 5px;
|
|
color: #0593fd;
|
|
}
|
|
|
|
.footer-detail {
|
|
min-height: 46px;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
color: #192c57;
|
|
font-size: 18px;
|
|
padding: 10px 10px 10px 10px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
background-color: #192c57;
|
|
border-radius: 3px;
|
|
.dv-digital-flop {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
::v-deep .el-date-editor .el-range-input {
|
|
background-color: #142944;
|
|
color: #ffffff;
|
|
}
|
|
::v-deep .el-range-input::placeholder {
|
|
color: #ffffff; /* 设置 placeholder 文本的颜色 */
|
|
}
|
|
::v-deep .el-range-separator {
|
|
color: #ffffff; /* 设置 placeholder 文本的颜色 */
|
|
}
|
|
::v-deep .el-range-editor--medium .el-range-separator {
|
|
line-height: 35px;
|
|
}
|
|
::v-deep .el-input__icon .el-range__icon .el-icon-date {
|
|
color: #ffffff; /* 设置 placeholder 文本的颜色 */
|
|
}
|
|
.fleft {
|
|
float: left;
|
|
}
|
|
|
|
.fright {
|
|
float: right;
|
|
}
|
|
|
|
.clearfix::after {
|
|
content: "";
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
#cards .isactive {
|
|
margin-right: 0px;
|
|
}
|
|
</style>
|
|
|