Skip to content

M
mocp-uniapp
Commit 764e316f by pangchong
Options

style: 加入颜色变量

parent eda35dd4
Showing with 340 additions and 121 deletions
src/App.vue
......@@ -21,6 +21,8 @@ export default {
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import 'uview-plus/index.scss';
// 加入主题相关样式
@import '@/static/css/theme.scss';
// 修改uview-plus样式
@import '@/static/css/uview-plus.scss';
// 修改uni样式
......
src/components/global-button/global-button.scss
@mixin global-button-primary {
color: #fff;
background-color: $uni-color-primary;
background-color: $uni-primary-6;
}
@mixin global-button-primary-active {
color: darken(#fff, 10%);
background-color: darken($uni-color-primary, 5%);
border-color: darken($uni-color-primary, 5%);
background-color: darken($uni-primary-7, 5%);
border-color: darken($uni-primary-7, 5%);
}
@mixin global-button-success {
color: #fff;
background-color: $uni-color-success;
background-color: $uni-success-6;
}
@mixin global-button-success-active {
color: darken(#fff, 10%);
background-color: darken($uni-color-success, 5%);
border-color: darken($uni-color-success, 5%);
background-color: darken($uni-success-7, 5%);
border-color: darken($uni-success-7, 5%);
}
@mixin global-button-warning {
color: #fff;
background-color: $uni-color-warning;
background-color: $uni-warning-6;
}
@mixin global-button-warning-active {
color: darken(#fff, 10%);
background-color: darken($uni-color-warning, 5%);
border-color: darken($uni-color-warning, 5%);
background-color: darken($uni-warning-7, 5%);
border-color: darken($uni-warning-7, 5%);
}
@mixin global-button-danger {
color: #fff;
background-color: $uni-color-error;
background-color: $uni-danger-6;
}
@mixin global-button-danger-active {
color: darken(#fff, 10%);
background-color: darken($uni-color-error, 5%);
border-color: darken($uni-color-error, 5%);
background-color: darken($uni-danger-7, 5%);
border-color: darken($uni-danger-7, 5%);
}
.global-button {
padding: 0 20rpx;
......@@ -64,7 +64,8 @@
}
}
&.text {
color: $uni-color-primary;
padding: 0;
color: $uni-primary-6;
background-color: transparent;
&::after {
border: none;
......
src/components/global-page-swiper-item/global-page-swiper-item.vue
......@@ -18,7 +18,9 @@
<template #empty v-if="!dataList.length && refresherEnabled">
<global-empty></global-empty>
</template>
<slot :dataList="dataList"></slot>
<slot :dataList="dataList">
<up-skeleton v-if="showSkeleton" rows="100" :loading="true" :animate="true" :title="false"></up-skeleton>
</slot>
</z-paging>
</view>
</template>
......@@ -103,6 +105,8 @@ watch(
}
)
//是否显示骨架屏
const showSkeleton = ref(true)
const queryList = (pageIndex, pageSize) => {
if (!dataList.value.length) {
paging.value?.complete(dataList.value)
......@@ -123,9 +127,11 @@ const queryList = (pageIndex, pageSize) => {
}
})
.catch(() => {
showSkeleton.value = false
paging.value?.complete(false)
})
} else {
showSkeleton.value = false
paging.value?.complete(false)
}
}
......
src/components/global-page/global-page.vue
......@@ -26,8 +26,12 @@
<view v-if="getEditMode == 1" class="cancel" @tap="handleCancel">取消</view>
</template>
<template #right>
<global-button type="primary" size="small" v-if="getEditMode == 1" style="padding: 0 32rpx" @tap="handleEdit">保存</global-button>
<global-button type="text" size="small" v-if="getEditMode == 2" style="padding: 0" @tap="handleEdit">编辑</global-button>
<global-button type="primary" size="small" v-if="getEditMode == 1" style="padding: 0 32rpx" @tap="handleEdit">
{{ editButtonText }}
</global-button>
<global-button type="text" size="small" v-if="getEditMode == 2" @tap="handleEdit">
{{ editText }}
</global-button>
</template>
</global-navbar>
<slot name="top"></slot>
......@@ -73,6 +77,16 @@ const ps = defineProps({
type: Boolean,
default: false
},
//编辑按钮文字内容
editButtonText: {
type: String,
default: '保存'
},
//编辑文字内容
editText: {
type: String,
default: '编辑'
},
//页面编辑模式0,1,2
editMode: {
type: Number,
......
src/components/global-picker/global-picker.vue
......@@ -164,7 +164,7 @@ const clear = () => {
display: flex;
align-items: center;
&-value {
color: #1d2129;
color: $uni-text-5;
}
&.placeholder {
color: #86909c;
......
src/components/widget/custom-score.vue
......@@ -49,19 +49,19 @@ const getTag = computed(() => {
&.success {
background: #e8ffea;
.tag {
background: #00b42a;
background: $uni-success-6;
}
.count {
color: #00b42a;
color: $uni-success-6;
}
}
&.warning {
background: #ffece8;
.tag {
background: #f53f3f;
background: $uni-danger-6;
}
.count {
color: #f53f3f;
color: $uni-danger-6;
}
}
}
......
src/pages.json
......@@ -90,6 +90,13 @@
"navigationBarTitleText": "布置工作",
"navigationStyle": "custom"
}
},
{
"path": "pages/panel/assign-work/details",
"style": {
"navigationBarTitleText": "早会工作详情",
"navigationStyle": "custom"
}
}
],
"globalStyle": {
......
src/pages/panel/app-center/constants/index.scss
.cancel {
font-size: 32rpx;
color: #1d2129;
color: $uni-text-5;
}
.card {
border-radius: 12rpx;
......@@ -14,7 +14,7 @@
margin-bottom: 14rpx;
.card-title-txt {
font-size: 34rpx;
color: #1d2129;
color: $uni-text-5;
}
}
.menu-list {
......
src/pages/panel/appraisal-record/components/card-details.vue
......@@ -75,7 +75,7 @@ const handleAdd = () => {
margin-top: 16rpx;
padding: 16rpx 24rpx;
border-radius: 12rpx;
color: #1d2129;
color: $uni-text-5;
background: #ffffff;
&-title {
display: flex;
......
src/pages/panel/appraisal-record/constants/details.scss
......@@ -2,7 +2,7 @@
padding: 16rpx 24rpx;
border-radius: 12rpx;
background: #ffffff;
color: #4e5969;
color: $uni-text-4;
&-header {
&-top {
display: flex;
......@@ -10,7 +10,7 @@
align-items: center;
margin-bottom: 16rpx;
.txt {
color: #f53f3f;
color: $uni-danger-6;
font-size: 32rpx;
}
}
......@@ -58,7 +58,7 @@
&-footer {
padding-top: 16rpx;
&-top {
color: #1d2129;
color: $uni-text-5;
display: flex;
align-items: center;
.txt {
......@@ -70,7 +70,7 @@
padding: 16rpx 0;
}
&-bottom {
color: #1d2129;
color: $uni-text-5;
display: flex;
justify-content: flex-end;
.person-info {
......@@ -87,7 +87,7 @@
}
}
.appeal-status {
color: #1d2129;
color: $uni-text-5;
margin-bottom: 16rpx;
}
.appeal-image {
......
src/pages/panel/appraisal-record/constants/edit.scss
......@@ -14,7 +14,7 @@
align-items: center;
border-bottom: 2rpx solid #f4f4f4;
text {
color: #1d2129;
color: $uni-text-5;
}
}
&-content {
......
src/pages/panel/appraisal-record/constants/list.scss
......@@ -13,11 +13,11 @@
display: flex;
align-items: center;
.type {
color: #f53f3f;
color: $uni-danger-6;
font-size: 34rpx;
}
.txt {
color: #1d2129;
color: $uni-text-5;
font-size: 34rpx;
margin: 0 16rpx;
}
......@@ -30,7 +30,7 @@
&-content {
padding-top: 16rpx;
font-size: 30rpx;
color: #4e5969;
color: $uni-text-4;
line-height: 40rpx;
}
}
src/pages/panel/appraisal-record/details.vue
......@@ -105,11 +105,6 @@ const handleEdit = () => {
url: 'edit'
})
}
//返回
const goBack = () => {
uni.navigateBack()
uni.$emit('appraisalRecordReload')
}
//图片预览
const previewImage = (index) => {
uni.previewImage({
......
src/pages/panel/assign-work/constants/details.scss 0 → 100644
.details {
padding: 24rpx;
&-header {
&-top {
display: flex;
align-items: center;
justify-content: space-between;
.left {
font-size: 48rpx;
color: $uni-danger-6;
}
.right {
color: $uni-text-5;
}
}
&-center {
display: flex;
align-items: center;
justify-content: space-between;
.left {
color: $uni-text-5;
}
}
&-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
}
}
src/pages/panel/assign-work/constants/list.scss
......@@ -13,23 +13,23 @@
display: flex;
align-items: center;
.type {
color: #f53f3f;
color: $uni-danger-6;
font-size: 34rpx;
}
.txt {
color: #1d2129;
color: $uni-text-5;
font-size: 34rpx;
margin: 0 16rpx;
}
}
.right {
color: $uni-color-primary;
color: $uni-primary-6;
}
}
&-content {
padding-top: 16rpx;
font-size: 30rpx;
color: #4e5969;
color: $uni-text-4;
line-height: 40rpx;
}
&-footer {
......
src/pages/panel/assign-work/details.vue 0 → 100644
<template>
<global-page :padding="24" title="早会工作详情" showEdit :editMode="2" @handleEdit="handleEdit" editText="反馈">
<view class="details">
<view class="details-header">
<view class="details-header-top">
<view class="left">CLOSE</view>
<view class="right">提出人:唐恒山</view>
</view>
<view class="details-header-center">
<view class="left">
<global-icon icon="mind-mapping"></global-icon>
<text class="txt">工作台编号:24242424</text>
</view>
<view class="right">
<text>陈朝丽测试</text>
<text>早会工作</text>
</view>
</view>
<view class="details-header-footer">
<view class="left">
<global-icon icon="mind-mapping"></global-icon>
<text class="txt">反馈情况</text>
</view>
<view class="right">是</view>
</view>
</view>
</view>
</global-page>
</template>
<script setup>
const handleEdit = () => {
console.log('点击反馈')
}
</script>
<style lang="scss" scoped>
@import './constants/details.scss';
</style>
src/pages/panel/components/menu-item.vue
<template>
<view class="menu-item" v-if="type == 'minus'">
<image :src="getUrl" />
<text>{{ data.name }}</text>
<text class="color-text-5">{{ data.name }}</text>
<view class="circle minus">-</view>
</view>
<view class="menu-item" v-else-if="type == 'plus'">
<image :src="getUrl" />
<text>{{ data.name }}</text>
<text class="color-text-5">{{ data.name }}</text>
<view class="circle plus">+</view>
</view>
<view class="menu-item" v-else>
<image :src="getUrl" />
<text>{{ data.name }}</text>
<text class="color-text-5">{{ data.name }}</text>
<view class="count" v-if="getCount > 0">{{ getCount }}</view>
</view>
</template>
......@@ -60,7 +60,6 @@ const getCount = computed(() => {
}
text {
margin-top: 16rpx;
color: #1d2129;
font-size: 30rpx;
line-height: 40rpx;
}
......@@ -78,7 +77,7 @@ const getCount = computed(() => {
background: #c8c8c8;
}
&.plus {
background: #165dff;
background: $uni-primary-6;
}
}
.count {
......
src/pages/panel/constants/panel-menu.scss
......@@ -21,7 +21,7 @@
margin-bottom: 32rpx !important;
}
.menu-title {
color: #1d2129;
color: $uni-text-5;
margin-bottom: 32rpx;
padding: 0 32rpx;
font-size: 34rpx;
......
src/pages/panel/constants/panel-navbar.scss
......@@ -14,27 +14,27 @@
height: 70rpx;
}
}
&-weather{
color: #1D2129;
&-weather {
color: #1d2129;
text-align: right;
display: flex;
align-items: center;
image{
image {
width: 80rpx;
height: 80rpx;
}
.info{
.place{
.info {
.place {
font-size: 28rpx;
}
.txt{
.txt {
margin-left: 8rpx;
font-size: 24rpx;
}
}
}
}
&-bottom-list {
background: #fff;
display: flex;
......@@ -51,12 +51,12 @@
}
&-title {
font-size: 24rpx;
color: #4e5969;
color: $uni-text-4;
}
&-txt {
font-weight: bold;
font-size: 40rpx;
color: #1d2129;
color: $uni-text-5;
line-height: 56rpx;
}
&-line {
......
src/static/css/theme.scss 0 → 100644
/* 主色 */
.bg-primary-7 {
background: $uni-primary-7;
}
.bg-primary-6 {
background: $uni-primary-6;
}
.bg-primary-3 {
background: $uni-primary-3;
}
.bg-primary-2 {
background: $uni-primary-2;
}
.bg-primary-1 {
background: $uni-primary-1;
}
.color-primary-7 {
color: $uni-primary-7;
}
.color-primary-6 {
color: $uni-primary-6;
}
.color-primary-3 {
color: $uni-primary-3;
}
.color-primary-2 {
color: $uni-primary-2;
}
.color-primary-1 {
color: $uni-primary-1;
}
/* 填充 Fill */
.bg-fill-4 {
background: $uni-fill-4;
}
.bg-fill-3 {
background: $uni-fill-3;
}
.bg-fill-2 {
background: $uni-fill-2;
}
.bg-fill-1 {
background: $uni-fill-1;
}
/* 文字 Text */
.color-text-5 {
color: $uni-text-5;
}
.color-text-4 {
color: $uni-text-4;
}
.color-text-3 {
color: $uni-text-3;
}
.color-text-2 {
color: $uni-text-2;
}
.color-text-1 {
color: $uni-text-1;
}
/* 成功 Success */
.bg-success-7 {
background: $uni-success-7;
}
.bg-success-6 {
background: $uni-success-6;
}
.bg-success-3 {
background: $uni-success-3;
}
.bg-success-2 {
background: $uni-success-2;
}
.bg-success-1 {
background: $uni-success-1;
}
.color-success-7 {
color: $uni-success-7;
}
.color-success-6 {
color: $uni-success-6;
}
.color-success-3 {
color: $uni-success-3;
}
.color-success-2 {
color: $uni-success-2;
}
.color-success-1 {
color: $uni-success-1;
}
/* 警告/提醒 Warning/Notice */
.bg-warning-7 {
background: $uni-warning-7;
}
.bg-warning-6 {
background: $uni-warning-6;
}
.bg-warning-3 {
background: $uni-warning-3;
}
.bg-warning-2 {
background: $uni-warning-2;
}
.bg-warning-1 {
background: $uni-warning-1;
}
.color-warning-7 {
color: $uni-warning-7;
}
.color-warning-6 {
color: $uni-warning-6;
}
.color-warning-3 {
color: $uni-warning-3;
}
.color-warning-2 {
color: $uni-warning-2;
}
.color-warning-1 {
color: $uni-warning-1;
}
/* 错误 Danger */
.bg-danger-7 {
background: $uni-danger-7;
}
.bg-danger-6 {
background: $uni-danger-6;
}
.bg-danger-3 {
background: $uni-danger-3;
}
.bg-danger-2 {
background: $uni-danger-2;
}
.bg-danger-1 {
background: $uni-danger-1;
}
.color-danger-7 {
color: $uni-danger-7;
}
.color-danger-6 {
color: $uni-danger-6;
}
.color-danger-3 {
color: $uni-danger-3;
}
.color-danger-2 {
color: $uni-danger-2;
}
.color-danger-1 {
color: $uni-danger-1;
}
src/static/css/uview-plus.scss
.u-form-item__body {
padding: 24rpx 0 !important;
.u-form-item__body__left__content__label {
color: #1d2129;
color: $uni-text-5;
font-size: 28rpx;
}
.u-textarea {
margin-top: 8rpx;
}
}
src/uni.scss
......@@ -14,65 +14,40 @@
@import 'uview-plus/theme.scss';
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #165dff;
$uni-color-success: #00b42a;
$uni-color-warning: #ff7d00;
$uni-color-error: #f53f3f;
/* 文字基本颜色 */
$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: #fff;
$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: 12px;
$uni-font-size-base: 14px;
$uni-font-size-lg: 16;
/* 图片尺寸 */
$uni-img-size-sm: 20px;
$uni-img-size-base: 26px;
$uni-img-size-lg: 40px;
/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2c405a; // 文章标题颜色
$uni-font-size-title: 20px;
$uni-color-subtitle: #555; // 二级标题颜色
$uni-font-size-subtitle: 18px;
$uni-color-paragraph: #3f536e; // 文章段落颜色
$uni-font-size-paragraph: 15px;
/* 主色 */
$uni-primary-7: #0e42d2;
$uni-primary-6: #165dff;
$uni-primary-3: #94bfff;
$uni-primary-2: #bedaff;
$uni-primary-1: #e8f3ff;
/* 线条 Line */
$uni-line-1: #e5e6eb;
/* 填充 Fill */
$uni-fill-4: #c9cdd4;
$uni-fill-3: #e5e6eb;
$uni-fill-2: #f2f3f5;
$uni-fill-1: #f7f8fa;
/* 文字 Text */
$uni-text-5: #1d2129;
$uni-text-4: #4e5969;
$uni-text-3: #86909c;
$uni-text-2: #c9cdd4;
$uni-text-1: #ffffff;
/* 成功 Success */
$uni-success-7: #009a29;
$uni-success-6: #00b42a;
$uni-success-3: #7be188;
$uni-success-2: #aff0b5;
$uni-success-1: #e8ffea;
/* 警告/提醒 Warning/Notice */
$uni-warning-7: #d25f00;
$uni-warning-6: #ff7d00;
$uni-warning-3: #ffcf8b;
$uni-warning-2: #ffe4ba;
$uni-warning-1: #fff7e8;
/* 错误 Danger */
$uni-danger-7: #cb2634;
$uni-danger-6: #f53f3f;
$uni-danger-3: #fbaca3;
$uni-danger-2: #fdcdc5;
$uni-danger-1: #ffece8;
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 to comment