attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 栅格系统

Browse Source
This commit is contained in:
wang_fan_w 2024-05-22 00:07:54 +08:00
parent a26f025ba7
commit 5dfe39be85
3 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/home/components/finance.vue
View File

@ -9,6 +9,9 @@
</div> </div>
<a-divider :margin="16" /> <a-divider :margin="16" />
<div class="finance-card"> <div class="finance-card">
<!-- <a-row>
<a-col :xs="24" :sm="12" :lg="8" :xl="4"></a-col>
</a-row> -->
<a-card <a-card
hoverable hoverable
v-for="(item, index) in financeData" v-for="(item, index) in financeData"

1
src/views/home/components/shortcut.vue
View File

@ -14,7 +14,6 @@
:sm="12" :sm="12"
:lg="8" :lg="8"
:xl="4" :xl="4"
:gutter="[24, 12]"
v-for="(item, index) in shortcut" v-for="(item, index) in shortcut"
:key="item.id" :key="item.id"
class="card-middling row-center card-box" class="card-middling row-center card-box"

26
src/views/home/components/target-box.vue
View File

@ -4,15 +4,24 @@
<div>第三板指标</div> <div>第三板指标</div>
</div> </div>
<a-divider :margin="16" /> <a-divider :margin="16" />
<div class="row-start-center"> <a-row>
<div class="target-grade" :class="'animated-fade-up-0'"> <a-col :xs="24" :sm="12" :lg="8" :xl="4" class="target-grade" :class="'animated-fade-up-0'">
<div class="target-grade-innerbox"> <div class="target-grade-innerbox">
<div class="grade-value">{{ targetData.all.value }}</div> <div class="grade-value">{{ targetData.all.value }}</div>
<div class="target-title">{{ targetData.all.title }}</div> <div class="target-title">{{ targetData.all.title }}</div>
</div> </div>
</div> </a-col>
<div v-for="(item, index) in targetData.list" :key="index" class="target-other" :class="'animated-fade-up-' + index"> <a-col
<div> :xs="24"
:sm="12"
:lg="8"
:xl="4"
v-for="(item, index) in targetData.list"
:key="index"
class="target-other"
:class="'animated-fade-up-' + index"
>
<div class="target-other-innerbox">
<div> <div>
<span class="other-value">{{ item.value }}</span> <span class="other-value">{{ item.value }}</span>
<span> <span>
@ -22,8 +31,8 @@
</div> </div>
<div class="target-title">{{ item.title }}</div> <div class="target-title">{{ item.title }}</div>
</div> </div>
</div> </a-col>
</div> </a-row>
</div> </div>
</template> </template>
@ -99,6 +108,9 @@ const targetData = reactive({
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.target-other-innerbox {
width: 100px;
}
.other-value { .other-value {
font-family: "AliFangYuanTi"; font-family: "AliFangYuanTi";
font-weight: bold; font-weight: bold;