feat: 标题栏变化

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### 🌟 新功能
 范围|描述|commitId
 --|--|--
+ - | 提交到本地 | [9cbe411](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/9cbe411)
  - | db store | [6414c4f](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/6414c4f)
  - | indexedDB | [687394e](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/687394e)
  富文本插件 | 富文本插件demo测试 | [ed3d644](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/ed3d644)

package.json

@@ -65,7 +65,7 @@
     "alloyfinger": "^0.1.16",
     "autoprefixer": "^8.0.0",
     "core-js": "^3.6.5",
-    "dayjs": "^1.10.5",
+    "dayjs": "^1.10.6",
     "postcss": "^7",
     "postcss-loader": "^6.1.1",
     "regenerator-runtime": "^0.12.1",
@@ -93,6 +93,7 @@
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-prettier": "^6.0.0",
+    "autoprefixer": "^8.0.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-import": "^1.11.0",
     "commitizen": "^4.0.3",
@@ -108,11 +109,13 @@
     "mini-types": "*",
     "miniprogram-api-typings": "*",
     "node-sass": "^6.0.0",
+    "postcss": "^8.3.5",
     "postcss-class-rename": "^1.0.1",
     "postcss-comment": "^2.0.0",
     "prettier": "^2.2.1",
     "sass": "^1.35.1",
     "sass-loader": "10",
+    "tailwindcss": "^2.2.4",
     "vue-cli-plugin-commitlint": "~1.0.12",
     "vue-cli-plugin-mock": "^1.0.3",
     "vue-template-compiler": "^2.6.11"

src/components/Globals/index.vue

@@ -0,0 +1,47 @@
+<!--
+ * @Author: aBin
+ * @email: binbin0314@126.com
+ * @Date: 2021-07-19 10:52:05
+ * @LastEditors: aBin
+ * @LastEditTime: 2021-07-19 11:09:23
+-->
+<template>
+  <view>
+    <u-card margin="0" :show-head="false" :show-foot="false">
+      <view slot="body">
+        <view class="u-flex u-col-between p-0">
+          <view class="u-body-item-title u-line-2">瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半</view>
+        </view>
+      </view>
+    </u-card>
+  </view>
+</template>
+<script>
+export default {
+  name: 'Global',
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.u-card-wrap {
+  background-color: $u-bg-color;
+  padding: 1px;
+}
+
+.u-body-item {
+  font-size: 32rpx;
+  color: #333;
+  padding: 20rpx 10rpx;
+}
+
+.u-body-item image {
+  width: 120rpx;
+  flex: 0 0 120rpx;
+  height: 120rpx;
+  border-radius: 8rpx;
+  margin-left: 12rpx;
+}
+</style>

src/components/Title/Title.vue

@@ -0,0 +1,46 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-07-19 11:35:03
+ * @LastEditTime: 2021-07-19 17:48:02
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \TALL-MUI-3\src\components\Title\titleBar.vue
+-->
+<template>
+  <view>
+    <u-navbar back-text="返回">
+      <view class="flex justify-center flex-1">
+        <view v-if="true">{{ title }}</view>
+        <view v-else>{{ titleBar }}</view>
+      </view>
+      <view class="mr-2" slot="right">
+        <u-icon class="m-1" name="checkmark-circle"></u-icon>
+        <u-icon class="m-1" name="reload"></u-icon>
+        <u-icon class="m-1" name="home"></u-icon>
+        <u-icon class="m-1" name="more-dot-fill"></u-icon>
+      </view>
+    </u-navbar>
+    你好
+  </view>
+</template>
+<script>
+export default {
+  name: 'Title',
+  mounted() {},
+  data() {
+    return {
+      title: '加载中...',
+      titleBar: '项目名称',
+      Istrue: 'false',
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.slot-warp {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

src/pages.json

@@ -3,7 +3,8 @@
     {
       "path": "pages/index/index",
       "style": {
-        "navigationBarTitleText": "uni-app"
+        "navigationStyle": "custom" ,
+			  "navigationBarTextStyle": "white"
       }
     },
     {
@@ -23,6 +24,13 @@
       "style": {
         "navigationBarTitleText": "pinch 测试"
       }
+    },
+    {
+      "path": "components/Title/Title",
+      "style": {
+        "navigationStyle": "custom" ,
+			  "navigationBarTextStyle": "white"
+      }
     }
   ],
   "globalStyle": {

src/pages/index/index.vue

@@ -1,6 +1,15 @@
+<!--
+ * @Author: aBin
+ * @email: binbin0314@126.com
+ * @Date: 2021-07-19 10:09:22
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-19 14:49:07
+-->
 <template>
-  <view class="container p-4">
-    <view class="mt-5">
+  <view class="container p-4 bg-gray-100">
+    <Title />
+    <Globals />
+    <!-- <view class="mt-5">
       <u-button type="primary" size="default" @click="$u.route('/pages/plugin-test/plugin-test')">iframe 验证</u-button>
     </view>
     <view class="my-3">
@@ -8,16 +17,22 @@
     </view>
     <view class="my-3">
       <u-button type="error" size="default" @click="openPage">pinch 事件验证</u-button>
-    </view>
+    </view> -->
   </view>
 </template>
 
 <script>
+import Globals from 'components/Globals/index.vue';
+import Title from 'components/Title/Title.vue';
 export default {
+  components: { Globals, Title },
   data() {
     return { title: 'Hello' };
   },
-  onLoad() {},
+  onLoad() {
+    console.log(this.$u.config.v);
+    // this.openPage();
+  },
   methods: {
     openPage() {
       console.log('open');