Skip to content

C
CFFP-HB
Commit ab57214a by yuzhenWang
Options

Merge branch 'feature-20250616wyz-页面翻新' into 'dev' 

Feature 20250616wyz 页面翻新

See merge request !30
parents c6cedf99 1f16eeb1
Showing with 32 additions and 144 deletions
App.vue
...@@ -229,30 +229,33 @@ ...@@ -229,30 +229,33 @@
} */ } */
/* 平板设备 (768px-1023px) */ /* 平板设备 (768px-1023px) */
/* @media (min-width: 768px) and (max-width: 1023px) { @media (min-width: 768px) and (max-width: 1023px) {
.container { .container {
max-width: 100%; /* max-width: 100%; */
} */ }
/* iPad竖屏*/ /* iPad竖屏*/
/* @media (orientation: portrait) { /* @media (orientation: portrait) {
.container { .container {
max-width: 650px; max-width: 650px;
} }
} */ } */
/* iPad横屏 */ /* iPad横屏 */
/* @media (orientation: landscape) { @media (orientation: landscape) {
.container { .container {
max-width: 900px; max-width: 1024px;
display: flex;
align-items: center;
flex-direction: column;
} }
} }
} */ }
/* 小桌面设备 (1024px-1279px) */ /* 小桌面设备 (1024px-1279px) */
@media (min-width: 1024px) and (max-width: 1279px) { @media (min-width: 1024px) and (max-width: 1279px) {
.container { .container {
max-width: 980px; max-width: 1000px;
} }
} }
......
pages/courselist/courselist.vue
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<view class="three"> <view class="three">
<text>03</text> <text>03</text>
<view class="titleTxt lastTxt"> <view class="titleTxt lastTxt">
<text>个人中心</text> <text>首页佣金</text>
<text>查看收益</text> <text>查看收益</text>
</view> </view>
</view> </view>
......
pages/index/index.vue
...@@ -756,24 +756,19 @@ ...@@ -756,24 +756,19 @@
.productList { .productList {
.productListBox { .productListBox {
justify-content: flex-start; justify-content: flex-start;
gap: 20rpx; gap: 40rpx;
/* 添加以下两行确保换行和均匀分布 */ /* 添加以下两行确保换行和均匀分布 */
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.productListItem { .productListItem {
/* 改为 calc(33.333% - 14rpx) 确保三个元素完美适应一行 */ width: calc((100% - 80rpx) / 3); /* 40rpx = 20rpx * 2（左右间隙） */
/* 计算方式：100%/3 - (gap*2)/3 */ .top{
width: calc(33.333% - 14rpx); .productDesBox{
/* 或者使用 flex-grow 和 flex-basis 的替代方案 */ padding: 10rpx 20rpx 20rpx 20rpx;
/* flex: 1 0 calc(33.333% - 14rpx); */ border-radius: 0 0 40rpx 40rpx;
}
/* 确保图片和文字比例协调 */ }
.top {
&::before {
// padding-top: 120%; /* 略微调整宽高比 */
}
}
.bottom { .bottom {
.two { .two {
.price { .price {
...@@ -790,83 +785,6 @@ ...@@ -790,83 +785,6 @@
} }
} }
} }
/* 平板设备 (768px 以上) */
// @media (min-width: 768px) {
// .productList {
// .productListBox {
// justify-content: flex-start;
// gap: 20rpx;
// .productListItem {
// width: calc(30% - 20rpx); /* 两列布局，考虑间隙 */
// /* 确保图片和文字比例协调 */
// .top {
// &::before {
// // padding-top: 120%; /* 略微调整宽高比 */
// }
// }
// .bottom{
// .two{
// .price{
// font-size: 23rpx;
// color: rgba(32, 39, 155, 1);
// }
// .num{
// font-size: 20rpx;
// color: rgba(166, 166, 166, 1);
// }
// }
// }
// }
// }
// }
// }
/* 桌面设备 (1024px 以上) */
// @media (min-width: 1024px) {
// .productList {
// .productListBox {
// .productListItem {
// width: calc(25% - 15rpx); /* 四列布局 */
// max-width: 1000rpx; /* 限制最大宽度 */
// .top {
// &::before {
// padding-top: 100%; /* 恢复1:1宽高比 */
// }
// }
// .bottom {
// .one {
// font-size: 24rpx; /* 略微减小字体 */
// }
// .two {
// justify-content: space-between;
// align-items: center;
// // gap: 5rpx;
// text {
// display: block;
// width: 100%;
// }
// }
// }
// }
// }
// }
// }
// /* 超大桌面设备 (1200px 以上) */
// @media (min-width: 1200px) {
// .productList {
// .productListBox {
// .productListItem {
// width: calc(25% - 16rpx); /* 五列布局 */
// }
// }
// }
// }
.productEmpty{ .productEmpty{
color: rgba(166, 166, 166, 1); color: rgba(166, 166, 166, 1);
...@@ -927,35 +845,7 @@ ...@@ -927,35 +845,7 @@
font-size: 28rpx; font-size: 28rpx;
} }
} }
// 之前的样式
// .top {
// .compony {
// display: flex;
// align-items: center;
// .name {
// font-size: 36rpx;
// }
// image {
// margin-right: 40rpx;
// }
// .icon-31tishi {
// font-size: 40rpx;
// }
// }
// .banner {
// border-radius: 20rpx;
// overflow: hidden;
// margin-bottom: 30rpx;
// .swiper{
// height:250rpx;
// }
// }
// }
.message { .message {
display: flex; display: flex;
......
pages/orderStatus/orderStatus.vue
...@@ -291,24 +291,19 @@ ...@@ -291,24 +291,19 @@
.productList { .productList {
.productListBox { .productListBox {
justify-content: flex-start; justify-content: flex-start;
gap: 20rpx; gap: 40rpx;
/* 添加以下两行确保换行和均匀分布 */ /* 添加以下两行确保换行和均匀分布 */
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.productListItem { .productListItem {
/* 改为 calc(33.333% - 14rpx) 确保三个元素完美适应一行 */ width: calc((100% - 80rpx) / 3); /* 40rpx = 20rpx * 2（左右间隙） */
/* 计算方式：100%/3 - (gap*2)/3 */ .top{
width: calc(33.333% - 14rpx); .productDesBox{
/* 或者使用 flex-grow 和 flex-basis 的替代方案 */ padding: 10rpx 20rpx 20rpx 20rpx;
/* flex: 1 0 calc(33.333% - 14rpx); */ border-radius: 0 0 40rpx 40rpx;
}
/* 确保图片和文字比例协调 */ }
.top {
&::before {
// padding-top: 120%; /* 略微调整宽高比 */
}
}
.bottom { .bottom {
.two { .two {
.price { .price {
......
pages/pointsExchange/pointsExchange.vue
...@@ -144,7 +144,7 @@ ...@@ -144,7 +144,7 @@
scoreList:[ scoreList:[
{name:'总积分',value:'0.00',id:'1',position:'bottom',content:'包含已兑换＋待结算＋兑换中的积分'}, {name:'总积分',value:'0.00',id:'1',position:'bottom',content:'包含已兑换＋待结算＋兑换中的积分'},
{name:'已兑换',value:'0.00',id:'2',position:'bottom',content:'已经提取入账的积分'}, {name:'已兑换',value:'0.00',id:'2',position:'bottom',content:'已经提取入账的积分'},
{name:'待结算',value:'0.00',id:'3',position:'left',content:'用户商品未使用或还在七天可退换时间内'}, {name:'待结算',value:'0.00',id:'3',position:'left',content:'订单成交后需等待7天结算期'},
{name:'兑换中',value:'0.00',id:'4',position:'left',content:'正在审核中的积分'}, {name:'兑换中',value:'0.00',id:'4',position:'left',content:'正在审核中的积分'},
], ],
commissionTypeList:[], commissionTypeList:[],
......
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