主页

wxmp/src/App.vue

@@ -9,6 +9,76 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
+@import "uni";
 /*每个页面公共css */
+@each $padMar, $pm in (mar:margin, pad:padding) {
+  @each $v in (8, 10, 16, 20, 32, 48, 64) {
+    @each $pos, $p in (l:left, r:right, t:top, b:bottom) {
+      .#{$padMar}-#{$pos+$v} {
+        #{$pm}-#{$p}: #{$v}px
+      }
+    }
+    .#{$padMar}-#{$v} {
+      #{$pm}: #{$v}px
+    }
+    //纵向
+    .#{$padMar}-v#{$v} {
+      #{$pm}-top: #{$v}px;
+      #{$pm}-bottom: #{$v}px;
+    }
+    //横向
+    .#{$padMar}-h#{$v} {
+      #{$pm}-left: #{$v}px;
+      #{$pm}-right: #{$v}px;
+    }
+  }
+}
+
+.flex {
+  display: flex;
+  align-items: center;
+
+  &.spb {
+    justify-content: space-between;
+  }
+
+  &.wrap {
+    flex-wrap: wrap;
+  }
+
+  &.column {
+    flex-direction: column;
+  }
+
+  &.start {
+    align-items: flex-start;
+  }
+}
+
+.fill {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.shrink {
+  flex-shrink: 0;
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+
+  &.circle {
+    overflow: hidden;
+    border-radius: 50%;
+  }
+}
+
+.btn {
+  color: $uni-color-primary;
+  font-size: 14px;
+}
+
 </style>

wxmp/src/components/AiBottom.vue

@@ -0,0 +1,60 @@
+<template>
+  <section class="AiBottom">
+    <div class="transport">
+      <slot>
+        <div class="text" :class="{circle}">{{ text }}</div>
+      </slot>
+    </div>
+    <div class="fixed" @click="$emit('click')">
+      <slot>
+        <div class="text" :class="{circle}">{{ text }}</div>
+      </slot>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiBottom",
+  props: {
+    text: {default: ""},
+    circle: Boolean,
+    background: {default: "inherit"}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiBottom {
+  .fixed {
+    position: fixed;
+    bottom: 0;
+    width: 100vw;
+    z-index: 202301031019;
+    background-color: #fff;
+  }
+
+  .text {
+    width: 100%;
+    font-family: PingFangSC-Medium, PingFang SC;
+    line-height: 56px;
+    text-align: center;
+    font-weight: 500;
+    color: #FFFFFF;
+    background: #1365DD;
+    box-shadow: inset 0 1px 0 0 #EEEEEE;
+
+    &.circle {
+      border-radius: 20px;
+      line-height: 40px;
+      flex-shrink: 0;
+      padding: 0 35px;
+      width: auto;
+    }
+  }
+
+  .transport {
+    opacity: 0;
+  }
+}
+</style>

wxmp/src/pages/home.vue

@@ -1,17 +1,30 @@
 <template>
   <section class="home">
-    <open-data type="userAvatarUrl"/>
-    <open-data type="userNickName"/>
+    <div class="flex pad-h16 pad-v8">
+      <open-data class="avatar circle shrink" type="userAvatarUrl"/>
+      <open-data class="mar-l16 fill" type="userNickName"/>
+      <div class="btn">个人中心</div>
+    </div>
+    <ai-bottom>
+      <div class="btn">个人中心</div>
+    </ai-bottom>
   </section>
 </template>
 
 <script>
+import AiBottom from "../components/AiBottom";
+
 export default {
   name: "home",
+  components: {AiBottom},
   data() {
     return {}
   },
-  methods: {},
+  methods: {
+    handleGoodNav() {
+
+    }
+  },
   created() {
   }
 }
@@ -19,5 +32,6 @@ export default {
 
 <style lang="scss" scoped>
 .home {
+  height: 100vh;
 }
 </style>