mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-03-07 14:34:02 +08:00
2.1.1
This commit is contained in:
Weilanwl
@@ -4,7 +4,7 @@
|
|||||||
onLaunch: function() {
|
onLaunch: function() {
|
||||||
uni.getSystemInfo({
|
uni.getSystemInfo({
|
||||||
success: function(e) {
|
success: function(e) {
|
||||||
// #ifndef MP-WEIXIN
|
// #ifndef MP
|
||||||
Vue.prototype.StatusBar = e.statusBarHeight;
|
Vue.prototype.StatusBar = e.statusBarHeight;
|
||||||
if (e.platform == 'android') {
|
if (e.platform == 'android') {
|
||||||
Vue.prototype.CustomBar = e.statusBarHeight + 50;
|
Vue.prototype.CustomBar = e.statusBarHeight + 50;
|
||||||
@@ -13,7 +13,7 @@
|
|||||||
};
|
};
|
||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP
|
||||||
Vue.prototype.StatusBar = e.statusBarHeight;
|
Vue.prototype.StatusBar = e.statusBarHeight;
|
||||||
let custom = wx.getMenuButtonBoundingClientRect();
|
let custom = wx.getMenuButtonBoundingClientRect();
|
||||||
Vue.prototype.Custom = custom;
|
Vue.prototype.Custom = custom;
|
||||||
@@ -110,8 +110,8 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import "icon.css";
|
@import "colorui/main.css";
|
||||||
@import "colorui.css";
|
@import "colorui/icon.css";
|
||||||
|
|
||||||
.nav-list {
|
.nav-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
184
Colorui-UniApp/colorui/animation.css
Normal file
184
Colorui-UniApp/colorui/animation.css
Normal file
@@ -0,0 +1,184 @@
|
|||||||
|
/*
|
||||||
|
Animation 微动画
|
||||||
|
基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* css 滤镜 控制黑白底色gif的 */
|
||||||
|
.gif-black{
|
||||||
|
mix-blend-mode: screen;
|
||||||
|
}
|
||||||
|
.gif-white{
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Animation css */
|
||||||
|
[class*=animation-] {
|
||||||
|
animation-duration: .5s;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
animation-fill-mode: both
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation-fade {
|
||||||
|
animation-name: fade;
|
||||||
|
animation-duration: .8s;
|
||||||
|
animation-timing-function: linear
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation-scale-up {
|
||||||
|
animation-name: scale-up
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation-scale-down {
|
||||||
|
animation-name: scale-down
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation-slide-top {
|
||||||
|
animation-name: slide-top
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation-slide-bottom {
|
||||||
|
animation-name: slide-bottom
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation-slide-left {
|
||||||
|
animation-name: slide-left
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation-slide-right {
|
||||||
|
animation-name: slide-right
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation-shake {
|
||||||
|
animation-name: shake
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation-reverse {
|
||||||
|
animation-direction: reverse
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade {
|
||||||
|
0% {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scale-up {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(.2)
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scale-down {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(1.8)
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-top {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-100%)
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-bottom {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(100%)
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shake {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateX(0)
|
||||||
|
}
|
||||||
|
|
||||||
|
10% {
|
||||||
|
transform: translateX(-9px)
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
transform: translateX(8px)
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
transform: translateX(-7px)
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
transform: translateX(6px)
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translateX(-5px)
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
transform: translateX(4px)
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
transform: translateX(-3px)
|
||||||
|
}
|
||||||
|
|
||||||
|
80% {
|
||||||
|
transform: translateX(2px)
|
||||||
|
}
|
||||||
|
|
||||||
|
90% {
|
||||||
|
transform: translateX(-1px)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-left {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-100%)
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-right {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(100%)
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0)
|
||||||
|
}
|
||||||
|
}
|
||||||
65
Colorui-UniApp/colorui/components/cu-custom.vue
Normal file
65
Colorui-UniApp/colorui/components/cu-custom.vue
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
|
||||||
|
<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
|
||||||
|
<view class='action' @tap="BackPage" v-if="isBack">
|
||||||
|
<text class='icon-back'></text>
|
||||||
|
<slot name="backText"></slot>
|
||||||
|
</view>
|
||||||
|
<view class="content" :style="[{top:StatusBar + 'px'}]">
|
||||||
|
<slot name="content"></slot>
|
||||||
|
</view>
|
||||||
|
<slot name="right"></slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
StatusBar: this.StatusBar,
|
||||||
|
CustomBar: this.CustomBar
|
||||||
|
};
|
||||||
|
},
|
||||||
|
name: 'cu-custom',
|
||||||
|
computed: {
|
||||||
|
style() {
|
||||||
|
var StatusBar= this.StatusBar;
|
||||||
|
var CustomBar= this.CustomBar;
|
||||||
|
var bgImage = this.bgImage;
|
||||||
|
var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
|
||||||
|
if (this.bgImage) {
|
||||||
|
style = `${style}background-image:url(${bgImage});`;
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
bgColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
isBack: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
bgImage: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
BackPage() {
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -11,7 +11,7 @@
|
|||||||
初始化
|
初始化
|
||||||
==================== */
|
==================== */
|
||||||
body {
|
body {
|
||||||
background: #f1f1f1;
|
background-color: #f1f1f1;
|
||||||
font-size: 28upx;
|
font-size: 28upx;
|
||||||
color: 333;
|
color: 333;
|
||||||
font-family: Helvetica Neue, Helvetica, sans-serif;
|
font-family: Helvetica Neue, Helvetica, sans-serif;
|
||||||
@@ -72,7 +72,7 @@ image {
|
|||||||
|
|
||||||
image.loading::before {
|
image.loading::before {
|
||||||
content: "";
|
content: "";
|
||||||
background: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -248,7 +248,7 @@ radio .uni-radio-input::before {
|
|||||||
radio.radio[checked]::after,
|
radio.radio[checked]::after,
|
||||||
radio.radio .uni-radio-input-checked::after {
|
radio.radio .uni-radio-input-checked::after {
|
||||||
content: "";
|
content: "";
|
||||||
background: transparent;
|
background-color: transparent;
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 8px;
|
width: 8px;
|
||||||
@@ -260,11 +260,11 @@ radio.radio .uni-radio-input-checked::after {
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
border-radius: 200upx;
|
border-radius: 200upx;
|
||||||
/* #ifdef H5 */
|
/* #ifndef MP */
|
||||||
border: 7px solid #fff !important;
|
border: 7px solid #fff !important;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
|
|
||||||
/* #ifdef MP-WEIXIN */
|
/* #ifdef MP */
|
||||||
border: 8px solid #fff !important;
|
border: 8px solid #fff !important;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
}
|
}
|
||||||
@@ -883,6 +883,7 @@ button.icon.lg {
|
|||||||
padding: 0upx 16upx;
|
padding: 0upx 16upx;
|
||||||
height: 48upx;
|
height: 48upx;
|
||||||
font-family: Helvetica Neue, Helvetica, sans-serif;
|
font-family: Helvetica Neue, Helvetica, sans-serif;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-tag:not([class*="bg"]):not([class*="line"]) {
|
.cu-tag:not([class*="bg"]):not([class*="line"]) {
|
||||||
@@ -984,7 +985,7 @@ button.icon.lg {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cu-tag.badge:not([class*="bg-"]) {
|
.cu-tag.badge:not([class*="bg-"]) {
|
||||||
background: #dd514c;
|
background-color: #dd514c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-tag:empty:not([class*="icon"]) {
|
.cu-tag:empty:not([class*="icon"]) {
|
||||||
@@ -1014,7 +1015,7 @@ button.icon.lg {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: #ccc;
|
background-color: #ccc;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -1197,7 +1198,7 @@ button.icon.lg {
|
|||||||
margin: auto;
|
margin: auto;
|
||||||
width: 260upx;
|
width: 260upx;
|
||||||
height: 260upx;
|
height: 260upx;
|
||||||
background: #fff;
|
background-color: #fff;
|
||||||
border-radius: 10upx;
|
border-radius: 10upx;
|
||||||
box-shadow: 0 0 0upx 2000upx rgba(0, 0, 0, 0.5);
|
box-shadow: 0 0 0upx 2000upx rgba(0, 0, 0, 0.5);
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -1221,7 +1222,7 @@ button.icon.lg {
|
|||||||
.cu-load.load-modal::after {
|
.cu-load.load-modal::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: #fff;
|
background-color: #fff;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 200upx;
|
width: 200upx;
|
||||||
height: 200upx;
|
height: 200upx;
|
||||||
@@ -1309,282 +1310,292 @@ button.icon.lg {
|
|||||||
filter: grayscale(1);
|
filter: grayscale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.menu {
|
.cu-list+.cu-list {
|
||||||
display: block;
|
margin-top: 30upx
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list+.cu-list {
|
.cu-list>.cu-item {
|
||||||
margin-top: 30upx;
|
transition: all .6s ease-in-out 0s;
|
||||||
|
transform: translateX(0upx)
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list>.cu-item.move-cur {
|
||||||
|
transform: translateX(-260upx)
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list>.cu-item .move {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
width: 260upx;
|
||||||
|
height: 100%;
|
||||||
|
transform: translateX(100%)
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list>.cu-item .move view {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list.menu-avatar>.cu-item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
padding-right: 30upx;
|
||||||
|
height: 140upx;
|
||||||
|
background-color: #fff;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list.menu-avatar>.cu-item>.cu-avatar {
|
||||||
|
position: absolute;
|
||||||
|
left: 30upx
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list.menu-avatar>.cu-item .flex .text-cut {
|
||||||
|
max-width: 510upx
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list.menu-avatar>.cu-item .content {
|
||||||
|
position: absolute;
|
||||||
|
left: 146upx;
|
||||||
|
width: calc(100% - 96upx - 60upx - 120upx - 20upx);
|
||||||
|
line-height: 1.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list.menu-avatar>.cu-item .content>view:first-child {
|
||||||
|
font-size: 30upx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list.menu-avatar>.cu-item .content .cu-tag.sm {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 10upx;
|
||||||
|
height: 28upx;
|
||||||
|
font-size: 16upx;
|
||||||
|
line-height: 32upx
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list.menu-avatar>.cu-item .action {
|
||||||
|
width: 100upx;
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list.menu-avatar>.cu-item .action view+view {
|
||||||
|
margin-top: 10upx
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list.menu-avatar.comment>.cu-item {
|
||||||
|
padding-top: 30upx;
|
||||||
|
padding-bottom: 30upx;
|
||||||
|
padding-left: 120upx;
|
||||||
|
height: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list.menu-avatar.comment .cu-avatar {
|
||||||
|
align-self: flex-start
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.menu>.cu-item {
|
.cu-list.menu>.cu-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 100upx;
|
|
||||||
background: #fff;
|
|
||||||
padding: 0 30upx;
|
padding: 0 30upx;
|
||||||
|
min-height: 100upx;
|
||||||
|
background-color: #fff;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.menu>.cu-item::after {
|
.cu-list.menu>.cu-item:last-child:after {
|
||||||
content: " ";
|
border: none
|
||||||
width: 200%;
|
}
|
||||||
height: 200%;
|
|
||||||
|
.cu-list.menu>.cu-item:after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
border-radius: inherit;
|
|
||||||
transform: scale(0.5);
|
|
||||||
transform-origin: 0 0;
|
|
||||||
pointer-events: none;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
border-bottom: 1upx solid #ddd;
|
border-bottom: 1upx solid #ddd;
|
||||||
|
border-radius: inherit;
|
||||||
|
content: " ";
|
||||||
|
transform: scale(.5);
|
||||||
|
transform-origin: 0 0;
|
||||||
|
pointer-events: none
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.menu.sm-border>.cu-item::after {
|
.cu-list.menu>.cu-item.grayscale {
|
||||||
width: calc(200% - 120upx);
|
background-color: #f5f5f5
|
||||||
left: 30upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cu-list.menu>.cu-item:last-child::after {
|
|
||||||
border: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.menu>.cu-item.cur {
|
.cu-list.menu>.cu-item.cur {
|
||||||
background-color: #fcf7e9;
|
background-color: #fcf7e9
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.menu-avatar>.cu-item {
|
.cu-list.menu>.cu-item.arrow {
|
||||||
padding-left: 140upx;
|
padding-right: 90upx
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.menu-avatar>.cu-item .cu-avatar {
|
.cu-list.menu>.cu-item.arrow:before {
|
||||||
left: 30upx;
|
position: absolute;
|
||||||
}
|
top: 0;
|
||||||
|
right: 30upx;
|
||||||
.cu-list.menu>.cu-item .content {
|
bottom: 0;
|
||||||
line-height: 1.6em;
|
display: block;
|
||||||
flex: 1;
|
margin: auto;
|
||||||
font-size: 30upx;
|
width: 30upx;
|
||||||
}
|
height: 30upx;
|
||||||
|
color: var(--grey);
|
||||||
.cu-list.menu>.cu-item .content>view:first-child {
|
content: "\e6a3";
|
||||||
display: flex;
|
text-align: center;
|
||||||
align-items: center;
|
font-size: 34upx;
|
||||||
|
font-family: cuIcon;
|
||||||
|
line-height: 30upx
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.menu>.cu-item button.content {
|
.cu-list.menu>.cu-item button.content {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
justify-content: flex-start;
|
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
justify-content: flex-start
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.menu>.cu-item button.content::after {
|
.cu-list.menu>.cu-item button.content:after {
|
||||||
display: none;
|
display: none
|
||||||
}
|
|
||||||
|
|
||||||
.cu-list.menu>.cu-item .content>text[class*="icon"] {
|
|
||||||
margin-right: 10upx;
|
|
||||||
display: inline-block;
|
|
||||||
width: 1.6em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cu-list.menu>.cu-item .content>image {
|
|
||||||
margin-right: 10upx;
|
|
||||||
display: inline-block;
|
|
||||||
width: 1.6em;
|
|
||||||
height: 1.6em;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cu-list.menu-avatar>.cu-item .action {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cu-list.menu-avatar>.cu-item .action view+view {
|
|
||||||
margin-top: 10upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cu-list.menu>.cu-item.grayscale {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cu-list.menu>.cu-item .action .cu-tag:empty {
|
|
||||||
right: 10upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cu-list.menu>.cu-item.arrow {
|
|
||||||
padding-right: 90upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cu-list.menu>.cu-item.arrow::before {
|
|
||||||
font-family: "cuIcon";
|
|
||||||
display: block;
|
|
||||||
content: "\e6a3";
|
|
||||||
position: absolute;
|
|
||||||
font-size: 34upx;
|
|
||||||
color: var(--grey);
|
|
||||||
line-height: 30upx;
|
|
||||||
height: 30upx;
|
|
||||||
width: 30upx;
|
|
||||||
text-align: center;
|
|
||||||
top: 0upx;
|
|
||||||
bottom: 0;
|
|
||||||
right: 30upx;
|
|
||||||
margin: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.menu>.cu-item .cu-avatar-group .cu-avatar {
|
.cu-list.menu>.cu-item .cu-avatar-group .cu-avatar {
|
||||||
border-color: #fff;
|
border-color: #fff
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.card-menu {
|
.cu-list.menu>.cu-item .content>view:first-child {
|
||||||
margin-left: 30upx;
|
display: flex;
|
||||||
margin-right: 30upx;
|
align-items: center
|
||||||
border-radius: 20upx;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.menu-avatar>.cu-item {
|
.cu-list.menu>.cu-item .content>text[class*=icon] {
|
||||||
padding-left: 140upx;
|
display: inline-block;
|
||||||
height: 140upx;
|
margin-right: 10upx;
|
||||||
|
width: 1.6em;
|
||||||
|
text-align: center
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.menu-avatar>.cu-item>.cu-avatar {
|
.cu-list.menu>.cu-item .content>image {
|
||||||
position: absolute;
|
display: inline-block;
|
||||||
left: 30upx;
|
margin-right: 10upx;
|
||||||
|
width: 1.6em;
|
||||||
|
height: 1.6em;
|
||||||
|
vertical-align: middle
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.menu-avatar>.cu-item .content view:first-child .text-cut {
|
.cu-list.menu>.cu-item .content {
|
||||||
max-width: calc(750upx - 320upx);
|
font-size: 30upx;
|
||||||
}
|
line-height: 1.6em;
|
||||||
|
flex: 1
|
||||||
.cu-list.menu-avatar>.cu-item .flex .text-cut {
|
|
||||||
max-width: calc(750upx - 240upx);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cu-list.menu-avatar.comment>.cu-item {
|
|
||||||
height: auto;
|
|
||||||
padding-top: 30upx;
|
|
||||||
padding-bottom: 30upx;
|
|
||||||
padding-left: 120upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cu-list.menu-avatar.comment .cu-avatar {
|
|
||||||
align-self: flex-start;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.menu>.cu-item .content .cu-tag.sm {
|
.cu-list.menu>.cu-item .content .cu-tag.sm {
|
||||||
font-size: 16upx;
|
display: inline-block;
|
||||||
line-height: 32upx;
|
|
||||||
margin-left: 10upx;
|
margin-left: 10upx;
|
||||||
height: 28upx;
|
height: 28upx;
|
||||||
display: inline-block;
|
font-size: 16upx;
|
||||||
|
line-height: 32upx
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.grid {
|
.cu-list.menu>.cu-item .action .cu-tag:empty {
|
||||||
text-align: center;
|
right: 10upx
|
||||||
background: #fff;
|
}
|
||||||
|
|
||||||
|
.cu-list.menu {
|
||||||
|
display: block;
|
||||||
|
overflow: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list.menu.sm-border>.cu-item:after {
|
||||||
|
left: 30upx;
|
||||||
|
width: calc(200% - 120upx)
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.grid>.cu-item {
|
.cu-list.grid>.cu-item {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 20upx 0 30upx;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
padding: 20upx 0 30upx;
|
||||||
transition-duration: 0s;
|
transition-duration: 0s;
|
||||||
|
flex-direction: column
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.grid>.cu-item [class*="icon"] {
|
.cu-list.grid>.cu-item:after {
|
||||||
display: block;
|
position: absolute;
|
||||||
width: 100%;
|
top: 0;
|
||||||
position: relative;
|
left: 0;
|
||||||
font-size: 48upx;
|
box-sizing: border-box;
|
||||||
margin-top: 20upx;
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
border-right: 1px solid rgba(0, 0, 0, .1);
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, .1);
|
||||||
|
border-radius: inherit;
|
||||||
|
content: " ";
|
||||||
|
transform: scale(.5);
|
||||||
|
transform-origin: 0 0;
|
||||||
|
pointer-events: none
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.grid>.cu-item text {
|
.cu-list.grid>.cu-item text {
|
||||||
display: block;
|
display: block;
|
||||||
color: #888;
|
|
||||||
margin-top: 10upx;
|
margin-top: 10upx;
|
||||||
line-height: 40upx;
|
color: #888;
|
||||||
font-size: 26upx;
|
font-size: 26upx;
|
||||||
|
line-height: 40upx
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-list.grid>.cu-item [class*=icon] {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
margin-top: 20upx;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 48upx
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.grid>.cu-item .cu-tag {
|
.cu-list.grid>.cu-item .cu-tag {
|
||||||
left: 50%;
|
|
||||||
right: auto;
|
right: auto;
|
||||||
margin-left: 20upx;
|
left: 50%;
|
||||||
|
margin-left: 20upx
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.grid>.cu-item::after {
|
.cu-list.grid {
|
||||||
content: " ";
|
background-color: #fff;
|
||||||
width: 200%;
|
text-align: center
|
||||||
height: 200%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
border-radius: inherit;
|
|
||||||
transform: scale(0.5);
|
|
||||||
transform-origin: 0 0;
|
|
||||||
pointer-events: none;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-right: 1px solid rgba(0, 0, 0, 0.1);
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cu-list.grid.col-3>.cu-item:nth-child(3n)::after {
|
|
||||||
border-right-width: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cu-list.grid.col-4>.cu-item:nth-child(4n)::after {
|
|
||||||
border-right-width: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cu-list.grid.col-5>.cu-item:nth-child(5n)::after {
|
|
||||||
border-right-width: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cu-list.grid.no-border {
|
|
||||||
padding: 20upx 10upx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.grid.no-border>.cu-item {
|
.cu-list.grid.no-border>.cu-item {
|
||||||
padding-top: 10upx;
|
padding-top: 10upx;
|
||||||
padding-bottom: 20upx;
|
padding-bottom: 20upx
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list.grid.no-border>.cu-item::after {
|
.cu-list.grid.no-border>.cu-item:after {
|
||||||
border: none;
|
border: none
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list>.cu-item {
|
.cu-list.grid.no-border {
|
||||||
transform: translateX(0upx);
|
padding: 20upx 10upx
|
||||||
transition: all 0.6s ease-in-out 0s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list>.cu-item .move {
|
.cu-list.grid.col-3>.cu-item:nth-child(3n):after,
|
||||||
display: flex;
|
.cu-list.grid.col-4>.cu-item:nth-child(4n):after,
|
||||||
width: 260upx;
|
.cu-list.grid.col-5>.cu-item:nth-child(5n):after {
|
||||||
height: 100%;
|
border-right-width: 0
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list>.cu-item.move-cur {
|
.cu-list.card-menu {
|
||||||
transform: translateX(-260upx);
|
overflow: hidden;
|
||||||
|
margin-right: 30upx;
|
||||||
|
margin-left: 30upx;
|
||||||
|
border-radius: 20upx
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-list>.cu-item .move view {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==================
|
/* ==================
|
||||||
操作条
|
操作条
|
||||||
@@ -1734,7 +1745,7 @@ button.icon.lg {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cu-bar .search-form {
|
.cu-bar .search-form {
|
||||||
background: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
line-height: 64upx;
|
line-height: 64upx;
|
||||||
height: 64upx;
|
height: 64upx;
|
||||||
font-size: 24upx;
|
font-size: 24upx;
|
||||||
@@ -1975,7 +1986,7 @@ button.icon.lg {
|
|||||||
|
|
||||||
.cu-custom .cu-bar {
|
.cu-custom .cu-bar {
|
||||||
min-height: 0px;
|
min-height: 0px;
|
||||||
/* #ifndef H5 */
|
/* #ifdef MP */
|
||||||
padding-right: 220upx;
|
padding-right: 220upx;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
box-shadow: 0upx 0upx 0upx;
|
box-shadow: 0upx 0upx 0upx;
|
||||||
@@ -2060,7 +2071,7 @@ button.icon.lg {
|
|||||||
|
|
||||||
.cu-timeline {
|
.cu-timeline {
|
||||||
display: block;
|
display: block;
|
||||||
background: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cu-timeline .cu-time {
|
.cu-timeline .cu-time {
|
||||||
@@ -2088,7 +2099,7 @@ button.icon.lg {
|
|||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 1upx;
|
width: 1upx;
|
||||||
background: #ddd;
|
background-color: #ddd;
|
||||||
left: 60upx;
|
left: 60upx;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -2101,7 +2112,7 @@ button.icon.lg {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 36upx;
|
top: 36upx;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
background: #fff;
|
background-color: #fff;
|
||||||
width: 50upx;
|
width: 50upx;
|
||||||
height: 50upx;
|
height: 50upx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -2115,7 +2126,7 @@ button.icon.lg {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cu-timeline>.cu-item[class*="icon"]::before {
|
.cu-timeline>.cu-item[class*="icon"]::before {
|
||||||
background: #fff;
|
background-color: #fff;
|
||||||
width: 50upx;
|
width: 50upx;
|
||||||
height: 50upx;
|
height: 50upx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -2132,7 +2143,7 @@ button.icon.lg {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cu-timeline>.cu-item>.content:not([class*="bg-"]) {
|
.cu-timeline>.cu-item>.content:not([class*="bg-"]) {
|
||||||
background: #f1f1f1;
|
background-color: #f1f1f1;
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2185,7 +2196,7 @@ button.icon.lg {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cu-chat .cu-item>.main .content:not([class*="bg-"]) {
|
.cu-chat .cu-item>.main .content:not([class*="bg-"]) {
|
||||||
background: #fff;
|
background-color: #fff;
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2279,7 +2290,7 @@ button.icon.lg {
|
|||||||
|
|
||||||
.cu-card>.cu-item {
|
.cu-card>.cu-item {
|
||||||
display: block;
|
display: block;
|
||||||
background: #fff;
|
background-color: #fff;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 10upx;
|
border-radius: 10upx;
|
||||||
margin: 30upx;
|
margin: 30upx;
|
||||||
@@ -2358,7 +2369,7 @@ button.icon.lg {
|
|||||||
|
|
||||||
/* card.dynamic>.cu-item .comment {
|
/* card.dynamic>.cu-item .comment {
|
||||||
padding: 20upx;
|
padding: 20upx;
|
||||||
background: #f1f1f1;
|
background-color: #f1f1f1;
|
||||||
margin: 0 30upx 30upx;
|
margin: 0 30upx 30upx;
|
||||||
border-radius: 6upx;
|
border-radius: 6upx;
|
||||||
} */
|
} */
|
||||||
@@ -2410,7 +2421,7 @@ button.icon.lg {
|
|||||||
==================== */
|
==================== */
|
||||||
|
|
||||||
.cu-form-group {
|
.cu-form-group {
|
||||||
background: #fff;
|
background-color: #fff;
|
||||||
padding: 1upx 30upx;
|
padding: 1upx 30upx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -2569,7 +2580,7 @@ button.icon.lg {
|
|||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
width: 680upx;
|
width: 680upx;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
background: #f8f8f8;
|
background-color: #f8f8f8;
|
||||||
border-radius: 10upx;
|
border-radius: 10upx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@@ -2622,7 +2633,7 @@ button.icon.lg {
|
|||||||
|
|
||||||
swiper.square-dot .wx-swiper-dot,
|
swiper.square-dot .wx-swiper-dot,
|
||||||
swiper.square-dot .uni-swiper-dot {
|
swiper.square-dot .uni-swiper-dot {
|
||||||
background: #fff;
|
background-color: #fff;
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
width: 10upx;
|
width: 10upx;
|
||||||
height: 10upx;
|
height: 10upx;
|
||||||
@@ -2656,7 +2667,7 @@ swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active::after {
|
|||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
background: #fff;
|
background-color: #fff;
|
||||||
border-radius: 20upx;
|
border-radius: 20upx;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2725,7 +2736,7 @@ swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active {
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
transition: all 0.3s ease-in 0s;
|
transition: all 0.2s ease-in 0s;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -3584,101 +3595,101 @@ scroll-view.cu-steps .cu-item {
|
|||||||
|
|
||||||
.bg-red.light {
|
.bg-red.light {
|
||||||
color: var(--red);
|
color: var(--red);
|
||||||
background: #fadbd9;
|
background-color: #fadbd9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-orange.light {
|
.bg-orange.light {
|
||||||
color: var(--orange);
|
color: var(--orange);
|
||||||
background: #fde6d2;
|
background-color: #fde6d2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-yellow.light {
|
.bg-yellow.light {
|
||||||
color: var(--yellow);
|
color: var(--yellow);
|
||||||
background: #fef2ce;
|
background-color: #fef2ce;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-olive.light {
|
.bg-olive.light {
|
||||||
color: var(--olive);
|
color: var(--olive);
|
||||||
background: #e8f4d9;
|
background-color: #e8f4d9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-green.light {
|
.bg-green.light {
|
||||||
color: var(--green);
|
color: var(--green);
|
||||||
background: #d7f0db;
|
background-color: #d7f0db;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-cyan.light {
|
.bg-cyan.light {
|
||||||
color: var(--cyan);
|
color: var(--cyan);
|
||||||
background: #d2f1f0;
|
background-color: #d2f1f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-blue.light {
|
.bg-blue.light {
|
||||||
color: var(--blue);
|
color: var(--blue);
|
||||||
background: #cce6ff;
|
background-color: #cce6ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-purple.light {
|
.bg-purple.light {
|
||||||
color: var(--purple);
|
color: var(--purple);
|
||||||
background: #e1d7f0;
|
background-color: #e1d7f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-mauve.light {
|
.bg-mauve.light {
|
||||||
color: var(--mauve);
|
color: var(--mauve);
|
||||||
background: #ebd4ef;
|
background-color: #ebd4ef;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-pink.light {
|
.bg-pink.light {
|
||||||
color: var(--pink);
|
color: var(--pink);
|
||||||
background: #f9d7ea;
|
background-color: #f9d7ea;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-brown.light {
|
.bg-brown.light {
|
||||||
color: var(--brown);
|
color: var(--brown);
|
||||||
background: #ede1d9;
|
background-color: #ede1d9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-grey.light {
|
.bg-grey.light {
|
||||||
color: var(--grey);
|
color: var(--grey);
|
||||||
background: #e7ebed;
|
background-color: #e7ebed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-gray.light {
|
.bg-gray.light {
|
||||||
color: #666;
|
color: #666;
|
||||||
background: #fadbd9;
|
background-color: #fadbd9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-gray.light {
|
.bg-gray.light {
|
||||||
color: #888;
|
color: #888;
|
||||||
background: #f1f1f1;
|
background-color: #f1f1f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-gradual-red {
|
.bg-gradual-red {
|
||||||
background-image:var(--gradualRed);
|
background-image: var(--gradualRed);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-gradual-orange {
|
.bg-gradual-orange {
|
||||||
background-image:var(--gradualOrange);
|
background-image: var(--gradualOrange);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-gradual-green {
|
.bg-gradual-green {
|
||||||
background-image:var(--gradualGreen);
|
background-image: var(--gradualGreen);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-gradual-purple {
|
.bg-gradual-purple {
|
||||||
background-image:var(--gradualPurple);
|
background-image: var(--gradualPurple);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-gradual-pink {
|
.bg-gradual-pink {
|
||||||
background-image:var(--gradualPink);
|
background-image: var(--gradualPink);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-gradual-blue {
|
.bg-gradual-blue {
|
||||||
background-image:var(--gradualBlue);
|
background-image: var(--gradualBlue);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
@@ -7,8 +7,11 @@ Vue.component('basics',basics)
|
|||||||
import components from './pages/component/home.vue'
|
import components from './pages/component/home.vue'
|
||||||
Vue.component('components',components)
|
Vue.component('components',components)
|
||||||
|
|
||||||
import custom from './pages/custom/custom.vue'
|
import plugin from './pages/plugin/home.vue'
|
||||||
Vue.component('custom',custom)
|
Vue.component('plugin',plugin)
|
||||||
|
|
||||||
|
import cuCustom from './colorui/components/cu-custom.vue'
|
||||||
|
Vue.component('cu-custom',cuCustom)
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
@@ -18,3 +21,8 @@ const app = new Vue({
|
|||||||
...App
|
...App
|
||||||
})
|
})
|
||||||
app.$mount()
|
app.$mount()
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,161 +1,181 @@
|
|||||||
{
|
{
|
||||||
"pages" : [
|
"pages": [
|
||||||
//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||||
{
|
{
|
||||||
"path" : "pages/index/index",
|
"path": "pages/index/index",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "主页面"
|
"navigationBarTitleText": "主页面"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/basics/home",
|
"path": "pages/basics/home",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "基础元素"
|
"navigationBarTitleText": "基础元素"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/basics/layout",
|
"path": "pages/basics/layout",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "布局"
|
"navigationBarTitleText": "布局"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/basics/background",
|
"path": "pages/basics/background",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "背景"
|
"navigationBarTitleText": "背景"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/basics/text",
|
"path": "pages/basics/text",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "文本"
|
"navigationBarTitleText": "文本"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/basics/icon",
|
"path": "pages/basics/icon",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "图标"
|
"navigationBarTitleText": "图标"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/basics/button",
|
"path": "pages/basics/button",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "按钮"
|
"navigationBarTitleText": "按钮"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/basics/design",
|
"path": "pages/basics/design",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "按钮/设计"
|
"navigationBarTitleText": "按钮/设计"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/basics/tag",
|
"path": "pages/basics/tag",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "标签"
|
"navigationBarTitleText": "标签"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/basics/avatar",
|
"path": "pages/basics/avatar",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "头像"
|
"navigationBarTitleText": "头像"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/basics/progress",
|
"path": "pages/basics/progress",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "进度条"
|
"navigationBarTitleText": "进度条"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/basics/shadow",
|
"path": "pages/basics/shadow",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "边框阴影"
|
"navigationBarTitleText": "边框阴影"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/basics/loading",
|
"path": "pages/basics/loading",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "加载"
|
"navigationBarTitleText": "加载"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/component/home",
|
"path": "pages/component/home",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "交互组件"
|
"navigationBarTitleText": "交互组件"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/component/bar",
|
"path": "pages/component/bar",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "操作条"
|
"navigationBarTitleText": "操作条"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/custom/custom",
|
"path": "pages/component/nav",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "列表"
|
"navigationBarTitleText": "导航栏"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/component/nav",
|
"path": "pages/component/list",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "导航栏"
|
"navigationBarTitleText": "列表"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/component/list",
|
"path": "pages/component/card",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "列表"
|
"navigationBarTitleText": "卡片"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/component/card",
|
"path": "pages/component/form",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "卡片"
|
"navigationBarTitleText": "表单"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/component/form",
|
"path": "pages/component/timeline",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "表单"
|
"navigationBarTitleText": "时间轴"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/component/timeline",
|
"path": "pages/component/chat",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "时间轴"
|
"navigationBarTitleText": "聊天"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/component/chat",
|
"path": "pages/component/swiper",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "聊天"
|
"navigationBarTitleText": "轮播"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/component/swiper",
|
"path": "pages/component/modal",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "轮播"
|
"navigationBarTitleText": "模态框"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/component/modal",
|
"path": "pages/component/steps",
|
||||||
"style" : {
|
"style": {
|
||||||
"navigationBarTitleText" : "模态框"
|
"navigationBarTitleText": "步骤条"
|
||||||
}
|
}
|
||||||
},
|
}, {
|
||||||
{
|
"path": "pages/plugin/home",
|
||||||
"path" : "pages/component/steps",
|
"style": {
|
||||||
"style" : {
|
"navigationBarTitleText": "插件扩展"
|
||||||
"navigationBarTitleText" : "步骤条"
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/plugin/indexes",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "索引列表"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/plugin/animation",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "微动画"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/plugin/drawer",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "全屏抽屉"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/plugin/verticalnav",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "垂直导航"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"globalStyle" : {
|
"globalStyle": {
|
||||||
"navigationBarBackgroundColor" : "#39b54a",
|
"navigationBarBackgroundColor": "#39b54a",
|
||||||
"navigationBarTitleText" : "ColorUi for UniApp",
|
"navigationBarTitleText": "ColorUi for UniApp",
|
||||||
"navigationStyle" : "custom",
|
"navigationStyle": "custom",
|
||||||
"navigationBarTextStyle" : "white"
|
"navigationBarTextStyle": "white"
|
||||||
}
|
},
|
||||||
|
"usingComponts":true
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom>头像</custom>
|
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">头像</block></cu-custom>
|
||||||
<view class="cu-bar bg-white">
|
<view class="cu-bar bg-white">
|
||||||
<view class="action">
|
<view class="action">
|
||||||
<text class="icon-title text-blue"></text>头像形状
|
<text class="icon-title text-blue"></text>头像形状
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom>背景</custom>
|
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">背景</block></cu-custom>
|
||||||
<view class="cu-bar bg-white solid-bottom">
|
<view class="cu-bar bg-white solid-bottom">
|
||||||
<view class="action">
|
<view class="action">
|
||||||
<text class='icon-title text-blue'></text>深色背景
|
<text class='icon-title text-blue'></text>深色背景
|
||||||
@@ -85,7 +85,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- #ifdef MP-WEIXIN -->
|
<!-- #ifdef MP -->
|
||||||
<view class="cu-bar bg-white margin-top">
|
<view class="cu-bar bg-white margin-top">
|
||||||
<view class="action">
|
<view class="action">
|
||||||
<text class="icon-title text-blue"></text>视频背景
|
<text class="icon-title text-blue"></text>视频背景
|
||||||
|
|||||||
@@ -1,16 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom>按钮
|
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">按钮</block></cu-custom>
|
||||||
<block slot="right">
|
<view class="cu-bar bg-white solid-bottom">
|
||||||
|
<view class="action">
|
||||||
|
<text class="icon-title text-blue"></text>按钮形状
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
<navigator class="action" url="design" hover-class="none">
|
<navigator class="action" url="design" hover-class="none">
|
||||||
<text class="icon-skinfill"></text>
|
<text class="icon-skinfill"></text>
|
||||||
<text class="text-df">设计</text>
|
<text class="text-df">设计</text>
|
||||||
</navigator>
|
</navigator>
|
||||||
</block>
|
|
||||||
</custom>
|
|
||||||
<view class="cu-bar bg-white solid-bottom">
|
|
||||||
<view class="action">
|
|
||||||
<text class="icon-title text-blue"></text>按钮形状
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="padding flex flex-wrap justify-between align-center bg-white">
|
<view class="padding flex flex-wrap justify-between align-center bg-white">
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom> 按钮 / 设计</custom>
|
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content"> 按钮 / 设计</block></cu-custom>
|
||||||
<view class="padding-xl">
|
<view class="padding-xl">
|
||||||
<view class="box bg-white text-center radius">
|
<view class="box bg-white text-center radius">
|
||||||
<button class="cu-btn" :class="[border?bordersize?'lines-' + color:'line-' + color:'bg-'+ color,round?'round':'',size,shadow?'shadow':'']">我是一个按钮</button>
|
<button class="cu-btn" :class="[border?bordersize?'lines-' + color:'line-' + color:'bg-'+ color,round?'round':'',size,shadow?'shadow':'']">我是一个按钮</button>
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<image src="https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358228-assets/web-upload/e256b4ce-d9a4-488b-8da2-032747213982.png" mode="widthFix" class="response"></image>
|
<scroll-view scroll-y class="page">
|
||||||
|
<image src="https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358228-assets/web-upload/e256b4ce-d9a4-488b-8da2-032747213982.png"
|
||||||
|
mode="widthFix" class="response"></image>
|
||||||
<view class="nav-list">
|
<view class="nav-list">
|
||||||
<navigator hover-class="none" :url="'/pages/basics/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
|
<navigator hover-class="none" :url="'/pages/basics/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
|
||||||
:style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
|
:style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
|
||||||
@@ -9,6 +11,8 @@
|
|||||||
<text :class="'icon-' + item.icon"></text>
|
<text :class="'icon-' + item.icon"></text>
|
||||||
</navigator>
|
</navigator>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="cu-tabbar-height"></view>
|
||||||
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -83,5 +87,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.page {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom>图标</custom>
|
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">图标</block></cu-custom>
|
||||||
<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
|
<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
|
||||||
<view class="search-form round">
|
<view class="search-form round">
|
||||||
<text class="icon-search"></text>
|
<text class="icon-search"></text>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom>布局</custom>
|
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">布局</block></cu-custom>
|
||||||
<scroll-view scroll-x class="bg-white nav text-center fixed" :style="[{top:CustomBar + 'px'}]">
|
<scroll-view scroll-x class="bg-white nav text-center fixed" :style="[{top:CustomBar + 'px'}]">
|
||||||
<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"
|
<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"
|
||||||
:data-id="index">
|
:data-id="index">
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom>加载
|
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">加载</block>
|
||||||
<block slot="right">
|
<block slot="right">
|
||||||
<view class="action">
|
<view class="action">
|
||||||
<view class="cu-load load-icon" :class="!isLoad?'loading':'over'"></view>
|
<view class="cu-load load-icon" :class="!isLoad?'loading':'over'"></view>
|
||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
</custom>
|
</cu-custom>
|
||||||
<view class="cu-bar bg-white">
|
<view class="cu-bar bg-white">
|
||||||
<view class="action">
|
<view class="action">
|
||||||
<text class="icon-title text-blue"></text>背景
|
<text class="icon-title text-blue"></text>背景
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom>进度条</custom>
|
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">进度条</block></cu-custom>
|
||||||
<view class="cu-bar bg-white solid-bottom">
|
<view class="cu-bar bg-white solid-bottom">
|
||||||
<view class="action">
|
<view class="action">
|
||||||
<text class="icon-title text-blue"></text>进度条形状
|
<text class="icon-title text-blue"></text>进度条形状
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom>边框阴影</custom>
|
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">边框阴影</block></cu-custom>
|
||||||
<view class="cu-bar bg-white solid-bottom">
|
<view class="cu-bar bg-white solid-bottom">
|
||||||
<view class="action">
|
<view class="action">
|
||||||
<text class="icon-title text-blue"></text>边框
|
<text class="icon-title text-blue"></text>边框
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom>标签</custom>
|
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">标签</block></cu-custom>
|
||||||
<view class="cu-bar bg-white solid-bottom">
|
<view class="cu-bar bg-white solid-bottom">
|
||||||
<view class='action'>
|
<view class='action'>
|
||||||
<text class='icon-title text-blue'></text>标签形状
|
<text class='icon-title text-blue'></text>标签形状
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom>文本</custom>
|
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">文本</block></cu-custom>
|
||||||
<view class="cu-bar bg-white solid-bottom">
|
<view class="cu-bar bg-white solid-bottom">
|
||||||
<view class='action'>
|
<view class='action'>
|
||||||
<text class='icon-title text-blue'></text>文字大小
|
<text class='icon-title text-blue'></text>文字大小
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom bgColor="bg-gradual-pink">操作条</custom>
|
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">操作条</block></cu-custom>
|
||||||
|
|
||||||
<view class="cu-bar bg-white margin-top">
|
<view class="cu-bar bg-white margin-top">
|
||||||
<view class="action">
|
<view class="action">
|
||||||
<text class="icon-title text-green"></text>
|
<text class="icon-title text-green"></text>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom bgColor="bg-gradual-pink">卡片</custom>
|
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">卡片</block></cu-custom>
|
||||||
<view class="cu-bar bg-white solid-bottom">
|
<view class="cu-bar bg-white solid-bottom">
|
||||||
<view class="action">
|
<view class="action">
|
||||||
<text class="icon-titles text-orange"></text> 案例类卡片
|
<text class="icon-titles text-orange"></text> 案例类卡片
|
||||||
@@ -70,7 +70,7 @@
|
|||||||
<text class="icon-messagefill margin-lr-xs"></text> 30
|
<text class="icon-messagefill margin-lr-xs"></text> 30
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="cu-list menu menu-avatar comment solids-top">
|
<view class="cu-list menu-avatar comment solids-top">
|
||||||
<view class="cu-item">
|
<view class="cu-item">
|
||||||
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
|
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom bgColor="bg-gradual-pink">聊天</custom>
|
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">聊天</block></cu-custom>
|
||||||
<view class="cu-chat">
|
<view class="cu-chat">
|
||||||
<view class="cu-item self">
|
<view class="cu-item self">
|
||||||
<view class="main">
|
<view class="main">
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom bgColor="bg-gradual-pink">表单</custom>
|
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">表单</block></cu-custom>
|
||||||
<form>
|
<form>
|
||||||
<view class="cu-form-group margin-top">
|
<view class="cu-form-group margin-top">
|
||||||
<view class="title">邮件</view>
|
<view class="title">邮件</view>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
|
<scroll-view scroll-y class="page">
|
||||||
<image src="/static/componentBg.png" mode="widthFix" class="response"></image>
|
<image src="/static/componentBg.png" mode="widthFix" class="response"></image>
|
||||||
<view class="nav-list">
|
<view class="nav-list">
|
||||||
<navigator hover-class='none' :url="'/pages/component/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
|
<navigator hover-class='none' :url="'/pages/component/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
|
||||||
@@ -9,6 +10,8 @@
|
|||||||
<text :class="'icon-' + item.icon"></text>
|
<text :class="'icon-' + item.icon"></text>
|
||||||
</navigator>
|
</navigator>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="cu-tabbar-height"></view>
|
||||||
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -83,5 +86,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.page {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,6 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom bgColor="bg-gradual-pink">列表</custom>
|
<cu-custom bgColor="bg-gradual-pink" :isBack="true">
|
||||||
|
<block slot="backText">返回</block>
|
||||||
|
<block slot="content">列表</block>
|
||||||
|
</cu-custom>
|
||||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||||
<view class="action">
|
<view class="action">
|
||||||
<text class="icon-title text-orange "></text> 宫格列表
|
<text class="icon-title text-orange "></text> 宫格列表
|
||||||
@@ -171,7 +174,7 @@
|
|||||||
<text class="icon-title text-orange "></text> 消息列表
|
<text class="icon-title text-orange "></text> 消息列表
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="cu-list menu menu-avatar">
|
<view class="cu-list menu-avatar">
|
||||||
<view class="cu-item">
|
<view class="cu-item">
|
||||||
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
|
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
@@ -209,9 +212,8 @@
|
|||||||
<view class="cu-item ">
|
<view class="cu-item ">
|
||||||
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
|
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<view>莫甘娜</view>
|
<view class="text-pink"><text class="text-cut">莫甘娜</text></view>
|
||||||
<view class="text-gray text-sm">
|
<view class="text-gray text-sm flex"> <text class="text-cut">凯尔，你被自己的光芒变的盲目！</text></view>
|
||||||
凯尔，你被自己的光芒变的盲目！</view>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="action">
|
<view class="action">
|
||||||
<view class="text-grey text-xs">22:20</view>
|
<view class="text-grey text-xs">22:20</view>
|
||||||
@@ -221,9 +223,10 @@
|
|||||||
<view class="cu-item grayscale">
|
<view class="cu-item grayscale">
|
||||||
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
|
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<view><text class="text-cut">伊泽瑞尔</text> <view class="cu-tag round bg-orange sm">断开连接...</view></view>
|
<view><text class="text-cut">伊泽瑞尔</text>
|
||||||
<view class="text-gray text-sm">
|
<view class="cu-tag round bg-orange sm">断开连接...</view>
|
||||||
等我回来一个打十个</view>
|
</view>
|
||||||
|
<view class="text-gray text-sm flex"> <text class="text-cut"> 等我回来一个打十个</text></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="action">
|
<view class="action">
|
||||||
<view class="text-grey text-xs">22:20</view>
|
<view class="text-grey text-xs">22:20</view>
|
||||||
@@ -239,9 +242,8 @@
|
|||||||
<text class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</text>
|
<text class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</text>
|
||||||
<view class="cu-tag round bg-orange sm">6人</view>
|
<view class="cu-tag round bg-orange sm">6人</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="text-gray text-sm">
|
<view class="text-gray text-sm flex">
|
||||||
伊泽瑞尔：
|
<text class="text-cut"> 伊泽瑞尔：<text class="icon-locationfill text-orange margin-right-xs"></text> 传送中...</text></view>
|
||||||
<text class="icon-locationfill text-orange margin-right-xs"></text> 传送中...</view>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="action">
|
<view class="action">
|
||||||
<view class="text-grey text-xs">22:20</view>
|
<view class="text-grey text-xs">22:20</view>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom bgColor="bg-gradual-pink">模态窗口</custom>
|
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">模态窗口</block></cu-custom>
|
||||||
<view class="cu-bar bg-white margin-top">
|
<view class="cu-bar bg-white margin-top">
|
||||||
<view class="action">
|
<view class="action">
|
||||||
<text class="icon-title text-orange "></text> 普通窗口
|
<text class="icon-title text-orange "></text> 普通窗口
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom bgColor="bg-gradual-pink">导航栏</custom>
|
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">导航栏</block></cu-custom>
|
||||||
<view v-for="(item,index) in 10" :key="index" v-if="index==TabCur" class="bg-grey padding margin text-center">
|
<view v-for="(item,index) in 10" :key="index" v-if="index==TabCur" class="bg-grey padding margin text-center">
|
||||||
Tab{{index}}
|
Tab{{index}}
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom bgColor="bg-gradual-pink">步骤条</custom>
|
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">步骤条</block></cu-custom>
|
||||||
<view class="cu-bar bg-white solid-bottom">
|
<view class="cu-bar bg-white solid-bottom">
|
||||||
<view class="action">
|
<view class="action">
|
||||||
<text class="icon-title text-orange"></text> 基本用法
|
<text class="icon-title text-orange"></text> 基本用法
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom bgColor="bg-gradual-pink">轮播图</custom>
|
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block>
|
||||||
|
<block slot="content">轮播图</block>
|
||||||
|
</cu-custom>
|
||||||
<view class="cu-bar bg-white">
|
<view class="cu-bar bg-white">
|
||||||
<view class="action">
|
<view class="action">
|
||||||
<text class="icon-title text-pink"></text> 全屏限高轮播
|
<text class="icon-title text-pink"></text> 全屏限高轮播
|
||||||
@@ -37,19 +39,13 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
|
<view class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
|
||||||
<!-- #ifdef H5 -->
|
<view class="tower-item" :class="item.zIndex==1?'none':''" v-for="(item,index) in swiperList" :key="index" :style="[{'--index': item.zIndex,'--left':item.mLeft}]" :data-direction="direction">
|
||||||
<view class="tower-item" :class="item.zIndex==1?'none':''" v-for="(item,index) in swiperList" :key="index" :style="[{transform: 'scale('+ (0.5 + item.zIndex / 10)+')',marginLeft:item.mLeft*100-150+'upx',zIndex:item.zIndex}]">
|
|
||||||
<!-- #endif -->
|
|
||||||
<!-- #ifdef MP-WEIXIN -->
|
|
||||||
<view class="tower-item" :class="item.zIndex==1?'none':''" v-for="(item,index) in swiperList" :key="index" :style="[{transform: 'scale('+ (0.5 + item.zIndex / 10)+')',marginLeft:item.mLeft*100-150+'rpx',zIndex:item.zIndex}]">
|
|
||||||
<!-- #endif -->
|
|
||||||
<view class="swiper-item">
|
<view class="swiper-item">
|
||||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||||
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
|
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -64,13 +60,12 @@
|
|||||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
|
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
|
||||||
}, {
|
}, {
|
||||||
id: 1,
|
id: 1,
|
||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP
|
||||||
type: 'video',
|
type: 'video',
|
||||||
url: 'https://yz.lol.qq.com/v1/assets/videos/aatrox-splashvideo.webm',
|
url: 'https://yz.lol.qq.com/v1/assets/videos/aatrox-splashvideo.webm',
|
||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef MP
|
||||||
// #ifndef MP-WEIXIN
|
|
||||||
type: 'image',
|
type: 'image',
|
||||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
|
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
|
||||||
// #endif
|
// #endif
|
||||||
@@ -97,7 +92,7 @@
|
|||||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
|
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
|
||||||
}],
|
}],
|
||||||
dotStyle: false,
|
dotStyle: false,
|
||||||
towerStart:0,
|
towerStart: 0,
|
||||||
direction: ''
|
direction: ''
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@@ -141,27 +136,33 @@
|
|||||||
if (direction == 'right') {
|
if (direction == 'right') {
|
||||||
let mLeft = list[0].mLeft;
|
let mLeft = list[0].mLeft;
|
||||||
let zIndex = list[0].zIndex;
|
let zIndex = list[0].zIndex;
|
||||||
for (let i = 1; i < list.length; i++) {
|
for (let i = 1; i < this.swiperList.length; i++) {
|
||||||
this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
|
this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
|
||||||
this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
|
this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
|
||||||
console.log('end')
|
|
||||||
}
|
}
|
||||||
this.swiperList[list.length - 1].mLeft = mLeft;
|
this.swiperList[list.length - 1].mLeft = mLeft;
|
||||||
this.swiperList[list.length - 1].zIndex = zIndex;
|
this.swiperList[list.length - 1].zIndex = zIndex;
|
||||||
} else {
|
} else {
|
||||||
let mLeft = list[list.length - 1].mLeft;
|
let mLeft = list[list.length - 1].mLeft;
|
||||||
let zIndex = list[list.length - 1].zIndex;
|
let zIndex = list[list.length - 1].zIndex;
|
||||||
for (let i = list.length - 1; i > 0; i--) {
|
for (let i = this.swiperList.length - 1; i > 0; i--) {
|
||||||
this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
|
this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
|
||||||
this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
|
this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
|
||||||
}
|
}
|
||||||
this.swiperList[0].mLeft = mLeft;
|
this.swiperList[0].mLeft = mLeft;
|
||||||
this.swiperList[0].zIndex = zIndex;
|
this.swiperList[0].zIndex = zIndex;
|
||||||
}
|
}
|
||||||
|
this.direction = ""
|
||||||
|
this.swiperList = this.swiperList
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.tower-swiper .tower-item {
|
||||||
|
transform: scale(calc(0.5 + var(--index) / 10));
|
||||||
|
margin-left: calc(var(--left) * 100upx - 150upx);
|
||||||
|
z-index: var(--index);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<custom bgColor="bg-gradual-pink">时间轴</custom>
|
<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">时间轴</block></cu-custom>
|
||||||
<view class="cu-timeline">
|
<view class="cu-timeline">
|
||||||
<view class="cu-time">昨天</view>
|
<view class="cu-time">昨天</view>
|
||||||
<view class="cu-item cur icon-noticefill">
|
<view class="cu-item cur icon-noticefill">
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<view>
|
<view>
|
||||||
<basics v-if="PageCur=='basics'"></basics>
|
<basics v-if="PageCur=='basics'"></basics>
|
||||||
<components v-if="PageCur=='component'"></components>
|
<components v-if="PageCur=='component'"></components>
|
||||||
<view class="cu-tabbar-height"></view>
|
<plugin v-if="PageCur=='plugin'"></plugin>
|
||||||
<view class="cu-bar tabbar bg-white shadow foot">
|
<view class="cu-bar tabbar bg-white shadow foot">
|
||||||
<view class="action" @click="NavChange" data-cur="basics">
|
<view class="action" @click="NavChange" data-cur="basics">
|
||||||
<view class='icon-cu-image'>
|
<view class='icon-cu-image'>
|
||||||
@@ -16,6 +16,12 @@
|
|||||||
</view>
|
</view>
|
||||||
<view :class="PageCur=='component'?'text-green':'text-gray'">组件</view>
|
<view :class="PageCur=='component'?'text-green':'text-gray'">组件</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="action" @click="NavChange" data-cur="plugin">
|
||||||
|
<view class='icon-cu-image'>
|
||||||
|
<image :src="'/static/tabbar/plugin' + [PageCur == 'plugin'?'_cur':''] + '.png'"></image>
|
||||||
|
</view>
|
||||||
|
<view :class="PageCur=='plugin'?'text-green':'text-gray'">扩展</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
145
Colorui-UniApp/pages/plugin/animation.vue
Normal file
145
Colorui-UniApp/pages/plugin/animation.vue
Normal file
@@ -0,0 +1,145 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg" :isBack="true"><block slot="backText">返回</block>
|
||||||
|
<block slot="content">微动画</block>
|
||||||
|
</cu-custom>
|
||||||
|
<view class="cu-bar bg-white">
|
||||||
|
<view class="action">
|
||||||
|
<text class="icon-title text-orange"></text> 默认效果
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="padding-sm">
|
||||||
|
<view class="flex flex-wrap justify-around">
|
||||||
|
<button class="cu-btn margin-sm basis-sm shadow" :class="['bg-' + item.color,animation==item.name?'animation-' +item.name :'']"
|
||||||
|
@tap="Toggle" :data-class="item.name" v-for="(item,index) in list" :key="index">{{item.name}}</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="cu-bar bg-white">
|
||||||
|
<view class="action">
|
||||||
|
<text class="icon-title text-orange"></text> 反向动画
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="padding-sm">
|
||||||
|
<view class="flex flex-wrap justify-around">
|
||||||
|
<button class="cu-btn animation-reverse margin-sm basis-sm shadow" :class="['bg-' + item.color,animation==item.name+'s'?'animation-' +item.name:'']"
|
||||||
|
@tap="Toggle" :data-class="item.name+'s'" v-for="(item,index) in list" :key="index">{{item.name}}</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="cu-bar bg-white">
|
||||||
|
<view class="action">
|
||||||
|
<text class="icon-title text-orange"></text> 延迟执行
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<button class="cu-btn bg-cyan shadow" @tap="ToggleDelay">开始执行</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="padding-sm">
|
||||||
|
<view class="flex flex-wrap justify-around">
|
||||||
|
<button class="margin-sm basis-sm shadow cu-btn" :class="['bg-' + item.color,toggleDelay?'animation-slide-bottom':'']"
|
||||||
|
:style="[{animationDelay: (index + 1)*0.1 + 's'}]" v-for="(item,index) in list" :key="index">0.{{index+1}}s</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="cu-bar bg-white">
|
||||||
|
<view class="action">
|
||||||
|
<text class="icon-title text-orange"></text> Gif动画
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="margin radius bg-gradual-green shadow-blur">
|
||||||
|
<image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100rpx"></image>
|
||||||
|
</view>
|
||||||
|
<view class="margin flex">
|
||||||
|
<view class="bg-black flex-sub margin-right radius shadow-lg">
|
||||||
|
<image src="https://image.weilanwl.com/gif/loading-black.gif" mode="aspectFit" class="gif-black response" style="height:240rpx"></image>
|
||||||
|
</view>
|
||||||
|
<view class="bg-white flex-sub radius shadow-lg">
|
||||||
|
<image src="https://image.weilanwl.com/gif/loading-white.gif" mode="aspectFit" class="gif-white response" style="height:240rpx"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="margin flex">
|
||||||
|
<view class="bg-gradual-blue flex-sub margin-right radius shadow-lg">
|
||||||
|
<image src="https://image.weilanwl.com/gif/rhomb-black.gif" mode="aspectFit" class="gif-black response" style="height:240rpx"></image>
|
||||||
|
</view>
|
||||||
|
<view class="bg-white flex-sub radius shadow-lg">
|
||||||
|
<image src="https://image.weilanwl.com/gif/rhomb-white.gif" mode="aspectFit" class="gif-white response" style="height:240rpx"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="margin flex">
|
||||||
|
<view class="bg-white flex-sub margin-right radius shadow-lg">
|
||||||
|
<image src="https://image.weilanwl.com/gif/loading-1.gif" mode="aspectFit" class="gif-white response" style="height:240rpx"></image>
|
||||||
|
</view>
|
||||||
|
<view class="bg-black flex-sub radius shadow-lg">
|
||||||
|
<image src="https://image.weilanwl.com/gif/loading-2.gif" mode="aspectFit" class="gif-black response" style="height:240rpx"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
animation:'',
|
||||||
|
list: [{
|
||||||
|
name: 'fade',
|
||||||
|
color: 'red'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'scale-up',
|
||||||
|
color: 'orange'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'scale-down',
|
||||||
|
color: 'olive'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'slide-top',
|
||||||
|
color: 'green'
|
||||||
|
}, {
|
||||||
|
name: 'slide-bottom',
|
||||||
|
color: 'cyan'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'slide-left',
|
||||||
|
color: 'blue'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'slide-right',
|
||||||
|
color: 'purple'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'shake',
|
||||||
|
color: 'mauve'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
toggleDelay: false
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
Toggle(e) {
|
||||||
|
var anmiaton = e.currentTarget.dataset.class;
|
||||||
|
this.animation= anmiaton;
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.animation= '';
|
||||||
|
}, 1000)
|
||||||
|
},
|
||||||
|
ToggleDelay() {
|
||||||
|
this.toggleDelay= true;
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.toggleDelay= false
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import "../../colorui/animation.css";
|
||||||
|
|
||||||
|
image[class*="gif-"] {
|
||||||
|
border-radius: 6upx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
170
Colorui-UniApp/pages/plugin/drawer.vue
Normal file
170
Colorui-UniApp/pages/plugin/drawer.vue
Normal file
@@ -0,0 +1,170 @@
|
|||||||
|
<template>
|
||||||
|
<view class="bg-gradual-blue">
|
||||||
|
<scroll-view scroll-y class="DrawerPage" :class="modalName=='viewModal'?'show':''">
|
||||||
|
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block>
|
||||||
|
<block slot="content">全屏抽屉</block>
|
||||||
|
</cu-custom>
|
||||||
|
<view class='padding margin text-center'>
|
||||||
|
<view class='cu-btn bg-green lg block shadow radius margin-xl' @tap="showModal" data-target="viewModal">
|
||||||
|
打开抽屉
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
|
||||||
|
<view class="cu-item arrow" v-for="(item,index) in 20" :key="index">
|
||||||
|
<view class="content">
|
||||||
|
<text class="icon-github text-grey"></text>
|
||||||
|
<text class="text-grey">{{index +1}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class='padding margin text-center'>
|
||||||
|
<view class='cu-btn bg-green lg block shadow radius margin-xl' @tap="showModal" data-target="viewModal">
|
||||||
|
打开抽屉
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="DrawerClose" :class="modalName=='viewModal'?'show':''" @tap="hideModal">
|
||||||
|
<text class="icon-pullright"></text>
|
||||||
|
</view>
|
||||||
|
<scroll-view scroll-y class="DrawerWindow" :class="modalName=='viewModal'?'show':''">
|
||||||
|
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
|
||||||
|
<view class="cu-item arrow" v-for="(item,index) in 20" :key="index">
|
||||||
|
<view class="content">
|
||||||
|
<text class="icon-github text-grey"></text>
|
||||||
|
<text class="text-grey">{{index +1}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
modalName:null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showModal(e) {
|
||||||
|
this.modalName = e.currentTarget.dataset.target
|
||||||
|
},
|
||||||
|
hideModal(e) {
|
||||||
|
this.modalName = null
|
||||||
|
},
|
||||||
|
tabSelect(e) {
|
||||||
|
this.TabCur = e.currentTarget.dataset.id;
|
||||||
|
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
page {
|
||||||
|
background-image: var(--gradualBlue);
|
||||||
|
width: 750upx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage {
|
||||||
|
position: absolute;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
left: 0vw;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
transition: all 0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage.show {
|
||||||
|
transform: scale(0.9, 0.9);
|
||||||
|
left: 85vw;
|
||||||
|
box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
|
||||||
|
transform-origin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerWindow {
|
||||||
|
position: absolute;
|
||||||
|
width: 85vw;
|
||||||
|
height: 100vh;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
transform: scale(0.9, 0.9) translateX(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: all 0.6s;
|
||||||
|
padding: 100upx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerWindow.show {
|
||||||
|
transform: scale(1, 1) translateX(0%);
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerClose {
|
||||||
|
position: absolute;
|
||||||
|
width: 40vw;
|
||||||
|
height: 100vh;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
color: transparent;
|
||||||
|
padding-bottom: 30upx;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
|
||||||
|
letter-spacing: 5px;
|
||||||
|
font-size: 50upx;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: all 0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerClose.show {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: all;
|
||||||
|
width: 15vw;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage .cu-bar.tabbar .action button.icon {
|
||||||
|
width: 64upx;
|
||||||
|
height: 64upx;
|
||||||
|
line-height: 64upx;
|
||||||
|
margin: 0;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage .cu-bar.tabbar .action .cu-avatar {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage .nav {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage .nav .cu-item.cur {
|
||||||
|
border-bottom: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage .nav .cu-item.cur::after {
|
||||||
|
content: "";
|
||||||
|
width: 10upx;
|
||||||
|
height: 10upx;
|
||||||
|
background-color: currentColor;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10upx;
|
||||||
|
border-radius: 10upx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage .cu-bar.tabbar .action {
|
||||||
|
flex: initial;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
107
Colorui-UniApp/pages/plugin/home.vue
Normal file
107
Colorui-UniApp/pages/plugin/home.vue
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<scroll-view scroll-y class="page">
|
||||||
|
<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/cjkz2329.jpg">
|
||||||
|
<block slot="content">
|
||||||
|
<image src="/static/cjkz.png" mode="widthFix"></image>
|
||||||
|
</block>
|
||||||
|
</cu-custom>
|
||||||
|
<view class="cu-card">
|
||||||
|
<view class="cu-item bg-img shadow-blur" :style="[{backgroundImage:'url('+item.img+')'}]" @tap="toChild" :data-url="item.url"
|
||||||
|
v-for="(item,index) in list" :key="index">
|
||||||
|
<view class="cardTitle">
|
||||||
|
{{item.title}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="cu-tabbar-height"></view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
StatusBar: this.StatusBar,
|
||||||
|
CustomBar: this.CustomBar,
|
||||||
|
list: [{
|
||||||
|
title: '索引列表',
|
||||||
|
img: 'https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg',
|
||||||
|
url: '../plugin/indexes'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '微动画',
|
||||||
|
img: 'https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg',
|
||||||
|
url: '../plugin/animation'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '全屏抽屉',
|
||||||
|
img: 'https://image.weilanwl.com/color2.0/plugin/qpct2148.jpg',
|
||||||
|
url: '../plugin/drawer'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '垂直导航',
|
||||||
|
img: 'https://image.weilanwl.com/color2.0/plugin/qpczdh2307.jpg',
|
||||||
|
url: '../plugin/verticalnav'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toChild(e) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: e.currentTarget.dataset.url
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.page {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cu-bar .content image {
|
||||||
|
height: 60upx;
|
||||||
|
width: 240upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardTitle {
|
||||||
|
color: #fff;
|
||||||
|
padding: 90upx 60upx;
|
||||||
|
font-size: 40upx;
|
||||||
|
font-weight: 300;
|
||||||
|
transform: skew(-10deg, 0deg);
|
||||||
|
position: relative;
|
||||||
|
text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardTitle::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 60upx;
|
||||||
|
height: 6upx;
|
||||||
|
border-radius: 20upx;
|
||||||
|
background-color: #fff;
|
||||||
|
display: block;
|
||||||
|
top: 60upx;
|
||||||
|
left: 50upx;
|
||||||
|
transform: skew(10deg, 0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardTitle::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 140upx;
|
||||||
|
border-radius: 6upx;
|
||||||
|
height: 24upx;
|
||||||
|
background-color: #fff;
|
||||||
|
display: block;
|
||||||
|
bottom: 76upx;
|
||||||
|
left: 90upx;
|
||||||
|
transform: skew(10deg, 0deg);
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
197
Colorui-UniApp/pages/plugin/indexes.vue
Normal file
197
Colorui-UniApp/pages/plugin/indexes.vue
Normal file
@@ -0,0 +1,197 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg" :isBack="true"><block slot="backText">返回</block>
|
||||||
|
<block slot="content">索引</block>
|
||||||
|
</cu-custom>
|
||||||
|
<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
|
||||||
|
<view class="search-form round">
|
||||||
|
<text class="icon-search"></text>
|
||||||
|
<input type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<button class="cu-btn bg-gradual-green shadow-blur round">搜索</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]"
|
||||||
|
:scroll-with-animation="true" :enable-back-to-top="true" @scroll="scroll">
|
||||||
|
<block v-for="(item,index) in list" :key="index">
|
||||||
|
<view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name">
|
||||||
|
<view class="padding">{{item.name}}</view>
|
||||||
|
<view class="cu-list menu menu-avatar no-padding">
|
||||||
|
<view class="cu-item" v-for="(items,sub) in 2" :key="sub">
|
||||||
|
<view class="cu-avatar round lg">{{item.name}}</view>
|
||||||
|
<view class="content">
|
||||||
|
<view class="text-grey">{{item.name}}<text class="text-abc">{{list[sub].name}}</text>君</view>
|
||||||
|
<view class="text-gray text-sm">
|
||||||
|
有{{sub+2}}个主子需要伺候
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="indexBar" :style="[{height:'calc(100vh - ' + CustomBar + 'px - 50px)'}]">
|
||||||
|
<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
|
||||||
|
<view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index" @touchstart="getCur" @touchend="setCur"> {{item.name}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!--选择显示-->
|
||||||
|
<view v-show="!hidden" class="indexToast">
|
||||||
|
{{listCur}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
StatusBar: this.StatusBar,
|
||||||
|
CustomBar: this.CustomBar,
|
||||||
|
hidden: true,
|
||||||
|
listCurID: '',
|
||||||
|
list: [],
|
||||||
|
listCur: '',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
let list = [{}];
|
||||||
|
for (let i = 0; i < 26; i++) {
|
||||||
|
list[i] = {};
|
||||||
|
list[i].name = String.fromCharCode(65 + i);
|
||||||
|
}
|
||||||
|
this.list = list;
|
||||||
|
this.listCur = list[0];
|
||||||
|
},
|
||||||
|
onReady() {
|
||||||
|
let that = this;
|
||||||
|
uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
|
||||||
|
that.boxTop = res.top
|
||||||
|
}).exec();
|
||||||
|
uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
|
||||||
|
that.barTop = res.top
|
||||||
|
}).exec()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//获取文字信息
|
||||||
|
getCur(e) {
|
||||||
|
this.hidden = false;
|
||||||
|
this.listCur = this.list[e.target.id].name;
|
||||||
|
},
|
||||||
|
setCur(e) {
|
||||||
|
this.hidden = true;
|
||||||
|
this.listCur = this.listCur
|
||||||
|
},
|
||||||
|
//滑动选择Item
|
||||||
|
tMove(e) {
|
||||||
|
let y = e.touches[0].clientY,
|
||||||
|
offsettop = this.boxTop,
|
||||||
|
that = this;
|
||||||
|
//判断选择区域,只有在选择区才会生效
|
||||||
|
if (y > offsettop) {
|
||||||
|
let num = parseInt((y - offsettop) / 20);
|
||||||
|
this.listCur = that.list[num].name
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
//触发全部开始选择
|
||||||
|
tStart() {
|
||||||
|
this.hidden = false
|
||||||
|
},
|
||||||
|
|
||||||
|
//触发结束选择
|
||||||
|
tEnd() {
|
||||||
|
this.hidden = true;
|
||||||
|
this.listCurID = this.listCur
|
||||||
|
},
|
||||||
|
indexSelect(e) {
|
||||||
|
let that = this;
|
||||||
|
let barHeight = this.barHeight;
|
||||||
|
let list = this.list;
|
||||||
|
let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
|
||||||
|
for (let i = 0; i < list.length; i++) {
|
||||||
|
if (scrollY < i + 1) {
|
||||||
|
that.listCur = list[i].name;
|
||||||
|
that.movableY = i * 20
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
page {
|
||||||
|
padding-top: 100upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indexes {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indexBar {
|
||||||
|
position: fixed;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
padding: 20upx 20upx 20upx 60upx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indexBar .indexBar-box {
|
||||||
|
width: 40upx;
|
||||||
|
height: auto;
|
||||||
|
background: #fff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indexBar-item {
|
||||||
|
flex: 1;
|
||||||
|
width: 40upx;
|
||||||
|
height: 40upx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 24upx;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
movable-view.indexBar-item {
|
||||||
|
width: 40upx;
|
||||||
|
height: 40upx;
|
||||||
|
z-index: 9;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
movable-view.indexBar-item::before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 10upx;
|
||||||
|
height: 20upx;
|
||||||
|
width: 4upx;
|
||||||
|
background-color: #f37b1d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indexToast {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 80upx;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
width: 100upx;
|
||||||
|
height: 100upx;
|
||||||
|
border-radius: 10upx;
|
||||||
|
margin: auto;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 100upx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 48upx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
223
Colorui-UniApp/pages/plugin/verticalnav.vue
Normal file
223
Colorui-UniApp/pages/plugin/verticalnav.vue
Normal file
@@ -0,0 +1,223 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class=" fixed ">
|
||||||
|
<cu-custom :isBack="true" bgColor="bg-shadeTop text-white">
|
||||||
|
<block slot="backText">返回</block>
|
||||||
|
<block slot="content">垂直导航</block>
|
||||||
|
</cu-custom>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
|
||||||
|
duration="500">
|
||||||
|
<swiper-item v-for="(item,index) in 4" :key="index">
|
||||||
|
<image :src="'https://ossweb-img.qq.com/images/lol/web201310/skin/big3900'+index+ '.jpg'" mode="aspectFill"></image>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<view class="VerticalBox">
|
||||||
|
<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh - 375upx)">
|
||||||
|
<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in list" :key="index" @tap="TabSelect"
|
||||||
|
:data-id="index">
|
||||||
|
Tab-{{item.name}}
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375rpx)"
|
||||||
|
:scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
|
||||||
|
<view class="padding-top padding-lr" v-for="(item,index) in list" :key="index" :id="'main-'+index">
|
||||||
|
<view class="cu-bar solid-bottom bg-white">
|
||||||
|
<view class="action">
|
||||||
|
<text class="icon-title text-green"></text> Tab-{{item.name}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="cu-list menu-avatar">
|
||||||
|
<view class="cu-item">
|
||||||
|
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
|
||||||
|
<view class="content">
|
||||||
|
<view class="text-grey">凯尔</view>
|
||||||
|
<view class="text-gray text-sm flex">
|
||||||
|
<text class="text-cut">
|
||||||
|
<text class="icon-infofill text-red margin-right-xs"></text>
|
||||||
|
我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
|
||||||
|
</text> </view>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="text-grey text-xs">22:20</view>
|
||||||
|
<view class="cu-tag round bg-grey sm">5</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="cu-item">
|
||||||
|
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);">
|
||||||
|
<view class="cu-tag badge">99+</view>
|
||||||
|
</view>
|
||||||
|
<view class="content">
|
||||||
|
<view class="text-grey">
|
||||||
|
<text class="text-cut">瓦洛兰之盾-塔里克</text>
|
||||||
|
<view class="cu-tag round bg-orange sm">战士</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-gray text-sm flex">
|
||||||
|
<text class="text-cut">
|
||||||
|
塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="text-grey text-xs">22:20</view>
|
||||||
|
<view class="icon-notice_forbid_fill text-gray"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="cu-item ">
|
||||||
|
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
|
||||||
|
<view class="content">
|
||||||
|
<view class="text-pink"><text class="text-cut">莫甘娜</text></view>
|
||||||
|
<view class="text-gray text-sm flex"> <text class="text-cut">凯尔，你被自己的光芒变的盲目！</text></view>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="text-grey text-xs">22:20</view>
|
||||||
|
<view class="cu-tag round bg-red sm">5</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="cu-item grayscale">
|
||||||
|
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
|
||||||
|
<view class="content">
|
||||||
|
<view><text class="text-cut">伊泽瑞尔</text>
|
||||||
|
<view class="cu-tag round bg-orange sm">断开连接...</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-gray text-sm flex"> <text class="text-cut"> 等我回来一个打十个</text></view>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="text-grey text-xs">22:20</view>
|
||||||
|
<view class="cu-tag round bg-red sm">5</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="cu-item cur">
|
||||||
|
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);">
|
||||||
|
<view class="cu-tag badge"></view>
|
||||||
|
</view>
|
||||||
|
<view class="content">
|
||||||
|
<view>
|
||||||
|
<text class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</text>
|
||||||
|
<view class="cu-tag round bg-orange sm">6人</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-gray text-sm flex">
|
||||||
|
<text class="text-cut"> 伊泽瑞尔：<text class="icon-locationfill text-orange margin-right-xs"></text> 传送中...</text></view>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="text-grey text-xs">22:20</view>
|
||||||
|
<view class="icon-notice_forbid_fill text-gray"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: [],
|
||||||
|
tabCur: 0,
|
||||||
|
mainCur: 0,
|
||||||
|
verticalNavTop: 0,
|
||||||
|
load: true
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '加载中...',
|
||||||
|
mask: true
|
||||||
|
});
|
||||||
|
let list = [{}];
|
||||||
|
for (let i = 0; i < 26; i++) {
|
||||||
|
list[i] = {};
|
||||||
|
list[i].name = String.fromCharCode(65 + i);
|
||||||
|
list[i].id = i;
|
||||||
|
}
|
||||||
|
this.list = list;
|
||||||
|
this.listCur = list[0];
|
||||||
|
},
|
||||||
|
onReady() {
|
||||||
|
uni.hideLoading()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
TabSelect(e) {
|
||||||
|
this.tabCur = e.currentTarget.dataset.id;
|
||||||
|
this.mainCur = e.currentTarget.dataset.id;
|
||||||
|
this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
|
||||||
|
},
|
||||||
|
VerticalMain(e) {
|
||||||
|
let that = this;
|
||||||
|
let tabHeight = 0;
|
||||||
|
if (this.load) {
|
||||||
|
for (let i = 0; i < this.list.length; i++) {
|
||||||
|
let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
|
||||||
|
view.fields({
|
||||||
|
size: true
|
||||||
|
}, data => {
|
||||||
|
this.list[i].top = tabHeight;
|
||||||
|
tabHeight = tabHeight + data.height;
|
||||||
|
this.list[i].bottom = tabHeight;
|
||||||
|
}).exec();
|
||||||
|
}
|
||||||
|
this.load = false
|
||||||
|
}
|
||||||
|
let scrollTop = e.detail.scrollTop + 10;
|
||||||
|
for (let i = 0; i < this.list.length; i++) {
|
||||||
|
if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
|
||||||
|
this.verticalNavTop = (this.list[i].id - 1) * 50
|
||||||
|
this.tabCur = this.list[i].id
|
||||||
|
console.log(scrollTop)
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.fixed {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VerticalNav.nav {
|
||||||
|
width: 200upx;
|
||||||
|
white-space: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VerticalNav.nav .cu-item {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 0;
|
||||||
|
border: none;
|
||||||
|
height: 50px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VerticalNav.nav .cu-item.cur {
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VerticalNav.nav .cu-item.cur::after {
|
||||||
|
content: "";
|
||||||
|
width: 8upx;
|
||||||
|
height: 30upx;
|
||||||
|
border-radius: 10upx 0 0 10upx;
|
||||||
|
position: absolute;
|
||||||
|
background-color: currentColor;
|
||||||
|
top: 0;
|
||||||
|
right: 0upx;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VerticalBox {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VerticalMain {
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
Colorui-UniApp/static/cjkz.png
Normal file
BIN
Colorui-UniApp/static/cjkz.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Reference in New Issue
Block a user