wl-design-mobile 0.0.4 → 0.0.6

package/README.md

@@ -1,6 +1,6 @@
-# wl-design-mobile
-
-## Setup
-```
-npm i wl-design-mobile
-```
+# wl-design-mobile
+
+## Setup
+```
+npm i wl-design-mobile
+```

package/btn/components/lambo-info-btn.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <div class="info-btn-div">
+      <van-button :disabled="disabled" :icon="icon" :icon-position="position" :loading="loading"
+                  :type="'info'" :class="dynamicClass" size="normal" @click="handleClick"> {{ text }}
+        <slot name="extend"></slot>
+      </van-button>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'LamboInfoBtn',
+  components: {},
+  props: {
+    text: {
+      type: String,
+      default: '中号按钮'
+    },
+    position: {
+      type: String,
+      default: 'left'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: "normal"
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    handleClick(event) {
+      this.$emit('click', event);
+    }
+  },
+  computed: {
+    dynamicClass() {
+      if (this.size === 'big') {
+        return {
+          "big-btn": true
+        }
+      } else if (this.size === 'small') {
+        return {
+          "small-btn": true
+        }
+      } else {
+        return {
+          "normal-btn": true
+        }
+      }
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+@import "../../styles/index.less";
+
+.big-btn {
+  border: none;
+  min-width: 60px;
+  height: 38px;
+  font-size: 14px;
+  border-radius: 3px;
+}
+
+.normal-btn {
+  border: none;
+  min-width: 60px;
+  height: 30px;
+  font-size: 12px;
+  border-radius: 3px;
+}
+
+.small-btn {
+  border: none;
+  min-width: 60px;
+  height: 27px;
+  font-size: 11px;
+  border-radius: 3px;
+}
+
+/* type[info] disable[true] plain[false] */
+/deep/ .info-btn-div .van-button--info {
+  background-color: transparent;
+  color: var(--scl-blue);
+  border: 1px solid var(--scl-blue);
+}
+
+/*线框按钮不可用按钮样式*/
+/deep/ .info-btn-div .van-button--disabled {
+  opacity: 1;
+  color: #000000;
+  border: 1px solid var(--scl-gray-6);
+  background-color: #ffffff;
+}
+</style>

package/btn/components/lambo-primary-btn.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <div class="primary-btn-div">
+      <van-button :disabled="disabled" :icon="icon" :icon-position="position" :loading="loading"
+                  :type="'primary'" :class="dynamicClass" size="normal" @click="handleClick"> {{ text }}
+        <slot name="extend"></slot>
+      </van-button>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'LamboPrimaryBtn',
+  components: {},
+  props: {
+    text: {
+      type: String,
+      default: '中号按钮'
+    },
+    position: {
+      type: String,
+      default: 'left'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: "normal"
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    handleClick(event) {
+      this.$emit('click', event);
+    }
+  },
+  computed: {
+    dynamicClass() {
+      if (this.size === 'big') {
+        return {
+          "big-btn": true
+        }
+      } else if (this.size === 'small') {
+        return {
+          "small-btn": true
+        }
+      } else {
+        return {
+          "normal-btn": true
+        }
+      }
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+@import "../../styles/index.less";
+
+.big-btn {
+  border: none;
+  min-width: 60px;
+  height: 38px;
+  font-size: 14px;
+  border-radius: 3px;
+}
+
+.normal-btn {
+  border: none;
+  min-width: 60px;
+  height: 30px;
+  font-size: 12px;
+  border-radius: 3px;
+}
+
+.small-btn {
+  border: none;
+  min-width: 60px;
+  height: 27px;
+  font-size: 11px;
+  border-radius: 3px;
+}
+
+/* type[primary] disable[true] plain[false] */
+/deep/ .primary-btn-div .van-button--primary {
+  background-color: var(--scl-blue);
+  border: none;
+}
+
+/* type[primary] disable[false] plain[false] */
+/deep/ .primary-btn-div .van-button--disabled {
+  cursor: not-allowed;
+  opacity: 1;
+  background-color: var(--scl-gray-6);
+  color: #000000;
+  border: none;
+}
+
+</style>

package/btn/components/lambo-text-btn.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <div class="text-btn-div">
+      <van-button :disabled="disabled" :icon="icon" :icon-position="position" :loading="loading"
+                  :type="'default'" :class="dynamicClass" size="normal" @click="handleClick"> {{ text }}
+        <slot name="extend"></slot>
+      </van-button>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'LamboTextBtn',
+  components: {},
+  props: {
+    text: {
+      type: String,
+      default: '中号按钮'
+    },
+    position: {
+      type: String,
+      default: 'left'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: "normal"
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    handleClick(event) {
+      this.$emit('click', event);
+    }
+  },
+  computed: {
+    dynamicClass() {
+      if (this.size === 'big') {
+        return {
+          "big-btn": true
+        }
+      } else if (this.size === 'small') {
+        return {
+          "small-btn": true
+        }
+      } else {
+        return {
+          "normal-btn": true
+        }
+      }
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+@import "../../styles/index.less";
+
+.big-btn {
+  border: none;
+  min-width: 60px;
+  height: 38px;
+  font-size: 14px;
+  border-radius: 3px;
+}
+
+.normal-btn {
+  border: none;
+  min-width: 60px;
+  height: 30px;
+  font-size: 12px;
+  border-radius: 3px;
+}
+
+.small-btn {
+  border: none;
+  min-width: 60px;
+  height: 27px;
+  font-size: 11px;
+  border-radius: 3px;
+}
+
+/*无框类型按钮样式 */
+/deep/ .text-btn-div .van-button--default {
+  background: var(--scl-white-1);
+  border: none;
+  color: var(--scl-blue);
+}
+
+/*无框按钮不可用按钮样式*/
+/deep/ .text-btn-div .van-button--disabled {
+  opacity: 1;
+  color: #000000;
+  border: none;
+  background-color: var(--scl-white-1);
+}
+</style>

package/btn/lambo-btn-group.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="button-group">
+    <slot></slot>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'LamboBtnGroup',
+  components: {},
+  props: {},
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+
+  },
+  created() {
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+@import "../styles/index.less";
+
+.button-group {
+  display: flex;
+  padding: 0 14px;
+  background-color: var(--scl-white-1);
+  border-bottom: 1px solid  rgba(229, 229, 229, 3);
+}
+
+.button-group /deep/ .btn-sel {
+  flex: 1;
+  text-align: center;
+}
+
+/*.button-group /deep/ .btn-sel:nth-child(n+2) {
+  border-left: 1px solid var(--scl-white-2);
+}*/
+</style>

package/btn/lambo-btn-split-line.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="line-parent-div">
+    <div class="line-div"></div>
+  </div>
+</template>
+<script>
+
+export default {
+  components: {},
+  props: {
+    // 后期竖线长度和居中水平，根据插槽元素调整，目前只实现normal大小的。
+    // size: {
+    //   type: String,
+    //   default: 'normal',
+    // }
+  },
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+<style scoped>
+.line-parent-div {
+  height: 27px;
+  width: 1px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.line-div {
+  height: 12px;
+  width: 1px;
+  background-color: var(--scl-white-2);
+}
+</style>

package/btn/lambo-btn.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="btn-sel">
+    <template v-if="type === 'info'">
+      <lambo-info-btn :text="text" :size="size" :position="position" :disabled="disabled" :icon="icon" :loading="loading" @click="handleClick"></lambo-info-btn>
+    </template>
+    <template v-else-if="type === 'text'">
+      <lambo-text-btn :text="text" :size="size" :position="position" :disabled="disabled" :icon="icon" :loading="loading" @click="handleClick"></lambo-text-btn>
+    </template>
+    <template v-else>
+      <lambo-primary-btn :text="text" :size="size" :position="position" :disabled="disabled" :icon="icon" :loading="loading" @click="handleClick"></lambo-primary-btn>
+    </template>
+  </div>
+</template>
+<script>
+
+import LamboInfoBtn from "./components/lambo-info-btn.vue";
+import LamboTextBtn from "./components/lambo-text-btn.vue";
+import LamboPrimaryBtn from "./components/lambo-primary-btn.vue";
+
+export default {
+  name: "LamboBtn",
+  components: {LamboPrimaryBtn, LamboTextBtn, LamboInfoBtn},
+  props: {
+    type: {
+      type: String,
+      default: 'primary'
+    },
+    text: {
+      type: String,
+      default: '按钮'
+    },
+    size: {
+      type: String,
+      default: 'normal',
+    },
+    position: {
+      type: String,
+      default: 'left'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    handleClick(event) {
+      this.$emit('click', event);
+    }
+  }
+}
+</script>
+<style scoped>
+
+</style>

package/btn/lambo-extend-btn.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="btn-sel">
+    <lambo-btn :type="type" :text="text" :size="size" :position="position" :disabled="disabled" :icon="icon"
+               :loading="loading"
+               :class="dynamicClass" @click="onClick"></lambo-btn>
+    <ul v-show="show" class="extend-ul">
+      <slot></slot>
+    </ul>
+  </div>
+</template>
+<script>
+import LamboBtn from "./lambo-btn.vue";
+
+export default {
+  name: 'LamboExtendBtn',
+  components: {LamboBtn},
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+    text: {
+      type: String,
+      default: '按钮'
+    },
+    size: {
+      type: String,
+      default: 'normal',
+    },
+    position: {
+      type: String,
+      default: 'right'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: "arrow-down"
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      show: false,
+    }
+  },
+  methods: {
+    onClick() {
+      this.show = !this.show;
+    },
+  },
+  computed: {
+    dynamicClass() {
+      if (this.size === 'big') {
+        return {
+          "big-btn": true
+        }
+      } else if (this.size === 'small') {
+        return {
+          "small-btn": true
+        }
+      } else {
+        return {
+          "normal-btn": true
+        }
+      }
+    }
+  },
+}
+</script>
+<style scoped>
+@import "../styles/index.less";
+
+.big-btn {
+  border: none;
+  min-width: 60px;
+  height: 38px;
+  font-size: 14px;
+  border-radius: 3px;
+}
+
+.normal-btn {
+  border: none;
+  min-width: 60px;
+  height: 30px;
+  font-size: 12px;
+  border-radius: 3px;
+}
+
+.small-btn {
+  border: none;
+  min-width: 60px;
+  height: 27px;
+  font-size: 11px;
+  border-radius: 3px;
+}
+
+.extend-ul {
+  z-index: 999;
+}
+</style>

package/btn/{lambo-icon-button.vue → lambo-icon-btn.vue}

@@ -4,7 +4,7 @@
 <script>
 
 export default {
-  name: "LamboIconButton",
+  name: "LamboIconBtn",
   props: {
     icon: String,
     loading: {

package/detail/lambo-detail-row.vue

@@ -37,16 +37,14 @@ export default {
 }
 
 .detail-row-box {
-  min-height: 60px;
-  height: auto;
+  height: 70px;
   margin: 0 14px;
   padding: 12px 0;
   border-bottom: 1px solid var(--scl-white-2);
 }
 
 .detail-row-title {
-  min-height: 16px;
-  height: auto;
+  height: 16px;
   margin-bottom: 12px;
   font-size: 12px;
   font-family: Regular;
@@ -54,8 +52,7 @@ export default {
 }
 
 .detail-row-val {
-  min-height: 18px;
-  height: auto;
+  height: 18px;
   font-size: 14px;
   color: var(--scl-lucency-1);
 }