Commit 764e316f by pangchong

style: 加入颜色变量

parent eda35dd4
...@@ -21,6 +21,8 @@ export default { ...@@ -21,6 +21,8 @@ export default {
<style lang="scss"> <style lang="scss">
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */ /* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
@import 'uview-plus/index.scss'; @import 'uview-plus/index.scss';
// 加入主题相关样式
@import '@/static/css/theme.scss';
// 修改uview-plus样式 // 修改uview-plus样式
@import '@/static/css/uview-plus.scss'; @import '@/static/css/uview-plus.scss';
// 修改uni样式 // 修改uni样式
......
@mixin global-button-primary { @mixin global-button-primary {
color: #fff; color: #fff;
background-color: $uni-color-primary; background-color: $uni-primary-6;
} }
@mixin global-button-primary-active { @mixin global-button-primary-active {
color: darken(#fff, 10%); color: darken(#fff, 10%);
background-color: darken($uni-color-primary, 5%); background-color: darken($uni-primary-7, 5%);
border-color: darken($uni-color-primary, 5%); border-color: darken($uni-primary-7, 5%);
} }
@mixin global-button-success { @mixin global-button-success {
color: #fff; color: #fff;
background-color: $uni-color-success; background-color: $uni-success-6;
} }
@mixin global-button-success-active { @mixin global-button-success-active {
color: darken(#fff, 10%); color: darken(#fff, 10%);
background-color: darken($uni-color-success, 5%); background-color: darken($uni-success-7, 5%);
border-color: darken($uni-color-success, 5%); border-color: darken($uni-success-7, 5%);
} }
@mixin global-button-warning { @mixin global-button-warning {
color: #fff; color: #fff;
background-color: $uni-color-warning; background-color: $uni-warning-6;
} }
@mixin global-button-warning-active { @mixin global-button-warning-active {
color: darken(#fff, 10%); color: darken(#fff, 10%);
background-color: darken($uni-color-warning, 5%); background-color: darken($uni-warning-7, 5%);
border-color: darken($uni-color-warning, 5%); border-color: darken($uni-warning-7, 5%);
} }
@mixin global-button-danger { @mixin global-button-danger {
color: #fff; color: #fff;
background-color: $uni-color-error; background-color: $uni-danger-6;
} }
@mixin global-button-danger-active { @mixin global-button-danger-active {
color: darken(#fff, 10%); color: darken(#fff, 10%);
background-color: darken($uni-color-error, 5%); background-color: darken($uni-danger-7, 5%);
border-color: darken($uni-color-error, 5%); border-color: darken($uni-danger-7, 5%);
} }
.global-button { .global-button {
padding: 0 20rpx; padding: 0 20rpx;
...@@ -64,7 +64,8 @@ ...@@ -64,7 +64,8 @@
} }
} }
&.text { &.text {
color: $uni-color-primary; padding: 0;
color: $uni-primary-6;
background-color: transparent; background-color: transparent;
&::after { &::after {
border: none; border: none;
......
...@@ -18,7 +18,9 @@ ...@@ -18,7 +18,9 @@
<template #empty v-if="!dataList.length && refresherEnabled"> <template #empty v-if="!dataList.length && refresherEnabled">
<global-empty></global-empty> <global-empty></global-empty>
</template> </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> </z-paging>
</view> </view>
</template> </template>
...@@ -103,6 +105,8 @@ watch( ...@@ -103,6 +105,8 @@ watch(
} }
) )
//是否显示骨架屏
const showSkeleton = ref(true)
const queryList = (pageIndex, pageSize) => { const queryList = (pageIndex, pageSize) => {
if (!dataList.value.length) { if (!dataList.value.length) {
paging.value?.complete(dataList.value) paging.value?.complete(dataList.value)
...@@ -123,9 +127,11 @@ const queryList = (pageIndex, pageSize) => { ...@@ -123,9 +127,11 @@ const queryList = (pageIndex, pageSize) => {
} }
}) })
.catch(() => { .catch(() => {
showSkeleton.value = false
paging.value?.complete(false) paging.value?.complete(false)
}) })
} else { } else {
showSkeleton.value = false
paging.value?.complete(false) paging.value?.complete(false)
} }
} }
......
...@@ -26,8 +26,12 @@ ...@@ -26,8 +26,12 @@
<view v-if="getEditMode == 1" class="cancel" @tap="handleCancel">取消</view> <view v-if="getEditMode == 1" class="cancel" @tap="handleCancel">取消</view>
</template> </template>
<template #right> <template #right>
<global-button type="primary" size="small" v-if="getEditMode == 1" style="padding: 0 32rpx" @tap="handleEdit">保存</global-button> <global-button type="primary" size="small" v-if="getEditMode == 1" style="padding: 0 32rpx" @tap="handleEdit">
<global-button type="text" size="small" v-if="getEditMode == 2" style="padding: 0" @tap="handleEdit">编辑</global-button> {{ editButtonText }}
</global-button>
<global-button type="text" size="small" v-if="getEditMode == 2" @tap="handleEdit">
{{ editText }}
</global-button>
</template> </template>
</global-navbar> </global-navbar>
<slot name="top"></slot> <slot name="top"></slot>
...@@ -73,6 +77,16 @@ const ps = defineProps({ ...@@ -73,6 +77,16 @@ const ps = defineProps({
type: Boolean, type: Boolean,
default: false default: false
}, },
//编辑按钮文字内容
editButtonText: {
type: String,
default: '保存'
},
//编辑文字内容
editText: {
type: String,
default: '编辑'
},
//页面编辑模式0,1,2 //页面编辑模式0,1,2
editMode: { editMode: {
type: Number, type: Number,
......
...@@ -164,7 +164,7 @@ const clear = () => { ...@@ -164,7 +164,7 @@ const clear = () => {
display: flex; display: flex;
align-items: center; align-items: center;
&-value { &-value {
color: #1d2129; color: $uni-text-5;
} }
&.placeholder { &.placeholder {
color: #86909c; color: #86909c;
......
...@@ -49,19 +49,19 @@ const getTag = computed(() => { ...@@ -49,19 +49,19 @@ const getTag = computed(() => {
&.success { &.success {
background: #e8ffea; background: #e8ffea;
.tag { .tag {
background: #00b42a; background: $uni-success-6;
} }
.count { .count {
color: #00b42a; color: $uni-success-6;
} }
} }
&.warning { &.warning {
background: #ffece8; background: #ffece8;
.tag { .tag {
background: #f53f3f; background: $uni-danger-6;
} }
.count { .count {
color: #f53f3f; color: $uni-danger-6;
} }
} }
} }
......
...@@ -90,6 +90,13 @@ ...@@ -90,6 +90,13 @@
"navigationBarTitleText": "布置工作", "navigationBarTitleText": "布置工作",
"navigationStyle": "custom" "navigationStyle": "custom"
} }
},
{
"path": "pages/panel/assign-work/details",
"style": {
"navigationBarTitleText": "早会工作详情",
"navigationStyle": "custom"
}
} }
], ],
"globalStyle": { "globalStyle": {
......
.cancel { .cancel {
font-size: 32rpx; font-size: 32rpx;
color: #1d2129; color: $uni-text-5;
} }
.card { .card {
border-radius: 12rpx; border-radius: 12rpx;
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
margin-bottom: 14rpx; margin-bottom: 14rpx;
.card-title-txt { .card-title-txt {
font-size: 34rpx; font-size: 34rpx;
color: #1d2129; color: $uni-text-5;
} }
} }
.menu-list { .menu-list {
......
...@@ -75,7 +75,7 @@ const handleAdd = () => { ...@@ -75,7 +75,7 @@ const handleAdd = () => {
margin-top: 16rpx; margin-top: 16rpx;
padding: 16rpx 24rpx; padding: 16rpx 24rpx;
border-radius: 12rpx; border-radius: 12rpx;
color: #1d2129; color: $uni-text-5;
background: #ffffff; background: #ffffff;
&-title { &-title {
display: flex; display: flex;
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
padding: 16rpx 24rpx; padding: 16rpx 24rpx;
border-radius: 12rpx; border-radius: 12rpx;
background: #ffffff; background: #ffffff;
color: #4e5969; color: $uni-text-4;
&-header { &-header {
&-top { &-top {
display: flex; display: flex;
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
align-items: center; align-items: center;
margin-bottom: 16rpx; margin-bottom: 16rpx;
.txt { .txt {
color: #f53f3f; color: $uni-danger-6;
font-size: 32rpx; font-size: 32rpx;
} }
} }
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
&-footer { &-footer {
padding-top: 16rpx; padding-top: 16rpx;
&-top { &-top {
color: #1d2129; color: $uni-text-5;
display: flex; display: flex;
align-items: center; align-items: center;
.txt { .txt {
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
padding: 16rpx 0; padding: 16rpx 0;
} }
&-bottom { &-bottom {
color: #1d2129; color: $uni-text-5;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
.person-info { .person-info {
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
} }
} }
.appeal-status { .appeal-status {
color: #1d2129; color: $uni-text-5;
margin-bottom: 16rpx; margin-bottom: 16rpx;
} }
.appeal-image { .appeal-image {
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
align-items: center; align-items: center;
border-bottom: 2rpx solid #f4f4f4; border-bottom: 2rpx solid #f4f4f4;
text { text {
color: #1d2129; color: $uni-text-5;
} }
} }
&-content { &-content {
......
...@@ -13,11 +13,11 @@ ...@@ -13,11 +13,11 @@
display: flex; display: flex;
align-items: center; align-items: center;
.type { .type {
color: #f53f3f; color: $uni-danger-6;
font-size: 34rpx; font-size: 34rpx;
} }
.txt { .txt {
color: #1d2129; color: $uni-text-5;
font-size: 34rpx; font-size: 34rpx;
margin: 0 16rpx; margin: 0 16rpx;
} }
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
&-content { &-content {
padding-top: 16rpx; padding-top: 16rpx;
font-size: 30rpx; font-size: 30rpx;
color: #4e5969; color: $uni-text-4;
line-height: 40rpx; line-height: 40rpx;
} }
} }
...@@ -105,11 +105,6 @@ const handleEdit = () => { ...@@ -105,11 +105,6 @@ const handleEdit = () => {
url: 'edit' url: 'edit'
}) })
} }
//返回
const goBack = () => {
uni.navigateBack()
uni.$emit('appraisalRecordReload')
}
//图片预览 //图片预览
const previewImage = (index) => { const previewImage = (index) => {
uni.previewImage({ uni.previewImage({
......
.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;
}
}
}
...@@ -13,23 +13,23 @@ ...@@ -13,23 +13,23 @@
display: flex; display: flex;
align-items: center; align-items: center;
.type { .type {
color: #f53f3f; color: $uni-danger-6;
font-size: 34rpx; font-size: 34rpx;
} }
.txt { .txt {
color: #1d2129; color: $uni-text-5;
font-size: 34rpx; font-size: 34rpx;
margin: 0 16rpx; margin: 0 16rpx;
} }
} }
.right { .right {
color: $uni-color-primary; color: $uni-primary-6;
} }
} }
&-content { &-content {
padding-top: 16rpx; padding-top: 16rpx;
font-size: 30rpx; font-size: 30rpx;
color: #4e5969; color: $uni-text-4;
line-height: 40rpx; line-height: 40rpx;
} }
&-footer { &-footer {
......
<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>
<template> <template>
<view class="menu-item" v-if="type == 'minus'"> <view class="menu-item" v-if="type == 'minus'">
<image :src="getUrl" /> <image :src="getUrl" />
<text>{{ data.name }}</text> <text class="color-text-5">{{ data.name }}</text>
<view class="circle minus">-</view> <view class="circle minus">-</view>
</view> </view>
<view class="menu-item" v-else-if="type == 'plus'"> <view class="menu-item" v-else-if="type == 'plus'">
<image :src="getUrl" /> <image :src="getUrl" />
<text>{{ data.name }}</text> <text class="color-text-5">{{ data.name }}</text>
<view class="circle plus">+</view> <view class="circle plus">+</view>
</view> </view>
<view class="menu-item" v-else> <view class="menu-item" v-else>
<image :src="getUrl" /> <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 class="count" v-if="getCount > 0">{{ getCount }}</view>
</view> </view>
</template> </template>
...@@ -60,7 +60,6 @@ const getCount = computed(() => { ...@@ -60,7 +60,6 @@ const getCount = computed(() => {
} }
text { text {
margin-top: 16rpx; margin-top: 16rpx;
color: #1d2129;
font-size: 30rpx; font-size: 30rpx;
line-height: 40rpx; line-height: 40rpx;
} }
...@@ -78,7 +77,7 @@ const getCount = computed(() => { ...@@ -78,7 +77,7 @@ const getCount = computed(() => {
background: #c8c8c8; background: #c8c8c8;
} }
&.plus { &.plus {
background: #165dff; background: $uni-primary-6;
} }
} }
.count { .count {
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
margin-bottom: 32rpx !important; margin-bottom: 32rpx !important;
} }
.menu-title { .menu-title {
color: #1d2129; color: $uni-text-5;
margin-bottom: 32rpx; margin-bottom: 32rpx;
padding: 0 32rpx; padding: 0 32rpx;
font-size: 34rpx; font-size: 34rpx;
......
...@@ -14,20 +14,20 @@ ...@@ -14,20 +14,20 @@
height: 70rpx; height: 70rpx;
} }
} }
&-weather{ &-weather {
color: #1D2129; color: #1d2129;
text-align: right; text-align: right;
display: flex; display: flex;
align-items: center; align-items: center;
image{ image {
width: 80rpx; width: 80rpx;
height: 80rpx; height: 80rpx;
} }
.info{ .info {
.place{ .place {
font-size: 28rpx; font-size: 28rpx;
} }
.txt{ .txt {
margin-left: 8rpx; margin-left: 8rpx;
font-size: 24rpx; font-size: 24rpx;
} }
...@@ -51,12 +51,12 @@ ...@@ -51,12 +51,12 @@
} }
&-title { &-title {
font-size: 24rpx; font-size: 24rpx;
color: #4e5969; color: $uni-text-4;
} }
&-txt { &-txt {
font-weight: bold; font-weight: bold;
font-size: 40rpx; font-size: 40rpx;
color: #1d2129; color: $uni-text-5;
line-height: 56rpx; line-height: 56rpx;
} }
&-line { &-line {
......
/* 主色 */
.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;
}
.u-form-item__body { .u-form-item__body {
padding: 24rpx 0 !important; padding: 24rpx 0 !important;
.u-form-item__body__left__content__label { .u-form-item__body__left__content__label {
color: #1d2129; color: $uni-text-5;
font-size: 28rpx; font-size: 28rpx;
} }
.u-textarea { .u-textarea {
margin-top: 8rpx; margin-top: 8rpx;
} }
} }
...@@ -14,65 +14,40 @@ ...@@ -14,65 +14,40 @@
@import 'uview-plus/theme.scss'; @import 'uview-plus/theme.scss';
/* 颜色变量 */ /* 主色 */
$uni-primary-7: #0e42d2;
/* 行为相关颜色 */ $uni-primary-6: #165dff;
$uni-color-primary: #165dff; $uni-primary-3: #94bfff;
$uni-color-success: #00b42a; $uni-primary-2: #bedaff;
$uni-color-warning: #ff7d00; $uni-primary-1: #e8f3ff;
$uni-color-error: #f53f3f; /* 线条 Line */
$uni-line-1: #e5e6eb;
/* 文字基本颜色 */ /* 填充 Fill */
$uni-text-color: #333; // 基本色 $uni-fill-4: #c9cdd4;
$uni-text-color-inverse: #fff; // 反色 $uni-fill-3: #e5e6eb;
$uni-text-color-grey: #999; // 辅助灰色,如加载更多的提示信息 $uni-fill-2: #f2f3f5;
$uni-text-color-placeholder: #808080; $uni-fill-1: #f7f8fa;
$uni-text-color-disable: #c0c0c0; /* 文字 Text */
$uni-text-5: #1d2129;
/* 背景颜色 */ $uni-text-4: #4e5969;
$uni-bg-color: #fff; $uni-text-3: #86909c;
$uni-bg-color-grey: #f8f8f8; $uni-text-2: #c9cdd4;
$uni-bg-color-hover: #f1f1f1; // 点击状态颜色 $uni-text-1: #ffffff;
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); // 遮罩颜色 /* 成功 Success */
$uni-success-7: #009a29;
/* 边框颜色 */ $uni-success-6: #00b42a;
$uni-border-color: #c8c7cc; $uni-success-3: #7be188;
$uni-success-2: #aff0b5;
/* 尺寸变量 */ $uni-success-1: #e8ffea;
/* 警告/提醒 Warning/Notice */
/* 文字尺寸 */ $uni-warning-7: #d25f00;
$uni-font-size-sm: 12px; $uni-warning-6: #ff7d00;
$uni-font-size-base: 14px; $uni-warning-3: #ffcf8b;
$uni-font-size-lg: 16; $uni-warning-2: #ffe4ba;
$uni-warning-1: #fff7e8;
/* 图片尺寸 */ /* 错误 Danger */
$uni-img-size-sm: 20px; $uni-danger-7: #cb2634;
$uni-img-size-base: 26px; $uni-danger-6: #f53f3f;
$uni-img-size-lg: 40px; $uni-danger-3: #fbaca3;
$uni-danger-2: #fdcdc5;
/* Border Radius */ $uni-danger-1: #ffece8;
$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;
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