Skip to content

C
CFFP-HB
Commit fe8a6a77 by yuzhenWang
Options

调整适配4

parent 1f16eeb1
Showing with 317 additions and 412 deletions
pages/index/index.vue
...@@ -629,166 +629,164 @@ ...@@ -629,166 +629,164 @@
} }
} }
.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{
border-bottom: 1rpx solid rgba(238, 238, 238, 1); .productTitle {
padding-bottom: 10rpx; border-bottom: 1rpx solid rgba(238, 238, 238, 1);
.titleTxt{ padding-bottom: 10rpx;
padding: 15rpx 30rpx;
display: flex; .titleTxt {
justify-content: space-between; padding: 15rpx 30rpx;
align-items: center; display: flex;
} justify-content: space-between;
.more{ align-items: center;
font-size: 26rpx; }
color: rgba(84, 84, 84, 1);
.icon-youjiantou{ .more {
font-size: 26rpx; font-size: 26rpx;
} color: rgba(84, 84, 84, 1);
}
} .icon-youjiantou {
/* 基础样式 - 移动端优先 */ font-size: 26rpx;
.productList { }
width: 100%; }
box-sizing: border-box; }
.productList {
width: 100%;
box-sizing: border-box;
.productListBox {
padding: 30rpx;
display: grid;
grid-template-columns: repeat(2, 1fr); /* 默认两列 */
gap: 30rpx; /* 间隙 */
.productListItem {
width: 100%; /* 使用grid布局后宽度自动控制 */
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
.top {
width: 100%;
position: relative;
border-radius: 20rpx;
overflow: hidden;
/* 确保图片容器有固定宽高比 */
&::before {
content: "";
display: block;
padding-top: 100%; /* 1:1 宽高比 */
}
.productImg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.productDesBox {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 5rpx 10rpx 10rpx 10rpx;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.1);
border-radius: 0 0 20rpx 20rpx;
font-size: 24rpx;
color: #fff;
display: -webkit-box;
-webkit-line-clamp: 2; /* 关键修改：显示2行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* 移除 white-space: nowrap */
line-height: 1.4; /* 可选：调整行高，使两行更美观 */
}
}
.bottom {
width: 100%;
box-sizing: border-box;
padding: 10rpx 0;
.one {
font-size: 27rpx;
margin-bottom: 5rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.two {
display: flex;
justify-content: space-between;
align-items: center;
.price {
font-size: 28rpx;
color: rgba(32, 39, 155, 1);
}
.num {
font-size: 24rpx;
color: rgba(166, 166, 166, 1);
}
}
}
}
}
}
/* iPad竖屏和小屏幕平板 */
@media (min-width: 768px) and (max-width: 1023px) {
.productList .productListBox {
grid-template-columns: repeat(3, 1fr); /* 三列 */
gap: 30rpx;
.productListBox { }
padding: 30rpx 30rpx; }
display: flex;
flex-wrap: wrap; /* iPad横屏和大屏幕平板 */
justify-content: space-between; @media (min-width: 1024px) and (max-width: 1279px) {
gap: 30rpx; .productList .productListBox {
.productListItem { grid-template-columns: repeat(3, 1fr); /* 三列 */
width: calc(50% - 20rpx); /* 两列布局，考虑间隙 */ gap: 30rpx;
margin-bottom: 20rpx; }
display: flex; }
flex-direction: column;
overflow: hidden; /* 电脑端 */
box-sizing: border-box; @media (min-width: 1280px) {
.productList .productListBox {
.top { grid-template-columns: repeat(4, 1fr); /* 四列 */
width: 100%; gap: 30rpx;
position: relative; }
border-radius: 20rpx; }
overflow: hidden;
.productEmpty {
/* 确保图片容器有固定宽高比 */ color: rgba(166, 166, 166, 1);
&::before { width: 100%;
content: ""; display: flex;
display: block; align-items: center;
padding-top: 100%; /* 1:1 宽高比 */ justify-content: center;
} padding: 30rpx 0;
font-size: 28rpx;
.productImg { }
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.productDesBox {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 5rpx 10rpx 10rpx 10rpx;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.1);
border-radius: 0 0 20rpx 20rpx;
font-size: 24rpx;
color: #fff;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.bottom {
width: 100%;
box-sizing: border-box;
padding: 10rpx 0;
.one {
font-size: 27rpx;
margin-bottom: 5rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.two {
display: flex;
justify-content: space-between;
align-items: center;
.price{
font-size: 28rpx;
color: rgba(32, 39, 155, 1);
}
.num{
font-size: 24rpx;
color: rgba(166, 166, 166, 1);
}
}
}
}
}
}
@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 {
.two {
.price {
font-size: 23rpx;
color: rgba(32, 39, 155, 1);
}
.num {
font-size: 20rpx;
color: rgba(166, 166, 166, 1);
}
}
}
}
}
}
}
.productEmpty{
color: rgba(166, 166, 166, 1);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30rpx 0;
font-size: 28rpx;
}
} }
.joinContent{ .joinContent{
width: 500rpx; width: 500rpx;
......
pages/orderStatus/orderStatus.vue
...@@ -165,258 +165,165 @@ ...@@ -165,258 +165,165 @@
<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{
border-bottom: 1rpx solid rgba(238, 238, 238, 1); .productTitle {
padding-bottom: 10rpx; border-bottom: 1rpx solid rgba(238, 238, 238, 1);
.titleTxt{ padding-bottom: 10rpx;
padding: 15rpx 30rpx;
display: flex; .titleTxt {
justify-content: space-between; padding: 15rpx 30rpx;
align-items: center; display: flex;
} justify-content: space-between;
.more{ align-items: center;
font-size: 26rpx; }
color: rgba(84, 84, 84, 1);
.icon-youjiantou{ .more {
font-size: 26rpx; font-size: 26rpx;
} color: rgba(84, 84, 84, 1);
}
} .icon-youjiantou {
/* 基础样式 - 移动端优先 */ font-size: 26rpx;
.productList { }
width: 100%; }
box-sizing: border-box; }
.productListBox { .productList {
padding: 30rpx 30rpx; width: 100%;
display: flex; box-sizing: border-box;
flex-wrap: wrap;
justify-content: space-between; .productListBox {
gap: 30rpx; padding: 30rpx;
.productListItem { display: grid;
width: calc(50% - 20rpx); /* 两列布局，考虑间隙 */ grid-template-columns: repeat(2, 1fr); /* 默认两列 */
margin-bottom: 20rpx; gap: 30rpx; /* 间隙 */
display: flex;
flex-direction: column; .productListItem {
overflow: hidden; width: 100%; /* 使用grid布局后宽度自动控制 */
box-sizing: border-box; display: flex;
flex-direction: column;
.top { overflow: hidden;
width: 100%; box-sizing: border-box;
position: relative;
border-radius: 20rpx; .top {
overflow: hidden; width: 100%;
position: relative;
/* 确保图片容器有固定宽高比 */ border-radius: 20rpx;
&::before { overflow: hidden;
content: "";
display: block; /* 确保图片容器有固定宽高比 */
padding-top: 100%; /* 1:1 宽高比 */ &::before {
} content: "";
display: block;
.productImg { padding-top: 100%; /* 1:1 宽高比 */
position: absolute; }
top: 0;
left: 0; .productImg {
width: 100%; position: absolute;
height: 100%; top: 0;
object-fit: cover; left: 0;
display: block; width: 100%;
} height: 100%;
object-fit: cover;
.productDesBox { display: block;
position: absolute; }
left: 0;
bottom: 0; .productDesBox {
width: 100%; position: absolute;
padding: 5rpx 10rpx 10rpx 10rpx; left: 0;
box-sizing: border-box; bottom: 0;
background: rgba(0, 0, 0, 0.1); width: 100%;
border-radius: 0 0 20rpx 20rpx; padding: 5rpx 10rpx 10rpx 10rpx;
font-size: 24rpx; box-sizing: border-box;
color: #fff; background: rgba(0, 0, 0, 0.1);
display: -webkit-box; border-radius: 0 0 20rpx 20rpx;
-webkit-line-clamp: 1; font-size: 24rpx;
-webkit-box-orient: vertical; color: #fff;
overflow: hidden; display: -webkit-box;
text-overflow: ellipsis; -webkit-line-clamp: 2; /* 关键修改：显示2行 */
white-space: nowrap; -webkit-box-orient: vertical;
} overflow: hidden;
} text-overflow: ellipsis;
/* 移除 white-space: nowrap */
.bottom { line-height: 1.4; /* 可选：调整行高，使两行更美观 */
width: 100%; }
box-sizing: border-box; }
padding: 10rpx 0;
.bottom {
.one { width: 100%;
font-size: 27rpx; box-sizing: border-box;
margin-bottom: 5rpx; padding: 10rpx 0;
display: -webkit-box;
-webkit-line-clamp: 1; .one {
-webkit-box-orient: vertical; font-size: 27rpx;
overflow: hidden; margin-bottom: 5rpx;
text-overflow: ellipsis; display: -webkit-box;
white-space: nowrap; -webkit-line-clamp: 1;
} -webkit-box-orient: vertical;
overflow: hidden;
.two { text-overflow: ellipsis;
display: flex; white-space: nowrap;
justify-content: space-between; }
align-items: center;
.price{ .two {
font-size: 28rpx; display: flex;
color: rgba(32, 39, 155, 1); justify-content: space-between;
} align-items: center;
.num{
font-size: 24rpx; .price {
color: rgba(166, 166, 166, 1); font-size: 28rpx;
} color: rgba(32, 39, 155, 1);
} }
}
} .num {
} font-size: 24rpx;
} color: rgba(166, 166, 166, 1);
}
/* 平板设备 (768px 以上) */ }
@media (min-width: 768px) { }
.productList { }
.productListBox { }
justify-content: flex-start; }
gap: 40rpx;
/* 添加以下两行确保换行和均匀分布 */ /* iPad竖屏和小屏幕平板 */
display: flex; @media (min-width: 768px) and (max-width: 1023px) {
flex-wrap: wrap; .productList .productListBox {
.productListItem { grid-template-columns: repeat(3, 1fr); /* 三列 */
width: calc((100% - 80rpx) / 3); /* 40rpx = 20rpx * 2（左右间隙） */ gap: 30rpx;
.top{
.productDesBox{ }
padding: 10rpx 20rpx 20rpx 20rpx; }
border-radius: 0 0 40rpx 40rpx;
} /* iPad横屏和大屏幕平板 */
} @media (min-width: 1024px) and (max-width: 1279px) {
.productList .productListBox {
.bottom { grid-template-columns: repeat(3, 1fr); /* 三列 */
.two { gap: 30rpx;
.price { }
font-size: 23rpx; }
color: rgba(32, 39, 155, 1);
} /* 电脑端 */
.num { @media (min-width: 1280px) {
font-size: 20rpx; .productList .productListBox {
color: rgba(166, 166, 166, 1); grid-template-columns: repeat(4, 1fr); /* 四列 */
} gap: 30rpx;
} }
} }
}
} .productEmpty {
} color: rgba(166, 166, 166, 1);
} width: 100%;
.productEmpty{ display: flex;
color: rgba(166, 166, 166, 1); align-items: center;
width: 100%; justify-content: center;
display: flex; padding: 30rpx 0;
align-items: center; font-size: 28rpx;
justify-content: center; }
padding: 30rpx 0;
font-size: 28rpx;
}
}
}
.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