Skip to content

M
mini-program-wepy
Commit 79e1e467 authored by ziyu's avatar ziyu
Browse files
Options

feat: 公共样式

parent 2fee3ff7
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 125 deletions
src/app.wpy
View file @ 79e1e467
<style>
<style lang="less">
@import "./style/common.less";
page {
font-family: 'PingFangSC-Regular',monospace;
width:100%;
height:100%;
background-color:#F1F1F1;
background-color:@greyback;
color:@fontcolor;
}
</style>
<script>
......
src/components/custom/network.wpy
View file @ 79e1e467
......@@ -3,7 +3,7 @@
<div class="network-wrapper">
<span class="network-text">网络状况不佳，请刷新重试</span>
<van-button custom-class="network-button" round type="info" @tap="setIsConnected">刷新</van-button>
</div>
</div>
</div>
</template>
<script>
......@@ -25,6 +25,7 @@
});
</script>
<style lang="less">
@import "../../style/common";
.network-container {
position: fixed;
width: 100%;
......@@ -40,17 +41,17 @@
align-items: center;
flex-direction: column;
.network-text {
color: #AAA;
font-size: 24rpx;
color: @darkgrey;
font-size: @font-normal;
}
.network-button {
margin-top: 20rpx;
width: 180rpx;
font-size: 24rpx;
font-size: @font-normal;
height: 56rpx;
line-height: 56rpx;
background: #FF6600;
border-color: #FF6600;
background: @maincolor;
border-color: @maincolor;
}
}
}
......
src/components/custom/openAnimation.wpy
View file @ 79e1e467
......@@ -105,6 +105,7 @@
});
</script>
<style lang="less">
@import "../../style/common";
.open-container {
position: fixed;
width: 100%;
......@@ -184,7 +185,7 @@
width: 500rpx;
height: 500rpx;
border-radius: 20rpx;
color: #fff;
color: @whitecolor;
background: linear-gradient(#FF5D15 5%, #FDA13E 60%, rgba(255, 255, 255, 0.8) 100%),
;
padding: 39rpx 40rpx 0rpx 40rpx;
......@@ -299,7 +300,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 24rpx;
font-size: @font-normal;
text-align: center;
}
}
......@@ -311,11 +312,11 @@
height: 158rpx;
z-index: 11;
.btn {
font-size: 24rpx;
font-size: @font-normal;
width: 160rpx;
height: 70rpx;
line-height: 70rpx;
border: 1rpx solid #FF5D15;
border: 1rpx solid @maincolor;
z-index: 11;
border-radius: 10rpx;
&:after {
......@@ -323,11 +324,11 @@
};
&:nth-child(1) {
background: #fff;
color: #FF5D15;
color: @maincolor;
}
&:nth-child(2) {
background: #FF5D15;
background: @maincolor;
color: #fff;
}
}
......@@ -439,7 +440,7 @@
bottom:160rpx;
left:0rpx;
content:"";
background:#fff;
background:@whiteback;
border-left:#e59c00 2rpx solid;
border-right:#e59c00 2rpx solid;
box-sizing:border-box;
......@@ -448,7 +449,7 @@
position: relative;
z-index: 2;
text-align: center;
font-size: 22rpx;
font-size: @font-common;
padding-bottom: 20rpx;
.gift-image {
width: 140rpx;
......@@ -467,7 +468,7 @@
height: 50rpx;
line-height: 50rpx;
border-radius: 6rpx;
font-size: 22rpx;
font-size: @font-common;
&:active{
background-image: -webkit-gradient(linear, left top, left bottom, from(#f09902), to(#f09902));
}
......
src/components/custom/popup.wpy
View file @ 79e1e467
......@@ -65,6 +65,7 @@
});
</script>
<style lang="less">
@import "../../style/common";
.popup-container {
position: fixed;
width: 100%;
......@@ -81,7 +82,7 @@
position: absolute;
left: 20rpx;
top: 155rpx;
background: #fff;
background: @whiteback;
border-radius: 10rpx;
padding: 10rpx 19rpx;
box-sizing: border-box;
......@@ -108,8 +109,8 @@
height: 50rpx;
}
.desc {
color: #FF5D15;
font-size: 20rpx;
color: @maincolor;
font-size: @font-small;
margin-top: 9rpx
}
}
......
src/components/custom/sharedPopup.wpy
View file @ 79e1e467
......@@ -69,6 +69,7 @@
});
</script>
<style lang="less">
@import "../../style/common";
.share-container {
position: fixed;
width: 100%;
......@@ -83,7 +84,7 @@
width: 530rpx;
height: 530rpx;
border-radius: 20rpx;
color: #fff;
color: @whitecolor;
background: linear-gradient(#E6401F, #FDA13E),
;
padding: 39rpx 40rpx 0rpx 40rpx;
......@@ -227,7 +228,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 28rpx;
font-size: @font-middle;
text-align: center;
}
.user {
......@@ -261,14 +262,14 @@
height: 120rpx;
z-index: 11;
.btn {
font-size: 30rpx;
font-size: @font-large;
width: 200rpx;
height: 70rpx;
line-height: 70rpx;
z-index: 11;
border-radius: 10rpx;
background: #FF5D15;
color: #FFF;
background: @maincolor;
color: @whitecolor;
&:before {
content: '';
width: 73rpx;
......
src/components/custom/sign.wpy
View file @ 79e1e467
......@@ -26,7 +26,7 @@
<image class="share-image" :src="shareUrl"></image>
</button>
<span class="title">{{des}}</span>
</div>
</div>
<div v-if="type === 'lottery'" class="lottery">
<button v-if="authmodal" open-type="getUserInfo" bindgetuserinfo="getUserInfo" plain="true" class="lottery-button">
<image class="lottery-button-image" :src="lotteryUrl"></image>
......@@ -176,6 +176,7 @@
});
</script>
<style lang="less">
@import "../../style/common";
.icon-container {
.lottery {
......@@ -202,11 +203,11 @@
width: 100%;
text-align: center;
display: block;
color: #fff;
font-size: 22rpx;
color: @whitecolor;
font-size: @font-common;
}
}
.share {
position: absolute;
top: 635rpx;
......@@ -225,8 +226,8 @@
width: 100%;
text-align: center;
display: block;
color: #fff;
font-size: 22rpx;
color: @whitecolor;
font-size: @font-common;
}
}
......@@ -265,7 +266,7 @@
text-align: center;
z-index: 3;
border-radius: 50%;
transform: rotate(-50deg);
transform: rotate(-50deg);
animation: jump1 1.2s infinite ease;
&::before {
content: "";
......@@ -296,8 +297,8 @@
width: 100%;
text-align: center;
display: block;
color: #fff;
font-size: 22rpx;
color: @whitecolor;
font-size: @font-common;
}
@keyframes swift {
......@@ -314,13 +315,13 @@
}
@keyframes shine1 {
0% {
transform: translateX(40rpx);
transform: translateX(40rpx);
}
50% {
transform: translateX(0);
transform: translateX(0);
}
100% {
transform: translateX(40rpx);
transform: translateX(40rpx);
}
}
}
......@@ -375,7 +376,7 @@
animation:addGoldRotate .6s linear infinite;
}
.add-gold-num {
color: #fff;
color: @whitecolor;
font-size: 16rpx;
vertical-align: middle;
}
......@@ -400,14 +401,14 @@
flex-direction: column;
.show-gold-image {
width: 60rpx;
height: 60rpx;
height: 60rpx;
z-index: 2;
}
.show-gold-num {
margin-top: -10rpx;
color: #fff;
font-size: 22rpx;
}
color: @whitecolor;
font-size: @font-common;
}
}
.sunshine {
......
src/components/custom/videolist.wpy
View file @ 79e1e467
<style lang="less">
@import "../../style/common";
.container,.video-swiper{
width:100%;
height:100%;
......@@ -15,13 +16,13 @@
width: 100%;
}
.rightcont {
font-size: 24rpx;
font-size: @font-normal;
position: absolute;
z-index: 9;
bottom: 415rpx;
width:30%;
right: 30rpx;
color: #fff;
color: @whitecolor;
.info {
line-height: 40rpx;
}
......@@ -29,9 +30,9 @@
.progress {
width: 180rpx;
height: 20rpx;
background-color: #fff;
background-color: @whiteback;
margin-top: 10rpx;
color: #666;
color: @greycolor;
position: relative;
.text {
position: absolute;
......@@ -49,7 +50,7 @@
width: 0;
height:100%;
transition:all .6s;
background-color: #FF5D15;
background-color: @maincolor;
}
}
.images {
......
src/mixins/test.js deleted 100644 → 0
View file @ 2fee3ff7
export default {
data: {
mixin: 'MixinText'
},
methods: {
mixintap () {
this.mixin = 'MixinText' + (Math.random() + '').substring(3, 7);
console.log('mixin method tap');
},
tap () {
console.log('tap in mixin');
}
},
created () {
console.log('created in mixin');
}
};
src/pages/help.wpy
View file @ 79e1e467
<style lang="less">
@import "../style/common.less";
.help-cont {
padding:30rpx;
padding-top:0;
background-color: #fff;
background-color: @whiteback;
.help-title{
font-size: 30rpx;
color:#333;
font-size: @font-large;
font-weight:bold;
padding-top:30rpx;
}
.help-info {
color:#666;
color:@greycolor;
font-size: 26rpx;
padding-left:20rpx;
line-height: 40rpx;
......
src/pages/index.wpy
View file @ 79e1e467
<style lang="less">
@import "../style/common";
page{
height: 100%;
background-color: #000;
......@@ -54,7 +55,7 @@
z-index: 9;
bottom: 400rpx;
width: 100%;
color: white;
color: @whitecolor;
clear: both;
&.anima {
animation:fadeout 2s;
......@@ -66,7 +67,7 @@
.leftcont {
width: 44%;
float: left;
font-size: 24rpx;
font-size: @font-normal;
margin-left: 30rpx;
}
.list-wrapper {
......@@ -87,7 +88,7 @@
vertical-align: middle;
border-radius: 20rpx;
display: inline-block;
font-size: 20rpx;
font-size: @font-small;
box-sizing: border-box;
padding:6rpx 15rpx;
background-color:rgba(238, 238, 238, 0.2);
......@@ -105,7 +106,7 @@
.list-item{
width:220rpx;
/*height: 330rpx;*/
background-color:#fff;
background-color:@whiteback;
border-radius: 10rpx;
transform: scale(0.7,0.7) translateY(65rpx);
transition: all 0.5s;
......@@ -122,7 +123,7 @@
border-radius: 10rpx;
}
.list-item .text {
font-size: 20rpx;
font-size: @font-small;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //行数
......@@ -132,13 +133,13 @@
margin-top:10rpx;
}
.list-item .price{
color:#FF5D15;
font-size:22rpx;
color:@maincolor;
font-size:@font-common;
margin-top:2rpx;
}
.list-item .buy{
font-size: 16rpx;
color:#AAA;
color:@darkgrey;
}
.list-item.subright {
transform: scale(0.85,0.85) translateY(26rpx) translateX(25rpx);
......@@ -166,7 +167,7 @@
position: relative;
top:200px;
padding: 50rpx 0;
background-color: #fff;
background-color: @whiteback;
border-radius: 20rpx;
.text {
color:#333;
......
src/pages/myraffles.wpy
View file @ 79e1e467
<style lang="less">
@import "../style/common";
.raffles-list{
padding-bottom:30rpx;
}
.raffle-none{
font-size: 28rpx;
font-size: @font-middle;
padding-top:300rpx;
text-align: center;
}
.raffle-item{
background-color: #fff;
background-color: @whiteback;
padding:30rpx 0 0 30rpx;
overflow: hidden;
.item-img{
......@@ -33,8 +34,8 @@
overflow: hidden;
}
.item-corn{
color:#FF5D15;
font-size: 28rpx;
color:@maincolor;
font-size: @font-middle;
position: absolute;
bottom:30rpx;
}
......@@ -42,22 +43,22 @@
position: absolute;
right:30rpx;
top:30%;
font-size: 28rpx;
font-size: @font-middle;
}
.item-button{
height:60rpx;
color:#fff;
background-color: #FF5D15;
color:@whitecolor;
background-color: @maincolor;
border-radius: 10rpx;
text-align: center;
line-height: 60rpx;
font-size: 28rpx;
font-size: @font-middle;
}
.grey{
color:#999;
color:@lightgrey;
}
.red{
color:#FF1212
color:@redcolor;
}
.green{
color:#097A00;
......
src/pages/prize.wpy
View file @ 79e1e467
<style lang="less">
@import "../style/common.less";
.prize-top {
background-color: #fff;
background-color: @whiteback;
padding:30rpx 50rpx;
.img{
display: block;
margin:0 auto;
width: 400rpx;
.van-image {
box-shadow:0px 3rpx 13rpx 1rpx rgba(163,163,163,0.38);
box-shadow:0 3rpx 13rpx 1rpx rgba(163,163,163,0.38);
}
}
.goodsname{
padding:25rpx 0;
font-size: 28rpx;
color:#333;
font-size: @font-middle;
}
.prize-info{
color:#999;
color:@lightgrey;
font-size: 26rpx;
.red {
color:#FF1212;
color:@redcolor;
}
}
}
......@@ -27,7 +27,7 @@
padding-top:50rpx;
.address-title {
font-size: 32rpx;
color: #666;
color: @greycolor;
padding-left:30rpx;
}
.address-cont{
......@@ -40,7 +40,7 @@
.footer{
width:100%;
height: 110rpx;
background-color: #fff;
background-color: @whiteback;
position: fixed;
bottom:0;
left:0;
......@@ -48,18 +48,18 @@
position: absolute;
width:160rpx;
height:70rpx;
color:#fff;
color:@whitecolor;
border-radius: 10rpx;
background-color: #FF5D15;
background-color: @maincolor;
right:30rpx;
top:20rpx;
line-height: 70rpx;
text-align: center;
font-size: 30rpx;
font-size: @font-large;
}
}
.van-picker .van-picker__cancel,.van-picker .van-picker__confirm{
color:#FF5D15;
color:@maincolor;
}
</style>
<template>
......
src/pages/raffle.wpy
View file @ 79e1e467
<style lang="less">
@import "../style/common.less";
.raffle-wrapper {
width:100%;
height:100%;
background-color:#F1F1F1;
background-color:@greyback;
padding-top:40rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.raffle-content {
background-color: #fff;
background-color: @whiteback;
width: 94%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin:0 auto;
padding:50rpx 50rpx 40rpx 50rpx;
border-radius: 10rpx;
box-shadow:0px 2rpx 20rpx 0px rgba(188,188,188,0.75);
box-shadow:0 2rpx 20rpx 0 rgba(188,188,188,0.75);
.img .van-image {
box-shadow:0px 3rpx 13rpx 1rpx rgba(163,163,163,0.38);
box-shadow:0 3rpx 13rpx 1rpx rgba(163,163,163,0.38);
}
}
.goodsinfo {
margin-top:15rpx;
overflow: hidden;
.text {
font-size: 28rpx;
font-size: @font-middle;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //行数
......@@ -40,48 +39,48 @@
.money{
float: right;
width:30%;
color:#FF5D15;
font-size: 30rpx;
color:@maincolor;
font-size: @font-large;
text-align: right;
font-weight:bold;
}
}
.raffle-chance {
font-size: 24rpx;
color:#666;
font-size: @font-normal;
color:@greycolor;
margin-top:20rpx;
}
.raffle-progress {
font-size: 24rpx;
color:#666;
font-size: @font-normal;
color:@greycolor;
}
.progress {
width: 298rpx;
height:18rpx;
background-color:#fff;
border:1px solid #FF5D15;
background-color:@whiteback;
border:1px solid @maincolor;
border-radius: 4rpx;
color:#666;
color:@greycolor;
display: inline-block;
position: relative;
top:3rpx;
.orange {
height:100%;
transition:all 1s;
background-color: #FF5D15;
background-color: @maincolor;
}
}
.pronumber{
font-size: 20rpx;
color:#666;
font-size: @font-small;
color:@greycolor;
margin-left:10rpx;
position: relative;
top:-3rpx;
}
.user-wish {
padding-left:35rpx;
font-size: 24rpx;
color:#aaa;
font-size: @font-normal;
color:@darkgrey;
margin-top:25rpx;
height:50rpx;
line-height: 50rpx;
......@@ -94,8 +93,8 @@
vertical-align: middle;
position: relative;
&.checked{
background-color: #FF5D15;
border:3rpx solid #FF5D15;
background-color: @maincolor;
border:3rpx solid @maincolor;
}
}
.checkicon {
......@@ -117,12 +116,12 @@
width:380rpx;
height:70rpx;
line-height: 70rpx;
background-color: #FF5D15;
background-color: @maincolor;
border-radius:10rpx;
margin:0 auto;
margin-top:80rpx;
font-size: 34rpx;
color:#fff;
color:@whitecolor;
}
</style>
<template>
......
src/style/common.less 0 → 100644
View file @ 79e1e467
// 主颜色
@maincolor: #ff5d15;
@redcolor: #FF1212;
//字体颜色
@fontcolor:#333;
@greycolor: #666;
@lightgrey: #999;
@whitecolor: #fff;
@darkgrey: #aaa;
//背景颜色
@whiteback:#fff;
@greyback: #f1f1f1;
//字体大小
@font-normal: 24rpx;
@font-small:20rpx;
@font-common:22rpx;
@font-middle:28rpx;
@font-large:30rpx;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment