hy-app 0.1.1

package/components/yk-dialog/yk-dialog.vue

@@ -0,0 +1,129 @@
+<template>
+  <view class="promptBox">
+    <view class="prompt">
+      <image class="promptRipple" src="../../public/icons/warning.png"></image>
+
+      <view class="promptTit">
+        {{ title }}
+      </view>
+      <view class="promptDesc"> 我是内容 </view>
+      <view class="pBtnBox">
+        <button class="pBtnCancel" @click="onCancel">取消</button>
+        <button class="pBtnOk" @click="onOk('hahahhaah')">确定</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const title = ref("我是标题");
+</script>
+
+<style lang="scss" scoped>
+.promptBox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 9999;
+
+  .prompt {
+    position: fixed;
+    width: 300px;
+    height: 234px;
+    border-radius: 16px;
+    background: linear-gradient(180deg, #e3eeff 0%, #ffffff 100%);
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 100;
+    background-size: cover;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+
+    .promptRipple {
+      position: absolute;
+      top: -50px;
+      width: 100px;
+      height: 100px;
+      z-index: -1;
+    }
+
+    .promptIcon {
+      position: absolute;
+      top: 0;
+      transform: translateY(-50%);
+      width: 110px;
+      height: 110px;
+      border-radius: 90px;
+      overflow: hidden;
+      // background: linear-gradient(149.98deg, rgba(132, 181, 255, 1) 5.7%, rgba(33, 119, 250, 1) 90.23%);
+      // box-shadow: 0px 4px 10px rgba(18, 103, 232, 0.4);
+    }
+
+    .promptTit {
+      width: 80%;
+      font-size: 20px;
+      font-family: PingFang SC;
+      font-weight: 500;
+      color: rgba(0, 0, 0, 1);
+      text-align: center;
+      margin-top: 66px;
+    }
+
+    .promptDesc {
+      height: 40px;
+      margin-top: 12px;
+      color: rgba(102, 102, 102, 1);
+      font-family: PingFang SC;
+      font-size: 14px;
+      text-align: center;
+    }
+
+    .pBtnBox {
+      width: 280px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      margin-top: 12px;
+
+      .pBtnOk {
+        width: 120px;
+        height: 44px;
+        line-height: 44px;
+        border-radius: 8px !important;
+        background: linear-gradient(
+          301.23deg,
+          rgba(71, 143, 253, 1) 0%,
+          rgba(18, 103, 232, 1) 102.96%
+        );
+        border: none;
+        color: #ffffff;
+        font-weight: 500;
+        font-size: 15px;
+      }
+
+      .pBtnCancel {
+        width: 120px;
+        height: 44px;
+        line-height: 44px;
+        border-radius: 8px;
+        background: rgba(224, 237, 255, 1);
+        color: rgba(18, 103, 232, 1);
+        font-weight: 500;
+        font-size: 15px;
+      }
+    }
+  }
+}
+
+button::after {
+  border: none;
+}
+</style>

package/components/yk-tabbar/props.ts

@@ -0,0 +1,49 @@
+export default {
+    /**
+     * tab当前值
+     * */
+    current: 0,
+    /**
+     * 文字颜色
+     * */
+    textColor: "#FFFFFF",
+    /**
+     * 底部导航栏背景颜色
+     * 支持渐变色--linear-gradient(155deg, #192b6e, #a6307c)
+     * */
+    bgColor: "linear-gradient(155deg, #192b6e, #a6307c)",
+    /**
+     * 点击突出按钮的背景颜色
+     * 支持渐变色--linear-gradient(0deg, #ffa576,#0951eb)
+     * */
+    activeColor: "linear-gradient(0deg, #ffa576,#0951eb)",
+    /**
+     * 导航栏值
+     * {
+     *     key: 唯一建值,
+     *     label: 中文名,
+     *     icon: uview-plus里面的矢量图标库
+     *     iconUrl: 图片地址
+     * }
+     * */
+    list: [
+        {
+            key: 0,
+            label: "首页",
+            icon: "home",
+            iconUrl: ""
+        },
+        {
+            key: 1,
+            label: "工具栏",
+            icon: "grid",
+            iconUrl: ""
+        },
+        {
+            key: 2,
+            label: "我的",
+            icon: "account",
+            iconUrl: ""
+        }
+    ]
+}

package/components/yk-tabbar/yk-tabbar.vue

