|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <div>
|
|
|
|
|
|
|
+ <div class="btn-demo">
|
|
|
<h4>按钮状态</h4>
|
|
<h4>按钮状态</h4>
|
|
|
<div class="btn-state">
|
|
<div class="btn-state">
|
|
|
<nut-button block>默认状态</nut-button>
|
|
<nut-button block>默认状态</nut-button>
|
|
@@ -113,51 +113,55 @@ export default {
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
|
|
+.btn-demo {
|
|
|
|
|
+ padding: 0 15px;
|
|
|
|
|
+}
|
|
|
.bg {
|
|
.bg {
|
|
|
- margin: 0 10px;
|
|
|
|
|
|
|
+ margin: 0 10px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.gap {
|
|
.gap {
|
|
|
- height: 10px;
|
|
|
|
|
|
|
+ height: 10px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.white-bg {
|
|
.white-bg {
|
|
|
- padding: 10px;
|
|
|
|
|
- background: #fff;
|
|
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+ background: #fff;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.btn-state {
|
|
.btn-state {
|
|
|
- button {
|
|
|
|
|
- margin-bottom: 10px;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ button {
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.btn-size {
|
|
.btn-size {
|
|
|
- display: flex;
|
|
|
|
|
- align-items: flex-end;
|
|
|
|
|
- justify-content: space-around;
|
|
|
|
|
- margin-top: 24px;
|
|
|
|
|
-
|
|
|
|
|
- &.two {
|
|
|
|
|
- button {
|
|
|
|
|
- width: 168px;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- &.three {
|
|
|
|
|
- button {
|
|
|
|
|
- width: 109px;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- &.four {
|
|
|
|
|
- button {
|
|
|
|
|
- width: 79px;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .middle {
|
|
|
|
|
- padding: 0;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: flex-end;
|
|
|
|
|
+ justify-content: space-around;
|
|
|
|
|
+ margin-top: 24px;
|
|
|
|
|
+
|
|
|
|
|
+ &.two {
|
|
|
|
|
+ button {
|
|
|
|
|
+ width: 168px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.three {
|
|
|
|
|
+ button {
|
|
|
|
|
+ width: 108px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.four {
|
|
|
|
|
+ button {
|
|
|
|
|
+ width: 79px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .middle {
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|