chore(样式调整): 所有页面统一使用<view :style="themeColor"> 这种方式包裹

This commit is contained in:
2025-12-31 11:17:59 +08:00
parent 7a28bb7f7a
commit ef7b609efb
5 changed files with 788 additions and 725 deletions

View File

@@ -1,5 +1,7 @@
<template> <template>
<view :style="themeColor +';' + { backgroundColor: bgColor, minHeight: openBottomNav ? 'calc(100vh - 55px)' : '' }" class="page-img"> <view :style="themeColor">
<view :style="{ backgroundColor: bgColor, minHeight: openBottomNav ? 'calc(100vh - 55px)' : '' }"
class="page-img">
<view class="site-info-box" <view class="site-info-box"
v-if="$util.isWeiXin() && followOfficialAccount && followOfficialAccount.isShow && wechatQrcode"> v-if="$util.isWeiXin() && followOfficialAccount && followOfficialAccount.isShow && wechatQrcode">
<view class="site-info"> <view class="site-info">
@@ -11,7 +13,8 @@
<text>{{ followOfficialAccount.welcomeMsg }}</text> <text>{{ followOfficialAccount.welcomeMsg }}</text>
</view> </view>
</view> </view>
<view class="dite-button" @click="officialAccountsOpen">{{ isEnEnv ? 'Follow Official Account' : '关注公众号' }}</view> <view class="dite-button" @click="officialAccountsOpen">{{ isEnEnv ? 'Follow Official Account' : '关注公众号'
}}</view>
</view> </view>
<!-- <view class="page-header" v-if="diyData.global && diyData.global.navBarSwitch" :style="{ backgroundImage: bgImg }"> <!-- <view class="page-header" v-if="diyData.global && diyData.global.navBarSwitch" :style="{ backgroundImage: bgImg }">
@@ -118,7 +121,8 @@
<view class="address">{{ nearestStore.show_address }}</view> <view class="address">{{ nearestStore.show_address }}</view>
<view class="distance" v-if="nearestStore.distance"> <view class="distance" v-if="nearestStore.distance">
<text class="iconfont icon-dizhi"></text> <text class="iconfont icon-dizhi"></text>
<text>{{ nearestStore.distance > 1 ? nearestStore.distance + 'km' : nearestStore.distance * <text>{{ nearestStore.distance > 1 ? nearestStore.distance + 'km' :
nearestStore.distance *
1000 + 1000 +
'm' }}</text> 'm' }}</text>
</view> </view>
@@ -140,6 +144,7 @@
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top> <to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
<ns-login ref="login"></ns-login> <ns-login ref="login"></ns-login>
</view> </view>
</view>
</template> </template>
<script> <script>

View File

