├── public └── favicon.ico ├── src ├── icons │ ├── common │ │ ├── 404.svg │ │ ├── zip.svg │ │ ├── lock.svg │ │ └── bug.svg │ ├── nav-bar │ │ ├── link.svg │ │ ├── user.svg │ │ ├── example.svg │ │ ├── table.svg │ │ ├── password.svg │ │ ├── nested.svg │ │ ├── eye.svg │ │ ├── eye-open.svg │ │ ├── tree.svg │ │ ├── dashboard.svg │ │ └── form.svg │ └── SvgIcon.vue ├── utils │ ├── bus.ts │ ├── uniRequest.ts │ └── uni_request.js ├── static │ ├── uni.ttf │ ├── tabbar │ │ ├── my.png │ │ ├── cart.png │ │ ├── class.png │ │ ├── index.png │ │ ├── cartSelected.png │ │ ├── mySelected.png │ │ ├── classSelected.png │ │ └── indexSelected.png │ ├── other │ │ └── loading.png │ └── images │ │ ├── common │ │ ├── cxxx_ic@2x.png │ │ ├── dt_img@2x.png │ │ ├── gzm_ic@2x.png │ │ ├── jns_ic@2x.png │ │ ├── mzzt_ic@2x.png │ │ ├── ry_img@2x.png │ │ └── sjlxx_ic@2x.png │ │ └── index │ │ └── image_mrtx.png ├── common │ ├── reset-style.scss │ ├── variables-to-js.scss │ ├── index.scss │ ├── reset-style-nvue.scss │ ├── variables.scss │ ├── transition.scss │ ├── customer-nvue.scss │ └── scss-suger.scss ├── config │ ├── index.js │ ├── index.ts │ ├── production.js │ ├── production.ts │ ├── development.js │ └── development.ts ├── pages │ ├── svg-icon │ │ └── SvgIcon.vue │ ├── navigateOne │ │ └── navigateOne.vue │ ├── tableTwo │ │ └── TableTwo.vue │ ├── navigateTwo │ │ └── navigateTwo.vue │ ├── vuex-use │ │ └── VuexUse.vue │ ├── index │ │ └── index.vue │ └── tableOne │ │ └── TableOne.vue ├── App.vue ├── main.ts ├── settings.ts ├── store │ └── app.ts ├── pages.json.bak ├── pages.json ├── uni.scss ├── components │ └── pyh-rdtpicker │ │ ├── readme.md │ │ └── pyh-rdtpicker.vue ├── manifest.json └── hooks │ └── global │ └── useCommon.ts ├── .eslintignore ├── .vscode ├── extensions.json └── settings.json ├── .gitignore ├── .prettierignore ├── postcss.config.js ├── .gitattributes ├── .prettierrc ├── typings ├── shims-vue.d.ts ├── global.d.ts ├── env.d.ts ├── mixin.d.ts ├── router.d.ts ├── store.d.ts └── common.d.ts ├── .editorconfig ├── index.html ├── LICENSE ├── .eslintrc-auto-import.json ├── tsconfig.json ├── .eslintrc.js ├── README.md ├── vite.config.ts ├── auto-imports.d.ts └── package.json /public/favicon.ico: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/common/404.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/common/zip.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | public 2 | node_modules 3 | .history 4 | .husky 5 | dist 6 | *.d.ts 7 | -------------------------------------------------------------------------------- /src/utils/bus.ts: -------------------------------------------------------------------------------- 1 | //bus even 2 | import mitt from 'mitt' 3 | export default mitt() 4 | -------------------------------------------------------------------------------- /src/static/uni.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jzfai/vue3-mobile-uniapp/HEAD/src/static/uni.ttf -------------------------------------------------------------------------------- /src/static/tabbar/my.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jzfai/vue3-mobile-uniapp/HEAD/src/static/tabbar/my.png -------------------------------------------------------------------------------- /src/static/tabbar/cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jzfai/vue3-mobile-uniapp/HEAD/src/static/tabbar/cart.png -------------------------------------------------------------------------------- /src/static/other/loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jzfai/vue3-mobile-uniapp/HEAD/src/static/other/loading.png -------------------------------------------------------------------------------- /src/static/tabbar/class.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jzfai/vue3-mobile-uniapp/HEAD/src/static/tabbar/class.png -------------------------------------------------------------------------------- /src/static/tabbar/index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jzfai/vue3-mobile-uniapp/HEAD/src/static/tabbar/index.png -------------------------------------------------------------------------------- /src/static/tabbar/cartSelected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jzfai/vue3-mobile-uniapp/HEAD/src/static/tabbar/cartSelected.png -------------------------------------------------------------------------------- /src/static/tabbar/mySelected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jzfai/vue3-mobile-uniapp/HEAD/src/static/tabbar/mySelected.png -------------------------------------------------------------------------------- /src/static/tabbar/classSelected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jzfai/vue3-mobile-uniapp/HEAD/src/static/tabbar/classSelected.png -------------------------------------------------------------------------------- /src/static/tabbar/indexSelected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jzfai/vue3-mobile-uniapp/HEAD/src/static/tabbar/indexSelected.png -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar", "esbenp.prettier-vscode","dbaeumer.vscode-eslint"] 3 | } 4 | -------------------------------------------------------------------------------- /src/static/images/common/cxxx_ic@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jzfai/vue3-mobile-uniapp/HEAD/src/static/images/common/cxxx_ic@2x.png -------------------------------------------------------------------------------- /src/static/images/common/dt_img@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jzfai/vue3-mobile-uniapp/HEAD/src/static/images/common/dt_img@2x.png -------------------------------------------------------------------------------- /src/static/images/common/gzm_ic@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jzfai/vue3-mobile-uniapp/HEAD/src/static/images/common/gzm_ic@2x.png -------------------------------------------------------------------------------- /src/static/images/common/jns_ic@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jzfai/vue3-mobile-uniapp/HEAD/src/static/images/common/jns_ic@2x.png -------------------------------------------------------------------------------- /src/static/images/common/mzzt_ic@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jzfai/vue3-mobile-uniapp/HEAD/src/static/images/common/mzzt_ic@2x.png -------------------------------------------------------------------------------- /src/static/images/common/ry_img@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jzfai/vue3-mobile-uniapp/HEAD/src/static/images/common/ry_img@2x.png -------------------------------------------------------------------------------- /src/static/images/index/image_mrtx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jzfai/vue3-mobile-uniapp/HEAD/src/static/images/index/image_mrtx.png -------------------------------------------------------------------------------- /src/static/images/common/sjlxx_ic@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jzfai/vue3-mobile-uniapp/HEAD/src/static/images/common/sjlxx_ic@2x.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .history 2 | .idea 3 | node_modules 4 | .DS_Store 5 | dist 6 | dist-ssr 7 | *.local 8 | yarn* 9 | .hbuilderx 10 | *-lock.yaml 11 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .history 2 | .idea 3 | node_modules 4 | 5 | # System 6 | .DS_Store 7 | 8 | dist 9 | *.local 10 | yarn* 11 | pnpm* 12 | .vscode 13 | -------------------------------------------------------------------------------- /src/common/reset-style.scss: -------------------------------------------------------------------------------- 1 | text view { 2 | box-sizing: border-box; 3 | font-weight: 400; 4 | margin: 0; 5 | padding: 0; 6 | line-height: 1; 7 | font-size: 32rpx; 8 | } 9 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode", 3 | "npm.packageManager": "yarn", 4 | "editor.fontSize": 16, 5 | "editor.tabSize": 2 6 | } 7 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const {uniPostcssPlugin} = require('@dcloudio/uni-cli-shared') 2 | module.exports = { 3 | plugins: [ 4 | uniPostcssPlugin(), 5 | require('autoprefixer')() 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto eol=lf 2 | *.ts linguist-detectable=false 3 | *.css linguist-detectable=false 4 | *.scss linguist-detectable=false 5 | *.js linguist-detectable=true 6 | *.vue linguist-detectable=true 7 | -------------------------------------------------------------------------------- /src/config/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | import development from './development' 3 | import production from './production' 4 | 5 | export default { 6 | development, 7 | production 8 | }[import.meta.env.MODE || 'development'] 9 | -------------------------------------------------------------------------------- /src/config/index.ts: -------------------------------------------------------------------------------- 1 | //index.js 2 | import development from './development' 3 | import production from './production' 4 | 5 | export default { 6 | development, 7 | production 8 | }['development' || import.meta.env.MODE] 9 | -------------------------------------------------------------------------------- /src/config/production.js: -------------------------------------------------------------------------------- 1 | //production.js 2 | export default { 3 | env: 'production', //环境名称 4 | VITE_APP_BASE_URL: 'http://8.135.1.141/micro-service-api/', //请求的url地址 5 | VITE_APP_IMAGE_URL: 'http://8.135.1.141:8080' 6 | } 7 | -------------------------------------------------------------------------------- /src/config/production.ts: -------------------------------------------------------------------------------- 1 | //production.js 2 | export default { 3 | env: 'production', //环境名称 4 | VITE_APP_BASE_URL: 'http://8.135.1.141/micro-service-api/', //请求的url地址 5 | VITE_APP_IMAGE_URL: 'http://8.135.1.141:8080' 6 | } 7 | -------------------------------------------------------------------------------- /src/config/development.js: -------------------------------------------------------------------------------- 1 | //development.js 2 | export default { 3 | VITE_APP_ENV: 'development', //环境名称 4 | VITE_APP_BASE_URL: 'http://8.135.1.141/micro-service-api/', //请求的url地址 5 | VITE_APP_IMAGE_URL: 'http://8.135.1.141:8080' 6 | } 7 | -------------------------------------------------------------------------------- /src/config/development.ts: -------------------------------------------------------------------------------- 1 | //development.js 2 | export default { 3 | VITE_APP_ENV: 'development', //环境名称 4 | VITE_APP_BASE_URL: 'http://8.135.1.141/micro-service-api/', //请求的url地址 5 | VITE_APP_IMAGE_URL: 'http://8.135.1.141:8080' 6 | } 7 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": false, 3 | "tabWidth": 2, 4 | "printWidth": 120, 5 | "singleQuote": true, 6 | "trailingComma": "none", 7 | "bracketSpacing": true, 8 | "semi": false, 9 | "htmlWhitespaceSensitivity": "ignore" 10 | } 11 | -------------------------------------------------------------------------------- /src/icons/nav-bar/link.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/svg-icon/SvgIcon.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 14 | -------------------------------------------------------------------------------- /typings/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | /*the ts file of vue*/ 2 | declare module '*.vue' { 3 | import { DefineComponent } from 'vue' 4 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 5 | const component: DefineComponent<{}, {}, any> 6 | export default component 7 | } 8 | -------------------------------------------------------------------------------- /typings/global.d.ts: -------------------------------------------------------------------------------- 1 | //global declare file 2 | //let function namespace class ,module 3 | declare let GLOBAL_let: Array 4 | declare let GLOBAL_STRING: string 5 | declare let onlyOneChild: any 6 | declare let uni: any 7 | 8 | //declare import module 9 | declare module '*/**' 10 | declare module '*' 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | end_of_line = lf 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | 12 | [*.md] 13 | insert_final_newline = false 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /src/common/variables-to-js.scss: -------------------------------------------------------------------------------- 1 | :export { 2 | menuText: $menuText; 3 | menuActiveText: $menuActiveText; 4 | subMenuActiveText: $subMenuActiveText; 5 | menuBg: $menuBg; 6 | menuHover: $menuHover; 7 | subMenuBg: $subMenuBg; 8 | subMenuHover: $subMenuHover; 9 | sideBarWidth: $sideBarWidth; 10 | } 11 | -------------------------------------------------------------------------------- /src/common/index.scss: -------------------------------------------------------------------------------- 1 | /* #ifndef APP-NVUE */ 2 | @import '@/common/scss-suger.scss'; 3 | @import '@/common/reset-style.scss'; 4 | /* #endif */ 5 | 6 | /* #ifdef APP-NVUE */ 7 | @import '@/common/customer-nvue.scss'; 8 | @import '@/common/reset-style-nvue.scss'; 9 | /* #endif */ 10 | 11 | /* uview */ 12 | @import 'uview-ui/theme.scss'; 13 | -------------------------------------------------------------------------------- /typings/env.d.ts: -------------------------------------------------------------------------------- 1 | // the ts of vite config file 2 | /// 3 | export interface ImportMetaEnv { 4 | readonly VITE_APP_BASE_URL: string 5 | readonly VITE_APP_IMAGE_URL: string 6 | readonly VITE_APP_ENV: string 7 | // 更多环境变量... 8 | } 9 | 10 | export interface ImportMeta { 11 | readonly env: ImportMetaEnv 12 | } 13 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /src/icons/nav-bar/user.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /typings/mixin.d.ts: -------------------------------------------------------------------------------- 1 | //the mixin ts file, if you use the mixin props, you need declare 2 | declare let fileListMixin: Array 3 | declare let chooseFileNameMixin: string 4 | declare let commonValueMixin: string 5 | declare let pageTotalMixin: number 6 | declare let dialogTitleMixin: string 7 | declare let detailDialogMixin: boolean 8 | declare let startEndArrMixin: Array 9 | declare let searchFormMixin: any 10 | declare let formRulesMixin: any 11 | -------------------------------------------------------------------------------- /src/icons/common/lock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/common/reset-style-nvue.scss: -------------------------------------------------------------------------------- 1 | //重置样式改为border-box 2 | html { 3 | box-sizing: border-box; 4 | } 5 | *,*::before,*::after { 6 | box-sizing: inherit; 7 | } 8 | //h1 h2 h3 重置 9 | h1,h2,h3,h4,h5,h6{ 10 | line-height: 1; 11 | font-weight: 400; 12 | margin: 0; 13 | padding: 0; 14 | } 15 | //设置默认字体和大小 uniapp架构已经默认设置line-height:1 font-size:16px; 16 | //此处可以不用设置 17 | body { 18 | font-size: 16px; 19 | //color: #1d1007; 20 | line-height:1 21 | } 22 | 23 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/icons/nav-bar/example.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/navigateOne/navigateOne.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/common/variables.scss: -------------------------------------------------------------------------------- 1 | // define global var 2 | //font-size default is 28px of 750 , the 14px of 350 3 | $defaultSize: 28px; 4 | 5 | //the set default line-height is 1 6 | $defaultLineHeight:1 7 | //导出scss定义的样式变量 8 | //vite无法获取scss变量https://github.com/vitejs/vite/issues/1279 9 | //:export { 10 | // menuText: $menuText; 11 | // menuActiveText: $menuActiveText; 12 | // subMenuActiveText: $subMenuActiveText; 13 | // menuBg: $menuBg; 14 | // menuHover: $menuHover; 15 | // subMenuBg: $subMenuBg; 16 | // subMenuHover: $subMenuHover; 17 | // sideBarWidth: $sideBarWidth; 18 | //} 19 | -------------------------------------------------------------------------------- /src/icons/nav-bar/table.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/nav-bar/password.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | const app = createApp(App) 3 | import App from './App.vue' 4 | 5 | //svg icon 6 | // #ifdef H5 7 | import 'virtual:svg-icons-register' 8 | import svgIcon from '@/icons/SvgIcon.vue' 9 | app.component('SvgIcon', svgIcon) 10 | // #endif 11 | 12 | //globalMixin 13 | // import globalMixin from '@/mixin/globalMixin.js' 14 | // app.mixin(globalMixin) 15 | 16 | //momentMini 17 | // import momentMini from 'moment-mini' 18 | // app.config.globalProperties.$momentMini = momentMini 19 | 20 | //uView support vue3 Not yet 21 | // import uView from 'uview-ui' 22 | // app.use(uView) 23 | 24 | //import vuex5 25 | import { createPinia } from 'pinia' 26 | app.use(createPinia()) 27 | 28 | app.mount('#app') 29 | -------------------------------------------------------------------------------- /typings/router.d.ts: -------------------------------------------------------------------------------- 1 | //the ts of router 2 | import { RouteRecordRaw } from 'vue-router' 3 | /*此处扩展的类型*/ 4 | export interface RouteItemTy { 5 | hidden?: boolean 6 | alwaysShow?: boolean 7 | code?: number 8 | name?: string 9 | fullPath?: string 10 | path?: string 11 | meta?: { 12 | title: string 13 | icon?: string 14 | affix?: boolean 15 | activeMenu?: string 16 | breadcrumb?: boolean 17 | roles?: Array 18 | elSvgIcon?: string 19 | code?: number 20 | cachePage?: boolean 21 | leaveRmCachePage?: boolean 22 | } 23 | children?: RouterTy 24 | redirect?: string 25 | } 26 | 27 | export type RouterRowTy = RouteRecordRaw & RouteItemTy 28 | export type RouterTy = Array 29 | -------------------------------------------------------------------------------- /src/settings.ts: -------------------------------------------------------------------------------- 1 | const setting = { 2 | /** 3 | * @type {boolean} true | false 4 | * @description Whether open prod mock 5 | */ 6 | openProdMock: true, 7 | /** 8 | * @type {string | array} 'dev' | ['prod','test','dev'] according to the .env file props of VITE_APP_ENV 9 | * @description Need show err logs component. 10 | * The default is only used in the production env 11 | * If you want to also use it in dev, you can pass ['dev', 'test'] 12 | */ 13 | errorLog: ['prod'], 14 | /* 15 | * setting dev token when isNeedLogin is setting false 16 | * */ 17 | tmpToken: 'tmp_token', 18 | /* 19 | * vite.config.js base config 20 | * such as 21 | * */ 22 | viteBasePath: '/vue3-mobile-uniapp/' 23 | } 24 | 25 | export default setting 26 | -------------------------------------------------------------------------------- /typings/store.d.ts: -------------------------------------------------------------------------------- 1 | // the ts file of vuex 2 | import { RouterTy } from '@/types/router' 3 | import { ObjTy } from '@/types/common' 4 | export interface StateTy { 5 | app: AppTy 6 | permission: PermissionTy 7 | user: UserTy 8 | } 9 | export interface UserTy { 10 | username: string 11 | avatar: string 12 | roles: Array 13 | } 14 | export interface AppTy { 15 | sidebar: { 16 | opened: boolean 17 | //opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true, 18 | // withoutAnimation: false 19 | } 20 | device: string 21 | settings: ObjTy 22 | cachedViews: Array 23 | } 24 | export interface PermissionTy { 25 | isGetUserInfo: boolean //是否已经设置了权限 26 | routes: RouterTy //将过滤后的异步路由和静态路由集合 27 | addRoutes: RouterTy //过滤后的异步路由 28 | } 29 | -------------------------------------------------------------------------------- /src/icons/nav-bar/nested.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /typings/common.d.ts: -------------------------------------------------------------------------------- 1 | //common type file, you can not export the type in common.d.ts 2 | //not export can use 3 | interface ObjTy { 4 | [propName: string]: any 5 | } 6 | 7 | /*axiosReq请求配置*/ 8 | import { AxiosRequestConfig } from 'axios' 9 | interface AxiosReqTy extends AxiosRequestConfig { 10 | url?: string 11 | method?: string 12 | data?: ObjTy 13 | isParams?: boolean 14 | bfLoading?: boolean 15 | afHLoading?: boolean 16 | isUploadFile?: boolean 17 | isDownLoadFile?: boolean 18 | isAlertErrorMsg?: boolean 19 | baseURL?: string 20 | timeout?: number 21 | } 22 | interface AxiosConfigTy { 23 | url?: string 24 | method?: string 25 | data?: ObjTy 26 | isParams?: boolean 27 | bfLoading?: boolean 28 | afHLoading?: boolean 29 | isUploadFile?: boolean 30 | isDownLoadFile?: boolean 31 | isAlertErrorMsg?: boolean 32 | baseURL?: string 33 | timeout?: number 34 | } 35 | -------------------------------------------------------------------------------- /src/icons/nav-bar/eye.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/common/transition.scss: -------------------------------------------------------------------------------- 1 | // vue global transition css define 2 | /* fade */ 3 | //.fade-enter-active, 4 | //.fade-leave-active { 5 | // transition: opacity 0.25s; 6 | //} 7 | // 8 | //.fade-enter-from, 9 | //.fade-leave-active { 10 | // opacity: 0; 11 | //} 12 | // 13 | ///* fade-transform AppMain*/ 14 | //.fade-transform-leave-active, 15 | //.fade-transform-enter-active { 16 | // transition: all 0.38s; 17 | //} 18 | // 19 | //.fade-transform-enter-from { 20 | // opacity: 0; 21 | // transform: translateX(-30px); 22 | //} 23 | // 24 | //.fade-transform-leave-to { 25 | // opacity: 0; 26 | // transform: translateX(30px); 27 | //} 28 | //.fade-transform-active { 29 | // position: absolute; 30 | //} 31 | // 32 | ///* breadcrumb transition */ 33 | //.breadcrumb-enter-active, 34 | //.breadcrumb-leave-active { 35 | // transition: all 0.25s; 36 | //} 37 | // 38 | //.breadcrumb-enter-from, 39 | //.breadcrumb-leave-active { 40 | // opacity: 0; 41 | // transform: translateX(20px); 42 | //} 43 | // 44 | //.breadcrumb-leave-active { 45 | // position: absolute; 46 | //} 47 | -------------------------------------------------------------------------------- /src/pages/tableTwo/TableTwo.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /src/pages/navigateTwo/navigateTwo.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/store/app.ts: -------------------------------------------------------------------------------- 1 | import defaultSettings from '@/settings' 2 | import { defineStore } from 'pinia' 3 | export const useAppStore = defineStore('app', { 4 | state: () => { 5 | return { 6 | settings: defaultSettings, 7 | cachedViews: [] as Array, 8 | test: false 9 | } 10 | }, 11 | actions: { 12 | M_vuex_test(data) { 13 | this.$patch((state) => { 14 | state.test = data 15 | }) 16 | }, 17 | /*keepAlive relative*/ 18 | M_ADD_CACHED_VIEW(view) { 19 | this.$patch((state) => { 20 | if (state.cachedViews.includes(view)) return 21 | state.cachedViews.push(view) 22 | }) 23 | }, 24 | M_DEL_CACHED_VIEW(view) { 25 | this.$patch((state) => { 26 | const index = state.cachedViews.indexOf(view) 27 | index > -1 && state.cachedViews.splice(index, 1) 28 | }) 29 | }, 30 | M_RESET_CACHED_VIEW() { 31 | this.$patch((state) => { 32 | state.cachedViews = [] 33 | }) 34 | }, 35 | A_vuex_test(data) { 36 | this.$patch(() => { 37 | this.M_vuex_test(data) 38 | }) 39 | } 40 | } 41 | }) 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021-present kuanghua 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/icons/SvgIcon.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 37 | 38 | 55 | -------------------------------------------------------------------------------- /src/icons/nav-bar/eye-open.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/vuex-use/VuexUse.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /.eslintrc-auto-import.json: -------------------------------------------------------------------------------- 1 | { 2 | "globals": { 3 | "computed": true, 4 | "createApp": true, 5 | "customRef": true, 6 | "defineAsyncComponent": true, 7 | "defineComponent": true, 8 | "effectScope": true, 9 | "EffectScope": true, 10 | "getCurrentInstance": true, 11 | "getCurrentScope": true, 12 | "h": true, 13 | "inject": true, 14 | "isReadonly": true, 15 | "isRef": true, 16 | "markRaw": true, 17 | "nextTick": true, 18 | "onActivated": true, 19 | "onBeforeMount": true, 20 | "onBeforeUnmount": true, 21 | "onBeforeUpdate": true, 22 | "onDeactivated": true, 23 | "onErrorCaptured": true, 24 | "onMounted": true, 25 | "onRenderTracked": true, 26 | "onRenderTriggered": true, 27 | "onScopeDispose": true, 28 | "onServerPrefetch": true, 29 | "onUnmounted": true, 30 | "onUpdated": true, 31 | "provide": true, 32 | "reactive": true, 33 | "readonly": true, 34 | "ref": true, 35 | "resolveComponent": true, 36 | "shallowReactive": true, 37 | "shallowReadonly": true, 38 | "shallowRef": true, 39 | "toRaw": true, 40 | "toRef": true, 41 | "toRefs": true, 42 | "triggerRef": true, 43 | "uniRequest": true, 44 | "unref": true, 45 | "useAttrs": true, 46 | "useCommon": true, 47 | "useCssModule": true, 48 | "useCssVars": true, 49 | "useRoute": true, 50 | "useRouter": true, 51 | "useSlots": true, 52 | "watch": true, 53 | "watchEffect": true 54 | } 55 | } -------------------------------------------------------------------------------- /src/icons/common/bug.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages.json.bak: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | { 4 | "path": "pages/TableOne/TableOne", 5 | "style": { 6 | "navigationBarTitleText": "TableOne", 7 | "navigationStyle": "custom" 8 | } 9 | }, 10 | { 11 | "path": "pages/index/index", 12 | "style": { 13 | "navigationBarTitleText": "uni-app" 14 | } 15 | }, 16 | { 17 | "path": "pages/TableTwo/TableTwo", 18 | "style": { 19 | "navigationBarTitleText": "TableTwo", 20 | "navigationStyle": "default", 21 | "disableScroll": true 22 | } 23 | } 24 | ], 25 | "globalStyle": { 26 | "navigationBarTextStyle": "black", 27 | "navigationBarTitleText": "uni-app", 28 | "navigationBarBackgroundColor": "#F8F8F8", 29 | "backgroundColor": "#F8F8F8" 30 | }, 31 | "tabBar": { 32 | "color": "#B5B5B5", 33 | "selectedColor": "#FD6801", 34 | "borderStyle": "black", 35 | "backgroundColor": "#FFFFFF", 36 | "list": [ 37 | { 38 | "pagePath": "pages/TableOne/TableOne", 39 | "text": "TableOne", 40 | "iconPath": "static/tabbar/index.png", 41 | "selectedIconPath": "static/tabbar/indexSelected.png" 42 | }, 43 | { 44 | "pagePath": "pages/TableTwo/TableTwo", 45 | "text": "TableTwo", 46 | "iconPath": "static/tabbar/index.png", 47 | "selectedIconPath": "static/tabbar/indexSelected.png" 48 | } 49 | ] 50 | }, 51 | "easycom": { 52 | "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue", 53 | "custom": { 54 | "RangeDatePick": "@/components/pyh-rdtpicker/pyh-rdtpicker.vue" 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/icons/nav-bar/tree.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | // 启用所有严格类型检查选项。 6 | //启用 --strict相当于启用 --noImplicitAny, --noImplicitThis, --alwaysStrict, --strictNullChecks和 --strictFunctionTypes和--strictPropertyInitialization。 7 | "strict": true, 8 | // 允许编译器编译JS,JSX文件 9 | "allowJs": true, 10 | // 允许在JS文件中报错,通常与allowJS一起使用 11 | "checkJs": false, 12 | // 允许使用jsx 13 | "jsx": "preserve", 14 | "declaration": true, 15 | //移除注解 16 | "removeComments": true, 17 | //不可以忽略any 18 | "noImplicitAny": false, 19 | //关闭 this 类型注解提示 20 | "noImplicitThis": true, 21 | //null/undefined不能作为其他类型的子类型: 22 | //let a: number = null; //这里会报错. 23 | "strictNullChecks": true, 24 | //生成枚举的映射代码 25 | "preserveConstEnums": true, 26 | //根目录 27 | //输出目录 28 | "outDir": "./ts-out-dir", 29 | //是否输出src2.js.map文件 30 | "sourceMap": false, 31 | //变量定义了但是未使用 32 | "noUnusedLocals": false, 33 | //是否允许把json文件当做模块进行解析 34 | "resolveJsonModule": true, 35 | //和noUnusedLocals一样,针对func 36 | "noUnusedParameters": false, 37 | // 模块解析策略,ts默认用node的解析策略,即相对的方式导入 38 | "moduleResolution": "node", 39 | //允许export=导出,由import from 导入 40 | "esModuleInterop": true, 41 | //忽略所有的声明文件( *.d.ts)的类型检查。 42 | "skipLibCheck": true, 43 | "baseUrl": ".", 44 | "paths": { 45 | "@/*": ["src/*"], 46 | "~/*": ["typings/*"] 47 | }, 48 | //指定默认读取的目录 49 | //"typeRoots": ["./node_modules/@types/", "./types"], 50 | "lib": ["ES2018", "DOM"] 51 | }, 52 | //"files": [], 53 | //include包含文件夹会被ts进行读取 54 | "include": ["src", "typings", "auto-imports.d.ts"] 55 | //exclude 可以去除include中指定的文件,不能去除file指定的文件 56 | // "exclude": [ 57 | //// "src/src1.ts" 58 | // ] 59 | } 60 | -------------------------------------------------------------------------------- /src/pages.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | { 4 | "path": "pages/TableOne/TableOne", 5 | "style": { 6 | "navigationBarTitleText": "TableOne", 7 | "navigationStyle": "default" 8 | } 9 | }, 10 | 11 | { 12 | "path": "pages/TableTwo/TableTwo", 13 | "style": { 14 | "navigationBarTitleText": "TableTwo", 15 | "navigationStyle": "default", 16 | "disableScroll": true 17 | } 18 | }, 19 | { 20 | "path": "pages/navigateOne/navigateOne", 21 | "style": { 22 | "navigationBarTitleText": "navigateOne", 23 | "navigationStyle": "default", 24 | "disableScroll": true 25 | } 26 | }, 27 | { 28 | "path": "pages/navigateTwo/navigateTwo", 29 | "style": { 30 | "navigationBarTitleText": "navigateTwo", 31 | "navigationStyle": "default", 32 | "disableScroll": true 33 | } 34 | } 35 | ], 36 | "globalStyle": { 37 | "navigationBarTextStyle": "black", 38 | "navigationBarTitleText": "uni-app", 39 | "navigationBarBackgroundColor": "#F8F8F8", 40 | "backgroundColor": "#F8F8F8" 41 | }, 42 | "tabBar": { 43 | "color": "#B5B5B5", 44 | "selectedColor": "#FD6801", 45 | "borderStyle": "black", 46 | "backgroundColor": "#FFFFFF", 47 | "list": [ 48 | { 49 | "pagePath": "pages/TableOne/TableOne", 50 | "text": "TableOne", 51 | "iconPath": "static/tabbar/index.png", 52 | "selectedIconPath": "static/tabbar/indexSelected.png" 53 | }, 54 | { 55 | "pagePath": "pages/TableTwo/TableTwo", 56 | "text": "TableTwo", 57 | "iconPath": "static/tabbar/index.png", 58 | "selectedIconPath": "static/tabbar/indexSelected.png" 59 | } 60 | ] 61 | }, 62 | "easycom": { 63 | "custom": { 64 | "RangeDatePick": "@/components/pyh-rdtpicker/pyh-rdtpicker.vue" 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/uni.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 这里是uni-app内置的常用样式变量 3 | * 4 | * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 5 | * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App 6 | * 7 | */ 8 | 9 | /** 10 | * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 11 | * 12 | * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 13 | */ 14 | 15 | /* 颜色变量 */ 16 | 17 | /* 行为相关颜色 */ 18 | $uni-color-primary: #007aff; 19 | $uni-color-success: #4cd964; 20 | $uni-color-warning: #f0ad4e; 21 | $uni-color-error: #dd524d; 22 | 23 | /* 文字基本颜色 */ 24 | $uni-text-color:#333;//基本色 25 | $uni-text-color-inverse:#fff;//反色 26 | $uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息 27 | $uni-text-color-placeholder: #808080; 28 | $uni-text-color-disable:#c0c0c0; 29 | 30 | /* 背景颜色 */ 31 | $uni-bg-color:#ffffff; 32 | $uni-bg-color-grey:#f8f8f8; 33 | $uni-bg-color-hover:#f1f1f1;//点击状态颜色 34 | $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色 35 | 36 | /* 边框颜色 */ 37 | $uni-border-color:#c8c7cc; 38 | 39 | /* 尺寸变量 */ 40 | 41 | /* 文字尺寸 */ 42 | $uni-font-size-sm:24rpx; 43 | $uni-font-size-base:28rpx; 44 | $uni-font-size-lg:32rpx; 45 | 46 | /* 图片尺寸 */ 47 | $uni-img-size-sm:40rpx; 48 | $uni-img-size-base:52rpx; 49 | $uni-img-size-lg:80rpx; 50 | 51 | /* Border Radius */ 52 | $uni-border-radius-sm: 4rpx; 53 | $uni-border-radius-base: 6rpx; 54 | $uni-border-radius-lg: 12rpx; 55 | $uni-border-radius-circle: 50%; 56 | 57 | /* 水平间距 */ 58 | $uni-spacing-row-sm: 10px; 59 | $uni-spacing-row-base: 20rpx; 60 | $uni-spacing-row-lg: 30rpx; 61 | 62 | /* 垂直间距 */ 63 | $uni-spacing-col-sm: 8rpx; 64 | $uni-spacing-col-base: 16rpx; 65 | $uni-spacing-col-lg: 24rpx; 66 | 67 | /* 透明度 */ 68 | $uni-opacity-disabled: 0.3; // 组件禁用态的透明度 69 | 70 | /* 文章场景相关 */ 71 | $uni-color-title: #2C405A; // 文章标题颜色 72 | $uni-font-size-title:40rpx; 73 | $uni-color-subtitle: #555555; // 二级标题颜色 74 | $uni-font-size-subtitle:36rpx; 75 | $uni-color-paragraph: #3F536E; // 文章段落颜色 76 | $uni-font-size-paragraph:30rpx; -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://blog.csdn.net/Sheng_zhenzhen/article/details/108685176 2 | module.exports = { 3 | root: true, 4 | env: { 5 | browser: true, 6 | commonjs: true, 7 | es6: true, 8 | node: true 9 | }, 10 | 11 | globals: { 12 | defineEmits: true, 13 | document: true, 14 | localStorage: true, 15 | GLOBAL_VAR: true, 16 | window: true, 17 | defineProps: true, 18 | defineExpose: true, 19 | uni: true 20 | }, 21 | plugins: ['@typescript-eslint', 'prettier', 'import'], 22 | extends: [ 23 | 'eslint:recommended', 24 | 'plugin:@typescript-eslint/recommended', 25 | 'plugin:vue/vue3-recommended', 26 | 'prettier', 27 | './.eslintrc-auto-import.json' 28 | ], 29 | parserOptions: { 30 | parser: '@typescript-eslint/parser', 31 | sourceType: 'module', 32 | ecmaFeatures: { 33 | jsx: true, 34 | tsx: true 35 | } 36 | }, 37 | rules: { 38 | //close lf error 39 | 'import/no-unresolved': [0], 40 | 'vue/multi-word-component-names': 'off', 41 | 'vue/no-deprecated-router-link-tag-prop': 'off', 42 | 'import/extensions': 'off', 43 | 'import/no-absolute-path': 'off', 44 | 'no-async-promise-executor': 'off', 45 | 'import/no-extraneous-dependencies': 'off', 46 | 'vue/no-multiple-template-root': 'off', 47 | 'vue/html-self-closing': 'off', 48 | 'no-console': 'off', 49 | 'no-plusplus': 'off', 50 | 'no-useless-escape': 'off', 51 | 'no-bitwise': 'off', 52 | '@typescript-eslint/no-explicit-any': ['off'], 53 | '@typescript-eslint/explicit-module-boundary-types': ['off'], 54 | '@typescript-eslint/ban-ts-comment': ['off'], 55 | 'vue/no-setup-props-destructure': ['off'], 56 | '@typescript-eslint/no-empty-function': ['off'], 57 | 'vue/script-setup-uses-vars': ['off'], 58 | //can config to 2 if need more then required 59 | '@typescript-eslint/no-unused-vars': [0], 60 | 'no-param-reassign': ['off'] 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/utils/uniRequest.ts: -------------------------------------------------------------------------------- 1 | import uni_request from './uni_request.js' 2 | import Qs from 'qs' 3 | let reqConfig: any = null 4 | import config from '@/config' 5 | import { AxiosConfigTy } from '~/common' 6 | const request = uni_request({ 7 | // 有效配置项只有三个 8 | baseURL: config.VITE_APP_BASE_URL, //baseURL 9 | timeout: 8000, // 超时时间 10 | header: { 'x-custom-header': 'x-custom-header' }, // 设置请求头,建议放在请求拦截器中 11 | statusCode: [0, 200, 401, 20000] // 服务器相应状态码为 200/401 时,网络请求不会 reject 12 | }) 13 | 14 | //request interceptors 15 | // @ts-ignore 16 | request.interceptors.request.use(async (config: AxiosConfigTy, ...args) => { 17 | console.log('req', args) 18 | //save req for res to using 19 | reqConfig = config 20 | return config 21 | }) 22 | 23 | //res interceptors 24 | // @ts-ignore 25 | request.interceptors.response.use(async (res: any, ...args) => { 26 | //关闭微信loading 27 | uni.hideLoading() 28 | const { flag, msg, code, isNeedUpdateToken, updateToken } = res.data 29 | const successCode = '0,200,20000' 30 | if (successCode.indexOf(code) !== -1) { 31 | return res.data 32 | } else { 33 | if (reqConfig.isAlertErrorMsg) { 34 | if (res.data && res.data.message) { 35 | uni.showToast({ 36 | title: `${res.data && res.data.message}`, 37 | icon: 'none', 38 | duration: 3000 39 | }) 40 | } 41 | } 42 | } 43 | }) 44 | //全局错误监听 45 | // @ts-ignore 46 | request.onerror = async (...args) => { 47 | // 请求失败统一处理方法(可以也可以使用异步方法) 48 | //关闭loading 49 | uni.showToast({ 50 | title: `服务器或网络异常`, 51 | icon: 'none', 52 | duration: 3000 53 | }) 54 | uni.hideLoading() 55 | } 56 | 57 | export const uniRequest = function uniRequest({ 58 | url, 59 | data, 60 | method, 61 | isParams, 62 | bfLoading, 63 | afHLoading, 64 | isAlertErrorMsg 65 | }: AxiosConfigTy) { 66 | //参数发动的形式 67 | if (isParams) url = `${url}?` + Qs.stringify(data) 68 | //是否Loading 69 | if (bfLoading) uni.showLoading({ title: '数据加载中..', mask: true }) 70 | afHLoading = afHLoading || true 71 | return request[method as string](url, data) 72 | } 73 | 74 | export default uniRequest 75 | -------------------------------------------------------------------------------- /src/components/pyh-rdtpicker/readme.md: -------------------------------------------------------------------------------- 1 | ### pyh-rdtPicker 日期区间选择器 2 | 3 | 可进行多粒度的时间选择器,组件名:``pyh-rdtpicker``,代码块: rangeDatePick。 4 | 5 | **使用方式:** 6 | 7 | 在 ``script`` 中引用组件 8 | 9 | ```javascript 10 | import rangeDatePick from '@/components/pyh-rdtpicker/pyh-rdtpicker.vue'; 11 | export default { 12 | components: {rangeDatePick} 13 | } 14 | ``` 15 | 16 | 在 ``template`` 中使用组件 17 | 18 | ```html 19 | 30 | ``` 31 | 32 | **pdtPicker 属性说明:** 33 | 34 | |属性名 |类型 |默认值 |说明 | 35 | |--- |---- |--- |--- | 36 | |themeColor |String |'#4C83D6' |主题色 | 37 | |start |String |'1900-01-01' |限制选择器选择的最小时间 (只支持年限制),粒度格式和value格式要相符,否则会有错误提示| 38 | |end |String |'2200-12-01' |限制选择器选择的最大时间(只支持年限制),粒度格式和value格式要相符,否则会有错误提示| 39 | |value |Array |'' |当前日期选择器显示的时间 ,粒度格式和value格式要相符,否则会又错误提示| 40 | |fields |String |'day' |当前日期选择器粒度:year/month/day| 41 | 42 | 43 | **value 值说明:** 44 | 45 | |值 |类型 |说明 | 46 | |--- |---- |--- | 47 | |[] |Array |当前日期选择器为开始时间的默认值 | 48 | |['1900-01-01'] |Array |当前日期选择器开始时间为1900-01-01 | 49 | |['1900-01-01','2010-12-01'] |Array |当前日期选择器开始时间为1900-01-01,结束时间为2010-12-01| 50 | 51 | **事件说明:** 52 | 53 | |事件名称 |说明 | 54 | |---|---| 55 | |showchange |必传,用于控制显示隐藏| 56 | |change |时间选择器点击【确定】按钮时时触发的事件,参数为选择器的当前的 value| 57 | |cancel |时间选择器点击【取消】按钮时时触发的事件| 58 | 59 | **showchange事件说明:** 60 | 61 | showchange(){ 62 | this.isShow=!this.isShow; 63 | } 64 | 65 | **更新记录:** 66 | 67 | 1.0.5:修复月份切换时,day存在显示undefined的问题;修复小程序value设置后滚动位置不对的问题
68 | 69 | 1.0.4:修复滚动穿透;修改默认fields为day,添加了同年限制月份(start和end同年,有月份限制),改正作者名与组件名字
70 | 71 | 1.0.3:修复动态的value不能赋值问题;修复end值的可选值与实际填入的end值小一年问题
72 | 73 | 1.0.2:优化了开始日期和结束日期的切换,当前版本切换时会显示更合适的日期;添加了粒度选择,现支持year/month/day;修复了demo的getDate -60年的获取问题
74 | 75 | 1.0.1:新增组件——日期区间选择器 76 | 77 | **感谢:** 78 | 79 | > 有更多优化建议和需求,请联系作者panyh。谢谢! -------------------------------------------------------------------------------- /src/pages/index/index.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 53 | 54 | 81 | -------------------------------------------------------------------------------- /src/icons/nav-bar/dashboard.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/nav-bar/form.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello", 3 | "appid": "__UNI__4DCD124", 4 | "description": "", 5 | "versionName": "1.0.0", 6 | "versionCode": "100", 7 | "transformPx": false, 8 | /* 5+App特有相关 */ 9 | "app-plus": { 10 | "usingComponents": true, 11 | "nvueStyleCompiler": "uni-app", 12 | "compilerVersion": 3, 13 | "splashscreen": { 14 | "alwaysShowBeforeRender": true, 15 | "waiting": true, 16 | "autoclose": true, 17 | "delay": 0 18 | }, 19 | /* 模块配置 */ 20 | "modules": {}, 21 | /* 应用发布信息 */ 22 | "distribute": { 23 | /* android打包配置 */ 24 | "android": { 25 | "permissions": [ 26 | "", 27 | "", 28 | "", 29 | "", 30 | "", 31 | "", 32 | "", 33 | "", 34 | "", 35 | "", 36 | "", 37 | "", 38 | "", 39 | "", 40 | "" 41 | ] 42 | }, 43 | /* ios打包配置 */ 44 | "ios": {}, 45 | /* SDK配置 */ 46 | "sdkConfigs": {} 47 | } 48 | }, 49 | /* 快应用特有相关 */ 50 | "quickapp": {}, 51 | /* 小程序特有相关 */ 52 | "mp-weixin": { 53 | "appid": "wx6c74f4d53cee1a0e", 54 | "setting": { 55 | "urlCheck": false, 56 | "checkSiteMap": false 57 | }, 58 | "usingComponents": true 59 | }, 60 | "mp-alipay": { 61 | "usingComponents": true 62 | }, 63 | "mp-baidu": { 64 | "usingComponents": true 65 | }, 66 | "mp-toutiao": { 67 | "usingComponents": true 68 | }, 69 | "uniStatistics": { 70 | "enable": false 71 | }, 72 | "vueVersion": "3" 73 | } 74 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue3-mobile-uniapp 2 | 3 | 4 | > vue3-mobile-uniapp提供企业级的开发demo 5 | 6 | 本架构使用的技术为:vue3(setup-script)+vite2+uniapp 的新一代的移动端框架,It's easy and fast! 7 | 8 | 使用 eslint+prettier+gitHooks 格式和校验代码,提高代码规范性和开发效率 9 | 10 | 使用最先进的包管理工具pnpm 11 | 12 | 13 | ## 提示 14 | 现在uniapp cli 方式已经可以用vue3+vite2构建了, 15 | 16 | 我这边测试了三端:h5, 小程序, 和app 17 | 18 | 基础构建没有问题, 19 | 20 | 目前已测试的功能:vuex,发送req,跳转,接收跳转的参数,svg-icon(h5中可以用) 21 | 22 | 然后就是: 23 | uview-ui": "2.0.20", 目前还不支持vue3 24 | 25 | 26 | ## 更新日志 27 | 28 | ---请查看架构文档 29 | 30 | - [真香定律!带你用vue3+vite2撸后台(系列文章入口)](https://juejin.cn/post/7036302298435289095) 31 | 32 | 33 | ## 文档 34 | 35 | - [真香定律!带你用vue3+vite2撸后台(系列文章入口)](https://juejin.cn/post/7036302298435289095) 36 | 37 | ## 线上体验 38 | 39 | [github address](https://github.com/jzfai/vue3-mobile-uniapp.git) 40 | 41 | [Access address](http://8.135.1.141/vue3-mobile-uniapp) 42 | 43 | github 地址: https://github.com/jzfai/vue3-mobile-uniapp.git 44 | 45 | 国内体验地址:http://8.135.1.141/vue3-mobile-uniapp 46 | 47 | 48 | ## 例子 49 | 50 | ![uniapp-demo](http://8.135.1.141/file/images/uniapp-demo.png) 51 | 52 | ## 相关项目 53 | 54 | 相关架构有ts和js版本 55 | 56 | - js版本:[vue3-mobile-uniapp](https://github.com/jzfai/vue3-mobile-uniapp.git) 57 | - ts版本:[vue3-mobile-uniapp](https://github.com/jzfai/vue3-mobile-uniapp.git) 58 | - pc plus版本:[vue3-element-plus](https://github.com/jzfai/vue3-mobile-uniapp.git) 59 | - pc react版本: [react-admin-template](https://github.com/jzfai/react-admin-template.git) 60 | - java微服务后台数据:[micro-service-plus](https://github.com/jzfai/micro-service-plus) 61 | 62 | > 开发和使用感受:两个字 真香!!!!! 63 | 64 | vue3和vue2在性能上的对比 65 | 66 | - 打包大小减少41% 67 | 68 | - 初次渲染快55%, 更新渲染快133% 69 | 70 | - 内存减少54% 71 | 72 | - **使用Proxy代替defineProperty实现数据响应式** 73 | 74 | - **重写虚拟DOM的实现和Tree-Shaking** 75 | 76 | 77 | ## 构建步骤 78 | 79 | ```bash 80 | # 克隆项目 81 | git clone https://github.com/jzfai/vue3-mobile-uniapp.git 82 | 83 | # 进入项目目录 84 | cd vue3-mobile-uniapp 85 | 86 | # pnpm address https://pnpm.io/zh/motivation 87 | # 安装依赖(建议用pnpm) 88 | # 你可以使用 "npm -g i pnpm" 去安装pnpm 89 | pnpm i 90 | 91 | # 启动h5 92 | pnpm run dev:h5 93 | 94 | # 启动 微信 95 | pnpm run dev:mp-weixin 96 | ``` 97 | 98 | 99 | ## 其它 100 | 101 | ```bash 102 | # 代码格式检查并自动修复 103 | pnpm run lint 104 | ``` 105 | 106 | 107 | ## 额外 108 | 109 | 架构开发不易,如果感觉好,请给我点个 start ,架构还在不断完善中,欢迎加入我开发,一起成为Contributors !!!! 110 | 111 | ## 浏览器支持 112 | 113 | 注意:vue3不在支持IE浏览器 114 | 115 | ## 讨论和交流(含vue3+ts视频教程) 116 | [WeChat group](http://8.135.1.141/file/images/wx-groud.png) 117 | 118 | ## 版本 119 | 120 | [MIT](https://github.com/jzfai/vue3-mobile-uniapp/blob/master/LICENSE) license. 121 | 122 | Copyright (c) 2021-present kuanghua 123 | 124 | 125 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | // @ts-ignore 2 | import path, { resolve } from 'path' 3 | import uni from '@dcloudio/vite-plugin-uni' 4 | import viteSvgIcons from 'vite-plugin-svg-icons' 5 | import vueJsx from '@vitejs/plugin-vue-jsx' 6 | import setting from './src/settings' 7 | 8 | //auto import vue https://www.npmjs.com/package/unplugin-auto-import 9 | import AutoImport from 'unplugin-auto-import/vite' 10 | export default ({ command, mode }) => { 11 | console.log('command', command) 12 | return { 13 | base: setting.viteBasePath, 14 | plugins: [ 15 | uni(), 16 | vueJsx(), 17 | // #ifdef H5 18 | viteSvgIcons({ 19 | // config svg dir that can config multi 20 | iconDirs: [path.resolve(process.cwd(), 'src/icons/common'), path.resolve(process.cwd(), 'src/icons/nav-bar')], 21 | // appoint svg icon using mode 22 | symbolId: 'icon-[dir]-[name]' 23 | }), 24 | // #endif 25 | //https://github.com/antfu/unplugin-auto-import/blob/HEAD/src/types.ts 26 | AutoImport({ 27 | // resolvers: [ElementPlusResolver()], 28 | imports: [ 29 | 'vue', 30 | 'vue-router', 31 | { 32 | '@/hooks/global/useCommon': ['useCommon'], 33 | '@/utils/uniRequest': ['uniRequest'] 34 | } 35 | ], 36 | eslintrc: { 37 | enabled: true, // Default `false` 38 | filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json` 39 | globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable') 40 | }, 41 | dts: true //auto generation auto-imports.d.ts file 42 | }) 43 | ], 44 | build: { 45 | 46 | brotliSize: false, 47 | // 消除打包大小超过500kb警告 48 | chunkSizeWarningLimit: 2000, 49 | //remote console.log in prod 50 | terserOptions: { 51 | //detail to look https://terser.org/docs/api-reference#compress-options 52 | compress: { 53 | drop_console: false, 54 | pure_funcs: ['console.log', 'console.info'], 55 | drop_debugger: true 56 | } 57 | }, 58 | //build assets Separate 59 | assetsDir: 'static/assets', 60 | rollupOptions: { 61 | output: { 62 | chunkFileNames: 'static/js/[name]-[hash].js', 63 | entryFileNames: 'static/js/[name]-[hash].js', 64 | assetFileNames: 'static/[ext]/[name]-[hash].[ext]' 65 | } 66 | } 67 | }, 68 | resolve: { 69 | alias: { 70 | '@': resolve(__dirname, 'src') 71 | } 72 | }, 73 | css: { 74 | preprocessorOptions: { 75 | //define global scss variable 76 | scss: { 77 | additionalData: `@import "@/common/variables.scss";` 78 | } 79 | } 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/pages/tableOne/TableOne.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 85 | 86 | 113 | -------------------------------------------------------------------------------- /auto-imports.d.ts: -------------------------------------------------------------------------------- 1 | // Generated by 'unplugin-auto-import' 2 | // We suggest you to commit this file into source control 3 | declare global { 4 | const computed: typeof import('vue')['computed'] 5 | const createApp: typeof import('vue')['createApp'] 6 | const customRef: typeof import('vue')['customRef'] 7 | const defineAsyncComponent: typeof import('vue')['defineAsyncComponent'] 8 | const defineComponent: typeof import('vue')['defineComponent'] 9 | const effectScope: typeof import('vue')['effectScope'] 10 | const EffectScope: typeof import('vue')['EffectScope'] 11 | const getCurrentInstance: typeof import('vue')['getCurrentInstance'] 12 | const getCurrentScope: typeof import('vue')['getCurrentScope'] 13 | const h: typeof import('vue')['h'] 14 | const inject: typeof import('vue')['inject'] 15 | const isReadonly: typeof import('vue')['isReadonly'] 16 | const isRef: typeof import('vue')['isRef'] 17 | const markRaw: typeof import('vue')['markRaw'] 18 | const nextTick: typeof import('vue')['nextTick'] 19 | const onActivated: typeof import('vue')['onActivated'] 20 | const onBeforeMount: typeof import('vue')['onBeforeMount'] 21 | const onBeforeUnmount: typeof import('vue')['onBeforeUnmount'] 22 | const onBeforeUpdate: typeof import('vue')['onBeforeUpdate'] 23 | const onDeactivated: typeof import('vue')['onDeactivated'] 24 | const onErrorCaptured: typeof import('vue')['onErrorCaptured'] 25 | const onMounted: typeof import('vue')['onMounted'] 26 | const onRenderTracked: typeof import('vue')['onRenderTracked'] 27 | const onRenderTriggered: typeof import('vue')['onRenderTriggered'] 28 | const onScopeDispose: typeof import('vue')['onScopeDispose'] 29 | const onServerPrefetch: typeof import('vue')['onServerPrefetch'] 30 | const onUnmounted: typeof import('vue')['onUnmounted'] 31 | const onUpdated: typeof import('vue')['onUpdated'] 32 | const provide: typeof import('vue')['provide'] 33 | const reactive: typeof import('vue')['reactive'] 34 | const readonly: typeof import('vue')['readonly'] 35 | const ref: typeof import('vue')['ref'] 36 | const resolveComponent: typeof import('vue')['resolveComponent'] 37 | const shallowReactive: typeof import('vue')['shallowReactive'] 38 | const shallowReadonly: typeof import('vue')['shallowReadonly'] 39 | const shallowRef: typeof import('vue')['shallowRef'] 40 | const toRaw: typeof import('vue')['toRaw'] 41 | const toRef: typeof import('vue')['toRef'] 42 | const toRefs: typeof import('vue')['toRefs'] 43 | const triggerRef: typeof import('vue')['triggerRef'] 44 | const uniRequest: typeof import('@/utils/uniRequest')['uniRequest'] 45 | const unref: typeof import('vue')['unref'] 46 | const useAttrs: typeof import('vue')['useAttrs'] 47 | const useCommon: typeof import('@/hooks/global/useCommon')['useCommon'] 48 | const useCssModule: typeof import('vue')['useCssModule'] 49 | const useCssVars: typeof import('vue')['useCssVars'] 50 | const useRoute: typeof import('vue-router')['useRoute'] 51 | const useRouter: typeof import('vue-router')['useRouter'] 52 | const useSlots: typeof import('vue')['useSlots'] 53 | const watch: typeof import('vue')['watch'] 54 | const watchEffect: typeof import('vue')['watchEffect'] 55 | } 56 | export {} 57 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-mobile-uniapp", 3 | "version": "1.0.1", 4 | "scripts": { 5 | "dev:app": "uni -p app", 6 | "dev:custom": "uni -p", 7 | "dev:h5": "uni ", 8 | "dev:h5:ssr": "uni --ssr", 9 | "dev:mp-alipay": "uni -p mp-alipay", 10 | "dev:mp-baidu": "uni -p mp-baidu", 11 | "dev:mp-kuaishou": "uni -p mp-kuaishou", 12 | "dev:mp-lark": "uni -p mp-lark", 13 | "dev:mp-qq": "uni -p mp-qq", 14 | "dev:mp-toutiao": "uni -p mp-toutiao", 15 | "dev:mp-weixin": "uni -p mp-weixin", 16 | "dev:quickapp-webview": "uni -p quickapp-webview", 17 | "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei", 18 | "dev:quickapp-webview-union": "uni -p quickapp-webview-union", 19 | "build:app": "uni build -p app", 20 | "build:custom": "uni build -p", 21 | "build:h5": "uni build", 22 | "build:h5:ssr": "uni build --ssr", 23 | "build:mp-alipay": "uni build -p mp-alipay", 24 | "build:mp-baidu": "uni build -p mp-baidu", 25 | "build:mp-kuaishou": "uni build -p mp-kuaishou", 26 | "build:mp-lark": "uni build -p mp-lark", 27 | "build:mp-qq": "uni build -p mp-qq", 28 | "build:mp-toutiao": "uni build -p mp-toutiao", 29 | "build:mp-weixin": "uni build -p mp-weixin", 30 | "build:quickapp-webview": "uni build -p quickapp-webview", 31 | "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei", 32 | "build:quickapp-webview-union": "uni build -p quickapp-webview-union", 33 | "lint": "eslint --ext .js,.jsx,.vue,.ts,.tsx src --fix", 34 | "prepare": "husky install" 35 | }, 36 | "dependencies": { 37 | "@dcloudio/uni-app": "^3.0.0-alpha-3030820220114001", 38 | "@dcloudio/uni-app-plus": "^3.0.0-alpha-3030820220114001", 39 | "@dcloudio/uni-components": "^3.0.0-alpha-3030820220114001", 40 | "@dcloudio/uni-h5": "^3.0.0-alpha-3030820220114001", 41 | "@dcloudio/uni-mp-weixin": "^3.0.0-alpha-3030820220114001", 42 | "@dcloudio/uni-quickapp-webview": "^3.0.0-alpha-3030820220114001", 43 | "moment-mini": "^2.22.1", 44 | "qs": "6.7.0", 45 | "mitt": "3.0.0", 46 | "uview-ui": "2.0.20", 47 | "vue": "^3.2.27", 48 | "pinia": "2.0.13" 49 | }, 50 | "devDependencies": { 51 | "@dcloudio/types": "^2.5.16", 52 | "@dcloudio/uni-automator": "^3.0.0-alpha-3030820220114001", 53 | "@dcloudio/uni-cli-shared": "^3.0.0-alpha-3030820220114001", 54 | "@dcloudio/vite-plugin-uni": "^3.0.0-alpha-3030820220114001", 55 | "@typescript-eslint/eslint-plugin": "5.5.0", 56 | "@typescript-eslint/parser": "5.5.0", 57 | "@vitejs/plugin-vue-jsx": "1.3.1", 58 | "autoprefixer": "10.4.2", 59 | "eslint": "7.32.0", 60 | "eslint-config-prettier": "8.3.0", 61 | "eslint-define-config": "1.2.0", 62 | "eslint-plugin-import": "2.25.3", 63 | "eslint-plugin-prettier": "4.0.0", 64 | "eslint-plugin-vue": "8.1.1", 65 | "husky": "7.0.2", 66 | "less": "4.1.1", 67 | "mockjs": "1.1.0", 68 | "prettier": "2.2.1", 69 | "sass": "1.32.12", 70 | "typescript": "4.3.2", 71 | "unplugin-auto-import": "0.5.11", 72 | "vite": "2.7.13", 73 | "vite-plugin-mock": "^2.9.6", 74 | "vite-plugin-svg-icons": "1.0.5", 75 | "vite-plugin-vue-setup-extend": "0.4.0" 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/hooks/global/useCommon.ts: -------------------------------------------------------------------------------- 1 | import momentMini from 'moment-mini' 2 | export const useCommonExample = () => { 3 | const state = reactive({ 4 | params: {}, 5 | centerModalShow: false, 6 | buttonModalShow: false, 7 | userInfo: null, 8 | userIsLogin: true, 9 | VITE_APP_BASE_URL: '', 10 | VUE_APP_BASE_IMAGE_URL: '', 11 | packingAddrArr: [], 12 | /* 时间相关 */ 13 | todayTime: '', 14 | currentTime: '', 15 | afterOneTime: '', 16 | currentDay: '', 17 | afterOneDay: '', 18 | todayTimeLast: '', 19 | beforeThreeDateTime: '', 20 | yesterdayTime: '', 21 | /* 分页相关 */ 22 | pageNum: 1, 23 | pageSize: 5, 24 | isHasData: true, 25 | listData: [], 26 | /*canvas相关*/ 27 | canvasBgWidth: null, 28 | canvasBgHeight: null, 29 | canvasUrl: '', 30 | lists: [] 31 | }) 32 | // 读取.env 多坏境里的数据 33 | state.VITE_APP_BASE_URL = import.meta.env.VITE_APP_BASE_URL as string 34 | /* 获取时间点*/ 35 | state.todayTime = momentMini().startOf('day').format('YYYY-MM-DD HH:mm:ss') 36 | state.currentTime = momentMini(new Date()).format('YYYY-MM-DD HH:mm:ss') 37 | state.todayTimeLast = momentMini().endOf('day').format('YYYY-MM-DD HH:mm:ss') as string 38 | state.beforeThreeDateTime = momentMini().add(-3, 'days').format('YYYY-MM-DD HH:mm:ss') 39 | state.yesterdayTime = momentMini().add(-1, 'days').format('YYYY-MM-DD HH:mm:ss') 40 | 41 | const touchMoveStop = () => { 42 | return false 43 | } 44 | const closeCenterModal = () => { 45 | state.centerModalShow = false 46 | } 47 | const closeButtonModal = () => { 48 | state.buttonModalShow = false 49 | } 50 | const toNavigatePage = (path, param) => { 51 | console.log('toNavigatePage', path, param) 52 | //如果需要权限校验可以使用下面的代码 53 | // if (!uni.getStorageSync('USER_INFO')) { 54 | // state.wxShowToastNone("您还没登录,请先登录") 55 | // return; 56 | // } 57 | if (param) { 58 | uni.navigateTo({ 59 | url: `${path}?params=${JSON.stringify(param)}` 60 | }) 61 | } else { 62 | uni.navigateTo({ 63 | url: `${path}` 64 | }) 65 | } 66 | } 67 | const toNavigateBack = () => { 68 | uni.navigateBack({ 69 | delta: 2 70 | }) 71 | } 72 | 73 | const toRedirectToPage = (path, param) => { 74 | console.log('toRedirectToPage', path, param) 75 | // if (!uni.getStorageSync('USER_INFO')) { 76 | // state.wxShowToastNone("您还没登录,请先登录") 77 | // return; 78 | // } 79 | if (param) { 80 | uni.redirectTo({ 81 | url: `${path}?params=${JSON.stringify(param)}` 82 | }) 83 | } else { 84 | uni.redirectTo({ 85 | url: `${path}` 86 | }) 87 | } 88 | } 89 | const toSwitchPage = (path, param) => { 90 | console.log("uni.getStorageSync('USER_INFO')", uni.getStorageSync('USER_INFO')) 91 | if (param) { 92 | uni.switchTab({ 93 | url: `${path}?params=${JSON.stringify(param)}` 94 | }) 95 | } else { 96 | uni.switchTab({ 97 | url: `${path}` 98 | }) 99 | } 100 | } 101 | //隐藏loading 102 | const hideLoading = () => { 103 | uni.hideLoading() 104 | } 105 | //显示loading 106 | const showLoading = (LoadingTitle) => { 107 | console.log('showLoading', LoadingTitle) 108 | uni.showLoading({ title: `${LoadingTitle}`, mask: true }) 109 | } 110 | const wxShowToastSuccess = (title, duration?) => { 111 | sleep(50).then(() => { 112 | uni.showToast({ 113 | title: title, 114 | icon: 'success', 115 | duration: duration || 2000 116 | }) 117 | }) 118 | } 119 | const wxShowToastNone = (title, duration?) => { 120 | sleep(50).then(() => { 121 | uni.showToast({ 122 | title: title, 123 | icon: 'none', 124 | duration: duration || 2000 125 | }) 126 | }) 127 | } 128 | const getWxLoginCode = () => { 129 | return new Promise((resolve) => { 130 | uni.login({ 131 | success: (res) => { 132 | console.log(res) 133 | resolve(res.code) 134 | }, 135 | error: (err) => { 136 | wxShowToastNone('获取code失败') 137 | } 138 | }) 139 | }) 140 | } 141 | const sleep = (time) => { 142 | return new Promise((resolve) => { 143 | const timer = setTimeout(() => { 144 | clearTimeout(timer) 145 | resolve(null) 146 | }, time) 147 | }) 148 | } 149 | 150 | return { 151 | touchMoveStop, 152 | closeCenterModal, 153 | closeButtonModal, 154 | toNavigatePage, 155 | toNavigateBack, 156 | toRedirectToPage, 157 | toSwitchPage, 158 | hideLoading, 159 | showLoading, 160 | wxShowToastSuccess, 161 | wxShowToastNone, 162 | getWxLoginCode, 163 | sleep, 164 | ...toRefs(state) 165 | } 166 | } 167 | 168 | export const useCommon = useCommonExample 169 | 170 | export default useCommonExample 171 | -------------------------------------------------------------------------------- /src/utils/uni_request.js: -------------------------------------------------------------------------------- 1 | export default function ({ baseURL, timeout, header: headers, statusCode = [200, 401] }) { 2 | return { 3 | get(url, data, header) { 4 | return this.request('GET', url, data, { ...header, ...headers }) 5 | }, 6 | post(url, data, header) { 7 | return this.request('POST', url, data, { ...header, ...headers }) 8 | }, 9 | put(url, data, header) { 10 | return this.request('PUT', url, data, { ...header, ...headers }) 11 | }, 12 | delete(url, data, header) { 13 | return this.request('DELETE', url, data, { ...header, ...headers }) 14 | }, 15 | connect(url, data, header) { 16 | return this.request('CONNECT', url, data, { ...header, ...headers }) 17 | }, 18 | head(url, data, header) { 19 | return this.request('HEAD', url, data, { ...header, ...headers }) 20 | }, 21 | options(url, data, header) { 22 | return this.request('OPTIONS', url, data, { ...header, ...headers }) 23 | }, 24 | reace(url, data, header) { 25 | return this.request('TRACE', url, data, { ...header, ...headers }) 26 | }, 27 | uploadFile(url, data, header) { 28 | return this.file('uploadFile', url, data || {}, { ...header, ...headers }) 29 | }, 30 | downloadFile(url, data, header) { 31 | return this.file('downloadFile', url, data || {}, { ...header, ...headers }) 32 | }, 33 | onerror: [], // 请求错误钩子函数集合 34 | file(method, url, data, header) { 35 | let timer, 36 | requestTask, 37 | aborted = false, 38 | abort = () => { 39 | // timer 检测超时定时器,requestTask 网络请求 task 对象,aborted 请求是否已被取消,abort 取消请求方法 40 | aborted = true // 将请求状态标记为已取消 41 | requestTask ? requestTask.abort() : '' // 执行取消请求方法 42 | }, 43 | progressUpdateHandle, 44 | onProgressUpdate = (e) => (progressUpdateHandle = e) // progressUpdateHandle 监听上传进度变化回调,onProgressUpdate 监听上传进度变化方法 45 | return new Proxy( 46 | new Promise((resolve, reject) => { 47 | // 返回经过 Proxy 后的 Promise 对象使其可以监听到是否调用 abort 和 onProgressUpdate 方法 48 | this.interceptors.request 49 | .intercept({ header: header || {}, body: data.formData || {} }, method, url, data) 50 | .then(async ({ header, body }) => { 51 | // 等待请求拦截器里的方法执行完 52 | if (aborted) { 53 | // 如果请求已被取消,停止执行,返回 reject 54 | await this.onerror(method, url, data, '网络请求失败:主动取消') 55 | return reject('网络请求失败:主动取消') 56 | } 57 | requestTask = uni[method]({ 58 | url: url[0] === '/' ? baseURL + url : url, 59 | name: data.name, 60 | header, 61 | filePath: data.filePath, 62 | formData: body, 63 | success: async (res) => { 64 | clearTimeout(timer) 65 | !statusCode.includes(res.statusCode) 66 | ? await this.onerror(method, url, data, `网络请求异常:服务器响应异常:状态码:${res.statusCode}`) 67 | : '', 68 | this.interceptors.response.intercept( 69 | statusCode.includes(res.statusCode) ? resolve : reject, 70 | { success: statusCode.includes(res.statusCode), ...res }, 71 | method, 72 | url, 73 | data, 74 | reject 75 | ) // 执行响应拦截器 76 | }, 77 | fail: async (res) => { 78 | clearTimeout(timer) 79 | await this.onerror( 80 | method, 81 | url, 82 | data, 83 | aborted ? '网络请求失败:主动取消' : '网络请求失败:(URL无效|无网络|DNS解析失败)' 84 | ) 85 | aborted ? reject('网络请求失败:主动取消') : reject('网络请求失败:(URL无效|无网络|DNS解析失败)') 86 | } 87 | }) 88 | requestTask.onProgressUpdate(progressUpdateHandle) // 监听下载进度变化 89 | timer = setTimeout(async () => { 90 | // 请求超时执行方法 91 | requestTask.abort() // 执行取消请求方法 92 | await this.onerror(method, url, data, '网络请求失败:超时取消') 93 | reject('网络请求时间超时') // reject 原因 94 | }, timeout) // 设定检测超时定时器 95 | }) 96 | }), 97 | { 98 | get: (target, prop) => { 99 | if (prop === 'abort') { 100 | return abort 101 | } else { 102 | if (Reflect.get(target, prop) && Reflect.get(target, prop).bind) { 103 | return Reflect.get(target, prop).bind(target) 104 | } else { 105 | return Reflect.get(target, prop) 106 | } 107 | } 108 | } 109 | } 110 | ) // 如果调用 cancel 方法,返回 _watcher.cancel 方法 111 | }, 112 | request(method, url, data, header) { 113 | let timer, 114 | requestTask, 115 | aborted = false, 116 | abort = () => { 117 | // timer 检测超时定时器,requestTask 网络请求 task 对象,aborted 请求是否已被取消,abort 取消请求方法 118 | aborted = true // 将请求状态标记为已取消 119 | requestTask ? requestTask.abort() : '' // 执行取消请求方法 120 | } 121 | return new Proxy( 122 | new Promise((resolve, reject) => { 123 | // 返回经过 Proxy 后的 Promise 对象使其可以监听到是否调用 abort 方法 124 | this.interceptors.request 125 | .intercept({ header: header || {}, body: data || {} }, method, url, data) 126 | .then(async ({ header, body: data }) => { 127 | // 等待请求拦截器里的方法执行完 128 | if (aborted) { 129 | // 如果请求已被取消,停止执行,返回 reject 130 | await this.onerror(method, url, data, '网络请求失败:主动取消') 131 | return reject('网络请求失败:主动取消') 132 | } 133 | requestTask = uni.request({ 134 | url: url[0] === '/' ? baseURL + url : url, 135 | data, 136 | method, 137 | header, 138 | success: async (res) => { 139 | // 网络请求成功 140 | clearTimeout(timer) // 清除检测超时定时器 141 | res.statusCode !== 200 142 | ? await this.onerror(method, url, data, `网络请求异常:服务器响应异常:状态码:${res.statusCode}`) 143 | : '' 144 | this.interceptors.response.intercept( 145 | statusCode.includes(res.statusCode) ? resolve : reject, 146 | { success: statusCode.includes(res.statusCode), ...res }, 147 | method, 148 | url, 149 | data, 150 | reject 151 | ) // 执行响应拦截器 152 | }, 153 | fail: async (res) => { 154 | // 网络请求失败 155 | clearTimeout(timer) // 清除检测超时定时器 156 | await this.onerror( 157 | method, 158 | url, 159 | data, 160 | aborted ? '网络请求失败:主动取消' : '网络请求失败:(URL无效|无网络|DNS解析失败)' 161 | ) 162 | aborted ? reject('网络请求失败:主动取消') : reject('网络请求失败:(URL无效|无网络|DNS解析失败)') 163 | } 164 | }) 165 | timer = setTimeout(async () => { 166 | // 请求超时执行方法 167 | requestTask.abort() // 执行取消请求方法 168 | await this.onerror(method, url, data, '网络请求失败:超时取消') 169 | reject('网络请求时间超时') // reject 原因 170 | }, timeout || 12345) // 设定检测超时定时器 171 | }) 172 | }), 173 | { 174 | get: (target, prop) => { 175 | if (prop === 'abort') { 176 | return abort 177 | } else { 178 | if (Reflect.get(target, prop) && Reflect.get(target, prop).bind) { 179 | return Reflect.get(target, prop).bind(target) 180 | } else { 181 | return Reflect.get(target, prop) 182 | } 183 | } 184 | } 185 | } 186 | ) // 如果调用 abort 方法,返回 abort 方法 187 | }, 188 | interceptors: { 189 | // 拦截器 190 | request: { 191 | interceptors: [], 192 | use(fun) { 193 | this.interceptors.push(fun) 194 | }, 195 | async intercept(config, method, url, data) { 196 | for (let i = 0; i < this.interceptors.length; i++) { 197 | config = await this.interceptors[i](config, method, url, data) 198 | } 199 | return config 200 | } 201 | }, 202 | response: { 203 | interceptors: [], 204 | use(fun) { 205 | this.interceptors.push(fun) 206 | }, 207 | async intercept(STATUS, response, method, url, data, reject) { 208 | try { 209 | for (let i = 0; i < this.interceptors.length; i++) { 210 | response = await this.interceptors[i](response, method, url, data) 211 | } 212 | if (response) { 213 | if (response.success) { 214 | return STATUS(typeof response.data === 'string' ? JSON.parse(response.data) : response.data) 215 | } else { 216 | delete response.success 217 | return STATUS(response, method, url, data) 218 | } 219 | } 220 | } catch (e) { 221 | reject(e) 222 | } 223 | } 224 | } 225 | } 226 | } 227 | } 228 | -------------------------------------------------------------------------------- /src/components/pyh-rdtpicker/pyh-rdtpicker.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 283 | 284 | 378 | -------------------------------------------------------------------------------- /src/common/customer-nvue.scss: -------------------------------------------------------------------------------- 1 | /*脱落文档流定位*/ 2 | .center-50 { 3 | //居中定位 4 | position: absolute; 5 | top: 50%; 6 | left: 50%; 7 | transform: translate(-50%, -50%); 8 | z-index: 10; 9 | } 10 | .center-top60 { 11 | position: absolute; 12 | top: 60%; 13 | left: 50%; 14 | transform: translate(-50%, -60%); 15 | z-index: 10; 16 | } 17 | .center-top70 { 18 | position: absolute; 19 | top: 70%; 20 | left: 50%; 21 | transform: translate(-50%, -70%); 22 | z-index: 10; 23 | } 24 | 25 | .center-top80 { 26 | position: absolute; 27 | top: 80%; 28 | left: 50%; 29 | transform: translate(-50%, -80%); 30 | z-index: 10; 31 | } 32 | .center-top90 { 33 | position: absolute; 34 | top: 80%; 35 | left: 50%; 36 | transform: translate(-50%, -90%); 37 | z-index: 10; 38 | } 39 | /*fixed*/ 40 | .fixed-center-50 { 41 | //居中定位 42 | position: fixed; 43 | top: 50%; 44 | left: 50%; 45 | transform: translate(-50%, -50%); 46 | z-index: 10; 47 | } 48 | .fixed-center-top60 { 49 | position: fixed; 50 | top: 60%; 51 | left: 50%; 52 | transform: translate(-50%, -60%); 53 | z-index: 10; 54 | } 55 | .fixed-center-top70 { 56 | position: fixed; 57 | top: 70%; 58 | left: 50%; 59 | transform: translate(-50%, -70%); 60 | z-index: 10; 61 | } 62 | .fixed-center-top80 { 63 | position: fixed; 64 | top: 80%; 65 | left: 50%; 66 | transform: translate(-50%, -80%); 67 | z-index: 10; 68 | } 69 | .fixed-center-top90 { 70 | position: fixed; 71 | top: 90%; 72 | left: 50%; 73 | transform: translate(-50%, -90%); 74 | z-index: 10; 75 | } 76 | .fixed-center-top95 { 77 | position: fixed; 78 | top: 95%; 79 | left: 50%; 80 | transform: translate(-50%, -95%); 81 | z-index: 10; 82 | } 83 | /* 84 | flex布局 第一个字母为主轴 85 | */ 86 | //start 87 | .rowSS { 88 | flex-direction: row; 89 | justify-content: flex-start; 90 | align-items: flex-start; 91 | } 92 | .rowSC { 93 | flex-direction: row; 94 | justify-content: flex-start; 95 | align-items: center; 96 | } 97 | .rowSE { 98 | flex-direction: row; 99 | justify-content: flex-start; 100 | align-items: flex-end; 101 | } 102 | //space-between 103 | .rowBS { 104 | flex-direction: row; 105 | justify-content: space-between; 106 | align-items: flex-start; 107 | } 108 | .rowBC { 109 | flex-direction: row; 110 | justify-content: space-between; 111 | align-items: center; 112 | } 113 | .rowBE { 114 | flex-direction: row; 115 | justify-content: space-between; 116 | align-items: flex-end; 117 | } 118 | //space-around 119 | .rowAS { 120 | flex-direction: row; 121 | justify-content: space-around; 122 | align-items: flex-start; 123 | } 124 | .rowAC { 125 | flex-direction: row; 126 | justify-content: space-around; 127 | align-items: center; 128 | } 129 | .rowAE { 130 | flex-direction: row; 131 | justify-content: space-around; 132 | align-items: flex-end; 133 | } 134 | //center 135 | .rowCS { 136 | flex-direction: row; 137 | justify-content: center; 138 | align-items: flex-start; 139 | } 140 | .rowCC { 141 | flex-direction: row; 142 | justify-content: center; 143 | align-items: center; 144 | } 145 | .rowCE { 146 | flex-direction: row; 147 | justify-content: center; 148 | align-items: flex-end; 149 | } 150 | /*col*/ 151 | //start 152 | .columnSS { 153 | flex-direction: column; 154 | justify-content: flex-start; 155 | align-items: flex-start; 156 | } 157 | .columnSC { 158 | flex-direction: column; 159 | justify-content: flex-start; 160 | align-items: center; 161 | } 162 | .columnSE { 163 | flex-direction: column; 164 | justify-content: flex-start; 165 | align-items: flex-end; 166 | } 167 | //space-between 168 | .columnBS { 169 | flex-direction: column; 170 | justify-content: space-between; 171 | align-items: flex-start; 172 | } 173 | .columnBC { 174 | flex-direction: column; 175 | justify-content: space-between; 176 | align-items: center; 177 | } 178 | .columnBE { 179 | flex-direction: column; 180 | justify-content: space-between; 181 | align-items: flex-end; 182 | } 183 | //space-around 184 | .columnAS { 185 | flex-direction: column; 186 | justify-content: space-around; 187 | align-items: flex-start; 188 | } 189 | .columnAC { 190 | flex-direction: column; 191 | justify-content: space-around; 192 | align-items: center; 193 | } 194 | .columnAE { 195 | flex-direction: column; 196 | justify-content: space-around; 197 | align-items: flex-end; 198 | } 199 | //center 200 | .columnCS { 201 | flex-direction: column; 202 | justify-content: center; 203 | align-items: flex-start; 204 | } 205 | .columnCC { 206 | flex-direction: column; 207 | justify-content: center; 208 | align-items: center; 209 | } 210 | .columnCE { 211 | flex-direction: column; 212 | justify-content: center; 213 | align-items: flex-end; 214 | } 215 | 216 | /* 字体 */ 217 | .font { 218 | font-size: 25rpx; 219 | } 220 | .font-sm { 221 | font-size: 22rpx; 222 | } 223 | .font-md { 224 | font-size: 30rpx; 225 | } 226 | .font-lg { 227 | font-size: 40rpx; 228 | } 229 | .font-big { 230 | font-size: 60rpx; 231 | } 232 | .font-weight { 233 | font-weight: bold !important; 234 | } 235 | .font-weight-100 { 236 | font-weight: 100 !important; 237 | } 238 | 239 | .line-h0 { 240 | line-height: 0 !important; 241 | } 242 | .line-h { 243 | line-height: 1 !important; 244 | } 245 | .line-h-sm { 246 | line-height: 1.2 !important; 247 | } 248 | .line-h-md { 249 | line-height: 1.5 !important; 250 | } 251 | .line-h-lg { 252 | line-height: 2 !important; 253 | } 254 | .line-h-big { 255 | line-height: 3 !important; 256 | } 257 | 258 | .line-through { 259 | text-decoration: line-through; 260 | } 261 | 262 | .text-center { 263 | text-align: center; 264 | } 265 | .text-left { 266 | text-align: left; 267 | } 268 | .text-right { 269 | text-align: right; 270 | } 271 | 272 | .border-0 { 273 | border-width: 0; 274 | } 275 | .border-top-0 { 276 | border-top-width: 0; 277 | } 278 | .border-right-0 { 279 | border-right-width: 0; 280 | } 281 | .border-bottom-0 { 282 | border-bottom-width: 0; 283 | } 284 | .border-left-0 { 285 | border-left-width: 0; 286 | } 287 | 288 | .rounded { 289 | border-radius: 5rpx; 290 | } 291 | .rounded-circle { 292 | border-radius: 100%; 293 | } 294 | .rounded-0 { 295 | border-radius: 0; 296 | } 297 | 298 | /*width和height*/ 299 | .widthrpx-60 { 300 | width: 60rpx !important; 301 | } 302 | .widthrpx-80 { 303 | width: 80rpx !important; 304 | } 305 | .widthrpx-100 { 306 | width: 100rpx !important; 307 | } 308 | .widthrpx-120 { 309 | width: 120rpx !important; 310 | } 311 | .widthrpx-130 { 312 | width: 130rpx !important; 313 | } 314 | .widthrpx-150 { 315 | width: 150rpx !important; 316 | } 317 | .widthrpx-170 { 318 | width: 170rpx !important; 319 | } 320 | .widthrpx-180 { 321 | width: 180rpx !important; 322 | } 323 | .widthrpx-200 { 324 | width: 200rpx !important; 325 | } 326 | /*height*/ 327 | .heightrpx-50 { 328 | height: 50rpx !important; 329 | } 330 | .heightrpx-60 { 331 | height: 60rpx !important; 332 | } 333 | .heightrpx-80 { 334 | height: 80rpx !important; 335 | } 336 | .heightrpx-100 { 337 | height: 100rpx !important; 338 | } 339 | .heightrpx-120 { 340 | height: 120rpx !important; 341 | } 342 | .heightrpx-130 { 343 | height: 130rpx !important; 344 | } 345 | .heightrpx-150 { 346 | height: 150rpx !important; 347 | } 348 | .heightrpx-170 { 349 | height: 170rpx !important; 350 | } 351 | .heightrpx-180 { 352 | height: 180rpx !important; 353 | } 354 | .heightrpx-200 { 355 | height: 200rpx !important; 356 | } 357 | /*width百分号*/ 358 | .widthPC-5 { 359 | width: 5%; 360 | } 361 | .widthPC-10 { 362 | width: 10%; 363 | } 364 | .widthPC-15 { 365 | width: 15%; 366 | } 367 | .widthPC-20 { 368 | width: 20%; 369 | } 370 | .widthPC-25 { 371 | width: 25%; 372 | } 373 | .widthPC-30 { 374 | width: 30%; 375 | } 376 | .widthPC-35 { 377 | width: 35%; 378 | } 379 | .widthPC-40 { 380 | width: 40%; 381 | } 382 | .widthPC-45 { 383 | width: 45%; 384 | } 385 | .widthPC-50 { 386 | width: 50%; 387 | } 388 | .widthPC-55 { 389 | width: 55%; 390 | } 391 | .widthPC-60 { 392 | width: 60%; 393 | } 394 | .widthPC-65 { 395 | width: 65%; 396 | } 397 | .widthPC-70 { 398 | width: 70%; 399 | } 400 | .widthPC-75 { 401 | width: 75%; 402 | } 403 | .widthPC-80 { 404 | width: 80%; 405 | } 406 | .widthPC-85 { 407 | width: 85%; 408 | } 409 | .widthPC-90 { 410 | width: 90%; 411 | } 412 | .widthPC-95 { 413 | width: 95%; 414 | } 415 | .widthPC-100 { 416 | width: 100%; 417 | } 418 | /*height 百分比*/ 419 | .heightPC-5 { 420 | width: 5%; 421 | } 422 | .heightPC-10 { 423 | width: 10%; 424 | } 425 | .heightPC-15 { 426 | width: 15%; 427 | } 428 | .heightPC-20 { 429 | width: 20%; 430 | } 431 | .heightPC-25 { 432 | width: 25%; 433 | } 434 | .heightPC-30 { 435 | width: 30%; 436 | } 437 | .heightPC-35 { 438 | width: 35%; 439 | } 440 | .heightPC-40 { 441 | width: 40%; 442 | } 443 | .heightPC-45 { 444 | width: 45%; 445 | } 446 | .heightPC-50 { 447 | width: 50%; 448 | } 449 | .heightPC-55 { 450 | width: 55%; 451 | } 452 | .heightPC-60 { 453 | width: 60%; 454 | } 455 | .heightPC-65 { 456 | width: 65%; 457 | } 458 | .heightPC-70 { 459 | width: 70%; 460 | } 461 | .heightPC-75 { 462 | width: 75%; 463 | } 464 | .heightPC-80 { 465 | width: 80%; 466 | } 467 | .heightPC-85 { 468 | width: 85%; 469 | } 470 | .heightPC-90 { 471 | width: 90%; 472 | } 473 | .heightPC-95 { 474 | width: 95%; 475 | } 476 | .heightPC-100 { 477 | width: 100%; 478 | } 479 | 480 | /* Spacing padding和margin*/ 481 | .m-0 { 482 | margin-left: 0; 483 | margin-right: 0; 484 | margin-top: 0; 485 | margin-bottom: 0; 486 | } 487 | .m { 488 | margin-left: 5upx; 489 | margin-right: 5rpx; 490 | margin-top: 5rpx; 491 | margin-bottom: 5rpx; 492 | } 493 | .m-1 { 494 | margin-left: 10rpx; 495 | margin-right: 10rpx; 496 | margin-top: 10rpx; 497 | margin-bottom: 10rpx; 498 | } 499 | .m-2 { 500 | margin-left: 20rpx; 501 | margin-right: 20rpx; 502 | margin-top: 20rpx; 503 | margin-bottom: 20rpx; 504 | } 505 | .m-3 { 506 | margin-left: 30rpx; 507 | margin-right: 30rpx; 508 | margin-top: 30rpx; 509 | margin-bottom: 30rpx; 510 | } 511 | .m-4 { 512 | margin-left: 40rpx; 513 | margin-right: 40rpx; 514 | margin-top: 40rpx; 515 | margin-bottom: 40rpx; 516 | } 517 | .m-5 { 518 | margin-left: 50rpx; 519 | margin-right: 50rpx; 520 | margin-top: 50rpx; 521 | margin-bottom: 50rpx; 522 | } 523 | 524 | .mx-0 { 525 | margin-left: 0; 526 | margin-right: 0; 527 | } 528 | .mx { 529 | margin-left: 5rpx; 530 | margin-right: 5rpx; 531 | } 532 | .mx-1 { 533 | margin-left: 10rpx; 534 | margin-right: 10rpx; 535 | } 536 | .mx-2 { 537 | margin-left: 20rpx; 538 | margin-right: 20rpx; 539 | } 540 | .mx-3 { 541 | margin-left: 30rpx; 542 | margin-right: 30rpx; 543 | } 544 | .mx-4 { 545 | margin-left: 40rpx; 546 | margin-right: 40rpx; 547 | } 548 | .mx-5 { 549 | margin-left: 50rpx; 550 | margin-right: 50rpx; 551 | } 552 | 553 | .my-0 { 554 | margin-top: 0; 555 | margin-bottom: 0; 556 | } 557 | .my { 558 | margin-top: 5rpx; 559 | margin-bottom: 5rpx; 560 | } 561 | .my-1 { 562 | margin-top: 10rpx; 563 | margin-bottom: 10rpx; 564 | } 565 | .my-2 { 566 | margin-top: 20rpx; 567 | margin-bottom: 20rpx; 568 | } 569 | .my-3 { 570 | margin-top: 30rpx; 571 | margin-bottom: 30rpx; 572 | } 573 | .my-4 { 574 | margin-top: 40rpx; 575 | margin-bottom: 40rpx; 576 | } 577 | .my-5 { 578 | margin-top: 50rpx; 579 | margin-bottom: 50rpx; 580 | } 581 | 582 | .mt-0 { 583 | margin-top: 0; 584 | } 585 | .mt { 586 | margin-top: 5rpx; 587 | } 588 | .mt-1 { 589 | margin-top: 10rpx; 590 | } 591 | .mt-2 { 592 | margin-top: 20rpx; 593 | } 594 | .mt-3 { 595 | margin-top: 30rpx; 596 | } 597 | .mt-4 { 598 | margin-top: 40rpx; 599 | } 600 | .mt-5 { 601 | margin-top: 50rpx; 602 | } 603 | 604 | .mb-0 { 605 | margin-bottom: 0; 606 | } 607 | .mb { 608 | margin-bottom: 5rpx; 609 | } 610 | .mb-1 { 611 | margin-bottom: 10rpx; 612 | } 613 | .mb-2 { 614 | margin-bottom: 20rpx; 615 | } 616 | .mb-3 { 617 | margin-bottom: 30rpx; 618 | } 619 | .mb-4 { 620 | margin-bottom: 40rpx; 621 | } 622 | .mb-5 { 623 | margin-bottom: 50rpx; 624 | } 625 | 626 | .ml-0 { 627 | margin-left: 0; 628 | } 629 | .ml { 630 | margin-left: 5rpx; 631 | } 632 | .ml-1 { 633 | margin-left: 10rpx; 634 | } 635 | .ml-2 { 636 | margin-left: 20rpx; 637 | } 638 | .ml-3 { 639 | margin-left: 30rpx; 640 | } 641 | .ml-4 { 642 | margin-left: 40rpx; 643 | } 644 | .ml-5 { 645 | margin-left: 50rpx; 646 | } 647 | 648 | .mr-0 { 649 | margin-right: 0; 650 | } 651 | .mr { 652 | margin-right: 5rpx; 653 | } 654 | .mr-1 { 655 | margin-right: 10rpx; 656 | } 657 | .mr-2 { 658 | margin-right: 20rpx; 659 | } 660 | .mr-3 { 661 | margin-right: 30rpx; 662 | } 663 | .mr-4 { 664 | margin-right: 40rpx; 665 | } 666 | .mr-5 { 667 | margin-right: 50rpx; 668 | } 669 | 670 | .p-0 { 671 | padding-left: 0; 672 | padding-right: 0; 673 | padding-top: 0; 674 | padding-bottom: 0; 675 | } 676 | .p { 677 | padding-left: 5rpx; 678 | padding-right: 5rpx; 679 | padding-top: 5rpx; 680 | padding-bottom: 5rpx; 681 | } 682 | .p-1 { 683 | padding-left: 10rpx; 684 | padding-right: 10rpx; 685 | padding-top: 10rpx; 686 | padding-bottom: 10rpx; 687 | } 688 | .p-2 { 689 | padding-left: 20rpx; 690 | padding-right: 20rpx; 691 | padding-top: 20rpx; 692 | padding-bottom: 20rpx; 693 | } 694 | .p-3 { 695 | padding-left: 30rpx; 696 | padding-right: 30rpx; 697 | padding-top: 30rpx; 698 | padding-bottom: 30rpx; 699 | } 700 | .p-4 { 701 | padding-left: 40rpx; 702 | padding-right: 40rpx; 703 | padding-top: 40rpx; 704 | padding-bottom: 40rpx; 705 | } 706 | .p-5 { 707 | padding-left: 50rpx; 708 | padding-right: 50rpx; 709 | padding-top: 50rpx; 710 | padding-bottom: 50rpx; 711 | } 712 | 713 | .py-0 { 714 | padding-top: 0; 715 | padding-bottom: 0; 716 | } 717 | .py { 718 | padding-top: 5rpx; 719 | padding-bottom: 5rpx; 720 | } 721 | .py-1 { 722 | padding-top: 10rpx; 723 | padding-bottom: 10rpx; 724 | } 725 | .py-2 { 726 | padding-top: 20rpx; 727 | padding-bottom: 20rpx; 728 | } 729 | .py-3 { 730 | padding-top: 30rpx; 731 | padding-bottom: 30rpx; 732 | } 733 | .py-4 { 734 | padding-top: 40rpx; 735 | padding-bottom: 40rpx; 736 | } 737 | .py-5 { 738 | padding-top: 50rpx; 739 | padding-bottom: 50rpx; 740 | } 741 | 742 | .pt-0 { 743 | padding-top: 0; 744 | } 745 | .pt { 746 | padding-top: 5rpx; 747 | } 748 | .pt-1 { 749 | padding-top: 10rpx; 750 | } 751 | .pt-2 { 752 | padding-top: 20rpx; 753 | } 754 | .pt-3 { 755 | padding-top: 30rpx; 756 | } 757 | .pt-4 { 758 | padding-top: 40rpx; 759 | } 760 | .pt-5 { 761 | padding-top: 50rpx; 762 | } 763 | 764 | .pb-0 { 765 | padding-bottom: 0; 766 | } 767 | .pb { 768 | padding-bottom: 5rpx; 769 | } 770 | .pb-1 { 771 | padding-bottom: 10rpx; 772 | } 773 | .pb-2 { 774 | padding-bottom: 20rpx; 775 | } 776 | .pb-3 { 777 | padding-bottom: 30rpx; 778 | } 779 | .pb-4 { 780 | padding-bottom: 40rpx; 781 | } 782 | .pb-5 { 783 | padding-bottom: 50rpx; 784 | } 785 | 786 | .pl-0 { 787 | padding-left: 0; 788 | } 789 | .pl { 790 | padding-left: 5rpx; 791 | } 792 | .pl-1 { 793 | padding-left: 10rpx; 794 | } 795 | .pl-2 { 796 | padding-left: 20rpx; 797 | } 798 | .pl-3 { 799 | padding-left: 30rpx; 800 | } 801 | .pl-4 { 802 | padding-left: 40rpx; 803 | } 804 | .pl-5 { 805 | padding-left: 50rpx; 806 | } 807 | 808 | .pr-0 { 809 | padding-right: 0; 810 | } 811 | .pr { 812 | padding-right: 5rpx; 813 | } 814 | .pr-1 { 815 | padding-right: 10rpx; 816 | } 817 | .pr-2 { 818 | padding-right: 20rpx; 819 | } 820 | .pr-3 { 821 | padding-right: 30rpx; 822 | } 823 | .pr-4 { 824 | padding-right: 40rpx; 825 | } 826 | .pr-5 { 827 | padding-right: 50rpx; 828 | } 829 | 830 | //*图标 831 | .star-icon { 832 | color: #f56c6c; 833 | font-size: 14rpx; 834 | margin-right: 4rpx; 835 | } 836 | -------------------------------------------------------------------------------- /src/common/scss-suger.scss: -------------------------------------------------------------------------------- 1 | body { 2 | --primary: #007bff; 3 | --secondary: #6c757d; 4 | --success: #28a745; 5 | --danger: #dc3545; 6 | --warning: #ffc107; 7 | --light: #f8f9fa; 8 | --dark: #343a40; 9 | --muted: #6c757d; 10 | --white: #fff; 11 | --borderColor: #dee2e6; 12 | --lightmuted: #b2b2b2; 13 | } 14 | /*脱落文档流定位*/ 15 | .center-50 { 16 | //居中定位 17 | position: absolute; 18 | top: 50%; 19 | left: 50%; 20 | transform: translate(-50%, -50%); 21 | z-index: 10; 22 | } 23 | .center-top60 { 24 | position: absolute; 25 | top: 60%; 26 | left: 50%; 27 | transform: translate(-50%, -60%); 28 | z-index: 10; 29 | } 30 | .center-top70 { 31 | position: absolute; 32 | top: 70%; 33 | left: 50%; 34 | transform: translate(-50%, -70%); 35 | z-index: 10; 36 | } 37 | .center-top80 { 38 | position: absolute; 39 | top: 80%; 40 | left: 50%; 41 | transform: translate(-50%, -80%); 42 | z-index: 10; 43 | } 44 | .center-top90 { 45 | position: absolute; 46 | top: 80%; 47 | left: 50%; 48 | transform: translate(-50%, -90%); 49 | z-index: 10; 50 | } 51 | /*fixed*/ 52 | .fixed-center-50 { 53 | //居中定位 54 | position: fixed; 55 | top: 50%; 56 | left: 50%; 57 | transform: translate(-50%, -50%); 58 | z-index: 10; 59 | } 60 | .fixed-center-top60 { 61 | position: fixed; 62 | top: 60%; 63 | left: 50%; 64 | transform: translate(-50%, -60%); 65 | z-index: 10; 66 | } 67 | .fixed-center-top70 { 68 | position: fixed; 69 | top: 70%; 70 | left: 50%; 71 | transform: translate(-50%, -70%); 72 | z-index: 10; 73 | } 74 | .fixed-center-top80 { 75 | position: fixed; 76 | top: 80%; 77 | left: 50%; 78 | transform: translate(-50%, -80%); 79 | z-index: 10; 80 | } 81 | .fixed-center-top90 { 82 | position: fixed; 83 | top: 90%; 84 | left: 50%; 85 | transform: translate(-50%, -90%); 86 | z-index: 10; 87 | } 88 | .fixed-center-top95 { 89 | position: fixed; 90 | top: 95%; 91 | left: 50%; 92 | transform: translate(-50%, -95%); 93 | z-index: 10; 94 | } 95 | /* 96 | flex布局 第一个字母为主轴 97 | */ 98 | //start 99 | .rowSS { 100 | display: flex; 101 | flex-direction: row; 102 | justify-content: flex-start; 103 | align-items: flex-start; 104 | } 105 | .rowSC { 106 | display: flex; 107 | flex-direction: row; 108 | justify-content: flex-start; 109 | align-items: center; 110 | } 111 | .rowSE { 112 | display: flex; 113 | flex-direction: row; 114 | justify-content: flex-start; 115 | align-items: flex-end; 116 | } 117 | //space-between 118 | .rowBS { 119 | display: flex; 120 | flex-direction: row; 121 | justify-content: space-between; 122 | align-items: flex-start; 123 | } 124 | .rowBC { 125 | display: flex; 126 | flex-direction: row; 127 | justify-content: space-between; 128 | align-items: center; 129 | } 130 | .rowBE { 131 | display: flex; 132 | flex-direction: row; 133 | justify-content: space-between; 134 | align-items: flex-end; 135 | } 136 | //space-around 137 | .rowAS { 138 | display: flex; 139 | flex-direction: row; 140 | justify-content: space-around; 141 | align-items: flex-start; 142 | } 143 | .rowAC { 144 | display: flex; 145 | flex-direction: row; 146 | justify-content: space-around; 147 | align-items: center; 148 | } 149 | .rowAE { 150 | display: flex; 151 | flex-direction: row; 152 | justify-content: space-around; 153 | align-items: flex-end; 154 | } 155 | //center 156 | .rowCS { 157 | display: flex; 158 | flex-direction: row; 159 | justify-content: center; 160 | align-items: flex-start; 161 | } 162 | .rowCC { 163 | display: flex; 164 | flex-direction: row; 165 | justify-content: center; 166 | align-items: center; 167 | } 168 | .rowCE { 169 | display: flex; 170 | flex-direction: row; 171 | justify-content: center; 172 | align-items: flex-end; 173 | } 174 | /*col*/ 175 | //start 176 | .columnSS { 177 | display: flex; 178 | flex-direction: column; 179 | justify-content: flex-start; 180 | align-items: flex-start; 181 | } 182 | .columnSC { 183 | display: flex; 184 | flex-direction: column; 185 | justify-content: flex-start; 186 | align-items: center; 187 | } 188 | .columnSE { 189 | display: flex; 190 | flex-direction: column; 191 | justify-content: flex-start; 192 | align-items: flex-end; 193 | } 194 | //space-between 195 | .columnBS { 196 | display: flex; 197 | flex-direction: column; 198 | justify-content: space-between; 199 | align-items: flex-start; 200 | } 201 | .columnBC { 202 | display: flex; 203 | flex-direction: column; 204 | justify-content: space-between; 205 | align-items: center; 206 | } 207 | .columnBE { 208 | display: flex; 209 | flex-direction: column; 210 | justify-content: space-between; 211 | align-items: flex-end; 212 | } 213 | //space-around 214 | .columnAS { 215 | display: flex; 216 | flex-direction: column; 217 | justify-content: space-around; 218 | align-items: flex-start; 219 | } 220 | .columnAC { 221 | display: flex; 222 | flex-direction: column; 223 | justify-content: space-around; 224 | align-items: center; 225 | } 226 | .columnAE { 227 | display: flex; 228 | flex-direction: column; 229 | justify-content: space-around; 230 | align-items: flex-end; 231 | } 232 | //center 233 | .columnCS { 234 | display: flex; 235 | flex-direction: column; 236 | justify-content: center; 237 | align-items: flex-start; 238 | } 239 | .columnCC { 240 | display: flex; 241 | flex-direction: column; 242 | justify-content: center; 243 | align-items: center; 244 | } 245 | .columnCE { 246 | display: flex; 247 | flex-direction: column; 248 | justify-content: center; 249 | align-items: flex-end; 250 | } 251 | 252 | /* 字体 */ 253 | .font { 254 | font-size: 25upx; 255 | } 256 | .font-sm { 257 | font-size: 22upx; 258 | } 259 | .font-md { 260 | font-size: 30upx; 261 | } 262 | .font-lg { 263 | font-size: 40upx; 264 | } 265 | .font-big { 266 | font-size: 60upx; 267 | } 268 | .font-weight { 269 | font-weight: bold !important; 270 | } 271 | .font-weight-100 { 272 | font-weight: 100 !important; 273 | } 274 | 275 | .line-h0 { 276 | line-height: 0 !important; 277 | } 278 | .line-h { 279 | line-height: 1 !important; 280 | } 281 | .line-h-sm { 282 | line-height: 1.2 !important; 283 | } 284 | .line-h-md { 285 | line-height: 1.5 !important; 286 | } 287 | .line-h-lg { 288 | line-height: 2 !important; 289 | } 290 | .line-h-big { 291 | line-height: 3 !important; 292 | } 293 | 294 | .line-through { 295 | text-decoration: line-through; 296 | } 297 | 298 | .text-center { 299 | text-align: center; 300 | } 301 | .text-left { 302 | text-align: left; 303 | } 304 | .text-right { 305 | text-align: right; 306 | } 307 | 308 | /* flex布局 */ 309 | .d-flex { 310 | display: flex; 311 | } 312 | .d-block { 313 | display: block; 314 | } 315 | .d-inline-block { 316 | display: inline-block; 317 | } 318 | 319 | .flex-1 { 320 | flex: 1; 321 | } 322 | .flex-column { 323 | flex-direction: column; 324 | } 325 | .flex-row { 326 | flex-direction: row; 327 | } 328 | .flex-wrap { 329 | flex-wrap: wrap; 330 | } 331 | .flex-nowrap { 332 | flex-wrap: nowrap; 333 | } 334 | .flex-shrink { 335 | flex-shrink: 0; 336 | } 337 | .j-start { 338 | justify-content: flex-start; 339 | } 340 | .j-center { 341 | justify-content: center; 342 | } 343 | .j-end { 344 | justify-content: flex-end; 345 | } 346 | .j-sb { 347 | justify-content: space-between; 348 | } 349 | .a-center { 350 | align-items: center; 351 | } 352 | .a-start { 353 | align-items: flex-start; 354 | } 355 | .a-end { 356 | align-items: flex-end; 357 | } 358 | .a-stretch { 359 | align-items: stretch; 360 | } 361 | .a-self-start { 362 | align-self: flex-start; 363 | } 364 | .a-self-auto { 365 | align-self: auto; 366 | } 367 | .a-self-end { 368 | align-self: flex-end; 369 | } 370 | .a-self-stretch { 371 | align-self: stretch; 372 | } 373 | .a-self-baseline { 374 | align-self: baseline; 375 | } 376 | /* Border */ 377 | .border { 378 | border-width: 1upx; 379 | border-style: solid; 380 | border-color: var(--borderColor); 381 | } 382 | .border-top { 383 | border-top-width: 1upx; 384 | border-top-style: solid; 385 | border-top-color: var(--borderColor); 386 | } 387 | .border-right { 388 | border-right-width: 1upx; 389 | border-right-style: solid; 390 | border-right-color: var(--borderColor); 391 | } 392 | .border-bottom { 393 | border-bottom-width: 1upx; 394 | border-bottom-style: solid; 395 | border-bottom-color: var(--borderColor); 396 | } 397 | .border-left { 398 | border-left-width: 1upx; 399 | border-left-style: solid; 400 | border-left-color: var(--borderColor); 401 | } 402 | 403 | .border-0 { 404 | border-width: 0; 405 | } 406 | .border-top-0 { 407 | border-top-width: 0; 408 | } 409 | .border-right-0 { 410 | border-right-width: 0; 411 | } 412 | .border-bottom-0 { 413 | border-bottom-width: 0; 414 | } 415 | .border-left-0 { 416 | border-left-width: 0; 417 | } 418 | 419 | .border-primary { 420 | border-color: var(--primary) !important; 421 | } 422 | .border-secondary { 423 | border-color: var(--secondary) !important; 424 | } 425 | .border-success { 426 | border-color: var(--success) !important; 427 | } 428 | .border-danger { 429 | border-color: var(--danger) !important; 430 | } 431 | .border-warning { 432 | border-color: var(--warning) !important; 433 | } 434 | .border-info { 435 | border-color: var(--info) !important; 436 | } 437 | .border-light { 438 | border-color: var(--light) !important; 439 | } 440 | .border-dark { 441 | border-color: var(--dark) !important; 442 | } 443 | .border-white { 444 | border-color: var(--white) !important; 445 | } 446 | .border-light-secondary { 447 | border-color: #f1f1f1 !important; 448 | } 449 | 450 | .rounded { 451 | border-radius: 5upx; 452 | } 453 | .rounded-circle { 454 | border-radius: 100%; 455 | } 456 | .rounded-0 { 457 | border-radius: 0; 458 | } 459 | 460 | /* 字体颜色和bg */ 461 | .text-primary { 462 | color: var(--primary) !important; 463 | } 464 | .text-secondary { 465 | color: var(--secondary) !important; 466 | } 467 | .text-success { 468 | color: var(--success) !important; 469 | } 470 | .text-danger { 471 | color: var(--danger) !important; 472 | } 473 | .text-warning { 474 | color: var(--warning) !important; 475 | } 476 | .text-info { 477 | color: var(--info) !important; 478 | } 479 | .text-light { 480 | color: var(--light) !important; 481 | } 482 | .text-dark { 483 | color: var(--dark) !important; 484 | } 485 | .text-muted { 486 | color: var(--muted) !important; 487 | } 488 | .text-light-muted { 489 | color: var(--lightmuted) !important; 490 | } 491 | .text-white { 492 | color: var(--white) !important; 493 | } 494 | 495 | .bg-primary { 496 | background-color: var(--primary) !important; 497 | } 498 | .bg-secondary { 499 | background-color: var(--secondary) !important; 500 | } 501 | .bg-success { 502 | background-color: var(--success) !important; 503 | } 504 | .bg-danger { 505 | background-color: var(--danger) !important; 506 | } 507 | .bg-warning { 508 | background-color: var(--warning) !important; 509 | } 510 | .bg-info { 511 | background-color: var(--info) !important; 512 | } 513 | .bg-light { 514 | background-color: var(--light) !important; 515 | } 516 | .bg-dark { 517 | background-color: var(--dark) !important; 518 | } 519 | .bg-white { 520 | background-color: var(--white) !important; 521 | } 522 | .bg-light-secondary { 523 | background-color: #f1f1f1 !important; 524 | } 525 | 526 | /*width和height*/ 527 | .widthupx-60 { 528 | width: 60upx !important; 529 | } 530 | .widthupx-80 { 531 | width: 80upx !important; 532 | } 533 | .widthupx-100 { 534 | width: 100upx !important; 535 | } 536 | .widthupx-120 { 537 | width: 120upx !important; 538 | } 539 | .widthupx-130 { 540 | width: 130upx !important; 541 | } 542 | .widthupx-150 { 543 | width: 150upx !important; 544 | } 545 | .widthupx-170 { 546 | width: 170upx !important; 547 | } 548 | .widthupx-180 { 549 | width: 180upx !important; 550 | } 551 | .widthupx-200 { 552 | width: 200upx !important; 553 | } 554 | /*height*/ 555 | .heightupx-50 { 556 | height: 50upx !important; 557 | } 558 | .heightupx-60 { 559 | height: 60upx !important; 560 | } 561 | .heightupx-80 { 562 | height: 80upx !important; 563 | } 564 | .heightupx-100 { 565 | height: 100upx !important; 566 | } 567 | .heightupx-120 { 568 | height: 120upx !important; 569 | } 570 | .heightupx-130 { 571 | height: 130upx !important; 572 | } 573 | .heightupx-150 { 574 | height: 150upx !important; 575 | } 576 | .heightupx-170 { 577 | height: 170upx !important; 578 | } 579 | .heightupx-180 { 580 | height: 180upx !important; 581 | } 582 | .heightupx-200 { 583 | height: 200upx !important; 584 | } 585 | /*width百分号*/ 586 | .widthPC-5 { 587 | width: 5%; 588 | } 589 | .widthPC-10 { 590 | width: 10%; 591 | } 592 | .widthPC-15 { 593 | width: 15%; 594 | } 595 | .widthPC-20 { 596 | width: 20%; 597 | } 598 | .widthPC-25 { 599 | width: 25%; 600 | } 601 | .widthPC-30 { 602 | width: 30%; 603 | } 604 | .widthPC-35 { 605 | width: 35%; 606 | } 607 | .widthPC-40 { 608 | width: 40%; 609 | } 610 | .widthPC-45 { 611 | width: 45%; 612 | } 613 | .widthPC-50 { 614 | width: 50%; 615 | } 616 | .widthPC-55 { 617 | width: 55%; 618 | } 619 | .widthPC-60 { 620 | width: 60%; 621 | } 622 | .widthPC-65 { 623 | width: 65%; 624 | } 625 | .widthPC-70 { 626 | width: 70%; 627 | } 628 | .widthPC-75 { 629 | width: 75%; 630 | } 631 | .widthPC-80 { 632 | width: 80%; 633 | } 634 | .widthPC-85 { 635 | width: 85%; 636 | } 637 | .widthPC-90 { 638 | width: 90%; 639 | } 640 | .widthPC-95 { 641 | width: 95%; 642 | } 643 | .widthPC-100 { 644 | width: 100%; 645 | } 646 | /*height 百分比*/ 647 | .heightPC-5 { 648 | width: 5%; 649 | } 650 | .heightPC-10 { 651 | width: 10%; 652 | } 653 | .heightPC-15 { 654 | width: 15%; 655 | } 656 | .heightPC-20 { 657 | width: 20%; 658 | } 659 | .heightPC-25 { 660 | width: 25%; 661 | } 662 | .heightPC-30 { 663 | width: 30%; 664 | } 665 | .heightPC-35 { 666 | width: 35%; 667 | } 668 | .heightPC-40 { 669 | width: 40%; 670 | } 671 | .heightPC-45 { 672 | width: 45%; 673 | } 674 | .heightPC-50 { 675 | width: 50%; 676 | } 677 | .heightPC-55 { 678 | width: 55%; 679 | } 680 | .heightPC-60 { 681 | width: 60%; 682 | } 683 | .heightPC-65 { 684 | width: 65%; 685 | } 686 | .heightPC-70 { 687 | width: 70%; 688 | } 689 | .heightPC-75 { 690 | width: 75%; 691 | } 692 | .heightPC-80 { 693 | width: 80%; 694 | } 695 | .heightPC-85 { 696 | width: 85%; 697 | } 698 | .heightPC-90 { 699 | width: 90%; 700 | } 701 | .heightPC-95 { 702 | width: 95%; 703 | } 704 | .heightPC-100 { 705 | width: 100%; 706 | } 707 | 708 | /* Spacing padding和margin*/ 709 | .m-0 { 710 | margin-left: 0; 711 | margin-right: 0; 712 | margin-top: 0; 713 | margin-bottom: 0; 714 | } 715 | .m { 716 | margin-left: 5upx; 717 | margin-right: 5upx; 718 | margin-top: 5upx; 719 | margin-bottom: 5upx; 720 | } 721 | .m-1 { 722 | margin-left: 10upx; 723 | margin-right: 10upx; 724 | margin-top: 10upx; 725 | margin-bottom: 10upx; 726 | } 727 | .m-2 { 728 | margin-left: 20upx; 729 | margin-right: 20upx; 730 | margin-top: 20upx; 731 | margin-bottom: 20upx; 732 | } 733 | .m-3 { 734 | margin-left: 30upx; 735 | margin-right: 30upx; 736 | margin-top: 30upx; 737 | margin-bottom: 30upx; 738 | } 739 | .m-4 { 740 | margin-left: 40upx; 741 | margin-right: 40upx; 742 | margin-top: 40upx; 743 | margin-bottom: 40upx; 744 | } 745 | .m-5 { 746 | margin-left: 50upx; 747 | margin-right: 50upx; 748 | margin-top: 50upx; 749 | margin-bottom: 50upx; 750 | } 751 | 752 | .mx-0 { 753 | margin-left: 0; 754 | margin-right: 0; 755 | } 756 | .mx { 757 | margin-left: 5upx; 758 | margin-right: 5upx; 759 | } 760 | .mx-1 { 761 | margin-left: 10upx; 762 | margin-right: 10upx; 763 | } 764 | .mx-2 { 765 | margin-left: 20upx; 766 | margin-right: 20upx; 767 | } 768 | .mx-3 { 769 | margin-left: 30upx; 770 | margin-right: 30upx; 771 | } 772 | .mx-4 { 773 | margin-left: 40upx; 774 | margin-right: 40upx; 775 | } 776 | .mx-5 { 777 | margin-left: 50upx; 778 | margin-right: 50upx; 779 | } 780 | 781 | .my-0 { 782 | margin-top: 0; 783 | margin-bottom: 0; 784 | } 785 | .my { 786 | margin-top: 5upx; 787 | margin-bottom: 5upx; 788 | } 789 | .my-1 { 790 | margin-top: 10upx; 791 | margin-bottom: 10upx; 792 | } 793 | .my-2 { 794 | margin-top: 20upx; 795 | margin-bottom: 20upx; 796 | } 797 | .my-3 { 798 | margin-top: 30upx; 799 | margin-bottom: 30upx; 800 | } 801 | .my-4 { 802 | margin-top: 40upx; 803 | margin-bottom: 40upx; 804 | } 805 | .my-5 { 806 | margin-top: 50upx; 807 | margin-bottom: 50upx; 808 | } 809 | 810 | .mt-0 { 811 | margin-top: 0; 812 | } 813 | .mt { 814 | margin-top: 5upx; 815 | } 816 | .mt-auto { 817 | margin-top: auto; 818 | } 819 | .mt-1 { 820 | margin-top: 10upx; 821 | } 822 | .mt-2 { 823 | margin-top: 20upx; 824 | } 825 | .mt-3 { 826 | margin-top: 30upx; 827 | } 828 | .mt-4 { 829 | margin-top: 40upx; 830 | } 831 | .mt-5 { 832 | margin-top: 50upx; 833 | } 834 | 835 | .mb-0 { 836 | margin-bottom: 0; 837 | } 838 | .mb { 839 | margin-bottom: 5upx; 840 | } 841 | .mb-auto { 842 | margin-bottom: auto; 843 | } 844 | .mb-1 { 845 | margin-bottom: 10upx; 846 | } 847 | .mb-2 { 848 | margin-bottom: 20upx; 849 | } 850 | .mb-3 { 851 | margin-bottom: 30upx; 852 | } 853 | .mb-4 { 854 | margin-bottom: 40upx; 855 | } 856 | .mb-5 { 857 | margin-bottom: 50upx; 858 | } 859 | 860 | .ml-0 { 861 | margin-left: 0; 862 | } 863 | .ml { 864 | margin-left: 5upx; 865 | } 866 | .ml-auto { 867 | margin-left: auto; 868 | } 869 | .ml-1 { 870 | margin-left: 10upx; 871 | } 872 | .ml-2 { 873 | margin-left: 20upx; 874 | } 875 | .ml-3 { 876 | margin-left: 30upx; 877 | } 878 | .ml-4 { 879 | margin-left: 40upx; 880 | } 881 | .ml-5 { 882 | margin-left: 50upx; 883 | } 884 | 885 | .mr-0 { 886 | margin-right: 0; 887 | } 888 | .mr { 889 | margin-right: 5upx; 890 | } 891 | .mr-1 { 892 | margin-right: 10upx; 893 | } 894 | .mr-2 { 895 | margin-right: 20upx; 896 | } 897 | .mr-3 { 898 | margin-right: 30upx; 899 | } 900 | .mr-4 { 901 | margin-right: 40upx; 902 | } 903 | .mr-5 { 904 | margin-right: 50upx; 905 | } 906 | 907 | .p-0 { 908 | padding-left: 0; 909 | padding-right: 0; 910 | padding-top: 0; 911 | padding-bottom: 0; 912 | } 913 | .p { 914 | padding-left: 5upx; 915 | padding-right: 5upx; 916 | padding-top: 5upx; 917 | padding-bottom: 5upx; 918 | } 919 | .p-1 { 920 | padding-left: 10upx; 921 | padding-right: 10upx; 922 | padding-top: 10upx; 923 | padding-bottom: 10upx; 924 | } 925 | .p-2 { 926 | padding-left: 20upx; 927 | padding-right: 20upx; 928 | padding-top: 20upx; 929 | padding-bottom: 20upx; 930 | } 931 | .p-3 { 932 | padding-left: 30upx; 933 | padding-right: 30upx; 934 | padding-top: 30upx; 935 | padding-bottom: 30upx; 936 | } 937 | .p-4 { 938 | padding-left: 40upx; 939 | padding-right: 40upx; 940 | padding-top: 40upx; 941 | padding-bottom: 40upx; 942 | } 943 | .p-5 { 944 | padding-left: 50upx; 945 | padding-right: 50upx; 946 | padding-top: 50upx; 947 | padding-bottom: 50upx; 948 | } 949 | 950 | .upx-0 { 951 | padding-left: 0; 952 | padding-right: 0; 953 | } 954 | .upx { 955 | padding-left: 5upx; 956 | padding-right: 5upx; 957 | } 958 | .upx-1 { 959 | padding-left: 10upx; 960 | padding-right: 10upx; 961 | } 962 | .upx-2 { 963 | padding-left: 20upx; 964 | padding-right: 20upx; 965 | } 966 | .upx-3 { 967 | padding-left: 30upx; 968 | padding-right: 30upx; 969 | } 970 | .upx-4 { 971 | padding-left: 40upx; 972 | padding-right: 40upx; 973 | } 974 | .upx-5 { 975 | padding-left: 50upx; 976 | padding-right: 50upx; 977 | } 978 | 979 | .py-0 { 980 | padding-top: 0; 981 | padding-bottom: 0; 982 | } 983 | .py { 984 | padding-top: 5upx; 985 | padding-bottom: 5upx; 986 | } 987 | .py-1 { 988 | padding-top: 10upx; 989 | padding-bottom: 10upx; 990 | } 991 | .py-2 { 992 | padding-top: 20upx; 993 | padding-bottom: 20upx; 994 | } 995 | .py-3 { 996 | padding-top: 30upx; 997 | padding-bottom: 30upx; 998 | } 999 | .py-4 { 1000 | padding-top: 40upx; 1001 | padding-bottom: 40upx; 1002 | } 1003 | .py-5 { 1004 | padding-top: 50upx; 1005 | padding-bottom: 50upx; 1006 | } 1007 | 1008 | .pt-0 { 1009 | padding-top: 0; 1010 | } 1011 | .pt { 1012 | padding-top: 5upx; 1013 | } 1014 | .pt-1 { 1015 | padding-top: 10upx; 1016 | } 1017 | .pt-2 { 1018 | padding-top: 20upx; 1019 | } 1020 | .pt-3 { 1021 | padding-top: 30upx; 1022 | } 1023 | .pt-4 { 1024 | padding-top: 40upx; 1025 | } 1026 | .pt-5 { 1027 | padding-top: 50upx; 1028 | } 1029 | 1030 | .pb-0 { 1031 | padding-bottom: 0; 1032 | } 1033 | .pb { 1034 | padding-bottom: 5upx; 1035 | } 1036 | .pb-1 { 1037 | padding-bottom: 10upx; 1038 | } 1039 | .pb-2 { 1040 | padding-bottom: 20upx; 1041 | } 1042 | .pb-3 { 1043 | padding-bottom: 30upx; 1044 | } 1045 | .pb-4 { 1046 | padding-bottom: 40upx; 1047 | } 1048 | .pb-5 { 1049 | padding-bottom: 50upx; 1050 | } 1051 | 1052 | .pl-0 { 1053 | padding-left: 0; 1054 | } 1055 | .pl { 1056 | padding-left: 5upx; 1057 | } 1058 | .pl-1 { 1059 | padding-left: 10upx; 1060 | } 1061 | .pl-2 { 1062 | padding-left: 20upx; 1063 | } 1064 | .pl-3 { 1065 | padding-left: 30upx; 1066 | } 1067 | .pl-4 { 1068 | padding-left: 40upx; 1069 | } 1070 | .pl-5 { 1071 | padding-left: 50upx; 1072 | } 1073 | 1074 | .pr-0 { 1075 | padding-right: 0; 1076 | } 1077 | .pr { 1078 | padding-right: 5upx; 1079 | } 1080 | .pr-1 { 1081 | padding-right: 10upx; 1082 | } 1083 | .pr-2 { 1084 | padding-right: 20upx; 1085 | } 1086 | .pr-3 { 1087 | padding-right: 30upx; 1088 | } 1089 | .pr-4 { 1090 | padding-right: 40upx; 1091 | } 1092 | .pr-5 { 1093 | padding-right: 50upx; 1094 | } 1095 | 1096 | //*图标 1097 | .star-icon { 1098 | color: #f56c6c; 1099 | font-size: 14upx; 1100 | margin-right: 4upx; 1101 | } 1102 | 1103 | /*重置element-ui样式*/ 1104 | //.el-checkbox__inner{ 1105 | // border: 1upx solid #bbb !important; 1106 | // width:15upx; 1107 | // height:15upx; 1108 | // 1109 | //} 1110 | .fixBtnToBottom { 1111 | position: fixed; 1112 | bottom: 0; 1113 | left: 50%; 1114 | transform: translate(-50%, 0); 1115 | z-index: 10; 1116 | height: 60upx; 1117 | background: #fff; 1118 | width: 100vw; 1119 | } 1120 | 1121 | /*element-ui样式重写*/ 1122 | 1123 | .resetElementDialogFull { 1124 | //.el-dialog{ 1125 | // margin-top: 0 !important; 1126 | // margin-bottom: 0 !important; 1127 | // padding-bottom: 60upx; 1128 | // height: 100%; 1129 | //} 1130 | .el-dialog__body { 1131 | padding-top: 10upx; 1132 | } 1133 | //.el-dialog__footer{ 1134 | // text-align: center; 1135 | //} 1136 | //.el-dialog__wrapper{ 1137 | // background: #fff; 1138 | //} 1139 | } 1140 | 1141 | //全局设置 1142 | body view { 1143 | line-height: 1; 1144 | font-size: 32px; //需要设置全局的字体大小不然h5和小程序字体大小会有偏差 1145 | } 1146 | h1, 1147 | h2, 1148 | h3, 1149 | h4, 1150 | h5, 1151 | h6 { 1152 | font-weight: 500; 1153 | font-size: 14upx; 1154 | } 1155 | span, 1156 | output { 1157 | display: inline-block; 1158 | } 1159 | 1160 | .wrapper { 1161 | width: 100%; 1162 | height: 100%; 1163 | padding: 50px; 1164 | } 1165 | 1166 | .special-icon { 1167 | width: 108px; 1168 | margin: 30px auto; 1169 | position: relative; 1170 | } 1171 | 1172 | .arrowLf:before { 1173 | position: absolute; 1174 | right: 20px; 1175 | top: 50%; 1176 | width: 16px; 1177 | height: 16px; 1178 | margin-top: -2px; 1179 | border-right: 1px solid #000; 1180 | border-bottom: 1px solid #000; 1181 | -webkit-transform: rotate(225deg); 1182 | content: ''; 1183 | } 1184 | 1185 | .arrowRt:before { 1186 | position: absolute; 1187 | right: 20px; 1188 | top: 5px; 1189 | width: 12px; 1190 | height: 12px; 1191 | border-right: 1px solid #000; 1192 | border-bottom: 1px solid #000; 1193 | transform: rotate(45deg); 1194 | -webkit-transform: rotate(45deg); 1195 | content: ''; 1196 | } 1197 | 1198 | .triangleLeft { 1199 | display: block; 1200 | width: 0; 1201 | height: 0; 1202 | overflow: hidden; 1203 | margin: 20px auto; 1204 | line-height: 0; 1205 | font-size: 0; 1206 | vertical-align: middle; 1207 | border-right: 10px solid red; 1208 | border-left: 0 none; 1209 | border-top: 10px solid transparent; 1210 | border-bottom: 10px solid transparent; 1211 | color: #ff3fff; 1212 | } 1213 | 1214 | .triangleRight { 1215 | display: block; 1216 | width: 0; 1217 | height: 0; 1218 | overflow: hidden; 1219 | line-height: 0; 1220 | font-size: 0; 1221 | vertical-align: middle; 1222 | border-left: 18px solid #a2cbfb; 1223 | border-right: 0 none; 1224 | border-top: 16px solid transparent; 1225 | border-bottom: 16px solid transparent; 1226 | color: #ff3fff; 1227 | } 1228 | --------------------------------------------------------------------------------