|
|
@@ -10,7 +10,13 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <button class="admin-button-com middle blue" style="border:none;height:70upx;position: absolute;right:20upx;top:180upx;z-index:9999;" @click="buyProduct()">买花材</button>
|
|
|
+ <view class="buy-material-container">
|
|
|
+ <button class="buy-material-btn" @click="buyProduct()">
|
|
|
+ <view class="btn-content">
|
|
|
+ <text class="btn-text">买花材</text>
|
|
|
+ </view>
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
|
|
|
<scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop">
|
|
|
<view v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']" :data-current="index" @tap.stop="swichNav($event ,item)" >
|
|
|
@@ -416,4 +422,330 @@ page {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.buy-material-container {
|
|
|
+ position: absolute;
|
|
|
+ right: 20upx;
|
|
|
+ top: 180upx;
|
|
|
+ z-index: 9999;
|
|
|
+}
|
|
|
+
|
|
|
+.buy-material-btn {
|
|
|
+ position: relative;
|
|
|
+ background: linear-gradient(135deg, #4caf50, #66bb6a, #81c784);
|
|
|
+ border: none;
|
|
|
+ border-radius: 50upx;
|
|
|
+ padding: 0;
|
|
|
+ height: 80upx;
|
|
|
+ min-width: 160upx;
|
|
|
+ box-shadow: 0 8upx 20upx rgba(76, 175, 80, 0.3);
|
|
|
+ overflow: hidden;
|
|
|
+ animation: material-pulse 2s infinite;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: -100%;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(90deg,
|
|
|
+ transparent,
|
|
|
+ rgba(255, 255, 255, 0.3),
|
|
|
+ transparent
|
|
|
+ );
|
|
|
+ animation: material-shine 3s infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: scale(0.95);
|
|
|
+ box-shadow: 0 4upx 10upx rgba(76, 175, 80, 0.4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-text {
|
|
|
+ color: white;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-weight: bold;
|
|
|
+ text-shadow: 0 2upx 4upx rgba(0, 0, 0, 0.2);
|
|
|
+ margin: 0 8upx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes material-pulse {
|
|
|
+ 0% {
|
|
|
+ box-shadow: 0 8upx 20upx rgba(76, 175, 80, 0.3);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ box-shadow: 0 12upx 30upx rgba(76, 175, 80, 0.4);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ box-shadow: 0 8upx 20upx rgba(76, 175, 80, 0.3);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes material-shine {
|
|
|
+ 0% {
|
|
|
+ left: -100%;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ left: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes material-bounce {
|
|
|
+ 0%, 20%, 50%, 80%, 100% {
|
|
|
+ transform: translateY(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;
|
|
|
+ }
|
|
|
+}
|
|
|
+*/
|
|
|
+
|
|
|
+/*
|
|
|
+=== 🌿叶子装饰风格的设计方案 ===
|
|
|
+
|
|
|
+方案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>
|