@@ -1,20 +1,26 @@
<template> <template>
<view class="fenxiao-index" :style="themeColor + ';' + { background: 'url(' + $util.img('public/uniapp/fenxiao/index/commissionFission-background.png') + ')',backgroundRepeat: 'no-repeat',backgroundSize:'100%' }"> <view :style="themeColor">
<view class="fenxiao-index"
:style="{ background: 'url(' + $util.img('public/uniapp/fenxiao/index/commissionFission-background.png') + ')', backgroundRepeat: 'no-repeat', backgroundSize: '100%' }">
<block v-if="info.fenxiao_id > 0"> <block v-if="info.fenxiao_id > 0">
<!-- 头部 --> <!-- 头部 -->
<view class="fenxiao-index-header" :class="{ 'not-level': !levelList.length }"> <view class="fenxiao-index-header" :class="{ 'not-level': !levelList.length }">
<view class="member"> <view class="member">
<view class="member-pic"> <view class="member-pic">
<image :src="info.headimg ? $util.img(info.headimg) : $util.getDefaultImage().head" @error="info.headimg = $util.getDefaultImage().head" mode="aspectFill"/> <image :src="info.headimg ? $util.img(info.headimg) : $util.getDefaultImage().head"
@error="info.headimg = $util.getDefaultImage().head" mode="aspectFill" />
<!-- <text class="level-name ">{{ info.level_name }}</text> --> <!-- <text class="level-name ">{{ info.level_name }}</text> -->
</view> </view>
<view class="member-info"> <view class="member-info">
<view class="member-info-box"> <view class="member-info-box">
<text class="name">{{ info.fenxiao_name }}</text> <text class="name">{{ info.fenxiao_name }}</text>
<p class="level" v-if="info.level_num > 0"><img :src="$util.img('public/uniapp/fenxiao/index/commissionFission-level.png')" alt="" class="level-icon">{{ info.level_name }}</p> <p class="level" v-if="info.level_num > 0"><img
:src="$util.img('public/uniapp/fenxiao/index/commissionFission-level.png')"
alt="" class="level-icon">{{ info.level_name }}</p>
</view> </view>
<view class="recommend">上级代理商{{ info.parent_name ? info.parent_name : '总店' }}</view> <view class="recommend">上级代理商{{ info.parent_name ? info.parent_name : '总店' }}</view>
<view class="recommend">已邀请成功{{ teamNum.num }}<text class="iconfont icon-right" style="font-size: 24rpx;"></text></view> <view class="recommend">已邀请成功{{ teamNum.num }}<text class="iconfont icon-right"
style="font-size: 24rpx;"></text></view>
</view> </view>
<!-- <view class="promote-rules font-size-tag" @click="$util.redirectTo('/pages_promotion/fenxiao/promote')"> <!-- <view class="promote-rules font-size-tag" @click="$util.redirectTo('/pages_promotion/fenxiao/promote')">
<text class="iconfont icon-wenhao font-size-tag"></text> <text class="iconfont icon-wenhao font-size-tag"></text>
@@ -35,7 +41,8 @@
<view class="allmoney-top-money"> <view class="allmoney-top-money">
<view class="allmoney-top"> <view class="allmoney-top">
<view class="font-size-sub">{{ fenxiaoWords.withdraw }}</view> <view class="font-size-sub">{{ fenxiaoWords.withdraw }}</view>
<view class="withdrawal-record" @click="$util.redirectTo('/pages_promotion/fenxiao/withdraw_list')"> <view class="withdrawal-record"
@click="$util.redirectTo('/pages_promotion/fenxiao/withdraw_list')">
提现明细 提现明细
<text class="iconfont icon-right"></text> <text class="iconfont icon-right"></text>
</view> </view>
@@ -52,12 +59,16 @@
<view class="title">已提现{{ fenxiaoWords.account }}</view> <view class="title">已提现{{ fenxiaoWords.account }}</view>
<view class="money price-font">{{ info.account_withdraw | moneyFormat }}</view> <view class="money price-font">{{ info.account_withdraw | moneyFormat }}</view>
</view> --> </view> -->
<view class="allmoney-all-wrap" @click="$util.redirectTo('/pages_promotion/fenxiao/withdraw_list')"> <view class="allmoney-all-wrap"
<view class="title">提现中()<text class="iconfont icon-right" style="font-size: 24rpx;"></text></view> @click="$util.redirectTo('/pages_promotion/fenxiao/withdraw_list')">
<view class="title">提现中()<text class="iconfont icon-right"
style="font-size: 24rpx;"></text></view>
<view class="money price-font">{{ info.account_withdraw_apply | moneyFormat }}</view> <view class="money price-font">{{ info.account_withdraw_apply | moneyFormat }}</view>
</view> </view>
<view class="allmoney-all-wrap" @click="$util.redirectTo('/pages_promotion/fenxiao/order', { type: 1 })"> <view class="allmoney-all-wrap"
<view class="title">待入账()<text class="iconfont icon-right" style="font-size: 24rpx;"></text></view> @click="$util.redirectTo('/pages_promotion/fenxiao/order', { type: 1 })">
<view class="title">待入账()<text class="iconfont icon-right"
style="font-size: 24rpx;"></text></view>
<view class="money price-font">{{ info.in_progress_money | moneyFormat }}</view> <view class="money price-font">{{ info.in_progress_money | moneyFormat }}</view>
</view> </view>
</view> </view>
@@ -65,15 +76,18 @@
</view> </view>
</view> </view>
<view class="fenxiao-index-allmoney" style="padding: 0;border-radius:24rpx;margin-top: 0;" @click="toPoster()"> <view class="fenxiao-index-allmoney" style="padding: 0;border-radius:24rpx;margin-top: 0;"
<image :src="$util.img('public/uniapp/fenxiao/index/commissionFission-qrcode1.png')" mode="widthFix" style="width: 100%;border-radius:24rpx" /> @click="toPoster()">
<image :src="$util.img('public/uniapp/fenxiao/index/commissionFission-qrcode1.png')" mode="widthFix"
style="width: 100%;border-radius:24rpx" />
</view> </view>
<!-- 功能列表 --> <!-- 功能列表 -->
<view class="fenxiao-menu-list"> <view class="fenxiao-menu-list">
<view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/team')"> <view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/team')">
<view class="icon-wrap"> <view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/down-line.png')" mode="widthFix"></image> <image :src="$util.img('public/uniapp/fenxiao/index/down-line.png')" mode="widthFix">
</image>
</view> </view>
<view class="info"> <view class="info">
<view class="title">我的粉丝</view> <view class="title">我的粉丝</view>
@@ -82,16 +96,19 @@
</view> </view>
<view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/withdraw_list')"> <view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/withdraw_list')">
<view class="icon-wrap"> <view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/jifenjiangli.png')" mode="widthFix"></image> <image :src="$util.img('public/uniapp/fenxiao/index/jifenjiangli.png')" mode="widthFix">
</image>
</view> </view>
<view class="info"> <view class="info">
<view class="title">{{ fenxiaoWords.withdraw }}明细</view> <view class="title">{{ fenxiaoWords.withdraw }}明细</view>
<view class="desc">累计{{ fenxiaoWords.account }}{{ info.total_commission | moneyFormat }}</view> <view class="desc">累计{{ fenxiaoWords.account }}{{ info.total_commission | moneyFormat }}
</view>
</view> </view>
</view> </view>
<view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/order')"> <view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/order')">
<view class="icon-wrap"> <view class="icon-wrap">
<image :src="$util.img('public/uniapp/fenxiao/index/fenxiaodingdan.png')" mode="widthFix"></image> <image :src="$util.img('public/uniapp/fenxiao/index/fenxiaodingdan.png')" mode="widthFix">
</image>
</view> </view>
<view class="info"> <view class="info">
<view class="title">{{ fenxiaoWords.concept + '订单' }}</view> <view class="title">{{ fenxiaoWords.concept + '订单' }}</view>
@@ -239,6 +256,7 @@
</view> </view>
</uni-popup> </uni-popup>
</view> </view>
</view>
</template> </template>
<script> <script>

