-
-
{{ item.name }}
+
+
![]()
+
+
+ {{item.name}}
+ {{ item.name }}
+
-
+
+
@@ -45,13 +90,14 @@ export default {
//flex-wrap: wrap;
//justify-content: space-between;
display: grid;
- grid-template-columns: repeat(auto-fill, 100px);
+ grid-template-columns: repeat(auto-fill, calc((100% - 20px) / 3));
grid-gap: 10px;
grid-auto-flow: row;
margin-top: 10px;
& > div {
- width: 100px;
- height: 100px;
+ //width: 100px;
+ //height: 100px;
+ min-height: 50px;
border-radius: 8px 8px 8px 8px;
display: flex;
flex-direction: column;
@@ -59,21 +105,33 @@ export default {
align-items: center;
}
.content-div {
+ // (总高度 - 内边距 - 标题 - 上下边距) / 3
+ height: calc((306px - 48px - 31px - 20px) / 3);
+ cursor: pointer;
background: rgba(213,44,38,0.08);
+ .icon-img {
+ width: 27px;
+ }
.iconfont {
font-size: 27px;
color: @primary-color;
}
p {
+ width: 90%;
+ text-align: center;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
margin-bottom: 0;
font-size: 16px;
- font-family: PingFang SC, PingFang SC;
+ font-family: PingFang SC, PingFang SC, sans-serif;
font-weight: 400;
color: #000000;
line-height: 28px;
}
}
.plus-div {
+ cursor: pointer;
border: 1px dashed @primary-color;
box-sizing: border-box;
.anticon {
@@ -81,4 +139,17 @@ export default {
}
}
}
+.text-primary-color {
+ color: @primary-color
+}
+
+@media screen and (max-width: 1366px) {
+ .content-wrapper {
+ .content-div {
+ p {
+ font-size: 14px;
+ }
+ }
+ }
+}
diff --git a/src/views/dashboard/modules/SearchAndWarningCard.vue b/src/views/dashboard/modules/SearchAndWarningCard.vue
index 00053f66..874ba146 100644
--- a/src/views/dashboard/modules/SearchAndWarningCard.vue
+++ b/src/views/dashboard/modules/SearchAndWarningCard.vue
@@ -20,10 +20,13 @@
新车型实施预警
在产车实施预警