Commit 145d0540 authored by 潘永坪's avatar 潘永坪

样式修改

parent 8832bb6d
...@@ -89,13 +89,6 @@ export default { ...@@ -89,13 +89,6 @@ export default {
8.页面最外层与里面的第一层为padding:0 12px; 8.页面最外层与里面的第一层为padding:0 12px;
9.css单位为rpx 9.css单位为rpx
*/ */
/* 全局变量 */
:root {
--blue:#3688FF;
--red: #FC6703;
--divider: #DBDBDB;
--grey: #999;
}
page { page {
font-size: 28rpx; font-size: 28rpx;
color: #333333; color: #333333;
......
...@@ -69,8 +69,8 @@ ...@@ -69,8 +69,8 @@
<script> <script>
export default{ export default{
props:["couponData","chooseCouponObj"], props:['couponData','chooseCouponObj'],
watch: { watch: {
couponData:{// couponData:{//
handler(newValue, oldValue){ handler(newValue, oldValue){
...@@ -96,9 +96,9 @@ ...@@ -96,9 +96,9 @@
active:0,//导航栏下标 active:0,//导航栏下标
show:false,//控制弹窗显示隐藏 show:false,//控制弹窗显示隐藏
current:0,//控制选项卡默认显示第几个 current:0,//控制选项卡默认显示第几个
couponList:"",//券列表 couponList:'',//券列表
chooseCoupon:"",//选中的劵 chooseCoupon:'',//选中的劵
navTitle:["可用","不可用"],//导航标题 navTitle:['可用','不可用'],//导航标题
} }
}, },
methods:{ methods:{
...@@ -117,26 +117,26 @@ ...@@ -117,26 +117,26 @@
this.chooseCoupon=this.couponList.masterSlaveCouponList.find((item)=>{ this.chooseCoupon=this.couponList.masterSlaveCouponList.find((item)=>{
return item.couponId==evt.detail.value[0] return item.couponId==evt.detail.value[0]
}) })
this.$emit("couponChoose",this.chooseCoupon) this.$emit('couponChoose',this.chooseCoupon)
}else if(evt.detail.value.length==1){ }else if(evt.detail.value.length==1){
this.chooseCoupon=this.couponList.masterSlaveCouponList.find((item)=>{ this.chooseCoupon=this.couponList.masterSlaveCouponList.find((item)=>{
return item.couponId==evt.detail.value[0] return item.couponId==evt.detail.value[0]
}) })
this.$emit("couponChoose",this.chooseCoupon) this.$emit('couponChoose',this.chooseCoupon)
}else if(evt.detail.value.length==0){ }else if(evt.detail.value.length==0){
this.$emit("couponChoose","") this.$emit('couponChoose','')
}
} }
} }
} }
}
</script> </script>
<style scoped="scoped" lang="scss"> <style scoped="scoped" lang="scss">
.title{display: flex;height: 80rpx;} .title{display: flex;height: 80rpx;}
.titleContent{flex:1;text-align: center;font-size:30rpx;} .titleContent{flex:1;text-align: center;font-size:30rpx;}
.titleContent.on{color: $title-color;font-weight: bold;} .titleContent.on{color: $blue;font-weight: bold;}
.titleContent view text{width: 40rpx;height: 6rpx;background:$title-color;border-radius:6rpx;display:inline-block;position: relative;top:-10rpx;} .titleContent view text{width: 40rpx;height: 6rpx;background:$blue;border-radius:6rpx;display:inline-block;position: relative;top:-10rpx;}
.middle{padding:24rpx;background:#f5f5f5;} .middle{padding:24rpx;background:#f5f5f5;}
.listBox{background: #FFFFFF;padding:24rpx;border-radius:10rpx;} .listBox{background: #FFFFFF;padding:24rpx;border-radius:10rpx;}
.middle .listBox:not(:first-child){margin-top:20rpx;} .middle .listBox:not(:first-child){margin-top:20rpx;}
......
...@@ -51,7 +51,7 @@ export default { ...@@ -51,7 +51,7 @@ export default {
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.search{ .search{
padding: 0 24rpx; padding: 0 24rpx;
position: relative; position: relative;
...@@ -82,6 +82,6 @@ export default { ...@@ -82,6 +82,6 @@ export default {
flex: 1; flex: 1;
} }
.search-btn{ .search-btn{
background: var(--blue); background:$blue;
} }
</style> </style>
...@@ -596,7 +596,7 @@ export default { ...@@ -596,7 +596,7 @@ export default {
.moneyText{color: #FF3C00;font-size:32rpx;font-weight: bold;} .moneyText{color: #FF3C00;font-size:32rpx;font-weight: bold;}
.moneyNumber text:nth-child(2){font-size:62rpx;font-weight: bold;position: relative;left: -6rpx;} .moneyNumber text:nth-child(2){font-size:62rpx;font-weight: bold;position: relative;left: -6rpx;}
.moneyNumber text:last-child{animation: dis 1.5s infinite;transition: 1s;width: 1px;height:56rpx;display: inline-block;background: #333333;position: relative;top:8rpx;} .moneyNumber text:last-child{animation: dis 1.5s infinite;transition: 1s;width: 1px;height:56rpx;display: inline-block;background: #333333;position: relative;top:8rpx;}
.topCoupon{display: flex;height: 90rpx;border-top:1px solid $dividing-ine;align-items:center;padding:0 24rpx;justify-content: space-between;} .topCoupon{display: flex;height: 90rpx;border-top:1px solid $divider;align-items:center;padding:0 24rpx;justify-content: space-between;}
.couponLeft{font-size:24rpx;} .couponLeft{font-size:24rpx;}
.couponLeft text:first-child{margin-right:10rpx;display: inline-block;width:30rpx;height:30rpx;background: #f9690e;color: #FFFFFF;text-align: center;line-height:28rpx;border-radius:4rpx;} .couponLeft text:first-child{margin-right:10rpx;display: inline-block;width:30rpx;height:30rpx;background: #f9690e;color: #FFFFFF;text-align: center;line-height:28rpx;border-radius:4rpx;}
.couponRight{position:relative;left:8rpx;} .couponRight{position:relative;left:8rpx;}
......
...@@ -13,9 +13,13 @@ ...@@ -13,9 +13,13 @@
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/ */
/*分割线颜色*/ /*分割线颜色*/
$dividing-ine:#DBDBDB;//重要 $divider:#DBDBDB;
/*主题颜色*/ /*主题颜色*/
$title-color:#3688FF;//重要 $blue:#3688FF;
/*红色*/
$red:#FC6703;
/*灰色*/
$grey:#999;
/* 颜色变量 */ /* 颜色变量 */
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment