wl-design-mobile 0.0.1

package/title/lambo-title1.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="title1-box" :style="computedStyle">
+    <div class="title1-main">
+      <div class="title1-main-left">
+        <img class="title1-icon" :src="icon" />
+        <span class="title1-val">
+        {{ title }}
+      </span>
+      </div>
+      <div class="top-btn-div">
+        <div class="opt-btn-div">
+          <slot name="opt"></slot>
+        </div>
+      </div>
+    </div>
+    <div class="title1-border-line" v-if="border"></div>
+  </div>
+</template>
+<script>
+import editPageIcon from '../assets/img/title1-edit-page.png'
+
+export default {
+  name: 'LamboTitle1',
+  components: {},
+  props: {
+    icon: {
+      type: String,
+      default: editPageIcon,
+    },
+    title: {
+      type: String,
+    },
+    marginBottom: {
+      type: Boolean,
+      default: false,
+    },
+    border: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {}
+  },
+  methods: {},
+  computed: {
+    computedStyle() {
+      return {
+        marginBottom: this.marginBottom===true?'8px':'0px'
+      }
+    },
+  }
+}
+</script>
+<style scoped>
+@import "../styles/index.less";
+
+.title1-box {
+  display: flex;
+  flex-direction: column;
+}
+
+.title1-main {
+  height: 47px;
+  display: flex;
+  justify-content: space-between;
+  background-color: var(--scl-white-1);
+  padding: 10px 14px;
+}
+
+.title1-border-line {
+  height: 1px;
+  margin: 0px 14px 0px 14px;
+  background-color: var(--scl-white-2);
+}
+
+.title1-icon {
+  width: 23px;
+  height: 23px;
+}
+
+.title1-main-left {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+}
+
+.title1-val {
+  height: 23px;
+  padding: 0;
+  font-size: 16px;
+  border: none;
+  line-height: 23px;
+  margin-left: 8px;
+  font-weight: bold;
+}
+
+.top-btn-div {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  align-content: flex-start;
+  background-color: var(--scl-white-1);
+}
+
+.opt-btn-div {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  align-content: flex-start;
+  flex: 1;
+}
+
+/* 控制 .opt-btn-div 内的元素的右边距为 6px */
+.opt-btn-div > * {
+  margin-right: 6px;
+  border-radius: 6px;
+}
+
+/* 控制 .opt-btn-div 内的最后一个元素的右边距为 0px */
+.opt-btn-div > *:last-child {
+  margin-right: 0px;
+}
+</style>

package/title/lambo-title2.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="indicator-card-title">
+    <div class="tag-line"/>
+    {{ title }}
+  </div>
+</template>
+<script>
+
+export default {
+  name: "LamboTitle2",
+  props: {
+    title: {
+      type: String,
+      default: "",
+    }
+  }
+}
+</script>
+<style scoped>
+@import "../styles/index.less";
+
+.indicator-card-title {
+  display: flex;
+  align-items: center;
+  color: black;
+  font-weight: bold;
+  font-size: var(--ind-font-size-md);
+  margin-left: 10px;
+}
+
+.indicator-card-title .tag-line {
+  width: 3px;
+  height: 14px;
+  background-color: var(--scl-blue);
+  margin-right: var(--ind-padding-xs);
+}
+</style>

package/title/lambo-title3.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="container">
+    <div class="nav">
+      <img class="img-0" :src="imgSrc"/>
+    </div>
+    <div class="column">
+      <section class="filter-txt">筛选名称</section>
+      <section class="title-txt">{{ title }}
+        <van-icon name="arrow-down"/>
+      </section>
+    </div>
+  </div>
+</template>
+<script>
+import leftImg from "../assets/img/title1-edit-page.png"
+
+/**
+ * 列表页面使用一级标题
+ */
+export default {
+  name: 'LamboTitle3',
+  components: {},
+  props: {
+    title: {
+      type: String,
+      default: "",
+    }
+  },
+  data() {
+    return {
+      imgSrc: leftImg,
+    }
+  },
+  methods: {},
+  created() {
+
+  }
+}
+</script>
+<style scoped>
+@import "../styles/index.less";
+
+.container {
+  display: -webkit-flex;
+  display: flex;
+  background-color: var(--scl-white-1);
+  margin-bottom: 8px;
+  padding: 0 var(--ind-padding-sm-small);
+}
+
+.column {
+  -webkit-flex: 1;
+  flex: 1;
+  margin-left: 12px;
+}
+
+.img-0 {
+  width: 32px;
+  height: 32px;
+  margin-top: 16px;
+}
+
+.filter-txt {
+  margin-top: 10px;
+  color: var(--scl-gray-2);
+  font-family: Regular;
+  font-size: var(--ind-font-size-sm);
+}
+
+.title-txt {
+  margin-top: 4px;
+  color: var(--scl-gray-1);
+  font-family: Bold;
+  font-size: var(--ind-font-size-lg);
+  margin-bottom: 14px;
+}
+</style>