优化 ios 样式兼容
This commit is contained in:
@@ -6,9 +6,9 @@
|
||||
}
|
||||
}"
|
||||
>
|
||||
<view class="tabbar" :class="{ 'is-dark': isDark }">
|
||||
<view class="custom-tabbar" :class="{ 'is-dark': isDark }">
|
||||
<view
|
||||
class="tabbar-item"
|
||||
class="custom-tabbar-item"
|
||||
v-for="item in list"
|
||||
:key="item.pagePath"
|
||||
@tap="router.to(item.pagePath)"
|
||||
@@ -39,6 +39,10 @@ import { ctx, isDark, parseClass, router } from "@/cool";
|
||||
import { t } from "@/locale";
|
||||
import { computed } from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "custom-tabbar"
|
||||
});
|
||||
|
||||
type Item = {
|
||||
icon: string;
|
||||
icon2: string;
|
||||
@@ -67,10 +71,10 @@ uni.hideTabBar();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tabbar {
|
||||
.custom-tabbar {
|
||||
@apply flex flex-row items-center flex-1;
|
||||
|
||||
.tabbar-item {
|
||||
&-item {
|
||||
@apply flex flex-col items-center justify-center flex-1;
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,135 +0,0 @@
|
||||
export const demo = {
|
||||
"text": "f201",
|
||||
"image-line": "ee4b",
|
||||
"price-tag-3-line": "f023",
|
||||
"price-tag-3-fill": "f022",
|
||||
"image-fill": "ee4a",
|
||||
"keyboard-box-line": "ee73",
|
||||
"keyboard-box-fill": "ee72",
|
||||
"input-field": "f47a",
|
||||
"qr-code-fill": "f03c",
|
||||
"barcode-line": "eaa2",
|
||||
"barcode-fill": "eaa1",
|
||||
"checkbox-line": "eb85",
|
||||
"checkbox-fill": "eb82",
|
||||
"radio-button-line": "f050",
|
||||
"radio-button-fill": "f04f",
|
||||
"equalizer-2-line": "f405",
|
||||
"equalizer-2-fill": "f404",
|
||||
"calendar-line": "eb27",
|
||||
"calendar-fill": "eb26",
|
||||
"calendar-schedule-fill": "f3f2",
|
||||
"calendar-schedule-line": "f3f3",
|
||||
"time-line": "f20f",
|
||||
"time-fill": "f20e",
|
||||
"toggle-line": "f219",
|
||||
"toggle-fill": "f218",
|
||||
"star-line": "f18b",
|
||||
"star-fill": "f186",
|
||||
"list-check": "eeba",
|
||||
"timeline-view": "f46f",
|
||||
"multi-image-line": "f5ee",
|
||||
"timer-fill": "f212",
|
||||
"timer-line": "f215",
|
||||
"progress-2-line": "f47e",
|
||||
"progress-2-fill": "f47d",
|
||||
"send-plane-line": "f0da",
|
||||
"send-plane-fill": "f0d9",
|
||||
"t-box-line": "f1d3",
|
||||
"t-box-fill": "f1d2",
|
||||
"edit-2-fill": "ec7f",
|
||||
"edit-2-line": "ec80",
|
||||
"layout-2-line": "ee7f",
|
||||
"layout-2-fill": "ee7e",
|
||||
"layout-column-fill": "ee8c",
|
||||
"layout-column-line": "ee8d",
|
||||
"mouse-line": "ef7d",
|
||||
"mouse-fill": "ef7c",
|
||||
"file-upload-line": "ed15",
|
||||
"file-upload-fill": "ed14",
|
||||
"page-separator": "efbd",
|
||||
"carousel-view": "f42c",
|
||||
"list-view": "f44c",
|
||||
"text-block": "f46d",
|
||||
"percent-line": "efe6",
|
||||
"percent-fill": "efe5",
|
||||
"navigation-line": "ef89",
|
||||
"navigation-fill": "ef88",
|
||||
"menu-line": "ef3e",
|
||||
"upload-line": "f250",
|
||||
"upload-fill": "f24f",
|
||||
"shield-check-fill": "f0ff",
|
||||
"shield-check-line": "f100",
|
||||
"loader-4-line": "eec6",
|
||||
"t-shirt-line": "f1d9",
|
||||
"t-shirt-fill": "f1d8",
|
||||
"add-circle-line": "ea11",
|
||||
"add-circle-fill": "ea10",
|
||||
"number-1": "efa0",
|
||||
"check-line": "eb7b",
|
||||
"check-fill": "eb7a",
|
||||
"checkbox-multiple-line": "eb89",
|
||||
"checkbox-multiple-fill": "eb88",
|
||||
"collapse-vertical-line": "f52e",
|
||||
"align-top": "ea29",
|
||||
"notification-badge-line": "ef98",
|
||||
"notification-badge-fill": "ef97",
|
||||
"input-method-line": "ee60",
|
||||
"input-method-fill": "ee5f",
|
||||
"text-snippet": "f46e",
|
||||
"window-2-line": "f2c4",
|
||||
"window-2-fill": "f2c3",
|
||||
"qr-code-line": "f03d",
|
||||
"message-2-line": "ef44",
|
||||
"message-2-fill": "ef43",
|
||||
"chat-check-line": "eb55",
|
||||
"chat-check-fill": "eb54",
|
||||
"chat-4-line": "eb53",
|
||||
"chat-4-fill": "eb52",
|
||||
"seo-line": "f3a4",
|
||||
"seo-fill": "f3a3",
|
||||
"crop-line": "ec02",
|
||||
"crop-fill": "ec01",
|
||||
"shadow-line": "f45a",
|
||||
"shadow-fill": "f459",
|
||||
"puzzle-2-line": "f450",
|
||||
"puzzle-2-fill": "f44f",
|
||||
"markdown-line": "ef1e",
|
||||
"markdown-fill": "ef1d",
|
||||
"stacked-view": "f464",
|
||||
"dropdown-list": "f3c3",
|
||||
"increase-decrease-line": "ee53",
|
||||
"increase-decrease-fill": "ee52",
|
||||
"timer-2-line": "f211",
|
||||
"timer-2-fill": "f210",
|
||||
"parent-line": "efca",
|
||||
"parent-fill": "efc9",
|
||||
"function-add-line": "f4df",
|
||||
"function-add-fill": "f4de",
|
||||
"error-warning-line": "eca1",
|
||||
"error-warning-fill": "eca0",
|
||||
"arrow-up-box-line": "f562",
|
||||
"arrow-up-box-fill": "f561",
|
||||
"layout-bottom-fill": "ee8a",
|
||||
"layout-right-fill": "ee9a",
|
||||
"layout-right-line": "ee9b",
|
||||
"layout-top-fill": "eea0",
|
||||
"layout-top-line": "eea1",
|
||||
"layout-left-line": "ee94",
|
||||
"layout-left-fill": "ee93",
|
||||
"layout-top-2-line": "ee9f",
|
||||
"layout-top-2-fill": "ee9e",
|
||||
"layout-right-2-line": "ee99",
|
||||
"layout-right-2-fill": "ee98",
|
||||
"layout-bottom-2-line": "ee89",
|
||||
"layout-bottom-2-fill": "ee88",
|
||||
"layout-left-2-line": "ee92",
|
||||
"layout-left-2-fill": "ee91",
|
||||
"layout-row-fill": "ee9c",
|
||||
"layout-row-line": "ee9d",
|
||||
"table-fill": "f1dd",
|
||||
"table-line": "f1de",
|
||||
"layout-bottom-line": "ee8b",
|
||||
"picture-in-picture-line": "eff4",
|
||||
"picture-in-picture-fill": "eff3"
|
||||
};
|
||||
@@ -1,3 +1,2 @@
|
||||
@import "./demo/index.scss";
|
||||
@import "./iconfont/index.scss";
|
||||
@import "./remixicon/index.scss";
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import { demo } from "./demo";
|
||||
import { iconfont } from "./iconfont";
|
||||
import { remixicon } from "./remixicon";
|
||||
|
||||
export const icons = {
|
||||
demo,
|
||||
iconfont,
|
||||
remixicon
|
||||
};
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -715,5 +715,80 @@ export const remixicon = {
|
||||
"font-size": "ed8d",
|
||||
"font-size-2": "ed8c",
|
||||
"font-color": "ed8b",
|
||||
"node-tree": "ef90"
|
||||
"node-tree": "ef90",
|
||||
"price-tag-3-line": "f023",
|
||||
"price-tag-3-fill": "f022",
|
||||
"input-field": "f47a",
|
||||
"timeline-view": "f46f",
|
||||
"progress-2-line": "f47e",
|
||||
"progress-2-fill": "f47d",
|
||||
"t-box-line": "f1d3",
|
||||
"t-box-fill": "f1d2",
|
||||
"edit-2-fill": "ec7f",
|
||||
"edit-2-line": "ec80",
|
||||
"layout-2-line": "ee7f",
|
||||
"layout-2-fill": "ee7e",
|
||||
"layout-column-fill": "ee8c",
|
||||
"layout-column-line": "ee8d",
|
||||
"mouse-line": "ef7d",
|
||||
"mouse-fill": "ef7c",
|
||||
"file-upload-line": "ed15",
|
||||
"file-upload-fill": "ed14",
|
||||
"page-separator": "efbd",
|
||||
"carousel-view": "f42c",
|
||||
"list-view": "f44c",
|
||||
"text-block": "f46d",
|
||||
"percent-line": "efe6",
|
||||
"percent-fill": "efe5",
|
||||
"upload-fill": "f24f",
|
||||
"t-shirt-line": "f1d9",
|
||||
"t-shirt-fill": "f1d8",
|
||||
"number-1": "efa0",
|
||||
"check-fill": "eb7a",
|
||||
"checkbox-multiple-line": "eb89",
|
||||
"checkbox-multiple-fill": "eb88",
|
||||
"collapse-vertical-line": "f52e",
|
||||
"align-top": "ea29",
|
||||
"window-2-line": "f2c4",
|
||||
"window-2-fill": "f2c3",
|
||||
"seo-line": "f3a4",
|
||||
"seo-fill": "f3a3",
|
||||
"shadow-line": "f45a",
|
||||
"shadow-fill": "f459",
|
||||
"puzzle-2-line": "f450",
|
||||
"puzzle-2-fill": "f44f",
|
||||
"markdown-line": "ef1e",
|
||||
"markdown-fill": "ef1d",
|
||||
"stacked-view": "f464",
|
||||
"dropdown-list": "f3c3",
|
||||
"timer-2-line": "f211",
|
||||
"timer-2-fill": "f210",
|
||||
"parent-line": "efca",
|
||||
"parent-fill": "efc9",
|
||||
"function-add-line": "f4df",
|
||||
"function-add-fill": "f4de",
|
||||
"arrow-up-box-line": "f562",
|
||||
"arrow-up-box-fill": "f561",
|
||||
"layout-bottom-fill": "ee8a",
|
||||
"layout-right-fill": "ee9a",
|
||||
"layout-right-line": "ee9b",
|
||||
"layout-top-fill": "eea0",
|
||||
"layout-top-line": "eea1",
|
||||
"layout-left-line": "ee94",
|
||||
"layout-left-fill": "ee93",
|
||||
"layout-top-2-line": "ee9f",
|
||||
"layout-top-2-fill": "ee9e",
|
||||
"layout-right-2-line": "ee99",
|
||||
"layout-right-2-fill": "ee98",
|
||||
"layout-bottom-2-line": "ee89",
|
||||
"layout-bottom-2-fill": "ee88",
|
||||
"layout-left-2-line": "ee92",
|
||||
"layout-left-2-fill": "ee91",
|
||||
"layout-row-fill": "ee9c",
|
||||
"layout-row-line": "ee9d",
|
||||
"table-fill": "f1dd",
|
||||
"table-line": "f1de",
|
||||
"layout-bottom-line": "ee8b",
|
||||
"picture-in-picture-line": "eff4",
|
||||
"picture-in-picture-fill": "eff3"
|
||||
};
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('不同类型')">
|
||||
<view class="flex flex-row">
|
||||
<view class="flex flex-row flex-wrap">
|
||||
<cl-tag type="primary">{{ t("主要") }}</cl-tag>
|
||||
<cl-tag type="success">{{ t("成功") }}</cl-tag>
|
||||
<cl-tag type="warn">{{ t("警告") }}</cl-tag>
|
||||
@@ -38,7 +38,7 @@
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('镂空')">
|
||||
<view class="flex flex-row">
|
||||
<view class="flex flex-row flex-wrap">
|
||||
<cl-tag type="primary" plain>{{ t("主要") }}</cl-tag>
|
||||
<cl-tag type="success" plain>{{ t("成功") }}</cl-tag>
|
||||
<cl-tag type="warn" plain>{{ t("警告") }}</cl-tag>
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<view class="mb-3">
|
||||
<cl-input-otp
|
||||
:length="isLength ? 6 : 4"
|
||||
:disabled="isDisabled"
|
||||
@@ -34,9 +33,8 @@
|
||||
}"
|
||||
@done="toDone"
|
||||
></cl-input-otp>
|
||||
</view>
|
||||
|
||||
<cl-list border>
|
||||
<cl-list border :pt="{ className: 'mt-5' }">
|
||||
<cl-list-item :label="t('长度为6')">
|
||||
<cl-switch v-model="isLength"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
@@ -60,7 +60,6 @@
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<view class="mb-3">
|
||||
<cl-input
|
||||
v-model="content"
|
||||
:border="isBorder"
|
||||
@@ -84,9 +83,8 @@
|
||||
}
|
||||
}"
|
||||
></cl-input>
|
||||
</view>
|
||||
|
||||
<cl-list border>
|
||||
<cl-list border :pt="{ className: 'mt-5' }">
|
||||
<cl-list-item :label="t('边框')">
|
||||
<cl-switch v-model="isBorder"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('数字键盘')">
|
||||
<view class="mb-3">
|
||||
<view class="mb-3 overflow-visible">
|
||||
<cl-input type="number" v-model="content"></cl-input>
|
||||
</view>
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('车牌号键盘')">
|
||||
<view class="flex mb-3 justify-center flex-row">
|
||||
<view class="flex mb-3 justify-center flex-row overflow-visible">
|
||||
<cl-input-otp
|
||||
input-type="text"
|
||||
:length="8"
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<view class="mb-3">
|
||||
<cl-textarea
|
||||
v-model="content"
|
||||
:border="isBorder"
|
||||
@@ -25,9 +24,8 @@
|
||||
}
|
||||
}"
|
||||
></cl-textarea>
|
||||
</view>
|
||||
|
||||
<cl-list border>
|
||||
<cl-list border :pt="{ className: 'mt-5' }">
|
||||
<cl-list-item :label="t('边框')">
|
||||
<cl-switch v-model="isBorder"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 自定义底部导航栏 -->
|
||||
<tabbar></tabbar>
|
||||
<custom-tabbar></custom-tabbar>
|
||||
|
||||
<!-- 主题设置 -->
|
||||
<locale-set :ref="refs.set('localeSet')"></locale-set>
|
||||
@@ -92,7 +92,7 @@ import { useUi } from "@/uni_modules/cool-ui";
|
||||
import { config } from "@/config";
|
||||
import LocaleSet from "@/components/locale-set.uvue";
|
||||
import SizeSet from "@/components/size-set.uvue";
|
||||
import Tabbar from "@/components/tabbar.uvue";
|
||||
import CustomTabbar from "@/components/tabbar.uvue";
|
||||
|
||||
const ui = useUi();
|
||||
const refs = useRefs();
|
||||
|
||||
@@ -237,7 +237,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 自定义底部导航栏 -->
|
||||
<tabbar></tabbar>
|
||||
<custom-tabbar></custom-tabbar>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
@@ -245,7 +245,7 @@
|
||||
import { router, userInfo, useStore } from "@/cool";
|
||||
import { t } from "@/locale";
|
||||
import { useUi } from "@/uni_modules/cool-ui";
|
||||
import Tabbar from "@/components/tabbar.uvue";
|
||||
import CustomTabbar from "@/components/tabbar.uvue";
|
||||
|
||||
const { user } = useStore();
|
||||
const ui = useUi();
|
||||
|
||||
@@ -21,12 +21,12 @@
|
||||
</view>
|
||||
|
||||
<!-- 自定义底部导航栏 -->
|
||||
<tabbar></tabbar>
|
||||
<custom-tabbar></custom-tabbar>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Tabbar from "@/components/tabbar.uvue";
|
||||
import CustomTabbar from "@/components/tabbar.uvue";
|
||||
import { router } from "@/cool";
|
||||
import { t } from "@/locale";
|
||||
import { useUi } from "@/uni_modules/cool-ui";
|
||||
|
||||
@@ -233,13 +233,13 @@ function animateCursor(isIncreasing: boolean) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cl-input-otp {
|
||||
@apply relative;
|
||||
@apply relative overflow-visible;
|
||||
|
||||
&__inner {
|
||||
@apply absolute top-0 h-full z-10;
|
||||
opacity: 0;
|
||||
left: -100%;
|
||||
width: 200%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__list {
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { isDark, parseClass, parsePt } from "@/cool";
|
||||
import { isDark, parseClass, parsePt, rpx2px } from "@/cool";
|
||||
import type { PassThroughProps } from "../../types";
|
||||
import { vibrate } from "@/uni_modules/cool-vibrate";
|
||||
import { useForm } from "../../hooks";
|
||||
@@ -145,7 +145,7 @@ const rect = computed<Rect>(() => {
|
||||
width: width + "rpx",
|
||||
size: size + "rpx",
|
||||
left: left + "rpx",
|
||||
translateX: translateX + "rpx"
|
||||
translateX: rpx2px(translateX) + "px"
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user