Compare commits
16 Commits
93d23d5524
...
ae84f20dda
| Author | SHA1 | Date |
|---|---|---|
|
|
ae84f20dda | |
|
|
a28ae29846 | |
|
|
de910f7e2f | |
|
|
e17e733c23 | |
|
|
7d74af82e9 | |
|
|
d20c3e1f98 | |
|
|
efb7d5b7cd | |
|
|
6776f3a777 | |
|
|
b7dc97ae38 | |
|
|
a01ad5deb3 | |
|
|
aef797ebf9 | |
|
|
216fc2c2c0 | |
|
|
60028a397a | |
|
|
e5c556b414 | |
|
|
2dd517193d | |
|
|
7f27468221 |
|
|
@ -1,18 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="default-share-page">
|
<view class="default-share-page">
|
||||||
<!-- 背景图片,替代CSS background -->
|
<!-- 背景图片,替代CSS background -->
|
||||||
<image
|
<img
|
||||||
class="share-bg-image"
|
class="share-bg-image"
|
||||||
src="/static/images/share-bg.jpg"
|
src="@/static/images/share-bg.jpg"
|
||||||
mode="scaleToFill"
|
|
||||||
crossorigin="anonymous"
|
crossorigin="anonymous"
|
||||||
@load="onBackgroundImageLoad"
|
@load="onBackgroundImageLoad"
|
||||||
@error="onBackgroundImageError"
|
@error="onBackgroundImageError"
|
||||||
></image>
|
/>
|
||||||
|
|
||||||
<view class="share-wrapper">
|
|
||||||
<view class="portal-frame" :class="{ 'is-loaded': isLoaded }">
|
|
||||||
<!-- 二维码样式区域 - 用户自定义样式位置 -->
|
|
||||||
<view class="qr-code-outer">
|
<view class="qr-code-outer">
|
||||||
<image
|
<image
|
||||||
class="qr-code"
|
class="qr-code"
|
||||||
|
|
@ -24,34 +19,24 @@
|
||||||
<view class="loader"></view>
|
<view class="loader"></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="member-code-outer">
|
||||||
<!-- 会员编号样式区域 - 用户自定义样式位置 -->
|
|
||||||
<text
|
<text
|
||||||
class="member-code-text"
|
class="member-code-text"
|
||||||
style="
|
style="
|
||||||
font-size: 30rpx;
|
font-size: 20rpx;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
"
|
"
|
||||||
>{{ desensitization(userInfo.memberCode) }}</text
|
>{{ desensitization(userInfo.memberCode) }}</text
|
||||||
>
|
>
|
||||||
|
|
||||||
<!-- 下载按钮 - 仅在非微信环境显示 -->
|
|
||||||
<button
|
|
||||||
v-if="!isWechat && shareButtonShow"
|
|
||||||
class="share-button"
|
|
||||||
@click="sharePage"
|
|
||||||
>
|
|
||||||
保存图片并分享
|
|
||||||
</button>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import html2canvas from 'html2canvas'
|
import html2canvas from 'html2canvas'
|
||||||
|
import { snapdom } from '@zumer/snapdom'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DefaultSharePage',
|
name: 'DefaultSharePage',
|
||||||
|
|
@ -108,7 +93,7 @@ export default {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
uni.showLoading({ title: '加载中...', mask: true })
|
uni.showLoading({ title: '加载中...' })
|
||||||
|
|
||||||
try {
|
try {
|
||||||
this.shareButtonShow = false
|
this.shareButtonShow = false
|
||||||
|
|
@ -145,30 +130,23 @@ export default {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(
|
const scale = 3
|
||||||
'开始html2canvas截取,容器尺寸:',
|
|
||||||
element.offsetWidth,
|
|
||||||
'x',
|
|
||||||
element.offsetHeight
|
|
||||||
)
|
|
||||||
|
|
||||||
html2canvas(element, {
|
html2canvas(element, {
|
||||||
useCORS: true,
|
useCORS: true,
|
||||||
allowTaint: true,
|
// allowTaint: true,
|
||||||
backgroundColor: null,
|
backgroundColor: null,
|
||||||
scale: 2,
|
scale,
|
||||||
dpi: 400,
|
// canvas,
|
||||||
logging: true,
|
|
||||||
width: element.offsetWidth,
|
width: element.offsetWidth,
|
||||||
height: element.offsetHeight,
|
height: element.offsetHeight,
|
||||||
windowWidth: element.offsetWidth,
|
|
||||||
windowHeight: element.offsetHeight,
|
|
||||||
scrollX: 0,
|
|
||||||
scrollY: 0,
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
})
|
})
|
||||||
.then(canvas => {
|
.then(canvas => {
|
||||||
|
const context = canvas.getContext('2d')
|
||||||
|
// context.scale(2, 2)
|
||||||
|
context.mozImageSmoothingEnabled = false
|
||||||
|
context.webkitImageSmoothingEnabled = false
|
||||||
|
context.msImageSmoothingEnabled = false
|
||||||
|
context.imageSmoothingEnabled = false
|
||||||
const dataUrl = canvas.toDataURL('image/jpeg', 1)
|
const dataUrl = canvas.toDataURL('image/jpeg', 1)
|
||||||
this.$emit('share-generated', dataUrl)
|
this.$emit('share-generated', dataUrl)
|
||||||
resolve()
|
resolve()
|
||||||
|
|
@ -191,8 +169,9 @@ export default {
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.default-share-page {
|
.default-share-page {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 600rpx;
|
||||||
height: 100%;
|
height: 1296rpx;
|
||||||
|
// height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -203,8 +182,9 @@ export default {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 600rpx;
|
||||||
height: 100%;
|
height: 1296rpx;
|
||||||
|
// height: 100%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -238,8 +218,8 @@ export default {
|
||||||
|
|
||||||
/* 二维码样式区域 - 用户自定义样式位置 */
|
/* 二维码样式区域 - 用户自定义样式位置 */
|
||||||
.qr-code-outer {
|
.qr-code-outer {
|
||||||
width: 400rpx;
|
width: 140rpx;
|
||||||
height: 400rpx;
|
height: 140rpx;
|
||||||
background: rgba(255, 255, 255, 0.98);
|
background: rgba(255, 255, 255, 0.98);
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
box-shadow: 0px 8rpx 20rpx rgba(50, 50, 90, 0.06);
|
box-shadow: 0px 8rpx 20rpx rgba(50, 50, 90, 0.06);
|
||||||
|
|
@ -249,6 +229,13 @@ export default {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 12rpx;
|
padding: 12rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
// bottom: 460rpx;
|
||||||
|
left: 374rpx;
|
||||||
|
top: 708rpx;
|
||||||
|
// right: 130rpx;
|
||||||
|
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.qr-code,
|
.qr-code,
|
||||||
|
|
@ -286,6 +273,16 @@ export default {
|
||||||
.member-code-text {
|
.member-code-text {
|
||||||
/* 用户可以在这里自定义会员编号的样式 */
|
/* 用户可以在这里自定义会员编号的样式 */
|
||||||
}
|
}
|
||||||
|
.member-code-outer {
|
||||||
|
position: absolute;
|
||||||
|
top: 1086rpx;
|
||||||
|
left: 246rpx;
|
||||||
|
// width: 300rpx;
|
||||||
|
text-align: center;
|
||||||
|
// background: rgb(217, 24, 25);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
/* 下载按钮样式 */
|
/* 下载按钮样式 */
|
||||||
.share-button {
|
.share-button {
|
||||||
|
|
|
||||||
|
|
@ -14,48 +14,56 @@
|
||||||
<view class="guide-text">
|
<view class="guide-text">
|
||||||
<text>尊敬的经销商伙伴们:</text>
|
<text>尊敬的经销商伙伴们:</text>
|
||||||
<text
|
<text
|
||||||
>为了让大家顺利快捷地提现,符合法律法规的要求,现需完成提现绑定操作,步骤如下,按序操作即可:</text
|
>为保障大家能够顺利、快捷地进行提现操作,同时积极响应并符合十一后国家法律法规的最新要求,现需各位经销商伙伴完成提现绑定操作。以下是详细的操作步骤,请大家按照顺序依次进行:</text
|
||||||
>
|
>
|
||||||
</view>
|
</view>
|
||||||
<view class="guide-steps">
|
<view class="guide-steps">
|
||||||
<view class="step-item">
|
<view class="step-item">
|
||||||
<text class="step-number">1.</text>
|
<text class="step-number">1.</text>
|
||||||
<text class="step-text"
|
<text class="step-text"
|
||||||
>微信扫码后,用实际收款人本人手机号登录;</text
|
>扫码进入签约页面:使用微信扫描指定二维码,进入相关操作界面后,点击“去签约”。</text
|
||||||
>
|
>
|
||||||
</view>
|
</view>
|
||||||
<view class="step-item">
|
<view class="step-item">
|
||||||
<text class="step-number">2.</text>
|
<text class="step-number">2.</text>
|
||||||
<text class="step-text"
|
<text class="step-text"
|
||||||
>点击 "继续签约",上传本人身份证照片完成实名认证;</text
|
>在线签约:在跳转的页面中,找到并点击“在线签约”选项。同意隐私政策:仔细阅读隐私政策申明,确认无误后,点击“同意并继续”。</text
|
||||||
>
|
>
|
||||||
</view>
|
</view>
|
||||||
<view class="step-item">
|
<view class="step-item">
|
||||||
<text class="step-number">3.</text>
|
<text class="step-number">3.</text>
|
||||||
<text class="step-text"
|
<text class="step-text"
|
||||||
>进入合同页面,选择 "默认印章",输入收到的验证码完成签约;</text
|
>绑定手机号码:输入绑卡人的手机号码,获取验证码,将收到的验证码准确输入后,点击“下一步”。</text
|
||||||
>
|
>
|
||||||
</view>
|
</view>
|
||||||
<view class="step-item">
|
<view class="step-item">
|
||||||
<text class="step-number">4.</text>
|
<text class="step-number">4.</text>
|
||||||
<text class="step-text"
|
<text class="step-text"
|
||||||
>返回首页点击 "提现"(若显示 "开户",下拉刷新页面即可);</text
|
>上传身份证照片:可选择现场拍摄身份证正反面照片,或从手机相册中选取已保存的身份证正反面照片进行上传,上传完成后点击“下一步”。</text
|
||||||
>
|
>
|
||||||
</view>
|
</view>
|
||||||
<view class="step-item">
|
<view class="step-item">
|
||||||
<text class="step-number">5.</text>
|
<text class="step-number">5.</text>
|
||||||
<text class="step-text"
|
<text class="step-text"
|
||||||
>进入绑卡页面,完成银行卡绑定后即可操作提现。</text
|
>输入银行卡号:准确输入银行卡号,系统将提示“签约成功”,随后自动跳转到协议页面。</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
<view class="step-item">
|
||||||
|
<text class="step-number">6.</text>
|
||||||
|
<text class="step-text"
|
||||||
|
>完成手写签名:在协议页面的最下方,进行手写签名操作,签名完成后即完成整个签约流程。</text
|
||||||
>
|
>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="guide-footer">
|
<view class="guide-footer">
|
||||||
<text>请大家尽快办理,有疑问可随时联系我们,感谢配合!</text>
|
<text
|
||||||
|
>请大家务必尽快办理提现绑定操作,以免影响后续的提现业务。若在操作过程中遇到任何疑问或困难,可随时与我们联系,我们将竭诚为大家提供帮助。感谢大家的理解与配合!</text
|
||||||
|
>
|
||||||
</view>
|
</view>
|
||||||
<view class="qr-code-section">
|
<view class="qr-code-section">
|
||||||
<image
|
<image
|
||||||
class="qr-code-image"
|
class="qr-code-image"
|
||||||
src="https://bd-qd.oss-cn-beijing.aliyuncs.com/online_tmp/appletCode.png"
|
src="@/static/images/qr-code.png"
|
||||||
mode="aspectFit"
|
mode="aspectFit"
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -82,8 +90,9 @@ export default {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.withdrawal-guide-content {
|
.withdrawal-guide-content {
|
||||||
padding: 0rpx 32rpx 32rpx;
|
padding: 0rpx 20rpx 20rpx;
|
||||||
|
height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
.guide-title {
|
.guide-title {
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
|
||||||
|
|
@ -145,10 +145,10 @@
|
||||||
请先绑定默认银行卡
|
请先绑定默认银行卡
|
||||||
</u-modal>
|
</u-modal>
|
||||||
<!-- 提现引导弹窗 -->
|
<!-- 提现引导弹窗 -->
|
||||||
<!-- <WithdrawalGuide
|
<WithdrawalGuide
|
||||||
:show="showWithdrawalGuide"
|
:show="showWithdrawalGuide"
|
||||||
@confirm="onWithdrawalGuideConfirm"
|
@confirm="onWithdrawalGuideConfirm"
|
||||||
/> -->
|
/>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -261,20 +261,23 @@ export default {
|
||||||
this.$refs.uForm
|
this.$refs.uForm
|
||||||
.validate()
|
.validate()
|
||||||
.then(res => {
|
.then(res => {
|
||||||
|
if (!this.dataForm.pkBank) {
|
||||||
|
return
|
||||||
|
}
|
||||||
bal.addWithdraw(this.dataForm).then(res => {
|
bal.addWithdraw(this.dataForm).then(res => {
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
this.$refs.uToast.show({
|
this.$refs.uToast.show({
|
||||||
message: res.msg || '提现成功',
|
message: res.msg || '提现成功',
|
||||||
type: 'success',
|
type: 'success',
|
||||||
})
|
})
|
||||||
setTimeout(() => {
|
// setTimeout(() => {
|
||||||
uni.navigateBack()
|
// uni.navigateBack()
|
||||||
}, 500)
|
// }, 500)
|
||||||
|
|
||||||
// 显示提现引导弹窗
|
// 显示提现引导弹窗
|
||||||
// setTimeout(() => {
|
setTimeout(() => {
|
||||||
// this.showWithdrawalGuide = true
|
this.showWithdrawalGuide = true
|
||||||
// }, 300)
|
}, 300)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
@ -292,9 +295,6 @@ export default {
|
||||||
if (!this.dataForm.cashAmount) {
|
if (!this.dataForm.cashAmount) {
|
||||||
uni.$u.toast('请先输入金额')
|
uni.$u.toast('请先输入金额')
|
||||||
return
|
return
|
||||||
} else if (!this.dataForm.pkAccount) {
|
|
||||||
uni.$u.toast('请先选择账户')
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
bal
|
bal
|
||||||
.getWidthdrawShow({
|
.getWidthdrawShow({
|
||||||
|
|
|
||||||
|
|
@ -28,10 +28,7 @@
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 微信环境全屏图片显示 -->
|
<!-- 微信环境全屏图片显示 -->
|
||||||
<view
|
<view class="wechat-fullscreen-overlay" v-show="generatedImageUrl">
|
||||||
class="wechat-fullscreen-overlay"
|
|
||||||
v-show="(isWechat || userInfo.sharePosterImage) && generatedImageUrl"
|
|
||||||
>
|
|
||||||
<img
|
<img
|
||||||
class="fullscreen-image"
|
class="fullscreen-image"
|
||||||
:src="generatedImageUrl"
|
:src="generatedImageUrl"
|
||||||
|
|
@ -41,6 +38,7 @@
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view v-show="!generatedImageUrl" class="mask-loading"></view>
|
||||||
<cl-tabbar class="tabbar" :current="2" />
|
<cl-tabbar class="tabbar" :current="2" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -154,16 +152,7 @@ export default {
|
||||||
})
|
})
|
||||||
uni.hideLoading()
|
uni.hideLoading()
|
||||||
|
|
||||||
if (this.isWechat) {
|
|
||||||
// 微信环境:设置图片供长按保存
|
|
||||||
this.generatedImageUrl = dataUrl
|
this.generatedImageUrl = dataUrl
|
||||||
} else {
|
|
||||||
// 普通浏览器环境
|
|
||||||
if (this.isSpecialScene) {
|
|
||||||
// 特殊场景:设置图片供长按保存(没有下载按钮)
|
|
||||||
this.generatedImageUrl = dataUrl
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 下载图片
|
// 下载图片
|
||||||
|
|
@ -211,7 +200,6 @@ export default {
|
||||||
.fullscreen-image {
|
.fullscreen-image {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
@ -240,4 +228,13 @@ export default {
|
||||||
height: 80px !important;
|
height: 80px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.mask-loading {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: 1000;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -89,16 +89,16 @@ export default {
|
||||||
pkParent: '',
|
pkParent: '',
|
||||||
goodList: [],
|
goodList: [],
|
||||||
placeParent: '',
|
placeParent: '',
|
||||||
activeTab: 41, // 默认选中精品专区
|
activeTab: 43, // 默认选中商城专区
|
||||||
tabs: [
|
tabs: [
|
||||||
{
|
|
||||||
label: '精品专区',
|
|
||||||
value: 41,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: '商城专区',
|
label: '商城专区',
|
||||||
value: 43,
|
value: 43,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: '精品专区',
|
||||||
|
value: 41,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -176,54 +176,81 @@ export default {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tab选项卡样式
|
// Tab选项卡样式 - 简约大气设计
|
||||||
.tab-container {
|
.tab-container {
|
||||||
background: #ffffff;
|
// background: #ffffff;
|
||||||
padding: 20rpx 24rpx 0;
|
padding: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
|
|
||||||
|
// 顶部装饰线
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 3rpx;
|
||||||
|
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||||||
|
}
|
||||||
|
|
||||||
.tab-wrapper {
|
.tab-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
// background: #ffffff;
|
||||||
|
// padding: 32rpx 24rpx 24rpx;
|
||||||
|
|
||||||
.tab-item {
|
.tab-item {
|
||||||
flex: none;
|
flex: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin: 0 32rpx;
|
padding: 24rpx 32rpx;
|
||||||
padding: 16rpx 0;
|
text-align: center;
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
|
||||||
.tab-text {
|
.tab-text {
|
||||||
font-size: 30rpx;
|
font-size: 32rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #9ca3af;
|
color: #64748b;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-line {
|
.tab-line {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 悬停效果
|
||||||
|
&:hover:not(.tab-active) {
|
||||||
|
.tab-text {
|
||||||
|
color: #475569;
|
||||||
|
transform: translateY(-1rpx);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tab-active {
|
||||||
|
background: rgba(102, 126, 234, 0.08);
|
||||||
|
|
||||||
|
.tab-text {
|
||||||
|
color: #667eea;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选中指示器 - 底部完整宽度线条
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 3rpx;
|
height: 3rpx;
|
||||||
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||||||
border-radius: 2rpx;
|
|
||||||
animation: slideIn 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tab-active {
|
|
||||||
.tab-text {
|
|
||||||
color: #1f2937;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
.tab-text {
|
transform: scale(0.98);
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -607,84 +634,4 @@ export default {
|
||||||
.goodList_i:nth-child(n + 6) {
|
.goodList_i:nth-child(n + 6) {
|
||||||
animation-delay: 0.6s;
|
animation-delay: 0.6s;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 响应式优化
|
|
||||||
@media (max-width: 750rpx) {
|
|
||||||
.tab-container {
|
|
||||||
padding: 24rpx 16rpx 0;
|
|
||||||
|
|
||||||
.tab-wrapper {
|
|
||||||
.tab-item {
|
|
||||||
margin: 0 24rpx;
|
|
||||||
padding: 12rpx 0;
|
|
||||||
|
|
||||||
.tab-text {
|
|
||||||
font-size: 28rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.goodList {
|
|
||||||
.goodList_i {
|
|
||||||
padding: 24rpx;
|
|
||||||
|
|
||||||
.cover {
|
|
||||||
width: 200rpx;
|
|
||||||
height: 200rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goodList_ir {
|
|
||||||
margin-left: 20rpx;
|
|
||||||
|
|
||||||
.tit1 {
|
|
||||||
font-size: 28rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goodList_ib {
|
|
||||||
.price-container {
|
|
||||||
.price {
|
|
||||||
font-size: 32rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.quantity-section {
|
|
||||||
.quantity-control {
|
|
||||||
.quantity-btn {
|
|
||||||
width: 50rpx;
|
|
||||||
height: 50rpx;
|
|
||||||
|
|
||||||
.quantity-icon {
|
|
||||||
font-size: 28rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.quantity-display {
|
|
||||||
min-width: 70rpx;
|
|
||||||
height: 50rpx;
|
|
||||||
|
|
||||||
.quantity-text {
|
|
||||||
font-size: 24rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toBuy {
|
|
||||||
padding: 14rpx 20rpx;
|
|
||||||
font-size: 22rpx;
|
|
||||||
min-width: 100rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sold-out-section {
|
|
||||||
.sold-out-btn {
|
|
||||||
padding: 14rpx 28rpx;
|
|
||||||
font-size: 22rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 985 KiB After Width: | Height: | Size: 270 KiB |
Loading…
Reference in New Issue