|
@@ -19,12 +19,13 @@
|
|
|
<img :src="img.url">
|
|
|
<div class="card-info">
|
|
|
<h5>{{title}}</h5>
|
|
|
- <p v-if="description">{{description}}</p>
|
|
|
+ <em></em>
|
|
|
+ <p class="card-des" v-if="description">{{description}}</p>
|
|
|
<div class="mta-card-row" v-for="(rowList,index) in tagesH5" :key="`h5-${index}`">
|
|
|
<template v-for="(des,ind) in rowList">
|
|
|
<!-- 站位div -->
|
|
|
<span v-if="des.empty" :key="ind"></span>
|
|
|
- <span :key="ind"><i></i><span>{{des.value}}</span></span>
|
|
|
+ <span :key="ind" class="mta-card-row-item"><i></i><span>{{des.value}}</span></span>
|
|
|
</template>
|
|
|
</div>
|
|
|
<slot></slot>
|
|
@@ -135,6 +136,7 @@ export default {
|
|
|
}
|
|
|
.card-des {
|
|
|
font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
color: #333;
|
|
|
font-weight: 500;
|
|
|
text-align: left;
|
|
@@ -151,8 +153,8 @@ export default {
|
|
|
|
|
|
i {
|
|
|
display: inline-block;
|
|
|
- width:13px;
|
|
|
- height: 13px;
|
|
|
+ width:8px;
|
|
|
+ height: 8px;
|
|
|
background: #00b96b;
|
|
|
margin-right: 13px;
|
|
|
border-radius: 50%;
|
|
@@ -166,5 +168,20 @@ export default {
|
|
|
.mta-card-row {
|
|
|
display: flex;
|
|
|
}
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ // card--info
|
|
|
+ .card-info {
|
|
|
+ h5 {font-size: 16px;margin: 20px 0 10px;}
|
|
|
+ em{width: 35px;height: 3px;background: #00b96b;display: block;}
|
|
|
+ .card-des{
|
|
|
+ font-size: 14px;margin: 20px 0 10px;text-align: justify;line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mta-card-row{
|
|
|
+ margin-bottom: 10px;
|
|
|
+ >span{width: 44%;font-size: 14px;margin: 0 3%;}
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|