Jcdm041-Mes.git

hdy

2024-01-23 629c9fe88af3cd7a2d1177fc1af0177505787491

提交 \| 用户 \| 时间
fd2207	1	<template>
懒	2	<el-row :gutter="40" class="panel-group">
8adcec	3	<el-card class="bottom-card">
J	4	<div slot="header" class="clearfix">
	5	<span class="top2">单日累计产量</span>
	6	</div>
	7
fbed8e	8	<el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
fd2207	9	<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
懒	10	<div class="card-panel-icon-wrapper icon-people">
	11	<svg-icon icon-class="peoples" class-name="card-panel-icon" />
	12	</div>
	13	<div class="card-panel-description">
	14	<div class="card-panel-text">
e211c9	15	合箱上线
fd2207	16	</div>
8adcec	17	<count-to :start-val="0" :end-val="10200" :duration="2600" class="card-panel-num" />
fd2207	18	</div>
懒	19	</div>
	20	</el-col>
fbed8e	21	<el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
fd2207	22	<div class="card-panel" @click="handleSetLineChartData('messages')">
懒	23	<div class="card-panel-icon-wrapper icon-message">
	24	<svg-icon icon-class="message" class-name="card-panel-icon" />
	25	</div>
	26	<div class="card-panel-description">
	27	<div class="card-panel-text">
e211c9	28	合箱下线
fd2207	29	</div>
懒	30	<count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
	31	</div>
	32	</div>
	33	</el-col>
fbed8e	34	<el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
fd2207	35	<div class="card-panel" @click="handleSetLineChartData('purchases')">
懒	36	<div class="card-panel-icon-wrapper icon-money">
	37	<svg-icon icon-class="money" class-name="card-panel-icon" />
	38	</div>
	39	<div class="card-panel-description">
	40	<div class="card-panel-text">
e211c9	41	总装上线
fd2207	42	</div>
懒	43	<count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
	44	</div>
	45	</div>
	46	</el-col>
fbed8e	47	<el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
fd2207	48	<div class="card-panel" @click="handleSetLineChartData('shoppings')">
懒	49	<div class="card-panel-icon-wrapper icon-shopping">
	50	<svg-icon icon-class="shopping" class-name="card-panel-icon" />
	51	</div>
	52	<div class="card-panel-description">
	53	<div class="card-panel-text">
e211c9	54	总装下线
fd2207	55	</div>
懒	56	<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
	57	</div>
	58	</div>
	59	</el-col>
fbed8e	60
J	61	<el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
	62	<div class="card-panel" @click="handleSetLineChartData('shoppings')">
	63	<div class="card-panel-icon-wrapper icon-shopping">
	64	<svg-icon icon-class="shopping" class-name="card-panel-icon" />
	65	</div>
	66	<div class="card-panel-description">
	67	<div class="card-panel-text">
	68	CVT上线
	69	</div>
	70	<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
	71	</div>
	72	</div>
	73	</el-col>
	74
	75	<el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
	76	<div class="card-panel" @click="handleSetLineChartData('shoppings')">
	77	<div class="card-panel-icon-wrapper icon-shopping">
	78	<svg-icon icon-class="shopping" class-name="card-panel-icon" />
	79	</div>
	80	<div class="card-panel-description">
	81	<div class="card-panel-text">
	82	CVT下线
	83	</div>
	84	<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
	85	</div>
	86	</div>
	87	</el-col>
	88
8adcec	89	</el-card>
fd2207	90	</el-row>
fbed8e	91
fd2207	92	</template>
懒	93
	94	<script>
	95	import CountTo from 'vue-count-to'
	96
	97	export default {
	98	components: {
	99	CountTo
	100	},
	101	methods: {
	102	handleSetLineChartData(type) {
	103	this.$emit('handleSetLineChartData', type)
	104	}
	105	}
	106	}
	107	</script>
	108
	109	<style lang="scss" scoped>
8adcec	110	.bottom-card{
J	111	padding: 15px 20px 20px 20px;
	112	height: auto;
	113	width: 1272px;
	114	margin-left: 20px;
	115	justify-content: center;
	116	column-width: max-content;
	117	}
	118
fbed8e	119	.top2{
8adcec	120	font-size: 18px;
fbed8e	121	font-weight: bold;
8adcec	122	margin-bottom: 0px;
fbed8e	123	}
J	124
fd2207	125	.panel-group {
懒	126
8adcec	127	width: 1272px;
J	128	margin-left: 20px;
fd2207	129	.card-panel-col {
懒	130	margin-bottom: 32px;
	131	}
	132
	133	.card-panel {
	134	height: 108px;
	135	cursor: pointer;
	136	font-size: 12px;
	137	position: relative;
	138	overflow: hidden;
	139	color: #666;
	140	background: #fff;
	141	box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
	142	border-color: rgba(0, 0, 0, .05);
	143
	144	&:hover {
	145	.card-panel-icon-wrapper {
	146	color: #fff;
	147	}
	148
	149	.icon-people {
	150	background: #40c9c6;
	151	}
	152
	153	.icon-message {
	154	background: #36a3f7;
	155	}
	156
	157	.icon-money {
	158	background: #f4516c;
	159	}
	160
	161	.icon-shopping {
	162	background: #34bfa3
	163	}
	164	}
	165
	166	.icon-people {
	167	color: #40c9c6;
	168	}
	169
	170	.icon-message {
	171	color: #36a3f7;
	172	}
	173
	174	.icon-money {
	175	color: #f4516c;
	176	}
	177
	178	.icon-shopping {
	179	color: #34bfa3
	180	}
	181
	182	.card-panel-icon-wrapper {
	183	float: left;
	184	margin: 14px 0 0 14px;
	185	padding: 16px;
	186	transition: all 0.38s ease-out;
	187	border-radius: 6px;
	188	}
	189
	190	.card-panel-icon {
	191	float: left;
	192	font-size: 48px;
	193	}
	194
	195	.card-panel-description {
	196	float: right;
	197	font-weight: bold;
	198	margin: 26px;
	199	margin-left: 0px;
8adcec	200	padding: 20px 20px;
fd2207	201
懒	202	.card-panel-text {
8adcec	203	line-height: 14px;
fd2207	204	color: rgba(0, 0, 0, 0.45);
8adcec	205	font-size: 12px;
J	206	margin-bottom: 9px;
fd2207	207	}
懒	208
	209	.card-panel-num {
8adcec	210	font-size: 18px;
fd2207	211	}
懒	212	}
	213	}
	214	}
	215
	216	@media (max-width:550px) {
	217	.card-panel-description {
	218	display: none;
	219	}
	220
	221	.card-panel-icon-wrapper {
	222	float: none !important;
	223	width: 100%;
	224	height: 100%;
	225	margin: 0 !important;
	226
	227	.svg-icon {
	228	display: block;
	229	margin: 14px auto !important;
	230	float: none !important;
	231	}
	232	}
	233	}
	234	</style>