添加colorui-ga css样式
parent
7df093928c
commit
04081fbc87
|
|
@ -1,184 +1,181 @@
|
|||
/*
|
||||
Animation 微动画
|
||||
基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
|
||||
基于ColorUI-GA组建库的动画模块
|
||||
*/
|
||||
|
||||
/* css 滤镜 控制黑白底色gif的 */
|
||||
.gif-black{
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
.gif-white{
|
||||
mix-blend-mode: multiply;
|
||||
.gif-black {
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
.gif-white {
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
/* Animation css */
|
||||
[class*=animation-] {
|
||||
animation-duration: .5s;
|
||||
[class*='animation-'] {
|
||||
animation-duration: 0.5s;
|
||||
animation-timing-function: ease-out;
|
||||
animation-fill-mode: both
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animation-fade {
|
||||
animation-name: fade;
|
||||
animation-duration: .8s;
|
||||
animation-timing-function: linear
|
||||
animation-duration: 0.8s;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
.animation-scale-up {
|
||||
animation-name: scale-up
|
||||
animation-name: scale-up;
|
||||
}
|
||||
|
||||
.animation-scale-down {
|
||||
animation-name: scale-down
|
||||
animation-name: scale-down;
|
||||
}
|
||||
|
||||
.animation-slide-top {
|
||||
animation-name: slide-top
|
||||
animation-name: slide-top;
|
||||
}
|
||||
|
||||
.animation-slide-bottom {
|
||||
animation-name: slide-bottom
|
||||
animation-name: slide-bottom;
|
||||
}
|
||||
|
||||
.animation-slide-left {
|
||||
animation-name: slide-left
|
||||
animation-name: slide-left;
|
||||
}
|
||||
|
||||
.animation-slide-right {
|
||||
animation-name: slide-right
|
||||
animation-name: slide-right;
|
||||
}
|
||||
|
||||
.animation-shake {
|
||||
animation-name: shake
|
||||
animation-name: shake;
|
||||
}
|
||||
|
||||
.animation-reverse {
|
||||
animation-direction: reverse
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0% {
|
||||
opacity: 0
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-up {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.2)
|
||||
transform: scale(0.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1)
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(1.8)
|
||||
transform: scale(1.8);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1)
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-top {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%)
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0)
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-bottom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(100%)
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0)
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0)
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: translateX(-9px)
|
||||
transform: translateX(-9px);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: translateX(8px)
|
||||
transform: translateX(8px);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translateX(-7px)
|
||||
transform: translateX(-7px);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translateX(6px)
|
||||
transform: translateX(6px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(-5px)
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateX(4px)
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translateX(-3px)
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(2px)
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translateX(-1px)
|
||||
transform: translateX(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%)
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0)
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(100%)
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
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",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
"sassImplementationName": "node-sass",
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueCompiler" : "uni-app",
|
||||
|
|
|
|||
Loading…
Reference in New Issue