登陆界面

src/components/common/Tatle.vue

+<!--
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-04 16:24:00
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-04 19:20:56
+ * @FilePath: \mcep-h5\src\components\common\Tatle.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <!-- <div> -->
+    <div  class ="d-tatle">
+     <van-row class="el-icon-arrow-down">
+       <van-col  span="9"><van-icon name="arrow-left" /></van-col>
+       <van-col  span="15">{{tatle}}</van-col>
+   </van-row> 
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from "vue-property-decorator";
+/*
+* title
+*/
+@Component({
+  name: "Tatle",
+})
+export default class Tatle extends Vue {
+    @Prop({ default: "" }) tatle: string | undefined
+}
+</script>
+<style scoped lang="scss">
+.van-col--9{
+  margin-top: 5%;
+}
+.van-col--15{
+  margin-top: 5%;
+}
+
+.d-tatle{
+  height: 50PX;
+  background: linear-gradient(90deg, rgba(118, 190, 250, 1) 0%, rgba(54, 114, 241, 1) 99%);
+}
+</style>

src/main.ts

+/*
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-04 15:41:06
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-04 17:03:33
+ * @FilePath: \mcep-h5\src\main.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
@@ -22,6 +30,7 @@ import nativeService from "@/services/native.service";
 import { Step, Steps } from 'vant';
 import vueEsign from 'vue-esign';
 import Vconsole from 'vconsole';
+// import { VanComponent } from "vant/types/component"
 
 Vue.use(vueEsign)
 Vue.use(Step);

src/services/component-vue.service.ts

+/*
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-04 15:41:06
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-04 17:42:48
+ * @FilePath: \mcep-h5\src\services\component-vue.service.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import Vue from "vue";
 import { Button, Cell, CellGroup, Icon, Col, Row, Popup, Toast, Form, Field, Checkbox, CheckboxGroup, RadioGroup, Radio, Search, Picker, DatetimePicker, Loading, Dialog, NavBar, Tab, Tabs, IndexBar, IndexAnchor, Switch, List, PullRefresh } from "vant";
 import TitleBar from "@/components/general/TitleBar.vue";
@@ -12,6 +20,8 @@ import TabNav from "@/components/general/TabNav.vue";
 import BaseList from "@/components/general/BaseList.vue";
 import AnchorNav from "@/components/general/AnchorNav.vue";
 import * as echarts from "echarts";
+import Tatle  from "@/components/common/Tatle.vue";
+import ant from "ant-design-vue/es/locale/zh_CN"
 
 declare module "vue/types/vue" {
   interface Vue {
@@ -76,6 +86,7 @@ class ComponentVueService {
     Vue.component("tab-nav", TabNav);
     Vue.component("base-list", BaseList);
     Vue.component("anchor-nav", AnchorNav);
+    Vue.component("tatle-bar", Tatle);
   }
 }
 const componentService = new ComponentVueService();