Commit bf5df656edc7b98201d19d2855ceefc0f17c3cce
1 parent
79d55aa3
初始化管理后台的 uniapp 版本
Showing
353 changed files
with
43224 additions
and
2 deletions
Too many changes.
To preserve performance only 100 of 353 files are displayed.
yudao-module-system/yudao-module-system-biz/src/main/java/cn/iocoder/yudao/module/system/controller/admin/user/UserProfileController.java
| ... | ... | @@ -95,7 +95,7 @@ public class UserProfileController { |
| 95 | 95 | return success(true); |
| 96 | 96 | } |
| 97 | 97 | |
| 98 | - @PutMapping("/update-avatar") | |
| 98 | + @RequestMapping(value = "/update-avatar", method = {RequestMethod.POST, RequestMethod.PUT}) // 解决 uni-app 不支持 Put 上传文件的问题 | |
| 99 | 99 | @ApiOperation("上传用户个人头像") |
| 100 | 100 | public CommonResult<String> updateUserAvatar(@RequestParam("avatarFile") MultipartFile file) throws Exception { |
| 101 | 101 | if (file.isEmpty()) { | ... | ... |
yudao-ui-admin-uniapp/.gitignore
0 → 100644
| 1 | +###################################################################### | |
| 2 | +# Build Tools | |
| 3 | + | |
| 4 | +/unpackage/* | |
| 5 | +/node_modules/* | |
| 6 | + | |
| 7 | +###################################################################### | |
| 8 | +# Development Tools | |
| 9 | + | |
| 10 | +/.idea/* | |
| 11 | +/.vscode/* | |
| 12 | +/.hbuilderx/* | |
| 13 | + | |
| 14 | +package-lock.json | |
| 15 | +yarn.lock | |
| 16 | + | ... | ... |
yudao-ui-admin-uniapp/App.vue
0 → 100644
| 1 | +<script> | |
| 2 | + import config from './config' | |
| 3 | + import store from '@/store' | |
| 4 | + import { getAccessToken } from '@/utils/auth' | |
| 5 | + | |
| 6 | + export default { | |
| 7 | + onLaunch: function() { | |
| 8 | + this.initApp() | |
| 9 | + }, | |
| 10 | + methods: { | |
| 11 | + // 初始化应用 | |
| 12 | + initApp() { | |
| 13 | + // 初始化应用配置 | |
| 14 | + this.initConfig() | |
| 15 | + // 检查用户登录状态 | |
| 16 | + //#ifdef H5 | |
| 17 | + this.checkLogin() | |
| 18 | + //#endif | |
| 19 | + }, | |
| 20 | + initConfig() { | |
| 21 | + this.globalData.config = config | |
| 22 | + }, | |
| 23 | + checkLogin() { | |
| 24 | + if (!getAccessToken()) { | |
| 25 | + this.$tab.reLaunch('/pages/login') | |
| 26 | + } | |
| 27 | + } | |
| 28 | + } | |
| 29 | + } | |
| 30 | +</script> | |
| 31 | + | |
| 32 | +<style lang="scss"> | |
| 33 | + @import '@/static/scss/index.scss' | |
| 34 | +</style> | ... | ... |
yudao-ui-admin-uniapp/LICENSE
0 → 100644
| 1 | +MIT License | |
| 2 | + | |
| 3 | +Copyright (c) 2022 芋道 | |
| 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. | ... | ... |
yudao-ui-admin-uniapp/README.md
0 → 100644
| 1 | +<p align="center"> | |
| 2 | + <img alt="logo" src="https://oscimg.oschina.net/oscnet/up-43e3941654fa3054c9684bf53d1b1d356a1.png"> | |
| 3 | +</p> | |
| 4 | +<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">RuoYi v1.0.0</h1> | |
| 5 | +<h4 align="center">基于UniApp开发的轻量级移动端框架</h4> | |
| 6 | +<p align="center"> | |
| 7 | + <a href="https://gitee.com/y_project/RuoYi-App/stargazers"><img src="https://gitee.com/y_project/RuoYi-App/badge/star.svg?theme=dark"></a> | |
| 8 | + <a href="https://gitee.com/y_project/RuoYi-App"><img src="https://img.shields.io/badge/RuoYi-v1.0.0-brightgreen.svg"></a> | |
| 9 | + <a href="https://gitee.com/y_project/RuoYi-App/blob/master/LICENSE"><img src="https://img.shields.io/github/license/mashape/apistatus.svg"></a> | |
| 10 | +</p> | |
| 11 | + | |
| 12 | +## 平台简介 | |
| 13 | + | |
| 14 | +RuoYi App 移动解决方案,采用uniapp框架,一份代码多终端适配,同时支持APP、小程序、H5!实现了与[RuoYi-Vue](https://gitee.com/y_project/RuoYi-Vue)、[RuoYi-Cloud](https://gitee.com/y_project/RuoYi-Cloud)完美对接的移动解决方案!目前已经实现登录、我的、工作台、编辑资料、头像修改、密码修改、常见问题、关于我们等基础功能。 | |
| 15 | + | |
| 16 | +* 配套后端代码仓库地址[RuoYi-Vue](https://gitee.com/y_project/RuoYi-Vue) 或 [RuoYi-Cloud](https://github.com/yangzongzhuan/RuoYi-Cloud) 版本。 | |
| 17 | +* 应用框架基于[uniapp](https://uniapp.dcloud.net.cn/),支持小程序、H5、Android和IOS。 | |
| 18 | +* 前端组件采用[uni-ui](https://github.com/dcloudio/uni-ui),全端兼容的高性能UI框架。 | |
| 19 | + | |
| 20 | +## 技术文档 | |
| 21 | + | |
| 22 | +<img src="https://oscimg.oschina.net/oscnet/up-26c76dc90b92acdbd9ac8cd5252f07c8ad9.jpg" alt="小程序演示"/> | |
| 23 | + | |
| 24 | + | |
| 25 | +## 演示图 | |
| 26 | + | |
| 27 | +<table> | |
| 28 | + <tr> | |
| 29 | + <td><img src="https://oscimg.oschina.net/oscnet/up-3ea20e447ac621a161e395fb53ccc683d84.png"/></td> | |
| 30 | + <td><img src="https://oscimg.oschina.net/oscnet/up-a6f23cf9a371a30165e135eff6d9ae89a9d.png"/></td> | |
| 31 | + <td><img src="https://oscimg.oschina.net/oscnet/up-ff5f62016bf6624c1ff27eee57499dccd44.png"/></td> | |
| 32 | + </tr> | |
| 33 | + <tr> | |
| 34 | + <td><img src="https://oscimg.oschina.net/oscnet/up-b9a582fdb26ec69d407fabd044d2c8494df.png"/></td> | |
| 35 | + <td><img src="https://oscimg.oschina.net/oscnet/up-96427ee08fca29d77934cfc8d1b1a637cef.png"/></td> | |
| 36 | + <td><img src="https://oscimg.oschina.net/oscnet/up-5fdadc582d24cccd7727030d397b63185a3.png"/></td> | |
| 37 | + </tr> | |
| 38 | + <tr> | |
| 39 | + <td><img src="https://oscimg.oschina.net/oscnet/up-0a36797b6bcc50c36d40c3c782665b89efc.png"/></td> | |
| 40 | + <td><img src="https://oscimg.oschina.net/oscnet/up-d77995cc00687cedd00d5ac7d68a07ea276.png"/></td> | |
| 41 | + <td><img src="https://oscimg.oschina.net/oscnet/up-fa8f5ab20becf59b4b38c1b92a9989e7109.png"/></td> | |
| 42 | + </tr> | |
| 43 | +</table> | ... | ... |
yudao-ui-admin-uniapp/api/login.js
0 → 100644
| 1 | +import request from '@/utils/request' | |
| 2 | + | |
| 3 | +// 登录方法 | |
| 4 | +export function login(username, password, code, uuid) { | |
| 5 | + const data = { | |
| 6 | + username, | |
| 7 | + password, | |
| 8 | + code, | |
| 9 | + uuid | |
| 10 | + } | |
| 11 | + return request({ | |
| 12 | + url: '/system/auth/login', | |
| 13 | + headers: { | |
| 14 | + isToken: false | |
| 15 | + }, | |
| 16 | + 'method': 'post', | |
| 17 | + 'data': data | |
| 18 | + }) | |
| 19 | +} | |
| 20 | + | |
| 21 | +// 获取用户详细信息 | |
| 22 | +export function getInfo() { | |
| 23 | + return request({ | |
| 24 | + url: '/system/auth/get-permission-info', | |
| 25 | + 'method': 'get' | |
| 26 | + }) | |
| 27 | +} | |
| 28 | + | |
| 29 | +// 退出方法 | |
| 30 | +export function logout() { | |
| 31 | + return request({ | |
| 32 | + url: '/system/auth/logout', | |
| 33 | + 'method': 'post' | |
| 34 | + }) | |
| 35 | +} | |
| 36 | + | |
| 37 | +// 获取验证码 | |
| 38 | +export function getCodeImg() { | |
| 39 | + return request({ | |
| 40 | + url: '/system/captcha/get-image', | |
| 41 | + headers: { | |
| 42 | + isToken: false | |
| 43 | + }, | |
| 44 | + method: 'get', | |
| 45 | + timeout: 20000 | |
| 46 | + }) | |
| 47 | +} | ... | ... |
yudao-ui-admin-uniapp/api/system/user.js
0 → 100644
| 1 | +import upload from '@/utils/upload' | |
| 2 | +import request from '@/utils/request' | |
| 3 | + | |
| 4 | +// 用户密码重置 | |
| 5 | +export function updateUserPwd(oldPassword, newPassword) { | |
| 6 | + const data = { | |
| 7 | + oldPassword, | |
| 8 | + newPassword | |
| 9 | + } | |
| 10 | + return request({ | |
| 11 | + url: '/system/user/profile/update-password', | |
| 12 | + method: 'put', | |
| 13 | + params: data | |
| 14 | + }) | |
| 15 | +} | |
| 16 | + | |
| 17 | +// 查询用户个人信息 | |
| 18 | +export function getUserProfile() { | |
| 19 | + return request({ | |
| 20 | + url: '/system/user/profile/get', | |
| 21 | + method: 'get' | |
| 22 | + }) | |
| 23 | +} | |
| 24 | + | |
| 25 | +// 修改用户个人信息 | |
| 26 | +export function updateUserProfile(data) { | |
| 27 | + return request({ | |
| 28 | + url: '/system/user/profile/update', | |
| 29 | + method: 'put', | |
| 30 | + data: data | |
| 31 | + }) | |
| 32 | +} | |
| 33 | + | |
| 34 | +// 用户头像上传 | |
| 35 | +export function uploadAvatar(data) { | |
| 36 | + return upload({ | |
| 37 | + url: '/system/user/profile/update-avatar', | |
| 38 | + method: 'put', | |
| 39 | + name: data.name, | |
| 40 | + filePath: data.filePath | |
| 41 | + }) | |
| 42 | +} | ... | ... |
yudao-ui-admin-uniapp/components/uni-section/uni-section.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="uni-section"> | |
| 3 | + <view class="uni-section-header" @click="onClick"> | |
| 4 | + <view class="uni-section-header__decoration" v-if="type" :class="type" /> | |
| 5 | + <slot v-else name="decoration"></slot> | |
| 6 | + | |
| 7 | + <view class="uni-section-header__content"> | |
| 8 | + <text :style="{'font-size':titleFontSize,'color':titleColor}" class="uni-section__content-title" :class="{'distraction':!subTitle}">{{ title }}</text> | |
| 9 | + <text v-if="subTitle" :style="{'font-size':subTitleFontSize,'color':subTitleColor}" class="uni-section-header__content-sub">{{ subTitle }}</text> | |
| 10 | + </view> | |
| 11 | + | |
| 12 | + <view class="uni-section-header__slot-right"> | |
| 13 | + <slot name="right"></slot> | |
| 14 | + </view> | |
| 15 | + </view> | |
| 16 | + | |
| 17 | + <view class="uni-section-content" :style="{padding: _padding}"> | |
| 18 | + <slot /> | |
| 19 | + </view> | |
| 20 | + </view> | |
| 21 | +</template> | |
| 22 | + | |
| 23 | +<script> | |
| 24 | + | |
| 25 | + /** | |
| 26 | + * Section 标题栏 | |
| 27 | + * @description 标题栏 | |
| 28 | + * @property {String} type = [line|circle|square] 标题装饰类型 | |
| 29 | + * @value line 竖线 | |
| 30 | + * @value circle 圆形 | |
| 31 | + * @value square 正方形 | |
| 32 | + * @property {String} title 主标题 | |
| 33 | + * @property {String} titleFontSize 主标题字体大小 | |
| 34 | + * @property {String} titleColor 主标题字体颜色 | |
| 35 | + * @property {String} subTitle 副标题 | |
| 36 | + * @property {String} subTitleFontSize 副标题字体大小 | |
| 37 | + * @property {String} subTitleColor 副标题字体颜色 | |
| 38 | + * @property {String} padding 默认插槽 padding | |
| 39 | + */ | |
| 40 | + | |
| 41 | + export default { | |
| 42 | + name: 'UniSection', | |
| 43 | + emits:['click'], | |
| 44 | + props: { | |
| 45 | + type: { | |
| 46 | + type: String, | |
| 47 | + default: '' | |
| 48 | + }, | |
| 49 | + title: { | |
| 50 | + type: String, | |
| 51 | + required: true, | |
| 52 | + default: '' | |
| 53 | + }, | |
| 54 | + titleFontSize: { | |
| 55 | + type: String, | |
| 56 | + default: '14px' | |
| 57 | + }, | |
| 58 | + titleColor:{ | |
| 59 | + type: String, | |
| 60 | + default: '#333' | |
| 61 | + }, | |
| 62 | + subTitle: { | |
| 63 | + type: String, | |
| 64 | + default: '' | |
| 65 | + }, | |
| 66 | + subTitleFontSize: { | |
| 67 | + type: String, | |
| 68 | + default: '12px' | |
| 69 | + }, | |
| 70 | + subTitleColor: { | |
| 71 | + type: String, | |
| 72 | + default: '#999' | |
| 73 | + }, | |
| 74 | + padding: { | |
| 75 | + type: [Boolean, String], | |
| 76 | + default: false | |
| 77 | + } | |
| 78 | + }, | |
| 79 | + computed:{ | |
| 80 | + _padding(){ | |
| 81 | + if(typeof this.padding === 'string'){ | |
| 82 | + return this.padding | |
| 83 | + } | |
| 84 | + | |
| 85 | + return this.padding?'10px':'' | |
| 86 | + } | |
| 87 | + }, | |
| 88 | + watch: { | |
| 89 | + title(newVal) { | |
| 90 | + if (uni.report && newVal !== '') { | |
| 91 | + uni.report('title', newVal) | |
| 92 | + } | |
| 93 | + } | |
| 94 | + }, | |
| 95 | + methods: { | |
| 96 | + onClick() { | |
| 97 | + this.$emit('click') | |
| 98 | + } | |
| 99 | + } | |
| 100 | + } | |
| 101 | +</script> | |
| 102 | +<style lang="scss" > | |
| 103 | + $uni-primary: #2979ff !default; | |
| 104 | + | |
| 105 | + .uni-section { | |
| 106 | + background-color: #fff; | |
| 107 | + .uni-section-header { | |
| 108 | + position: relative; | |
| 109 | + /* #ifndef APP-NVUE */ | |
| 110 | + display: flex; | |
| 111 | + /* #endif */ | |
| 112 | + flex-direction: row; | |
| 113 | + align-items: center; | |
| 114 | + padding: 12px 10px; | |
| 115 | + font-weight: normal; | |
| 116 | + | |
| 117 | + &__decoration{ | |
| 118 | + margin-right: 6px; | |
| 119 | + background-color: $uni-primary; | |
| 120 | + &.line { | |
| 121 | + width: 4px; | |
| 122 | + height: 12px; | |
| 123 | + border-radius: 10px; | |
| 124 | + } | |
| 125 | + | |
| 126 | + &.circle { | |
| 127 | + width: 8px; | |
| 128 | + height: 8px; | |
| 129 | + border-top-right-radius: 50px; | |
| 130 | + border-top-left-radius: 50px; | |
| 131 | + border-bottom-left-radius: 50px; | |
| 132 | + border-bottom-right-radius: 50px; | |
| 133 | + } | |
| 134 | + | |
| 135 | + &.square { | |
| 136 | + width: 8px; | |
| 137 | + height: 8px; | |
| 138 | + } | |
| 139 | + } | |
| 140 | + | |
| 141 | + &__content { | |
| 142 | + /* #ifndef APP-NVUE */ | |
| 143 | + display: flex; | |
| 144 | + /* #endif */ | |
| 145 | + flex-direction: column; | |
| 146 | + flex: 1; | |
| 147 | + color: #333; | |
| 148 | + | |
| 149 | + .distraction { | |
| 150 | + flex-direction: row; | |
| 151 | + align-items: center; | |
| 152 | + } | |
| 153 | + &-sub { | |
| 154 | + margin-top: 2px; | |
| 155 | + } | |
| 156 | + } | |
| 157 | + | |
| 158 | + &__slot-right{ | |
| 159 | + font-size: 14px; | |
| 160 | + } | |
| 161 | + } | |
| 162 | + | |
| 163 | + .uni-section-content{ | |
| 164 | + font-size: 14px; | |
| 165 | + } | |
| 166 | + } | |
| 167 | +</style> | ... | ... |
yudao-ui-admin-uniapp/config.js
0 → 100644
| 1 | +// 应用全局配置 | |
| 2 | +module.exports = { | |
| 3 | + // baseUrl: 'http://localhost:8080', | |
| 4 | + baseUrl: 'http://localhost:48080/admin-api', | |
| 5 | + // 应用信息 | |
| 6 | + appInfo: { | |
| 7 | + // 应用名称 | |
| 8 | + name: "yudao-app", | |
| 9 | + // 应用版本 | |
| 10 | + version: "1.0.0", | |
| 11 | + // 应用logo | |
| 12 | + logo: "/static/logo.png", | |
| 13 | + // 官方网站 | |
| 14 | + site_url: "https://iocoder.cn", | |
| 15 | + // 政策协议 | |
| 16 | + agreements: [{ | |
| 17 | + title: "隐私政策", | |
| 18 | + url: "https://iocoder.cn" | |
| 19 | + }, | |
| 20 | + { | |
| 21 | + title: "用户服务协议", | |
| 22 | + url: "https://iocoder.cn" | |
| 23 | + } | |
| 24 | + ] | |
| 25 | + } | |
| 26 | +} | ... | ... |
yudao-ui-admin-uniapp/main.js
0 → 100644
| 1 | +import Vue from 'vue' | |
| 2 | +import App from './App' | |
| 3 | +import store from './store' // store | |
| 4 | +import plugins from './plugins' // plugins | |
| 5 | +import './permission' // permission | |
| 6 | +Vue.use(plugins) | |
| 7 | + | |
| 8 | +Vue.config.productionTip = false | |
| 9 | +Vue.prototype.$store = store | |
| 10 | + | |
| 11 | +App.mpType = 'app' | |
| 12 | + | |
| 13 | +const app = new Vue({ | |
| 14 | + ...App | |
| 15 | +}) | |
| 16 | + | |
| 17 | +app.$mount() | ... | ... |
yudao-ui-admin-uniapp/manifest.json
0 → 100644
| 1 | +{ | |
| 2 | + "name" : "芋道移动端", | |
| 3 | + "appid" : "__UNI__25A9D80", | |
| 4 | + "description" : "", | |
| 5 | + "versionName" : "1.0.0", | |
| 6 | + "versionCode" : "100", | |
| 7 | + "transformPx" : false, | |
| 8 | + "app-plus" : { | |
| 9 | + "usingComponents" : true, | |
| 10 | + "nvueCompiler" : "uni-app", | |
| 11 | + "splashscreen" : { | |
| 12 | + "alwaysShowBeforeRender" : true, | |
| 13 | + "waiting" : true, | |
| 14 | + "autoclose" : true, | |
| 15 | + "delay" : 0 | |
| 16 | + }, | |
| 17 | + "modules" : {}, | |
| 18 | + "distribute" : { | |
| 19 | + "android" : { | |
| 20 | + "permissions" : [ | |
| 21 | + "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", | |
| 22 | + "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", | |
| 23 | + "<uses-permission android:name=\"android.permission.VIBRATE\"/>", | |
| 24 | + "<uses-permission android:name=\"android.permission.READ_LOGS\"/>", | |
| 25 | + "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", | |
| 26 | + "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", | |
| 27 | + "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", | |
| 28 | + "<uses-permission android:name=\"android.permission.CAMERA\"/>", | |
| 29 | + "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", | |
| 30 | + "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", | |
| 31 | + "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", | |
| 32 | + "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", | |
| 33 | + "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", | |
| 34 | + "<uses-feature android:name=\"android.hardware.camera\"/>", | |
| 35 | + "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" | |
| 36 | + ] | |
| 37 | + }, | |
| 38 | + "ios" : {}, | |
| 39 | + "sdkConfigs" : {} | |
| 40 | + } | |
| 41 | + }, | |
| 42 | + "quickapp" : {}, | |
| 43 | + "mp-weixin" : { | |
| 44 | + "appid" : "wxccd7e2a0911b3397", | |
| 45 | + "setting" : { | |
| 46 | + "urlCheck" : false, | |
| 47 | + "es6" : false, | |
| 48 | + "minified" : true, | |
| 49 | + "postcss" : true | |
| 50 | + }, | |
| 51 | + "optimization" : { | |
| 52 | + "subPackages" : true | |
| 53 | + }, | |
| 54 | + "usingComponents" : true | |
| 55 | + }, | |
| 56 | + "vueVersion" : "2", | |
| 57 | + "h5" : { | |
| 58 | + "template" : "static/index.html", | |
| 59 | + "devServer" : { | |
| 60 | + "port" : 9090, | |
| 61 | + "https" : false | |
| 62 | + }, | |
| 63 | + "title" : "Yudao-App", | |
| 64 | + "router" : { | |
| 65 | + "mode" : "hash", | |
| 66 | + "base" : "./" | |
| 67 | + } | |
| 68 | + } | |
| 69 | +} | ... | ... |
yudao-ui-admin-uniapp/pages.json
0 → 100644
| 1 | +{ | |
| 2 | + "pages": [{ | |
| 3 | + "path": "pages/login", | |
| 4 | + "style": { | |
| 5 | + "navigationBarTitleText": "登录" | |
| 6 | + } | |
| 7 | + }, { | |
| 8 | + "path": "pages/index", | |
| 9 | + "style": { | |
| 10 | + "navigationBarTitleText": "芋道移动端框架", | |
| 11 | + "navigationStyle": "custom" | |
| 12 | + } | |
| 13 | + }, { | |
| 14 | + "path": "pages/work/index", | |
| 15 | + "style": { | |
| 16 | + "navigationBarTitleText": "工作台" | |
| 17 | + } | |
| 18 | + }, { | |
| 19 | + "path": "pages/mine/index", | |
| 20 | + "style": { | |
| 21 | + "navigationBarTitleText": "我的" | |
| 22 | + } | |
| 23 | + }, { | |
| 24 | + "path": "pages/mine/avatar/index", | |
| 25 | + "style": { | |
| 26 | + "navigationBarTitleText": "修改头像" | |
| 27 | + } | |
| 28 | + }, { | |
| 29 | + "path": "pages/mine/info/index", | |
| 30 | + "style": { | |
| 31 | + "navigationBarTitleText": "个人信息" | |
| 32 | + } | |
| 33 | + }, { | |
| 34 | + "path": "pages/mine/info/edit", | |
| 35 | + "style": { | |
| 36 | + "navigationBarTitleText": "编辑资料" | |
| 37 | + } | |
| 38 | + }, { | |
| 39 | + "path": "pages/mine/pwd/index", | |
| 40 | + "style": { | |
| 41 | + "navigationBarTitleText": "修改密码" | |
| 42 | + } | |
| 43 | + }, { | |
| 44 | + "path": "pages/mine/setting/index", | |
| 45 | + "style": { | |
| 46 | + "navigationBarTitleText": "应用设置" | |
| 47 | + } | |
| 48 | + }, { | |
| 49 | + "path": "pages/mine/help/index", | |
| 50 | + "style": { | |
| 51 | + "navigationBarTitleText": "常见问题" | |
| 52 | + } | |
| 53 | + }, { | |
| 54 | + "path": "pages/mine/about/index", | |
| 55 | + "style": { | |
| 56 | + "navigationBarTitleText": "关于我们" | |
| 57 | + } | |
| 58 | + }, { | |
| 59 | + "path": "pages/common/webview/index", | |
| 60 | + "style": { | |
| 61 | + "navigationBarTitleText": "浏览网页" | |
| 62 | + } | |
| 63 | + }, { | |
| 64 | + "path": "pages/common/textview/index", | |
| 65 | + "style": { | |
| 66 | + "navigationBarTitleText": "浏览文本" | |
| 67 | + } | |
| 68 | + }], | |
| 69 | + "tabBar": { | |
| 70 | + "color": "#000000", | |
| 71 | + "selectedColor": "#000000", | |
| 72 | + "borderStyle": "white", | |
| 73 | + "backgroundColor": "#ffffff", | |
| 74 | + "list": [{ | |
| 75 | + "pagePath": "pages/index", | |
| 76 | + "iconPath": "static/images/tabbar/home.png", | |
| 77 | + "selectedIconPath": "static/images/tabbar/home_.png", | |
| 78 | + "text": "首页" | |
| 79 | + }, { | |
| 80 | + "pagePath": "pages/work/index", | |
| 81 | + "iconPath": "static/images/tabbar/work.png", | |
| 82 | + "selectedIconPath": "static/images/tabbar/work_.png", | |
| 83 | + "text": "工作台" | |
| 84 | + }, { | |
| 85 | + "pagePath": "pages/mine/index", | |
| 86 | + "iconPath": "static/images/tabbar/mine.png", | |
| 87 | + "selectedIconPath": "static/images/tabbar/mine_.png", | |
| 88 | + "text": "我的" | |
| 89 | + } | |
| 90 | + ] | |
| 91 | + }, | |
| 92 | + "globalStyle": { | |
| 93 | + "navigationBarTextStyle": "black", | |
| 94 | + "navigationBarTitleText": "RuoYi", | |
| 95 | + "navigationBarBackgroundColor": "#FFFFFF" | |
| 96 | + } | |
| 97 | +} | ... | ... |
yudao-ui-admin-uniapp/pages/common/textview/index.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view> | |
| 3 | + <uni-card class="view-title" :title="title"> | |
| 4 | + <text class="uni-body view-content">{{ content }}</text> | |
| 5 | + </uni-card> | |
| 6 | + </view> | |
| 7 | +</template> | |
| 8 | + | |
| 9 | +<script> | |
| 10 | + export default { | |
| 11 | + data() { | |
| 12 | + return { | |
| 13 | + title: '', | |
| 14 | + content: '' | |
| 15 | + } | |
| 16 | + }, | |
| 17 | + onLoad(options) { | |
| 18 | + this.title = options.title | |
| 19 | + this.content = options.content | |
| 20 | + uni.setNavigationBarTitle({ | |
| 21 | + title: options.title | |
| 22 | + }) | |
| 23 | + } | |
| 24 | + } | |
| 25 | +</script> | |
| 26 | + | |
| 27 | +<style scoped> | |
| 28 | + page { | |
| 29 | + background-color: #ffffff; | |
| 30 | + } | |
| 31 | + | |
| 32 | + .view-title { | |
| 33 | + font-weight: bold; | |
| 34 | + } | |
| 35 | + | |
| 36 | + .view-content { | |
| 37 | + font-size: 26rpx; | |
| 38 | + padding: 12px 5px 0; | |
| 39 | + color: #333; | |
| 40 | + line-height: 24px; | |
| 41 | + font-weight: normal; | |
| 42 | + } | |
| 43 | +</style> | ... | ... |
yudao-ui-admin-uniapp/pages/common/webview/index.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view v-if="params.url"> | |
| 3 | + <web-view :webview-styles="webviewStyles" :src="`${params.url}`"></web-view> | |
| 4 | + </view> | |
| 5 | +</template> | |
| 6 | + | |
| 7 | +<script> | |
| 8 | + export default { | |
| 9 | + data() { | |
| 10 | + return { | |
| 11 | + params: {}, | |
| 12 | + webviewStyles: { | |
| 13 | + progress: { | |
| 14 | + color: "#FF3333" | |
| 15 | + } | |
| 16 | + } | |
| 17 | + } | |
| 18 | + }, | |
| 19 | + props: { | |
| 20 | + src: { | |
| 21 | + type: [String], | |
| 22 | + default: null | |
| 23 | + } | |
| 24 | + }, | |
| 25 | + onLoad(event) { | |
| 26 | + this.params = event | |
| 27 | + if (event.title) { | |
| 28 | + uni.setNavigationBarTitle({ | |
| 29 | + title: event.title | |
| 30 | + }) | |
| 31 | + } | |
| 32 | + } | |
| 33 | + } | |
| 34 | +</script> | ... | ... |
yudao-ui-admin-uniapp/pages/index.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="content"> | |
| 3 | + <image class="logo" src="/static/logo.png"></image> | |
| 4 | + <view class="text-area"> | |
| 5 | + <text class="title">Hello 芋道</text> | |
| 6 | + </view> | |
| 7 | + </view> | |
| 8 | +</template> | |
| 9 | + | |
| 10 | +<script> | |
| 11 | + export default { | |
| 12 | + onLoad: function() { | |
| 13 | + } | |
| 14 | + } | |
| 15 | +</script> | |
| 16 | + | |
| 17 | +<style> | |
| 18 | + .content { | |
| 19 | + display: flex; | |
| 20 | + flex-direction: column; | |
| 21 | + align-items: center; | |
| 22 | + justify-content: center; | |
| 23 | + } | |
| 24 | + | |
| 25 | + .logo { | |
| 26 | + height: 200rpx; | |
| 27 | + width: 200rpx; | |
| 28 | + margin-top: 200rpx; | |
| 29 | + margin-left: auto; | |
| 30 | + margin-right: auto; | |
| 31 | + margin-bottom: 50rpx; | |
| 32 | + } | |
| 33 | + | |
| 34 | + .text-area { | |
| 35 | + display: flex; | |
| 36 | + justify-content: center; | |
| 37 | + } | |
| 38 | + | |
| 39 | + .title { | |
| 40 | + font-size: 36rpx; | |
| 41 | + color: #8f8f94; | |
| 42 | + } | |
| 43 | +</style> | ... | ... |
yudao-ui-admin-uniapp/pages/login.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="normal-login-container"> | |
| 3 | + <view class="logo-content align-center justify-center flex"> | |
| 4 | + <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix"> | |
| 5 | + </image> | |
| 6 | + <text class="title">芋道移动端登录</text> | |
| 7 | + </view> | |
| 8 | + <view class="login-form-content"> | |
| 9 | + <view class="input-item flex align-center"> | |
| 10 | + <view class="iconfont icon-user icon"></view> | |
| 11 | + <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" /> | |
| 12 | + </view> | |
| 13 | + <view class="input-item flex align-center"> | |
| 14 | + <view class="iconfont icon-password icon"></view> | |
| 15 | + <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" /> | |
| 16 | + </view> | |
| 17 | + <view class="input-item flex align-center" v-if="captchaEnabled"> | |
| 18 | + <view class="iconfont icon-code icon"></view> | |
| 19 | + <input v-model="loginForm.code" class="input" placeholder="请输入验证码" maxlength="5" /> | |
| 20 | + <image :src="codeUrl" @click="getCode" class="login-code-img"></image> | |
| 21 | + </view> | |
| 22 | + <view class="action-btn"> | |
| 23 | + <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button> | |
| 24 | + </view> | |
| 25 | + </view> | |
| 26 | + | |
| 27 | + <view class="xieyi text-center"> | |
| 28 | + <text class="text-grey1">登录即代表同意</text> | |
| 29 | + <text @click="handleUserAgrement" class="text-blue">《用户协议》</text> | |
| 30 | + <text @click="handlePrivacy" class="text-blue">《隐私协议》</text> | |
| 31 | + </view> | |
| 32 | + </view> | |
| 33 | +</template> | |
| 34 | + | |
| 35 | +<script> | |
| 36 | + import { getCodeImg } from '@/api/login' | |
| 37 | + | |
| 38 | + export default { | |
| 39 | + data() { | |
| 40 | + return { | |
| 41 | + codeUrl: "", | |
| 42 | + captchaEnabled: true, | |
| 43 | + globalConfig: getApp().globalData.config, | |
| 44 | + loginForm: { | |
| 45 | + username: "admin", | |
| 46 | + password: "admin123", | |
| 47 | + code: "", | |
| 48 | + uuid: '' | |
| 49 | + } | |
| 50 | + } | |
| 51 | + }, | |
| 52 | + created() { | |
| 53 | + this.getCode() | |
| 54 | + }, | |
| 55 | + methods: { | |
| 56 | + // 隐私协议 | |
| 57 | + handlePrivacy() { | |
| 58 | + let site = this.globalConfig.appInfo.agreements[0] | |
| 59 | + this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`) | |
| 60 | + }, | |
| 61 | + // 用户协议 | |
| 62 | + handleUserAgrement() { | |
| 63 | + let site = this.globalConfig.appInfo.agreements[1] | |
| 64 | + this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`) | |
| 65 | + }, | |
| 66 | + // 获取图形验证码 | |
| 67 | + getCode() { | |
| 68 | + getCodeImg().then(res => { | |
| 69 | + res = res.data; | |
| 70 | + this.captchaEnable = res.enable; | |
| 71 | + if (this.captchaEnable) { | |
| 72 | + this.codeUrl = "data:image/gif;base64," + res.img; | |
| 73 | + this.loginForm.uuid = res.uuid; | |
| 74 | + } | |
| 75 | + }) | |
| 76 | + }, | |
| 77 | + // 登录方法 | |
| 78 | + async handleLogin() { | |
| 79 | + if (this.loginForm.username === "") { | |
| 80 | + this.$modal.msgError("请输入您的账号") | |
| 81 | + } else if (this.loginForm.password === "") { | |
| 82 | + this.$modal.msgError("请输入您的密码") | |
| 83 | + } else if (this.loginForm.code === "" && this.captchaEnabled) { | |
| 84 | + this.$modal.msgError("请输入验证码") | |
| 85 | + } else { | |
| 86 | + this.$modal.loading("登录中,请耐心等待...") | |
| 87 | + this.pwdLogin() | |
| 88 | + } | |
| 89 | + }, | |
| 90 | + // 密码登录 | |
| 91 | + async pwdLogin() { | |
| 92 | + this.$store.dispatch('Login', this.loginForm).then(() => { | |
| 93 | + this.$modal.closeLoading() | |
| 94 | + this.loginSuccess() | |
| 95 | + }).catch(() => { | |
| 96 | + if (this.captchaEnabled) { | |
| 97 | + this.getCode() | |
| 98 | + } | |
| 99 | + }) | |
| 100 | + }, | |
| 101 | + // 登录成功后,处理函数 | |
| 102 | + loginSuccess(result) { | |
| 103 | + // 设置用户信息 | |
| 104 | + this.$store.dispatch('GetInfo').then(res => { | |
| 105 | + this.$tab.reLaunch('/pages/index') | |
| 106 | + }) | |
| 107 | + } | |
| 108 | + } | |
| 109 | + } | |
| 110 | +</script> | |
| 111 | + | |
| 112 | +<style lang="scss"> | |
| 113 | + page { | |
| 114 | + background-color: #ffffff; | |
| 115 | + } | |
| 116 | + | |
| 117 | + .normal-login-container { | |
| 118 | + width: 100%; | |
| 119 | + | |
| 120 | + .logo-content { | |
| 121 | + width: 100%; | |
| 122 | + font-size: 21px; | |
| 123 | + text-align: center; | |
| 124 | + padding-top: 15%; | |
| 125 | + | |
| 126 | + image { | |
| 127 | + border-radius: 4px; | |
| 128 | + } | |
| 129 | + | |
| 130 | + .title { | |
| 131 | + margin-left: 10px; | |
| 132 | + } | |
| 133 | + } | |
| 134 | + | |
| 135 | + .login-form-content { | |
| 136 | + text-align: center; | |
| 137 | + margin: 20px auto; | |
| 138 | + margin-top: 15%; | |
| 139 | + width: 80%; | |
| 140 | + | |
| 141 | + .input-item { | |
| 142 | + margin: 20px auto; | |
| 143 | + background-color: #f5f6f7; | |
| 144 | + height: 45px; | |
| 145 | + border-radius: 20px; | |
| 146 | + | |
| 147 | + .icon { | |
| 148 | + font-size: 38rpx; | |
| 149 | + margin-left: 10px; | |
| 150 | + color: #999; | |
| 151 | + } | |
| 152 | + | |
| 153 | + .input { | |
| 154 | + width: 100%; | |
| 155 | + font-size: 14px; | |
| 156 | + line-height: 20px; | |
| 157 | + text-align: left; | |
| 158 | + padding-left: 15px; | |
| 159 | + } | |
| 160 | + | |
| 161 | + } | |
| 162 | + | |
| 163 | + .login-btn { | |
| 164 | + margin-top: 40px; | |
| 165 | + height: 45px; | |
| 166 | + } | |
| 167 | + | |
| 168 | + .xieyi { | |
| 169 | + color: #333; | |
| 170 | + margin-top: 20px; | |
| 171 | + } | |
| 172 | + } | |
| 173 | + | |
| 174 | + .easyinput { | |
| 175 | + width: 100%; | |
| 176 | + } | |
| 177 | + } | |
| 178 | + | |
| 179 | + .login-code-img { | |
| 180 | + height: 45px; | |
| 181 | + } | |
| 182 | +</style> | ... | ... |
yudao-ui-admin-uniapp/pages/mine/about/index.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="about-container"> | |
| 3 | + <view class="header-section text-center"> | |
| 4 | + <image style="width: 150rpx;height: 150rpx;" src="/static/logo200.png" mode="widthFix"> | |
| 5 | + </image> | |
| 6 | + <uni-title type="h2" title="芋道移动端"></uni-title> | |
| 7 | + </view> | |
| 8 | + | |
| 9 | + <view class="content-section"> | |
| 10 | + <view class="menu-list"> | |
| 11 | + <view class="list-cell list-cell-arrow"> | |
| 12 | + <view class="menu-item-box"> | |
| 13 | + <view>版本信息</view> | |
| 14 | + <view class="text-right">v{{version}}</view> | |
| 15 | + </view> | |
| 16 | + </view> | |
| 17 | + <view class="list-cell list-cell-arrow"> | |
| 18 | + <view class="menu-item-box"> | |
| 19 | + <view>官方邮箱</view> | |
| 20 | + <view class="text-right">7685413@qq.com</view> | |
| 21 | + </view> | |
| 22 | + </view> | |
| 23 | + <view class="list-cell list-cell-arrow"> | |
| 24 | + <view class="menu-item-box"> | |
| 25 | + <view>服务热线</view> | |
| 26 | + <view class="text-right">400-999-9999</view> | |
| 27 | + </view> | |
| 28 | + </view> | |
| 29 | + <view class="list-cell list-cell-arrow"> | |
| 30 | + <view class="menu-item-box"> | |
| 31 | + <view>公司网站</view> | |
| 32 | + <view class="text-right"> | |
| 33 | + <uni-link :href="url" :text="url" showUnderLine="false"></uni-link> | |
| 34 | + </view> | |
| 35 | + </view> | |
| 36 | + </view> | |
| 37 | + </view> | |
| 38 | + </view> | |
| 39 | + | |
| 40 | + <view class="copyright"> | |
| 41 | + <view>Copyright © 2022 iocoder.cn All Rights Reserved.</view> | |
| 42 | + </view> | |
| 43 | + </view> | |
| 44 | +</template> | |
| 45 | + | |
| 46 | +<script> | |
| 47 | + export default { | |
| 48 | + data() { | |
| 49 | + return { | |
| 50 | + url: getApp().globalData.config.appInfo.site_url, | |
| 51 | + version: getApp().globalData.config.appInfo.version | |
| 52 | + } | |
| 53 | + } | |
| 54 | + } | |
| 55 | +</script> | |
| 56 | + | |
| 57 | +<style lang="scss"> | |
| 58 | + page { | |
| 59 | + background-color: #f8f8f8; | |
| 60 | + } | |
| 61 | + | |
| 62 | + .copyright { | |
| 63 | + margin-top: 50rpx; | |
| 64 | + text-align: center; | |
| 65 | + line-height: 60rpx; | |
| 66 | + color: #999; | |
| 67 | + } | |
| 68 | + | |
| 69 | + .header-section { | |
| 70 | + display: flex; | |
| 71 | + padding: 30rpx 0 0; | |
| 72 | + flex-direction: column; | |
| 73 | + align-items: center; | |
| 74 | + } | |
| 75 | +</style> | ... | ... |
yudao-ui-admin-uniapp/pages/mine/avatar/index.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="container"> | |
| 3 | + <view class="page-body uni-content-info"> | |
| 4 | + <view class='cropper-content'> | |
| 5 | + <view v-if="isShowImg" class="uni-corpper" :style="'width:'+cropperInitW+'px;height:'+cropperInitH+'px;background:#000'"> | |
| 6 | + <view class="uni-corpper-content" :style="'width:'+cropperW+'px;height:'+cropperH+'px;left:'+cropperL+'px;top:'+cropperT+'px'"> | |
| 7 | + <image :src="imageSrc" :style="'width:'+cropperW+'px;height:'+cropperH+'px'"></image> | |
| 8 | + <view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove" @touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd" | |
| 9 | + :style="'left:'+cutL+'px;top:'+cutT+'px;right:'+cutR+'px;bottom:'+cutB+'px'"> | |
| 10 | + <view class="uni-cropper-view-box"> | |
| 11 | + <view class="uni-cropper-dashed-h"></view> | |
| 12 | + <view class="uni-cropper-dashed-v"></view> | |
| 13 | + <view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> | |
| 14 | + <view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> | |
| 15 | + <view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> | |
| 16 | + <view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> | |
| 17 | + <view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> | |
| 18 | + <view class="uni-cropper-point point-tr" data-drag="topTight"></view> | |
| 19 | + <view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> | |
| 20 | + <view class="uni-cropper-point point-rb" data-drag="rightBottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> | |
| 21 | + <view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove" @touchend.stop="dragEnd"></view> | |
| 22 | + <view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view> | |
| 23 | + <view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> | |
| 24 | + <view class="uni-cropper-point point-lt" data-drag="leftTop"></view> | |
| 25 | + </view> | |
| 26 | + </view> | |
| 27 | + </view> | |
| 28 | + </view> | |
| 29 | + </view> | |
| 30 | + <view class='cropper-config'> | |
| 31 | + <button type="primary reverse" @click="getImage" style='margin-top: 30rpx;'> 选择头像 </button> | |
| 32 | + <button type="warn" @click="getImageInfo" style='margin-top: 30rpx;'> 提交 </button> | |
| 33 | + </view> | |
| 34 | + <canvas canvas-id="myCanvas" :style="'position:absolute;border: 1px solid red; width:'+imageW+'px;height:'+imageH+'px;top:-9999px;left:-9999px;'"></canvas> | |
| 35 | + </view> | |
| 36 | + </view> | |
| 37 | +</template> | |
| 38 | + | |
| 39 | +<script> | |
| 40 | + import config from '@/config' | |
| 41 | + import store from "@/store" | |
| 42 | + import { uploadAvatar } from "@/api/system/user" | |
| 43 | + | |
| 44 | + const baseUrl = config.baseUrl | |
| 45 | + let sysInfo = uni.getSystemInfoSync() | |
| 46 | + let SCREEN_WIDTH = sysInfo.screenWidth | |
| 47 | + let PAGE_X, // 手按下的x位置 | |
| 48 | + PAGE_Y, // 手按下y的位置 | |
| 49 | + PR = sysInfo.pixelRatio, // dpi | |
| 50 | + T_PAGE_X, // 手移动的时候x的位置 | |
| 51 | + T_PAGE_Y, // 手移动的时候Y的位置 | |
| 52 | + CUT_L, // 初始化拖拽元素的left值 | |
| 53 | + CUT_T, // 初始化拖拽元素的top值 | |
| 54 | + CUT_R, // 初始化拖拽元素的 | |
| 55 | + CUT_B, // 初始化拖拽元素的 | |
| 56 | + CUT_W, // 初始化拖拽元素的宽度 | |
| 57 | + CUT_H, // 初始化拖拽元素的高度 | |
| 58 | + IMG_RATIO, // 图片比例 | |
| 59 | + IMG_REAL_W, // 图片实际的宽度 | |
| 60 | + IMG_REAL_H, // 图片实际的高度 | |
| 61 | + DRAFG_MOVE_RATIO = 1, //移动时候的比例, | |
| 62 | + INIT_DRAG_POSITION = 100, // 初始化屏幕宽度和裁剪区域的宽度之差,用于设置初始化裁剪的宽度 | |
| 63 | + DRAW_IMAGE_W = sysInfo.screenWidth // 设置生成的图片宽度 | |
| 64 | + | |
| 65 | + export default { | |
| 66 | + /** | |
| 67 | + * 页面的初始数据 | |
| 68 | + */ | |
| 69 | + data() { | |
| 70 | + return { | |
| 71 | + imageSrc: store.getters.avatar, | |
| 72 | + isShowImg: false, | |
| 73 | + // 初始化的宽高 | |
| 74 | + cropperInitW: SCREEN_WIDTH, | |
| 75 | + cropperInitH: SCREEN_WIDTH, | |
| 76 | + // 动态的宽高 | |
| 77 | + cropperW: SCREEN_WIDTH, | |
| 78 | + cropperH: SCREEN_WIDTH, | |
| 79 | + // 动态的left top值 | |
| 80 | + cropperL: 0, | |
| 81 | + cropperT: 0, | |
| 82 | + | |
| 83 | + transL: 0, | |
| 84 | + transT: 0, | |
| 85 | + | |
| 86 | + // 图片缩放值 | |
| 87 | + scaleP: 0, | |
| 88 | + imageW: 0, | |
| 89 | + imageH: 0, | |
| 90 | + | |
| 91 | + // 裁剪框 宽高 | |
| 92 | + cutL: 0, | |
| 93 | + cutT: 0, | |
| 94 | + cutB: SCREEN_WIDTH, | |
| 95 | + cutR: '100%', | |
| 96 | + qualityWidth: DRAW_IMAGE_W, | |
| 97 | + innerAspectRadio: DRAFG_MOVE_RATIO | |
| 98 | + } | |
| 99 | + }, | |
| 100 | + /** | |
| 101 | + * 生命周期函数--监听页面初次渲染完成 | |
| 102 | + */ | |
| 103 | + onReady: function () { | |
| 104 | + this.loadImage() | |
| 105 | + }, | |
| 106 | + methods: { | |
| 107 | + setData: function (obj) { | |
| 108 | + let that = this | |
| 109 | + Object.keys(obj).forEach(function (key) { | |
| 110 | + that.$set(that.$data, key, obj[key]) | |
| 111 | + }) | |
| 112 | + }, | |
| 113 | + getImage: function () { | |
| 114 | + var _this = this | |
| 115 | + uni.chooseImage({ | |
| 116 | + success: function (res) { | |
| 117 | + _this.setData({ | |
| 118 | + imageSrc: res.tempFilePaths[0], | |
| 119 | + }) | |
| 120 | + _this.loadImage() | |
| 121 | + }, | |
| 122 | + }) | |
| 123 | + }, | |
| 124 | + loadImage: function () { | |
| 125 | + var _this = this | |
| 126 | + | |
| 127 | + uni.getImageInfo({ | |
| 128 | + src: _this.imageSrc, | |
| 129 | + success: function success(res) { | |
| 130 | + IMG_RATIO = 1 / 1 | |
| 131 | + if (IMG_RATIO >= 1) { | |
| 132 | + IMG_REAL_W = SCREEN_WIDTH | |
| 133 | + IMG_REAL_H = SCREEN_WIDTH / IMG_RATIO | |
| 134 | + } else { | |
| 135 | + IMG_REAL_W = SCREEN_WIDTH * IMG_RATIO | |
| 136 | + IMG_REAL_H = SCREEN_WIDTH | |
| 137 | + } | |
| 138 | + let minRange = IMG_REAL_W > IMG_REAL_H ? IMG_REAL_W : IMG_REAL_H | |
| 139 | + INIT_DRAG_POSITION = minRange > INIT_DRAG_POSITION ? INIT_DRAG_POSITION : minRange | |
| 140 | + // 根据图片的宽高显示不同的效果 保证图片可以正常显示 | |
| 141 | + if (IMG_RATIO >= 1) { | |
| 142 | + let cutT = Math.ceil((SCREEN_WIDTH / IMG_RATIO - (SCREEN_WIDTH / IMG_RATIO - INIT_DRAG_POSITION)) / 2) | |
| 143 | + let cutB = cutT | |
| 144 | + let cutL = Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH + INIT_DRAG_POSITION) / 2) | |
| 145 | + let cutR = cutL | |
| 146 | + _this.setData({ | |
| 147 | + cropperW: SCREEN_WIDTH, | |
| 148 | + cropperH: SCREEN_WIDTH / IMG_RATIO, | |
| 149 | + // 初始化left right | |
| 150 | + cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2), | |
| 151 | + cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2), | |
| 152 | + cutL: cutL, | |
| 153 | + cutT: cutT, | |
| 154 | + cutR: cutR, | |
| 155 | + cutB: cutB, | |
| 156 | + // 图片缩放值 | |
| 157 | + imageW: IMG_REAL_W, | |
| 158 | + imageH: IMG_REAL_H, | |
| 159 | + scaleP: IMG_REAL_W / SCREEN_WIDTH, | |
| 160 | + qualityWidth: DRAW_IMAGE_W, | |
| 161 | + innerAspectRadio: IMG_RATIO | |
| 162 | + }) | |
| 163 | + } else { | |
| 164 | + let cutL = Math.ceil((SCREEN_WIDTH * IMG_RATIO - (SCREEN_WIDTH * IMG_RATIO)) / 2) | |
| 165 | + let cutR = cutL | |
| 166 | + let cutT = Math.ceil((SCREEN_WIDTH - INIT_DRAG_POSITION) / 2) | |
| 167 | + let cutB = cutT | |
| 168 | + _this.setData({ | |
| 169 | + cropperW: SCREEN_WIDTH * IMG_RATIO, | |
| 170 | + cropperH: SCREEN_WIDTH, | |
| 171 | + // 初始化left right | |
| 172 | + cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2), | |
| 173 | + cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2), | |
| 174 | + | |
| 175 | + cutL: cutL, | |
| 176 | + cutT: cutT, | |
| 177 | + cutR: cutR, | |
| 178 | + cutB: cutB, | |
| 179 | + // 图片缩放值 | |
| 180 | + imageW: IMG_REAL_W, | |
| 181 | + imageH: IMG_REAL_H, | |
| 182 | + scaleP: IMG_REAL_W / SCREEN_WIDTH, | |
| 183 | + qualityWidth: DRAW_IMAGE_W, | |
| 184 | + innerAspectRadio: IMG_RATIO | |
| 185 | + }) | |
| 186 | + } | |
| 187 | + _this.setData({ | |
| 188 | + isShowImg: true | |
| 189 | + }) | |
| 190 | + uni.hideLoading() | |
| 191 | + } | |
| 192 | + }) | |
| 193 | + }, | |
| 194 | + // 拖动时候触发的touchStart事件 | |
| 195 | + contentStartMove(e) { | |
| 196 | + PAGE_X = e.touches[0].pageX | |
| 197 | + PAGE_Y = e.touches[0].pageY | |
| 198 | + }, | |
| 199 | + | |
| 200 | + // 拖动时候触发的touchMove事件 | |
| 201 | + contentMoveing(e) { | |
| 202 | + var _this = this | |
| 203 | + var dragLengthX = (PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO | |
| 204 | + var dragLengthY = (PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO | |
| 205 | + // 左移 | |
| 206 | + if (dragLengthX > 0) { | |
| 207 | + if (this.cutL - dragLengthX < 0) dragLengthX = this.cutL | |
| 208 | + } else { | |
| 209 | + if (this.cutR + dragLengthX < 0) dragLengthX = -this.cutR | |
| 210 | + } | |
| 211 | + | |
| 212 | + if (dragLengthY > 0) { | |
| 213 | + if (this.cutT - dragLengthY < 0) dragLengthY = this.cutT | |
| 214 | + } else { | |
| 215 | + if (this.cutB + dragLengthY < 0) dragLengthY = -this.cutB | |
| 216 | + } | |
| 217 | + this.setData({ | |
| 218 | + cutL: this.cutL - dragLengthX, | |
| 219 | + cutT: this.cutT - dragLengthY, | |
| 220 | + cutR: this.cutR + dragLengthX, | |
| 221 | + cutB: this.cutB + dragLengthY | |
| 222 | + }) | |
| 223 | + | |
| 224 | + PAGE_X = e.touches[0].pageX | |
| 225 | + PAGE_Y = e.touches[0].pageY | |
| 226 | + }, | |
| 227 | + | |
| 228 | + contentTouchEnd() { | |
| 229 | + | |
| 230 | + }, | |
| 231 | + | |
| 232 | + // 获取图片 | |
| 233 | + getImageInfo() { | |
| 234 | + var _this = this | |
| 235 | + uni.showLoading({ | |
| 236 | + title: '图片生成中...', | |
| 237 | + }) | |
| 238 | + // 将图片写入画布 | |
| 239 | + const ctx = uni.createCanvasContext('myCanvas') | |
| 240 | + ctx.drawImage(_this.imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H) | |
| 241 | + ctx.draw(true, () => { | |
| 242 | + // 获取画布要裁剪的位置和宽度 均为百分比 * 画布中图片的宽度 保证了在微信小程序中裁剪的图片模糊 位置不对的问题 canvasT = (_this.cutT / _this.cropperH) * (_this.imageH / pixelRatio) | |
| 243 | + var canvasW = ((_this.cropperW - _this.cutL - _this.cutR) / _this.cropperW) * IMG_REAL_W | |
| 244 | + var canvasH = ((_this.cropperH - _this.cutT - _this.cutB) / _this.cropperH) * IMG_REAL_H | |
| 245 | + var canvasL = (_this.cutL / _this.cropperW) * IMG_REAL_W | |
| 246 | + var canvasT = (_this.cutT / _this.cropperH) * IMG_REAL_H | |
| 247 | + uni.canvasToTempFilePath({ | |
| 248 | + x: canvasL, | |
| 249 | + y: canvasT, | |
| 250 | + width: canvasW, | |
| 251 | + height: canvasH, | |
| 252 | + destWidth: canvasW, | |
| 253 | + destHeight: canvasH, | |
| 254 | + quality: 0.5, | |
| 255 | + canvasId: 'myCanvas', | |
| 256 | + success: function (res) { | |
| 257 | + uni.hideLoading() | |
| 258 | + let data = {name: 'avatarFile', filePath: res.tempFilePath} | |
| 259 | + uploadAvatar(data).then(response => { | |
| 260 | + store.commit('SET_AVATAR', response.data) | |
| 261 | + uni.showToast({ title: "修改成功", icon: 'success' }) | |
| 262 | + uni.navigateBack() | |
| 263 | + }) | |
| 264 | + } | |
| 265 | + }) | |
| 266 | + }) | |
| 267 | + }, | |
| 268 | + // 设置大小的时候触发的touchStart事件 | |
| 269 | + dragStart(e) { | |
| 270 | + T_PAGE_X = e.touches[0].pageX | |
| 271 | + T_PAGE_Y = e.touches[0].pageY | |
| 272 | + CUT_L = this.cutL | |
| 273 | + CUT_R = this.cutR | |
| 274 | + CUT_B = this.cutB | |
| 275 | + CUT_T = this.cutT | |
| 276 | + }, | |
| 277 | + | |
| 278 | + // 设置大小的时候触发的touchMove事件 | |
| 279 | + dragMove(e) { | |
| 280 | + var _this = this | |
| 281 | + var dragType = e.target.dataset.drag | |
| 282 | + switch (dragType) { | |
| 283 | + case 'right': | |
| 284 | + var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO | |
| 285 | + if (CUT_R + dragLength < 0) dragLength = -CUT_R | |
| 286 | + this.setData({ | |
| 287 | + cutR: CUT_R + dragLength | |
| 288 | + }) | |
| 289 | + break | |
| 290 | + case 'left': | |
| 291 | + var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO | |
| 292 | + if (CUT_L - dragLength < 0) dragLength = CUT_L | |
| 293 | + if ((CUT_L - dragLength) > (this.cropperW - this.cutR)) dragLength = CUT_L - (this.cropperW - this.cutR) | |
| 294 | + this.setData({ | |
| 295 | + cutL: CUT_L - dragLength | |
| 296 | + }) | |
| 297 | + break | |
| 298 | + case 'top': | |
| 299 | + var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO | |
| 300 | + if (CUT_T - dragLength < 0) dragLength = CUT_T | |
| 301 | + if ((CUT_T - dragLength) > (this.cropperH - this.cutB)) dragLength = CUT_T - (this.cropperH - this.cutB) | |
| 302 | + this.setData({ | |
| 303 | + cutT: CUT_T - dragLength | |
| 304 | + }) | |
| 305 | + break | |
| 306 | + case 'bottom': | |
| 307 | + var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO | |
| 308 | + if (CUT_B + dragLength < 0) dragLength = -CUT_B | |
| 309 | + this.setData({ | |
| 310 | + cutB: CUT_B + dragLength | |
| 311 | + }) | |
| 312 | + break | |
| 313 | + case 'rightBottom': | |
| 314 | + var dragLengthX = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO | |
| 315 | + var dragLengthY = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO | |
| 316 | + | |
| 317 | + if (CUT_B + dragLengthY < 0) dragLengthY = -CUT_B | |
| 318 | + if (CUT_R + dragLengthX < 0) dragLengthX = -CUT_R | |
| 319 | + let cutB = CUT_B + dragLengthY | |
| 320 | + let cutR = CUT_R + dragLengthX | |
| 321 | + | |
| 322 | + this.setData({ | |
| 323 | + cutB: cutB, | |
| 324 | + cutR: cutR | |
| 325 | + }) | |
| 326 | + break | |
| 327 | + default: | |
| 328 | + break | |
| 329 | + } | |
| 330 | + } | |
| 331 | + } | |
| 332 | + } | |
| 333 | +</script> | |
| 334 | + | |
| 335 | +<style> | |
| 336 | + /* pages/uni-cropper/index.wxss */ | |
| 337 | + | |
| 338 | + .uni-content-info { | |
| 339 | + /* position: fixed; | |
| 340 | + top: 0; | |
| 341 | + left: 0; | |
| 342 | + right: 0; | |
| 343 | + bottom: 0; | |
| 344 | + display: block; | |
| 345 | + align-items: center; | |
| 346 | + flex-direction: column; */ | |
| 347 | + } | |
| 348 | + | |
| 349 | + .cropper-config { | |
| 350 | + padding: 20rpx 40rpx; | |
| 351 | + } | |
| 352 | + | |
| 353 | + .cropper-content { | |
| 354 | + min-height: 750rpx; | |
| 355 | + width: 100%; | |
| 356 | + } | |
| 357 | + | |
| 358 | + .uni-corpper { | |
| 359 | + position: relative; | |
| 360 | + overflow: hidden; | |
| 361 | + -webkit-user-select: none; | |
| 362 | + -moz-user-select: none; | |
| 363 | + -ms-user-select: none; | |
| 364 | + user-select: none; | |
| 365 | + -webkit-tap-highlight-color: transparent; | |
| 366 | + -webkit-touch-callout: none; | |
| 367 | + box-sizing: border-box; | |
| 368 | + } | |
| 369 | + | |
| 370 | + .uni-corpper-content { | |
| 371 | + position: relative; | |
| 372 | + } | |
| 373 | + | |
| 374 | + .uni-corpper-content image { | |
| 375 | + display: block; | |
| 376 | + width: 100%; | |
| 377 | + min-width: 0 !important; | |
| 378 | + max-width: none !important; | |
| 379 | + height: 100%; | |
| 380 | + min-height: 0 !important; | |
| 381 | + max-height: none !important; | |
| 382 | + image-orientation: 0deg !important; | |
| 383 | + margin: 0 auto; | |
| 384 | + } | |
| 385 | + /* 移动图片效果 */ | |
| 386 | + | |
| 387 | + .uni-cropper-drag-box { | |
| 388 | + position: absolute; | |
| 389 | + top: 0; | |
| 390 | + right: 0; | |
| 391 | + bottom: 0; | |
| 392 | + left: 0; | |
| 393 | + cursor: move; | |
| 394 | + background: rgba(0, 0, 0, 0.6); | |
| 395 | + z-index: 1; | |
| 396 | + } | |
| 397 | + /* 内部的信息 */ | |
| 398 | + | |
| 399 | + .uni-corpper-crop-box { | |
| 400 | + position: absolute; | |
| 401 | + background: rgba(255, 255, 255, 0.3); | |
| 402 | + z-index: 2; | |
| 403 | + } | |
| 404 | + | |
| 405 | + .uni-corpper-crop-box .uni-cropper-view-box { | |
| 406 | + position: relative; | |
| 407 | + display: block; | |
| 408 | + width: 100%; | |
| 409 | + height: 100%; | |
| 410 | + overflow: visible; | |
| 411 | + outline: 1rpx solid #69f; | |
| 412 | + outline-color: rgba(102, 153, 255, .75) | |
| 413 | + } | |
| 414 | + /* 横向虚线 */ | |
| 415 | + | |
| 416 | + .uni-cropper-dashed-h { | |
| 417 | + position: absolute; | |
| 418 | + top: 33.33333333%; | |
| 419 | + left: 0; | |
| 420 | + width: 100%; | |
| 421 | + height: 33.33333333%; | |
| 422 | + border-top: 1rpx dashed rgba(255, 255, 255, 0.5); | |
| 423 | + border-bottom: 1rpx dashed rgba(255, 255, 255, 0.5); | |
| 424 | + } | |
| 425 | + /* 纵向虚线 */ | |
| 426 | + | |
| 427 | + .uni-cropper-dashed-v { | |
| 428 | + position: absolute; | |
| 429 | + left: 33.33333333%; | |
| 430 | + top: 0; | |
| 431 | + width: 33.33333333%; | |
| 432 | + height: 100%; | |
| 433 | + border-left: 1rpx dashed rgba(255, 255, 255, 0.5); | |
| 434 | + border-right: 1rpx dashed rgba(255, 255, 255, 0.5); | |
| 435 | + } | |
| 436 | + /* 四个方向的线 为了之后的拖动事件*/ | |
| 437 | + | |
| 438 | + .uni-cropper-line-t { | |
| 439 | + position: absolute; | |
| 440 | + display: block; | |
| 441 | + width: 100%; | |
| 442 | + background-color: #69f; | |
| 443 | + top: 0; | |
| 444 | + left: 0; | |
| 445 | + height: 1rpx; | |
| 446 | + opacity: 0.1; | |
| 447 | + cursor: n-resize; | |
| 448 | + } | |
| 449 | + | |
| 450 | + .uni-cropper-line-t::before { | |
| 451 | + content: ''; | |
| 452 | + position: absolute; | |
| 453 | + top: 50%; | |
| 454 | + right: 0rpx; | |
| 455 | + width: 100%; | |
| 456 | + -webkit-transform: translate3d(0, -50%, 0); | |
| 457 | + transform: translate3d(0, -50%, 0); | |
| 458 | + bottom: 0; | |
| 459 | + height: 41rpx; | |
| 460 | + background: transparent; | |
| 461 | + z-index: 11; | |
| 462 | + } | |
| 463 | + | |
| 464 | + .uni-cropper-line-r { | |
| 465 | + position: absolute; | |
| 466 | + display: block; | |
| 467 | + background-color: #69f; | |
| 468 | + top: 0; | |
| 469 | + right: 0rpx; | |
| 470 | + width: 1rpx; | |
| 471 | + opacity: 0.1; | |
| 472 | + height: 100%; | |
| 473 | + cursor: e-resize; | |
| 474 | + } | |
| 475 | + | |
| 476 | + .uni-cropper-line-r::before { | |
| 477 | + content: ''; | |
| 478 | + position: absolute; | |
| 479 | + top: 0; | |
| 480 | + left: 50%; | |
| 481 | + width: 41rpx; | |
| 482 | + -webkit-transform: translate3d(-50%, 0, 0); | |
| 483 | + transform: translate3d(-50%, 0, 0); | |
| 484 | + bottom: 0; | |
| 485 | + height: 100%; | |
| 486 | + background: transparent; | |
| 487 | + z-index: 11; | |
| 488 | + } | |
| 489 | + | |
| 490 | + .uni-cropper-line-b { | |
| 491 | + position: absolute; | |
| 492 | + display: block; | |
| 493 | + width: 100%; | |
| 494 | + background-color: #69f; | |
| 495 | + bottom: 0; | |
| 496 | + left: 0; | |
| 497 | + height: 1rpx; | |
| 498 | + opacity: 0.1; | |
| 499 | + cursor: s-resize; | |
| 500 | + } | |
| 501 | + | |
| 502 | + .uni-cropper-line-b::before { | |
| 503 | + content: ''; | |
| 504 | + position: absolute; | |
| 505 | + top: 50%; | |
| 506 | + right: 0rpx; | |
| 507 | + width: 100%; | |
| 508 | + -webkit-transform: translate3d(0, -50%, 0); | |
| 509 | + transform: translate3d(0, -50%, 0); | |
| 510 | + bottom: 0; | |
| 511 | + height: 41rpx; | |
| 512 | + background: transparent; | |
| 513 | + z-index: 11; | |
| 514 | + } | |
| 515 | + | |
| 516 | + .uni-cropper-line-l { | |
| 517 | + position: absolute; | |
| 518 | + display: block; | |
| 519 | + background-color: #69f; | |
| 520 | + top: 0; | |
| 521 | + left: 0; | |
| 522 | + width: 1rpx; | |
| 523 | + opacity: 0.1; | |
| 524 | + height: 100%; | |
| 525 | + cursor: w-resize; | |
| 526 | + } | |
| 527 | + | |
| 528 | + .uni-cropper-line-l::before { | |
| 529 | + content: ''; | |
| 530 | + position: absolute; | |
| 531 | + top: 0; | |
| 532 | + left: 50%; | |
| 533 | + width: 41rpx; | |
| 534 | + -webkit-transform: translate3d(-50%, 0, 0); | |
| 535 | + transform: translate3d(-50%, 0, 0); | |
| 536 | + bottom: 0; | |
| 537 | + height: 100%; | |
| 538 | + background: transparent; | |
| 539 | + z-index: 11; | |
| 540 | + } | |
| 541 | + | |
| 542 | + .uni-cropper-point { | |
| 543 | + width: 5rpx; | |
| 544 | + height: 5rpx; | |
| 545 | + background-color: #69f; | |
| 546 | + opacity: .75; | |
| 547 | + position: absolute; | |
| 548 | + z-index: 3; | |
| 549 | + } | |
| 550 | + | |
| 551 | + .point-t { | |
| 552 | + top: -3rpx; | |
| 553 | + left: 50%; | |
| 554 | + margin-left: -3rpx; | |
| 555 | + cursor: n-resize; | |
| 556 | + } | |
| 557 | + | |
| 558 | + .point-tr { | |
| 559 | + top: -3rpx; | |
| 560 | + left: 100%; | |
| 561 | + margin-left: -3rpx; | |
| 562 | + cursor: n-resize; | |
| 563 | + } | |
| 564 | + | |
| 565 | + .point-r { | |
| 566 | + top: 50%; | |
| 567 | + left: 100%; | |
| 568 | + margin-left: -3rpx; | |
| 569 | + margin-top: -3rpx; | |
| 570 | + cursor: n-resize; | |
| 571 | + } | |
| 572 | + | |
| 573 | + .point-rb { | |
| 574 | + left: 100%; | |
| 575 | + top: 100%; | |
| 576 | + -webkit-transform: translate3d(-50%, -50%, 0); | |
| 577 | + transform: translate3d(-50%, -50%, 0); | |
| 578 | + cursor: n-resize; | |
| 579 | + width: 36rpx; | |
| 580 | + height: 36rpx; | |
| 581 | + background-color: #69f; | |
| 582 | + position: absolute; | |
| 583 | + z-index: 1112; | |
| 584 | + opacity: 1; | |
| 585 | + } | |
| 586 | + | |
| 587 | + .point-b { | |
| 588 | + left: 50%; | |
| 589 | + top: 100%; | |
| 590 | + margin-left: -3rpx; | |
| 591 | + margin-top: -3rpx; | |
| 592 | + cursor: n-resize; | |
| 593 | + } | |
| 594 | + | |
| 595 | + .point-bl { | |
| 596 | + left: 0%; | |
| 597 | + top: 100%; | |
| 598 | + margin-left: -3rpx; | |
| 599 | + margin-top: -3rpx; | |
| 600 | + cursor: n-resize; | |
| 601 | + } | |
| 602 | + | |
| 603 | + .point-l { | |
| 604 | + left: 0%; | |
| 605 | + top: 50%; | |
| 606 | + margin-left: -3rpx; | |
| 607 | + margin-top: -3rpx; | |
| 608 | + cursor: n-resize; | |
| 609 | + } | |
| 610 | + | |
| 611 | + .point-lt { | |
| 612 | + left: 0%; | |
| 613 | + top: 0%; | |
| 614 | + margin-left: -3rpx; | |
| 615 | + margin-top: -3rpx; | |
| 616 | + cursor: n-resize; | |
| 617 | + } | |
| 618 | + /* 裁剪框预览内容 */ | |
| 619 | + | |
| 620 | + .uni-cropper-viewer { | |
| 621 | + position: relative; | |
| 622 | + width: 100%; | |
| 623 | + height: 100%; | |
| 624 | + overflow: hidden; | |
| 625 | + } | |
| 626 | + | |
| 627 | + .uni-cropper-viewer image { | |
| 628 | + position: absolute; | |
| 629 | + z-index: 2; | |
| 630 | + } | |
| 631 | +</style> | ... | ... |
yudao-ui-admin-uniapp/pages/mine/help/index.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="help-container"> | |
| 3 | + <view v-for="(item, findex) in list" :key="findex" :title="item.title" class="list-title"> | |
| 4 | + <view class="text-title"> | |
| 5 | + <view :class="item.icon"></view>{{ item.title }} | |
| 6 | + </view> | |
| 7 | + <view class="childList"> | |
| 8 | + <view v-for="(child, zindex) in item.childList" :key="zindex" class="question" hover-class="hover" | |
| 9 | + @click="handleText(child)"> | |
| 10 | + <view class="text-item">{{ child.title }}</view> | |
| 11 | + <view class="line" v-if="zindex !== item.childList.length - 1"></view> | |
| 12 | + </view> | |
| 13 | + </view> | |
| 14 | + </view> | |
| 15 | + </view> | |
| 16 | +</template> | |
| 17 | + | |
| 18 | +<script> | |
| 19 | + export default { | |
| 20 | + data() { | |
| 21 | + return { | |
| 22 | + list: [{ | |
| 23 | + icon: 'iconfont icon-github', | |
| 24 | + title: '芋道问题', | |
| 25 | + childList: [{ | |
| 26 | + title: '芋道开源吗?', | |
| 27 | + content: '开源' | |
| 28 | + }, { | |
| 29 | + title: '芋道可以商用吗?', | |
| 30 | + content: '可以' | |
| 31 | + }, { | |
| 32 | + title: '芋道官网地址多少?', | |
| 33 | + content: 'https://www.iocoder.cn' | |
| 34 | + }, { | |
| 35 | + title: '芋道文档地址多少?', | |
| 36 | + content: 'https://doc.iocoder.cn' | |
| 37 | + }] | |
| 38 | + }, | |
| 39 | + { | |
| 40 | + icon: 'iconfont icon-help', | |
| 41 | + title: '其他问题', | |
| 42 | + childList: [{ | |
| 43 | + title: '如何退出登录?', | |
| 44 | + content: '请点击[我的] - [应用设置] - [退出登录]即可退出登录', | |
| 45 | + }, { | |
| 46 | + title: '如何修改用户头像?', | |
| 47 | + content: '请点击[我的] - [选择头像] - [点击提交]即可更换用户头像', | |
| 48 | + }, { | |
| 49 | + title: '如何修改登录密码?', | |
| 50 | + content: '请点击[我的] - [应用设置] - [修改密码]即可修改登录密码', | |
| 51 | + }] | |
| 52 | + } | |
| 53 | + ] | |
| 54 | + } | |
| 55 | + }, | |
| 56 | + methods: { | |
| 57 | + handleText(item) { | |
| 58 | + this.$tab.navigateTo(`/pages/common/textview/index?title=${item.title}&content=${item.content}`) | |
| 59 | + } | |
| 60 | + } | |
| 61 | + } | |
| 62 | +</script> | |
| 63 | + | |
| 64 | +<style lang="scss" scoped> | |
| 65 | + page { | |
| 66 | + background-color: #f8f8f8; | |
| 67 | + } | |
| 68 | + | |
| 69 | + .help-container { | |
| 70 | + margin-bottom: 100rpx; | |
| 71 | + padding: 30rpx; | |
| 72 | + } | |
| 73 | + | |
| 74 | + .list-title { | |
| 75 | + margin-bottom: 30rpx; | |
| 76 | + } | |
| 77 | + | |
| 78 | + .childList { | |
| 79 | + background: #ffffff; | |
| 80 | + box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2); | |
| 81 | + border-radius: 16rpx; | |
| 82 | + margin-top: 10rpx; | |
| 83 | + } | |
| 84 | + | |
| 85 | + .line { | |
| 86 | + width: 100%; | |
| 87 | + height: 1rpx; | |
| 88 | + background-color: #F5F5F5; | |
| 89 | + } | |
| 90 | + | |
| 91 | + .text-title { | |
| 92 | + color: #303133; | |
| 93 | + font-size: 32rpx; | |
| 94 | + font-weight: bold; | |
| 95 | + margin-left: 10rpx; | |
| 96 | + | |
| 97 | + .iconfont { | |
| 98 | + font-size: 16px; | |
| 99 | + margin-right: 10rpx; | |
| 100 | + } | |
| 101 | + } | |
| 102 | + | |
| 103 | + .text-item { | |
| 104 | + font-size: 28rpx; | |
| 105 | + padding: 24rpx; | |
| 106 | + } | |
| 107 | + | |
| 108 | + .question { | |
| 109 | + color: #606266; | |
| 110 | + font-size: 28rpx; | |
| 111 | + } | |
| 112 | +</style> | ... | ... |
yudao-ui-admin-uniapp/pages/mine/index.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="mine-container" :style="{height: `${windowHeight}px`}"> | |
| 3 | + <!--顶部个人信息栏--> | |
| 4 | + <view class="header-section"> | |
| 5 | + <view class="flex padding justify-between"> | |
| 6 | + <view class="flex align-center"> | |
| 7 | + <view v-if="!avatar" class="cu-avatar xl round bg-white"> | |
| 8 | + <view class="iconfont icon-people text-gray icon"></view> | |
| 9 | + </view> | |
| 10 | + <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix"> | |
| 11 | + </image> | |
| 12 | + <view v-if="!name" @click="handleToLogin" class="login-tip"> | |
| 13 | + 点击登录 | |
| 14 | + </view> | |
| 15 | + <view v-if="name" @click="handleToInfo" class="user-info"> | |
| 16 | + <view class="u_title"> | |
| 17 | + 用户名:{{ name }} | |
| 18 | + </view> | |
| 19 | + </view> | |
| 20 | + </view> | |
| 21 | + <view @click="handleToInfo" class="flex align-center"> | |
| 22 | + <text>个人信息</text> | |
| 23 | + <view class="iconfont icon-right"></view> | |
| 24 | + </view> | |
| 25 | + </view> | |
| 26 | + </view> | |
| 27 | + | |
| 28 | + <view class="content-section"> | |
| 29 | + <view class="mine-actions grid col-4 text-center"> | |
| 30 | + <view class="action-item" @click="handleJiaoLiuQun"> | |
| 31 | + <view class="iconfont icon-friendfill text-pink icon"></view> | |
| 32 | + <text class="text">交流群</text> | |
| 33 | + </view> | |
| 34 | + <view class="action-item" @click="handleBuilding"> | |
| 35 | + <view class="iconfont icon-service text-blue icon"></view> | |
| 36 | + <text class="text">在线客服</text> | |
| 37 | + </view> | |
| 38 | + <view class="action-item" @click="handleBuilding"> | |
| 39 | + <view class="iconfont icon-community text-mauve icon"></view> | |
| 40 | + <text class="text">反馈社区</text> | |
| 41 | + </view> | |
| 42 | + <view class="action-item" @click="handleBuilding"> | |
| 43 | + <view class="iconfont icon-dianzan text-green icon"></view> | |
| 44 | + <text class="text">点赞我们</text> | |
| 45 | + </view> | |
| 46 | + </view> | |
| 47 | + | |
| 48 | + <view class="menu-list"> | |
| 49 | + <view class="list-cell list-cell-arrow" @click="handleToEditInfo"> | |
| 50 | + <view class="menu-item-box"> | |
| 51 | + <view class="iconfont icon-user menu-icon"></view> | |
| 52 | + <view>编辑资料</view> | |
| 53 | + </view> | |
| 54 | + </view> | |
| 55 | + <view class="list-cell list-cell-arrow" @click="handleHelp"> | |
| 56 | + <view class="menu-item-box"> | |
| 57 | + <view class="iconfont icon-help menu-icon"></view> | |
| 58 | + <view>常见问题</view> | |
| 59 | + </view> | |
| 60 | + </view> | |
| 61 | + <view class="list-cell list-cell-arrow" @click="handleAbout"> | |
| 62 | + <view class="menu-item-box"> | |
| 63 | + <view class="iconfont icon-aixin menu-icon"></view> | |
| 64 | + <view>关于我们</view> | |
| 65 | + </view> | |
| 66 | + </view> | |
| 67 | + <view class="list-cell list-cell-arrow" @click="handleToSetting"> | |
| 68 | + <view class="menu-item-box"> | |
| 69 | + <view class="iconfont icon-setting menu-icon"></view> | |
| 70 | + <view>应用设置</view> | |
| 71 | + </view> | |
| 72 | + </view> | |
| 73 | + </view> | |
| 74 | + | |
| 75 | + </view> | |
| 76 | + </view> | |
| 77 | +</template> | |
| 78 | + | |
| 79 | +<script> | |
| 80 | + import storage from '@/utils/storage' | |
| 81 | + | |
| 82 | + export default { | |
| 83 | + data() { | |
| 84 | + return { | |
| 85 | + name: this.$store.state.user.name, | |
| 86 | + version: getApp().globalData.config.appInfo.version | |
| 87 | + } | |
| 88 | + }, | |
| 89 | + computed: { | |
| 90 | + avatar() { | |
| 91 | + return this.$store.state.user.avatar | |
| 92 | + }, | |
| 93 | + windowHeight() { | |
| 94 | + return uni.getSystemInfoSync().windowHeight - 50 | |
| 95 | + } | |
| 96 | + }, | |
| 97 | + methods: { | |
| 98 | + handleToInfo() { | |
| 99 | + this.$tab.navigateTo('/pages/mine/info/index') | |
| 100 | + }, | |
| 101 | + handleToEditInfo() { | |
| 102 | + this.$tab.navigateTo('/pages/mine/info/edit') | |
| 103 | + }, | |
| 104 | + handleToSetting() { | |
| 105 | + this.$tab.navigateTo('/pages/mine/setting/index') | |
| 106 | + }, | |
| 107 | + handleToLogin() { | |
| 108 | + this.$tab.reLaunch('/pages/login') | |
| 109 | + }, | |
| 110 | + handleToAvatar() { | |
| 111 | + this.$tab.navigateTo('/pages/mine/avatar/index') | |
| 112 | + }, | |
| 113 | + handleLogout() { | |
| 114 | + this.$modal.confirm('确定注销并退出系统吗?').then(() => { | |
| 115 | + this.$store.dispatch('LogOut').then(() => { | |
| 116 | + this.$tab.reLaunch('/pages/index') | |
| 117 | + }) | |
| 118 | + }) | |
| 119 | + }, | |
| 120 | + handleHelp() { | |
| 121 | + this.$tab.navigateTo('/pages/mine/help/index') | |
| 122 | + }, | |
| 123 | + handleAbout() { | |
| 124 | + this.$tab.navigateTo('/pages/mine/about/index') | |
| 125 | + }, | |
| 126 | + handleJiaoLiuQun() { | |
| 127 | + this.$modal.showToast('微信搜索 naidaguo 后,添加好友后拉你进技术交流群') | |
| 128 | + }, | |
| 129 | + handleBuilding() { | |
| 130 | + this.$modal.showToast('模块建设中~') | |
| 131 | + } | |
| 132 | + } | |
| 133 | + } | |
| 134 | +</script> | |
| 135 | + | |
| 136 | +<style lang="scss"> | |
| 137 | + page { | |
| 138 | + background-color: #f5f6f7; | |
| 139 | + } | |
| 140 | + | |
| 141 | + .mine-container { | |
| 142 | + width: 100%; | |
| 143 | + height: 100%; | |
| 144 | + | |
| 145 | + | |
| 146 | + .header-section { | |
| 147 | + padding: 15px 15px 45px 15px; | |
| 148 | + background-color: #3c96f3; | |
| 149 | + color: white; | |
| 150 | + | |
| 151 | + .login-tip { | |
| 152 | + font-size: 18px; | |
| 153 | + margin-left: 10px; | |
| 154 | + } | |
| 155 | + | |
| 156 | + .cu-avatar { | |
| 157 | + border: 2px solid #eaeaea; | |
| 158 | + | |
| 159 | + .icon { | |
| 160 | + font-size: 40px; | |
| 161 | + } | |
| 162 | + } | |
| 163 | + | |
| 164 | + .user-info { | |
| 165 | + margin-left: 15px; | |
| 166 | + | |
| 167 | + .u_title { | |
| 168 | + font-size: 18px; | |
| 169 | + line-height: 30px; | |
| 170 | + } | |
| 171 | + } | |
| 172 | + } | |
| 173 | + | |
| 174 | + .content-section { | |
| 175 | + position: relative; | |
| 176 | + top: -50px; | |
| 177 | + | |
| 178 | + .mine-actions { | |
| 179 | + margin: 15px 15px; | |
| 180 | + padding: 20px 0px; | |
| 181 | + border-radius: 8px; | |
| 182 | + background-color: white; | |
| 183 | + | |
| 184 | + .action-item { | |
| 185 | + .icon { | |
| 186 | + font-size: 28px; | |
| 187 | + } | |
| 188 | + | |
| 189 | + .text { | |
| 190 | + display: block; | |
| 191 | + font-size: 13px; | |
| 192 | + margin: 8px 0px; | |
| 193 | + } | |
| 194 | + } | |
| 195 | + } | |
| 196 | + } | |
| 197 | + } | |
| 198 | +</style> | ... | ... |
yudao-ui-admin-uniapp/pages/mine/info/edit.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="container"> | |
| 3 | + <view class="example"> | |
| 4 | + <uni-forms ref="form" :model="user" labelWidth="80px"> | |
| 5 | + <uni-forms-item label="用户昵称" name="nickname"> | |
| 6 | + <uni-easyinput v-model="user.nickname" placeholder="请输入昵称" /> | |
| 7 | + </uni-forms-item> | |
| 8 | + <uni-forms-item label="手机号码" name="mobile"> | |
| 9 | + <uni-easyinput v-model="user.mobile" placeholder="请输入手机号码" /> | |
| 10 | + </uni-forms-item> | |
| 11 | + <uni-forms-item label="邮箱" name="email"> | |
| 12 | + <uni-easyinput v-model="user.email" placeholder="请输入邮箱" /> | |
| 13 | + </uni-forms-item> | |
| 14 | + <!-- TODO 芋艿:uni-data-checkbox 存在问题 --> | |
| 15 | + <uni-forms-item label="性别" name="sex" required> | |
| 16 | +<!-- <uni-data-checkbox v-model="user.sex" :localdata="sexs" />--> | |
| 17 | + </uni-forms-item> | |
| 18 | + </uni-forms> | |
| 19 | + <button type="primary" @click="submit">提交</button> | |
| 20 | + </view> | |
| 21 | + </view> | |
| 22 | +</template> | |
| 23 | + | |
| 24 | +<script> | |
| 25 | + import { getUserProfile } from "@/api/system/user" | |
| 26 | + import { updateUserProfile } from "@/api/system/user" | |
| 27 | + | |
| 28 | + export default { | |
| 29 | + data() { | |
| 30 | + return { | |
| 31 | + user: { | |
| 32 | + nickname: "", | |
| 33 | + mobile: "", | |
| 34 | + email: "", | |
| 35 | + sex: "" | |
| 36 | + }, | |
| 37 | + sexs: [{ | |
| 38 | + text: '男', | |
| 39 | + value: "1" | |
| 40 | + }, { | |
| 41 | + text: '女', | |
| 42 | + value: "2" | |
| 43 | + }], | |
| 44 | + rules: { | |
| 45 | + nickname: { | |
| 46 | + rules: [{ | |
| 47 | + required: true, | |
| 48 | + errorMessage: '用户昵称不能为空' | |
| 49 | + }] | |
| 50 | + }, | |
| 51 | + mobile: { | |
| 52 | + rules: [{ | |
| 53 | + required: true, | |
| 54 | + errorMessage: '手机号码不能为空' | |
| 55 | + }, { | |
| 56 | + pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, | |
| 57 | + errorMessage: '请输入正确的手机号码' | |
| 58 | + }] | |
| 59 | + }, | |
| 60 | + email: { | |
| 61 | + rules: [{ | |
| 62 | + required: true, | |
| 63 | + errorMessage: '邮箱地址不能为空' | |
| 64 | + }, { | |
| 65 | + format: 'email', | |
| 66 | + errorMessage: '请输入正确的邮箱地址' | |
| 67 | + }] | |
| 68 | + } | |
| 69 | + } | |
| 70 | + } | |
| 71 | + }, | |
| 72 | + onLoad() { | |
| 73 | + this.getUser() | |
| 74 | + }, | |
| 75 | + onReady() { | |
| 76 | + this.$refs.form.setRules(this.rules) | |
| 77 | + }, | |
| 78 | + methods: { | |
| 79 | + getUser() { | |
| 80 | + getUserProfile().then(response => { | |
| 81 | + this.user = response.data | |
| 82 | + }) | |
| 83 | + }, | |
| 84 | + submit(ref) { | |
| 85 | + this.$refs.form.validate().then(res => { | |
| 86 | + updateUserProfile(this.user).then(response => { | |
| 87 | + this.$modal.msgSuccess("修改成功") | |
| 88 | + }) | |
| 89 | + }) | |
| 90 | + } | |
| 91 | + } | |
| 92 | + } | |
| 93 | +</script> | |
| 94 | + | |
| 95 | +<style lang="scss"> | |
| 96 | + page { | |
| 97 | + background-color: #ffffff; | |
| 98 | + } | |
| 99 | + | |
| 100 | + .example { | |
| 101 | + padding: 15px; | |
| 102 | + background-color: #fff; | |
| 103 | + } | |
| 104 | + | |
| 105 | + .segmented-control { | |
| 106 | + margin-bottom: 15px; | |
| 107 | + } | |
| 108 | + | |
| 109 | + .button-group { | |
| 110 | + margin-top: 15px; | |
| 111 | + display: flex; | |
| 112 | + justify-content: space-around; | |
| 113 | + } | |
| 114 | + | |
| 115 | + .form-item { | |
| 116 | + display: flex; | |
| 117 | + align-items: center; | |
| 118 | + flex: 1; | |
| 119 | + } | |
| 120 | + | |
| 121 | + .button { | |
| 122 | + display: flex; | |
| 123 | + align-items: center; | |
| 124 | + height: 35px; | |
| 125 | + line-height: 35px; | |
| 126 | + margin-left: 10px; | |
| 127 | + } | |
| 128 | +</style> | ... | ... |
yudao-ui-admin-uniapp/pages/mine/info/index.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="container"> | |
| 3 | + <uni-list> | |
| 4 | + <uni-list-item showExtraIcon="true" :extraIcon="{type: 'person-filled'}" title="昵称" :rightText="user.nickname" /> | |
| 5 | + <uni-list-item showExtraIcon="true" :extraIcon="{type: 'phone-filled'}" title="手机号码" :rightText="user.mobile" /> | |
| 6 | + <uni-list-item showExtraIcon="true" :extraIcon="{type: 'email-filled'}" title="邮箱" :rightText="user.email" /> | |
| 7 | + <uni-list-item showExtraIcon="true" :extraIcon="{type: 'auth-filled'}" title="岗位" :rightText="(user.posts || []).map(post => post.name).join(',')" /> | |
| 8 | + <uni-list-item showExtraIcon="true" :extraIcon="{type: 'staff-filled'}" title="角色" :rightText="(user.roles || []).map(role => role.name).join(',')" /> | |
| 9 | + <uni-list-item showExtraIcon="true" :extraIcon="{type: 'calendar-filled'}" title="创建日期" :rightText="this.parseTime(user.createTime)" /> | |
| 10 | + </uni-list> | |
| 11 | + </view> | |
| 12 | +</template> | |
| 13 | + | |
| 14 | +<script> | |
| 15 | + import { getUserProfile } from "@/api/system/user" | |
| 16 | + import { parseTime } from "@/utils/ruoyi" | |
| 17 | + | |
| 18 | + export default { | |
| 19 | + data() { | |
| 20 | + return { | |
| 21 | + user: {} | |
| 22 | + } | |
| 23 | + }, | |
| 24 | + onLoad() { | |
| 25 | + this.getUser() | |
| 26 | + }, | |
| 27 | + methods: { | |
| 28 | + getUser() { | |
| 29 | + getUserProfile().then(response => { | |
| 30 | + this.user = response.data | |
| 31 | + }) | |
| 32 | + }, | |
| 33 | + parseTime(time) { | |
| 34 | + return parseTime(time) | |
| 35 | + } | |
| 36 | + } | |
| 37 | + } | |
| 38 | +</script> | |
| 39 | + | |
| 40 | +<style lang="scss"> | |
| 41 | + page { | |
| 42 | + background-color: #ffffff; | |
| 43 | + } | |
| 44 | +</style> | ... | ... |
yudao-ui-admin-uniapp/pages/mine/pwd/index.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="pwd-retrieve-container"> | |
| 3 | + <uni-forms ref="form" :value="user" labelWidth="80px"> | |
| 4 | + <uni-forms-item name="oldPassword" label="旧密码"> | |
| 5 | + <uni-easyinput type="password" v-model="user.oldPassword" placeholder="请输入旧密码" /> | |
| 6 | + </uni-forms-item> | |
| 7 | + <uni-forms-item name="newPassword" label="新密码"> | |
| 8 | + <uni-easyinput type="password" v-model="user.newPassword" placeholder="请输入新密码" /> | |
| 9 | + </uni-forms-item> | |
| 10 | + <uni-forms-item name="confirmPassword" label="确认密码"> | |
| 11 | + <uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认新密码" /> | |
| 12 | + </uni-forms-item> | |
| 13 | + <button type="primary" @click="submit">提交</button> | |
| 14 | + </uni-forms> | |
| 15 | + </view> | |
| 16 | +</template> | |
| 17 | + | |
| 18 | +<script> | |
| 19 | + import { updateUserPwd } from "@/api/system/user" | |
| 20 | + | |
| 21 | + export default { | |
| 22 | + data() { | |
| 23 | + return { | |
| 24 | + user: { | |
| 25 | + oldPassword: undefined, | |
| 26 | + newPassword: undefined, | |
| 27 | + confirmPassword: undefined | |
| 28 | + }, | |
| 29 | + rules: { | |
| 30 | + oldPassword: { | |
| 31 | + rules: [{ | |
| 32 | + required: true, | |
| 33 | + errorMessage: '旧密码不能为空' | |
| 34 | + }] | |
| 35 | + }, | |
| 36 | + newPassword: { | |
| 37 | + rules: [{ | |
| 38 | + required: true, | |
| 39 | + errorMessage: '新密码不能为空', | |
| 40 | + }, | |
| 41 | + { | |
| 42 | + minLength: 6, | |
| 43 | + maxLength: 20, | |
| 44 | + errorMessage: '长度在 6 到 20 个字符' | |
| 45 | + } | |
| 46 | + ] | |
| 47 | + }, | |
| 48 | + confirmPassword: { | |
| 49 | + rules: [{ | |
| 50 | + required: true, | |
| 51 | + errorMessage: '确认密码不能为空' | |
| 52 | + }, { | |
| 53 | + validateFunction: (rule, value, data) => data.newPassword === value, | |
| 54 | + errorMessage: '两次输入的密码不一致' | |
| 55 | + } | |
| 56 | + ] | |
| 57 | + } | |
| 58 | + } | |
| 59 | + } | |
| 60 | + }, | |
| 61 | + onReady() { | |
| 62 | + this.$refs.form.setRules(this.rules) | |
| 63 | + }, | |
| 64 | + methods: { | |
| 65 | + submit() { | |
| 66 | + this.$refs.form.validate().then(res => { | |
| 67 | + updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => { | |
| 68 | + this.$modal.msgSuccess("修改成功") | |
| 69 | + }) | |
| 70 | + }) | |
| 71 | + } | |
| 72 | + } | |
| 73 | + } | |
| 74 | +</script> | |
| 75 | + | |
| 76 | +<style lang="scss"> | |
| 77 | + page { | |
| 78 | + background-color: #ffffff; | |
| 79 | + } | |
| 80 | + | |
| 81 | + .pwd-retrieve-container { | |
| 82 | + padding-top: 36rpx; | |
| 83 | + padding: 15px; | |
| 84 | + } | |
| 85 | +</style> | ... | ... |
yudao-ui-admin-uniapp/pages/mine/setting/index.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="setting-container" :style="{height: `${windowHeight}px`}"> | |
| 3 | + <view class="menu-list"> | |
| 4 | + <view class="list-cell list-cell-arrow" @click="handleToPwd"> | |
| 5 | + <view class="menu-item-box"> | |
| 6 | + <view class="iconfont icon-password menu-icon"></view> | |
| 7 | + <view>修改密码</view> | |
| 8 | + </view> | |
| 9 | + </view> | |
| 10 | + <view class="list-cell list-cell-arrow" @click="handleToUpgrade"> | |
| 11 | + <view class="menu-item-box"> | |
| 12 | + <view class="iconfont icon-refresh menu-icon"></view> | |
| 13 | + <view>检查更新</view> | |
| 14 | + </view> | |
| 15 | + </view> | |
| 16 | + <view class="list-cell list-cell-arrow" @click="handleCleanTmp"> | |
| 17 | + <view class="menu-item-box"> | |
| 18 | + <view class="iconfont icon-clean menu-icon"></view> | |
| 19 | + <view>清理缓存</view> | |
| 20 | + </view> | |
| 21 | + </view> | |
| 22 | + </view> | |
| 23 | + <view class="cu-list menu"> | |
| 24 | + <view class="cu-item item-box"> | |
| 25 | + <view class="content text-center" @click="handleLogout"> | |
| 26 | + <text class="text-black">退出登录</text> | |
| 27 | + </view> | |
| 28 | + </view> | |
| 29 | + </view> | |
| 30 | + </view> | |
| 31 | +</template> | |
| 32 | + | |
| 33 | +<script> | |
| 34 | + export default { | |
| 35 | + data() { | |
| 36 | + return { | |
| 37 | + windowHeight: uni.getSystemInfoSync().windowHeight | |
| 38 | + } | |
| 39 | + }, | |
| 40 | + methods: { | |
| 41 | + handleToPwd() { | |
| 42 | + this.$tab.navigateTo('/pages/mine/pwd/index') | |
| 43 | + }, | |
| 44 | + handleToUpgrade() { | |
| 45 | + this.$modal.showToast('模块建设中~') | |
| 46 | + }, | |
| 47 | + handleCleanTmp() { | |
| 48 | + this.$modal.showToast('模块建设中~') | |
| 49 | + }, | |
| 50 | + handleLogout() { | |
| 51 | + this.$modal.confirm('确定注销并退出系统吗?').then(() => { | |
| 52 | + this.$store.dispatch('LogOut').then(() => { | |
| 53 | + this.$tab.reLaunch('/pages/index') | |
| 54 | + }) | |
| 55 | + }) | |
| 56 | + } | |
| 57 | + } | |
| 58 | + } | |
| 59 | +</script> | |
| 60 | + | |
| 61 | +<style lang="scss" scoped> | |
| 62 | + .page { | |
| 63 | + background-color: #f8f8f8; | |
| 64 | + } | |
| 65 | + | |
| 66 | + .item-box { | |
| 67 | + background-color: #FFFFFF; | |
| 68 | + margin: 30rpx; | |
| 69 | + display: flex; | |
| 70 | + flex-direction: row; | |
| 71 | + justify-content: center; | |
| 72 | + align-items: center; | |
| 73 | + padding: 10rpx; | |
| 74 | + border-radius: 8rpx; | |
| 75 | + color: #303133; | |
| 76 | + font-size: 32rpx; | |
| 77 | + } | |
| 78 | +</style> | ... | ... |
yudao-ui-admin-uniapp/pages/work/index.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="work-container"> | |
| 3 | + <!-- 轮播图 --> | |
| 4 | + <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content"> | |
| 5 | + <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper"> | |
| 6 | + <swiper-item v-for="(item, index) in data" :key="index"> | |
| 7 | + <view class="swiper-item" @click="clickBannerItem(item)"> | |
| 8 | + <image :src="item.image" mode="aspectFill" :draggable="false" /> | |
| 9 | + </view> | |
| 10 | + </swiper-item> | |
| 11 | + </swiper> | |
| 12 | + </uni-swiper-dot> | |
| 13 | + | |
| 14 | + <!-- 宫格组件 --> | |
| 15 | + <uni-section title="系统管理" type="line"></uni-section> | |
| 16 | + <view class="grid-body"> | |
| 17 | + <uni-grid :column="4" :showBorder="false" @change="changeGrid"> | |
| 18 | + <uni-grid-item> | |
| 19 | + <view class="grid-item-box"> | |
| 20 | + <uni-icons type="person-filled" size="30"></uni-icons> | |
| 21 | + <text class="text">用户管理</text> | |
| 22 | + </view> | |
| 23 | + </uni-grid-item> | |
| 24 | + <uni-grid-item> | |
| 25 | + <view class="grid-item-box"> | |
| 26 | + <uni-icons type="staff-filled" size="30"></uni-icons> | |
| 27 | + <text class="text">角色管理</text> | |
| 28 | + </view> | |
| 29 | + </uni-grid-item> | |
| 30 | + <uni-grid-item> | |
| 31 | + <view class="grid-item-box"> | |
| 32 | + <uni-icons type="color" size="30"></uni-icons> | |
| 33 | + <text class="text">菜单管理</text> | |
| 34 | + </view> | |
| 35 | + </uni-grid-item> | |
| 36 | + <uni-grid-item> | |
| 37 | + <view class="grid-item-box"> | |
| 38 | + <uni-icons type="settings-filled" size="30"></uni-icons> | |
| 39 | + <text class="text">部门管理</text> | |
| 40 | + </view> | |
| 41 | + </uni-grid-item> | |
| 42 | + <uni-grid-item> | |
| 43 | + <view class="grid-item-box"> | |
| 44 | + <uni-icons type="heart-filled" size="30"></uni-icons> | |
| 45 | + <text class="text">岗位管理</text> | |
| 46 | + </view> | |
| 47 | + </uni-grid-item> | |
| 48 | + <uni-grid-item> | |
| 49 | + <view class="grid-item-box"> | |
| 50 | + <uni-icons type="bars" size="30"></uni-icons> | |
| 51 | + <text class="text">字典管理</text> | |
| 52 | + </view> | |
| 53 | + </uni-grid-item> | |
| 54 | + <uni-grid-item> | |
| 55 | + <view class="grid-item-box"> | |
| 56 | + <uni-icons type="gear-filled" size="30"></uni-icons> | |
| 57 | + <text class="text">参数设置</text> | |
| 58 | + </view> | |
| 59 | + </uni-grid-item> | |
| 60 | + <uni-grid-item> | |
| 61 | + <view class="grid-item-box"> | |
| 62 | + <uni-icons type="chat-filled" size="30"></uni-icons> | |
| 63 | + <text class="text">通知公告</text> | |
| 64 | + </view> | |
| 65 | + </uni-grid-item> | |
| 66 | + <uni-grid-item> | |
| 67 | + <view class="grid-item-box"> | |
| 68 | + <uni-icons type="wallet-filled" size="30"></uni-icons> | |
| 69 | + <text class="text">日志管理</text> | |
| 70 | + </view> | |
| 71 | + </uni-grid-item> | |
| 72 | + </uni-grid> | |
| 73 | + </view> | |
| 74 | + </view> | |
| 75 | +</template> | |
| 76 | + | |
| 77 | +<script> | |
| 78 | + export default { | |
| 79 | + data() { | |
| 80 | + return { | |
| 81 | + current: 0, | |
| 82 | + swiperDotIndex: 0, | |
| 83 | + data: [{ | |
| 84 | + image: '/static/images/banner/banner01.jpg' | |
| 85 | + }, | |
| 86 | + { | |
| 87 | + image: '/static/images/banner/banner02.jpg' | |
| 88 | + }, | |
| 89 | + { | |
| 90 | + image: '/static/images/banner/banner03.jpg' | |
| 91 | + } | |
| 92 | + ] | |
| 93 | + } | |
| 94 | + }, | |
| 95 | + methods: { | |
| 96 | + clickBannerItem(item) { | |
| 97 | + console.info(item) | |
| 98 | + }, | |
| 99 | + changeSwiper(e) { | |
| 100 | + this.current = e.detail.current | |
| 101 | + }, | |
| 102 | + changeGrid(e) { | |
| 103 | + this.$modal.showToast('模块建设中~') | |
| 104 | + } | |
| 105 | + } | |
| 106 | + } | |
| 107 | +</script> | |
| 108 | + | |
| 109 | +<style lang="scss"> | |
| 110 | + /* #ifndef APP-NVUE */ | |
| 111 | + page { | |
| 112 | + display: flex; | |
| 113 | + flex-direction: column; | |
| 114 | + box-sizing: border-box; | |
| 115 | + background-color: #fff; | |
| 116 | + min-height: 100%; | |
| 117 | + height: auto; | |
| 118 | + } | |
| 119 | + | |
| 120 | + view { | |
| 121 | + font-size: 14px; | |
| 122 | + line-height: inherit; | |
| 123 | + } | |
| 124 | + | |
| 125 | + /* #endif */ | |
| 126 | + | |
| 127 | + .text { | |
| 128 | + text-align: center; | |
| 129 | + font-size: 26rpx; | |
| 130 | + margin-top: 10rpx; | |
| 131 | + } | |
| 132 | + | |
| 133 | + .grid-item-box { | |
| 134 | + flex: 1; | |
| 135 | + /* #ifndef APP-NVUE */ | |
| 136 | + display: flex; | |
| 137 | + /* #endif */ | |
| 138 | + flex-direction: column; | |
| 139 | + align-items: center; | |
| 140 | + justify-content: center; | |
| 141 | + padding: 15px 0; | |
| 142 | + } | |
| 143 | + | |
| 144 | + .uni-margin-wrap { | |
| 145 | + width: 690rpx; | |
| 146 | + width: 100%; | |
| 147 | + ; | |
| 148 | + } | |
| 149 | + | |
| 150 | + .swiper { | |
| 151 | + height: 300rpx; | |
| 152 | + } | |
| 153 | + | |
| 154 | + .swiper-box { | |
| 155 | + height: 150px; | |
| 156 | + } | |
| 157 | + | |
| 158 | + .swiper-item { | |
| 159 | + /* #ifndef APP-NVUE */ | |
| 160 | + display: flex; | |
| 161 | + /* #endif */ | |
| 162 | + flex-direction: column; | |
| 163 | + justify-content: center; | |
| 164 | + align-items: center; | |
| 165 | + color: #fff; | |
| 166 | + height: 300rpx; | |
| 167 | + line-height: 300rpx; | |
| 168 | + } | |
| 169 | + | |
| 170 | + @media screen and (min-width: 500px) { | |
| 171 | + .uni-swiper-dot-box { | |
| 172 | + width: 400px; | |
| 173 | + /* #ifndef APP-NVUE */ | |
| 174 | + margin: 0 auto; | |
| 175 | + /* #endif */ | |
| 176 | + margin-top: 8px; | |
| 177 | + } | |
| 178 | + | |
| 179 | + .image { | |
| 180 | + width: 100%; | |
| 181 | + } | |
| 182 | + } | |
| 183 | +</style> | ... | ... |
yudao-ui-admin-uniapp/permission.js
0 → 100644
| 1 | +import { getAccessToken } from '@/utils/auth' | |
| 2 | + | |
| 3 | +// 登录页面 | |
| 4 | +const loginPage = "/pages/login" | |
| 5 | + | |
| 6 | +// 页面白名单 | |
| 7 | +const whiteList = [ | |
| 8 | + '/pages/login', '/pages/common/webview/index' | |
| 9 | +] | |
| 10 | + | |
| 11 | +// 检查地址白名单 | |
| 12 | +function checkWhite(url) { | |
| 13 | + const path = url.split('?')[0] | |
| 14 | + return whiteList.indexOf(path) !== -1 | |
| 15 | +} | |
| 16 | + | |
| 17 | +// 页面跳转验证拦截器 | |
| 18 | +let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"] | |
| 19 | +list.forEach(item => { | |
| 20 | + uni.addInterceptor(item, { | |
| 21 | + invoke(to) { | |
| 22 | + if (getAccessToken()) { | |
| 23 | + if (to.path === loginPage) { | |
| 24 | + uni.reLaunch({ url: "/" }) | |
| 25 | + } | |
| 26 | + return true | |
| 27 | + } else { | |
| 28 | + if (checkWhite(to.url)) { | |
| 29 | + return true | |
| 30 | + } | |
| 31 | + uni.reLaunch({ url: loginPage }) | |
| 32 | + return false | |
| 33 | + } | |
| 34 | + }, | |
| 35 | + fail(err) { | |
| 36 | + console.log(err) | |
| 37 | + } | |
| 38 | + }) | |
| 39 | +}) | ... | ... |
yudao-ui-admin-uniapp/plugins/auth.js
0 → 100644
| 1 | +import store from '@/store' | |
| 2 | + | |
| 3 | +function authPermission(permission) { | |
| 4 | + const all_permission = "*:*:*" | |
| 5 | + const permissions = store.getters && store.getters.permissions | |
| 6 | + if (permission && permission.length > 0) { | |
| 7 | + return permissions.some(v => { | |
| 8 | + return all_permission === v || v === permission | |
| 9 | + }) | |
| 10 | + } else { | |
| 11 | + return false | |
| 12 | + } | |
| 13 | +} | |
| 14 | + | |
| 15 | +function authRole(role) { | |
| 16 | + const super_admin = "admin" | |
| 17 | + const roles = store.getters && store.getters.roles | |
| 18 | + if (role && role.length > 0) { | |
| 19 | + return roles.some(v => { | |
| 20 | + return super_admin === v || v === role | |
| 21 | + }) | |
| 22 | + } else { | |
| 23 | + return false | |
| 24 | + } | |
| 25 | +} | |
| 26 | + | |
| 27 | +export default { | |
| 28 | + // 验证用户是否具备某权限 | |
| 29 | + hasPermi(permission) { | |
| 30 | + return authPermission(permission) | |
| 31 | + }, | |
| 32 | + // 验证用户是否含有指定权限,只需包含其中一个 | |
| 33 | + hasPermiOr(permissions) { | |
| 34 | + return permissions.some(item => { | |
| 35 | + return authPermission(item) | |
| 36 | + }) | |
| 37 | + }, | |
| 38 | + // 验证用户是否含有指定权限,必须全部拥有 | |
| 39 | + hasPermiAnd(permissions) { | |
| 40 | + return permissions.every(item => { | |
| 41 | + return authPermission(item) | |
| 42 | + }) | |
| 43 | + }, | |
| 44 | + // 验证用户是否具备某角色 | |
| 45 | + hasRole(role) { | |
| 46 | + return authRole(role) | |
| 47 | + }, | |
| 48 | + // 验证用户是否含有指定角色,只需包含其中一个 | |
| 49 | + hasRoleOr(roles) { | |
| 50 | + return roles.some(item => { | |
| 51 | + return authRole(item) | |
| 52 | + }) | |
| 53 | + }, | |
| 54 | + // 验证用户是否含有指定角色,必须全部拥有 | |
| 55 | + hasRoleAnd(roles) { | |
| 56 | + return roles.every(item => { | |
| 57 | + return authRole(item) | |
| 58 | + }) | |
| 59 | + } | |
| 60 | +} | ... | ... |
yudao-ui-admin-uniapp/plugins/index.js
0 → 100644
yudao-ui-admin-uniapp/plugins/modal.js
0 → 100644
| 1 | +export default { | |
| 2 | + // 消息提示 | |
| 3 | + msg(content) { | |
| 4 | + uni.showToast({ | |
| 5 | + title: content, | |
| 6 | + icon: 'none' | |
| 7 | + }) | |
| 8 | + }, | |
| 9 | + // 错误消息 | |
| 10 | + msgError(content) { | |
| 11 | + uni.showToast({ | |
| 12 | + title: content, | |
| 13 | + icon: 'error' | |
| 14 | + }) | |
| 15 | + }, | |
| 16 | + // 成功消息 | |
| 17 | + msgSuccess(content) { | |
| 18 | + uni.showToast({ | |
| 19 | + title: content, | |
| 20 | + icon: 'success' | |
| 21 | + }) | |
| 22 | + }, | |
| 23 | + // 隐藏消息 | |
| 24 | + hideMsg(content) { | |
| 25 | + uni.hideToast() | |
| 26 | + }, | |
| 27 | + // 弹出提示 | |
| 28 | + alert(content) { | |
| 29 | + uni.showModal({ | |
| 30 | + title: '提示', | |
| 31 | + content: content, | |
| 32 | + showCancel: false | |
| 33 | + }) | |
| 34 | + }, | |
| 35 | + // 确认窗体 | |
| 36 | + confirm(content) { | |
| 37 | + return new Promise((resolve, reject) => { | |
| 38 | + uni.showModal({ | |
| 39 | + title: '系统提示', | |
| 40 | + content: content, | |
| 41 | + cancelText: '取消', | |
| 42 | + confirmText: '确定', | |
| 43 | + success: function(res) { | |
| 44 | + if (res.confirm) { | |
| 45 | + resolve(res.confirm) | |
| 46 | + } | |
| 47 | + } | |
| 48 | + }) | |
| 49 | + }) | |
| 50 | + }, | |
| 51 | + // 提示信息 | |
| 52 | + showToast(option) { | |
| 53 | + if (typeof option === "object") { | |
| 54 | + uni.showToast(option) | |
| 55 | + } else { | |
| 56 | + uni.showToast({ | |
| 57 | + title: option, | |
| 58 | + icon: "none", | |
| 59 | + duration: 2500 | |
| 60 | + }) | |
| 61 | + } | |
| 62 | + }, | |
| 63 | + // 打开遮罩层 | |
| 64 | + loading(content) { | |
| 65 | + uni.showLoading({ | |
| 66 | + title: content, | |
| 67 | + icon: 'none' | |
| 68 | + }) | |
| 69 | + }, | |
| 70 | + // 关闭遮罩层 | |
| 71 | + closeLoading() { | |
| 72 | + uni.hideLoading() | |
| 73 | + } | |
| 74 | +} | ... | ... |
yudao-ui-admin-uniapp/plugins/tab.js
0 → 100644
| 1 | +export default { | |
| 2 | + // 关闭所有页面,打开到应用内的某个页面 | |
| 3 | + reLaunch(url) { | |
| 4 | + return uni.reLaunch({ | |
| 5 | + url: url | |
| 6 | + }) | |
| 7 | + }, | |
| 8 | + // 跳转到tabBar页面,并关闭其他所有非tabBar页面 | |
| 9 | + switchTab(url) { | |
| 10 | + return uni.switchTab({ | |
| 11 | + url: url | |
| 12 | + }) | |
| 13 | + }, | |
| 14 | + // 关闭当前页面,跳转到应用内的某个页面 | |
| 15 | + redirectTo(url) { | |
| 16 | + return uni.redirectTo({ | |
| 17 | + url: url | |
| 18 | + }) | |
| 19 | + }, | |
| 20 | + // 保留当前页面,跳转到应用内的某个页面 | |
| 21 | + navigateTo(url) { | |
| 22 | + return uni.navigateTo({ | |
| 23 | + url: url | |
| 24 | + }) | |
| 25 | + }, | |
| 26 | + // 关闭当前页面,返回上一页面或多级页面 | |
| 27 | + navigateBack() { | |
| 28 | + return uni.navigateBack() | |
| 29 | + } | |
| 30 | +} | ... | ... |
yudao-ui-admin-uniapp/static/favicon.ico
0 → 100644
No preview for this file type
yudao-ui-admin-uniapp/static/font/iconfont.css
0 → 100644
| 1 | +@font-face { | |
| 2 | + font-family: "iconfont"; | |
| 3 | + src: url('/static/font/iconfont.ttf') format('truetype'); | |
| 4 | +} | |
| 5 | + | |
| 6 | +.iconfont { | |
| 7 | + font-family: "iconfont" !important; | |
| 8 | + font-size: 16px; | |
| 9 | + display: inline-block; | |
| 10 | + font-style: normal; | |
| 11 | + -webkit-font-smoothing: antialiased; | |
| 12 | + -moz-osx-font-smoothing: grayscale; | |
| 13 | +} | |
| 14 | + | |
| 15 | +.icon-user:before { | |
| 16 | + content: "\e7ae"; | |
| 17 | +} | |
| 18 | + | |
| 19 | +.icon-password:before { | |
| 20 | + content: "\e8b2"; | |
| 21 | +} | |
| 22 | + | |
| 23 | +.icon-code:before { | |
| 24 | + content: "\e699"; | |
| 25 | +} | |
| 26 | + | |
| 27 | +.icon-setting:before { | |
| 28 | + content: "\e6cc"; | |
| 29 | +} | |
| 30 | + | |
| 31 | +.icon-share:before { | |
| 32 | + content: "\e739"; | |
| 33 | +} | |
| 34 | + | |
| 35 | +.icon-edit:before { | |
| 36 | + content: "\e60c"; | |
| 37 | +} | |
| 38 | + | |
| 39 | +.icon-version:before { | |
| 40 | + content: "\e63f"; | |
| 41 | +} | |
| 42 | + | |
| 43 | +.icon-service:before { | |
| 44 | + content: "\e6ff"; | |
| 45 | +} | |
| 46 | + | |
| 47 | +.icon-friendfill:before { | |
| 48 | + content: "\e726"; | |
| 49 | +} | |
| 50 | + | |
| 51 | +.icon-community:before { | |
| 52 | + content: "\e741"; | |
| 53 | +} | |
| 54 | + | |
| 55 | +.icon-people:before { | |
| 56 | + content: "\e736"; | |
| 57 | +} | |
| 58 | + | |
| 59 | +.icon-dianzan:before { | |
| 60 | + content: "\ec7f"; | |
| 61 | +} | |
| 62 | + | |
| 63 | +.icon-right:before { | |
| 64 | + content: "\e7eb"; | |
| 65 | +} | |
| 66 | + | |
| 67 | +.icon-logout:before { | |
| 68 | + content: "\e61d"; | |
| 69 | +} | |
| 70 | + | |
| 71 | +.icon-help:before { | |
| 72 | + content: "\e616"; | |
| 73 | +} | |
| 74 | + | |
| 75 | +.icon-github:before { | |
| 76 | + content: "\e628"; | |
| 77 | +} | |
| 78 | + | |
| 79 | +.icon-aixin:before { | |
| 80 | + content: "\e601"; | |
| 81 | +} | |
| 82 | + | |
| 83 | +.icon-clean:before { | |
| 84 | + content: "\e607"; | |
| 85 | +} | |
| 86 | + | |
| 87 | +.icon-refresh:before { | |
| 88 | + content: "\e604"; | |
| 89 | +} | |
| 90 | + | ... | ... |
yudao-ui-admin-uniapp/static/font/iconfont.ttf
0 → 100644
No preview for this file type
yudao-ui-admin-uniapp/static/images/banner/banner01.jpg
0 → 100644
38.7 KB
yudao-ui-admin-uniapp/static/images/banner/banner02.jpg
0 → 100644
36.2 KB
yudao-ui-admin-uniapp/static/images/banner/banner03.jpg
0 → 100644
37.2 KB
yudao-ui-admin-uniapp/static/images/profile.jpg
0 → 100644
79.2 KB
yudao-ui-admin-uniapp/static/images/tabbar/home.png
0 → 100644
3.19 KB
yudao-ui-admin-uniapp/static/images/tabbar/home_.png
0 → 100644
3.15 KB
yudao-ui-admin-uniapp/static/images/tabbar/mine.png
0 → 100644
4.14 KB
yudao-ui-admin-uniapp/static/images/tabbar/mine_.png
0 → 100644
4.12 KB
yudao-ui-admin-uniapp/static/images/tabbar/work.png
0 → 100644
4.01 KB
yudao-ui-admin-uniapp/static/images/tabbar/work_.png
0 → 100644
4.89 KB
yudao-ui-admin-uniapp/static/index.html
0 → 100644
| 1 | +<!DOCTYPE html> | |
| 2 | +<html lang="zh-CN"> | |
| 3 | + <head> | |
| 4 | + <meta charset="utf-8"> | |
| 5 | + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| 6 | + <meta name="renderer" content="webkit"> | |
| 7 | + <title><%= htmlWebpackPlugin.options.title %></title> | |
| 8 | + <link rel="shortcut icon" type="image/x-icon" href="<%= BASE_URL %>static/favicon.ico"> | |
| 9 | + <script> | |
| 10 | + var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)')) | |
| 11 | + document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />') | |
| 12 | + </script> | |
| 13 | + <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" /> | |
| 14 | + </head> | |
| 15 | + <body> | |
| 16 | + <noscript> | |
| 17 | + <strong>本站点必须要开启JavaScript才能运行.</strong> | |
| 18 | + </noscript> | |
| 19 | + <div id="app"></div> | |
| 20 | +</html> | |
| 0 | 21 | \ No newline at end of file | ... | ... |
yudao-ui-admin-uniapp/static/logo.png
0 → 100644
5.61 KB
yudao-ui-admin-uniapp/static/logo200.png
0 → 100644
7.81 KB
yudao-ui-admin-uniapp/static/scss/colorui.css
0 → 100644
| 1 | +/* | |
| 2 | + ColorUi for uniApp v2.1.6 | by 文晓港 2019-05-31 10:44:24 | |
| 3 | + 仅供学习交流,如作它用所承受的法律责任一概与作者无关 | |
| 4 | + | |
| 5 | + *使用ColorUi开发扩展与插件时,请注明基于ColorUi开发 | |
| 6 | + | |
| 7 | + (QQ交流群:240787041) | |
| 8 | +*/ | |
| 9 | + | |
| 10 | +/* ================== | |
| 11 | + 初始化 | |
| 12 | + ==================== */ | |
| 13 | +body { | |
| 14 | + background-color: #f1f1f1; | |
| 15 | + font-size: 28upx; | |
| 16 | + color: #333333; | |
| 17 | + font-family: Helvetica Neue, Helvetica, sans-serif; | |
| 18 | +} | |
| 19 | + | |
| 20 | +view, | |
| 21 | +scroll-view, | |
| 22 | +swiper, | |
| 23 | +button, | |
| 24 | +input, | |
| 25 | +textarea, | |
| 26 | +label, | |
| 27 | +navigator, | |
| 28 | +image { | |
| 29 | + box-sizing: border-box; | |
| 30 | +} | |
| 31 | + | |
| 32 | +.round { | |
| 33 | + border-radius: 5000upx; | |
| 34 | +} | |
| 35 | + | |
| 36 | +.radius { | |
| 37 | + border-radius: 6upx; | |
| 38 | +} | |
| 39 | + | |
| 40 | +/* ================== | |
| 41 | + 图片 | |
| 42 | + ==================== */ | |
| 43 | + | |
| 44 | +image { | |
| 45 | + max-width: 100%; | |
| 46 | + display: inline-block; | |
| 47 | + position: relative; | |
| 48 | + z-index: 0; | |
| 49 | +} | |
| 50 | + | |
| 51 | +image.loading::before { | |
| 52 | + content: ""; | |
| 53 | + background-color: #f5f5f5; | |
| 54 | + display: block; | |
| 55 | + position: absolute; | |
| 56 | + width: 100%; | |
| 57 | + height: 100%; | |
| 58 | + z-index: -2; | |
| 59 | +} | |
| 60 | + | |
| 61 | +image.loading::after { | |
| 62 | + content: "\e7f1"; | |
| 63 | + font-family: "cuIcon"; | |
| 64 | + position: absolute; | |
| 65 | + top: 0; | |
| 66 | + left: 0; | |
| 67 | + width: 32upx; | |
| 68 | + height: 32upx; | |
| 69 | + line-height: 32upx; | |
| 70 | + right: 0; | |
| 71 | + bottom: 0; | |
| 72 | + z-index: -1; | |
| 73 | + font-size: 32upx; | |
| 74 | + margin: auto; | |
| 75 | + color: #ccc; | |
| 76 | + -webkit-animation: cuIcon-spin 2s infinite linear; | |
| 77 | + animation: cuIcon-spin 2s infinite linear; | |
| 78 | + display: block; | |
| 79 | +} | |
| 80 | + | |
| 81 | +.response { | |
| 82 | + width: 100%; | |
| 83 | +} | |
| 84 | + | |
| 85 | +/* ================== | |
| 86 | + 开关 | |
| 87 | + ==================== */ | |
| 88 | + | |
| 89 | +switch, | |
| 90 | +checkbox, | |
| 91 | +radio { | |
| 92 | + position: relative; | |
| 93 | +} | |
| 94 | + | |
| 95 | +switch::after, | |
| 96 | +switch::before { | |
| 97 | + font-family: "cuIcon"; | |
| 98 | + content: "\e645"; | |
| 99 | + position: absolute; | |
| 100 | + color: #ffffff !important; | |
| 101 | + top: 0%; | |
| 102 | + left: 0upx; | |
| 103 | + font-size: 26upx; | |
| 104 | + line-height: 26px; | |
| 105 | + width: 50%; | |
| 106 | + text-align: center; | |
| 107 | + pointer-events: none; | |
| 108 | + transform: scale(0, 0); | |
| 109 | + transition: all 0.3s ease-in-out 0s; | |
| 110 | + z-index: 9; | |
| 111 | + bottom: 0; | |
| 112 | + height: 26px; | |
| 113 | + margin: auto; | |
| 114 | +} | |
| 115 | + | |
| 116 | +switch::before { | |
| 117 | + content: "\e646"; | |
| 118 | + right: 0; | |
| 119 | + transform: scale(1, 1); | |
| 120 | + left: auto; | |
| 121 | +} | |
| 122 | + | |
| 123 | +switch[checked]::after, | |
| 124 | +switch.checked::after { | |
| 125 | + transform: scale(1, 1); | |
| 126 | +} | |
| 127 | + | |
| 128 | +switch[checked]::before, | |
| 129 | +switch.checked::before { | |
| 130 | + transform: scale(0, 0); | |
| 131 | +} | |
| 132 | + | |
| 133 | +/* #ifndef MP-ALIPAY */ | |
| 134 | +radio::before, | |
| 135 | +checkbox::before { | |
| 136 | + font-family: "cuIcon"; | |
| 137 | + content: "\e645"; | |
| 138 | + position: absolute; | |
| 139 | + color: #ffffff !important; | |
| 140 | + top: 50%; | |
| 141 | + margin-top: -8px; | |
| 142 | + right: 5px; | |
| 143 | + font-size: 32upx; | |
| 144 | + line-height: 16px; | |
| 145 | + pointer-events: none; | |
| 146 | + transform: scale(1, 1); | |
| 147 | + transition: all 0.3s ease-in-out 0s; | |
| 148 | + z-index: 9; | |
| 149 | +} | |
| 150 | + | |
| 151 | +radio .wx-radio-input, | |
| 152 | +checkbox .wx-checkbox-input, | |
| 153 | +radio .uni-radio-input, | |
| 154 | +checkbox .uni-checkbox-input { | |
| 155 | + margin: 0; | |
| 156 | + width: 24px; | |
| 157 | + height: 24px; | |
| 158 | +} | |
| 159 | + | |
| 160 | +checkbox.round .wx-checkbox-input, | |
| 161 | +checkbox.round .uni-checkbox-input { | |
| 162 | + border-radius: 100upx; | |
| 163 | +} | |
| 164 | + | |
| 165 | +/* #endif */ | |
| 166 | + | |
| 167 | +switch[checked]::before { | |
| 168 | + transform: scale(0, 0); | |
| 169 | +} | |
| 170 | + | |
| 171 | +switch .wx-switch-input, | |
| 172 | +switch .uni-switch-input { | |
| 173 | + border: none; | |
| 174 | + padding: 0 24px; | |
| 175 | + width: 48px; | |
| 176 | + height: 26px; | |
| 177 | + margin: 0; | |
| 178 | + border-radius: 100upx; | |
| 179 | +} | |
| 180 | + | |
| 181 | +switch .wx-switch-input:not([class*="bg-"]), | |
| 182 | +switch .uni-switch-input:not([class*="bg-"]) { | |
| 183 | + background: #8799a3 !important; | |
| 184 | +} | |
| 185 | + | |
| 186 | +switch .wx-switch-input::after, | |
| 187 | +switch .uni-switch-input::after { | |
| 188 | + margin: auto; | |
| 189 | + width: 26px; | |
| 190 | + height: 26px; | |
| 191 | + border-radius: 100upx; | |
| 192 | + left: 0upx; | |
| 193 | + top: 0upx; | |
| 194 | + bottom: 0upx; | |
| 195 | + position: absolute; | |
| 196 | + transform: scale(0.9, 0.9); | |
| 197 | + transition: all 0.1s ease-in-out 0s; | |
| 198 | +} | |
| 199 | + | |
| 200 | +switch .wx-switch-input.wx-switch-input-checked::after, | |
| 201 | +switch .uni-switch-input.uni-switch-input-checked::after { | |
| 202 | + margin: auto; | |
| 203 | + left: 22px; | |
| 204 | + box-shadow: none; | |
| 205 | + transform: scale(0.9, 0.9); | |
| 206 | +} | |
| 207 | + | |
| 208 | +radio-group { | |
| 209 | + display: inline-block; | |
| 210 | +} | |
| 211 | + | |
| 212 | + | |
| 213 | + | |
| 214 | +switch.radius .wx-switch-input::after, | |
| 215 | +switch.radius .wx-switch-input, | |
| 216 | +switch.radius .wx-switch-input::before, | |
| 217 | +switch.radius .uni-switch-input::after, | |
| 218 | +switch.radius .uni-switch-input, | |
| 219 | +switch.radius .uni-switch-input::before { | |
| 220 | + border-radius: 10upx; | |
| 221 | +} | |
| 222 | + | |
| 223 | +switch .wx-switch-input::before, | |
| 224 | +radio.radio::before, | |
| 225 | +checkbox .wx-checkbox-input::before, | |
| 226 | +radio .wx-radio-input::before, | |
| 227 | +switch .uni-switch-input::before, | |
| 228 | +radio.radio::before, | |
| 229 | +checkbox .uni-checkbox-input::before, | |
| 230 | +radio .uni-radio-input::before { | |
| 231 | + display: none; | |
| 232 | +} | |
| 233 | + | |
| 234 | +radio.radio[checked]::after, | |
| 235 | +radio.radio .uni-radio-input-checked::after { | |
| 236 | + content: ""; | |
| 237 | + background-color: transparent; | |
| 238 | + display: block; | |
| 239 | + position: absolute; | |
| 240 | + width: 8px; | |
| 241 | + height: 8px; | |
| 242 | + z-index: 999; | |
| 243 | + top: 0upx; | |
| 244 | + left: 0upx; | |
| 245 | + right: 0; | |
| 246 | + bottom: 0; | |
| 247 | + margin: auto; | |
| 248 | + border-radius: 200upx; | |
| 249 | + /* #ifndef MP */ | |
| 250 | + border: 7px solid #ffffff !important; | |
| 251 | + /* #endif */ | |
| 252 | + | |
| 253 | + /* #ifdef MP */ | |
| 254 | + border: 8px solid #ffffff !important; | |
| 255 | + /* #endif */ | |
| 256 | +} | |
| 257 | + | |
| 258 | +.switch-sex::after { | |
| 259 | + content: "\e71c"; | |
| 260 | +} | |
| 261 | + | |
| 262 | +.switch-sex::before { | |
| 263 | + content: "\e71a"; | |
| 264 | +} | |
| 265 | + | |
| 266 | +.switch-sex .wx-switch-input, | |
| 267 | +.switch-sex .uni-switch-input { | |
| 268 | + background: #e54d42 !important; | |
| 269 | + border-color: #e54d42 !important; | |
| 270 | +} | |
| 271 | + | |
| 272 | +.switch-sex[checked] .wx-switch-input, | |
| 273 | +.switch-sex.checked .uni-switch-input { | |
| 274 | + background: #0081ff !important; | |
| 275 | + border-color: #0081ff !important; | |
| 276 | +} | |
| 277 | + | |
| 278 | +switch.red[checked] .wx-switch-input.wx-switch-input-checked, | |
| 279 | +checkbox.red[checked] .wx-checkbox-input, | |
| 280 | +radio.red[checked] .wx-radio-input, | |
| 281 | +switch.red.checked .uni-switch-input.uni-switch-input-checked, | |
| 282 | +checkbox.red.checked .uni-checkbox-input, | |
| 283 | +radio.red.checked .uni-radio-input { | |
| 284 | + background-color: #e54d42 !important; | |
| 285 | + border-color: #e54d42 !important; | |
| 286 | + color: #ffffff !important; | |
| 287 | +} | |
| 288 | + | |
| 289 | +switch.orange[checked] .wx-switch-input, | |
| 290 | +checkbox.orange[checked] .wx-checkbox-input, | |
| 291 | +radio.orange[checked] .wx-radio-input, | |
| 292 | +switch.orange.checked .uni-switch-input, | |
| 293 | +checkbox.orange.checked .uni-checkbox-input, | |
| 294 | +radio.orange.checked .uni-radio-input { | |
| 295 | + background-color: #f37b1d !important; | |
| 296 | + border-color: #f37b1d !important; | |
| 297 | + color: #ffffff !important; | |
| 298 | +} | |
| 299 | + | |
| 300 | +switch.yellow[checked] .wx-switch-input, | |
| 301 | +checkbox.yellow[checked] .wx-checkbox-input, | |
| 302 | +radio.yellow[checked] .wx-radio-input, | |
| 303 | +switch.yellow.checked .uni-switch-input, | |
| 304 | +checkbox.yellow.checked .uni-checkbox-input, | |
| 305 | +radio.yellow.checked .uni-radio-input { | |
| 306 | + background-color: #fbbd08 !important; | |
| 307 | + border-color: #fbbd08 !important; | |
| 308 | + color: #333333 !important; | |
| 309 | +} | |
| 310 | + | |
| 311 | +switch.olive[checked] .wx-switch-input, | |
| 312 | +checkbox.olive[checked] .wx-checkbox-input, | |
| 313 | +radio.olive[checked] .wx-radio-input, | |
| 314 | +switch.olive.checked .uni-switch-input, | |
| 315 | +checkbox.olive.checked .uni-checkbox-input, | |
| 316 | +radio.olive.checked .uni-radio-input { | |
| 317 | + background-color: #8dc63f !important; | |
| 318 | + border-color: #8dc63f !important; | |
| 319 | + color: #ffffff !important; | |
| 320 | +} | |
| 321 | + | |
| 322 | +switch.green[checked] .wx-switch-input, | |
| 323 | +switch[checked] .wx-switch-input, | |
| 324 | +checkbox.green[checked] .wx-checkbox-input, | |
| 325 | +checkbox[checked] .wx-checkbox-input, | |
| 326 | +radio.green[checked] .wx-radio-input, | |
| 327 | +radio[checked] .wx-radio-input, | |
| 328 | +switch.green.checked .uni-switch-input, | |
| 329 | +switch.checked .uni-switch-input, | |
| 330 | +checkbox.green.checked .uni-checkbox-input, | |
| 331 | +checkbox.checked .uni-checkbox-input, | |
| 332 | +radio.green.checked .uni-radio-input, | |
| 333 | +radio.checked .uni-radio-input { | |
| 334 | + background-color: #39b54a !important; | |
| 335 | + border-color: #39b54a !important; | |
| 336 | + color: #ffffff !important; | |
| 337 | + border-color: #39B54A !important; | |
| 338 | +} | |
| 339 | + | |
| 340 | +switch.cyan[checked] .wx-switch-input, | |
| 341 | +checkbox.cyan[checked] .wx-checkbox-input, | |
| 342 | +radio.cyan[checked] .wx-radio-input, | |
| 343 | +switch.cyan.checked .uni-switch-input, | |
| 344 | +checkbox.cyan.checked .uni-checkbox-input, | |
| 345 | +radio.cyan.checked .uni-radio-input { | |
| 346 | + background-color: #1cbbb4 !important; | |
| 347 | + border-color: #1cbbb4 !important; | |
| 348 | + color: #ffffff !important; | |
| 349 | +} | |
| 350 | + | |
| 351 | +switch.blue[checked] .wx-switch-input, | |
| 352 | +checkbox.blue[checked] .wx-checkbox-input, | |
| 353 | +radio.blue[checked] .wx-radio-input, | |
| 354 | +switch.blue.checked .uni-switch-input, | |
| 355 | +checkbox.blue.checked .uni-checkbox-input, | |
| 356 | +radio.blue.checked .uni-radio-input { | |
| 357 | + background-color: #0081ff !important; | |
| 358 | + border-color: #0081ff !important; | |
| 359 | + color: #ffffff !important; | |
| 360 | +} | |
| 361 | + | |
| 362 | +switch.purple[checked] .wx-switch-input, | |
| 363 | +checkbox.purple[checked] .wx-checkbox-input, | |
| 364 | +radio.purple[checked] .wx-radio-input, | |
| 365 | +switch.purple.checked .uni-switch-input, | |
| 366 | +checkbox.purple.checked .uni-checkbox-input, | |
| 367 | +radio.purple.checked .uni-radio-input { | |
| 368 | + background-color: #6739b6 !important; | |
| 369 | + border-color: #6739b6 !important; | |
| 370 | + color: #ffffff !important; | |
| 371 | +} | |
| 372 | + | |
| 373 | +switch.mauve[checked] .wx-switch-input, | |
| 374 | +checkbox.mauve[checked] .wx-checkbox-input, | |
| 375 | +radio.mauve[checked] .wx-radio-input, | |
| 376 | +switch.mauve.checked .uni-switch-input, | |
| 377 | +checkbox.mauve.checked .uni-checkbox-input, | |
| 378 | +radio.mauve.checked .uni-radio-input { | |
| 379 | + background-color: #9c26b0 !important; | |
| 380 | + border-color: #9c26b0 !important; | |
| 381 | + color: #ffffff !important; | |
| 382 | +} | |
| 383 | + | |
| 384 | +switch.pink[checked] .wx-switch-input, | |
| 385 | +checkbox.pink[checked] .wx-checkbox-input, | |
| 386 | +radio.pink[checked] .wx-radio-input, | |
| 387 | +switch.pink.checked .uni-switch-input, | |
| 388 | +checkbox.pink.checked .uni-checkbox-input, | |
| 389 | +radio.pink.checked .uni-radio-input { | |
| 390 | + background-color: #e03997 !important; | |
| 391 | + border-color: #e03997 !important; | |
| 392 | + color: #ffffff !important; | |
| 393 | +} | |
| 394 | + | |
| 395 | +switch.brown[checked] .wx-switch-input, | |
| 396 | +checkbox.brown[checked] .wx-checkbox-input, | |
| 397 | +radio.brown[checked] .wx-radio-input, | |
| 398 | +switch.brown.checked .uni-switch-input, | |
| 399 | +checkbox.brown.checked .uni-checkbox-input, | |
| 400 | +radio.brown.checked .uni-radio-input { | |
| 401 | + background-color: #a5673f !important; | |
| 402 | + border-color: #a5673f !important; | |
| 403 | + color: #ffffff !important; | |
| 404 | +} | |
| 405 | + | |
| 406 | +switch.grey[checked] .wx-switch-input, | |
| 407 | +checkbox.grey[checked] .wx-checkbox-input, | |
| 408 | +radio.grey[checked] .wx-radio-input, | |
| 409 | +switch.grey.checked .uni-switch-input, | |
| 410 | +checkbox.grey.checked .uni-checkbox-input, | |
| 411 | +radio.grey.checked .uni-radio-input { | |
| 412 | + background-color: #8799a3 !important; | |
| 413 | + border-color: #8799a3 !important; | |
| 414 | + color: #ffffff !important; | |
| 415 | +} | |
| 416 | + | |
| 417 | +switch.gray[checked] .wx-switch-input, | |
| 418 | +checkbox.gray[checked] .wx-checkbox-input, | |
| 419 | +radio.gray[checked] .wx-radio-input, | |
| 420 | +switch.gray.checked .uni-switch-input, | |
| 421 | +checkbox.gray.checked .uni-checkbox-input, | |
| 422 | +radio.gray.checked .uni-radio-input { | |
| 423 | + background-color: #f0f0f0 !important; | |
| 424 | + border-color: #f0f0f0 !important; | |
| 425 | + color: #333333 !important; | |
| 426 | +} | |
| 427 | + | |
| 428 | +switch.black[checked] .wx-switch-input, | |
| 429 | +checkbox.black[checked] .wx-checkbox-input, | |
| 430 | +radio.black[checked] .wx-radio-input, | |
| 431 | +switch.black.checked .uni-switch-input, | |
| 432 | +checkbox.black.checked .uni-checkbox-input, | |
| 433 | +radio.black.checked .uni-radio-input { | |
| 434 | + background-color: #333333 !important; | |
| 435 | + border-color: #333333 !important; | |
| 436 | + color: #ffffff !important; | |
| 437 | +} | |
| 438 | + | |
| 439 | +switch.white[checked] .wx-switch-input, | |
| 440 | +checkbox.white[checked] .wx-checkbox-input, | |
| 441 | +radio.white[checked] .wx-radio-input, | |
| 442 | +switch.white.checked .uni-switch-input, | |
| 443 | +checkbox.white.checked .uni-checkbox-input, | |
| 444 | +radio.white.checked .uni-radio-input { | |
| 445 | + background-color: #ffffff !important; | |
| 446 | + border-color: #ffffff !important; | |
| 447 | + color: #333333 !important; | |
| 448 | +} | |
| 449 | + | |
| 450 | +/* ================== | |
| 451 | + 边框 | |
| 452 | + ==================== */ | |
| 453 | + | |
| 454 | +/* -- 实线 -- */ | |
| 455 | + | |
| 456 | +.solid, | |
| 457 | +.solid-top, | |
| 458 | +.solid-right, | |
| 459 | +.solid-bottom, | |
| 460 | +.solid-left, | |
| 461 | +.solids, | |
| 462 | +.solids-top, | |
| 463 | +.solids-right, | |
| 464 | +.solids-bottom, | |
| 465 | +.solids-left, | |
| 466 | +.dashed, | |
| 467 | +.dashed-top, | |
| 468 | +.dashed-right, | |
| 469 | +.dashed-bottom, | |
| 470 | +.dashed-left { | |
| 471 | + position: relative; | |
| 472 | +} | |
| 473 | + | |
| 474 | +.solid::after, | |
| 475 | +.solid-top::after, | |
| 476 | +.solid-right::after, | |
| 477 | +.solid-bottom::after, | |
| 478 | +.solid-left::after, | |
| 479 | +.solids::after, | |
| 480 | +.solids-top::after, | |
| 481 | +.solids-right::after, | |
| 482 | +.solids-bottom::after, | |
| 483 | +.solids-left::after, | |
| 484 | +.dashed::after, | |
| 485 | +.dashed-top::after, | |
| 486 | +.dashed-right::after, | |
| 487 | +.dashed-bottom::after, | |
| 488 | +.dashed-left::after { | |
| 489 | + content: " "; | |
| 490 | + width: 200%; | |
| 491 | + height: 200%; | |
| 492 | + position: absolute; | |
| 493 | + top: 0; | |
| 494 | + left: 0; | |
| 495 | + border-radius: inherit; | |
| 496 | + transform: scale(0.5); | |
| 497 | + transform-origin: 0 0; | |
| 498 | + pointer-events: none; | |
| 499 | + box-sizing: border-box; | |
| 500 | +} | |
| 501 | + | |
| 502 | +.solid::after { | |
| 503 | + border: 1upx solid rgba(0, 0, 0, 0.1); | |
| 504 | +} | |
| 505 | + | |
| 506 | +.solid-top::after { | |
| 507 | + border-top: 1upx solid rgba(0, 0, 0, 0.1); | |
| 508 | +} | |
| 509 | + | |
| 510 | +.solid-right::after { | |
| 511 | + border-right: 1upx solid rgba(0, 0, 0, 0.1); | |
| 512 | +} | |
| 513 | + | |
| 514 | +.solid-bottom::after { | |
| 515 | + border-bottom: 1upx solid rgba(0, 0, 0, 0.1); | |
| 516 | +} | |
| 517 | + | |
| 518 | +.solid-left::after { | |
| 519 | + border-left: 1upx solid rgba(0, 0, 0, 0.1); | |
| 520 | +} | |
| 521 | + | |
| 522 | +.solids::after { | |
| 523 | + border: 8upx solid #eee; | |
| 524 | +} | |
| 525 | + | |
| 526 | +.solids-top::after { | |
| 527 | + border-top: 8upx solid #eee; | |
| 528 | +} | |
| 529 | + | |
| 530 | +.solids-right::after { | |
| 531 | + border-right: 8upx solid #eee; | |
| 532 | +} | |
| 533 | + | |
| 534 | +.solids-bottom::after { | |
| 535 | + border-bottom: 8upx solid #eee; | |
| 536 | +} | |
| 537 | + | |
| 538 | +.solids-left::after { | |
| 539 | + border-left: 8upx solid #eee; | |
| 540 | +} | |
| 541 | + | |
| 542 | +/* -- 虚线 -- */ | |
| 543 | + | |
| 544 | +.dashed::after { | |
| 545 | + border: 1upx dashed #ddd; | |
| 546 | +} | |
| 547 | + | |
| 548 | +.dashed-top::after { | |
| 549 | + border-top: 1upx dashed #ddd; | |
| 550 | +} | |
| 551 | + | |
| 552 | +.dashed-right::after { | |
| 553 | + border-right: 1upx dashed #ddd; | |
| 554 | +} | |
| 555 | + | |
| 556 | +.dashed-bottom::after { | |
| 557 | + border-bottom: 1upx dashed #ddd; | |
| 558 | +} | |
| 559 | + | |
| 560 | +.dashed-left::after { | |
| 561 | + border-left: 1upx dashed #ddd; | |
| 562 | +} | |
| 563 | + | |
| 564 | +/* -- 阴影 -- */ | |
| 565 | + | |
| 566 | +.shadow[class*='white'] { | |
| 567 | + --ShadowSize: 0 1upx 6upx; | |
| 568 | +} | |
| 569 | + | |
| 570 | +.shadow-lg { | |
| 571 | + --ShadowSize: 0upx 40upx 100upx 0upx; | |
| 572 | +} | |
| 573 | + | |
| 574 | +.shadow-warp { | |
| 575 | + position: relative; | |
| 576 | + box-shadow: 0 0 10upx rgba(0, 0, 0, 0.1); | |
| 577 | +} | |
| 578 | + | |
| 579 | +.shadow-warp:before, | |
| 580 | +.shadow-warp:after { | |
| 581 | + position: absolute; | |
| 582 | + content: ""; | |
| 583 | + top: 20upx; | |
| 584 | + bottom: 30upx; | |
| 585 | + left: 20upx; | |
| 586 | + width: 50%; | |
| 587 | + box-shadow: 0 30upx 20upx rgba(0, 0, 0, 0.2); | |
| 588 | + transform: rotate(-3deg); | |
| 589 | + z-index: -1; | |
| 590 | +} | |
| 591 | + | |
| 592 | +.shadow-warp:after { | |
| 593 | + right: 20upx; | |
| 594 | + left: auto; | |
| 595 | + transform: rotate(3deg); | |
| 596 | +} | |
| 597 | + | |
| 598 | +.shadow-blur { | |
| 599 | + position: relative; | |
| 600 | +} | |
| 601 | + | |
| 602 | +.shadow-blur::before { | |
| 603 | + content: ""; | |
| 604 | + display: block; | |
| 605 | + background: inherit; | |
| 606 | + filter: blur(10upx); | |
| 607 | + position: absolute; | |
| 608 | + width: 100%; | |
| 609 | + height: 100%; | |
| 610 | + top: 10upx; | |
| 611 | + left: 10upx; | |
| 612 | + z-index: -1; | |
| 613 | + opacity: 0.4; | |
| 614 | + transform-origin: 0 0; | |
| 615 | + border-radius: inherit; | |
| 616 | + transform: scale(1, 1); | |
| 617 | +} | |
| 618 | + | |
| 619 | +/* ================== | |
| 620 | + 按钮 | |
| 621 | + ==================== */ | |
| 622 | + | |
| 623 | +.cu-btn { | |
| 624 | + position: relative; | |
| 625 | + border: 0upx; | |
| 626 | + display: inline-flex; | |
| 627 | + align-items: center; | |
| 628 | + justify-content: center; | |
| 629 | + box-sizing: border-box; | |
| 630 | + padding: 0 30upx; | |
| 631 | + font-size: 28upx; | |
| 632 | + height: 64upx; | |
| 633 | + line-height: 1; | |
| 634 | + text-align: center; | |
| 635 | + text-decoration: none; | |
| 636 | + overflow: visible; | |
| 637 | + margin-left: initial; | |
| 638 | + transform: translate(0upx, 0upx); | |
| 639 | + margin-right: initial; | |
| 640 | +} | |
| 641 | + | |
| 642 | +.cu-btn::after { | |
| 643 | + display: none; | |
| 644 | +} | |
| 645 | + | |
| 646 | +.cu-btn:not([class*="bg-"]) { | |
| 647 | + background-color: #f0f0f0; | |
| 648 | +} | |
| 649 | + | |
| 650 | +.cu-btn[class*="line"] { | |
| 651 | + background-color: transparent; | |
| 652 | +} | |
| 653 | + | |
| 654 | +.cu-btn[class*="line"]::after { | |
| 655 | + content: " "; | |
| 656 | + display: block; | |
| 657 | + width: 200%; | |
| 658 | + height: 200%; | |
| 659 | + position: absolute; | |
| 660 | + top: 0; | |
| 661 | + left: 0; | |
| 662 | + border: 1upx solid currentColor; | |
| 663 | + transform: scale(0.5); | |
| 664 | + transform-origin: 0 0; | |
| 665 | + box-sizing: border-box; | |
| 666 | + border-radius: 12upx; | |
| 667 | + z-index: 1; | |
| 668 | + pointer-events: none; | |
| 669 | +} | |
| 670 | + | |
| 671 | +.cu-btn.round[class*="line"]::after { | |
| 672 | + border-radius: 1000upx; | |
| 673 | +} | |
| 674 | + | |
| 675 | +.cu-btn[class*="lines"]::after { | |
| 676 | + border: 6upx solid currentColor; | |
| 677 | +} | |
| 678 | + | |
| 679 | +.cu-btn[class*="bg-"]::after { | |
| 680 | + display: none; | |
| 681 | +} | |
| 682 | + | |
| 683 | +.cu-btn.sm { | |
| 684 | + padding: 0 20upx; | |
| 685 | + font-size: 20upx; | |
| 686 | + height: 48upx; | |
| 687 | +} | |
| 688 | + | |
| 689 | +.cu-btn.lg { | |
| 690 | + padding: 0 40upx; | |
| 691 | + font-size: 32upx; | |
| 692 | + height: 80upx; | |
| 693 | +} | |
| 694 | + | |
| 695 | +.cu-btn.cuIcon.sm { | |
| 696 | + width: 48upx; | |
| 697 | + height: 48upx; | |
| 698 | +} | |
| 699 | + | |
| 700 | +.cu-btn.cuIcon { | |
| 701 | + width: 64upx; | |
| 702 | + height: 64upx; | |
| 703 | + border-radius: 500upx; | |
| 704 | + padding: 0; | |
| 705 | +} | |
| 706 | + | |
| 707 | +button.cuIcon.lg { | |
| 708 | + width: 80upx; | |
| 709 | + height: 80upx; | |
| 710 | +} | |
| 711 | + | |
| 712 | +.cu-btn.shadow-blur::before { | |
| 713 | + top: 4upx; | |
| 714 | + left: 4upx; | |
| 715 | + filter: blur(6upx); | |
| 716 | + opacity: 0.6; | |
| 717 | +} | |
| 718 | + | |
| 719 | +.cu-btn.button-hover { | |
| 720 | + transform: translate(1upx, 1upx); | |
| 721 | +} | |
| 722 | + | |
| 723 | +.block { | |
| 724 | + display: block; | |
| 725 | +} | |
| 726 | + | |
| 727 | +.cu-btn.block { | |
| 728 | + display: flex; | |
| 729 | +} | |
| 730 | + | |
| 731 | +.cu-btn[disabled] { | |
| 732 | + opacity: 0.6; | |
| 733 | + color: #ffffff; | |
| 734 | +} | |
| 735 | + | |
| 736 | +/* ================== | |
| 737 | + 徽章 | |
| 738 | + ==================== */ | |
| 739 | + | |
| 740 | +.cu-tag { | |
| 741 | + font-size: 24upx; | |
| 742 | + vertical-align: middle; | |
| 743 | + position: relative; | |
| 744 | + display: inline-flex; | |
| 745 | + align-items: center; | |
| 746 | + justify-content: center; | |
| 747 | + box-sizing: border-box; | |
| 748 | + padding: 0upx 16upx; | |
| 749 | + height: 48upx; | |
| 750 | + font-family: Helvetica Neue, Helvetica, sans-serif; | |
| 751 | + white-space: nowrap; | |
| 752 | +} | |
| 753 | + | |
| 754 | +.cu-tag:not([class*="bg"]):not([class*="line"]) { | |
| 755 | + background-color: #f1f1f1; | |
| 756 | +} | |
| 757 | + | |
| 758 | +.cu-tag[class*="line-"]::after { | |
| 759 | + content: " "; | |
| 760 | + width: 200%; | |
| 761 | + height: 200%; | |
| 762 | + position: absolute; | |
| 763 | + top: 0; | |
| 764 | + left: 0; | |
| 765 | + border: 1upx solid currentColor; | |
| 766 | + transform: scale(0.5); | |
| 767 | + transform-origin: 0 0; | |
| 768 | + box-sizing: border-box; | |
| 769 | + border-radius: inherit; | |
| 770 | + z-index: 1; | |
| 771 | + pointer-events: none; | |
| 772 | +} | |
| 773 | + | |
| 774 | +.cu-tag.radius[class*="line"]::after { | |
| 775 | + border-radius: 12upx; | |
| 776 | +} | |
| 777 | + | |
| 778 | +.cu-tag.round[class*="line"]::after { | |
| 779 | + border-radius: 1000upx; | |
| 780 | +} | |
| 781 | + | |
| 782 | +.cu-tag[class*="line-"]::after { | |
| 783 | + border-radius: 0; | |
| 784 | +} | |
| 785 | + | |
| 786 | +.cu-tag+.cu-tag { | |
| 787 | + margin-left: 10upx; | |
| 788 | +} | |
| 789 | + | |
| 790 | +.cu-tag.sm { | |
| 791 | + font-size: 20upx; | |
| 792 | + padding: 0upx 12upx; | |
| 793 | + height: 32upx; | |
| 794 | +} | |
| 795 | + | |
| 796 | +.cu-capsule { | |
| 797 | + display: inline-flex; | |
| 798 | + vertical-align: middle; | |
| 799 | +} | |
| 800 | + | |
| 801 | +.cu-capsule+.cu-capsule { | |
| 802 | + margin-left: 10upx; | |
| 803 | +} | |
| 804 | + | |
| 805 | +.cu-capsule .cu-tag { | |
| 806 | + margin: 0; | |
| 807 | +} | |
| 808 | + | |
| 809 | +.cu-capsule .cu-tag[class*="line-"]:last-child::after { | |
| 810 | + border-left: 0upx solid transparent; | |
| 811 | +} | |
| 812 | + | |
| 813 | +.cu-capsule .cu-tag[class*="line-"]:first-child::after { | |
| 814 | + border-right: 0upx solid transparent; | |
| 815 | +} | |
| 816 | + | |
| 817 | +.cu-capsule.radius .cu-tag:first-child { | |
| 818 | + border-top-left-radius: 6upx; | |
| 819 | + border-bottom-left-radius: 6upx; | |
| 820 | +} | |
| 821 | + | |
| 822 | +.cu-capsule.radius .cu-tag:last-child::after, | |
| 823 | +.cu-capsule.radius .cu-tag[class*="line-"] { | |
| 824 | + border-top-right-radius: 12upx; | |
| 825 | + border-bottom-right-radius: 12upx; | |
| 826 | +} | |
| 827 | + | |
| 828 | +.cu-capsule.round .cu-tag:first-child { | |
| 829 | + border-top-left-radius: 200upx; | |
| 830 | + border-bottom-left-radius: 200upx; | |
| 831 | + text-indent: 4upx; | |
| 832 | +} | |
| 833 | + | |
| 834 | +.cu-capsule.round .cu-tag:last-child::after, | |
| 835 | +.cu-capsule.round .cu-tag:last-child { | |
| 836 | + border-top-right-radius: 200upx; | |
| 837 | + border-bottom-right-radius: 200upx; | |
| 838 | + text-indent: -4upx; | |
| 839 | +} | |
| 840 | + | |
| 841 | +.cu-tag.badge { | |
| 842 | + border-radius: 200upx; | |
| 843 | + position: absolute; | |
| 844 | + top: -10upx; | |
| 845 | + right: -10upx; | |
| 846 | + font-size: 20upx; | |
| 847 | + padding: 0upx 10upx; | |
| 848 | + height: 28upx; | |
| 849 | + color: #ffffff; | |
| 850 | +} | |
| 851 | + | |
| 852 | +.cu-tag.badge:not([class*="bg-"]) { | |
| 853 | + background-color: #dd514c; | |
| 854 | +} | |
| 855 | + | |
| 856 | +.cu-tag:empty:not([class*="cuIcon-"]) { | |
| 857 | + padding: 0upx; | |
| 858 | + width: 16upx; | |
| 859 | + height: 16upx; | |
| 860 | + top: -4upx; | |
| 861 | + right: -4upx; | |
| 862 | +} | |
| 863 | + | |
| 864 | +.cu-tag[class*="cuIcon-"] { | |
| 865 | + width: 32upx; | |
| 866 | + height: 32upx; | |
| 867 | + top: -4upx; | |
| 868 | + right: -4upx; | |
| 869 | +} | |
| 870 | + | |
| 871 | +/* ================== | |
| 872 | + 头像 | |
| 873 | + ==================== */ | |
| 874 | + | |
| 875 | +.cu-avatar { | |
| 876 | + font-variant: small-caps; | |
| 877 | + margin: 0; | |
| 878 | + padding: 0; | |
| 879 | + display: inline-flex; | |
| 880 | + text-align: center; | |
| 881 | + justify-content: center; | |
| 882 | + align-items: center; | |
| 883 | + background-color: #ccc; | |
| 884 | + color: #ffffff; | |
| 885 | + white-space: nowrap; | |
| 886 | + position: relative; | |
| 887 | + width: 64upx; | |
| 888 | + height: 64upx; | |
| 889 | + background-size: cover; | |
| 890 | + background-position: center; | |
| 891 | + vertical-align: middle; | |
| 892 | + font-size: 1.5em; | |
| 893 | +} | |
| 894 | + | |
| 895 | +.cu-avatar.sm { | |
| 896 | + width: 48upx; | |
| 897 | + height: 48upx; | |
| 898 | + font-size: 1em; | |
| 899 | +} | |
| 900 | + | |
| 901 | +.cu-avatar.lg { | |
| 902 | + width: 96upx; | |
| 903 | + height: 96upx; | |
| 904 | + font-size: 2em; | |
| 905 | +} | |
| 906 | + | |
| 907 | +.cu-avatar.xl { | |
| 908 | + width: 128upx; | |
| 909 | + height: 128upx; | |
| 910 | + font-size: 2.5em; | |
| 911 | +} | |
| 912 | + | |
| 913 | +.cu-avatar .avatar-text { | |
| 914 | + font-size: 0.4em; | |
| 915 | +} | |
| 916 | + | |
| 917 | +.cu-avatar-group { | |
| 918 | + direction: rtl; | |
| 919 | + unicode-bidi: bidi-override; | |
| 920 | + padding: 0 10upx 0 40upx; | |
| 921 | + display: inline-block; | |
| 922 | +} | |
| 923 | + | |
| 924 | +.cu-avatar-group .cu-avatar { | |
| 925 | + margin-left: -30upx; | |
| 926 | + border: 4upx solid #f1f1f1; | |
| 927 | + vertical-align: middle; | |
| 928 | +} | |
| 929 | + | |
| 930 | +.cu-avatar-group .cu-avatar.sm { | |
| 931 | + margin-left: -20upx; | |
| 932 | + border: 1upx solid #f1f1f1; | |
| 933 | +} | |
| 934 | + | |
| 935 | +/* ================== | |
| 936 | + 进度条 | |
| 937 | + ==================== */ | |
| 938 | + | |
| 939 | +.cu-progress { | |
| 940 | + overflow: hidden; | |
| 941 | + height: 28upx; | |
| 942 | + background-color: #ebeef5; | |
| 943 | + display: inline-flex; | |
| 944 | + align-items: center; | |
| 945 | + width: 100%; | |
| 946 | +} | |
| 947 | + | |
| 948 | +.cu-progress+view, | |
| 949 | +.cu-progress+text { | |
| 950 | + line-height: 1; | |
| 951 | +} | |
| 952 | + | |
| 953 | +.cu-progress.xs { | |
| 954 | + height: 10upx; | |
| 955 | +} | |
| 956 | + | |
| 957 | +.cu-progress.sm { | |
| 958 | + height: 20upx; | |
| 959 | +} | |
| 960 | + | |
| 961 | +.cu-progress view { | |
| 962 | + width: 0; | |
| 963 | + height: 100%; | |
| 964 | + align-items: center; | |
| 965 | + display: flex; | |
| 966 | + justify-items: flex-end; | |
| 967 | + justify-content: space-around; | |
| 968 | + font-size: 20upx; | |
| 969 | + color: #ffffff; | |
| 970 | + transition: width 0.6s ease; | |
| 971 | +} | |
| 972 | + | |
| 973 | +.cu-progress text { | |
| 974 | + align-items: center; | |
| 975 | + display: flex; | |
| 976 | + font-size: 20upx; | |
| 977 | + color: #333333; | |
| 978 | + text-indent: 10upx; | |
| 979 | +} | |
| 980 | + | |
| 981 | +.cu-progress.text-progress { | |
| 982 | + padding-right: 60upx; | |
| 983 | +} | |
| 984 | + | |
| 985 | +.cu-progress.striped view { | |
| 986 | + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); | |
| 987 | + background-size: 72upx 72upx; | |
| 988 | +} | |
| 989 | + | |
| 990 | +.cu-progress.active view { | |
| 991 | + animation: progress-stripes 2s linear infinite; | |
| 992 | +} | |
| 993 | + | |
| 994 | +@keyframes progress-stripes { | |
| 995 | + from { | |
| 996 | + background-position: 72upx 0; | |
| 997 | + } | |
| 998 | + | |
| 999 | + to { | |
| 1000 | + background-position: 0 0; | |
| 1001 | + } | |
| 1002 | +} | |
| 1003 | + | |
| 1004 | +/* ================== | |
| 1005 | + 加载 | |
| 1006 | + ==================== */ | |
| 1007 | + | |
| 1008 | +.cu-load { | |
| 1009 | + display: block; | |
| 1010 | + line-height: 3em; | |
| 1011 | + text-align: center; | |
| 1012 | +} | |
| 1013 | + | |
| 1014 | +.cu-load::before { | |
| 1015 | + font-family: "cuIcon"; | |
| 1016 | + display: inline-block; | |
| 1017 | + margin-right: 6upx; | |
| 1018 | +} | |
| 1019 | + | |
| 1020 | +.cu-load.loading::before { | |
| 1021 | + content: "\e67a"; | |
| 1022 | + animation: cuIcon-spin 2s infinite linear; | |
| 1023 | +} | |
| 1024 | + | |
| 1025 | +.cu-load.loading::after { | |
| 1026 | + content: "加载中..."; | |
| 1027 | +} | |
| 1028 | + | |
| 1029 | +.cu-load.over::before { | |
| 1030 | + content: "\e64a"; | |
| 1031 | +} | |
| 1032 | + | |
| 1033 | +.cu-load.over::after { | |
| 1034 | + content: "没有更多了"; | |
| 1035 | +} | |
| 1036 | + | |
| 1037 | +.cu-load.erro::before { | |
| 1038 | + content: "\e658"; | |
| 1039 | +} | |
| 1040 | + | |
| 1041 | +.cu-load.erro::after { | |
| 1042 | + content: "加载失败"; | |
| 1043 | +} | |
| 1044 | + | |
| 1045 | +.cu-load.load-cuIcon::before { | |
| 1046 | + font-size: 32upx; | |
| 1047 | +} | |
| 1048 | + | |
| 1049 | +.cu-load.load-cuIcon::after { | |
| 1050 | + display: none; | |
| 1051 | +} | |
| 1052 | + | |
| 1053 | +.cu-load.load-cuIcon.over { | |
| 1054 | + display: none; | |
| 1055 | +} | |
| 1056 | + | |
| 1057 | +.cu-load.load-modal { | |
| 1058 | + position: fixed; | |
| 1059 | + top: 0; | |
| 1060 | + right: 0; | |
| 1061 | + bottom: 140upx; | |
| 1062 | + left: 0; | |
| 1063 | + margin: auto; | |
| 1064 | + width: 260upx; | |
| 1065 | + height: 260upx; | |
| 1066 | + background-color: #ffffff; | |
| 1067 | + border-radius: 10upx; | |
| 1068 | + box-shadow: 0 0 0upx 2000upx rgba(0, 0, 0, 0.5); | |
| 1069 | + display: flex; | |
| 1070 | + align-items: center; | |
| 1071 | + flex-direction: column; | |
| 1072 | + justify-content: center; | |
| 1073 | + font-size: 28upx; | |
| 1074 | + z-index: 9999; | |
| 1075 | + line-height: 2.4em; | |
| 1076 | +} | |
| 1077 | + | |
| 1078 | +.cu-load.load-modal [class*="cuIcon-"] { | |
| 1079 | + font-size: 60upx; | |
| 1080 | +} | |
| 1081 | + | |
| 1082 | +.cu-load.load-modal image { | |
| 1083 | + width: 70upx; | |
| 1084 | + height: 70upx; | |
| 1085 | +} | |
| 1086 | + | |
| 1087 | +.cu-load.load-modal::after { | |
| 1088 | + content: ""; | |
| 1089 | + position: absolute; | |
| 1090 | + background-color: #ffffff; | |
| 1091 | + border-radius: 50%; | |
| 1092 | + width: 200upx; | |
| 1093 | + height: 200upx; | |
| 1094 | + font-size: 10px; | |
| 1095 | + border-top: 6upx solid rgba(0, 0, 0, 0.05); | |
| 1096 | + border-right: 6upx solid rgba(0, 0, 0, 0.05); | |
| 1097 | + border-bottom: 6upx solid rgba(0, 0, 0, 0.05); | |
| 1098 | + border-left: 6upx solid #f37b1d; | |
| 1099 | + animation: cuIcon-spin 1s infinite linear; | |
| 1100 | + z-index: -1; | |
| 1101 | +} | |
| 1102 | + | |
| 1103 | +.load-progress { | |
| 1104 | + pointer-events: none; | |
| 1105 | + top: 0; | |
| 1106 | + position: fixed; | |
| 1107 | + width: 100%; | |
| 1108 | + left: 0; | |
| 1109 | + z-index: 2000; | |
| 1110 | +} | |
| 1111 | + | |
| 1112 | +.load-progress.hide { | |
| 1113 | + display: none; | |
| 1114 | +} | |
| 1115 | + | |
| 1116 | +.load-progress .load-progress-bar { | |
| 1117 | + position: relative; | |
| 1118 | + width: 100%; | |
| 1119 | + height: 4upx; | |
| 1120 | + overflow: hidden; | |
| 1121 | + transition: all 200ms ease 0s; | |
| 1122 | +} | |
| 1123 | + | |
| 1124 | +.load-progress .load-progress-spinner { | |
| 1125 | + position: absolute; | |
| 1126 | + top: 10upx; | |
| 1127 | + right: 10upx; | |
| 1128 | + z-index: 2000; | |
| 1129 | + display: block; | |
| 1130 | +} | |
| 1131 | + | |
| 1132 | +.load-progress .load-progress-spinner::after { | |
| 1133 | + content: ""; | |
| 1134 | + display: block; | |
| 1135 | + width: 24upx; | |
| 1136 | + height: 24upx; | |
| 1137 | + -webkit-box-sizing: border-box; | |
| 1138 | + box-sizing: border-box; | |
| 1139 | + border: solid 4upx transparent; | |
| 1140 | + border-top-color: inherit; | |
| 1141 | + border-left-color: inherit; | |
| 1142 | + border-radius: 50%; | |
| 1143 | + -webkit-animation: load-progress-spinner 0.4s linear infinite; | |
| 1144 | + animation: load-progress-spinner 0.4s linear infinite; | |
| 1145 | +} | |
| 1146 | + | |
| 1147 | +@-webkit-keyframes load-progress-spinner { | |
| 1148 | + 0% { | |
| 1149 | + -webkit-transform: rotate(0); | |
| 1150 | + transform: rotate(0); | |
| 1151 | + } | |
| 1152 | + | |
| 1153 | + 100% { | |
| 1154 | + -webkit-transform: rotate(360deg); | |
| 1155 | + transform: rotate(360deg); | |
| 1156 | + } | |
| 1157 | +} | |
| 1158 | + | |
| 1159 | +@keyframes load-progress-spinner { | |
| 1160 | + 0% { | |
| 1161 | + -webkit-transform: rotate(0); | |
| 1162 | + transform: rotate(0); | |
| 1163 | + } | |
| 1164 | + | |
| 1165 | + 100% { | |
| 1166 | + -webkit-transform: rotate(360deg); | |
| 1167 | + transform: rotate(360deg); | |
| 1168 | + } | |
| 1169 | +} | |
| 1170 | + | |
| 1171 | +/* ================== | |
| 1172 | + 列表 | |
| 1173 | + ==================== */ | |
| 1174 | +.grayscale { | |
| 1175 | + filter: grayscale(1); | |
| 1176 | +} | |
| 1177 | + | |
| 1178 | +.cu-list+.cu-list { | |
| 1179 | + margin-top: 30upx | |
| 1180 | +} | |
| 1181 | + | |
| 1182 | +.cu-list>.cu-item { | |
| 1183 | + transition: all .6s ease-in-out 0s; | |
| 1184 | + transform: translateX(0upx) | |
| 1185 | +} | |
| 1186 | + | |
| 1187 | +.cu-list>.cu-item.move-cur { | |
| 1188 | + transform: translateX(-260upx) | |
| 1189 | +} | |
| 1190 | + | |
| 1191 | +.cu-list>.cu-item .move { | |
| 1192 | + position: absolute; | |
| 1193 | + right: 0; | |
| 1194 | + display: flex; | |
| 1195 | + width: 260upx; | |
| 1196 | + height: 100%; | |
| 1197 | + transform: translateX(100%) | |
| 1198 | +} | |
| 1199 | + | |
| 1200 | +.cu-list>.cu-item .move view { | |
| 1201 | + display: flex; | |
| 1202 | + flex: 1; | |
| 1203 | + justify-content: center; | |
| 1204 | + align-items: center | |
| 1205 | +} | |
| 1206 | + | |
| 1207 | +.cu-list.menu-avatar { | |
| 1208 | + overflow: hidden; | |
| 1209 | +} | |
| 1210 | + | |
| 1211 | +.cu-list.menu-avatar>.cu-item { | |
| 1212 | + position: relative; | |
| 1213 | + display: flex; | |
| 1214 | + padding-right: 10upx; | |
| 1215 | + height: 140upx; | |
| 1216 | + background-color: #ffffff; | |
| 1217 | + justify-content: flex-end; | |
| 1218 | + align-items: center | |
| 1219 | +} | |
| 1220 | + | |
| 1221 | +.cu-list.menu-avatar>.cu-item>.cu-avatar { | |
| 1222 | + position: absolute; | |
| 1223 | + left: 30upx | |
| 1224 | +} | |
| 1225 | + | |
| 1226 | +.cu-list.menu-avatar>.cu-item .flex .text-cut { | |
| 1227 | + max-width: 510upx | |
| 1228 | +} | |
| 1229 | + | |
| 1230 | +.cu-list.menu-avatar>.cu-item .content { | |
| 1231 | + position: absolute; | |
| 1232 | + left: 146upx; | |
| 1233 | + width: calc(100% - 96upx - 60upx - 120upx - 20upx); | |
| 1234 | + line-height: 1.6em; | |
| 1235 | +} | |
| 1236 | + | |
| 1237 | +.cu-list.menu-avatar>.cu-item .content.flex-sub { | |
| 1238 | + width: calc(100% - 96upx - 60upx - 20upx); | |
| 1239 | +} | |
| 1240 | + | |
| 1241 | +.cu-list.menu-avatar>.cu-item .content>view:first-child { | |
| 1242 | + font-size: 30upx; | |
| 1243 | + display: flex; | |
| 1244 | + align-items: center | |
| 1245 | +} | |
| 1246 | + | |
| 1247 | +.cu-list.menu-avatar>.cu-item .content .cu-tag.sm { | |
| 1248 | + display: inline-block; | |
| 1249 | + margin-left: 10upx; | |
| 1250 | + height: 28upx; | |
| 1251 | + font-size: 16upx; | |
| 1252 | + line-height: 32upx | |
| 1253 | +} | |
| 1254 | + | |
| 1255 | +.cu-list.menu-avatar>.cu-item .action { | |
| 1256 | + width: 100upx; | |
| 1257 | + text-align: center | |
| 1258 | +} | |
| 1259 | + | |
| 1260 | +.cu-list.menu-avatar>.cu-item .action view+view { | |
| 1261 | + margin-top: 10upx | |
| 1262 | +} | |
| 1263 | + | |
| 1264 | +.cu-list.menu-avatar.comment>.cu-item .content { | |
| 1265 | + position: relative; | |
| 1266 | + left: 0; | |
| 1267 | + width: auto; | |
| 1268 | + flex: 1; | |
| 1269 | +} | |
| 1270 | + | |
| 1271 | +.cu-list.menu-avatar.comment>.cu-item { | |
| 1272 | + padding: 30upx 30upx 30upx 120upx; | |
| 1273 | + height: auto | |
| 1274 | +} | |
| 1275 | + | |
| 1276 | +.cu-list.menu-avatar.comment .cu-avatar { | |
| 1277 | + align-self: flex-start | |
| 1278 | +} | |
| 1279 | + | |
| 1280 | +.cu-list.menu>.cu-item { | |
| 1281 | + position: relative; | |
| 1282 | + display: flex; | |
| 1283 | + padding: 0 30upx; | |
| 1284 | + min-height: 100upx; | |
| 1285 | + background-color: #ffffff; | |
| 1286 | + justify-content: space-between; | |
| 1287 | + align-items: center | |
| 1288 | +} | |
| 1289 | + | |
| 1290 | +.cu-list.menu>.cu-item:last-child:after { | |
| 1291 | + border: none | |
| 1292 | +} | |
| 1293 | + | |
| 1294 | +.cu-list.menu-avatar>.cu-item:after, | |
| 1295 | +.cu-list.menu>.cu-item:after { | |
| 1296 | + position: absolute; | |
| 1297 | + top: 0; | |
| 1298 | + left: 0; | |
| 1299 | + box-sizing: border-box; | |
| 1300 | + width: 200%; | |
| 1301 | + height: 200%; | |
| 1302 | + border-bottom: 1upx solid #ddd; | |
| 1303 | + border-radius: inherit; | |
| 1304 | + content: " "; | |
| 1305 | + transform: scale(.5); | |
| 1306 | + transform-origin: 0 0; | |
| 1307 | + pointer-events: none | |
| 1308 | +} | |
| 1309 | + | |
| 1310 | +.cu-list.menu>.cu-item.grayscale { | |
| 1311 | + background-color: #f5f5f5 | |
| 1312 | +} | |
| 1313 | + | |
| 1314 | +.cu-list.menu>.cu-item.cur { | |
| 1315 | + background-color: #fcf7e9 | |
| 1316 | +} | |
| 1317 | + | |
| 1318 | +.cu-list.menu>.cu-item.arrow { | |
| 1319 | + padding-right: 90upx | |
| 1320 | +} | |
| 1321 | + | |
| 1322 | +.cu-list.menu>.cu-item.arrow:before { | |
| 1323 | + position: absolute; | |
| 1324 | + top: 0; | |
| 1325 | + right: 30upx; | |
| 1326 | + bottom: 0; | |
| 1327 | + display: block; | |
| 1328 | + margin: auto; | |
| 1329 | + width: 30upx; | |
| 1330 | + height: 30upx; | |
| 1331 | + color: #8799a3; | |
| 1332 | + content: "\e6a3"; | |
| 1333 | + text-align: center; | |
| 1334 | + font-size: 34upx; | |
| 1335 | + font-family: cuIcon; | |
| 1336 | + line-height: 30upx | |
| 1337 | +} | |
| 1338 | + | |
| 1339 | +.cu-list.menu>.cu-item button.content { | |
| 1340 | + padding: 0; | |
| 1341 | + background-color: transparent; | |
| 1342 | + justify-content: flex-start | |
| 1343 | +} | |
| 1344 | + | |
| 1345 | +.cu-list.menu>.cu-item button.content:after { | |
| 1346 | + display: none | |
| 1347 | +} | |
| 1348 | + | |
| 1349 | +.cu-list.menu>.cu-item .cu-avatar-group .cu-avatar { | |
| 1350 | + border-color: #ffffff | |
| 1351 | +} | |
| 1352 | + | |
| 1353 | +.cu-list.menu>.cu-item .content>view:first-child { | |
| 1354 | + display: flex; | |
| 1355 | + align-items: center | |
| 1356 | +} | |
| 1357 | + | |
| 1358 | +.cu-list.menu>.cu-item .content>text[class*=cuIcon] { | |
| 1359 | + display: inline-block; | |
| 1360 | + margin-right: 10upx; | |
| 1361 | + width: 1.6em; | |
| 1362 | + text-align: center | |
| 1363 | +} | |
| 1364 | + | |
| 1365 | +.cu-list.menu>.cu-item .content>image { | |
| 1366 | + display: inline-block; | |
| 1367 | + margin-right: 10upx; | |
| 1368 | + width: 1.6em; | |
| 1369 | + height: 1.6em; | |
| 1370 | + vertical-align: middle | |
| 1371 | +} | |
| 1372 | + | |
| 1373 | +.cu-list.menu>.cu-item .content { | |
| 1374 | + font-size: 30upx; | |
| 1375 | + line-height: 1.6em; | |
| 1376 | + flex: 1 | |
| 1377 | +} | |
| 1378 | + | |
| 1379 | +.cu-list.menu>.cu-item .content .cu-tag.sm { | |
| 1380 | + display: inline-block; | |
| 1381 | + margin-left: 10upx; | |
| 1382 | + height: 28upx; | |
| 1383 | + font-size: 16upx; | |
| 1384 | + line-height: 32upx | |
| 1385 | +} | |
| 1386 | + | |
| 1387 | +.cu-list.menu>.cu-item .action .cu-tag:empty { | |
| 1388 | + right: 10upx | |
| 1389 | +} | |
| 1390 | + | |
| 1391 | +.cu-list.menu { | |
| 1392 | + display: block; | |
| 1393 | + overflow: hidden | |
| 1394 | +} | |
| 1395 | + | |
| 1396 | +.cu-list.menu.sm-border>.cu-item:after { | |
| 1397 | + left: 30upx; | |
| 1398 | + width: calc(200% - 120upx) | |
| 1399 | +} | |
| 1400 | + | |
| 1401 | +.cu-list.grid>.cu-item { | |
| 1402 | + position: relative; | |
| 1403 | + display: flex; | |
| 1404 | + padding: 20upx 0 30upx; | |
| 1405 | + transition-duration: 0s; | |
| 1406 | + flex-direction: column | |
| 1407 | +} | |
| 1408 | + | |
| 1409 | +.cu-list.grid>.cu-item:after { | |
| 1410 | + position: absolute; | |
| 1411 | + top: 0; | |
| 1412 | + left: 0; | |
| 1413 | + box-sizing: border-box; | |
| 1414 | + width: 200%; | |
| 1415 | + height: 200%; | |
| 1416 | + border-right: 1px solid rgba(0, 0, 0, .1); | |
| 1417 | + border-bottom: 1px solid rgba(0, 0, 0, .1); | |
| 1418 | + border-radius: inherit; | |
| 1419 | + content: " "; | |
| 1420 | + transform: scale(.5); | |
| 1421 | + transform-origin: 0 0; | |
| 1422 | + pointer-events: none | |
| 1423 | +} | |
| 1424 | + | |
| 1425 | +.cu-list.grid>.cu-item text { | |
| 1426 | + display: block; | |
| 1427 | + margin-top: 10upx; | |
| 1428 | + color: #888; | |
| 1429 | + font-size: 26upx; | |
| 1430 | + line-height: 40upx | |
| 1431 | +} | |
| 1432 | + | |
| 1433 | +.cu-list.grid>.cu-item [class*=cuIcon] { | |
| 1434 | + position: relative; | |
| 1435 | + display: block; | |
| 1436 | + margin-top: 20upx; | |
| 1437 | + width: 100%; | |
| 1438 | + font-size: 48upx | |
| 1439 | +} | |
| 1440 | + | |
| 1441 | +.cu-list.grid>.cu-item .cu-tag { | |
| 1442 | + right: auto; | |
| 1443 | + left: 50%; | |
| 1444 | + margin-left: 20upx | |
| 1445 | +} | |
| 1446 | + | |
| 1447 | +.cu-list.grid { | |
| 1448 | + background-color: #ffffff; | |
| 1449 | + text-align: center | |
| 1450 | +} | |
| 1451 | + | |
| 1452 | +.cu-list.grid.no-border>.cu-item { | |
| 1453 | + padding-top: 10upx; | |
| 1454 | + padding-bottom: 20upx | |
| 1455 | +} | |
| 1456 | + | |
| 1457 | +.cu-list.grid.no-border>.cu-item:after { | |
| 1458 | + border: none | |
| 1459 | +} | |
| 1460 | + | |
| 1461 | +.cu-list.grid.no-border { | |
| 1462 | + padding: 20upx 10upx | |
| 1463 | +} | |
| 1464 | + | |
| 1465 | +.cu-list.grid.col-3>.cu-item:nth-child(3n):after, | |
| 1466 | +.cu-list.grid.col-4>.cu-item:nth-child(4n):after, | |
| 1467 | +.cu-list.grid.col-5>.cu-item:nth-child(5n):after { | |
| 1468 | + border-right-width: 0 | |
| 1469 | +} | |
| 1470 | + | |
| 1471 | +.cu-list.card-menu { | |
| 1472 | + overflow: hidden; | |
| 1473 | + margin-right: 30upx; | |
| 1474 | + margin-left: 30upx; | |
| 1475 | + border-radius: 20upx | |
| 1476 | +} | |
| 1477 | + | |
| 1478 | + | |
| 1479 | +/* ================== | |
| 1480 | + 操作条 | |
| 1481 | + ==================== */ | |
| 1482 | + | |
| 1483 | +.cu-bar { | |
| 1484 | + display: flex; | |
| 1485 | + position: relative; | |
| 1486 | + align-items: center; | |
| 1487 | + min-height: 100upx; | |
| 1488 | + justify-content: space-between; | |
| 1489 | +} | |
| 1490 | + | |
| 1491 | +.cu-bar .action { | |
| 1492 | + display: flex; | |
| 1493 | + align-items: center; | |
| 1494 | + height: 100%; | |
| 1495 | + justify-content: center; | |
| 1496 | + max-width: 100%; | |
| 1497 | +} | |
| 1498 | + | |
| 1499 | +.cu-bar .action.border-title { | |
| 1500 | + position: relative; | |
| 1501 | + top: -10upx; | |
| 1502 | +} | |
| 1503 | + | |
| 1504 | +.cu-bar .action.border-title text[class*="bg-"]:last-child { | |
| 1505 | + position: absolute; | |
| 1506 | + bottom: -0.5rem; | |
| 1507 | + min-width: 2rem; | |
| 1508 | + height: 6upx; | |
| 1509 | + left: 0; | |
| 1510 | +} | |
| 1511 | + | |
| 1512 | +.cu-bar .action.sub-title { | |
| 1513 | + position: relative; | |
| 1514 | + top: -0.2rem; | |
| 1515 | +} | |
| 1516 | + | |
| 1517 | +.cu-bar .action.sub-title text { | |
| 1518 | + position: relative; | |
| 1519 | + z-index: 1; | |
| 1520 | +} | |
| 1521 | + | |
| 1522 | +.cu-bar .action.sub-title text[class*="bg-"]:last-child { | |
| 1523 | + position: absolute; | |
| 1524 | + display: inline-block; | |
| 1525 | + bottom: -0.2rem; | |
| 1526 | + border-radius: 6upx; | |
| 1527 | + width: 100%; | |
| 1528 | + height: 0.6rem; | |
| 1529 | + left: 0.6rem; | |
| 1530 | + opacity: 0.3; | |
| 1531 | + z-index: 0; | |
| 1532 | +} | |
| 1533 | + | |
| 1534 | +.cu-bar .action.sub-title text[class*="text-"]:last-child { | |
| 1535 | + position: absolute; | |
| 1536 | + display: inline-block; | |
| 1537 | + bottom: -0.7rem; | |
| 1538 | + left: 0.5rem; | |
| 1539 | + opacity: 0.2; | |
| 1540 | + z-index: 0; | |
| 1541 | + text-align: right; | |
| 1542 | + font-weight: 900; | |
| 1543 | + font-size: 36upx; | |
| 1544 | +} | |
| 1545 | + | |
| 1546 | +.cu-bar.justify-center .action.border-title text:last-child, | |
| 1547 | +.cu-bar.justify-center .action.sub-title text:last-child { | |
| 1548 | + left: 0; | |
| 1549 | + right: 0; | |
| 1550 | + margin: auto; | |
| 1551 | + text-align: center; | |
| 1552 | +} | |
| 1553 | + | |
| 1554 | +.cu-bar .action:first-child { | |
| 1555 | + margin-left: 30upx; | |
| 1556 | + font-size: 30upx; | |
| 1557 | +} | |
| 1558 | + | |
| 1559 | +.cu-bar .action text.text-cut { | |
| 1560 | + text-align: left; | |
| 1561 | + width: 100%; | |
| 1562 | +} | |
| 1563 | + | |
| 1564 | +.cu-bar .cu-avatar:first-child { | |
| 1565 | + margin-left: 20upx; | |
| 1566 | +} | |
| 1567 | + | |
| 1568 | +.cu-bar .action:first-child>text[class*="cuIcon-"] { | |
| 1569 | + margin-left: -0.3em; | |
| 1570 | + margin-right: 0.3em; | |
| 1571 | +} | |
| 1572 | + | |
| 1573 | +.cu-bar .action:last-child { | |
| 1574 | + margin-right: 30upx; | |
| 1575 | +} | |
| 1576 | + | |
| 1577 | +.cu-bar .action>text[class*="cuIcon-"], | |
| 1578 | +.cu-bar .action>view[class*="cuIcon-"] { | |
| 1579 | + font-size: 36upx; | |
| 1580 | +} | |
| 1581 | + | |
| 1582 | +.cu-bar .action>text[class*="cuIcon-"]+text[class*="cuIcon-"] { | |
| 1583 | + margin-left: 0.5em; | |
| 1584 | +} | |
| 1585 | + | |
| 1586 | +.cu-bar .content { | |
| 1587 | + position: absolute; | |
| 1588 | + text-align: center; | |
| 1589 | + width: calc(100% - 340upx); | |
| 1590 | + left: 0; | |
| 1591 | + right: 0; | |
| 1592 | + bottom: 0; | |
| 1593 | + top: 0; | |
| 1594 | + margin: auto; | |
| 1595 | + height: 60upx; | |
| 1596 | + font-size: 32upx; | |
| 1597 | + line-height: 60upx; | |
| 1598 | + cursor: none; | |
| 1599 | + pointer-events: none; | |
| 1600 | + text-overflow: ellipsis; | |
| 1601 | + white-space: nowrap; | |
| 1602 | + overflow: hidden; | |
| 1603 | +} | |
| 1604 | + | |
| 1605 | +.cu-bar.ios .content { | |
| 1606 | + bottom: 7px; | |
| 1607 | + height: 30px; | |
| 1608 | + font-size: 32upx; | |
| 1609 | + line-height: 30px; | |
| 1610 | +} | |
| 1611 | + | |
| 1612 | +.cu-bar.btn-group { | |
| 1613 | + justify-content: space-around; | |
| 1614 | +} | |
| 1615 | + | |
| 1616 | +.cu-bar.btn-group button { | |
| 1617 | + padding: 20upx 32upx; | |
| 1618 | +} | |
| 1619 | + | |
| 1620 | +.cu-bar.btn-group button { | |
| 1621 | + flex: 1; | |
| 1622 | + margin: 0 20upx; | |
| 1623 | + max-width: 50%; | |
| 1624 | +} | |
| 1625 | + | |
| 1626 | +.cu-bar .search-form { | |
| 1627 | + background-color: #f5f5f5; | |
| 1628 | + line-height: 64upx; | |
| 1629 | + height: 64upx; | |
| 1630 | + font-size: 24upx; | |
| 1631 | + color: #333333; | |
| 1632 | + flex: 1; | |
| 1633 | + display: flex; | |
| 1634 | + align-items: center; | |
| 1635 | + margin: 0 30upx; | |
| 1636 | +} | |
| 1637 | + | |
| 1638 | +.cu-bar .search-form+.action { | |
| 1639 | + margin-right: 30upx; | |
| 1640 | +} | |
| 1641 | + | |
| 1642 | +.cu-bar .search-form input { | |
| 1643 | + flex: 1; | |
| 1644 | + padding-right: 30upx; | |
| 1645 | + height: 64upx; | |
| 1646 | + line-height: 64upx; | |
| 1647 | + font-size: 26upx; | |
| 1648 | + background-color: transparent; | |
| 1649 | +} | |
| 1650 | + | |
| 1651 | +.cu-bar .search-form [class*="cuIcon-"] { | |
| 1652 | + margin: 0 0.5em 0 0.8em; | |
| 1653 | +} | |
| 1654 | + | |
| 1655 | +.cu-bar .search-form [class*="cuIcon-"]::before { | |
| 1656 | + top: 0upx; | |
| 1657 | +} | |
| 1658 | + | |
| 1659 | +.cu-bar.fixed, | |
| 1660 | +.nav.fixed { | |
| 1661 | + position: fixed; | |
| 1662 | + width: 100%; | |
| 1663 | + top: 0; | |
| 1664 | + z-index: 1024; | |
| 1665 | + box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1); | |
| 1666 | +} | |
| 1667 | + | |
| 1668 | +.cu-bar.foot { | |
| 1669 | + position: fixed; | |
| 1670 | + width: 100%; | |
| 1671 | + bottom: 0; | |
| 1672 | + z-index: 1024; | |
| 1673 | + box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.1); | |
| 1674 | +} | |
| 1675 | + | |
| 1676 | +.cu-bar.tabbar { | |
| 1677 | + padding: 0; | |
| 1678 | + height: calc(100upx + env(safe-area-inset-bottom) / 2); | |
| 1679 | + padding-bottom: calc(env(safe-area-inset-bottom) / 2); | |
| 1680 | +} | |
| 1681 | + | |
| 1682 | +.cu-tabbar-height { | |
| 1683 | + min-height: 100upx; | |
| 1684 | + height: calc(100upx + env(safe-area-inset-bottom) / 2); | |
| 1685 | +} | |
| 1686 | + | |
| 1687 | +.cu-bar.tabbar.shadow { | |
| 1688 | + box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.1); | |
| 1689 | +} | |
| 1690 | + | |
| 1691 | +.cu-bar.tabbar .action { | |
| 1692 | + font-size: 22upx; | |
| 1693 | + position: relative; | |
| 1694 | + flex: 1; | |
| 1695 | + text-align: center; | |
| 1696 | + padding: 0; | |
| 1697 | + display: block; | |
| 1698 | + height: auto; | |
| 1699 | + line-height: 1; | |
| 1700 | + margin: 0; | |
| 1701 | + background-color: inherit; | |
| 1702 | + overflow: initial; | |
| 1703 | +} | |
| 1704 | + | |
| 1705 | +.cu-bar.tabbar.shop .action { | |
| 1706 | + width: 140upx; | |
| 1707 | + flex: initial; | |
| 1708 | +} | |
| 1709 | + | |
| 1710 | +.cu-bar.tabbar .action.add-action { | |
| 1711 | + position: relative; | |
| 1712 | + z-index: 2; | |
| 1713 | + padding-top: 50upx; | |
| 1714 | +} | |
| 1715 | + | |
| 1716 | +.cu-bar.tabbar .action.add-action [class*="cuIcon-"] { | |
| 1717 | + position: absolute; | |
| 1718 | + width: 70upx; | |
| 1719 | + z-index: 2; | |
| 1720 | + height: 70upx; | |
| 1721 | + border-radius: 50%; | |
| 1722 | + line-height: 70upx; | |
| 1723 | + font-size: 50upx; | |
| 1724 | + top: -35upx; | |
| 1725 | + left: 0; | |
| 1726 | + right: 0; | |
| 1727 | + margin: auto; | |
| 1728 | + padding: 0; | |
| 1729 | +} | |
| 1730 | + | |
| 1731 | +.cu-bar.tabbar .action.add-action::after { | |
| 1732 | + content: ""; | |
| 1733 | + position: absolute; | |
| 1734 | + width: 100upx; | |
| 1735 | + height: 100upx; | |
| 1736 | + top: -50upx; | |
| 1737 | + left: 0; | |
| 1738 | + right: 0; | |
| 1739 | + margin: auto; | |
| 1740 | + box-shadow: 0 -3upx 8upx rgba(0, 0, 0, 0.08); | |
| 1741 | + border-radius: 50upx; | |
| 1742 | + background-color: inherit; | |
| 1743 | + z-index: 0; | |
| 1744 | +} | |
| 1745 | + | |
| 1746 | +.cu-bar.tabbar .action.add-action::before { | |
| 1747 | + content: ""; | |
| 1748 | + position: absolute; | |
| 1749 | + width: 100upx; | |
| 1750 | + height: 30upx; | |
| 1751 | + bottom: 30upx; | |
| 1752 | + left: 0; | |
| 1753 | + right: 0; | |
| 1754 | + margin: auto; | |
| 1755 | + background-color: inherit; | |
| 1756 | + z-index: 1; | |
| 1757 | +} | |
| 1758 | + | |
| 1759 | +.cu-bar.tabbar .btn-group { | |
| 1760 | + flex: 1; | |
| 1761 | + display: flex; | |
| 1762 | + justify-content: space-around; | |
| 1763 | + align-items: center; | |
| 1764 | + padding: 0 10upx; | |
| 1765 | +} | |
| 1766 | + | |
| 1767 | +.cu-bar.tabbar button.action::after { | |
| 1768 | + border: 0; | |
| 1769 | +} | |
| 1770 | + | |
| 1771 | +.cu-bar.tabbar .action [class*="cuIcon-"] { | |
| 1772 | + width: 100upx; | |
| 1773 | + position: relative; | |
| 1774 | + display: block; | |
| 1775 | + height: auto; | |
| 1776 | + margin: 0 auto 10upx; | |
| 1777 | + text-align: center; | |
| 1778 | + font-size: 40upx; | |
| 1779 | +} | |
| 1780 | + | |
| 1781 | +.cu-bar.tabbar .action .cuIcon-cu-image { | |
| 1782 | + margin: 0 auto; | |
| 1783 | +} | |
| 1784 | + | |
| 1785 | +.cu-bar.tabbar .action .cuIcon-cu-image image { | |
| 1786 | + width: 50upx; | |
| 1787 | + height: 50upx; | |
| 1788 | + display: inline-block; | |
| 1789 | +} | |
| 1790 | + | |
| 1791 | +.cu-bar.tabbar .submit { | |
| 1792 | + align-items: center; | |
| 1793 | + display: flex; | |
| 1794 | + justify-content: center; | |
| 1795 | + text-align: center; | |
| 1796 | + position: relative; | |
| 1797 | + flex: 2; | |
| 1798 | + align-self: stretch; | |
| 1799 | +} | |
| 1800 | + | |
| 1801 | +.cu-bar.tabbar .submit:last-child { | |
| 1802 | + flex: 2.6; | |
| 1803 | +} | |
| 1804 | + | |
| 1805 | +.cu-bar.tabbar .submit+.submit { | |
| 1806 | + flex: 2; | |
| 1807 | +} | |
| 1808 | + | |
| 1809 | +.cu-bar.tabbar.border .action::before { | |
| 1810 | + content: " "; | |
| 1811 | + width: 200%; | |
| 1812 | + height: 200%; | |
| 1813 | + position: absolute; | |
| 1814 | + top: 0; | |
| 1815 | + left: 0; | |
| 1816 | + transform: scale(0.5); | |
| 1817 | + transform-origin: 0 0; | |
| 1818 | + border-right: 1upx solid rgba(0, 0, 0, 0.1); | |
| 1819 | + z-index: 3; | |
| 1820 | +} | |
| 1821 | + | |
| 1822 | +.cu-bar.tabbar.border .action:last-child:before { | |
| 1823 | + display: none; | |
| 1824 | +} | |
| 1825 | + | |
| 1826 | +.cu-bar.input { | |
| 1827 | + padding-right: 20upx; | |
| 1828 | + background-color: #ffffff; | |
| 1829 | +} | |
| 1830 | + | |
| 1831 | +.cu-bar.input input { | |
| 1832 | + overflow: initial; | |
| 1833 | + line-height: 64upx; | |
| 1834 | + height: 64upx; | |
| 1835 | + min-height: 64upx; | |
| 1836 | + flex: 1; | |
| 1837 | + font-size: 30upx; | |
| 1838 | + margin: 0 20upx; | |
| 1839 | +} | |
| 1840 | + | |
| 1841 | +.cu-bar.input .action { | |
| 1842 | + margin-left: 20upx; | |
| 1843 | +} | |
| 1844 | + | |
| 1845 | +.cu-bar.input .action [class*="cuIcon-"] { | |
| 1846 | + font-size: 48upx; | |
| 1847 | +} | |
| 1848 | + | |
| 1849 | +.cu-bar.input input+.action { | |
| 1850 | + margin-right: 20upx; | |
| 1851 | + margin-left: 0upx; | |
| 1852 | +} | |
| 1853 | + | |
| 1854 | +.cu-bar.input .action:first-child [class*="cuIcon-"] { | |
| 1855 | + margin-left: 0upx; | |
| 1856 | +} | |
| 1857 | + | |
| 1858 | +.cu-custom { | |
| 1859 | + display: block; | |
| 1860 | + position: relative; | |
| 1861 | +} | |
| 1862 | + | |
| 1863 | +.cu-custom .cu-bar .content { | |
| 1864 | + width: calc(100% - 440upx); | |
| 1865 | +} | |
| 1866 | + | |
| 1867 | +/* #ifdef MP-ALIPAY */ | |
| 1868 | +.cu-custom .cu-bar .action .cuIcon-back { | |
| 1869 | + opacity: 0; | |
| 1870 | +} | |
| 1871 | + | |
| 1872 | +/* #endif */ | |
| 1873 | + | |
| 1874 | +.cu-custom .cu-bar .content image { | |
| 1875 | + height: 60upx; | |
| 1876 | + width: 240upx; | |
| 1877 | +} | |
| 1878 | + | |
| 1879 | +.cu-custom .cu-bar { | |
| 1880 | + min-height: 0px; | |
| 1881 | + /* #ifdef MP-WEIXIN */ | |
| 1882 | + padding-right: 220upx; | |
| 1883 | + /* #endif */ | |
| 1884 | + /* #ifdef MP-ALIPAY */ | |
| 1885 | + padding-right: 150upx; | |
| 1886 | + /* #endif */ | |
| 1887 | + box-shadow: 0upx 0upx 0upx; | |
| 1888 | + z-index: 9999; | |
| 1889 | +} | |
| 1890 | + | |
| 1891 | +.cu-custom .cu-bar .border-custom { | |
| 1892 | + position: relative; | |
| 1893 | + background: rgba(0, 0, 0, 0.15); | |
| 1894 | + border-radius: 1000upx; | |
| 1895 | + height: 30px; | |
| 1896 | +} | |
| 1897 | + | |
| 1898 | +.cu-custom .cu-bar .border-custom::after { | |
| 1899 | + content: " "; | |
| 1900 | + width: 200%; | |
| 1901 | + height: 200%; | |
| 1902 | + position: absolute; | |
| 1903 | + top: 0; | |
| 1904 | + left: 0; | |
| 1905 | + border-radius: inherit; | |
| 1906 | + transform: scale(0.5); | |
| 1907 | + transform-origin: 0 0; | |
| 1908 | + pointer-events: none; | |
| 1909 | + box-sizing: border-box; | |
| 1910 | + border: 1upx solid #ffffff; | |
| 1911 | + opacity: 0.5; | |
| 1912 | +} | |
| 1913 | + | |
| 1914 | +.cu-custom .cu-bar .border-custom::before { | |
| 1915 | + content: " "; | |
| 1916 | + width: 1upx; | |
| 1917 | + height: 110%; | |
| 1918 | + position: absolute; | |
| 1919 | + top: 22.5%; | |
| 1920 | + left: 0; | |
| 1921 | + right: 0; | |
| 1922 | + margin: auto; | |
| 1923 | + transform: scale(0.5); | |
| 1924 | + transform-origin: 0 0; | |
| 1925 | + pointer-events: none; | |
| 1926 | + box-sizing: border-box; | |
| 1927 | + opacity: 0.6; | |
| 1928 | + background-color: #ffffff; | |
| 1929 | +} | |
| 1930 | + | |
| 1931 | +.cu-custom .cu-bar .border-custom text { | |
| 1932 | + display: block; | |
| 1933 | + flex: 1; | |
| 1934 | + margin: auto !important; | |
| 1935 | + text-align: center; | |
| 1936 | + font-size: 34upx; | |
| 1937 | +} | |
| 1938 | + | |
| 1939 | +/* ================== | |
| 1940 | + 导航栏 | |
| 1941 | + ==================== */ | |
| 1942 | + | |
| 1943 | +.nav { | |
| 1944 | + white-space: nowrap; | |
| 1945 | +} | |
| 1946 | + | |
| 1947 | +::-webkit-scrollbar { | |
| 1948 | + display: none; | |
| 1949 | +} | |
| 1950 | + | |
| 1951 | +.nav .cu-item { | |
| 1952 | + height: 90upx; | |
| 1953 | + display: inline-block; | |
| 1954 | + line-height: 90upx; | |
| 1955 | + margin: 0 10upx; | |
| 1956 | + padding: 0 20upx; | |
| 1957 | +} | |
| 1958 | + | |
| 1959 | +.nav .cu-item.cur { | |
| 1960 | + border-bottom: 4upx solid; | |
| 1961 | +} | |
| 1962 | + | |
| 1963 | +/* ================== | |
| 1964 | + 时间轴 | |
| 1965 | + ==================== */ | |
| 1966 | + | |
| 1967 | +.cu-timeline { | |
| 1968 | + display: block; | |
| 1969 | + background-color: #ffffff; | |
| 1970 | +} | |
| 1971 | + | |
| 1972 | +.cu-timeline .cu-time { | |
| 1973 | + width: 120upx; | |
| 1974 | + text-align: center; | |
| 1975 | + padding: 20upx 0; | |
| 1976 | + font-size: 26upx; | |
| 1977 | + color: #888; | |
| 1978 | + display: block; | |
| 1979 | +} | |
| 1980 | + | |
| 1981 | +.cu-timeline>.cu-item { | |
| 1982 | + padding: 30upx 30upx 30upx 120upx; | |
| 1983 | + position: relative; | |
| 1984 | + display: block; | |
| 1985 | + z-index: 0; | |
| 1986 | +} | |
| 1987 | + | |
| 1988 | +.cu-timeline>.cu-item:not([class*="text-"]) { | |
| 1989 | + color: #ccc; | |
| 1990 | +} | |
| 1991 | + | |
| 1992 | +.cu-timeline>.cu-item::after { | |
| 1993 | + content: ""; | |
| 1994 | + display: block; | |
| 1995 | + position: absolute; | |
| 1996 | + width: 1upx; | |
| 1997 | + background-color: #ddd; | |
| 1998 | + left: 60upx; | |
| 1999 | + height: 100%; | |
| 2000 | + top: 0; | |
| 2001 | + z-index: 8; | |
| 2002 | +} | |
| 2003 | + | |
| 2004 | +.cu-timeline>.cu-item::before { | |
| 2005 | + font-family: "cuIcon"; | |
| 2006 | + display: block; | |
| 2007 | + position: absolute; | |
| 2008 | + top: 36upx; | |
| 2009 | + z-index: 9; | |
| 2010 | + background-color: #ffffff; | |
| 2011 | + width: 50upx; | |
| 2012 | + height: 50upx; | |
| 2013 | + text-align: center; | |
| 2014 | + border: none; | |
| 2015 | + line-height: 50upx; | |
| 2016 | + left: 36upx; | |
| 2017 | +} | |
| 2018 | + | |
| 2019 | +.cu-timeline>.cu-item:not([class*="cuIcon-"])::before { | |
| 2020 | + content: "\e763"; | |
| 2021 | +} | |
| 2022 | + | |
| 2023 | +.cu-timeline>.cu-item[class*="cuIcon-"]::before { | |
| 2024 | + background-color: #ffffff; | |
| 2025 | + width: 50upx; | |
| 2026 | + height: 50upx; | |
| 2027 | + text-align: center; | |
| 2028 | + border: none; | |
| 2029 | + line-height: 50upx; | |
| 2030 | + left: 36upx; | |
| 2031 | +} | |
| 2032 | + | |
| 2033 | +.cu-timeline>.cu-item>.content { | |
| 2034 | + padding: 30upx; | |
| 2035 | + border-radius: 6upx; | |
| 2036 | + display: block; | |
| 2037 | + line-height: 1.6; | |
| 2038 | +} | |
| 2039 | + | |
| 2040 | +.cu-timeline>.cu-item>.content:not([class*="bg-"]) { | |
| 2041 | + background-color: #f1f1f1; | |
| 2042 | + color: #333333; | |
| 2043 | +} | |
| 2044 | + | |
| 2045 | +.cu-timeline>.cu-item>.content+.content { | |
| 2046 | + margin-top: 20upx; | |
| 2047 | +} | |
| 2048 | + | |
| 2049 | +/* ================== | |
| 2050 | + 聊天 | |
| 2051 | + ==================== */ | |
| 2052 | + | |
| 2053 | +.cu-chat { | |
| 2054 | + display: flex; | |
| 2055 | + flex-direction: column; | |
| 2056 | +} | |
| 2057 | + | |
| 2058 | +.cu-chat .cu-item { | |
| 2059 | + display: flex; | |
| 2060 | + padding: 30upx 30upx 70upx; | |
| 2061 | + position: relative; | |
| 2062 | +} | |
| 2063 | + | |
| 2064 | +.cu-chat .cu-item>.cu-avatar { | |
| 2065 | + width: 80upx; | |
| 2066 | + height: 80upx; | |
| 2067 | +} | |
| 2068 | + | |
| 2069 | +.cu-chat .cu-item>.main { | |
| 2070 | + max-width: calc(100% - 260upx); | |
| 2071 | + margin: 0 40upx; | |
| 2072 | + display: flex; | |
| 2073 | + align-items: center; | |
| 2074 | +} | |
| 2075 | + | |
| 2076 | +.cu-chat .cu-item>image { | |
| 2077 | + height: 320upx; | |
| 2078 | +} | |
| 2079 | + | |
| 2080 | +.cu-chat .cu-item>.main .content { | |
| 2081 | + padding: 20upx; | |
| 2082 | + border-radius: 6upx; | |
| 2083 | + display: inline-flex; | |
| 2084 | + max-width: 100%; | |
| 2085 | + align-items: center; | |
| 2086 | + font-size: 30upx; | |
| 2087 | + position: relative; | |
| 2088 | + min-height: 80upx; | |
| 2089 | + line-height: 40upx; | |
| 2090 | + text-align: left; | |
| 2091 | +} | |
| 2092 | + | |
| 2093 | +.cu-chat .cu-item>.main .content:not([class*="bg-"]) { | |
| 2094 | + background-color: #ffffff; | |
| 2095 | + color: #333333; | |
| 2096 | +} | |
| 2097 | + | |
| 2098 | +.cu-chat .cu-item .date { | |
| 2099 | + position: absolute; | |
| 2100 | + font-size: 24upx; | |
| 2101 | + color: #8799a3; | |
| 2102 | + width: calc(100% - 320upx); | |
| 2103 | + bottom: 20upx; | |
| 2104 | + left: 160upx; | |
| 2105 | +} | |
| 2106 | + | |
| 2107 | +.cu-chat .cu-item .action { | |
| 2108 | + padding: 0 30upx; | |
| 2109 | + display: flex; | |
| 2110 | + align-items: center; | |
| 2111 | +} | |
| 2112 | + | |
| 2113 | +.cu-chat .cu-item>.main .content::after { | |
| 2114 | + content: ""; | |
| 2115 | + top: 27upx; | |
| 2116 | + transform: rotate(45deg); | |
| 2117 | + position: absolute; | |
| 2118 | + z-index: 100; | |
| 2119 | + display: inline-block; | |
| 2120 | + overflow: hidden; | |
| 2121 | + width: 24upx; | |
| 2122 | + height: 24upx; | |
| 2123 | + left: -12upx; | |
| 2124 | + right: initial; | |
| 2125 | + background-color: inherit; | |
| 2126 | +} | |
| 2127 | + | |
| 2128 | +.cu-chat .cu-item.self>.main .content::after { | |
| 2129 | + left: auto; | |
| 2130 | + right: -12upx; | |
| 2131 | +} | |
| 2132 | + | |
| 2133 | +.cu-chat .cu-item>.main .content::before { | |
| 2134 | + content: ""; | |
| 2135 | + top: 30upx; | |
| 2136 | + transform: rotate(45deg); | |
| 2137 | + position: absolute; | |
| 2138 | + z-index: -1; | |
| 2139 | + display: inline-block; | |
| 2140 | + overflow: hidden; | |
| 2141 | + width: 24upx; | |
| 2142 | + height: 24upx; | |
| 2143 | + left: -12upx; | |
| 2144 | + right: initial; | |
| 2145 | + background-color: inherit; | |
| 2146 | + filter: blur(5upx); | |
| 2147 | + opacity: 0.3; | |
| 2148 | +} | |
| 2149 | + | |
| 2150 | +.cu-chat .cu-item>.main .content:not([class*="bg-"])::before { | |
| 2151 | + background-color: #333333; | |
| 2152 | + opacity: 0.1; | |
| 2153 | +} | |
| 2154 | + | |
| 2155 | +.cu-chat .cu-item.self>.main .content::before { | |
| 2156 | + left: auto; | |
| 2157 | + right: -12upx; | |
| 2158 | +} | |
| 2159 | + | |
| 2160 | +.cu-chat .cu-item.self { | |
| 2161 | + justify-content: flex-end; | |
| 2162 | + text-align: right; | |
| 2163 | +} | |
| 2164 | + | |
| 2165 | +.cu-chat .cu-info { | |
| 2166 | + display: inline-block; | |
| 2167 | + margin: 20upx auto; | |
| 2168 | + font-size: 24upx; | |
| 2169 | + padding: 8upx 12upx; | |
| 2170 | + background-color: rgba(0, 0, 0, 0.2); | |
| 2171 | + border-radius: 6upx; | |
| 2172 | + color: #ffffff; | |
| 2173 | + max-width: 400upx; | |
| 2174 | + line-height: 1.4; | |
| 2175 | +} | |
| 2176 | + | |
| 2177 | +/* ================== | |
| 2178 | + 卡片 | |
| 2179 | + ==================== */ | |
| 2180 | + | |
| 2181 | +.cu-card { | |
| 2182 | + display: block; | |
| 2183 | + overflow: hidden; | |
| 2184 | +} | |
| 2185 | + | |
| 2186 | +.cu-card>.cu-item { | |
| 2187 | + display: block; | |
| 2188 | + background-color: #ffffff; | |
| 2189 | + overflow: hidden; | |
| 2190 | + border-radius: 10upx; | |
| 2191 | + margin: 30upx; | |
| 2192 | +} | |
| 2193 | + | |
| 2194 | +.cu-card>.cu-item.shadow-blur { | |
| 2195 | + overflow: initial; | |
| 2196 | +} | |
| 2197 | + | |
| 2198 | +.cu-card.no-card>.cu-item { | |
| 2199 | + margin: 0upx; | |
| 2200 | + border-radius: 0upx; | |
| 2201 | +} | |
| 2202 | + | |
| 2203 | +.cu-card .grid.grid-square { | |
| 2204 | + margin-bottom: -20upx; | |
| 2205 | +} | |
| 2206 | + | |
| 2207 | +.cu-card.case .image { | |
| 2208 | + position: relative; | |
| 2209 | +} | |
| 2210 | + | |
| 2211 | +.cu-card.case .image image { | |
| 2212 | + width: 100%; | |
| 2213 | +} | |
| 2214 | + | |
| 2215 | +.cu-card.case .image .cu-tag { | |
| 2216 | + position: absolute; | |
| 2217 | + right: 0; | |
| 2218 | + top: 0; | |
| 2219 | +} | |
| 2220 | + | |
| 2221 | +.cu-card.case .image .cu-bar { | |
| 2222 | + position: absolute; | |
| 2223 | + bottom: 0; | |
| 2224 | + width: 100%; | |
| 2225 | + background-color: transparent; | |
| 2226 | + padding: 0upx 30upx; | |
| 2227 | +} | |
| 2228 | + | |
| 2229 | +.cu-card.case.no-card .image { | |
| 2230 | + margin: 30upx 30upx 0; | |
| 2231 | + overflow: hidden; | |
| 2232 | + border-radius: 10upx; | |
| 2233 | +} | |
| 2234 | + | |
| 2235 | +.cu-card.dynamic { | |
| 2236 | + display: block; | |
| 2237 | +} | |
| 2238 | + | |
| 2239 | +.cu-card.dynamic>.cu-item { | |
| 2240 | + display: block; | |
| 2241 | + background-color: #ffffff; | |
| 2242 | + overflow: hidden; | |
| 2243 | +} | |
| 2244 | + | |
| 2245 | +.cu-card.dynamic>.cu-item>.text-content { | |
| 2246 | + padding: 0 30upx 0; | |
| 2247 | + max-height: 6.4em; | |
| 2248 | + overflow: hidden; | |
| 2249 | + font-size: 30upx; | |
| 2250 | + margin-bottom: 20upx; | |
| 2251 | +} | |
| 2252 | + | |
| 2253 | +.cu-card.dynamic>.cu-item .square-img { | |
| 2254 | + width: 100%; | |
| 2255 | + height: 200upx; | |
| 2256 | + border-radius: 6upx; | |
| 2257 | +} | |
| 2258 | + | |
| 2259 | +.cu-card.dynamic>.cu-item .only-img { | |
| 2260 | + width: 100%; | |
| 2261 | + height: 320upx; | |
| 2262 | + border-radius: 6upx; | |
| 2263 | +} | |
| 2264 | + | |
| 2265 | +/* card.dynamic>.cu-item .comment { | |
| 2266 | + padding: 20upx; | |
| 2267 | + background-color: #f1f1f1; | |
| 2268 | + margin: 0 30upx 30upx; | |
| 2269 | + border-radius: 6upx; | |
| 2270 | +} */ | |
| 2271 | + | |
| 2272 | +.cu-card.article { | |
| 2273 | + display: block; | |
| 2274 | +} | |
| 2275 | + | |
| 2276 | +.cu-card.article>.cu-item { | |
| 2277 | + padding-bottom: 30upx; | |
| 2278 | +} | |
| 2279 | + | |
| 2280 | +.cu-card.article>.cu-item .title { | |
| 2281 | + font-size: 30upx; | |
| 2282 | + font-weight: 900; | |
| 2283 | + color: #333333; | |
| 2284 | + line-height: 100upx; | |
| 2285 | + padding: 0 30upx; | |
| 2286 | +} | |
| 2287 | + | |
| 2288 | +.cu-card.article>.cu-item .content { | |
| 2289 | + display: flex; | |
| 2290 | + padding: 0 30upx; | |
| 2291 | +} | |
| 2292 | + | |
| 2293 | +.cu-card.article>.cu-item .content>image { | |
| 2294 | + width: 240upx; | |
| 2295 | + height: 6.4em; | |
| 2296 | + margin-right: 20upx; | |
| 2297 | + border-radius: 6upx; | |
| 2298 | +} | |
| 2299 | + | |
| 2300 | +.cu-card.article>.cu-item .content .desc { | |
| 2301 | + flex: 1; | |
| 2302 | + display: flex; | |
| 2303 | + flex-direction: column; | |
| 2304 | + justify-content: space-between; | |
| 2305 | +} | |
| 2306 | + | |
| 2307 | +.cu-card.article>.cu-item .content .text-content { | |
| 2308 | + font-size: 28upx; | |
| 2309 | + color: #888; | |
| 2310 | + height: 4.8em; | |
| 2311 | + overflow: hidden; | |
| 2312 | +} | |
| 2313 | + | |
| 2314 | +/* ================== | |
| 2315 | + 表单 | |
| 2316 | + ==================== */ | |
| 2317 | + | |
| 2318 | +.cu-form-group { | |
| 2319 | + background-color: #ffffff; | |
| 2320 | + padding: 1upx 30upx; | |
| 2321 | + display: flex; | |
| 2322 | + align-items: center; | |
| 2323 | + min-height: 100upx; | |
| 2324 | + justify-content: space-between; | |
| 2325 | +} | |
| 2326 | + | |
| 2327 | +.cu-form-group+.cu-form-group { | |
| 2328 | + border-top: 1upx solid #eee; | |
| 2329 | +} | |
| 2330 | + | |
| 2331 | +.cu-form-group .title { | |
| 2332 | + text-align: justify; | |
| 2333 | + padding-right: 30upx; | |
| 2334 | + font-size: 30upx; | |
| 2335 | + position: relative; | |
| 2336 | + height: 60upx; | |
| 2337 | + line-height: 60upx; | |
| 2338 | +} | |
| 2339 | + | |
| 2340 | +.cu-form-group input { | |
| 2341 | + flex: 1; | |
| 2342 | + font-size: 30upx; | |
| 2343 | + color: #555; | |
| 2344 | + padding-right: 20upx; | |
| 2345 | +} | |
| 2346 | + | |
| 2347 | +.cu-form-group>text[class*="cuIcon-"] { | |
| 2348 | + font-size: 36upx; | |
| 2349 | + padding: 0; | |
| 2350 | + box-sizing: border-box; | |
| 2351 | +} | |
| 2352 | + | |
| 2353 | +.cu-form-group textarea { | |
| 2354 | + margin: 32upx 0 30upx; | |
| 2355 | + height: 4.6em; | |
| 2356 | + width: 100%; | |
| 2357 | + line-height: 1.2em; | |
| 2358 | + flex: 1; | |
| 2359 | + font-size: 28upx; | |
| 2360 | + padding: 0; | |
| 2361 | +} | |
| 2362 | + | |
| 2363 | +.cu-form-group.align-start .title { | |
| 2364 | + height: 1em; | |
| 2365 | + margin-top: 32upx; | |
| 2366 | + line-height: 1em; | |
| 2367 | +} | |
| 2368 | + | |
| 2369 | +.cu-form-group picker { | |
| 2370 | + flex: 1; | |
| 2371 | + padding-right: 40upx; | |
| 2372 | + overflow: hidden; | |
| 2373 | + position: relative; | |
| 2374 | +} | |
| 2375 | + | |
| 2376 | +.cu-form-group picker .picker { | |
| 2377 | + line-height: 100upx; | |
| 2378 | + font-size: 28upx; | |
| 2379 | + text-overflow: ellipsis; | |
| 2380 | + white-space: nowrap; | |
| 2381 | + overflow: hidden; | |
| 2382 | + width: 100%; | |
| 2383 | + text-align: right; | |
| 2384 | +} | |
| 2385 | + | |
| 2386 | +.cu-form-group picker::after { | |
| 2387 | + font-family: cuIcon; | |
| 2388 | + display: block; | |
| 2389 | + content: "\e6a3"; | |
| 2390 | + position: absolute; | |
| 2391 | + font-size: 34upx; | |
| 2392 | + color: #8799a3; | |
| 2393 | + line-height: 100upx; | |
| 2394 | + width: 60upx; | |
| 2395 | + text-align: center; | |
| 2396 | + top: 0; | |
| 2397 | + bottom: 0; | |
| 2398 | + right: -20upx; | |
| 2399 | + margin: auto; | |
| 2400 | +} | |
| 2401 | + | |
| 2402 | +.cu-form-group textarea[disabled], | |
| 2403 | +.cu-form-group textarea[disabled] .placeholder { | |
| 2404 | + color: transparent; | |
| 2405 | +} | |
| 2406 | + | |
| 2407 | +/* ================== | |
| 2408 | + 模态窗口 | |
| 2409 | + ==================== */ | |
| 2410 | + | |
| 2411 | +.cu-modal { | |
| 2412 | + position: fixed; | |
| 2413 | + top: 0; | |
| 2414 | + right: 0; | |
| 2415 | + bottom: 0; | |
| 2416 | + left: 0; | |
| 2417 | + z-index: 1110; | |
| 2418 | + opacity: 0; | |
| 2419 | + outline: 0; | |
| 2420 | + text-align: center; | |
| 2421 | + -ms-transform: scale(1.185); | |
| 2422 | + transform: scale(1.185); | |
| 2423 | + backface-visibility: hidden; | |
| 2424 | + perspective: 2000upx; | |
| 2425 | + background: rgba(0, 0, 0, 0.6); | |
| 2426 | + transition: all 0.3s ease-in-out 0s; | |
| 2427 | + pointer-events: none; | |
| 2428 | +} | |
| 2429 | + | |
| 2430 | +.cu-modal::before { | |
| 2431 | + content: "\200B"; | |
| 2432 | + display: inline-block; | |
| 2433 | + height: 100%; | |
| 2434 | + vertical-align: middle; | |
| 2435 | +} | |
| 2436 | + | |
| 2437 | +.cu-modal.show { | |
| 2438 | + opacity: 1; | |
| 2439 | + transition-duration: 0.3s; | |
| 2440 | + -ms-transform: scale(1); | |
| 2441 | + transform: scale(1); | |
| 2442 | + overflow-x: hidden; | |
| 2443 | + overflow-y: auto; | |
| 2444 | + pointer-events: auto; | |
| 2445 | +} | |
| 2446 | + | |
| 2447 | +.cu-dialog { | |
| 2448 | + position: relative; | |
| 2449 | + display: inline-block; | |
| 2450 | + vertical-align: middle; | |
| 2451 | + margin-left: auto; | |
| 2452 | + margin-right: auto; | |
| 2453 | + width: 680upx; | |
| 2454 | + max-width: 100%; | |
| 2455 | + background-color: #f8f8f8; | |
| 2456 | + border-radius: 10upx; | |
| 2457 | + overflow: hidden; | |
| 2458 | +} | |
| 2459 | + | |
| 2460 | +.cu-modal.bottom-modal::before { | |
| 2461 | + vertical-align: bottom; | |
| 2462 | +} | |
| 2463 | + | |
| 2464 | +.cu-modal.bottom-modal .cu-dialog { | |
| 2465 | + width: 100%; | |
| 2466 | + border-radius: 0; | |
| 2467 | +} | |
| 2468 | + | |
| 2469 | +.cu-modal.bottom-modal { | |
| 2470 | + margin-bottom: -1000upx; | |
| 2471 | +} | |
| 2472 | + | |
| 2473 | +.cu-modal.bottom-modal.show { | |
| 2474 | + margin-bottom: 0; | |
| 2475 | +} | |
| 2476 | + | |
| 2477 | +.cu-modal.drawer-modal { | |
| 2478 | + transform: scale(1); | |
| 2479 | + display: flex; | |
| 2480 | +} | |
| 2481 | + | |
| 2482 | +.cu-modal.drawer-modal .cu-dialog { | |
| 2483 | + height: 100%; | |
| 2484 | + min-width: 200upx; | |
| 2485 | + border-radius: 0; | |
| 2486 | + margin: initial; | |
| 2487 | + transition-duration: 0.3s; | |
| 2488 | +} | |
| 2489 | + | |
| 2490 | +.cu-modal.drawer-modal.justify-start .cu-dialog { | |
| 2491 | + transform: translateX(-100%); | |
| 2492 | +} | |
| 2493 | + | |
| 2494 | +.cu-modal.drawer-modal.justify-end .cu-dialog { | |
| 2495 | + transform: translateX(100%); | |
| 2496 | +} | |
| 2497 | + | |
| 2498 | +.cu-modal.drawer-modal.show .cu-dialog { | |
| 2499 | + transform: translateX(0%); | |
| 2500 | +} | |
| 2501 | +.cu-modal .cu-dialog>.cu-bar:first-child .action{ | |
| 2502 | + min-width: 100rpx; | |
| 2503 | + margin-right: 0; | |
| 2504 | + min-height: 100rpx; | |
| 2505 | +} | |
| 2506 | +/* ================== | |
| 2507 | + 轮播 | |
| 2508 | + ==================== */ | |
| 2509 | +swiper .a-swiper-dot { | |
| 2510 | + display: inline-block; | |
| 2511 | + width: 16upx; | |
| 2512 | + height: 16upx; | |
| 2513 | + background: rgba(0, 0, 0, .3); | |
| 2514 | + border-radius: 50%; | |
| 2515 | + vertical-align: middle; | |
| 2516 | +} | |
| 2517 | + | |
| 2518 | +swiper[class*="-dot"] .wx-swiper-dots, | |
| 2519 | +swiper[class*="-dot"] .a-swiper-dots, | |
| 2520 | +swiper[class*="-dot"] .uni-swiper-dots { | |
| 2521 | + display: flex; | |
| 2522 | + align-items: center; | |
| 2523 | + width: 100%; | |
| 2524 | + justify-content: center; | |
| 2525 | +} | |
| 2526 | + | |
| 2527 | +swiper.square-dot .wx-swiper-dot, | |
| 2528 | +swiper.square-dot .a-swiper-dot, | |
| 2529 | +swiper.square-dot .uni-swiper-dot { | |
| 2530 | + background-color: #ffffff; | |
| 2531 | + opacity: 0.4; | |
| 2532 | + width: 10upx; | |
| 2533 | + height: 10upx; | |
| 2534 | + border-radius: 20upx; | |
| 2535 | + margin: 0 8upx !important; | |
| 2536 | +} | |
| 2537 | + | |
| 2538 | +swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active, | |
| 2539 | +swiper.square-dot .a-swiper-dot.a-swiper-dot-active, | |
| 2540 | +swiper.square-dot .uni-swiper-dot.uni-swiper-dot-active { | |
| 2541 | + opacity: 1; | |
| 2542 | + width: 30upx; | |
| 2543 | +} | |
| 2544 | + | |
| 2545 | +swiper.round-dot .wx-swiper-dot, | |
| 2546 | +swiper.round-dot .a-swiper-dot, | |
| 2547 | +swiper.round-dot .uni-swiper-dot { | |
| 2548 | + width: 10upx; | |
| 2549 | + height: 10upx; | |
| 2550 | + position: relative; | |
| 2551 | + margin: 4upx 8upx !important; | |
| 2552 | +} | |
| 2553 | + | |
| 2554 | +swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active::after, | |
| 2555 | +swiper.round-dot .a-swiper-dot.a-swiper-dot-active::after, | |
| 2556 | +swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active::after { | |
| 2557 | + content: ""; | |
| 2558 | + position: absolute; | |
| 2559 | + width: 10upx; | |
| 2560 | + height: 10upx; | |
| 2561 | + top: 0upx; | |
| 2562 | + left: 0upx; | |
| 2563 | + right: 0; | |
| 2564 | + bottom: 0; | |
| 2565 | + margin: auto; | |
| 2566 | + background-color: #ffffff; | |
| 2567 | + border-radius: 20upx; | |
| 2568 | +} | |
| 2569 | + | |
| 2570 | +swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active, | |
| 2571 | +swiper.round-dot .a-swiper-dot.a-swiper-dot-active, | |
| 2572 | +swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active { | |
| 2573 | + width: 18upx; | |
| 2574 | + height: 18upx; | |
| 2575 | +} | |
| 2576 | + | |
| 2577 | +.screen-swiper { | |
| 2578 | + min-height: 375upx; | |
| 2579 | +} | |
| 2580 | + | |
| 2581 | +.screen-swiper image, | |
| 2582 | +.screen-swiper video, | |
| 2583 | +.swiper-item image, | |
| 2584 | +.swiper-item video { | |
| 2585 | + width: 100%; | |
| 2586 | + display: block; | |
| 2587 | + height: 100%; | |
| 2588 | + margin: 0; | |
| 2589 | + pointer-events: none; | |
| 2590 | +} | |
| 2591 | + | |
| 2592 | +.card-swiper { | |
| 2593 | + height: 420upx !important; | |
| 2594 | +} | |
| 2595 | + | |
| 2596 | +.card-swiper swiper-item { | |
| 2597 | + width: 610upx !important; | |
| 2598 | + left: 70upx; | |
| 2599 | + box-sizing: border-box; | |
| 2600 | + padding: 40upx 0upx 70upx; | |
| 2601 | + overflow: initial; | |
| 2602 | +} | |
| 2603 | + | |
| 2604 | +.card-swiper swiper-item .swiper-item { | |
| 2605 | + width: 100%; | |
| 2606 | + display: block; | |
| 2607 | + height: 100%; | |
| 2608 | + border-radius: 10upx; | |
| 2609 | + transform: scale(0.9); | |
| 2610 | + transition: all 0.2s ease-in 0s; | |
| 2611 | + overflow: hidden; | |
| 2612 | +} | |
| 2613 | + | |
| 2614 | +.card-swiper swiper-item.cur .swiper-item { | |
| 2615 | + transform: none; | |
| 2616 | + transition: all 0.2s ease-in 0s; | |
| 2617 | +} | |
| 2618 | + | |
| 2619 | + | |
| 2620 | +.tower-swiper { | |
| 2621 | + height: 420upx; | |
| 2622 | + position: relative; | |
| 2623 | + max-width: 750upx; | |
| 2624 | + overflow: hidden; | |
| 2625 | +} | |
| 2626 | + | |
| 2627 | +.tower-swiper .tower-item { | |
| 2628 | + position: absolute; | |
| 2629 | + width: 300upx; | |
| 2630 | + height: 380upx; | |
| 2631 | + top: 0; | |
| 2632 | + bottom: 0; | |
| 2633 | + left: 50%; | |
| 2634 | + margin: auto; | |
| 2635 | + transition: all 0.2s ease-in 0s; | |
| 2636 | + opacity: 1; | |
| 2637 | +} | |
| 2638 | + | |
| 2639 | +.tower-swiper .tower-item.none { | |
| 2640 | + opacity: 0; | |
| 2641 | +} | |
| 2642 | + | |
| 2643 | +.tower-swiper .tower-item .swiper-item { | |
| 2644 | + width: 100%; | |
| 2645 | + height: 100%; | |
| 2646 | + border-radius: 6upx; | |
| 2647 | + overflow: hidden; | |
| 2648 | +} | |
| 2649 | + | |
| 2650 | +/* ================== | |
| 2651 | + 步骤条 | |
| 2652 | + ==================== */ | |
| 2653 | + | |
| 2654 | +.cu-steps { | |
| 2655 | + display: flex; | |
| 2656 | +} | |
| 2657 | + | |
| 2658 | +scroll-view.cu-steps { | |
| 2659 | + display: block; | |
| 2660 | + white-space: nowrap; | |
| 2661 | +} | |
| 2662 | + | |
| 2663 | +scroll-view.cu-steps .cu-item { | |
| 2664 | + display: inline-block; | |
| 2665 | +} | |
| 2666 | + | |
| 2667 | +.cu-steps .cu-item { | |
| 2668 | + flex: 1; | |
| 2669 | + text-align: center; | |
| 2670 | + position: relative; | |
| 2671 | + min-width: 100upx; | |
| 2672 | +} | |
| 2673 | + | |
| 2674 | +.cu-steps .cu-item:not([class*="text-"]) { | |
| 2675 | + color: #8799a3; | |
| 2676 | +} | |
| 2677 | + | |
| 2678 | +.cu-steps .cu-item [class*="cuIcon-"], | |
| 2679 | +.cu-steps .cu-item .num { | |
| 2680 | + display: block; | |
| 2681 | + font-size: 40upx; | |
| 2682 | + line-height: 80upx; | |
| 2683 | +} | |
| 2684 | + | |
| 2685 | +.cu-steps .cu-item::before, | |
| 2686 | +.cu-steps .cu-item::after, | |
| 2687 | +.cu-steps.steps-arrow .cu-item::before, | |
| 2688 | +.cu-steps.steps-arrow .cu-item::after { | |
| 2689 | + content: ""; | |
| 2690 | + display: block; | |
| 2691 | + position: absolute; | |
| 2692 | + height: 0px; | |
| 2693 | + width: calc(100% - 80upx); | |
| 2694 | + border-bottom: 1px solid #ccc; | |
| 2695 | + left: calc(0px - (100% - 80upx) / 2); | |
| 2696 | + top: 40upx; | |
| 2697 | + z-index: 0; | |
| 2698 | +} | |
| 2699 | + | |
| 2700 | +.cu-steps.steps-arrow .cu-item::before, | |
| 2701 | +.cu-steps.steps-arrow .cu-item::after { | |
| 2702 | + content: "\e6a3"; | |
| 2703 | + font-family: 'cuIcon'; | |
| 2704 | + height: 30upx; | |
| 2705 | + border-bottom-width: 0px; | |
| 2706 | + line-height: 30upx; | |
| 2707 | + top: 0; | |
| 2708 | + bottom: 0; | |
| 2709 | + margin: auto; | |
| 2710 | + color: #ccc; | |
| 2711 | +} | |
| 2712 | + | |
| 2713 | +.cu-steps.steps-bottom .cu-item::before, | |
| 2714 | +.cu-steps.steps-bottom .cu-item::after { | |
| 2715 | + bottom: 40upx; | |
| 2716 | + top: initial; | |
| 2717 | +} | |
| 2718 | + | |
| 2719 | +.cu-steps .cu-item::after { | |
| 2720 | + border-bottom: 1px solid currentColor; | |
| 2721 | + width: 0px; | |
| 2722 | + transition: all 0.3s ease-in-out 0s; | |
| 2723 | +} | |
| 2724 | + | |
| 2725 | +.cu-steps .cu-item[class*="text-"]::after { | |
| 2726 | + width: calc(100% - 80upx); | |
| 2727 | + color: currentColor; | |
| 2728 | +} | |
| 2729 | + | |
| 2730 | +.cu-steps .cu-item:first-child::before, | |
| 2731 | +.cu-steps .cu-item:first-child::after { | |
| 2732 | + display: none; | |
| 2733 | +} | |
| 2734 | + | |
| 2735 | +.cu-steps .cu-item .num { | |
| 2736 | + width: 40upx; | |
| 2737 | + height: 40upx; | |
| 2738 | + border-radius: 50%; | |
| 2739 | + line-height: 40upx; | |
| 2740 | + margin: 20upx auto; | |
| 2741 | + font-size: 24upx; | |
| 2742 | + border: 1px solid currentColor; | |
| 2743 | + position: relative; | |
| 2744 | + overflow: hidden; | |
| 2745 | +} | |
| 2746 | + | |
| 2747 | +.cu-steps .cu-item[class*="text-"] .num { | |
| 2748 | + background-color: currentColor; | |
| 2749 | +} | |
| 2750 | + | |
| 2751 | +.cu-steps .cu-item .num::before, | |
| 2752 | +.cu-steps .cu-item .num::after { | |
| 2753 | + content: attr(data-index); | |
| 2754 | + position: absolute; | |
| 2755 | + left: 0; | |
| 2756 | + right: 0; | |
| 2757 | + top: 0; | |
| 2758 | + bottom: 0; | |
| 2759 | + margin: auto; | |
| 2760 | + transition: all 0.3s ease-in-out 0s; | |
| 2761 | + transform: translateY(0upx); | |
| 2762 | +} | |
| 2763 | + | |
| 2764 | +.cu-steps .cu-item[class*="text-"] .num::before { | |
| 2765 | + transform: translateY(-40upx); | |
| 2766 | + color: #ffffff; | |
| 2767 | +} | |
| 2768 | + | |
| 2769 | +.cu-steps .cu-item .num::after { | |
| 2770 | + transform: translateY(40upx); | |
| 2771 | + color: #ffffff; | |
| 2772 | + transition: all 0.3s ease-in-out 0s; | |
| 2773 | +} | |
| 2774 | + | |
| 2775 | +.cu-steps .cu-item[class*="text-"] .num::after { | |
| 2776 | + content: "\e645"; | |
| 2777 | + font-family: 'cuIcon'; | |
| 2778 | + color: #ffffff; | |
| 2779 | + transform: translateY(0upx); | |
| 2780 | +} | |
| 2781 | + | |
| 2782 | +.cu-steps .cu-item[class*="text-"] .num.err::after { | |
| 2783 | + content: "\e646"; | |
| 2784 | +} | |
| 2785 | + | |
| 2786 | +/* ================== | |
| 2787 | + 布局 | |
| 2788 | + ==================== */ | |
| 2789 | + | |
| 2790 | +/* -- flex弹性布局 -- */ | |
| 2791 | + | |
| 2792 | +.flex { | |
| 2793 | + display: flex; | |
| 2794 | +} | |
| 2795 | + | |
| 2796 | +.basis-xs { | |
| 2797 | + flex-basis: 20%; | |
| 2798 | +} | |
| 2799 | + | |
| 2800 | +.basis-sm { | |
| 2801 | + flex-basis: 40%; | |
| 2802 | +} | |
| 2803 | + | |
| 2804 | +.basis-df { | |
| 2805 | + flex-basis: 50%; | |
| 2806 | +} | |
| 2807 | + | |
| 2808 | +.basis-lg { | |
| 2809 | + flex-basis: 60%; | |
| 2810 | +} | |
| 2811 | + | |
| 2812 | +.basis-xl { | |
| 2813 | + flex-basis: 80%; | |
| 2814 | +} | |
| 2815 | + | |
| 2816 | +.flex-sub { | |
| 2817 | + flex: 1; | |
| 2818 | +} | |
| 2819 | + | |
| 2820 | +.flex-twice { | |
| 2821 | + flex: 2; | |
| 2822 | +} | |
| 2823 | + | |
| 2824 | +.flex-treble { | |
| 2825 | + flex: 3; | |
| 2826 | +} | |
| 2827 | + | |
| 2828 | +.flex-direction { | |
| 2829 | + flex-direction: column; | |
| 2830 | +} | |
| 2831 | + | |
| 2832 | +.flex-wrap { | |
| 2833 | + flex-wrap: wrap; | |
| 2834 | +} | |
| 2835 | + | |
| 2836 | +.align-start { | |
| 2837 | + align-items: flex-start; | |
| 2838 | +} | |
| 2839 | + | |
| 2840 | +.align-end { | |
| 2841 | + align-items: flex-end; | |
| 2842 | +} | |
| 2843 | + | |
| 2844 | +.align-center { | |
| 2845 | + align-items: center; | |
| 2846 | +} | |
| 2847 | + | |
| 2848 | +.align-stretch { | |
| 2849 | + align-items: stretch; | |
| 2850 | +} | |
| 2851 | + | |
| 2852 | +.self-start { | |
| 2853 | + align-self: flex-start; | |
| 2854 | +} | |
| 2855 | + | |
| 2856 | +.self-center { | |
| 2857 | + align-self: flex-center; | |
| 2858 | +} | |
| 2859 | + | |
| 2860 | +.self-end { | |
| 2861 | + align-self: flex-end; | |
| 2862 | +} | |
| 2863 | + | |
| 2864 | +.self-stretch { | |
| 2865 | + align-self: stretch; | |
| 2866 | +} | |
| 2867 | + | |
| 2868 | +.align-stretch { | |
| 2869 | + align-items: stretch; | |
| 2870 | +} | |
| 2871 | + | |
| 2872 | +.justify-start { | |
| 2873 | + justify-content: flex-start; | |
| 2874 | +} | |
| 2875 | + | |
| 2876 | +.justify-end { | |
| 2877 | + justify-content: flex-end; | |
| 2878 | +} | |
| 2879 | + | |
| 2880 | +.justify-center { | |
| 2881 | + justify-content: center; | |
| 2882 | +} | |
| 2883 | + | |
| 2884 | +.justify-between { | |
| 2885 | + justify-content: space-between; | |
| 2886 | +} | |
| 2887 | + | |
| 2888 | +.justify-around { | |
| 2889 | + justify-content: space-around; | |
| 2890 | +} | |
| 2891 | + | |
| 2892 | +/* grid布局 */ | |
| 2893 | + | |
| 2894 | +.grid { | |
| 2895 | + display: flex; | |
| 2896 | + flex-wrap: wrap; | |
| 2897 | +} | |
| 2898 | + | |
| 2899 | +.grid.grid-square { | |
| 2900 | + overflow: hidden; | |
| 2901 | +} | |
| 2902 | + | |
| 2903 | +.grid.grid-square .cu-tag { | |
| 2904 | + position: absolute; | |
| 2905 | + right: 0; | |
| 2906 | + top: 0; | |
| 2907 | + border-bottom-left-radius: 6upx; | |
| 2908 | + padding: 6upx 12upx; | |
| 2909 | + height: auto; | |
| 2910 | + background-color: rgba(0, 0, 0, 0.5); | |
| 2911 | +} | |
| 2912 | + | |
| 2913 | +.grid.grid-square>view>text[class*="cuIcon-"] { | |
| 2914 | + font-size: 52upx; | |
| 2915 | + position: absolute; | |
| 2916 | + color: #8799a3; | |
| 2917 | + margin: auto; | |
| 2918 | + top: 0; | |
| 2919 | + bottom: 0; | |
| 2920 | + left: 0; | |
| 2921 | + right: 0; | |
| 2922 | + display: flex; | |
| 2923 | + justify-content: center; | |
| 2924 | + align-items: center; | |
| 2925 | + flex-direction: column; | |
| 2926 | +} | |
| 2927 | + | |
| 2928 | +.grid.grid-square>view { | |
| 2929 | + margin-right: 20upx; | |
| 2930 | + margin-bottom: 20upx; | |
| 2931 | + border-radius: 6upx; | |
| 2932 | + position: relative; | |
| 2933 | + overflow: hidden; | |
| 2934 | +} | |
| 2935 | +.grid.grid-square>view.bg-img image { | |
| 2936 | + width: 100%; | |
| 2937 | + height: 100%; | |
| 2938 | + position: absolute; | |
| 2939 | +} | |
| 2940 | +.grid.col-1.grid-square>view { | |
| 2941 | + padding-bottom: 100%; | |
| 2942 | + height: 0; | |
| 2943 | + margin-right: 0; | |
| 2944 | +} | |
| 2945 | + | |
| 2946 | +.grid.col-2.grid-square>view { | |
| 2947 | + padding-bottom: calc((100% - 20upx)/2); | |
| 2948 | + height: 0; | |
| 2949 | + width: calc((100% - 20upx)/2); | |
| 2950 | +} | |
| 2951 | + | |
| 2952 | +.grid.col-3.grid-square>view { | |
| 2953 | + padding-bottom: calc((100% - 40upx)/3); | |
| 2954 | + height: 0; | |
| 2955 | + width: calc((100% - 40upx)/3); | |
| 2956 | +} | |
| 2957 | + | |
| 2958 | +.grid.col-4.grid-square>view { | |
| 2959 | + padding-bottom: calc((100% - 60upx)/4); | |
| 2960 | + height: 0; | |
| 2961 | + width: calc((100% - 60upx)/4); | |
| 2962 | +} | |
| 2963 | + | |
| 2964 | +.grid.col-5.grid-square>view { | |
| 2965 | + padding-bottom: calc((100% - 80upx)/5); | |
| 2966 | + height: 0; | |
| 2967 | + width: calc((100% - 80upx)/5); | |
| 2968 | +} | |
| 2969 | + | |
| 2970 | +.grid.col-2.grid-square>view:nth-child(2n), | |
| 2971 | +.grid.col-3.grid-square>view:nth-child(3n), | |
| 2972 | +.grid.col-4.grid-square>view:nth-child(4n), | |
| 2973 | +.grid.col-5.grid-square>view:nth-child(5n) { | |
| 2974 | + margin-right: 0; | |
| 2975 | +} | |
| 2976 | + | |
| 2977 | +.grid.col-1>view { | |
| 2978 | + width: 100%; | |
| 2979 | +} | |
| 2980 | + | |
| 2981 | +.grid.col-2>view { | |
| 2982 | + width: 50%; | |
| 2983 | +} | |
| 2984 | + | |
| 2985 | +.grid.col-3>view { | |
| 2986 | + width: 33.33%; | |
| 2987 | +} | |
| 2988 | + | |
| 2989 | +.grid.col-4>view { | |
| 2990 | + width: 25%; | |
| 2991 | +} | |
| 2992 | + | |
| 2993 | +.grid.col-5>view { | |
| 2994 | + width: 20%; | |
| 2995 | +} | |
| 2996 | + | |
| 2997 | +/* -- 内外边距 -- */ | |
| 2998 | + | |
| 2999 | +.margin-0 { | |
| 3000 | + margin: 0; | |
| 3001 | +} | |
| 3002 | + | |
| 3003 | +.margin-xs { | |
| 3004 | + margin: 10upx; | |
| 3005 | +} | |
| 3006 | + | |
| 3007 | +.margin-sm { | |
| 3008 | + margin: 20upx; | |
| 3009 | +} | |
| 3010 | + | |
| 3011 | +.margin { | |
| 3012 | + margin: 30upx; | |
| 3013 | +} | |
| 3014 | + | |
| 3015 | +.margin-lg { | |
| 3016 | + margin: 40upx; | |
| 3017 | +} | |
| 3018 | + | |
| 3019 | +.margin-xl { | |
| 3020 | + margin: 50upx; | |
| 3021 | +} | |
| 3022 | + | |
| 3023 | +.margin-top-xs { | |
| 3024 | + margin-top: 10upx; | |
| 3025 | +} | |
| 3026 | + | |
| 3027 | +.margin-top-sm { | |
| 3028 | + margin-top: 20upx; | |
| 3029 | +} | |
| 3030 | + | |
| 3031 | +.margin-top { | |
| 3032 | + margin-top: 30upx; | |
| 3033 | +} | |
| 3034 | + | |
| 3035 | +.margin-top-lg { | |
| 3036 | + margin-top: 40upx; | |
| 3037 | +} | |
| 3038 | + | |
| 3039 | +.margin-top-xl { | |
| 3040 | + margin-top: 50upx; | |
| 3041 | +} | |
| 3042 | + | |
| 3043 | +.margin-right-xs { | |
| 3044 | + margin-right: 10upx; | |
| 3045 | +} | |
| 3046 | + | |
| 3047 | +.margin-right-sm { | |
| 3048 | + margin-right: 20upx; | |
| 3049 | +} | |
| 3050 | + | |
| 3051 | +.margin-right { | |
| 3052 | + margin-right: 30upx; | |
| 3053 | +} | |
| 3054 | + | |
| 3055 | +.margin-right-lg { | |
| 3056 | + margin-right: 40upx; | |
| 3057 | +} | |
| 3058 | + | |
| 3059 | +.margin-right-xl { | |
| 3060 | + margin-right: 50upx; | |
| 3061 | +} | |
| 3062 | + | |
| 3063 | +.margin-bottom-xs { | |
| 3064 | + margin-bottom: 10upx; | |
| 3065 | +} | |
| 3066 | + | |
| 3067 | +.margin-bottom-sm { | |
| 3068 | + margin-bottom: 20upx; | |
| 3069 | +} | |
| 3070 | + | |
| 3071 | +.margin-bottom { | |
| 3072 | + margin-bottom: 30upx; | |
| 3073 | +} | |
| 3074 | + | |
| 3075 | +.margin-bottom-lg { | |
| 3076 | + margin-bottom: 40upx; | |
| 3077 | +} | |
| 3078 | + | |
| 3079 | +.margin-bottom-xl { | |
| 3080 | + margin-bottom: 50upx; | |
| 3081 | +} | |
| 3082 | + | |
| 3083 | +.margin-left-xs { | |
| 3084 | + margin-left: 10upx; | |
| 3085 | +} | |
| 3086 | + | |
| 3087 | +.margin-left-sm { | |
| 3088 | + margin-left: 20upx; | |
| 3089 | +} | |
| 3090 | + | |
| 3091 | +.margin-left { | |
| 3092 | + margin-left: 30upx; | |
| 3093 | +} | |
| 3094 | + | |
| 3095 | +.margin-left-lg { | |
| 3096 | + margin-left: 40upx; | |
| 3097 | +} | |
| 3098 | + | |
| 3099 | +.margin-left-xl { | |
| 3100 | + margin-left: 50upx; | |
| 3101 | +} | |
| 3102 | + | |
| 3103 | +.margin-lr-xs { | |
| 3104 | + margin-left: 10upx; | |
| 3105 | + margin-right: 10upx; | |
| 3106 | +} | |
| 3107 | + | |
| 3108 | +.margin-lr-sm { | |
| 3109 | + margin-left: 20upx; | |
| 3110 | + margin-right: 20upx; | |
| 3111 | +} | |
| 3112 | + | |
| 3113 | +.margin-lr { | |
| 3114 | + margin-left: 30upx; | |
| 3115 | + margin-right: 30upx; | |
| 3116 | +} | |
| 3117 | + | |
| 3118 | +.margin-lr-lg { | |
| 3119 | + margin-left: 40upx; | |
| 3120 | + margin-right: 40upx; | |
| 3121 | +} | |
| 3122 | + | |
| 3123 | +.margin-lr-xl { | |
| 3124 | + margin-left: 50upx; | |
| 3125 | + margin-right: 50upx; | |
| 3126 | +} | |
| 3127 | + | |
| 3128 | +.margin-tb-xs { | |
| 3129 | + margin-top: 10upx; | |
| 3130 | + margin-bottom: 10upx; | |
| 3131 | +} | |
| 3132 | + | |
| 3133 | +.margin-tb-sm { | |
| 3134 | + margin-top: 20upx; | |
| 3135 | + margin-bottom: 20upx; | |
| 3136 | +} | |
| 3137 | + | |
| 3138 | +.margin-tb { | |
| 3139 | + margin-top: 30upx; | |
| 3140 | + margin-bottom: 30upx; | |
| 3141 | +} | |
| 3142 | + | |
| 3143 | +.margin-tb-lg { | |
| 3144 | + margin-top: 40upx; | |
| 3145 | + margin-bottom: 40upx; | |
| 3146 | +} | |
| 3147 | + | |
| 3148 | +.margin-tb-xl { | |
| 3149 | + margin-top: 50upx; | |
| 3150 | + margin-bottom: 50upx; | |
| 3151 | +} | |
| 3152 | + | |
| 3153 | +.padding-0 { | |
| 3154 | + padding: 0; | |
| 3155 | +} | |
| 3156 | + | |
| 3157 | +.padding-xs { | |
| 3158 | + padding: 10upx; | |
| 3159 | +} | |
| 3160 | + | |
| 3161 | +.padding-sm { | |
| 3162 | + padding: 20upx; | |
| 3163 | +} | |
| 3164 | + | |
| 3165 | +.padding { | |
| 3166 | + padding: 30upx; | |
| 3167 | +} | |
| 3168 | + | |
| 3169 | +.padding-lg { | |
| 3170 | + padding: 40upx; | |
| 3171 | +} | |
| 3172 | + | |
| 3173 | +.padding-xl { | |
| 3174 | + padding: 50upx; | |
| 3175 | +} | |
| 3176 | + | |
| 3177 | +.padding-top-xs { | |
| 3178 | + padding-top: 10upx; | |
| 3179 | +} | |
| 3180 | + | |
| 3181 | +.padding-top-sm { | |
| 3182 | + padding-top: 20upx; | |
| 3183 | +} | |
| 3184 | + | |
| 3185 | +.padding-top { | |
| 3186 | + padding-top: 30upx; | |
| 3187 | +} | |
| 3188 | + | |
| 3189 | +.padding-top-lg { | |
| 3190 | + padding-top: 40upx; | |
| 3191 | +} | |
| 3192 | + | |
| 3193 | +.padding-top-xl { | |
| 3194 | + padding-top: 50upx; | |
| 3195 | +} | |
| 3196 | + | |
| 3197 | +.padding-right-xs { | |
| 3198 | + padding-right: 10upx; | |
| 3199 | +} | |
| 3200 | + | |
| 3201 | +.padding-right-sm { | |
| 3202 | + padding-right: 20upx; | |
| 3203 | +} | |
| 3204 | + | |
| 3205 | +.padding-right { | |
| 3206 | + padding-right: 30upx; | |
| 3207 | +} | |
| 3208 | + | |
| 3209 | +.padding-right-lg { | |
| 3210 | + padding-right: 40upx; | |
| 3211 | +} | |
| 3212 | + | |
| 3213 | +.padding-right-xl { | |
| 3214 | + padding-right: 50upx; | |
| 3215 | +} | |
| 3216 | + | |
| 3217 | +.padding-bottom-xs { | |
| 3218 | + padding-bottom: 10upx; | |
| 3219 | +} | |
| 3220 | + | |
| 3221 | +.padding-bottom-sm { | |
| 3222 | + padding-bottom: 20upx; | |
| 3223 | +} | |
| 3224 | + | |
| 3225 | +.padding-bottom { | |
| 3226 | + padding-bottom: 30upx; | |
| 3227 | +} | |
| 3228 | + | |
| 3229 | +.padding-bottom-lg { | |
| 3230 | + padding-bottom: 40upx; | |
| 3231 | +} | |
| 3232 | + | |
| 3233 | +.padding-bottom-xl { | |
| 3234 | + padding-bottom: 50upx; | |
| 3235 | +} | |
| 3236 | + | |
| 3237 | +.padding-left-xs { | |
| 3238 | + padding-left: 10upx; | |
| 3239 | +} | |
| 3240 | + | |
| 3241 | +.padding-left-sm { | |
| 3242 | + padding-left: 20upx; | |
| 3243 | +} | |
| 3244 | + | |
| 3245 | +.padding-left { | |
| 3246 | + padding-left: 30upx; | |
| 3247 | +} | |
| 3248 | + | |
| 3249 | +.padding-left-lg { | |
| 3250 | + padding-left: 40upx; | |
| 3251 | +} | |
| 3252 | + | |
| 3253 | +.padding-left-xl { | |
| 3254 | + padding-left: 50upx; | |
| 3255 | +} | |
| 3256 | + | |
| 3257 | +.padding-lr-xs { | |
| 3258 | + padding-left: 10upx; | |
| 3259 | + padding-right: 10upx; | |
| 3260 | +} | |
| 3261 | + | |
| 3262 | +.padding-lr-sm { | |
| 3263 | + padding-left: 20upx; | |
| 3264 | + padding-right: 20upx; | |
| 3265 | +} | |
| 3266 | + | |
| 3267 | +.padding-lr { | |
| 3268 | + padding-left: 30upx; | |
| 3269 | + padding-right: 30upx; | |
| 3270 | +} | |
| 3271 | + | |
| 3272 | +.padding-lr-lg { | |
| 3273 | + padding-left: 40upx; | |
| 3274 | + padding-right: 40upx; | |
| 3275 | +} | |
| 3276 | + | |
| 3277 | +.padding-lr-xl { | |
| 3278 | + padding-left: 50upx; | |
| 3279 | + padding-right: 50upx; | |
| 3280 | +} | |
| 3281 | + | |
| 3282 | +.padding-tb-xs { | |
| 3283 | + padding-top: 10upx; | |
| 3284 | + padding-bottom: 10upx; | |
| 3285 | +} | |
| 3286 | + | |
| 3287 | +.padding-tb-sm { | |
| 3288 | + padding-top: 20upx; | |
| 3289 | + padding-bottom: 20upx; | |
| 3290 | +} | |
| 3291 | + | |
| 3292 | +.padding-tb { | |
| 3293 | + padding-top: 30upx; | |
| 3294 | + padding-bottom: 30upx; | |
| 3295 | +} | |
| 3296 | + | |
| 3297 | +.padding-tb-lg { | |
| 3298 | + padding-top: 40upx; | |
| 3299 | + padding-bottom: 40upx; | |
| 3300 | +} | |
| 3301 | + | |
| 3302 | +.padding-tb-xl { | |
| 3303 | + padding-top: 50upx; | |
| 3304 | + padding-bottom: 50upx; | |
| 3305 | +} | |
| 3306 | + | |
| 3307 | +/* -- 浮动 -- */ | |
| 3308 | + | |
| 3309 | +.cf::after, | |
| 3310 | +.cf::before { | |
| 3311 | + content: " "; | |
| 3312 | + display: table; | |
| 3313 | +} | |
| 3314 | + | |
| 3315 | +.cf::after { | |
| 3316 | + clear: both; | |
| 3317 | +} | |
| 3318 | + | |
| 3319 | +.fl { | |
| 3320 | + float: left; | |
| 3321 | +} | |
| 3322 | + | |
| 3323 | +.fr { | |
| 3324 | + float: right; | |
| 3325 | +} | |
| 3326 | + | |
| 3327 | +/* ================== | |
| 3328 | + 背景 | |
| 3329 | + ==================== */ | |
| 3330 | + | |
| 3331 | +.line-red::after, | |
| 3332 | +.lines-red::after { | |
| 3333 | + border-color: #e54d42; | |
| 3334 | +} | |
| 3335 | + | |
| 3336 | +.line-orange::after, | |
| 3337 | +.lines-orange::after { | |
| 3338 | + border-color: #f37b1d; | |
| 3339 | +} | |
| 3340 | + | |
| 3341 | +.line-yellow::after, | |
| 3342 | +.lines-yellow::after { | |
| 3343 | + border-color: #fbbd08; | |
| 3344 | +} | |
| 3345 | + | |
| 3346 | +.line-olive::after, | |
| 3347 | +.lines-olive::after { | |
| 3348 | + border-color: #8dc63f; | |
| 3349 | +} | |
| 3350 | + | |
| 3351 | +.line-green::after, | |
| 3352 | +.lines-green::after { | |
| 3353 | + border-color: #39b54a; | |
| 3354 | +} | |
| 3355 | + | |
| 3356 | +.line-cyan::after, | |
| 3357 | +.lines-cyan::after { | |
| 3358 | + border-color: #1cbbb4; | |
| 3359 | +} | |
| 3360 | + | |
| 3361 | +.line-blue::after, | |
| 3362 | +.lines-blue::after { | |
| 3363 | + border-color: #0081ff; | |
| 3364 | +} | |
| 3365 | + | |
| 3366 | +.line-purple::after, | |
| 3367 | +.lines-purple::after { | |
| 3368 | + border-color: #6739b6; | |
| 3369 | +} | |
| 3370 | + | |
| 3371 | +.line-mauve::after, | |
| 3372 | +.lines-mauve::after { | |
| 3373 | + border-color: #9c26b0; | |
| 3374 | +} | |
| 3375 | + | |
| 3376 | +.line-pink::after, | |
| 3377 | +.lines-pink::after { | |
| 3378 | + border-color: #e03997; | |
| 3379 | +} | |
| 3380 | + | |
| 3381 | +.line-brown::after, | |
| 3382 | +.lines-brown::after { | |
| 3383 | + border-color: #a5673f; | |
| 3384 | +} | |
| 3385 | + | |
| 3386 | +.line-grey::after, | |
| 3387 | +.lines-grey::after { | |
| 3388 | + border-color: #8799a3; | |
| 3389 | +} | |
| 3390 | + | |
| 3391 | +.line-gray::after, | |
| 3392 | +.lines-gray::after { | |
| 3393 | + border-color: #aaaaaa; | |
| 3394 | +} | |
| 3395 | + | |
| 3396 | +.line-black::after, | |
| 3397 | +.lines-black::after { | |
| 3398 | + border-color: #333333; | |
| 3399 | +} | |
| 3400 | + | |
| 3401 | +.line-white::after, | |
| 3402 | +.lines-white::after { | |
| 3403 | + border-color: #ffffff; | |
| 3404 | +} | |
| 3405 | + | |
| 3406 | +.bg-red { | |
| 3407 | + background-color: #e54d42; | |
| 3408 | + color: #ffffff; | |
| 3409 | +} | |
| 3410 | + | |
| 3411 | +.bg-orange { | |
| 3412 | + background-color: #f37b1d; | |
| 3413 | + color: #ffffff; | |
| 3414 | +} | |
| 3415 | + | |
| 3416 | +.bg-yellow { | |
| 3417 | + background-color: #fbbd08; | |
| 3418 | + color: #333333; | |
| 3419 | +} | |
| 3420 | + | |
| 3421 | +.bg-olive { | |
| 3422 | + background-color: #8dc63f; | |
| 3423 | + color: #ffffff; | |
| 3424 | +} | |
| 3425 | + | |
| 3426 | +.bg-green { | |
| 3427 | + background-color: #39b54a; | |
| 3428 | + color: #ffffff; | |
| 3429 | +} | |
| 3430 | + | |
| 3431 | +.bg-cyan { | |
| 3432 | + background-color: #1cbbb4; | |
| 3433 | + color: #ffffff; | |
| 3434 | +} | |
| 3435 | + | |
| 3436 | +.bg-blue { | |
| 3437 | + background-color: #0081ff; | |
| 3438 | + color: #ffffff; | |
| 3439 | +} | |
| 3440 | + | |
| 3441 | +.bg-purple { | |
| 3442 | + background-color: #6739b6; | |
| 3443 | + color: #ffffff; | |
| 3444 | +} | |
| 3445 | + | |
| 3446 | +.bg-mauve { | |
| 3447 | + background-color: #9c26b0; | |
| 3448 | + color: #ffffff; | |
| 3449 | +} | |
| 3450 | + | |
| 3451 | +.bg-pink { | |
| 3452 | + background-color: #e03997; | |
| 3453 | + color: #ffffff; | |
| 3454 | +} | |
| 3455 | + | |
| 3456 | +.bg-brown { | |
| 3457 | + background-color: #a5673f; | |
| 3458 | + color: #ffffff; | |
| 3459 | +} | |
| 3460 | + | |
| 3461 | +.bg-grey { | |
| 3462 | + background-color: #8799a3; | |
| 3463 | + color: #ffffff; | |
| 3464 | +} | |
| 3465 | + | |
| 3466 | +.bg-gray { | |
| 3467 | + background-color: #f0f0f0; | |
| 3468 | + color: #333333; | |
| 3469 | +} | |
| 3470 | + | |
| 3471 | +.bg-black { | |
| 3472 | + background-color: #333333; | |
| 3473 | + color: #ffffff; | |
| 3474 | +} | |
| 3475 | + | |
| 3476 | +.bg-white { | |
| 3477 | + background-color: #ffffff; | |
| 3478 | + color: #666666; | |
| 3479 | +} | |
| 3480 | + | |
| 3481 | +.bg-shadeTop { | |
| 3482 | + background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01)); | |
| 3483 | + color: #ffffff; | |
| 3484 | +} | |
| 3485 | + | |
| 3486 | +.bg-shadeBottom { | |
| 3487 | + background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1)); | |
| 3488 | + color: #ffffff; | |
| 3489 | +} | |
| 3490 | + | |
| 3491 | +.bg-red.light { | |
| 3492 | + color: #e54d42; | |
| 3493 | + background-color: #fadbd9; | |
| 3494 | +} | |
| 3495 | + | |
| 3496 | +.bg-orange.light { | |
| 3497 | + color: #f37b1d; | |
| 3498 | + background-color: #fde6d2; | |
| 3499 | +} | |
| 3500 | + | |
| 3501 | +.bg-yellow.light { | |
| 3502 | + color: #fbbd08; | |
| 3503 | + background-color: #fef2ced2; | |
| 3504 | +} | |
| 3505 | + | |
| 3506 | +.bg-olive.light { | |
| 3507 | + color: #8dc63f; | |
| 3508 | + background-color: #e8f4d9; | |
| 3509 | +} | |
| 3510 | + | |
| 3511 | +.bg-green.light { | |
| 3512 | + color: #39b54a; | |
| 3513 | + background-color: #d7f0dbff; | |
| 3514 | +} | |
| 3515 | + | |
| 3516 | +.bg-cyan.light { | |
| 3517 | + color: #1cbbb4; | |
| 3518 | + background-color: #d2f1f0; | |
| 3519 | +} | |
| 3520 | + | |
| 3521 | +.bg-blue.light { | |
| 3522 | + color: #0081ff; | |
| 3523 | + background-color: #cce6ff; | |
| 3524 | +} | |
| 3525 | + | |
| 3526 | +.bg-purple.light { | |
| 3527 | + color: #6739b6; | |
| 3528 | + background-color: #e1d7f0; | |
| 3529 | +} | |
| 3530 | + | |
| 3531 | +.bg-mauve.light { | |
| 3532 | + color: #9c26b0; | |
| 3533 | + background-color: #ebd4ef; | |
| 3534 | +} | |
| 3535 | + | |
| 3536 | +.bg-pink.light { | |
| 3537 | + color: #e03997; | |
| 3538 | + background-color: #f9d7ea; | |
| 3539 | +} | |
| 3540 | + | |
| 3541 | +.bg-brown.light { | |
| 3542 | + color: #a5673f; | |
| 3543 | + background-color: #ede1d9; | |
| 3544 | +} | |
| 3545 | + | |
| 3546 | +.bg-grey.light { | |
| 3547 | + color: #8799a3; | |
| 3548 | + background-color: #e7ebed; | |
| 3549 | +} | |
| 3550 | + | |
| 3551 | +.bg-gradual-red { | |
| 3552 | + background-image: linear-gradient(45deg, #f43f3b, #ec008c); | |
| 3553 | + color: #ffffff; | |
| 3554 | +} | |
| 3555 | + | |
| 3556 | +.bg-gradual-orange { | |
| 3557 | + background-image: linear-gradient(45deg, #ff9700, #ed1c24); | |
| 3558 | + color: #ffffff; | |
| 3559 | +} | |
| 3560 | + | |
| 3561 | +.bg-gradual-green { | |
| 3562 | + background-image: linear-gradient(45deg, #39b54a, #8dc63f); | |
| 3563 | + color: #ffffff; | |
| 3564 | +} | |
| 3565 | + | |
| 3566 | +.bg-gradual-purple { | |
| 3567 | + background-image: linear-gradient(45deg, #9000ff, #5e00ff); | |
| 3568 | + color: #ffffff; | |
| 3569 | +} | |
| 3570 | + | |
| 3571 | +.bg-gradual-pink { | |
| 3572 | + background-image: linear-gradient(45deg, #ec008c, #6739b6); | |
| 3573 | + color: #ffffff; | |
| 3574 | +} | |
| 3575 | + | |
| 3576 | +.bg-gradual-blue { | |
| 3577 | + background-image: linear-gradient(45deg, #0081ff, #1cbbb4); | |
| 3578 | + color: #ffffff; | |
| 3579 | +} | |
| 3580 | + | |
| 3581 | +.shadow[class*="-red"] { | |
| 3582 | + box-shadow: 6upx 6upx 8upx rgba(204, 69, 59, 0.2); | |
| 3583 | +} | |
| 3584 | + | |
| 3585 | +.shadow[class*="-orange"] { | |
| 3586 | + box-shadow: 6upx 6upx 8upx rgba(217, 109, 26, 0.2); | |
| 3587 | +} | |
| 3588 | + | |
| 3589 | +.shadow[class*="-yellow"] { | |
| 3590 | + box-shadow: 6upx 6upx 8upx rgba(224, 170, 7, 0.2); | |
| 3591 | +} | |
| 3592 | + | |
| 3593 | +.shadow[class*="-olive"] { | |
| 3594 | + box-shadow: 6upx 6upx 8upx rgba(124, 173, 55, 0.2); | |
| 3595 | +} | |
| 3596 | + | |
| 3597 | +.shadow[class*="-green"] { | |
| 3598 | + box-shadow: 6upx 6upx 8upx rgba(48, 156, 63, 0.2); | |
| 3599 | +} | |
| 3600 | + | |
| 3601 | +.shadow[class*="-cyan"] { | |
| 3602 | + box-shadow: 6upx 6upx 8upx rgba(28, 187, 180, 0.2); | |
| 3603 | +} | |
| 3604 | + | |
| 3605 | +.shadow[class*="-blue"] { | |
| 3606 | + box-shadow: 6upx 6upx 8upx rgba(0, 102, 204, 0.2); | |
| 3607 | +} | |
| 3608 | + | |
| 3609 | +.shadow[class*="-purple"] { | |
| 3610 | + box-shadow: 6upx 6upx 8upx rgba(88, 48, 156, 0.2); | |
| 3611 | +} | |
| 3612 | + | |
| 3613 | +.shadow[class*="-mauve"] { | |
| 3614 | + box-shadow: 6upx 6upx 8upx rgba(133, 33, 150, 0.2); | |
| 3615 | +} | |
| 3616 | + | |
| 3617 | +.shadow[class*="-pink"] { | |
| 3618 | + box-shadow: 6upx 6upx 8upx rgba(199, 50, 134, 0.2); | |
| 3619 | +} | |
| 3620 | + | |
| 3621 | +.shadow[class*="-brown"] { | |
| 3622 | + box-shadow: 6upx 6upx 8upx rgba(140, 88, 53, 0.2); | |
| 3623 | +} | |
| 3624 | + | |
| 3625 | +.shadow[class*="-grey"] { | |
| 3626 | + box-shadow: 6upx 6upx 8upx rgba(114, 130, 138, 0.2); | |
| 3627 | +} | |
| 3628 | + | |
| 3629 | +.shadow[class*="-gray"] { | |
| 3630 | + box-shadow: 6upx 6upx 8upx rgba(114, 130, 138, 0.2); | |
| 3631 | +} | |
| 3632 | + | |
| 3633 | +.shadow[class*="-black"] { | |
| 3634 | + box-shadow: 6upx 6upx 8upx rgba(26, 26, 26, 0.2); | |
| 3635 | +} | |
| 3636 | + | |
| 3637 | +.shadow[class*="-white"] { | |
| 3638 | + box-shadow: 6upx 6upx 8upx rgba(26, 26, 26, 0.2); | |
| 3639 | +} | |
| 3640 | + | |
| 3641 | +.text-shadow[class*="-red"] { | |
| 3642 | + text-shadow: 6upx 6upx 8upx rgba(204, 69, 59, 0.2); | |
| 3643 | +} | |
| 3644 | + | |
| 3645 | +.text-shadow[class*="-orange"] { | |
| 3646 | + text-shadow: 6upx 6upx 8upx rgba(217, 109, 26, 0.2); | |
| 3647 | +} | |
| 3648 | + | |
| 3649 | +.text-shadow[class*="-yellow"] { | |
| 3650 | + text-shadow: 6upx 6upx 8upx rgba(224, 170, 7, 0.2); | |
| 3651 | +} | |
| 3652 | + | |
| 3653 | +.text-shadow[class*="-olive"] { | |
| 3654 | + text-shadow: 6upx 6upx 8upx rgba(124, 173, 55, 0.2); | |
| 3655 | +} | |
| 3656 | + | |
| 3657 | +.text-shadow[class*="-green"] { | |
| 3658 | + text-shadow: 6upx 6upx 8upx rgba(48, 156, 63, 0.2); | |
| 3659 | +} | |
| 3660 | + | |
| 3661 | +.text-shadow[class*="-cyan"] { | |
| 3662 | + text-shadow: 6upx 6upx 8upx rgba(28, 187, 180, 0.2); | |
| 3663 | +} | |
| 3664 | + | |
| 3665 | +.text-shadow[class*="-blue"] { | |
| 3666 | + text-shadow: 6upx 6upx 8upx rgba(0, 102, 204, 0.2); | |
| 3667 | +} | |
| 3668 | + | |
| 3669 | +.text-shadow[class*="-purple"] { | |
| 3670 | + text-shadow: 6upx 6upx 8upx rgba(88, 48, 156, 0.2); | |
| 3671 | +} | |
| 3672 | + | |
| 3673 | +.text-shadow[class*="-mauve"] { | |
| 3674 | + text-shadow: 6upx 6upx 8upx rgba(133, 33, 150, 0.2); | |
| 3675 | +} | |
| 3676 | + | |
| 3677 | +.text-shadow[class*="-pink"] { | |
| 3678 | + text-shadow: 6upx 6upx 8upx rgba(199, 50, 134, 0.2); | |
| 3679 | +} | |
| 3680 | + | |
| 3681 | +.text-shadow[class*="-brown"] { | |
| 3682 | + text-shadow: 6upx 6upx 8upx rgba(140, 88, 53, 0.2); | |
| 3683 | +} | |
| 3684 | + | |
| 3685 | +.text-shadow[class*="-grey"] { | |
| 3686 | + text-shadow: 6upx 6upx 8upx rgba(114, 130, 138, 0.2); | |
| 3687 | +} | |
| 3688 | + | |
| 3689 | +.text-shadow[class*="-gray"] { | |
| 3690 | + text-shadow: 6upx 6upx 8upx rgba(114, 130, 138, 0.2); | |
| 3691 | +} | |
| 3692 | + | |
| 3693 | +.text-shadow[class*="-black"] { | |
| 3694 | + text-shadow: 6upx 6upx 8upx rgba(26, 26, 26, 0.2); | |
| 3695 | +} | |
| 3696 | + | |
| 3697 | +.bg-img { | |
| 3698 | + background-size: cover; | |
| 3699 | + background-position: center; | |
| 3700 | + background-repeat: no-repeat; | |
| 3701 | +} | |
| 3702 | + | |
| 3703 | +.bg-mask { | |
| 3704 | + background-color: #333333; | |
| 3705 | + position: relative; | |
| 3706 | +} | |
| 3707 | + | |
| 3708 | +.bg-mask::after { | |
| 3709 | + content: ""; | |
| 3710 | + border-radius: inherit; | |
| 3711 | + width: 100%; | |
| 3712 | + height: 100%; | |
| 3713 | + display: block; | |
| 3714 | + background-color: rgba(0, 0, 0, 0.4); | |
| 3715 | + position: absolute; | |
| 3716 | + left: 0; | |
| 3717 | + right: 0; | |
| 3718 | + bottom: 0; | |
| 3719 | + top: 0; | |
| 3720 | +} | |
| 3721 | + | |
| 3722 | +.bg-mask view, | |
| 3723 | +.bg-mask cover-view { | |
| 3724 | + z-index: 5; | |
| 3725 | + position: relative; | |
| 3726 | +} | |
| 3727 | + | |
| 3728 | +.bg-video { | |
| 3729 | + position: relative; | |
| 3730 | +} | |
| 3731 | + | |
| 3732 | +.bg-video video { | |
| 3733 | + display: block; | |
| 3734 | + height: 100%; | |
| 3735 | + width: 100%; | |
| 3736 | + -o-object-fit: cover; | |
| 3737 | + object-fit: cover; | |
| 3738 | + position: absolute; | |
| 3739 | + top: 0; | |
| 3740 | + z-index: 0; | |
| 3741 | + pointer-events: none; | |
| 3742 | +} | |
| 3743 | + | |
| 3744 | +/* ================== | |
| 3745 | + 文本 | |
| 3746 | + ==================== */ | |
| 3747 | + | |
| 3748 | +.text-xs { | |
| 3749 | + font-size: 20upx; | |
| 3750 | +} | |
| 3751 | + | |
| 3752 | +.text-sm { | |
| 3753 | + font-size: 24upx; | |
| 3754 | +} | |
| 3755 | + | |
| 3756 | +.text-df { | |
| 3757 | + font-size: 28upx; | |
| 3758 | +} | |
| 3759 | + | |
| 3760 | +.text-lg { | |
| 3761 | + font-size: 32upx; | |
| 3762 | +} | |
| 3763 | + | |
| 3764 | +.text-xl { | |
| 3765 | + font-size: 36upx; | |
| 3766 | +} | |
| 3767 | + | |
| 3768 | +.text-xxl { | |
| 3769 | + font-size: 44upx; | |
| 3770 | +} | |
| 3771 | + | |
| 3772 | +.text-sl { | |
| 3773 | + font-size: 80upx; | |
| 3774 | +} | |
| 3775 | + | |
| 3776 | +.text-xsl { | |
| 3777 | + font-size: 120upx; | |
| 3778 | +} | |
| 3779 | + | |
| 3780 | +.text-Abc { | |
| 3781 | + text-transform: Capitalize; | |
| 3782 | +} | |
| 3783 | + | |
| 3784 | +.text-ABC { | |
| 3785 | + text-transform: Uppercase; | |
| 3786 | +} | |
| 3787 | + | |
| 3788 | +.text-abc { | |
| 3789 | + text-transform: Lowercase; | |
| 3790 | +} | |
| 3791 | + | |
| 3792 | +.text-price::before { | |
| 3793 | + content: "¥"; | |
| 3794 | + font-size: 80%; | |
| 3795 | + margin-right: 4upx; | |
| 3796 | +} | |
| 3797 | + | |
| 3798 | +.text-cut { | |
| 3799 | + text-overflow: ellipsis; | |
| 3800 | + white-space: nowrap; | |
| 3801 | + overflow: hidden; | |
| 3802 | +} | |
| 3803 | + | |
| 3804 | +.text-bold { | |
| 3805 | + font-weight: bold; | |
| 3806 | +} | |
| 3807 | + | |
| 3808 | +.text-center { | |
| 3809 | + text-align: center; | |
| 3810 | +} | |
| 3811 | + | |
| 3812 | +.text-content { | |
| 3813 | + line-height: 1.6; | |
| 3814 | +} | |
| 3815 | + | |
| 3816 | +.text-left { | |
| 3817 | + text-align: left; | |
| 3818 | +} | |
| 3819 | + | |
| 3820 | +.text-right { | |
| 3821 | + text-align: right; | |
| 3822 | +} | |
| 3823 | + | |
| 3824 | +.text-red, | |
| 3825 | +.line-red, | |
| 3826 | +.lines-red { | |
| 3827 | + color: #e54d42; | |
| 3828 | +} | |
| 3829 | + | |
| 3830 | +.text-orange, | |
| 3831 | +.line-orange, | |
| 3832 | +.lines-orange { | |
| 3833 | + color: #f37b1d; | |
| 3834 | +} | |
| 3835 | + | |
| 3836 | +.text-yellow, | |
| 3837 | +.line-yellow, | |
| 3838 | +.lines-yellow { | |
| 3839 | + color: #fbbd08; | |
| 3840 | +} | |
| 3841 | + | |
| 3842 | +.text-olive, | |
| 3843 | +.line-olive, | |
| 3844 | +.lines-olive { | |
| 3845 | + color: #8dc63f; | |
| 3846 | +} | |
| 3847 | + | |
| 3848 | +.text-green, | |
| 3849 | +.line-green, | |
| 3850 | +.lines-green { | |
| 3851 | + color: #39b54a; | |
| 3852 | +} | |
| 3853 | + | |
| 3854 | +.text-cyan, | |
| 3855 | +.line-cyan, | |
| 3856 | +.lines-cyan { | |
| 3857 | + color: #1cbbb4; | |
| 3858 | +} | |
| 3859 | + | |
| 3860 | +.text-blue, | |
| 3861 | +.line-blue, | |
| 3862 | +.lines-blue { | |
| 3863 | + color: #0081ff; | |
| 3864 | +} | |
| 3865 | + | |
| 3866 | +.text-purple, | |
| 3867 | +.line-purple, | |
| 3868 | +.lines-purple { | |
| 3869 | + color: #6739b6; | |
| 3870 | +} | |
| 3871 | + | |
| 3872 | +.text-mauve, | |
| 3873 | +.line-mauve, | |
| 3874 | +.lines-mauve { | |
| 3875 | + color: #9c26b0; | |
| 3876 | +} | |
| 3877 | + | |
| 3878 | +.text-pink, | |
| 3879 | +.line-pink, | |
| 3880 | +.lines-pink { | |
| 3881 | + color: #e03997; | |
| 3882 | +} | |
| 3883 | + | |
| 3884 | +.text-brown, | |
| 3885 | +.line-brown, | |
| 3886 | +.lines-brown { | |
| 3887 | + color: #a5673f; | |
| 3888 | +} | |
| 3889 | + | |
| 3890 | +.text-grey, | |
| 3891 | +.line-grey, | |
| 3892 | +.lines-grey { | |
| 3893 | + color: #8799a3; | |
| 3894 | +} | |
| 3895 | + | |
| 3896 | +.text-gray, | |
| 3897 | +.line-gray, | |
| 3898 | +.lines-gray { | |
| 3899 | + color: #aaaaaa; | |
| 3900 | +} | |
| 3901 | + | |
| 3902 | +.text-black, | |
| 3903 | +.line-black, | |
| 3904 | +.lines-black { | |
| 3905 | + color: #333333; | |
| 3906 | +} | |
| 3907 | + | |
| 3908 | +.text-white, | |
| 3909 | +.line-white, | |
| 3910 | +.lines-white { | |
| 3911 | + color: #ffffff; | |
| 3912 | +} | ... | ... |
yudao-ui-admin-uniapp/static/scss/global.scss
0 → 100644
| 1 | +.text-center { | |
| 2 | + text-align: center; | |
| 3 | +} | |
| 4 | + | |
| 5 | +.font-13 { | |
| 6 | + font-size: 13px; | |
| 7 | +} | |
| 8 | + | |
| 9 | +.font-12 { | |
| 10 | + font-size: 12px; | |
| 11 | +} | |
| 12 | + | |
| 13 | +.font-11 { | |
| 14 | + font-size: 11px; | |
| 15 | +} | |
| 16 | + | |
| 17 | +.text-grey1 { | |
| 18 | + color: #888; | |
| 19 | +} | |
| 20 | +.text-grey2 { | |
| 21 | + color: #aaa; | |
| 22 | +} | |
| 23 | + | |
| 24 | +.list-cell-arrow::before { | |
| 25 | + content: ' '; | |
| 26 | + height: 10px; | |
| 27 | + width: 10px; | |
| 28 | + border-width: 2px 2px 0 0; | |
| 29 | + border-color: #c0c0c0; | |
| 30 | + border-style: solid; | |
| 31 | + -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0); | |
| 32 | + transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0); | |
| 33 | + position: absolute; | |
| 34 | + top: 50%; | |
| 35 | + margin-top: -6px; | |
| 36 | + right: 30rpx; | |
| 37 | + } | |
| 38 | + | |
| 39 | + .list-cell { | |
| 40 | + position: relative; | |
| 41 | + width: 100%; | |
| 42 | + box-sizing: border-box; | |
| 43 | + background-color: #fff; | |
| 44 | + color: #333; | |
| 45 | + padding: 26rpx 30rpx; | |
| 46 | + } | |
| 47 | + | |
| 48 | + .list-cell:first-child { | |
| 49 | + border-radius: 8rpx 8rpx 0 0; | |
| 50 | + } | |
| 51 | + | |
| 52 | + .list-cell:last-child { | |
| 53 | + border-radius: 0 0 8rpx 8rpx; | |
| 54 | + } | |
| 55 | + | |
| 56 | + .list-cell::after { | |
| 57 | + content: ''; | |
| 58 | + position: absolute; | |
| 59 | + border-bottom: 1px solid #eaeef1; | |
| 60 | + -webkit-transform: scaleY(0.5) translateZ(0); | |
| 61 | + transform: scaleY(0.5) translateZ(0); | |
| 62 | + transform-origin: 0 100%; | |
| 63 | + bottom: 0; | |
| 64 | + right: 0; | |
| 65 | + left: 0; | |
| 66 | + pointer-events: none; | |
| 67 | + } | |
| 68 | + | |
| 69 | + | |
| 70 | + .menu-list { | |
| 71 | + margin: 15px 15px; | |
| 72 | + | |
| 73 | + .menu-item-box { | |
| 74 | + width: 100%; | |
| 75 | + display: flex; | |
| 76 | + align-items: center; | |
| 77 | + | |
| 78 | + .menu-icon { | |
| 79 | + color: #007AFF; | |
| 80 | + font-size: 16px; | |
| 81 | + margin-right: 5px; | |
| 82 | + } | |
| 83 | + | |
| 84 | + .text-right { | |
| 85 | + margin-left: auto; | |
| 86 | + margin-right: 34rpx; | |
| 87 | + color: #999; | |
| 88 | + } | |
| 89 | + } | |
| 90 | + } | ... | ... |
yudao-ui-admin-uniapp/static/scss/index.scss
0 → 100644
yudao-ui-admin-uniapp/store/getters.js
0 → 100644
yudao-ui-admin-uniapp/store/index.js
0 → 100644
yudao-ui-admin-uniapp/store/modules/user.js
0 → 100644
| 1 | +import config from '@/config' | |
| 2 | +import storage from '@/utils/storage' | |
| 3 | +import constant from '@/utils/constant' | |
| 4 | +import { login, logout, getInfo } from '@/api/login' | |
| 5 | +import { setToken, removeToken } from '@/utils/auth' | |
| 6 | + | |
| 7 | +const baseUrl = config.baseUrl | |
| 8 | + | |
| 9 | +const user = { | |
| 10 | + state: { | |
| 11 | + id: 0, // 用户编号 | |
| 12 | + name: storage.get(constant.name), | |
| 13 | + avatar: storage.get(constant.avatar), | |
| 14 | + roles: storage.get(constant.roles), | |
| 15 | + permissions: storage.get(constant.permissions) | |
| 16 | + }, | |
| 17 | + | |
| 18 | + mutations: { | |
| 19 | + SET_ID: (state, id) => { | |
| 20 | + state.id = id | |
| 21 | + }, | |
| 22 | + SET_NAME: (state, name) => { | |
| 23 | + state.name = name | |
| 24 | + storage.set(constant.name, name) | |
| 25 | + }, | |
| 26 | + SET_AVATAR: (state, avatar) => { | |
| 27 | + state.avatar = avatar | |
| 28 | + storage.set(constant.avatar, avatar) | |
| 29 | + }, | |
| 30 | + SET_ROLES: (state, roles) => { | |
| 31 | + state.roles = roles | |
| 32 | + storage.set(constant.roles, roles) | |
| 33 | + }, | |
| 34 | + SET_PERMISSIONS: (state, permissions) => { | |
| 35 | + state.permissions = permissions | |
| 36 | + storage.set(constant.permissions, permissions) | |
| 37 | + } | |
| 38 | + }, | |
| 39 | + | |
| 40 | + actions: { | |
| 41 | + // 登录 | |
| 42 | + Login({ commit }, userInfo) { | |
| 43 | + const username = userInfo.username.trim() | |
| 44 | + const password = userInfo.password | |
| 45 | + const code = userInfo.code | |
| 46 | + const uuid = userInfo.uuid | |
| 47 | + return new Promise((resolve, reject) => { | |
| 48 | + login(username, password, code, uuid).then(res => { | |
| 49 | + res = res.data; | |
| 50 | + // 设置 token | |
| 51 | + setToken(res) | |
| 52 | + resolve() | |
| 53 | + }).catch(error => { | |
| 54 | + reject(error) | |
| 55 | + }) | |
| 56 | + }) | |
| 57 | + }, | |
| 58 | + | |
| 59 | + // 获取用户信息 | |
| 60 | + GetInfo({ commit, state }) { | |
| 61 | + return new Promise((resolve, reject) => { | |
| 62 | + getInfo().then(res => { | |
| 63 | + res = res.data; // 读取 data 数据 | |
| 64 | + const user = res.user | |
| 65 | + const avatar = (user == null || user.avatar === "" || user.avatar == null) ? require("@/static/images/profile.jpg") : user.avatar | |
| 66 | + const nickname = (user == null || user.nickname === "" || user.nickname == null) ? "" : user.nickname | |
| 67 | + if (res.roles && res.roles.length > 0) { | |
| 68 | + commit('SET_ROLES', res.roles) | |
| 69 | + commit('SET_PERMISSIONS', res.permissions) | |
| 70 | + } else { | |
| 71 | + commit('SET_ROLES', ['ROLE_DEFAULT']) | |
| 72 | + } | |
| 73 | + commit('SET_NAME', nickname) | |
| 74 | + commit('SET_AVATAR', avatar) | |
| 75 | + resolve(res) | |
| 76 | + }).catch(error => { | |
| 77 | + reject(error) | |
| 78 | + }) | |
| 79 | + }) | |
| 80 | + }, | |
| 81 | + | |
| 82 | + // 退出系统 | |
| 83 | + LogOut({ commit, state }) { | |
| 84 | + return new Promise((resolve, reject) => { | |
| 85 | + logout(state.token).then(() => { | |
| 86 | + commit('SET_TOKEN', '') | |
| 87 | + commit('SET_ROLES', []) | |
| 88 | + commit('SET_PERMISSIONS', []) | |
| 89 | + removeToken() | |
| 90 | + storage.clean() | |
| 91 | + resolve() | |
| 92 | + }).catch(error => { | |
| 93 | + reject(error) | |
| 94 | + }) | |
| 95 | + }) | |
| 96 | + } | |
| 97 | + } | |
| 98 | +} | |
| 99 | + | |
| 100 | +export default user | ... | ... |
yudao-ui-admin-uniapp/uni.scss
0 → 100644
| 1 | +/** | |
| 2 | + * uni-app内置的常用样式变量 | |
| 3 | + */ | |
| 4 | + | |
| 5 | +/* 行为相关颜色 */ | |
| 6 | +$uni-color-primary: #007aff; | |
| 7 | +$uni-color-success: #4cd964; | |
| 8 | +$uni-color-warning: #f0ad4e; | |
| 9 | +$uni-color-error: #dd524d; | |
| 10 | + | |
| 11 | +/* 文字基本颜色 */ | |
| 12 | +$uni-text-color:#333;//基本色 | |
| 13 | +$uni-text-color-inverse:#fff;//反色 | |
| 14 | +$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息 | |
| 15 | +$uni-text-color-placeholder: #808080; | |
| 16 | +$uni-text-color-disable:#c0c0c0; | |
| 17 | + | |
| 18 | +/* 背景颜色 */ | |
| 19 | +$uni-bg-color:#ffffff; | |
| 20 | +$uni-bg-color-grey:#f8f8f8; | |
| 21 | +$uni-bg-color-hover:#f1f1f1;//点击状态颜色 | |
| 22 | +$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色 | |
| 23 | + | |
| 24 | +/* 边框颜色 */ | |
| 25 | +$uni-border-color:#e5e5e5; | |
| 26 | + | |
| 27 | +/* 尺寸变量 */ | |
| 28 | + | |
| 29 | +/* 文字尺寸 */ | |
| 30 | +$uni-font-size-sm:12px; | |
| 31 | +$uni-font-size-base:14px; | |
| 32 | +$uni-font-size-lg:16px; | |
| 33 | + | |
| 34 | +/* 图片尺寸 */ | |
| 35 | +$uni-img-size-sm:20px; | |
| 36 | +$uni-img-size-base:26px; | |
| 37 | +$uni-img-size-lg:40px; | |
| 38 | + | |
| 39 | +/* Border Radius */ | |
| 40 | +$uni-border-radius-sm: 2px; | |
| 41 | +$uni-border-radius-base: 3px; | |
| 42 | +$uni-border-radius-lg: 6px; | |
| 43 | +$uni-border-radius-circle: 50%; | |
| 44 | + | |
| 45 | +/* 水平间距 */ | |
| 46 | +$uni-spacing-row-sm: 5px; | |
| 47 | +$uni-spacing-row-base: 10px; | |
| 48 | +$uni-spacing-row-lg: 15px; | |
| 49 | + | |
| 50 | +/* 垂直间距 */ | |
| 51 | +$uni-spacing-col-sm: 4px; | |
| 52 | +$uni-spacing-col-base: 8px; | |
| 53 | +$uni-spacing-col-lg: 12px; | |
| 54 | + | |
| 55 | +/* 透明度 */ | |
| 56 | +$uni-opacity-disabled: 0.3; // 组件禁用态的透明度 | |
| 57 | + | |
| 58 | +/* 文章场景相关 */ | |
| 59 | +$uni-color-title: #2C405A; // 文章标题颜色 | |
| 60 | +$uni-font-size-title:20px; | |
| 61 | +$uni-color-subtitle: #555555; // 二级标题颜色 | |
| 62 | +$uni-font-size-subtitle:26px; | |
| 63 | +$uni-color-paragraph: #3F536E; // 文章段落颜色 | |
| 64 | +$uni-font-size-paragraph:15px; | |
| 0 | 65 | \ No newline at end of file | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-badge/changelog.md
0 → 100644
| 1 | +## 1.2.0(2021-11-19) | |
| 2 | +- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |
| 3 | +- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-badge](https://uniapp.dcloud.io/component/uniui/uni-badge) | |
| 4 | +## 1.1.7(2021-11-08) | |
| 5 | +- 优化 升级ui | |
| 6 | +- 修改 size 属性默认值调整为 small | |
| 7 | +- 修改 type 属性,默认值调整为 error,info 替换 default | |
| 8 | +## 1.1.6(2021-09-22) | |
| 9 | +- 修复 在字节小程序上样式不生效的 bug | |
| 10 | +## 1.1.5(2021-07-30) | |
| 11 | +- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |
| 12 | +## 1.1.4(2021-07-29) | |
| 13 | +- 修复 去掉 nvue 不支持css 的 align-self 属性,nvue 下不暂支持 absolute 属性 | |
| 14 | +## 1.1.3(2021-06-24) | |
| 15 | +- 优化 示例项目 | |
| 16 | +## 1.1.1(2021-05-12) | |
| 17 | +- 新增 组件示例地址 | |
| 18 | +## 1.1.0(2021-05-12) | |
| 19 | +- 新增 uni-badge 的 absolute 属性,支持定位 | |
| 20 | +- 新增 uni-badge 的 offset 属性,支持定位偏移 | |
| 21 | +- 新增 uni-badge 的 is-dot 属性,支持仅显示有一个小点 | |
| 22 | +- 新增 uni-badge 的 max-num 属性,支持自定义封顶的数字值,超过 99 显示99+ | |
| 23 | +- 优化 uni-badge 属性 custom-style, 支持以对象形式自定义样式 | |
| 24 | +## 1.0.7(2021-05-07) | |
| 25 | +- 修复 uni-badge 在 App 端,数字小于10时不是圆形的bug | |
| 26 | +- 修复 uni-badge 在父元素不是 flex 布局时,宽度缩小的bug | |
| 27 | +- 新增 uni-badge 属性 custom-style, 支持自定义样式 | |
| 28 | +## 1.0.6(2021-02-04) | |
| 29 | +- 调整为uni_modules目录规范 | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-badge/components/uni-badge/uni-badge.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="uni-badge--x"> | |
| 3 | + <slot /> | |
| 4 | + <text v-if="text" :class="classNames" :style="[badgeWidth, positionStyle, customStyle, dotStyle]" | |
| 5 | + class="uni-badge" @click="onClick()">{{displayValue}}</text> | |
| 6 | + </view> | |
| 7 | +</template> | |
| 8 | + | |
| 9 | +<script> | |
| 10 | + /** | |
| 11 | + * Badge 数字角标 | |
| 12 | + * @description 数字角标一般和其它控件(列表、9宫格等)配合使用,用于进行数量提示,默认为实心灰色背景 | |
| 13 | + * @tutorial https://ext.dcloud.net.cn/plugin?id=21 | |
| 14 | + * @property {String} text 角标内容 | |
| 15 | + * @property {String} size = [normal|small] 角标内容 | |
| 16 | + * @property {String} type = [info|primary|success|warning|error] 颜色类型 | |
| 17 | + * @value info 灰色 | |
| 18 | + * @value primary 蓝色 | |
| 19 | + * @value success 绿色 | |
| 20 | + * @value warning 黄色 | |
| 21 | + * @value error 红色 | |
| 22 | + * @property {String} inverted = [true|false] 是否无需背景颜色 | |
| 23 | + * @property {Number} maxNum 展示封顶的数字值,超过 99 显示 99+ | |
| 24 | + * @property {String} absolute = [rightTop|rightBottom|leftBottom|leftTop] 开启绝对定位, 角标将定位到其包裹的标签的四角上 | |
| 25 | + * @value rightTop 右上 | |
| 26 | + * @value rightBottom 右下 | |
| 27 | + * @value leftTop 左上 | |
| 28 | + * @value leftBottom 左下 | |
| 29 | + * @property {Array[number]} offset 距定位角中心点的偏移量,只有存在 absolute 属性时有效,例如:[-10, -10] 表示向外偏移 10px,[10, 10] 表示向 absolute 指定的内偏移 10px | |
| 30 | + * @property {String} isDot = [true|false] 是否显示为一个小点 | |
| 31 | + * @event {Function} click 点击 Badge 触发事件 | |
| 32 | + * @example <uni-badge text="1"></uni-badge> | |
| 33 | + */ | |
| 34 | + | |
| 35 | + export default { | |
| 36 | + name: 'UniBadge', | |
| 37 | + emits: ['click'], | |
| 38 | + props: { | |
| 39 | + type: { | |
| 40 | + type: String, | |
| 41 | + default: 'error' | |
| 42 | + }, | |
| 43 | + inverted: { | |
| 44 | + type: Boolean, | |
| 45 | + default: false | |
| 46 | + }, | |
| 47 | + isDot: { | |
| 48 | + type: Boolean, | |
| 49 | + default: false | |
| 50 | + }, | |
| 51 | + maxNum: { | |
| 52 | + type: Number, | |
| 53 | + default: 99 | |
| 54 | + }, | |
| 55 | + absolute: { | |
| 56 | + type: String, | |
| 57 | + default: '' | |
| 58 | + }, | |
| 59 | + offset: { | |
| 60 | + type: Array, | |
| 61 | + default () { | |
| 62 | + return [0, 0] | |
| 63 | + } | |
| 64 | + }, | |
| 65 | + text: { | |
| 66 | + type: [String, Number], | |
| 67 | + default: '' | |
| 68 | + }, | |
| 69 | + size: { | |
| 70 | + type: String, | |
| 71 | + default: 'small' | |
| 72 | + }, | |
| 73 | + customStyle: { | |
| 74 | + type: Object, | |
| 75 | + default () { | |
| 76 | + return {} | |
| 77 | + } | |
| 78 | + } | |
| 79 | + }, | |
| 80 | + data() { | |
| 81 | + return {}; | |
| 82 | + }, | |
| 83 | + computed: { | |
| 84 | + width() { | |
| 85 | + return String(this.text).length * 8 + 12 | |
| 86 | + }, | |
| 87 | + classNames() { | |
| 88 | + const { | |
| 89 | + inverted, | |
| 90 | + type, | |
| 91 | + size, | |
| 92 | + absolute | |
| 93 | + } = this | |
| 94 | + return [ | |
| 95 | + inverted ? 'uni-badge--' + type + '-inverted' : '', | |
| 96 | + 'uni-badge--' + type, | |
| 97 | + 'uni-badge--' + size, | |
| 98 | + absolute ? 'uni-badge--absolute' : '' | |
| 99 | + ].join(' ') | |
| 100 | + }, | |
| 101 | + positionStyle() { | |
| 102 | + if (!this.absolute) return {} | |
| 103 | + let w = this.width / 2, | |
| 104 | + h = 10 | |
| 105 | + if (this.isDot) { | |
| 106 | + w = 5 | |
| 107 | + h = 5 | |
| 108 | + } | |
| 109 | + const x = `${- w + this.offset[0]}px` | |
| 110 | + const y = `${- h + this.offset[1]}px` | |
| 111 | + | |
| 112 | + const whiteList = { | |
| 113 | + rightTop: { | |
| 114 | + right: x, | |
| 115 | + top: y | |
| 116 | + }, | |
| 117 | + rightBottom: { | |
| 118 | + right: x, | |
| 119 | + bottom: y | |
| 120 | + }, | |
| 121 | + leftBottom: { | |
| 122 | + left: x, | |
| 123 | + bottom: y | |
| 124 | + }, | |
| 125 | + leftTop: { | |
| 126 | + left: x, | |
| 127 | + top: y | |
| 128 | + } | |
| 129 | + } | |
| 130 | + const match = whiteList[this.absolute] | |
| 131 | + return match ? match : whiteList['rightTop'] | |
| 132 | + }, | |
| 133 | + badgeWidth() { | |
| 134 | + return { | |
| 135 | + width: `${this.width}px` | |
| 136 | + } | |
| 137 | + }, | |
| 138 | + dotStyle() { | |
| 139 | + if (!this.isDot) return {} | |
| 140 | + return { | |
| 141 | + width: '10px', | |
| 142 | + height: '10px', | |
| 143 | + borderRadius: '10px' | |
| 144 | + } | |
| 145 | + }, | |
| 146 | + displayValue() { | |
| 147 | + const { | |
| 148 | + isDot, | |
| 149 | + text, | |
| 150 | + maxNum | |
| 151 | + } = this | |
| 152 | + return isDot ? '' : (Number(text) > maxNum ? `${maxNum}+` : text) | |
| 153 | + } | |
| 154 | + }, | |
| 155 | + methods: { | |
| 156 | + onClick() { | |
| 157 | + this.$emit('click'); | |
| 158 | + } | |
| 159 | + } | |
| 160 | + }; | |
| 161 | +</script> | |
| 162 | + | |
| 163 | +<style lang="scss" > | |
| 164 | + $uni-primary: #2979ff !default; | |
| 165 | + $uni-success: #4cd964 !default; | |
| 166 | + $uni-warning: #f0ad4e !default; | |
| 167 | + $uni-error: #dd524d !default; | |
| 168 | + $uni-info: #909399 !default; | |
| 169 | + | |
| 170 | + | |
| 171 | + $bage-size: 12px; | |
| 172 | + $bage-small: scale(0.8); | |
| 173 | + | |
| 174 | + .uni-badge--x { | |
| 175 | + /* #ifdef APP-NVUE */ | |
| 176 | + // align-self: flex-start; | |
| 177 | + /* #endif */ | |
| 178 | + /* #ifndef APP-NVUE */ | |
| 179 | + display: inline-block; | |
| 180 | + /* #endif */ | |
| 181 | + position: relative; | |
| 182 | + } | |
| 183 | + | |
| 184 | + .uni-badge--absolute { | |
| 185 | + position: absolute; | |
| 186 | + } | |
| 187 | + | |
| 188 | + .uni-badge--small { | |
| 189 | + transform: $bage-small; | |
| 190 | + transform-origin: center center; | |
| 191 | + } | |
| 192 | + | |
| 193 | + .uni-badge { | |
| 194 | + /* #ifndef APP-NVUE */ | |
| 195 | + display: flex; | |
| 196 | + overflow: hidden; | |
| 197 | + box-sizing: border-box; | |
| 198 | + /* #endif */ | |
| 199 | + justify-content: center; | |
| 200 | + flex-direction: row; | |
| 201 | + height: 20px; | |
| 202 | + line-height: 18px; | |
| 203 | + color: #fff; | |
| 204 | + border-radius: 100px; | |
| 205 | + background-color: $uni-info; | |
| 206 | + background-color: transparent; | |
| 207 | + border: 1px solid #fff; | |
| 208 | + text-align: center; | |
| 209 | + font-family: 'Helvetica Neue', Helvetica, sans-serif; | |
| 210 | + font-size: $bage-size; | |
| 211 | + /* #ifdef H5 */ | |
| 212 | + z-index: 999; | |
| 213 | + cursor: pointer; | |
| 214 | + /* #endif */ | |
| 215 | + | |
| 216 | + &--info { | |
| 217 | + color: #fff; | |
| 218 | + background-color: $uni-info; | |
| 219 | + } | |
| 220 | + | |
| 221 | + &--primary { | |
| 222 | + background-color: $uni-primary; | |
| 223 | + } | |
| 224 | + | |
| 225 | + &--success { | |
| 226 | + background-color: $uni-success; | |
| 227 | + } | |
| 228 | + | |
| 229 | + &--warning { | |
| 230 | + background-color: $uni-warning; | |
| 231 | + } | |
| 232 | + | |
| 233 | + &--error { | |
| 234 | + background-color: $uni-error; | |
| 235 | + } | |
| 236 | + | |
| 237 | + &--inverted { | |
| 238 | + padding: 0 5px 0 0; | |
| 239 | + color: $uni-info; | |
| 240 | + } | |
| 241 | + | |
| 242 | + &--info-inverted { | |
| 243 | + color: $uni-info; | |
| 244 | + background-color: transparent; | |
| 245 | + } | |
| 246 | + | |
| 247 | + &--primary-inverted { | |
| 248 | + color: $uni-primary; | |
| 249 | + background-color: transparent; | |
| 250 | + } | |
| 251 | + | |
| 252 | + &--success-inverted { | |
| 253 | + color: $uni-success; | |
| 254 | + background-color: transparent; | |
| 255 | + } | |
| 256 | + | |
| 257 | + &--warning-inverted { | |
| 258 | + color: $uni-warning; | |
| 259 | + background-color: transparent; | |
| 260 | + } | |
| 261 | + | |
| 262 | + &--error-inverted { | |
| 263 | + color: $uni-error; | |
| 264 | + background-color: transparent; | |
| 265 | + } | |
| 266 | + | |
| 267 | + } | |
| 268 | +</style> | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-badge/package.json
0 → 100644
| 1 | +{ | |
| 2 | + "id": "uni-badge", | |
| 3 | + "displayName": "uni-badge 数字角标", | |
| 4 | + "version": "1.2.0", | |
| 5 | + "description": "数字角标(徽章)组件,在元素周围展示消息提醒,一般用于列表、九宫格、按钮等地方。", | |
| 6 | + "keywords": [ | |
| 7 | + "", | |
| 8 | + "badge", | |
| 9 | + "uni-ui", | |
| 10 | + "uniui", | |
| 11 | + "数字角标", | |
| 12 | + "徽章" | |
| 13 | +], | |
| 14 | + "repository": "https://github.com/dcloudio/uni-ui", | |
| 15 | + "engines": { | |
| 16 | + "HBuilderX": "" | |
| 17 | + }, | |
| 18 | + "directories": { | |
| 19 | + "example": "../../temps/example_temps" | |
| 20 | + }, | |
| 21 | + "dcloudext": { | |
| 22 | + "category": [ | |
| 23 | + "前端组件", | |
| 24 | + "通用组件" | |
| 25 | + ], | |
| 26 | + "sale": { | |
| 27 | + "regular": { | |
| 28 | + "price": "0.00" | |
| 29 | + }, | |
| 30 | + "sourcecode": { | |
| 31 | + "price": "0.00" | |
| 32 | + } | |
| 33 | + }, | |
| 34 | + "contact": { | |
| 35 | + "qq": "" | |
| 36 | + }, | |
| 37 | + "declaration": { | |
| 38 | + "ads": "无", | |
| 39 | + "data": "无", | |
| 40 | + "permissions": "无" | |
| 41 | + }, | |
| 42 | + "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" | |
| 43 | + }, | |
| 44 | + "uni_modules": { | |
| 45 | + "dependencies": ["uni-scss"], | |
| 46 | + "encrypt": [], | |
| 47 | + "platforms": { | |
| 48 | + "cloud": { | |
| 49 | + "tcb": "y", | |
| 50 | + "aliyun": "y" | |
| 51 | + }, | |
| 52 | + "client": { | |
| 53 | + "App": { | |
| 54 | + "app-vue": "y", | |
| 55 | + "app-nvue": "y" | |
| 56 | + }, | |
| 57 | + "H5-mobile": { | |
| 58 | + "Safari": "y", | |
| 59 | + "Android Browser": "y", | |
| 60 | + "微信浏览器(Android)": "y", | |
| 61 | + "QQ浏览器(Android)": "y" | |
| 62 | + }, | |
| 63 | + "H5-pc": { | |
| 64 | + "Chrome": "y", | |
| 65 | + "IE": "y", | |
| 66 | + "Edge": "y", | |
| 67 | + "Firefox": "y", | |
| 68 | + "Safari": "y" | |
| 69 | + }, | |
| 70 | + "小程序": { | |
| 71 | + "微信": "y", | |
| 72 | + "阿里": "y", | |
| 73 | + "百度": "y", | |
| 74 | + "字节跳动": "y", | |
| 75 | + "QQ": "y" | |
| 76 | + }, | |
| 77 | + "快应用": { | |
| 78 | + "华为": "y", | |
| 79 | + "联盟": "y" | |
| 80 | + }, | |
| 81 | + "Vue": { | |
| 82 | + "vue2": "y", | |
| 83 | + "vue3": "y" | |
| 84 | + } | |
| 85 | + } | |
| 86 | + } | |
| 87 | + } | |
| 88 | +} | |
| 0 | 89 | \ No newline at end of file | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-badge/readme.md
0 → 100644
yudao-ui-admin-uniapp/uni_modules/uni-breadcrumb/changelog.md
0 → 100644
yudao-ui-admin-uniapp/uni_modules/uni-breadcrumb/components/uni-breadcrumb-item/uni-breadcrumb-item.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="uni-breadcrumb-item"> | |
| 3 | + <view :class="{ | |
| 4 | + 'uni-breadcrumb-item--slot': true, | |
| 5 | + 'uni-breadcrumb-item--slot-link': to && currentPage !== to | |
| 6 | + }" @click="navTo"> | |
| 7 | + <slot /> | |
| 8 | + </view> | |
| 9 | + <i v-if="separatorClass" class="uni-breadcrumb-item--separator" :class="separatorClass" /> | |
| 10 | + <text v-else class="uni-breadcrumb-item--separator">{{ separator }}</text> | |
| 11 | + </view> | |
| 12 | +</template> | |
| 13 | +<script> | |
| 14 | + /** | |
| 15 | + * BreadcrumbItem 面包屑导航子组件 | |
| 16 | + * @property {String/Object} to 路由跳转页面路径/对象 | |
| 17 | + * @property {Boolean} replace 在使用 to 进行路由跳转时,启用 replace 将不会向 history 添加新记录(仅 h5 支持) | |
| 18 | + */ | |
| 19 | + export default { | |
| 20 | + data() { | |
| 21 | + return { | |
| 22 | + currentPage: "" | |
| 23 | + } | |
| 24 | + }, | |
| 25 | + options: { | |
| 26 | + virtualHost: true | |
| 27 | + }, | |
| 28 | + props: { | |
| 29 | + to: { | |
| 30 | + type: String, | |
| 31 | + default: '' | |
| 32 | + }, | |
| 33 | + replace:{ | |
| 34 | + type: Boolean, | |
| 35 | + default: false | |
| 36 | + } | |
| 37 | + }, | |
| 38 | + inject: { | |
| 39 | + uniBreadcrumb: { | |
| 40 | + from: "uniBreadcrumb", | |
| 41 | + default: null | |
| 42 | + } | |
| 43 | + }, | |
| 44 | + created(){ | |
| 45 | + const pages = getCurrentPages() | |
| 46 | + const page = pages[pages.length-1] | |
| 47 | + | |
| 48 | + if(page){ | |
| 49 | + this.currentPage = `/${page.route}` | |
| 50 | + } | |
| 51 | + }, | |
| 52 | + computed: { | |
| 53 | + separator() { | |
| 54 | + return this.uniBreadcrumb.separator | |
| 55 | + }, | |
| 56 | + separatorClass() { | |
| 57 | + return this.uniBreadcrumb.separatorClass | |
| 58 | + } | |
| 59 | + }, | |
| 60 | + methods: { | |
| 61 | + navTo() { | |
| 62 | + const { to } = this | |
| 63 | + | |
| 64 | + if (!to || this.currentPage === to){ | |
| 65 | + return | |
| 66 | + } | |
| 67 | + | |
| 68 | + if(this.replace){ | |
| 69 | + uni.redirectTo({ | |
| 70 | + url:to | |
| 71 | + }) | |
| 72 | + }else{ | |
| 73 | + uni.navigateTo({ | |
| 74 | + url:to | |
| 75 | + }) | |
| 76 | + } | |
| 77 | + } | |
| 78 | + } | |
| 79 | + } | |
| 80 | +</script> | |
| 81 | +<style lang="scss"> | |
| 82 | + $uni-primary: #2979ff !default; | |
| 83 | + $uni-base-color: #6a6a6a !default; | |
| 84 | + $uni-main-color: #3a3a3a !default; | |
| 85 | + .uni-breadcrumb-item { | |
| 86 | + display: flex; | |
| 87 | + align-items: center; | |
| 88 | + white-space: nowrap; | |
| 89 | + font-size: 14px; | |
| 90 | + | |
| 91 | + &--slot { | |
| 92 | + color: $uni-base-color; | |
| 93 | + padding: 0 10px; | |
| 94 | + | |
| 95 | + &-link { | |
| 96 | + color: $uni-main-color; | |
| 97 | + font-weight: bold; | |
| 98 | + /* #ifndef APP-NVUE */ | |
| 99 | + cursor: pointer; | |
| 100 | + /* #endif */ | |
| 101 | + | |
| 102 | + &:hover { | |
| 103 | + color: $uni-primary; | |
| 104 | + } | |
| 105 | + } | |
| 106 | + } | |
| 107 | + | |
| 108 | + &--separator { | |
| 109 | + font-size: 12px; | |
| 110 | + color: $uni-base-color; | |
| 111 | + } | |
| 112 | + | |
| 113 | + &:first-child &--slot { | |
| 114 | + padding-left: 0; | |
| 115 | + } | |
| 116 | + | |
| 117 | + &:last-child &--separator { | |
| 118 | + display: none; | |
| 119 | + } | |
| 120 | + } | |
| 121 | +</style> | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-breadcrumb/components/uni-breadcrumb/uni-breadcrumb.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="uni-breadcrumb"> | |
| 3 | + <slot /> | |
| 4 | + </view> | |
| 5 | +</template> | |
| 6 | +<script> | |
| 7 | + /** | |
| 8 | + * Breadcrumb 面包屑导航父组件 | |
| 9 | + * @description 显示当前页面的路径,快速返回之前的任意页面 | |
| 10 | + * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx | |
| 11 | + * @property {String} separator 分隔符,默认为斜杠'/' | |
| 12 | + * @property {String} separatorClass 图标分隔符 class | |
| 13 | + */ | |
| 14 | + export default { | |
| 15 | + options: { | |
| 16 | + virtualHost: true | |
| 17 | + }, | |
| 18 | + props: { | |
| 19 | + separator: { | |
| 20 | + type: String, | |
| 21 | + default: '/' | |
| 22 | + }, | |
| 23 | + separatorClass: { | |
| 24 | + type: String, | |
| 25 | + default: '' | |
| 26 | + } | |
| 27 | + }, | |
| 28 | + | |
| 29 | + provide() { | |
| 30 | + return { | |
| 31 | + uniBreadcrumb: this | |
| 32 | + } | |
| 33 | + } | |
| 34 | + | |
| 35 | + } | |
| 36 | +</script> | |
| 37 | +<style lang="scss"> | |
| 38 | + .uni-breadcrumb { | |
| 39 | + display: flex; | |
| 40 | + } | |
| 41 | +</style> | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-breadcrumb/package.json
0 → 100644
| 1 | +{ | |
| 2 | + "id": "uni-breadcrumb", | |
| 3 | + "displayName": "uni-breadcrumb 面包屑", | |
| 4 | + "version": "0.1.2", | |
| 5 | + "description": "Breadcrumb 面包屑", | |
| 6 | + "keywords": [ | |
| 7 | + "uni-breadcrumb", | |
| 8 | + "breadcrumb", | |
| 9 | + "uni-ui", | |
| 10 | + "面包屑导航", | |
| 11 | + "面包屑" | |
| 12 | +], | |
| 13 | + "repository": "", | |
| 14 | + "engines": { | |
| 15 | + "HBuilderX": "^3.1.0" | |
| 16 | + }, | |
| 17 | + "directories": { | |
| 18 | + "example": "../../temps/example_temps" | |
| 19 | + }, | |
| 20 | + "dcloudext": { | |
| 21 | + "category": [ | |
| 22 | + "前端组件", | |
| 23 | + "通用组件" | |
| 24 | + ], | |
| 25 | + "sale": { | |
| 26 | + "regular": { | |
| 27 | + "price": "0.00" | |
| 28 | + }, | |
| 29 | + "sourcecode": { | |
| 30 | + "price": "0.00" | |
| 31 | + } | |
| 32 | + }, | |
| 33 | + "contact": { | |
| 34 | + "qq": "" | |
| 35 | + }, | |
| 36 | + "declaration": { | |
| 37 | + "ads": "无", | |
| 38 | + "data": "无", | |
| 39 | + "permissions": "无" | |
| 40 | + }, | |
| 41 | + "npmurl": "" | |
| 42 | + }, | |
| 43 | + "uni_modules": { | |
| 44 | + "dependencies": [], | |
| 45 | + "encrypt": [], | |
| 46 | + "platforms": { | |
| 47 | + "cloud": { | |
| 48 | + "tcb": "y", | |
| 49 | + "aliyun": "y" | |
| 50 | + }, | |
| 51 | + "client": { | |
| 52 | + "Vue": { | |
| 53 | + "vue2": "y", | |
| 54 | + "vue3": "y" | |
| 55 | + }, | |
| 56 | + "App": { | |
| 57 | + "app-vue": "y", | |
| 58 | + "app-nvue": "n" | |
| 59 | + }, | |
| 60 | + "H5-mobile": { | |
| 61 | + "Safari": "y", | |
| 62 | + "Android Browser": "y", | |
| 63 | + "微信浏览器(Android)": "y", | |
| 64 | + "QQ浏览器(Android)": "y" | |
| 65 | + }, | |
| 66 | + "H5-pc": { | |
| 67 | + "Chrome": "y", | |
| 68 | + "IE": "y", | |
| 69 | + "Edge": "y", | |
| 70 | + "Firefox": "y", | |
| 71 | + "Safari": "y" | |
| 72 | + }, | |
| 73 | + "小程序": { | |
| 74 | + "微信": "y", | |
| 75 | + "阿里": "u", | |
| 76 | + "百度": "u", | |
| 77 | + "字节跳动": "u", | |
| 78 | + "QQ": "u", | |
| 79 | + "京东": "u" | |
| 80 | + }, | |
| 81 | + "快应用": { | |
| 82 | + "华为": "u", | |
| 83 | + "联盟": "u" | |
| 84 | + } | |
| 85 | + } | |
| 86 | + } | |
| 87 | + } | |
| 88 | +} | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-breadcrumb/readme.md
0 → 100644
| 1 | + | |
| 2 | +## breadcrumb 面包屑导航 | |
| 3 | +> **组件名:uni-breadcrumb** | |
| 4 | +> 代码块: `ubreadcrumb` | |
| 5 | + | |
| 6 | +显示当前页面的路径,快速返回之前的任意页面。 | |
| 7 | + | |
| 8 | +### 安装方式 | |
| 9 | + | |
| 10 | +本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`。 | |
| 11 | + | |
| 12 | +如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55) | |
| 13 | + | |
| 14 | +### 基本用法 | |
| 15 | + | |
| 16 | +在 ``template`` 中使用组件 | |
| 17 | + | |
| 18 | +```html | |
| 19 | +<uni-breadcrumb separator="/"> | |
| 20 | + <uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">{{route.name}}</uni-breadcrumb-item> | |
| 21 | +</uni-breadcrumb> | |
| 22 | +``` | |
| 23 | + | |
| 24 | +```js | |
| 25 | +export default { | |
| 26 | + name: "uni-stat-breadcrumb", | |
| 27 | + data() { | |
| 28 | + return { | |
| 29 | + routes: [{ | |
| 30 | + to: '/A', | |
| 31 | + name: 'A页面' | |
| 32 | + }, { | |
| 33 | + to: '/B', | |
| 34 | + name: 'B页面' | |
| 35 | + }, { | |
| 36 | + to: '/C', | |
| 37 | + name: 'C页面' | |
| 38 | + }] | |
| 39 | + }; | |
| 40 | + } | |
| 41 | + } | |
| 42 | +``` | |
| 43 | + | |
| 44 | + | |
| 45 | +## API | |
| 46 | + | |
| 47 | +### Breadcrumb Props | |
| 48 | + | |
| 49 | +|属性名 |类型 |默认值 |说明 | | |
| 50 | +|:-: |:-: |:-: |:-: | | |
| 51 | +|separator |String |斜杠'/' |分隔符 | | |
| 52 | +|separatorClass |String | |图标分隔符 class | | |
| 53 | + | |
| 54 | +### Breadcrumb Item Props | |
| 55 | + | |
| 56 | +|属性名 |类型 |默认值 |说明 | | |
| 57 | +|:-: |:-: |:-: |:-: | | |
| 58 | +|to |String | |路由跳转页面路径 | | |
| 59 | +|replace|Boolean | |在使用 to 进行路由跳转时,启用 replace 将不会向 history 添加新记录(仅 h5 支持) | | |
| 60 | + | |
| 61 | + | |
| 62 | + | |
| 63 | + | |
| 64 | +## 组件示例 | |
| 65 | + | |
| 66 | +点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/breadcrumb/breadcrumb](https://hellouniapp.dcloud.net.cn/pages/extUI/breadcrumb/breadcrumb) | |
| 0 | 67 | \ No newline at end of file | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-calendar/changelog.md
0 → 100644
| 1 | +## 1.4.5(2022-02-25) | |
| 2 | +- 修复 条件编译 nvue 不支持的 css 样式 | |
| 3 | +## 1.4.4(2022-02-25) | |
| 4 | +- 修复 条件编译 nvue 不支持的 css 样式 | |
| 5 | +## 1.4.3(2021-09-22) | |
| 6 | +- 修复 startDate、 endDate 属性失效的 bug | |
| 7 | +## 1.4.2(2021-08-24) | |
| 8 | +- 新增 支持国际化 | |
| 9 | +## 1.4.1(2021-08-05) | |
| 10 | +- 修复 弹出层被 tabbar 遮盖 bug | |
| 11 | +## 1.4.0(2021-07-30) | |
| 12 | +- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |
| 13 | +## 1.3.16(2021-05-12) | |
| 14 | +- 新增 组件示例地址 | |
| 15 | +## 1.3.15(2021-02-04) | |
| 16 | +- 调整为uni_modules目录规范 | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-calendar/components/uni-calendar/calendar.js
0 → 100644
| 1 | +/** | |
| 2 | +* @1900-2100区间内的公历、农历互转 | |
| 3 | +* @charset UTF-8 | |
| 4 | +* @github https://github.com/jjonline/calendar.js | |
| 5 | +* @Author Jea杨(JJonline@JJonline.Cn) | |
| 6 | +* @Time 2014-7-21 | |
| 7 | +* @Time 2016-8-13 Fixed 2033hex、Attribution Annals | |
| 8 | +* @Time 2016-9-25 Fixed lunar LeapMonth Param Bug | |
| 9 | +* @Time 2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year | |
| 10 | +* @Version 1.0.3 | |
| 11 | +* @公历转农历:calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0] | |
| 12 | +* @农历转公历:calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0] | |
| 13 | +*/ | |
| 14 | +/* eslint-disable */ | |
| 15 | +var calendar = { | |
| 16 | + | |
| 17 | + /** | |
| 18 | + * 农历1900-2100的润大小信息表 | |
| 19 | + * @Array Of Property | |
| 20 | + * @return Hex | |
| 21 | + */ | |
| 22 | + lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909 | |
| 23 | + 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919 | |
| 24 | + 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929 | |
| 25 | + 0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939 | |
| 26 | + 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949 | |
| 27 | + 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959 | |
| 28 | + 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969 | |
| 29 | + 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979 | |
| 30 | + 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989 | |
| 31 | + 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999 | |
| 32 | + 0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009 | |
| 33 | + 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019 | |
| 34 | + 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029 | |
| 35 | + 0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039 | |
| 36 | + 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049 | |
| 37 | + /** Add By JJonline@JJonline.Cn**/ | |
| 38 | + 0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059 | |
| 39 | + 0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069 | |
| 40 | + 0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079 | |
| 41 | + 0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089 | |
| 42 | + 0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099 | |
| 43 | + 0x0d520], // 2100 | |
| 44 | + | |
| 45 | + /** | |
| 46 | + * 公历每个月份的天数普通表 | |
| 47 | + * @Array Of Property | |
| 48 | + * @return Number | |
| 49 | + */ | |
| 50 | + solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], | |
| 51 | + | |
| 52 | + /** | |
| 53 | + * 天干地支之天干速查表 | |
| 54 | + * @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"] | |
| 55 | + * @return Cn string | |
| 56 | + */ | |
| 57 | + Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'], | |
| 58 | + | |
| 59 | + /** | |
| 60 | + * 天干地支之地支速查表 | |
| 61 | + * @Array Of Property | |
| 62 | + * @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"] | |
| 63 | + * @return Cn string | |
| 64 | + */ | |
| 65 | + Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'], | |
| 66 | + | |
| 67 | + /** | |
| 68 | + * 天干地支之地支速查表<=>生肖 | |
| 69 | + * @Array Of Property | |
| 70 | + * @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"] | |
| 71 | + * @return Cn string | |
| 72 | + */ | |
| 73 | + Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'], | |
| 74 | + | |
| 75 | + /** | |
| 76 | + * 24节气速查表 | |
| 77 | + * @Array Of Property | |
| 78 | + * @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"] | |
| 79 | + * @return Cn string | |
| 80 | + */ | |
| 81 | + solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'], | |
| 82 | + | |
| 83 | + /** | |
| 84 | + * 1900-2100各年的24节气日期速查表 | |
| 85 | + * @Array Of Property | |
| 86 | + * @return 0x string For splice | |
| 87 | + */ | |
| 88 | + sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', | |
| 89 | + '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', | |
| 90 | + '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', | |
| 91 | + '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', | |
| 92 | + 'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f', | |
| 93 | + '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa', | |
| 94 | + '97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', | |
| 95 | + '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f', | |
| 96 | + '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', | |
| 97 | + '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', | |
| 98 | + '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', | |
| 99 | + '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', | |
| 100 | + '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', | |
| 101 | + '97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', | |
| 102 | + '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722', | |
| 103 | + '9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f', | |
| 104 | + '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e', | |
| 105 | + '97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', | |
| 106 | + '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722', | |
| 107 | + '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', | |
| 108 | + '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', | |
| 109 | + '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', | |
| 110 | + '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722', | |
| 111 | + '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', | |
| 112 | + '97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', | |
| 113 | + '97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', | |
| 114 | + '9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', | |
| 115 | + '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e', | |
| 116 | + '97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', | |
| 117 | + '9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722', | |
| 118 | + '7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', | |
| 119 | + '7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', | |
| 120 | + '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', | |
| 121 | + '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', | |
| 122 | + '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', | |
| 123 | + '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa', | |
| 124 | + '97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', | |
| 125 | + '9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', | |
| 126 | + '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721', | |
| 127 | + '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2', | |
| 128 | + '977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722', | |
| 129 | + '7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', | |
| 130 | + '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd', | |
| 131 | + '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', | |
| 132 | + '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', | |
| 133 | + '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', | |
| 134 | + '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', | |
| 135 | + '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', | |
| 136 | + '977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', | |
| 137 | + '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721', | |
| 138 | + '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5', | |
| 139 | + '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722', | |
| 140 | + '7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', | |
| 141 | + '7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd', | |
| 142 | + '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', | |
| 143 | + '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', | |
| 144 | + '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721', | |
| 145 | + '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd', | |
| 146 | + '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35', | |
| 147 | + '7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', | |
| 148 | + '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721', | |
| 149 | + '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5', | |
| 150 | + '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35', | |
| 151 | + '665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', | |
| 152 | + '7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd', | |
| 153 | + '7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35', | |
| 154 | + '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'], | |
| 155 | + | |
| 156 | + /** | |
| 157 | + * 数字转中文速查表 | |
| 158 | + * @Array Of Property | |
| 159 | + * @trans ['日','一','二','三','四','五','六','七','八','九','十'] | |
| 160 | + * @return Cn string | |
| 161 | + */ | |
| 162 | + nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'], | |
| 163 | + | |
| 164 | + /** | |
| 165 | + * 日期转农历称呼速查表 | |
| 166 | + * @Array Of Property | |
| 167 | + * @trans ['初','十','廿','卅'] | |
| 168 | + * @return Cn string | |
| 169 | + */ | |
| 170 | + nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'], | |
| 171 | + | |
| 172 | + /** | |
| 173 | + * 月份转农历称呼速查表 | |
| 174 | + * @Array Of Property | |
| 175 | + * @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊'] | |
| 176 | + * @return Cn string | |
| 177 | + */ | |
| 178 | + nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'], | |
| 179 | + | |
| 180 | + /** | |
| 181 | + * 返回农历y年一整年的总天数 | |
| 182 | + * @param lunar Year | |
| 183 | + * @return Number | |
| 184 | + * @eg:var count = calendar.lYearDays(1987) ;//count=387 | |
| 185 | + */ | |
| 186 | + lYearDays: function (y) { | |
| 187 | + var i; var sum = 348 | |
| 188 | + for (i = 0x8000; i > 0x8; i >>= 1) { sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 } | |
| 189 | + return (sum + this.leapDays(y)) | |
| 190 | + }, | |
| 191 | + | |
| 192 | + /** | |
| 193 | + * 返回农历y年闰月是哪个月;若y年没有闰月 则返回0 | |
| 194 | + * @param lunar Year | |
| 195 | + * @return Number (0-12) | |
| 196 | + * @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6 | |
| 197 | + */ | |
| 198 | + leapMonth: function (y) { // 闰字编码 \u95f0 | |
| 199 | + return (this.lunarInfo[y - 1900] & 0xf) | |
| 200 | + }, | |
| 201 | + | |
| 202 | + /** | |
| 203 | + * 返回农历y年闰月的天数 若该年没有闰月则返回0 | |
| 204 | + * @param lunar Year | |
| 205 | + * @return Number (0、29、30) | |
| 206 | + * @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29 | |
| 207 | + */ | |
| 208 | + leapDays: function (y) { | |
| 209 | + if (this.leapMonth(y)) { | |
| 210 | + return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29) | |
| 211 | + } | |
| 212 | + return (0) | |
| 213 | + }, | |
| 214 | + | |
| 215 | + /** | |
| 216 | + * 返回农历y年m月(非闰月)的总天数,计算m为闰月时的天数请使用leapDays方法 | |
| 217 | + * @param lunar Year | |
| 218 | + * @return Number (-1、29、30) | |
| 219 | + * @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29 | |
| 220 | + */ | |
| 221 | + monthDays: function (y, m) { | |
| 222 | + if (m > 12 || m < 1) { return -1 }// 月份参数从1至12,参数错误返回-1 | |
| 223 | + return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29) | |
| 224 | + }, | |
| 225 | + | |
| 226 | + /** | |
| 227 | + * 返回公历(!)y年m月的天数 | |
| 228 | + * @param solar Year | |
| 229 | + * @return Number (-1、28、29、30、31) | |
| 230 | + * @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30 | |
| 231 | + */ | |
| 232 | + solarDays: function (y, m) { | |
| 233 | + if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1 | |
| 234 | + var ms = m - 1 | |
| 235 | + if (ms == 1) { // 2月份的闰平规律测算后确认返回28或29 | |
| 236 | + return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28) | |
| 237 | + } else { | |
| 238 | + return (this.solarMonth[ms]) | |
| 239 | + } | |
| 240 | + }, | |
| 241 | + | |
| 242 | + /** | |
| 243 | + * 农历年份转换为干支纪年 | |
| 244 | + * @param lYear 农历年的年份数 | |
| 245 | + * @return Cn string | |
| 246 | + */ | |
| 247 | + toGanZhiYear: function (lYear) { | |
| 248 | + var ganKey = (lYear - 3) % 10 | |
| 249 | + var zhiKey = (lYear - 3) % 12 | |
| 250 | + if (ganKey == 0) ganKey = 10// 如果余数为0则为最后一个天干 | |
| 251 | + if (zhiKey == 0) zhiKey = 12// 如果余数为0则为最后一个地支 | |
| 252 | + return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1] | |
| 253 | + }, | |
| 254 | + | |
| 255 | + /** | |
| 256 | + * 公历月、日判断所属星座 | |
| 257 | + * @param cMonth [description] | |
| 258 | + * @param cDay [description] | |
| 259 | + * @return Cn string | |
| 260 | + */ | |
| 261 | + toAstro: function (cMonth, cDay) { | |
| 262 | + var s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf' | |
| 263 | + var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22] | |
| 264 | + return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7'// 座 | |
| 265 | + }, | |
| 266 | + | |
| 267 | + /** | |
| 268 | + * 传入offset偏移量返回干支 | |
| 269 | + * @param offset 相对甲子的偏移量 | |
| 270 | + * @return Cn string | |
| 271 | + */ | |
| 272 | + toGanZhi: function (offset) { | |
| 273 | + return this.Gan[offset % 10] + this.Zhi[offset % 12] | |
| 274 | + }, | |
| 275 | + | |
| 276 | + /** | |
| 277 | + * 传入公历(!)y年获得该年第n个节气的公历日期 | |
| 278 | + * @param y公历年(1900-2100);n二十四节气中的第几个节气(1~24);从n=1(小寒)算起 | |
| 279 | + * @return day Number | |
| 280 | + * @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春 | |
| 281 | + */ | |
| 282 | + getTerm: function (y, n) { | |
| 283 | + if (y < 1900 || y > 2100) { return -1 } | |
| 284 | + if (n < 1 || n > 24) { return -1 } | |
| 285 | + var _table = this.sTermInfo[y - 1900] | |
| 286 | + var _info = [ | |
| 287 | + parseInt('0x' + _table.substr(0, 5)).toString(), | |
| 288 | + parseInt('0x' + _table.substr(5, 5)).toString(), | |
| 289 | + parseInt('0x' + _table.substr(10, 5)).toString(), | |
| 290 | + parseInt('0x' + _table.substr(15, 5)).toString(), | |
| 291 | + parseInt('0x' + _table.substr(20, 5)).toString(), | |
| 292 | + parseInt('0x' + _table.substr(25, 5)).toString() | |
| 293 | + ] | |
| 294 | + var _calday = [ | |
| 295 | + _info[0].substr(0, 1), | |
| 296 | + _info[0].substr(1, 2), | |
| 297 | + _info[0].substr(3, 1), | |
| 298 | + _info[0].substr(4, 2), | |
| 299 | + | |
| 300 | + _info[1].substr(0, 1), | |
| 301 | + _info[1].substr(1, 2), | |
| 302 | + _info[1].substr(3, 1), | |
| 303 | + _info[1].substr(4, 2), | |
| 304 | + | |
| 305 | + _info[2].substr(0, 1), | |
| 306 | + _info[2].substr(1, 2), | |
| 307 | + _info[2].substr(3, 1), | |
| 308 | + _info[2].substr(4, 2), | |
| 309 | + | |
| 310 | + _info[3].substr(0, 1), | |
| 311 | + _info[3].substr(1, 2), | |
| 312 | + _info[3].substr(3, 1), | |
| 313 | + _info[3].substr(4, 2), | |
| 314 | + | |
| 315 | + _info[4].substr(0, 1), | |
| 316 | + _info[4].substr(1, 2), | |
| 317 | + _info[4].substr(3, 1), | |
| 318 | + _info[4].substr(4, 2), | |
| 319 | + | |
| 320 | + _info[5].substr(0, 1), | |
| 321 | + _info[5].substr(1, 2), | |
| 322 | + _info[5].substr(3, 1), | |
| 323 | + _info[5].substr(4, 2) | |
| 324 | + ] | |
| 325 | + return parseInt(_calday[n - 1]) | |
| 326 | + }, | |
| 327 | + | |
| 328 | + /** | |
| 329 | + * 传入农历数字月份返回汉语通俗表示法 | |
| 330 | + * @param lunar month | |
| 331 | + * @return Cn string | |
| 332 | + * @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月' | |
| 333 | + */ | |
| 334 | + toChinaMonth: function (m) { // 月 => \u6708 | |
| 335 | + if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1 | |
| 336 | + var s = this.nStr3[m - 1] | |
| 337 | + s += '\u6708'// 加上月字 | |
| 338 | + return s | |
| 339 | + }, | |
| 340 | + | |
| 341 | + /** | |
| 342 | + * 传入农历日期数字返回汉字表示法 | |
| 343 | + * @param lunar day | |
| 344 | + * @return Cn string | |
| 345 | + * @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一' | |
| 346 | + */ | |
| 347 | + toChinaDay: function (d) { // 日 => \u65e5 | |
| 348 | + var s | |
| 349 | + switch (d) { | |
| 350 | + case 10: | |
| 351 | + s = '\u521d\u5341'; break | |
| 352 | + case 20: | |
| 353 | + s = '\u4e8c\u5341'; break | |
| 354 | + break | |
| 355 | + case 30: | |
| 356 | + s = '\u4e09\u5341'; break | |
| 357 | + break | |
| 358 | + default : | |
| 359 | + s = this.nStr2[Math.floor(d / 10)] | |
| 360 | + s += this.nStr1[d % 10] | |
| 361 | + } | |
| 362 | + return (s) | |
| 363 | + }, | |
| 364 | + | |
| 365 | + /** | |
| 366 | + * 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春” | |
| 367 | + * @param y year | |
| 368 | + * @return Cn string | |
| 369 | + * @eg:var animal = calendar.getAnimal(1987) ;//animal='兔' | |
| 370 | + */ | |
| 371 | + getAnimal: function (y) { | |
| 372 | + return this.Animals[(y - 4) % 12] | |
| 373 | + }, | |
| 374 | + | |
| 375 | + /** | |
| 376 | + * 传入阳历年月日获得详细的公历、农历object信息 <=>JSON | |
| 377 | + * @param y solar year | |
| 378 | + * @param m solar month | |
| 379 | + * @param d solar day | |
| 380 | + * @return JSON object | |
| 381 | + * @eg:console.log(calendar.solar2lunar(1987,11,01)); | |
| 382 | + */ | |
| 383 | + solar2lunar: function (y, m, d) { // 参数区间1900.1.31~2100.12.31 | |
| 384 | + // 年份限定、上限 | |
| 385 | + if (y < 1900 || y > 2100) { | |
| 386 | + return -1// undefined转换为数字变为NaN | |
| 387 | + } | |
| 388 | + // 公历传参最下限 | |
| 389 | + if (y == 1900 && m == 1 && d < 31) { | |
| 390 | + return -1 | |
| 391 | + } | |
| 392 | + // 未传参 获得当天 | |
| 393 | + if (!y) { | |
| 394 | + var objDate = new Date() | |
| 395 | + } else { | |
| 396 | + var objDate = new Date(y, parseInt(m) - 1, d) | |
| 397 | + } | |
| 398 | + var i; var leap = 0; var temp = 0 | |
| 399 | + // 修正ymd参数 | |
| 400 | + var y = objDate.getFullYear() | |
| 401 | + var m = objDate.getMonth() + 1 | |
| 402 | + var d = objDate.getDate() | |
| 403 | + var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000 | |
| 404 | + for (i = 1900; i < 2101 && offset > 0; i++) { | |
| 405 | + temp = this.lYearDays(i) | |
| 406 | + offset -= temp | |
| 407 | + } | |
| 408 | + if (offset < 0) { | |
| 409 | + offset += temp; i-- | |
| 410 | + } | |
| 411 | + | |
| 412 | + // 是否今天 | |
| 413 | + var isTodayObj = new Date() | |
| 414 | + var isToday = false | |
| 415 | + if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) { | |
| 416 | + isToday = true | |
| 417 | + } | |
| 418 | + // 星期几 | |
| 419 | + var nWeek = objDate.getDay() | |
| 420 | + var cWeek = this.nStr1[nWeek] | |
| 421 | + // 数字表示周几顺应天朝周一开始的惯例 | |
| 422 | + if (nWeek == 0) { | |
| 423 | + nWeek = 7 | |
| 424 | + } | |
| 425 | + // 农历年 | |
| 426 | + var year = i | |
| 427 | + var leap = this.leapMonth(i) // 闰哪个月 | |
| 428 | + var isLeap = false | |
| 429 | + | |
| 430 | + // 效验闰月 | |
| 431 | + for (i = 1; i < 13 && offset > 0; i++) { | |
| 432 | + // 闰月 | |
| 433 | + if (leap > 0 && i == (leap + 1) && isLeap == false) { | |
| 434 | + --i | |
| 435 | + isLeap = true; temp = this.leapDays(year) // 计算农历闰月天数 | |
| 436 | + } else { | |
| 437 | + temp = this.monthDays(year, i)// 计算农历普通月天数 | |
| 438 | + } | |
| 439 | + // 解除闰月 | |
| 440 | + if (isLeap == true && i == (leap + 1)) { isLeap = false } | |
| 441 | + offset -= temp | |
| 442 | + } | |
| 443 | + // 闰月导致数组下标重叠取反 | |
| 444 | + if (offset == 0 && leap > 0 && i == leap + 1) { | |
| 445 | + if (isLeap) { | |
| 446 | + isLeap = false | |
| 447 | + } else { | |
| 448 | + isLeap = true; --i | |
| 449 | + } | |
| 450 | + } | |
| 451 | + if (offset < 0) { | |
| 452 | + offset += temp; --i | |
| 453 | + } | |
| 454 | + // 农历月 | |
| 455 | + var month = i | |
| 456 | + // 农历日 | |
| 457 | + var day = offset + 1 | |
| 458 | + // 天干地支处理 | |
| 459 | + var sm = m - 1 | |
| 460 | + var gzY = this.toGanZhiYear(year) | |
| 461 | + | |
| 462 | + // 当月的两个节气 | |
| 463 | + // bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year` | |
| 464 | + var firstNode = this.getTerm(y, (m * 2 - 1))// 返回当月「节」为几日开始 | |
| 465 | + var secondNode = this.getTerm(y, (m * 2))// 返回当月「节」为几日开始 | |
| 466 | + | |
| 467 | + // 依据12节气修正干支月 | |
| 468 | + var gzM = this.toGanZhi((y - 1900) * 12 + m + 11) | |
| 469 | + if (d >= firstNode) { | |
| 470 | + gzM = this.toGanZhi((y - 1900) * 12 + m + 12) | |
| 471 | + } | |
| 472 | + | |
| 473 | + // 传入的日期的节气与否 | |
| 474 | + var isTerm = false | |
| 475 | + var Term = null | |
| 476 | + if (firstNode == d) { | |
| 477 | + isTerm = true | |
| 478 | + Term = this.solarTerm[m * 2 - 2] | |
| 479 | + } | |
| 480 | + if (secondNode == d) { | |
| 481 | + isTerm = true | |
| 482 | + Term = this.solarTerm[m * 2 - 1] | |
| 483 | + } | |
| 484 | + // 日柱 当月一日与 1900/1/1 相差天数 | |
| 485 | + var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10 | |
| 486 | + var gzD = this.toGanZhi(dayCyclical + d - 1) | |
| 487 | + // 该日期所属的星座 | |
| 488 | + var astro = this.toAstro(m, d) | |
| 489 | + | |
| 490 | + return { 'lYear': year, 'lMonth': month, 'lDay': day, 'Animal': this.getAnimal(year), 'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), 'IDayCn': this.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': '\u661f\u671f' + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro } | |
| 491 | + }, | |
| 492 | + | |
| 493 | + /** | |
| 494 | + * 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON | |
| 495 | + * @param y lunar year | |
| 496 | + * @param m lunar month | |
| 497 | + * @param d lunar day | |
| 498 | + * @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可] | |
| 499 | + * @return JSON object | |
| 500 | + * @eg:console.log(calendar.lunar2solar(1987,9,10)); | |
| 501 | + */ | |
| 502 | + lunar2solar: function (y, m, d, isLeapMonth) { // 参数区间1900.1.31~2100.12.1 | |
| 503 | + var isLeapMonth = !!isLeapMonth | |
| 504 | + var leapOffset = 0 | |
| 505 | + var leapMonth = this.leapMonth(y) | |
| 506 | + var leapDay = this.leapDays(y) | |
| 507 | + if (isLeapMonth && (leapMonth != m)) { return -1 }// 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同 | |
| 508 | + if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// 超出了最大极限值 | |
| 509 | + var day = this.monthDays(y, m) | |
| 510 | + var _day = day | |
| 511 | + // bugFix 2016-9-25 | |
| 512 | + // if month is leap, _day use leapDays method | |
| 513 | + if (isLeapMonth) { | |
| 514 | + _day = this.leapDays(y, m) | |
| 515 | + } | |
| 516 | + if (y < 1900 || y > 2100 || d > _day) { return -1 }// 参数合法性效验 | |
| 517 | + | |
| 518 | + // 计算农历的时间差 | |
| 519 | + var offset = 0 | |
| 520 | + for (var i = 1900; i < y; i++) { | |
| 521 | + offset += this.lYearDays(i) | |
| 522 | + } | |
| 523 | + var leap = 0; var isAdd = false | |
| 524 | + for (var i = 1; i < m; i++) { | |
| 525 | + leap = this.leapMonth(y) | |
| 526 | + if (!isAdd) { // 处理闰月 | |
| 527 | + if (leap <= i && leap > 0) { | |
| 528 | + offset += this.leapDays(y); isAdd = true | |
| 529 | + } | |
| 530 | + } | |
| 531 | + offset += this.monthDays(y, i) | |
| 532 | + } | |
| 533 | + // 转换闰月农历 需补充该年闰月的前一个月的时差 | |
| 534 | + if (isLeapMonth) { offset += day } | |
| 535 | + // 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点) | |
| 536 | + var stmap = Date.UTC(1900, 1, 30, 0, 0, 0) | |
| 537 | + var calObj = new Date((offset + d - 31) * 86400000 + stmap) | |
| 538 | + var cY = calObj.getUTCFullYear() | |
| 539 | + var cM = calObj.getUTCMonth() + 1 | |
| 540 | + var cD = calObj.getUTCDate() | |
| 541 | + | |
| 542 | + return this.solar2lunar(cY, cM, cD) | |
| 543 | + } | |
| 544 | +} | |
| 545 | + | |
| 546 | +export default calendar | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-calendar/components/uni-calendar/i18n/en.json
0 → 100644
| 1 | +{ | |
| 2 | + "uni-calender.ok": "ok", | |
| 3 | + "uni-calender.cancel": "cancel", | |
| 4 | + "uni-calender.today": "today", | |
| 5 | + "uni-calender.MON": "MON", | |
| 6 | + "uni-calender.TUE": "TUE", | |
| 7 | + "uni-calender.WED": "WED", | |
| 8 | + "uni-calender.THU": "THU", | |
| 9 | + "uni-calender.FRI": "FRI", | |
| 10 | + "uni-calender.SAT": "SAT", | |
| 11 | + "uni-calender.SUN": "SUN" | |
| 12 | +} | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-calendar/components/uni-calendar/i18n/index.js
0 → 100644
yudao-ui-admin-uniapp/uni_modules/uni-calendar/components/uni-calendar/i18n/zh-Hans.json
0 → 100644
| 1 | +{ | |
| 2 | + "uni-calender.ok": "确定", | |
| 3 | + "uni-calender.cancel": "取消", | |
| 4 | + "uni-calender.today": "今日", | |
| 5 | + "uni-calender.SUN": "日", | |
| 6 | + "uni-calender.MON": "一", | |
| 7 | + "uni-calender.TUE": "二", | |
| 8 | + "uni-calender.WED": "三", | |
| 9 | + "uni-calender.THU": "四", | |
| 10 | + "uni-calender.FRI": "五", | |
| 11 | + "uni-calender.SAT": "六" | |
| 12 | +} | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-calendar/components/uni-calendar/i18n/zh-Hant.json
0 → 100644
| 1 | +{ | |
| 2 | + "uni-calender.ok": "確定", | |
| 3 | + "uni-calender.cancel": "取消", | |
| 4 | + "uni-calender.today": "今日", | |
| 5 | + "uni-calender.SUN": "日", | |
| 6 | + "uni-calender.MON": "一", | |
| 7 | + "uni-calender.TUE": "二", | |
| 8 | + "uni-calender.WED": "三", | |
| 9 | + "uni-calender.THU": "四", | |
| 10 | + "uni-calender.FRI": "五", | |
| 11 | + "uni-calender.SAT": "六" | |
| 12 | +} | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-calendar/components/uni-calendar/uni-calendar-item.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="uni-calendar-item__weeks-box" :class="{ | |
| 3 | + 'uni-calendar-item--disable':weeks.disable, | |
| 4 | + 'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay, | |
| 5 | + 'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay) , | |
| 6 | + 'uni-calendar-item--before-checked':weeks.beforeMultiple, | |
| 7 | + 'uni-calendar-item--multiple': weeks.multiple, | |
| 8 | + 'uni-calendar-item--after-checked':weeks.afterMultiple, | |
| 9 | + }" | |
| 10 | + @click="choiceDate(weeks)"> | |
| 11 | + <view class="uni-calendar-item__weeks-box-item"> | |
| 12 | + <text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text> | |
| 13 | + <text class="uni-calendar-item__weeks-box-text" :class="{ | |
| 14 | + 'uni-calendar-item--isDay-text': weeks.isDay, | |
| 15 | + 'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay, | |
| 16 | + 'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay, | |
| 17 | + 'uni-calendar-item--before-checked':weeks.beforeMultiple, | |
| 18 | + 'uni-calendar-item--multiple': weeks.multiple, | |
| 19 | + 'uni-calendar-item--after-checked':weeks.afterMultiple, | |
| 20 | + 'uni-calendar-item--disable':weeks.disable, | |
| 21 | + }">{{weeks.date}}</text> | |
| 22 | + <text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{ | |
| 23 | + 'uni-calendar-item--isDay-text':weeks.isDay, | |
| 24 | + 'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay, | |
| 25 | + 'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay, | |
| 26 | + 'uni-calendar-item--before-checked':weeks.beforeMultiple, | |
| 27 | + 'uni-calendar-item--multiple': weeks.multiple, | |
| 28 | + 'uni-calendar-item--after-checked':weeks.afterMultiple, | |
| 29 | + }">{{todayText}}</text> | |
| 30 | + <text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{ | |
| 31 | + 'uni-calendar-item--isDay-text':weeks.isDay, | |
| 32 | + 'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay, | |
| 33 | + 'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay, | |
| 34 | + 'uni-calendar-item--before-checked':weeks.beforeMultiple, | |
| 35 | + 'uni-calendar-item--multiple': weeks.multiple, | |
| 36 | + 'uni-calendar-item--after-checked':weeks.afterMultiple, | |
| 37 | + 'uni-calendar-item--disable':weeks.disable, | |
| 38 | + }">{{weeks.isDay ? todayText : (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text> | |
| 39 | + <text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{ | |
| 40 | + 'uni-calendar-item--extra':weeks.extraInfo.info, | |
| 41 | + 'uni-calendar-item--isDay-text':weeks.isDay, | |
| 42 | + 'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay, | |
| 43 | + 'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay, | |
| 44 | + 'uni-calendar-item--before-checked':weeks.beforeMultiple, | |
| 45 | + 'uni-calendar-item--multiple': weeks.multiple, | |
| 46 | + 'uni-calendar-item--after-checked':weeks.afterMultiple, | |
| 47 | + 'uni-calendar-item--disable':weeks.disable, | |
| 48 | + }">{{weeks.extraInfo.info}}</text> | |
| 49 | + </view> | |
| 50 | + </view> | |
| 51 | +</template> | |
| 52 | + | |
| 53 | +<script> | |
| 54 | + import { | |
| 55 | + initVueI18n | |
| 56 | + } from '@dcloudio/uni-i18n' | |
| 57 | + import messages from './i18n/index.js' | |
| 58 | + const { t } = initVueI18n(messages) | |
| 59 | + export default { | |
| 60 | + emits:['change'], | |
| 61 | + props: { | |
| 62 | + weeks: { | |
| 63 | + type: Object, | |
| 64 | + default () { | |
| 65 | + return {} | |
| 66 | + } | |
| 67 | + }, | |
| 68 | + calendar: { | |
| 69 | + type: Object, | |
| 70 | + default: () => { | |
| 71 | + return {} | |
| 72 | + } | |
| 73 | + }, | |
| 74 | + selected: { | |
| 75 | + type: Array, | |
| 76 | + default: () => { | |
| 77 | + return [] | |
| 78 | + } | |
| 79 | + }, | |
| 80 | + lunar: { | |
| 81 | + type: Boolean, | |
| 82 | + default: false | |
| 83 | + } | |
| 84 | + }, | |
| 85 | + computed: { | |
| 86 | + todayText() { | |
| 87 | + return t("uni-calender.today") | |
| 88 | + }, | |
| 89 | + }, | |
| 90 | + methods: { | |
| 91 | + choiceDate(weeks) { | |
| 92 | + this.$emit('change', weeks) | |
| 93 | + } | |
| 94 | + } | |
| 95 | + } | |
| 96 | +</script> | |
| 97 | + | |
| 98 | +<style lang="scss" scoped> | |
| 99 | + $uni-font-size-base:14px; | |
| 100 | + $uni-text-color:#333; | |
| 101 | + $uni-font-size-sm:12px; | |
| 102 | + $uni-color-error: #e43d33; | |
| 103 | + $uni-opacity-disabled: 0.3; | |
| 104 | + $uni-text-color-disable:#c0c0c0; | |
| 105 | + $uni-color-primary: #2979ff; | |
| 106 | + .uni-calendar-item__weeks-box { | |
| 107 | + flex: 1; | |
| 108 | + /* #ifndef APP-NVUE */ | |
| 109 | + display: flex; | |
| 110 | + /* #endif */ | |
| 111 | + flex-direction: column; | |
| 112 | + justify-content: center; | |
| 113 | + align-items: center; | |
| 114 | + } | |
| 115 | + | |
| 116 | + .uni-calendar-item__weeks-box-text { | |
| 117 | + font-size: $uni-font-size-base; | |
| 118 | + color: $uni-text-color; | |
| 119 | + } | |
| 120 | + | |
| 121 | + .uni-calendar-item__weeks-lunar-text { | |
| 122 | + font-size: $uni-font-size-sm; | |
| 123 | + color: $uni-text-color; | |
| 124 | + } | |
| 125 | + | |
| 126 | + .uni-calendar-item__weeks-box-item { | |
| 127 | + position: relative; | |
| 128 | + /* #ifndef APP-NVUE */ | |
| 129 | + display: flex; | |
| 130 | + /* #endif */ | |
| 131 | + flex-direction: column; | |
| 132 | + justify-content: center; | |
| 133 | + align-items: center; | |
| 134 | + width: 100rpx; | |
| 135 | + height: 100rpx; | |
| 136 | + } | |
| 137 | + | |
| 138 | + .uni-calendar-item__weeks-box-circle { | |
| 139 | + position: absolute; | |
| 140 | + top: 5px; | |
| 141 | + right: 5px; | |
| 142 | + width: 8px; | |
| 143 | + height: 8px; | |
| 144 | + border-radius: 8px; | |
| 145 | + background-color: $uni-color-error; | |
| 146 | + | |
| 147 | + } | |
| 148 | + | |
| 149 | + .uni-calendar-item--disable { | |
| 150 | + background-color: rgba(249, 249, 249, $uni-opacity-disabled); | |
| 151 | + color: $uni-text-color-disable; | |
| 152 | + } | |
| 153 | + | |
| 154 | + .uni-calendar-item--isDay-text { | |
| 155 | + color: $uni-color-primary; | |
| 156 | + } | |
| 157 | + | |
| 158 | + .uni-calendar-item--isDay { | |
| 159 | + background-color: $uni-color-primary; | |
| 160 | + opacity: 0.8; | |
| 161 | + color: #fff; | |
| 162 | + } | |
| 163 | + | |
| 164 | + .uni-calendar-item--extra { | |
| 165 | + color: $uni-color-error; | |
| 166 | + opacity: 0.8; | |
| 167 | + } | |
| 168 | + | |
| 169 | + .uni-calendar-item--checked { | |
| 170 | + background-color: $uni-color-primary; | |
| 171 | + color: #fff; | |
| 172 | + opacity: 0.8; | |
| 173 | + } | |
| 174 | + | |
| 175 | + .uni-calendar-item--multiple { | |
| 176 | + background-color: $uni-color-primary; | |
| 177 | + color: #fff; | |
| 178 | + opacity: 0.8; | |
| 179 | + } | |
| 180 | + .uni-calendar-item--before-checked { | |
| 181 | + background-color: #ff5a5f; | |
| 182 | + color: #fff; | |
| 183 | + } | |
| 184 | + .uni-calendar-item--after-checked { | |
| 185 | + background-color: #ff5a5f; | |
| 186 | + color: #fff; | |
| 187 | + } | |
| 188 | +</style> | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="uni-calendar"> | |
| 3 | + <view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" @click="clean"></view> | |
| 4 | + <view v-if="insert || show" class="uni-calendar__content" :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}"> | |
| 5 | + <view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top"> | |
| 6 | + <view class="uni-calendar__header-btn-box" @click="close"> | |
| 7 | + <text class="uni-calendar__header-text uni-calendar--fixed-width">{{cancelText}}</text> | |
| 8 | + </view> | |
| 9 | + <view class="uni-calendar__header-btn-box" @click="confirm"> | |
| 10 | + <text class="uni-calendar__header-text uni-calendar--fixed-width">{{okText}}</text> | |
| 11 | + </view> | |
| 12 | + </view> | |
| 13 | + <view class="uni-calendar__header"> | |
| 14 | + <view class="uni-calendar__header-btn-box" @click.stop="pre"> | |
| 15 | + <view class="uni-calendar__header-btn uni-calendar--left"></view> | |
| 16 | + </view> | |
| 17 | + <picker mode="date" :value="date" fields="month" @change="bindDateChange"> | |
| 18 | + <text class="uni-calendar__header-text">{{ (nowDate.year||'') +' / '+( nowDate.month||'')}}</text> | |
| 19 | + </picker> | |
| 20 | + <view class="uni-calendar__header-btn-box" @click.stop="next"> | |
| 21 | + <view class="uni-calendar__header-btn uni-calendar--right"></view> | |
| 22 | + </view> | |
| 23 | + <text class="uni-calendar__backtoday" @click="backtoday">{{todayText}}</text> | |
| 24 | + | |
| 25 | + </view> | |
| 26 | + <view class="uni-calendar__box"> | |
| 27 | + <view v-if="showMonth" class="uni-calendar__box-bg"> | |
| 28 | + <text class="uni-calendar__box-bg-text">{{nowDate.month}}</text> | |
| 29 | + </view> | |
| 30 | + <view class="uni-calendar__weeks"> | |
| 31 | + <view class="uni-calendar__weeks-day"> | |
| 32 | + <text class="uni-calendar__weeks-day-text">{{SUNText}}</text> | |
| 33 | + </view> | |
| 34 | + <view class="uni-calendar__weeks-day"> | |
| 35 | + <text class="uni-calendar__weeks-day-text">{{monText}}</text> | |
| 36 | + </view> | |
| 37 | + <view class="uni-calendar__weeks-day"> | |
| 38 | + <text class="uni-calendar__weeks-day-text">{{TUEText}}</text> | |
| 39 | + </view> | |
| 40 | + <view class="uni-calendar__weeks-day"> | |
| 41 | + <text class="uni-calendar__weeks-day-text">{{WEDText}}</text> | |
| 42 | + </view> | |
| 43 | + <view class="uni-calendar__weeks-day"> | |
| 44 | + <text class="uni-calendar__weeks-day-text">{{THUText}}</text> | |
| 45 | + </view> | |
| 46 | + <view class="uni-calendar__weeks-day"> | |
| 47 | + <text class="uni-calendar__weeks-day-text">{{FRIText}}</text> | |
| 48 | + </view> | |
| 49 | + <view class="uni-calendar__weeks-day"> | |
| 50 | + <text class="uni-calendar__weeks-day-text">{{SATText}}</text> | |
| 51 | + </view> | |
| 52 | + </view> | |
| 53 | + <view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex"> | |
| 54 | + <view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex"> | |
| 55 | + <calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate"></calendar-item> | |
| 56 | + </view> | |
| 57 | + </view> | |
| 58 | + </view> | |
| 59 | + </view> | |
| 60 | + </view> | |
| 61 | +</template> | |
| 62 | + | |
| 63 | +<script> | |
| 64 | + import Calendar from './util.js'; | |
| 65 | + import calendarItem from './uni-calendar-item.vue' | |
| 66 | + import { | |
| 67 | + initVueI18n | |
| 68 | + } from '@dcloudio/uni-i18n' | |
| 69 | + import messages from './i18n/index.js' | |
| 70 | + const { t } = initVueI18n(messages) | |
| 71 | + /** | |
| 72 | + * Calendar 日历 | |
| 73 | + * @description 日历组件可以查看日期,选择任意范围内的日期,打点操作。常用场景如:酒店日期预订、火车机票选择购买日期、上下班打卡等 | |
| 74 | + * @tutorial https://ext.dcloud.net.cn/plugin?id=56 | |
| 75 | + * @property {String} date 自定义当前时间,默认为今天 | |
| 76 | + * @property {Boolean} lunar 显示农历 | |
| 77 | + * @property {String} startDate 日期选择范围-开始日期 | |
| 78 | + * @property {String} endDate 日期选择范围-结束日期 | |
| 79 | + * @property {Boolean} range 范围选择 | |
| 80 | + * @property {Boolean} insert = [true|false] 插入模式,默认为false | |
| 81 | + * @value true 弹窗模式 | |
| 82 | + * @value false 插入模式 | |
| 83 | + * @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容 | |
| 84 | + * @property {Array} selected 打点,期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}] | |
| 85 | + * @property {Boolean} showMonth 是否选择月份为背景 | |
| 86 | + * @event {Function} change 日期改变,`insert :ture` 时生效 | |
| 87 | + * @event {Function} confirm 确认选择`insert :false` 时生效 | |
| 88 | + * @event {Function} monthSwitch 切换月份时触发 | |
| 89 | + * @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" /> | |
| 90 | + */ | |
| 91 | + export default { | |
| 92 | + components: { | |
| 93 | + calendarItem | |
| 94 | + }, | |
| 95 | + emits:['close','confirm','change','monthSwitch'], | |
| 96 | + props: { | |
| 97 | + date: { | |
| 98 | + type: String, | |
| 99 | + default: '' | |
| 100 | + }, | |
| 101 | + selected: { | |
| 102 | + type: Array, | |
| 103 | + default () { | |
| 104 | + return [] | |
| 105 | + } | |
| 106 | + }, | |
| 107 | + lunar: { | |
| 108 | + type: Boolean, | |
| 109 | + default: false | |
| 110 | + }, | |
| 111 | + startDate: { | |
| 112 | + type: String, | |
| 113 | + default: '' | |
| 114 | + }, | |
| 115 | + endDate: { | |
| 116 | + type: String, | |
| 117 | + default: '' | |
| 118 | + }, | |
| 119 | + range: { | |
| 120 | + type: Boolean, | |
| 121 | + default: false | |
| 122 | + }, | |
| 123 | + insert: { | |
| 124 | + type: Boolean, | |
| 125 | + default: true | |
| 126 | + }, | |
| 127 | + showMonth: { | |
| 128 | + type: Boolean, | |
| 129 | + default: true | |
| 130 | + }, | |
| 131 | + clearDate: { | |
| 132 | + type: Boolean, | |
| 133 | + default: true | |
| 134 | + } | |
| 135 | + }, | |
| 136 | + data() { | |
| 137 | + return { | |
| 138 | + show: false, | |
| 139 | + weeks: [], | |
| 140 | + calendar: {}, | |
| 141 | + nowDate: '', | |
| 142 | + aniMaskShow: false | |
| 143 | + } | |
| 144 | + }, | |
| 145 | + computed:{ | |
| 146 | + /** | |
| 147 | + * for i18n | |
| 148 | + */ | |
| 149 | + | |
| 150 | + okText() { | |
| 151 | + return t("uni-calender.ok") | |
| 152 | + }, | |
| 153 | + cancelText() { | |
| 154 | + return t("uni-calender.cancel") | |
| 155 | + }, | |
| 156 | + todayText() { | |
| 157 | + return t("uni-calender.today") | |
| 158 | + }, | |
| 159 | + monText() { | |
| 160 | + return t("uni-calender.MON") | |
| 161 | + }, | |
| 162 | + TUEText() { | |
| 163 | + return t("uni-calender.TUE") | |
| 164 | + }, | |
| 165 | + WEDText() { | |
| 166 | + return t("uni-calender.WED") | |
| 167 | + }, | |
| 168 | + THUText() { | |
| 169 | + return t("uni-calender.THU") | |
| 170 | + }, | |
| 171 | + FRIText() { | |
| 172 | + return t("uni-calender.FRI") | |
| 173 | + }, | |
| 174 | + SATText() { | |
| 175 | + return t("uni-calender.SAT") | |
| 176 | + }, | |
| 177 | + SUNText() { | |
| 178 | + return t("uni-calender.SUN") | |
| 179 | + }, | |
| 180 | + }, | |
| 181 | + watch: { | |
| 182 | + date(newVal) { | |
| 183 | + // this.cale.setDate(newVal) | |
| 184 | + this.init(newVal) | |
| 185 | + }, | |
| 186 | + startDate(val){ | |
| 187 | + this.cale.resetSatrtDate(val) | |
| 188 | + this.cale.setDate(this.nowDate.fullDate) | |
| 189 | + this.weeks = this.cale.weeks | |
| 190 | + }, | |
| 191 | + endDate(val){ | |
| 192 | + this.cale.resetEndDate(val) | |
| 193 | + this.cale.setDate(this.nowDate.fullDate) | |
| 194 | + this.weeks = this.cale.weeks | |
| 195 | + }, | |
| 196 | + selected(newVal) { | |
| 197 | + this.cale.setSelectInfo(this.nowDate.fullDate, newVal) | |
| 198 | + this.weeks = this.cale.weeks | |
| 199 | + } | |
| 200 | + }, | |
| 201 | + created() { | |
| 202 | + // 获取日历方法实例 | |
| 203 | + this.cale = new Calendar({ | |
| 204 | + // date: new Date(), | |
| 205 | + selected: this.selected, | |
| 206 | + startDate: this.startDate, | |
| 207 | + endDate: this.endDate, | |
| 208 | + range: this.range, | |
| 209 | + }) | |
| 210 | + // 选中某一天 | |
| 211 | + // this.cale.setDate(this.date) | |
| 212 | + this.init(this.date) | |
| 213 | + // this.setDay | |
| 214 | + }, | |
| 215 | + methods: { | |
| 216 | + // 取消穿透 | |
| 217 | + clean() {}, | |
| 218 | + bindDateChange(e) { | |
| 219 | + const value = e.detail.value + '-1' | |
| 220 | + console.log(this.cale.getDate(value)); | |
| 221 | + this.init(value) | |
| 222 | + }, | |
| 223 | + /** | |
| 224 | + * 初始化日期显示 | |
| 225 | + * @param {Object} date | |
| 226 | + */ | |
| 227 | + init(date) { | |
| 228 | + this.cale.setDate(date) | |
| 229 | + this.weeks = this.cale.weeks | |
| 230 | + this.nowDate = this.calendar = this.cale.getInfo(date) | |
| 231 | + }, | |
| 232 | + /** | |
| 233 | + * 打开日历弹窗 | |
| 234 | + */ | |
| 235 | + open() { | |
| 236 | + // 弹窗模式并且清理数据 | |
| 237 | + if (this.clearDate && !this.insert) { | |
| 238 | + this.cale.cleanMultipleStatus() | |
| 239 | + // this.cale.setDate(this.date) | |
| 240 | + this.init(this.date) | |
| 241 | + } | |
| 242 | + this.show = true | |
| 243 | + this.$nextTick(() => { | |
| 244 | + setTimeout(() => { | |
| 245 | + this.aniMaskShow = true | |
| 246 | + }, 50) | |
| 247 | + }) | |
| 248 | + }, | |
| 249 | + /** | |
| 250 | + * 关闭日历弹窗 | |
| 251 | + */ | |
| 252 | + close() { | |
| 253 | + this.aniMaskShow = false | |
| 254 | + this.$nextTick(() => { | |
| 255 | + setTimeout(() => { | |
| 256 | + this.show = false | |
| 257 | + this.$emit('close') | |
| 258 | + }, 300) | |
| 259 | + }) | |
| 260 | + }, | |
| 261 | + /** | |
| 262 | + * 确认按钮 | |
| 263 | + */ | |
| 264 | + confirm() { | |
| 265 | + this.setEmit('confirm') | |
| 266 | + this.close() | |
| 267 | + }, | |
| 268 | + /** | |
| 269 | + * 变化触发 | |
| 270 | + */ | |
| 271 | + change() { | |
| 272 | + if (!this.insert) return | |
| 273 | + this.setEmit('change') | |
| 274 | + }, | |
| 275 | + /** | |
| 276 | + * 选择月份触发 | |
| 277 | + */ | |
| 278 | + monthSwitch() { | |
| 279 | + let { | |
| 280 | + year, | |
| 281 | + month | |
| 282 | + } = this.nowDate | |
| 283 | + this.$emit('monthSwitch', { | |
| 284 | + year, | |
| 285 | + month: Number(month) | |
| 286 | + }) | |
| 287 | + }, | |
| 288 | + /** | |
| 289 | + * 派发事件 | |
| 290 | + * @param {Object} name | |
| 291 | + */ | |
| 292 | + setEmit(name) { | |
| 293 | + let { | |
| 294 | + year, | |
| 295 | + month, | |
| 296 | + date, | |
| 297 | + fullDate, | |
| 298 | + lunar, | |
| 299 | + extraInfo | |
| 300 | + } = this.calendar | |
| 301 | + this.$emit(name, { | |
| 302 | + range: this.cale.multipleStatus, | |
| 303 | + year, | |
| 304 | + month, | |
| 305 | + date, | |
| 306 | + fulldate: fullDate, | |
| 307 | + lunar, | |
| 308 | + extraInfo: extraInfo || {} | |
| 309 | + }) | |
| 310 | + }, | |
| 311 | + /** | |
| 312 | + * 选择天触发 | |
| 313 | + * @param {Object} weeks | |
| 314 | + */ | |
| 315 | + choiceDate(weeks) { | |
| 316 | + if (weeks.disable) return | |
| 317 | + this.calendar = weeks | |
| 318 | + // 设置多选 | |
| 319 | + this.cale.setMultiple(this.calendar.fullDate) | |
| 320 | + this.weeks = this.cale.weeks | |
| 321 | + this.change() | |
| 322 | + }, | |
| 323 | + /** | |
| 324 | + * 回到今天 | |
| 325 | + */ | |
| 326 | + backtoday() { | |
| 327 | + console.log(this.cale.getDate(new Date()).fullDate); | |
| 328 | + let date = this.cale.getDate(new Date()).fullDate | |
| 329 | + // this.cale.setDate(date) | |
| 330 | + this.init(date) | |
| 331 | + this.change() | |
| 332 | + }, | |
| 333 | + /** | |
| 334 | + * 上个月 | |
| 335 | + */ | |
| 336 | + pre() { | |
| 337 | + const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate | |
| 338 | + this.setDate(preDate) | |
| 339 | + this.monthSwitch() | |
| 340 | + | |
| 341 | + }, | |
| 342 | + /** | |
| 343 | + * 下个月 | |
| 344 | + */ | |
| 345 | + next() { | |
| 346 | + const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate | |
| 347 | + this.setDate(nextDate) | |
| 348 | + this.monthSwitch() | |
| 349 | + }, | |
| 350 | + /** | |
| 351 | + * 设置日期 | |
| 352 | + * @param {Object} date | |
| 353 | + */ | |
| 354 | + setDate(date) { | |
| 355 | + this.cale.setDate(date) | |
| 356 | + this.weeks = this.cale.weeks | |
| 357 | + this.nowDate = this.cale.getInfo(date) | |
| 358 | + } | |
| 359 | + } | |
| 360 | + } | |
| 361 | +</script> | |
| 362 | + | |
| 363 | +<style lang="scss" scoped> | |
| 364 | + $uni-bg-color-mask: rgba($color: #000000, $alpha: 0.4); | |
| 365 | + $uni-border-color: #EDEDED; | |
| 366 | + $uni-text-color: #333; | |
| 367 | + $uni-bg-color-hover:#f1f1f1; | |
| 368 | + $uni-font-size-base:14px; | |
| 369 | + $uni-text-color-placeholder: #808080; | |
| 370 | + $uni-color-subtitle: #555555; | |
| 371 | + $uni-text-color-grey:#999; | |
| 372 | + .uni-calendar { | |
| 373 | + /* #ifndef APP-NVUE */ | |
| 374 | + display: flex; | |
| 375 | + /* #endif */ | |
| 376 | + flex-direction: column; | |
| 377 | + } | |
| 378 | + | |
| 379 | + .uni-calendar__mask { | |
| 380 | + position: fixed; | |
| 381 | + bottom: 0; | |
| 382 | + top: 0; | |
| 383 | + left: 0; | |
| 384 | + right: 0; | |
| 385 | + background-color: $uni-bg-color-mask; | |
| 386 | + transition-property: opacity; | |
| 387 | + transition-duration: 0.3s; | |
| 388 | + opacity: 0; | |
| 389 | + /* #ifndef APP-NVUE */ | |
| 390 | + z-index: 99; | |
| 391 | + /* #endif */ | |
| 392 | + } | |
| 393 | + | |
| 394 | + .uni-calendar--mask-show { | |
| 395 | + opacity: 1 | |
| 396 | + } | |
| 397 | + | |
| 398 | + .uni-calendar--fixed { | |
| 399 | + position: fixed; | |
| 400 | + /* #ifdef APP-NVUE */ | |
| 401 | + bottom: 0; | |
| 402 | + /* #endif */ | |
| 403 | + left: 0; | |
| 404 | + right: 0; | |
| 405 | + transition-property: transform; | |
| 406 | + transition-duration: 0.3s; | |
| 407 | + transform: translateY(460px); | |
| 408 | + /* #ifndef APP-NVUE */ | |
| 409 | + bottom: calc(var(--window-bottom)); | |
| 410 | + z-index: 99; | |
| 411 | + /* #endif */ | |
| 412 | + } | |
| 413 | + | |
| 414 | + .uni-calendar--ani-show { | |
| 415 | + transform: translateY(0); | |
| 416 | + } | |
| 417 | + | |
| 418 | + .uni-calendar__content { | |
| 419 | + background-color: #fff; | |
| 420 | + } | |
| 421 | + | |
| 422 | + .uni-calendar__header { | |
| 423 | + position: relative; | |
| 424 | + /* #ifndef APP-NVUE */ | |
| 425 | + display: flex; | |
| 426 | + /* #endif */ | |
| 427 | + flex-direction: row; | |
| 428 | + justify-content: center; | |
| 429 | + align-items: center; | |
| 430 | + height: 50px; | |
| 431 | + border-bottom-color: $uni-border-color; | |
| 432 | + border-bottom-style: solid; | |
| 433 | + border-bottom-width: 1px; | |
| 434 | + } | |
| 435 | + | |
| 436 | + .uni-calendar--fixed-top { | |
| 437 | + /* #ifndef APP-NVUE */ | |
| 438 | + display: flex; | |
| 439 | + /* #endif */ | |
| 440 | + flex-direction: row; | |
| 441 | + justify-content: space-between; | |
| 442 | + border-top-color: $uni-border-color; | |
| 443 | + border-top-style: solid; | |
| 444 | + border-top-width: 1px; | |
| 445 | + } | |
| 446 | + | |
| 447 | + .uni-calendar--fixed-width { | |
| 448 | + width: 50px; | |
| 449 | + // padding: 0 15px; | |
| 450 | + } | |
| 451 | + | |
| 452 | + .uni-calendar__backtoday { | |
| 453 | + position: absolute; | |
| 454 | + right: 0; | |
| 455 | + top: 25rpx; | |
| 456 | + padding: 0 5px; | |
| 457 | + padding-left: 10px; | |
| 458 | + height: 25px; | |
| 459 | + line-height: 25px; | |
| 460 | + font-size: 12px; | |
| 461 | + border-top-left-radius: 25px; | |
| 462 | + border-bottom-left-radius: 25px; | |
| 463 | + color: $uni-text-color; | |
| 464 | + background-color: $uni-bg-color-hover; | |
| 465 | + } | |
| 466 | + | |
| 467 | + .uni-calendar__header-text { | |
| 468 | + text-align: center; | |
| 469 | + width: 100px; | |
| 470 | + font-size: $uni-font-size-base; | |
| 471 | + color: $uni-text-color; | |
| 472 | + } | |
| 473 | + | |
| 474 | + .uni-calendar__header-btn-box { | |
| 475 | + /* #ifndef APP-NVUE */ | |
| 476 | + display: flex; | |
| 477 | + /* #endif */ | |
| 478 | + flex-direction: row; | |
| 479 | + align-items: center; | |
| 480 | + justify-content: center; | |
| 481 | + width: 50px; | |
| 482 | + height: 50px; | |
| 483 | + } | |
| 484 | + | |
| 485 | + .uni-calendar__header-btn { | |
| 486 | + width: 10px; | |
| 487 | + height: 10px; | |
| 488 | + border-left-color: $uni-text-color-placeholder; | |
| 489 | + border-left-style: solid; | |
| 490 | + border-left-width: 2px; | |
| 491 | + border-top-color: $uni-color-subtitle; | |
| 492 | + border-top-style: solid; | |
| 493 | + border-top-width: 2px; | |
| 494 | + } | |
| 495 | + | |
| 496 | + .uni-calendar--left { | |
| 497 | + transform: rotate(-45deg); | |
| 498 | + } | |
| 499 | + | |
| 500 | + .uni-calendar--right { | |
| 501 | + transform: rotate(135deg); | |
| 502 | + } | |
| 503 | + | |
| 504 | + | |
| 505 | + .uni-calendar__weeks { | |
| 506 | + position: relative; | |
| 507 | + /* #ifndef APP-NVUE */ | |
| 508 | + display: flex; | |
| 509 | + /* #endif */ | |
| 510 | + flex-direction: row; | |
| 511 | + } | |
| 512 | + | |
| 513 | + .uni-calendar__weeks-item { | |
| 514 | + flex: 1; | |
| 515 | + } | |
| 516 | + | |
| 517 | + .uni-calendar__weeks-day { | |
| 518 | + flex: 1; | |
| 519 | + /* #ifndef APP-NVUE */ | |
| 520 | + display: flex; | |
| 521 | + /* #endif */ | |
| 522 | + flex-direction: column; | |
| 523 | + justify-content: center; | |
| 524 | + align-items: center; | |
| 525 | + height: 45px; | |
| 526 | + border-bottom-color: #F5F5F5; | |
| 527 | + border-bottom-style: solid; | |
| 528 | + border-bottom-width: 1px; | |
| 529 | + } | |
| 530 | + | |
| 531 | + .uni-calendar__weeks-day-text { | |
| 532 | + font-size: 14px; | |
| 533 | + } | |
| 534 | + | |
| 535 | + .uni-calendar__box { | |
| 536 | + position: relative; | |
| 537 | + } | |
| 538 | + | |
| 539 | + .uni-calendar__box-bg { | |
| 540 | + /* #ifndef APP-NVUE */ | |
| 541 | + display: flex; | |
| 542 | + /* #endif */ | |
| 543 | + justify-content: center; | |
| 544 | + align-items: center; | |
| 545 | + position: absolute; | |
| 546 | + top: 0; | |
| 547 | + left: 0; | |
| 548 | + right: 0; | |
| 549 | + bottom: 0; | |
| 550 | + } | |
| 551 | + | |
| 552 | + .uni-calendar__box-bg-text { | |
| 553 | + font-size: 200px; | |
| 554 | + font-weight: bold; | |
| 555 | + color: $uni-text-color-grey; | |
| 556 | + opacity: 0.1; | |
| 557 | + text-align: center; | |
| 558 | + /* #ifndef APP-NVUE */ | |
| 559 | + line-height: 1; | |
| 560 | + /* #endif */ | |
| 561 | + } | |
| 562 | +</style> | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-calendar/components/uni-calendar/util.js
0 → 100644
| 1 | +import CALENDAR from './calendar.js' | |
| 2 | + | |
| 3 | +class Calendar { | |
| 4 | + constructor({ | |
| 5 | + date, | |
| 6 | + selected, | |
| 7 | + startDate, | |
| 8 | + endDate, | |
| 9 | + range | |
| 10 | + } = {}) { | |
| 11 | + // 当前日期 | |
| 12 | + this.date = this.getDate(new Date()) // 当前初入日期 | |
| 13 | + // 打点信息 | |
| 14 | + this.selected = selected || []; | |
| 15 | + // 范围开始 | |
| 16 | + this.startDate = startDate | |
| 17 | + // 范围结束 | |
| 18 | + this.endDate = endDate | |
| 19 | + this.range = range | |
| 20 | + // 多选状态 | |
| 21 | + this.cleanMultipleStatus() | |
| 22 | + // 每周日期 | |
| 23 | + this.weeks = {} | |
| 24 | + // this._getWeek(this.date.fullDate) | |
| 25 | + } | |
| 26 | + /** | |
| 27 | + * 设置日期 | |
| 28 | + * @param {Object} date | |
| 29 | + */ | |
| 30 | + setDate(date) { | |
| 31 | + this.selectDate = this.getDate(date) | |
| 32 | + this._getWeek(this.selectDate.fullDate) | |
| 33 | + } | |
| 34 | + | |
| 35 | + /** | |
| 36 | + * 清理多选状态 | |
| 37 | + */ | |
| 38 | + cleanMultipleStatus() { | |
| 39 | + this.multipleStatus = { | |
| 40 | + before: '', | |
| 41 | + after: '', | |
| 42 | + data: [] | |
| 43 | + } | |
| 44 | + } | |
| 45 | + | |
| 46 | + /** | |
| 47 | + * 重置开始日期 | |
| 48 | + */ | |
| 49 | + resetSatrtDate(startDate) { | |
| 50 | + // 范围开始 | |
| 51 | + this.startDate = startDate | |
| 52 | + | |
| 53 | + } | |
| 54 | + | |
| 55 | + /** | |
| 56 | + * 重置结束日期 | |
| 57 | + */ | |
| 58 | + resetEndDate(endDate) { | |
| 59 | + // 范围结束 | |
| 60 | + this.endDate = endDate | |
| 61 | + } | |
| 62 | + | |
| 63 | + /** | |
| 64 | + * 获取任意时间 | |
| 65 | + */ | |
| 66 | + getDate(date, AddDayCount = 0, str = 'day') { | |
| 67 | + if (!date) { | |
| 68 | + date = new Date() | |
| 69 | + } | |
| 70 | + if (typeof date !== 'object') { | |
| 71 | + date = date.replace(/-/g, '/') | |
| 72 | + } | |
| 73 | + const dd = new Date(date) | |
| 74 | + switch (str) { | |
| 75 | + case 'day': | |
| 76 | + dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期 | |
| 77 | + break | |
| 78 | + case 'month': | |
| 79 | + if (dd.getDate() === 31) { | |
| 80 | + dd.setDate(dd.getDate() + AddDayCount) | |
| 81 | + } else { | |
| 82 | + dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期 | |
| 83 | + } | |
| 84 | + break | |
| 85 | + case 'year': | |
| 86 | + dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期 | |
| 87 | + break | |
| 88 | + } | |
| 89 | + const y = dd.getFullYear() | |
| 90 | + const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期,不足10补0 | |
| 91 | + const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号,不足10补0 | |
| 92 | + return { | |
| 93 | + fullDate: y + '-' + m + '-' + d, | |
| 94 | + year: y, | |
| 95 | + month: m, | |
| 96 | + date: d, | |
| 97 | + day: dd.getDay() | |
| 98 | + } | |
| 99 | + } | |
| 100 | + | |
| 101 | + | |
| 102 | + /** | |
| 103 | + * 获取上月剩余天数 | |
| 104 | + */ | |
| 105 | + _getLastMonthDays(firstDay, full) { | |
| 106 | + let dateArr = [] | |
| 107 | + for (let i = firstDay; i > 0; i--) { | |
| 108 | + const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate() | |
| 109 | + dateArr.push({ | |
| 110 | + date: beforeDate, | |
| 111 | + month: full.month - 1, | |
| 112 | + lunar: this.getlunar(full.year, full.month - 1, beforeDate), | |
| 113 | + disable: true | |
| 114 | + }) | |
| 115 | + } | |
| 116 | + return dateArr | |
| 117 | + } | |
| 118 | + /** | |
| 119 | + * 获取本月天数 | |
| 120 | + */ | |
| 121 | + _currentMonthDys(dateData, full) { | |
| 122 | + let dateArr = [] | |
| 123 | + let fullDate = this.date.fullDate | |
| 124 | + for (let i = 1; i <= dateData; i++) { | |
| 125 | + let nowDate = full.year + '-' + (full.month < 10 ? | |
| 126 | + full.month : full.month) + '-' + (i < 10 ? | |
| 127 | + '0' + i : i) | |
| 128 | + // 是否今天 | |
| 129 | + let isDay = fullDate === nowDate | |
| 130 | + // 获取打点信息 | |
| 131 | + let info = this.selected && this.selected.find((item) => { | |
| 132 | + if (this.dateEqual(nowDate, item.date)) { | |
| 133 | + return item | |
| 134 | + } | |
| 135 | + }) | |
| 136 | + | |
| 137 | + // 日期禁用 | |
| 138 | + let disableBefore = true | |
| 139 | + let disableAfter = true | |
| 140 | + if (this.startDate) { | |
| 141 | + // let dateCompBefore = this.dateCompare(this.startDate, fullDate) | |
| 142 | + // disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate) | |
| 143 | + disableBefore = this.dateCompare(this.startDate, nowDate) | |
| 144 | + } | |
| 145 | + | |
| 146 | + if (this.endDate) { | |
| 147 | + // let dateCompAfter = this.dateCompare(fullDate, this.endDate) | |
| 148 | + // disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate) | |
| 149 | + disableAfter = this.dateCompare(nowDate, this.endDate) | |
| 150 | + } | |
| 151 | + let multiples = this.multipleStatus.data | |
| 152 | + let checked = false | |
| 153 | + let multiplesStatus = -1 | |
| 154 | + if (this.range) { | |
| 155 | + if (multiples) { | |
| 156 | + multiplesStatus = multiples.findIndex((item) => { | |
| 157 | + return this.dateEqual(item, nowDate) | |
| 158 | + }) | |
| 159 | + } | |
| 160 | + if (multiplesStatus !== -1) { | |
| 161 | + checked = true | |
| 162 | + } | |
| 163 | + } | |
| 164 | + let data = { | |
| 165 | + fullDate: nowDate, | |
| 166 | + year: full.year, | |
| 167 | + date: i, | |
| 168 | + multiple: this.range ? checked : false, | |
| 169 | + beforeMultiple: this.dateEqual(this.multipleStatus.before, nowDate), | |
| 170 | + afterMultiple: this.dateEqual(this.multipleStatus.after, nowDate), | |
| 171 | + month: full.month, | |
| 172 | + lunar: this.getlunar(full.year, full.month, i), | |
| 173 | + disable: !(disableBefore && disableAfter), | |
| 174 | + isDay | |
| 175 | + } | |
| 176 | + if (info) { | |
| 177 | + data.extraInfo = info | |
| 178 | + } | |
| 179 | + | |
| 180 | + dateArr.push(data) | |
| 181 | + } | |
| 182 | + return dateArr | |
| 183 | + } | |
| 184 | + /** | |
| 185 | + * 获取下月天数 | |
| 186 | + */ | |
| 187 | + _getNextMonthDays(surplus, full) { | |
| 188 | + let dateArr = [] | |
| 189 | + for (let i = 1; i < surplus + 1; i++) { | |
| 190 | + dateArr.push({ | |
| 191 | + date: i, | |
| 192 | + month: Number(full.month) + 1, | |
| 193 | + lunar: this.getlunar(full.year, Number(full.month) + 1, i), | |
| 194 | + disable: true | |
| 195 | + }) | |
| 196 | + } | |
| 197 | + return dateArr | |
| 198 | + } | |
| 199 | + | |
| 200 | + /** | |
| 201 | + * 获取当前日期详情 | |
| 202 | + * @param {Object} date | |
| 203 | + */ | |
| 204 | + getInfo(date) { | |
| 205 | + if (!date) { | |
| 206 | + date = new Date() | |
| 207 | + } | |
| 208 | + const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate) | |
| 209 | + return dateInfo | |
| 210 | + } | |
| 211 | + | |
| 212 | + /** | |
| 213 | + * 比较时间大小 | |
| 214 | + */ | |
| 215 | + dateCompare(startDate, endDate) { | |
| 216 | + // 计算截止时间 | |
| 217 | + startDate = new Date(startDate.replace('-', '/').replace('-', '/')) | |
| 218 | + // 计算详细项的截止时间 | |
| 219 | + endDate = new Date(endDate.replace('-', '/').replace('-', '/')) | |
| 220 | + if (startDate <= endDate) { | |
| 221 | + return true | |
| 222 | + } else { | |
| 223 | + return false | |
| 224 | + } | |
| 225 | + } | |
| 226 | + | |
| 227 | + /** | |
| 228 | + * 比较时间是否相等 | |
| 229 | + */ | |
| 230 | + dateEqual(before, after) { | |
| 231 | + // 计算截止时间 | |
| 232 | + before = new Date(before.replace('-', '/').replace('-', '/')) | |
| 233 | + // 计算详细项的截止时间 | |
| 234 | + after = new Date(after.replace('-', '/').replace('-', '/')) | |
| 235 | + if (before.getTime() - after.getTime() === 0) { | |
| 236 | + return true | |
| 237 | + } else { | |
| 238 | + return false | |
| 239 | + } | |
| 240 | + } | |
| 241 | + | |
| 242 | + | |
| 243 | + /** | |
| 244 | + * 获取日期范围内所有日期 | |
| 245 | + * @param {Object} begin | |
| 246 | + * @param {Object} end | |
| 247 | + */ | |
| 248 | + geDateAll(begin, end) { | |
| 249 | + var arr = [] | |
| 250 | + var ab = begin.split('-') | |
| 251 | + var ae = end.split('-') | |
| 252 | + var db = new Date() | |
| 253 | + db.setFullYear(ab[0], ab[1] - 1, ab[2]) | |
| 254 | + var de = new Date() | |
| 255 | + de.setFullYear(ae[0], ae[1] - 1, ae[2]) | |
| 256 | + var unixDb = db.getTime() - 24 * 60 * 60 * 1000 | |
| 257 | + var unixDe = de.getTime() - 24 * 60 * 60 * 1000 | |
| 258 | + for (var k = unixDb; k <= unixDe;) { | |
| 259 | + k = k + 24 * 60 * 60 * 1000 | |
| 260 | + arr.push(this.getDate(new Date(parseInt(k))).fullDate) | |
| 261 | + } | |
| 262 | + return arr | |
| 263 | + } | |
| 264 | + /** | |
| 265 | + * 计算阴历日期显示 | |
| 266 | + */ | |
| 267 | + getlunar(year, month, date) { | |
| 268 | + return CALENDAR.solar2lunar(year, month, date) | |
| 269 | + } | |
| 270 | + /** | |
| 271 | + * 设置打点 | |
| 272 | + */ | |
| 273 | + setSelectInfo(data, value) { | |
| 274 | + this.selected = value | |
| 275 | + this._getWeek(data) | |
| 276 | + } | |
| 277 | + | |
| 278 | + /** | |
| 279 | + * 获取多选状态 | |
| 280 | + */ | |
| 281 | + setMultiple(fullDate) { | |
| 282 | + let { | |
| 283 | + before, | |
| 284 | + after | |
| 285 | + } = this.multipleStatus | |
| 286 | + | |
| 287 | + if (!this.range) return | |
| 288 | + if (before && after) { | |
| 289 | + this.multipleStatus.before = '' | |
| 290 | + this.multipleStatus.after = '' | |
| 291 | + this.multipleStatus.data = [] | |
| 292 | + } else { | |
| 293 | + if (!before) { | |
| 294 | + this.multipleStatus.before = fullDate | |
| 295 | + } else { | |
| 296 | + this.multipleStatus.after = fullDate | |
| 297 | + if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) { | |
| 298 | + this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after); | |
| 299 | + } else { | |
| 300 | + this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before); | |
| 301 | + } | |
| 302 | + } | |
| 303 | + } | |
| 304 | + this._getWeek(fullDate) | |
| 305 | + } | |
| 306 | + | |
| 307 | + /** | |
| 308 | + * 获取每周数据 | |
| 309 | + * @param {Object} dateData | |
| 310 | + */ | |
| 311 | + _getWeek(dateData) { | |
| 312 | + const { | |
| 313 | + year, | |
| 314 | + month | |
| 315 | + } = this.getDate(dateData) | |
| 316 | + let firstDay = new Date(year, month - 1, 1).getDay() | |
| 317 | + let currentDay = new Date(year, month, 0).getDate() | |
| 318 | + let dates = { | |
| 319 | + lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天 | |
| 320 | + currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数 | |
| 321 | + nextMonthDays: [], // 下个月开始几天 | |
| 322 | + weeks: [] | |
| 323 | + } | |
| 324 | + let canlender = [] | |
| 325 | + const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length) | |
| 326 | + dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData)) | |
| 327 | + canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays) | |
| 328 | + let weeks = {} | |
| 329 | + // 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天 | |
| 330 | + for (let i = 0; i < canlender.length; i++) { | |
| 331 | + if (i % 7 === 0) { | |
| 332 | + weeks[parseInt(i / 7)] = new Array(7) | |
| 333 | + } | |
| 334 | + weeks[parseInt(i / 7)][i % 7] = canlender[i] | |
| 335 | + } | |
| 336 | + this.canlender = canlender | |
| 337 | + this.weeks = weeks | |
| 338 | + } | |
| 339 | + | |
| 340 | + //静态方法 | |
| 341 | + // static init(date) { | |
| 342 | + // if (!this.instance) { | |
| 343 | + // this.instance = new Calendar(date); | |
| 344 | + // } | |
| 345 | + // return this.instance; | |
| 346 | + // } | |
| 347 | +} | |
| 348 | + | |
| 349 | + | |
| 350 | +export default Calendar | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-calendar/package.json
0 → 100644
| 1 | +{ | |
| 2 | + "id": "uni-calendar", | |
| 3 | + "displayName": "uni-calendar 日历", | |
| 4 | + "version": "1.4.5", | |
| 5 | + "description": "日历组件", | |
| 6 | + "keywords": [ | |
| 7 | + "uni-ui", | |
| 8 | + "uniui", | |
| 9 | + "日历", | |
| 10 | + "", | |
| 11 | + "打卡", | |
| 12 | + "日历选择" | |
| 13 | +], | |
| 14 | + "repository": "https://github.com/dcloudio/uni-ui", | |
| 15 | + "engines": { | |
| 16 | + "HBuilderX": "" | |
| 17 | + }, | |
| 18 | + "directories": { | |
| 19 | + "example": "../../temps/example_temps" | |
| 20 | + }, | |
| 21 | + "dcloudext": { | |
| 22 | + "category": [ | |
| 23 | + "前端组件", | |
| 24 | + "通用组件" | |
| 25 | + ], | |
| 26 | + "sale": { | |
| 27 | + "regular": { | |
| 28 | + "price": "0.00" | |
| 29 | + }, | |
| 30 | + "sourcecode": { | |
| 31 | + "price": "0.00" | |
| 32 | + } | |
| 33 | + }, | |
| 34 | + "contact": { | |
| 35 | + "qq": "" | |
| 36 | + }, | |
| 37 | + "declaration": { | |
| 38 | + "ads": "无", | |
| 39 | + "data": "无", | |
| 40 | + "permissions": "无" | |
| 41 | + }, | |
| 42 | + "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" | |
| 43 | + }, | |
| 44 | + "uni_modules": { | |
| 45 | + "dependencies": [], | |
| 46 | + "encrypt": [], | |
| 47 | + "platforms": { | |
| 48 | + "cloud": { | |
| 49 | + "tcb": "y", | |
| 50 | + "aliyun": "y" | |
| 51 | + }, | |
| 52 | + "client": { | |
| 53 | + "App": { | |
| 54 | + "app-vue": "y", | |
| 55 | + "app-nvue": "y" | |
| 56 | + }, | |
| 57 | + "H5-mobile": { | |
| 58 | + "Safari": "y", | |
| 59 | + "Android Browser": "y", | |
| 60 | + "微信浏览器(Android)": "y", | |
| 61 | + "QQ浏览器(Android)": "y" | |
| 62 | + }, | |
| 63 | + "H5-pc": { | |
| 64 | + "Chrome": "y", | |
| 65 | + "IE": "y", | |
| 66 | + "Edge": "y", | |
| 67 | + "Firefox": "y", | |
| 68 | + "Safari": "y" | |
| 69 | + }, | |
| 70 | + "小程序": { | |
| 71 | + "微信": "y", | |
| 72 | + "阿里": "y", | |
| 73 | + "百度": "y", | |
| 74 | + "字节跳动": "y", | |
| 75 | + "QQ": "y" | |
| 76 | + }, | |
| 77 | + "快应用": { | |
| 78 | + "华为": "u", | |
| 79 | + "联盟": "u" | |
| 80 | + }, | |
| 81 | + "Vue": { | |
| 82 | + "vue2": "y", | |
| 83 | + "vue3": "y" | |
| 84 | + } | |
| 85 | + } | |
| 86 | + } | |
| 87 | + } | |
| 88 | +} | |
| 0 | 89 | \ No newline at end of file | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-calendar/readme.md
0 → 100644
| 1 | + | |
| 2 | + | |
| 3 | +## Calendar 日历 | |
| 4 | +> **组件名:uni-calendar** | |
| 5 | +> 代码块: `uCalendar` | |
| 6 | + | |
| 7 | + | |
| 8 | +日历组件 | |
| 9 | + | |
| 10 | +> **注意事项** | |
| 11 | +> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。 | |
| 12 | +> - 本组件农历转换使用的js是 [@1900-2100区间内的公历、农历互转](https://github.com/jjonline/calendar.js) | |
| 13 | +> - 仅支持自定义组件模式 | |
| 14 | +> - `date`属性传入的应该是一个 String ,如: 2019-06-27 ,而不是 new Date() | |
| 15 | +> - 通过 `insert` 属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件,但是为了区分模式,现使用两个事件,这里需要注意 | |
| 16 | +> - 弹窗模式下无法阻止后面的元素滚动,如有需要阻止,请在弹窗弹出后,手动设置滚动元素为不可滚动 | |
| 17 | + | |
| 18 | + | |
| 19 | +### 安装方式 | |
| 20 | + | |
| 21 | +本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`。 | |
| 22 | + | |
| 23 | +如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55) | |
| 24 | + | |
| 25 | +### 基本用法 | |
| 26 | + | |
| 27 | +在 ``template`` 中使用组件 | |
| 28 | + | |
| 29 | +```html | |
| 30 | +<view> | |
| 31 | + <uni-calendar | |
| 32 | + :insert="true" | |
| 33 | + :lunar="true" | |
| 34 | + :start-date="'2019-3-2'" | |
| 35 | + :end-date="'2019-5-20'" | |
| 36 | + @change="change" | |
| 37 | + /> | |
| 38 | +</view> | |
| 39 | +``` | |
| 40 | + | |
| 41 | +### 通过方法打开日历 | |
| 42 | + | |
| 43 | +需要设置 `insert` 为 `false` | |
| 44 | + | |
| 45 | +```html | |
| 46 | +<view> | |
| 47 | + <uni-calendar | |
| 48 | + ref="calendar" | |
| 49 | + :insert="false" | |
| 50 | + @confirm="confirm" | |
| 51 | + /> | |
| 52 | + <button @click="open">打开日历</button> | |
| 53 | +</view> | |
| 54 | +``` | |
| 55 | + | |
| 56 | +```javascript | |
| 57 | + | |
| 58 | +export default { | |
| 59 | + data() { | |
| 60 | + return {}; | |
| 61 | + }, | |
| 62 | + methods: { | |
| 63 | + open(){ | |
| 64 | + this.$refs.calendar.open(); | |
| 65 | + }, | |
| 66 | + confirm(e) { | |
| 67 | + console.log(e); | |
| 68 | + } | |
| 69 | + } | |
| 70 | +}; | |
| 71 | + | |
| 72 | +``` | |
| 73 | + | |
| 74 | + | |
| 75 | +## API | |
| 76 | + | |
| 77 | +### Calendar Props | |
| 78 | + | |
| 79 | +| 属性名 | 类型 | 默认值| 说明 | | |
| 80 | +| | | | |
| 81 | +| date | String |- | 自定义当前时间,默认为今天 | | |
| 82 | +| lunar | Boolean | false | 显示农历 | | |
| 83 | +| startDate | String |- | 日期选择范围-开始日期 | | |
| 84 | +| endDate | String |- | 日期选择范围-结束日期 | | |
| 85 | +| range | Boolean | false | 范围选择 | | |
| 86 | +| insert | Boolean | false | 插入模式,可选值,ture:插入模式;false:弹窗模式;默认为插入模式 | | |
| 87 | +|clearDate |Boolean |true |弹窗模式是否清空上次选择内容 | | |
| 88 | +| selected | Array |- | 打点,期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}] | | |
| 89 | +|showMonth | Boolean | true | 是否显示月份为背景 | | |
| 90 | + | |
| 91 | +### Calendar Events | |
| 92 | + | |
| 93 | +| 事件名 | 说明 |返回值| | |
| 94 | +| | | | | |
| 95 | +| open | 弹出日历组件,`insert :false` 时生效|- | | |
| 96 | + | |
| 97 | + | |
| 98 | + | |
| 99 | + | |
| 100 | + | |
| 101 | +## 组件示例 | |
| 102 | + | |
| 103 | +点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar](https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar) | |
| 0 | 104 | \ No newline at end of file | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-card/changelog.md
0 → 100644
| 1 | +## 1.3.1(2021-12-20) | |
| 2 | +- 修复 在vue页面下略缩图显示不正常的bug | |
| 3 | +## 1.3.0(2021-11-19) | |
| 4 | +- 重构插槽的用法 ,header 替换为 title | |
| 5 | +- 新增 actions 插槽 | |
| 6 | +- 新增 cover 封面图属性和插槽 | |
| 7 | +- 新增 padding 内容默认内边距离 | |
| 8 | +- 新增 margin 卡片默认外边距离 | |
| 9 | +- 新增 spacing 卡片默认内边距 | |
| 10 | +- 新增 shadow 卡片阴影属性 | |
| 11 | +- 取消 mode 属性,可使用组合插槽代替 | |
| 12 | +- 取消 note 属性 ,使用actions插槽代替 | |
| 13 | +- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |
| 14 | +- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-card](https://uniapp.dcloud.io/component/uniui/uni-card) | |
| 15 | +## 1.2.1(2021-07-30) | |
| 16 | +- 优化 vue3下事件警告的问题 | |
| 17 | +## 1.2.0(2021-07-13) | |
| 18 | +- 组件兼容 vue3,如何创建vue3项目详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |
| 19 | +## 1.1.8(2021-07-01) | |
| 20 | +- 优化 图文卡片无图片加载时,提供占位图标 | |
| 21 | +- 新增 header 插槽,自定义卡片头部( 图文卡片 mode="style" 时,不支持) | |
| 22 | +- 修复 thumbnail 不存在仍然占位的 bug | |
| 23 | +## 1.1.7(2021-05-12) | |
| 24 | +- 新增 组件示例地址 | |
| 25 | +## 1.1.6(2021-02-04) | |
| 26 | +- 调整为uni_modules目录规范 | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-card/components/uni-card/uni-card.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="uni-card" :class="{ 'uni-card--full': isFull, 'uni-card--shadow': isShadow,'uni-card--border':border}" | |
| 3 | + :style="{'margin':isFull?0:margin,'padding':spacing,'box-shadow':isShadow?shadow:''}"> | |
| 4 | + <!-- 封面 --> | |
| 5 | + <slot name="cover"> | |
| 6 | + <view v-if="cover" class="uni-card__cover"> | |
| 7 | + <image class="uni-card__cover-image" mode="widthFix" @click="onClick('cover')" :src="cover"></image> | |
| 8 | + </view> | |
| 9 | + </slot> | |
| 10 | + <slot name="title"> | |
| 11 | + <view v-if="title || extra" class="uni-card__header"> | |
| 12 | + <!-- 卡片标题 --> | |
| 13 | + <view class="uni-card__header-box" @click="onClick('title')"> | |
| 14 | + <view v-if="thumbnail" class="uni-card__header-avatar"> | |
| 15 | + <image class="uni-card__header-avatar-image" :src="thumbnail" mode="aspectFit" /> | |
| 16 | + </view> | |
| 17 | + <view class="uni-card__header-content"> | |
| 18 | + <text class="uni-card__header-content-title uni-ellipsis">{{ title }}</text> | |
| 19 | + <text v-if="title&&subTitle" | |
| 20 | + class="uni-card__header-content-subtitle uni-ellipsis">{{ subTitle }}</text> | |
| 21 | + </view> | |
| 22 | + </view> | |
| 23 | + <view class="uni-card__header-extra" @click="onClick('extra')"> | |
| 24 | + <text class="uni-card__header-extra-text">{{ extra }}</text> | |
| 25 | + </view> | |
| 26 | + </view> | |
| 27 | + </slot> | |
| 28 | + <!-- 卡片内容 --> | |
| 29 | + <view class="uni-card__content" :style="{padding:padding}" @click="onClick('content')"> | |
| 30 | + <slot></slot> | |
| 31 | + </view> | |
| 32 | + <view class="uni-card__actions" @click="onClick('actions')"> | |
| 33 | + <slot name="actions"></slot> | |
| 34 | + </view> | |
| 35 | + </view> | |
| 36 | +</template> | |
| 37 | + | |
| 38 | +<script> | |
| 39 | + /** | |
| 40 | + * Card 卡片 | |
| 41 | + * @description 卡片视图组件 | |
| 42 | + * @tutorial https://ext.dcloud.net.cn/plugin?id=22 | |
| 43 | + * @property {String} title 标题文字 | |
| 44 | + * @property {String} subTitle 副标题 | |
| 45 | + * @property {Number} padding 内容内边距 | |
| 46 | + * @property {Number} margin 卡片外边距 | |
| 47 | + * @property {Number} spacing 卡片内边距 | |
| 48 | + * @property {String} extra 标题额外信息 | |
| 49 | + * @property {String} cover 封面图(本地路径需要引入) | |
| 50 | + * @property {String} thumbnail 标题左侧缩略图 | |
| 51 | + * @property {Boolean} is-full = [true | false] 卡片内容是否通栏,为 true 时将去除padding值 | |
| 52 | + * @property {Boolean} is-shadow = [true | false] 卡片内容是否开启阴影 | |
| 53 | + * @property {String} shadow 卡片阴影 | |
| 54 | + * @property {Boolean} border 卡片边框 | |
| 55 | + * @event {Function} click 点击 Card 触发事件 | |
| 56 | + */ | |
| 57 | + export default { | |
| 58 | + name: 'UniCard', | |
| 59 | + emits: ['click'], | |
| 60 | + props: { | |
| 61 | + title: { | |
| 62 | + type: String, | |
| 63 | + default: '' | |
| 64 | + }, | |
| 65 | + subTitle: { | |
| 66 | + type: String, | |
| 67 | + default: '' | |
| 68 | + }, | |
| 69 | + padding: { | |
| 70 | + type: String, | |
| 71 | + default: '10px' | |
| 72 | + }, | |
| 73 | + margin: { | |
| 74 | + type: String, | |
| 75 | + default: '15px' | |
| 76 | + }, | |
| 77 | + spacing: { | |
| 78 | + type: String, | |
| 79 | + default: '0 10px' | |
| 80 | + }, | |
| 81 | + extra: { | |
| 82 | + type: String, | |
| 83 | + default: '' | |
| 84 | + }, | |
| 85 | + cover: { | |
| 86 | + type: String, | |
| 87 | + default: '' | |
| 88 | + }, | |
| 89 | + thumbnail: { | |
| 90 | + type: String, | |
| 91 | + default: '' | |
| 92 | + }, | |
| 93 | + isFull: { | |
| 94 | + // 内容区域是否通栏 | |
| 95 | + type: Boolean, | |
| 96 | + default: false | |
| 97 | + }, | |
| 98 | + isShadow: { | |
| 99 | + // 是否开启阴影 | |
| 100 | + type: Boolean, | |
| 101 | + default: true | |
| 102 | + }, | |
| 103 | + shadow: { | |
| 104 | + type: String, | |
| 105 | + default: '0px 0px 3px 1px rgba(0, 0, 0, 0.08)' | |
| 106 | + }, | |
| 107 | + border: { | |
| 108 | + type: Boolean, | |
| 109 | + default: true | |
| 110 | + } | |
| 111 | + }, | |
| 112 | + methods: { | |
| 113 | + onClick(type) { | |
| 114 | + this.$emit('click', type) | |
| 115 | + } | |
| 116 | + } | |
| 117 | + } | |
| 118 | +</script> | |
| 119 | + | |
| 120 | +<style lang="scss"> | |
| 121 | + $uni-border-3: #EBEEF5 !default; | |
| 122 | + $uni-shadow-base:0 0px 6px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default; | |
| 123 | + $uni-main-color: #3a3a3a !default; | |
| 124 | + $uni-base-color: #6a6a6a !default; | |
| 125 | + $uni-secondary-color: #909399 !default; | |
| 126 | + $uni-spacing-sm: 8px !default; | |
| 127 | + $uni-border-color:$uni-border-3; | |
| 128 | + $uni-shadow: $uni-shadow-base; | |
| 129 | + $uni-card-title: 15px; | |
| 130 | + $uni-cart-title-color:$uni-main-color; | |
| 131 | + $uni-card-subtitle: 12px; | |
| 132 | + $uni-cart-subtitle-color:$uni-secondary-color; | |
| 133 | + $uni-card-spacing: 10px; | |
| 134 | + $uni-card-content-color: $uni-base-color; | |
| 135 | + | |
| 136 | + .uni-card { | |
| 137 | + margin: $uni-card-spacing; | |
| 138 | + padding: 0 $uni-spacing-sm; | |
| 139 | + border-radius: 4px; | |
| 140 | + overflow: hidden; | |
| 141 | + font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; | |
| 142 | + background-color: #fff; | |
| 143 | + flex: 1; | |
| 144 | + | |
| 145 | + .uni-card__cover { | |
| 146 | + position: relative; | |
| 147 | + margin-top: $uni-card-spacing; | |
| 148 | + flex-direction: row; | |
| 149 | + overflow: hidden; | |
| 150 | + border-radius: 4px; | |
| 151 | + .uni-card__cover-image { | |
| 152 | + flex: 1; | |
| 153 | + // width: 100%; | |
| 154 | + /* #ifndef APP-PLUS */ | |
| 155 | + vertical-align: middle; | |
| 156 | + /* #endif */ | |
| 157 | + } | |
| 158 | + } | |
| 159 | + | |
| 160 | + .uni-card__header { | |
| 161 | + display: flex; | |
| 162 | + border-bottom: 1px $uni-border-color solid; | |
| 163 | + flex-direction: row; | |
| 164 | + align-items: center; | |
| 165 | + padding: $uni-card-spacing; | |
| 166 | + overflow: hidden; | |
| 167 | + | |
| 168 | + .uni-card__header-box { | |
| 169 | + /* #ifndef APP-NVUE */ | |
| 170 | + display: flex; | |
| 171 | + /* #endif */ | |
| 172 | + flex: 1; | |
| 173 | + flex-direction: row; | |
| 174 | + align-items: center; | |
| 175 | + overflow: hidden; | |
| 176 | + } | |
| 177 | + | |
| 178 | + .uni-card__header-avatar { | |
| 179 | + width: 40px; | |
| 180 | + height: 40px; | |
| 181 | + overflow: hidden; | |
| 182 | + border-radius: 5px; | |
| 183 | + margin-right: $uni-card-spacing; | |
| 184 | + .uni-card__header-avatar-image { | |
| 185 | + flex: 1; | |
| 186 | + width: 40px; | |
| 187 | + height: 40px; | |
| 188 | + } | |
| 189 | + } | |
| 190 | + | |
| 191 | + .uni-card__header-content { | |
| 192 | + /* #ifndef APP-NVUE */ | |
| 193 | + display: flex; | |
| 194 | + /* #endif */ | |
| 195 | + flex-direction: column; | |
| 196 | + justify-content: center; | |
| 197 | + flex: 1; | |
| 198 | + // height: 40px; | |
| 199 | + overflow: hidden; | |
| 200 | + | |
| 201 | + .uni-card__header-content-title { | |
| 202 | + font-size: $uni-card-title; | |
| 203 | + color: $uni-cart-title-color; | |
| 204 | + // line-height: 22px; | |
| 205 | + } | |
| 206 | + | |
| 207 | + .uni-card__header-content-subtitle { | |
| 208 | + font-size: $uni-card-subtitle; | |
| 209 | + margin-top: 5px; | |
| 210 | + color: $uni-cart-subtitle-color; | |
| 211 | + } | |
| 212 | + } | |
| 213 | + | |
| 214 | + .uni-card__header-extra { | |
| 215 | + line-height: 12px; | |
| 216 | + | |
| 217 | + .uni-card__header-extra-text { | |
| 218 | + font-size: 12px; | |
| 219 | + color: $uni-cart-subtitle-color; | |
| 220 | + } | |
| 221 | + } | |
| 222 | + } | |
| 223 | + | |
| 224 | + .uni-card__content { | |
| 225 | + padding: $uni-card-spacing; | |
| 226 | + font-size: 14px; | |
| 227 | + color: $uni-card-content-color; | |
| 228 | + line-height: 22px; | |
| 229 | + } | |
| 230 | + | |
| 231 | + .uni-card__actions { | |
| 232 | + font-size: 12px; | |
| 233 | + } | |
| 234 | + } | |
| 235 | + | |
| 236 | + .uni-card--border { | |
| 237 | + border: 1px solid $uni-border-color; | |
| 238 | + } | |
| 239 | + | |
| 240 | + .uni-card--shadow { | |
| 241 | + position: relative; | |
| 242 | + /* #ifndef APP-NVUE */ | |
| 243 | + box-shadow: $uni-shadow; | |
| 244 | + /* #endif */ | |
| 245 | + } | |
| 246 | + | |
| 247 | + .uni-card--full { | |
| 248 | + margin: 0; | |
| 249 | + border-left-width: 0; | |
| 250 | + border-left-width: 0; | |
| 251 | + border-radius: 0; | |
| 252 | + } | |
| 253 | + | |
| 254 | + /* #ifndef APP-NVUE */ | |
| 255 | + .uni-card--full:after { | |
| 256 | + border-radius: 0; | |
| 257 | + } | |
| 258 | + | |
| 259 | + /* #endif */ | |
| 260 | + .uni-ellipsis { | |
| 261 | + /* #ifndef APP-NVUE */ | |
| 262 | + overflow: hidden; | |
| 263 | + white-space: nowrap; | |
| 264 | + text-overflow: ellipsis; | |
| 265 | + /* #endif */ | |
| 266 | + /* #ifdef APP-NVUE */ | |
| 267 | + lines: 1; | |
| 268 | + /* #endif */ | |
| 269 | + } | |
| 270 | +</style> | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-card/package.json
0 → 100644
| 1 | +{ | |
| 2 | + "id": "uni-card", | |
| 3 | + "displayName": "uni-card 卡片", | |
| 4 | + "version": "1.3.1", | |
| 5 | + "description": "Card 组件,提供常见的卡片样式。", | |
| 6 | + "keywords": [ | |
| 7 | + "uni-ui", | |
| 8 | + "uniui", | |
| 9 | + "card", | |
| 10 | + "", | |
| 11 | + "卡片" | |
| 12 | +], | |
| 13 | + "repository": "https://github.com/dcloudio/uni-ui", | |
| 14 | + "engines": { | |
| 15 | + "HBuilderX": "" | |
| 16 | + }, | |
| 17 | + "directories": { | |
| 18 | + "example": "../../temps/example_temps" | |
| 19 | + }, | |
| 20 | + "dcloudext": { | |
| 21 | + "category": [ | |
| 22 | + "前端组件", | |
| 23 | + "通用组件" | |
| 24 | + ], | |
| 25 | + "sale": { | |
| 26 | + "regular": { | |
| 27 | + "price": "0.00" | |
| 28 | + }, | |
| 29 | + "sourcecode": { | |
| 30 | + "price": "0.00" | |
| 31 | + } | |
| 32 | + }, | |
| 33 | + "contact": { | |
| 34 | + "qq": "" | |
| 35 | + }, | |
| 36 | + "declaration": { | |
| 37 | + "ads": "无", | |
| 38 | + "data": "无", | |
| 39 | + "permissions": "无" | |
| 40 | + }, | |
| 41 | + "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" | |
| 42 | + }, | |
| 43 | + "uni_modules": { | |
| 44 | + "dependencies": [ | |
| 45 | + "uni-icons", | |
| 46 | + "uni-scss" | |
| 47 | + ], | |
| 48 | + "encrypt": [], | |
| 49 | + "platforms": { | |
| 50 | + "cloud": { | |
| 51 | + "tcb": "y", | |
| 52 | + "aliyun": "y" | |
| 53 | + }, | |
| 54 | + "client": { | |
| 55 | + "App": { | |
| 56 | + "app-vue": "y", | |
| 57 | + "app-nvue": "y" | |
| 58 | + }, | |
| 59 | + "H5-mobile": { | |
| 60 | + "Safari": "y", | |
| 61 | + "Android Browser": "y", | |
| 62 | + "微信浏览器(Android)": "y", | |
| 63 | + "QQ浏览器(Android)": "y" | |
| 64 | + }, | |
| 65 | + "H5-pc": { | |
| 66 | + "Chrome": "y", | |
| 67 | + "IE": "y", | |
| 68 | + "Edge": "y", | |
| 69 | + "Firefox": "y", | |
| 70 | + "Safari": "y" | |
| 71 | + }, | |
| 72 | + "小程序": { | |
| 73 | + "微信": "y", | |
| 74 | + "阿里": "y", | |
| 75 | + "百度": "y", | |
| 76 | + "字节跳动": "y", | |
| 77 | + "QQ": "y" | |
| 78 | + }, | |
| 79 | + "快应用": { | |
| 80 | + "华为": "u", | |
| 81 | + "联盟": "u" | |
| 82 | + }, | |
| 83 | + "Vue": { | |
| 84 | + "vue2": "y", | |
| 85 | + "vue3": "y" | |
| 86 | + } | |
| 87 | + } | |
| 88 | + } | |
| 89 | + } | |
| 90 | +} | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-card/readme.md
0 → 100644
yudao-ui-admin-uniapp/uni_modules/uni-collapse/changelog.md
0 → 100644
| 1 | +## 1.4.3(2022-01-25) | |
| 2 | +- 修复 初始化的时候 ,open 属性失效的bug | |
| 3 | +## 1.4.2(2022-01-21) | |
| 4 | +- 修复 微信小程序resize后组件收起的bug | |
| 5 | +## 1.4.1(2021-11-22) | |
| 6 | +- 修复 vue3中个别scss变量无法找到的问题 | |
| 7 | +## 1.4.0(2021-11-19) | |
| 8 | +- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |
| 9 | +- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-collapse](https://uniapp.dcloud.io/component/uniui/uni-collapse) | |
| 10 | +## 1.3.3(2021-08-17) | |
| 11 | +- 优化 show-arrow 属性默认为true | |
| 12 | +## 1.3.2(2021-08-17) | |
| 13 | +- 新增 show-arrow 属性,控制是否显示右侧箭头 | |
| 14 | +## 1.3.1(2021-07-30) | |
| 15 | +- 优化 vue3下小程序事件警告的问题 | |
| 16 | +## 1.3.0(2021-07-30) | |
| 17 | +- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |
| 18 | +## 1.2.2(2021-07-21) | |
| 19 | +- 修复 由1.2.0版本引起的 change 事件返回 undefined 的Bug | |
| 20 | +## 1.2.1(2021-07-21) | |
| 21 | +- 优化 组件示例 | |
| 22 | +## 1.2.0(2021-07-21) | |
| 23 | +- 新增 组件折叠动画 | |
| 24 | +- 新增 value\v-model 属性 ,动态修改面板折叠状态 | |
| 25 | +- 新增 title 插槽 ,可定义面板标题 | |
| 26 | +- 新增 border 属性 ,显示隐藏面板内容分隔线 | |
| 27 | +- 新增 title-border 属性 ,显示隐藏面板标题分隔线 | |
| 28 | +- 修复 resize 方法失效的Bug | |
| 29 | +- 修复 change 事件返回参数不正确的Bug | |
| 30 | +- 优化 H5、App 平台自动更具内容更新高度,无需调用 reszie() 方法 | |
| 31 | +## 1.1.7(2021-05-12) | |
| 32 | +- 新增 组件示例地址 | |
| 33 | +## 1.1.6(2021-02-05) | |
| 34 | +- 优化 组件引用关系,通过uni_modules引用组件 | |
| 35 | +## 1.1.5(2021-02-05) | |
| 36 | +- 调整为uni_modules目录规范 | |
| 0 | 37 | \ No newline at end of file | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-collapse/components/uni-collapse-item/uni-collapse-item.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="uni-collapse-item"> | |
| 3 | + <!-- onClick(!isOpen) --> | |
| 4 | + <view @click="onClick(!isOpen)" class="uni-collapse-item__title" | |
| 5 | + :class="{'is-open':isOpen &&titleBorder === 'auto' ,'uni-collapse-item-border':titleBorder !== 'none'}"> | |
| 6 | + <view class="uni-collapse-item__title-wrap"> | |
| 7 | + <slot name="title"> | |
| 8 | + <view class="uni-collapse-item__title-box" :class="{'is-disabled':disabled}"> | |
| 9 | + <image v-if="thumb" :src="thumb" class="uni-collapse-item__title-img" /> | |
| 10 | + <text class="uni-collapse-item__title-text">{{ title }}</text> | |
| 11 | + </view> | |
| 12 | + </slot> | |
| 13 | + </view> | |
| 14 | + <view v-if="showArrow" | |
| 15 | + :class="{ 'uni-collapse-item__title-arrow-active': isOpen, 'uni-collapse-item--animation': showAnimation === true }" | |
| 16 | + class="uni-collapse-item__title-arrow"> | |
| 17 | + <uni-icons :color="disabled?'#ddd':'#bbb'" size="14" type="bottom" /> | |
| 18 | + </view> | |
| 19 | + </view> | |
| 20 | + <view class="uni-collapse-item__wrap" :class="{'is--transition':showAnimation}" | |
| 21 | + :style="{height: (isOpen?height:0) +'px'}"> | |
| 22 | + <view :id="elId" ref="collapse--hook" class="uni-collapse-item__wrap-content" | |
| 23 | + :class="{open:isheight,'uni-collapse-item--border':border&&isOpen}"> | |
| 24 | + <slot></slot> | |
| 25 | + </view> | |
| 26 | + </view> | |
| 27 | + | |
| 28 | + </view> | |
| 29 | +</template> | |
| 30 | + | |
| 31 | +<script> | |
| 32 | + // #ifdef APP-NVUE | |
| 33 | + const dom = weex.requireModule('dom') | |
| 34 | + // #endif | |
| 35 | + /** | |
| 36 | + * CollapseItem 折叠面板子组件 | |
| 37 | + * @description 折叠面板子组件 | |
| 38 | + * @property {String} title 标题文字 | |
| 39 | + * @property {String} thumb 标题左侧缩略图 | |
| 40 | + * @property {String} name 唯一标志符 | |
| 41 | + * @property {Boolean} open = [true|false] 是否展开组件 | |
| 42 | + * @property {Boolean} titleBorder = [true|false] 是否显示标题分隔线 | |
| 43 | + * @property {Boolean} border = [true|false] 是否显示分隔线 | |
| 44 | + * @property {Boolean} disabled = [true|false] 是否展开面板 | |
| 45 | + * @property {Boolean} showAnimation = [true|false] 开启动画 | |
| 46 | + * @property {Boolean} showArrow = [true|false] 是否显示右侧箭头 | |
| 47 | + */ | |
| 48 | + export default { | |
| 49 | + name: 'uniCollapseItem', | |
| 50 | + props: { | |
| 51 | + // 列表标题 | |
| 52 | + title: { | |
| 53 | + type: String, | |
| 54 | + default: '' | |
| 55 | + }, | |
| 56 | + name: { | |
| 57 | + type: [Number, String], | |
| 58 | + default: '' | |
| 59 | + }, | |
| 60 | + // 是否禁用 | |
| 61 | + disabled: { | |
| 62 | + type: Boolean, | |
| 63 | + default: false | |
| 64 | + }, | |
| 65 | + // #ifdef APP-PLUS | |
| 66 | + // 是否显示动画,app 端默认不开启动画,卡顿严重 | |
| 67 | + showAnimation: { | |
| 68 | + type: Boolean, | |
| 69 | + default: false | |
| 70 | + }, | |
| 71 | + // #endif | |
| 72 | + // #ifndef APP-PLUS | |
| 73 | + // 是否显示动画 | |
| 74 | + showAnimation: { | |
| 75 | + type: Boolean, | |
| 76 | + default: true | |
| 77 | + }, | |
| 78 | + // #endif | |
| 79 | + // 是否展开 | |
| 80 | + open: { | |
| 81 | + type: Boolean, | |
| 82 | + default: false | |
| 83 | + }, | |
| 84 | + // 缩略图 | |
| 85 | + thumb: { | |
| 86 | + type: String, | |
| 87 | + default: '' | |
| 88 | + }, | |
| 89 | + // 标题分隔线显示类型 | |
| 90 | + titleBorder: { | |
| 91 | + type: String, | |
| 92 | + default: 'auto' | |
| 93 | + }, | |
| 94 | + border: { | |
| 95 | + type: Boolean, | |
| 96 | + default: true | |
| 97 | + }, | |
| 98 | + showArrow: { | |
| 99 | + type: Boolean, | |
| 100 | + default: true | |
| 101 | + } | |
| 102 | + }, | |
| 103 | + data() { | |
| 104 | + // TODO 随机生生元素ID,解决百度小程序获取同一个元素位置信息的bug | |
| 105 | + const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}` | |
| 106 | + return { | |
| 107 | + isOpen: false, | |
| 108 | + isheight: null, | |
| 109 | + height: 0, | |
| 110 | + elId, | |
| 111 | + nameSync: 0 | |
| 112 | + } | |
| 113 | + }, | |
| 114 | + watch: { | |
| 115 | + open(val) { | |
| 116 | + this.isOpen = val | |
| 117 | + this.onClick(val, 'init') | |
| 118 | + } | |
| 119 | + }, | |
| 120 | + updated(e) { | |
| 121 | + this.$nextTick(() => { | |
| 122 | + this.init(true) | |
| 123 | + }) | |
| 124 | + }, | |
| 125 | + created() { | |
| 126 | + this.collapse = this.getCollapse() | |
| 127 | + this.oldHeight = 0 | |
| 128 | + this.onClick(this.open, 'init') | |
| 129 | + }, | |
| 130 | + // #ifndef VUE3 | |
| 131 | + // TODO vue2 | |
| 132 | + destroyed() { | |
| 133 | + if (this.__isUnmounted) return | |
| 134 | + this.uninstall() | |
| 135 | + }, | |
| 136 | + // #endif | |
| 137 | + // #ifdef VUE3 | |
| 138 | + // TODO vue3 | |
| 139 | + unmounted() { | |
| 140 | + this.__isUnmounted = true | |
| 141 | + this.uninstall() | |
| 142 | + }, | |
| 143 | + // #endif | |
| 144 | + mounted() { | |
| 145 | + if (!this.collapse) return | |
| 146 | + if (this.name !== '') { | |
| 147 | + this.nameSync = this.name | |
| 148 | + } else { | |
| 149 | + this.nameSync = this.collapse.childrens.length + '' | |
| 150 | + } | |
| 151 | + if (this.collapse.names.indexOf(this.nameSync) === -1) { | |
| 152 | + this.collapse.names.push(this.nameSync) | |
| 153 | + } else { | |
| 154 | + console.warn(`name 值 ${this.nameSync} 重复`); | |
| 155 | + } | |
| 156 | + if (this.collapse.childrens.indexOf(this) === -1) { | |
| 157 | + this.collapse.childrens.push(this) | |
| 158 | + } | |
| 159 | + this.init() | |
| 160 | + }, | |
| 161 | + methods: { | |
| 162 | + init(type) { | |
| 163 | + // #ifndef APP-NVUE | |
| 164 | + this.getCollapseHeight(type) | |
| 165 | + // #endif | |
| 166 | + // #ifdef APP-NVUE | |
| 167 | + this.getNvueHwight(type) | |
| 168 | + // #endif | |
| 169 | + }, | |
| 170 | + uninstall() { | |
| 171 | + if (this.collapse) { | |
| 172 | + this.collapse.childrens.forEach((item, index) => { | |
| 173 | + if (item === this) { | |
| 174 | + this.collapse.childrens.splice(index, 1) | |
| 175 | + } | |
| 176 | + }) | |
| 177 | + this.collapse.names.forEach((item, index) => { | |
| 178 | + if (item === this.nameSync) { | |
| 179 | + this.collapse.names.splice(index, 1) | |
| 180 | + } | |
| 181 | + }) | |
| 182 | + } | |
| 183 | + }, | |
| 184 | + onClick(isOpen, type) { | |
| 185 | + if (this.disabled) return | |
| 186 | + this.isOpen = isOpen | |
| 187 | + if (this.isOpen && this.collapse) { | |
| 188 | + this.collapse.setAccordion(this) | |
| 189 | + } | |
| 190 | + if (type !== 'init') { | |
| 191 | + this.collapse.onChange(isOpen, this) | |
| 192 | + } | |
| 193 | + }, | |
| 194 | + getCollapseHeight(type, index = 0) { | |
| 195 | + const views = uni.createSelectorQuery().in(this) | |
| 196 | + views | |
| 197 | + .select(`#${this.elId}`) | |
| 198 | + .fields({ | |
| 199 | + size: true | |
| 200 | + }, data => { | |
| 201 | + // TODO 百度中可能获取不到节点信息 ,需要循环获取 | |
| 202 | + if (index >= 10) return | |
| 203 | + if (!data) { | |
| 204 | + index++ | |
| 205 | + this.getCollapseHeight(false, index) | |
| 206 | + return | |
| 207 | + } | |
| 208 | + // #ifdef APP-NVUE | |
| 209 | + this.height = data.height + 1 | |
| 210 | + // #endif | |
| 211 | + // #ifndef APP-NVUE | |
| 212 | + this.height = data.height | |
| 213 | + // #endif | |
| 214 | + this.isheight = true | |
| 215 | + if (type) return | |
| 216 | + this.onClick(this.isOpen, 'init') | |
| 217 | + }) | |
| 218 | + .exec() | |
| 219 | + }, | |
| 220 | + getNvueHwight(type) { | |
| 221 | + const result = dom.getComponentRect(this.$refs['collapse--hook'], option => { | |
| 222 | + if (option && option.result && option.size) { | |
| 223 | + // #ifdef APP-NVUE | |
| 224 | + this.height = option.size.height + 1 | |
| 225 | + // #endif | |
| 226 | + // #ifndef APP-NVUE | |
| 227 | + this.height = option.size.height | |
| 228 | + // #endif | |
| 229 | + this.isheight = true | |
| 230 | + if (type) return | |
| 231 | + this.onClick(this.open, 'init') | |
| 232 | + } | |
| 233 | + }) | |
| 234 | + }, | |
| 235 | + /** | |
| 236 | + * 获取父元素实例 | |
| 237 | + */ | |
| 238 | + getCollapse(name = 'uniCollapse') { | |
| 239 | + let parent = this.$parent; | |
| 240 | + let parentName = parent.$options.name; | |
| 241 | + while (parentName !== name) { | |
| 242 | + parent = parent.$parent; | |
| 243 | + if (!parent) return false; | |
| 244 | + parentName = parent.$options.name; | |
| 245 | + } | |
| 246 | + return parent; | |
| 247 | + } | |
| 248 | + } | |
| 249 | + } | |
| 250 | +</script> | |
| 251 | + | |
| 252 | +<style lang="scss"> | |
| 253 | + .uni-collapse-item { | |
| 254 | + /* #ifndef APP-NVUE */ | |
| 255 | + box-sizing: border-box; | |
| 256 | + | |
| 257 | + /* #endif */ | |
| 258 | + &__title { | |
| 259 | + /* #ifndef APP-NVUE */ | |
| 260 | + display: flex; | |
| 261 | + width: 100%; | |
| 262 | + box-sizing: border-box; | |
| 263 | + /* #endif */ | |
| 264 | + flex-direction: row; | |
| 265 | + align-items: center; | |
| 266 | + transition: border-bottom-color .3s; | |
| 267 | + | |
| 268 | + // transition-property: border-bottom-color; | |
| 269 | + // transition-duration: 5s; | |
| 270 | + &-wrap { | |
| 271 | + width: 100%; | |
| 272 | + flex: 1; | |
| 273 | + | |
| 274 | + } | |
| 275 | + | |
| 276 | + &-box { | |
| 277 | + padding: 0 15px; | |
| 278 | + /* #ifndef APP-NVUE */ | |
| 279 | + display: flex; | |
| 280 | + width: 100%; | |
| 281 | + box-sizing: border-box; | |
| 282 | + /* #endif */ | |
| 283 | + flex-direction: row; | |
| 284 | + justify-content: space-between; | |
| 285 | + align-items: center; | |
| 286 | + height: 48px; | |
| 287 | + line-height: 48px; | |
| 288 | + background-color: #fff; | |
| 289 | + color: #303133; | |
| 290 | + font-size: 13px; | |
| 291 | + font-weight: 500; | |
| 292 | + /* #ifdef H5 */ | |
| 293 | + cursor: pointer; | |
| 294 | + outline: none; | |
| 295 | + | |
| 296 | + /* #endif */ | |
| 297 | + &.is-disabled { | |
| 298 | + .uni-collapse-item__title-text { | |
| 299 | + color: #999; | |
| 300 | + } | |
| 301 | + } | |
| 302 | + | |
| 303 | + } | |
| 304 | + | |
| 305 | + &.uni-collapse-item-border { | |
| 306 | + border-bottom: 1px solid #ebeef5; | |
| 307 | + } | |
| 308 | + | |
| 309 | + &.is-open { | |
| 310 | + border-bottom-color: transparent; | |
| 311 | + } | |
| 312 | + | |
| 313 | + &-img { | |
| 314 | + height: 22px; | |
| 315 | + width: 22px; | |
| 316 | + margin-right: 10px; | |
| 317 | + } | |
| 318 | + | |
| 319 | + &-text { | |
| 320 | + flex: 1; | |
| 321 | + font-size: 14px; | |
| 322 | + /* #ifndef APP-NVUE */ | |
| 323 | + white-space: nowrap; | |
| 324 | + color: inherit; | |
| 325 | + /* #endif */ | |
| 326 | + /* #ifdef APP-NVUE */ | |
| 327 | + lines: 1; | |
| 328 | + /* #endif */ | |
| 329 | + overflow: hidden; | |
| 330 | + text-overflow: ellipsis; | |
| 331 | + } | |
| 332 | + | |
| 333 | + &-arrow { | |
| 334 | + /* #ifndef APP-NVUE */ | |
| 335 | + display: flex; | |
| 336 | + box-sizing: border-box; | |
| 337 | + /* #endif */ | |
| 338 | + align-items: center; | |
| 339 | + justify-content: center; | |
| 340 | + width: 20px; | |
| 341 | + height: 20px; | |
| 342 | + margin-right: 10px; | |
| 343 | + transform: rotate(0deg); | |
| 344 | + | |
| 345 | + &-active { | |
| 346 | + transform: rotate(-180deg); | |
| 347 | + } | |
| 348 | + } | |
| 349 | + | |
| 350 | + | |
| 351 | + } | |
| 352 | + | |
| 353 | + &__wrap { | |
| 354 | + /* #ifndef APP-NVUE */ | |
| 355 | + will-change: height; | |
| 356 | + box-sizing: border-box; | |
| 357 | + /* #endif */ | |
| 358 | + background-color: #fff; | |
| 359 | + overflow: hidden; | |
| 360 | + position: relative; | |
| 361 | + height: 0; | |
| 362 | + | |
| 363 | + &.is--transition { | |
| 364 | + // transition: all 0.3s; | |
| 365 | + transition-property: height, border-bottom-width; | |
| 366 | + transition-duration: 0.3s; | |
| 367 | + /* #ifndef APP-NVUE */ | |
| 368 | + will-change: height; | |
| 369 | + /* #endif */ | |
| 370 | + } | |
| 371 | + | |
| 372 | + | |
| 373 | + | |
| 374 | + &-content { | |
| 375 | + position: absolute; | |
| 376 | + font-size: 13px; | |
| 377 | + color: #303133; | |
| 378 | + // transition: height 0.3s; | |
| 379 | + border-bottom-color: transparent; | |
| 380 | + border-bottom-style: solid; | |
| 381 | + border-bottom-width: 0; | |
| 382 | + | |
| 383 | + &.uni-collapse-item--border { | |
| 384 | + border-bottom-width: 1px; | |
| 385 | + border-bottom-color: red; | |
| 386 | + border-bottom-color: #ebeef5; | |
| 387 | + } | |
| 388 | + | |
| 389 | + &.open { | |
| 390 | + position: relative; | |
| 391 | + } | |
| 392 | + } | |
| 393 | + } | |
| 394 | + | |
| 395 | + &--animation { | |
| 396 | + transition-property: transform; | |
| 397 | + transition-duration: 0.3s; | |
| 398 | + transition-timing-function: ease; | |
| 399 | + } | |
| 400 | + | |
| 401 | + } | |
| 402 | +</style> | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="uni-collapse"> | |
| 3 | + <slot /> | |
| 4 | + </view> | |
| 5 | +</template> | |
| 6 | +<script> | |
| 7 | + /** | |
| 8 | + * Collapse 折叠面板 | |
| 9 | + * @description 展示可以折叠 / 展开的内容区域 | |
| 10 | + * @tutorial https://ext.dcloud.net.cn/plugin?id=23 | |
| 11 | + * @property {String|Array} value 当前激活面板改变时触发(如果是手风琴模式,参数类型为string,否则为array) | |
| 12 | + * @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果 | |
| 13 | + * @event {Function} change 切换面板时触发,如果是手风琴模式,返回类型为string,否则为array | |
| 14 | + */ | |
| 15 | + export default { | |
| 16 | + name: 'uniCollapse', | |
| 17 | + emits:['change','activeItem','input','update:modelValue'], | |
| 18 | + props: { | |
| 19 | + value: { | |
| 20 | + type: [String, Array], | |
| 21 | + default: '' | |
| 22 | + }, | |
| 23 | + modelValue: { | |
| 24 | + type: [String, Array], | |
| 25 | + default: '' | |
| 26 | + }, | |
| 27 | + accordion: { | |
| 28 | + // 是否开启手风琴效果 | |
| 29 | + type: [Boolean, String], | |
| 30 | + default: false | |
| 31 | + }, | |
| 32 | + }, | |
| 33 | + data() { | |
| 34 | + return {} | |
| 35 | + }, | |
| 36 | + computed: { | |
| 37 | + // TODO 兼容 vue2 和 vue3 | |
| 38 | + dataValue() { | |
| 39 | + let value = (typeof this.value === 'string' && this.value === '') || | |
| 40 | + (Array.isArray(this.value) && this.value.length === 0) | |
| 41 | + let modelValue = (typeof this.modelValue === 'string' && this.modelValue === '') || | |
| 42 | + (Array.isArray(this.modelValue) && this.modelValue.length === 0) | |
| 43 | + if (value) { | |
| 44 | + return this.modelValue | |
| 45 | + } | |
| 46 | + if (modelValue) { | |
| 47 | + return this.value | |
| 48 | + } | |
| 49 | + | |
| 50 | + return this.value | |
| 51 | + } | |
| 52 | + }, | |
| 53 | + watch: { | |
| 54 | + dataValue(val) { | |
| 55 | + this.setOpen(val) | |
| 56 | + } | |
| 57 | + }, | |
| 58 | + created() { | |
| 59 | + this.childrens = [] | |
| 60 | + this.names = [] | |
| 61 | + }, | |
| 62 | + mounted() { | |
| 63 | + this.$nextTick(()=>{ | |
| 64 | + this.setOpen(this.dataValue) | |
| 65 | + }) | |
| 66 | + }, | |
| 67 | + methods: { | |
| 68 | + setOpen(val) { | |
| 69 | + let str = typeof val === 'string' | |
| 70 | + let arr = Array.isArray(val) | |
| 71 | + this.childrens.forEach((vm, index) => { | |
| 72 | + if (str) { | |
| 73 | + if (val === vm.nameSync) { | |
| 74 | + if (!this.accordion) { | |
| 75 | + console.warn('accordion 属性为 false ,v-model 类型应该为 array') | |
| 76 | + return | |
| 77 | + } | |
| 78 | + vm.isOpen = true | |
| 79 | + } | |
| 80 | + } | |
| 81 | + if (arr) { | |
| 82 | + val.forEach(v => { | |
| 83 | + if (v === vm.nameSync) { | |
| 84 | + if (this.accordion) { | |
| 85 | + console.warn('accordion 属性为 true ,v-model 类型应该为 string') | |
| 86 | + return | |
| 87 | + } | |
| 88 | + vm.isOpen = true | |
| 89 | + } | |
| 90 | + }) | |
| 91 | + } | |
| 92 | + }) | |
| 93 | + this.emit(val) | |
| 94 | + }, | |
| 95 | + setAccordion(self) { | |
| 96 | + if (!this.accordion) return | |
| 97 | + this.childrens.forEach((vm, index) => { | |
| 98 | + if (self !== vm) { | |
| 99 | + vm.isOpen = false | |
| 100 | + } | |
| 101 | + }) | |
| 102 | + }, | |
| 103 | + resize() { | |
| 104 | + this.childrens.forEach((vm, index) => { | |
| 105 | + // #ifndef APP-NVUE | |
| 106 | + vm.getCollapseHeight() | |
| 107 | + // #endif | |
| 108 | + // #ifdef APP-NVUE | |
| 109 | + vm.getNvueHwight() | |
| 110 | + // #endif | |
| 111 | + }) | |
| 112 | + }, | |
| 113 | + onChange(isOpen, self) { | |
| 114 | + let activeItem = [] | |
| 115 | + | |
| 116 | + if (this.accordion) { | |
| 117 | + activeItem = isOpen ? self.nameSync : '' | |
| 118 | + } else { | |
| 119 | + this.childrens.forEach((vm, index) => { | |
| 120 | + if (vm.isOpen) { | |
| 121 | + activeItem.push(vm.nameSync) | |
| 122 | + } | |
| 123 | + }) | |
| 124 | + } | |
| 125 | + this.$emit('change', activeItem) | |
| 126 | + this.emit(activeItem) | |
| 127 | + }, | |
| 128 | + emit(val){ | |
| 129 | + this.$emit('input', val) | |
| 130 | + this.$emit('update:modelValue', val) | |
| 131 | + } | |
| 132 | + } | |
| 133 | + } | |
| 134 | +</script> | |
| 135 | +<style lang="scss" > | |
| 136 | + .uni-collapse { | |
| 137 | + /* #ifndef APP-NVUE */ | |
| 138 | + width: 100%; | |
| 139 | + display: flex; | |
| 140 | + /* #endif */ | |
| 141 | + /* #ifdef APP-NVUE */ | |
| 142 | + flex: 1; | |
| 143 | + /* #endif */ | |
| 144 | + flex-direction: column; | |
| 145 | + background-color: #fff; | |
| 146 | + } | |
| 147 | +</style> | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-collapse/package.json
0 → 100644
| 1 | +{ | |
| 2 | + "id": "uni-collapse", | |
| 3 | + "displayName": "uni-collapse 折叠面板", | |
| 4 | + "version": "1.4.3", | |
| 5 | + "description": "Collapse 组件,可以折叠 / 展开的内容区域。", | |
| 6 | + "keywords": [ | |
| 7 | + "uni-ui", | |
| 8 | + "折叠", | |
| 9 | + "折叠面板", | |
| 10 | + "手风琴" | |
| 11 | +], | |
| 12 | + "repository": "https://github.com/dcloudio/uni-ui", | |
| 13 | + "engines": { | |
| 14 | + "HBuilderX": "" | |
| 15 | + }, | |
| 16 | + "directories": { | |
| 17 | + "example": "../../temps/example_temps" | |
| 18 | + }, | |
| 19 | + "dcloudext": { | |
| 20 | + "category": [ | |
| 21 | + "前端组件", | |
| 22 | + "通用组件" | |
| 23 | + ], | |
| 24 | + "sale": { | |
| 25 | + "regular": { | |
| 26 | + "price": "0.00" | |
| 27 | + }, | |
| 28 | + "sourcecode": { | |
| 29 | + "price": "0.00" | |
| 30 | + } | |
| 31 | + }, | |
| 32 | + "contact": { | |
| 33 | + "qq": "" | |
| 34 | + }, | |
| 35 | + "declaration": { | |
| 36 | + "ads": "无", | |
| 37 | + "data": "无", | |
| 38 | + "permissions": "无" | |
| 39 | + }, | |
| 40 | + "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" | |
| 41 | + }, | |
| 42 | + "uni_modules": { | |
| 43 | + "dependencies": [ | |
| 44 | + "uni-scss", | |
| 45 | + "uni-icons" | |
| 46 | + ], | |
| 47 | + "encrypt": [], | |
| 48 | + "platforms": { | |
| 49 | + "cloud": { | |
| 50 | + "tcb": "y", | |
| 51 | + "aliyun": "y" | |
| 52 | + }, | |
| 53 | + "client": { | |
| 54 | + "App": { | |
| 55 | + "app-vue": "y", | |
| 56 | + "app-nvue": "y" | |
| 57 | + }, | |
| 58 | + "H5-mobile": { | |
| 59 | + "Safari": "y", | |
| 60 | + "Android Browser": "y", | |
| 61 | + "微信浏览器(Android)": "y", | |
| 62 | + "QQ浏览器(Android)": "y" | |
| 63 | + }, | |
| 64 | + "H5-pc": { | |
| 65 | + "Chrome": "y", | |
| 66 | + "IE": "y", | |
| 67 | + "Edge": "y", | |
| 68 | + "Firefox": "y", | |
| 69 | + "Safari": "y" | |
| 70 | + }, | |
| 71 | + "小程序": { | |
| 72 | + "微信": "y", | |
| 73 | + "阿里": "y", | |
| 74 | + "百度": "y", | |
| 75 | + "字节跳动": "y", | |
| 76 | + "QQ": "y" | |
| 77 | + }, | |
| 78 | + "快应用": { | |
| 79 | + "华为": "u", | |
| 80 | + "联盟": "u" | |
| 81 | + }, | |
| 82 | + "Vue": { | |
| 83 | + "vue2": "y", | |
| 84 | + "vue3": "y" | |
| 85 | + } | |
| 86 | + } | |
| 87 | + } | |
| 88 | + } | |
| 89 | +} | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-collapse/readme.md
0 → 100644
| 1 | + | |
| 2 | + | |
| 3 | +## Collapse 折叠面板 | |
| 4 | +> **组件名:uni-collapse** | |
| 5 | +> 代码块: `uCollapse` | |
| 6 | +> 关联组件:`uni-collapse-item`、`uni-icons`。 | |
| 7 | + | |
| 8 | + | |
| 9 | +折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用,折叠不重要的内容,显示重要内容。点击可以展开折叠部分。 | |
| 10 | + | |
| 11 | +### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-collapse) | |
| 12 | +#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 | |
| 0 | 13 | \ No newline at end of file | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-combox/changelog.md
0 → 100644
| 1 | +## 1.0.1(2021-11-23) | |
| 2 | +- 优化 label、label-width 属性 | |
| 3 | +## 1.0.0(2021-11-19) | |
| 4 | +- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |
| 5 | +- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-combox](https://uniapp.dcloud.io/component/uniui/uni-combox) | |
| 6 | +## 0.1.0(2021-07-30) | |
| 7 | +- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |
| 8 | +## 0.0.6(2021-05-12) | |
| 9 | +- 新增 组件示例地址 | |
| 10 | +## 0.0.5(2021-04-21) | |
| 11 | +- 优化 添加依赖 uni-icons, 导入后自动下载依赖 | |
| 12 | +## 0.0.4(2021-02-05) | |
| 13 | +- 优化 组件引用关系,通过uni_modules引用组件 | |
| 14 | +## 0.0.3(2021-02-04) | |
| 15 | +- 调整为uni_modules目录规范 | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-combox/components/uni-combox/uni-combox.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="uni-combox" :class="border ? '' : 'uni-combox__no-border'"> | |
| 3 | + <view v-if="label" class="uni-combox__label" :style="labelStyle"> | |
| 4 | + <text>{{label}}</text> | |
| 5 | + </view> | |
| 6 | + <view class="uni-combox__input-box"> | |
| 7 | + <input class="uni-combox__input" type="text" :placeholder="placeholder" | |
| 8 | + placeholder-class="uni-combox__input-plac" v-model="inputVal" @input="onInput" @focus="onFocus" | |
| 9 | +@blur="onBlur" /> | |
| 10 | + <uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector"> | |
| 11 | + </uni-icons> | |
| 12 | + </view> | |
| 13 | + <view class="uni-combox__selector" v-if="showSelector"> | |
| 14 | + <view class="uni-popper__arrow"></view> | |
| 15 | + <scroll-view scroll-y="true" class="uni-combox__selector-scroll"> | |
| 16 | + <view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0"> | |
| 17 | + <text>{{emptyTips}}</text> | |
| 18 | + </view> | |
| 19 | + <view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" | |
| 20 | + @click="onSelectorClick(index)"> | |
| 21 | + <text>{{item}}</text> | |
| 22 | + </view> | |
| 23 | + </scroll-view> | |
| 24 | + </view> | |
| 25 | + </view> | |
| 26 | +</template> | |
| 27 | + | |
| 28 | +<script> | |
| 29 | + /** | |
| 30 | + * Combox 组合输入框 | |
| 31 | + * @description 组合输入框一般用于既可以输入也可以选择的场景 | |
| 32 | + * @tutorial https://ext.dcloud.net.cn/plugin?id=1261 | |
| 33 | + * @property {String} label 左侧文字 | |
| 34 | + * @property {String} labelWidth 左侧内容宽度 | |
| 35 | + * @property {String} placeholder 输入框占位符 | |
| 36 | + * @property {Array} candidates 候选项列表 | |
| 37 | + * @property {String} emptyTips 筛选结果为空时显示的文字 | |
| 38 | + * @property {String} value 组合框的值 | |
| 39 | + */ | |
| 40 | + export default { | |
| 41 | + name: 'uniCombox', | |
| 42 | + emits: ['input', 'update:modelValue'], | |
| 43 | + props: { | |
| 44 | + border: { | |
| 45 | + type: Boolean, | |
| 46 | + default: true | |
| 47 | + }, | |
| 48 | + label: { | |
| 49 | + type: String, | |
| 50 | + default: '' | |
| 51 | + }, | |
| 52 | + labelWidth: { | |
| 53 | + type: String, | |
| 54 | + default: 'auto' | |
| 55 | + }, | |
| 56 | + placeholder: { | |
| 57 | + type: String, | |
| 58 | + default: '' | |
| 59 | + }, | |
| 60 | + candidates: { | |
| 61 | + type: Array, | |
| 62 | + default () { | |
| 63 | + return [] | |
| 64 | + } | |
| 65 | + }, | |
| 66 | + emptyTips: { | |
| 67 | + type: String, | |
| 68 | + default: '无匹配项' | |
| 69 | + }, | |
| 70 | + // #ifndef VUE3 | |
| 71 | + value: { | |
| 72 | + type: [String, Number], | |
| 73 | + default: '' | |
| 74 | + }, | |
| 75 | + // #endif | |
| 76 | + // #ifdef VUE3 | |
| 77 | + modelValue: { | |
| 78 | + type: [String, Number], | |
| 79 | + default: '' | |
| 80 | + }, | |
| 81 | + // #endif | |
| 82 | + }, | |
| 83 | + data() { | |
| 84 | + return { | |
| 85 | + showSelector: false, | |
| 86 | + inputVal: '' | |
| 87 | + } | |
| 88 | + }, | |
| 89 | + computed: { | |
| 90 | + labelStyle() { | |
| 91 | + if (this.labelWidth === 'auto') { | |
| 92 | + return "" | |
| 93 | + } | |
| 94 | + return `width: ${this.labelWidth}` | |
| 95 | + }, | |
| 96 | + filterCandidates() { | |
| 97 | + return this.candidates.filter((item) => { | |
| 98 | + return item.toString().indexOf(this.inputVal) > -1 | |
| 99 | + }) | |
| 100 | + }, | |
| 101 | + filterCandidatesLength() { | |
| 102 | + return this.filterCandidates.length | |
| 103 | + } | |
| 104 | + }, | |
| 105 | + watch: { | |
| 106 | + // #ifndef VUE3 | |
| 107 | + value: { | |
| 108 | + handler(newVal) { | |
| 109 | + this.inputVal = newVal | |
| 110 | + }, | |
| 111 | + immediate: true | |
| 112 | + }, | |
| 113 | + // #endif | |
| 114 | + // #ifdef VUE3 | |
| 115 | + modelValue: { | |
| 116 | + handler(newVal) { | |
| 117 | + this.inputVal = newVal | |
| 118 | + }, | |
| 119 | + immediate: true | |
| 120 | + }, | |
| 121 | + // #endif | |
| 122 | + }, | |
| 123 | + methods: { | |
| 124 | + toggleSelector() { | |
| 125 | + this.showSelector = !this.showSelector | |
| 126 | + }, | |
| 127 | + onFocus() { | |
| 128 | + this.showSelector = true | |
| 129 | + }, | |
| 130 | + onBlur() { | |
| 131 | + setTimeout(() => { | |
| 132 | + this.showSelector = false | |
| 133 | + }, 153) | |
| 134 | + }, | |
| 135 | + onSelectorClick(index) { | |
| 136 | + this.inputVal = this.filterCandidates[index] | |
| 137 | + this.showSelector = false | |
| 138 | + this.$emit('input', this.inputVal) | |
| 139 | + this.$emit('update:modelValue', this.inputVal) | |
| 140 | + }, | |
| 141 | + onInput() { | |
| 142 | + setTimeout(() => { | |
| 143 | + this.$emit('input', this.inputVal) | |
| 144 | + this.$emit('update:modelValue', this.inputVal) | |
| 145 | + }) | |
| 146 | + } | |
| 147 | + } | |
| 148 | + } | |
| 149 | +</script> | |
| 150 | + | |
| 151 | +<style lang="scss" > | |
| 152 | + .uni-combox { | |
| 153 | + font-size: 14px; | |
| 154 | + border: 1px solid #DCDFE6; | |
| 155 | + border-radius: 4px; | |
| 156 | + padding: 6px 10px; | |
| 157 | + position: relative; | |
| 158 | + /* #ifndef APP-NVUE */ | |
| 159 | + display: flex; | |
| 160 | + /* #endif */ | |
| 161 | + // height: 40px; | |
| 162 | + flex-direction: row; | |
| 163 | + align-items: center; | |
| 164 | + // border-bottom: solid 1px #DDDDDD; | |
| 165 | + } | |
| 166 | + | |
| 167 | + .uni-combox__label { | |
| 168 | + font-size: 16px; | |
| 169 | + line-height: 22px; | |
| 170 | + padding-right: 10px; | |
| 171 | + color: #999999; | |
| 172 | + } | |
| 173 | + | |
| 174 | + .uni-combox__input-box { | |
| 175 | + position: relative; | |
| 176 | + /* #ifndef APP-NVUE */ | |
| 177 | + display: flex; | |
| 178 | + /* #endif */ | |
| 179 | + flex: 1; | |
| 180 | + flex-direction: row; | |
| 181 | + align-items: center; | |
| 182 | + } | |
| 183 | + | |
| 184 | + .uni-combox__input { | |
| 185 | + flex: 1; | |
| 186 | + font-size: 14px; | |
| 187 | + height: 22px; | |
| 188 | + line-height: 22px; | |
| 189 | + } | |
| 190 | + | |
| 191 | + .uni-combox__input-plac { | |
| 192 | + font-size: 14px; | |
| 193 | + color: #999; | |
| 194 | + } | |
| 195 | + | |
| 196 | + .uni-combox__selector { | |
| 197 | + /* #ifndef APP-NVUE */ | |
| 198 | + box-sizing: border-box; | |
| 199 | + /* #endif */ | |
| 200 | + position: absolute; | |
| 201 | + top: calc(100% + 12px); | |
| 202 | + left: 0; | |
| 203 | + width: 100%; | |
| 204 | + background-color: #FFFFFF; | |
| 205 | + border: 1px solid #EBEEF5; | |
| 206 | + border-radius: 6px; | |
| 207 | + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); | |
| 208 | + z-index: 2; | |
| 209 | + padding: 4px 0; | |
| 210 | + } | |
| 211 | + | |
| 212 | + .uni-combox__selector-scroll { | |
| 213 | + /* #ifndef APP-NVUE */ | |
| 214 | + max-height: 200px; | |
| 215 | + box-sizing: border-box; | |
| 216 | + /* #endif */ | |
| 217 | + } | |
| 218 | + | |
| 219 | + .uni-combox__selector-empty, | |
| 220 | + .uni-combox__selector-item { | |
| 221 | + /* #ifndef APP-NVUE */ | |
| 222 | + display: flex; | |
| 223 | + cursor: pointer; | |
| 224 | + /* #endif */ | |
| 225 | + line-height: 36px; | |
| 226 | + font-size: 14px; | |
| 227 | + text-align: center; | |
| 228 | + // border-bottom: solid 1px #DDDDDD; | |
| 229 | + padding: 0px 10px; | |
| 230 | + } | |
| 231 | + | |
| 232 | + .uni-combox__selector-item:hover { | |
| 233 | + background-color: #f9f9f9; | |
| 234 | + } | |
| 235 | + | |
| 236 | + .uni-combox__selector-empty:last-child, | |
| 237 | + .uni-combox__selector-item:last-child { | |
| 238 | + /* #ifndef APP-NVUE */ | |
| 239 | + border-bottom: none; | |
| 240 | + /* #endif */ | |
| 241 | + } | |
| 242 | + | |
| 243 | + // picker 弹出层通用的指示小三角 | |
| 244 | + .uni-popper__arrow, | |
| 245 | + .uni-popper__arrow::after { | |
| 246 | + position: absolute; | |
| 247 | + display: block; | |
| 248 | + width: 0; | |
| 249 | + height: 0; | |
| 250 | + border-color: transparent; | |
| 251 | + border-style: solid; | |
| 252 | + border-width: 6px; | |
| 253 | + } | |
| 254 | + | |
| 255 | + .uni-popper__arrow { | |
| 256 | + filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); | |
| 257 | + top: -6px; | |
| 258 | + left: 10%; | |
| 259 | + margin-right: 3px; | |
| 260 | + border-top-width: 0; | |
| 261 | + border-bottom-color: #EBEEF5; | |
| 262 | + } | |
| 263 | + | |
| 264 | + .uni-popper__arrow::after { | |
| 265 | + content: " "; | |
| 266 | + top: 1px; | |
| 267 | + margin-left: -6px; | |
| 268 | + border-top-width: 0; | |
| 269 | + border-bottom-color: #fff; | |
| 270 | + } | |
| 271 | + | |
| 272 | + .uni-combox__no-border { | |
| 273 | + border: none; | |
| 274 | + } | |
| 275 | +</style> | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-combox/package.json
0 → 100644
| 1 | +{ | |
| 2 | + "id": "uni-combox", | |
| 3 | + "displayName": "uni-combox 组合框", | |
| 4 | + "version": "1.0.1", | |
| 5 | + "description": "可以选择也可以输入的表单项 ", | |
| 6 | + "keywords": [ | |
| 7 | + "uni-ui", | |
| 8 | + "uniui", | |
| 9 | + "combox", | |
| 10 | + "组合框", | |
| 11 | + "select" | |
| 12 | +], | |
| 13 | + "repository": "https://github.com/dcloudio/uni-ui", | |
| 14 | + "engines": { | |
| 15 | + "HBuilderX": "" | |
| 16 | + }, | |
| 17 | + "directories": { | |
| 18 | + "example": "../../temps/example_temps" | |
| 19 | + }, | |
| 20 | + "dcloudext": { | |
| 21 | + "category": [ | |
| 22 | + "前端组件", | |
| 23 | + "通用组件" | |
| 24 | + ], | |
| 25 | + "sale": { | |
| 26 | + "regular": { | |
| 27 | + "price": "0.00" | |
| 28 | + }, | |
| 29 | + "sourcecode": { | |
| 30 | + "price": "0.00" | |
| 31 | + } | |
| 32 | + }, | |
| 33 | + "contact": { | |
| 34 | + "qq": "" | |
| 35 | + }, | |
| 36 | + "declaration": { | |
| 37 | + "ads": "无", | |
| 38 | + "data": "无", | |
| 39 | + "permissions": "无" | |
| 40 | + }, | |
| 41 | + "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" | |
| 42 | + }, | |
| 43 | + "uni_modules": { | |
| 44 | + "dependencies": [ | |
| 45 | + "uni-scss", | |
| 46 | + "uni-icons" | |
| 47 | + ], | |
| 48 | + "encrypt": [], | |
| 49 | + "platforms": { | |
| 50 | + "cloud": { | |
| 51 | + "tcb": "y", | |
| 52 | + "aliyun": "y" | |
| 53 | + }, | |
| 54 | + "client": { | |
| 55 | + "App": { | |
| 56 | + "app-vue": "y", | |
| 57 | + "app-nvue": "n" | |
| 58 | + }, | |
| 59 | + "H5-mobile": { | |
| 60 | + "Safari": "y", | |
| 61 | + "Android Browser": "y", | |
| 62 | + "微信浏览器(Android)": "y", | |
| 63 | + "QQ浏览器(Android)": "y" | |
| 64 | + }, | |
| 65 | + "H5-pc": { | |
| 66 | + "Chrome": "y", | |
| 67 | + "IE": "y", | |
| 68 | + "Edge": "y", | |
| 69 | + "Firefox": "y", | |
| 70 | + "Safari": "y" | |
| 71 | + }, | |
| 72 | + "小程序": { | |
| 73 | + "微信": "y", | |
| 74 | + "阿里": "y", | |
| 75 | + "百度": "y", | |
| 76 | + "字节跳动": "y", | |
| 77 | + "QQ": "y" | |
| 78 | + }, | |
| 79 | + "快应用": { | |
| 80 | + "华为": "u", | |
| 81 | + "联盟": "u" | |
| 82 | + }, | |
| 83 | + "Vue": { | |
| 84 | + "vue2": "y", | |
| 85 | + "vue3": "y" | |
| 86 | + } | |
| 87 | + } | |
| 88 | + } | |
| 89 | + } | |
| 90 | +} | |
| 0 | 91 | \ No newline at end of file | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-combox/readme.md
0 → 100644
yudao-ui-admin-uniapp/uni_modules/uni-countdown/changelog.md
0 → 100644
| 1 | +## 1.2.2(2022-01-19) | |
| 2 | +- 修复 在微信小程序中样式不生效的bug | |
| 3 | +## 1.2.1(2022-01-18) | |
| 4 | +- 新增 update 方法 ,在动态更新时间后,刷新组件 | |
| 5 | +## 1.2.0(2021-11-19) | |
| 6 | +- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |
| 7 | +- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-countdown](https://uniapp.dcloud.io/component/uniui/uni-countdown) | |
| 8 | +## 1.1.3(2021-10-18) | |
| 9 | +- 重构 | |
| 10 | +- 新增 font-size 支持自定义字体大小 | |
| 11 | +## 1.1.2(2021-08-24) | |
| 12 | +- 新增 支持国际化 | |
| 13 | +## 1.1.1(2021-07-30) | |
| 14 | +- 优化 vue3下小程序事件警告的问题 | |
| 15 | +## 1.1.0(2021-07-30) | |
| 16 | +- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |
| 17 | +## 1.0.5(2021-06-18) | |
| 18 | +- 修复 uni-countdown 重复赋值跳两秒的 bug | |
| 19 | +## 1.0.4(2021-05-12) | |
| 20 | +- 新增 组件示例地址 | |
| 21 | +## 1.0.3(2021-05-08) | |
| 22 | +- 修复 uni-countdown 不能控制倒计时的 bug | |
| 23 | +## 1.0.2(2021-02-04) | |
| 24 | +- 调整为uni_modules目录规范 | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-countdown/components/uni-countdown/i18n/en.json
0 → 100644
yudao-ui-admin-uniapp/uni_modules/uni-countdown/components/uni-countdown/i18n/index.js
0 → 100644
yudao-ui-admin-uniapp/uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hans.json
0 → 100644
yudao-ui-admin-uniapp/uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hant.json
0 → 100644
yudao-ui-admin-uniapp/uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="uni-countdown"> | |
| 3 | + <text v-if="showDay" :style="[timeStyle]" class="uni-countdown__number">{{ d }}</text> | |
| 4 | + <text v-if="showDay" :style="[splitorStyle]" class="uni-countdown__splitor">{{dayText}}</text> | |
| 5 | + <text :style="[timeStyle]" class="uni-countdown__number">{{ h }}</text> | |
| 6 | + <text :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : hourText }}</text> | |
| 7 | + <text :style="[timeStyle]" class="uni-countdown__number">{{ i }}</text> | |
| 8 | + <text :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : minuteText }}</text> | |
| 9 | + <text :style="[timeStyle]" class="uni-countdown__number">{{ s }}</text> | |
| 10 | + <text v-if="!showColon" :style="[splitorStyle]" class="uni-countdown__splitor">{{secondText}}</text> | |
| 11 | + </view> | |
| 12 | +</template> | |
| 13 | +<script> | |
| 14 | + import { | |
| 15 | + initVueI18n | |
| 16 | + } from '@dcloudio/uni-i18n' | |
| 17 | + import messages from './i18n/index.js' | |
| 18 | + const { | |
| 19 | + t | |
| 20 | + } = initVueI18n(messages) | |
| 21 | + /** | |
| 22 | + * Countdown 倒计时 | |
| 23 | + * @description 倒计时组件 | |
| 24 | + * @tutorial https://ext.dcloud.net.cn/plugin?id=25 | |
| 25 | + * @property {String} backgroundColor 背景色 | |
| 26 | + * @property {String} color 文字颜色 | |
| 27 | + * @property {Number} day 天数 | |
| 28 | + * @property {Number} hour 小时 | |
| 29 | + * @property {Number} minute 分钟 | |
| 30 | + * @property {Number} second 秒 | |
| 31 | + * @property {Number} timestamp 时间戳 | |
| 32 | + * @property {Boolean} showDay = [true|false] 是否显示天数 | |
| 33 | + * @property {Boolean} show-colon = [true|false] 是否以冒号为分隔符 | |
| 34 | + * @property {String} splitorColor 分割符号颜色 | |
| 35 | + * @event {Function} timeup 倒计时时间到触发事件 | |
| 36 | + * @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown> | |
| 37 | + */ | |
| 38 | + export default { | |
| 39 | + name: 'UniCountdown', | |
| 40 | + emits: ['timeup'], | |
| 41 | + props: { | |
| 42 | + showDay: { | |
| 43 | + type: Boolean, | |
| 44 | + default: true | |
| 45 | + }, | |
| 46 | + showColon: { | |
| 47 | + type: Boolean, | |
| 48 | + default: true | |
| 49 | + }, | |
| 50 | + start: { | |
| 51 | + type: Boolean, | |
| 52 | + default: true | |
| 53 | + }, | |
| 54 | + backgroundColor: { | |
| 55 | + type: String, | |
| 56 | + default: '' | |
| 57 | + }, | |
| 58 | + color: { | |
| 59 | + type: String, | |
| 60 | + default: '#333' | |
| 61 | + }, | |
| 62 | + fontSize: { | |
| 63 | + type: Number, | |
| 64 | + default: 14 | |
| 65 | + }, | |
| 66 | + splitorColor: { | |
| 67 | + type: String, | |
| 68 | + default: '#333' | |
| 69 | + }, | |
| 70 | + day: { | |
| 71 | + type: Number, | |
| 72 | + default: 0 | |
| 73 | + }, | |
| 74 | + hour: { | |
| 75 | + type: Number, | |
| 76 | + default: 0 | |
| 77 | + }, | |
| 78 | + minute: { | |
| 79 | + type: Number, | |
| 80 | + default: 0 | |
| 81 | + }, | |
| 82 | + second: { | |
| 83 | + type: Number, | |
| 84 | + default: 0 | |
| 85 | + }, | |
| 86 | + timestamp: { | |
| 87 | + type: Number, | |
| 88 | + default: 0 | |
| 89 | + } | |
| 90 | + }, | |
| 91 | + data() { | |
| 92 | + return { | |
| 93 | + timer: null, | |
| 94 | + syncFlag: false, | |
| 95 | + d: '00', | |
| 96 | + h: '00', | |
| 97 | + i: '00', | |
| 98 | + s: '00', | |
| 99 | + leftTime: 0, | |
| 100 | + seconds: 0 | |
| 101 | + } | |
| 102 | + }, | |
| 103 | + computed: { | |
| 104 | + dayText() { | |
| 105 | + return t("uni-countdown.day") | |
| 106 | + }, | |
| 107 | + hourText(val) { | |
| 108 | + return t("uni-countdown.h") | |
| 109 | + }, | |
| 110 | + minuteText(val) { | |
| 111 | + return t("uni-countdown.m") | |
| 112 | + }, | |
| 113 | + secondText(val) { | |
| 114 | + return t("uni-countdown.s") | |
| 115 | + }, | |
| 116 | + timeStyle() { | |
| 117 | + const { | |
| 118 | + color, | |
| 119 | + backgroundColor, | |
| 120 | + fontSize | |
| 121 | + } = this | |
| 122 | + return { | |
| 123 | + color, | |
| 124 | + backgroundColor, | |
| 125 | + fontSize: `${fontSize}px`, | |
| 126 | + width: `${fontSize * 22 / 14}px`, // 按字体大小为 14px 时的比例缩放 | |
| 127 | + lineHeight: `${fontSize * 20 / 14}px`, | |
| 128 | + borderRadius: `${fontSize * 3 / 14}px`, | |
| 129 | + } | |
| 130 | + }, | |
| 131 | + splitorStyle() { | |
| 132 | + const { splitorColor, fontSize, backgroundColor } = this | |
| 133 | + return { | |
| 134 | + color: splitorColor, | |
| 135 | + fontSize: `${fontSize * 12 / 14}px`, | |
| 136 | + margin: backgroundColor ? `${fontSize * 4 / 14}px` : '' | |
| 137 | + } | |
| 138 | + } | |
| 139 | + }, | |
| 140 | + watch: { | |
| 141 | + day(val) { | |
| 142 | + this.changeFlag() | |
| 143 | + }, | |
| 144 | + hour(val) { | |
| 145 | + this.changeFlag() | |
| 146 | + }, | |
| 147 | + minute(val) { | |
| 148 | + this.changeFlag() | |
| 149 | + }, | |
| 150 | + second(val) { | |
| 151 | + this.changeFlag() | |
| 152 | + }, | |
| 153 | + start: { | |
| 154 | + immediate: true, | |
| 155 | + handler(newVal, oldVal) { | |
| 156 | + if (newVal) { | |
| 157 | + this.startData(); | |
| 158 | + } else { | |
| 159 | + if (!oldVal) return | |
| 160 | + clearInterval(this.timer) | |
| 161 | + } | |
| 162 | + } | |
| 163 | + | |
| 164 | + } | |
| 165 | + }, | |
| 166 | + created: function(e) { | |
| 167 | + this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second) | |
| 168 | + this.countDown() | |
| 169 | + }, | |
| 170 | + // #ifndef VUE3 | |
| 171 | + destroyed() { | |
| 172 | + clearInterval(this.timer) | |
| 173 | + }, | |
| 174 | + // #endif | |
| 175 | + // #ifdef VUE3 | |
| 176 | + unmounted() { | |
| 177 | + clearInterval(this.timer) | |
| 178 | + }, | |
| 179 | + // #endif | |
| 180 | + methods: { | |
| 181 | + toSeconds(timestamp, day, hours, minutes, seconds) { | |
| 182 | + if (timestamp) { | |
| 183 | + return timestamp - parseInt(new Date().getTime() / 1000, 10) | |
| 184 | + } | |
| 185 | + return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds | |
| 186 | + }, | |
| 187 | + timeUp() { | |
| 188 | + clearInterval(this.timer) | |
| 189 | + this.$emit('timeup') | |
| 190 | + }, | |
| 191 | + countDown() { | |
| 192 | + let seconds = this.seconds | |
| 193 | + let [day, hour, minute, second] = [0, 0, 0, 0] | |
| 194 | + if (seconds > 0) { | |
| 195 | + day = Math.floor(seconds / (60 * 60 * 24)) | |
| 196 | + hour = Math.floor(seconds / (60 * 60)) - (day * 24) | |
| 197 | + minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60) | |
| 198 | + second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60) | |
| 199 | + } else { | |
| 200 | + this.timeUp() | |
| 201 | + } | |
| 202 | + if (day < 10) { | |
| 203 | + day = '0' + day | |
| 204 | + } | |
| 205 | + if (hour < 10) { | |
| 206 | + hour = '0' + hour | |
| 207 | + } | |
| 208 | + if (minute < 10) { | |
| 209 | + minute = '0' + minute | |
| 210 | + } | |
| 211 | + if (second < 10) { | |
| 212 | + second = '0' + second | |
| 213 | + } | |
| 214 | + this.d = day | |
| 215 | + this.h = hour | |
| 216 | + this.i = minute | |
| 217 | + this.s = second | |
| 218 | + }, | |
| 219 | + startData() { | |
| 220 | + this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second) | |
| 221 | + if (this.seconds <= 0) { | |
| 222 | + this.seconds = this.toSeconds(0, 0, 0, 0, 0) | |
| 223 | + this.countDown() | |
| 224 | + return | |
| 225 | + } | |
| 226 | + clearInterval(this.timer) | |
| 227 | + this.countDown() | |
| 228 | + this.timer = setInterval(() => { | |
| 229 | + this.seconds-- | |
| 230 | + if (this.seconds < 0) { | |
| 231 | + this.timeUp() | |
| 232 | + return | |
| 233 | + } | |
| 234 | + this.countDown() | |
| 235 | + }, 1000) | |
| 236 | + }, | |
| 237 | + update(){ | |
| 238 | + this.startData(); | |
| 239 | + }, | |
| 240 | + changeFlag() { | |
| 241 | + if (!this.syncFlag) { | |
| 242 | + this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second) | |
| 243 | + this.startData(); | |
| 244 | + this.syncFlag = true; | |
| 245 | + } | |
| 246 | + } | |
| 247 | + } | |
| 248 | + } | |
| 249 | +</script> | |
| 250 | +<style lang="scss" scoped> | |
| 251 | + $font-size: 14px; | |
| 252 | + | |
| 253 | + .uni-countdown { | |
| 254 | + display: flex; | |
| 255 | + flex-direction: row; | |
| 256 | + justify-content: flex-start; | |
| 257 | + align-items: center; | |
| 258 | + | |
| 259 | + &__splitor { | |
| 260 | + margin: 0 2px; | |
| 261 | + font-size: $font-size; | |
| 262 | + color: #333; | |
| 263 | + } | |
| 264 | + | |
| 265 | + &__number { | |
| 266 | + border-radius: 3px; | |
| 267 | + text-align: center; | |
| 268 | + font-size: $font-size; | |
| 269 | + } | |
| 270 | + } | |
| 271 | +</style> | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-countdown/package.json
0 → 100644
| 1 | +{ | |
| 2 | + "id": "uni-countdown", | |
| 3 | + "displayName": "uni-countdown 倒计时", | |
| 4 | + "version": "1.2.2", | |
| 5 | + "description": "CountDown 倒计时组件", | |
| 6 | + "keywords": [ | |
| 7 | + "uni-ui", | |
| 8 | + "uniui", | |
| 9 | + "countdown", | |
| 10 | + "倒计时" | |
| 11 | +], | |
| 12 | + "repository": "https://github.com/dcloudio/uni-ui", | |
| 13 | + "engines": { | |
| 14 | + "HBuilderX": "" | |
| 15 | + }, | |
| 16 | + "directories": { | |
| 17 | + "example": "../../temps/example_temps" | |
| 18 | + }, | |
| 19 | + "dcloudext": { | |
| 20 | + "category": [ | |
| 21 | + "前端组件", | |
| 22 | + "通用组件" | |
| 23 | + ], | |
| 24 | + "sale": { | |
| 25 | + "regular": { | |
| 26 | + "price": "0.00" | |
| 27 | + }, | |
| 28 | + "sourcecode": { | |
| 29 | + "price": "0.00" | |
| 30 | + } | |
| 31 | + }, | |
| 32 | + "contact": { | |
| 33 | + "qq": "" | |
| 34 | + }, | |
| 35 | + "declaration": { | |
| 36 | + "ads": "无", | |
| 37 | + "data": "无", | |
| 38 | + "permissions": "无" | |
| 39 | + }, | |
| 40 | + "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" | |
| 41 | + }, | |
| 42 | + "uni_modules": { | |
| 43 | + "dependencies": ["uni-scss"], | |
| 44 | + "encrypt": [], | |
| 45 | + "platforms": { | |
| 46 | + "cloud": { | |
| 47 | + "tcb": "y", | |
| 48 | + "aliyun": "y" | |
| 49 | + }, | |
| 50 | + "client": { | |
| 51 | + "App": { | |
| 52 | + "app-vue": "y", | |
| 53 | + "app-nvue": "y" | |
| 54 | + }, | |
| 55 | + "H5-mobile": { | |
| 56 | + "Safari": "y", | |
| 57 | + "Android Browser": "y", | |
| 58 | + "微信浏览器(Android)": "y", | |
| 59 | + "QQ浏览器(Android)": "y" | |
| 60 | + }, | |
| 61 | + "H5-pc": { | |
| 62 | + "Chrome": "y", | |
| 63 | + "IE": "y", | |
| 64 | + "Edge": "y", | |
| 65 | + "Firefox": "y", | |
| 66 | + "Safari": "y" | |
| 67 | + }, | |
| 68 | + "小程序": { | |
| 69 | + "微信": "y", | |
| 70 | + "阿里": "y", | |
| 71 | + "百度": "y", | |
| 72 | + "字节跳动": "y", | |
| 73 | + "QQ": "y" | |
| 74 | + }, | |
| 75 | + "快应用": { | |
| 76 | + "华为": "u", | |
| 77 | + "联盟": "u" | |
| 78 | + }, | |
| 79 | + "Vue": { | |
| 80 | + "vue2": "y", | |
| 81 | + "vue3": "y" | |
| 82 | + } | |
| 83 | + } | |
| 84 | + } | |
| 85 | + } | |
| 86 | +} | |
| 0 | 87 | \ No newline at end of file | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-countdown/readme.md
0 → 100644
yudao-ui-admin-uniapp/uni_modules/uni-data-checkbox/changelog.md
0 → 100644
| 1 | +## 1.0.2(2022-06-30) | |
| 2 | +- 优化 在 uni-forms 中的依赖注入方式 | |
| 3 | +## 1.0.1(2022-02-07) | |
| 4 | +- 修复 multiple 为 true 时,v-model 的值为 null 报错的 bug | |
| 5 | +## 1.0.0(2021-11-19) | |
| 6 | +- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |
| 7 | +- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-data-checkbox](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox) | |
| 8 | +## 0.2.5(2021-08-23) | |
| 9 | +- 修复 在uni-forms中 modelValue 中不存在当前字段,当前字段必填写也不参与校验的问题 | |
| 10 | +## 0.2.4(2021-08-17) | |
| 11 | +- 修复 单选 list 模式下 ,icon 为 left 时,选中图标不显示的问题 | |
| 12 | +## 0.2.3(2021-08-11) | |
| 13 | +- 修复 在 uni-forms 中重置表单,错误信息无法清除的问题 | |
| 14 | +## 0.2.2(2021-07-30) | |
| 15 | +- 优化 在uni-forms组件,与label不对齐的问题 | |
| 16 | +## 0.2.1(2021-07-27) | |
| 17 | +- 修复 单选默认值为0不能选中的Bug | |
| 18 | +## 0.2.0(2021-07-13) | |
| 19 | +- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |
| 20 | +## 0.1.11(2021-07-06) | |
| 21 | +- 优化 删除无用日志 | |
| 22 | +## 0.1.10(2021-07-05) | |
| 23 | +- 修复 由 0.1.9 引起的非 nvue 端图标不显示的问题 | |
| 24 | +## 0.1.9(2021-07-05) | |
| 25 | +- 修复 nvue 黑框样式问题 | |
| 26 | +## 0.1.8(2021-06-28) | |
| 27 | +- 修复 selectedTextColor 属性不生效的Bug | |
| 28 | +## 0.1.7(2021-06-02) | |
| 29 | +- 新增 map 属性,可以方便映射text/value属性 | |
| 30 | +## 0.1.6(2021-05-26) | |
| 31 | +- 修复 不关联服务空间的情况下组件报错的Bug | |
| 32 | +## 0.1.5(2021-05-12) | |
| 33 | +- 新增 组件示例地址 | |
| 34 | +## 0.1.4(2021-04-09) | |
| 35 | +- 修复 nvue 下无法选中的问题 | |
| 36 | +## 0.1.3(2021-03-22) | |
| 37 | +- 新增 disabled属性 | |
| 38 | +## 0.1.2(2021-02-24) | |
| 39 | +- 优化 默认颜色显示 | |
| 40 | +## 0.1.1(2021-02-24) | |
| 41 | +- 新增 支持nvue | |
| 42 | +## 0.1.0(2021-02-18) | |
| 43 | +- “暂无数据”显示居中 | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}"> | |
| 3 | + <template v-if="!isLocal"> | |
| 4 | + <view class="uni-data-loading"> | |
| 5 | + <uni-load-more v-if="!mixinDatacomErrorMessage" status="loading" iconType="snow" :iconSize="18" :content-text="contentText"></uni-load-more> | |
| 6 | + <text v-else>{{mixinDatacomErrorMessage}}</text> | |
| 7 | + </view> | |
| 8 | + </template> | |
| 9 | + <template v-else> | |
| 10 | + <checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}" @change="chagne"> | |
| 11 | + <label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']" | |
| 12 | + :style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index"> | |
| 13 | + <checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item[map.value]+''" :checked="item.selected" /> | |
| 14 | + <view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="checkbox__inner" :style="item.styleIcon"> | |
| 15 | + <view class="checkbox__inner-icon"></view> | |
| 16 | + </view> | |
| 17 | + <view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}"> | |
| 18 | + <text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text> | |
| 19 | + <view v-if="mode === 'list' && icon === 'right'" class="checkobx__list" :style="item.styleBackgroud"></view> | |
| 20 | + </view> | |
| 21 | + </label> | |
| 22 | + </checkbox-group> | |
| 23 | + <radio-group v-else class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}" @change="chagne"> | |
| 24 | + <!-- --> | |
| 25 | + <label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']" | |
| 26 | + :style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index"> | |
| 27 | + <radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''" :checked="item.selected" /> | |
| 28 | + <view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio__inner" | |
| 29 | + :style="item.styleBackgroud"> | |
| 30 | + <view class="radio__inner-icon" :style="item.styleIcon"></view> | |
| 31 | + </view> | |
| 32 | + <view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}"> | |
| 33 | + <text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text> | |
| 34 | + <view v-if="mode === 'list' && icon === 'right'" :style="item.styleRightIcon" class="checkobx__list"></view> | |
| 35 | + </view> | |
| 36 | + </label> | |
| 37 | + </radio-group> | |
| 38 | + </template> | |
| 39 | + </view> | |
| 40 | +</template> | |
| 41 | + | |
| 42 | +<script> | |
| 43 | + /** | |
| 44 | + * DataChecklist 数据选择器 | |
| 45 | + * @description 通过数据渲染 checkbox 和 radio | |
| 46 | + * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx | |
| 47 | + * @property {String} mode = [default| list | button | tag] 显示模式 | |
| 48 | + * @value default 默认横排模式 | |
| 49 | + * @value list 列表模式 | |
| 50 | + * @value button 按钮模式 | |
| 51 | + * @value tag 标签模式 | |
| 52 | + * @property {Boolean} multiple = [true|false] 是否多选 | |
| 53 | + * @property {Array|String|Number} value 默认值 | |
| 54 | + * @property {Array} localdata 本地数据 ,格式 [{text:'',value:''}] | |
| 55 | + * @property {Number|String} min 最小选择个数 ,multiple为true时生效 | |
| 56 | + * @property {Number|String} max 最大选择个数 ,multiple为true时生效 | |
| 57 | + * @property {Boolean} wrap 是否换行显示 | |
| 58 | + * @property {String} icon = [left|right] list 列表模式下icon显示位置 | |
| 59 | + * @property {Boolean} selectedColor 选中颜色 | |
| 60 | + * @property {Boolean} emptyText 没有数据时显示的文字 ,本地数据无效 | |
| 61 | + * @property {Boolean} selectedTextColor 选中文本颜色,如不填写则自动显示 | |
| 62 | + * @property {Object} map 字段映射, 默认 map={text:'text',value:'value'} | |
| 63 | + * @value left 左侧显示 | |
| 64 | + * @value right 右侧显示 | |
| 65 | + * @event {Function} change 选中发生变化触发 | |
| 66 | + */ | |
| 67 | + | |
| 68 | + export default { | |
| 69 | + name: 'uniDataChecklist', | |
| 70 | + mixins: [uniCloud.mixinDatacom || {}], | |
| 71 | + emits:['input','update:modelValue','change'], | |
| 72 | + props: { | |
| 73 | + mode: { | |
| 74 | + type: String, | |
| 75 | + default: 'default' | |
| 76 | + }, | |
| 77 | + | |
| 78 | + multiple: { | |
| 79 | + type: Boolean, | |
| 80 | + default: false | |
| 81 | + }, | |
| 82 | + value: { | |
| 83 | + type: [Array, String, Number], | |
| 84 | + default () { | |
| 85 | + return '' | |
| 86 | + } | |
| 87 | + }, | |
| 88 | + // TODO vue3 | |
| 89 | + modelValue: { | |
| 90 | + type: [Array, String, Number], | |
| 91 | + default() { | |
| 92 | + return ''; | |
| 93 | + } | |
| 94 | + }, | |
| 95 | + localdata: { | |
| 96 | + type: Array, | |
| 97 | + default () { | |
| 98 | + return [] | |
| 99 | + } | |
| 100 | + }, | |
| 101 | + min: { | |
| 102 | + type: [Number, String], | |
| 103 | + default: '' | |
| 104 | + }, | |
| 105 | + max: { | |
| 106 | + type: [Number, String], | |
| 107 | + default: '' | |
| 108 | + }, | |
| 109 | + wrap: { | |
| 110 | + type: Boolean, | |
| 111 | + default: false | |
| 112 | + }, | |
| 113 | + icon: { | |
| 114 | + type: String, | |
| 115 | + default: 'left' | |
| 116 | + }, | |
| 117 | + selectedColor: { | |
| 118 | + type: String, | |
| 119 | + default: '' | |
| 120 | + }, | |
| 121 | + selectedTextColor: { | |
| 122 | + type: String, | |
| 123 | + default: '' | |
| 124 | + }, | |
| 125 | + emptyText:{ | |
| 126 | + type: String, | |
| 127 | + default: '暂无数据' | |
| 128 | + }, | |
| 129 | + disabled:{ | |
| 130 | + type: Boolean, | |
| 131 | + default: false | |
| 132 | + }, | |
| 133 | + map:{ | |
| 134 | + type: Object, | |
| 135 | + default(){ | |
| 136 | + return { | |
| 137 | + text:'text', | |
| 138 | + value:'value' | |
| 139 | + } | |
| 140 | + } | |
| 141 | + } | |
| 142 | + }, | |
| 143 | + watch: { | |
| 144 | + localdata: { | |
| 145 | + handler(newVal) { | |
| 146 | + this.range = newVal | |
| 147 | + this.dataList = this.getDataList(this.getSelectedValue(newVal)) | |
| 148 | + }, | |
| 149 | + deep: true | |
| 150 | + }, | |
| 151 | + mixinDatacomResData(newVal) { | |
| 152 | + this.range = newVal | |
| 153 | + this.dataList = this.getDataList(this.getSelectedValue(newVal)) | |
| 154 | + }, | |
| 155 | + value(newVal) { | |
| 156 | + this.dataList = this.getDataList(newVal) | |
| 157 | + // fix by mehaotian is_reset 在 uni-forms 中定义 | |
| 158 | + // if(!this.is_reset){ | |
| 159 | + // this.is_reset = false | |
| 160 | + // this.formItem && this.formItem.setValue(newVal) | |
| 161 | + // } | |
| 162 | + }, | |
| 163 | + modelValue(newVal) { | |
| 164 | + this.dataList = this.getDataList(newVal); | |
| 165 | + // if(!this.is_reset){ | |
| 166 | + // this.is_reset = false | |
| 167 | + // this.formItem && this.formItem.setValue(newVal) | |
| 168 | + // } | |
| 169 | + } | |
| 170 | + }, | |
| 171 | + data() { | |
| 172 | + return { | |
| 173 | + dataList: [], | |
| 174 | + range: [], | |
| 175 | + contentText: { | |
| 176 | + contentdown: '查看更多', | |
| 177 | + contentrefresh: '加载中', | |
| 178 | + contentnomore: '没有更多' | |
| 179 | + }, | |
| 180 | + isLocal:true, | |
| 181 | + styles: { | |
| 182 | + selectedColor: '#2979ff', | |
| 183 | + selectedTextColor: '#666', | |
| 184 | + }, | |
| 185 | + isTop:0 | |
| 186 | + }; | |
| 187 | + }, | |
| 188 | + computed:{ | |
| 189 | + dataValue(){ | |
| 190 | + if(this.value === '')return this.modelValue | |
| 191 | + if(this.modelValue === '') return this.value | |
| 192 | + return this.value | |
| 193 | + } | |
| 194 | + }, | |
| 195 | + created() { | |
| 196 | + // this.form = this.getForm('uniForms') | |
| 197 | + // this.formItem = this.getForm('uniFormsItem') | |
| 198 | + // this.formItem && this.formItem.setValue(this.value) | |
| 199 | + | |
| 200 | + // if (this.formItem) { | |
| 201 | + // this.isTop = 6 | |
| 202 | + // if (this.formItem.name) { | |
| 203 | + // // 如果存在name添加默认值,否则formData 中不存在这个字段不校验 | |
| 204 | + // if(!this.is_reset){ | |
| 205 | + // this.is_reset = false | |
| 206 | + // this.formItem.setValue(this.dataValue) | |
| 207 | + // } | |
| 208 | + // this.rename = this.formItem.name | |
| 209 | + // this.form.inputChildrens.push(this) | |
| 210 | + // } | |
| 211 | + // } | |
| 212 | + | |
| 213 | + if (this.localdata && this.localdata.length !== 0) { | |
| 214 | + this.isLocal = true | |
| 215 | + this.range = this.localdata | |
| 216 | + this.dataList = this.getDataList(this.getSelectedValue(this.range)) | |
| 217 | + } else { | |
| 218 | + if (this.collection) { | |
| 219 | + this.isLocal = false | |
| 220 | + this.loadData() | |
| 221 | + } | |
| 222 | + } | |
| 223 | + }, | |
| 224 | + methods: { | |
| 225 | + loadData() { | |
| 226 | + this.mixinDatacomGet().then(res=>{ | |
| 227 | + this.mixinDatacomResData = res.result.data | |
| 228 | + if(this.mixinDatacomResData.length === 0){ | |
| 229 | + this.isLocal = false | |
| 230 | + this.mixinDatacomErrorMessage = this.emptyText | |
| 231 | + }else{ | |
| 232 | + this.isLocal = true | |
| 233 | + } | |
| 234 | + }).catch(err=>{ | |
| 235 | + this.mixinDatacomErrorMessage = err.message | |
| 236 | + }) | |
| 237 | + }, | |
| 238 | + /** | |
| 239 | + * 获取父元素实例 | |
| 240 | + */ | |
| 241 | + getForm(name = 'uniForms') { | |
| 242 | + let parent = this.$parent; | |
| 243 | + let parentName = parent.$options.name; | |
| 244 | + while (parentName !== name) { | |
| 245 | + parent = parent.$parent; | |
| 246 | + if (!parent) return false | |
| 247 | + parentName = parent.$options.name; | |
| 248 | + } | |
| 249 | + return parent; | |
| 250 | + }, | |
| 251 | + chagne(e) { | |
| 252 | + const values = e.detail.value | |
| 253 | + | |
| 254 | + let detail = { | |
| 255 | + value: [], | |
| 256 | + data: [] | |
| 257 | + } | |
| 258 | + | |
| 259 | + if (this.multiple) { | |
| 260 | + this.range.forEach(item => { | |
| 261 | + | |
| 262 | + if (values.includes(item[this.map.value] + '')) { | |
| 263 | + detail.value.push(item[this.map.value]) | |
| 264 | + detail.data.push(item) | |
| 265 | + } | |
| 266 | + }) | |
| 267 | + } else { | |
| 268 | + const range = this.range.find(item => (item[this.map.value] + '') === values) | |
| 269 | + if (range) { | |
| 270 | + detail = { | |
| 271 | + value: range[this.map.value], | |
| 272 | + data: range | |
| 273 | + } | |
| 274 | + } | |
| 275 | + } | |
| 276 | + // this.formItem && this.formItem.setValue(detail.value) | |
| 277 | + // TODO 兼容 vue2 | |
| 278 | + this.$emit('input', detail.value); | |
| 279 | + // // TOTO 兼容 vue3 | |
| 280 | + this.$emit('update:modelValue', detail.value); | |
| 281 | + this.$emit('change', { | |
| 282 | + detail | |
| 283 | + }) | |
| 284 | + if (this.multiple) { | |
| 285 | + // 如果 v-model 没有绑定 ,则走内部逻辑 | |
| 286 | + // if (this.value.length === 0) { | |
| 287 | + this.dataList = this.getDataList(detail.value, true) | |
| 288 | + // } | |
| 289 | + } else { | |
| 290 | + this.dataList = this.getDataList(detail.value) | |
| 291 | + } | |
| 292 | + }, | |
| 293 | + | |
| 294 | + /** | |
| 295 | + * 获取渲染的新数组 | |
| 296 | + * @param {Object} value 选中内容 | |
| 297 | + */ | |
| 298 | + getDataList(value) { | |
| 299 | + // 解除引用关系,破坏原引用关系,避免污染源数据 | |
| 300 | + let dataList = JSON.parse(JSON.stringify(this.range)) | |
| 301 | + let list = [] | |
| 302 | + if (this.multiple) { | |
| 303 | + if (!Array.isArray(value)) { | |
| 304 | + value = [] | |
| 305 | + } | |
| 306 | + } | |
| 307 | + dataList.forEach((item, index) => { | |
| 308 | + item.disabled = item.disable || item.disabled || false | |
| 309 | + if (this.multiple) { | |
| 310 | + if (value.length > 0) { | |
| 311 | + let have = value.find(val => val === item[this.map.value]) | |
| 312 | + item.selected = have !== undefined | |
| 313 | + } else { | |
| 314 | + item.selected = false | |
| 315 | + } | |
| 316 | + } else { | |
| 317 | + item.selected = value === item[this.map.value] | |
| 318 | + } | |
| 319 | + | |
| 320 | + list.push(item) | |
| 321 | + }) | |
| 322 | + return this.setRange(list) | |
| 323 | + }, | |
| 324 | + /** | |
| 325 | + * 处理最大最小值 | |
| 326 | + * @param {Object} list | |
| 327 | + */ | |
| 328 | + setRange(list) { | |
| 329 | + let selectList = list.filter(item => item.selected) | |
| 330 | + let min = Number(this.min) || 0 | |
| 331 | + let max = Number(this.max) || '' | |
| 332 | + list.forEach((item, index) => { | |
| 333 | + if (this.multiple) { | |
| 334 | + if (selectList.length <= min) { | |
| 335 | + let have = selectList.find(val => val[this.map.value] === item[this.map.value]) | |
| 336 | + if (have !== undefined) { | |
| 337 | + item.disabled = true | |
| 338 | + } | |
| 339 | + } | |
| 340 | + | |
| 341 | + if (selectList.length >= max && max !== '') { | |
| 342 | + let have = selectList.find(val => val[this.map.value] === item[this.map.value]) | |
| 343 | + if (have === undefined) { | |
| 344 | + item.disabled = true | |
| 345 | + } | |
| 346 | + } | |
| 347 | + } | |
| 348 | + this.setStyles(item, index) | |
| 349 | + list[index] = item | |
| 350 | + }) | |
| 351 | + return list | |
| 352 | + }, | |
| 353 | + /** | |
| 354 | + * 设置 class | |
| 355 | + * @param {Object} item | |
| 356 | + * @param {Object} index | |
| 357 | + */ | |
| 358 | + setStyles(item, index) { | |
| 359 | + // 设置自定义样式 | |
| 360 | + item.styleBackgroud = this.setStyleBackgroud(item) | |
| 361 | + item.styleIcon = this.setStyleIcon(item) | |
| 362 | + item.styleIconText = this.setStyleIconText(item) | |
| 363 | + item.styleRightIcon = this.setStyleRightIcon(item) | |
| 364 | + }, | |
| 365 | + | |
| 366 | + /** | |
| 367 | + * 获取选中值 | |
| 368 | + * @param {Object} range | |
| 369 | + */ | |
| 370 | + getSelectedValue(range) { | |
| 371 | + if (!this.multiple) return this.dataValue | |
| 372 | + let selectedArr = [] | |
| 373 | + range.forEach((item) => { | |
| 374 | + if (item.selected) { | |
| 375 | + selectedArr.push(item[this.map.value]) | |
| 376 | + } | |
| 377 | + }) | |
| 378 | + return this.dataValue.length > 0 ? this.dataValue : selectedArr | |
| 379 | + }, | |
| 380 | + | |
| 381 | + /** | |
| 382 | + * 设置背景样式 | |
| 383 | + */ | |
| 384 | + setStyleBackgroud(item) { | |
| 385 | + let styles = {} | |
| 386 | + let selectedColor = this.selectedColor?this.selectedColor:'#2979ff' | |
| 387 | + if (this.mode !== 'list') { | |
| 388 | + styles['border-color'] = item.selected?selectedColor:'#DCDFE6' | |
| 389 | + } | |
| 390 | + if (this.mode === 'tag') { | |
| 391 | + styles['background-color'] = item.selected? selectedColor:'#f5f5f5' | |
| 392 | + } | |
| 393 | + let classles = '' | |
| 394 | + for (let i in styles) { | |
| 395 | + classles += `${i}:${styles[i]};` | |
| 396 | + } | |
| 397 | + return classles | |
| 398 | + }, | |
| 399 | + setStyleIcon(item) { | |
| 400 | + let styles = {} | |
| 401 | + let classles = '' | |
| 402 | + let selectedColor = this.selectedColor?this.selectedColor:'#2979ff' | |
| 403 | + styles['background-color'] = item.selected?selectedColor:'#fff' | |
| 404 | + styles['border-color'] = item.selected?selectedColor:'#DCDFE6' | |
| 405 | + | |
| 406 | + if(!item.selected && item.disabled){ | |
| 407 | + styles['background-color'] = '#F2F6FC' | |
| 408 | + styles['border-color'] = item.selected?selectedColor:'#DCDFE6' | |
| 409 | + } | |
| 410 | + | |
| 411 | + for (let i in styles) { | |
| 412 | + classles += `${i}:${styles[i]};` | |
| 413 | + } | |
| 414 | + return classles | |
| 415 | + }, | |
| 416 | + setStyleIconText(item) { | |
| 417 | + let styles = {} | |
| 418 | + let classles = '' | |
| 419 | + let selectedColor = this.selectedColor?this.selectedColor:'#2979ff' | |
| 420 | + if (this.mode === 'tag') { | |
| 421 | + styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:'#fff'):'#666' | |
| 422 | + } else { | |
| 423 | + styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:selectedColor):'#666' | |
| 424 | + } | |
| 425 | + if(!item.selected && item.disabled){ | |
| 426 | + styles.color = '#999' | |
| 427 | + } | |
| 428 | + | |
| 429 | + for (let i in styles) { | |
| 430 | + classles += `${i}:${styles[i]};` | |
| 431 | + } | |
| 432 | + return classles | |
| 433 | + }, | |
| 434 | + setStyleRightIcon(item) { | |
| 435 | + let styles = {} | |
| 436 | + let classles = '' | |
| 437 | + if (this.mode === 'list') { | |
| 438 | + styles['border-color'] = item.selected?this.styles.selectedColor:'#DCDFE6' | |
| 439 | + } | |
| 440 | + for (let i in styles) { | |
| 441 | + classles += `${i}:${styles[i]};` | |
| 442 | + } | |
| 443 | + | |
| 444 | + return classles | |
| 445 | + } | |
| 446 | + } | |
| 447 | + } | |
| 448 | +</script> | |
| 449 | + | |
| 450 | +<style lang="scss"> | |
| 451 | + $checked-color: #2979ff; | |
| 452 | + $border-color: #DCDFE6; | |
| 453 | + $disable:0.4; | |
| 454 | + | |
| 455 | + @mixin flex { | |
| 456 | + /* #ifndef APP-NVUE */ | |
| 457 | + display: flex; | |
| 458 | + /* #endif */ | |
| 459 | + } | |
| 460 | + | |
| 461 | + .uni-data-loading { | |
| 462 | + @include flex; | |
| 463 | + flex-direction: row; | |
| 464 | + justify-content: center; | |
| 465 | + align-items: center; | |
| 466 | + height: 36px; | |
| 467 | + padding-left: 10px; | |
| 468 | + color: #999; | |
| 469 | + } | |
| 470 | + | |
| 471 | + .uni-data-checklist { | |
| 472 | + position: relative; | |
| 473 | + z-index: 0; | |
| 474 | + flex: 1; | |
| 475 | + // 多选样式 | |
| 476 | + .checklist-group { | |
| 477 | + @include flex; | |
| 478 | + flex-direction: row; | |
| 479 | + flex-wrap: wrap; | |
| 480 | + | |
| 481 | + &.is-list { | |
| 482 | + flex-direction: column; | |
| 483 | + } | |
| 484 | + | |
| 485 | + .checklist-box { | |
| 486 | + @include flex; | |
| 487 | + flex-direction: row; | |
| 488 | + align-items: center; | |
| 489 | + position: relative; | |
| 490 | + margin: 5px 0; | |
| 491 | + margin-right: 25px; | |
| 492 | + | |
| 493 | + .hidden { | |
| 494 | + position: absolute; | |
| 495 | + opacity: 0; | |
| 496 | + } | |
| 497 | + | |
| 498 | + // 文字样式 | |
| 499 | + .checklist-content { | |
| 500 | + @include flex; | |
| 501 | + flex: 1; | |
| 502 | + flex-direction: row; | |
| 503 | + align-items: center; | |
| 504 | + justify-content: space-between; | |
| 505 | + .checklist-text { | |
| 506 | + font-size: 14px; | |
| 507 | + color: #666; | |
| 508 | + margin-left: 5px; | |
| 509 | + line-height: 14px; | |
| 510 | + } | |
| 511 | + | |
| 512 | + .checkobx__list { | |
| 513 | + border-right-width: 1px; | |
| 514 | + border-right-color: #007aff; | |
| 515 | + border-right-style: solid; | |
| 516 | + border-bottom-width:1px; | |
| 517 | + border-bottom-color: #007aff; | |
| 518 | + border-bottom-style: solid; | |
| 519 | + height: 12px; | |
| 520 | + width: 6px; | |
| 521 | + left: -5px; | |
| 522 | + transform-origin: center; | |
| 523 | + transform: rotate(45deg); | |
| 524 | + opacity: 0; | |
| 525 | + } | |
| 526 | + } | |
| 527 | + | |
| 528 | + // 多选样式 | |
| 529 | + .checkbox__inner { | |
| 530 | + /* #ifndef APP-NVUE */ | |
| 531 | + flex-shrink: 0; | |
| 532 | + box-sizing: border-box; | |
| 533 | + /* #endif */ | |
| 534 | + position: relative; | |
| 535 | + width: 16px; | |
| 536 | + height: 16px; | |
| 537 | + border: 1px solid $border-color; | |
| 538 | + border-radius: 4px; | |
| 539 | + background-color: #fff; | |
| 540 | + z-index: 1; | |
| 541 | + .checkbox__inner-icon { | |
| 542 | + position: absolute; | |
| 543 | + /* #ifdef APP-NVUE */ | |
| 544 | + top: 2px; | |
| 545 | + /* #endif */ | |
| 546 | + /* #ifndef APP-NVUE */ | |
| 547 | + top: 1px; | |
| 548 | + /* #endif */ | |
| 549 | + left: 5px; | |
| 550 | + height: 8px; | |
| 551 | + width: 4px; | |
| 552 | + border-right-width: 1px; | |
| 553 | + border-right-color: #fff; | |
| 554 | + border-right-style: solid; | |
| 555 | + border-bottom-width:1px ; | |
| 556 | + border-bottom-color: #fff; | |
| 557 | + border-bottom-style: solid; | |
| 558 | + opacity: 0; | |
| 559 | + transform-origin: center; | |
| 560 | + transform: rotate(40deg); | |
| 561 | + } | |
| 562 | + } | |
| 563 | + | |
| 564 | + // 单选样式 | |
| 565 | + .radio__inner { | |
| 566 | + @include flex; | |
| 567 | + /* #ifndef APP-NVUE */ | |
| 568 | + flex-shrink: 0; | |
| 569 | + box-sizing: border-box; | |
| 570 | + /* #endif */ | |
| 571 | + justify-content: center; | |
| 572 | + align-items: center; | |
| 573 | + position: relative; | |
| 574 | + width: 16px; | |
| 575 | + height: 16px; | |
| 576 | + border: 1px solid $border-color; | |
| 577 | + border-radius: 16px; | |
| 578 | + background-color: #fff; | |
| 579 | + z-index: 1; | |
| 580 | + | |
| 581 | + .radio__inner-icon { | |
| 582 | + width: 8px; | |
| 583 | + height: 8px; | |
| 584 | + border-radius: 10px; | |
| 585 | + opacity: 0; | |
| 586 | + } | |
| 587 | + } | |
| 588 | + | |
| 589 | + // 默认样式 | |
| 590 | + &.is--default { | |
| 591 | + | |
| 592 | + // 禁用 | |
| 593 | + &.is-disable { | |
| 594 | + /* #ifdef H5 */ | |
| 595 | + cursor: not-allowed; | |
| 596 | + /* #endif */ | |
| 597 | + .checkbox__inner { | |
| 598 | + background-color: #F2F6FC; | |
| 599 | + border-color: $border-color; | |
| 600 | + /* #ifdef H5 */ | |
| 601 | + cursor: not-allowed; | |
| 602 | + /* #endif */ | |
| 603 | + } | |
| 604 | + | |
| 605 | + .radio__inner { | |
| 606 | + background-color: #F2F6FC; | |
| 607 | + border-color: $border-color; | |
| 608 | + } | |
| 609 | + .checklist-text { | |
| 610 | + color: #999; | |
| 611 | + } | |
| 612 | + } | |
| 613 | + | |
| 614 | + // 选中 | |
| 615 | + &.is-checked { | |
| 616 | + .checkbox__inner { | |
| 617 | + border-color: $checked-color; | |
| 618 | + background-color: $checked-color; | |
| 619 | + | |
| 620 | + .checkbox__inner-icon { | |
| 621 | + opacity: 1; | |
| 622 | + transform: rotate(45deg); | |
| 623 | + } | |
| 624 | + } | |
| 625 | + .radio__inner { | |
| 626 | + border-color: $checked-color; | |
| 627 | + .radio__inner-icon { | |
| 628 | + opacity: 1; | |
| 629 | + background-color: $checked-color; | |
| 630 | + } | |
| 631 | + } | |
| 632 | + .checklist-text { | |
| 633 | + color: $checked-color; | |
| 634 | + } | |
| 635 | + // 选中禁用 | |
| 636 | + &.is-disable { | |
| 637 | + .checkbox__inner { | |
| 638 | + opacity: $disable; | |
| 639 | + } | |
| 640 | + | |
| 641 | + .checklist-text { | |
| 642 | + opacity: $disable; | |
| 643 | + } | |
| 644 | + .radio__inner { | |
| 645 | + opacity: $disable; | |
| 646 | + } | |
| 647 | + } | |
| 648 | + } | |
| 649 | + } | |
| 650 | + | |
| 651 | + // 按钮样式 | |
| 652 | + &.is--button { | |
| 653 | + margin-right: 10px; | |
| 654 | + padding: 5px 10px; | |
| 655 | + border: 1px $border-color solid; | |
| 656 | + border-radius: 3px; | |
| 657 | + transition: border-color 0.2s; | |
| 658 | + | |
| 659 | + // 禁用 | |
| 660 | + &.is-disable { | |
| 661 | + /* #ifdef H5 */ | |
| 662 | + cursor: not-allowed; | |
| 663 | + /* #endif */ | |
| 664 | + border: 1px #eee solid; | |
| 665 | + opacity: $disable; | |
| 666 | + .checkbox__inner { | |
| 667 | + background-color: #F2F6FC; | |
| 668 | + border-color: $border-color; | |
| 669 | + /* #ifdef H5 */ | |
| 670 | + cursor: not-allowed; | |
| 671 | + /* #endif */ | |
| 672 | + } | |
| 673 | + .radio__inner { | |
| 674 | + background-color: #F2F6FC; | |
| 675 | + border-color: $border-color; | |
| 676 | + /* #ifdef H5 */ | |
| 677 | + cursor: not-allowed; | |
| 678 | + /* #endif */ | |
| 679 | + } | |
| 680 | + .checklist-text { | |
| 681 | + color: #999; | |
| 682 | + } | |
| 683 | + } | |
| 684 | + | |
| 685 | + &.is-checked { | |
| 686 | + border-color: $checked-color; | |
| 687 | + .checkbox__inner { | |
| 688 | + border-color: $checked-color; | |
| 689 | + background-color: $checked-color; | |
| 690 | + .checkbox__inner-icon { | |
| 691 | + opacity: 1; | |
| 692 | + transform: rotate(45deg); | |
| 693 | + } | |
| 694 | + } | |
| 695 | + | |
| 696 | + .radio__inner { | |
| 697 | + border-color: $checked-color; | |
| 698 | + | |
| 699 | + .radio__inner-icon { | |
| 700 | + opacity: 1; | |
| 701 | + background-color: $checked-color; | |
| 702 | + } | |
| 703 | + } | |
| 704 | + | |
| 705 | + .checklist-text { | |
| 706 | + color: $checked-color; | |
| 707 | + } | |
| 708 | + | |
| 709 | + // 选中禁用 | |
| 710 | + &.is-disable { | |
| 711 | + opacity: $disable; | |
| 712 | + } | |
| 713 | + } | |
| 714 | + } | |
| 715 | + | |
| 716 | + // 标签样式 | |
| 717 | + &.is--tag { | |
| 718 | + margin-right: 10px; | |
| 719 | + padding: 5px 10px; | |
| 720 | + border: 1px $border-color solid; | |
| 721 | + border-radius: 3px; | |
| 722 | + background-color: #f5f5f5; | |
| 723 | + | |
| 724 | + .checklist-text { | |
| 725 | + margin: 0; | |
| 726 | + color: #666; | |
| 727 | + } | |
| 728 | + | |
| 729 | + // 禁用 | |
| 730 | + &.is-disable { | |
| 731 | + /* #ifdef H5 */ | |
| 732 | + cursor: not-allowed; | |
| 733 | + /* #endif */ | |
| 734 | + opacity: $disable; | |
| 735 | + } | |
| 736 | + | |
| 737 | + &.is-checked { | |
| 738 | + background-color: $checked-color; | |
| 739 | + border-color: $checked-color; | |
| 740 | + | |
| 741 | + .checklist-text { | |
| 742 | + color: #fff; | |
| 743 | + } | |
| 744 | + } | |
| 745 | + } | |
| 746 | + // 列表样式 | |
| 747 | + &.is--list { | |
| 748 | + /* #ifndef APP-NVUE */ | |
| 749 | + display: flex; | |
| 750 | + /* #endif */ | |
| 751 | + padding: 10px 15px; | |
| 752 | + padding-left: 0; | |
| 753 | + margin: 0; | |
| 754 | + | |
| 755 | + &.is-list-border { | |
| 756 | + border-top: 1px #eee solid; | |
| 757 | + } | |
| 758 | + | |
| 759 | + // 禁用 | |
| 760 | + &.is-disable { | |
| 761 | + /* #ifdef H5 */ | |
| 762 | + cursor: not-allowed; | |
| 763 | + /* #endif */ | |
| 764 | + .checkbox__inner { | |
| 765 | + background-color: #F2F6FC; | |
| 766 | + border-color: $border-color; | |
| 767 | + /* #ifdef H5 */ | |
| 768 | + cursor: not-allowed; | |
| 769 | + /* #endif */ | |
| 770 | + } | |
| 771 | + .checklist-text { | |
| 772 | + color: #999; | |
| 773 | + } | |
| 774 | + } | |
| 775 | + | |
| 776 | + &.is-checked { | |
| 777 | + .checkbox__inner { | |
| 778 | + border-color: $checked-color; | |
| 779 | + background-color: $checked-color; | |
| 780 | + | |
| 781 | + .checkbox__inner-icon { | |
| 782 | + opacity: 1; | |
| 783 | + transform: rotate(45deg); | |
| 784 | + } | |
| 785 | + } | |
| 786 | + .radio__inner { | |
| 787 | + .radio__inner-icon { | |
| 788 | + opacity: 1; | |
| 789 | + } | |
| 790 | + } | |
| 791 | + .checklist-text { | |
| 792 | + color: $checked-color; | |
| 793 | + } | |
| 794 | + | |
| 795 | + .checklist-content { | |
| 796 | + .checkobx__list { | |
| 797 | + opacity: 1; | |
| 798 | + border-color: $checked-color; | |
| 799 | + } | |
| 800 | + } | |
| 801 | + | |
| 802 | + // 选中禁用 | |
| 803 | + &.is-disable { | |
| 804 | + .checkbox__inner { | |
| 805 | + opacity: $disable; | |
| 806 | + } | |
| 807 | + | |
| 808 | + .checklist-text { | |
| 809 | + opacity: $disable; | |
| 810 | + } | |
| 811 | + } | |
| 812 | + } | |
| 813 | + } | |
| 814 | + } | |
| 815 | + } | |
| 816 | + } | |
| 817 | +</style> | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-data-checkbox/package.json
0 → 100644
| 1 | +{ | |
| 2 | + "id": "uni-data-checkbox", | |
| 3 | + "displayName": "uni-data-checkbox 数据选择器", | |
| 4 | + "version": "1.0.2", | |
| 5 | + "description": "通过数据驱动的单选框和复选框", | |
| 6 | + "keywords": [ | |
| 7 | + "uni-ui", | |
| 8 | + "checkbox", | |
| 9 | + "单选", | |
| 10 | + "多选", | |
| 11 | + "单选多选" | |
| 12 | +], | |
| 13 | + "repository": "https://github.com/dcloudio/uni-ui", | |
| 14 | + "engines": { | |
| 15 | + "HBuilderX": "^3.1.1" | |
| 16 | + }, | |
| 17 | + "directories": { | |
| 18 | + "example": "../../temps/example_temps" | |
| 19 | + }, | |
| 20 | + "dcloudext": { | |
| 21 | + "category": [ | |
| 22 | + "前端组件", | |
| 23 | + "通用组件" | |
| 24 | + ], | |
| 25 | + "sale": { | |
| 26 | + "regular": { | |
| 27 | + "price": "0.00" | |
| 28 | + }, | |
| 29 | + "sourcecode": { | |
| 30 | + "price": "0.00" | |
| 31 | + } | |
| 32 | + }, | |
| 33 | + "contact": { | |
| 34 | + "qq": "" | |
| 35 | + }, | |
| 36 | + "declaration": { | |
| 37 | + "ads": "无", | |
| 38 | + "data": "无", | |
| 39 | + "permissions": "无" | |
| 40 | + }, | |
| 41 | + "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" | |
| 42 | + }, | |
| 43 | + "uni_modules": { | |
| 44 | + "dependencies": ["uni-load-more","uni-scss"], | |
| 45 | + "encrypt": [], | |
| 46 | + "platforms": { | |
| 47 | + "cloud": { | |
| 48 | + "tcb": "y", | |
| 49 | + "aliyun": "y" | |
| 50 | + }, | |
| 51 | + "client": { | |
| 52 | + "App": { | |
| 53 | + "app-vue": "y", | |
| 54 | + "app-nvue": "y" | |
| 55 | + }, | |
| 56 | + "H5-mobile": { | |
| 57 | + "Safari": "y", | |
| 58 | + "Android Browser": "y", | |
| 59 | + "微信浏览器(Android)": "y", | |
| 60 | + "QQ浏览器(Android)": "y" | |
| 61 | + }, | |
| 62 | + "H5-pc": { | |
| 63 | + "Chrome": "y", | |
| 64 | + "IE": "y", | |
| 65 | + "Edge": "y", | |
| 66 | + "Firefox": "y", | |
| 67 | + "Safari": "y" | |
| 68 | + }, | |
| 69 | + "小程序": { | |
| 70 | + "微信": "y", | |
| 71 | + "阿里": "y", | |
| 72 | + "百度": "y", | |
| 73 | + "字节跳动": "y", | |
| 74 | + "QQ": "y" | |
| 75 | + }, | |
| 76 | + "快应用": { | |
| 77 | + "华为": "u", | |
| 78 | + "联盟": "u" | |
| 79 | + }, | |
| 80 | + "Vue": { | |
| 81 | + "vue2": "y", | |
| 82 | + "vue3": "y" | |
| 83 | + } | |
| 84 | + } | |
| 85 | + } | |
| 86 | + } | |
| 87 | +} | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-data-checkbox/readme.md
0 → 100644
| 1 | + | |
| 2 | + | |
| 3 | +## DataCheckbox 数据驱动的单选复选框 | |
| 4 | +> **组件名:uni-data-checkbox** | |
| 5 | +> 代码块: `uDataCheckbox` | |
| 6 | + | |
| 7 | + | |
| 8 | +本组件是基于uni-app基础组件checkbox的封装。本组件要解决问题包括: | |
| 9 | + | |
| 10 | +1. 数据绑定型组件:给本组件绑定一个data,会自动渲染一组候选内容。再以往,开发者需要编写不少代码实现类似功能 | |
| 11 | +2. 自动的表单校验:组件绑定了data,且符合[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)组件的表单校验规范,搭配使用会自动实现表单校验 | |
| 12 | +3. 本组件合并了单选多选 | |
| 13 | +4. 本组件有若干风格选择,如普通的单选多选框、并列button风格、tag风格。开发者可以快速选择需要的风格。但作为一个封装组件,样式代码虽然不用自己写了,却会牺牲一定的样式自定义性 | |
| 14 | + | |
| 15 | +在uniCloud开发中,`DB Schema`中配置了enum枚举等类型后,在web控制台的[自动生成表单](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)功能中,会自动生成``uni-data-checkbox``组件并绑定好data | |
| 16 | + | |
| 17 | +### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox) | |
| 18 | +#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 | |
| 0 | 19 | \ No newline at end of file | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-data-picker/changelog.md
0 → 100644
| 1 | +## 1.0.7(2022-07-06) | |
| 2 | +- 优化 pc端图标位置不正确的问题 | |
| 3 | +## 1.0.6(2022-07-05) | |
| 4 | +- 优化 显示样式 | |
| 5 | +## 1.0.5(2022-07-04) | |
| 6 | +- 修复 uni-data-picker 在 uni-forms-item 中宽度不正确的bug | |
| 7 | +## 1.0.4(2022-04-19) | |
| 8 | +- 修复 字节小程序 本地数据无法选择下一级的Bug | |
| 9 | +## 1.0.3(2022-02-25) | |
| 10 | +- 修复 nvue 不支持的 v-show 的 bug | |
| 11 | +## 1.0.2(2022-02-25) | |
| 12 | +- 修复 条件编译 nvue 不支持的 css 样式 | |
| 13 | +## 1.0.1(2021-11-23) | |
| 14 | +- 修复 由上个版本引发的map、v-model等属性不生效的bug | |
| 15 | +## 1.0.0(2021-11-19) | |
| 16 | +- 优化 组件 UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |
| 17 | +- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-data-picker](https://uniapp.dcloud.io/component/uniui/uni-data-picker) | |
| 18 | +## 0.4.9(2021-10-28) | |
| 19 | +- 修复 VUE2 v-model 概率无效的 bug | |
| 20 | +## 0.4.8(2021-10-27) | |
| 21 | +- 修复 v-model 概率无效的 bug | |
| 22 | +## 0.4.7(2021-10-25) | |
| 23 | +- 新增 属性 spaceInfo 服务空间配置 HBuilderX 3.2.11+ | |
| 24 | +- 修复 树型 uniCloud 数据类型为 int 时报错的 bug | |
| 25 | +## 0.4.6(2021-10-19) | |
| 26 | +- 修复 非 VUE3 v-model 为 0 时无法选中的 bug | |
| 27 | +## 0.4.5(2021-09-26) | |
| 28 | +- 新增 清除已选项的功能(通过 clearIcon 属性配置是否显示按钮),同时提供 clear 方法以供调用,二者等效 | |
| 29 | +- 修复 readonly 为 true 时报错的 bug | |
| 30 | +## 0.4.4(2021-09-26) | |
| 31 | +- 修复 上一版本造成的 map 属性失效的 bug | |
| 32 | +- 新增 ellipsis 属性,支持配置 tab 选项长度过长时是否自动省略 | |
| 33 | +## 0.4.3(2021-09-24) | |
| 34 | +- 修复 某些情况下级联未触发的 bug | |
| 35 | +## 0.4.2(2021-09-23) | |
| 36 | +- 新增 提供 show 和 hide 方法,开发者可以通过 ref 调用 | |
| 37 | +- 新增 选项内容过长自动添加省略号 | |
| 38 | +## 0.4.1(2021-09-15) | |
| 39 | +- 新增 map 属性 字段映射,将 text/value 映射到数据中的其他字段 | |
| 40 | +## 0.4.0(2021-07-13) | |
| 41 | +- 组件兼容 vue3,如何创建 vue3 项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |
| 42 | +## 0.3.5(2021-06-04) | |
| 43 | +- 修复 无法加载云端数据的问题 | |
| 44 | +## 0.3.4(2021-05-28) | |
| 45 | +- 修复 v-model 无效问题 | |
| 46 | +- 修复 loaddata 为空数据组时加载时间过长问题 | |
| 47 | +- 修复 上个版本引出的本地数据无法选择带有 children 的 2 级节点 | |
| 48 | +## 0.3.3(2021-05-12) | |
| 49 | +- 新增 组件示例地址 | |
| 50 | +## 0.3.2(2021-04-22) | |
| 51 | +- 修复 非树形数据有 where 属性查询报错的问题 | |
| 52 | +## 0.3.1(2021-04-15) | |
| 53 | +- 修复 本地数据概率无法回显时问题 | |
| 54 | +## 0.3.0(2021-04-07) | |
| 55 | +- 新增 支持云端非树形表结构数据 | |
| 56 | +- 修复 根节点 parent_field 字段等于 null 时选择界面错乱问题 | |
| 57 | +## 0.2.0(2021-03-15) | |
| 58 | +- 修复 nodeclick、popupopened、popupclosed 事件无法触发的问题 | |
| 59 | +## 0.1.9(2021-03-09) | |
| 60 | +- 修复 微信小程序某些情况下无法选择的问题 | |
| 61 | +## 0.1.8(2021-02-05) | |
| 62 | +- 优化 部分样式在 nvue 上的兼容表现 | |
| 63 | +## 0.1.7(2021-02-05) | |
| 64 | +- 调整为 uni_modules 目录规范 | ... | ... |
yudao-ui-admin-uniapp/uni_modules/uni-data-picker/components/uni-data-picker/keypress.js
0 → 100644
| 1 | +// #ifdef H5 | |
| 2 | +export default { | |
| 3 | + name: 'Keypress', | |
| 4 | + props: { | |
| 5 | + disable: { | |
| 6 | + type: Boolean, | |
| 7 | + default: false | |
| 8 | + } | |
| 9 | + }, | |
| 10 | + mounted () { | |
| 11 | + const keyNames = { | |
| 12 | + esc: ['Esc', 'Escape'], | |
| 13 | + tab: 'Tab', | |
| 14 | + enter: 'Enter', | |
| 15 | + space: [' ', 'Spacebar'], | |
| 16 | + up: ['Up', 'ArrowUp'], | |
| 17 | + left: ['Left', 'ArrowLeft'], | |
| 18 | + right: ['Right', 'ArrowRight'], | |
| 19 | + down: ['Down', 'ArrowDown'], | |
| 20 | + delete: ['Backspace', 'Delete', 'Del'] | |
| 21 | + } | |
| 22 | + const listener = ($event) => { | |
| 23 | + if (this.disable) { | |
| 24 | + return | |
| 25 | + } | |
| 26 | + const keyName = Object.keys(keyNames).find(key => { | |
| 27 | + const keyName = $event.key | |
| 28 | + const value = keyNames[key] | |
| 29 | + return value === keyName || (Array.isArray(value) && value.includes(keyName)) | |
| 30 | + }) | |
| 31 | + if (keyName) { | |
| 32 | + // 避免和其他按键事件冲突 | |
| 33 | + setTimeout(() => { | |
| 34 | + this.$emit(keyName, {}) | |
| 35 | + }, 0) | |
| 36 | + } | |
| 37 | + } | |
| 38 | + document.addEventListener('keyup', listener) | |
| 39 | + this.$once('hook:beforeDestroy', () => { | |
| 40 | + document.removeEventListener('keyup', listener) | |
| 41 | + }) | |
| 42 | + }, | |
| 43 | + render: () => {} | |
| 44 | +} | |
| 45 | +// #endif | ... | ... |