Skip to content

梁建民 / wmsApp

Go to a project
Commit 5020007c by LJM
Options

入库单详情

parent 95fa1e99
Expand all
Inline Side-by-side
Showing with 1557 additions and 46 deletions
assets/css/arrivalRegister/index.scss 0 → 100644
.arrivalRegister {
padding: 15rpx 22rpx;
.search-box {
height: 60rpx;
background: #ffffff;
border-radius: 10rpx;
padding: 0 18rpx 0 0;
.sn {
width: 164rpx;
height: 35rpx;
border-right: 1px solid #f0f0f2;
.uni-input {
font-size: 18rpx;
color: #292b33;
font-weight: bold;
}
.uni-arrow {
width: 14rpx;
height: 9rpx;
background: url('https://img.ichunt.com/images/ichunt/202304/10/e4c72319ad41ce1425f71cc6ec35f111.png') no-repeat center;
background-size: contain;
margin-left: 12rpx;
}
}
.search-bar {
width: calc(100% - 164rpx);
.icon-juxing1 {
font-size: 30rpx;
color: #919399;
margin-left: 17rpx;
margin-right: 13rpx;
}
.uni-input {
font-size: 18rpx;
color: #484b59;
}
.icon-a-juxing11 {
font-size: 30rpx;
color: #c6c7cc;
}
}
}
.list {
margin-top: 15rpx;
padding-bottom: 150rpx;
flex-wrap: wrap;
.box {
padding: 15rpx 17rpx 0 17rpx;
width: 345rpx;
height: 250rpx;
background: #ffffff;
box-shadow: 0px 3rpx 3rpx 0px rgba(198, 199, 204, 0.3);
border-radius: 10rpx;
margin-right: 15rpx;
margin-bottom: 15rpx;
&.curr {
border: 1px solid #1969f9;
}
&:nth-of-type(2n) {
margin-right: 0;
}
.text-item {
margin-bottom: 8rpx;
}
.label {
width: 82rpx;
font-size: 16rpx;
color: #919399;
}
.t1 {
font-size: 16rpx;
color: #1969f9;
}
.tt {
width: calc(100% - 93rpx);
font-size: 16rpx;
color: #484b59;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.mb20 {
margin-bottom: 20rpx;
}
.btn-box {
justify-content: flex-end;
.btn {
width: 68rpx;
height: 30rpx;
background: #1969f9;
border-radius: 8rpx;
font-size: 15rpx;
color: #ffffff;
}
}
}
}
.fix-btn {
position: fixed;
bottom: 0;
width: 100%;
left: 0;
.btn1 {
width: 248rpx;
height: 75rpx;
background: #ffffff;
font-size: 23rpx;
color: #ff3700;
}
.btn2 {
width: calc(100% - 248rpx);
height: 75rpx;
background: #1969f9;
font-size: 23rpx;
color: #ffffff;
}
}
}
::v-deep .uni-drawer__content {
width: 85% !important;
right: 0 !important;
}
.uni-drawer {
width: 100%;
background-color: #ffffff;
padding: 0 22rpx;
.title {
position: relative;
.iconfont {
position: absolute;
left: 0;
top: 0;
sfont-size: 30rpx;
color: #292b33;
}
.text {
font-size: 23rpx;
color: #292b33;
font-weight: bold;
}
}
.tit {
font-size: 20rpx;
color: #292b33;
font-weight: bold;
margin-bottom: 17rpx;
}
.drawer-list {
.box {
height: 94rpx;
background: #ffffff;
box-shadow: 0px 3rpx 3rpx 0px rgba(198, 199, 204, 0.3);
border-radius: 10rpx;
border: 1px solid #c6c7cc;
margin-bottom: 15rpx;
}
}
}
assets/css/font.css
...@@ -11,42 +11,22 @@ ...@@ -11,42 +11,22 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-a-juxing1:before { .icon-a-juxing11:before {
content: "\e78c";
}
.icon-a-juxing5:before {
content: "\e78d";
}
.icon-a-juxing2:before {
content: "\e78e"; content: "\e78e";
} }
.icon-a-juxing3:before { .icon-a-juxing2:before {
content: "\e78f"; content: "\e78f";
} }
.icon-a-juxing6:before { .icon-juxing1:before {
content: "\e790"; content: "\e790";
} }
.icon-a-juxing4:before { .icon-a-juxing1:before {
content: "\e791"; content: "\e78c";
} }
.icon-juxing:before { .icon-juxing:before {
content: "\e792"; content: "\e792";
}
.icon-a-juxing7:before {
content: "\e793";
}
.icon-a-juxing9:before {
content: "\e794";
}
.icon-a-juxing8:before {
content: "\e795";
} }
\ No newline at end of file
assets/css/index/index.scss
.index { .index {
.head { .head {
padding: 0 22rpx 20rpx 22rpx; padding: 20rpx 22rpx 20rpx 22rpx;
background-color: #ffffff; background-color: #ffffff;
.t1 { .t1 {
font-size: 22rpx; font-size: 22rpx;
......
assets/css/mine/login.scss 0 → 100644
.page-login {
height: 100%;
.logo {
width: 246rpx;
height: 75rpx;
margin-bottom: 27rpx;
image {
width: 246rpx;
height: 75rpx;
}
}
.company {
margin-bottom: 86rpx;
.uni-input {
font-size: 20rpx;
color: #292b33;
font-weight: bold;
}
.uni-arrow {
width: 14rpx;
height: 9rpx;
background: url('https://img.ichunt.com/images/ichunt/202304/10/e4c72319ad41ce1425f71cc6ec35f111.png') no-repeat center;
background-size: contain;
margin-left: 12rpx;
}
}
.form-input {
width: 495rpx;
height: 60rpx;
background: #ffffff;
border-radius: 10rpx;
&.mb25 {
margin-bottom: 25rpx;
}
.label {
width: 74rpx;
height: 35rpx;
font-size: 20rpx;
color: #484b59;
border-right: 1px solid #f0f0f2;
}
.uni-input {
margin-left: 17rpx;
font-size: 20rpx;
}
}
.btn {
width: 495rpx;
height: 60rpx;
background: #1969f9;
border-radius: 10rpx;
font-size: 20rpx;
color: #ffffff;
margin-top: 33rpx;
}
.copyright {
margin-top: 34rpx;
font-size: 15rpx;
color: #919399;
}
}
pages.json
...@@ -4,6 +4,46 @@ ...@@ -4,6 +4,46 @@
"style": { "style": {
"navigationBarTitleText": "wms" "navigationBarTitleText": "wms"
} }
}, {
"path": "pages/arrivalRegister/index",
"style": {
"navigationBarTitleText": "到货登记"
}
}, {
"path": "pages/tallyReceive/index",
"style": {
"navigationBarTitleText": "理货"
}
}, {
"path": "pages/putaway/index",
"style": {
"navigationBarTitleText": "上架"
}
}, {
"path": "pages/picking/index",
"style": {
"navigationBarTitleText": "拣货"
}
}, {
"path": "pages/stockRecheck/index",
"style": {
"navigationBarTitleText": "复核"
}
}, {
"path": "pages/transfer/index",
"style": {
"navigationBarTitleText": "移位"
}
}, {
"path": "pages/immediatelyStockIn/index",
"style": {
"navigationBarTitleText": "库存查询"
}
}, {
"path": "pages/mine/login",
"style": {
"navigationBarTitleText": "登录"
}
}], }],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
...@@ -11,5 +51,13 @@ ...@@ -11,5 +51,13 @@
"navigationBarBackgroundColor": "#FFFFFF", "navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#FFFFFF" "backgroundColor": "#FFFFFF"
}, },
"uniIdRouter": {} "uniIdRouter": {},
"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "调试", //模式名称
"path": "pages/index/index", //启动页面，必选
"query": "" //启动参数，在页面的onLoad函数里面得到
}]
}
} }
\ No newline at end of file
pages/immediatelyStockIn/index.vue 0 → 100644
<template>
<view class="index">库存查询</view>
</template>
<script>
import { API } from '@/util/api.js';
export default {
data() {
return {};
},
onLoad() {},
methods: {}
};
</script>
<style scoped lang="scss">
@import '@/assets/css/index/index.scss';
</style>
pages/index/index.vue
...@@ -8,44 +8,44 @@ ...@@ -8,44 +8,44 @@
<text class="t2">拾贰</text> <text class="t2">拾贰</text>
</view> </view>
</view> </view>
<view class="row verCenter"> <navigator class="row verCenter" url="/pages/mine/login" hover-class="none">
<text class="iconfont icon-a-juxing1"></text> <text class="iconfont icon-a-juxing1"></text>
<text class="t2">设置</text> <text class="t2">设置</text>
</view> </navigator>
</view> </view>
<view class="list row"> <view class="list row">
<view class="box-li column rowCenter verCenter"> <navigator class="box-li column rowCenter verCenter" url="/pages/arrivalRegister/index" hover-class="none">
<view class="box row rowCenter verCenter"><image src="/static/home/矩形@2x(2).png"></image></view> <view class="box row rowCenter verCenter"><image src="/static/home/矩形@2x(2).png"></image></view>
<text class="text">到货登记</text> <text class="text">到货登记</text>
</view> </navigator>
<view class="box-li column rowCenter verCenter"> <navigator class="box-li column rowCenter verCenter" url="/pages/tallyReceive/index" hover-class="none">
<view class="box row rowCenter verCenter"><image src="/static/home/矩形@2x(5).png"></image></view> <view class="box row rowCenter verCenter"><image src="/static/home/矩形@2x(5).png"></image></view>
<text class="text">理货</text> <text class="text">理货</text>
</view> </navigator>
<view class="box-li column rowCenter verCenter"> <navigator class="box-li column rowCenter verCenter" url="/pages/putaway/index" hover-class="none">
<view class="box row rowCenter verCenter"><image src="/static/home/矩形@2x(8).png"></image></view> <view class="box row rowCenter verCenter"><image src="/static/home/矩形@2x(8).png"></image></view>
<text class="text">上架</text> <text class="text">上架</text>
</view> </navigator>
<view class="box-li column rowCenter verCenter"> <navigator class="box-li column rowCenter verCenter" url="/pages/picking/index" hover-class="none">
<view class="box row rowCenter verCenter"><image src="/static//home/矩形@2x(4).png"></image></view> <view class="box row rowCenter verCenter"><image src="/static//home/矩形@2x(4).png"></image></view>
<text class="text">拣货</text> <text class="text">拣货</text>
</view> </navigator>
<view class="box-li column rowCenter verCenter"> <navigator class="box-li column rowCenter verCenter" url="/pages/stockRecheck/index" hover-class="none">
<view class="box row rowCenter verCenter"><image src="/static//home/矩形@2x(7).png"></image></view> <view class="box row rowCenter verCenter"><image src="/static//home/矩形@2x(7).png"></image></view>
<text class="text">复核</text> <text class="text">复核</text>
</view> </navigator>
<view class="box-li column rowCenter verCenter"> <navigator class="box-li column rowCenter verCenter" url="/pages/transfer/index" hover-class="none">
<view class="box row rowCenter verCenter"><image src="/static/home/矩形@2x(3).png"></image></view> <view class="box row rowCenter verCenter"><image src="/static/home/矩形@2x(3).png"></image></view>
<text class="text">移位</text> <text class="text">移位</text>
</view> </navigator>
<view class="box-li column rowCenter verCenter"> <navigator class="box-li column rowCenter verCenter" url="/pages/immediatelyStockIn/index" hover-class="none">
<view class="box row rowCenter verCenter"><image src="/static/home/矩形@2x(6).png"></image></view> <view class="box row rowCenter verCenter"><image src="/static/home/矩形@2x(6).png"></image></view>
<text class="text">库存查询</text> <text class="text">库存查询</text>
</view> </navigator>
<view class="box-li column rowCenter verCenter"> <navigator class="box-li column rowCenter verCenter" url="/pages/immediatelyStockIn/index" hover-class="none">
<view class="box row rowCenter verCenter"><image src="/static/home/矩形@2x(9).png"></image></view> <view class="box row rowCenter verCenter"><image src="/static/home/矩形@2x(9).png"></image></view>
<text class="text">标签补打</text> <text class="text">标签补打</text>
</view> </navigator>
</view> </view>
</view> </view>
</template> </template>
......
pages/mine/login.vue 0 → 100644
<template>
<view class="page-login column rowCenter verCenter">
<view class="logo"><image src="/static/WMS@2x.png" mode=""></image></view>
<view class="company row rowCenter verCenter">
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="row verCenter">
<view class="uni-input">{{ array[index] }}</view>
<view class="uni-arrow"></view>
</view>
</picker>
</view>
<view class="form-input row verCenter mb25">
<text class="label row rowCenter verCenter">账号</text>
<input class="uni-input" placeholder="请输入用户账号" placeholder-style="color:#919399" />
</view>
<view class="form-input row verCenter">
<text class="label row rowCenter verCenter">密码</text>
<input class="uni-input" password placeholder="请输入账号密码" placeholder-style="color:#919399" />
</view>
<view class="btn row rowCenter verCenter">登录</view>
<text class="copyright">© 深圳市猎芯科技有限公司</text>
</view>
</template>
<script>
import { API } from '@/util/api.js';
export default {
data() {
return {
index: 0,
array: ['深圳市猎芯科技有限公司', '深贸电子有限公司'],
account: '',
passwd: ''
};
},
methods: {
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value);
this.index = e.detail.value;
},
submit() {
if (!this.account) {
uni.showToast({
title: '请输入登录账号',
icon: 'error'
});
return false;
}
if (!this.passwd) {
uni.showToast({
title: '请输入登录密码',
icon: 'error'
});
return false;
}
let unionid = uni.getStorageSync('unionid');
this.request(API.login, 'POST', { account: this.account, passwd: this.passwd, unionid: unionid }, true).then(res => {
if (res.err_code === 0) {
uni.setStorageSync('token', res.data.token);
uni.navigateBack({
delta: 3
});
} else {
uni.showToast({
title: res.err_msg,
icon: 'error'
});
}
});
}
}
};
</script>
<style lang="scss">
@import '@/assets/css/mine/login.scss';
</style>
pages/picking/index.vue 0 → 100644
<template>
<view class="index">拣货</view>
</template>
<script>
import { API } from '@/util/api.js';
export default {
data() {
return {};
},
onLoad() {},
methods: {}
};
</script>
<style scoped lang="scss">
@import '@/assets/css/index/index.scss';
</style>
pages/putaway/index.vue 0 → 100644
<template>
<view class="index">上架</view>
</template>
<script>
import { API } from '@/util/api.js';
export default {
data() {
return {};
},
onLoad() {},
methods: {}
};
</script>
<style scoped lang="scss">
@import '@/assets/css/index/index.scss';
</style>
pages/stockRecheck/index.vue 0 → 100644
<template>
<view class="index">复核</view>
</template>
<script>
import { API } from '@/util/api.js';
export default {
data() {
return {};
},
onLoad() {},
methods: {}
};
</script>
<style scoped lang="scss">
@import '@/assets/css/index/index.scss';
</style>
pages/tallyReceive/index.vue 0 → 100644
<template>
<view class="index">理货</view>
</template>
<script>
import { API } from '@/util/api.js';
export default {
data() {
return {};
},
onLoad() {},
methods: {}
};
</script>
<style scoped lang="scss">
@import '@/assets/css/index/index.scss';
</style>
pages/transfer/index.vue 0 → 100644
<template>
<view class="index">移位</view>
</template>
<script>
import { API } from '@/util/api.js';
export default {
data() {
return {};
},
onLoad() {},
methods: {}
};
</script>
<style scoped lang="scss">
@import '@/assets/css/index/index.scss';
</style>
static/iconfont.ttf
No preview for this file type
uni_modules/uni-drawer/changelog.md 0 → 100644
## 1.2.1（2021-11-22）
- 修复 vue3中个别scss变量无法找到的问题
## 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-drawer](https://uniapp.dcloud.io/component/uniui/uni-drawer)
## 1.1.1（2021-07-30）
- 优化 vue3下事件警告的问题
## 1.1.0（2021-07-13）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.7（2021-05-12）
- 新增 组件示例地址
## 1.0.6（2021-02-04）
- 调整为uni_modules目录规范
uni_modules/uni-drawer/components/uni-drawer/keypress.js 0 → 100644
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {})
}, 0)
}
}
document.addEventListener('keyup', listener)
// this.$once('hook:beforeDestroy', () => {
// document.removeEventListener('keyup', listener)
// })
},
render: () => {}
}
// #endif
uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue 0 → 100644
<template>
<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
<slot />
</view>
<!-- #ifdef H5 -->
<keypress @esc="close('mask')" />
<!-- #endif -->
</view>
</template>
<script>
// #ifdef H5
import keypress from './keypress.js'
// #endif
/**
* Drawer 抽屉
* @description 抽屉侧滑菜单
* @tutorial https://ext.dcloud.net.cn/plugin?id=26
* @property {Boolean} mask = [true | false] 是否显示遮罩
* @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
* @property {Boolean} mode = [left | right] Drawer 滑出位置
* @value left 从左侧滑出
* @value right 从右侧侧滑出
* @property {Number} width 抽屉的宽度 ，仅 vue 页面生效
* @event {Function} close 组件关闭时触发事件
*/
export default {
name: 'UniDrawer',
components: {
// #ifdef H5
keypress
// #endif
},
emits:['change'],
props: {
/**
* 显示模式（左、右），只在初始化生效
*/
mode: {
type: String,
default: ''
},
/**
* 蒙层显示状态
*/
mask: {
type: Boolean,
default: true
},
/**
* 遮罩是否可点击关闭
*/
maskClick:{
type: Boolean,
default: true
},
/**
* 抽屉宽度
*/
width: {
type: Number,
default: 220
}
},
data() {
return {
visibleSync: false,
showDrawer: false,
rightMode: false,
watchTimer: null,
drawerWidth: 220
}
},
created() {
// #ifndef APP-NVUE
this.drawerWidth = this.width
// #endif
this.rightMode = this.mode === 'right'
},
methods: {
clear(){},
close(type) {
// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
this._change('showDrawer', 'visibleSync', false)
},
open() {
// fixed by mehaotian 处理重复点击打开的事件
if(this.visibleSync) return
this._change('visibleSync', 'showDrawer', true)
},
_change(param1, param2, status) {
this[param1] = status
if (this.watchTimer) {
clearTimeout(this.watchTimer)
}
this.watchTimer = setTimeout(() => {
this[param2] = status
this.$emit('change',status)
}, status ? 50 : 300)
}
}
}
</script>
<style lang="scss" scoped>
$uni-mask: rgba($color: #000000, $alpha: 0.4) ;
// 抽屉宽度
$drawer-width: 220px;
.uni-drawer {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 999;
}
.uni-drawer__content {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: absolute;
top: 0;
width: $drawer-width;
bottom: 0;
background-color: $uni-bg-color;
transition: transform 0.3s ease;
}
.uni-drawer--left {
left: 0;
/* #ifdef APP-NVUE */
transform: translateX(-$drawer-width);
/* #endif */
/* #ifndef APP-NVUE */
transform: translateX(-100%);
/* #endif */
}
.uni-drawer--right {
right: 0;
/* #ifdef APP-NVUE */
transform: translateX($drawer-width);
/* #endif */
/* #ifndef APP-NVUE */
transform: translateX(100%);
/* #endif */
}
.uni-drawer__content--visible {
transform: translateX(0px);
}
.uni-drawer__mask {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
opacity: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: $uni-mask;
transition: opacity 0.3s;
}
.uni-drawer__mask--visible {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
opacity: 1;
}
</style>
uni_modules/uni-drawer/package.json 0 → 100644
{
"id": "uni-drawer",
"displayName": "uni-drawer 抽屉",
"version": "1.2.1",
"description": "抽屉式导航，用于展示侧滑菜单，侧滑导航。",
"keywords": [
"uni-ui",
"uniui",
"drawer",
"抽屉",
"侧滑导航"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"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
uni_modules/uni-drawer/readme.md 0 → 100644
## Drawer 抽屉
> **组件名：uni-drawer**
> 代码块： `uDrawer`
抽屉侧滑菜单。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-drawer)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
\ No newline at end of file
uni_modules/uni-scss/changelog.md 0 → 100644
## 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
uni_modules/uni-scss/index.scss 0 → 100644
@import './styles/index.scss';
uni_modules/uni-scss/package.json 0 → 100644
{
"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_modules/uni-scss/readme.md 0 → 100644
`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
\ No newline at end of file
uni_modules/uni-scss/styles/index.scss 0 → 100644
@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_modules/uni-scss/styles/setting/_border.scss 0 → 100644
.uni-border {
border: 1px $uni-border-1 solid;
}
\ No newline at end of file
uni_modules/uni-scss/styles/setting/_color.scss 0 → 100644
// 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;
}
uni_modules/uni-scss/styles/setting/_radius.scss 0 → 100644
@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)
}
}
}
}
uni_modules/uni-scss/styles/setting/_space.scss 0 → 100644
@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
uni_modules/uni-scss/styles/setting/_styles.scss 0 → 100644
/* #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 */
uni_modules/uni-scss/styles/setting/_text.scss 0 → 100644
@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 */
}
uni_modules/uni-scss/styles/setting/_variables.scss 0 → 100644
// @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;
uni_modules/uni-scss/styles/tools/functions.scss 0 → 100644
// 合并 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_modules/uni-scss/theme.scss 0 → 100644
// 间距基础倍数
$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);
uni_modules/uni-scss/variables.scss 0 → 100644
@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);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment