charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: 特价页面样式修改

Browse Source
This commit is contained in:
黄泽群
2025-11-09 23:56:58 +08:00
parent a415522359
commit 019edfa648
14 changed files with 954 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/common/shopHeader.vue
+150
View File
@@ -0,0 +1,150 @@
<template>
<view class="header" :style="{backgroundColor:bgColor,height:height,borderBottomWidth:borderWidth}">
<view class="header-left">
<view class="header-left" v-if="isBack" @click="goback">
<u-icon :size="fontSize" name="arrow-left" :color="color"></u-icon>
</view>
<slot name="left" v-else>
</slot>
</view>
<view class="header-mid">
<slot name="mid" v-if="isMid">
</slot>
<text v-else :style="{fontSize:fontSize,fontWeight:fontWeight,color:color}">{{title}}</text>
</view>
<view class="header-right">
<slot name="right">
</slot>
</view>
</view>
</template>
<script>
/**
* 共用头部
* title:中间标题 默认空
* bgColor:背景色 默认#fff
* height:高度 默认88rpx
* isBack:是否打开左方返回 默认打开
* borderWidth:下划线 默认无
* fontSize:返回箭头 中间字体大小 默认30rpx
* fontWeight:中间字体字重 默认加粗
* color:返回箭头 中间字体颜色 默认#333
* slot->left:左边插槽 开启后要将isBack传false
* slot->right:右边插槽
* isReturn 抛出返回方法
*/
export default {
props:{
black:{
type:Boolean,
default:false
},
isMid:{
type:Boolean,
default:false
},
title:{
type:String,
default:''
},
bgColor:{
type:String,
default:'#fff'
},
height:{
type:String,
default:'88rpx'
},
isBack:{
type:Boolean,
default:true
},
borderWidth:{
type:String,
default:'0'
},
fontSize:{
type:String,
default:'36rpx'
},
fontWeight:{
type:String,
default:'bold'
},
color:{
type:String,
default:'#333'
},
isReturn:{
type:Boolean,
default:false
}
},
mounted(){
},
methods: {
goback(){
if(this.isReturn){
this.$emit('return');
}else{
console.log('2312313')
uni.navigateBack()
}
}
}
}
</script>
<style lang="scss" scoped>
.header{
width:100vw;
height:88rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom-style: solid;
font-weight: bold;
padding: 0 30rpx;
font-size: 30rpx;
background-color: transparent;
box-sizing: border-box;
.header-left{
width:48rpx;
height: 48rpx;
display: flex;
background: rgba(0,0,0,0.2);
border-radius: 8rpx;
align-items: center;
justify-content: center;
position: relative;
.left-img{
width:18rpx;
height:30rpx;
}
}
.header-right{
min-width:240rpx;
height:56rpx;
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
}
.header-mid{
color: #fff;
flex:1;
height:100%;
margin-left: 32rpx;
font-size: 36rpx;
display: flex;
justify-content: flex-start;
align-items: center;
}
}
</style>
components/shop/you-item.vue
+38 -36
View File
@@ -4,24 +4,18 @@
<image :src="obj.url"></image>
</view>
<view class="shop-right-view">
<view class="shop-top-img">
<image src="/static/home/xyx.png" style="width: 122rpx;height: 28rpx;margin-right: 12rpx;"></image>
<image src="/static/home/xs.png" v-if="obj.limitedTime " style="width: 52rpx;height: 28rpx;margin-right: 12rpx;"></image>
<image src="/static/home/tg.png" v-if="obj.tag" style="width: 80rpx;height: 28rpx;"></image>
</view>
<view class="right-top-view text-overflow1">
<text class="text-32 text-bold text-zu text-overflow1">{{obj.title}}</text>
</view>
<view class="right-bottom-view">
<view class="flex-c-lr" >
<view class="text-24" style="color:#FF5A5A;width: 112rpx;height: 32rpx; margin-right: 3rpx;" v-if="obj.tag">
<image src="/static/shopping/tg.png" style="width: 112rpx;height: 32rpx;"></image>
</view>
<image v-if="obj.id === 33162" src="/static/shopping/tp.png" alt="" style="width: 60rpx;height: 32rpx; margin-top: 2rpx;"></image>
<text class="text-24 text-fu">原价</text>
<text class="text-24 text-fu text-d text-bold">￥{{obj.adPrice}}</text>
</view>
<view class="right-bottom-panel" style="height:70rpx">
<MyBtn @ok.stop="onClick" mh="36rpx" :text="`专区立省${Number(obj.adPrice) - Number(obj.price)}元`" br="8rpx" fz="16rpx" bg="linear-gradient( 270deg, #AF39C4 0%, #7732FF 100%)" wd="260rpx"></MyBtn>
<text class="text-28 text-zi text-bold">到手
<text class="text-36">￥{{obj.price}}</text>
</text>
</view>
<view class="shop-price" @ok.stop="onClick" >
<view class="price-left"><text style="font-size: 24rpx;">¥</text>{{obj.price}}</view>
<view class="price-center">专区立省{{ Number(obj.adPrice) - Number(obj.price) }}元</view>
<image src="/static/home/qiang.png" style="width: 80rpx;height: 80rpx;"></image>
</view>
</view>
</view>
@@ -54,10 +48,10 @@
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 12rpx;
padding: 20rpx;
box-sizing: border-box;
background-color: #fff;
border-radius: 12rpx;
border-radius: 16rpx;
.shop-left-view{
min-width:216rpx;
min-height:216rpx;
@@ -65,8 +59,9 @@
align-items: center;
justify-content: center;
image{
width:216rpx;
height:216rpx;
width:220rpx;
height:220rpx;
border-radius: 8rpx;
}
}
.shop-right-view{
@@ -75,30 +70,37 @@
min-height:216rpx;
margin-left:24rpx;
flex-direction: column;
justify-content: space-between;
justify-content: space-around;
.shop-top-img{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
image{
width: 100%;
height: 100%;
}
}
.right-top-view{
width:100%;
display: flex;
}
.right-bottom-view{
width:100%;
.shop-price{
background: linear-gradient( 270deg, #F0E7FE 0%, rgba(240,231,254,0) 100%);
width: 100%;
height: 80rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
.right-bottom-panel{
width:284rpx;
height:104rpx;
min-height:104rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 12rpx;
box-sizing: border-box;
background-color: #F0E7FE;
border-radius: 8rpx;
align-items: center;
.price-left{
font-weight: bold;
font-size: 28rpx;
color: #7934F6;
}
.price-center{
font-size: 20rpx;
color: #7934F6;
}
}
}