shang/yfs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改页面样式

Browse Source
This commit is contained in:
zpc 2025-04-15 16:06:25 +08:00
parent d43a691265
commit 5b9bfdf0f8
5 changed files with 124 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
common/env.js
View File

@ -44,7 +44,7 @@ if (process.env.NODE_ENV === 'production') {
// #endif
// #ifdef MP-WEIXIN
currentEnv = production; // 小程序默认使用生产环境配置
currentEnv =testing;// production; // 小程序默认使用生产环境配置
// #endif
// 衍生配置

31
components/detail-toolbar/detail-toolbar.vue
View File

@ -1,10 +1,9 @@
<template>
<view class="detail-toolbar" :style="customStyle">
<!-- 购买说明按钮 -->
<view class="toolbar-item">
<view class="toolbar-item" @click="onRuleClick(getRuleId)">
<image class="toolbar-img"
:src="$img1('common/gzsm.png')"
@click="onRuleClick(getRuleId)">
:src="$img1('common/gzsm.png')">
</image>
</view>
@ -19,7 +18,7 @@
</view>
<!-- 换箱按钮 -->
<view class="toolbar-item" @click="onChangeBox">
<view class="toolbar-item" @click="onChangeBox" v-if="!isWuxian">
<image class="toolbar-img" :src="$img1('common/huanxiang.png')"></image>
</view>
</view>
@ -40,6 +39,10 @@ export default {
customStyle: {
type: String,
default: ''
},
isWuxian: {
type: Boolean,
default: false
}
},
computed: {
@ -66,24 +69,28 @@ export default {
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.detail-toolbar {
display: flex;
flex-direction: row;
margin-left: 32rpx;
margin-top: 56rpx;
justify-content: center;
align-items: center;
padding: 40rpx 0rpx 30rpx 0;
width: 100%;
box-sizing: border-box;
.toolbar-item {
width: 160rpx;
height: 92rpx;
margin: 0 8rpx;
transition: transform 0.2s ease;
&:not(:first-child) {
margin-left: 16rpx;
&:active {
transform: scale(0.95);
}
.toolbar-img {
width: 160rpx;
height: 92rpx;
width: 100%;
height: 100%;
}
}
}

92
components/detail-wuxian-lingzhu/detail-wuxian-lingzhu.vue Normal file
View File

@ -0,0 +1,92 @@
<template>
<view class="lingzhu center" v-if="bossCardData && bossCardData.king_user">
<view class="lingzhu-img relative ml30">
<image :src="bossCardData.king_user.headimg" mode="aspectFill"></image>
<image :src="$img1('index/king.png')"></image>
</view>
<view class="lingzhu-content ml30 flex-1">
<view class="">{{ bossCardData.king_user.nickname }}</view>
<view class="">
第
<text>{{ bossCardData.king_user.count }}</text>
发晋升领主
已占领
<text>{{ bossCardData.king_user.z_nums }}</text>
发
</view>
</view>
<view class="flex ml40 mr30" @click="openBossPop">
<text style="font-size: 20rpx; color: #999999;">查看更多 ></text>
</view>
</view>
</template>
<script>
export default {
name: 'DetailWuxianLingzhu',
props: {
bossCardData: {
type: Object,
default: () => ({})
}
},
methods: {
openBossPop() {
this.$emit('open-boss-pop');
}
}
}
</script>
<style lang="scss" scoped>
.lingzhu {
width: 686rpx;
height: 158rpx;
margin: 0rpx auto;
background: #F8F8F8;
&-img {
width: 122rpx;
height: 106rpx;
>image:nth-child(1) {
width: 75rpx;
height: 76rpx;
position: absolute;
bottom: 4rpx;
left: 50%;
transform: translateX(-50%);
z-index: 1;
border-radius: 50rpx;
}
>image:nth-child(2) {
width: 122rpx;
height: 120rpx;
position: absolute;
top: 5rpx;
left: 0;
z-index: 3;
}
}
&-content {
>view:nth-child(1) {
font-weight: normal;
font-size: 28rpx;
color: #333333;
}
>view:nth-child(2) {
margin-top: 6rpx;
font-weight: normal;
font-size: 24rpx;
color: #999999;
>text {
color: #333333;
}
}
}
}
</style>

1
pages/shouye/detail.vue
View File

@ -60,6 +60,7 @@
<!--选项卡-->
<detail-toolbar :goods-type="pageData.goods.type" :current-tab="tabCur" @rule-click="handleRuleClick"
@tab-change="tabChange" @change-box="changeBox"></detail-toolbar>
<view class="spylView" v-if="tabCur == 1 && pageData">
<view class="spylView-head align-center justify-between">
<view class="column align-center" @click="prev">

116
pages/shouye/detail_wuxian.vue
View File

@ -47,48 +47,10 @@
</view>
</view>
<view class="" style="display: flex; flex-direction: row; margin-left: 108rpx; margin-top: 26rpx; margin-bottom: 20rpx;">
<view class="" style="width: 160rpx; height: 92rpx;">
<image style="width: 160rpx; height: 92rpx;" @click="$refs.rulePop.getRule(pageData.danye_id, '购买说明')"
:src="$img1('common/gzsm.png')">
</image>
</view>
<view class="" style="margin-left: 26rpx;" @tap="tabChange(1)">
<image style="width: 160rpx; height: 92rpx;" v-if="tabCur == 1" :src="$img1('common/spyl1.png')">
</image>
<image style="width: 160rpx; height: 92rpx;" v-if="tabCur == 2" :src="$img1('common/spyl2.png')">
</image>
</view>
<view class="" style="margin-left: 26rpx;" @tap="tabChange(2)">
<image style="width: 160rpx; height: 92rpx;" v-if="tabCur == 1" :src="$img1('common/zsjl22.png')">
</image>
<image style="width: 160rpx; height: 92rpx;" v-if="tabCur == 2" :src="$img1('common/zsjl12.png')">
</image>
</view>
</view>
<view class="lingzhu center" v-if="bossCardData && bossCardData.king_user">
<view class="lingzhu-img relative ml30">
<image :src="bossCardData.king_user.headimg" mode="aspectFill"></image>
<image :src="$img1('index/king.png')"></image>
</view>
<view class="lingzhu-content ml30 flex-1">
<view class="">{{ bossCardData.king_user.nickname }}</view>
<view class="">
第
<text>{{ bossCardData.king_user.count }}</text>
发晋升领主
已占领
<text>{{ bossCardData.king_user.z_nums }}</text>
发
</view>
</view>
<view class="flex ml40 mr30" @click="open('bossPop')">
<text style="font-size: 20rpx; color: #999999;">查看更多 ></text>
</view>
</view>
<!--选项卡-->
<detail-toolbar :goods-type="pageData.goods.type" :current-tab="tabCur" @rule-click="$refs.rulePop.getRule(pageData.danye_id, '购买说明')"
@tab-change="tabChange" @change-box="changeBox" :isWuxian="true"></detail-toolbar>
<detail-wuxian-lingzhu :boss-card-data="bossCardData" @open-boss-pop="open('bossPop')"> </detail-wuxian-lingzhu>
<view v-if="pageData && pageData.goods.rage_is == 1" class="angry">
<view class="icon flex">
<image class="img100" src="/static/common/cardIcon.png" lazy-load></image>
@ -104,10 +66,8 @@
</view>
</view>
</view>
<!-- 商品预览 -->
<view v-if="tabCur == 1 && pageData" class="list" style="padding: 30rpx 20rpx 0;">
<view v-if="tabCur == 1 && pageData" class="list" style="padding: 0rpx 20rpx 0;">
<view class="list-item common_bg mb30" v-for="(item, i) in pageData.goodslist" :key="i">
<view class="list-title common_bg align-center">
<view class="align-center">
@ -192,10 +152,9 @@
</view>
</mescroll-body>
</template>
<!-- 选项按钮 -->
<detail-button v-if="pageData" :pageData="pageData" :isWuxian="true" @button-click="confirmSubmit"
@button-wx-click="wuxianchou"></detail-button>
<uni-popup ref="resPop" type="center" mask-background-color="rgba(0,0,0,0.8)">
<view class="res-pop common_bg column center" @click="close('resPop')">
<view class="res-pop-hd"></view>
@ -382,7 +341,7 @@
</view>
</view>
</uni-popup>
<!-- 购买确认弹窗 -->
<order-confirm-popup ref="buyPop" v-if="orderData" :order-data="orderData" :page-data="pageData"
:use-money="useMoney" :use-money2="useMoney2" :use-integral="useIntegral" :coupon-data="couponData"
:is-agree="isAgree" :send-rule-data="sendRuleData" :buy-num="buyNum" @close="close('buyPop')"
@ -412,6 +371,7 @@ import DetailButton from '@/components/detail-button/detail-button.vue'
// 导入预览组件和方法
import DetailPreviewPopup from '@/components/detail-preview-popup/detail-preview-popup.vue'
import preview from '@/components/detail-preview-popup/index.js'
import DetailWuxianLingzhu from '@/components/detail-wuxian-lingzhu/detail-wuxian-lingzhu.vue'
export default {
components: {
@ -419,7 +379,8 @@ export default {
OrderConfirmPopup,
DetailListItem,
DetailButton,
DetailPreviewPopup // 注册预览组件
DetailPreviewPopup,
DetailWuxianLingzhu // 注册新组件
},
data() {
return {
@ -1101,62 +1062,7 @@ export default {
color: #FFFFFF;
}
}
.lingzhu {
width: 686rpx;
height: 158rpx;
margin: 28rpx auto;
// border: 1rpx solid #9E907D;
background: #F8F8F8;
&-img {
width: 122rpx;
height: 106rpx;
>image:nth-child(1) {
width: 75rpx;
height: 76rpx;
position: absolute;
bottom: 4rpx;
left: 50%;
transform: translateX(-50%);
z-index: 1;
border-radius: 50rpx;
}
>image:nth-child(2) {
width: 122rpx;
height: 120rpx;
position: absolute;
top: 5rpx;
left: 0;
z-index: 3;
}
}
&-content {
>view:nth-child(1) {
font-weight: normal;
font-size: 28rpx;
color: #333333;
}
>view:nth-child(2) {
margin-top: 6rpx;
font-weight: normal;
font-size: 24rpx;
color: #999999;
>text {
color: #333333;
}
}
}
&-lingzhu {
height: 46rpx;
}
}
.content {
padding: 0 0 0rpx;