提交 b0a1fae4 authored 作者: 刘旭's avatar 刘旭

提交现有代码

上级
# Windows
[Dd]esktop.ini
Thumbs.db
$RECYCLE.BIN/
# macOS
.DS_Store
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
# Node.js
node_modules/
dist
.git
.idea
.hbuilderx
*.iml
pnpm-lock.yaml
# 默认忽略的文件
/shelf/
/workspace.xml
# 基于编辑器的 HTTP 客户端请求
/httpRequests/
# mini-shop
#### Description
基于uniapp构建的小程序商城
#### Software Architecture
Software architecture description
#### Installation
1. xxxx
2. xxxx
3. xxxx
#### Instructions
1. xxxx
2. xxxx
3. xxxx
#### Contribution
1. Fork the repository
2. Create Feat_xxx branch
3. Commit your code
4. Create Pull Request
# mini-shop
#### 介绍
永兴达h5商城项目
#### 软件架构
uniapp(vue3) + vite + typescript + uni-ui
#### 安装教程
1. xxxx
2. xxxx
3. xxxx
#### 使用说明
1. xxxx
2. xxxx
3. xxxx
#### 参与贡献
1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request
[core]
bare = true
repositoryformatversion = 0
filemode = false
symlinks = false
ignorecase = true
Unnamed repository; edit this file 'description' to name the repository.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="" type="png/x-icon" />
<link rel="stylesheet" href="./src/static/iconfont/iconfont.css" />
<script>
var coverSupport =
'CSS' in window &&
typeof CSS.supports === 'function' &&
(CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
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' : '') +
'" />'
)
</script>
</head>
<page>
<div id="app"><!--app-html--></div>
<script type="module" src="/src/main.ts"></script>
<!-- <script src="https://webapi.amap.com/maps?v=2.0&key=c1369e6bb23dc1ebe480ac518a91ddac"></script> -->
</page>
</html>
{
"name": "XBRLPX-h5",
"version": "0.0.0",
"scripts": {
"dev": "yarn dev:h5",
"dev:h5": "uni preview --open",
"dev:h5:ssr": "uni --ssr",
"dev:mp-weixin": "uni -p mp-weixin",
"build:app": "uni build -p app",
"build:h5": "uni build",
"build:h5:ssr": "uni build --ssr",
"build:mp-weixin": "uni build -p mp-weixin"
},
"dependencies": {
"@dcloudio/uni-app": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-app-plus": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-components": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-h5": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-mp-alipay": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-mp-baidu": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-mp-lark": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-mp-qq": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-mp-weixin": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3061620221230002",
"dayjs": "^1.11.8",
"node-sass": "^7.0.1",
"pinia": "^2.0.21",
"pinia-plugin-persistedstate": "^3.1.0",
"vk-uview-ui": "^1.4.8",
"vue": "^3.2.45",
"vue-i18n": "^9.1.9"
},
"devDependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@dcloudio/types": "^3.2.7",
"@dcloudio/uni-automator": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-cli-shared": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-stacktracey": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-ui": "^1.4.20",
"@dcloudio/vite-plugin-uni": "3.0.0-alpha-3061620221230002",
"@types/node": "^18.7.14",
"@vue/tsconfig": "^0.1.3",
"sass": "^1.54.8",
"sass-loader": "^13.0.2",
"typescript": "^4.9.4",
"unplugin-auto-import": "^0.16.6",
"unplugin-vue-components": "^0.25.1",
"vite": "4.0.4",
"vite-plugin-svg-icons": "^2.0.1"
}
}
<script setup lang="ts">
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
</script>
<style lang="scss">
@import './static/iconfont.css';
@import './scss/common.scss';
@import "vk-uview-ui/index.scss";
.uni-tabbar {
max-width: 420px;
margin: 0 auto;
border-left: #f6f6f6 solid 1px;
border-right: #f6f6f6 solid 1px;
}
page {
background: #f5f5f5;
}
</style>
import request from '@/utils/request';
// 获取发布菜单
export const getMenuTree = () => request('/lowcodeplatform-system/center/permission/getMenuTree', 'GET');
export const getMenuList = () => request('/lowcodeplatform-system/user/getMenuList', 'POST');
export const getBusinessList = (data: any) =>
request('/lowcodeplatform-system/center/business/list', 'POST', data);
export const getMetadataList = () => request('/lowcodeplatform-system/center/metadata/list', 'GET');
// 获取元数据
export const getMetadata = (formId: string) =>
request('/lowcodeplatform-system/center/metadata/detail', 'GET', { formId });
// 创建表单数据
export const createBusiness = (data: any) =>
request('/lowcodeplatform-system/center/business/create', 'POST', data);
export const getUserParameter = (formId: string) =>
request('/lowcodeplatform-system/center/business/getUserParameter', 'GET', { formId });
export const saveUserParameter = (data: any) =>
request('/lowcodeplatform-system/center/business/saveUserParameter', 'POST', data);
// 获取序列号扫描数据
export const getDataBySerialNumber = (data: any) =>
request('/wms-system/serialNumber/getDataBySerialNumber', 'GET', data);
// 获取打印信息
export const getPrintData = (data: any) =>
request('/wms-system/labelRule/print/serial', 'POST', data);
// 获取打印信息
export const createBatchBusiness = (data: any) =>
request('/lowcodeplatform-system/center/business/createBatch', 'POST', data);
// 获取序列化
export const getBillSerialNumber = (data: any) =>
request('/wms-system/serialNumber/getBillSerialNumber', 'GET', data);
// 获取条码规则
export const getAnalysis = (data: any) =>
request('/wms-system/barcode/analysis', 'GET', data);
// 获取规则选单
export const getRuleSelection = (lowFormId: string) =>
request('/lowcodeplatform-system/center/bill/transform/rule/selection', 'GET', { lowFormId });
// 获取规则选单
export const changeDataById = (data: any) =>
request('/lowcodeplatform-system/center/bill/transform/change/databyid', 'POST', data);
// 获取明细范围
export const getDetailList = (data: any) =>
request('/lowcodeplatform-system/center/business/detailList', 'POST', data);
// 获取合并数量操作
export const getEmptyList = (data: any) =>
request('/lowcodeplatform-system/center/business/empty', 'POST', data);
/**
* @brief 提交下推操作保存为已审核
* @param idsBill 保存状态的id
* @param operationKey audit 自动审核-》已审核 submit 提交-》变成审核中
* @return
*/
export const submitBusiness = (data: any) =>
request('/lowcodeplatform-system/center/business/submit', 'POST', data);
export const billIdGroupSerial = (data: any) =>
request('wms-system/serialNumber/billIdGroupSerial', 'POST', data);
// 判断是否已创建
export const getBillBySerialNumber = (data: any) =>
request('/wms-system/serialNumber/getBillBySerialNumber', 'GET', data);
import request from '@/utils/request'
// 登录
export const login = (data: any) => request('/lowcodeplatform-system/auth/login/app', 'POST', data)
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
const computed: typeof import('vue')['computed']
const createApp: typeof import('vue')['createApp']
const createPinia: typeof import('pinia')['createPinia']
const customRef: typeof import('vue')['customRef']
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
const defineComponent: typeof import('vue')['defineComponent']
const defineStore: typeof import('pinia')['defineStore']
const effectScope: typeof import('vue')['effectScope']
const getActivePinia: typeof import('pinia')['getActivePinia']
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
const getCurrentScope: typeof import('vue')['getCurrentScope']
const h: typeof import('vue')['h']
const inject: typeof import('vue')['inject']
const isProxy: typeof import('vue')['isProxy']
const isReactive: typeof import('vue')['isReactive']
const isReadonly: typeof import('vue')['isReadonly']
const isRef: typeof import('vue')['isRef']
const mapActions: typeof import('pinia')['mapActions']
const mapGetters: typeof import('pinia')['mapGetters']
const mapState: typeof import('pinia')['mapState']
const mapStores: typeof import('pinia')['mapStores']
const mapWritableState: typeof import('pinia')['mapWritableState']
const markRaw: typeof import('vue')['markRaw']
const nextTick: typeof import('vue')['nextTick']
const onActivated: typeof import('vue')['onActivated']
const onAddToFavorites: typeof import('@dcloudio/uni-app')['onAddToFavorites']
const onBackPress: typeof import('@dcloudio/uni-app')['onBackPress']
const onBeforeMount: typeof import('vue')['onBeforeMount']
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
const onDeactivated: typeof import('vue')['onDeactivated']
const onError: typeof import('@dcloudio/uni-app')['onError']
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
const onHide: typeof import('@dcloudio/uni-app')['onHide']
const onLaunch: typeof import('@dcloudio/uni-app')['onLaunch']
const onLoad: typeof import('@dcloudio/uni-app')['onLoad']
const onMounted: typeof import('vue')['onMounted']
const onNavigationBarButtonTap: typeof import('@dcloudio/uni-app')['onNavigationBarButtonTap']
const onNavigationBarSearchInputChanged: typeof import('@dcloudio/uni-app')['onNavigationBarSearchInputChanged']
const onNavigationBarSearchInputClicked: typeof import('@dcloudio/uni-app')['onNavigationBarSearchInputClicked']
const onNavigationBarSearchInputConfirmed: typeof import('@dcloudio/uni-app')['onNavigationBarSearchInputConfirmed']
const onNavigationBarSearchInputFocusChanged: typeof import('@dcloudio/uni-app')['onNavigationBarSearchInputFocusChanged']
const onPageNotFound: typeof import('@dcloudio/uni-app')['onPageNotFound']
const onPageScroll: typeof import('@dcloudio/uni-app')['onPageScroll']
const onPullDownRefresh: typeof import('@dcloudio/uni-app')['onPullDownRefresh']
const onReachBottom: typeof import('@dcloudio/uni-app')['onReachBottom']
const onReady: typeof import('@dcloudio/uni-app')['onReady']
const onRenderTracked: typeof import('vue')['onRenderTracked']
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
const onResize: typeof import('@dcloudio/uni-app')['onResize']
const onScopeDispose: typeof import('vue')['onScopeDispose']
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
const onShareAppMessage: typeof import('@dcloudio/uni-app')['onShareAppMessage']
const onShareTimeline: typeof import('@dcloudio/uni-app')['onShareTimeline']
const onShow: typeof import('@dcloudio/uni-app')['onShow']
const onTabItemTap: typeof import('@dcloudio/uni-app')['onTabItemTap']
const onThemeChange: typeof import('@dcloudio/uni-app')['onThemeChange']
const onUnhandledRejection: typeof import('@dcloudio/uni-app')['onUnhandledRejection']
const onUnload: typeof import('@dcloudio/uni-app')['onUnload']
const onUnmounted: typeof import('vue')['onUnmounted']
const onUpdated: typeof import('vue')['onUpdated']
const provide: typeof import('vue')['provide']
const reactive: typeof import('vue')['reactive']
const readonly: typeof import('vue')['readonly']
const ref: typeof import('vue')['ref']
const resolveComponent: typeof import('vue')['resolveComponent']
const setActivePinia: typeof import('pinia')['setActivePinia']
const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
const shallowReactive: typeof import('vue')['shallowReactive']
const shallowReadonly: typeof import('vue')['shallowReadonly']
const shallowRef: typeof import('vue')['shallowRef']
const storeToRefs: typeof import('pinia')['storeToRefs']
const toRaw: typeof import('vue')['toRaw']
const toRef: typeof import('vue')['toRef']
const toRefs: typeof import('vue')['toRefs']
const toValue: typeof import('vue')['toValue']
const triggerRef: typeof import('vue')['triggerRef']
const unref: typeof import('vue')['unref']
const useAttrs: typeof import('vue')['useAttrs']
const useCssModule: typeof import('vue')['useCssModule']
const useCssVars: typeof import('vue')['useCssVars']
const useSlots: typeof import('vue')['useSlots']
const watch: typeof import('vue')['watch']
const watchEffect: typeof import('vue')['watchEffect']
const watchPostEffect: typeof import('vue')['watchPostEffect']
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
}
// for type re-export
declare global {
// @ts-ignore
export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
}
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}
declare module 'vue' {
export interface GlobalComponents {
Header: typeof import('./components/header/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
SvgIcon: typeof import('./components/svgIcon/index.vue')['default']
}
}
<template>
<u-navbar back-text="" :title="title" :is-back="isBack" :back-icon-name="backIconName" title-color="#000000"
:background="{ background }" title-width="400" height="48" back-icon-color="#000000"
@click-left="handleLeftIconClick">
<template #default>
<u-icon :name="backIconName" :size="22" color="#000000" style="padding: 14rpx 14rpx 14rpx 24rpx;"
@tap="handleLeftIconClick" />
</template>
<template #right>
<u-icon :name="iconName" :size="22" color="#000000" style="padding: 14rpx 14rpx 14rpx 24rpx;"
@tap="handleRight" />
</template>
</u-navbar>
<u-action-sheet :list="sheetState.list" v-model="sheetState.show" @click="onConfirm" />
</template>
<script setup lang='ts'>
const props = defineProps({
title: {
type: String,
default: ''
},
backIconName: {
type: String,
default: 'arrow-left'
},
iconName: {
type: String,
default: 'more-dot-fill'
},
background: {
type: String,
default: '#eeeeee'
},
sheetList: {
type: Object,
default: []
},
isBack: {
type: Boolean,
default: false
}
})
const emits = defineEmits(['handleRight', 'goback'])
const handleRight = () => {
sheetState.show = true
// emits('handleRight')
}
// 点击左侧返回图标
const handleLeftIconClick = () => {
uni.navigateBack()
}
const sheetState = reactive({
list: [{
text: '点赞',
color: 'blue',
fontSize: 28,
subText: '感谢您的点赞'
}, {
text: '分享'
}, {
text: '评论'
}],
show: false
})
const onConfirm = (index: number) => {
const item = sheetState.list[index]
console.log(item);
// switch (item.options.operate) {
// case 'save':
// break;
// }
}
</script>
<style lang = "scss" scoped>
:deep(.u-line-1) {
font-weight: bold !important;
font-size: 16px !important;
}
:deep(.u-icon__icon) {
font-size: 20px !important;
font-weight: bold !important;
}
</style>
\ No newline at end of file
<template>
<svg :style="iconStyle" aria-hidden="true" :fill="iconColor">
<use :xlink:href="symbolId" />
</svg>
</template>
<script lang="ts" setup>
import { computed, CSSProperties } from 'vue';
interface SvgProps {
name: string; // 图标名称 ==> 必传
prefix?: string, // 图标的前缀 ==> 非必传(默认为"icon")
iconStyle?: CSSProperties, // 图标的样式 ==> 非必传
iconColor?: string
}
// 接收父组件参数并设置默认值
// withDefaults 作用是给defineProps绑定默认值的api
const props = withDefaults(defineProps<SvgProps>(), {
prefix: 'icon',
iconStyle: () => ({ width: '23px', height: '23px' }),
iconColor: 'pink'
})
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>
\ No newline at end of file
/// <reference types="vite/client" />
declare module '*.vue' {
import { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
export default component
}
import { createSSRApp } from 'vue'
import App from './App.vue'
import uView from 'vk-uview-ui'
import pinia from './store/useStore'
import 'virtual:svg-icons-register'
export function createApp() {
const app = createSSRApp(App)
app.use(uView)
app.use(pinia)
return {
app
}
}
{
"name" : "wms测试",
"appid" : "__UNI__6D85B85",
"description" : "",
"versionName" : "1.0.1",
"versionCode" : "100",
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
"compatible" : {
"ignoreVersion" : true
},
/* 模块配置 */
"modules" : {
"Bluetooth" : {},
"Barcode" : {},
"Geolocation" : {},
"Webview-x5" : {}
},
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.BLUETOOTH\"/>",
"<uses-permission android:name=\"android.permission.BLUETOOTH_ADMIN\"/>",
"<uses-permission android:name=\"android.permission.BLUETOOTH_PRIVILEGED\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.BLUETOOTH\"/>",
"<uses-permission android:name=\"android.permission.BLUETOOTH_ADMIN\"/>"
],
"minSdkVersion" : 21
},
/* ios打包配置 */
"ios" : {
"dSYMs" : false
},
/* SDK配置 */
"sdkConfigs" : {
"ad" : {},
"geolocation" : {
"system" : {
"__platform__" : [ "android" ]
}
}
}
}
},
/* 快应用特有相关 */
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "wx3c4c615b24d3b72b",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false,
"version" : "2"
},
"vueVersion" : "3",
"h5" : {
"template" : "index.html"
}
}
{
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
"^u-(.*)": "vk-uview-ui/components/u-$1/u-$1.vue"
}
},
"pages": [
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "登录",
"navigationStyle": "custom"
}
},
{
"path": "pages/home/index",
"style": {
"navigationBarTitleText": "主页",
"navigationStyle": "custom"
}
},
{
"path": "pages/trainRegistration/index",
"style": {
"navigationBarTitleText": "培训报名",
"navigationStyle": "custom"
}
},
{
"path": "pages/course/index",
"style": {
"navigationBarTitleText": "我的课程",
"navigationStyle": "custom"
}
},
{
"path": "pages/class/index",
"style": {
"navigationBarTitleText": "我的班级",
"navigationStyle": "custom"
}
},
{
"path": "pages/class/courseArrange",
"style": {
"navigationBarTitleText": "课程安排",
"navigationStyle": "custom"
}
},
{
"path": "pages/class/addressBook",
"style": {
"navigationBarTitleText": "班级通讯录",
"navigationStyle": "custom"
}
},
{
"path": "pages/class/evaluate",
"style": {
"navigationBarTitleText": "培训评价",
"navigationStyle": "custom"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#fff",
"backgroundColor": "#ccc"
}
}
<template>
<headers title='班级通讯录' />
<div class='address-book-item-container'>
<uni-search-bar placeholder="姓名/单位/电话" bgColor="#ffffff" clearButton="auto" cancelButton="none"
@confirm="search" />
<text style="margin-bottom: 20rpx; display: block;">为你找到10个的同学</text>
<view>
<block v-for="(item, i) in 6" :key="i">
<addressBookItem />
</block>
</view>
</div>
</template>
<script setup lang='ts'>
import headers from '@/components/header/index.vue'
import addressBookItem from './components/addressBookItem.vue'
const search = (val: string) => {
console.log('我的同学' + val);
}
</script>
<style lang="scss" scoped>
.address-book-item-container {
padding: 0 30rpx;
.uni-searchbar {
padding: 0;
margin: 20rpx 0;
}
}
</style>
\ No newline at end of file
<template>
<div class='address-book-container'>
<u-card :show-head="false" :show-foot="false" margin="0" border-radius="20">
<template #body>
<view class="address-book-content">
<view class="left">
<u-image width="160rpx" height="160rpx" :src="src"></u-image>
<view class="content">
<h4>刘芳芳</h4>
<text class="tel">15611111111</text>
<text>单位:南山区南山街道办</text>
</view>
</view>
<u-button size="mini" type="primary">去评价</u-button>
</view>
</template>
</u-card>
</div>
</template>
<script setup lang='ts'>
import { src } from '@/utils/example';
</script>
<style lang="scss" scoped>
.address-book-container {
margin-bottom: 32rpx;
height: 200rpx;
.address-book-content {
display: flex;
justify-content: space-between;
align-items: center;
.left {
display: flex;
.content {
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-left: 20rpx;
.tel {
margin: 20rpx 0;
}
}
}
uni-button {
margin: 0;
}
}
}
</style>
\ No newline at end of file
<template>
<view class='arrange-item-container'>
<h3>{{ arrangeList.date }}</h3>
<u-card :show-head="false" margin="0">
<template #body>
<view class="arrange-header">
<h3>{{ arrangeList.title }}</h3>
<u-button size="mini" plain :type="arrangeStatus.type">{{ arrangeStatus.detail }}</u-button>
</view>
<view class="item">
<u-icon name="account" />
<text>{{ arrangeList.classTeacher }}</text>
</view>
<view class="item">
<u-icon name="map" />
<text>{{ arrangeList.address }}</text>
</view>
</template>
<template #foot>
<view class="arrange-footer">
<u-icon name="order" />
<text>课程安排</text>
</view>
</template>
</u-card>
</view>
</template>
<script setup lang='ts'>
const props = defineProps({
arrangeList: {
type: Array,
default: () => []
} as any
})
const arrangeDetail = ['未开始', '上课中', '已下课']
const arrangeStatus = computed(() => {
const statusObj = {
type: '',
detail: ''
};
switch (props.arrangeList.type) {
case 0:
statusObj.type = 'warning';
break;
case 1:
statusObj.type = 'primary';
break;
case 2:
statusObj.type = 'info';
break;
}
statusObj.detail = arrangeDetail[props.arrangeList.type]
return statusObj;
});
</script>
<style lang="scss" scoped>
.arrange-item-container {
h3 {
margin-bottom: 32rpx;
}
.arrange-header {
display: flex;
justify-content: space-between;
align-items: center;
h3 {
margin: 0;
}
uni-button {
margin: 0;
}
}
.item {
margin: 20rpx 0;
}
.arrange-footer {
text-align: end;
text {
color: #2979ff;
}
}
}
</style>
\ No newline at end of file
<template>
<div class='class-item-container'>
<u-card :show-head="false" margin="0" border-radius="20">
<template #body>
<view class="calss-header">
<h3>{{ classList.title }}</h3>
<u-button v-show="current == 2" size="mini" type="primary" @tap="toEvaluate">去评价</u-button>
</view>
<view class="item">
<text>课程时间:</text>
<text>{{ classList.dateStart }}{{ classList.dateEnd }}</text>
</view>
<view class="item">
<text>教室地点:</text>
<text>{{ classList.address }}</text>
</view>
<view>
</view>
<view class="progress item">
<text>课程进度:</text>
<u-line-progress active-color="#2979ff" :percent="percent" :height="25" />
</view>
<view class="class-teacher item">
<text>班主任:</text>
<u-tag v-for="(item, index) in classList.classTeacher" :key="index" :text="item" shape="circle" />
</view>
</template>
<template #foot>
<view class="class-footer">
<u-button size="mini" plain @tap="toAddressBook">班级通讯录</u-button>
<u-button size="mini" plain>班级二维码</u-button>
<u-button type="primary" size="mini" plain @tap="toCourseArrange">课程安排</u-button>
</view>
</template>
</u-card>
</div>
</template>
<script setup lang='ts'>
const props = defineProps({
classList: {
type: Array,
default: () => []
} as any,
current: {
type: Number,
default: 0
}
})
const percent = computed(() => {
return props.classList.currentProgress / props.classList.overallProgress * 100
})
const toAddressBook = () => {
uni.navigateTo({
url: '/pages/class/addressBook'
})
}
const toCourseArrange = () => {
uni.navigateTo({
url: '/pages/class/courseArrange'
})
}
const toEvaluate = () => {
uni.navigateTo({
url: '/pages/class/evaluate'
})
}
</script>
<style lang="scss" scoped>
.class-item-container {
margin-bottom: 20rpx;
.calss-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
h3 {
margin: 0
}
uni-button {
margin: 0;
}
}
.item {
display: flex;
align-items: flex-start;
text {
display: block;
padding: 12rpx 0;
font-size: 32rpx;
}
text:first-child {
width: 160rpx;
}
text:last-child {
flex: 1;
}
}
.progress {
display: flex;
align-items: center;
text {
white-space: nowrap;
}
.registered {
margin-left: 30rpx;
color: #3b99fc;
}
}
.class-teacher {
display: flex;
align-items: center;
.u-tag {
margin-right: 20rpx;
}
}
.class-footer {
width: 100%;
display: flex;
justify-content: end;
uni-button {
margin-left: 30rpx;
margin-right: 0;
}
}
}
</style>
\ No newline at end of file
<template>
<headers title='课程安排' />
<view class='course-arrange-container'>
<view class="progress">
<text>课程进度:</text>
<u-line-progress active-color="#2979ff" :percent="60" :height="25" />
</view>
<u-time-line>
<u-time-line-item v-for="(item, index) in arrangeList" :key="index">
<template #node>
<view class="u-node">
<view class="u-dot"></view>
</view>
</template>
<template #content>
<arrangeItem :arrangeList="item" />
</template>
</u-time-line-item>
</u-time-line>
</view>
</template>
<script setup lang='ts'>
import headers from '@/components/header/index.vue'
import arrangeItem from './components/arrangeItem.vue'
const arrangeList = ref([
{
title: '党支部书记班',
date: '2022-04-01 09:00~12:00', // 课程时间
address: '深圳市南山区西丽街道办公室', // 课程地点
classTeacher: '王少龙', // 班主任
type: 0 // 0 未开始, 1 上课中, 2 已下课
},
{
title: '党支部书记班',
date: '2022-04-01 09:00~12:00', // 课程时间
address: '深圳市南山区西丽街道办公室', // 课程地点
classTeacher: '王少龙', // 班主任
type: 1 // 0 未开始, 1 上课中, 2 已下课
},
{
title: '党支部书记班',
date: '2022-04-01 09:00~12:00', // 课程时间
address: '深圳市南山区西丽街道办公室', // 课程地点
classTeacher: '王少龙', // 班主任
type: 2 // 0 未开始, 1 上课中, 2 已下课
}
])
</script>
<style lang="scss" scoped>
.course-arrange-container {
padding: 0 20rpx;
.progress {
display: flex;
align-items: center;
justify-content: center;
padding: 26rpx 10rpx 50rpx 30rpx;
text {
display: block;
padding: 12rpx 0;
font-size: 32rpx;
white-space: nowrap;
}
.registered {
margin-left: 30rpx;
color: #3b99fc;
}
}
.u-dot {
height: 22rpx;
width: 22rpx;
border-radius: 3.125rem;
background: #2979ff;
box-shadow: 0 0 10px rgba(0, 0, 0.6, 0.412);
}
}
</style>
\ No newline at end of file
<template>
<headers title='培训评价' />
<div class='evaluate-container'>
<u-card :show-head="false" :show-foot="false" margin="0" border-radius="20">
<template #body>
<h4>尊敬的各位学员:</h4>
<text class="detail">
感谢您参加本次培训班!请各位学员对此次授课老师及教学安排进行满意度评价,同时我们也欢迎您提出意见和建议,您的感受及观点对我们非常重要谢谢!
</text>
</template>
</u-card>
<u-card :show-head="false" :show-foot="false" margin="0" border-radius="20">
<template #body>
<view>
<view class="rateItem">
<h4>课程内容</h4>
<u-rate :count="5" v-model="rate.content" size="42" />
</view>
<view class="rateItem">
<h4>授课讲师</h4>
<u-rate :count="5" v-model="rate.lecturer" size="42" />
</view>
<view class="rateItem">
<h4>后期服务</h4>
<u-rate :count="5" v-model="rate.postService" size="42" />
</view>
<view class="rateItem">
<h4>班主任服务</h4>
<u-rate :count="5" v-model="rate.teacherService" size="42" />
</view>
</view>
</template>
</u-card>
<u-card :show-head="false" :show-foot="false" margin="0" border-radius="20">
<template #body>
<text>
哪位教师、哪堂课给您留下了深刻印象? 能否告诉我们具体“亮点”?
</text>
<view class="evaluate-textarea">
<u-input v-model="evaluateData.evaluate" type="textarea"
placeholder-style="background-color: #f5f5f5;font-size: 24rpx;overflow-y: auto;" height="200"
maxlength="1400" :auto-height="false" placeholder="快来说说您的想法~" />
</view>
<text style="margin-top: 40rpx;">
您认为还需要补充哪方面的专题课程?
</text>
<view class="evaluate-textarea">
<u-input v-model="evaluateData.evaluate2" type="textarea"
placeholder-style="background-color: #f5f5f5;font-size: 24rpx;overflow-y: auto;" height="160"
maxlength="1400" :auto-height="false" placeholder="快来说说您的想法~" />
</view>
<text style="margin-top: 40rpx;">
您的培训收获与意见建议:
</text>
<view class="evaluate-textarea last">
<u-input v-model="evaluateData.evaluate3" type="textarea"
placeholder-style="background-color: #f5f5f5;font-size: 24rpx;overflow-y: auto;" height="160"
maxlength="1400" :auto-height="false" placeholder="快来说说您的想法~" />
</view>
</template>
</u-card>
<view class="submit">
<u-button type="primary" @tap="submit">确定提交</u-button>
</view>
</div>
</template>
<script setup lang='ts'>
import headers from '@/components/header/index.vue'
const rate = reactive({
content: 0,
lecturer: 0,
postService: 0,
teacherService: 0,
})
const evaluateData = reactive({
evaluate: '',
evaluate2: '',
evaluate3: ''
})
const submit = () => {
console.log('确定提交');
}
</script>
<style lang="scss" scoped>
.evaluate-container {
padding: 30rpx;
.u-card {
margin-bottom: 10rpx !important;
text {
display: block;
}
.detail {
text-indent: 2em;
display: block;
font-size: 28rpx;
margin-top: 10rpx;
}
.rateItem {
font-size: 28rpx;
display: flex;
align-items: center;
margin-bottom: 20rpx;
text-align: justify;
text-align-last: justify;
/*兼容ie*/
text-justify: distribute-all-lines;
h4 {
width: 140rpx;
margin-right: 20rpx;
}
}
.evaluate-textarea {
background-color: #f5f5f5;
padding: 0 10rpx;
box-sizing: border-box;
margin: 20rpx 0;
}
.last {
margin-bottom: 0;
}
}
}
.submit {
margin: 40rpx 40rpx 0;
}
</style>
\ No newline at end of file
<template>
<headers title='我的班级' />
<view class='class-container'>
<u-tabs :list="tabsState.list" :is-scroll="false" v-model="tabsState.current" bg-color="#f5f5f5"
@change="tabsChange" />
<!-- 内容 -->
<view v-if="classList.length">
<!-- 搜索 -->
<uni-search-bar placeholder="班级名称" bgColor="#ffffff" clearButton="auto" cancelButton="none"
@confirm="search" />
<text style="margin-bottom: 20rpx; display: block;">为你找到10个的班级</text>
<template v-for="(item, index) in classList" :key="index">
<classItem :classList="item" :current="tabsState.current" />
</template>
</view>
<view v-else class="empty">
<u-empty text="暂无数据" mode="list"></u-empty>
</view>
</view>
</template>
<script setup lang='ts'>
import headers from '@/components/header/index.vue'
import classItem from './components/classItem.vue'
const tabsState = reactive({
list: [{
name: '进行中'
}, {
name: '未开课'
},
{
name: '已结课'
}],
current: 0
})
const tabsChange = (index: number) => {
console.log(index);
}
const search = (val: string) => {
console.log('我的班级' + val);
}
const classList = ref([{
title: '党支部书记班',
dateStart: '2022-04-01 09:00', // 课程开始时间
dateEnd: '2022-04-07 09:00', // 课程结束时间
address: '深圳市南山区西丽街道办公室', // 课程地点
overallProgress: 6, // 总进度
currentProgress: 3, // 当前进度
classTeacher: ['郭敬明', '王少龙'] // 班主任
}])
</script>
<style lang="scss" scoped>
.class-container {
padding: 0 30rpx;
.uni-searchbar {
padding: 0;
margin: 20rpx 0;
}
}
</style>
\ No newline at end of file
<template>
<view class='course-item-container'>
<u-card :show-head="false" margin="0">
<template #body>
<view class="course-header">
<h3>{{ courseList.title }}</h3>
<view>
<u-icon name="order" size="32" />
<text>课件资料</text>
</view>
</view>
<view class="item">
<u-icon name="account" />
<text>{{ courseList.classTeacher }}</text>
</view>
<view class="item">
<u-icon name="map" />
<text>{{ courseList.address }}</text>
</view>
<view class="item">
<u-icon name="clock" />
<text>{{ courseList.date }}</text>
</view>
</template>
<template #foot>
<view class="course-footer">
<view>所属班级:{{ courseList.class }}</view>
<view>
<text>查看更多</text>
<u-icon name="arrow-right-double" color="#2979ff" />
</view>
</view>
</template>
</u-card>
<u-card v-if="courseList?.signInInfo" :show-head="false" margin="20rpx 0 0 0">
<template #body>
<view class="signInInfo">
<view class="header"></view>
</view>
</template>
</u-card>
</view>
</template>
<script setup lang='ts'>
const props = defineProps({
courseList: {
type: Array,
default: () => []
} as any
})
const courseDetail = ['未开始', '上课中', '已下课']
const courseStatus = computed(() => {
const statusObj = {
type: '',
detail: ''
};
switch (props.courseList.type) {
case 0:
statusObj.type = 'warning';
break;
case 1:
statusObj.type = 'primary';
break;
case 2:
statusObj.type = 'info';
break;
}
statusObj.detail = courseDetail[props.courseList.type]
return statusObj;
});
</script>
<style lang="scss" scoped>
.course-item-container {
margin-top: 20rpx;
h3 {
margin-bottom: 32rpx;
}
.course-header {
display: flex;
justify-content: space-between;
align-items: center;
text {
font-size: 32rpx;
color: #2979ff;
}
h3 {
margin: 0;
}
uni-button {
margin: 0;
}
}
.item {
margin: 20rpx 0;
}
.course-footer {
display: flex;
justify-content: space-between;
align-items: center;
text {
color: #2979ff;
}
}
}
</style>
\ No newline at end of file
export const inClass = [{
title: '党支部书记班',
date: '2022-04-01 09:00~12:00', // 课程时间
address: '深圳市南山区西丽街道办公室', // 课程地点
classTeacher: '王少龙', // 班主任
class: '党支部培训班',
signInInfo: {
signInStatus: 0, // // 0 点击签到, 1 点击签退, 2 签到成功, 3 xx分钟后签到, 4 未签到, 5 签退成功, 6 未签退
classTime: '09:00', // 上课时间
endClassTime: '12:00'
} // 签到信息
}]
export const notStarted = [{
title: '党支部书记班',
date: '2022-04-01 09:00~12:00', // 课程时间
address: '深圳市南山区西丽街道办公室', // 课程地点
classTeacher: '王少龙', // 班主任
class: '党支部培训班',
},
{
title: '党支部书记班',
date: '2022-04-01 09:00~12:00', // 课程时间
address: '深圳市南山区西丽街道办公室', // 课程地点
classTeacher: '王少龙', // 班主任
class: '党支部培训班',
},
{
title: '党支部书记班',
date: '2022-04-01 09:00~12:00', // 课程时间
address: '深圳市南山区西丽街道办公室', // 课程地点
classTeacher: '王少龙', // 班主任
class: '党支部培训班',
}]
\ No newline at end of file
<template>
<headers title='我的课程' />
<view class='course-container'>
<u-tabs :list="tabsState.list" :is-scroll="false" v-model="tabsState.current" bg-color="#f5f5f5"
@change="tabsChange" />
<!-- 内容 -->
<view v-if="courseList.length">
<!-- 搜索 -->
<uni-search-bar v-show="tabsState.current" placeholder="班级名称" bgColor="#ffffff" clearButton="auto"
cancelButton="none" @confirm="search" />
<text v-show="tabsState.current" style="margin-bottom: 20rpx; display: block;">为你找到10个的班级</text>
<block v-for="(item, index) in courseList" :key="index">
<courseItem :courseList="item" :current="tabsState.current" />
</block>
</view>
<view v-else class="empty">
<u-empty text="暂无数据" mode="list"></u-empty>
</view>
</view>
</template>
<script setup lang='ts'>
import headers from '@/components/header/index.vue'
import courseItem from './components/courseItem.vue';
import { inClass, notStarted } from './demo'
const tabsState = reactive({
list: [{
name: '上课中'
}, {
name: '未开始'
}, {
name: '已下课'
}
],
current: 0
})
const courseList: any = ref(inClass)
const tabsChange = (index: number) => {
console.log(index);
if (index) courseList.value = notStarted
else courseList.value = inClass
}
const search = (val: string) => {
console.log('我的课程' + val);
}
</script>
<style lang="scss" scoped>
.course-container {
padding: 0 30rpx;
padding-top: 20rpx;
.uni-searchbar {
padding: 0;
margin: 20rpx 0;
}
}
</style>
\ No newline at end of file
<template>
<headers title='西部人力培训中心' backIconName="close" />
<view class="home-container">
<!-- 用户信息部分 -->
<view class="user-info">
<u-image width="260rpx" height="260rpx" :src="src" border-radius="30" />
<text class="name">小美</text>
<view class="info">
<text>宝安研发部</text>
<u-line color="#eee" direction="col" length="30rpx" :hair-line="false" margin="0 20rpx" />
<text>开发人员</text>
</view>
</view>
<view class="user-menu">
<text class="menu-title">服务功能</text>
<view class="content">
<u-grid :col="3">
<u-grid-item @tap="toTrainRegistration">
<u-badge count="2" :offset="[20, 20]"></u-badge>
<u-icon name="man-add-fill" :size="53"></u-icon>
<view class="grid-text">培训报名</view>
</u-grid-item>
<u-grid-item @tap="toCourse">
<u-icon name="grid-fill" :size="53"></u-icon>
<view class="grid-text">我的课程</view>
</u-grid-item>
<u-grid-item @tap="toClass">
<u-badge count="3" :offset="[20, 20]"></u-badge>
<u-icon name="list-dot" :size="53"></u-icon>
<view class="grid-text">我的班级</view>
</u-grid-item>
</u-grid>
</view>
</view>
</view>
</template>
<script setup lang='ts'>
import headers from '@/components/header/index.vue'
import { src } from '@/utils/example'
const toTrainRegistration = () => {
uni.navigateTo({
url: '/pages/trainRegistration/index'
})
}
const toCourse = () => {
uni.navigateTo({
url: '/pages/course/index'
})
}
const toClass = () => {
uni.navigateTo({
url: '/pages/class/index'
})
}
</script>
<style lang="scss" scoped>
page {
background-image: url("https://img2.baidu.com/it/u=460732253,1892860896&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=888");
background-size: cover;
/* 背景图片自适应屏幕大小 */
/* 其他样式设置 */
}
.home-container {
width: 100%;
height: calc(100% - 48px);
.user-info {
margin: 40rpx 0 100rpx 0;
width: 100%;
height: 30%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.name {
font-size: 36rpx;
font-weight: bold;
padding: 20rpx 0;
color: #000;
}
.info {
display: flex;
justify-content: center;
align-items: center;
}
}
.user-menu {
display: flex;
flex-direction: column;
box-sizing: border-box;
margin: 16rpx;
border-radius: 8rpx;
// border: 1px solid #e4e7ed;
background-color: #ffffff;
overflow: hidden;
color: #303133;
transition: 0.3s;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);
.menu-title {
box-sizing: border-box;
width: 100%;
font-size: 36rpx;
font-weight: bold;
padding: 32rpx 0 32rpx 50rpx;
background: linear-gradient(to right, #f4f8ff, #cce3fe);
}
.content {
padding: 30rpx 0 80rpx 0;
}
}
}
</style>
\ No newline at end of file
<template>
<u-form :model="loginForm" ref="loginFormRef" :rules="loginFormRules" style="margin-top: 40rpx;" label-posi>
<u-form-item :leftIconStyle="{ color: '#888', fontSize: '32rpx' }" left-icon="account" label-width="150"
label-position="left" label="用户名" prop="username">
<u-input placeholder="请输入用户名" v-model="loginForm.username" type="text" />
</u-form-item>
<u-form-item label="密码" :leftIconStyle="{ color: '#888', fontSize: '32rpx' }" left-icon="lock"
label-width="150rpx" prop="password">
<u-input type="password" v-model="loginForm.password" placeholder="请输入密码" />
</u-form-item>
</u-form>
<button @tap="tapLogin" class="getCaptcha">登录</button>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Login } from '../interface';
import { login } from '@/api/login'
import { useGlobalStore } from '@/store/useStore';
const globalStore = useGlobalStore()
const loginFormRef = ref()
const loginForm = reactive<Login.LoginForm>({
username: 'admin',
password: '123456'
})
const loginFormRules = reactive({
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
})
let tapLogin = () => {
uni.navigateTo({
url: '/pages/home/index'
})
// loginFormRef.value?.validate(async (valid: boolean) => {
// if (valid) {
// const { data: res } = await login(loginForm)
// if (res.code === 200) {
// globalStore.setToken(res.data.token)
// uni.reLaunch({
// url: '/pages/home/index'
// })
// }
// } else {
// console.log('验证失败');
// }
// });
};
onMounted(() => loginFormRef.value?.setRules(loginFormRules))
</script>
<style lang="scss" scoped>
.getCaptcha {
width: 500rpx;
background-color: rgb(253, 243, 208);
color: $u-tips-color;
border: none;
font-size: 30rpx;
margin-top: 20rpx;
&::after {
border: none;
}
}
:deep(.uicon-eye:before) {
font-size: 40rpx;
}
:deep(.uicon-eye-fill:before) {
font-size: 40rpx;
}
:deep(.u-input) {
justify-content: center;
align-items: center;
}
</style>
<template>
<headers title='西部人力培训中心' backIconName='close' />
<view style="box-sizing: border-box;">
<view class="login-container">
<text class="login-text">欢迎登陆</text>
<loginForm />
</view>
</view>
</template>
<script setup lang="ts">
import headers from '@/components/header/index.vue'
import loginForm from './components/loginForm.vue';
</script>
<style lang="scss" scoped>
:deep(uni-page-wrapper) {
background-color: #fff;
}
:deep(uni-page) {
padding: 0 6rpx;
box-sizing: border-box;
}
.login-container {
box-sizing: border-box;
padding-top: 20%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #fff;
.login-text {
margin-top: 10%;
font-weight: 700;
font-size: 40rpx;
color: #1d2b5f;
}
}
</style>
export namespace Login {
export interface LoginForm {
username: string,
password: string
}
}
\ No newline at end of file
<template>
<div class='train-item-container card'>
<h3>{{ trainList.title }}</h3>
<text>培训日期:{{ trainList.dateStart }}{{ trainList.dateEnd }}</text>
<text>培训地点:{{ trainList.address }}</text>
<view class="train-progress">
<text style="">报名进度:培训名额 {{ trainList.number }}</text>
<text class="registered">已报名 {{ trainList.registered }}</text>
</view>
<text>截止时间:{{ trainList.deadline }}</text>
<view class="train-button">
<u-button :type="trainStatus.type" @tap="registerTrain">{{ trainStatus.detail }}</u-button>
</view>
</div>
</template>
<script setup lang='ts'>
const props = defineProps({
trainList: {
type: Array,
default: () => []
} as any
})
const trainDetail = [
'报名培训',
'培训名额已满',
'培训中',
'培训结束',
'已结束',
'退出培训'
]
const trainStatus = computed(() => {
const statusObj = {
type: '',
detail: ''
};
switch (props.trainList.type) {
case 0:
case 2:
statusObj.type = 'primary';
break;
case 1:
case 3:
case 4:
statusObj.type = 'info';
break;
case 5:
statusObj.type = 'error';
break;
}
statusObj.detail = trainDetail[props.trainList.type]
return statusObj;
});
const registerTrain = () => {
console.log('报名培训')
}
</script>
<style lang="scss" scoped>
.train-item-container {
margin-bottom: 20rpx;
h3 {
margin-bottom: 16rpx;
}
text {
display: block;
padding: 12rpx 0;
font-size: 32rpx;
}
.train-progress {
display: flex;
.registered {
margin-left: 30rpx;
color: #3b99fc;
}
}
.train-button {
padding: 0 50rpx;
margin-top: 30rpx;
}
}
</style>
\ No newline at end of file
<template>
<headers title='培训报名' />
<view class='train-container'>
<!-- tabs标签 -->
<u-tabs :list="tabsState.list" :is-scroll="false" v-model="tabsState.current" bg-color="#f5f5f5"
@change="tabsChange" />
<!-- 内容 -->
<view v-if="trainList.length">
<!-- 搜索 -->
<uni-search-bar placeholder="培训名称" bgColor="#ffffff" clearButton="auto" cancelButton="none"
@confirm="search" />
<text style="margin-bottom: 20rpx; display: block;">为你找到10个可报名的培训</text>
<template v-for="(item, index) in trainList" :key="index">
<trainItem :trainList="item" />
</template>
</view>
<view v-else class="empty">
<u-empty text="暂无数据" mode="list"></u-empty>
</view>
</view>
</template>
<script setup lang='ts'>
import headers from '@/components/header/index.vue'
import trainItem from './components/trainItem.vue'
const tabsState = reactive({
list: [{
name: '报名中'
}, {
name: '已报名'
}],
current: 0
})
const trainList = ref([
{
title: '2021南山区党支部培训报名',
dateStart: '2021-04-17', // 培训开始时间
dateEnd: '2021-04-17', // 培训结束时间
address: '深圳市南山区西丽街道办公室', // 培训地点
number: 200, // 培训名额
registered: 150, // 已报名
deadline: '2021-04-17 10:30', // 截止时间
type: 0 // 0 报名培训, 1 培训名额已满
},
{
title: '2021南山区党支部培训报名',
dateStart: '2021-04-17', // 培训开始时间
dateEnd: '2021-04-17', // 培训结束时间
address: '深圳市南山区西丽街道办公室', // 培训地点
number: 200, // 培训名额
registered: 150, // 已报名
deadline: '2021-04-17 10:30', // 截止时间
type: 1 // 0 报名培训, 1 培训名额已满, 2 培训中, 3 培训结束, 4 已结束, 5 退出培训
}
])
const tabsChange = (index: number) => {
console.log(index);
if (index) {
trainList.value = []
}
}
const search = (val: string) => {
console.log('培训报名' + val);
}
</script>
<style lang="scss" scoped>
.train-container {
padding: 0 30rpx;
.uni-searchbar {
padding: 0;
margin: 20rpx 0;
}
}
</style>
\ No newline at end of file
.card {
box-sizing: border-box;
// margin: 16rpx;
padding: 36rpx 20rpx;
padding: 16rpx;
border-radius: 8rpx;
border: 1px solid #e4e7ed;
background-color: #ffffff;
overflow: hidden;
color: #303133;
transition: 0.3s;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);
.card-text {
padding: 20rpx;
}
.grid-text {
font-size: 28rpx;
margin-top: 4rpx;
color: #303133;
padding: 0 10rpx;
white-space: 'nowrap';
text-overflow: 'ellipsis';
overflow: 'hidden';
}
}
.empty {
margin-top: 100rpx;
}
@font-face {
font-family: "custom-icon";
/* Project id 3607036 */
src: url('https://at.alicdn.com/t/c/font_3607036_y4hl42aa2g.woff2?t=1686627317404') format('woff2'),
url('https://at.alicdn.com/t/c/font_3607036_y4hl42aa2g.woff?t=1686627317404') format('woff'),
url('https://at.alicdn.com/t/c/font_3607036_y4hl42aa2g.ttf?t=1686627317404') format('truetype');
}
.custom-icon {
font-family: "custom-icon" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.custom-icon-lanya1:before {
content: "\e65f";
}
.custom-icon-lanya:before {
content: "\ec4a";
}
.custom-icon-fujian:before {
content: "\e601";
}
.custom-icon-shangchuandaochu:before {
content: "\e8c6";
}
.custom-icon-shouyefill:before {
content: "\e750";
}
.custom-icon-sandiantu:before {
content: "\e679";
}
.custom-icon-tubiao-zhexiantu:before {
content: "\eb96";
}
.custom-icon-shezhixitongshezhigongnengshezhishuxing:before {
content: "\e795";
}
.custom-icon-caidan1:before {
content: "\e653";
}
.custom-icon-bingtu:before {
content: "\e6bb";
}
.custom-icon-shujudaping:before {
content: "\e742";
}
.custom-icon-zhuzhuangtu:before {
content: "\e650";
}
.custom-icon-list2:before {
content: "\e655";
}
.custom-icon-caidan:before {
content: "\e652";
}
.custom-icon-erweima:before {
content: "\e6bd";
}
.custom-icon-shuxingguanli:before {
content: "\e625";
}
.custom-icon-line-barcodeboxtiaoxingma-02:before {
content: "\e717";
}
.custom-icon-Icon_kebianjibiaoge:before {
content: "\e60b";
}
.custom-icon-sousuo:before {
content: "\e600";
}
.custom-icon-dingdan:before {
content: "\e737";
}
.custom-icon-wodeyushe:before {
content: "\e633";
}
.custom-icon-dingdan-copy:before {
content: "\e738";
}
.custom-icon-sousuo-copy:before {
content: "\e739";
}
.custom-icon-wodeyushe-copy:before {
content: "\e73a";
}
\ No newline at end of file
@font-face {
font-family: "custom-icon";
/* Project id 3607036 */
src:
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
}
.custom-icon {
font-family: "custom-icon" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.custom-icon-lanya1:before {
content: "\e65f";
}
.custom-icon-lanya:before {
content: "\ec4a";
}
.custom-icon-fujian:before {
content: "\e601";
}
.custom-icon-shangchuandaochu:before {
content: "\e8c6";
}
.custom-icon-shouyefill:before {
content: "\e750";
}
.custom-icon-sandiantu:before {
content: "\e679";
}
.custom-icon-tubiao-zhexiantu:before {
content: "\eb96";
}
.custom-icon-shezhixitongshezhigongnengshezhishuxing:before {
content: "\e795";
}
.custom-icon-caidan1:before {
content: "\e653";
}
.custom-icon-bingtu:before {
content: "\e6bb";
}
.custom-icon-shujudaping:before {
content: "\e742";
}
.custom-icon-zhuzhuangtu:before {
content: "\e650";
}
.custom-icon-list2:before {
content: "\e655";
}
.custom-icon-caidan:before {
content: "\e652";
}
.custom-icon-erweima:before {
content: "\e6bd";
}
.custom-icon-shuxingguanli:before {
content: "\e625";
}
.custom-icon-line-barcodeboxtiaoxingma-02:before {
content: "\e717";
}
.custom-icon-Icon_kebianjibiaoge:before {
content: "\e60b";
}
.custom-icon-sousuo:before {
content: "\e600";
}
.custom-icon-dingdan:before {
content: "\e737";
}
.custom-icon-wodeyushe:before {
content: "\e633";
}
.custom-icon-dingdan-copy:before {
content: "\e738";
}
.custom-icon-sousuo-copy:before {
content: "\e739";
}
.custom-icon-wodeyushe-copy:before {
content: "\e73a";
}
\ No newline at end of file
import { PersistedStateOptions } from 'pinia-plugin-persistedstate'
const piniaPersistOption = (key: string, paths?: any[]) => {
const persist: PersistedStateOptions = {
key,
storage: localStorage,
paths
}
return persist
}
export default piniaPersistOption
\ No newline at end of file
import { defineStore } from "pinia";
import { getMetadataList } from '@/api/apply'
export const useFormData = defineStore({
id: 'formData',
state: () => ({
metadataList: []
}),
getters: {
metaListGet: (state) => state.metadataList
},
actions: {
async getMetaList() {
const { data: res } = await getMetadataList()
this.metadataList = res.records
}
}
})
\ No newline at end of file
import { defineStore, createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import piniaPersistOption from './config/piniaPersist'
export const useGlobalStore = defineStore({
id: 'globalStore',
state() {
return {
token: '',
statusBarHeight: 0,
}
},
getters: {
},
actions: {
setToken(token: string) {
this.token = token
},
async setStatusBarHeight() {
let that = this
await uni.getSystemInfo({
success(res: any) {
that.statusBarHeight = res.statusBarHeight || 0;
}
});
}
},
persist: piniaPersistOption('globalStore')
})
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
export default pinia
// 解析 单据头与单据体数据
export const documentFilter = (list: any) => {
const headerList: any[] = []; // 单据头数据
const bodyList: any[] = []; // 单据体数据
const recursiveFilter = (item: any) => {
if (item.columns) {
item.columns[0].list.forEach((res: any) => {
bodyList.push(res);
});
}
if (item.detailColumns) {
item.detailColumns[0].list.forEach((res: any) => {
if (res.type === 'table') {
recursiveFilter(res);
} else if (res.type === 'grid') {
res.columns.forEach((col: any) => {
col.list.forEach((cols: any) => {
bodyList.push(cols);
});
});
} else if (res.type !== 'menu_bar') {
bodyList.push(res);
}
});
}
bodyList.push(item);
};
list.forEach((item: any) => {
if (item.type === 'table') recursiveFilter(item);
else if (item.type === 'grid')
item.columns.forEach((col: any) => {
col.list.forEach((res: any) => {
headerList.push(res);
});
});
else if (item.type !== 'menu_bar') headerList.push(item);
});
console.log(headerList, bodyList);
return { headerList, bodyList }
};
\ No newline at end of file
declare module 'vk-uview-ui'
@import '../node_modules/@dcloudio/uni-ui/lib/uni-scss/variables.scss';
@import 'vk-uview-ui/theme.scss';
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color: #333; //基本色
$uni-text-color-inverse: #fff; //反色
$uni-text-color-grey: #999; //辅助灰色,如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable: #c0c0c0;
/* 背景颜色 */
$uni-bg-color: #ffffff;
$uni-bg-color-grey: #f8f8f8;
$uni-bg-color-hover: #f1f1f1; //点击状态颜色
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色
/* 边框颜色 */
$uni-border-color: #c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm: 24rpx;
$uni-font-size-base: 28rpx;
$uni-font-size-lg: 32rpx;
/* 图片尺寸 */
$uni-img-size-sm: 40rpx;
$uni-img-size-base: 52rpx;
$uni-img-size-lg: 80rpx;
/* Border Radius */
$uni-border-radius-sm: 4rpx;
$uni-border-radius-base: 6rpx;
$uni-border-radius-lg: 12rpx;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20rpx;
$uni-spacing-row-lg: 30rpx;
/* 垂直间距 */
$uni-spacing-col-sm: 8rpx;
$uni-spacing-col-base: 16rpx;
$uni-spacing-col-lg: 24rpx;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2c405a; // 文章标题颜色
$uni-font-size-title: 40rpx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle: 36rpx;
$uni-color-paragraph: #3f536e; // 文章段落颜色
$uni-font-size-paragraph: 30rpx;
## 2.2.24(2023-06-02)
- 修复 部分情况修改时间,开始、结束时间显示异常的Bug [详情](https://ask.dcloud.net.cn/question/171146)
- 优化 当前月可以选择上月、下月的日期
## 2.2.23(2023-05-02)
- 修复 部分情况修改时间,开始时间未更新 [详情](https://github.com/dcloudio/uni-ui/issues/737)
- 修复 部分平台及设备第一次点击无法显示弹框
- 修复 ios 日期格式未补零显示及使用异常 [详情](https://ask.dcloud.net.cn/question/162979)
## 2.2.22(2023-03-30)
- 修复 日历 picker 修改年月后,自动选中当月1日 [详情](https://ask.dcloud.net.cn/question/165937)
- 修复 小程序端 低版本 ios NaN [详情](https://ask.dcloud.net.cn/question/162979)
## 2.2.21(2023-02-20)
- 修复 firefox 浏览器显示区域点击无法拉起日历弹框的Bug [详情](https://ask.dcloud.net.cn/question/163362)
## 2.2.20(2023-02-17)
- 优化 值为空依然选中当天问题
- 优化 提供 default-value 属性支持配置选择器打开时默认显示的时间
- 优化 非范围选择未选择日期时间,点击确认按钮选中当前日期时间
- 优化 字节小程序日期时间范围选择,底部日期换行问题
## 2.2.19(2023-02-09)
- 修复 2.2.18 引起范围选择配置 end 选择无效的Bug [详情](https://github.com/dcloudio/uni-ui/issues/686)
## 2.2.18(2023-02-08)
- 修复 移动端范围选择change事件触发异常的Bug [详情](https://github.com/dcloudio/uni-ui/issues/684)
- 优化 PC端输入日期格式错误时返回当前日期时间
- 优化 PC端输入日期时间超出 start、end 限制的Bug
- 优化 移动端日期时间范围用法时间展示不完整问题
## 2.2.17(2023-02-04)
- 修复 小程序端绑定 Date 类型报错的Bug [详情](https://github.com/dcloudio/uni-ui/issues/679)
- 修复 vue3 time-picker 无法显示绑定时分秒的Bug
## 2.2.16(2023-02-02)
- 修复 字节小程序报错的Bug
## 2.2.15(2023-02-02)
- 修复 某些情况切换月份错误的Bug
## 2.2.14(2023-01-30)
- 修复 某些情况切换月份错误的Bug [详情](https://ask.dcloud.net.cn/question/162033)
## 2.2.13(2023-01-10)
- 修复 多次加载组件造成内存占用的Bug
## 2.2.12(2022-12-01)
- 修复 vue3 下 i18n 国际化初始值不正确的Bug
## 2.2.11(2022-09-19)
- 修复 支付宝小程序样式错乱的Bug [详情](https://github.com/dcloudio/uni-app/issues/3861)
## 2.2.10(2022-09-19)
- 修复 反向选择日期范围,日期显示异常的Bug [详情](https://ask.dcloud.net.cn/question/153401?item_id=212892&rf=false)
## 2.2.9(2022-09-16)
- 可以使用 uni-scss 控制主题色
## 2.2.8(2022-09-08)
- 修复 close事件无效的Bug
## 2.2.7(2022-09-05)
- 修复 移动端 maskClick 无效的Bug [详情](https://ask.dcloud.net.cn/question/140824)
## 2.2.6(2022-06-30)
- 优化 组件样式,调整了组件图标大小、高度、颜色等,与uni-ui风格保持一致
## 2.2.5(2022-06-24)
- 修复 日历顶部年月及底部确认未国际化的Bug
## 2.2.4(2022-03-31)
- 修复 Vue3 下动态赋值,单选类型未响应的Bug
## 2.2.3(2022-03-28)
- 修复 Vue3 下动态赋值未响应的Bug
## 2.2.2(2021-12-10)
- 修复 clear-icon 属性在小程序平台不生效的Bug
## 2.2.1(2021-12-10)
- 修复 日期范围选在小程序平台,必须多点击一次才能取消选中状态的Bug
## 2.2.0(2021-11-19)
- 优化 组件UI,并提供设计资源 [详情](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移 [https://uniapp.dcloud.io/component/uniui/uni-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
## 2.1.5(2021-11-09)
- 新增 提供组件设计资源,组件样式调整
## 2.1.4(2021-09-10)
- 修复 hide-second 在移动端的Bug
- 修复 单选赋默认值时,赋值日期未高亮的Bug
- 修复 赋默认值时,移动端未正确显示时间的Bug
## 2.1.3(2021-09-09)
- 新增 hide-second 属性,支持只使用时分,隐藏秒
## 2.1.2(2021-09-03)
- 优化 取消选中时(范围选)直接开始下一次选择, 避免多点一次
- 优化 移动端支持清除按钮,同时支持通过 ref 调用组件的 clear 方法
- 优化 调整字号大小,美化日历界面
- 修复 因国际化导致的 placeholder 失效的Bug
## 2.1.1(2021-08-24)
- 新增 支持国际化
- 优化 范围选择器在 pc 端过宽的问题
## 2.1.0(2021-08-09)
- 新增 适配 vue3
## 2.0.19(2021-08-09)
- 新增 支持作为 uni-forms 子组件相关功能
- 修复 在 uni-forms 中使用时,选择时间报 NAN 错误的Bug
## 2.0.18(2021-08-05)
- 修复 type 属性动态赋值无效的Bug
- 修复 ‘确认’按钮被 tabbar 遮盖 bug
- 修复 组件未赋值时范围选左、右日历相同的Bug
## 2.0.17(2021-08-04)
- 修复 范围选未正确显示当前值的Bug
- 修复 h5 平台(移动端)报错 'cale' of undefined 的Bug
## 2.0.16(2021-07-21)
- 新增 return-type 属性支持返回 date 日期对象
## 2.0.15(2021-07-14)
- 修复 单选日期类型,初始赋值后不在当前日历的Bug
- 新增 clearIcon 属性,显示框的清空按钮可配置显示隐藏(仅 pc 有效)
- 优化 移动端移除显示框的清空按钮,无实际用途
## 2.0.14(2021-07-14)
- 修复 组件赋值为空,界面未更新的Bug
- 修复 start 和 end 不能动态赋值的Bug
- 修复 范围选类型,用户选择后再次选择右侧日历(结束日期)显示不正确的Bug
## 2.0.13(2021-07-08)
- 修复 范围选择不能动态赋值的Bug
## 2.0.12(2021-07-08)
- 修复 范围选择的初始时间在一个月内时,造成无法选择的bug
## 2.0.11(2021-07-08)
- 优化 弹出层在超出视窗边缘定位不准确的问题
## 2.0.10(2021-07-08)
- 修复 范围起始点样式的背景色与今日样式的字体前景色融合,导致日期字体看不清的Bug
- 优化 弹出层在超出视窗边缘被遮盖的问题
## 2.0.9(2021-07-07)
- 新增 maskClick 事件
- 修复 特殊情况日历 rpx 布局错误的Bug,rpx -> px
- 修复 范围选择时清空返回值不合理的bug,['', ''] -> []
## 2.0.8(2021-07-07)
- 新增 日期时间显示框支持插槽
## 2.0.7(2021-07-01)
- 优化 添加 uni-icons 依赖
## 2.0.6(2021-05-22)
- 修复 图标在小程序上不显示的Bug
- 优化 重命名引用组件,避免潜在组件命名冲突
## 2.0.5(2021-05-20)
- 优化 代码目录扁平化
## 2.0.4(2021-05-12)
- 新增 组件示例地址
## 2.0.3(2021-05-10)
- 修复 ios 下不识别 '-' 日期格式的Bug
- 优化 pc 下弹出层添加边框和阴影
## 2.0.2(2021-05-08)
- 修复 在 admin 中获取弹出层定位错误的bug
## 2.0.1(2021-05-08)
- 修复 type 属性向下兼容,默认值从 date 变更为 datetime
## 2.0.0(2021-04-30)
- 支持日历形式的日期+时间的范围选择
> 注意:此版本不向后兼容,不再支持单独时间选择(type=time)及相关的 hide-second 属性(时间选可使用内置组件 picker)
## 1.0.6(2021-03-18)
- 新增 hide-second 属性,时间支持仅选择时、分
- 修复 选择跟显示的日期不一样的Bug
- 修复 chang事件触发2次的Bug
- 修复 分、秒 end 范围错误的Bug
- 优化 更好的 nvue 适配
<template>
<view class="uni-calendar-item__weeks-box" :class="{
'uni-calendar-item--disable':weeks.disable,
'uni-calendar-item--before-checked-x':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked-x':weeks.afterMultiple,
}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
<view class="uni-calendar-item__weeks-box-item" :class="{
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
'uni-calendar-item--checked-range-text': checkHover,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">
<text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
</view>
<view :class="{'uni-calendar-item--today': weeks.isToday}"></view>
</view>
</template>
<script>
export default {
props: {
weeks: {
type: Object,
default () {
return {}
}
},
calendar: {
type: Object,
default: () => {
return {}
}
},
selected: {
type: Array,
default: () => {
return []
}
},
checkHover: {
type: Boolean,
default: false
}
},
methods: {
choiceDate(weeks) {
this.$emit('change', weeks)
},
handleMousemove(weeks) {
this.$emit('handleMouse', weeks)
}
}
}
</script>
<style lang="scss" >
$uni-primary: #007aff !default;
.uni-calendar-item__weeks-box {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
margin: 1px 0;
position: relative;
}
.uni-calendar-item__weeks-box-text {
font-size: 14px;
// font-family: Lato-Bold, Lato;
font-weight: bold;
color: darken($color: $uni-primary, $amount: 40%);
}
.uni-calendar-item__weeks-box-item {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-calendar-item__weeks-box-circle {
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: #dd524d;
}
.uni-calendar-item__weeks-box .uni-calendar-item--disable {
cursor: default;
}
.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
color: #D1D1D1;
}
.uni-calendar-item--today {
position: absolute;
top: 10px;
right: 17%;
background-color: #dd524d;
width:6px;
height: 6px;
border-radius: 50%;
}
.uni-calendar-item--extra {
color: #dd524d;
opacity: 0.8;
}
.uni-calendar-item__weeks-box .uni-calendar-item--checked {
background-color: $uni-primary;
border-radius: 50%;
box-sizing: border-box;
border: 3px solid #fff;
}
.uni-calendar-item--checked .uni-calendar-item--checked-text {
color: #fff;
}
.uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
color: #333;
}
.uni-calendar-item--multiple {
background-color: #F6F7FC;
// color: #fff;
}
.uni-calendar-item--multiple .uni-calendar-item--before-checked,
.uni-calendar-item--multiple .uni-calendar-item--after-checked {
background-color: $uni-primary;
border-radius: 50%;
box-sizing: border-box;
border: 3px solid #F6F7FC;
}
.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
color: #fff;
}
.uni-calendar-item--before-checked-x {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
box-sizing: border-box;
background-color: #F6F7FC;
}
.uni-calendar-item--after-checked-x {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
background-color: #F6F7FC;
}
</style>
{
"uni-datetime-picker.selectDate": "select date",
"uni-datetime-picker.selectTime": "select time",
"uni-datetime-picker.selectDateTime": "select date and time",
"uni-datetime-picker.startDate": "start date",
"uni-datetime-picker.endDate": "end date",
"uni-datetime-picker.startTime": "start time",
"uni-datetime-picker.endTime": "end time",
"uni-datetime-picker.ok": "ok",
"uni-datetime-picker.clear": "clear",
"uni-datetime-picker.cancel": "cancel",
"uni-datetime-picker.year": "-",
"uni-datetime-picker.month": "",
"uni-calender.MON": "MON",
"uni-calender.TUE": "TUE",
"uni-calender.WED": "WED",
"uni-calender.THU": "THU",
"uni-calender.FRI": "FRI",
"uni-calender.SAT": "SAT",
"uni-calender.SUN": "SUN",
"uni-calender.confirm": "confirm"
}
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}
{
"uni-datetime-picker.selectDate": "选择日期",
"uni-datetime-picker.selectTime": "选择时间",
"uni-datetime-picker.selectDateTime": "选择日期时间",
"uni-datetime-picker.startDate": "开始日期",
"uni-datetime-picker.endDate": "结束日期",
"uni-datetime-picker.startTime": "开始时间",
"uni-datetime-picker.endTime": "结束时间",
"uni-datetime-picker.ok": "确定",
"uni-datetime-picker.clear": "清除",
"uni-datetime-picker.cancel": "取消",
"uni-datetime-picker.year": "年",
"uni-datetime-picker.month": "月",
"uni-calender.SUN": "日",
"uni-calender.MON": "一",
"uni-calender.TUE": "二",
"uni-calender.WED": "三",
"uni-calender.THU": "四",
"uni-calender.FRI": "五",
"uni-calender.SAT": "六",
"uni-calender.confirm": "确认"
}
\ No newline at end of file
{
"uni-datetime-picker.selectDate": "選擇日期",
"uni-datetime-picker.selectTime": "選擇時間",
"uni-datetime-picker.selectDateTime": "選擇日期時間",
"uni-datetime-picker.startDate": "開始日期",
"uni-datetime-picker.endDate": "結束日期",
"uni-datetime-picker.startTime": "開始时间",
"uni-datetime-picker.endTime": "結束时间",
"uni-datetime-picker.ok": "確定",
"uni-datetime-picker.clear": "清除",
"uni-datetime-picker.cancel": "取消",
"uni-datetime-picker.year": "年",
"uni-datetime-picker.month": "月",
"uni-calender.SUN": "日",
"uni-calender.MON": "一",
"uni-calender.TUE": "二",
"uni-calender.WED": "三",
"uni-calender.THU": "四",
"uni-calender.FRI": "五",
"uni-calender.SAT": "六",
"uni-calender.confirm": "確認"
}
\ No newline at end of file
{
"id": "uni-datetime-picker",
"displayName": "uni-datetime-picker 日期选择器",
"version": "2.2.24",
"description": "uni-datetime-picker 日期时间选择器,支持日历,支持范围选择",
"keywords": [
"uni-datetime-picker",
"uni-ui",
"uniui",
"日期时间选择器",
"日期时间"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": [
"uni-scss",
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "n"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
> `重要通知:组件升级更新 2.0.0 后,支持日期+时间范围选择,组件 ui 将使用日历选择日期,ui 变化较大,同时支持 PC 和 移动端。此版本不向后兼容,不再支持单独的时间选择(type=time)及相关的 hide-second 属性(时间选可使用内置组件 picker)。若仍需使用旧版本,可在插件市场下载*非uni_modules版本*,旧版本将不再维护`
## DatetimePicker 时间选择器
> **组件名:uni-datetime-picker**
> 代码块: `uDatetimePicker`
该组件的优势是,支持**时间戳**输入和输出(起始时间、终止时间也支持时间戳),可**同时选择**日期和时间。
若只是需要单独选择日期和时间,不需要时间戳输入和输出,可使用原生的 picker 组件。
**_点击 picker 默认值规则:_**
- 若设置初始值 value, 会显示在 picker 显示框中
- 若无初始值 value,则初始值 value 为当前本地时间 Date.now(), 但不会显示在 picker 显示框中
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
## 1.3.5(2022-01-24)
- 优化 size 属性可以传入不带单位的字符串数值
## 1.3.4(2022-01-24)
- 优化 size 支持其他单位
## 1.3.3(2022-01-17)
- 修复 nvue 有些图标不显示的bug,兼容老版本图标
## 1.3.2(2021-12-01)
- 优化 示例可复制图标名称
## 1.3.1(2021-11-23)
- 优化 兼容旧组件 type 值
## 1.3.0(2021-11-19)
- 新增 更多图标
- 优化 自定义图标使用方式
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons)
## 1.1.7(2021-11-08)
## 1.2.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.5(2021-05-12)
- 新增 组件示例地址
## 1.1.4(2021-02-05)
- 调整为uni_modules目录规范
<template>
<!-- #ifdef APP-NVUE -->
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
<!-- #endif -->
</template>
<script>
import icons from './icons.js';
const getVal = (val) => {
const reg = /^[0-9]*$/g
return (typeof val === 'number' || reg.test(val) )? val + 'px' : val;
}
// #ifdef APP-NVUE
var domModule = weex.requireModule('dom');
import iconUrl from './uniicons.ttf'
domModule.addRule('fontFace', {
'fontFamily': "uniicons",
'src': "url('"+iconUrl+"')"
});
// #endif
/**
* Icons 图标
* @description 用于展示 icons 图标
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
* @property {Number} size 图标大小
* @property {String} type 图标图案,参考示例
* @property {String} color 图标颜色
* @property {String} customPrefix 自定义图标
* @event {Function} click 点击 Icon 触发事件
*/
export default {
name: 'UniIcons',
emits:['click'],
props: {
type: {
type: String,
default: ''
},
color: {
type: String,
default: '#333333'
},
size: {
type: [Number, String],
default: 16
},
customPrefix:{
type: String,
default: ''
}
},
data() {
return {
icons: icons.glyphs
}
},
computed:{
unicode(){
let code = this.icons.find(v=>v.font_class === this.type)
if(code){
return unescape(`%u${code.unicode}`)
}
return ''
},
iconSize(){
return getVal(this.size)
}
},
methods: {
_onClick() {
this.$emit('click')
}
}
}
</script>
<style lang="scss">
/* #ifndef APP-NVUE */
@import './uniicons.css';
@font-face {
font-family: uniicons;
src: url('./uniicons.ttf') format('truetype');
}
/* #endif */
.uni-icons {
font-family: uniicons;
text-decoration: none;
text-align: center;
}
</style>
.uniui-color:before {
content: "\e6cf";
}
.uniui-wallet:before {
content: "\e6b1";
}
.uniui-settings-filled:before {
content: "\e6ce";
}
.uniui-auth-filled:before {
content: "\e6cc";
}
.uniui-shop-filled:before {
content: "\e6cd";
}
.uniui-staff-filled:before {
content: "\e6cb";
}
.uniui-vip-filled:before {
content: "\e6c6";
}
.uniui-plus-filled:before {
content: "\e6c7";
}
.uniui-folder-add-filled:before {
content: "\e6c8";
}
.uniui-color-filled:before {
content: "\e6c9";
}
.uniui-tune-filled:before {
content: "\e6ca";
}
.uniui-calendar-filled:before {
content: "\e6c0";
}
.uniui-notification-filled:before {
content: "\e6c1";
}
.uniui-wallet-filled:before {
content: "\e6c2";
}
.uniui-medal-filled:before {
content: "\e6c3";
}
.uniui-gift-filled:before {
content: "\e6c4";
}
.uniui-fire-filled:before {
content: "\e6c5";
}
.uniui-refreshempty:before {
content: "\e6bf";
}
.uniui-location-filled:before {
content: "\e6af";
}
.uniui-person-filled:before {
content: "\e69d";
}
.uniui-personadd-filled:before {
content: "\e698";
}
.uniui-back:before {
content: "\e6b9";
}
.uniui-forward:before {
content: "\e6ba";
}
.uniui-arrow-right:before {
content: "\e6bb";
}
.uniui-arrowthinright:before {
content: "\e6bb";
}
.uniui-arrow-left:before {
content: "\e6bc";
}
.uniui-arrowthinleft:before {
content: "\e6bc";
}
.uniui-arrow-up:before {
content: "\e6bd";
}
.uniui-arrowthinup:before {
content: "\e6bd";
}
.uniui-arrow-down:before {
content: "\e6be";
}
.uniui-arrowthindown:before {
content: "\e6be";
}
.uniui-bottom:before {
content: "\e6b8";
}
.uniui-arrowdown:before {
content: "\e6b8";
}
.uniui-right:before {
content: "\e6b5";
}
.uniui-arrowright:before {
content: "\e6b5";
}
.uniui-top:before {
content: "\e6b6";
}
.uniui-arrowup:before {
content: "\e6b6";
}
.uniui-left:before {
content: "\e6b7";
}
.uniui-arrowleft:before {
content: "\e6b7";
}
.uniui-eye:before {
content: "\e651";
}
.uniui-eye-filled:before {
content: "\e66a";
}
.uniui-eye-slash:before {
content: "\e6b3";
}
.uniui-eye-slash-filled:before {
content: "\e6b4";
}
.uniui-info-filled:before {
content: "\e649";
}
.uniui-reload:before {
content: "\e6b2";
}
.uniui-micoff-filled:before {
content: "\e6b0";
}
.uniui-map-pin-ellipse:before {
content: "\e6ac";
}
.uniui-map-pin:before {
content: "\e6ad";
}
.uniui-location:before {
content: "\e6ae";
}
.uniui-starhalf:before {
content: "\e683";
}
.uniui-star:before {
content: "\e688";
}
.uniui-star-filled:before {
content: "\e68f";
}
.uniui-calendar:before {
content: "\e6a0";
}
.uniui-fire:before {
content: "\e6a1";
}
.uniui-medal:before {
content: "\e6a2";
}
.uniui-font:before {
content: "\e6a3";
}
.uniui-gift:before {
content: "\e6a4";
}
.uniui-link:before {
content: "\e6a5";
}
.uniui-notification:before {
content: "\e6a6";
}
.uniui-staff:before {
content: "\e6a7";
}
.uniui-vip:before {
content: "\e6a8";
}
.uniui-folder-add:before {
content: "\e6a9";
}
.uniui-tune:before {
content: "\e6aa";
}
.uniui-auth:before {
content: "\e6ab";
}
.uniui-person:before {
content: "\e699";
}
.uniui-email-filled:before {
content: "\e69a";
}
.uniui-phone-filled:before {
content: "\e69b";
}
.uniui-phone:before {
content: "\e69c";
}
.uniui-email:before {
content: "\e69e";
}
.uniui-personadd:before {
content: "\e69f";
}
.uniui-chatboxes-filled:before {
content: "\e692";
}
.uniui-contact:before {
content: "\e693";
}
.uniui-chatbubble-filled:before {
content: "\e694";
}
.uniui-contact-filled:before {
content: "\e695";
}
.uniui-chatboxes:before {
content: "\e696";
}
.uniui-chatbubble:before {
content: "\e697";
}
.uniui-upload-filled:before {
content: "\e68e";
}
.uniui-upload:before {
content: "\e690";
}
.uniui-weixin:before {
content: "\e691";
}
.uniui-compose:before {
content: "\e67f";
}
.uniui-qq:before {
content: "\e680";
}
.uniui-download-filled:before {
content: "\e681";
}
.uniui-pyq:before {
content: "\e682";
}
.uniui-sound:before {
content: "\e684";
}
.uniui-trash-filled:before {
content: "\e685";
}
.uniui-sound-filled:before {
content: "\e686";
}
.uniui-trash:before {
content: "\e687";
}
.uniui-videocam-filled:before {
content: "\e689";
}
.uniui-spinner-cycle:before {
content: "\e68a";
}
.uniui-weibo:before {
content: "\e68b";
}
.uniui-videocam:before {
content: "\e68c";
}
.uniui-download:before {
content: "\e68d";
}
.uniui-help:before {
content: "\e679";
}
.uniui-navigate-filled:before {
content: "\e67a";
}
.uniui-plusempty:before {
content: "\e67b";
}
.uniui-smallcircle:before {
content: "\e67c";
}
.uniui-minus-filled:before {
content: "\e67d";
}
.uniui-micoff:before {
content: "\e67e";
}
.uniui-closeempty:before {
content: "\e66c";
}
.uniui-clear:before {
content: "\e66d";
}
.uniui-navigate:before {
content: "\e66e";
}
.uniui-minus:before {
content: "\e66f";
}
.uniui-image:before {
content: "\e670";
}
.uniui-mic:before {
content: "\e671";
}
.uniui-paperplane:before {
content: "\e672";
}
.uniui-close:before {
content: "\e673";
}
.uniui-help-filled:before {
content: "\e674";
}
.uniui-paperplane-filled:before {
content: "\e675";
}
.uniui-plus:before {
content: "\e676";
}
.uniui-mic-filled:before {
content: "\e677";
}
.uniui-image-filled:before {
content: "\e678";
}
.uniui-locked-filled:before {
content: "\e668";
}
.uniui-info:before {
content: "\e669";
}
.uniui-locked:before {
content: "\e66b";
}
.uniui-camera-filled:before {
content: "\e658";
}
.uniui-chat-filled:before {
content: "\e659";
}
.uniui-camera:before {
content: "\e65a";
}
.uniui-circle:before {
content: "\e65b";
}
.uniui-checkmarkempty:before {
content: "\e65c";
}
.uniui-chat:before {
content: "\e65d";
}
.uniui-circle-filled:before {
content: "\e65e";
}
.uniui-flag:before {
content: "\e65f";
}
.uniui-flag-filled:before {
content: "\e660";
}
.uniui-gear-filled:before {
content: "\e661";
}
.uniui-home:before {
content: "\e662";
}
.uniui-home-filled:before {
content: "\e663";
}
.uniui-gear:before {
content: "\e664";
}
.uniui-smallcircle-filled:before {
content: "\e665";
}
.uniui-map-filled:before {
content: "\e666";
}
.uniui-map:before {
content: "\e667";
}
.uniui-refresh-filled:before {
content: "\e656";
}
.uniui-refresh:before {
content: "\e657";
}
.uniui-cloud-upload:before {
content: "\e645";
}
.uniui-cloud-download-filled:before {
content: "\e646";
}
.uniui-cloud-download:before {
content: "\e647";
}
.uniui-cloud-upload-filled:before {
content: "\e648";
}
.uniui-redo:before {
content: "\e64a";
}
.uniui-images-filled:before {
content: "\e64b";
}
.uniui-undo-filled:before {
content: "\e64c";
}
.uniui-more:before {
content: "\e64d";
}
.uniui-more-filled:before {
content: "\e64e";
}
.uniui-undo:before {
content: "\e64f";
}
.uniui-images:before {
content: "\e650";
}
.uniui-paperclip:before {
content: "\e652";
}
.uniui-settings:before {
content: "\e653";
}
.uniui-search:before {
content: "\e654";
}
.uniui-redo-filled:before {
content: "\e655";
}
.uniui-list:before {
content: "\e644";
}
.uniui-mail-open-filled:before {
content: "\e63a";
}
.uniui-hand-down-filled:before {
content: "\e63c";
}
.uniui-hand-down:before {
content: "\e63d";
}
.uniui-hand-up-filled:before {
content: "\e63e";
}
.uniui-hand-up:before {
content: "\e63f";
}
.uniui-heart-filled:before {
content: "\e641";
}
.uniui-mail-open:before {
content: "\e643";
}
.uniui-heart:before {
content: "\e639";
}
.uniui-loop:before {
content: "\e633";
}
.uniui-pulldown:before {
content: "\e632";
}
.uniui-scan:before {
content: "\e62a";
}
.uniui-bars:before {
content: "\e627";
}
.uniui-cart-filled:before {
content: "\e629";
}
.uniui-checkbox:before {
content: "\e62b";
}
.uniui-checkbox-filled:before {
content: "\e62c";
}
.uniui-shop:before {
content: "\e62f";
}
.uniui-headphones:before {
content: "\e630";
}
.uniui-cart:before {
content: "\e631";
}
{
"id": "uni-icons",
"displayName": "uni-icons 图标",
"version": "1.3.5",
"description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。",
"keywords": [
"uni-ui",
"uniui",
"icon",
"图标"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.2.14"
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
## Icons 图标
> **组件名:uni-icons**
> 代码块: `uIcons`
用于展示 icons 图标 。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
## 1.0.3(2022-01-21)
- 优化 组件示例
## 1.0.2(2021-11-22)
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
## 1.0.1(2021-11-22)
- 修复 vue3中scss语法兼容问题
## 1.0.0(2021-11-18)
- init
@import './styles/index.scss';
{
"id": "uni-scss",
"displayName": "uni-scss 辅助样式",
"version": "1.0.3",
"description": "uni-sass是uni-ui提供的一套全局样式 ,通过一些简单的类名和sass变量,实现简单的页面布局操作,比如颜色、边距、圆角等。",
"keywords": [
"uni-scss",
"uni-ui",
"辅助样式"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"JS SDK",
"通用 SDK"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "n",
"联盟": "n"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
`uni-sass``uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
@import './setting/_variables.scss';
@import './setting/_border.scss';
@import './setting/_color.scss';
@import './setting/_space.scss';
@import './setting/_radius.scss';
@import './setting/_text.scss';
@import './setting/_styles.scss';
.uni-border {
border: 1px $uni-border-1 solid;
}
\ No newline at end of file
// TODO 暂时不需要 class ,需要用户使用变量实现 ,如果使用类名其实并不推荐
// @mixin get-styles($k,$c) {
// @if $k == size or $k == weight{
// font-#{$k}:#{$c}
// }@else{
// #{$k}:#{$c}
// }
// }
$uni-ui-color:(
// 主色
primary: $uni-primary,
primary-disable: $uni-primary-disable,
primary-light: $uni-primary-light,
// 辅助色
success: $uni-success,
success-disable: $uni-success-disable,
success-light: $uni-success-light,
warning: $uni-warning,
warning-disable: $uni-warning-disable,
warning-light: $uni-warning-light,
error: $uni-error,
error-disable: $uni-error-disable,
error-light: $uni-error-light,
info: $uni-info,
info-disable: $uni-info-disable,
info-light: $uni-info-light,
// 中性色
main-color: $uni-main-color,
base-color: $uni-base-color,
secondary-color: $uni-secondary-color,
extra-color: $uni-extra-color,
// 背景色
bg-color: $uni-bg-color,
// 边框颜色
border-1: $uni-border-1,
border-2: $uni-border-2,
border-3: $uni-border-3,
border-4: $uni-border-4,
// 黑色
black:$uni-black,
// 白色
white:$uni-white,
// 透明
transparent:$uni-transparent
) !default;
@each $key, $child in $uni-ui-color {
.uni-#{"" + $key} {
color: $child;
}
.uni-#{"" + $key}-bg {
background-color: $child;
}
}
.uni-shadow-sm {
box-shadow: $uni-shadow-sm;
}
.uni-shadow-base {
box-shadow: $uni-shadow-base;
}
.uni-shadow-lg {
box-shadow: $uni-shadow-lg;
}
.uni-mask {
background-color:$uni-mask;
}
@mixin radius($r,$d:null ,$important: false){
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
// Key exists within the $uni-radius variable
@if (map-has-key($uni-radius, $r) and $d){
@if $d == t {
border-top-left-radius:$radius-value;
border-top-right-radius:$radius-value;
}@else if $d == r {
border-top-right-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == b {
border-bottom-left-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == l {
border-top-left-radius:$radius-value;
border-bottom-left-radius:$radius-value;
}@else if $d == tl {
border-top-left-radius:$radius-value;
}@else if $d == tr {
border-top-right-radius:$radius-value;
}@else if $d == br {
border-bottom-right-radius:$radius-value;
}@else if $d == bl {
border-bottom-left-radius:$radius-value;
}
}@else{
border-radius:$radius-value;
}
}
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $key} {
@include radius($key)
}
}@else{
.uni-radius {
@include radius($key)
}
}
}
@each $direction in t, r, b, l,tl, tr, br, bl {
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $direction}-#{"" + $key} {
@include radius($key,$direction,false)
}
}@else{
.uni-radius-#{$direction} {
@include radius($key,$direction,false)
}
}
}
}
@mixin fn($space,$direction,$size,$n) {
@if $n {
#{$space}-#{$direction}: #{$size*$uni-space-root}px
} @else {
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
}
}
@mixin get-styles($direction,$i,$space,$n){
@if $direction == t {
@include fn($space, top,$i,$n);
}
@if $direction == r {
@include fn($space, right,$i,$n);
}
@if $direction == b {
@include fn($space, bottom,$i,$n);
}
@if $direction == l {
@include fn($space, left,$i,$n);
}
@if $direction == x {
@include fn($space, left,$i,$n);
@include fn($space, right,$i,$n);
}
@if $direction == y {
@include fn($space, top,$i,$n);
@include fn($space, bottom,$i,$n);
}
@if $direction == a {
@if $n {
#{$space}:#{$i*$uni-space-root}px;
} @else {
#{$space}:#{-$i*$uni-space-root}px;
}
}
}
@each $orientation in m,p {
$space: margin;
@if $orientation == m {
$space: margin;
} @else {
$space: padding;
}
@for $i from 0 through 16 {
@each $direction in t, r, b, l, x, y, a {
.uni-#{$orientation}#{$direction}-#{$i} {
@include get-styles($direction,$i,$space,true);
}
.uni-#{$orientation}#{$direction}-n#{$i} {
@include get-styles($direction,$i,$space,false);
}
}
}
}
\ No newline at end of file
/* #ifndef APP-NVUE */
$-color-white:#fff;
$-color-black:#000;
@mixin base-style($color) {
color: #fff;
background-color: $color;
border-color: mix($-color-black, $color, 8%);
&:not([hover-class]):active {
background: mix($-color-black, $color, 10%);
border-color: mix($-color-black, $color, 20%);
color: $-color-white;
outline: none;
}
}
@mixin is-color($color) {
@include base-style($color);
&[loading] {
@include base-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&[loading],
&:not([hover-class]):active {
color: $-color-white;
border-color: mix(darken($color,10%), $-color-white);
background-color: mix($color, $-color-white);
}
}
}
@mixin base-plain-style($color) {
color:$color;
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 70%);
&:not([hover-class]):active {
background: mix($-color-white, $color, 80%);
color: $color;
outline: none;
border-color: mix($-color-white, $color, 50%);
}
}
@mixin is-plain($color){
&[plain] {
@include base-plain-style($color);
&[loading] {
@include base-plain-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&:active {
color: mix($-color-white, $color, 40%);
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 80%);
}
}
}
}
.uni-btn {
margin: 5px;
color: #393939;
border:1px solid #ccc;
font-size: 16px;
font-weight: 200;
background-color: #F9F9F9;
// TODO 暂时处理边框隐藏一边的问题
overflow: visible;
&::after{
border: none;
}
&:not([type]),&[type=default] {
color: #999;
&[loading] {
background: none;
&::before {
margin-right:5px;
}
}
&[disabled]{
color: mix($-color-white, #999, 60%);
&,
&[loading],
&:active {
color: mix($-color-white, #999, 60%);
background-color: mix($-color-white,$-color-black , 98%);
border-color: mix($-color-white, #999, 85%);
}
}
&[plain] {
color: #999;
background: none;
border-color: $uni-border-1;
&:not([hover-class]):active {
background: none;
color: mix($-color-white, $-color-black, 80%);
border-color: mix($-color-white, $-color-black, 90%);
outline: none;
}
&[disabled]{
&,
&[loading],
&:active {
background: none;
color: mix($-color-white, #999, 60%);
border-color: mix($-color-white, #999, 85%);
}
}
}
}
&:not([hover-class]):active {
color: mix($-color-white, $-color-black, 50%);
}
&[size=mini] {
font-size: 16px;
font-weight: 200;
border-radius: 8px;
}
&.uni-btn-small {
font-size: 14px;
}
&.uni-btn-mini {
font-size: 12px;
}
&.uni-btn-radius {
border-radius: 999px;
}
&[type=primary] {
@include is-color($uni-primary);
@include is-plain($uni-primary)
}
&[type=success] {
@include is-color($uni-success);
@include is-plain($uni-success)
}
&[type=error] {
@include is-color($uni-error);
@include is-plain($uni-error)
}
&[type=warning] {
@include is-color($uni-warning);
@include is-plain($uni-warning)
}
&[type=info] {
@include is-color($uni-info);
@include is-plain($uni-info)
}
}
/* #endif */
@mixin get-styles($k,$c) {
@if $k == size or $k == weight{
font-#{$k}:#{$c}
}@else{
#{$k}:#{$c}
}
}
@each $key, $child in $uni-headings {
/* #ifndef APP-NVUE */
.uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
/* #ifdef APP-NVUE */
.container .uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
}
// @use "sass:math";
@import '../tools/functions.scss';
// 间距基础倍数
$uni-space-root: 2 !default;
// 边框半径默认值
$uni-radius-root:5px !default;
$uni-radius: () !default;
// 边框半径断点
$uni-radius: map-deep-merge(
(
0: 0,
// TODO 当前版本暂时不支持 sm 属性
// 'sm': math.div($uni-radius-root, 2),
null: $uni-radius-root,
'lg': $uni-radius-root * 2,
'xl': $uni-radius-root * 6,
'pill': 9999px,
'circle': 50%
),
$uni-radius
);
// 字体家族
$body-font-family: 'Roboto', sans-serif !default;
// 文本
$heading-font-family: $body-font-family !default;
$uni-headings: () !default;
$letterSpacing: -0.01562em;
$uni-headings: map-deep-merge(
(
'h1': (
size: 32px,
weight: 300,
line-height: 50px,
// letter-spacing:-0.01562em
),
'h2': (
size: 28px,
weight: 300,
line-height: 40px,
// letter-spacing: -0.00833em
),
'h3': (
size: 24px,
weight: 400,
line-height: 32px,
// letter-spacing: normal
),
'h4': (
size: 20px,
weight: 400,
line-height: 30px,
// letter-spacing: 0.00735em
),
'h5': (
size: 16px,
weight: 400,
line-height: 24px,
// letter-spacing: normal
),
'h6': (
size: 14px,
weight: 500,
line-height: 18px,
// letter-spacing: 0.0125em
),
'subtitle': (
size: 12px,
weight: 400,
line-height: 20px,
// letter-spacing: 0.00937em
),
'body': (
font-size: 14px,
font-weight: 400,
line-height: 22px,
// letter-spacing: 0.03125em
),
'caption': (
'size': 12px,
'weight': 400,
'line-height': 20px,
// 'letter-spacing': 0.03333em,
// 'text-transform': false
)
),
$uni-headings
);
// 主色
$uni-primary: #2979ff !default;
$uni-primary-disable:lighten($uni-primary,20%) !default;
$uni-primary-light: lighten($uni-primary,25%) !default;
// 辅助色
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
$uni-success: #18bc37 !default;
$uni-success-disable:lighten($uni-success,20%) !default;
$uni-success-light: lighten($uni-success,25%) !default;
$uni-warning: #f3a73f !default;
$uni-warning-disable:lighten($uni-warning,20%) !default;
$uni-warning-light: lighten($uni-warning,25%) !default;
$uni-error: #e43d33 !default;
$uni-error-disable:lighten($uni-error,20%) !default;
$uni-error-light: lighten($uni-error,25%) !default;
$uni-info: #8f939c !default;
$uni-info-disable:lighten($uni-info,20%) !default;
$uni-info-light: lighten($uni-info,25%) !default;
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
$uni-main-color: #3a3a3a !default; // 主要文字
$uni-base-color: #6a6a6a !default; // 常规文字
$uni-secondary-color: #909399 !default; // 次要文字
$uni-extra-color: #c7c7c7 !default; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0 !default;
$uni-border-2: #EDEDED !default;
$uni-border-3: #DCDCDC !default;
$uni-border-4: #B9B9B9 !default;
// 常规色
$uni-black: #000000 !default;
$uni-white: #ffffff !default;
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
// 背景色
$uni-bg-color: #f7f7f7 !default;
/* 水平间距 */
$uni-spacing-sm: 8px !default;
$uni-spacing-base: 15px !default;
$uni-spacing-lg: 30px !default;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
// 合并 map
@function map-deep-merge($parent-map, $child-map){
$result: $parent-map;
@each $key, $child in $child-map {
$parent-has-key: map-has-key($result, $key);
$parent-value: map-get($result, $key);
$parent-type: type-of($parent-value);
$child-type: type-of($child);
$parent-is-map: $parent-type == map;
$child-is-map: $child-type == map;
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
$result: map-merge($result, ( $key: $child ));
}@else {
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
}
}
@return $result;
};
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
// 辅助色
$uni-success: #4cd964;
// 警告色
$uni-warning: #f0ad4e;
// 错误色
$uni-error: #dd524d;
// 描述色
$uni-info: #909399;
// 中性色
$uni-main-color: #303133;
$uni-base-color: #606266;
$uni-secondary-color: #909399;
$uni-extra-color: #C0C4CC;
// 背景色
$uni-bg-color: #f5f5f5;
// 边框颜色
$uni-border-1: #DCDFE6;
$uni-border-2: #E4E7ED;
$uni-border-3: #EBEEF5;
$uni-border-4: #F2F6FC;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
@import './styles/setting/_variables.scss';
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
$uni-primary-disable:mix(#fff,$uni-primary,50%);
$uni-primary-light: mix(#fff,$uni-primary,80%);
// 辅助色
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
$uni-success: #18bc37;
$uni-success-disable:mix(#fff,$uni-success,50%);
$uni-success-light: mix(#fff,$uni-success,80%);
$uni-warning: #f3a73f;
$uni-warning-disable:mix(#fff,$uni-warning,50%);
$uni-warning-light: mix(#fff,$uni-warning,80%);
$uni-error: #e43d33;
$uni-error-disable:mix(#fff,$uni-error,50%);
$uni-error-light: mix(#fff,$uni-error,80%);
$uni-info: #8f939c;
$uni-info-disable:mix(#fff,$uni-info,50%);
$uni-info-light: mix(#fff,$uni-info,80%);
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
$uni-main-color: #3a3a3a; // 主要文字
$uni-base-color: #6a6a6a; // 常规文字
$uni-secondary-color: #909399; // 次要文字
$uni-extra-color: #c7c7c7; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0;
$uni-border-2: #EDEDED;
$uni-border-3: #DCDCDC;
$uni-border-4: #B9B9B9;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
// 背景色
$uni-bg-color: #f7f7f7;
/* 水平间距 */
$uni-spacing-sm: 8px;
$uni-spacing-base: 15px;
$uni-spacing-lg: 30px;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4);
## 1.2.4(2023-05-09)
- 修复 i18n 国际化不正确的 Bug
## 1.2.3(2022-05-24)
- 新增 readonly 属性,组件只读
## 1.2.2(2022-05-06)
- 修复 vue3 input 事件不生效的bug
## 1.2.1(2022-05-06)
- 修复 多余代码导致的bug
## 1.2.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-search-bar](https://uniapp.dcloud.io/component/uniui/uni-search-bar)
## 1.1.2(2021-08-30)
- 修复 value 属性与 modelValue 属性不兼容的Bug
## 1.1.1(2021-08-24)
- 新增 支持国际化
## 1.1.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.9(2021-05-12)
- 新增 项目示例地址
## 1.0.8(2021-04-21)
- 优化 添加依赖 uni-icons, 导入后自动下载依赖
## 1.0.7(2021-04-15)
- uni-ui 新增 uni-search-bar 的 focus 事件
## 1.0.6(2021-02-05)
- 优化 组件引用关系,通过uni_modules引用组件
## 1.0.5(2021-02-05)
- 调整为uni_modules目录规范
- 新增 支持双向绑定
- 更改 input 事件的返回值,e={value:Number} --> e=value
- 新增 支持图标插槽
- 新增 支持 clear、blur 事件
- 新增 支持 focus 属性
- 去掉组件背景色
{
"uni-search-bar.cancel": "cancel",
"uni-search-bar.placeholder": "Search enter content"
}
\ No newline at end of file
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}
{
"uni-search-bar.cancel": "取消",
"uni-search-bar.placeholder": "请输入搜索内容"
}
{
"uni-search-bar.cancel": "取消",
"uni-search-bar.placeholder": "請輸入搜索內容"
}
<template>
<view class="uni-searchbar">
<view :style="{borderRadius:radius+'px',backgroundColor: bgColor}" class="uni-searchbar__box"
@click="searchClick">
<view class="uni-searchbar__box-icon-search">
<slot name="searchIcon">
<uni-icons color="#c0c4cc" size="18" type="search" />
</slot>
</view>
<input v-if="show || searchVal" :focus="showSync" :disabled="readonly" :placeholder="placeholderText" :maxlength="maxlength"
class="uni-searchbar__box-search-input" confirm-type="search" type="text" v-model="searchVal"
@confirm="confirm" @blur="blur" @focus="emitFocus" />
<text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text>
<view v-if="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='') &&!readonly"
class="uni-searchbar__box-icon-clear" @click="clear">
<slot name="clearIcon">
<uni-icons color="#c0c4cc" size="20" type="clear" />
</slot>
</view>
</view>
<text @click="cancel" class="uni-searchbar__cancel"
v-if="cancelButton ==='always' || show && cancelButton ==='auto'">{{cancelTextI18n}}</text>
</view>
</template>
<script>
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from './i18n/index.js'
const {
t
} = initVueI18n(messages)
/**
* SearchBar 搜索栏
* @description 搜索栏组件,通常用于搜索商品、文章等
* @tutorial https://ext.dcloud.net.cn/plugin?id=866
* @property {Number} radius 搜索栏圆角
* @property {Number} maxlength 输入最大长度
* @property {String} placeholder 搜索栏Placeholder
* @property {String} clearButton = [always|auto|none] 是否显示清除按钮
* @value always 一直显示
* @value auto 输入框不为空时显示
* @value none 一直不显示
* @property {String} cancelButton = [always|auto|none] 是否显示取消按钮
* @value always 一直显示
* @value auto 输入框不为空时显示
* @value none 一直不显示
* @property {String} cancelText 取消按钮的文字
* @property {String} bgColor 输入框背景颜色
* @property {Boolean} focus 是否自动聚焦
* @property {Boolean} readonly 组件只读,不能有任何操作,只做展示
* @event {Function} confirm uniSearchBar 的输入框 confirm 事件,返回参数为uniSearchBar的value,e={value:Number}
* @event {Function} input uniSearchBar 的 value 改变时触发事件,返回参数为uniSearchBar的value,e=value
* @event {Function} cancel 点击取消按钮时触发事件,返回参数为uniSearchBar的value,e={value:Number}
* @event {Function} clear 点击清除按钮时触发事件,返回参数为uniSearchBar的value,e={value:Number}
* @event {Function} blur input失去焦点时触发事件,返回参数为uniSearchBar的value,e={value:Number}
*/
export default {
name: "UniSearchBar",
emits: ['input', 'update:modelValue', 'clear', 'cancel', 'confirm', 'blur', 'focus'],
props: {
placeholder: {
type: String,
default: ""
},
radius: {
type: [Number, String],
default: 5
},
clearButton: {
type: String,
default: "auto"
},
cancelButton: {
type: String,
default: "auto"
},
cancelText: {
type: String,
default: ""
},
bgColor: {
type: String,
default: "#F8F8F8"
},
maxlength: {
type: [Number, String],
default: 100
},
value: {
type: [Number, String],
default: ""
},
modelValue: {
type: [Number, String],
default: ""
},
focus: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
}
},
data() {
return {
show: false,
showSync: false,
searchVal: ''
}
},
computed: {
cancelTextI18n() {
return this.cancelText || t("uni-search-bar.cancel")
},
placeholderText() {
return this.placeholder || t("uni-search-bar.placeholder")
}
},
watch: {
// #ifndef VUE3
value: {
immediate: true,
handler(newVal) {
this.searchVal = newVal
if (newVal) {
this.show = true
}
}
},
// #endif
// #ifdef VUE3
modelValue: {
immediate: true,
handler(newVal) {
this.searchVal = newVal
if (newVal) {
this.show = true
}
}
},
// #endif
focus: {
immediate: true,
handler(newVal) {
if (newVal) {
if(this.readonly) return
this.show = true;
this.$nextTick(() => {
this.showSync = true
})
}
}
},
searchVal(newVal, oldVal) {
this.$emit("input", newVal)
// #ifdef VUE3
this.$emit("update:modelValue", newVal)
// #endif
}
},
methods: {
searchClick() {
if(this.readonly) return
if (this.show) {
return
}
this.show = true;
this.$nextTick(() => {
this.showSync = true
})
},
clear() {
this.$emit("clear", {
value: this.searchVal
})
this.searchVal = ""
},
cancel() {
if(this.readonly) return
this.$emit("cancel", {
value: this.searchVal
});
this.searchVal = ""
this.show = false
this.showSync = false
// #ifndef APP-PLUS
uni.hideKeyboard()
// #endif
// #ifdef APP-PLUS
plus.key.hideSoftKeybord()
// #endif
},
confirm() {
// #ifndef APP-PLUS
uni.hideKeyboard();
// #endif
// #ifdef APP-PLUS
plus.key.hideSoftKeybord()
// #endif
this.$emit("confirm", {
value: this.searchVal
})
},
blur() {
// #ifndef APP-PLUS
uni.hideKeyboard();
// #endif
// #ifdef APP-PLUS
plus.key.hideSoftKeybord()
// #endif
this.$emit("blur", {
value: this.searchVal
})
},
emitFocus(e) {
this.$emit("focus", e.detail)
}
}
};
</script>
<style lang="scss">
$uni-searchbar-height: 36px;
.uni-searchbar {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
position: relative;
padding: 10px;
// background-color: #fff;
}
.uni-searchbar__box {
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
/* #endif */
overflow: hidden;
position: relative;
flex: 1;
justify-content: center;
flex-direction: row;
align-items: center;
height: $uni-searchbar-height;
padding: 5px 8px 5px 0px;
}
.uni-searchbar__box-icon-search {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
// width: 32px;
padding: 0 8px;
justify-content: center;
align-items: center;
color: #B3B3B3;
}
.uni-searchbar__box-search-input {
flex: 1;
font-size: 14px;
color: #333;
}
.uni-searchbar__box-icon-clear {
align-items: center;
line-height: 24px;
padding-left: 8px;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-searchbar__text-placeholder {
font-size: 14px;
color: #B3B3B3;
margin-left: 5px;
}
.uni-searchbar__cancel {
padding-left: 10px;
line-height: $uni-searchbar-height;
font-size: 14px;
color: #333333;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
</style>
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论