python学习
This commit is contained in:
1362
native/template/calendar/index.js
Normal file
1362
native/template/calendar/index.js
Normal file
File diff suppressed because it is too large
Load Diff
46
native/template/calendar/index.wxml
Normal file
46
native/template/calendar/index.wxml
Normal file
@@ -0,0 +1,46 @@
|
||||
<template name="calendar">
|
||||
<view class="flex box box-tb box-align-center">
|
||||
<view class="calendar pink-color box box-tb">
|
||||
<view class="top-handle fs28 box box-lr box-align-center box-pack-center">
|
||||
<!-- <view class="prev box box-rl" bindtap="choosePrevMonth" data-handle="prev">
|
||||
<view class="prev-handle box box-lr box-align-center box-pack-center">《</view>
|
||||
</view> -->
|
||||
<view class="date-area box box-lr box-align-center box-pack-center">{{curYear || "--"}} 年 {{curMonth || "--"}} 月</view>
|
||||
<!-- <view class="next box box-lr" bindtap="chooseNextMonth" data-handle="next">
|
||||
<view class="next-handle box box-lr box-align-center box-pack-center">》</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="weeks box box-lr box-align-center">
|
||||
<view class="week fs28" wx:for="{{weeksCh}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
|
||||
</view>
|
||||
<view class="perspective">
|
||||
<view class="days box box-lr box-wrap {{leftSwipe ? 'leftRoate' : ''}} {{rightSwipe ? 'rightRoate' : ''}}">
|
||||
<view wx:if="{{empytGrids}}" class="grid disable-day-color box box-align-center box-pack-center"
|
||||
wx:for="{{empytGrids}}"
|
||||
wx:key="{{index}}"
|
||||
data-idx="{{index}}">
|
||||
<view class="day box box-align-center box-pack-center">{{item}}</view>
|
||||
</view>
|
||||
<view class="grid normal-day-color box box-align-center box-pack-center"
|
||||
wx:for="{{days}}"
|
||||
wx:key="{{index}}"
|
||||
data-disable="{{item.disable}}"
|
||||
data-idx="{{index}}"
|
||||
bindtap="tapDayItem">
|
||||
<view class="day-with-dot box box-tb box-align-center box-pack-center">
|
||||
<view wx:if="{{item.showTodoLabel && todoLabelPos === 'top'}}" class="{{item.todoText ? 'todo-text' : 'todo-dot'}}" style="background-color: {{todoLabelColor}}">{{item.todoText}}</view>
|
||||
<view class="day border-radius {{item.choosed ? 'day-choosed-color pink-bg' : ''}} {{ item.disable ? 'disable-day-color disable-day-circle' : '' }} box box-align-center box-pack-center">{{item.day}}</view>
|
||||
<view wx:if="{{item.showTodoLabel && todoLabelPos === 'bottom'}}" class="{{item.todoText ? 'todo-text' : 'todo-dot'}}" style="background-color: {{todoLabelColor}}">{{item.todoText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid disable-day-color box box-align-center box-pack-center"
|
||||
wx:for="{{lastEmptyGrids}}"
|
||||
wx:key="{{index}}"
|
||||
data-idx="{{index}}">
|
||||
<view class="day box box-align-center box-pack-center">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
275
native/template/calendar/index.wxss
Normal file
275
native/template/calendar/index.wxss
Normal file
@@ -0,0 +1,275 @@
|
||||
/* pages/calendar/calendar.wxss */
|
||||
.box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.box-lr {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.box-rl {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.box-tb {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.box-pack-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.box-align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.box-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bg {
|
||||
background-image: linear-gradient(to bottom, #faefe7, #ffcbd7);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pink-color {
|
||||
color: #ff629a;
|
||||
}
|
||||
|
||||
.white-color {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fs24 {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.fs28 {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.fs32 {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.fs36 {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.top-handle {
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.prev {
|
||||
text-align: right;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.next {
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.prev-handle {
|
||||
width: 80rpx;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.next-handle {
|
||||
width: 80rpx;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.date-area {
|
||||
width: 375rpx;
|
||||
height: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.weeks {
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.week {
|
||||
text-align: center;
|
||||
line-height: 104rpx;
|
||||
}
|
||||
|
||||
.grid,
|
||||
.week {
|
||||
width: 104rpx;
|
||||
height: 104rpx;
|
||||
}
|
||||
|
||||
.day {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.normal-day-color {
|
||||
color: #88d2ac;
|
||||
}
|
||||
|
||||
.day-choosed-color {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.todo-dot {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #cc5226;
|
||||
}
|
||||
|
||||
.todo-text {
|
||||
font-size: 22rpx;
|
||||
color: #c2c2c2;
|
||||
}
|
||||
|
||||
.day-with-dot {
|
||||
height: 72rpx;
|
||||
}
|
||||
|
||||
.disable-day-color {
|
||||
color: #cacaca;
|
||||
}
|
||||
|
||||
.disable-day-circle {
|
||||
background-color: #f6f6f7;
|
||||
}
|
||||
|
||||
.border-radius {
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.pink-bg {
|
||||
background-color: #ff629a;
|
||||
transition: all 0.3s;
|
||||
animation-name: choosed;
|
||||
animation-duration: 0.5s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
@keyframes choosed {
|
||||
from {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.purple-bg {
|
||||
background-color: #b8b8f1;
|
||||
}
|
||||
|
||||
.right-triangle::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 15rpx solid transparent;
|
||||
border-left-color: #ff629a;
|
||||
position: absolute;
|
||||
right: -22rpx;
|
||||
top: 18rpx;
|
||||
}
|
||||
|
||||
.left-triangle::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 15rpx solid transparent;
|
||||
border-right-color: #ff629a;
|
||||
position: absolute;
|
||||
left: -22rpx;
|
||||
top: 18rpx;
|
||||
}
|
||||
|
||||
.tips {
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.types {
|
||||
background-color: #ffedf4;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.types-desc {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.type-name {
|
||||
margin-top: 50rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.type-desc {
|
||||
padding: 0 35rpx;
|
||||
line-height: 38rpx;
|
||||
}
|
||||
|
||||
.explain {
|
||||
border-top: 1px solid #eee;
|
||||
width: 90%;
|
||||
margin: 20rpx 5% 20rpx 5%;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.explain-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.explain-item {
|
||||
padding: 8rpx 20rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.left-border-radius {
|
||||
border-top-left-radius: 20rpx;
|
||||
border-bottom-left-radius: 20rpx;
|
||||
}
|
||||
|
||||
.right-border-radius {
|
||||
border-top-right-radius: 20rpx;
|
||||
border-bottom-right-radius: 20rpx;
|
||||
}
|
||||
|
||||
.perspective {
|
||||
perspective: 750rpx;
|
||||
}
|
||||
|
||||
.leftRoate {
|
||||
transition: all 1s;
|
||||
transform: rotateY(-5deg);
|
||||
}
|
||||
|
||||
.rightRoate {
|
||||
transition: all 1s;
|
||||
transform: rotateY(5deg);
|
||||
}
|
||||
Reference in New Issue
Block a user