{item.name}
+ );
+ };
+
+ const renderImageCardItem = (item: UploadFileItem, index: number) => {
+ const imageCard = (
+
+ {item.thumbnailUrl ? renderImage(item, index) : renderFileName(item, index)}
+ {(item.status === "waiting" || item.status === "progress" || item.status === "fail") && (
+
+ );
+ return (
+
+ {item.status === "waiting" && (
+
+ )}
+ {t('waiting')}
+ )}
+ {item.status === "progress" && (
+ <>
+
+ {item.percent ? `${item.percent}%` : t('uploading')}
+
+
+ )}
+ {item.status === "fail" && (
+ <>
+ {t('failed')}
+
+ )}
+ handleFileItemClick(item, index, e),
+ }}>
+ {withDirectives(imageCard, [[
+ vOnLongPress,
+ (evt: TouchEvent) => handleLongPress(getFileItemCtx(item, index), evt),
+ '',
+ { interceptClick: true, preventDefaultContextMenu: props.longPressAction.value !== 'none' },
+ ]])}
+ {!props.readonly.value && (
+
+ );
+ };
+
+ const renderDetailItem = (item: UploadFileItem, index: number) => {
+ const detailItem = (
+ !props.disabled.value && handleDeleteClick(item, index, e), ["stop"])
+ }>
+ )}
+
+
+ );
+ return (
+
+
+
+
+
+ {item.name || t('unnamedFile')}
+
+
+ {item.status === "waiting" ? (
+ {t('waiting')}
+ ) : item.status === "progress" ? (
+
+ {t('uploading') + (item.percent ? ` - ${item.percent}%` : "")}
+
+ ) : item.status === "fail" ? (
+ {t('failed')}
+ ) : (
+ <>
+ {item.size && {formatFileSize(item.size)}}
+ {item.uploadTime && {item.uploadTime || ""}}
+
+ )}
+
+ handleFileItemClick(item, index, e),
+ }}>
+ {withDirectives(detailItem, [[
+ vOnLongPress,
+ (evt: TouchEvent) => handleLongPress(getFileItemCtx(item, index), evt),
+ '',
+ { interceptClick: true, preventDefaultContextMenu: props.longPressAction.value !== 'none' },
+ ]])}
+
+ );
+ };
+
+ const renderAddBtn = () => {
+ if (props.readonly.value || props.maxCount.value > 0 && props.maxCount.value <= displayFiles.value.length) {
+ return;
+ }
+ const defaultAddBtn = (
+ handleMoreBtnClick(item, index, e)}>
+
+
+ {slots.addBtnContent ? slots.addBtnContent() : (
+
+ )}
+
+ );
+ return (
+
+ {slots.addBtn ? slots.addBtn() : (slots.default ? slots.default : defaultAddBtn)}
+
+ );
+ };
+
+ expose({
+ displayFiles,
+ toUploadFiles,
+ uploading,
+ uploaderContext,
+ triggerUpload,
+ uploadFiles,
+ executeContextMenuItem,
+
+ setPropValue,
+ instance: getCurrentInstance(),
+ });
+
+ return () => {
+ return (
+ <>
+
+
+ {renderContextMenuList({
+ onDelete: (ctx) => handleDeleteClick(ctx.file, ctx.index),
+ onPreview: (ctx) => doDefaultPreview(ctx.file, ctx.index),
+ })}
+
+ );
+ };
+ }
+
+});
diff --git a/packages/mobile-ui-vue/components/adv-uploader/src/adv-uploader.props.ts b/packages/mobile-ui-vue/components/adv-uploader/src/adv-uploader.props.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2adff9885557cfb45e6982954ac558051021a98b
--- /dev/null
+++ b/packages/mobile-ui-vue/components/adv-uploader/src/adv-uploader.props.ts
@@ -0,0 +1,320 @@
+/**
+ * Copyright (c) 2020 - present, Inspur Genersoft Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ExtractPropTypes, PropType } from 'vue';
+import {
+ UploadFileItem, FileValidationProblem, HttpMethod, UploadResponseData, CustomUploadFileContext,
+ FileReadType, UploadResult, UploadResponseContext, UploadProgressContext,
+} from './common/types';
+import {
+ FilePickerItem, ListType, UploaderContext, FileContextMenuItem, FileItemCtx, UploaderPopupType,
+} from './composition/types';
+
+export const advUploaderProps = {
+
+ /**
+ * 已上传文件列表
+ * @description 支持语法糖`v-model:files`
+ */
+ files: { type: Array as PropType
+ {props.addBtnPosition.value === "start" && renderAddBtn()}
+ {displayFiles.value.map((item, index) =>
+ isImageCardList.value ? renderImageCardItem(item, index) : renderDetailItem(item, index)
+ )}
+ {props.addBtnPosition.value !== "start" && renderAddBtn()}
+
+
+ {props.actions.filter((item) =>
+ item.__visible__ !== false && item.__name__
+ ).map((item, index) => (
+
+
+ handleItemClick(item), ['stop'])}
+ class={[
+ `${name}__item`,
+ item.__disabled__ ? `${name}__item--disabled` : null,
+ item.__tip__ ? `${name}__item--has-tip` : null
+ ]}>
+
+ ))}
+
+ {props.cancelText && (
+
+ )}
+ {item.__name__}
+ {item.__tip__ && {item.__tip__}
}
+
+
+
+
+
diff --git a/packages/mobile-ui-vue/components/checkbox/README.md b/packages/mobile-ui-vue/components/checkbox/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..816486b842b2e4e91a323048a8017ec10752e19f
--- /dev/null
+++ b/packages/mobile-ui-vue/components/checkbox/README.md
@@ -0,0 +1,30 @@
+# fm-checkbox
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| :--: | :--: | :--: | :--: |
+|name|名称|any|-|
+|shape|形状|string|'square'|
+|checked-color|选中时颜色|string|'#189fa'|
+
+# fm-cgroup
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| :--: | :--: | :--: | :--: |
+|v-model(value)|绑定值|any|-|
+|label|标题|any|-|
+|disabled|禁用|boolean|false|
+|required|必需|boolean|false|
+|direction|排列方向|string|'vertical'|
+
+### Events
+
+| 事件 | 说明 | 回调参数 |
+| :--: | :--: | :--: |
+| input | 选择选项时触发 | value: 选择的选项值 |
+| change | 选项改变时触发 | value: 改变值 |
diff --git a/packages/mobile-ui-vue/components/checkbox/index.ts b/packages/mobile-ui-vue/components/checkbox/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2f88d40aed332a1c391ac9ef492e356174813bf6
--- /dev/null
+++ b/packages/mobile-ui-vue/components/checkbox/index.ts
@@ -0,0 +1,13 @@
+import { App } from 'vue';
+import CheckboxGroup from './src/checkbox-group.vue';
+import Checker from './src/checker.vue';
+
+CheckboxGroup.install = function (app: App) {
+ app.component(CheckboxGroup.name || 'FmCheckboxGroup', CheckboxGroup);
+};
+Checker.install = function (app: App) {
+ app.component(Checker.name || 'FmChecker', Checker);
+};
+
+export { CheckboxGroup, Checker };
+export default CheckboxGroup;
diff --git a/packages/mobile-ui-vue/components/checkbox/src/checkbox-group.vue b/packages/mobile-ui-vue/components/checkbox/src/checkbox-group.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4fac2956a921b71bc171ee8584760b5d144d9161
--- /dev/null
+++ b/packages/mobile-ui-vue/components/checkbox/src/checkbox-group.vue
@@ -0,0 +1,103 @@
+
+
+
+
+
+ {{ title }}
+
+
+
+
+ {{ label }}
+
+
+
+
+
+
+
+
+
+ {{ value }}
+
+
+
+
+
+ {{ extra }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/mobile-ui-vue/components/checkbox/src/checkbox-props.ts b/packages/mobile-ui-vue/components/checkbox/src/checkbox-props.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5fbed35df0474cd394748b312960acb8e5e052b5
--- /dev/null
+++ b/packages/mobile-ui-vue/components/checkbox/src/checkbox-props.ts
@@ -0,0 +1,67 @@
+import { CSSProperties, PropType } from "vue";
+
+export const checkerProps = {
+ label: {
+ type: String,
+ default: '',
+ },
+ labelLimit: Number,
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
+ readonly: {
+ type: Boolean,
+ default: false,
+ },
+ shape: {
+ type: String,
+ default: 'round',
+ },
+ modelValue: {
+ type: Boolean,
+ default: false,
+ },
+ checkedColor: {
+ type: String,
+ default: '#3A90FF',
+ },
+ role: {
+ type: String,
+ default: 'check',
+ },
+ labelClass: String,
+ size: {
+ type: String,
+ default: 'normal',
+ },
+}
+export const checkboxInputProps = {
+ ...checkerProps,
+ shape: {
+ type: String,
+ default: 'square',
+ },
+ type: {
+ type: String,
+ default: 'check',
+ },
+ direction: {
+ type: String,
+ default: 'vertical',
+ },
+ valueField: {
+ type: String,
+ default: 'value',
+ },
+ textField: {
+ type: String,
+ default: 'text',
+ },
+ showDisabledItem: {
+ type: Boolean,
+ default: true
+ },
+ items: Array as PropType
+
+
+
+
+
+
+
+
+
diff --git a/packages/mobile-ui-vue/components/config.ts b/packages/mobile-ui-vue/components/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d4a96f605f63ed4643c09e60b4bc0613ebc9af9a
--- /dev/null
+++ b/packages/mobile-ui-vue/components/config.ts
@@ -0,0 +1,3 @@
+export default {
+ prefix: 'fm'
+};
diff --git a/packages/mobile-ui-vue/components/hook/index.ts b/packages/mobile-ui-vue/components/hook/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..56003f650d03dfd8b7c89bcd0a8774776f711dd2
--- /dev/null
+++ b/packages/mobile-ui-vue/components/hook/index.ts
@@ -0,0 +1,18 @@
+export * from './use-lay-render';
+export * from './use-event-listener';
+export * from './use-click-away';
+export * from './use-lock-scroll';
+export * from './use-expose';
+export * from './use-mount-component';
+export * from './use-touch-move';
+export * from './use-element-rect';
+export * from './use-dynamic-template';
+export * from './use-bem';
+export * from './use-touch';
+export * from './use-back';
+export * from './use-state';
+export * from './use-md5';
+export * from './use-props';
+export * from './use-queue';
+export * from './use-locale';
+export * from './use-long-press';
diff --git a/packages/mobile-ui-vue/components/hook/use-back/index.ts b/packages/mobile-ui-vue/components/hook/use-back/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e953de5ca6c1d20b4ea973284bd892d5c93834e7
--- /dev/null
+++ b/packages/mobile-ui-vue/components/hook/use-back/index.ts
@@ -0,0 +1,19 @@
+/* eslint-disable dot-notation */
+export function useBack(enableShow?: any) {
+ const pushBack = (cb: () => void) => {
+ // @ts-ignore
+ window['MOBILE_ORIGIN_BACK'] && window['MOBILE_ORIGIN_BACK'].pushOriginGoback(cb);
+ };
+ const popBack = () => {
+ // @ts-ignore
+ window['MOBILE_ORIGIN_BACK'] && window['MOBILE_ORIGIN_BACK'].popOriginGoback();
+ };
+ const pushOrPop = (cb = () => { enableShow.value = false; }) => {
+ if (enableShow.value) {
+ pushBack(cb);
+ } else {
+ popBack();
+ }
+ };
+ return { pushBack, popBack, pushOrPop };
+}
diff --git a/packages/mobile-ui-vue/components/hook/use-bem/index.ts b/packages/mobile-ui-vue/components/hook/use-bem/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..db69614988596529f3f9e8faac1714e50f479dcc
--- /dev/null
+++ b/packages/mobile-ui-vue/components/hook/use-bem/index.ts
@@ -0,0 +1,3 @@
+export function useBem(prefix: string) {
+ return (className: string) => `${prefix}-${className}`;
+}
diff --git a/packages/mobile-ui-vue/components/hook/use-click-away/index.ts b/packages/mobile-ui-vue/components/hook/use-click-away/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..408c25b0ce9c51a57f1a53dec7128e6103dbf53b
--- /dev/null
+++ b/packages/mobile-ui-vue/components/hook/use-click-away/index.ts
@@ -0,0 +1,34 @@
+import { Ref, unref } from 'vue';
+import { inBrowser, initNodePath } from '../../utils';
+import { useEventListener } from '../use-event-listener';
+
+export type UseClickAwayOptions = {
+ eventName?: string;
+ active?: Ref
+ {{ innerLabel }}
+
+
+ ![]()
+
diff --git a/packages/mobile-ui-vue/components/image/src/index.vue b/packages/mobile-ui-vue/components/image/src/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..06e635d771eca8897c4766294f80cc533476f62c
--- /dev/null
+++ b/packages/mobile-ui-vue/components/image/src/index.vue
@@ -0,0 +1,89 @@
+
+
+
diff --git a/packages/mobile-ui-vue/components/index.ts b/packages/mobile-ui-vue/components/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a23272632f544bc8a6e4f671e56de770280396a2
--- /dev/null
+++ b/packages/mobile-ui-vue/components/index.ts
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2020 - present, Inspur Genersoft Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { App } from 'vue';
+
+import Scroll from './scroll';
+import Navbar from './navbar';
+import Overlay from './overlay';
+import Popup from './popup';
+import ActionSheet from './action-sheet';
+import Icon from './icon';
+import Image from './image';
+import Cell from './cell';
+import Button from './button';
+import AdvUploader from './adv-uploader';
+import ListView from './listview';
+import Locale from './locale';
+import { Checker } from "./checkbox";
+
+const Components = [Scroll, Navbar, Overlay, Popup, ActionSheet, Icon, Image, Cell, Button, AdvUploader, Locale, ListView, Checker];
+
+const install = (app: App): void => {
+ Components.forEach((component: any) => {
+ if (component.install) {
+ app.use(component);
+ } else {
+ app.component(component.name, component);
+ }
+ });
+};
+
+export { Scroll, Navbar, Overlay, Popup, ActionSheet, Icon, Image, Cell, Button, AdvUploader, Locale, ListView , Checker};
+
+export default {
+ install
+};
diff --git a/packages/mobile-ui-vue/components/listview/README.md b/packages/mobile-ui-vue/components/listview/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..d36ee8d0f0eb1aac6a1108decffbdec8655599b7
--- /dev/null
+++ b/packages/mobile-ui-vue/components/listview/README.md
@@ -0,0 +1,112 @@
+# fm-listview 列表
+
+### 介绍
+
+瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。
+
+### 基础用法
+
+List 组件通过`loading`和`finished`两个变量控制加载状态，当组件滚动到底部时，会触发`load`事件并将`loading`设置成`true`。此时可以发起异步操作并更新数据，数据更新完毕后，将`loading`设置成`false`即可。若数据已全部加载完毕，则直接将`finished`设置成`true`即可。
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| list-data | 列表数据 | Array | -
+| multiple | 是否支持多选 | boolean | `false`|
+| loading | 是否处于加载状态，加载过程中不触发`load`事件，支持`v-model` | boolean | `false` |
+| finished | 是否已加载完成，加载完成后不再触发`load`事件 | boolean | `false` |
+| error | 是否加载失败，加载失败后点击错误提示可以重新
+
+
+
+
+
+
+
+触发`load`事件，必须使用`sync`修饰符，支持`v-model` | boolean | `false` | +| offset | 滚动条与底部距离小于 offset 时触发`load`事件 | number | `30` | +| loadingText | 加载过程中的提示文案 | string | `加载中...` | +| finishedText | 加载完成后的提示文案 | string | `没有更多了` | +| errorText | 加载失败后的提示文案 | string | `加载错误，请重试...` | +| immediateCheck | 是否在初始化时立即执行滚动位置检查 | boolean | `true` | +| direction | 滚动触发加载的方向，可选值为`up` | string | `down` | +| btns | 多选操作按钮组 | Array\
+
+
+
+
+
diff --git a/packages/mobile-ui-vue/components/listview/src/listview-list.vue b/packages/mobile-ui-vue/components/listview/src/listview-list.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dcc5302b896ecc52fc3c1a777703d9d3b2d19ecd
--- /dev/null
+++ b/packages/mobile-ui-vue/components/listview/src/listview-list.vue
@@ -0,0 +1,120 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('listview', 'emptyText') }}
+
+
+
+
+
+ {{ errorText }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ loadingText }}
+
+
+
+
+
+
+ {{ finishedText }}
+
+
+
+
+
+
+
+
+
diff --git a/packages/mobile-ui-vue/components/listview/src/listview-props.ts b/packages/mobile-ui-vue/components/listview/src/listview-props.ts
new file mode 100644
index 0000000000000000000000000000000000000000..26443446ef8d80165df340340e19453c5d8c47c4
--- /dev/null
+++ b/packages/mobile-ui-vue/components/listview/src/listview-props.ts
@@ -0,0 +1,89 @@
+import { PropType } from 'vue';
+import { Direction, ListViewToolbarItem } from './listview-types';
+
+export const listViewProps = {
+ listData: {
+ type: Array as PropType
+
+
+
+
+
+
+
+
+
+
+
+ {{ getSubItemValue(listItem, textField) }}
+
+
+
+
+
+
+
+
+
+
+ emit('click', evt)}
+ {...attrs}
+ >
+ {slots.default?.()}
+
+
+
+
+
+
diff --git a/packages/mobile-ui-vue/components/theme/fonts/farris-mobile-icon.ttf b/packages/mobile-ui-vue/components/theme/fonts/farris-mobile-icon.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..7d450d9876c7df282718db3dab7ab1c38a21b725
Binary files /dev/null and b/packages/mobile-ui-vue/components/theme/fonts/farris-mobile-icon.ttf differ
diff --git a/packages/mobile-ui-vue/components/theme/index.scss b/packages/mobile-ui-vue/components/theme/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7738cdd9c79a2bba4c8161ddbaede78ec3274c00
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/index.scss
@@ -0,0 +1,59 @@
+@import './src/animation';
+@import './src/variables';
+@import './src/action-bar.scss';
+@import './src/action-sheet.scss';
+@import './src/attach.scss';
+@import './src/badge.scss';
+@import './src/base.scss';
+@import './src/button.scss';
+@import "./src/calendar.scss";
+@import './src/card.scss';
+@import './src/cell.scss';
+@import './src/checkbox.scss';
+@import './src/checker.scss';
+@import './src/collapse.scss';
+@import './src/dialog.scss';
+@import './src/discussion-group.scss';
+@import './src/dropdown.scss';
+@import './src/filter.scss';
+@import './src/html-panel.scss';
+@import './src/icon.scss';
+@import './src/image-preview.scss';
+@import './src/image.scss';
+@import './src/index-list.scss';
+@import './src/input-template.scss';
+@import './src/input.scss';
+@import './src/listview.scss';
+@import './src/loading.scss';
+@import './src/lookup.scss';
+@import './src/navbar.scss';
+@import './src/notice-bar.scss';
+@import './src/notify.scss';
+@import './src/overlay.scss';
+@import './src/pagination.scss';
+@import './src/picker.scss';
+@import './src/popup.scss';
+@import './src/popover.scss';
+@import './src/radio.scss';
+@import './src/rich-editor.scss';
+@import './src/scheadule.scss';
+@import './src/scroll-view.scss';
+@import './src/scroll.scss';
+@import './src/search.scss';
+@import './src/share-sheet.scss';
+@import './src/sidebar.scss';
+@import './src/skeleton.scss';
+@import './src/steps.scss';
+@import './src/swipe.scss';
+@import './src/swipecell.scss';
+@import './src/switch.scss';
+@import './src/tab-bar.scss';
+@import './src/tab.scss';
+@import './src/tabs.scss';
+@import './src/tag.scss';
+@import './src/tags.scss';
+@import './src/text-area.scss';
+@import './src/text.scss';
+@import './src/toast.scss';
+@import './src/tree-bar.scss';
+@import './src/upload.scss';
diff --git a/packages/mobile-ui-vue/components/theme/src/_animation.scss b/packages/mobile-ui-vue/components/theme/src/_animation.scss
new file mode 100644
index 0000000000000000000000000000000000000000..891caf7a2fed49d35ba4b6aff796b536a426507c
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/_animation.scss
@@ -0,0 +1,150 @@
+@keyframes fm-fade-in {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes fm-fade-out {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+.fm-fade {
+ &-enter-active {
+ animation: 0.3s fm-fade-in both ease-out;
+ }
+
+ &-leave-active {
+ animation: 0.3s fm-fade-out both ease-in;
+ }
+}
+
+.fm-slide-up {
+ &-enter-from,
+ &-leave-to {
+ transform: translate3d(0, 100%, 0);
+ }
+}
+
+.fm-slide-down {
+ &-enter-from,
+ &-leave-to {
+ transform: translate3d(0, -100%, 0);
+ }
+}
+
+.fm-slide-left {
+ &-enter-from,
+ &-leave-to {
+ transform: translate3d(-100%, 0, 0);
+ }
+}
+
+.fm-slide-right {
+ &-enter-from,
+ &-leave-to {
+ transform: translate3d(100%, 0, 0);
+ }
+}
+
+.fm-slide-up-enter-active,
+.fm-slide-down-enter-active,
+.fm-slide-left-enter-active,
+.fm-slide-right-enter-active {
+ transition-timing-function: ease-out;
+}
+.fm-slide-up-leave-active,
+.fm-slide-down-leave-active,
+.fm-slide-left-leave-active,
+.fm-slide-right-leave-active {
+ transition-timing-function: ease-in;
+}
+
+.fm-slide-in-enter-active,
+.fm-slide-in-leave-active,
+.fm-slide-out-enter-active,
+.fm-slide-out-leave-active {
+ will-change: transform;
+ transition: all 0.3s;
+ height: 100%;
+ width: 100%;
+ top: 0px;
+ position: absolute;
+ backface-visibility: hidden;
+ perspective: 1000;
+}
+
+.fm-slide-in-leave-to,
+.fm-slide-out-enter-from {
+ transform: translateX(-100%);
+ opacity: 0;
+}
+.fm-slide-in-enter-from,
+.fm-slide-out-leave-to {
+ transform: translateX(100%);
+ opacity: 0;
+}
+
+@keyframes fm-drop-down-in {
+ from {
+ height: 0;
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+@keyframes fm-drop-down-out {
+ from {
+ opacity: 1;
+ }
+ to {
+ height: 0;
+ opacity: 0;
+ }
+}
+.fm-drop-down {
+ &-enter-active {
+ animation: 0.3s fm-drop-down-in both ease-out;
+ }
+ &-leave-active {
+ animation: 0.3s fm-drop-down-out both ease-in;
+ }
+}
+@keyframes fm-circular {
+ 0% {
+ stroke-dasharray: 1, 200;
+ stroke-dashoffset: 0
+ }
+
+ 50% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -40
+ }
+
+ 100% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -120
+ }
+}
+@keyframes fm-rotate {
+ from {
+ -webkit-transform: rotate(0);
+ transform: rotate(0)
+ }
+
+ to {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg)
+ }
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/_variables.scss b/packages/mobile-ui-vue/components/theme/src/_variables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..39d0462ceba488410eb192056d15094f10a03499
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/_variables.scss
@@ -0,0 +1,141 @@
+:root {
+ // Color Palette
+ --fm-black: #000;
+ --fm-white: #fff;
+ --fm-gray-1: #f7f8fa;
+ --fm-gray-2: #f2f3f5;
+ --fm-gray-3: #eee;
+ --fm-gray-4: #ddd;
+ --fm-gray-5: #ccc;
+ --fm-gray-6: #999;
+ --fm-gray-7: #666;
+ --fm-gray-8: #333;
+ --fm-red: #F24645;
+ --fm-red-light: #f9e8e8;
+ --fm-blue: #3A90FF;
+ --fm-blue-2: #65a7ff;
+ --fm-blue-light: #ecf2fe;
+ --fm-green: #5CC171;
+ --fm-green-2: #5AC1C3;
+ --fm-green-light: #e9f5ed;
+ --fm-orange: #FF9800;
+ --fm-orange-2: #FA6400;
+ --fm-orange-light: #faf0e1;
+ --fm-orange-dark: #ed6a0c;
+
+
+ // Component Colors
+ --fm-primary-color: var(--fm-blue);
+ --fm-success-color: var(--fm-green);
+ --fm-danger-color: var(--fm-red);
+ --fm-warning-color: var(--fm-orange);
+ --fm-submit-color: var(--fm-green-2);
+ --fm-primary-color-light: var(--fm-blue-light);
+ --fm-success-color-light: var(--fm-green-light);
+ --fm-danger-color-light: var(--fm-red-light);
+ --fm-warning-color-light: var(--fm-orange-light);
+ --fm-text-color: var(--fm-gray-8);
+ --fm-text-color-2: var(--fm-gray-6);
+ --fm-text-color-3: var(--fm-gray-5);
+ --fm-text-color-light: var(--fm-gray-7);
+ --fm-active-color: var(--fm-gray-2);
+ --fm-disabled-color: var(--fm-gray-5);
+ --fm-active-opacity: 0.7;
+ --fm-readonly-opacity: 0.6;
+ --fm-disabled-opacity: 0.5;
+ --fm-background: var(--fm-gray-1);
+ --fm-background-2: var(--fm-white);
+ --fm-background-3: var(--fm-gray-2);
+ --fm-box-shadow-color: var(--fm-gray-2);
+ --fm-box-shadow-color-2: var(--fm-gray-6);
+
+ // Padding
+ --fm-padding-base: 4px;
+ --fm-padding-xs: 8px;
+ --fm-padding-sm: 12px;
+ --fm-padding-md: 16px;
+ --fm-padding-lg: 24px;
+ --fm-padding-xl: 32px;
+ --fm-padding-horizontal-xs: 0 var(--fm-padding-xs);
+ --fm-padding-horizontal-sm: 0 var(--fm-padding-sm);
+ --fm-padding-horizontal-md: 0 var(--fm-padding-md);
+ --fm-padding-horizontal-lg: 0 var(--fm-padding-lg);
+ // Margin
+ --fm-margin-base: 4px;
+ --fm-margin-xs: 8px;
+ --fm-margin-sm: 12px;
+ --fm-margin-md: 16px;
+ --fm-margin-lg: 24px;
+ --fm-margin-xl: 32px;
+ --fm-margin-horizontal-xs: 0 var(--fm-margin-xs);
+ --fm-margin-horizontal-sm: 0 var(--fm-margin-sm);
+ --fm-margin-horizontal-md: 0 var(--fm-margin-md);
+ --fm-margin-horizontal-lg: 0 var(--fm-margin-lg);
+
+ // Font
+ --fm-font-bold-light: 500;
+ --fm-font-bold: 600;
+ --fm-font-size-base: 16px;
+ --fm-font-size-xs: 10px;
+ --fm-font-size-sm: 12px;
+ --fm-font-size-md: 14px;
+ --fm-font-size-lg: 18px;
+ --fm-line-height-xs: 14px;
+ --fm-line-height-sm: 18px;
+ --fm-line-height-md: 20px;
+ --fm-line-height-lg: 22px;
+ --fm-line-height: 1.2;
+
+ --fm-font-size-icon-1: 10px;
+ --fm-font-size-icon-2: 12px;
+ --fm-font-size-icon-3: 14px;
+ --fm-font-size-icon-4: 16px;
+ --fm-font-size-icon-5: 18px;
+ --fm-font-size-icon-6: 20px;
+
+ // Gradient Colors
+ --fm-gradient-blue: linear-gradient(-45deg,var(--fm-blue-2) 0%, var(--fm-blue) 100%);
+ --fm-gradient-orange: linear-gradient(-45deg,var(--fm-orange) 0%, var(--fm-orange-2) 100%);
+
+ /* stylelint-disable */
+ --fm-base-font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+ Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui',
+ 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+ --fm-price-font: avenir-heavy, 'PingFang SC', helvetica neue, arial,
+ sans-serif;
+ /* stylelint-enable */
+
+ // Animation
+ --fm-duration-base: 0.3s;
+ --fm-duration-fast: 0.2s;
+ --fm-ease-out: ease-out;
+ --fm-ease-in: ease-in;
+
+ // Border
+ --fm-border-color: var(--fm-gray-4);
+ --fm-border-color-2: var(--fm-gray-3);
+ --fm-border-width: 1px;
+ --fm-noborder: none;
+ --fm-radius-sm: 2px;
+ --fm-radius-md: 4px;
+ --fm-radius-lg: 8px;
+ --fm-radius-max: 999px;
+
+ --fm-zindex-1: 9;
+ --fm-zindex-2: 10;
+ --fm-zindex-3: 99;
+ --fm-zindex-4: 100;
+ --fm-zindex-5: 999;
+ --fm-zindex-6: 1000;
+}
+
+.fm-theme-dark {
+ --fm-text-color: #f5f5f5;
+ --fm-text-color-2: #707070;
+ --fm-text-color-3: #4d4d4d;
+ --fm-border-color: #3a3a3c;
+ --fm-active-color: #3a3a3c;
+ --fm-background: #000;
+ --fm-background-2: #1c1c1e;
+ --fm-background-3: #37363b;
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/action-bar.scss b/packages/mobile-ui-vue/components/theme/src/action-bar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4486789d10880853ab4e369797b62bb687820f02
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/action-bar.scss
@@ -0,0 +1,104 @@
+@import './mixins/hairline';
+
+:root {
+ --fm-action-bar-border-color: var(--fm-border-color);
+ --fm-action-bar-btn-icon-font-size: var(--fm-font-size-icon-6);
+ --fm-action-bar-btn-color: var(--fm-gray-7);
+ --fm-action-bar-btn-color-white: var(--fm-white);
+ --fm-action-bar-btn-color-disabled: var(--fm-disabled-color);
+ --fm-action-bar-btn-font-size: var(--fm-font-size-xs);
+ --fm-action-bar-btn-margin-top: var(--fm-margin-base);
+ --fm-action-bar-btn-padding: var(--fm-padding-xs) 0;
+}
+
+.fm-action-bar {
+ width: 100%;
+}
+.fm-action-bar-btns {
+ @include hairline('top', var(--fm-action-bar-border-color));
+ display: flex;
+ align-items: center;
+ flex-wrap: nowrap;
+ text-align: center;
+ .fm-action-bar-btn-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ flex: 1;
+ padding: var(--fm-action-bar-btn-padding);
+ .btn-item-icon {
+ .fm-icon {
+ font-size: var(--fm-action-bar-btn-icon-font-size);
+ }
+ }
+ .btn-item-text {
+ margin-top: var(--fm-action-bar-btn-margin-top);
+ font-size: var(--fm-action-bar-btn-font-size);
+ color: var(--fm-action-bar-btn-color);
+ }
+ &-primary,
+ &-danger,
+ &-warning,
+ &-success,
+ &.fm-action-bar-btn-item-has-color
+ {
+ .btn-item-icon,
+ .btn-item-text {
+ color: var(--fm-action-bar-btn-color-white);
+ }
+ }
+ &-primary {
+ background-color: var(--fm-primary-color);
+ }
+ &-danger {
+ background-color: var(--fm-danger-color);
+ }
+ &-warning {
+ background-color: var(--fm-warning-color);
+ }
+ &-success {
+ background-color: var(--fm-success-color);
+ }
+
+ &.fm-action-bar-btn-item-disabled {
+ .btn-item-icon,
+ .btn-item-text {
+ color: var(--fm-action-bar-btn-color-disabled);
+ }
+ }
+ &:not(.fm-action-bar-btn-item-disabled):active {
+ background-color: var(--fm-active-color);
+ }
+ &.fm-action-bar-btn-item-primary:active {
+ background-color: var(--fm-primary-color);
+ }
+ }
+}
+.fm-action-bar-popover {
+ .fm-popover-arrow {
+ display: none;
+ }
+ .fm-popover-item-container {
+ &-primary,
+ &-primary .fm-popover-item-content {
+ color: var(--fm-primary-color);
+ }
+ &-danger,
+ &-danger .fm-popover-item-content {
+ color: var(--fm-danger-color);
+ }
+ &-warning,
+ &-warning .fm-popover-item-content {
+ color: var(--fm-warning-color);
+ }
+ &-success,
+ &-success .fm-popover-item-content {
+ color: var(--fm-success-color);
+ }
+ &-disabled,
+ &-disabled .fm-popover-item-content {
+ color: var(--fm-action-bar-btn-color-disabled);
+ }
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/action-sheet.scss b/packages/mobile-ui-vue/components/theme/src/action-sheet.scss
new file mode 100644
index 0000000000000000000000000000000000000000..53f4cec7c2451503baa3d264996071f69ba72c77
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/action-sheet.scss
@@ -0,0 +1,99 @@
+@import './mixins/hairline';
+:root {
+ --fm-actionsheet-max-height: 80%;
+ --fm-actionsheet-color: var(--fm-text-color);
+ --fm-actionsheet-background-color: var(--fm-gray-2);
+ --fm-actionsheet-font-size: var(--fm-font-size-base);
+ --fm-actionsheet-sub-font-size: var(--fm-font-size-sm);
+ --fm-actionsheet-sub-color: var(--fm-text-color-2);
+ --fm-actionsheet-round: 16px 16px 0 0 ;
+ --fm-actionsheet-header-height: 48px;
+ --fm-actionsheet-header-height: 48px;
+ --fm-actionsheet-item-height: 22px;
+ --fm-actionsheet-sub-height: 20px;
+}
+
+.fm-actionsheet{
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ max-height: var(--fm-actionsheet-max-height);
+ color: var(--fm-actionsheet-color);
+ font-size: var(--fm-actionsheet-font-size);
+ background-color: var(--fm-actionsheet-background-color);
+ &.fm-actionsheet-round{
+ border-radius: var(--fm-actionsheet-round);
+ }
+ &-header {
+ flex-shrink: 0;
+ height: var(--fm-actionsheet-header-height);
+ line-height: var(--fm-actionsheet-header-height);
+ text-align: center;
+ background-color: var(--fm-white);
+ &-title{
+ font-weight: 500;
+ }
+ &-close{
+ position: absolute;
+ top: 0;
+ right: 0;
+ line-height: inherit;
+ padding: var(--fm-padding-horizontal-md);
+ .fm-icon{
+ color: var(--fm-gray-5);
+ font-size: var(--fm-font-size-icon-5);
+ }
+ &:active{
+ .fm-icon{
+ color: var(--fm-gray-7);
+ }
+ }
+ }
+ }
+ .fm-actionsheet-item,.fm-actionsheet-cancel-inner{
+ display: block;
+ width: 100%;
+ padding: 14px 16px;
+ text-align: center;
+ background-color: var(--fm-white);
+ border: none;
+ cursor: pointer;
+ &:active{
+ background-color: var(--fm-actionsheet-background-color);
+ }
+ }
+ &-content{
+ flex: 1 auto;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ .fm-actionsheet-item{
+ line-height: var(--fm-actionsheet-item-height);
+ &-subname{
+ margin-top: var(--fm-margin-xs);
+ color: var(--fm-actionsheet-sub-color);
+ font-size: var(--fm-actionsheet-sub-font-size);
+ line-height: var(--fm-actionsheet-sub-font-size);
+ }
+ &.fm-actionsheet-item-disabled{
+ color: var(--fm-disabled-color);
+ }
+ }
+ }
+ &-cancel{
+ flex-shrink: 0;
+ margin-top: var(--fm-margin-xs);
+ background-color: var(--fm-white);
+ }
+ &-description{
+ background-color: var(--fm-white);
+ &-inner{
+ @include hairline('bottom', var(--fm-border-color));
+ flex-shrink: 0;
+ padding: var(--fm-padding-md);
+ color: var(--fm-actionsheet-sub-color);
+ font-size: var(--fm-actionsheet-sub-font-size);
+ line-height: var(--fm-actionsheet-sub-height);
+ text-align: center;
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/attach.scss b/packages/mobile-ui-vue/components/theme/src/attach.scss
new file mode 100644
index 0000000000000000000000000000000000000000..331e964f06b566b9563c9aa8605e8965ff8f374f
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/attach.scss
@@ -0,0 +1,419 @@
+.attachment-bg {
+ background: #fff;
+ user-select: none;
+ -webkit-user-select: none;
+
+ .fm-button {
+ user-select: none;
+ -webkit-user-select: none;
+ }
+
+ div {
+ user-select: none;
+ -webkit-user-select: none;
+ }
+
+ span {
+ user-select: none;
+ -webkit-user-select: none;
+ }
+
+ img {
+ -webkit-user-select: none;
+ -webkit-touch-callout: none;
+ user-select: none;
+ }
+
+ button {
+ user-select: none;
+ -webkit-user-select: none;
+ }
+}
+
+.listview-content {
+ .fm-listview-item {
+ margin: 12px 0;
+ }
+
+ .fm-tmpl-attachment-img {
+ width: 48px;
+ height: 48px;
+ margin: auto 0;
+
+ .item-img {
+ width: 100%;
+ height: 100%;
+ }
+
+ img {
+ border-radius: 3px;
+ width: 48px;
+ height: 48px;
+ }
+ }
+
+ .attachment-text {
+ flex: 1;
+ margin: auto 12px;
+
+ &>div {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 5px;
+ }
+ }
+
+ .fm-tmpl-attachment-name {
+ line-height: 22px;
+ font-family: PingFangSC-Regular;
+ font-size: 16px;
+ color: #333333;
+ letter-spacing: 0.21px;
+ margin-bottom: 2px;
+ word-break: break-all;
+ }
+
+ .fm-tmpl-attachment-footer {
+ line-height: 18px;
+ font-family: PingFangSC-Regular;
+ font-size: 12px;
+ color: #888888;
+ letter-spacing: 0;
+ }
+
+ .fm-tmpl-listview-attachment {
+ padding: 0;
+ display: flex;
+ justify-content: space-between;
+ -webkit-user-select: none;
+ user-select: none;
+ }
+
+ .attachment-button {
+ .attachment-button-custom {
+ padding: 0;
+ width: 50px;
+ height: 20px;
+ font-family: PingFangSC-Regular;
+ font-size: 12px;
+ letter-spacing: 0;
+ border-radius: 10px;
+ }
+ }
+
+ .attachment-icon {
+ margin: auto 0;
+ width: 16px;
+ height: 16px;
+ transform: rotate(90deg);
+ }
+}
+
+.panzoom {
+ transform: none;
+ backface-visibility: hidden;
+ transform-origin: 50% 50% 0px;
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+.page {
+ display: inline-block;
+ background-color: #ffffff;
+ margin: 20px;
+ -webkit-box-shadow: 0px 4px 12px -4px rgba(0, 0, 0, 0.38);
+ -moz-box-shadow: 0px 4px 12px -4px rgba(0, 0, 0, 0.38);
+ box-shadow: 0px 4px 12px -4px rgba(0, 0, 0, 0.38);
+ transition: all 0.3s;
+}
+
+.farris-attachment-entry-vertical {
+ flex-direction: column;
+}
+
+.farris-attachment-entry {
+ display: flex;
+ clear: both;
+
+ & .fm-attachment-disabled {
+ cursor: not-allowed;
+ pointer-events: none;
+ }
+
+ & .attachment-navigation {
+ overflow: inherit;
+ white-space: nowrap;
+ }
+
+ & .attachment-navigation .attachment-navigation-item {
+ position: relative;
+ display: inline-block;
+
+ & .item-img {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ & .item-icon-delete {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ background: #888;
+
+ & .fm-icon {
+ color: #fff;
+ font-size: 12px;
+ }
+ }
+
+ & .item-icon {
+ position: absolute;
+ }
+ }
+
+ & .fm-attachment-container {
+ box-sizing: border-box;
+ float: left;
+ position: relative;
+ margin: 0 100px 0 0;
+ padding: 0 52px 0 0;
+ max-width: 100%;
+ height: 54px;
+
+ & .fm-attachment-files-list {
+ padding-top: 6px;
+ overflow: auto;
+ max-width: 100%;
+ }
+
+ & .fm-attachment-files-item {
+ position: relative;
+ width: 48px;
+ height: 48px;
+ margin-right: 20px;
+
+ & .item-icon-delete {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ right: -6px;
+ top: -6px;
+ width: 16px;
+ height: 16px;
+ background: #888;
+ border-radius: 50%;
+
+ & .fm-icon {
+ color: #fff;
+ font-size: 12px;
+ }
+ }
+
+ & .van-image__img {
+ border-radius: 5px;
+ }
+ }
+
+ & .fm-attachment-upload-btn-container {
+ position: absolute;
+ right: 0;
+ top: 50%;
+ margin-top: -20px;
+ z-index: 8;
+ width: 48px;
+ height: 48px;
+ background: #f6f6f6;
+ border-radius: 3px;
+
+ & .fm-attachment-upload-btn {
+ & .fm-icon {
+ display: block;
+ font-size: 20px;
+ color: #ddd;
+ line-height: 48px;
+ margin: 0 auto;
+ }
+ }
+ }
+ }
+
+ & .fm-attachment-upload-listview-btn-container {
+ z-index: 8;
+ width: 48px;
+ height: 48px;
+ background: #f6f6f6;
+ border-radius: 3px;
+
+ & .fm-attachment-upload-btn {
+ & .fm-icon {
+ display: block;
+ font-size: 20px;
+ color: #ddd;
+ line-height: 48px;
+ margin: 0 auto;
+ }
+ }
+ }
+}
+
+
+.attachment-actionsheet-content {
+ flex: 1 auto;
+ overflow-y: auto;
+
+ .attachment-actionsheet-item-disabled {
+ color: #ccc;
+ padding: 0;
+ }
+
+ .attachment-actionsheet-item {
+ font-family: PingFangSC-Regular;
+ letter-spacing: 0;
+ display: block;
+ width: 100%;
+ padding: 14px 0;
+ font-size: 16px;
+ background-color: #fff;
+ border: none;
+ cursor: pointer;
+ text-align: center;
+ }
+}
+
+.actionsheet-content__remark {
+ font-family: PingFangSC-Regular;
+ font-size: 12px;
+ color: #999999;
+ letter-spacing: 0;
+ margin-top: 5px;
+}
+
+.tooltip-container {
+ position: absolute;
+ z-index: 3000;
+ min-width: 150px;
+ margin: 0;
+ background: #333333;
+ border-radius: 5px;
+ font-family: PingFangSC-Medium;
+ font-size: 13px;
+ color: #cccccc;
+ letter-spacing: 0;
+
+ div {
+ user-select: none;
+ -webkit-user-select: none;
+ }
+
+ span {
+ user-select: none;
+ -webkit-user-select: none;
+ }
+
+ .tooltip-content__item {
+ line-height: 3;
+ margin: 0 10px;
+ }
+
+ .tooltip-content__item-first {
+ line-height: 3;
+ margin: 0 10px;
+ }
+
+ .tooltip-content__item:not(:last-child) {
+ border-bottom: 1px solid rgba(102, 102, 102, 0.5);
+ }
+
+ .tooltip-content__line {
+ background: rgba(102, 102, 102, 0.5);
+ height: 1px;
+ margin: 0 10px;
+ }
+
+ .tooltip-container__arrow {
+ position: absolute;
+ border: 5px solid transparent;
+ width: 0;
+ height: 0;
+ }
+
+ .tooltip-content__remark {
+ font-size: 10px;
+ margin-top: -20px;
+ }
+
+ .tooltip-content__first-item {
+ line-height: 2;
+ }
+
+ .tooltip-content__item__preview {
+ line-height: 3;
+ margin: 0 10px;
+ }
+
+ .tooltip-content__item__disabled {
+ opacity: 0.4;
+ }
+
+ .tooltip-arrow__top {
+ border-top-color: #333333;
+ left: 50%;
+ top: 100%;
+ }
+
+ .tooltip-arrow__top-start {
+ border-top-color: #333333;
+ left: 80%;
+ top: 100%;
+ }
+
+ .tooltip-arrow__top-end {
+ border-top-color: #333;
+ left: 20%;
+ top: 100%;
+ }
+
+ .tooltip-arrow__right {}
+
+ .tooltip-arrow__right-start {
+ border-right-color: #333;
+ right: 100%;
+ top: 30px;
+ }
+
+ .tooltip-arrow__right-end {
+ border-right-color: #333;
+ right: 100%;
+ bottom: 30px;
+ }
+
+ .tooltip-arrow__bottom {}
+
+ .tooltip-arrow__bottom-start {}
+
+ .tooltip-arrow__bottom-end {}
+
+ .tooltip-arrow__left {}
+
+ .tooltip-arrow__left-start {
+ border-left-color: #333;
+ left: 100%;
+ top: 30px;
+ }
+
+ .tooltip-arrow__left-end {
+ border-left-color: #333;
+ left: 100%;
+ bottom: 30px;
+ }
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/badge.scss b/packages/mobile-ui-vue/components/theme/src/badge.scss
new file mode 100644
index 0000000000000000000000000000000000000000..63b46716e61aecc3b28fc15985ea017395e013c0
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/badge.scss
@@ -0,0 +1,47 @@
+:root {
+ --fm-badge-padding: 2px 4px;
+ --fm-badge-font-size: var(--fm-font-size-xs);
+ --fm-badge-text-color: var(--fm-white);
+ --fm-badge-primary-color: var(--fm-primary-color);
+ --fm-badge-secondary-color: var(--fm-blue-light);
+ --fm-badge-success-color: var(--fm-success-color);
+ --fm-badge-danger-color: var(--fm-danger-color);
+ --fm-badge-warning-color: var(--fm-warning-color);
+}
+
+.fm-badge {
+ position: relative;
+ display: inline-block;
+ color: var(--fm-badge-text-color);
+ font-size: var(--fm-badge-font-size);
+ &-content {
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: 99;
+ transform: translate(50%,-50%);
+ padding: var(--fm-badge-padding);
+ border-radius: 99px;
+ &-primary,
+ &-info {
+ background: var(--fm-badge-primary-color);
+ }
+
+ &-secondary {
+ color: var(--fm-badge-primary-color);
+ background: var(--fm-badge-secondary-color);
+ }
+
+ &-danger {
+ background-color: var(--fm-danger-color);
+ }
+
+ &-warning {
+ background-color: var(--fm-warning-color);
+ }
+
+ &-success {
+ background-color: var(--fm-success-color);
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/base.scss b/packages/mobile-ui-vue/components/theme/src/base.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6d4885e06f1a6aa23f6137123f28c8913d4d57e0
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/base.scss
@@ -0,0 +1,17 @@
+@import './mixins/hairline';
+
+.fm-overflow-hidden {
+ overflow: hidden !important;
+}
+.fm-hairline {
+ @include hairline('all');
+}
+.fm-hairline-top {
+ @include hairline('top');
+}
+.fm-hairline-bottom {
+ @include hairline('bottom');
+}
+.fm-no-hairline::after {
+ display: none!important;
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/button-group.scss b/packages/mobile-ui-vue/components/theme/src/button-group.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9e39a6607ddec5c7ea79aa2f63434ea45174b450
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/button-group.scss
@@ -0,0 +1,66 @@
+:root {
+ --button-group-color: var(--fm-primary-color);
+ --button-group-background: var(--fm-primary-color);
+ --button-group-background-first: var(--fm-white);
+ --button-group-background-last: var(--fm-gradient-blue);
+ --button-group-icon-color: var(--fm-gray-7);
+ --button-group-icon-font-size: var(--fm-font-size-icon-6);
+ --button-group-icon-text-font-size: var(--fm-font-size-xs);
+}
+
+.fm-button-group {
+ display: flex;
+ .button-item {
+ display: flex;
+ flex: 1;
+ }
+ .button-wrapper {
+ flex: 1;
+ .fm-button {
+ height: 100%;
+ background: var(--button-group-background-last);
+ }
+ &:not(:last-child) {
+ .fm-button {
+ border-radius: 999px 0 0 999px;
+ background: var(--button-group-background-first);
+ border: 1px solid var(--button-group-color);
+ color: var(--button-group-color);
+ }
+ }
+ &:not(:first-child) {
+ .fm-button {
+ border-radius: 0 999px 999px 0;
+ background: var(--button-group-background);
+ }
+ }
+ }
+ .icon-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ color: var(--button-group-icon-color);
+ .fm-icon {
+ font-size: var(--button-group-icon-font-size);
+ }
+ .icon-text {
+ font-size: var(--button-group-icon-text-font-size);
+ line-height: 16px;
+ }
+ &:not(:last-child) {
+ padding-right: var(--fm-padding-md);
+ }
+
+ &.button-disabled {
+ cursor: not-allowed;
+ opacity: var(--fm-disabled-opacity);
+ }
+ }
+ &:not(:last-child) {
+ padding-right: var(--fm-padding-md);
+ }
+ &.fm-button-group-block {
+ flex: 1;
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/button.scss b/packages/mobile-ui-vue/components/theme/src/button.scss
new file mode 100644
index 0000000000000000000000000000000000000000..57079ba71fdce9bdfdd3402ea89e9a07f7cd149d
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/button.scss
@@ -0,0 +1,199 @@
+:root {
+ --fm-button-height: 42px;
+ --fm-button-padding: 0 15px;
+ --fm-button-color: var(--fm-white);
+ --fm-button-round: var(--fm-radius-max);
+ --fm-button-radius: var(--fm-radius-sm);
+ --fm-button-plain-background: var(--fm-white);
+ --fm-button-line-height: var(--fm-line-height);
+ --fm-button-border-width: var(--fm-border-width);
+ --fm-button-font-size: var(--fm-font-size-base);
+ --fm-button-lg-height: 46px;
+ --fm-button-lg-font-size: var(--fm-font-size-lg);
+ --fm-button-md-height: 38px;
+ --fm-button-md-font-size: var(--fm-font-size-md);
+ --fm-button-sm-height: 34px;
+ --fm-button-sm-padding: 0 8px;
+ --fm-button-sm-font-size: var(--fm-font-size-sm);
+ --fm-button-xs-height: 28px;
+ --fm-button-xs-font-size: var(--fm-font-size-xs);
+ --fm-button-primary-color: var(--fm-primary-color);
+ --fm-button-secondary-color: var(--fm-blue-light);
+ --fm-button-success-color: var(--fm-success-color);
+ --fm-button-danger-color: var(--fm-danger-color);
+ --fm-button-warning-color: var(--fm-warning-color);
+}
+
+.fm-button {
+ position: relative;
+ cursor: pointer;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ text-align: center;
+ margin: 0;
+ border: none;
+ transition: opacity 0.2s;
+ color: var(--fm-button-color);
+ height: var(--fm-button-height);
+ padding: var(--fm-button-padding);
+ font-size: var(--fm-button-font-size);
+ line-height: var(--fm-button-line-height);
+ border-radius: var(--fm-button-radius);
+ &-primary,
+ &-info {
+ background: var(--fm-button-primary-color);
+ }
+
+ &-secondary {
+ color: var(--fm-button-primary-color);
+ background: var(--fm-button-secondary-color);
+ }
+
+ &-danger {
+ background-color: var(--fm-danger-color);
+ }
+
+ &-warning {
+ background-color: var(--fm-warning-color);
+ }
+
+ &-success {
+ background-color: var(--fm-success-color);
+ }
+
+ &-gradient-blue {
+ background: var(--fm-gradient-blue);
+ }
+ &-gradient-orange {
+ background: var(--fm-gradient-blue);
+ }
+
+ &-add {
+ height: 48px;
+ width: 48px;
+ color: var(--fm-button-color);
+ background: var(--fm-button-primary-color);
+ box-shadow: var(--fm-button-box-shadow);
+ border-radius: var(--fm-button-round);
+ .fm-icon {
+ font-size: var(--fm-font-size-icon-6);
+ }
+ }
+
+ &-plain {
+ background: var(--fm-button-plain-background);
+ box-shadow: none;
+ &.fm-button-primary,
+ &.fm-button-info {
+ color: var(--fm-button-primary-color);
+ border: var(--fm-button-border-width) solid var(--fm-button-primary-color);
+ }
+
+ &.fm-button-success {
+ color: var(--fm-button-success-color);
+ border: var(--fm-button-border-width) solid var(--fm-button-success-color);
+ }
+
+ &.fm-button-danger {
+ color: var(--fm-button-danger-color);
+ border: var(--fm-button-border-width) solid var(--fm-button-danger-color);
+ }
+
+ &.fm-button-warning {
+ color: var(--fm-button-warning-color);
+ border: var(--fm-button-border-width) solid var(--fm-button-warning-color);
+ }
+ }
+
+ &-noborder {
+ border: var(--fm-noborder) !important;
+ }
+
+ &-large {
+ height: var(--fm-button-lg-height);
+ font-size: var(--fm-button-lg-font-size);
+ }
+ &-normal {
+ height: var(--fm-button-md-height);
+ font-size: var(--fm-button-md-font-size);
+ }
+ &-small {
+ height: var(--fm-button-sm-height);
+ padding: var(--fm-button-sm-padding);
+ font-size: var(--fm-button-sm-font-size);
+ }
+ &-mini {
+ height: var(--fm-button-xs-height);
+ padding: var(--fm-button-sm-padding);
+ font-size: var(--fm-button-xs-font-size);
+ }
+
+ &-block {
+ display: flex;
+ width: 100%;
+ }
+
+ &-disabled {
+ cursor: not-allowed;
+ opacity: var(--fm-disabled-opacity);
+ }
+
+ &-round {
+ border-radius: var(--fm-button-round);
+ }
+
+ &-square {
+ border-radius: 0;
+ }
+ .fm-button-loading {
+ display: inline-block;
+ width: 20px;
+ max-width: 100%;
+ height: 20px;
+ max-height: 100%;
+ vertical-align: middle;
+ animation: fm-rotate 2s linear infinite;
+ circle {
+ animation: fm-circular 1.5s ease-in-out infinite;
+ stroke: currentColor;
+ stroke-width: 4;
+ stroke-linecap: round;
+ }
+ &-icon-circular {
+ color: #fff;
+ }
+ }
+ .fm-button-loading-text {
+ margin-left: 6px;
+ }
+ .fm-button-icon:not(:last-child) {
+ margin-right: 6px;
+ }
+
+ &::before {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 100%;
+ height: 100%;
+ background-color: #000;
+ border: inherit;
+ border-color: #000;
+ border-radius: inherit;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ opacity: 0;
+ content: ' ';
+ }
+ &:active::before {
+ opacity: 0.1;
+ }
+ &-loading,
+ &-disabled {
+ &::before {
+ display: none;
+ }
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/calendar.scss b/packages/mobile-ui-vue/components/theme/src/calendar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a9cadbdb1a49d4e864f4a6017f7ae42bc37e211e
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/calendar.scss
@@ -0,0 +1,205 @@
+:root {
+ --fm-calendar-font-size: var(--fm-font-size-base);
+ --fm-calendar-color: var(--fm-text-color);
+ --fm-calendar-background: var(--fm-background);
+ --fm-calendar-background-range: var(--fm-blue-2);
+ --fm-calendar-sub-font-size: var(--fm-font-size-xs);
+ --fm-calendar-sub-color: var(--fm-text-color-2);
+ --fm-calendar-radius: var(--fm-radius-max);
+ --fm-calendar-primary-color: var(--fm-primary-color);
+}
+
+.fm-calendar-day-cell {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ color: var(--fm-calendar-color);
+ cursor: pointer;
+ position: relative;
+ &:after {
+ content: '';
+ display: block;
+ padding-top: 100%;
+ }
+ .text {
+ width: 34px;
+ height: 34px;
+ border-radius: var(--fm-calendar-radius);
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ .day-lunar {
+ font-size: var(--fm-calendar-sub-font-size);
+ color: var(--fm-calendar-sub-color);
+ transform: scale(0.87);
+ white-space: nowrap;
+ }
+ }
+ .mark {
+ position: absolute;
+ top: 2px;
+ right: 2px;
+ font-size: 8px;
+ color: var(--fm-calendar-primary-color);
+ letter-spacing: 0.21px;
+ transform: scale(0.75);
+ }
+ .event {
+ position: absolute;
+ bottom: 2px;
+ left: 50%;
+ width: 5px;
+ height: 5px;
+ transform: translateX(-50%);
+ border-radius: var(--fm-calendar-radius);
+ background: var(--fm-calendar-primary-color);
+ }
+ &.fm-calendar-day-cell-current {
+ .text {
+ .day,
+ .day-lunar {
+ color: var(--fm-calendar-primary-color);
+ }
+ }
+ }
+ &.fm-calendar-day-cell-selected {
+ .text {
+ .day,
+ .day-lunar {
+ color: var(--fm-calendar-background);
+ }
+ }
+ }
+}
+
+
+.fm-calendar {
+ display: flex;
+ flex-direction: column;
+ background-color: var(--fm-calendar-background);
+ font-size: var(--fm-calendar-font-size);
+ .fm-calendar-header {
+ flex-shrink: 0;
+ .fm-calendar-header-title,
+ .fm-calendar-header-subtitle {
+ height: 44px;
+ line-height: 44px;
+ font-weight: 500;
+ text-align: center;
+ padding: 0 8px;
+ }
+ .fm-calendar-header-subtitle,
+ .fm-calendar-header-weekdays,
+ .fm-calendar-header-subtitle .left,
+ .fm-calendar-header-subtitle .right {
+ display: flex;
+ }
+ .fm-calendar-header-subtitle {
+ justify-content: space-between;
+ .fm-calendar-header-button {
+ padding: 0 8px;
+ }
+ }
+ .fm-calendar-header-weekdays {
+ .fm-calendar-weekday {
+ flex: 1;
+ line-height: 30px;
+ text-align: center;
+ }
+ }
+ }
+ .fm-calendar-body {
+ flex: 1;
+ overflow: hidden;
+ position: relative;
+ .content-box {
+ display: flex;
+ .content {
+ width: 100%;
+ flex-shrink:0;
+ }
+ }
+ .back-ground{
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 160px;
+ color: rgba(51,51,51,0.05);
+ z-index: 0;
+ pointer-events: none;
+ }
+ .fm-calendar-collapse {
+ display: flex;
+ justify-content: center;
+ .icon {
+ font-size: 20px;
+ color: #888;
+ }
+ }
+ }
+}
+
+.fm-calendar-month {
+ display: flex;
+ user-select: none;
+ flex-direction: column;
+}
+.fm-calendar-week {
+ display: flex;
+}
+.fm-calendar-theme-card {
+ .fm-calendar-day-cell-selected {
+ .text {
+ background-color: var(--fm-calendar-primary-color);
+ }
+ }
+}
+.fm-calendar-theme-form {
+ .fm-calendar-header {
+ box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
+ }
+ .fm-calendar-day-cell {
+ height: 64px;
+ }
+ .fm-calendar-day-cell-selected {
+ background-color: var(--fm-calendar-primary-color);
+ border-radius: 4px;
+ }
+ .fm-calendar-day-cell-begin {
+ border-radius: 4px 0 0 4px;
+ }
+ .fm-calendar-day-cell-end {
+ border-radius: 0 4px 4px 0;
+ }
+ .fm-calendar-day-cell-range {
+ background-color: var(--fm-calendar-background-range);
+ opacity: var(--fm-active-opacity);
+ }
+ .fm-calendar-day-cell-opacity:not(.fm-calendar-day-cell-selected):not(.fm-calendar-day-cell-range):not(.fm-calendar-day-cell-begin):not(.fm-calendar-day-cell-end) {
+ .text {
+ .day,
+ .day-lunar {
+ color: var(--fm-calendar-sub-color);
+ }
+ }
+ }
+}
+.fm-calendar-header-button-disabled,
+.fm-calendar-day-cell-disabled{
+ opacity: var(--fm-disabled-opacity);
+}
+
+.fm-calendar-pop-wrapper {
+ .footer {
+ padding: 0 16px;
+ .confirm {
+ height: 36px;
+ margin: 7px 0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/card.scss b/packages/mobile-ui-vue/components/theme/src/card.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4fa2d3fe4d4265a18d538ab31bd689c1469d87ec
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/card.scss
@@ -0,0 +1,65 @@
+:root {
+ --fm-card-background: var(--fm-background);
+ --fm-card-header-font-bold: var(--fm-font-bold);
+ --fm-card-header-icon-color: var(--fm-green);
+ --fm-card-header-icon-radius: var(--fm-radius-max);
+ --fm-card-footer-font-size: var(--fm-font-size-md);
+ --fm-card-footer-color: var(--fm-primary-color);
+}
+
+.fm-card {
+ background-color: var(--fm-card-background);
+ &-header {
+ &-cell {
+ font-weight: var(--fm-card-font-bold);
+ }
+ &-left-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--fm-card-header-icon-color);
+ border-radius: var(--fm-card-header-icon-radius);
+ width: 20px;
+ height: 20px;
+ }
+ &-right-icon {
+ transition: transform var(--fm-duration-base);
+ }
+ }
+ &-content-wrapper {
+ display: block;
+ overflow: hidden;
+ transition: height var(--fm-duration-base) ease-in-out;
+ will-change: height;
+ .fm-card-content {
+ display: block;
+ }
+ }
+ &-footer {
+ display: flex;
+ @include hairline('top', var(--fm-border-color));
+ &-btn {
+ color: var(--fm-card-footer-color);
+ font-size: var(--fm-card-footer-font-size);
+ .fm-icon {
+ color: var(--fm-card-footer-color);
+ font-size: var(--fm-card-footer-font-size);
+ }
+
+ &:not(:last-child) {
+ &::after {
+ position: relative;
+ content: '';
+ display: block;
+ margin-top: -8px;
+ height: 16px;
+ width: 1px;
+ background-color: var(--fm-border-color);
+ position: absolute;
+ top: 50%;
+ right: 0;
+ }
+ }
+ }
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/cell.scss b/packages/mobile-ui-vue/components/theme/src/cell.scss
new file mode 100644
index 0000000000000000000000000000000000000000..48b645e121de56036be5054030ac23d15227b99a
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/cell.scss
@@ -0,0 +1,129 @@
+@import './mixins/hairline';
+:root {
+ --fm-cell-padding: 10px 16px;
+ --fm-cell-margin: 5px;
+ --fm-cell-background: var(--fm-background-2);
+ --fm-cell-color: var(--fm-text-color);
+ --fm-cell-font-size: var(--fm-font-size-base);
+ --fm-cell-line-height: 24px;
+ --cell-required-color: var(--fm-danger-color);
+ --cell-required-font-size: var(--fm-font-size-sm);
+ --cell-value-color: var(--fm-text-color);
+ --cell-label-color: var(--fm-text-color-2);
+ --cell-label-font-size: var(--fm-font-size-sm);
+ --cell-label-line-height: var(--fm-line-height-sm);
+}
+.fm-cell {
+ width: 100%;
+ padding: 10px 16px;
+ background-color: var(--fm-cell-background);
+ box-sizing: border-box;
+ color: var(--fm-cell-color);
+ font-size: var(--fm-cell-font-size);
+ line-height: var(--fm-cell-line-height);
+ position: relative;
+ display: flex;
+ overflow: hidden;
+ &-bottom-border,
+ &:not(:last-child) {
+ @include hairline('bottom', var(--fm-border-color));
+ &::after {
+ left: 16px !important;
+ }
+ }
+ &.fm-cell-all-width:not(:last-child) {
+ &::after {
+ left: 0 !important;
+ }
+ }
+ &-clickable {
+ cursor: pointer;
+ }
+ &-clickable:active {
+ background-color: var(--fm-active-color);
+ }
+ &-required {
+ .fm-cell-title {
+ position: relative;
+ .fm-cell-title-text {
+ &::after {
+ padding-left: 2px;
+ color: var(--cell-required-color);
+ font-size: var(--cell-required-font-size);
+ content: '*';
+ }
+ }
+ }
+ }
+ &-flex-fill,
+ &-title,
+ &-value {
+ flex: 1;
+ font-size: inherit;
+ }
+ &-title {
+ display: inline-block;
+ overflow: hidden;
+ &-text {
+ display: flex;
+ word-break: break-all;
+ span {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+ &-right {
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ &-content {
+ display: flex;
+ flex: 1;
+ }
+ }
+ &-value {
+ position: relative;
+ overflow: hidden;
+ color: var(--cell-value-color);
+ text-align: right;
+ vertical-align: middle;
+ word-wrap: break-word;
+
+ &-alone {
+ color: var(--cell-value-color);
+ text-align: left;
+ }
+ }
+ &-label {
+ margin-top: var(--fm-cell-margin);
+ color: var(--cell-label-color);
+ font-size: var(--cell-label-font-size);
+ line-height: var(--cell-label-line-height);
+ }
+ &-center {
+ align-items: center;
+ }
+ &-extra,
+ &-left-icon,
+ &-right-icon {
+ min-width: 1em;
+ font-size: var(--fm-cell-font-size);
+ line-height: var(--fm-cell-line-height);
+ display: flex;
+ align-items: center;
+ }
+ &-left-icon {
+ margin-right: var(--fm-cell-margin);
+ }
+ &-extra,
+ &-right-icon {
+ margin-left: var(--fm-cell-margin);
+ }
+ &-noborder {
+ .fm-cell::after {
+ display: none !important;
+ }
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/checkbox.scss b/packages/mobile-ui-vue/components/theme/src/checkbox.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7ee8ce523d340535bd693be86263a43ac18e0a59
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/checkbox.scss
@@ -0,0 +1,22 @@
+
+.fm-checkbox-group {
+ .fm-checkbox-horizontal {
+ display: flex;
+ overflow: visible;
+ text-align: left;
+ flex-wrap: wrap;
+ .fm-checkbox {
+ margin-top: 4px;
+ margin-bottom: 4px;
+ }
+ }
+}
+.fm-cell .fm-checkbox-group .fm-checkbox-vertical {
+ padding-left: 0;
+}
+.fm-input-control-right {
+ .fm-checkbox-horizontal {
+ justify-content: flex-end;
+ }
+}
+
diff --git a/packages/mobile-ui-vue/components/theme/src/checker.scss b/packages/mobile-ui-vue/components/theme/src/checker.scss
new file mode 100644
index 0000000000000000000000000000000000000000..48e9bba92bbbeb41f39ba47db0d380a3a92f2c2d
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/checker.scss
@@ -0,0 +1,94 @@
+:root {
+ --fm-checker-color: var(--fm-text-color);
+ --fm-checker-icon-color: var(--fm-text-color-2);
+ --fm-checker-icon-background: var(--fm-background-2);
+ --fm-checker-icon-radius: var(--fm-radius-md);
+ --fm-checker-checked-icon-color: var(--fm-primary-color);
+ --fm-checker-button-background: var(--fm-gray-2);
+ --fm-checker-disabled-color: var(--fm-disabled-color);
+ --fm-checker-disabled-icon-color: var(--fm-gray-1);
+}
+
+.fm-checker {
+ display: flex;
+ align-items: center;
+ color: var(--fm-checker-color);
+ &-icon {
+ display: inline-block;
+ align-items: center;
+ .fm-icon {
+ display: block;
+ height: 20px;
+ width: 20px;
+ line-height: 18px;
+ font-size: 12px;
+ text-align: center;
+ border-radius: var(--fm-checker-icon-radius);
+ border: 1px solid var(--fm-checker-icon-color);
+ color: var(--fm-checker-icon-background);
+ background-color: var(--fm-checker-icon-background);
+ }
+ &-checked .fm-icon {
+ color: var(--fm-checker-icon-background);
+ border-color: var(--fm-checker-checked-icon-color);
+ background-color: var(--fm-checker-checked-icon-color);
+ }
+ &-round .fm-icon {
+ border-radius: 100%;
+ }
+ }
+ &-button {
+ font-size: 13px;
+ text-align: center;
+ border-radius: 14px;
+ color: var(--fm-checker-color);
+ background: var(--fm-checker-button-background);
+ &-checked {
+ color: var(--fm-checker-icon-background);
+ border-color: var(--fm-checker-color);
+ background-color: var(--fm-checker-checked-icon-color);
+ }
+ }
+ .fm-checker-label {
+ margin-left: 8px;
+ margin-right: 8px;
+ display: inline-block;
+ line-height: 20px;
+ }
+ &:first-child .fm-checker-button {
+ margin-left: 0;
+ }
+ .fm-checker-button {
+ line-height: 28px;
+ padding: 0 12px;
+ min-width: 60px;
+ margin-right: 0;
+ }
+ &-small {
+ .fm-checker-button {
+ line-height: 24px;
+ min-width: 45px;
+ padding: 0 9.5px;
+ }
+ }
+ &-readonly {
+ opacity: var(--fm-readonly-opacity);
+ }
+ &-disabled {
+ color: var(--fm-checker-disabled-color);
+ .fm-checker-icon {
+ .fm-icon {
+ border-color: var(--fm-checker-disabled-color);
+ background-color: var(--fm-checker-disabled-icon-color);
+ color: var(--fm-checker-disabled-icon-color);
+ }
+ }
+ .fm-checker-icon-checked {
+ .fm-icon {
+ background-color: var(--fm-checker-disabled-color);
+ border-color: var(--fm-checker-disabled-color);
+ }
+ }
+ }
+}
+
diff --git a/packages/mobile-ui-vue/components/theme/src/collapse.scss b/packages/mobile-ui-vue/components/theme/src/collapse.scss
new file mode 100644
index 0000000000000000000000000000000000000000..de845a3e34f33b4295bc9731a43a8d61ef5c359a
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/collapse.scss
@@ -0,0 +1,38 @@
+:root {
+ --fm-collapse-background: var(--fm-white);
+ --fm-collapse-title-color: var(--fm-text-color-2);
+}
+
+.fm-collapse-item {
+ &-title {
+ font-weight: 500;
+ &-state-icon {
+ transition: transform var(--fm-duration-base);
+ }
+ }
+ &-content-wrapper {
+ display: block;
+ overflow: hidden;
+ transition: height var(--fm-duration-base) ease-in-out;
+ will-change: height;
+ .fm-collapse-item-content {
+ display: block;
+ }
+ }
+}
+.fm-collapse-item-bottom {
+ .fm-collapse-item-title {
+ .fm-collapse-item-cell {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 16px;
+ color: var(--fm-collapse-title-color);
+ font-size: 13px;
+ background-color: var(--fm-collapse-background);
+ }
+ &-state-icon{
+ margin-right: 6px;
+ }
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/dialog.scss b/packages/mobile-ui-vue/components/theme/src/dialog.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5fe933dba1351a93421c8f6dc28493e3ee8b878d
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/dialog.scss
@@ -0,0 +1,107 @@
+@import './mixins/hairline';
+
+:root {
+ --fm-dialog-background: var(--fm-background-2);
+ --fm-dialog-padding-top: 24px;
+ --fm-dialog-padding-left: 16px;
+ --fm-dialog-header-font-size: 17px;
+ --fm-dialog-header-line-height: 24px;
+ --fm-dialog-content-font-size: 15px;
+ --fm-dialog-content-line-height: 20px;
+ --fm-dialog-footer-height: 50px;
+}
+
+@media screen and (min-width: 375px) {
+ .fm-dialog {
+ width: 320px;
+ }
+}
+@media screen and (min-width: 280px) and (max-width: 375px) {
+ .fm-dialog {
+ width: 240px;
+ }
+}
+.fm-dialog{
+ display: flex;
+ flex-direction: column;
+ background-color: var(--fm-dialog-background);
+ overflow: hidden;
+ &-header{
+ padding-top: var(--fm-dialog-padding-top);
+ padding-left: var(--fm-dialog-header-padding-left);
+ padding-right: var(--fm-dialog-header-padding-left);
+ font-weight: var(--fm-font-bold-light);
+ font-size: var(--fm-dialog-header-font-size);
+ color: var(--fm-text-color);
+ line-height: var(--fm-dialog-header-line-height);
+ text-align: center;
+ }
+ &-content{
+ max-height: 70vh;
+ overflow-y: auto;
+ &-message{
+ padding: var(--fm-dialog-padding-top) var(--fm-dialog-padding-left);
+ font-size: var(--fm-dialog-content-font-size);
+ line-height: var(--fm-dialog-content-line-height);
+ white-space: pre-wrap;
+ text-align: center;
+ word-wrap: break-word;
+ }
+ &-message-has-title{
+ padding-top: 11px;
+ color: var(--fm-text-color-light);
+ }
+ }
+ &-content-prompt{
+ padding: 14px;
+ &-input{
+ display: block;
+ }
+ }
+ &-footer{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ @include hairline('top', var(--fm-border-color));
+ .fm-button{
+ border:0;
+ height: var(--fm-dialog-footer-height);
+ @include hairline('right', var(--fm-border-color));
+ &:last-child{
+ @include hairline-remove('right');
+ }
+ &.fm-button-default{
+ color: var(--fm-text-color);
+ }
+ }
+ &.fm-dialog-footer-is-column{
+ flex-direction: column;
+ .fm-button{
+ @include hairline('top', var(--fm-border-color));
+ @include hairline-remove('right');
+ &:first-child{
+ @include hairline-remove('top');
+ }
+ }
+ }
+ }
+ &.fm-dialog-relative{
+ position: relative;
+ .fm-dialog-header{
+ padding-right: 40px;
+ }
+ }
+ .fm-dialog-close{
+ position: absolute;
+ right: 16px;
+ top: 16px;
+ width: 22px;
+ height: 22px;
+ line-height: 22px;
+ text-align: center;
+ .fm-icon{
+ font-size: 15px;
+ color: var(--fm-text-color-2);
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/discussion-group.scss b/packages/mobile-ui-vue/components/theme/src/discussion-group.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0701f00d2df9ed801b7e1633315ce784179621a3
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/discussion-group.scss
@@ -0,0 +1,271 @@
+@import './mixins/hairline';
+
+:root {
+ --fm-discussion-editor-primary-color: var(--fm-primary-color);
+}
+
+.fm-discussion-editor{
+ padding: 0 16px;
+ color: #333;
+ font-size: 16px;
+ &-reply{
+ padding-bottom: 10px;
+ font-size: 14px;
+ .editor-reply-text{
+ color: var(--fm-discussion-editor-primary-color);
+ }
+ }
+ &-input{
+ background-color: #fff;
+ // @include hairline('all', $border-color-base);
+ .fm-discussion-editor-textarea{
+ height: 130px;
+ padding: 10px;
+ line-height: 24px;
+ background-color: #f6f6f6;
+ outline: none;
+ overflow-y: auto;
+ word-break: break-all;
+ white-space: normal;
+ a{
+ color: var(--fm-discussion-editor-primary-color);
+ }
+ &:empty::before{
+ content:attr(placeholder);
+ color: #cccccc;
+ }
+ }
+ }
+ &-buttom{
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ // padding: 8px 14px 8px 0;
+ height: 44px;
+ // background-color: $discussion-editor-buttom-background;
+ .fm-discussion-editor-toolbar{
+ padding-right: 20px;
+ line-height: 44px;
+ font-size: 16px;
+ .fm-icon{
+ font-size: 24px;
+ color: #666666;
+ }
+ }
+ .fm-discussion-editor-text{
+ padding-right: 10px;
+ font-size: 16px;
+ color: var(--fm-discussion-editor-primary-color);
+ }
+ }
+}
+
+.fm-discussion-list{
+ padding: 0 16px;
+ background-color: #fff;
+ &-item{
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding-bottom: 20px;
+ .list-item-avatar{
+ width: 36px;
+ height: 36px;
+ margin-right: 14px;
+ &-image{
+ display: block;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ }
+ &-image-tip{
+ width: 100%;
+ height: 100%;
+ line-height: 36px;
+ font-size: 14px;
+ color: #fff;
+ text-align: center;
+ border-radius: 50%;
+ background-color: var(--fm-discussion-editor-primary-color);
+ }
+ }
+ .list-item-content{
+ flex: 1 1 0;
+ .list-item-name{
+ line-height: 18px;
+ margin-bottom: 6px;
+ font-size: 13px;
+ font-weight: 600;
+ }
+ .list-item-text{
+ margin-bottom: 4px;
+ line-height: 22px;
+ font-size: 15px;
+ a{
+ color: var(--fm-discussion-editor-primary-color);
+ }
+ }
+ .list-item-reply{
+ margin-bottom: 6px;
+ padding: 8px;
+ font-size: 0;
+ background: #f7f8fb;
+ border-radius: 4px;
+ &-title{
+ font-size: 14px;
+ .list-item-reply-name{
+ color: var(--fm-discussion-editor-primary-color);
+ }
+ }
+ &-content{
+ line-height: 20px;
+ font-size: 14px;
+ color: #666666;
+ }
+ }
+ .list-item-buttom{
+ display: flex;
+ align-items: center;
+ align-items: center;
+ .list-item-date{
+ line-height: 18px;
+ margin-right: 12px;
+ color: #999999;
+ }
+ .list-item-btn{
+ padding: 0 12px;
+ background: #EBF6FF;
+ border-radius: 10px;
+ line-height: 20px;
+ color: var(--fm-discussion-editor-primary-color);
+ &-tip{
+ padding: 0 2px;
+ }
+ }
+ }
+ }
+ }
+ &-title{
+ padding: 12px 0 16px;
+ font-size: 16px;
+ color: #000000;
+ }
+}
+
+.fm-discussion-group{
+ padding: 7px 19px 6px;
+ background: #ffffff;
+ @include hairline('top');
+ .fm-discussion-group-main{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ .fm-discussion-group-text{
+ flex: 1 1 0;
+ padding: 0 12px;
+ line-height: 32px;
+ background: #f6f6f6;
+ font-size: 16px;
+ color: #999;
+ border-radius: 16px;
+ }
+ .fm-discussion-group-message{
+ flex-shrink: 0;
+ padding-left: 20px;
+ font-size: 16px;
+ color: #333;
+ .fm-icon{
+ margin-right: 6px;
+ font-size: 18px;
+ }
+ }
+ }
+}
+
+.fm-discussion-group-toolbar{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 16px;
+ @include hairline('top');
+ .fm-toolbar-btn{
+ line-height: 24px;
+ font-size: 17px;
+ color: #3A90FF;
+ }
+ .fm-toolbar-text{
+ line-height: 26px;
+ font-size: 19px;
+ }
+}
+
+.fm-discussion-group-close{
+ display: flex;
+ justify-content: flex-end;
+ position: absolute;
+ right: 16px;
+ top: 7px;
+ .fm-close-btn{
+ height: 30px;
+ width: 30px;
+ line-height: 30px;
+ text-align: center;
+ .fm-icon{
+ font-size: 16px;
+ color: #999;
+ }
+ }
+}
+.fm-discussion-list-popup{
+ top: 20px;
+ border-radius: 14px 14px 0 0;
+ .fm-discussion-list-content{
+ display: flex;
+ flex-direction: column;
+ // justify-content: space-between;
+ height: 100%;
+ padding-bottom: 50px;
+ position: relative;
+ padding-top: 44px;
+ .fm-discussion-footer{
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+ }
+ .fm-discussion-list-count{
+ position: absolute;
+ left: 50%;
+ top: 10px;
+ transform: translateX(-50%);
+ line-height: 24px;
+ font-size: 17px;
+ color: #333;
+ }
+ .fm-discussion-list-main{
+ .fm-discussion-list-item{
+ padding: 12px 16px 16px;
+ @include hairline('top');
+ @include hairline('bottom');
+ }
+ }
+ .fm-discussion-list-reply-text{
+ padding: 12px 16px 16px;
+ color: #000;
+ font-size: 16px;
+ font-weight: 600;
+ }
+ .fm-discussion-footer{
+ flex-shrink: 0;
+ }
+}
+.fm-discussion-list{
+ // max-height: calc(100vh - 99px);
+ overflow-y: auto;
+}
+.fm-discussion-list-overlay{
+ height: calc( 100% - 45px);
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/dropdown.scss b/packages/mobile-ui-vue/components/theme/src/dropdown.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a7bc9ee4c06fa2411d6263e3e418d852aba5ebf7
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/dropdown.scss
@@ -0,0 +1,132 @@
+.fm-dropdown-menu {
+ user-select: none;
+ color: #333333;
+ &-bar {
+ position: relative;
+ display: flex;
+ height: 48px;
+ background-color: #fff;
+ box-shadow: 0 2px 12px rgba(100,101,102,0.12);
+
+ &-opened {
+ z-index: 10;
+ }
+ }
+
+ &-item {
+ display: flex;
+ flex: 1;
+ align-items: center;
+ justify-content: center;
+ min-width: 0; // hack for flex ellipsis
+ cursor: pointer;
+
+ &:active {
+ opacity: 1;
+ }
+
+ &.fm-dropdown-menu-item-disabled {
+ &:active {
+ opacity: 1;
+ }
+
+ .fm-dropdown-menu-title {
+ color: #ccc;
+ &::after{
+ color: #ccc;
+ }
+ }
+ }
+ }
+
+ &-title {
+ position: relative;
+ box-sizing: border-box;
+ max-width: 100%;
+ padding: 0 8px;
+ font-size: 16px;
+ line-height: 22px;
+
+ &::after {
+ position: absolute;
+ top: 50%;
+ right: -4px;
+ margin-top: -5px;
+ border: 3px solid;
+ border-color: transparent transparent #888 #888;
+ transform: rotate(-45deg);
+ opacity: 0.8;
+ content: '';
+ }
+
+ &-active {
+ color: var(--fm-primary-color);
+
+ &::after {
+ border-color: transparent transparent currentColor currentColor;
+ }
+ }
+
+ &-down {
+ &::after {
+ margin-top: -1px;
+ transform: rotate(135deg);
+ }
+ }
+
+ &-text{
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+
+
+ .fm-dropdown-item {
+ position: fixed;
+ right: 0;
+ left: 0;
+ z-index: 10;
+ overflow: hidden;
+ &-icon {
+ display: block;
+ line-height: inherit;
+ }
+
+ &-option {
+ text-align: left;
+
+ &-active {
+ color: var(--fm-primary-color);
+
+ .fm-dropdown-item-icon {
+ color: var(--fm-primary-color);
+ }
+ }
+ &-disabled{
+ color: --fm-disabled-color
+ }
+ .fm-cell-value{
+ .fm-icon{
+ color: var(--fm-primary-color);
+ }
+ }
+ }
+
+ &-up {
+ top: 0;
+ }
+
+ &-down {
+ bottom: 0;
+ }
+
+ &-content {
+ position: absolute;
+ max-height: 80%;
+ }
+ .fm-dropdown-item-overlay{
+ position: absolute;
+ }
+ }
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/filter.scss b/packages/mobile-ui-vue/components/theme/src/filter.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d066b3b98b1c1fb8a046b00ecfcf6e67bf9d3b2d
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/filter.scss
@@ -0,0 +1,347 @@
+@import './mixins/hairline';
+@import './mixins/ellipsis';
+
+:root {
+ --fm-filter-color: var(--fm-text-color);
+ --fm-filter-color-sub: var(--fm-text-color-2);
+ --fm-filter-primary-color: var(--fm-primary-color);
+ --fm-filter-panel-background: var(--fm-background-2);
+ --fm-filter-panel-sub-font-size: 13px;
+ --fm-filter-panel-sub-icon-font-size: 12px;
+}
+
+.fm-filter-panel {
+ width: 100%;
+ height: 100%;
+ background-color: var(--fm-filter-panel-background);
+ overflow: auto;
+ transform: translate3d(0,0,0);
+ &-content {
+ height: 100%;
+ box-sizing: border-box;
+ padding-bottom: 250px;
+ overflow-y: auto;
+ }
+ &-field {
+ padding: 8px 16px 16px 16px;;
+ overflow-x: hidden;
+ &-title {
+ display:flex;
+ align-items: center;
+ justify-content: space-between;
+ color: var(--fm-filter-color);
+ line-height: 22px;
+ // position: relative;
+ &-text{
+ flex-shrink:0;
+ padding-right:10px;
+ }
+ &-text-required::after{
+ padding-left: 2px;
+ color: var(--fm-danger-color);
+ font-size: var(--fm-filter-panel-sub-font-size);
+ content: '*';
+ }
+
+ &-sub {
+ display: flex;
+ justify-content: flex-end;
+ flex: 1 1 0;
+ align-items: center;
+ height: 100%;
+ font-size: var(--fm-filter-panel-sub-font-size);
+ overflow:hidden;
+ &-text {
+ color: var(--fm-filter-primary-color);
+ max-width: 160px;
+ @include ellipsis
+ }
+
+ &-button {
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+ margin-left: 8px;
+ &-text {
+ display: flex;
+ margin-right: 4px;
+ color: var(--fm-filter-color-sub);
+ }
+ }
+ &-icon {
+ font-size: var(--fm-filter-panel-sub-icon-font-size);
+ }
+ &-lookup {
+ display: flex;
+ align-items: center;
+ }
+ }
+ }
+
+ &-content {
+ padding-top: 12px;
+ }
+ &-input {
+ padding: 6px 8px;
+ line-height: 18px;
+ background: var(--fm-background);
+ font-size: var(--fm-filter-panel-sub-font-size);
+ border-radius: var(--fm-radius-md);
+ color: var(--fm-filter-primary-color);
+ text-align: center;
+ .fm-input-value .fm-input-body .fm-input-control {
+ font-size: var(--fm-filter-panel-sub-font-size);
+ color: var(--fm-filter-primary-color);
+ }
+ }
+ &-range {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ }
+ &-split {
+ width: 8px;
+ margin: 0 8px;
+ border: 1px solid var(--fm-filter-color-sub);
+ }
+ &-lookup-panel {
+ width: 320px;
+ }
+ &-number-list {
+ padding-top: 10px;
+ }
+ &-error-message {
+ font-size: var(--fm-filter-panel-sub-font-size);;
+ line-height: 24px;
+ color: var(--fm-danger-color);
+ }
+ }
+ &-footer {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 54px;
+
+ padding: 8px 16px;
+ background: var(--fm-background-2);
+ box-shadow: 0 -2px 6px 0 var(--fm-box-shadow-color);
+ z-index: var(--fm-zindex-1);
+ .button-wrapper {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .button {
+ flex: 1;
+ height: 38px;
+ &:first-child {
+ color: var(--fm-filter-primary-color);
+ border: 1px solid var(--fm-filter-primary-color);
+ border-radius: 20px 0 20px 20px;
+ z-index: var(--fm-zindex-3);
+ }
+ &:last-child {
+ margin-left: -15px;
+ border-radius: 0 20px 20px 0;
+ }
+ }
+ }
+ }
+ .bgc-red {
+ background-color: var(--fm-danger-color);
+ color: var(--fm-background-2);
+ }
+ .bgc-blue {
+ background-color: var(--fm-filter-primary-color);
+ color: var(--fm-background-2);
+ }
+ &-list {
+ &-line {
+ display: flex;
+ &:not(:last-child) {
+ margin-bottom: 10px;
+ }
+ }
+ &-item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 30px;
+ width: 90px;
+ padding: 6px 8px;
+ line-height: 18px;
+ background: var(--fm-background);
+ font-size: var(--fm-filter-panel-sub-font-size);
+ border-radius: var(--fm-radius-md);
+ color: var(--fm-filter-primary-color);
+ overflow: hidden;
+ &:not(:first-child) {
+ margin-left: 10px;
+ }
+ &-selected {
+ background: var(--fm-filter-primary-color);
+ color: var(--fm-background-2);
+ }
+ }
+ }
+}
+.fm-filter-simple-panel {
+ height: 100%;
+ .content {
+ display: flex;
+ height: 100%;
+ .menu {
+ width: 105px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ background: #F1F2F5;
+ overflow: auto;
+ .menu-item {
+ background-color: #fff;
+ .menu-item-cell {
+ background-color: #F1F2F5;
+ }
+ }
+ .menu-item-selected {
+ .menu-item-cell {
+ background-color: #fff;
+ }
+ }
+ .menu-item-selected-prev {
+ .menu-item-cell {
+ border-radius: 0 0 12px 0;
+ }
+ }
+ .menu-item-selected-next {
+ .menu-item-cell {
+ border-radius: 0 12px 0 0;
+ }
+ }
+ }
+ .list{
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ .list-item {
+ display: flex;
+ width: 100%;
+ .list-item-icon {
+ color: var(--fm-filter-primary-color);
+ }
+ }
+ }
+ }
+
+}
+.fm-filter-bar-panel {
+ position: relative;
+ padding-bottom: 54px;
+ background-color: var(--fm-background-2);
+ .fm-filter-panel-extra {
+ padding-top: 12px;
+ }
+}
+.fm-filter {
+ .fm-filter-search-button {
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+ color: var(--fm-gray-7);
+ font-size: 14px;
+ line-height: 20px;
+ .fm-filter-button-text {
+ padding-right: 2px;
+ }
+ .fm-filter-icon {
+ font-size: 20px;
+ }
+ }
+ .fm-filter-search-container {
+ position: relative;
+ padding: 0 16px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ background: var(--fm-background-2);
+ .fm-filter-search-button {
+ margin: 0 8px 0 0;
+ }
+ .fm-filter-search-input {
+ flex: 1 1 0;
+ .fm-search {
+ padding: 8px 0;
+ }
+ }
+ }
+ .fm-filter-only-icon {
+ display: inline-block;
+ }
+
+ .fm-state-active {
+ color: var(--fm-filter-primary-color);
+ }
+}
+.fm-filter-popup {
+ width: 320px;
+}
+.fm-filter-popup-drop {
+ width: 100%;
+ height: 200px;
+ overflow: hidden;
+}
+
+.filter-cell.van-cell:last-child::after,
+.filter-cell .van-cell:last-child::after {
+ display: block;
+}
+.fm-filter-right {
+ .fm-filter-search-container {
+ flex-direction: row-reverse;
+ .fm-filter-search-button {
+ margin: 0 0 0 8px;
+ }
+ }
+}
+
+.fm-filter-bar {
+ display: flex;
+ padding: 11px 16px;
+ &-item {
+ display: flex;
+ align-items: center;
+ height: 28px;
+ font-size: 13px;
+ line-height: 18px;
+ background: rgba(42,135,255,0.06);
+ overflow: hidden;
+ border-radius: 13px;
+ padding: 0 12px;
+ &-value,
+ &-name {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ &-value {
+ color: var(--fm-filter-primary-color);
+ }
+ &-name {
+ color: var(--fm-gray-7);
+ }
+ &-noshrink {
+ flex-shrink: 0;
+ }
+ &:not(:first-child) {
+ margin-left: 12px;
+ }
+ }
+ &-item {
+ .fm-icon {
+ color: var(--fm-filter-color-sub);
+ margin-left: 8px;
+ font-size: 12px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/html-panel.scss b/packages/mobile-ui-vue/components/theme/src/html-panel.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d305731c75a94037d855cdbc4fa96c2bdf032431
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/html-panel.scss
@@ -0,0 +1,35 @@
+.fm-html-panel {
+ box-sizing: border-box;
+ line-height: 1.42;
+ outline: none;
+ overflow-y: auto;
+ tab-size: 4;
+ text-align: left;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ img {
+ max-width: 100%;
+ }
+ li::before {
+ display: inline-block;
+ white-space: nowrap;
+ width: 1.2em;
+ }
+ ul,
+ ol {
+ padding-left: 1.5em;
+ }
+ ul > li::before {
+ content: '\2022';
+ }
+ ol {
+ li {
+ counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8
+ list-9;
+ counter-increment: list-0;
+ }
+ li:before {
+ content: counter(list-0, decimal) '. ';
+ }
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/icon.scss b/packages/mobile-ui-vue/components/theme/src/icon.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e6b2f5e188d80eaa19ee7488604654bf1eb9c351
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/icon.scss
@@ -0,0 +1,727 @@
+@font-face {
+ font-family: 'farrisMobile';
+ font-style: normal;
+ font-weight: normal;
+ src: url('./fonts/farris-mobile-icon.ttf?v=20230515') format('truetype');
+}
+:root {
+ --fm-icon-font-size: 14px;
+ --fm-icon-color: inherit;
+}
+.fm-icon {
+ font-family: 'farrisMobile' !important;
+ font-size: 14px;
+ font-style: normal;
+ color: var(--fm-icon-color);
+ display: inline-block;
+ width: 1em;
+ height: 1em;
+ font-weight: 400;
+ line-height: 1;
+ vertical-align: middle;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+.fm-icon::before{
+ display: inline-block;
+}
+
+.fm-icon-filter::before {
+ content: '\e697';
+}
+.fm-icon-cardfold::before {
+ content: '\e6b7';
+}
+
+.fm-icon-cardunfold::before {
+ content: '\e6b8';
+}
+
+.fm-icon-trafficother::before {
+ content: '\e6b9';
+}
+
+.fm-icon-bottomsave::before {
+ content: '\e6ba';
+}
+
+.fm-icon-trafficboat::before {
+ content: '\e6bb';
+}
+
+.fm-icon-trafficcar::before {
+ content: '\e6bc';
+}
+
+.fm-icon-trafficplane::before {
+ content: '\e6bd';
+}
+
+.fm-icon-traffictrain::before {
+ content: '\e6be';
+}
+
+.fm-icon-trafficbus::before {
+ content: '\e6bf';
+}
+
+.fm-icon-addgray::before {
+ content: '\e6a7';
+}
+
+.fm-icon-close::before {
+ content: '\e6a8';
+}
+
+.fm-icon-add-line::before {
+ content: '\e6a9';
+}
+
+.fm-icon-more::before {
+ content: '\e6aa';
+}
+
+.fm-icon-check::before {
+ content: '\e6ab';
+}
+
+.fm-icon-backcircle::before {
+ content: '\e6ac';
+}
+
+.fm-icon-agree::before {
+ content: '\e6ad';
+}
+
+.fm-icon-loading::before {
+ content: '\e6ae';
+}
+
+.fm-icon-filedel::before {
+ content: '\e6af';
+}
+
+.fm-icon-file::before {
+ content: '\e6b0';
+}
+
+.fm-icon-processflow::before {
+ content: '\e6b1';
+}
+
+.fm-icon-redstar::before {
+ content: '\e6b2';
+}
+
+.fm-icon-rightcircle::before {
+ content: '\e6b3';
+}
+
+.fm-icon-timecircle::before {
+ content: '\e6b4';
+}
+
+.fm-icon-screening::before {
+ content: '\e6b5';
+}
+
+.fm-icon-uncheck::before {
+ content: '\e6b6';
+}
+
+.fm-icon-operation::before {
+ content: '\e02c';
+}
+
+.fm-icon-approvalamount::before {
+ content: '\e02b';
+}
+
+.fm-icon-agreed::before {
+ content: '\e02a';
+}
+
+.fm-icon-loading::before {
+ content: '\e6ae';
+}
+
+.fm-icon-filedel::before {
+ content: '\e6af';
+}
+
+.fm-icon-file::before {
+ content: '\e6b0';
+}
+
+.fm-icon-processflow::before {
+ content: '\e6b1';
+}
+
+.fm-icon-redstar::before {
+ content: '\e6b2';
+}
+
+.fm-icon-rightcircle::before {
+ content: '\e6b3';
+}
+
+.fm-icon-timecircle::before {
+ content: '\e6b4';
+}
+
+.fm-icon-screening::before {
+ content: '\e6b5';
+}
+
+.fm-icon-uncheck::before {
+ content: '\e6b6';
+}
+
+.fm-icon-operation::before {
+ content: '\e02c';
+}
+
+.fm-icon-approvalamount::before {
+ content: '\e02b';
+}
+
+.fm-icon-agreed::before {
+ content: '\e02a';
+}
+
+.fm-icon-inprocess::before {
+ content: '\e029';
+}
+
+.fm-icon-feedback::before {
+ content: '\e028';
+}
+
+.fm-icon-print::before {
+ content: '\e027';
+}
+
+.fm-icon-important::before {
+ content: '\e026';
+}
+
+.fm-icon-amountofreimbursement::before {
+ content: '\e025';
+}
+
+.fm-icon-safetyassistant::before {
+ content: '\e024';
+}
+
+.fm-icon-remind::before {
+ content: '\e023';
+}
+
+.fm-icon-eyeoppen::before {
+ content: '\e022';
+}
+
+.fm-icon-eyeclose::before {
+ content: '\e01e';
+}
+
+.fm-icon-photography::before {
+ content: '\e021';
+}
+
+.fm-icon-photograph::before {
+ content: '\e020';
+}
+
+.fm-icon-addpicture::before {
+ content: '\e01f';
+}
+
+.fm-icon-top_other-face::before {
+ content: '\e01d';
+}
+
+.fm-icon-top_other::before {
+ content: '\e01c';
+}
+
+.fm-icon-delete::before {
+ content: '\e01b';
+}
+
+.fm-icon-nextpage::before {
+ content: '\e01a';
+}
+
+.fm-icon-addbutton::before {
+ content: '\e019';
+}
+
+.fm-icon-waitforprocessing::before {
+ content: '\e018';
+}
+
+.fm-icon-warningmessage::before {
+ content: '\e017';
+}
+
+.fm-icon-failureprompt::before {
+ content: '\e016';
+}
+
+.fm-icon-successfulhints::before {
+ content: '\e015';
+}
+
+.fm-icon-other::before {
+ content: '\e014';
+}
+
+.fm-icon-retract::before {
+ content: '\e013';
+}
+
+.fm-icon-drop-down::before {
+ content: '\e012';
+}
+
+.fm-icon-cancel::before {
+ content: '\e011';
+}
+
+.fm-icon-search::before {
+ content: '\e010';
+}
+
+.fm-icon-multiplechoice::before {
+ content: '\e00f';
+}
+
+.fm-icon-singlechoice::before {
+ content: '\e00e';
+}
+
+.fm-icon-microphone::before {
+ content: '\e00d';
+}
+
+.fm-icon-arrow-chevron-left::before {
+ content: '\e00c';
+}
+
+.fm-icon-helpcenter::before {
+ content: '\e00b';
+}
+
+.fm-icon-sweepcode::before {
+ content: '\e00a';
+}
+
+.fm-icon-groupchat::before {
+ content: '\e009';
+}
+
+.fm-icon-addfriend::before {
+ content: '\e008';
+}
+
+.fm-icon-top_my::before {
+ content: '\e007';
+}
+
+.fm-icon-top_my-face::before {
+ content: '\e006';
+}
+
+.fm-icon-top_friend::before {
+ content: '\e005';
+}
+
+.fm-icon-top_friend-face::before {
+ content: '\e004';
+}
+
+.fm-icon-top_publicpraise::before {
+ content: '\e003';
+}
+
+.fm-icon-top_publicpraise-face::before {
+ content: '\e002';
+}
+
+.fm-icon-top_home::before {
+ content: '\e001';
+}
+
+.fm-icon-top_home-face::before {
+ content: '\e000';
+}
+
+/* 标准模板内图标 */
+.fm-icon-s-agree-o::before {
+ content: '\e655';
+}
+
+.fm-icon-s-arrow-down::before {
+ content: '\e656';
+}
+
+.fm-icon-s-add-o::before {
+ content: '\e657';
+}
+
+.fm-icon-s-annex::before {
+ content: '\e658';
+}
+
+.fm-icon-s-arrow::before {
+ content: '\e659';
+}
+
+.fm-icon-s-arrow-up::before {
+ content: '\e65e';
+}
+
+.fm-icon-s-checkbox-checked::before {
+ content: '\e65f';
+}
+
+.fm-icon-s-checkbox::before {
+ content: '\e660';
+}
+
+.fm-icon-s-arrow-left::before {
+ content: '\e661';
+}
+
+.fm-icon-s-exchange::before {
+ content: '\e662';
+}
+
+.fm-icon-s-clear::before {
+ content: '\e663';
+}
+
+.fm-icon-s-checked::before {
+ content: '\e664';
+}
+
+.fm-icon-s-eye-o::before {
+ content: '\e665';
+}
+
+.fm-icon-s-close-eye::before {
+ content: '\e666';
+}
+
+.fm-icon-s-at::before {
+ content: '\e667';
+}
+
+.fm-icon-s-feedback-o::before {
+ content: '\e668';
+}
+
+.fm-icon-s-fold-circle-o::before {
+ content: '\e669';
+}
+
+.fm-icon-s-cross::before {
+ content: '\e66a';
+}
+
+.fm-icon-s-minus::before {
+ content: '\e66b';
+}
+
+.fm-icon-s-file::before {
+ content: '\e66c';
+}
+
+.fm-icon-s-fold-triangle::before {
+ content: '\e66d';
+}
+
+.fm-icon-s-filter::before {
+ content: '\e66e';
+}
+
+.fm-icon-s-forword::before {
+ content: '\e66f';
+}
+
+.fm-icon-s-plus::before {
+ content: '\e670';
+}
+
+.fm-icon-s-filedel::before {
+ content: '\e671';
+}
+
+.fm-icon-s-fold-o::before {
+ content: '\e672';
+}
+
+.fm-icon-s-image-o::before {
+ content: '\e673';
+}
+
+.fm-icon-s-more-o::before {
+ content: '\e674';
+}
+
+.fm-icon-s-redio-circle::before {
+ content: '\e675';
+}
+
+.fm-icon-s-reject-o::before {
+ content: '\e676';
+}
+
+.fm-icon-s-success::before {
+ content: '\e677';
+}
+
+.fm-icon-s-refresh::before {
+ content: '\e678';
+}
+
+.fm-icon-s-star::before {
+ content: '\e679';
+}
+.fm-icon-s-star-o::before {
+ content: '\e612';
+}
+
+.fm-icon-s-processflow::before {
+ content: '\e67a';
+}
+
+.fm-icon-s-unfold-circle-o::before {
+ content: '\e67b';
+}
+
+.fm-icon-s-rewind::before {
+ content: '\e67c';
+}
+
+.fm-icon-s-unfold-o::before {
+ content: '\e67d';
+}
+
+.fm-icon-s-save-o::before {
+ content: '\e67e';
+}
+
+.fm-icon-s-warning-o::before {
+ content: '\e67f';
+}
+
+.fm-icon-s-unfold-triangle::before {
+ content: '\e680';
+}
+
+.fm-icon-s-print-o::before {
+ content: '\e681';
+}
+
+.fm-icon-s-search-o::before {
+ content: '\e682';
+}
+
+
+.fm-icon-s-news::before {
+ content: '\e683';
+}
+
+.fm-icon-s-news-o::before {
+ content: '\e684';
+}
+
+.fm-icon-s-shop::before {
+ content: '\e68c';
+}
+
+.fm-icon-s-sending::before {
+ content: '\e60b';
+}
+
+.fm-icon-s-import-o::before {
+ content: '\e60c';
+}
+
+.fm-icon-s-edit-o::before {
+ content: '\e60d';
+}
+
+.fm-icon-s-qrcode::before {
+ content: '\e60e';
+}
+
+.fm-icon-s-briefcase::before {
+ content: '\e60f';
+}
+
+.fm-icon-s-notificationoff::before {
+ content: '\e610';
+}
+
+.fm-icon-s-pencil::before {
+ content: '\e611';
+}
+
+.fm-icon-s-star-o::before {
+ content: '\e612';
+}
+
+.fm-icon-s-barcode::before {
+ content: '\e613';
+}
+
+.fm-icon-s-salemessage-o::before {
+ content: '\e614';
+}
+
+.fm-icon-s-listview-o::before {
+ content: '\e615';
+}
+
+.fm-icon-s-picture-o::before {
+ content: '\e616';
+}
+
+.fm-icon-s-savefillet-o::before {
+ content: '\e617';
+}
+
+.fm-icon-s-shoppingcart::before {
+ content: '\e618';
+}
+
+.fm-icon-s-pending::before {
+ content: '\e61d';
+}
+
+.fm-icon-s-expandview-o::before {
+ content: '\e61e';
+}
+
+.fm-icon-s-lock-o::before {
+ content: '\e623';
+}
+
+.fm-icon-s-my::before {
+ content: '\e692';
+}
+
+.fm-icon-s-service::before {
+ content: '\e633';
+}
+
+.fm-icon-s-wallet-o::before {
+ content: '\e634';
+}
+
+.fm-icon-s-shoppingcart-o::before {
+ content: '\e636';
+}
+
+.fm-icon-s-setting-o::before {
+ content: '\e637';
+}
+
+.fm-icon-s-my-o::before {
+ content: '\e696';
+}
+
+.fm-icon-s-unfoldrec-o::before {
+ content: '\e639';
+}
+
+.fm-icon-s-profile::before {
+ content: '\e63a';
+}
+
+.fm-icon-s-link-o::before {
+ content: '\e609';
+}
+
+.fm-icon-s-usersetting-o::before {
+ content: '\e632';
+}
+
+.fm-icon-s-shop-o::before {
+ content: '\e68a';
+}
+
+.fm-icon-s-list::before {
+ content: '\e62a';
+}
+
+.fm-icon-s-location-o::before {
+ content: '\e685';
+}
+
+.fm-icon-s-location::before {
+ content: '\e686';
+}
+
+.fm-icon-s-moment::before {
+ content: '\e689';
+}
+
+.fm-icon-s-moment-o::before {
+ content: '\e68b';
+}
+
+.fm-icon-s-revoke-o::before {
+ content: '\e687';
+}
+
+.fm-icon-s-submit-o::before {
+ content: '\e688';
+}
+
+.fm-icon-s-app-o::before {
+ content: '\e68f';
+}
+
+.fm-icon-s-app::before {
+ content: '\e691';
+}
+
+.fm-icon-s-book-o::before {
+ content: '\e695';
+}
+
+.fm-icon-s-book::before {
+ content: '\e690';
+}
+
+.fm-icon-s-comment::before {
+ content: '\e693';
+}
+
+.fm-icon-s-comment-o::before {
+ content: '\e694';
+}
+
+.fm-icon-s-illustrate-o::before {
+ content: '\e68d';
+}
+
+.fm-icon-s-clear-o::before {
+ content: '\e68e';
+}
+.fm-icon-friend::before {
+ content: '\e005';
+}
+.fm-icon-scan::before {
+ content: '\e69a';
+}
+.fm-icon-back::before {
+ content: '\e69b';
+}
+.fm-icon-menu::before {
+ content: '\e69d';
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/image-preview.scss b/packages/mobile-ui-vue/components/theme/src/image-preview.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7c9bbd259cb0bb1733031758746e83611cbcee5e
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/image-preview.scss
@@ -0,0 +1,107 @@
+.fm-image-preview {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: transparent;
+ transform: none;
+
+ &-swipe {
+ height: 100%;
+
+ &-item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ }
+ }
+
+ &-cover {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ &-image {
+ width: 100%;
+ transition-property: transform;
+
+ &-vertical {
+ width: auto;
+ height: 100%;
+ }
+
+ img {
+ // disable desktop browser image drag
+ -webkit-user-drag: none;
+ }
+
+ .fm-image {
+ &-error {
+ top: 30%;
+ height: 40%;
+ }
+
+ &-error-icon {
+ font-size: 36px;
+ }
+
+ &-loading {
+ background-color: transparent;
+ }
+ }
+ }
+
+ &-index {
+ position: absolute;
+ top: 16px;
+ left: 50%;
+ color: #ffffff;
+ font-size: 13px;
+ line-height: 22px;
+ text-shadow: 0 1px 1px #333;
+ transform: translate(-50%, 0);
+ }
+
+ &-overlay {
+ background-color: rgba(0, 0, 0, 0.9);
+ }
+
+ &-close-icon {
+ position: absolute;
+ z-index: 1;
+ cursor: pointer;
+ .fm-icon{
+ color: #ccc;
+ font-size: 22px;
+ }
+
+ &:active {
+ .fm-icon{
+ color: #999999;
+ }
+ }
+
+ &-top-left {
+ top: 16px;
+ left: 16px;
+ }
+
+ &-top-right {
+ top: 16px;
+ right: 16px;
+ }
+
+ &-bottom-left {
+ bottom: 16px;
+ left: 16px;
+ }
+
+ &-bottom-right {
+ right: 16px;
+ bottom: 16px;
+ }
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/image.scss b/packages/mobile-ui-vue/components/theme/src/image.scss
new file mode 100644
index 0000000000000000000000000000000000000000..822b48e966e35c0104f7f1ef0ea3cc116556ac60
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/image.scss
@@ -0,0 +1,38 @@
+@import './mixins/hairline';
+
+.fm-image {
+ position: relative;
+ display: inline-block;
+
+ &-round {
+ overflow: hidden;
+ border-radius: 50%;
+ img {
+ border-radius: inherit;
+ }
+ }
+ &-img,
+ &-error,
+ &-loading {
+ display: block;
+ width: 100%;
+ height: 100%;
+ }
+ &-error,
+ &-loading {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ color: var(--fm-text-color-2);
+ font-size: 14px;
+ background-color: var(--fm-background);
+ .fm-image-icon{
+ font-size: var(--fm-font-size-icon-4);
+ color: var(--fm-text-color-2);
+ }
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/index-list.scss b/packages/mobile-ui-vue/components/theme/src/index-list.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1ae04d1d87c22448fa1c443ed93dcdd1271c4e02
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/index-list.scss
@@ -0,0 +1,33 @@
+.fm-index-list {
+ position: relative;
+ background: #fff;
+ height: 100%;
+ overflow: auto;
+ .fm-index-content{
+ overflow: hidden;
+ .fm-index-group-title{
+ background: #F7F8FA;
+ line-height: 32px;
+ padding: 0 16px;
+ }
+ }
+ .fm-index-bar {
+ position: fixed;
+ right: 4px;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 12px;
+ line-height: 14px;
+ text-align: center;
+ z-index: 9;
+ .fm-index-bar-item {
+ padding: 2px 4px;
+ }
+ .fm-index-bar-item-selected {
+ color: #3A90FF;
+ }
+ }
+}
+.fm-index-list-fill {
+ height: 100%;
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/input-template.scss b/packages/mobile-ui-vue/components/theme/src/input-template.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c9997a0833b09b8497556815d8b622d3267d3c75
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/input-template.scss
@@ -0,0 +1,81 @@
+.fm-lookup-input-template {
+ width: 100%;
+ height: 24px;
+ overflow: hidden;
+ display: flex;
+ align-items: flex-start;
+ justify-content: flex-end;
+ will-change: height;
+ transition: all .3s ease;
+ .text {
+ display: inline-block;
+ color: #007aff;
+ white-space: nowrap;
+ }
+ .text-ellipsis {
+ overflow: hidden;
+ flex: 1;
+ }
+ .append-text {
+ padding-left: 4px;
+ }
+ .hide-text {
+ position: absolute;
+ left: 0;
+ height: 100%;
+ opacity: 0;
+ }
+ .title {
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ position: relative;
+ }
+ .items {
+ flex: 1;
+ display: flex;
+ flex-shrink: 0;
+ flex-wrap: wrap;
+ width: 100%;
+ .item {
+ display: flex;
+ align-items: center;
+ margin: 2px;
+ padding: 1px 4px;
+ background-image: linear-gradient(-45deg, #f0f7ff 0%, #eef7ff 100%);
+ border-radius: 6px;
+ max-width: 100%;
+ .text {
+ line-height: 18px;
+ font-size: 14px;
+ }
+ }
+ }
+}
+.fm-lookup-input-template-expand {
+ justify-content: flex-start;
+ .text {
+ white-space: normal;
+ }
+ .items {
+ .item {
+ .text {
+ text-align: left;
+ }
+ }
+ }
+
+}
+.fm-input-control-readonly {
+ .fm-lookup-input-template {
+ .title {
+ .text {
+ color: #333;
+ }
+ }
+ }
+}
+.fm-input-template-right-icon {
+ margin-right: -16px;
+ padding-right: 16px;
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/input.scss b/packages/mobile-ui-vue/components/theme/src/input.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e581f9a4ad97a6f1e7498eb79447a4afc99628c0
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/input.scss
@@ -0,0 +1,131 @@
+@import './mixins/hairline';
+
+:root {
+ --fm-input-size: 16px;
+ --fm-input-sub-size: 13px;
+ --fm-input-color: var(--fm-text-color);
+ --fm-input-sub-color: var(--fm-text-color-2);
+ --fm-input-readonly-color: var(--fm-gray-7);
+ --fm-input-disabled-color: var(--fm-gray-5);
+ --fm-input-border-color: var(--fm-gray-3);
+ --fm-input-label-width: 105px;
+ --fm-input-label-size: 16px;
+}
+
+.fm-input {
+ &-label {
+ flex: none;
+ text-align: left;
+ width: var(--fm-input-label-width);
+ font-size: var(--fm-input-label-size);
+ color: var(--fm-input-color);
+ }
+ &-value {
+ overflow-y: visible;
+ .fm-input-body {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ .fm-input-control {
+ display: flex;
+ width: 100%;
+ min-width: 0;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ resize: none;
+ line-height: inherit;
+ background-color: transparent;
+ color: var(--fm-input-color);
+ font-size: var(--fm-input-size);
+ &::placeholder {
+ color: var(--fm-input-sub-color);
+ }
+ &:disabled {
+ opacity: 1;
+ cursor: not-allowed;
+ color: var(--fm-input-disabled-color);
+ -webkit-text-fill-color: currentColor;
+ }
+ &-readonly {
+ cursor: default;
+ color: var(--fm-input-readonly-color);
+ }
+ &-left {
+ justify-content: flex-start;
+ text-align: left;
+ }
+ &-center {
+ justify-content: center;
+ text-align: center;
+ }
+
+ &-right {
+ justify-content: flex-end;
+ text-align: right;
+ }
+ }
+ }
+ .fm-input-body-with-border {
+ border: 1px solid var(--fm-input-border-color);
+ padding: 4px 8px;
+ border-radius: 4px;
+ }
+ }
+ &-clear,
+ &-button {
+ flex-shrink: 0;
+ }
+ &-clear {
+ margin-right: -8px;
+ // padding: 0 8px;
+ padding: 4px 8px;
+ color: var(--fm-input-sub-color);
+ font-size: var(--fm-input-size);
+ cursor: pointer;
+ box-sizing: content-box;
+ }
+ &-button {
+ padding-left: 8px;
+ }
+ &-min-height {
+ .fm-input-control {
+ min-height: 60px;
+ }
+ }
+ &-vertical {
+ flex-direction: column;
+ align-items: flex-start;
+ .fm-input-label {
+ width: auto!important;
+ }
+ .fm-cell-right {
+ width: 100%;
+ padding-top: 4px;
+ }
+ .fm-cell-value .fm-input-body .fm-input-control {
+ text-align: left;
+ justify-content: flex-start;
+ }
+ }
+ &-word-limit {
+ margin-top: 4px;
+ line-height: 18px;
+ text-align: right;
+ font-size: var(--fm-input-sub-size);
+ color: var(--fm-input-sub-color);
+ }
+ &-error-message {
+ color: var(--fm-danger-color);
+ font-size: var(--fm-input-sub-size);
+ }
+ &-error-message-left {
+ text-align: left;
+ }
+ &-error-message-center {
+ text-align: center;
+ }
+ &-error-message-right {
+ text-align: right;
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/listview.scss b/packages/mobile-ui-vue/components/theme/src/listview.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c12af350558a4fce47ac2371841e2918fb81d534
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/listview.scss
@@ -0,0 +1,106 @@
+@import './mixins/safe-area';
+:root {
+
+}
+
+.fm-listview-container {
+ .fm-listview-main {
+ user-select: none;
+ -webkit-user-select: none;
+ }
+ .fm-listview-item {
+ overflow: hidden;
+ display: flex;
+ position: relative;
+ .fm-listview-item-content {
+ flex: 1;
+ transform: translateX(0);
+ }
+ .checker-wrapper {
+ display: flex;
+ height: 100%;
+ padding: 12px 16px;
+ position: absolute;
+ }
+ }
+ .fm-listview-toolbar {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ .fm-listview-toolbar-item {
+ flex: 1;
+ }
+ }
+ .fm-listview-footer {
+ flex-shrink: 0;
+ }
+ .fm-listview-placeholder {
+ height: 0;
+ pointer-events: none;
+ }
+ .fm-listview-loading,
+ .fm-listview-finished,
+ .fm-listview-error,
+ .fm-listview-empty-text {
+ display: block;
+ color: #969799;
+ font-size: 14px;
+ line-height: 50px;
+ text-align: center;
+ }
+}
+.fm-listview-container-fill {
+ display: flex;
+ flex-direction: column;
+ flex-shrink: 1;
+ flex-grow: 1;
+ flex-basis: 0;
+ height: 100%;
+ overflow: hidden;
+ .fm-listview-main {
+ flex-shrink: 1;
+ flex-grow: 1;
+ flex-basis: 0;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+}
+.fm-listview-container-with-btn .fm-listview-main{
+ padding-bottom: 42px;
+}
+
+.fm-listview-container .fm-listview-subitem {
+ display: initial !important;
+ .fm-listview-subitem-title {
+ padding: 10px 16px;
+ line-height: 20px;
+ font-size: 14px;
+ color: #999999;
+ }
+ .fm-listview-sub-item {
+ position: relative;
+ overflow: hidden;
+ .fm-listview-subitem-content {
+ flex: 1;
+ transform: translateX(0);
+ }
+ &.fm-listview-sub-item-padding {
+ .fm-listview-subitem-content {
+ transform: translateX(40px);
+ }
+ }
+ &.fm-listview-sub-item-padding-none {
+ .fm-listview-subitem-content {
+ transform: translateX(0);
+ padding-left: 40px;
+ }
+ }
+ }
+}
+.fm-pull-refresh-fill {
+ flex: 1;
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/loading.scss b/packages/mobile-ui-vue/components/theme/src/loading.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b4aedb043512b789d098e1dfe7acf55d6a434468
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/loading.scss
@@ -0,0 +1,69 @@
+@import './mixins/hairline';
+
+:root {
+ --fm-loading-mask-zindex: var(--fm-zindex-4);
+ --fm-loading-zindex: var(--fm-zindex-5);
+ --fm-loading-color: var(--fm-text-color-3);
+ --fm-loading-text-color: var(--fm-text-color-2);
+ --fm-loading-text-size: 16px;
+}
+
+.fm-loading-mask{
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ top: 0;
+ z-index: var(--fm-loading-mask-zindex);
+}
+.fm-loading {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ z-index: var(--fm-loading-zindex);
+ max-width: 70%;
+ padding: 16px;
+ color: var(--fm-loading-color);
+ font-size: 0;
+ line-height: 20px;
+ white-space: pre-wrap;
+ text-align: center;
+ word-wrap: break-word;
+ transform: translate3d(-50%, -50%, 0);
+ &-icon {
+ position: relative;
+ display: inline-block;
+ width: 30px;
+ height: 30px;
+ max-width: 100%;
+ max-height: 100%;
+ vertical-align: middle;
+ animation: fm-rotate 2s linear infinite;
+ circle {
+ animation: fm-circular 1.5s ease-in-out infinite;
+ stroke: currentColor;
+ stroke-width: 4;
+ stroke-linecap: round;
+ }
+ }
+ &-text {
+ display: inline-block;
+ margin-left: 8px;
+ color: var(--fm-loading-text-color);
+ font-size: var(--fm-loading-text-size);
+ line-height: 22px;
+ vertical-align: middle;
+ }
+ &.fm-loading-vertical{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .fm-loading-text {
+ margin: 9px 0 0;
+ }
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/lookup.scss b/packages/mobile-ui-vue/components/theme/src/lookup.scss
new file mode 100644
index 0000000000000000000000000000000000000000..14586939708ceab3e6eab331533889fb585ff762
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/lookup.scss
@@ -0,0 +1,458 @@
+@import './mixins/hairline';
+:root {
+ --fm-lookup-panel-font-size: 16px;
+ --fm-lookup-panel-background: var(--fm-background);
+ --fm-lookup-panel-background-2: var(--fm-background-2);
+ --fm-lookup-panel-color: var(--fm-text-color);
+ --fm-lookup-panel-sub-color: var(--fm-text-color-2);
+ --fm-lookup-panel-primary-color: var(--fm-primary-color);
+ --fm-lookup-panel-primary-background: #ebf6ff;
+}
+
+.fm-lookup-panel {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ transform: translate3d(0, 0, 0);
+ overflow: hidden;
+ background-color: var(--fm-lookup-panel-background);
+ color: var(--fm-lookup-panel-color);
+ font-size: var(--fm-lookup-panel-font-size);
+ &-header {
+ background-color: var(--fm-lookup-panel-background-2);
+ .nav-bar {
+ position: relative;
+ display: flex;
+ margin: 0 16px;
+ .nav-left {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 44px;
+ display: flex;
+ align-items: center;
+ .fm-icon {
+ font-size: 20px;
+ }
+ }
+ .nav-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ padding: 10px 30px;
+ min-height: 44px;
+ justify-content: center;
+ .nav-title {
+ font-size: 17px;
+ line-height: 24px;
+ font-weight: 400;
+ }
+ .nav-sub-title {
+ font-size: 12px;
+ line-height: 17px;
+ color: var(--fm-lookup-panel-sub-color);
+ }
+ }
+ .fm-lookup-panel-sub-title {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: 5px;
+ font-size: 12px;
+ z-index: var(--fm-zindex-2);
+ color: var(--fm-lookup-panel-sub-color);
+ }
+ }
+ .search-wrapper {
+ display: flex;
+ padding: 0 16px;
+ align-items: center;
+ @include hairline('bottom', var(--fm-border-color));
+ .search-selected {
+ display: flex;
+ align-items: center;
+ .search-selected-item-wrapper {
+ display: flex;
+ align-items: center;
+ overflow-x: auto;
+ flex-shrink: 0;
+ width: 100%;
+ }
+ .search-selected-item {
+ padding: 4px 6px;
+ border-radius: 4px;
+ display: flex;
+ font-size: 14px;
+ line-height: 20px;
+ word-break: keep-all;
+ white-space: nowrap;
+ color: var(--fm-lookup-panel-primary-color);
+ background: var(--fm-lookup-panel-primary-background);
+ &:not(:last-child) {
+ margin-right: 8px;
+ }
+ &-text:not(:first-child) {
+ padding-left: 4px;
+ }
+ }
+ }
+ .search-input {
+ .fm-cell-left-icon .fm-icon {
+ color: var(--fm-lookup-panel-sub-color);
+ }
+ }
+ }
+ .search-wrapper-horizontal {
+ .search-selected {
+ padding-right: 8px;
+ }
+ .search-input {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ }
+ .search-wrapper-vertical {
+ flex-direction: column;
+ padding: 0;
+ .search-selected {
+ width: 100%;
+ padding: 6px 16px;
+ @include hairline('bottom', var(--fm-border-color));
+ .avatar-wrapper {
+ max-width: calc(100% - 65px);
+ }
+ }
+ }
+ .header-portal {
+ display: flex;
+ align-items: center;
+ background-color: var(--fm-lookup-panel-background-2);
+ padding-left: 16px;
+ .header-portal-icon {
+ width: 32px;
+ height: 32px;
+ font-size: 18px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--fm-lookup-panel-background);
+ border-radius: 100%;
+ color: var(--fm-lookup-panel-primary-color);
+ }
+ .header-portal-cell {
+ flex: 1;
+ }
+ }
+ }
+ &-content {
+ flex: 1;
+ overflow: hidden;
+ background-color: var(--fm-lookup-panel-background-2);
+ position: relative;
+ margin-top: 10px;
+ .content-tabs {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ }
+ .content-tab-personal,
+ .content-tab-data {
+ position: relative;
+ flex: 1;
+ }
+ .content-tab-data {
+ .breadcrumb-wrapper {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ }
+ }
+ .list-wrapper {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ top: 0;
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+ .list {
+ background-color: var(--fm-lookup-panel-background-2);
+ }
+ &-list-item {
+ display: flex;
+ // flex-direction: row-reverse;
+ position: relative;
+ overflow: hidden;
+ .list-item-cell-disabled {
+ color: var(--fm-lookup-panel-sub-color);
+ .list-item-cell{
+ color: var(--fm-lookup-panel-sub-color);
+ }
+ }
+ &:not(:last-child) {
+ .fm-cell {
+ @include hairline('bottom', var(--fm-border-color));
+ &::after {
+ left: 16px !important;
+ }
+ }
+ }
+ &-icon {
+ .fm-check-icon:not(.fm-check-icon-checked) {
+ color: var(--fm-gray-4);
+ }
+ }
+ &-cell-warpper {
+ width: 100%;
+ overflow: hidden;
+ }
+ .list-item-cell-title {
+ width: 100%;
+ overflow: hidden;
+ .fm-cell-title-text {
+ display: block;
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+ .list-item-cell-favorite,
+ .list-item-cell-arrow {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ }
+ .list-item-cell-favorite {
+ color: var(--fm-warning-color);
+ }
+ .list-item-cell-arrow {
+ color: var(--fm-lookup-panel-sub-color);
+ }
+ .list-item-cell-favorite:not(:last-child) {
+ padding-right: 8px;
+ }
+ .list-item-cell-favorite.selected {
+ .fm-icon {
+ background-color: var(--fm-warning-color);
+ }
+ }
+ }
+ &-list-item-selected {
+ &-icon {
+ color: var(--fm-lookup-panel-primary-color);
+ }
+ }
+ &-list-item-checker,
+ &-list-item-children {
+ margin-left: 16px;
+ }
+ &-list-item-checker:not(&-list-item-children) {
+ .fm-cell {
+ padding-left: 0;
+ }
+ &:not(:last-child) {
+ .fm-cell {
+ &::after {
+ left: 0 !important;
+ }
+ }
+ }
+ }
+ }
+ .list-checker-wrapper {
+ display: flex;
+ padding-right: 10px;
+ }
+ &-footer {
+ padding: 0 16px;
+ height: 48px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ box-shadow: 0 0 7px 0 var(--fm-box-shadow-color);
+ border-top: 1px solid var(--fm-border-color-2);
+ background-color: var(--fm-background-2);
+ }
+ .list-wrapper {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ top: 0;
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+ .search-panel {
+ .list-wrapper {
+ top: 44px;
+ }
+ }
+ .selected-panel {
+ .popup-wrapper {
+ width: 100%;
+ height: calc(100% - 48px);
+ background-color: var(--fm-background);
+ .nav-bar {
+ @include hairline('bottom', #eee);
+ }
+ .list-wrapper {
+ top: 44px;
+ background-color: var(--fm-background-2);
+ }
+ }
+ }
+ .home-panel {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ .home-portal {
+ display: flex;
+ align-items: center;
+ background-color: var(--fm-background-2);
+ padding-left: 16px;
+ .home-portal-icon {
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--fm-background);
+ border-radius: 100%;
+ color: var(--fm-lookup-panel-primary-color);
+ }
+ }
+ .home-group {
+ flex: 1;
+ margin-top: 10px;
+ background-color: var(--fm-background-2);
+ position: relative;
+ .home-group-nav {
+ height: 44px;
+ display: flex;
+ align-items: center;
+ padding: 0 16px;
+ .nav-title {
+ font-size: 14px;
+ color: #666666;
+ padding-right: 16px;
+ }
+ .nav-title.selected {
+ font-size: 17px;
+ color: var(--fm-lookup-panel-primary-color);
+ }
+ }
+ .list-wrapper {
+ top: 44px;
+ }
+ }
+ }
+ .lookup-tabbar {
+ height: 44px;
+ display: flex;
+ padding: 0 16px;
+ background-color: var(--fm-background-2);
+ .tabbar-item {
+ position: relative;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+ color: #666666;
+ margin-right: 16px;
+ }
+ .tabbar-item.selected {
+ font-size: 17px;
+ color: var(--fm-lookup-panel-primary-color);
+ }
+ .tabbar-item-bar {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 4px;
+ background: var(--fm-lookup-panel-primary-color);
+ border-radius: 2px;
+ }
+ }
+ .fm-lookup-list-empty {
+ .fm-lookup-list-empty-text {
+ display: block;
+ color: var(--fm-lookup-panel-sub-color);
+ font-size: 14px;
+ line-height: 50px;
+ text-align: center;
+ }
+ }
+ .fm-lookup-breadcrumb {
+ display: flex;
+ align-items: center;
+ height: 42px;
+ padding: 0 16px;
+ overflow: auto;
+ background-color: var(--fm-background-2);
+ @include hairline('bottom', var(--fm-border-color));
+ &-item {
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
+ color: var(--fm-lookup-panel-primary-color);
+ padding-right: 8px;
+ &-text {
+ padding-right: 8px;
+ }
+ &-icon {
+ font-size: 10px;
+ }
+ &:last-child {
+ color: var(--fm-lookup-panel-sub-color);;
+ padding-right: 0;
+ }
+ }
+ }
+ .avatar-wrapper {
+ display: flex;
+ align-items: center;
+ overflow-x: auto;
+ max-width: 220px;
+ flex-shrink: 0;
+ .avatar {
+ display: flex;
+ justify-content: center;
+ flex-shrink: 0;
+ width: 32px;
+ height: 32px;
+ line-height: 32px;
+ border-radius: 100%;
+ background: var(--fm-gradient-blue);
+ color: var(--fm-background-2);
+ font-size: 12px;
+ &:not(:last-child) {
+ margin-right: 8px;
+ }
+ .avatar-image {
+ width: 100%;
+ height: 100%;
+ .fm-image-error {
+ color: var(--fm-background-2);
+ background: var(--fm-gradient-blue);
+ }
+ }
+ }
+ &:not(:last-child) {
+ margin-right: 14px;
+ }
+ }
+ .icon-wrapper {
+ display: flex;
+ padding-right: 16px;
+ & {
+ @include hairline('bottom', var(--fm-border-color));
+ }
+ }
+}
+.lookup-favorite-icon {
+ line-height: 24px;
+ font-size: 18px;
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/mixins/_border-radius.scss b/packages/mobile-ui-vue/components/theme/src/mixins/_border-radius.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d2e69ceb6c1e06205092c2ab74e60c7a0ebd767c
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/mixins/_border-radius.scss
@@ -0,0 +1,13 @@
+@mixin borderRadius($size, $position: '') {
+ @if ($position == 'top') {
+ border-radius: 0 0 $size $size;
+ } @else if($position == 'bottom') {
+ border-radius: $size $size 0 0;
+ } @else if($position == 'left') {
+ border-radius: 0 $size $size 0;
+ } @else if($position == 'right') {
+ border-radius: $size 0 0 $size;
+ } @else {
+ border-radius: $size
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/mixins/_ellipsis.scss b/packages/mobile-ui-vue/components/theme/src/mixins/_ellipsis.scss
new file mode 100644
index 0000000000000000000000000000000000000000..24ced1ecccb3fccf129a1d2019b47ba9faa6fa18
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/mixins/_ellipsis.scss
@@ -0,0 +1,15 @@
+@mixin multi-ellipsis($lines) {
+ display: -webkit-box;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ -webkit-line-clamp: $lines;
+
+ /* autoprefixer: ignore next */
+ -webkit-box-orient: vertical;
+}
+
+@mixin ellipsis {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/mixins/_flex.scss b/packages/mobile-ui-vue/components/theme/src/mixins/_flex.scss
new file mode 100644
index 0000000000000000000000000000000000000000..efa5dc993ae9d0b1f532e90cc3f9249ad7401c23
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/mixins/_flex.scss
@@ -0,0 +1,17 @@
+@mixin fm-utils-flex($direction: column, $showImportant: false) {
+ @if $showImportant {
+ display: flex!important;
+ flex-direction: $direction!important;
+ } @else {
+ display: flex;
+ flex-direction: $direction;
+ }
+ overflow: hidden;
+ }
+@mixin fm-utils-absolute-all {
+ top: 0;
+ bottom: 0;
+ position: absolute;
+ right: 0;
+ left: 0;
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/mixins/_hairline.scss b/packages/mobile-ui-vue/components/theme/src/mixins/_hairline.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7362068549d94c2c29b662387d3be06d1bf2051f
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/mixins/_hairline.scss
@@ -0,0 +1,150 @@
+@mixin scale-hairline-common($color, $top, $right, $bottom, $left) {
+ content: '';
+ position: absolute;
+ background-color: $color;
+ display: block;
+ z-index: 1;
+ top: $top;
+ right: $right;
+ bottom: $bottom;
+ left: $left;
+}
+
+@mixin hairline(
+ $direction,
+ $color: var(--fm-border-color),
+ $radius: 0,
+ $type: solid
+) {
+ @if ($direction == 'top') {
+ border-top: 1px $type $color;
+ position: relative;
+ html:not([data-scale]) & {
+ @media (min-resolution: 1dppx) {
+ border-top: none;
+ &::before {
+ @include scale-hairline-common($color, 0, auto, auto, 0);
+ width: 100%;
+ height: 1px;
+ transform-origin: 50% 50%;
+
+ @media (min-resolution: 2dppx) {
+ transform: scaleY(0.5);
+ }
+ }
+ }
+ }
+ } @else if ($direction == 'bottom') {
+ border-bottom: 1px $type $color;
+ position: relative;
+ html:not([data-scale]) & {
+ @media (min-resolution: 1dppx) {
+ border-bottom: none;
+ &::after {
+ @include scale-hairline-common($color, auto, auto, 0, 0);
+ width: 100%;
+ height: 1px;
+ transform-origin: 50% 100%;
+ @media (min-resolution: 2dppx) {
+ transform: scaleY(0.5);
+ }
+ }
+ }
+ }
+ } @else if ($direction == 'left') {
+ border-left: 1px $type $color;
+ position: relative;
+ html:not([data-scale]) & {
+ @media (min-resolution: 1dppx) {
+ border-left: none;
+ &::before {
+ @include scale-hairline-common($color, 0, auto, auto, 0);
+ width: 1px;
+ height: 100%;
+ transform-origin: 100% 50%;
+ @media (min-resolution: 2dppx) {
+ transform: scaleX(0.5);
+ }
+ }
+ }
+ }
+ } @else if ($direction == 'right') {
+ border-right: 1px $type $color;
+ position: relative;
+ html:not([data-scale]) & {
+ @media (min-resolution: 1dppx) {
+ border-right: none;
+ &::after {
+ @include scale-hairline-common($color, 0, 0, auto, auto);
+ width: 1px;
+ height: 100%;
+ background: $color;
+ transform-origin: 100% 50%;
+ transform: scaleX(0.5);
+ @media (min-resolution: 2dppx) {
+ transform: scaleX(0.5);
+ }
+ }
+ }
+ }
+ } @else if ($direction == 'all') {
+ border: 1px $type $color;
+ border-radius: $radius;
+ html:not([data-scale]) & {
+ @media (min-resolution: 2dppx) {
+ position: relative;
+ border: none;
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 200%;
+ height: 200%;
+ border: 1px $type $color;
+ border-radius: $radius * 2;
+ transform-origin: 0 0;
+ transform: scale(0.5);
+ box-sizing: border-box;
+ pointer-events: none;
+
+ // @media (min-resolution: 3dppx) {
+ // width: 300%;
+ // height: 300%;
+ // border-radius: @radius * 3;
+ // transform: scale(0.33);
+ // }
+ }
+ }
+ }
+ }
+}
+
+@mixin hairline-remove($position) {
+ @if $position == 'left' {
+ border-left: 0;
+ &:before {
+ display: none !important;
+ }
+ } @else if $position == 'right' {
+ border-right: 0;
+ &:after {
+ display: none !important;
+ }
+ } @else if $position == 'top' {
+ border-top: 0;
+ &:before {
+ display: none !important;
+ }
+ } @else if $position == 'bottom' {
+ border-bottom: 0;
+ &:after {
+ display: none !important;
+ }
+ } @else if $position == 'all' {
+ border: 0;
+ &:before {
+ display: none !important;
+ }
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/mixins/_safe-area.scss b/packages/mobile-ui-vue/components/theme/src/mixins/_safe-area.scss
new file mode 100644
index 0000000000000000000000000000000000000000..393f7a49206d04b9588bba552861434dbc1edc05
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/mixins/_safe-area.scss
@@ -0,0 +1,9 @@
+@mixin safeArea($styleName) {
+ @if($styleName){
+ #{$styleName}: 0;
+ @supports ((bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom))) and (-webkit-overflow-scrolling: touch) {
+ #{$styleName}: constant(safe-area-inset-bottom);
+ #{$styleName}: env(safe-area-inset-bottom);
+ }
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/mixins/_splitline.scss b/packages/mobile-ui-vue/components/theme/src/mixins/_splitline.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e099dbebea0f343f652739d7ed08ab09582ed376
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/mixins/_splitline.scss
@@ -0,0 +1,10 @@
+@import './hairline';
+@mixin hairline($direction, $color:$border-color-base,$radius:0,$type:solid){
+ @if ($direction == 'horizontal') {
+
+ } @else if($direction == 'vertical') {
+ &::after {
+ @include scale-hairline-common($color,0,auto,auto,0);
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/navbar.scss b/packages/mobile-ui-vue/components/theme/src/navbar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7de18a051151dda711e9ee16e38306a4925796e2
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/navbar.scss
@@ -0,0 +1,73 @@
+@import './mixins/hairline';
+@import './mixins/ellipsis';
+
+:root {
+ --fm-navbar-background: var(--fm-background-2);
+ --fm-navbar-color: var(--fm-text-color);
+ --fm-navbar-height: 44px;
+ --fm-navbar-title-size: 17px;
+ --fm-navbar-side-size: 16px;
+ --fm-navbar-arrow-size: 18px;
+}
+.fm-navbar{
+ position: relative;
+ z-index: 9;
+ display: flex;
+ align-items: center;
+ line-height: 1.5;
+ text-align: center;
+ user-select: none;
+ height: var(--fm-navbar-height);
+ color: var(--fm-navbar-color);
+ background-color: var(--fm-navbar-background);
+ &.fm-navbar-fixed {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ }
+ &.fm-navbar-border-bottom{
+ @include hairline('bottom', var(--fm-border-color-2));
+ }
+ &-title {
+ max-width: 60%;
+ margin: 0 auto;
+ font-weight: 500;
+ font-size: var(--fm-navbar-title-size);
+ @include ellipsis();
+ }
+
+ &-left,
+ &-right {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ display: flex;
+ align-items: center;
+ max-width: 30%;
+ padding: 0 16px;
+ font-size: var(--fm-navbar-side-size);
+ @include ellipsis();
+ cursor: pointer;
+ }
+ &-left {
+ left: 0;
+ &:active{
+ opacity: var(--fm-active-opacity);
+ }
+ &.fm-navbar-left-padding{
+ padding-left: 14px;
+ }
+ }
+ &-right {
+ right: 0;
+ .fm-navbar-text:active {
+ opacity: var(--fm-active-opacity);
+ }
+ }
+ .fm-navbar-left-arrow{
+ min-width: 1em;
+ margin-right: 4px;
+ font-size: var(--fm-navbar-arrow-size);
+ }
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/notice-bar.scss b/packages/mobile-ui-vue/components/theme/src/notice-bar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a442d8f72b2c719af7c1e3f38349ccb121770877
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/notice-bar.scss
@@ -0,0 +1,75 @@
+
+:root {
+ --fm-notice-bar-height: 40px;
+ --fm-notice-bar-zindex: var(--fm-zindex-3);
+ --fm-notice-bar-color: var(--fm-orange-2);
+ --fm-notice-bar-background: rgba(251, 185, 2, 0.1);
+}
+
+.fm-notice-bar {
+ display: flex;
+ position: relative;
+ padding: 0 16px;
+ color: var(--fm-notice-bar-color);
+ z-index: var(--fm-notice-bar-zindex);
+ min-height: var(--fm-notice-bar-height);
+ background-color: var(--fm-notice-bar-background);
+}
+.fm-notice-bar-left,
+.fm-notice-bar-right {
+ display: flex;
+ align-items: center;
+}
+.fm-notice-bar-left {
+ padding-right: 6px;
+}
+.fm-notice-bar-right {
+ padding-left: 6px;
+}
+.fm-notice-bar-empty {
+ padding-right: 0;
+}
+.fm-notice-bar-content {
+ flex: 1;
+ margin: auto;
+ width: auto;
+ font-size: 14px;
+ line-height: var(--fm-notice-bar-height);
+ white-space: nowrap;
+ overflow: hidden;
+ &.fm-notice-bar-multi-content {
+ padding: 16px 0;
+ font-size: 14px;
+ line-height: 20px;
+ white-space: normal;
+ }
+ .fm-notice-bar-content-animate {
+ padding-left: 100%;
+ display: inline-block;
+ animation: fm-notice-bar-animation 16s linear infinite both;
+ -webkit-animation: fm-notice-bar-animation 16s linear infinite both;
+ }
+}
+@-webkit-keyframes fm-notice-bar-animation {
+ 0% {
+ -webkit-transform: translateZ(0);
+ transform: translateZ(0);
+ }
+
+ to {
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ }
+}
+
+@keyframes fm-notice-bar-animation {
+ 0% {
+ -webkit-transform: translateZ(0);
+ transform: translateZ(0);
+ }
+
+ to {
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/notify.scss b/packages/mobile-ui-vue/components/theme/src/notify.scss
new file mode 100644
index 0000000000000000000000000000000000000000..21a2000aeb8b2d74392c27a60d64188c7bd9640e
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/notify.scss
@@ -0,0 +1,42 @@
+
+:root {
+ --fm-notify-color: var(--fm-white);
+ --fm-notify-zindex: var(--fm-zindex-5);
+ --fm-notify-info-background: var(--fm-primary-color);
+ --fm-notify-success-background: var(--fm-success-color);
+ --fm-notify-warning-background: var(--fm-warning-color);
+ --fm-notify-error-background: var(--fm-danger-color);
+}
+
+.fm-notify{
+ position: fixed;
+ left: 0;
+ top: 0;
+ z-index: var(--fm-notify-zindex);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ max-height: 100%;
+ padding: 8px 16px;
+ box-sizing: border-box;
+ color: var(--fm-notify-color);
+ font-size: 14px;
+ line-height: 20px;
+ white-space: pre-wrap;
+ text-align: center;
+ word-wrap: break-word;
+ overflow-y: auto;
+ &-info{
+ background-color: var(--fm-notify-info-background);
+ }
+ &-success{
+ background-color: var(--fm-notify-success-background);
+ }
+ &-warning{
+ background-color: var(--fm-notify-warning-background);
+ }
+ &-error{
+ background-color: var(--fm-notify-error-background);
+ }
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/overlay.scss b/packages/mobile-ui-vue/components/theme/src/overlay.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8b6b05a232249d0070c9e3f1733a7284e352223b
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/overlay.scss
@@ -0,0 +1,9 @@
+.fm-overlay {
+ width: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 98;
+ @include safeArea('bottom');
+ background-color: rgba(0, 0, 0, 0.4);
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/pagination.scss b/packages/mobile-ui-vue/components/theme/src/pagination.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f91040b75df5d92f212b416e37bc70a4bf7ccf32
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/pagination.scss
@@ -0,0 +1,84 @@
+@import './mixins/hairline';
+
+.fm-pagination {
+ display: flex;
+ font-size: 16px;
+ padding: 5px 0;
+ &-item,
+ &-page-desc {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &-item {
+ flex: 1;
+ box-sizing: border-box;
+ min-width: 34px;
+ height: 34px;
+ color: var(--fm-primary-color);
+ background-color: #fff;
+ cursor: pointer;
+ user-select: none;
+ &.fm-hairline{
+ position: relative;
+ }
+ &:active {
+ color: #fff;
+ background-color: var(--fm-primary-color);
+ }
+
+ &::before {
+ border-width: 1px 0 1px 1px!important;
+ }
+
+ &:last-child::before {
+ border-right-width: 1px!important;
+ }
+
+ &-active {
+ color: #fff;
+ background-color: var(--fm-primary-color);
+ }
+ }
+
+ &-prev,
+ &-next {
+ padding: 0 4px;
+ border-radius: 5px;
+ cursor: pointer;
+ }
+
+ &-item-disabled {
+ &,
+ &:active {
+ color: #cccccc;
+ background-color: #ffffff;
+ cursor: not-allowed;
+ opacity: 0.5;
+ }
+ }
+
+ &-page {
+ flex-grow: 0;
+ }
+
+ &-page-desc {
+ flex: 1;
+ height: 40px;
+ color: #333333;
+ .page-desc-text{
+ color: var(--fm-primary-color);
+ }
+ }
+
+ &-simple {
+ .fm-pagination-prev,
+ .fm-pagination-next {
+ &::before {
+ border-width: 1px!important;
+ }
+ }
+ }
+ }
+
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/picker.scss b/packages/mobile-ui-vue/components/theme/src/picker.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d340276fc746b62dce800229b2c26ae4cf8f861e
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/picker.scss
@@ -0,0 +1,88 @@
+@import './mixins/hairline';
+:root {
+ --fm-picker-panel-background: var(--fm-background-2);
+ --fm-picker-panel-toolbar-height: 44px;
+}
+.fm-picker-panel {
+ position: relative;
+ background-color: var(--fm-picker-panel-background);
+ user-select: none;
+ &-toolbar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: var(--fm-picker-panel-toolbar-height);
+ &-left,
+ &-right {
+ padding: 0 16px;
+ }
+ &-title {
+ font-weight: 500;
+ font-size: 16px;
+ max-width: 50%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+ &-content {
+ position: relative;
+ display: flex;
+ cursor: grab;
+ .fm-picker-panel-cols {
+ display: flex;
+ flex: 1;
+ .fm-picker-panel-col {
+ flex: 1;
+ overflow: hidden;
+ &-item{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 44px;
+ }
+ }
+ &-mask {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ width: 100%;
+ height: 100%;
+ background-image: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4));;
+ background-repeat: no-repeat;
+ background-position: top,bottom;
+ transform: translateZ(0);
+ pointer-events: none;
+ }
+ &::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 16px;
+ right: 16px;
+ height: 88px;
+ z-index: 2;
+ pointer-events: none;
+ border-width: 1px 0;
+ border-style: solid;
+ border-color: #ebedf0;
+ transform: translateY(-50%) scaleY(.5);
+ }
+ }
+ }
+}
+.fm-picker {
+ &:not(:last-child):not(.fm-picker-row) {
+ .fm-picker-input {
+ @include hairline('bottom');
+ &::after {
+ left: 16px !important;
+ }
+ }
+ }
+ .fm-popup-bottom{
+ border-radius: 14px 14px 0 0;
+ }
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/popover.scss b/packages/mobile-ui-vue/components/theme/src/popover.scss
new file mode 100644
index 0000000000000000000000000000000000000000..77275bb1bf776be259ac4227ad610f1ec1e7664e
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/popover.scss
@@ -0,0 +1,134 @@
+@import './mixins/hairline';
+:root {
+ --fm-popover-background: var(--fm-background-2);
+ --fm-popover-font-size: var(--fm-font-size-base);
+ --fm-popover-color: var(--fm-text-color);
+}
+.fm-popover-template {
+ display: inline-block;
+}
+.fm-popover {
+ background-color: transparent;
+ padding: 10px;
+ font-size: var(--fm-text-font-size);
+ color: var(--fm-text-color);
+ .fm-popover-arrow {
+ position: absolute;
+ width: 11px;
+ height: 11px;
+ border-radius: 1px;
+ background-color: var(--fm-popover-background);
+ transform: rotate(45deg);
+ z-index: 0;
+ }
+ .fm-popover-inner {
+ background-color: var(--fm-popover-background);
+ box-shadow: 0 2px 8px 0 var(--fm-box-shadow-color-2);
+ border-radius: 6px;
+ overflow: hidden;
+ &-wrapper {
+ position: relative;
+ padding: 0;
+ background-color: var(--fm-popover-background);
+ .fm-popover-item {
+ padding: 0 6px 0 8px;
+ @include hairline('bottom');
+ &-container {
+ position: relative;
+ display: flex;
+ align-items: center;
+ height: 46px;
+ line-height: 46px;
+ box-sizing: border-box;
+ padding: 0 2px;
+ .fm-popover-item-icon {
+ margin-right: 16px;
+ }
+ }
+ &:active {
+ background: var(--fm-active-color);
+ }
+ }
+ .fm-popover-item-disabled {
+ opacity: var(--fm-disabled-opacity);
+ }
+ }
+ }
+ &.fm-popover-placement-top,
+ &.fm-popover-placement-topLeft,
+ &.fm-popover-placement-topRight {
+ .fm-popover-arrow {
+ transform: rotate(225deg);
+ bottom: 5.5px;
+ }
+ }
+ &.fm-popover-placement-top {
+ .fm-popover-arrow {
+ left: 50%;
+ transform: translateX(-50%) rotate(225deg);
+ }
+ }
+ &.fm-popover-placement-topLeft {
+ .fm-popover-arrow {
+ left: 21px;
+ }
+ }
+ &.fm-popover-placement-topRight {
+ .fm-popover-arrow {
+ right: 21px;
+ }
+ }
+ &.fm-popover-placement-right,
+ &.fm-popover-placement-rightBottom,
+ &.fm-popover-placement-rightTop {
+ .fm-popover-arrow {
+ transform: rotate(-45deg);
+ left: 5.5px;
+ }
+ }
+ &.fm-popover-placement-right .fm-popover-arrow {
+ top: 50%;
+ transform: translateY(-50%) rotate(-45deg);
+ }
+ &.fm-popover-placement-rightTop .fm-popover-arrow {
+ top: 21px;
+ }
+ &.fm-popover-placement-rightBottom .fm-popover-arrow {
+ bottom: 21px;
+ }
+ &.fm-popover-placement-left,
+ &.fm-popover-placement-leftBottom,
+ &.fm-popover-placement-leftTop {
+ .fm-popover-arrow {
+ transform: rotate(135deg);
+ right: 4.5px;
+ }
+ }
+ &.fm-popover-placement-left .fm-popover-arrow {
+ top: 50%;
+ transform: translateY(-50%) rotate(135deg);
+ }
+ &.fm-popover-placement-leftTop .fm-popover-arrow {
+ top: 21px;
+ }
+ &.fm-popover-placement-leftBottom .fm-popover-arrow {
+ bottom: 21px;
+ }
+ &.fm-popover-placement-bottom,
+ &.fm-popover-placement-bottomLeft,
+ &.fm-popover-placement-bottomRight {
+ .fm-popover-arrow {
+ top: 4.5px;
+ }
+ }
+ &.fm-popover-placement-bottom .fm-popover-arrow {
+ left: 50%;
+ transform: translateX(-50%) rotate(45deg);
+ }
+ &.fm-popover-placement-bottomLeft .fm-popover-arrow {
+ left: 21px;
+ }
+ &.fm-popover-placement-bottomRight .fm-popover-arrow {
+ right: 21px;
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/popup.scss b/packages/mobile-ui-vue/components/theme/src/popup.scss
new file mode 100644
index 0000000000000000000000000000000000000000..36a41897ea766c8716a4b6f80def33ff97b83df1
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/popup.scss
@@ -0,0 +1,58 @@
+@import './mixins/safe-area';
+@import './mixins/border-radius';
+:root {
+ --fm-popup-background: var(--fm-background-2);
+ --fm-popup-zindex: var(--fm-zindex-3);
+ --fm-popup-radius: 16px;
+}
+
+.fm-popup {
+ position: fixed;
+ max-height: 100%;
+ overflow-y: auto;
+ background-color: var(--fm-popup-background);
+ transition: all var(--fm-duration-base);
+ z-index: var(--fm-popup-zindex);
+ &-center {
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ &.fm-popup-round {
+ @include borderRadius(var(--fm-popup-radius));
+ }
+ }
+ &-top,
+ &-bottom {
+ left: 0;
+ right: 0;
+ }
+ &-top {
+ top: 0;
+ &.fm-popup-round {
+ @include borderRadius(var(--fm-popup-radius),'top');
+ }
+ }
+ &-bottom {
+ @include safeArea('bottom');
+ &.fm-popup-round {
+ @include borderRadius(var(--fm-popup-radius),'bottom');
+ }
+ }
+ &-left,
+ &-right {
+ top: 0;
+ @include safeArea('bottom');
+ }
+ &-left {
+ left: 0;
+ &.fm-popup-round {
+ @include borderRadius(var(--fm-popup-radius),'left');
+ }
+ }
+ &-right {
+ right: 0;
+ &.fm-popup-round {
+ @include borderRadius(var(--fm-popup-radius),'right');
+ }
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/radio.scss b/packages/mobile-ui-vue/components/theme/src/radio.scss
new file mode 100644
index 0000000000000000000000000000000000000000..aeaa016c6b24744c911563148263493ff314e841
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/radio.scss
@@ -0,0 +1,21 @@
+.fm-radio-group {
+ .fm-radio-horizontal {
+ display: flex;
+ overflow: visible;
+ text-align: left;
+ flex-wrap: wrap;
+ .fm-radio {
+ margin-top: 4px;
+ margin-bottom: 4px;
+ }
+ }
+}
+.fm-cell .fm-radio-group .fm-radio-vertical {
+ padding-left: 0;
+}
+
+.fm-input-control-right {
+ .fm-radio-horizontal {
+ justify-content: flex-end;
+ }
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/rich-editor.scss b/packages/mobile-ui-vue/components/theme/src/rich-editor.scss
new file mode 100644
index 0000000000000000000000000000000000000000..13621d83a6dc80a35d82890553c78ac45f37766a
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/rich-editor.scss
@@ -0,0 +1,998 @@
+@import './mixins/hairline';
+
+.fm-editor {
+ width: 100%;
+ .fm-editor-no-border.ql-container,
+ .fm-editor-toobar-wrapper.ql-toolbar {
+ border: none;
+ }
+ .fm-editor-no-border {
+ .ql-editor {
+ padding: 12px 0;
+ }
+ .ql-editor.ql-blank::before {
+ left: 0;
+ right: 0;
+ }
+ }
+ .fm-editor-toobar {
+ .fm-editor-toobar-row {
+ display: flex;
+ justify-content: space-between;
+ padding: 8px;
+ &:not(:last-child) {
+ @include hairline('bottom');
+ }
+ .fm-editor-font-slider {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ padding: 0 8px;
+ }
+ .fm-toolbar-color {
+ height: 24px;
+ width: 24px;
+ background-color: #000;
+ border-radius: 50%;
+ position: relative;
+ }
+ .fm-toolbar-color.fm-active {
+ &::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 14px;
+ width: 14px;
+ background-color: #fff;
+ border-radius: 50%;
+ transform: translate(5px, 5px);
+ }
+ }
+ }
+ }
+}
+
+
+
+
+.ql-container {
+ box-sizing: border-box;
+ font-family: Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ height: 100%;
+ margin: 0px;
+ position: relative;
+ white-space: pre;
+}
+.ql-container.ql-disabled .ql-tooltip {
+ visibility: hidden;
+}
+.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
+ pointer-events: none;
+}
+.ql-clipboard {
+ left: -100000px;
+ height: 1px;
+ overflow-y: hidden;
+ position: absolute;
+ top: 50%;
+}
+.ql-clipboard p {
+ margin: 0;
+ padding: 0;
+}
+.ql-editor {
+ box-sizing: border-box;
+ line-height: 1.42;
+ height: 100%;
+ outline: none;
+ overflow-y: auto;
+ padding: 12px 15px;
+ tab-size: 4;
+ -moz-tab-size: 4;
+ text-align: left;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+.ql-editor > * {
+ cursor: text;
+}
+.ql-editor p,
+.ql-editor ol,
+.ql-editor ul,
+.ql-editor pre,
+.ql-editor blockquote,
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+ margin: 0;
+ padding: 0;
+ counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol,
+.ql-editor ul {
+ padding-left: 1.5em;
+}
+.ql-editor ol > li,
+.ql-editor ul > li {
+ list-style-type: none;
+}
+.ql-editor ul > li::before {
+ content: '\2022';
+}
+.ql-editor ul[data-checked=true],
+.ql-editor ul[data-checked=false] {
+ pointer-events: none;
+}
+.ql-editor ul[data-checked=true] > li *,
+.ql-editor ul[data-checked=false] > li * {
+ pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before,
+.ql-editor ul[data-checked=false] > li::before {
+ color: #777;
+ cursor: pointer;
+ pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before {
+ content: '\2611';
+}
+.ql-editor ul[data-checked=false] > li::before {
+ content: '\2610';
+}
+.ql-editor li::before {
+ display: inline-block;
+ white-space: nowrap;
+ width: 1.2em;
+}
+.ql-editor li:not(.ql-direction-rtl)::before {
+ margin-left: -1.5em;
+ margin-right: 0.3em;
+ text-align: right;
+}
+.ql-editor li.ql-direction-rtl::before {
+ margin-left: 0.3em;
+ margin-right: -1.5em;
+}
+.ql-editor ol li:not(.ql-direction-rtl),
+.ql-editor ul li:not(.ql-direction-rtl) {
+ padding-left: 1.5em;
+}
+.ql-editor ol li.ql-direction-rtl,
+.ql-editor ul li.ql-direction-rtl {
+ padding-right: 1.5em;
+}
+.ql-editor ol li {
+ counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+ counter-increment: list-0;
+}
+.ql-editor ol li:before {
+ content: counter(list-0, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+ counter-increment: list-1;
+}
+.ql-editor ol li.ql-indent-1:before {
+ content: counter(list-1, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+ counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-2 {
+ counter-increment: list-2;
+}
+.ql-editor ol li.ql-indent-2:before {
+ content: counter(list-2, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-2 {
+ counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-3 {
+ counter-increment: list-3;
+}
+.ql-editor ol li.ql-indent-3:before {
+ content: counter(list-3, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-3 {
+ counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-4 {
+ counter-increment: list-4;
+}
+.ql-editor ol li.ql-indent-4:before {
+ content: counter(list-4, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-4 {
+ counter-reset: list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-5 {
+ counter-increment: list-5;
+}
+.ql-editor ol li.ql-indent-5:before {
+ content: counter(list-5, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-5 {
+ counter-reset: list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-6 {
+ counter-increment: list-6;
+}
+.ql-editor ol li.ql-indent-6:before {
+ content: counter(list-6, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-6 {
+ counter-reset: list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-7 {
+ counter-increment: list-7;
+}
+.ql-editor ol li.ql-indent-7:before {
+ content: counter(list-7, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-7 {
+ counter-reset: list-8 list-9;
+}
+.ql-editor ol li.ql-indent-8 {
+ counter-increment: list-8;
+}
+.ql-editor ol li.ql-indent-8:before {
+ content: counter(list-8, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-8 {
+ counter-reset: list-9;
+}
+.ql-editor ol li.ql-indent-9 {
+ counter-increment: list-9;
+}
+.ql-editor ol li.ql-indent-9:before {
+ content: counter(list-9, decimal) '. ';
+}
+.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
+ padding-left: 3em;
+}
+.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
+ padding-left: 4.5em;
+}
+.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
+ padding-right: 3em;
+}
+.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
+ padding-right: 4.5em;
+}
+.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
+ padding-left: 6em;
+}
+.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
+ padding-left: 7.5em;
+}
+.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
+ padding-right: 6em;
+}
+.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
+ padding-right: 7.5em;
+}
+.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
+ padding-left: 9em;
+}
+.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
+ padding-left: 10.5em;
+}
+.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
+ padding-right: 9em;
+}
+.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
+ padding-right: 10.5em;
+}
+.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
+ padding-left: 12em;
+}
+.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
+ padding-left: 13.5em;
+}
+.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
+ padding-right: 12em;
+}
+.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
+ padding-right: 13.5em;
+}
+.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
+ padding-left: 15em;
+}
+.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
+ padding-left: 16.5em;
+}
+.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
+ padding-right: 15em;
+}
+.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
+ padding-right: 16.5em;
+}
+.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
+ padding-left: 18em;
+}
+.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
+ padding-left: 19.5em;
+}
+.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
+ padding-right: 18em;
+}
+.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
+ padding-right: 19.5em;
+}
+.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
+ padding-left: 21em;
+}
+.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
+ padding-left: 22.5em;
+}
+.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
+ padding-right: 21em;
+}
+.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
+ padding-right: 22.5em;
+}
+.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
+ padding-left: 24em;
+}
+.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
+ padding-left: 25.5em;
+}
+.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
+ padding-right: 24em;
+}
+.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
+ padding-right: 25.5em;
+}
+.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
+ padding-left: 27em;
+}
+.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
+ padding-left: 28.5em;
+}
+.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
+ padding-right: 27em;
+}
+.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
+ padding-right: 28.5em;
+}
+.ql-editor .ql-video {
+ display: block;
+ max-width: 100%;
+}
+.ql-editor .ql-video.ql-align-center {
+ margin: 0 auto;
+}
+.ql-editor .ql-video.ql-align-right {
+ margin: 0 0 0 auto;
+}
+.ql-editor .ql-bg-black {
+ background-color: #000;
+}
+.ql-editor .ql-bg-red {
+ background-color: #e60000;
+}
+.ql-editor .ql-bg-orange {
+ background-color: #f90;
+}
+.ql-editor .ql-bg-yellow {
+ background-color: #ff0;
+}
+.ql-editor .ql-bg-green {
+ background-color: #008a00;
+}
+.ql-editor .ql-bg-blue {
+ background-color: #06c;
+}
+.ql-editor .ql-bg-purple {
+ background-color: #93f;
+}
+.ql-editor .ql-color-white {
+ color: #fff;
+}
+.ql-editor .ql-color-red {
+ color: #e60000;
+}
+.ql-editor .ql-color-orange {
+ color: #f90;
+}
+.ql-editor .ql-color-yellow {
+ color: #ff0;
+}
+.ql-editor .ql-color-green {
+ color: #008a00;
+}
+.ql-editor .ql-color-blue {
+ color: #06c;
+}
+.ql-editor .ql-color-purple {
+ color: #93f;
+}
+.ql-editor .ql-font-serif {
+ font-family: Georgia, Times New Roman, serif;
+}
+.ql-editor .ql-font-monospace {
+ font-family: Monaco, Courier New, monospace;
+}
+.ql-editor .ql-size-small {
+ font-size: 0.75em;
+}
+.ql-editor .ql-size-large {
+ font-size: 1.5em;
+}
+.ql-editor .ql-size-huge {
+ font-size: 2.5em;
+}
+.ql-editor .ql-direction-rtl {
+ direction: rtl;
+ text-align: inherit;
+}
+.ql-editor .ql-align-center {
+ text-align: center;
+}
+.ql-editor .ql-align-justify {
+ text-align: justify;
+}
+.ql-editor .ql-align-right {
+ text-align: right;
+}
+.ql-editor.ql-blank::before {
+ color: rgba(0,0,0,0.6);
+ content: attr(data-placeholder);
+ font-style: italic;
+ left: 15px;
+ pointer-events: none;
+ position: absolute;
+ right: 15px;
+}
+.ql-snow.ql-toolbar:after,
+.ql-snow .ql-toolbar:after {
+ clear: both;
+ content: '';
+ display: table;
+}
+.ql-snow.ql-toolbar button,
+.ql-snow .ql-toolbar button {
+ background: none;
+ border: none;
+ cursor: pointer;
+ display: inline-block;
+ float: left;
+ height: 24px;
+ padding: 3px 5px;
+ width: 28px;
+}
+.ql-snow.ql-toolbar button svg,
+.ql-snow .ql-toolbar button svg {
+ float: left;
+ height: 100%;
+}
+.ql-snow.ql-toolbar button:active:hover,
+.ql-snow .ql-toolbar button:active:hover {
+ outline: none;
+}
+.ql-snow.ql-toolbar input.ql-image[type=file],
+.ql-snow .ql-toolbar input.ql-image[type=file] {
+ display: none;
+}
+.ql-snow.ql-toolbar button:hover,
+.ql-snow .ql-toolbar button:hover,
+.ql-snow.ql-toolbar button:focus,
+.ql-snow .ql-toolbar button:focus,
+.ql-snow.ql-toolbar button.ql-active,
+.ql-snow .ql-toolbar button.ql-active,
+.ql-snow.ql-toolbar .ql-picker-label:hover,
+.ql-snow .ql-toolbar .ql-picker-label:hover,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active,
+.ql-snow.ql-toolbar .ql-picker-item:hover,
+.ql-snow .ql-toolbar .ql-picker-item:hover,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
+ color: #06c;
+}
+.ql-snow.ql-toolbar button:hover .ql-fill,
+.ql-snow .ql-toolbar button:hover .ql-fill,
+.ql-snow.ql-toolbar button:focus .ql-fill,
+.ql-snow .ql-toolbar button:focus .ql-fill,
+.ql-snow.ql-toolbar button.ql-active .ql-fill,
+.ql-snow .ql-toolbar button.ql-active .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
+ fill: #06c;
+}
+.ql-snow.ql-toolbar button:hover .ql-stroke,
+.ql-snow .ql-toolbar button:hover .ql-stroke,
+.ql-snow.ql-toolbar button:focus .ql-stroke,
+.ql-snow .ql-toolbar button:focus .ql-stroke,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
+.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
+ stroke: #06c;
+}
+@media (pointer: coarse) {
+ .ql-snow.ql-toolbar button:hover:not(.ql-active),
+ .ql-snow .ql-toolbar button:hover:not(.ql-active) {
+ color: #444;
+ }
+ .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
+ .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
+ .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
+ .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
+ fill: #444;
+ }
+ .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+ .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+ .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
+ .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
+ stroke: #444;
+ }
+}
+.ql-snow {
+ box-sizing: border-box;
+}
+.ql-snow * {
+ box-sizing: border-box;
+}
+.ql-snow .ql-hidden {
+ display: none;
+}
+.ql-snow .ql-out-bottom,
+.ql-snow .ql-out-top {
+ visibility: hidden;
+}
+.ql-snow .ql-tooltip {
+ position: absolute;
+ transform: translateY(10px);
+}
+.ql-snow .ql-tooltip a {
+ cursor: pointer;
+ text-decoration: none;
+}
+.ql-snow .ql-tooltip.ql-flip {
+ transform: translateY(-10px);
+}
+.ql-snow .ql-formats {
+ display: inline-block;
+ vertical-align: middle;
+}
+.ql-snow .ql-formats:after {
+ clear: both;
+ content: '';
+ display: table;
+}
+.ql-snow .ql-stroke {
+ fill: none;
+ stroke: #444;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ stroke-width: 2;
+}
+.ql-snow .ql-stroke-miter {
+ fill: none;
+ stroke: #444;
+ stroke-miterlimit: 10;
+ stroke-width: 2;
+}
+.ql-snow .ql-fill,
+.ql-snow .ql-stroke.ql-fill {
+ fill: #444;
+}
+.ql-snow .ql-empty {
+ fill: none;
+}
+.ql-snow .ql-even {
+ fill-rule: evenodd;
+}
+.ql-snow .ql-thin,
+.ql-snow .ql-stroke.ql-thin {
+ stroke-width: 1;
+}
+.ql-snow .ql-transparent {
+ opacity: 0.4;
+}
+.ql-snow .ql-direction svg:last-child {
+ display: none;
+}
+.ql-snow .ql-direction.ql-active svg:last-child {
+ display: inline;
+}
+.ql-snow .ql-direction.ql-active svg:first-child {
+ display: none;
+}
+.ql-snow .ql-editor h1 {
+ font-size: 2em;
+}
+.ql-snow .ql-editor h2 {
+ font-size: 1.5em;
+}
+.ql-snow .ql-editor h3 {
+ font-size: 1.17em;
+}
+.ql-snow .ql-editor h4 {
+ font-size: 1em;
+}
+.ql-snow .ql-editor h5 {
+ font-size: 0.83em;
+}
+.ql-snow .ql-editor h6 {
+ font-size: 0.67em;
+}
+.ql-snow .ql-editor a {
+ text-decoration: underline;
+}
+.ql-snow .ql-editor blockquote {
+ border-left: 4px solid #ccc;
+ margin-bottom: 5px;
+ margin-top: 5px;
+ padding-left: 16px;
+}
+.ql-snow .ql-editor code,
+.ql-snow .ql-editor pre {
+ background-color: #f0f0f0;
+ border-radius: 3px;
+}
+.ql-snow .ql-editor pre {
+ white-space: pre-wrap;
+ margin-bottom: 5px;
+ margin-top: 5px;
+ padding: 5px 10px;
+}
+.ql-snow .ql-editor code {
+ font-size: 85%;
+ padding: 2px 4px;
+}
+.ql-snow .ql-editor pre.ql-syntax {
+ background-color: #23241f;
+ color: #f8f8f2;
+ overflow: visible;
+}
+.ql-snow .ql-editor img {
+ max-width: 100%;
+}
+.ql-snow .ql-picker {
+ color: #444;
+ display: inline-block;
+ float: left;
+ font-size: 14px;
+ font-weight: 500;
+ height: 24px;
+ position: relative;
+ vertical-align: middle;
+}
+.ql-snow .ql-picker-label {
+ cursor: pointer;
+ display: inline-block;
+ height: 100%;
+ padding-left: 8px;
+ padding-right: 2px;
+ position: relative;
+ width: 100%;
+}
+.ql-snow .ql-picker-label::before {
+ display: inline-block;
+ line-height: 22px;
+}
+.ql-snow .ql-picker-options {
+ background-color: #fff;
+ display: none;
+ min-width: 100%;
+ padding: 4px 8px;
+ position: absolute;
+ white-space: nowrap;
+}
+.ql-snow .ql-picker-options .ql-picker-item {
+ cursor: pointer;
+ display: block;
+ padding-bottom: 5px;
+ padding-top: 5px;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+ color: #ccc;
+ z-index: 2;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+ fill: #ccc;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+ stroke: #ccc;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+ display: block;
+ margin-top: -1px;
+ top: 100%;
+ z-index: 1;
+}
+.ql-snow .ql-color-picker,
+.ql-snow .ql-icon-picker {
+ width: 28px;
+}
+.ql-snow .ql-color-picker .ql-picker-label,
+.ql-snow .ql-icon-picker .ql-picker-label {
+ padding: 2px 4px;
+}
+.ql-snow .ql-color-picker .ql-picker-label svg,
+.ql-snow .ql-icon-picker .ql-picker-label svg {
+ right: 4px;
+}
+.ql-snow .ql-icon-picker .ql-picker-options {
+ padding: 4px 0px;
+}
+.ql-snow .ql-icon-picker .ql-picker-item {
+ height: 24px;
+ width: 24px;
+ padding: 2px 4px;
+}
+.ql-snow .ql-color-picker .ql-picker-options {
+ padding: 3px 5px;
+ width: 152px;
+}
+.ql-snow .ql-color-picker .ql-picker-item {
+ border: 1px solid transparent;
+ float: left;
+ height: 16px;
+ margin: 2px;
+ padding: 0px;
+ width: 16px;
+}
+.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
+ position: absolute;
+ margin-top: -9px;
+ right: 0;
+ top: 50%;
+ width: 18px;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
+ content: attr(data-label);
+}
+.ql-snow .ql-picker.ql-header {
+ width: 98px;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+ content: 'Normal';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+ content: 'Heading 1';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+ content: 'Heading 2';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+ content: 'Heading 3';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+ content: 'Heading 4';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+ content: 'Heading 5';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+ content: 'Heading 6';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+ font-size: 2em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+ font-size: 1.5em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+ font-size: 1.17em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+ font-size: 1em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+ font-size: 0.83em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+ font-size: 0.67em;
+}
+.ql-snow .ql-picker.ql-font {
+ width: 108px;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+ content: 'Sans Serif';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
+ content: 'Serif';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
+ content: 'Monospace';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
+ font-family: Georgia, Times New Roman, serif;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
+ font-family: Monaco, Courier New, monospace;
+}
+.ql-snow .ql-picker.ql-size {
+ width: 98px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+ content: 'Normal';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
+ content: 'Small';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
+ content: 'Large';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
+ content: 'Huge';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
+ font-size: 10px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
+ font-size: 18px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
+ font-size: 32px;
+}
+.ql-snow .ql-color-picker.ql-background .ql-picker-item {
+ background-color: #fff;
+}
+.ql-snow .ql-color-picker.ql-color .ql-picker-item {
+ background-color: #000;
+}
+.ql-toolbar.ql-snow {
+ border: 1px solid #ccc;
+ box-sizing: border-box;
+ font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+ padding: 8px;
+}
+.ql-toolbar.ql-snow .ql-formats {
+ margin-right: 15px;
+}
+.ql-toolbar.ql-snow .ql-picker-label {
+ border: 1px solid transparent;
+}
+.ql-toolbar.ql-snow .ql-picker-options {
+ border: 1px solid transparent;
+ box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
+}
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+ border-color: #ccc;
+}
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+ border-color: #ccc;
+}
+.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
+.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
+ border-color: #000;
+}
+.ql-toolbar.ql-snow + .ql-container.ql-snow {
+ border-top: 0px;
+}
+.ql-snow .ql-tooltip {
+ background-color: #fff;
+ border: 1px solid #ccc;
+ box-shadow: 0px 0px 5px #ddd;
+ color: #444;
+ padding: 5px 12px;
+ white-space: nowrap;
+}
+.ql-snow .ql-tooltip::before {
+ content: "Visit URL:";
+ line-height: 26px;
+ margin-right: 8px;
+}
+.ql-snow .ql-tooltip input[type=text] {
+ display: none;
+ border: 1px solid #ccc;
+ font-size: 13px;
+ height: 26px;
+ margin: 0px;
+ padding: 3px 5px;
+ width: 170px;
+}
+.ql-snow .ql-tooltip a.ql-preview {
+ display: inline-block;
+ max-width: 200px;
+ overflow-x: hidden;
+ text-overflow: ellipsis;
+ vertical-align: top;
+}
+.ql-snow .ql-tooltip a.ql-action::after {
+ border-right: 1px solid #ccc;
+ content: 'Edit';
+ margin-left: 16px;
+ padding-right: 8px;
+}
+.ql-snow .ql-tooltip a.ql-remove::before {
+ content: 'Remove';
+ margin-left: 8px;
+}
+.ql-snow .ql-tooltip a {
+ line-height: 26px;
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-preview,
+.ql-snow .ql-tooltip.ql-editing a.ql-remove {
+ display: none;
+}
+.ql-snow .ql-tooltip.ql-editing input[type=text] {
+ display: inline-block;
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+ border-right: 0px;
+ content: 'Save';
+ padding-right: 0px;
+}
+.ql-snow .ql-tooltip[data-mode=link]::before {
+ content: "Enter link:";
+}
+.ql-snow .ql-tooltip[data-mode=formula]::before {
+ content: "Enter formula:";
+}
+.ql-snow .ql-tooltip[data-mode=video]::before {
+ content: "Enter video:";
+}
+.ql-snow a {
+ color: #06c;
+}
+.ql-container.ql-snow {
+ border: 1px solid #ccc;
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/scheadule.scss b/packages/mobile-ui-vue/components/theme/src/scheadule.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ef8d9aadbff1386790de6747c1a0bedd50193378
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/scheadule.scss
@@ -0,0 +1,210 @@
+@import './mixins/hairline';
+
+.fm-scheadule {
+ display: flex;
+ flex-direction: column;
+ background-color: #fff;
+ .header {
+ .title {
+ display: flex;
+ position: relative;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 15px;
+ line-height: 38px;
+ color: #333333;
+ padding: 0 16px;
+ }
+ }
+ .content {
+ position: relative;
+ margin-right: 20px;
+ margin-left: 4px;
+ .label {
+ width: 32px;
+ display: flex;
+ align-items: center;
+ font-size: 11px;
+ color: #888888;
+ }
+ .allDate {
+ display: flex;
+ position: relative;
+ min-height: 28px;
+ }
+ .hour-list {
+ position: relative;
+ .hour-cell {
+ display: flex;
+ height: 40px;
+ position: relative;
+ .hour-cell-label {
+ height: 50%;
+ justify-content: flex-end;
+ padding-right: 8px;
+ }
+ }
+ }
+ }
+ .event-list {
+ position: absolute;
+ left: 36px;
+ right: 0;
+ top: 0;
+ .event-container-absolute {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 9;
+ }
+ .event-info {
+ position: absolute;
+ left: 36px;
+ right: 0;
+ display: block;
+ box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.3);
+ background-color: #fff;
+ z-index: 99;
+ .event-info-content {
+ min-height: 40px;
+ position: relative;
+ padding: 9px 12px;
+ font-size: 15px;
+ color: #333333;
+ .event-info-item {
+ padding: 3px 0;
+ }
+ }
+ .event-info-footer {
+ height: 40px;
+ display: flex;
+ background: #f8f9fb;
+ .button {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+ .triangle {
+ position: absolute;
+ left: 50%;
+ top: -6px;
+ width: 8px;
+ height: 8px;
+ transform: translateX(-50%) rotate(45deg);
+ box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.3);
+ background-color: #fff;
+ &::after {
+ position: absolute;
+ width: 180%;
+ height: 180%;
+ content: ' ';
+ pointer-events: none;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background-color: #fff;
+ border: none;
+ }
+ }
+ }
+ }
+ .boder-bottom {
+ &::after {
+ position: absolute;
+ box-sizing: border-box;
+ content: ' ';
+ pointer-events: none;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ border-bottom: 1px solid #ddd;
+ transform: scaleY(0.5);
+ }
+ }
+ .event-container {
+ border-radius: 2px;
+ height: 35px;
+ overflow: hidden;
+ .event-bg {
+ position: absolute;
+ box-sizing: border-box;
+ content: ' ';
+ pointer-events: none;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ opacity: 0.2;
+ }
+ .event {
+ width: 100%;
+ min-height: 30px;
+ display: flex;
+ padding-left: 10px;
+ padding-bottom: 10px;
+ .left {
+ padding-top: 2px;
+ padding-right: 6px;
+ }
+ .right {
+ display: flex;
+ flex-direction: column;
+ font-size: 12px;
+ color: #333333;
+ .event-title {
+ font-weight: 700;
+ line-height: 18px;
+ display: flex;
+ align-items: center;
+ }
+ .event-content {
+ transform: scaleY(0.91);
+ }
+ }
+ }
+ }
+ .event-container-focus {
+ // border-left: 2px solid #7ed321;
+ .event-bg {
+ // background: #7ed321;
+ opacity: 0.4;
+ }
+ }
+ .event-list-all {
+ position: relative;
+ width: 100%;
+ flex: 1;
+ padding-left: 4px;
+ .event-container {
+ position: relative;
+ &::after {
+ height: 1px;
+ width: 100%;
+ @include scale-hairline-common(#fff, auto, auto, 0, -1px);
+ }
+ }
+ }
+}
+.event-panel {
+ max-height: 300px;
+ overflow-y: auto;
+ .event-left {
+ display: flex;
+ align-items: center;
+ .event-left-text{
+ font-size: 14px;
+ color: #888888;
+ }
+ .event-left-spliter{
+ display: inline-block;
+ margin: 0 4px;
+ width: 8px;
+ height: 2px;
+ background-color: #888888;
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/scroll-view.scss b/packages/mobile-ui-vue/components/theme/src/scroll-view.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f75b0069e9504fde8a747595a25f9d0490353064
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/scroll-view.scss
@@ -0,0 +1,52 @@
+.fm-scroll-view {
+ position: relative;
+ display: block;
+ height: 100%;
+ overflow: hidden;
+ -webkit-user-select: none;
+ user-select: none;
+ touch-action: pan-y;
+ .scroll-view-header {
+ top: 0;
+ }
+ .scroll-view-footer {
+ bottom: 0;
+ }
+ .scroll-view-container {
+ position: relative;
+ z-index: 1;
+ &:after {
+ content: '';
+ display: table;
+ clear: both;
+ }
+ .scroll-view-refresh {
+ position: absolute;
+ left: 0;
+ right: 0;
+ -webkit-transform: translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0);
+ &:after {
+ content: '';
+ display: table;
+ clear: both;
+ }
+ }
+ .scroll-view-more {
+ visibility: hidden;
+ &.active {
+ visibility: visible;
+ }
+ }
+ &.horizon {
+ display: inline-block;
+ }
+ }
+}
+.md-scroll-view .scroll-view-footer,
+.md-scroll-view .scroll-view-header {
+ position: absolute;
+ left: 0;
+ right: 0;
+ z-index: 2;
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/scroll.scss b/packages/mobile-ui-vue/components/theme/src/scroll.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3473ad52f49c7d6ec37dfe00de56a7787cfe9b87
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/scroll.scss
@@ -0,0 +1,8 @@
+.fm-scroll {
+ width: 100%;
+ height: 100%;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ -webkit-overflow-scrolling: touch;
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/search.scss b/packages/mobile-ui-vue/components/theme/src/search.scss
new file mode 100644
index 0000000000000000000000000000000000000000..551ac0c0753b94068e256b1fff3c7bb9704cb670
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/search.scss
@@ -0,0 +1,62 @@
+@import './mixins/hairline';
+
+:root {
+ --fm-search-background: var(--fm-background-2);
+ --fm-search-color: var(--fm-text-color);
+ --fm-search-content-background: var(--fm-background-3);
+ --fm-search-sub-color: var(--fm-text-color-2);
+ --fm-search-radius: 17px;
+}
+
+.fm-search {
+ display: flex;
+ align-items: center;
+ padding: 8px 12px;
+ background-color: var(--fm-search-background);
+ color: var(--fm-search-color);
+ &-content {
+ display: flex;
+ flex: 1;
+ padding-left: 8px;
+ background-color: var(--fm-search-content-background);
+ .fm-search-wrapper {
+ display: flex;
+ flex: 1;
+ }
+ .fm-cell {
+ flex: 1;
+ background-color: transparent;
+ padding: 5px 8px 5px 0;
+ .fm-input-value .fm-input-body .fm-input-control {
+ font-size: 14px;
+ &::-webkit-search-cancel-button {
+ display: none;
+ }
+ }
+ }
+ .fm-search-left-icon {
+ color: var(--fm-search-sub-color);
+ }
+ &-square {
+ border-radius: 6px;
+ }
+ &-round {
+ border-radius: 17px;
+ }
+ .fm-search-label {
+ padding: 0 5px;
+ font-size: 14px;
+ line-height: 36px;
+ }
+ }
+ &-action {
+ padding-left: 10px;
+ font-size: 16px;
+ line-height: 34px;
+ cursor: pointer;
+ user-select: none;
+ }
+}
+.fm-search-wrapper {
+ flex: 1;
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/share-sheet.scss b/packages/mobile-ui-vue/components/theme/src/share-sheet.scss
new file mode 100644
index 0000000000000000000000000000000000000000..be7a95ddf73b12606426fb13f24d7f04eaf126db
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/share-sheet.scss
@@ -0,0 +1,88 @@
+@import './mixins/hairline';
+
+.fm-sharesheet {
+ display: flex;
+ flex-direction: column;
+ max-height: 80%;
+ overflow: hidden;
+ &.fm-sharesheet-round {
+ border-radius: 16px 16px 0 0;
+ }
+ &-header {
+ flex-shrink: 0;
+ padding: 21px 16px 4px;
+ text-align: center;
+ &-title {
+ font-weight: 500;
+ font-size: 16px;
+ }
+ }
+ &-description {
+ display: block;
+ margin-top: 8px;
+ color: #999999;
+ font-size: 12px;
+ line-height: 16px;
+ text-align: center;
+ }
+ &-cancel {
+ flex-shrink: 0;
+ padding-top: 8px;
+ background-color:#f7f8fa;
+ &-inner {
+ display: block;
+ width: 100%;
+ padding: 14px 16px;
+ font-size: 16px;
+ text-align: center;
+ background-color: #fff;
+ border: none;
+ cursor: pointer;
+ &:active {
+ background-color: #f2f3f5;
+ }
+ }
+ }
+ &-options {
+ position: relative;
+ display: flex;
+ padding: 16px 0 16px 8px;
+ overflow-x: auto;
+ overflow-y: visible;
+ -webkit-overflow-scrolling: touch;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+ .fm-sharesheet-option {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ cursor: pointer;
+ user-select: none;
+ .fm-sharesheet-icon{
+ width: 48px;
+ height: 48px;
+ margin: 0 16px;
+ }
+ .fm-sharesheet-name{
+ margin-top: 8px;
+ padding: 0 4px;
+ color: #646566;
+ font-size: 12px;
+ }
+ .fm-sharesheet-description{
+ padding: 0 4px;
+ color: #ccc;
+ font-size: 12px;
+ }
+ }
+ &.fm-sharesheet-options-border{
+ @include hairline('top');
+ &::before{
+ left: 16px!important;
+ right: 16px!important;
+ width: calc(100% - 32px)!important;
+ }
+ }
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/sidebar.scss b/packages/mobile-ui-vue/components/theme/src/sidebar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..91e3f834a8c610b3a2157dffe23f68f1417e31e4
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/sidebar.scss
@@ -0,0 +1,53 @@
+@import './mixins/hairline';
+
+:root {
+ --fm-sidebar-color: var(--fm-text-color);
+ --fm-sidebar-font-size: 14px;
+ --fm-sidebar-list-background: var(--fm-background-3);
+ --fm-sidebar-item-background: var(--fm-background);
+ --fm-sidebar-item-active-background: var(--fm-blue-2);
+ --fm-sidebar-item-active-color: var(--fm-white);
+}
+.fm-sidebar{
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ color: var(--fm-sidebar-color);
+ font-size: var(--fm-sidebar-font-size);
+ &-list{
+ flex-shrink: 0;
+ position: relative;
+ height: 100%;
+ overflow-y: auto;
+ background-color: var(--fm-sidebar-list-background);
+ }
+ .fm-sidebar-item{
+ position: relative;
+ display: block;
+ box-sizing: border-box;
+ padding: 16px 10px;
+ overflow: hidden;
+ line-height: 20px;
+ background-color: var(--fm-sidebar-item-background);
+ text-align: center;
+ cursor: pointer;
+ user-select: none;
+ &-active{
+ background: var(--fm-sidebar-item-active-background);
+ color: var(--fm-sidebar-item-active-color);
+ }
+ }
+ &-content{
+ flex: 1 1 0;
+ position: relative;
+ height: 100%;
+ overflow-y: auto;
+ }
+ &-list,&-content{
+ &::-webkit-scrollbar {
+ display: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/skeleton.scss b/packages/mobile-ui-vue/components/theme/src/skeleton.scss
new file mode 100644
index 0000000000000000000000000000000000000000..43e4372f523c44b9ccd3e681997f60dd9211bc37
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/skeleton.scss
@@ -0,0 +1,59 @@
+:root {
+ --fm-skeleton-background: var(--fm-background-3);
+}
+.fm-skeleton {
+ display: flex;
+ padding: 0 16px;
+
+ &-avatar {
+ flex-shrink: 0;
+ margin-right: 10px;
+ background-color: var(--fm-skeleton-background);
+
+ &-round {
+ border-radius: 100%;
+ }
+ }
+
+ &-content {
+ width: 100%;
+ }
+
+
+ &-row,
+ &-title {
+ height: 16px;
+ background-color: var(--fm-skeleton-background);
+ }
+
+ &-title {
+ margin: 0;
+ }
+
+ &-row {
+ &:not(:first-child) {
+ margin-top: 16px;
+ }
+ }
+
+ &-title + &-row {
+ margin-top: 20px;
+ }
+
+ &-animate {
+ animation: fm-skeleton-blink 1.2s ease-in-out infinite;
+ }
+
+ &-round {
+ .fm-skeleton-row,
+ .fm-skeleton-title {
+ border-radius: 100%;
+ }
+ }
+}
+
+@keyframes fm-skeleton-blink {
+ 50% {
+ opacity: 0.6;
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/steps.scss b/packages/mobile-ui-vue/components/theme/src/steps.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0853484381ff6934bee629036864de7b204f2d58
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/steps.scss
@@ -0,0 +1,170 @@
+@import './mixins/hairline';
+
+:root {
+ --fm-steps-primary-color: var(--fm-primary-color);
+}
+
+.fm-steps {
+ &-list {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ }
+ &-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+ margin: 0 8px;
+ .item-icon {
+ width: 20px;
+ height: 20px;
+ background-color: #ccc;
+ border-radius: 50%;
+ color: #fff;
+ .fm-icon,
+ .item-icon-text {
+ display: block;
+ line-height: 20px;
+ font-size: 12px;
+ margin: 0 auto;
+ text-align: center;
+ transform: scale(0.83);
+ }
+ }
+ .item-text {
+ position: absolute;
+ .name {
+ white-space: nowrap;
+ line-height: 18px;
+ font-size: 13px;
+ color: #999;
+ }
+ .desc {
+ margin-top: 4px;
+ font-size: 12px;
+ line-height: 20px;
+ color: #ccc;
+ }
+ .sub-desc {
+ line-height: 18px;
+ font-size: 13px;
+ color: #999999;
+ }
+ }
+ &-finish,
+ &-current {
+ .item-icon {
+ background-color: var(--fm-steps-primary-color);
+ }
+ .item-text .name {
+ color: #333333;
+ }
+ .item-icon-text {
+ color: #fff;
+ }
+ }
+ &-current {
+ .item-text .name {
+ color: var(--fm-steps-primary-color);
+ }
+ }
+ }
+ &-line {
+ position: relative;
+ background: #e8e8e8;
+ overflow: hidden;
+ .line-inner {
+ position: absolute;
+ z-index: 10;
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: block;
+ }
+ &-horizontal {
+ flex: 1;
+ height: 1px;
+ .line-inner {
+ width: 100%;
+ height: 1px;
+ background-color: var(--fm-steps-primary-color);
+ transition: all 0.3s linear;
+ transform: translate3d(-100%, 0px, 0px);
+ }
+ &.fm-steps-line-finish {
+ .line-inner {
+ transform: translate3d(0%, 0px, 0px);
+ transition: all 0.3s linear 0s;
+ }
+ }
+ }
+ }
+ &-horizontal {
+ padding-top: 26px;
+ .fm-steps-list {
+ .fm-steps-item {
+ .item-text {
+ top: calc(-100% - 6px);
+ margin-bottom: 11px;
+ text-align: center;
+ }
+ }
+ }
+ }
+ &-vertical {
+ padding-left: 32px;
+ .fm-steps-list {
+ height: 100%;
+ flex-direction: column;
+ align-items: flex-start;
+ .fm-steps-item {
+ flex-direction: row;
+ width: 100%;
+ margin: 0;
+ padding: 15px 10px 15px 0;
+ align-items: stretch;
+ .item-icon {
+ position: absolute;
+ top: 15px;
+ left: -18px;
+ z-index: 2;
+ }
+ .item-text {
+ position: static;
+ padding-left: 14px;
+ .name {
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+ white-space: normal;
+ }
+ .desc {
+ line-height: 20px;
+ font-size: 14px;
+ color: #333;
+ }
+ }
+ .item-line {
+ position: absolute;
+ top: 16px;
+ left: -8px;
+ width: 1px;
+ height: 100%;
+ background-color: #e8e8e8;
+ }
+ &-finish {
+ .item-line {
+ background-color: var(--fm-steps-primary-color);
+ }
+ }
+ }
+ }
+ &.fm-steps-fill {
+ height: 100%;
+ .fm-steps-list .fm-steps-item {
+ flex: 1;
+ }
+ }
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/swipe.scss b/packages/mobile-ui-vue/components/theme/src/swipe.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8b90ce9506ad3aaab5b62099a253daf4983c7a57
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/swipe.scss
@@ -0,0 +1,66 @@
+@import './mixins/hairline';
+
+:root {
+ --fm-swipe-indicator-width: 6px;
+ --fm-swipe-indicator-height: 6px;
+ --fm-swipe-indicator-margin: 6px;
+ --fm-swipe-indicator-background: #ebedf0;
+}
+
+.fm-swipe {
+ position: relative;
+ overflow: hidden;
+ cursor: grab;
+ user-select: none;
+
+ &-box {
+ display: flex;
+ height: 100%;
+
+ &-vertical {
+ flex-direction: column;
+ }
+ }
+
+ &-indicators {
+ position: absolute;
+ bottom: 12px;
+ left: 50%;
+ display: flex;
+ transform: translateX(-50%);
+
+ &-vertical {
+ top: 50%;
+ bottom: auto;
+ left: 12px;
+ flex-direction: column;
+ transform: translateY(-50%);
+
+ .fm-swipe-indicator:not(:last-child) {
+ margin-bottom: var(--fm-swipe-indicator-margin);
+ }
+ }
+ }
+
+ &-indicator {
+ width: var(--fm-swipe-indicator-width);
+ height: var(--fm-swipe-indicator-width);
+ background-color: var(--fm-swipe-indicator-background);
+ border-radius: var(--fm-radius-max);
+ transition: opacity var(--fm-duration-fast);
+ &:not(:last-child) {
+ margin-right: var(--fm-swipe-indicator-margin);
+ }
+
+ &-active {
+ background-color: var(--fm-primary-color);
+ opacity: .3;
+ }
+ }
+ &-item {
+ position: relative;
+ flex-shrink: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/swipecell.scss b/packages/mobile-ui-vue/components/theme/src/swipecell.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d176983987ad066ce87aff3e54f65261d20bdff3
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/swipecell.scss
@@ -0,0 +1,28 @@
+.fm-swipe-cell{
+ position: relative;
+ overflow: hidden;
+ cursor: grab;
+
+ &-wrapper {
+ transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1);
+ transition-property: transform;
+ }
+
+ &-left,
+ &-right {
+ position: absolute;
+ top: 0;
+ height: 100%;
+ display: flex;
+ }
+
+ &-left {
+ left: 0;
+ transform: translate3d(-100%, 0, 0);
+ }
+
+ &-right {
+ right: 0;
+ transform: translate3d(100%, 0, 0);
+ }
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/switch.scss b/packages/mobile-ui-vue/components/theme/src/switch.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9261c19ae24a30c29fa093a8190b0d671e55a921
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/switch.scss
@@ -0,0 +1,70 @@
+@import './mixins/hairline';
+
+:root {
+ --fm-switch-background: var(--fm-gray-5);
+ --fm-switch-on-color: var(--fm-primary-color);
+}
+
+.fm-switch {
+ position: relative;
+ display: inline-block;
+ width: 50px;
+ height: 30px;
+ font-size: 30px;
+ border-radius: 40px;
+ cursor: pointer;
+ transition: background-color var(--fm-duration-base);
+ background-color: var(--fm-switch-background);
+ &-node {
+ position: absolute;
+ top: 1px;
+ left: 1px;
+ z-index: 1;
+ width: 28px;
+ height: 28px;
+ border-radius: 100%;
+ background-color: var(--fm-white);
+ transition: transform var(--fm-duration-base)
+ cubic-bezier(0.3, 1.05, 0.4, 1.05);
+ .fm-switch-loading-icon {
+ position: absolute;
+ top: 25%;
+ left: 25%;
+ width: 50%;
+ height: 50%;
+ line-height: 1;
+ color: var(--fm-switch-on-color);
+ circle {
+ animation: fm-circular 1.5s ease-in-out infinite;
+ stroke: currentColor;
+ stroke-width: 3;
+ stroke-linecap: round;
+ }
+ &-circular {
+ vertical-align: super;
+ }
+ }
+ }
+
+ &-on {
+ background-color: var(--fm-switch-on-color);
+ .fm-switch-node {
+ transform: translateX(calc(50px - 30px));
+ }
+ .fm-switch-loading {
+ color: var(--fm-switch-on-color);
+ }
+ }
+ &-disabled {
+ cursor: not-allowed;
+ opacity: var(--fm-disabled-opacity);
+ }
+ &-readonly {
+ cursor: default;
+ opacity: var(--fm-readonly-opacity);
+ }
+
+ &-loading {
+ cursor: default;
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/tab-bar.scss b/packages/mobile-ui-vue/components/theme/src/tab-bar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f5370de340be7ef70853570fb3cdfe46fd1d1844
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/tab-bar.scss
@@ -0,0 +1,225 @@
+@import './mixins/hairline';
+
+:root {
+ --fm-tab-bar-height: 44px;
+ --fm-tab-bar-background: var(--fm-background-2);
+ --fm-tab-bar-color: var(--fm-text-color);
+ --fm-tab-bar-active-color: var(--fm-primary-color);
+ --fm-tab-bar-font-size: 16px;
+}
+
+.fm-tab-bar {
+ position: relative;
+ background: var(--fm-tab-bar-background);
+ color: var(--fm-tab-bar-color);
+ font-size: var(--fm-tab-bar-font-size);
+ @include hairline('bottom');
+ .fm-scroll-view {
+ display: block;
+ }
+ .scroll-view-container {
+ min-width: 100%;
+ }
+ .fm-tab-bar-inner {
+ position: relative;
+ width: 100%;
+ }
+ .fm-tab-bar-extendable {
+ width: calc(100% - 30px);
+ }
+ .fm-tab-bar-list {
+ display: flex;
+ justify-content: space-between;
+ min-width: 100%;
+ }
+ .fm-tab-bar-item {
+ flex: auto;
+ flex-shrink: 0;
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-height: var(--fm-tab-bar-height);
+ padding: 0 12px;
+ margin: 0 auto;
+ box-sizing: border-box;
+ &.is-active {
+ color: var(--fm-tab-bar-active-color);
+ }
+ &.is-disabled {
+ color: var(--fm-disabled-color);
+ }
+
+ &-content .fm-tab-bar-icon {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ .fm-tab-bar-info {
+ position: absolute;
+ top: 0;
+ right: 0;
+ padding: 0 3px;
+ margin-top: 4px;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 14px;
+ color: var(--fm-background-2);
+ border-radius: 16px;
+ background-color: var(--fm-danger-color);
+ transform: translate(50%, -50%);
+ &.fm-tab-bar-dot {
+ width: 8px;
+ height: 8px;
+ background-color: var(--fm-danger-color);
+ border-radius: 100%;
+ }
+ }
+ }
+ }
+ .fm-tab-bar-ink {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ display: block;
+ height: 4px;
+ background-color: var(--fm-tab-bar-active-color);
+ transition: all var(--fm-duration-base);
+ border-radius: 2px;
+ &.is-disabled {
+ background-color: var(--fm-disabled-color);
+ }
+ }
+ .fm-tab-bar-extend,
+ .fm-tab-bar-end,
+ .fm-tab-bar-start {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ width: 14px;
+ overflow: hidden;
+ }
+ .fm-tab-bar-end:after,
+ .fm-tab-bar-start:after {
+ content: '';
+ display: block;
+ position: absolute;
+ left: -14px;
+ top: 50%;
+ width: 14px;
+ margin-top: -22px;
+ height: var(--fm-tab-bar-height);
+ border-radius: 50%;
+ box-shadow: -1px 0 12px 0 var(--fm-box-shadow-color);
+ }
+ .fm-tab-bar-end {
+ left: auto;
+ right: 0;
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+ }
+ .fm-tab-bar-extend {
+ left: auto;
+ right: -30px;
+ width: 42px;
+ margin: 4px 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-image: linear-gradient(
+ 270deg,
+ #ffffff 74%,
+ rgba(255, 255, 255, 0) 100%
+ );
+ border-radius: 2px;
+ z-index: 2;
+ }
+ &.fm-tab-bar-tab {
+ .fm-tab-bar-item-content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ .fm-tab-bar-icon {
+ margin-right: 6px;
+ }
+ }
+ }
+ &.fm-tab-bar-nav {
+ @include hairline('top');
+ @include hairline-remove('bottom');
+ .fm-tab-bar-item {
+ flex-direction: column;
+ min-height: 49px;
+ &.is-active {
+ color: var(--fm-tab-bar-active-color);
+ .fm-tab-bar-icon {
+ .fm-icon {
+ color: var(--fm-gradient-blue);
+ }
+ }
+ .text {
+ color: var(--fm-primary-color);
+ }
+ }
+ .fm-tab-bar-icon {
+ font-size: 20px;
+ margin: 4px 0;
+ text-align: center;
+ .fm-icon {
+ font-size: 24px;
+ color: var(--fm-text-color-3);
+ }
+ }
+ .text {
+ line-height: 13px;
+ font-size: 10px;
+ color: var(--fm-text-color-2);
+ }
+ }
+ }
+}
+.fm-tab-bar-panel {
+ height: 60vh;
+ padding: 0 16px;
+ background-color: #fff;
+ &-header {
+ height: 44px;
+ font-size: 16px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding-bottom: 10px;
+ }
+ &-content {
+ display: flex;
+ flex-wrap: wrap;
+ }
+ &-item {
+ height: 30px;
+ width: calc(33.3% - 8px);
+ padding: 0 8px;
+ margin-bottom: 8px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 4px;
+ background: #f6f6f6;
+ &-text {
+ font-size: 13px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+ &-item:nth-child(3n+1) {
+ margin-right: 12px;
+ }
+ &-item:nth-child(3n+3) {
+ margin-left: 12px;
+ }
+ &-item-active {
+ background: #3a90ff;
+ color: #fff;
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/tab.scss b/packages/mobile-ui-vue/components/theme/src/tab.scss
new file mode 100644
index 0000000000000000000000000000000000000000..be1116f959fc4efcd22f71b6193b30d4949d59b2
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/tab.scss
@@ -0,0 +1,46 @@
+.fm-tab-pane {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ flex: 1;
+ position: relative;
+ width: 100%;
+ transform: translateZ(0);
+ &.fm-tab-slide-left,
+ &.fm-tab-slide-right {
+ &-enter-from {
+ opacity: 0.01;
+ }
+ &-enter-active {
+ transition: all 300ms;
+ }
+ &-leave-active {
+ position: absolute;
+ top: 0;
+ transition: all 300ms;
+ }
+ &-leave-to {
+ opacity: 0.01;
+ }
+ }
+ &.fm-tab-slide-left {
+ &-enter-from {
+ transform: translateX(100%);
+ }
+ &-leave-to {
+ transform: translateX(-100%);
+ }
+ }
+ &.fm-tab-slide-right {
+ &-enter-from {
+ transform: translateX(-100%);
+ }
+ &-leave-to {
+ transform: translateX(100%);
+ }
+ }
+}
+
+[v-cloak] {
+ display: none;
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/tabs.scss b/packages/mobile-ui-vue/components/theme/src/tabs.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7956110b8f4fadbe5d3c0762a832f4587265abff
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/tabs.scss
@@ -0,0 +1,22 @@
+.fm-tabs {
+ .fm-tabs-content{
+ position: relative;
+ width: 100%;
+ overflow: hidden;
+ }
+}
+.fm-tabs-fill{
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ .fm-tab-bar{
+ flex-shrink: 0;
+ }
+ .fm-tabs-content{
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ flex-shrink: 1;
+ flex-basis: 0;
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/tag.scss b/packages/mobile-ui-vue/components/theme/src/tag.scss
new file mode 100644
index 0000000000000000000000000000000000000000..dc7ee488fa6ee694c7f38ca2cbccd02886d6ec21
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/tag.scss
@@ -0,0 +1,37 @@
+@import './mixins/hairline';
+
+:root {
+ --fm-tag-color: var(--fm-white);
+}
+
+.fm-tag{
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ white-space: nowrap;
+ padding: 0 6px;
+ font-size: 13px;
+ line-height: 20px;
+ border-radius: 4px;
+ color: var(--fm-tag-color);
+ background-color: var(--fm-primary-color);
+ &-info{
+ background-color: var(--fm-primary-color);
+ }
+ &-submit{
+ background-color: var(--fm-submit-color);
+ }
+ &-success{
+ background-color: var(--fm-success-color);
+ }
+ &-danger{
+ background-color: var(--fm-danger-color);
+ }
+ &-warning{
+ background-color: var(--fm-warning-color);
+ }
+ &-sign{
+ font-size: 10px;
+ border-radius: 0 100px 100px 0;
+ }
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/tags.scss b/packages/mobile-ui-vue/components/theme/src/tags.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cc91f7c97a03ad0e4edb3d835308106b02563f60
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/tags.scss
@@ -0,0 +1,129 @@
+@import './mixins/hairline';
+
+:root {
+ --fm-tags-delete-color: var(--fm-gray-5);
+}
+
+.fm-tags{
+ .fm-tags-item-container{
+ .fm-tag-item{
+ display: inline-block;
+ padding: 0 10px;
+ margin: 0 4px 4px 0;
+ line-height: 24px;
+ font-size: 16px;
+ white-space: nowrap;
+ border-radius: var(--fm-radius-max);
+ cursor: default;
+ color: var(--fm-tags-color);
+ a{
+ color: rgba(0,0,0,.85);
+ }
+ &>a:first-child:last-child{
+ display: inline-block;
+ margin: 0 -4px;
+ padding: 0 10px;
+ }
+ .tag-delete{
+ font-size: 16px;
+ margin-left: 6px;
+ color: var(--fm-tags-delete-color);
+ cursor: pointer;
+ display: inline-block;
+ .fm-icon{
+ vertical-align: baseline;
+ }
+ }
+ &>.fm-icon{
+ font-size: 12px;
+ }
+ &>.fm-icon+span, &>span+.fm-icon{
+ margin-left: 7px;
+ }
+ &.fm-tag-item-success {
+ background-color: var(--fm-success-color-light);
+ color: var(--fm-success-color);
+ .tag-delete{
+ color: var(--fm-success-color);
+ }
+ }
+ &.fm-tag-item-info {
+ color: var(--fm-primary-color);
+ background-color: var(--fm-primary-color-light);
+ .tag-delete{
+ color: var(--fm-primary-color);
+ }
+ }
+ &.fm-tag-item-danger {
+ background-color: var(--fm-danger-color-light);
+ color: var(--fm-danger-color);
+ .tag-delete{
+ color: var(--fm-danger-color);
+ }
+ }
+ &.fm-tag-item-warning {
+ color: var(--fm-warning-color);
+ background-color: var(--fm-warning-color-light);
+ .tag-delete{
+ color: var(--fm-warning-color);
+ }
+ }
+ &.fm-tag-item-has-color{
+ color: var(--fm-background-2);
+ border-color: transparent;
+ .tag-delete,a{
+ color: var(--fm-background-2);
+ }
+ }
+ &.fm-tag-item-checkable:not(.fm-tag-item-checked) {
+ background-color: transparent;
+ border-color: transparent;
+ cursor: pointer;
+ &:active{
+ color: var(--fm-primary-color);
+ }
+ }
+ &.fm-tag-item-checkdisabled{
+ background-color: transparent;
+ border-color: transparent;
+ cursor: not-allowed;
+ color: #ccc;
+ }
+ &.fm-tag-item-checked{
+ background-color: var(--fm-background-2);
+ border-color: var(--fm-primary-color);
+ color: var(--fm-primary-color);
+ }
+ &:last-child{
+ margin-right: 0;
+ }
+ }
+ .fm-tag-add-button{
+ line-height: 22px;
+ cursor: pointer;
+ background: #F9F9F9;
+ border: 1px dashed #ddd;
+ .fm-tag-add-text{
+ color: #999;
+ }
+ .fm-icon{
+ color: rgba(0,0,0,.2);
+ }
+ }
+ .fm-tag-input-box{
+ display: inline-block;
+ .fm-form-control{
+ width: 100px;
+ &:focus{
+ box-shadow: none;
+ }
+ }
+ }
+ }
+ &.fm-tags-checkable{
+ .fm-tag-item{
+ line-height: 22px;
+ border:1px solid #f6f6f6;
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/text-area.scss b/packages/mobile-ui-vue/components/theme/src/text-area.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5ad734a73284bcdfce18f4ac5f76d8db9497b9c1
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/text-area.scss
@@ -0,0 +1,3 @@
+.fm-field-textarea {
+ flex-direction: column;
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/text.scss b/packages/mobile-ui-vue/components/theme/src/text.scss
new file mode 100644
index 0000000000000000000000000000000000000000..396aa6e75d613bbad5c4c3b5940061996bd946e4
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/text.scss
@@ -0,0 +1,24 @@
+
+.fm-text {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin: 8px 16px;
+ line-height: 22px;
+ .label {
+ width: 92px;
+ font-size: 14px;
+ color: #999999;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ .text {
+ flex-grow: 1;
+ flex-basis: 0;
+ padding-left: 8px;
+ font-size: 14px;
+ color: #333333;
+ flex-shrink: 1;
+ }
+}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/theme/src/toast.scss b/packages/mobile-ui-vue/components/theme/src/toast.scss
new file mode 100644
index 0000000000000000000000000000000000000000..abd14b1b35b024bd8e8f65c53a99e96e5b056d65
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/toast.scss
@@ -0,0 +1,76 @@
+@import './mixins/hairline';
+
+:root {
+ --fm-toast-zindex: var(--fm-zindex-5);
+ --fm-toast-color: var(--fm-white);
+ --fm-toast-font-size: 16px;
+ --fm-toast-background: var(--fm-gray-8);
+ --fm-toast-icon-font-size: 48px;
+}
+
+.fm-toast {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ box-sizing: content-box;
+ max-width: 70%;
+ padding: 16px;
+ line-height: 20px;
+ white-space: pre-wrap;
+ text-align: center;
+ word-wrap: break-word;
+ border-radius: 7px;
+ transform: translate(-50%, -50%);
+ color: var(--fm-toast-color);
+ z-index: var(--fm-toast-zindex);
+ font-size: var(--fm-toast-font-size);
+ background-color: var(--fm-toast-background);
+ &-top {
+ top: 50px;
+ transform: translate(-50%, 0);
+ }
+ &-bottom {
+ top: auto;
+ bottom: 50px;
+ }
+ &-info,
+ &-success,
+ &-warning,
+ &-error {
+ width: 88px;
+ min-height: 88px;
+ }
+
+ &-icon {
+ margin-bottom: 8px;
+ font-size: var(--fm-toast-icon-font-size);
+ }
+ &-default {
+ padding: 8px 16px;
+ }
+ &-loading {
+ min-width: 84px;
+ min-height: 84px;
+ }
+ &-loading-icon {
+ position: relative;
+ display: inline-block;
+ width: 30px;
+ height: 30px;
+ margin-bottom: 8px;
+ vertical-align: middle;
+ animation: fm-rotate 2s linear infinite;
+ circle {
+ animation: fm-circular 1.5s ease-in-out infinite;
+ stroke: currentColor;
+ stroke-width: 4;
+ stroke-linecap: round;
+ }
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/tree-bar.scss b/packages/mobile-ui-vue/components/theme/src/tree-bar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..156a23a2145604c33ffe16bfdd5722c1cc89ed8f
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/tree-bar.scss
@@ -0,0 +1,102 @@
+:root {
+ --fm-tree-bar-height: 100%;
+ --fm-tree-bar-width: 80vw;
+ --fm-tree-bar-background: var(--fm-background);
+ --fm-tree-bar-color: var(--fm-text-color);
+ --fm-tree-bar-active-background: var(--fm-background-2);
+ --fm-tree-bar-active-color: var(--fm-primary-color);
+ --fm-tree-bar-item-active-background: var(--fm-blue-light);
+}
+.fm-tree-bar {
+ height: var(--fm-tree-bar-height);
+}
+.tree-level-one-wrapper {
+ width: var(--fm-tree-bar-width);
+}
+.tree-level-two-wrapper,
+.tree-level-three-wrapper {
+ display: flex;
+ .level-menu {
+ display: flex;
+ flex-direction: column;
+ background: var(--fm-tree-bar-background);
+ .level-menu-item {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 80px;
+ height: 48px;
+ font-size: 12px;
+ line-height: 16px;
+ color: var(--fm-tree-bar-color);
+ }
+ .level-menu-item-selected {
+ font-weight: var(--fm-font-bold);
+ color: var(--fm-tree-bar-active-color);
+ background-color: var(--fm-tree-bar-active-background);
+ &::before {
+ content: '';
+ height: 20px;
+ width: 4px;
+ position: absolute;
+ left: 0;
+ top: 14px;
+ border-radius: 2px;
+ background-image: var(--fm-gradient-blue);
+ }
+ }
+ }
+ .level-list {
+ width: 268px;
+ }
+}
+.tree-level-one-wrapper,
+.tree-level-two-wrapper {
+ .fm-cell {
+ .fm-cell-title-text {
+ font-size: 12px;
+ line-height: 28px;
+ }
+ }
+}
+.tree-level-three-wrapper {
+ .level-list {
+ padding: 12px 16px;
+ }
+ .level-item-panel {
+ line-height: 16px;
+ padding-bottom: 12px;
+ .level-item-title {
+ font-size: 12px;
+ font-weight: 500;
+ }
+ .level-item-sub-list {
+ padding-top: 11px;
+ display: flex;
+ flex-wrap: wrap;
+ .level-item-sub-item {
+ width: 72px;
+ padding: 0 4px;
+ margin-bottom: 10px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ flex-shrink: 0;
+ font-size: 11px;
+ line-height: 28px;
+ border-radius: 4px;
+ text-align: center;
+ background: var(--fm-background);
+ &:not(:nth-child(3n)) {
+ margin-right: 10px;
+ }
+ }
+ .level-item-selected {
+ color: var(--fm-tree-bar-active-color);
+ border: 0 solid var(--fm-tree-bar-active-color);
+ background: var(--fm-tree-bar-item-active-background);
+ }
+ }
+ }
+}
diff --git a/packages/mobile-ui-vue/components/theme/src/upload.scss b/packages/mobile-ui-vue/components/theme/src/upload.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e28b4de5f43a6373c7afb43c1407432917384ddf
--- /dev/null
+++ b/packages/mobile-ui-vue/components/theme/src/upload.scss
@@ -0,0 +1,276 @@
+.fm-upload-actionsheet-content {
+ flex: 1 auto;
+ overflow-y: auto;
+
+ &__item {
+ font-family: PingFangSC-Regular;
+ display: block;
+ width: 100%;
+ padding: 14px 16px;
+ font-size: 16px;
+ text-align: center;
+ background-color: #ffffff;
+ border: none;
+ cursor: pointer;
+ text-align: center;
+ -webkit-user-select: none;
+ user-select: none;
+
+ &-tip {
+ font-size: 12px;
+ color: #999999;
+ letter-spacing: 0;
+ margin-top: 5px;
+ }
+
+ &--disabled {
+ color: #cccccc;
+ cursor: not-allowed;
+ }
+ }
+}
+
+.fm-preview-file-popup {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+
+ &__preview-iframe {
+ border: none;
+
+ &-wrapper {
+ flex: 1;
+ }
+ }
+}
+
+.fm-upload {
+ background: #ffffff;
+ -webkit-user-select: none;
+ user-select: none;
+
+ &--single-btn {
+ display: inline-block;
+ }
+
+ &--has-list {
+ padding: 16px;
+ }
+
+ div {
+ -webkit-user-select: none;
+ user-select: none;
+ }
+ span {
+ -webkit-user-select: none;
+ user-select: none;
+ }
+ img {
+ -webkit-user-select: none;
+ -webkit-touch-callout: none;
+ user-select: none;
+ }
+ button {
+ -webkit-user-select: none;
+ user-select: none;
+ }
+
+ &__default-header {
+ padding: 0.5rem 0;
+ font-size: 16px;
+ }
+
+ &__file-list {
+ .fm-listview-item {
+ margin: 12px 0;
+ }
+ }
+
+ &__file-item {
+ display: flex;
+ justify-content: space-between;
+
+ &-thumbnail {
+ width: 100%;
+ height: 100%;
+
+ &-wrapper {
+ width: 48px;
+ height: 48px;
+ margin: auto 0;
+ img {
+ border-radius: 3px;
+ width: 48px;
+ height: 48px;
+ }
+ }
+ }
+
+ &-info {
+ flex: 1;
+ margin: auto 12px;
+ font-family: PingFangSC-Regular;
+ &-row {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 5px;
+ }
+ }
+
+ &-name {
+ display: block;
+ line-height: 22px;
+ font-size: 16px;
+ color: #333333;
+ letter-spacing: 0.21px;
+ margin-bottom: 2px;
+ word-break: break-all;
+ }
+
+ &-text {
+ display: block;
+ line-height: 18px;
+ font-size: 12px;
+ color: #888888;
+ letter-spacing: 0;
+ }
+
+ &-action-button {
+ margin: auto 0;
+ width: 16px;
+ height: 16px;
+ transform: rotate(90deg);
+ cursor: pointer;
+ }
+ }
+
+ &__upload-button {
+ width: 48px;
+ height: 48px;
+ background-color: #f6f6f6;
+ border-radius: 3px;
+ cursor: pointer;
+ .fm-icon {
+ display: block;
+ font-size: 20px;
+ line-height: 48px;
+ color: #dddddd;
+ margin: 0 auto;
+ }
+
+ &-wrapper {
+ display: inline-block;
+ position: relative;
+ z-index: 8;
+ }
+
+ &--readonly {
+ opacity: 0.6;
+ cursor: not-allowed;
+ }
+ }
+}
+
+$tooltip-bg-color: #333333;
+$tooltip-text-color: #cccccc;
+
+.fm-file-action-tooltip {
+ font-family: PingFangSC-Medium;
+ position: absolute;
+ z-index: 3000;
+ min-width: 150px;
+ margin: 0;
+ background: $tooltip-bg-color;
+ border-radius: 5px;
+ font-size: 13px;
+ color: $tooltip-text-color;
+ letter-spacing: 0;
+
+ &--hidden {
+ z-index: -9999;
+ left: -9999px !important;
+ top: -99999px !important;
+ }
+
+ div {
+ -webkit-user-select: none;
+ user-select: none;
+ }
+ span {
+ -webkit-user-select: none;
+ user-select: none;
+ }
+
+ &__arrow {
+ position: absolute;
+ border: 5px solid transparent;
+ width: 0;
+ height: 0;
+
+ &--top {
+ border-top-color: $tooltip-bg-color;
+ left: 50%;
+ top: 100%;
+ }
+ &--top-start {
+ border-top-color: $tooltip-bg-color;
+ left: 80%;
+ top: 100%;
+ }
+ &--top-end {
+ border-top-color: $tooltip-bg-color;
+ left: 20%;
+ top: 100%;
+ }
+ &--right-start {
+ border-right-color: $tooltip-bg-color;
+ right: 100%;
+ top: 30px;
+ }
+ &--right-end {
+ border-right-color: $tooltip-bg-color;
+ right: 100%;
+ bottom: 30px;
+ }
+ &--left-start {
+ border-left-color: $tooltip-bg-color;
+ left: 100%;
+ top: 30px;
+ }
+ &--left-end {
+ border-left-color: $tooltip-bg-color;
+ left: 100%;
+ bottom: 30px;
+ }
+ }
+
+ &__item {
+ line-height: 3;
+ margin: 0 10px;
+
+ &-tip {
+ font-size: 10px;
+ margin-top: -20px;
+ }
+
+ &--disabled {
+ opacity: 0.4;
+ }
+
+ &:not(:last-child) {
+ border-bottom: 1px solid rgba(102, 102, 102, 0.5);
+ }
+ }
+
+ &__mask {
+ display: block;
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 2999;
+ }
+}
diff --git a/packages/mobile-ui-vue/components/utils/index.ts b/packages/mobile-ui-vue/components/utils/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..97e4c4554a12151cf3a9701ae2f16f05492d7a23
--- /dev/null
+++ b/packages/mobile-ui-vue/components/utils/index.ts
@@ -0,0 +1,17 @@
+export * from './src/dom/event';
+export * from './src/dom/element';
+export * from './src/dom/style';
+export * from './src/dom/scroller';
+export * from './src/common';
+export * from './src/hook';
+export * from './src/date';
+export * from './src/number';
+export * from './src/vue-compile/codegen';
+export * from './src/array';
+export * from './src/type';
+export * from './src/interceptor';
+export * from './src/string';
+export * from './src/throttle';
+export * from './src/debounce';
+export * from './src/bem';
+export * from './src/deep-assign';
diff --git a/packages/mobile-ui-vue/components/utils/src/array.ts b/packages/mobile-ui-vue/components/utils/src/array.ts
new file mode 100644
index 0000000000000000000000000000000000000000..99aa7e60d623b327bce0bd664c9968e2fd361d67
--- /dev/null
+++ b/packages/mobile-ui-vue/components/utils/src/array.ts
@@ -0,0 +1,15 @@
+export const toMultidimensional = (arr: any[], num = 0) => {
+ const resArr: any[] = [];
+ arr.forEach((item, index) => {
+ const page = Math.floor(index / num); // 计算该元素为第几个素组内
+ if (!resArr[page]) { // 判断是否存在
+ resArr[page] = [];
+ }
+ resArr[page].push(item);
+ });
+ return resArr;
+};
+
+export const notEmptyArray = (value: any) => {
+ return Array.isArray(value) && value.length > 0;
+};
diff --git a/packages/mobile-ui-vue/components/utils/src/bem.ts b/packages/mobile-ui-vue/components/utils/src/bem.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3fff8b91ea25f9e7688de659722a39cd4e09d28f
--- /dev/null
+++ b/packages/mobile-ui-vue/components/utils/src/bem.ts
@@ -0,0 +1,55 @@
+export type Mod = string | { [key: string]: any };
+export type Mods = Mod | Mod[];
+
+function genBem(name: string, mods?: Mods): string {
+ if (!mods) {
+ return '';
+ }
+
+ if (typeof mods === 'string') {
+ return ` ${name}--${mods}`;
+ }
+
+ if (Array.isArray(mods)) {
+ return (mods as Mod[]).reduce
+
+基本使用
+
+
+选项状态
+
+
+自定义面板
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/mobile-ui-vue/demos/home/index.vue b/packages/mobile-ui-vue/demos/home/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..48be715e216134d8630bc141bf9e9765c398a8bd
--- /dev/null
+++ b/packages/mobile-ui-vue/demos/home/index.vue
@@ -0,0 +1,102 @@
+
+
+
+
+
+ 图片列表
+
+
+
+
+ 详情列表
+
+
+
+
+
+
+
diff --git a/packages/mobile-ui-vue/demos/index.vue b/packages/mobile-ui-vue/demos/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f3fbb19f21cf478f0001ce1c6560013988ee3e27
--- /dev/null
+++ b/packages/mobile-ui-vue/demos/index.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+ {{ menu.title }}
+
+
+ {{ submenu.name }}
+ {{ submenu.title }}
+
+
+
+
+
+
+
+
diff --git a/packages/mobile-ui-vue/demos/listview/filter-bar-panel-enum.vue b/packages/mobile-ui-vue/demos/listview/filter-bar-panel-enum.vue
new file mode 100644
index 0000000000000000000000000000000000000000..308bf06aeb736f6de0aad7e0aa148fd458cf9b97
--- /dev/null
+++ b/packages/mobile-ui-vue/demos/listview/filter-bar-panel-enum.vue
@@ -0,0 +1,149 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/demos/listview/filter-bar-panel.vue b/packages/mobile-ui-vue/demos/listview/filter-bar-panel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..949cdb721323fab2de2ff13bbf29ebce48e409ef
--- /dev/null
+++ b/packages/mobile-ui-vue/demos/listview/filter-bar-panel.vue
@@ -0,0 +1,42 @@
+
+
+
+
+
diff --git a/packages/mobile-ui-vue/demos/listview/filter-bar.vue b/packages/mobile-ui-vue/demos/listview/filter-bar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0b7a4d1420f769b5bde708a12c8f3c40f38648b0
--- /dev/null
+++ b/packages/mobile-ui-vue/demos/listview/filter-bar.vue
@@ -0,0 +1,107 @@
+
+
+
+
+
+
diff --git a/packages/mobile-ui-vue/demos/listview/index.html b/packages/mobile-ui-vue/demos/listview/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..b73ce60ad965d17c87405de143a154f5d2ae5018
--- /dev/null
+++ b/packages/mobile-ui-vue/demos/listview/index.html
@@ -0,0 +1,113 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/demos/listview/index.js b/packages/mobile-ui-vue/demos/listview/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..bb8320b1bd5d4990699b1068ed4839e4f8d1541b
--- /dev/null
+++ b/packages/mobile-ui-vue/demos/listview/index.js
@@ -0,0 +1,360 @@
+import Vue from 'vue';
+// export interface item {
+// "id": string,
+// "title": string,
+// "label":String,
+// "checked":Boolean
+// }
+// import FilterBar from './filter-bar.vue';
+export default {
+ name: 'listview-demo',
+ components: {
+ // FilterBar
+ },
+ data() {
+ return {
+ childValidatorResults: [{"id":"111","index":0},{"id":"222","index":1}],
+ list: [
+ {
+ items: undefined,
+ refreshing: false,
+ loading: false,
+ error: false,
+ finished: false,
+ multiple: true,
+ checkSubmitBtn: {
+ text: '提交'
+ },
+ checkCancelBtn: {
+ text: '撤销'
+ },
+ btns: [
+ {
+ text: '取消',
+ type: 'primary',
+ plain: true,
+ handler: this.cancelCheck
+ },
+ {
+ text: '确认',
+ type: 'primary',
+ plain: false,
+ handler: this.getList
+ }
+ ],
+ // showSubmitBtn: false
+ },
+ {
+ items: [],
+ refreshing: false,
+ loading: false,
+ error: false,
+ finished: false,
+ multiple: true
+ },
+ {
+ items: [],
+ refreshing: false,
+ loading: false,
+ error: false,
+ finished: false,
+ multiple: true
+ },
+ {
+ items: [],
+ refreshing: false,
+ loading: false,
+ error: false,
+ finished: false,
+ multiple: true
+ }
+ ],
+ listdata: [
+ {
+ id: '1',
+ text: '行为管理',
+ menus: [
+ {
+ id: '1-1',
+ icon: 'print',
+ text: '拜访路线',
+ color: '#40A9FF',
+ isLink: true
+ },
+ {
+ id: '1-2',
+ icon: 'addpicture',
+ text: '拜访计划',
+ color: '#73D13D',
+ isLink: true
+ },
+ {
+ id: '1-3',
+ icon: 'print',
+ text: '拜访',
+ color: '#13C2C2',
+ isLink: true
+ },
+ {
+ id: '1-4',
+ icon: 'print',
+ text: '工作汇报',
+ color: '#FF7A45',
+ isLink: true
+ },
+ {
+ id: '1-5',
+ icon: 'print',
+ text: '签到',
+ color: '#85A5FF',
+ isLink: true
+ },
+ {
+ id: '1-6',
+ icon: 'print',
+ text: '经销商',
+ color: '#73D13D',
+ isLink: true
+ }
+ ]
+ },
+ {
+ id: '2',
+ text: '拜访管理',
+ menus: [
+ {
+ id: '2-1',
+ icon: 'print',
+ text: '拜访路线'
+ },
+ {
+ id: '2-2',
+ icon: 'print',
+ text: '拜访计划',
+ checked: true
+ },
+ {
+ id: '2-3',
+ icon: 'print',
+ text: '拜访'
+ },
+ {
+ id: '2-4',
+ icon: 'print',
+ text: '工作汇报'
+ },
+ {
+ id: '2-5',
+ icon: 'print',
+ text: '签到'
+ },
+ {
+ id: '2-6',
+ icon: 'print',
+ text: '经销商',
+ checked: true
+ }
+ ]
+ },
+ {
+ id: '3',
+ text: '工作管理',
+ menus: [
+ {
+ id: '3-1',
+ icon: 'print',
+ text: '拜访路线'
+ },
+ {
+ id: '3-2',
+ icon: 'print',
+ text: '拜访计划'
+ },
+ {
+ id: '3-3',
+ icon: 'print',
+ text: '拜访'
+ },
+ {
+ id: '3-4',
+ icon: 'print',
+ text: '工作汇报'
+ },
+ {
+ id: '3-4',
+ icon: 'print',
+ text: '工作汇报'
+ }
+ ]
+ }
+ ],
+ listMultiple:false,
+ checkAll:false,
+ filterBarData: [{
+ value: 'billType',
+ text: '单据类型',
+ type: 'enum',
+ enumData: [{
+ text: '报销单',
+ value: 'expense',
+ children: [{
+ text: '普通差旅报销单',
+ value: '111',
+ },{
+ text: '交通费报销单',
+ value: '222',
+ },{
+ text: '通讯费报销单',
+ value: '333',
+ },{
+ text: '国外差旅报销',
+ value: '444',
+ },{
+ text: '通用差旅报销',
+ value: '555',
+ }]
+ },{
+ text: '行政审批',
+ value: 'approval',
+ children: []
+ }]
+ },{
+ value: 'submitDate',
+ text: '提交时间',
+ type: 'date'
+ }]
+ };
+ },
+ methods: {
+ onLoad(index) {
+
+ const list = this.list[index];
+ list.loading = true;
+
+ setTimeout(() => {
+ if (list.refreshing) {
+ list.items = [];
+ list.refreshing = false;
+ }
+
+ for (let i = 0; i < 5; i++) {
+ list.items = list?.items?.length ? list.items : []
+ const text = list.items.length + 1;
+ if ((i + 1) % 5 === 0) {
+ list.items.push({
+ id: 'listview' + text,
+ title: '标题' + text,
+ label: 'label' + text,
+ isLink: true,
+ checked: true
+ });
+ } else {
+ list.items.push({
+ id: 'listview' + text,
+ title: '标题' + text,
+ label: 'label' + text,
+ isLink: true
+ });
+ }
+ }
+
+ list.loading = false;
+ list.refreshing = false;
+ // console.log(index === 2 && list.items.length === 10 && !list.error)
+ if (index === 1 && list.items.length === 10 && !list.error) {
+ list.error = true;
+ } else {
+ list.error = false;
+ }
+
+ if (list.items.length >= 40) {
+ list.finished = true;
+ }
+ console.log(list);
+ }, 1000);
+ },
+ onLoadData(){
+ const list = this.list[3];
+ list.loading = true;
+ setTimeout(() => {
+ this.listdata.push({
+ id: '4',
+ text: '新增管理',
+ menus: [
+ {
+ id: '4-1',
+ icon: 'print',
+ text: '拜访路线'
+ }
+ ]
+ })
+ list.finished = true;
+ list.loading = false;
+ list.refreshing = false;
+ }, 1000);
+ },
+ onRefresh(index) {
+ this.list[index].finished = false;
+ this.list[index].refreshing = true;
+ this.onLoad(index);
+ },
+ submit(data) {
+ console.log(data);
+ console.log(this.$refs.listView1);
+ console.log(this.$refs.listView1.getScrollerPosition());
+ this.$refs.listView1.setScrollerPosition({scrollTop: 20})
+ },
+ multipleCancel(data) {
+ console.log(data);
+ },
+ viewChecked() {
+ this.$refs.listview.checkSubmit();
+ console.log('提交成功');
+ },
+ getList(btn, data) {
+ console.log(data);
+ console.log(btn);
+ this.$refs.listView1.checkSubmit()
+ },
+ cancelCheck(btn) {
+ console.log(btn);
+ console.log(this.$refs.listView1);
+ this.$refs.listView1.listCheckCancel()
+ },
+ listItemClick(event) {
+ console.log(event);
+ },
+ selectItemChange(event) {
+ console.log(event);
+ },
+ deleteItem(item) {
+ console.log(item);
+ },
+ listMultipleStart(){
+ this.listMultiple = true;
+ this.checkAll = false;
+ this.$refs.listview.listCheckStart();
+ },
+ listMultipleCancel(){
+ this.listMultiple = false;
+ this.$refs.listview.listCheckCancel();
+ },
+ checkAllChange(checked){
+ if(checked){
+ this.$refs.listview.listCheckAll();
+ }
+ else{
+ this.$refs.listview.listCheckAllCancel();
+ }
+ },
+ checkSubmit(){
+ console.log(this.$refs.listview.getSelectDataList());
+ },
+ listclick(e,disabled){
+ if(!disabled){
+ e.stopPropagation();
+ }
+ console.log('列表点击');
+ }
+ }
+};
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/demos/listview/index.scss b/packages/mobile-ui-vue/demos/listview/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d57d491f7c1378c18f876e0590080d1fa1cbd728
--- /dev/null
+++ b/packages/mobile-ui-vue/demos/listview/index.scss
@@ -0,0 +1,85 @@
+.container {
+ box-sizing: border-box;
+ height: calc(100% - 26px);
+ padding-bottom: 20px;
+}
+.fm-swipecell-demo-right {
+ display: flex;
+}
+.fm-tmpl-list {
+ height: 40px;
+ line-height: 40px;
+ border-bottom: 1px solid #ddd;
+ text-align: center;
+ color: #666;
+}
+.demo-listview-menu{
+ .fm-listview-item-content{
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ .fm-listview-sub-item{
+ flex: 0 0 25%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 10px;
+ .fm-listview-subitem-content{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ .menu-list-item-icon{
+ width: 46px;
+ height: 46px;
+ margin-bottom: 6px;
+ line-height: 46px;
+ text-align: center;
+ color: #fff;
+ border-radius: 16px;
+ background-color: #40A9FF;
+ .fm-icon{
+ font-size: 26px;
+ }
+ }
+ .menu-list-item-text{
+ text-align: center;
+ line-height: 20px;
+ font-size: 14px;
+ color: #666;
+ }
+ }
+ }
+}
+.fm-tmpl-list-footer{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ height: 54px;
+ padding: 0 16px;
+ background: #fff;
+ box-shadow: 0 -2px 8px 0 rgba(81,120,159,0.12);
+ .fm-tmpl-list-footer-btn{
+ flex: 1;
+ text-align: center;
+ }
+}
+.fm-demo-listview-tabs{
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ .fm-tab-bar{
+ flex-shrink: 0;
+ }
+ .fm-tabs-content,.fm-tab-pane,.fm-listview-wrapper{
+ display: flex;
+ flex-direction: column;
+ flex: 1 1 0;
+ overflow: hidden;
+ }
+ .fm-listview-wrapper .van-pull-refresh__track{
+ display: flex;
+ flex-direction: column;
+ flex: 1 1 0;
+ }
+}
diff --git a/packages/mobile-ui-vue/demos/listview/index.vue b/packages/mobile-ui-vue/demos/listview/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3039e4edf3d35fb14d01d3cb51200779fcc16e8a
--- /dev/null
+++ b/packages/mobile-ui-vue/demos/listview/index.vue
@@ -0,0 +1,75 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 列表底部
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 删除
+ 收藏
+
+
+
+
+
+
+
+
+
+ 下拉刷新
+
+
+
+
+
+基础用法
+
+
+
+多个按钮
+
+ 显示
+
+
+
+ 基础用法
+
+ 中间展示
+
+
+ 显示
+
+ 上侧显示
+
+ 显示
+
+ 下侧显示
+
+ 显示
+
+ 左侧显示
+
+ 显示
+
+ 右侧显示
+
+ 显示
+
+
+
+
+
+
+
+
diff --git a/packages/mobile-ui-vue/docs/.vitepress/config.ts b/packages/mobile-ui-vue/docs/.vitepress/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6c1cca6b3e2e44adbf24f0b06224e2c9430dc4c3
--- /dev/null
+++ b/packages/mobile-ui-vue/docs/.vitepress/config.ts
@@ -0,0 +1,33 @@
+import { defineConfig, HeadConfig } from 'vitepress';
+
+const head: HeadConfig[] = [
+ ['link', { rel: 'icon', type: 'image/svg+xml', href: '/assets/logo.svg' }],
+];
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+ title: "Farris Design Mobile",
+ description: "Farris Design Mobile By Vue3",
+ head,
+ themeConfig: {
+ // https://vitepress.dev/reference/default-theme-config
+ nav: [
+ { text: '设计原则', link: '/' },
+ { text: '组件', link: '/markdown-examples' }
+ ],
+
+ sidebar: [
+ {
+ text: 'Examples',
+ items: [
+ { text: 'Markdown Examples', link: '/markdown-examples' },
+ { text: 'Runtime API Examples', link: '/api-examples' }
+ ]
+ }
+ ],
+
+ socialLinks: [
+ { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
+ ]
+ }
+})
diff --git a/packages/mobile-ui-vue/docs/.vitepress/theme/index.ts b/packages/mobile-ui-vue/docs/.vitepress/theme/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..907eafdd9b4de9fddeb93b5939502b1893a07204
--- /dev/null
+++ b/packages/mobile-ui-vue/docs/.vitepress/theme/index.ts
@@ -0,0 +1,9 @@
+import FarrisMobile from '../../../components';
+import DefaultTheme from 'vitepress/theme';
+
+export default {
+ ...DefaultTheme,
+ enhanceApp({ app }) {
+ app.use(FarrisMobile);
+ }
+};
diff --git a/packages/mobile-ui-vue/docs/api-examples.md b/packages/mobile-ui-vue/docs/api-examples.md
new file mode 100644
index 0000000000000000000000000000000000000000..6bd8bb5c170045bc49274714f72541d6346dab7a
--- /dev/null
+++ b/packages/mobile-ui-vue/docs/api-examples.md
@@ -0,0 +1,49 @@
+---
+outline: deep
+---
+
+# Runtime API Examples
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+
+```md
+
+
+## Results
+
+### Theme Data
+无遮罩
+{{ theme }}
+
+### Page Data
+{{ page }}
+
+### Page Frontmatter
+{{ frontmatter }}
+```
+
+
+
+## Results
+
+### Theme Data
+{{ theme }}
+
+### Page Data
+{{ page }}
+
+### Page Frontmatter
+{{ frontmatter }}
+
+## More
+
+Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).
diff --git a/packages/mobile-ui-vue/docs/assets/farris_design_dark.png b/packages/mobile-ui-vue/docs/assets/farris_design_dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..cba7c29f887f770cd577967304b719edd743d488
Binary files /dev/null and b/packages/mobile-ui-vue/docs/assets/farris_design_dark.png differ
diff --git a/packages/mobile-ui-vue/docs/assets/farris_design_light.png b/packages/mobile-ui-vue/docs/assets/farris_design_light.png
new file mode 100644
index 0000000000000000000000000000000000000000..bdce3482e283bec8e6f0a8ed55c4890ae70d2bbb
Binary files /dev/null and b/packages/mobile-ui-vue/docs/assets/farris_design_light.png differ
diff --git a/packages/mobile-ui-vue/docs/index.md b/packages/mobile-ui-vue/docs/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..200f31d93eb8546ec08bb468c3d80a98b5047289
--- /dev/null
+++ b/packages/mobile-ui-vue/docs/index.md
@@ -0,0 +1,25 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+ name: "Farris Design Mobile"
+ text: "By Vue3"
+ tagline: Farris移动端组件库
+ actions:
+ - theme: brand
+ text: 快速开始
+ link: /markdown-examples
+ - theme: alt
+ text: 文档
+ link: /api-examples
+
+features:
+ - title: Feature A
+ details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+ - title: Feature B
+ details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+ - title: Feature C
+ details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+---
+
diff --git a/packages/mobile-ui-vue/docs/markdown-examples.md b/packages/mobile-ui-vue/docs/markdown-examples.md
new file mode 100644
index 0000000000000000000000000000000000000000..f9258a5503610e768817fe650aa5eab3ddacd514
--- /dev/null
+++ b/packages/mobile-ui-vue/docs/markdown-examples.md
@@ -0,0 +1,85 @@
+# Markdown Extension Examples
+
+This page demonstrates some of the built-in markdown extensions provided by VitePress.
+
+## Syntax Highlighting
+
+VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
+
+**Input**
+
+````md
+```js{4}
+export default {
+ data () {
+ return {
+ msg: 'Highlighted!'
+ }
+ }
+}
+```
+````
+
+**Output**
+
+```js{4}
+export default {
+ data () {
+ return {
+ msg: 'Highlighted!'
+ }
+ }
+}
+```
+
+## Custom Containers
+
+**Input**
+
+```md
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+```
+
+**Output**
+
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+
+## More
+
+Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).
diff --git a/packages/mobile-ui-vue/docs/vite.config.ts b/packages/mobile-ui-vue/docs/vite.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a8065bb836df03f8e08e7769973d6941f58e972c
--- /dev/null
+++ b/packages/mobile-ui-vue/docs/vite.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import svgLoader from 'vite-svg-loader';
+
+export default defineConfig({
+ plugins: [vueJsx({}), svgLoader()],
+ server: {
+ fs: {
+ strict: false
+ }
+ }
+});
diff --git a/packages/mobile-ui-vue/index.html b/packages/mobile-ui-vue/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..f5a88564284140f6a0e2d1d37d7450600afd6c3e
--- /dev/null
+++ b/packages/mobile-ui-vue/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/mobile-ui-vue/src/assets/vue.svg b/packages/mobile-ui-vue/src/assets/vue.svg
new file mode 100644
index 0000000000000000000000000000000000000000..770e9d333ee70e75fe7c0bad7fb13e4f6ed4627a
--- /dev/null
+++ b/packages/mobile-ui-vue/src/assets/vue.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/src/main.ts b/packages/mobile-ui-vue/src/main.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2fdabf742373ddaa8cc54946a76bc7fa7c3e0d6a
--- /dev/null
+++ b/packages/mobile-ui-vue/src/main.ts
@@ -0,0 +1,9 @@
+import { createApp } from 'vue';
+import './style.css';
+import '../components/theme/index.scss';
+import App from './app.vue';
+import router from './router';
+import FarrisMobile from '../components';
+
+const app = createApp(App);
+app.use(router).use(FarrisMobile).mount('#app');
diff --git a/packages/mobile-ui-vue/src/menu-data.ts b/packages/mobile-ui-vue/src/menu-data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2c317a5a935cb1f79963023d7f7f7134d802519b
--- /dev/null
+++ b/packages/mobile-ui-vue/src/menu-data.ts
@@ -0,0 +1,54 @@
+export default {
+ views: [
+ {
+ title: '表单组件',
+ subMenu: [
+ {
+ title: '文件上传',
+ name: 'adv-uploader',
+ url: '/demos/adv-uploader',
+ component: '/adv-uploader'
+ }
+ ]
+ },
+ {
+ title: '基础组件',
+ subMenu: [
+ {
+ title: '弹出层',
+ name: 'popup',
+ url: '/demos/popup',
+ component: '/popup'
+ }
+ ]
+ },
+ {
+ title: '反馈组件',
+ subMenu: [
+ {
+ title: '动作面板',
+ name: 'actionsheet',
+ url: '/demos/actionsheet',
+ component: '/actionsheet'
+ }
+ ]
+ },
+ {
+ title: '展示组件',
+ subMenu: [
+ {
+ title: '导航栏',
+ name: 'navbar',
+ url: '/demos/navbar',
+ component: '/navbar'
+ },
+ {
+ title: 'Listview',
+ name: 'listview',
+ url: '/demos/listview',
+ component: '/listview'
+ }
+ ]
+ }
+ ]
+};
diff --git a/packages/mobile-ui-vue/src/router/index.ts b/packages/mobile-ui-vue/src/router/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6a31592f1838717b308377a2c858c7721138039a
--- /dev/null
+++ b/packages/mobile-ui-vue/src/router/index.ts
@@ -0,0 +1,38 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
+import menuData from '../menu-data';
+
+// @ts-ignore
+const modules = import.meta.glob([`../../demos/**/index.vue`, `../../demos/index.vue`]);
+
+const allDemos: RouteRecordRaw[] = [];
+menuData.views.forEach(view => {
+ if (!view.subMenu) {
+ return;
+ }
+ view.subMenu.forEach((menuItem) => {
+ allDemos.push({
+ name: menuItem.name,
+ path: menuItem.name,
+ component: modules[`../../demos/${menuItem.name}/index.vue`]
+ });
+ });
+});
+
+const routes: RouteRecordRaw[] = [{
+ name: 'home',
+ path: '/home',
+ component: modules["../../demos/home/index.vue"]
+}, {
+ name: 'demos',
+ path: '/demos',
+ component: modules["../../demos/index.vue"],
+ children: allDemos
+}, {
+ path: '/',
+ redirect: '/home'
+}];
+
+export default createRouter({
+ history: createWebHashHistory(),
+ routes,
+});
diff --git a/packages/mobile-ui-vue/src/style.css b/packages/mobile-ui-vue/src/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/mobile-ui-vue/src/vite-env.d.ts b/packages/mobile-ui-vue/src/vite-env.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f23102e81edeb05f97228eb3d77c60728259b077
--- /dev/null
+++ b/packages/mobile-ui-vue/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/ban-types */
+//