8个文件已删除
11个文件已添加
20个文件已修改
1 文件已重命名
| | |
| | | **/*/src/assets/iconfont/* |
| | | |
| | | **/*/src/TUIKit/**/* |
| | | |
| | | /packages/components/**/* |
| | |
| | | "build:staging": "cross-env vite build --mode staging", |
| | | "build:staging:jenkins": "cross-env NODE_OPTIONS=--max_old_space_size=16000 vite build --mode staging", |
| | | "preview": "vite preview", |
| | | "prepare": "husky install", |
| | | "lint": "eslint --ext .vue --ext .js --ext .ts src/", |
| | | "lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"", |
| | | "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/", |
| | | "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.cjs", |
| | | "lint:lint-staged": "lint-staged -c ../../.husky/lintstagedrc.cjs", |
| | | "openapi": "bole openapi", |
| | | "release": "release-it" |
| | | }, |
| | |
| | | export * from './validator'; |
| | | export * from './hrCompany'; |
| | | export * from './order'; |
| | | export * from './enterpriseMaterial'; |
| | | export * from './authentication'; |
| | | export * from './wallet'; |
| | |
| | | }, |
| | | alias: { |
| | | '@': path.resolve(__dirname, '..', 'src'), |
| | | '@life-payment/components': path.resolve( |
| | | __dirname, |
| | | '..', |
| | | 'node_modules', |
| | | '@life-payment/components' |
| | | ), |
| | | }, |
| | | sourceRoot: 'src', |
| | | outputRoot: `dist/${process.env.TARO_ENV}`, |
| | |
| | | { |
| | | "name": "@life-payment/h5", |
| | | "name": "@life-payment/taro", |
| | | "version": "1.0.0", |
| | | "private": true, |
| | | "description": "", |
| | |
| | | { |
| | | "miniprogramRoot": "dist/", |
| | | "miniprogramRoot": "dist/weapp/", |
| | | "description": "", |
| | | "setting": { |
| | | "urlCheck": false, |
| | |
| | | <template> |
| | | <scroll-view class="content-scroll-view-wrapper" :class="{ hasPaddingTop }" :scroll-y="true"> |
| | | <scroll-view |
| | | class="content-scroll-view-wrapper" |
| | | :class="{ hasPaddingTop, isNoWeb: !isWeb }" |
| | | :scroll-y="true" |
| | | > |
| | | <ContentView |
| | | :class="['content-scroll-view-wrapper-inner', props.allHeight ? 'all-height' : '']" |
| | | :paddingH="paddingH" |
| | |
| | | |
| | | <script setup lang="ts"> |
| | | import ContentView from './ContentView.vue'; |
| | | import { isWeb } from '@/utils/env'; |
| | | |
| | | defineOptions({ |
| | | name: 'ContentScrollView', |
| | |
| | | |
| | | .content-scroll-view-wrapper { |
| | | @include listScrollViewWithNoPadding; |
| | | background-color: $body-background-color; |
| | | |
| | | &.isNoWeb { |
| | | background-color: $body-background-color; |
| | | } |
| | | |
| | | &.hasPaddingTop { |
| | | padding-top: 20px; |
| | |
| | | <template> |
| | | <Portal.Host> |
| | | <div class="page-layout-wrapper" v-bind="$attrs"> |
| | | <div :class="['page-layout-wrapper', { isWeb: isWeb }]" v-bind="$attrs"> |
| | | <slot v-if="showNavigationBar" name="navigationBar"> |
| | | <CommonNavigationBar v-bind="_commonNavigationBarProps" /> |
| | | </slot> |
| | |
| | | import { useAuth } from '@/hooks'; |
| | | import { Portal } from 'senin-mini/components'; |
| | | import { usePickProps } from 'senin-mini/hooks'; |
| | | import { isWeb } from '@/utils/env'; |
| | | |
| | | defineOptions({ |
| | | name: 'PageLayout', |
| | |
| | | ); |
| | | |
| | | const navigationBarHeight = computed( |
| | | () => systemStore.info.statusBarHeight + systemStore.navigationBarHeight |
| | | () => (systemStore.info.statusBarHeight || 0) + systemStore.navigationBarHeight |
| | | ); |
| | | |
| | | const scrollViewHeight = computed(() => { |
| | |
| | | : systemStore.pageHeight; |
| | | pageHeight = pageHeight + (props.showNavigationBar ? 0 : navigationBarHeight.value); |
| | | return pageHeight + 'px'; |
| | | }); |
| | | |
| | | Taro.getSetting({ |
| | | success: function (res) { |
| | | if (!res.authSetting['scope.userLocation']) { |
| | | Taro.authorize({ |
| | | scope: 'scope.userLocation', |
| | | }); |
| | | } |
| | | }, |
| | | }); |
| | | </script> |
| | | |
| | |
| | | filter: blur(0px); |
| | | border-radius: 0px 0px 20px 20px; |
| | | } |
| | | |
| | | &.isWeb { |
| | | height: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | .page-layout-scroll-view-wrapper { |
| | | flex: 1; |
| | | min-height: 0; |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 644px; |
| | | height: 516px; |
| | | object-fit: cover; |
| | | } |
| | | </style> |
| | |
| | | const props = defineProps(commonNavigationBarProps); |
| | | |
| | | const router = Taro.useRouter(); |
| | | console.log('router: ', router); |
| | | |
| | | const isLastPage = computed(() => { |
| | | const pages = Taro.getCurrentPages(); |
| | |
| | | }); |
| | | |
| | | const isTabbarPage = computed(() => |
| | | Object.values(TabBarPageRouter).some((x) => x.toLowerCase() === router.path.toLowerCase()) |
| | | Object.values(TabBarPageRouter).some((x) => router.path.toLowerCase().includes(x.toLowerCase())) |
| | | ); |
| | | |
| | | const barStyle = computed(() => { |
| | |
| | | |
| | | export const OssAssets = { |
| | | common: { |
| | | CommonPageBg: `${OssBasePath}/flexJobMini/assets/common/icon-common-page-bg.png`, |
| | | CommonPageBg: `${OssBasePath}/matchMakingMini/assets/common/icon-common-page-bg.png`, |
| | | }, |
| | | mine: { |
| | | Bg: `${OssBasePath}/matchMakingMini/assets/mine/icon-bg.png`, |
| | |
| | | <template> |
| | | <PageLayoutWithBg class="index-page-wrapper" :title="''" :need-auth="false"> |
| | | <template #left> |
| | | <div class="menu-btn-wrapper menu-logo"> |
| | | <img :src="IconLogo" class="logo" /> |
| | | </div> |
| | | </template> |
| | | <div class="home-header"> |
| | | <div class="home-banner-wrapper"> |
| | | <nut-swiper :auto-play="3000"> |
| | | <nut-swiper-item v-for="(item, index) in list" :key="index"> |
| | | <img :src="item" class="banner-img" draggable="false" /> |
| | | </nut-swiper-item> |
| | | </nut-swiper> |
| | | </div> |
| | | </div> |
| | | <RechargeGrid /> |
| | | <PageLayoutWithBg class="index-page-wrapper" :title="'生活缴费'" :need-auth="false"> |
| | | <ContentView> |
| | | <RechargeGrid /> |
| | | </ContentView> |
| | | </PageLayoutWithBg> |
| | | </template> |
| | | |
| | |
| | | import Taro from '@tarojs/taro'; |
| | | import { defineStore } from 'pinia'; |
| | | import { store } from '@/stores'; |
| | | import { isWeb } from '@/utils/env'; |
| | | |
| | | export interface Options { |
| | | path: string; |
| | |
| | | this.screenWidth = info.screenWidth; |
| | | |
| | | this.IPhoneXPadding = info.screenHeight - info.safeArea.bottom; |
| | | this.navHeight = info.statusBarHeight + this.navigationBarHeight; |
| | | this.navHeight = (info.statusBarHeight || 0) + this.navigationBarHeight; |
| | | |
| | | this.safeAreaTop = info.safeArea.top; |
| | | |
| | |
| | | */ |
| | | this.bottomNavHeight = 118 * scale; |
| | | |
| | | this.pageHeight = info.screenHeight - this.navHeight - this.IPhoneXPadding; // 无底部tabber |
| | | this.pageHeight = info.screenHeight - this.navHeight - (isWeb ? 0 : this.IPhoneXPadding); // 无底部tabber |
| | | this.pageHeightWithTab = this.pageHeight - this.bottomNavHeight; // 有底部tabber |
| | | }, |
| | | |
| | |
| | | sessionKey: wxMiniAppUserLoginRes.sessionKey, |
| | | encryptedData: detail.encryptedData, |
| | | iv: detail.iv, |
| | | wxMiniApp: WxMiniAppEnum.C端小程序, |
| | | // wxMiniApp: WxMiniAppEnum.C端小程序, |
| | | }; |
| | | res = await accountServices.wxMiniAppPhoneAuthLogin(params); |
| | | this.loginSuccess(res); |
| | |
| | | sessionKey: wxIndentityRes.sessionKey, |
| | | encryptedData: detail.encryptedData, |
| | | iv: detail.iv, |
| | | wxMiniApp: WxMiniAppEnum.C端小程序, |
| | | // wxMiniApp: WxMiniAppEnum.C端小程序, |
| | | }); |
| | | this.loginSuccess(res); |
| | | return res; |
| | |
| | | @use './font.scss' as *; |
| | | @use 'sass:map'; |
| | | @use 'senin-mini/dist/styles/index.scss' as *; |
| | | @use '@life-payment/components/src/styles/index.scss' as *; |
| | | |
| | | :root, |
| | | page { |
| | |
| | | import cryptoJs from 'crypto-js'; |
| | | import { Base64 } from 'js-base64'; |
| | | import { OssResource, OSSBaseURL } from '@life-payment/constants'; |
| | | import { getFileExtension, setOSSLink } from '@life-payment/utils'; |
| | | import { setOSSLink } from '@life-payment/utils'; |
| | | import { getFileExtension } from '@/utils'; |
| | | import { Message } from './message'; |
| | | import { OssSTS } from './ossSTS'; |
| | | |
New file |
| | |
| | | import { getPlatform } from './universal-api/index'; |
| | | |
| | | export const isPC = getPlatform() === 'pc'; |
| | | |
| | | export const isH5 = getPlatform() === 'h5'; |
| | | |
| | | export const isWeChat = getPlatform() === 'wechat'; |
| | | |
| | | export const isApp = getPlatform() === 'app'; |
| | | |
| | | // export const isUniFrameWork = typeof window.uni !== 'undefined'; |
| | | |
| | | // H5、小程序、app 均认为是手机端产品,如果需要统一手机端 UI 样式,可以直接用 isMobile 控制 |
| | | export const isMobile = isH5 || isWeChat || isApp; |
| | | export const isWeb = isH5 || isPC; |
New file |
| | |
| | | const n = |
| | | 'undefined' !== typeof wx && |
| | | 'function' === typeof wx.getSystemInfoSync && |
| | | Boolean(wx.getSystemInfoSync().fontSizeSetting), |
| | | e = 'undefined' !== typeof window.uni && 'undefined' === typeof window, |
| | | t = n || e, |
| | | i = 'undefined' !== typeof window.uni, |
| | | o = ('undefined' !== typeof window.uni || 'undefined' !== typeof window) && !t, |
| | | d = n ? wx : i ? window.uni : window, |
| | | f = (o && window && window.navigator && window.navigator.userAgent) || '', |
| | | w = /Android/i.test(f), |
| | | s = /(?:Windows Phone)/.test(f), |
| | | u = /(?:SymbianOS)/.test(f), |
| | | a = /iPad/i.test(f) || /iPhone/i.test(f) || /iPod/i.test(f), |
| | | y = n, |
| | | p = w || s || u || a, |
| | | S = o && !p, |
| | | c = e && !n; |
| | | function r() { |
| | | let n = ''; |
| | | return S ? (n = 'pc') : p ? (n = 'h5') : y ? (n = 'wechat') : c && (n = 'app'), n; |
| | | } |
| | | export { d as TUIGlobal, r as getPlatform }; |
| | |
| | | "name": "@life-payment/components", |
| | | "private": true, |
| | | "main": "src/index.ts", |
| | | "version": "0.0.1" |
| | | "module": "./src/index.ts", |
| | | "version": "0.0.1", |
| | | "exports": { |
| | | ".": { |
| | | "import": "./src/index.ts", |
| | | "require": "./src/index.ts" |
| | | }, |
| | | "./src/styles/index.scss": { |
| | | "import": "./src/styles/index.scss" |
| | | }, |
| | | "./*": "./*" |
| | | }, |
| | | "devDependencies": { |
| | | "@nutui/icons-vue-taro": "0.0.9", |
| | | "@nutui/nutui-taro": "4.3.13", |
| | | "vue": "3.5.12" |
| | | }, |
| | | "peerDependencies": { |
| | | "@nutui/icons-vue-taro": "0.0.9", |
| | | "@nutui/nutui-taro": "4.3.13", |
| | | "vue": "3.5.12" |
| | | } |
| | | } |
| | |
| | | <template> |
| | | <div></div> |
| | | <div>Grid</div> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | |
| | | |
| | | // const props = withDefaults(defineProps<Props>(), {}); |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | @import '@/styles/common.scss'; |
| | | </style> |
New file |
| | |
| | | <template> |
| | | <div class="main-cell-container"> |
| | | <div class="main-cell-wrapper"> |
| | | <div class="main-cell-title">{{ title }}</div> |
| | | <div class="main-cell-icon" v-if="$slots.icon"> |
| | | <slot name="icon" /> |
| | | </div> |
| | | <slot /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | defineOptions({ |
| | | name: 'MainCell', |
| | | }); |
| | | |
| | | type Props = { |
| | | title?: string; |
| | | }; |
| | | |
| | | const props = withDefaults(defineProps<Props>(), {}); |
| | | </script> |
New file |
| | |
| | | @forward './var.scss'; |
| | | @forward './function.scss'; |
| | | @forward './hairline.scss'; |
| | | @forward './mixins.scss'; |
| | | @forward 'sass:map'; |
New file |
| | |
| | | $bole-namespace: 'bole' !default; |
| | | $bole-separator: '-' !default; |
| | | $bole-element-separator: '__' !default; |
| | | $bole-modifier-separator: '--' !default; |
| | | $bole-state-prefix: 'is-' !default; |
New file |
| | |
| | | /* stylelint-disable */ |
| | | @use 'sass:map'; |
| | | @use './config.scss'; |
| | | |
| | | @mixin bole-set-css-var-value($name, $value) { |
| | | #{boleJoinVarName($name)}: #{$value}; |
| | | } |
| | | |
| | | @function boleJoinVarName($list) { |
| | | $name: '--' + config.$bole-namespace; |
| | | |
| | | @each $item in $list { |
| | | @if $item != '' { |
| | | $name: $name + '-' + $item; |
| | | } |
| | | } |
| | | |
| | | @return $name; |
| | | } |
| | | |
| | | // getCssVar('button', 'text-color') => var(--bole-button-text-color) |
| | | @function boleGetCssVar($args...) { |
| | | @return var(#{boleJoinVarName($args)}); |
| | | } |
| | | |
| | | // getCssVarName('button', 'text-color') => '--bole-button-text-color' |
| | | @function boleGetCssVarName($args...) { |
| | | @return boleJoinVarName($args); |
| | | } |
| | | |
| | | // getCssVarWithDefault(('button', 'text-color'), red) => var(--el-button-text-color, red) |
| | | @function boleGetCssVarWithDefault($args, $default) { |
| | | @return var(#{boleJoinVarName($args)}, #{$default}); |
| | | } |
| | | |
| | | // set all css var for component by map |
| | | @mixin bole-set-component-css-var($name, $variables) { |
| | | @each $attribute, $value in $variables { |
| | | @if $attribute == 'default' { |
| | | #{boleGetCssVarName($name)}: #{$value}; |
| | | } @else { |
| | | #{boleGetCssVarName($name, $attribute)}: #{$value}; |
| | | } |
| | | } |
| | | } |
| | | |
| | | // bem('block', 'element', 'modifier') => 'el-block__element--modifier' |
| | | @function bem($block, $element: '', $modifier: '') { |
| | | $name: config.$bole-namespace + config.$bole-separator + $block; |
| | | |
| | | @if $element != '' { |
| | | $name: $name + config.$bole-element-separator + $element; |
| | | } |
| | | |
| | | @if $modifier != '' { |
| | | $name: $name + config.$bole-modifier-separator + $modifier; |
| | | } |
| | | |
| | | // @debug $name; |
| | | @return $name; |
| | | } |
| | | |
| | | @mixin bole-set-css-color-type($colors, $type) { |
| | | @include bole-set-css-var-value(('color', $type), map.get($colors, $type, 'base')); |
| | | |
| | | @each $i in (3, 5, 7, 8, 9) { |
| | | @include bole-set-css-var-value( |
| | | ('color', $type, 'light', $i), |
| | | map.get($colors, $type, 'light-#{$i}') |
| | | ); |
| | | } |
| | | |
| | | @include bole-set-css-var-value(('color', $type, 'dark-2'), map.get($colors, $type, 'dark-2')); |
| | | } |
| | | |
| | | @function mapGet($args1, $args2) { |
| | | @return map.get($args1, $args2); |
| | | } |
New file |
| | |
| | | $color-border-light: #eaeaea; |
| | | |
| | | @mixin hairline-common() { |
| | | content: ''; |
| | | position: absolute; |
| | | transform-origin: center; |
| | | box-sizing: border-box; |
| | | pointer-events: none; |
| | | } |
| | | |
| | | @mixin hairline() { |
| | | @include hairline-common(); |
| | | top: -50%; |
| | | right: -50%; |
| | | bottom: -50%; |
| | | left: -50%; |
| | | border: 0 solid $color-border-light; |
| | | transform: scale(0.5); |
| | | } |
| | | |
| | | @mixin hairline-base($color: $color-border-light, $style: solid) { |
| | | @include hairline-common(); |
| | | |
| | | top: -50%; |
| | | left: -50%; |
| | | right: -50%; |
| | | bottom: -50%; |
| | | border: 0 $style $color; |
| | | transform: scale(0.5); |
| | | } |
| | | |
| | | @mixin hairline-surround($color: $color-border-light, $style: solid, $width: 1px) { |
| | | position: relative; |
| | | |
| | | &::after { |
| | | @include hairline-base($color, $style); |
| | | |
| | | border-width: $width; |
| | | } |
| | | } |
| | | |
| | | @mixin hairline-top($color: $color-border-light, $style: solid, $width: 1px) { |
| | | position: relative; |
| | | |
| | | &::after { |
| | | @include hairline-base($color, $style); |
| | | |
| | | border-top-width: $width; |
| | | } |
| | | } |
| | | |
| | | @mixin hairline-bottom($color: $color-border-light, $style: solid, $width: 1px) { |
| | | position: relative; |
| | | |
| | | &::after { |
| | | @include hairline-base($color, $style); |
| | | |
| | | border-bottom-width: $width; |
| | | } |
| | | } |
| | | |
| | | @mixin hairline-left($color: $color-border-light, $style: solid, $width: 1px) { |
| | | position: relative; |
| | | |
| | | &::after { |
| | | @include hairline-base($color, $style); |
| | | |
| | | border-left-width: $width; |
| | | } |
| | | } |
| | | |
| | | @mixin hairline-right($color: $color-border-light, $style: solid, $width: 1px) { |
| | | position: relative; |
| | | |
| | | &::after { |
| | | @include hairline-base($color, $style); |
| | | |
| | | border-right-width: $width; |
| | | } |
| | | } |
| | | |
| | | @mixin hairline-top-bottom($color: $color-border-light, $style: solid, $width: 1px) { |
| | | position: relative; |
| | | |
| | | &::after { |
| | | @include hairline-base($color, $style); |
| | | |
| | | border-top-width: $width; |
| | | border-bottom-width: $width; |
| | | } |
| | | } |
| | | |
| | | @mixin hairline-bottom-relative($color: $color-border-light, $style: solid, $width: 1px, $left: 0) { |
| | | position: relative; |
| | | |
| | | &::after { |
| | | @include hairline-common(); |
| | | |
| | | top: auto; |
| | | left: $left; |
| | | right: 0; |
| | | bottom: 0; |
| | | transform: scaleY(0.5); |
| | | border-bottom: $width $style $color; |
| | | } |
| | | } |
| | | |
| | | @mixin hairline-top-relative($color: $color-border-light, $style: solid, $width: 1px, $left: 0) { |
| | | position: relative; |
| | | |
| | | &::before { |
| | | @include hairline-common(); |
| | | |
| | | top: 0; |
| | | left: $left; |
| | | right: 0; |
| | | bottom: auto; |
| | | transform: scaleY(0.5); |
| | | border-top: $width $style $color; |
| | | } |
| | | } |
| | | |
| | | @mixin hairline-left-relative($color: $color-border-light, $style: solid, $width: 1px, $top: 0) { |
| | | position: relative; |
| | | |
| | | &::after { |
| | | @include hairline-common(); |
| | | |
| | | top: $top; |
| | | left: 0; |
| | | right: auto; |
| | | bottom: 0; |
| | | transform: scaleX(0.5); |
| | | border-left: $width $style $color; |
| | | } |
| | | } |
| | | |
| | | @mixin hairline-right-relative($color: $color-border-light, $style: solid, $width: 1px, $top: 0) { |
| | | position: relative; |
| | | |
| | | &::after { |
| | | @include hairline-common(); |
| | | |
| | | top: $top; |
| | | left: auto; |
| | | right: 0; |
| | | bottom: 0; |
| | | transform: scaleX(0.5); |
| | | border-right: $width $style $color; |
| | | } |
| | | } |
| | | |
| | | .van-hairline--bottom { |
| | | @include hairline-bottom(#ddd, 0, 0); |
| | | } |
| | | |
| | | [class*='van-hairline'] { |
| | | &::after { |
| | | @include hairline(); |
| | | } |
| | | } |
| | | |
| | | .van-hairline { |
| | | &, |
| | | &--top, |
| | | &--left, |
| | | &--right, |
| | | &--bottom, |
| | | &--surround, |
| | | &--top-bottom { |
| | | position: relative; |
| | | } |
| | | |
| | | &--top::after { |
| | | border-top-width: 1px; |
| | | } |
| | | |
| | | &--left::after { |
| | | border-left-width: 1px; |
| | | } |
| | | |
| | | &--right::after { |
| | | border-right-width: 1px; |
| | | } |
| | | |
| | | &--bottom::after { |
| | | border-bottom-width: 1px; |
| | | } |
| | | |
| | | &, |
| | | &-unset { |
| | | &--top-bottom::after { |
| | | border-width: 1px 0; |
| | | } |
| | | } |
| | | |
| | | &--surround::after { |
| | | border-width: 1px; |
| | | } |
| | | } |
New file |
| | |
| | | @use 'sass:map'; |
| | | @use './var.scss' as *; |
| | | @use './function.scss' as *; |
| | | @use './layout.scss' as *; |
| | | |
| | | :root, |
| | | page { |
| | | @include bole-set-component-css-var('color', $bole-colors); |
| | | @include bole-set-component-css-var('text-color', $bole-text-color); |
| | | @include bole-set-component-css-var('size', $bole-size); |
| | | background-color: map-get($bole-colors, 'body-background-color'); |
| | | |
| | | --primary-color: #{map-get($bole-colors, 'primary')}; |
| | | overflow: hidden; |
| | | |
| | | --nut-primary-color: #{map-get($bole-colors, 'primary')}; |
| | | --nut-primary-color-end: $primary-color-end; |
| | | |
| | | --nut-tag-success-background-color: #d0f8e2; |
| | | --nut-tag-danger-background-color: #ffe5e5; |
| | | |
| | | --nut-badge-background-color: #{map-get($bole-colors, 'danger')}; |
| | | } |
New file |
| | |
| | | /*postcss-pxtransform disable*/ |
| | | @use './common.scss' as *; |
| | | |
| | | .main-cell-container { |
| | | padding-top: 92px; |
| | | .main-cell-wrapper { |
| | | padding: boleGetCssVar('size', 'body-padding-h'); |
| | | padding-top: 24px; |
| | | border-radius: 15px; |
| | | background: #ffffff; |
| | | box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05); |
| | | |
| | | .main-cell-title { |
| | | font-size: 20px; |
| | | font-weight: 600; |
| | | text-align: center; |
| | | color: #000000; |
| | | line-height: 28px; |
| | | } |
| | | |
| | | .main-cell-icon { |
| | | display: flex; |
| | | justify-content: center; |
| | | margin-top: 20px; |
| | | } |
| | | } |
| | | } |
New file |
| | |
| | | @use './var.scss' as *; |
| | | |
| | | @mixin multi-ellipsis($lines) { |
| | | display: -webkit-box; |
| | | |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | -webkit-line-clamp: $lines; |
| | | -webkit-box-orient: vertical; |
| | | } |
| | | |
| | | @mixin ellipsis() { |
| | | overflow: hidden; |
| | | white-space: nowrap; |
| | | text-overflow: ellipsis; |
| | | } |
| | | |
| | | .ellipsis { |
| | | @include ellipsis(); |
| | | } |
| | | |
| | | .multi-ellipsis--l2 { |
| | | @include multi-ellipsis(2); |
| | | } |
| | | |
| | | .multi-ellipsis--l3 { |
| | | @include multi-ellipsis(3); |
| | | } |
| | | |
| | | .multi-ellipsis--l9 { |
| | | @include multi-ellipsis(9); |
| | | } |
| | | |
| | | @mixin infiniteLoadingInTabBarPage { |
| | | .loading-more-tips, |
| | | .infiniting-tips { |
| | | padding-bottom: 40px; |
| | | } |
| | | } |
| | | |
| | | @mixin safe-area-bottom() { |
| | | padding-bottom: constant(safe-area-inset-bottom); |
| | | padding-bottom: env(safe-area-inset-bottom); |
| | | } |
| | | |
| | | @mixin listScrollViewWithNoPadding { |
| | | flex: 1; |
| | | min-height: 0; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | @mixin listScrollView { |
| | | padding: 0 map-get($bole-size, 'body-padding-h'); |
| | | @include listScrollViewWithNoPadding; |
| | | } |
| | | |
| | | @mixin infiniteLoadingInTabBarPage { |
| | | .loading-more-tips, |
| | | .infiniting-tips { |
| | | padding-bottom: 50px; |
| | | } |
| | | } |
| | | |
| | | @mixin ScrollViewInner { |
| | | // padding: 20PX 0; |
| | | padding-bottom: 24px; |
| | | } |
| | | |
| | | @mixin hiddenScrollBar { |
| | | ::-webkit-scrollbar { |
| | | display: none; |
| | | width: 0; |
| | | height: 0; |
| | | color: transparent; |
| | | } |
| | | } |
New file |
| | |
| | | @use 'sass:map'; |
| | | @use 'sass:math'; |
| | | |
| | | $bole-colors: () !default; |
| | | $bole-colors: map.deep-merge( |
| | | ( |
| | | 'primary': #3a71ff, |
| | | 'body-background-color': #f9f9fb, |
| | | 'title-color': #444444, |
| | | 'shadow-color': rgba(0, 0, 0, 0.15), |
| | | 'warning': #ff7d00, |
| | | 'danger': #fe3333, |
| | | 'success': #31b573, |
| | | 'info': #e9e8e8, |
| | | ), |
| | | $bole-colors |
| | | ); |
| | | |
| | | $bole-text-color: ( |
| | | 'primary': #333333, |
| | | 'regular': #666666, |
| | | 'secondary': #999999, |
| | | 'placeholder': #cbcbcb, |
| | | ); |
| | | |
| | | $bole-size: () !default; |
| | | $bole-size: map.deep-merge( |
| | | ( |
| | | 'body-padding-h': 28px, |
| | | ), |
| | | $bole-size |
| | | ); |
| | | |
| | | $base-footer-box-shadow: 0px -10px 40px 0px map-get($bole-colors, 'shadow-color'); |
| | |
| | | <template> |
| | | <div>RechargeGrid</div> |
| | | <MainCell title="生活缴费"> |
| | | <Grid square :gutter="20" :column-num="2"> |
| | | <GridItem class="publish-circle-friend-file-grid-item" text="话费"> |
| | | <Dongdong /> |
| | | </GridItem> |
| | | <GridItem class="publish-circle-friend-file-grid-item" text="电费"> |
| | | <Dongdong /> |
| | | </GridItem> |
| | | </Grid> |
| | | </MainCell> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import MainCell from '../../components/Layout/MainCell.vue'; |
| | | // import Grid from '../../components/Grid/Grid.vue'; |
| | | import { Grid, GridItem } from '@nutui/nutui-taro'; |
| | | import { Dongdong } from '@nutui/icons-vue-taro'; |
| | | |
| | | defineOptions({ |
| | | name: 'RechargeGrid', |
| | | }); |
| | |
| | | |
| | | // const props = withDefaults(defineProps<Props>(), {}); |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | @import '@/styles/common.scss'; |
| | | </style> |