|
@@ -4,21 +4,30 @@
|
|
|
class="cardItem"
|
|
|
v-for="(item, i) in sdlist"
|
|
|
:key="i"
|
|
|
- :class="`card${i}`"
|
|
|
- style="width: 30%;"
|
|
|
+ :class="`card${item.ctype}`"
|
|
|
+ style="width: 30%"
|
|
|
>
|
|
|
- <span>{{ item.name }}</span>
|
|
|
- <span>{{ sddata[""] || 0 }}个</span>
|
|
|
- <span>{{ sddata[""] || 0 }}亩</span>
|
|
|
- <div class="cardItem acard" :class="`card${i}`" v-if="item.show">
|
|
|
- <span>{{ item.name }}1</span>
|
|
|
- <span>{{ sddata[""] || 0 }}个</span>
|
|
|
- <span>{{ sddata[""] || 0 }}亩</span>
|
|
|
- </div>
|
|
|
- <div class="cardItem acard" :class="`card${i}`" v-if="item.show">
|
|
|
- <span>{{ item.name }}2</span>
|
|
|
- <span>{{ sddata[""] || 0 }}个</span>
|
|
|
- <span>{{ sddata[""] || 0 }}亩</span>
|
|
|
+ <span
|
|
|
+ :class="item.children ? 'cursor' : ''"
|
|
|
+ @click="item.show = !item.show"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ <el-icon class="el-icon--right" v-if="item.children">
|
|
|
+ <caret-bottom />
|
|
|
+ </el-icon>
|
|
|
+ </span>
|
|
|
+ <span>{{ sddata.prop || 0 }}个</span>
|
|
|
+ <span>{{ sddata.prop1 || 0 }}亩</span>
|
|
|
+ <div
|
|
|
+ class="cardItem acard"
|
|
|
+ :class="`card${i}`"
|
|
|
+ v-for="child in item.children"
|
|
|
+ :key="child.name"
|
|
|
+ v-if="item.show"
|
|
|
+ >
|
|
|
+ <span>{{ child.name }}</span>
|
|
|
+ <span>{{ child.prop || 0 }}个</span>
|
|
|
+ <span>{{ child.prop1 || 0 }}亩</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -50,6 +59,7 @@ defineProps({
|
|
|
// width: 230px;
|
|
|
width: 200px;
|
|
|
height: 85px;
|
|
|
+ max-width: 200px;
|
|
|
background: linear-gradient(
|
|
|
180deg,
|
|
|
rgba(30, 198, 149, 1) 0%,
|
|
@@ -84,15 +94,31 @@ defineProps({
|
|
|
margin-top: 20px;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
+ .cardblue {
|
|
|
+ background: linear-gradient(
|
|
|
+ 180deg,
|
|
|
+ #02a5ee 0%,
|
|
|
+ #02a5ed 0%,
|
|
|
+ #0280b9 100%,
|
|
|
+ #027fb7 100%
|
|
|
+ );
|
|
|
+ }
|
|
|
|
|
|
- .card1 {
|
|
|
+ .cardred {
|
|
|
background: linear-gradient(
|
|
|
- 90deg,
|
|
|
+ 180deg,
|
|
|
rgba(244, 174, 149, 1) 0%,
|
|
|
rgba(244, 174, 149, 1) 0%,
|
|
|
rgba(226, 113, 140, 1) 100%,
|
|
|
rgba(226, 113, 140, 1) 100%
|
|
|
);
|
|
|
}
|
|
|
+ .cursor {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .el-icon--right {
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|