|
|
@@ -214,33 +214,6 @@ export default {
|
|
|
padding: 0 15upx;
|
|
|
box-sizing: border-box;
|
|
|
background: linear-gradient(to bottom,#3385FF, #fff);
|
|
|
- .nav{
|
|
|
- position:absolute;
|
|
|
- top:148upx;
|
|
|
- .selected{
|
|
|
- width:auto;
|
|
|
- height:60upx;
|
|
|
- line-height:60upx;
|
|
|
- display:inline-block;
|
|
|
- font-weight:bold;
|
|
|
- font-size:38upx;
|
|
|
- border-bottom:1upx solid red;
|
|
|
- margin-left:200upx;
|
|
|
- text-align:left;
|
|
|
- color:red;
|
|
|
- }
|
|
|
- .not-selected{
|
|
|
- width:auto;
|
|
|
- height:60upx;
|
|
|
- line-height:60upx;
|
|
|
- display:inline-block;
|
|
|
- font-weight:bold;
|
|
|
- font-size:38upx;
|
|
|
- margin-left:110upx;
|
|
|
- text-align:left;
|
|
|
- color:#3a6363;
|
|
|
- }
|
|
|
- }
|
|
|
&>.header_inside{
|
|
|
position: relative;
|
|
|
height: 124upx;
|
|
|
@@ -271,58 +244,11 @@ export default {
|
|
|
width: 580upx;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
- .level{
|
|
|
- margin-left:20upx;
|
|
|
- color:white;
|
|
|
- background:#6da3f5;
|
|
|
- border:1px solid #6da3f5;
|
|
|
- border-radius:50upx;
|
|
|
- font-size:22upx;
|
|
|
- padding:6upx 10upx;
|
|
|
- position:absolute;
|
|
|
- }
|
|
|
- .level-common{
|
|
|
- margin-left:30upx;
|
|
|
- color:white;
|
|
|
- background:#76a9f5;
|
|
|
- border:1px solid #76a9f5;
|
|
|
- border-radius:50upx;
|
|
|
- font-size:20upx;
|
|
|
- padding:5upx 10upx;
|
|
|
- position:absolute;
|
|
|
- }
|
|
|
}
|
|
|
- &>.shop_intro{
|
|
|
- margin-top: 15upx;
|
|
|
- font-size: 26upx;
|
|
|
- font-weight: 400;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- }
|
|
|
- .hbInfo{
|
|
|
- font-size:20upx;
|
|
|
- position: absolute;
|
|
|
- right:15upx;
|
|
|
- top: 120upx;
|
|
|
- color: #3385FF;
|
|
|
}
|
|
|
- .hbImg{
|
|
|
- width:120upx;
|
|
|
- height:120upx;
|
|
|
- position: absolute;
|
|
|
- right:0;
|
|
|
- top: 10upx;
|
|
|
- background: white;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .fadeOut{
|
|
|
- height: 0;
|
|
|
- overflow: hidden;
|
|
|
- animation-name: fadeOutFrames;
|
|
|
- animation-duration:.3s;
|
|
|
- }
|
|
|
.fadeIn{
|
|
|
height:180upx;
|
|
|
overflow: hidden;
|
|
|
@@ -406,12 +332,14 @@ page {
|
|
|
.goods-det {
|
|
|
padding-top: 18upx;
|
|
|
font-size: 28upx;
|
|
|
- .goods-name {
|
|
|
- margin-bottom: 10upx;
|
|
|
- }
|
|
|
- .goods-sales {
|
|
|
- color: $fontColor3;
|
|
|
- font-size: 24upx;
|
|
|
+ .goods-det-top {
|
|
|
+ .goods-name {
|
|
|
+ margin-bottom: 10upx;
|
|
|
+ }
|
|
|
+ .goods-sales {
|
|
|
+ color: $fontColor3;
|
|
|
+ font-size: 24upx;
|
|
|
+ }
|
|
|
}
|
|
|
.goods-price {
|
|
|
margin-top: 50upx;
|
|
|
@@ -501,251 +429,15 @@ page {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-@keyframes material-bounce {
|
|
|
- 0%, 20%, 50%, 80%, 100% {
|
|
|
+@keyframes fadeInFrames {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
transform: translateY(0);
|
|
|
+ height: 0;
|
|
|
}
|
|
|
- 40% {
|
|
|
- transform: translateY(-4upx);
|
|
|
- }
|
|
|
- 60% {
|
|
|
- transform: translateY(-2upx);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes leaf-sway {
|
|
|
- 0%, 100% {
|
|
|
- transform: rotate(0deg);
|
|
|
- }
|
|
|
- 25% {
|
|
|
- transform: rotate(5deg);
|
|
|
- }
|
|
|
- 75% {
|
|
|
- transform: rotate(-5deg);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
-=== 树枝枝条风格的设计方案 ===
|
|
|
-
|
|
|
-方案A：简洁树枝束（当前应用）
|
|
|
-- 7根棕色树枝，长短不一
|
|
|
-- 6个绿色小叶子装饰
|
|
|
-- 底部"20支"白色文字
|
|
|
-
|
|
|
-方案B：捆扎枝条束
|
|
|
-如需使用此方案，请将.material-icon-css样式替换为：
|
|
|
-
|
|
|
-.material-icon-css {
|
|
|
- width: 32upx;
|
|
|
- height: 24upx;
|
|
|
- margin-right: 8upx;
|
|
|
- position: relative;
|
|
|
- animation: material-bounce 1.8s infinite;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 1upx;
|
|
|
- height: 16upx;
|
|
|
- background: #795548;
|
|
|
- left: 16upx;
|
|
|
- top: 2upx;
|
|
|
- border-radius: 1upx;
|
|
|
- box-shadow:
|
|
|
- -8upx 0upx 0 1upx #795548,
|
|
|
- -4upx 1upx 0 0upx #795548,
|
|
|
- 4upx -1upx 0 0upx #795548,
|
|
|
- 8upx 1upx 0 1upx #795548,
|
|
|
- -12upx 2upx 0 0upx #795548,
|
|
|
- 12upx 0upx 0 0upx #795548;
|
|
|
- }
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 24upx;
|
|
|
- height: 2upx;
|
|
|
- background: #8bc34a;
|
|
|
- bottom: 6upx;
|
|
|
- left: 4upx;
|
|
|
- border-radius: 1upx;
|
|
|
- box-shadow:
|
|
|
- 0 -10upx 0 0 #8bc34a;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-方案C：自然枝条+数字标签
|
|
|
-.material-icon-css {
|
|
|
- width: 34upx;
|
|
|
- height: 24upx;
|
|
|
- margin-right: 8upx;
|
|
|
- position: relative;
|
|
|
- animation: material-bounce 1.8s infinite;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 2upx;
|
|
|
- height: 14upx;
|
|
|
- background: #6d4c41;
|
|
|
- left: 16upx;
|
|
|
- top: 6upx;
|
|
|
- border-radius: 1upx 1upx 0 0;
|
|
|
- box-shadow:
|
|
|
- -6upx -2upx 0 -1upx #6d4c41,
|
|
|
- -3upx 1upx 0 -1upx #6d4c41,
|
|
|
- 3upx -1upx 0 -1upx #6d4c41,
|
|
|
- 6upx 0upx 0 -1upx #6d4c41,
|
|
|
- -9upx 1upx 0 -1upx #6d4c41;
|
|
|
- }
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '20';
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 2upx;
|
|
|
- color: #fff;
|
|
|
- font-size: 14upx;
|
|
|
- font-weight: bold;
|
|
|
- text-shadow: 0 1upx 2upx rgba(0,0,0,0.3);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-方案D：细密枝条+叶片
|
|
|
-.material-icon-css {
|
|
|
- width: 28upx;
|
|
|
- height: 24upx;
|
|
|
- margin-right: 8upx;
|
|
|
- position: relative;
|
|
|
- animation: material-bounce 1.8s infinite;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 1upx;
|
|
|
- height: 20upx;
|
|
|
- background: #8d6e63;
|
|
|
- left: 14upx;
|
|
|
- top: 2upx;
|
|
|
- border-radius: 1upx;
|
|
|
- box-shadow:
|
|
|
- -2upx 0upx 0 0 #8d6e63,
|
|
|
- -4upx 1upx 0 0 #8d6e63,
|
|
|
- -6upx -1upx 0 0 #8d6e63,
|
|
|
- 2upx 1upx 0 0 #8d6e63,
|
|
|
- 4upx -1upx 0 0 #8d6e63,
|
|
|
- 6upx 0upx 0 0 #8d6e63,
|
|
|
- -8upx 2upx 0 0 #8d6e63,
|
|
|
- 8upx 1upx 0 0 #8d6e63;
|
|
|
- }
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 2upx;
|
|
|
- height: 3upx;
|
|
|
- background: #66bb6a;
|
|
|
- border-radius: 50%;
|
|
|
- left: 13upx;
|
|
|
- top: 4upx;
|
|
|
- box-shadow:
|
|
|
- -3upx 2upx 0 0 #66bb6a,
|
|
|
- 3upx 1upx 0 0 #66bb6a,
|
|
|
- -5upx 4upx 0 0 #66bb6a,
|
|
|
- 5upx 3upx 0 0 #66bb6a,
|
|
|
- 0upx 14upx 0 -1upx #fff,
|
|
|
- -12upx 16upx 0 -1upx #fff;
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ height: 180upx;
|
|
|
}
|
|
|
}
|
|
|
-*/
|
|
|
-
|
|
|
-/*
|
|
|
-=== 🌿叶子装饰风格的设计方案 ===
|
|
|
-
|
|
|
-方案A：多片叶子装饰（当前应用）
|
|
|
-- 7根棕色树枝
|
|
|
-- 6片绿色叶子分布在树枝间
|
|
|
-- 叶子有轻微旋转角度，更自然
|
|
|
-
|
|
|
-方案B：三叶草风格
|
|
|
-如需使用此方案，请将.material-icon-css的&::after部分替换为：
|
|
|
-
|
|
|
-&::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 3upx;
|
|
|
- height: 3upx;
|
|
|
- background: #4caf50;
|
|
|
- border-radius: 50%;
|
|
|
- left: 24upx;
|
|
|
- top: 2upx;
|
|
|
- box-shadow:
|
|
|
- -2upx 0upx 0 0 #4caf50,
|
|
|
- -1upx -2upx 0 0 #4caf50,
|
|
|
- -8upx 3upx 0 0 #4caf50,
|
|
|
- -10upx 3upx 0 0 #4caf50,
|
|
|
- -9upx 1upx 0 0 #4caf50,
|
|
|
- -16upx 6upx 0 0 #4caf50,
|
|
|
- -18upx 6upx 0 0 #4caf50,
|
|
|
- -17upx 4upx 0 0 #4caf50;
|
|
|
-}
|
|
|
-
|
|
|
-方案C：藤蔓叶片风格
|
|
|
-&::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 2upx;
|
|
|
- height: 6upx;
|
|
|
- background: #66bb6a;
|
|
|
- border-radius: 2upx 6upx 6upx 2upx;
|
|
|
- left: 26upx;
|
|
|
- top: 1upx;
|
|
|
- transform: rotate(20deg);
|
|
|
- box-shadow:
|
|
|
- -6upx 2upx 0 0 #66bb6a,
|
|
|
- -12upx 4upx 0 0 #66bb6a,
|
|
|
- -18upx 6upx 0 0 #66bb6a,
|
|
|
- -4upx 8upx 0 -1upx #66bb6a,
|
|
|
- -10upx 10upx 0 -1upx #66bb6a,
|
|
|
- -16upx 12upx 0 -1upx #66bb6a;
|
|
|
-}
|
|
|
-
|
|
|
-方案D：散落叶子效果
|
|
|
-&::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 3upx;
|
|
|
- height: 5upx;
|
|
|
- background: #4caf50;
|
|
|
- border-radius: 0 5upx 5upx 0;
|
|
|
- left: 22upx;
|
|
|
- top: 0upx;
|
|
|
- transform: rotate(-30deg);
|
|
|
- box-shadow:
|
|
|
- -4upx 6upx 0 -1upx #4caf50,
|
|
|
- -8upx 2upx 0 -1upx #4caf50,
|
|
|
- -12upx 8upx 0 -1upx #4caf50,
|
|
|
- -16upx 4upx 0 -1upx #4caf50,
|
|
|
- -2upx 12upx 0 -1upx #66bb6a,
|
|
|
- -6upx 14upx 0 -1upx #66bb6a,
|
|
|
- -10upx 16upx 0 -1upx #66bb6a;
|
|
|
-}
|
|
|
-
|
|
|
-方案E：简约单叶
|
|
|
-&::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 6upx;
|
|
|
- height: 10upx;
|
|
|
- background: #4caf50;
|
|
|
- border-radius: 0 10upx 10upx 0;
|
|
|
- left: 22upx;
|
|
|
- top: 2upx;
|
|
|
- transform: rotate(-25deg);
|
|
|
- box-shadow:
|
|
|
- -8upx 8upx 0 -2upx #66bb6a,
|
|
|
- -16upx 6upx 0 -2upx #4caf50;
|
|
|
-}
|
|
|
-*/
|
|
|
</style>
|
