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-21 23:51:46 +08:00
parent 440b9007fb
commit a26f025ba7
2 changed files with 14 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,31 +8,20 @@
</div> </div>
</div> </div>
<a-divider :margin="16" /> <a-divider :margin="16" />
<!-- <div class="flex-row-between-center"> <a-row>
<div v-for="(item, index) in shortcut" :key="item.id" class="card-middling row-center" :class="'animated-fade-up-' + index">
<div>
<SvgIcon :name="item.svg" :size="40" />
<span class="shortcut-card-label">{{ item.name }}</span>
</div>
</div>
</div> -->
<a-row class="grid-demo">
<a-col <a-col
:xs="24" :xs="24"
:sm="12" :sm="12"
:md="12"
:lg="8" :lg="8"
:xl="4" :xl="4"
:xxl="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" class="card-middling row-center card-box"
:class="'animated-fade-up-' + index" :class="'animated-fade-up-' + index"
> >
<div>
<SvgIcon :name="item.svg" :size="40" /> <SvgIcon :name="item.svg" :size="40" />
<span class="shortcut-card-label">{{ item.name }}</span> <div class="shortcut-card-label">{{ item.name }}</div>
</div>
</a-col> </a-col>
</a-row> </a-row>
</div> </div>
@ -75,12 +64,16 @@ const shortcut = ref([
<style lang="scss" scoped> <style lang="scss" scoped>
.shortcut-box { .shortcut-box {
.card-box {
margin-bottom: $padding;
.shortcut-card-label { .shortcut-card-label {
width: 100px;
font-size: $font-size-body-3; font-size: $font-size-body-3;
margin-left: 20px; margin-left: 20px;
color: $color-text-2; color: $color-text-2;
} }
} }
}
.box-title { .box-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

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

@ -65,7 +65,7 @@ const targetData = reactive({
<style lang="scss" scoped> <style lang="scss" scoped>
.target-box { .target-box {
margin-top: calc($padding * 2); margin-top: $padding;
.target-grade { .target-grade {
width: 180px; width: 180px;
height: 60px; height: 60px;