task 乳山产交图标

src/components/common/nav_bar.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <div
+      :class='[background == "1"?"nav-wrap":"nav-wrap1",positionType=="fixed"?"nav-position-fixed":"nav-position-relative"]'
+      :style='{"height": 50+"px","overflow": "hidden"}'
+    >
+      <!-- // 导航栏 中间的标题 -->
+      <div class='nav-title' :style='{"line-height": 50+"px"}'>{{title}}</div>
+      <div style='display: flex; justify-content: center;flex-direction: column;height: 50px;padding-left: 2%;'>
+        <!-- //  其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按钮的显示隐藏，首页不显示 -->
+        <van-icon name="arrow-left" color="#333333" size="25" @click="onClickLeft()" />
+      </div>
+    </div>
+    <div :style='{"height": 50+"px"}' v-if="positionType == 'fixed'"></div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "nav_bar",
+    props: [
+      "background",
+      "positionType",
+      "showCapsule",
+      "title",
+    ],
+    data() {
+      return {
+        height: '',
+        navHeight:'',
+      }
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .nav-wrap {
+    width: 100%;
+    top: 0;
+    background: transparent;
+    color: #000;
+    z-index: 9999999;
+  }
+
+  .nav-wrap1 {
+    width: 100%;
+    top: 0;
+    background: linear-gradient(to bottom right,#91E1CA,#E0F4E4);
+    color: #333333;
+    z-index: 9999999;
+  }
+
+  /* 标题要居中 */
+  .nav-title {
+    position: absolute;
+    text-align: center;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    font-size: 16Px;
+  }
+
+  .nav-capsule {
+    display: flex;
+    align-items: center;
+    margin-left: 5px;
+    width: 70px;
+    justify-content: space-between;
+    height: 100%;
+  }
+
+  .navbar-v-line {
+    width: 1px;
+    height: 16px;
+    background-color: #e5e5e5;
+  }
+
+  /*.back-pre,*/
+  /*.back-home {*/
+  /*  width: 18Px;*/
+  /*  height: 25Px;*/
+  /*  margin-top: 2px;*/
+  /*  padding: 5px;*/
+  /*  border-radius: 50%;*/
+  /*}*/
+
+  .nav-capsule .back-home {
+    width: 30px;
+    height: 30px;
+    margin-top: 1.5px;
+  }
+
+  .nav-position-fixed{
+    position: fixed;
+  }
+  .nav-position-relative{
+    position: relative;
+  }
+</style>