优化 ios 样式兼容

This commit is contained in:
icssoa
2025-09-03 10:01:28 +08:00
parent 2f054c6638
commit 6d75de2cc7
17 changed files with 165 additions and 234 deletions

View File

@@ -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

View File

@@ -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"
};

View File

@@ -1,3 +1,2 @@
@import "./demo/index.scss";
@import "./iconfont/index.scss";
@import "./remixicon/index.scss";

View File

@@ -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

View File

@@ -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"
};

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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"

View File

@@ -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>

View File

@@ -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();

View File

@@ -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();

View File

@@ -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";

View File

@@ -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 {

View File

@@ -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"
};
});