Skip to content

C
CFFP-HB
Commit 7f4ca854 by yuzhenWang
Options

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

调整适配4

See merge request !31
parents ab57214a fe8a6a77
Showing with 84 additions and 179 deletions
pages/index/index.vue
...@@ -635,42 +635,45 @@ ...@@ -635,42 +635,45 @@
} }
} }
.productBox{ .productBox {
background-color: #fff; background-color: #fff;
margin-top: 15rpx; margin-top: 15rpx;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 100rpx; margin-bottom: 100rpx;
.productTitle{
.productTitle {
border-bottom: 1rpx solid rgba(238, 238, 238, 1); border-bottom: 1rpx solid rgba(238, 238, 238, 1);
padding-bottom: 10rpx; padding-bottom: 10rpx;
.titleTxt{
.titleTxt {
padding: 15rpx 30rpx; padding: 15rpx 30rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.more{
.more {
font-size: 26rpx; font-size: 26rpx;
color: rgba(84, 84, 84, 1); color: rgba(84, 84, 84, 1);
.icon-youjiantou{
.icon-youjiantou {
font-size: 26rpx; font-size: 26rpx;
} }
} }
} }
/* 基础样式 - 移动端优先 */
.productList { .productList {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
.productListBox { .productListBox {
padding: 30rpx 30rpx; padding: 30rpx;
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(2, 1fr); /* 默认两列 */
justify-content: space-between; gap: 30rpx; /* 间隙 */
gap: 30rpx;
.productListItem { .productListItem {
width: calc(50% - 20rpx); /* 两列布局，考虑间隙 */ width: 100%; /* 使用grid布局后宽度自动控制 */
margin-bottom: 20rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
...@@ -711,11 +714,12 @@ ...@@ -711,11 +714,12 @@
font-size: 24rpx; font-size: 24rpx;
color: #fff; color: #fff;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 2; /* 关键修改：显示2行 */
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; /* 移除 white-space: nowrap */
line-height: 1.4; /* 可选：调整行高，使两行更美观 */
} }
} }
...@@ -739,11 +743,13 @@ ...@@ -739,11 +743,13 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.price{
.price {
font-size: 28rpx; font-size: 28rpx;
color: rgba(32, 39, 155, 1); color: rgba(32, 39, 155, 1);
} }
.num{
.num {
font-size: 24rpx; font-size: 24rpx;
color: rgba(166, 166, 166, 1); color: rgba(166, 166, 166, 1);
} }
...@@ -752,41 +758,33 @@ ...@@ -752,41 +758,33 @@
} }
} }
} }
@media (min-width: 768px) {
.productList {
.productListBox {
justify-content: flex-start;
gap: 40rpx;
/* 添加以下两行确保换行和均匀分布 */
display: flex;
flex-wrap: wrap;
.productListItem {
width: calc((100% - 80rpx) / 3); /* 40rpx = 20rpx * 2（左右间隙） */
.top{
.productDesBox{
padding: 10rpx 20rpx 20rpx 20rpx;
border-radius: 0 0 40rpx 40rpx;
}
}
.bottom { /* iPad竖屏和小屏幕平板 */
.two { @media (min-width: 768px) and (max-width: 1023px) {
.price { .productList .productListBox {
font-size: 23rpx; grid-template-columns: repeat(3, 1fr); /* 三列 */
color: rgba(32, 39, 155, 1); gap: 30rpx;
}
.num {
font-size: 20rpx;
color: rgba(166, 166, 166, 1);
}
} }
} }
/* iPad横屏和大屏幕平板 */
@media (min-width: 1024px) and (max-width: 1279px) {
.productList .productListBox {
grid-template-columns: repeat(3, 1fr); /* 三列 */
gap: 30rpx;
} }
} }
/* 电脑端 */
@media (min-width: 1280px) {
.productList .productListBox {
grid-template-columns: repeat(4, 1fr); /* 四列 */
gap: 30rpx;
} }
} }
.productEmpty{ .productEmpty {
color: rgba(166, 166, 166, 1); color: rgba(166, 166, 166, 1);
width: 100%; width: 100%;
display: flex; display: flex;
......
pages/orderStatus/orderStatus.vue
...@@ -168,42 +168,45 @@ ...@@ -168,42 +168,45 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.container{ .container{
padding-bottom: 50rpx; padding-bottom: 50rpx;
.productBox{ .productBox {
background-color: #fff; background-color: #fff;
margin-top: 15rpx; margin-top: 15rpx;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 100rpx; margin-bottom: 100rpx;
.productTitle{
.productTitle {
border-bottom: 1rpx solid rgba(238, 238, 238, 1); border-bottom: 1rpx solid rgba(238, 238, 238, 1);
padding-bottom: 10rpx; padding-bottom: 10rpx;
.titleTxt{
.titleTxt {
padding: 15rpx 30rpx; padding: 15rpx 30rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.more{
.more {
font-size: 26rpx; font-size: 26rpx;
color: rgba(84, 84, 84, 1); color: rgba(84, 84, 84, 1);
.icon-youjiantou{
.icon-youjiantou {
font-size: 26rpx; font-size: 26rpx;
} }
} }
} }
/* 基础样式 - 移动端优先 */
.productList { .productList {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
.productListBox { .productListBox {
padding: 30rpx 30rpx; padding: 30rpx;
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(2, 1fr); /* 默认两列 */
justify-content: space-between; gap: 30rpx; /* 间隙 */
gap: 30rpx;
.productListItem { .productListItem {
width: calc(50% - 20rpx); /* 两列布局，考虑间隙 */ width: 100%; /* 使用grid布局后宽度自动控制 */
margin-bottom: 20rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
...@@ -244,11 +247,12 @@ ...@@ -244,11 +247,12 @@
font-size: 24rpx; font-size: 24rpx;
color: #fff; color: #fff;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 2; /* 关键修改：显示2行 */
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; /* 移除 white-space: nowrap */
line-height: 1.4; /* 可选：调整行高，使两行更美观 */
} }
} }
...@@ -272,11 +276,13 @@ ...@@ -272,11 +276,13 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.price{
.price {
font-size: 28rpx; font-size: 28rpx;
color: rgba(32, 39, 155, 1); color: rgba(32, 39, 155, 1);
} }
.num{
.num {
font-size: 24rpx; font-size: 24rpx;
color: rgba(166, 166, 166, 1); color: rgba(166, 166, 166, 1);
} }
...@@ -286,41 +292,32 @@ ...@@ -286,41 +292,32 @@
} }
} }
/* 平板设备 (768px 以上) */ /* iPad竖屏和小屏幕平板 */
@media (min-width: 768px) { @media (min-width: 768px) and (max-width: 1023px) {
.productList { .productList .productListBox {
.productListBox { grid-template-columns: repeat(3, 1fr); /* 三列 */
justify-content: flex-start; gap: 30rpx;
gap: 40rpx;
/* 添加以下两行确保换行和均匀分布 */
display: flex;
flex-wrap: wrap;
.productListItem {
width: calc((100% - 80rpx) / 3); /* 40rpx = 20rpx * 2（左右间隙） */
.top{
.productDesBox{
padding: 10rpx 20rpx 20rpx 20rpx;
border-radius: 0 0 40rpx 40rpx;
}
}
.bottom {
.two {
.price {
font-size: 23rpx;
color: rgba(32, 39, 155, 1);
}
.num {
font-size: 20rpx;
color: rgba(166, 166, 166, 1);
}
} }
} }
/* iPad横屏和大屏幕平板 */
@media (min-width: 1024px) and (max-width: 1279px) {
.productList .productListBox {
grid-template-columns: repeat(3, 1fr); /* 三列 */
gap: 30rpx;
} }
} }
/* 电脑端 */
@media (min-width: 1280px) {
.productList .productListBox {
grid-template-columns: repeat(4, 1fr); /* 四列 */
gap: 30rpx;
} }
} }
.productEmpty{
.productEmpty {
color: rgba(166, 166, 166, 1); color: rgba(166, 166, 166, 1);
width: 100%; width: 100%;
display: flex; display: flex;
...@@ -331,95 +328,5 @@ ...@@ -331,95 +328,5 @@
} }
} }
} }
.ulBox{
flex-direction: column;
}
.liBox{
background-color: #fff;
border-radius: 20rpx;
margin-bottom: 10rpx;
padding: 10rpx;
}
.statusBox{
padding: 30rpx 0;
background-color: #fff;
margin-bottom: 10rpx;
.successBox{
display: flex;
flex-direction: column;
align-items: center;
.statusText{
color: #20279B;
font-size: 36rpx;
}
.viewOrder{
color: #fff;
font-size: 30rpx;
margin-top: 30rpx;
background-color: #20279B;
padding: 10rpx 20rpx;
border-radius: 40rpx;
}
.iconfont{
margin-bottom: 30rpx;
font-size: 100rpx;
color: #20279B;
}
}
.failBox{
display: flex;
flex-direction: column;
align-items: center;
.iconfont{
border: 1px solid #F15A1F;
padding: 12rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.optionBox{
display: flex;
justify-content: center;
margin-top: 60rpx;
text{
border-radius: 40rpx;
background-color: #20279B;
color: #fff;
font-size: 30rpx;
padding: 10rpx 50rpx;
margin-right: 20rpx;
&:first-child{
background-color: transparent;
color: #20279B;
border: 1px solid #20279B;
}
}
}
}
}
.course_content{
background: #fff;
position: relative;
padding: 0 30rpx 100rpx 30rpx;
.tag{
padding: 20rpx;
display: flex;
justify-content: space-between;
h4{
// margin-left: 20rpx;
}
}
.tag:before{
position: absolute;
left: 20rpx;
top: 20rpx;
display: inline-block;
content: '';
width: 2px;
height: 16px;
background-color: #F15A1F;
border-radius: 2px;
}
}
</style> </style>
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