View File

@@ -1,10 +1,14 @@
<template> <template>
<view class="fenxiao-promote" :style="themeColor + ';' + { backgroundImage: 'url(' + $util.img('public/uniapp/fenxiao/promote/promote_bg.png') + ')' }"> <view :style="themeColor">
<view class="fenxiao-promote"
:style="{ backgroundImage: 'url(' + $util.img('public/uniapp/fenxiao/promote/promote_bg.png') + ')' }">
<view class="my-earnings"> <view class="my-earnings">
<view class="earnings-head-wrap"> <view class="earnings-head-wrap">
<view class="earnings-head"> <view class="earnings-head">
<image class="name" :src="$util.img('public/uniapp/fenxiao/promote/my_earnings.png')" mode="aspectFit"></image> <image class="name" :src="$util.img('public/uniapp/fenxiao/promote/my_earnings.png')"
<image class="money-bg" :src="$util.img('public/uniapp/fenxiao/promote/money.png')" mode="aspectFill"></image> mode="aspectFit"></image>
<image class="money-bg" :src="$util.img('public/uniapp/fenxiao/promote/money.png')"
mode="aspectFill"></image>
<view class="content"> <view class="content">
累计收益 累计收益
<text class="money-text">{{ detailData.total_commission }}</text> <text class="money-text">{{ detailData.total_commission }}</text>
@@ -20,12 +24,9 @@
<scroll-view scroll-y="true" class="earnings-content-wrap" @scrolltolower="getTeam()"> <scroll-view scroll-y="true" class="earnings-content-wrap" @scrolltolower="getTeam()">
<view class="earnings-list" v-if="promote.list.length"> <view class="earnings-list" v-if="promote.list.length">
<view class="earnings-item" v-for="(item, index) in promote.list" :key="index"> <view class="earnings-item" v-for="(item, index) in promote.list" :key="index">
<image <image class="item-img"
class="item-img"
:src="item.headimg ? $util.img(item.headimg) : $util.getDefaultImage().head" :src="item.headimg ? $util.img(item.headimg) : $util.getDefaultImage().head"
@error="item.headimg = $util.getDefaultImage().head" @error="item.headimg = $util.getDefaultImage().head" mode="aspectFill"></image>
mode="aspectFill"
></image>
<view class="item-content"> <view class="item-content">
<view class="item-name multi-hidden">{{ item.nickname }}</view> <view class="item-name multi-hidden">{{ item.nickname }}</view>
</view> </view>
@@ -36,8 +37,10 @@
</view> </view>
</view> </view>
<view class="activity-rules"> <view class="activity-rules">
<image class="rules-name" :src="$util.img('public/uniapp/fenxiao/promote/activity_rules.png')" mode="aspectFit"></image> <image class="rules-name" :src="$util.img('public/uniapp/fenxiao/promote/activity_rules.png')"
<view class="content" v-if="promoteContent.content"><rich-text :nodes="promoteContent.content"></rich-text></view> mode="aspectFit"></image>
<view class="content" v-if="promoteContent.content"><rich-text
:nodes="promoteContent.content"></rich-text></view>
<view class="rules-empty" v-else>暂无活动规则</view> <view class="rules-empty" v-else>暂无活动规则</view>
</view> </view>
<view class="active-btn"><button type="primary" @click="toPoster()">邀请好友</button></view> <view class="active-btn"><button type="primary" @click="toPoster()">邀请好友</button></view>
@@ -50,6 +53,7 @@
<privacy-popup ref="privacyPopup"></privacy-popup> <privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif --> <!-- #endif -->
</view> </view>
</view>
</template> </template>
<script> <script>
@@ -213,14 +217,17 @@ export default {
background-color: #ff2d46; background-color: #ff2d46;
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
.my-earnings, .my-earnings,
.activity-rules { .activity-rules {
background-color: #fff; background-color: #fff;
border-radius: 30rpx; border-radius: 30rpx;
} }
.my-earnings { .my-earnings {
margin-top: 230rpx; margin-top: 230rpx;
padding-bottom: 40rpx; padding-bottom: 40rpx;
.earnings-head-wrap { .earnings-head-wrap {
background-color: #fff7f5; background-color: #fff7f5;
height: 160rpx; height: 160rpx;
@@ -228,33 +235,40 @@ export default {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.earnings-head { .earnings-head {
position: relative; position: relative;
padding-top: 60rpx; padding-top: 60rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.name { .name {
position: absolute; position: absolute;
width: 384rpx; width: 384rpx;
height: 74rpx; height: 74rpx;
top: -22rpx; top: -22rpx;
} }
.content { .content {
font-size: $font-size-tag; font-size: $font-size-tag;
} }
.money-bg { .money-bg {
width: 80rpx; width: 80rpx;
height: 80rpx; height: 80rpx;
} }
.money-text { .money-text {
margin: 0 6rpx; margin: 0 6rpx;
font-size: 40rpx; font-size: 40rpx;
line-height: 1; line-height: 1;
} }
} }
.earnings-body { .earnings-body {
padding: 0 30rpx; padding: 0 30rpx;
.earnings-tab { .earnings-tab {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
@@ -263,9 +277,11 @@ export default {
font-size: 30rpx; font-size: 30rpx;
color: #e93224; color: #e93224;
margin-bottom: 10rpx; margin-bottom: 10rpx;
text.active { text.active {
position: relative; position: relative;
font-weight: bold; font-weight: bold;
&::after { &::after {
position: absolute; position: absolute;
content: ''; content: '';
@@ -278,35 +294,43 @@ export default {
} }
} }
} }
.earnings-content-wrap { .earnings-content-wrap {
max-height: 440rpx; max-height: 440rpx;
} }
.earnings-item { .earnings-item {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20rpx; margin-bottom: 20rpx;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.item-img { .item-img {
width: 90rpx; width: 90rpx;
height: 90rpx; height: 90rpx;
margin-right: 20rpx; margin-right: 20rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.item-time { .item-time {
font-size: $font-size-tag; font-size: $font-size-tag;
color: $color-tip; color: $color-tip;
} }
.item-name { .item-name {
line-height: 1.3; line-height: 1.3;
} }
.money { .money {
margin-left: auto; margin-left: auto;
color: #f9b124; color: #f9b124;
} }
} }
} }
.earnings-empty { .earnings-empty {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -315,10 +339,12 @@ export default {
font-size: 30rpx; font-size: 30rpx;
} }
} }
.activity-rules { .activity-rules {
position: relative; position: relative;
margin-top: 60rpx; margin-top: 60rpx;
min-height: 300rpx; min-height: 300rpx;
.rules-name { .rules-name {
position: absolute; position: absolute;
width: 384rpx; width: 384rpx;
@@ -327,9 +353,11 @@ export default {
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
.content { .content {
padding: 70rpx 20rpx 0; padding: 70rpx 20rpx 0;
} }
.rules-empty { .rules-empty {
padding-top: 140rpx; padding-top: 140rpx;
text-align: center; text-align: center;

View File

@@ -1,24 +1,32 @@
<template> <template>
<view :style="themeColor + ';' + { backgroundColor: bgColor, minHeight: openBottomNav ? 'calc(100vh - 55px)' : '' }" class="page-img"> <view :style="themeColor">
<view class="page-header" v-if="diyData.global && diyData.global.navBarSwitch" :style="{ backgroundImage: bgImg }"> <view :style="{ backgroundColor: bgColor, minHeight: openBottomNav ? 'calc(100vh - 55px)' : '' }"
class="page-img">
<view class="page-header" v-if="diyData.global && diyData.global.navBarSwitch"
:style="{ backgroundImage: bgImg }">
<ns-navbar :title-color="textNavColor" :data="diyData.global" :scrollTop="scrollTop" :isBack="true" /> <ns-navbar :title-color="textNavColor" :data="diyData.global" :scrollTop="scrollTop" :isBack="true" />
</view> </view>
<diy-index-page v-if="topIndexValue" ref="indexPage" :value="topIndexValue" :bgUrl="bgUrl" :scrollTop="scrollTop" :diyGlobal="diyData.global" class="diy-index-page"> <diy-index-page v-if="topIndexValue" ref="indexPage" :value="topIndexValue" :bgUrl="bgUrl"
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop" :haveTopCategory="true"/> :scrollTop="scrollTop" :diyGlobal="diyData.global" class="diy-index-page">
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"
:haveTopCategory="true" />
<ns-copyright v-show="isShowCopyRight" /> <ns-copyright v-show="isShowCopyRight" />
</diy-index-page> </diy-index-page>
<view v-else class="bg-index" :style="{ backgroundImage: backgroundUrl, paddingTop: paddingTop, marginTop: marginTop }"> <view v-else class="bg-index"
:style="{ backgroundImage: backgroundUrl, paddingTop: paddingTop, marginTop: marginTop }">
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop" /> <diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop" />
<ns-copyright v-show="isShowCopyRight" /> <ns-copyright v-show="isShowCopyRight" />
</view> </view>
<template v-if="diyData.global && diyData.global.popWindow && diyData.global.popWindow.count != -1 && diyData.global.popWindow.imageUrl"> <template
v-if="diyData.global && diyData.global.popWindow && diyData.global.popWindow.count != -1 && diyData.global.popWindow.imageUrl">
<view @touchmove.prevent.stop> <view @touchmove.prevent.stop>
<uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false"> <uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
<view class="image-wrap"> <view class="image-wrap">
<image :src="$util.img(diyData.global.popWindow.imageUrl)" :style="popWindowStyle" @click="uniPopupWindowFn()" mode="aspectFit"/> <image :src="$util.img(diyData.global.popWindow.imageUrl)" :style="popWindowStyle"
@click="uniPopupWindowFn()" mode="aspectFit" />
</view> </view>
<text class="iconfont icon-round-close" @click="closePopupWindow"></text> <text class="iconfont icon-round-close" @click="closePopupWindow"></text>
</uni-popup> </uni-popup>
@@ -32,7 +40,8 @@
<!-- 收藏 --> <!-- 收藏 -->
<uni-popup ref="collectPopupWindow" type="top" class="wap-floating wap-floating-collect"> <uni-popup ref="collectPopupWindow" type="top" class="wap-floating wap-floating-collect">
<view v-if="showTip" class="collectPopupWindow" :style="{ marginTop: (collectTop + statusBarHeight) * 2 + 'rpx' }"> <view v-if="showTip" class="collectPopupWindow"
:style="{ marginTop: (collectTop + statusBarHeight) * 2 + 'rpx' }">
<image :src="$util.img('public/uniapp/index/collect2.png')" mode="aspectFit" /> <image :src="$util.img('public/uniapp/index/collect2.png')" mode="aspectFit" />
<text @click="closeCollectPopupWindow">我知道了</text> <text @click="closeCollectPopupWindow">我知道了</text>
</view> </view>
@@ -43,6 +52,7 @@
<privacy-popup ref="privacyPopup"></privacy-popup> <privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif --> <!-- #endif -->
</view> </view>
</view>
</template> </template>
<script> <script>

View File

@@ -1,5 +1,6 @@
<template> <template>
<view :style="themeColor + ';' + { backgroundColor: bgColor, minHeight: openBottomNav ? 'calc(100vh - 55px)' : '' }" class="page-img"> <view :style="themeColor">
<view :style="{ backgroundColor: bgColor, minHeight: openBottomNav ? 'calc(100vh - 55px)' : '' }" class="page-img">
<view class="page-header" v-if="diyData.global && diyData.global.navBarSwitch" <view class="page-header" v-if="diyData.global && diyData.global.navBarSwitch"
:style="{ backgroundImage: bgImg }"> :style="{ backgroundImage: bgImg }">
<ns-navbar :title-color="textNavColor" :data="diyData.global" :scrollTop="scrollTop" :isBack="true" /> <ns-navbar :title-color="textNavColor" :data="diyData.global" :scrollTop="scrollTop" :isBack="true" />
@@ -60,6 +61,7 @@
<privacy-popup ref="privacyPopup"></privacy-popup> <privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif --> <!-- #endif -->
</view> </view>
</view>
</template> </template>
<script> <script>