@@ -0,0 +1,224 @@
+<template>
+  <view class="placeholder-view"></view>
+  <view class="bg">
+    <view class="custom-tabbar" :style="{'background': props.bgColor}">
+      <view class="ul">
+        <view :class="['li', 'list', current === item.key ? 'active' : '']" v-for="item in props.list" :key="item.key" @click="checkItem(item.key)">
+          <view class="bar">
+            <view class="icon">
+<!--              <text-->
+<!--                  :class="['t-icon', `custom-t-icon-${item.icon}`]"-->
+<!--              ></text>-->
+              <image
+                v-if="item.iconUrl"
+                :src="item.iconUrl"
+                style="height: 25px; width: 25px"
+              ></image>
+              <u-icon v-else :name="item.icon" :color="props.textColor" size="25"></u-icon>
+            </view>
+            <text class="text" :style="['color:' + props.textColor]">{{ item.label }}</text>
+            <text class="circle"></text>
+          </view>
+        </view>
+        <view
+            class="indicator"
+            :style="{
+              '--num': `translateX(calc(((100vw - 110rpx - ${props.list.length} * 70rpx) / ${props.list.length - 1} + 70rpx) * ${current}))`,
+              'background': activeColor
+            }"
+        ></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import prop from "./props";
+
+interface IProps {
+  current: number;
+  textColor?: string;
+  bgColor?: string;
+  activeColor?: string;
+  list: () => ([]);
+}
+const props = withDefaults(defineProps<IProps>(),{...prop})
+const emit = defineEmits(['clickTab'])
+
+const current = ref(0);
+watch(
+    () => props.current,
+    (newVal) => {
+      current.value = newVal
+    }
+)
+
+const checkItem = (index: number) => {
+  current.value = index;
+  emit("clickTab", index)
+}
+</script>
+
+<style lang="scss" scoped>
+.placeholder-view {
+  height: 135rpx;
+}
+.bg {
+  background: #F8F8F8;
+  height: 135rpx;
+  z-index: 999;
+  position: fixed;
+  bottom: 0;
+}
+.custom-tabbar {
+  margin-top: 15rpx;
+  position: relative;
+  width: 100vw;
+  height: 120rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 15rpx 15rpx 0 0;
+  padding: 0 20rpx;
+	/* #ifndef APP-PLUS-NVUE */
+  box-sizing: border-box;
+	/* #endif */
+  .ul {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20rpx;
+    .li {
+      position: relative;
+      width: 100rpx;
+      height: 70rpx;
+      z-index: 1;
+      .bar {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        width: 100%;
+        text-align: center;
+        font-weight: 500;
+        .icon {
+					/* #ifndef APP-PLUS-NVUE */
+					transition: .5s;
+					/* #endif */
+        }
+        .text {
+          position: absolute;
+          font-weight: 400;
+          font-size: .75em;
+					/* #ifndef APP-PLUS-NVUE */
+					letter-spacing: .05em;
+					transition: .5s;
+					/* #endif */
+          transform: translateY(20px) scale(0);
+        }
+        .circle {
+          position: absolute;
+					/* #ifndef APP-PLUS-NVUE */
+					display: block;
+					/* #endif */
+          width: 75rpx;
+          height: 75rpx;
+          background: transparent;
+          border-radius: 50%;
+          border: 3rpx solid #fff;
+          transform: translateY(-70rpx) scale(0);
+        }
+      }
+
+      &.active {
+        .bar {
+          .icon {
+            transform: translate(2rpx, -56rpx);
+          }
+          .text {
+            opacity: 1;
+            transform: translateY(20rpx);
+          }
+          .circle {
+						/* #ifndef APP-PLUS-NVUE */
+						margin: 0 auto;
+						transition: .5s;
+						/* #endif */
+            transition-delay: .5s;
+            transform: translate(2rpx, -56rpx) scale(1);
+          }
+        }
+      }
+    }
+  }
+}
+
+.indicator {
+  position: absolute;
+  top: -59%;
+  left: 30rpx;
+  width: 100rpx;
+  height: 100rpx;
+  border: 12rpx solid #F8F8F8;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+	/* #ifndef APP-PLUS-NVUE */
+	transition: .5s;
+	/* #endif */
+}
+
+.indicator::before {
+	/* #ifndef APP-PLUS-NVUE */
+	content: '';
+	/* #endif */
+  position: absolute;
+  top: 59%;
+  left: -45rpx;
+  width: 50rpx;
+  height: 40rpx;
+  background: transparent;
+  border-top-right-radius: 20px;
+  box-shadow: 1px -15rpx 0 #F8F8F8;
+}
+
+.indicator::after {
+	/* #ifndef APP-PLUS-NVUE */
+	content: '';
+	/* #endif */
+  position: absolute;
+  top: 58%;
+  right: -49rpx;
+  width: 50rpx;
+  height: 40rpx;
+  background: transparent;
+  border-top-left-radius: 40rpx;
+  box-shadow: -1px -15rpx 0 #F8F8F8;
+}
+
+/* #ifndef APP-PLUS-NVUE */
+.custom-tabbar .ul .li:nth-child(1).active~.indicator {
+	transform: var(--num);
+}
+
+.custom-tabbar .ul .li:nth-child(2).active~.indicator {
+	transform: var(--num);
+}
+
+.custom-tabbar .ul .li:nth-child(3).active~.indicator {
+	transform: var(--num);
+}
+
+.custom-tabbar .ul .li:nth-child(4).active~.indicator {
+	transform: var(--num);
+}
+
+.custom-tabbar .ul .li:nth-child(5).active~.indicator {
+	transform: var(--num);
+}
+/* #endif */
+</style>

package/config/color.ts

@@ -0,0 +1,6 @@
+export const ColorConfig = {
+  success: "#5ac725",
+  primary: "#3c9cff",
+  warning: "#f9ae3d",
+  error: "#f56c6c"
+};