丰都大屏标题搞定

components/layout/AiDvWrapper/AiDvWrapper.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="AiDvWrapper" :class="'AiDvWrapper' + theme">
     <dv-full-screen-container>
-      <div class="viewPanel column" flex :style="{backgroundImage:`url('${background}')`}">
+      <div class="viewPanel column" flex :style="{backgroundImage}">
         <slot v-if="$scopedSlots.head" name="head" v-bind="{...$props,...$data}"/>
         <component v-else :is="headerComponent" v-bind="{...$props,...$data}" v-model="active"
                    @fullscreen="handleFullScreen" @setting="e=>dialog=e"
@@ -62,7 +62,8 @@ export default {
     headerComponent: v => ({
       classic: Classic,
       black: Primary,
-    }[v.type])
+    }[v.type]),
+    backgroundImage: v => v.background ? `url(${v.background})` : undefined
   },
   watch: {
     title: {

project/fengdu/AppBIBoard/AppBIBoard.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="AppBIBoard" :class="{fullscreen}">
     <ai-fit-view>
-      <ai-dv-wrapper ref="fddv">
+      <ai-dv-wrapper ref="fddv" title="丰收号-家庭互助" :instance="instance">
         <template v-slot:head="head">
           <fengdu-head v-bind="head" @fullscreen="handleFullScreen" @setting="handleSetting"/>
         </template>
@@ -47,5 +47,9 @@ export default {
     bottom: 0;
     right: 0;
   }
+
+  :deep(.viewPanel) {
+    background-image: url("./assets/img_bg.png");
+  }
 }
 </style>

project/fengdu/AppBIBoard/components/fengduHead.vue

@@ -1,11 +1,13 @@
 <template>
   <section class="fengduHead">
-    <div flex class="content">
+    <div class="content flex">
-      <b class="headerTitle" v-text="title"/>
+      <ai-area class="fill" v-model="current" :mask="false">
-      <el-tabs class="fill" v-model="current" @tab-click="$emit('change', current)">
+        <template slot-scope="{areaname}">
-        <el-tab-pane v-for="tab in tabs" :key="tab.id" :label="tab.label" :name="tab.id"/>
+          <el-input class="areaPicker" :value="areaname" readonly suffix-icon="el-icon-arrow-down"/>
-      </el-tabs>
+        </template>
-      <div class="rightPane" flex>
+      </ai-area>
+      <div class="headerTitle" v-text="title"/>
+      <div class="rightPane fill" flex>
         <div class="item" v-text="currentTime"/>
         <div class="item setting mar-l24" @click.stop="$emit('setting',true)"/>
         <div class="item fullscreen mar-l14" @click.stop="$emit('fullscreen')"/>
@@ -30,16 +32,6 @@ export default {
   computed: {
     tabs: v => [
       ...v.views,
-      // {label: "测试哦哦", id: 1},
-      // {label: "测试哦哦", id: 2},
-      // {label: "测试哦哦", id: 3},
-      // {label: "测试哦哦", id: 4},
-      // {label: "测试哦哦", id: 5},
-      // {label: "测试哦哦", id: 6},
-      // {label: "测试哦哦", id: 7},
-      // {label: "测试哦哦", id: 8},
-      // {label: "测试哦哦", id: 9},
-      // {label: "测试哦哦", id: 10},
     ]
   },
   data() {
@@ -71,12 +63,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@font-face {
+  font-family: YouSheBiaoTiHei;
+  src: url("https://cdn.cunwuyun.cn/fonts/YouSheBiaoTiHei-2.ttf");
+}
+
 .fengduHead {
   width: 100%;
   height: 96px;
-  padding: 0 48px;
+  padding: 0 24px;
   box-sizing: border-box;
   color: #fff;
+  position: relative;
+  background-repeat: no-repeat;
+  background-image: url("../assets/bg-lighting.png");
+  background-position:top center;
 
   .content {
     height: 100%;
@@ -85,79 +86,37 @@ export default {
     font-family: PingFang-SC;
 
     .headerTitle {
-      font-family: fangfang;
+      font-family: YouSheBiaoTiHei;
-      font-size: 38px;
+      font-size: 44px;
-      font-weight: 400;
+      letter-spacing: 4px;
-      line-height: 62px;
+      line-height: 48px;
-      letter-spacing: 1.52px;
+      background-image: linear-gradient(to bottom, #fff, rgba(122, 232, 254, 1));
-      color: #fff;
+      background-size: 100% 100%;
-    }
-
-    :deep(.el-tabs) {
-      margin-left: 92px;
-
-      .el-tabs__header {
-        margin-bottom: 0;
-      }
-
-      .el-tabs__nav-wrap {
-        padding: 0 24px;
-
-        &:after {
-          content: none;
-        }
-      }
-
-      .el-tabs__active-bar {
-        width: 88px;
-        background: linear-gradient(270deg, #02feff00 0%, #02feffff 51%, #02feff00 100%);
-      }
-
-      .el-tabs__item {
-        color: #fff;
-        font-size: 20px;
-        font-weight: 400;
-        font-family: PingFang-SC;
-        user-select: none;
-
-        &.is-active {
-          color: #02FEFF;
-        }
-      }
-
-      .el-tabs__nav-prev {
-        padding-right: 14px;
-        background-image: linear-gradient(270deg, #0b0d0cff 0%, #0f3031ff 72%, #02feffff 100%);
-
       background-repeat: no-repeat;
-        background-position: right center;
+      background-clip: text;
-        background-size: 6px 32px;
+      color: transparent;
-
-        .el-icon-arrow-left:before {
-          color: #02FEFF;
-          content: "◀";
-        }
     }
 
+    :deep(.areaPicker) {
+      max-width: 300px;
 
-      .el-tabs__nav-next {
+      input {
-        padding-left: 14px;
+        background: rgba(0, 54, 82, 0.9);
-        background-image: linear-gradient(270deg, #02feffff 0%, #0f3031ff 28%, #0b0d0cff 100%);
+        border: 1px solid rgba(42, 122, 146, 0.7);
-        background-repeat: no-repeat;
+        border-radius: 2.2px;
-        background-position: left center;
+        color: #B3DDE5;
-        background-size: 6px 32px;
+        cursor: pointer;
-
-        .el-icon-arrow-right:before {
-          color: #02FEFF;
-          content: "▶";
       }
+
+      .el-input__suffix {
+        color: #B3DDE5;
       }
     }
   }
 
   .rightPane {
-    margin-left: 75px;
     padding: 0 11px 0 0;
+    justify-content: flex-end;
 
     .item {
       padding-left: 30px;

ui/packages/common/AiArea.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="ai-area">
-    <div v-if="inputClicker" @click="chooseArea" class="input-clicker">
+    <div v-if="inputClicker&&!$scopedSlots.default" @click="chooseArea" class="input-clicker">
       <el-row type="flex" justify="space-between">
         <div class="prepend">
           <i style="font-size: 16px" class="iconfont iconLocation"/>
@@ -10,13 +10,15 @@
         <i class="iconfont iconChange pad-r10"/>
       </el-row>
     </div>
-    <el-button v-else-if="!customClicker" class="area-btn" type="primary" size="mini" @click="chooseArea">
+    <el-button v-else-if="!customClicker&&!$scopedSlots.default" class="area-btn" type="primary" size="mini"
+               @click="chooseArea">
       {{ btnShowArea ? selectedName : "切换地区" }}
     </el-button>
     <a class="custom-clicker" v-else @click="chooseArea">
       <slot :areaname="selectedName" :fullname="fullName" :id="selected"/>
     </a>
-    <ai-dialog :visible.sync="dialog" title="选择地区" width="60%" @onConfirm="confirmArea" @open="selected=(value||'')">
+    <ai-dialog :visible.sync="dialog" title="选择地区" width="60%" @onConfirm="confirmArea" :modal="mask"
+               @open="selected=(value||'')">
       <ai-highlight content="您当前选择&nbsp;@v" :value="selectedName" color="#333" bold/>
       <div class="area_edge">
         <div class="area-box" v-for="ops in showOps">
@@ -65,7 +67,8 @@ export default {
     showBadge: {type: Boolean, default: true},
     value: String,
     valueLevel: {type: [Number, String], default: -1},
-    root: String
+    root: String,
+    mask: {type: Boolean, default: true}
   },
   data() {
     return {