添加colorui-ga css样式
parent
7df093928c
commit
04081fbc87
|
|
@ -1,184 +1,181 @@
|
||||||
/*
|
/*
|
||||||
Animation 微动画
|
Animation 微动画
|
||||||
基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
|
基于ColorUI-GA组建库的动画模块
|
||||||
*/
|
*/
|
||||||
|
.gif-black {
|
||||||
/* css 滤镜 控制黑白底色gif的 */
|
mix-blend-mode: screen;
|
||||||
.gif-black{
|
|
||||||
mix-blend-mode: screen;
|
|
||||||
}
|
|
||||||
.gif-white{
|
|
||||||
mix-blend-mode: multiply;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gif-white {
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
}
|
||||||
|
|
||||||
/* Animation css */
|
/* Animation css */
|
||||||
[class*=animation-] {
|
[class*='animation-'] {
|
||||||
animation-duration: .5s;
|
animation-duration: 0.5s;
|
||||||
animation-timing-function: ease-out;
|
animation-timing-function: ease-out;
|
||||||
animation-fill-mode: both
|
animation-fill-mode: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.animation-fade {
|
.animation-fade {
|
||||||
animation-name: fade;
|
animation-name: fade;
|
||||||
animation-duration: .8s;
|
animation-duration: 0.8s;
|
||||||
animation-timing-function: linear
|
animation-timing-function: linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
.animation-scale-up {
|
.animation-scale-up {
|
||||||
animation-name: scale-up
|
animation-name: scale-up;
|
||||||
}
|
}
|
||||||
|
|
||||||
.animation-scale-down {
|
.animation-scale-down {
|
||||||
animation-name: scale-down
|
animation-name: scale-down;
|
||||||
}
|
}
|
||||||
|
|
||||||
.animation-slide-top {
|
.animation-slide-top {
|
||||||
animation-name: slide-top
|
animation-name: slide-top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.animation-slide-bottom {
|
.animation-slide-bottom {
|
||||||
animation-name: slide-bottom
|
animation-name: slide-bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
.animation-slide-left {
|
.animation-slide-left {
|
||||||
animation-name: slide-left
|
animation-name: slide-left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.animation-slide-right {
|
.animation-slide-right {
|
||||||
animation-name: slide-right
|
animation-name: slide-right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.animation-shake {
|
.animation-shake {
|
||||||
animation-name: shake
|
animation-name: shake;
|
||||||
}
|
}
|
||||||
|
|
||||||
.animation-reverse {
|
.animation-reverse {
|
||||||
animation-direction: reverse
|
animation-direction: reverse;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fade {
|
@keyframes fade {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes scale-up {
|
@keyframes scale-up {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scale(.2)
|
transform: scale(0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: scale(1)
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes scale-down {
|
@keyframes scale-down {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scale(1.8)
|
transform: scale(1.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: scale(1)
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slide-top {
|
@keyframes slide-top {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(-100%)
|
transform: translateY(-100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0)
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slide-bottom {
|
@keyframes slide-bottom {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(100%)
|
transform: translateY(100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0)
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes shake {
|
@keyframes shake {
|
||||||
|
|
||||||
0%,
|
0%,
|
||||||
100% {
|
100% {
|
||||||
transform: translateX(0)
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
10% {
|
10% {
|
||||||
transform: translateX(-9px)
|
transform: translateX(-9px);
|
||||||
}
|
}
|
||||||
|
|
||||||
20% {
|
20% {
|
||||||
transform: translateX(8px)
|
transform: translateX(8px);
|
||||||
}
|
}
|
||||||
|
|
||||||
30% {
|
30% {
|
||||||
transform: translateX(-7px)
|
transform: translateX(-7px);
|
||||||
}
|
}
|
||||||
|
|
||||||
40% {
|
40% {
|
||||||
transform: translateX(6px)
|
transform: translateX(6px);
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
transform: translateX(-5px)
|
transform: translateX(-5px);
|
||||||
}
|
}
|
||||||
|
|
||||||
60% {
|
60% {
|
||||||
transform: translateX(4px)
|
transform: translateX(4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
70% {
|
70% {
|
||||||
transform: translateX(-3px)
|
transform: translateX(-3px);
|
||||||
}
|
}
|
||||||
|
|
||||||
80% {
|
80% {
|
||||||
transform: translateX(2px)
|
transform: translateX(2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
90% {
|
90% {
|
||||||
transform: translateX(-1px)
|
transform: translateX(-1px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slide-left {
|
@keyframes slide-left {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateX(-100%)
|
transform: translateX(-100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateX(0)
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slide-right {
|
@keyframes slide-right {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateX(100%)
|
transform: translateX(100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateX(0)
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,507 @@
|
||||||
|
<template>
|
||||||
|
<!-- colorui/components/calendar/calendar.wxml -->
|
||||||
|
<view class="calendar">
|
||||||
|
<view class="title flex">
|
||||||
|
<view class="flex">
|
||||||
|
<picker :value="selectDay.year + '-' + selectDay.month" @change="editMonth" mode="date" fields="month" class="year-month">
|
||||||
|
{{ selectDay.year }}.{{ selectDay.month > 9 ? selectDay.month : '0' + selectDay.month }}
|
||||||
|
</picker>
|
||||||
|
<view class="icon" @tap="lastMonth" style="transform: rotate(180deg)">
|
||||||
|
<view class="iconfont icon-playfill"></view>
|
||||||
|
</view>
|
||||||
|
<view class="icon" @tap="nextMonth">
|
||||||
|
<view class="iconfont icon-playfill"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view @tap.stop.prevent="openChange" class="flex open">
|
||||||
|
<view>{{ open ? '收起' : '展开' }}</view>
|
||||||
|
<view style="margin-left: 6rpx; font-size: 20rpx" :class="'iconfont icon-' + (open ? 'fold' : 'unfold')"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 日历头部 -->
|
||||||
|
<view class="flex-around calendar-week">
|
||||||
|
<view class="view">日</view>
|
||||||
|
<view class="view">一</view>
|
||||||
|
<view class="view">二</view>
|
||||||
|
<view class="view">三</view>
|
||||||
|
<view class="view">四</view>
|
||||||
|
<view class="view">五</view>
|
||||||
|
<view class="view">六</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 日历主体 -->
|
||||||
|
<view class="flex-start flex-wrap calendar-main" :style="'height:' + (dateList.length / 7) * 92 + 'rpx'">
|
||||||
|
<view class="day" v-for="(item, index) in dateList" :key="index">
|
||||||
|
<view
|
||||||
|
:class="'bg ' + (item.year === selectDay.year && item.month === selectDay.month ? (item.day === selectDay.day ? 'select' : '') : 'other-month')"
|
||||||
|
@tap.stop.prevent="selectChange"
|
||||||
|
:data-day="item.day"
|
||||||
|
:data-year="item.year"
|
||||||
|
:data-month="item.month"
|
||||||
|
:data-date-string="item.dateString"
|
||||||
|
>
|
||||||
|
{{ item.day }}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="spot" v-if="item.spot"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// colorui/components/calendar/calendar.js
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dateList: [],
|
||||||
|
|
||||||
|
//日历主体渲染数组
|
||||||
|
//选中时间
|
||||||
|
selectDay: {
|
||||||
|
year: '',
|
||||||
|
month: '',
|
||||||
|
day: ''
|
||||||
|
},
|
||||||
|
|
||||||
|
open: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 组件的属性列表
|
||||||
|
*/
|
||||||
|
props: {
|
||||||
|
spot: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
defaultTime: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 组件的方法列表
|
||||||
|
*/
|
||||||
|
methods: {
|
||||||
|
attached() {
|
||||||
|
if (this.defaultTime) {
|
||||||
|
let now = new Date(this.defaultTime);
|
||||||
|
} else {
|
||||||
|
let now = new Date();
|
||||||
|
}
|
||||||
|
let selectDay = {
|
||||||
|
year: now.getFullYear(),
|
||||||
|
month: now.getMonth() + 1,
|
||||||
|
day: now.getDate(),
|
||||||
|
dateString: this.formatTime(now, 'Y-M-D')
|
||||||
|
};
|
||||||
|
this.setMonth(selectDay.year, selectDay.month, selectDay.day);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 时间戳转化为年 月 日 时 分 秒
|
||||||
|
* time: 需要被格式化的时间，可以被new Date()解析即可
|
||||||
|
* format：格式化之后返回的格式，年月日时分秒分别为Y, M, D, h, m, s，这个参数不填的话则显示多久前
|
||||||
|
*/
|
||||||
|
formatTime(time, format) {
|
||||||
|
function formatNumber(n) {
|
||||||
|
n = n.toString();
|
||||||
|
return n[1] ? n : '0' + n;
|
||||||
|
}
|
||||||
|
function getDate(time, format) {
|
||||||
|
const formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
|
||||||
|
const returnArr = [];
|
||||||
|
const date = new Date(time);
|
||||||
|
returnArr.push(date.getFullYear());
|
||||||
|
returnArr.push(formatNumber(date.getMonth() + 1));
|
||||||
|
returnArr.push(formatNumber(date.getDate()));
|
||||||
|
returnArr.push(formatNumber(date.getHours()));
|
||||||
|
returnArr.push(formatNumber(date.getMinutes()));
|
||||||
|
returnArr.push(formatNumber(date.getSeconds()));
|
||||||
|
for (const i in returnArr) {
|
||||||
|
format = format.replace(formateArr[i], returnArr[i]);
|
||||||
|
}
|
||||||
|
return format;
|
||||||
|
}
|
||||||
|
function getDateDiff(time) {
|
||||||
|
let r = '';
|
||||||
|
const ft = new Date(time);
|
||||||
|
const nt = new Date();
|
||||||
|
const nd = new Date(nt);
|
||||||
|
nd.setHours(23);
|
||||||
|
nd.setMinutes(59);
|
||||||
|
nd.setSeconds(59);
|
||||||
|
nd.setMilliseconds(999);
|
||||||
|
const d = parseInt((nd - ft) / 86400000);
|
||||||
|
switch (true) {
|
||||||
|
case d === 0:
|
||||||
|
const t = parseInt(nt / 1000) - parseInt(ft / 1000);
|
||||||
|
switch (true) {
|
||||||
|
case t < 60:
|
||||||
|
r = '刚刚';
|
||||||
|
break;
|
||||||
|
case t < 3600:
|
||||||
|
r = parseInt(t / 60) + '分钟前';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
r = parseInt(t / 3600) + '小时前';
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case d === 1:
|
||||||
|
r = '昨天';
|
||||||
|
break;
|
||||||
|
case d === 2:
|
||||||
|
r = '前天';
|
||||||
|
break;
|
||||||
|
case d > 2 && d < 30:
|
||||||
|
r = d + '天前';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
r = getDate(time, 'Y-M-D');
|
||||||
|
}
|
||||||
|
return r;
|
||||||
|
}
|
||||||
|
if (!format) {
|
||||||
|
return getDateDiff(time);
|
||||||
|
} else {
|
||||||
|
return getDate(time, format);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
//picker设置月份
|
||||||
|
editMonth(e) {
|
||||||
|
const arr = e.detail.value.split('-');
|
||||||
|
const year = parseInt(arr[0]);
|
||||||
|
const month = parseInt(arr[1]);
|
||||||
|
this.setMonth(year, month);
|
||||||
|
},
|
||||||
|
|
||||||
|
//上月切换按钮点击
|
||||||
|
lastMonth() {
|
||||||
|
const lastMonth = new Date(this.selectDay.year, this.selectDay.month - 2);
|
||||||
|
const year = lastMonth.getFullYear();
|
||||||
|
const month = lastMonth.getMonth() + 1;
|
||||||
|
this.setMonth(year, month);
|
||||||
|
},
|
||||||
|
|
||||||
|
//下月切换按钮点击
|
||||||
|
nextMonth() {
|
||||||
|
const nextMonth = new Date(this.selectDay.year, this.selectDay.month);
|
||||||
|
const year = nextMonth.getFullYear();
|
||||||
|
const month = nextMonth.getMonth() + 1;
|
||||||
|
this.setMonth(year, month);
|
||||||
|
},
|
||||||
|
|
||||||
|
//设置月份
|
||||||
|
setMonth(setYear, setMonth, setDay) {
|
||||||
|
if (this.selectDay.year !== setYear || this.selectDay.month !== setMonth) {
|
||||||
|
const day = Math.min(new Date(setYear, setMonth, 0).getDate(), this.selectDay.day);
|
||||||
|
const time = new Date(setYear, setMonth - 1, setDay ? setDay : day);
|
||||||
|
const data = {
|
||||||
|
selectDay: {
|
||||||
|
year: setYear,
|
||||||
|
month: setMonth,
|
||||||
|
day: setDay ? setDay : day,
|
||||||
|
dateString: this.formatTime(time, 'Y-M-D')
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (!setDay) {
|
||||||
|
data.open = true;
|
||||||
|
}
|
||||||
|
this.setData(data);
|
||||||
|
this.dateInit(setYear, setMonth);
|
||||||
|
this.setSpot();
|
||||||
|
this.$emit('change', {
|
||||||
|
detail: this.selectDay
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
//展开收起
|
||||||
|
openChange() {
|
||||||
|
this.setData({
|
||||||
|
open: !this.open
|
||||||
|
});
|
||||||
|
this.$emit('aaa', {
|
||||||
|
detail: {
|
||||||
|
a: 0
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.dateInit();
|
||||||
|
this.setSpot();
|
||||||
|
},
|
||||||
|
|
||||||
|
//设置日历底下是否展示小圆点
|
||||||
|
setSpot() {
|
||||||
|
const timeArr = this.spot.map((item) => {
|
||||||
|
return this.formatTime(item, 'Y-M-D');
|
||||||
|
});
|
||||||
|
this.dateList.forEach((item) => {
|
||||||
|
if (timeArr.indexOf(item.dateString) !== -1) {
|
||||||
|
item.spot = true;
|
||||||
|
} else {
|
||||||
|
item.spot = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.setData({
|
||||||
|
dateList: this.dateList
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
//日历主体的渲染方法
|
||||||
|
dateInit(setYear = this.selectDay.year, setMonth = this.selectDay.month) {
|
||||||
|
let dateList = []; //需要遍历的日历数组数据
|
||||||
|
let now = new Date(setYear, setMonth - 1); //当前月份的1号
|
||||||
|
let startWeek = now.getDay(); //目标月1号对应的星期
|
||||||
|
let dayNum = new Date(setYear, setMonth, 0).getDate(); //当前月有多少天
|
||||||
|
let forNum = Math.ceil((startWeek + dayNum) / 7) * 7; //当前月跨越的周数
|
||||||
|
if (this.open) {
|
||||||
|
//展开状态，需要渲染完整的月份
|
||||||
|
for (let i = 0; i < forNum; i++) {
|
||||||
|
const now2 = new Date(now);
|
||||||
|
now2.setDate(i - startWeek + 1);
|
||||||
|
let obj = {};
|
||||||
|
obj = {
|
||||||
|
day: now2.getDate(),
|
||||||
|
month: now2.getMonth() + 1,
|
||||||
|
year: now2.getFullYear(),
|
||||||
|
dateString: this.formatTime(now2, 'Y-M-D')
|
||||||
|
};
|
||||||
|
dateList[i] = obj;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
//非展开状态，只需要渲染当前周
|
||||||
|
for (let i = 0; i < 7; i++) {
|
||||||
|
const now2 = new Date(now);
|
||||||
|
//当前周的7天
|
||||||
|
now2.setDate(Math.ceil((this.selectDay.day + startWeek) / 7) * 7 - 6 - startWeek + i);
|
||||||
|
let obj = {};
|
||||||
|
obj = {
|
||||||
|
day: now2.getDate(),
|
||||||
|
month: now2.getMonth() + 1,
|
||||||
|
year: now2.getFullYear(),
|
||||||
|
dateString: this.formatTime(now2, 'Y-M-D')
|
||||||
|
};
|
||||||
|
dateList[i] = obj;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.setData({
|
||||||
|
dateList: dateList
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
//一天被点击时
|
||||||
|
selectChange(e) {
|
||||||
|
const year = e.currentTarget.dataset.year;
|
||||||
|
const month = e.currentTarget.dataset.month;
|
||||||
|
const day = e.currentTarget.dataset.day;
|
||||||
|
const dateString = e.currentTarget.dataset.dateString;
|
||||||
|
const selectDay = {
|
||||||
|
year: year,
|
||||||
|
month: month,
|
||||||
|
day: day,
|
||||||
|
dateString: dateString
|
||||||
|
};
|
||||||
|
if (this.selectDay.year !== year || this.selectDay.month !== month) {
|
||||||
|
this.setMonth(year, month, day);
|
||||||
|
} else if (this.selectDay.day !== day) {
|
||||||
|
this.setData({
|
||||||
|
selectDay: selectDay
|
||||||
|
});
|
||||||
|
this.$emit('change', {
|
||||||
|
detail: this.selectDay
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
// 处理小程序 attached 生命周期
|
||||||
|
this.attached();
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
spot: function (spot) {
|
||||||
|
this.setSpot();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created: function () {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
/* colorui/components/calendar/calendar.wxss */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'iconfont';
|
||||||
|
/* IE9 */
|
||||||
|
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAL8AAsAAAAABxQAAAKvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqBVIFEATYCJAMQCwoABCAFhG0HQhswBsgekiRFQgQU8AMAmmCIh3/HXu9L8hFVWwXoyALpqqoqwAEfD6g66abEPBux/13TPwBUeZ0lAldI75LS0ctlzLY8NwVk3NQm5Co3lqhaWPE+z+X0pi+Q1bez3MZatCYtPuoFGAcU4F7UiyIroBPkltpFHBi88q89JtA0p1jEYe/wNMQryKpAPHbYMMT3CooStetCdeZgEd9U1NPX9ADgQf8+/kFlxJNUMrLx5LpHhPaf+GUsavP/JpxJQpHgHq8gYx0oxO1s41yUiMQoTWOibQN1dYmf+Dn0MhYO2zgfttC/PEKSiSrS3QabXjPzE3ON4GdII/FrrEsGhPjr/dYGcOyzM56gg6PM1BXvcbZIxY7zzRyS4znJs/m2VmjuRNq9edF1kcx9FbW85/nRgbXX6s5q/AX+vsGh/kBhUUHAYszwFx4acaAA6l7k9bgjo8Vbue4acDcbCqFqcBru+htf4l/I4EnzzQAa8lT+kNoAyG/TJuTdyDcsG+NB4r05rfm73irgx/jRrw4XMB+gyga24dQGHCqlg8RKyZ3cWuWLEWhFQlMTmOwwFLrCPwH3E+omB/I1sy2yunmysOuoaNlEVd0Omtb0HW8ZYaJEaWDVnoPQd4ek6zuyvkeysE+omPpCVT+i0HQaWRe2LIYjsYsRzImIrEvIIagKZQmeaHoniW1Owqzr0NIsYbqjjCpKy4ftPqIQdsUWfd5WyTlFlKky6nWeI5KkIo2pTiLwUjvnWmNZGZ37UKmgypDoAENgHCFCrJYgDgKVgsrxXOLo+5MImzkSjK3oFuazCEbnmB6pUKocQPZ5FZDuV97RzbOpxHEUQjEqGdLrzCMkEhWizc9zIgRcKfuBmqZRGR1Fod7S5/3yH56AJnJDiRQ5SlRU3yhUlcRoMStek/ASdUgSAAA=')
|
||||||
|
format('woff2');
|
||||||
|
/* iOS 4.1- */
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family: 'iconfont' !important;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-unfold:before {
|
||||||
|
content: '\e661';
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-fold:before {
|
||||||
|
content: '\e6de';
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-playfill:before {
|
||||||
|
content: '\e74f';
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.direction-column {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex1 {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-center {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-start {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-end {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-around {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-wrap {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-start {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-end {
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-stretch {
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar .title {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #333;
|
||||||
|
padding: 30rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar .title .year-month {
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar .title .icon {
|
||||||
|
padding: 0 16rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar .title .open {
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
color: #999;
|
||||||
|
font-size: 22rpx;
|
||||||
|
line-height: 36rpx;
|
||||||
|
border-radius: 18rpx;
|
||||||
|
padding: 0 14rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar .calendar-week {
|
||||||
|
line-height: 40rpx;
|
||||||
|
padding: 0 25rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar .calendar-week .view {
|
||||||
|
width: 100rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar .calendar-main {
|
||||||
|
padding: 30rpx 25rpx;
|
||||||
|
transition: height 0.3s;
|
||||||
|
align-content: flex-start;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar .calendar-main .day {
|
||||||
|
position: relative;
|
||||||
|
width: 100rpx;
|
||||||
|
color: #666;
|
||||||
|
text-align: center;
|
||||||
|
height: 66rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar .calendar-main .day .bg {
|
||||||
|
height: 56rpx;
|
||||||
|
line-height: 56rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar .calendar-main .day .select {
|
||||||
|
width: 56rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(-60deg, #0fdac5, #1bc7b0);
|
||||||
|
box-shadow: 0px 5px 16px 0px #c6f3ed;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar .calendar-main .day .other-month {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar .calendar-main .day .spot {
|
||||||
|
width: 8rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
background-color: #1dcdb8;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 6rpx auto 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,179 @@
|
||||||
|
<template>
|
||||||
|
<view style="height: 100%">
|
||||||
|
<!-- colorui/components/canvas2d-ring/canvas2d-ring.wxml -->
|
||||||
|
<canvas :style="'width:' + canvasWidth + 'px;height:' + canvasWidth + 'px; position:relative'" type="2d" id="myCanvas">
|
||||||
|
<view class="circle-bar" :style="'height:' + canvasWidth + 'px;'">
|
||||||
|
<view class="title_name">
|
||||||
|
{{ title }}
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="title_val"
|
||||||
|
:style="'color: ' + valueColor + '; font-weight:' + f_weight + '; margin-top:' + (show_tip ? '10' : '0') + 'rpx;font-size:' + f_size + 'px'"
|
||||||
|
>
|
||||||
|
{{ value }} {{ suffix }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</canvas>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// colorui/components/canvas2d-ring/canvas2d-ring.js
|
||||||
|
var windWidth = uni.getSystemInfoSync().windowWidth;
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
canvasWidth: ' windWidth * 0.4',
|
||||||
|
show_tip: true
|
||||||
|
};
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 组件的属性列表
|
||||||
|
*/
|
||||||
|
props: {
|
||||||
|
//画布的宽度 默认占屏幕宽度的0.4倍
|
||||||
|
canvasWidth: {
|
||||||
|
type: Number,
|
||||||
|
default: windWidth * 0.4
|
||||||
|
},
|
||||||
|
//线条宽度 默认10
|
||||||
|
lineWidth: {
|
||||||
|
type: Number,
|
||||||
|
default: 10
|
||||||
|
},
|
||||||
|
//线条颜色
|
||||||
|
lineColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#3696FA'
|
||||||
|
},
|
||||||
|
//标题 默认“完成率”
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '完成率'
|
||||||
|
},
|
||||||
|
//当前的值 默认45
|
||||||
|
value: {
|
||||||
|
type: Number,
|
||||||
|
default: 45
|
||||||
|
},
|
||||||
|
//值的颜色 默认""
|
||||||
|
valueColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#333'
|
||||||
|
},
|
||||||
|
//值的字体的大小颜色 默认28rpx
|
||||||
|
f_size: {
|
||||||
|
type: Number,
|
||||||
|
default: 14
|
||||||
|
},
|
||||||
|
f_weight: {
|
||||||
|
type: String,
|
||||||
|
default: '500'
|
||||||
|
},
|
||||||
|
//最大值 默认100
|
||||||
|
maxValue: {
|
||||||
|
type: Number,
|
||||||
|
default: 100
|
||||||
|
},
|
||||||
|
//最小值 默认0
|
||||||
|
minValue: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
//当前值的后缀名
|
||||||
|
suffix: {
|
||||||
|
type: null,
|
||||||
|
default: '%'
|
||||||
|
},
|
||||||
|
//从什么角度开始 0~360之间 （12点方向为0,18点方向为180,0点方向为360）
|
||||||
|
startDegree: {
|
||||||
|
type: Number,
|
||||||
|
default: 180
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 组件的方法列表
|
||||||
|
*/
|
||||||
|
methods: {
|
||||||
|
showCanvasRing() {
|
||||||
|
//没标题的时候去掉margin-top的值
|
||||||
|
if (this.title.replace(/(^\s*)|(\s*$)/g, '').length == 0) {
|
||||||
|
this.setData({
|
||||||
|
show_tip: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//canvas 2d
|
||||||
|
const query = uni.createSelectorQuery().in(this);
|
||||||
|
query
|
||||||
|
.select('#myCanvas')
|
||||||
|
.fields({
|
||||||
|
node: true,
|
||||||
|
size: true
|
||||||
|
})
|
||||||
|
.exec(this.init.bind(this));
|
||||||
|
},
|
||||||
|
init(res) {
|
||||||
|
const canvas = res[0].node;
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const dpr = uni.getSystemInfoSync().pixelRatio;
|
||||||
|
canvas.width = res[0].width * dpr;
|
||||||
|
canvas.height = res[0].height * dpr;
|
||||||
|
ctx.scale(dpr, dpr);
|
||||||
|
// 大小值的计算
|
||||||
|
var circle_r = this.canvasWidth / 2; //画布的一半，用来找中心点和半径
|
||||||
|
var startDegree = this.startDegree; //从什么角度开始
|
||||||
|
var maxValue = this.maxValue; //最大值
|
||||||
|
var minValue = this.minValue; //最小值
|
||||||
|
var value = this.value; //当前的值
|
||||||
|
var lineColor = this.lineColor; //线条颜色
|
||||||
|
var lineWidth = this.lineWidth; //线条宽度
|
||||||
|
var percent = 360 * ((value - minValue) / (maxValue - minValue)); //计算结果
|
||||||
|
|
||||||
|
//定义起始点
|
||||||
|
ctx.translate(circle_r, circle_r);
|
||||||
|
//灰色圆弧
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.strokeStyle = '#ebebeb';
|
||||||
|
ctx.lineWidth = lineWidth;
|
||||||
|
ctx.arc(0, 0, circle_r - 10, 0, 2 * Math.PI, true);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.closePath();
|
||||||
|
//有色彩的圆弧
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.strokeStyle = lineColor;
|
||||||
|
ctx.lineWidth = lineWidth;
|
||||||
|
ctx.arc(0, 0, circle_r - 10, (startDegree * Math.PI) / 180 - 0.5 * Math.PI, (percent * Math.PI) / 180 + (startDegree * Math.PI) / 180 - 0.5 * Math.PI, false);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.closePath();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created: function () {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
/* colorui/components/canvas2d-ring/canvas2d-ring.wxss */
|
||||||
|
.circle-bar {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle-bar .title_name {
|
||||||
|
max-height: 62rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
.circle-bar .title_val {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,129 @@
|
||||||
|
<template>
|
||||||
|
<!-- colorui/components/cu-custom.wxml -->
|
||||||
|
<view :class="'cu-custom ' + (isLucency == true ? 'lucency' : '')" :style="'height:' + (isLucency == true ? 0 : CustomBar) + 'px'">
|
||||||
|
<view
|
||||||
|
:class="'cu-bar ' + (noFixed ? '' : 'fixed') + ' ' + (bgImage != '' ? 'none-bg text-white bg-img' : '') + ' ' + bgColor"
|
||||||
|
:style="'height:' + CustomBar + 'px;padding-top:' + StatusBar + 'px;' + (bgImage ? 'background-image:url( + bgImage+)' : '')"
|
||||||
|
>
|
||||||
|
<view class="action" @tap="BackPage" v-if="isBack && mode != 'singlePage'">
|
||||||
|
<text class="cuIcon-back"></text>
|
||||||
|
<slot name="backText"></slot>
|
||||||
|
</view>
|
||||||
|
<view class="action" @tap="toHome" :data-url="homePage" v-if="isBack && mode == 'singlePage'">
|
||||||
|
<text class="cuIcon-home padding-left-sm"></text>
|
||||||
|
<slot name="homeText"></slot>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="action border-custom"
|
||||||
|
v-if="isCustom"
|
||||||
|
:style="'width:' + Custom.width + 'px;height:' + Custom.height + 'px;margin-left:calc(750rpx - ' + Custom.right + 'px)'"
|
||||||
|
>
|
||||||
|
<text class="cuIcon-back" @tap="BackPage"></text>
|
||||||
|
<text class="cuIcon-homefill" @tap="toHome" :data-url="homePage"></text>
|
||||||
|
</view>
|
||||||
|
<view class="content" :style="'top:' + StatusBar + 'px'">
|
||||||
|
<slot name="content"></slot>
|
||||||
|
</view>
|
||||||
|
<slot name="right"></slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// colorui/components/cu-custom.js
|
||||||
|
const app = getApp();
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
StatusBar: app.globalData.StatusBar,
|
||||||
|
CustomBar: app.globalData.CustomBar,
|
||||||
|
Custom: app.globalData.Custom,
|
||||||
|
mode: 'default'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 组件的一些选项
|
||||||
|
*/
|
||||||
|
options: {
|
||||||
|
addGlobalClass: true,
|
||||||
|
multipleSlots: true
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 组件的属性列表
|
||||||
|
*/
|
||||||
|
props: {
|
||||||
|
bgColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
isCustom: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
isBack: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
bgImage: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
isLucency: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
noFixed: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
homePage: {
|
||||||
|
type: String,
|
||||||
|
default: '/pages/index/index'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 组件的方法列表
|
||||||
|
*/
|
||||||
|
methods: {
|
||||||
|
handlePageShow() {
|
||||||
|
this.getInfo();
|
||||||
|
},
|
||||||
|
|
||||||
|
BackPage() {
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
toHome(e) {
|
||||||
|
if (e.currentTarget.dataset.url != '') {
|
||||||
|
uni.reLaunch({
|
||||||
|
url: e.currentTarget.dataset.url
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/index/index'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getInfo() {
|
||||||
|
var that = this;
|
||||||
|
if (getCurrentPages().length === 1) {
|
||||||
|
that.setData({
|
||||||
|
mode: 'singlePage'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created: function () {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
/* colorui/components/cu-custom.wxss */
|
||||||
|
.lucency {
|
||||||
|
/* position: absolute;
|
||||||
|
z-index: 1; */
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
<template>
|
||||||
|
<view style="height: 100%">
|
||||||
|
<!-- colorui/components/skeleton/skeleton.wxml -->
|
||||||
|
<view v-if="loading" class="box padding">
|
||||||
|
<view v-if="avatar" class="bg avatar"></view>
|
||||||
|
<view class="column">
|
||||||
|
<view
|
||||||
|
:class="(active ? 'active' : '') + ' bg list'"
|
||||||
|
:style="'width: ' + columnWidth[index] + ';height:' + (index + 1 == column && endHeight ? endHeight : '')"
|
||||||
|
v-for="(item, index) in column"
|
||||||
|
:key="index"
|
||||||
|
></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<slot v-else />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// colorui/components/skeleton/skeleton.js
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
addGlobalClass: true
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 组件的属性列表
|
||||||
|
*/
|
||||||
|
props: {
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
column: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
columnWidth: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
endHeight: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
avatar: Boolean
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 组件的方法列表
|
||||||
|
*/
|
||||||
|
methods: {},
|
||||||
|
created: function () {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
/* colorui/components/skeleton/skeleton.wxss */
|
||||||
|
.box {
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column > view {
|
||||||
|
height: 36rpx;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
|
||||||
|
background-size: 400% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
animation: loading 1.4s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loading {
|
||||||
|
0% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 扩展头像功能 */
|
||||||
|
.avatar {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
float: left;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,168 @@
|
||||||
|
/* 暗黑模式下应用的样式 */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
page {
|
||||||
|
/* 暗黑模式背景色 */
|
||||||
|
--darkBlack: #111111;
|
||||||
|
--lightGray: #222222;
|
||||||
|
--darkGray: #333333;
|
||||||
|
/* 暗黑模式按钮颜色 */
|
||||||
|
--btnGray: #444444;
|
||||||
|
/* 暗黑模式字体颜色 */
|
||||||
|
--darkTitle: rgba(255, 255, 255, 0.85);
|
||||||
|
--darkPrimaryText: rgba(255, 255, 255, 0.65);
|
||||||
|
--darkSecondaryText: rgba(255, 255, 255, 0.45);
|
||||||
|
--darkDisable: rgba(255, 255, 255, 0.1);
|
||||||
|
/* 暗黑模式渐变色 */
|
||||||
|
--darkGradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
|
||||||
|
--darkGradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
|
||||||
|
--darkGradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
|
||||||
|
--darkGradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
|
||||||
|
--darkGradualPink: linear-gradient(45deg, #ec008c, #6739b6);
|
||||||
|
--darkGradualBlue: linear-gradient(45deg, #112a45, #1765ad);
|
||||||
|
/* 阴影透明色 */
|
||||||
|
--ShadowSize: 6rpx 6rpx 8rpx;
|
||||||
|
--redShadow: rgba(204, 69, 59, 0.8);
|
||||||
|
--orangeShadow: rgba(217, 109, 26, 0.8);
|
||||||
|
--yellowShadow: rgba(224, 170, 7, 0.8);
|
||||||
|
--oliveShadow: rgba(124, 173, 55, 0.8);
|
||||||
|
--greenShadow: rgba(48, 156, 63, 0.8);
|
||||||
|
--cyanShadow: rgba(28, 187, 180, 0.8);
|
||||||
|
--blueShadow: rgba(0, 102, 204, 0.8);
|
||||||
|
--purpleShadow: rgba(88, 48, 156, 0.8);
|
||||||
|
--mauveShadow: rgba(133, 33, 150, 0.8);
|
||||||
|
--pinkShadow: rgba(199, 50, 134, 0.8);
|
||||||
|
--brownShadow: rgba(140, 88, 53, 0.8);
|
||||||
|
--greyShadow: rgba(114, 130, 138, 0.8);
|
||||||
|
--grayShadow: rgba(114, 130, 138, 0.8);
|
||||||
|
--blackShadow: rgba(26, 26, 26, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
page {
|
||||||
|
background-color: var(--darkBlack);
|
||||||
|
color: var(--darkPrimaryText);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-gradual-blue {
|
||||||
|
background-image: var(--darkGradualBlue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-white {
|
||||||
|
color: var(--gray);
|
||||||
|
background-color: var(--darkGray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list.menu > .cu-item {
|
||||||
|
background-color: var(--lightGray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-black,
|
||||||
|
.line-black,
|
||||||
|
.lines-black {
|
||||||
|
color: var(--darkTitle);
|
||||||
|
}
|
||||||
|
|
||||||
|
.solids::after {
|
||||||
|
border: 8rpx solid var(--darkDisable);
|
||||||
|
}
|
||||||
|
|
||||||
|
.solids-top::after {
|
||||||
|
border-top: 8rpx solid var(--darkDisable);
|
||||||
|
}
|
||||||
|
|
||||||
|
.solids-right::after {
|
||||||
|
border-right: 8rpx solid var(--darkDisable);
|
||||||
|
}
|
||||||
|
|
||||||
|
.solids-bottom::after {
|
||||||
|
border-bottom: 8rpx solid var(--darkDisable);
|
||||||
|
}
|
||||||
|
|
||||||
|
.solids-left::after {
|
||||||
|
border-left: 8rpx solid var(--darkDisable);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-bar .search-form {
|
||||||
|
background-color: var(--lightGray);
|
||||||
|
color: var(--darkPrimaryText);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list.grid {
|
||||||
|
background-color: var(--darkGray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-btn:not([class*='bg-']) {
|
||||||
|
background-color: var(--btnGray);
|
||||||
|
}
|
||||||
|
|
||||||
|
radio.radio[checked]::after {
|
||||||
|
border: 8px solid var(--darkDisable) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-progress {
|
||||||
|
background-color: #424242;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-progress view {
|
||||||
|
color: var(--darkPrimaryText);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-load.load-modal {
|
||||||
|
background-color: var(--lightGray);
|
||||||
|
color: var(--darkPrimaryText);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-load.load-modal::after {
|
||||||
|
background-color: var(--lightGray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-bar {
|
||||||
|
background-color: var(--lightGray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-bar,
|
||||||
|
.cu-bar.input {
|
||||||
|
background-color: var(--lightGray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-chat .cu-item > .main .content:not([class*='bg-']) {
|
||||||
|
background-color: var(--lightGray);
|
||||||
|
color: var(--darkPrimaryText);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-chat .cu-info {
|
||||||
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
|
color: var(--darkPrimaryText);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list.menu-avatar > .cu-item {
|
||||||
|
background-color: var(--lightGray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-card.dynamic > .cu-item {
|
||||||
|
background-color: var(--lightGray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-card > .cu-item {
|
||||||
|
background-color: var(--lightGray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-timeline {
|
||||||
|
background-color: var(--lightGray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-timeline > .cu-item::before {
|
||||||
|
background-color: var(--lightGray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-timeline > .cu-item[class*='cuIcon-']::before {
|
||||||
|
background-color: var(--lightGray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-form-group {
|
||||||
|
background-color: var(--lightGray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-form-group + .cu-form-group {
|
||||||
|
border-top: 1rpx solid var(--darkDisable);
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -5,6 +5,7 @@
|
||||||
"versionName" : "1.2.0",
|
"versionName" : "1.2.0",
|
||||||
"versionCode" : "100",
|
"versionCode" : "100",
|
||||||
"transformPx" : false,
|
"transformPx" : false,
|
||||||
|
"sassImplementationName": "node-sass",
|
||||||
"app-plus" : {
|
"app-plus" : {
|
||||||
"usingComponents" : true,
|
"usingComponents" : true,
|
||||||
"nvueCompiler" : "uni-app",
|
"nvueCompiler" : "uni-app",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue