<script>
|
import Vue from 'vue'
|
export default {
|
onLaunch: function() {
|
Vue.prototype.ColorList = [{
|
title: '嫣红',
|
name: 'red',
|
color: '#e54d42'
|
},
|
{
|
title: '桔橙',
|
name: 'orange',
|
color: '#f37b1d'
|
},
|
{
|
title: '明黄',
|
name: 'yellow',
|
color: '#fbbd08'
|
},
|
{
|
title: '橄榄',
|
name: 'olive',
|
color: '#8dc63f'
|
},
|
{
|
title: '森绿',
|
name: 'green',
|
color: '#39b54a'
|
},
|
{
|
title: '天青',
|
name: 'cyan',
|
color: '#1cbbb4'
|
},
|
{
|
title: '海蓝',
|
name: 'blue',
|
color: '#0081ff'
|
},
|
{
|
title: '姹紫',
|
name: 'purple',
|
color: '#6739b6'
|
},
|
{
|
title: '木槿',
|
name: 'mauve',
|
color: '#9c26b0'
|
},
|
{
|
title: '桃粉',
|
name: 'pink',
|
color: '#e03997'
|
},
|
{
|
title: '棕褐',
|
name: 'brown',
|
color: '#a5673f'
|
},
|
{
|
title: '玄灰',
|
name: 'grey',
|
color: '#8799a3'
|
},
|
{
|
title: '草灰',
|
name: 'gray',
|
color: '#aaaaaa'
|
},
|
{
|
title: '墨黑',
|
name: 'black',
|
color: '#333333'
|
},
|
{
|
title: '雅白',
|
name: 'white',
|
color: '#ffffff'
|
},
|
]
|
},
|
onShow: function() {
|
console.log('App Show')
|
},
|
onHide: function() {
|
console.log('App Hide')
|
},
|
}
|
</script>
|
|
<style>
|
/*每个页面公共css */
|
@import "colorui/main.css";
|
@import "colorui/icon.css";
|
|
.footer {
|
width: 100%;
|
height: 150rpx;
|
line-height: 150rpx;
|
background-color: #FFF;
|
position: fixed;
|
bottom: 0;
|
border-top: 1px solid #d8d8d8;
|
border-radius: 20rpx 20rpx 0 0 ;
|
z-index: 1;
|
}
|
.nav-list {
|
display: flex;
|
flex-wrap: wrap;
|
padding: 0px 40upx 0px;
|
justify-content: space-between;
|
}
|
.nav-li {
|
padding: 30upx;
|
border-radius: 12upx;
|
width: 95%;
|
margin: 0 2.5% 40upx;
|
|
background-size: cover;
|
background-position: center;
|
position: relative;
|
z-index: 1;
|
}
|
.nav-li::after {
|
content: "";
|
position: absolute;
|
z-index: -1;
|
background-color: inherit;
|
width: 100%;
|
height: 100%;
|
left: 0;
|
bottom: -10%;
|
border-radius: 10upx;
|
opacity: 0.2;
|
transform: scale(0.9, 0.9);
|
}
|
.nav-li.cur {
|
color: #fff;
|
background: rgb(94, 185, 94);
|
box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
|
}
|
.nav-title {
|
font-size: 32upx;
|
font-weight: 300;
|
}
|
.nav-title::first-letter {
|
font-size: 40upx;
|
margin-right: 4upx;
|
}
|
.nav-name {
|
font-size: 28upx;
|
text-transform: Capitalize;
|
margin-top: 20upx;
|
position: relative;
|
}
|
.nav-name::before {
|
content: "";
|
position: absolute;
|
display: block;
|
width: 40upx;
|
height: 6upx;
|
background: #fff;
|
bottom: 0;
|
right: 0;
|
opacity: 0.5;
|
}
|
|
.nav-name::after {
|
content: "";
|
position: absolute;
|
display: block;
|
width: 100upx;
|
height: 1px;
|
background: #fff;
|
bottom: 0;
|
right: 40upx;
|
opacity: 0.3;
|
}
|
|
.nav-name::first-letter {
|
font-weight: bold;
|
font-size: 36upx;
|
margin-right: 1px;
|
}
|
.nav-li text {
|
position: absolute;
|
right: 30upx;
|
top: 30upx;
|
font-size: 52upx;
|
width: 60upx;
|
height: 60upx;
|
text-align: center;
|
line-height: 60upx;
|
}
|
.text-light {
|
font-weight: 300;
|
}
|
@keyframes show {
|
0% {
|
transform: translateY(-50px);
|
}
|
|
60% {
|
transform: translateY(40upx);
|
}
|
|
100% {
|
transform: translateY(0px);
|
}
|
}
|
|
@-webkit-keyframes show {
|
0% {
|
transform: translateY(-50px);
|
}
|
|
60% {
|
transform: translateY(40upx);
|
}
|
|
100% {
|
transform: translateY(0px);
|
}
|
}
|
/* .pda-btn {
|
|
margin-left:120rpx;
|
margin-right: auto;
|
margin-top: 150rpx;
|
width: 200rpx;
|
height: 80rpx;
|
font-size: 30upx;
|
font-weight: bold;
|
} */
|
.title-login {
|
text-align: justify;
|
padding-right: 30upx;
|
font-size: 30upx;
|
font-weight: 400;
|
position: relative;
|
height: 60upx;
|
line-height: 60upx;
|
}
|
.main-btn {
|
padding: 0 20px;
|
font-size: 20px;
|
height: 40px;
|
}
|
|
/* uni-checkbox .uni-checkbox-input{
|
border-radius: 20% !important;
|
border: 1px solid black;
|
}
|
uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
|
background: $primary-color;
|
} */
|
/* uni-checkbox-group{ width: 100% !important; }
|
uni-checkbox-group uni-label{ width: 33% !important; display: inline-flex; margin-bottom: 20rpx; } */
|
|
/*checkbox 选项框大小 */
|
uni-checkbox .uni-checkbox-input{
|
width: 30rpx !important;
|
height: 30rpx !important;
|
}
|
|
/*checkbox选中后样式 */
|
uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked{
|
background: #3D7EFF;
|
border-color:#3D7EFF;
|
}
|
|
/*checkbox选中后图标样式 */
|
uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before{
|
width: 30rpx;
|
height: 30rpx;
|
line-height: 30rpx;
|
text-align: center;
|
font-size: 30rpx;
|
color: #fff;
|
background: transparent;
|
transform: translate(-50%, -50%) scale(1);
|
-webkit-transform: translate(-50%, -50%) scale(1);
|
}
|
.square-2 {
|
background-color: #ffffff;
|
box-shadow: 0px 0px 5px #d9d9d9;
|
width: 94%;
|
height: 200rpx;
|
border-radius: 20rpx;
|
margin: 20rpx auto 20rpx auto;
|
}
|
.square-title {
|
width: 100%;
|
height: 100rpx;
|
}
|
.title-sign {
|
display: inline-block;
|
float: left;
|
height: 100rpx;
|
width: 2em;
|
line-height: 100rpx;
|
}
|
.sign {
|
background-color: #007AFF;
|
width: 15rpx;
|
height: 40rpx;
|
border-radius: 50rpx;
|
position: relative;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%,-50%);
|
}
|
.square-content {
|
width: 100%;
|
height: 100rpx;
|
}
|
.square-content>text{
|
height: 100%;
|
/* background-color: #18BC37; */
|
width: 22%;
|
line-height: 100rpx;
|
display: inline-block;
|
float: left;
|
text-align: right;
|
margin-left: 3%;
|
font-size: 30rpx;
|
}
|
.content-input {
|
background-color: #f9f9f9;
|
display: inline-block;
|
float: left;
|
height: 80rpx;
|
line-height: 80rpx;
|
width: 95%;
|
margin: 10rpx 2.5%;
|
border-radius: 15rpx;
|
border: 1px solid #eeeeee;
|
}
|
.content-input input {
|
display: inline-block;
|
float: left;
|
height: 80rpx;
|
width: 90%;
|
text-indent: 20rpx;
|
font-size: 32rpx;
|
letter-spacing: 3rpx;
|
}
|
.content-input-btn {
|
background-color: #f9f9f9;
|
display: inline-block;
|
float: left;
|
height: 80rpx;
|
line-height: 80rpx;
|
width: 70%;
|
margin: 10rpx 2.5%;
|
border-radius: 15rpx;
|
border: 1px solid #eeeeee;
|
}
|
.content-input-btn input {
|
display: inline-block;
|
float: left;
|
height: 100%;
|
width: 85%;
|
/* background-color: #007AFF; */
|
text-indent: 20rpx;
|
font-size: 32rpx;
|
letter-spacing: 3rpx;
|
}
|
.content-input-combox {
|
background-color: #f9f9f9;
|
display: inline-block;
|
float: right;
|
height: 80rpx;
|
line-height: 80rpx;
|
width: 70%;
|
margin: 10rpx 2.5%;
|
border-radius: 10rpx;
|
border: 1px solid #eeeeee;
|
margin: 10rpx 3% 10rpx 0 ;
|
}
|
.content-input-combox input {
|
display: inline-block;
|
float: left;
|
height: 100%;
|
width: 85%;
|
/* background-color: #007AFF; */
|
text-indent: 20rpx;
|
font-size: 32rpx;
|
letter-spacing: 3rpx;
|
}
|
.content-combox {
|
display: inline-block;
|
float: right;
|
height: 80rpx;
|
width: 94%;
|
margin: 10rpx 3% 10rpx 0 ;
|
}
|
.square-none {
|
width: 100%;
|
height: 100rpx;
|
}
|
.square-1 {
|
position: relative;
|
background-color: #ffffff;
|
box-shadow: 0px 0px 5px #d9d9d9;
|
width: 94%;
|
height: 100rpx;
|
border-radius: 20rpx;
|
margin: 20rpx auto 20rpx auto;
|
}
|
.v-show {
|
width: 100%;
|
height: 100%;
|
/* line-height: 100rpx; */
|
text-align: center;
|
color: #7a7a7a;
|
}
|
.title-text {
|
/* background-color: #000000; */
|
display: inline-block;
|
height: 100rpx;
|
width: 250rpx;
|
line-height: 110rpx;
|
font-size: 40rpx;
|
font-weight: 700;
|
letter-spacing: 7rpx;
|
}
|
.content-btn {
|
/* background-color: #57a3ff; */
|
display: inline-block;
|
height: 100rpx;
|
width: 25%;
|
}
|
.pda-btn {
|
background-color: #1E9FFF;
|
height: 80rpx;
|
width: 90%;
|
margin: 10rpx auto;
|
text-align: center;
|
line-height: 80rpx;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
}
|
.square-3 {
|
background-color: #ffffff;
|
box-shadow: 0px 0px 5px #d9d9d9;
|
width: 94%;
|
height: 300rpx;
|
border-radius: 20rpx;
|
margin: 20rpx auto 20rpx auto;
|
}
|
.searchBox {
|
position: absolute;
|
width: 94%;
|
height: 80%;
|
top: 0;
|
left: 0;
|
bottom: 0;
|
right: 0;
|
margin: auto;
|
background-color: #F9F9F9;
|
border-radius: 20rpx;
|
}
|
.searchIcon {
|
display: inline-block;
|
float: left;
|
width: 10%;
|
height: 100%;
|
text-align: center;
|
line-height: 80rpx;
|
}
|
|
.searchArea {
|
display: inline-block;
|
float: left;
|
width: 80%;
|
height: 100%;
|
}
|
.searchArea input {
|
height: 100%;
|
font-size: 14px;
|
color: #5f5f5f;
|
}
|
.closeIcon {
|
display: inline-block;
|
float: left;
|
width: 10%;
|
height: 100%;
|
text-align: center;
|
line-height: 80rpx;
|
}
|
</style>
|
