project init
1.首页微调 2.新增游戏-鉴色
This commit is contained in:
rucky
247
src/style/_mixin.scss
Normal file
247
src/style/_mixin.scss
Normal file
@@ -0,0 +1,247 @@
|
||||
@mixin center($width: null, $height: null) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
@if not $width and not $height {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
@else if $width and $height {
|
||||
width: $width;
|
||||
height: $height;
|
||||
margin: -($height / 2) #{0 0} -($width / 2);
|
||||
}
|
||||
|
||||
@else if not $height {
|
||||
width: $width;
|
||||
margin-left: -($width / 2);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@else {
|
||||
height: $height;
|
||||
margin-top: -($height / 2);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin hz-center($width: null, $height: null) {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
||||
@if not $width and not $height {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
@else if $width and $height {
|
||||
width: $width;
|
||||
height: $height;
|
||||
margin-left: -($width / 2);
|
||||
}
|
||||
|
||||
@else if not $height {
|
||||
width: $width;
|
||||
margin-left: -($width / 2);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@else {
|
||||
height: $height;
|
||||
margin-top: -($height / 2);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin pst($top: null, $left: null, $width: null, $height: null) {
|
||||
position: absolute;
|
||||
top: $top;
|
||||
left: $left;
|
||||
|
||||
@if $width and $height {
|
||||
width: $width;
|
||||
height: $height;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@mixin opacity($opacity) {
|
||||
opacity: $opacity;
|
||||
$opacity-ie: $opacity * 100;
|
||||
filter: alpha(opacity=$opacity-ie);
|
||||
}
|
||||
|
||||
@mixin ell() {
|
||||
//
|
||||
overflow: hidden;
|
||||
-ms-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
//多行超出省略号
|
||||
@mixin ell2() {
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
//.arrow{
|
||||
// @include arrow(bottom,10px,#F00);
|
||||
//
|
||||
@mixin arrow($direction, $size, $color) {
|
||||
width: 0;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
overflow: hidden;
|
||||
border-width: $size;
|
||||
cursor: pointer;
|
||||
|
||||
@if $direction==top {
|
||||
border-style: dashed dashed solid dashed;
|
||||
border-color: transparent transparent $color transparent;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
@else if $direction==bottom {
|
||||
border-style: solid dashed dashed dashed;
|
||||
border-color: $color transparent transparent transparent;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@else if $direction==right {
|
||||
border-style: dashed dashed dashed solid;
|
||||
border-color: transparent transparent transparent $color;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
@else if $direction==left {
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent $color transparent transparent;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
// clearfix
|
||||
@mixin clr {
|
||||
&:after {
|
||||
clear: both;
|
||||
content: '.';
|
||||
display: block;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
*height: 1%;
|
||||
}
|
||||
|
||||
/*渐变(从上到下）*/
|
||||
@mixin linear-gradient($direction:bottom, $color1:transparent, $color2:#306eff, $color3:transparent) {
|
||||
//background: -webkit-linear-gradient($direction,$colorTop, $colorCenter, $colorBottom); /* Safari 5.1 - 6.0 */
|
||||
background: -o-linear-gradient($direction, $color1, $color2, $color3);
|
||||
/* Opera 11.1 - 12.0 */
|
||||
background: -moz-linear-gradient($direction, $color1, $color2, $color3);
|
||||
/* Firefox 3.6 - 15 */
|
||||
background: linear-gradient(to $direction, $color1, $color2, $color3);
|
||||
/* 标准的语法 */
|
||||
|
||||
}
|
||||
|
||||
/* 行高 */
|
||||
@mixin line-height($height:30px, $line-height:30px) {
|
||||
@if ($height !=null) {
|
||||
height: $height;
|
||||
}
|
||||
|
||||
@if ($line-height !=null) {
|
||||
line-height: $line-height;
|
||||
}
|
||||
}
|
||||
|
||||
/* 定义滚动条样式 圆角和阴影不需要则传入null */
|
||||
@mixin scrollBar($width:10px, $height:10px, $outColor:$bgColor, $innerColor:$bgGrey, $radius:5px, $shadow:null) {
|
||||
|
||||
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
|
||||
&::-webkit-scrollbar {
|
||||
width: $width;
|
||||
height: $height;
|
||||
background-color: $outColor;
|
||||
}
|
||||
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
&::-webkit-scrollbar-track {
|
||||
@if ($shadow !=null) {
|
||||
-webkit-box-shadow: $shadow;
|
||||
}
|
||||
|
||||
@if ($radius !=null) {
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
background-color: $outColor;
|
||||
}
|
||||
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
&::-webkit-scrollbar-thumb {
|
||||
@if ($shadow !=null) {
|
||||
-webkit-box-shadow: $shadow;
|
||||
}
|
||||
|
||||
@if ($radius !=null) {
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
background-color: $innerColor;
|
||||
border: 1px solid $innerColor;
|
||||
}
|
||||
}
|
||||
|
||||
/* css3动画 默认3s宽度到200px */
|
||||
@mixin animation($from:(width:0px), $to:(width:200px), $name:mymove, $animate:mymove 2s 1 linear infinite) {
|
||||
-webkit-animation: $animate;
|
||||
-o-animation: $animate;
|
||||
animation: $animate;
|
||||
|
||||
@keyframes #{$name} {
|
||||
from {
|
||||
|
||||
@each $key,
|
||||
$value in $from {
|
||||
#{$key}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
|
||||
@each $key,
|
||||
$value in $to {
|
||||
#{$key}: #{$value};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes #{$name} {
|
||||
from {
|
||||
|
||||
@each $key,
|
||||
$value in $from {
|
||||
$key: $value;
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
|
||||
@each $key,
|
||||
$value in $to {
|
||||
$key: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1
src/style/_variables.scss
Normal file
1
src/style/_variables.scss
Normal file
@@ -0,0 +1 @@
|
||||
$color-main:red;
|
||||
357
src/style/common.scss
Normal file
357
src/style/common.scss
Normal file
@@ -0,0 +1,357 @@
|
||||
html {
|
||||
font-size: 13.33333vw
|
||||
}
|
||||
|
||||
|
||||
a:active {
|
||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-focus: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
html {
|
||||
font-size: 42.667PX;
|
||||
font-size: 13.33333vw
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 321px) and (max-width:360px) {
|
||||
html {
|
||||
font-size: 48PX;
|
||||
font-size: 13.33333vw
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 361px) and (max-width:375px) {
|
||||
html {
|
||||
font-size: 50PX;
|
||||
font-size: 13.33333vw
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 376px) and (max-width:393px) {
|
||||
html {
|
||||
font-size: 52.4PX;
|
||||
font-size: 13.33333vw
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 394px) and (max-width:412px) {
|
||||
html {
|
||||
font-size: 54.93PX;
|
||||
font-size: 13.33333vw
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 413px) and (max-width:414px) {
|
||||
html {
|
||||
font-size: 55.2PX;
|
||||
font-size: 13.33333vw
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 415px) and (max-width:480px) {
|
||||
html {
|
||||
font-size: 64PX;
|
||||
font-size: 13.33333vw
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 481px) and (max-width:540px) {
|
||||
html {
|
||||
font-size: 72PX;
|
||||
font-size: 13.33333vw
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 541px) and (max-width:640px) {
|
||||
html {
|
||||
font-size: 85.33PX;
|
||||
font-size: 13.33333vw
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 641px) and (max-width:720px) {
|
||||
html {
|
||||
font-size: 96PX;
|
||||
font-size: 13.33333vw
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 721px) and (max-width:768px) {
|
||||
html {
|
||||
font-size: 102.4PX;
|
||||
font-size: 13.33333vw
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
html {
|
||||
font-size: 102.4PX;
|
||||
|
||||
#app {
|
||||
width: 768PX;
|
||||
margin: 0 auto
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
display: block;
|
||||
clear: both;
|
||||
content: "";
|
||||
visibility: hidden;
|
||||
height: 0
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea,
|
||||
a {
|
||||
border: none;
|
||||
outline: none
|
||||
}
|
||||
|
||||
/* page change */
|
||||
$--transition-time: 350ms;
|
||||
|
||||
.back-enter-active,
|
||||
.back-leave-active,
|
||||
.forward-enter-active,
|
||||
.forward-leave-active {
|
||||
will-change: transform;
|
||||
transition: all $--transition-time;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000;
|
||||
}
|
||||
|
||||
.back-enter {
|
||||
opacity: 0.75;
|
||||
transform: translate3d(-35%, 0, 0) !important;
|
||||
}
|
||||
|
||||
.back-enter-active {
|
||||
z-index: -1 !important;
|
||||
transition: all $--transition-time linear;
|
||||
}
|
||||
|
||||
.back-leave-active {
|
||||
transform: translate3d(100%, 0, 0) !important;
|
||||
transition: all $--transition-time linear;
|
||||
}
|
||||
|
||||
.forward-enter {
|
||||
transform: translate3d(100%, 0, 0) !important;
|
||||
}
|
||||
|
||||
.forward-enter-active {
|
||||
transition: all $--transition-time linear;
|
||||
}
|
||||
|
||||
.forward-leave-active {
|
||||
z-index: -1;
|
||||
opacity: 0.65;
|
||||
transform: translate3d(-35%, 0, 0) !important;
|
||||
transition: all $--transition-time linear;
|
||||
}
|
||||
|
||||
.slide-left-leave-active,
|
||||
.slide-right-leave-active,
|
||||
.slide-left-enter-active,
|
||||
.slide-right-enter-active {
|
||||
// transition: all 3S;
|
||||
transition: all $--transition-time;
|
||||
}
|
||||
|
||||
.slide-right-enter {
|
||||
transform: translate(-100%, 0);
|
||||
}
|
||||
|
||||
.slide-right-leave-active {
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
|
||||
.slide-left-enter {
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
|
||||
.slide-left-leave-active {
|
||||
transform: translate(-100%, 0);
|
||||
}
|
||||
|
||||
|
||||
$easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
|
||||
$easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
|
||||
$easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
||||
$easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
|
||||
$easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
$easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
||||
$easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
$easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
$easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||
$easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
$easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);
|
||||
$easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
$easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
$easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
$easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
|
||||
$easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
$easeInOutExpo: cubic-bezier(1, 0, 0, 1);
|
||||
$easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335);
|
||||
$easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||
$easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
|
||||
$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
|
||||
|
||||
|
||||
.fade-enter-active {
|
||||
transition: all 0.5s $easeOutCirc;
|
||||
|
||||
.catalogue {
|
||||
transition: all 0.35s $easeOutCubic;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-leave-active {
|
||||
transition: all 0.35s $easeInOutQuart;
|
||||
|
||||
.catalogue {
|
||||
transition: all 0.35s;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
|
||||
.catalogue {
|
||||
transform: scale(0.2);
|
||||
|
||||
// .closeBtn {
|
||||
// transform: scale(0.2);
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
html .bscroll-vertical-scrollbar {
|
||||
background-color: rgb(239, 171, 63);
|
||||
width: 7px !important;
|
||||
bottom: 30px !important;
|
||||
top: 40px !important;
|
||||
right: 13px !important;
|
||||
// overflow-x: visible;
|
||||
|
||||
// .bscroll-indicator {
|
||||
// box-sizing: border-box;
|
||||
// position: absolute;
|
||||
// border: none !important;
|
||||
|
||||
// border-radius: 50% !important;
|
||||
// background-color: # !important;
|
||||
// width: 16px !important;
|
||||
// height: 16px !important;
|
||||
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
||||
.miniScreen {
|
||||
|
||||
// transform: translateY(60px);
|
||||
.catalogue {
|
||||
transform-origin: 50% 50% !important;
|
||||
transform: scale(0.97);
|
||||
|
||||
// .closeBtn {
|
||||
// transform: scale(0.2);
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
.catalogue2 {
|
||||
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.sharePop .catalogue {
|
||||
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
.winCon {
|
||||
|
||||
transform: scale(0.77) !important;
|
||||
}
|
||||
|
||||
.failCon {
|
||||
|
||||
transform: scale(0.9) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.btn-ani {
|
||||
transition: all 0.15s linear;
|
||||
}
|
||||
|
||||
.btn-ani-right {
|
||||
animation: btn-ani-right 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-ani-left {
|
||||
animation: btn-ani-left 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-ani-up {
|
||||
animation: btn-ani-up 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-ani-down {
|
||||
animation: btn-ani-down 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-ani-big {
|
||||
animation: btn-ani-big 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes btn-ani-right {
|
||||
50% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes btn-ani-left {
|
||||
50% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes btn-ani-up {
|
||||
50% {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes btn-ani-down {
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes btn-ani-big {
|
||||
50% {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
}
|
||||
46
src/style/mint-ui-toast.scss
Normal file
46
src/style/mint-ui-toast.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
.mint-toast {
|
||||
@include hz_center(500px, 120px);
|
||||
// max-width: 80%;
|
||||
border-radius: 15px;
|
||||
background-color: rgba($color: #000000, $alpha: 0.93);
|
||||
line-height: 100px;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
z-index: 1000;
|
||||
// pointer-events: none;
|
||||
transition: opacity .3s linear;
|
||||
}
|
||||
|
||||
.mint-toast.is-placebottom {
|
||||
bottom: 50px;
|
||||
transform: translate(0, 0)
|
||||
}
|
||||
|
||||
.mint-toast.is-placemiddle {
|
||||
top: 50%;
|
||||
transform: translate(0, -50%)
|
||||
}
|
||||
|
||||
.mint-toast.is-placetop {
|
||||
top: 50px;
|
||||
transform: translate(0, 0)
|
||||
}
|
||||
|
||||
.mint-toast-icon {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 56px
|
||||
}
|
||||
|
||||
.mint-toast-text {
|
||||
font-size: 32px;
|
||||
display: block;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.mint-toast-pop-enter,
|
||||
.mint-toast-pop-leave-active {
|
||||
opacity: 0
|
||||
}
|
||||
Reference in New Issue
Block a user